/* ============================================================
   Table Styles
   ============================================================ */

.gvp-tbl-wrapper {
    overflow-x: auto;
    overflow-y: auto;
    max-height: calc(100vh - 400px);
    scrollbar-width: none;
}

.gvp-tbl-wrapper::-webkit-scrollbar {
    display: none;
}

.gvp-tbl {
    width: 90%;
    border-collapse: separate;
    border-spacing: 0 1px;
    table-layout: fixed;
}

.gvp-tbl__head {
    background-color: var(--gvp-tbl-bg-head);
    position: sticky;
    top: 0;
    z-index: 10;
}

.gvp-tbl__header {
    padding: var(--gvp-tbl-cell-padding);
    font-weight: 600;
    font-size: var(--gvp-tbl-font-size);
    color: var(--gvp-tbl-text-header);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    overflow: hidden;
}

.gvp-tbl__row {
    cursor: pointer;
}


/* Ховер лише основного рядка даних — не рядка з бейджами команди (.gvp-tbl__row--team-tabs) */
.gvp-tbl__row:not(.gvp-tbl__row--team-tabs) td {
    position: relative;
    z-index: 0;
}

.gvp-tbl__row:not(.gvp-tbl__row--team-tabs) td::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.32s ease;
}

.gvp-tbl__row:not(.gvp-tbl__row--team-tabs):hover td::before {
    opacity: 1;
    background-image: linear-gradient(
        90deg,
        rgba(39, 16, 64, 0.98) 0%,
        rgba(26, 21, 48, 0.94) 48%,
        rgba(20, 21, 33, 0.98) 100%
    );
    background-attachment: fixed;
}

.gvp-tbl__row:not(.gvp-tbl__row--team-tabs):hover td:first-child::before {
    border-radius: 15px 0 0 15px;
}

.gvp-tbl__row:not(.gvp-tbl__row--team-tabs):hover td:last-child::before {
    border-radius: 0 15px 15px 0;
}

.gvp-tbl__row:not(.gvp-tbl__row--team-tabs):hover td {
    border-bottom-color: transparent;
}

/* Межа між рядками: прибираємо лише коли наведено на наступний рядок даних (не на рядок вкладок) */
.gvp-tbl__row:has(+ .gvp-tbl__row:not(.gvp-tbl__row--team-tabs):hover) td {
    border-bottom-color: transparent;
}

.gvp-tbl__cell {
    padding: var(--gvp-tbl-cell-padding);
    font-size: var(--gvp-tbl-font-size);
    color: var(--gvp-tbl-text-cell);
    vertical-align: middle;
}

/* Тип — компактний; пріоритет — той самий візуальний рівень, що кружки команди (32px) */
.gvp-tbl__cell .gvp-badge--type {
    padding: 0.12rem 0.45rem;
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.25;
}

.gvp-tbl__cell .gvp-badge--priority,
.gvp-tbl__cell .gvp-badge--priority-empty {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0.2rem 0.65rem;
    font-size: 1.3125rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.05em;
}

.gvp-tbl__cell .gvp-badge--priority-empty {
    min-width: 32px;
    font-size: 1.125rem;
    font-weight: 600;
    color: #9ca3af;
}

.gvp-tbl__cell .gvp-badge--priority:not(.gvp-badge--priority-empty) {
    filter: saturate(0.7) brightness(0.92);
}

/* Колір типу задається inline з БД (video_type_badge_style); без фіксованого фіолетового фону */

.gvp-tbl__cell .gvp-badge--platform {
    margin-top: 0;
    font-size: 1rem;
    gap: 0.35rem;
    opacity: 0.88;
}

.gvp-tbl__cell .gvp-badge--platform i {
    font-size: 1rem;
    line-height: 1;
}

/* Той самий масштаб, що й badge, у режимі inline-редагування списку проєктів */
.gvp-tbl__cell--platform .gvp-detail-row-pill--platform {
    font-size: 1rem;
    font-weight: 600;
    gap: 0.35rem;
    line-height: 1.25;
}

.gvp-tbl__cell--platform .gvp-detail-row-pill--platform i {
    font-size: 1rem;
    line-height: 1;
}

.gvp-tbl__cell .gvp-badge--platform .fa-youtube {
    filter: drop-shadow(0 0 2px rgba(247, 77, 77, 0.22));
}

.gvp-tbl__cell .gvp-badge--platform .fa-share-nodes {
    filter: drop-shadow(0 0 2px rgba(168, 85, 247, 0.22));
}

/* Індивідуальні стилі для колонок таблиці */

/* Колонка № */
.gvp-tbl__header--number {
    width: var(--gvp-tbl-col-number-width-pct, var(--gvp-tbl-col-number-width));
    min-width: var(--gvp-tbl-col-number-width);
    text-align: var(--gvp-tbl-col-number-align);
}

.gvp-tbl__cell--number {
    text-align: var(--gvp-tbl-col-number-align);
    font-weight: 600;
    color: var(--gvp-tbl-col-number-color);
}

/* Колонка Пріоритет — власна ширина (не як вузька колонка №) */
.gvp-tbl__header--priority {
    width: var(--gvp-tbl-col-priority-width-pct, var(--gvp-tbl-col-priority-width));
    min-width: var(--gvp-tbl-col-priority-width);
    text-align: var(--gvp-tbl-col-priority-align);
}

.gvp-tbl__cell--priority {
    text-align: var(--gvp-tbl-col-priority-align);
}

/* Колонка Назва */
.gvp-tbl__header--name {
    width: var(--gvp-tbl-col-name-width-pct, var(--gvp-tbl-col-name-width));
    min-width: var(--gvp-tbl-col-name-width);
    text-align: var(--gvp-tbl-col-name-align);
}

.gvp-tbl__cell--name {
    font-weight: 600;
    color: var(--gvp-tbl-col-name-color);
    text-align: var(--gvp-tbl-col-name-align);
}

/* Колонка Платформа */
.gvp-tbl__header--platform {
    width: var(--gvp-tbl-col-platform-width-pct, var(--gvp-tbl-col-platform-width));
    min-width: var(--gvp-tbl-col-platform-width);
    text-align: var(--gvp-tbl-col-platform-align);
}

.gvp-tbl__cell--platform {
    text-align: var(--gvp-tbl-col-platform-align);
}

/* Колонка Напрямок */
.gvp-tbl__header--direction {
    width: var(--gvp-tbl-col-direction-width-pct, var(--gvp-tbl-col-direction-width));
    min-width: var(--gvp-tbl-col-direction-width);
    text-align: var(--gvp-tbl-col-direction-align);
}

.gvp-tbl__cell--direction {
    text-align: var(--gvp-tbl-col-direction-align);
    max-width: 180px;
}

/* Колонка Тип */
.gvp-tbl__header--type {
    width: var(--gvp-tbl-col-type-width-pct, var(--gvp-tbl-col-type-width));
    min-width: var(--gvp-tbl-col-type-width);
    text-align: var(--gvp-tbl-col-type-align);
}

.gvp-tbl__cell--type {
    text-align: var(--gvp-tbl-col-type-align);
}

/* Колонка Замовник */
.gvp-tbl__header--customer {
    width: var(--gvp-tbl-col-customer-width-pct, 10%);
    min-width: 110px;
    text-align: left;
}

.gvp-tbl__cell--customer {
    text-align: left;
}

.gvp-tbl__customer,
.gvp-tbl__customer-empty {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Контейнер для кількох учасників команди в одній клітинці */
.gvp-tbl__customer-multi {
    display: flex;
    flex-direction: column;
    gap: 2px; /* невеликий вертикальний відступ між людьми */
}

.gvp-tbl__customer-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    letter-spacing: 0.03em;
}

.gvp-tbl__customer-avatar--empty {
    background-color: rgba(148, 163, 184, 0.2);
    color: #64748b;
    border: 1px dashed #475569;
}

.gvp-tbl__customer-info {
    display: flex;
    flex-direction: column;
    gap: 0;
    line-height: 1.3;
    min-width: 0;
}

.gvp-tbl__customer-firstname {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gvp-tbl-text-cell);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gvp-tbl__customer-lastname {
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--gvp-tbl-text-header);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Роль у колонці "Команда" — тепер через уніфіковані класи gvp-team-role-badge */
.gvp-tbl__customer-role {
    display: inline-block;
    margin-right: 0.25rem;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Кольори успадковуються з gvp-team-role-badge--* */
.gvp-tbl__customer-role--cust { color: #38bdf8; }
.gvp-tbl__customer-role--pm   { color: #c084fc; }
.gvp-tbl__customer-role--exec { color: #4ade80; }
.gvp-tbl__customer-role--auth { color: #fb923c; }

.gvp-tbl__customer-name {
    font-size: 0.8rem;
    color: #64748b;
}

/* Колонка Дата зйомки */
.gvp-tbl__header--shooting-date {
    width: var(--gvp-tbl-col-shooting-date-width-pct, var(--gvp-tbl-col-shooting-date-width));
    min-width: var(--gvp-tbl-col-shooting-date-width);
    text-align: var(--gvp-tbl-col-shooting-date-align);
    margin-right: 10px;
}

.gvp-tbl__cell--shooting-date {
    color: var(--gvp-tbl-col-shooting-date-color);
    text-align: var(--gvp-tbl-col-shooting-date-align);
    padding: 0.15rem 0.35rem;
    font-size: inherit;
    overflow: visible;
    position: relative;
    vertical-align: middle;
}

/* Одна дата зйомки — «пігулка» темно-зелена + лайм (як у макеті); розміри узгоджені з .gvp-ready-date-badge */
.gvp-tbl__cell--shooting-date .gvp-shooting-dates-single {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.125rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(55, 62, 40, 0.95) 0%, rgba(22, 28, 18, 0.98) 100%);
    border: 1px solid #b5e600;
    font-size: 0.875rem;
    font-weight: 600;
    color: #c8ff2d;
    white-space: nowrap;
    box-shadow: 0 0 0 1px rgba(167, 242, 5, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Кілька дат: перша дата в пігулці + лічильник; список у hover (absolute) */
.gvp-shooting-date-stack {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    z-index: 1;
}

.gvp-shooting-date-stack:hover,
.gvp-shooting-date-stack:focus-within {
    z-index: 50;
}

/* Увесь ряд над наступним: інакше наступний <tr> малюється поверх absolute-popup */
.gvp-tbl__row:not(.gvp-tbl__row--team-tabs):has(.gvp-shooting-date-stack:hover),
.gvp-tbl__row:not(.gvp-tbl__row--team-tabs):has(.gvp-shooting-date-stack:focus-within) {
    position: relative;
    z-index: 250;
}

.gvp-shooting-dates-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.125rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(55, 62, 40, 0.95) 0%, rgba(22, 28, 18, 0.98) 100%);
    border: 1px solid #b5e600;
    font-size: 0.875rem;
    font-weight: 600;
    color: #c8ff2d;
    white-space: nowrap;
    box-shadow: 0 0 0 1px rgba(167, 242, 5, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    cursor: default;
}

.gvp-shooting-dates-pill__text {
    color: inherit;
}

.gvp-shooting-dates-pill--has-many {
    padding-right: 1rem;
}

.gvp-shooting-dates-pill__badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: #c8ff2d;
    color: #0f172a;
    font-size: 0.625rem;
    font-weight: 800;
    line-height: 17px;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

/* Панель усіх дат — absolute, не роздуває висоту рядка таблиці */
.gvp-shooting-dates-hover-panel {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(100% + 6px);
    z-index: 5;
    min-width: 9.5rem;
    max-width: min(18rem, 70vw);
    padding: 0.35rem 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    align-items: stretch;
    background: rgba(15, 23, 42, 0.98);
    border: 1px solid rgba(181, 230, 0, 0.45);
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.16s ease, visibility 0.16s ease;
}

.gvp-shooting-date-stack:hover .gvp-shooting-dates-hover-panel,
.gvp-shooting-date-stack:focus-within .gvp-shooting-dates-hover-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.gvp-shooting-dates-hover-panel__row {
    font-size: 0.75rem;
    font-weight: 600;
    color: #c8ff2d;
    text-align: center;
    padding: 0.25rem 0.35rem;
    border-radius: 4px;
    line-height: 1.25;
}

.gvp-shooting-dates-hover-panel__row + .gvp-shooting-dates-hover-panel__row {
    border-top: 1px solid rgba(167, 242, 5, 0.12);
}

/* «Зйомка не потрібна» — той самий силует пігулки, що й .gvp-shooting-dates-single / pill; нейтральний сланець (не дата) */
.gvp-tbl__cell--shooting-date .gvp-shooting-dates-not-needed {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.125rem;
    padding: 0.35rem 14px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(51, 65, 85, 0.88) 0%, rgba(30, 41, 59, 0.96) 100%);
    border: 1px solid rgba(148, 163, 184, 0.42);
    font-size: 0.875rem;
    font-weight: 600;
    color: #cbd5e1;
    white-space: nowrap;
    box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Колонка Бажана дата готовності */
.gvp-tbl__header--ready-date {
    width: var(--gvp-tbl-col-ready-date-width-pct, var(--gvp-tbl-col-ready-date-width));
    min-width: var(--gvp-tbl-col-ready-date-width);
    text-align: var(--gvp-tbl-col-ready-date-align);
}

.gvp-tbl__cell--ready-date {
    color: var(--gvp-tbl-col-ready-date-color);
    text-align: var(--gvp-tbl-col-ready-date-align);
    padding: 0.15rem 0.35rem;
}

/* Стилі для бажаної дати готовності в таблиці — та сама висота/шрифт, що й пігулка дати зйомки */
.gvp-tbl__cell--ready-date .gvp-ready-date-badge {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-height: 2.125rem;
    padding: 0.35rem 0.85rem;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15) 0%, rgba(147, 51, 234, 0.1) 100%);
    border-radius: 50px;
    border: 1px solid rgba(168, 85, 247, 0.3);
    font-size: 0.875rem;
    color: #c084fc;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(168, 85, 247, 0.12);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.gvp-tbl__cell--ready-date .gvp-ready-date-icon {
    width: 16px;
    height: 16px;
    stroke-width: 2;
    color: #c084fc;
    flex-shrink: 0;
}

.gvp-tbl__cell--ready-date .gvp-ready-date-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.gvp-tbl__cell--ready-date .gvp-ready-date-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.25);
    border-color: rgba(168, 85, 247, 0.5);
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(147, 51, 234, 0.15) 100%);
}

.gvp-tbl__cell--ready-date .gvp-ready-date-badge:hover .gvp-ready-date-icon {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

.gvp-tbl__cell--ready-date .gvp-ready-date-badge:hover::before {
    left: 100%;
}

/* Стилі для порожньої дати готовності */
.gvp-tbl__cell--ready-date .gvp-ready-date-empty {
    color: #6b7280;
    font-style: italic;
    font-size: 0.875rem;
}

/* Колонка Наповнення */
.gvp-tbl__header--completeness {
    width: var(--gvp-tbl-col-completeness-width-pct, var(--gvp-tbl-col-completeness-width));
    min-width: var(--gvp-tbl-col-completeness-width);
    text-align: var(--gvp-tbl-col-completeness-align);
}

.gvp-tbl__cell--completeness {
    text-align: var(--gvp-tbl-col-completeness-align);
    padding: 0.2rem 0.35rem;
    vertical-align: middle;
}

/* Стилі для іконок наповнення */
.gvp-completeness-icons {
    display: flex;
    flex-direction: column;
    align-items: right;
    justify-content: right;
    background-color: transparent;
    width: 100%;
    padding: 0.2rem 0.25rem;
    gap: 0.15rem;
}

.gvp-completeness-icons-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
}

.gvp-completeness-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: #6b7280;
    opacity: 0.4;
    transition: all 0.2s ease;
    cursor: help;
}

.gvp-completeness-icon svg {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.gvp-completeness-icon__davinci,
.gvp-completeness-icon__todoist,
.gvp-completeness-icon__frameio,
.gvp-completeness-icon__correspondence {
    width: 18px;
    height: 18px;
    object-fit: contain;
    filter: grayscale(100%) opacity(0.4);
    transition: all 0.2s ease;
}

.gvp-completeness-icon--active {
    opacity: 1;
    color: #10b981;
    filter: drop-shadow(0 0 4px rgba(16, 185, 129, 0.5));
}

.gvp-completeness-icon--active svg {
    stroke-width: 2.5;
}

.gvp-completeness-icon--active .gvp-completeness-icon__davinci {
    filter: grayscale(0%) opacity(1);
    filter: drop-shadow(0 0 4px rgba(16, 185, 129, 0.5));
}

/* Todoist: лічильник задач у тому ж flex-ряду, що й інші іконки (без absolute) */
.gvp-completeness-icon--todoist {
    width: auto;
    min-width: 0;
    max-width: none;
    flex-shrink: 0;
    display: inline-flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-start;
    gap: 0.35rem;
    height: auto;
    min-height: 22px;
}

.gvp-completeness-icon--todoist .gvp-completeness-icon__todoist {
    flex-shrink: 0;
}

/* Спеціальне світіння для Todoist - червоне */
.gvp-completeness-icon--todoist.gvp-completeness-icon--active .gvp-completeness-icon__todoist {
    filter: grayscale(0%) opacity(1);
    filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.5));
}

/* Спеціальне світіння для Frame.io - зберігаємо логотип та лічильник */
.gvp-completeness-icon--frameio.gvp-completeness-icon--active .gvp-completeness-icon__frameio {
    filter: grayscale(0%) opacity(1);
    filter: drop-shadow(0 0 4px rgba(59, 130, 246, 0.6));
    position: relative;
}

/* Лічильник зліва від логотипу */
.gvp-completeness-icon--frameio.gvp-completeness-icon--active .gvp-completeness-icon__count {
    position: absolute;
    top: -6px;

}

/* Динамічний контейнер для світлофора та обведення */
.gvp-completeness-icon--frameio.gvp-completeness-icon--active {
    width: auto;
    padding: 8px 10px;

    gap: 6px;
    justify-content: flex-start;
    border: 1px solid rgba(72, 84, 103, 0.4);
    border-radius: 5px;
    background: rgba(59, 130, 246, 0.05);
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.2);
}

/* Контейнер для кружечків світлофора */
.gvp-frameio-traffic-light {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 4px;
    height: 18px;
}

/* Стилі для кружечків світлофора */
.gvp-frameio-traffic-light__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    opacity: 0.3;
    transition: opacity 0.2s ease;
}

/* Кольори для різних статусів */
.gvp-frameio-traffic-light__dot--approved {
    background-color: #10b981;
}

.gvp-frameio-traffic-light__dot--revisions {
    background-color: #f59e0b;
}

.gvp-frameio-traffic-light__dot--pending {
    background-color: #ef4444;
}

.gvp-frameio-traffic-light__dot--published {
    background-color: #3b82f6;
}

.gvp-frameio-traffic-light__dot--skipped {
    background-color: #9ca3af;
}

/* Активний кружечок (показує статус) */
.gvp-frameio-traffic-light__dot--active {
    opacity: 1;
    box-shadow: 0 0 4px currentColor;
}

/* Спеціальне світіння для переписки - синювате */
.gvp-completeness-icon--active .gvp-completeness-icon__correspondence {
    filter: grayscale(0%) opacity(1);
    filter: drop-shadow(0 0 4px rgba(59, 130, 246, 0.6));
}

/* Спеціальне світіння для Todoist - червоне */
.gvp-completeness-icon--todoist.gvp-completeness-icon--active {
    color: #ef4444;
}

/* Стилі для системності проекту */
.gvp-completeness-icon--system {
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

.gvp-completeness-system-text {
    display: inline-block;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: currentColor;
}

/* Спеціальне світіння для системного проекту - зелений */
.gvp-completeness-icon--system.gvp-completeness-icon--active {
    color: #10b981;
    filter: drop-shadow(0 0 4px rgba(16, 185, 129, 0.5));
}

/* Спеціальне світіння для Frame.io - синювате */
.gvp-completeness-icon--frameio.gvp-completeness-icon--active {
    color: #3b82f6;
    filter: drop-shadow(0 0 4px rgba(59, 130, 246, 0.6));
}

/* Спеціальні стилі для пріоритету - колір встановлюється через inline style */
.gvp-completeness-icon[style*="color"] {
    opacity: 1;
}

.gvp-completeness-icon[style*="color"] svg {
    filter: drop-shadow(0 0 4px currentColor);
}

.gvp-completeness-icon__count {
    position: absolute;
    top: -6px;
    right: -6px;
    background-color: #10b981;
    color: #ffffff;
    font-size: 0.625rem;
    font-weight: 600;
    padding: 0.125rem 0.25rem;
    border-radius: 8px;
    min-width: 16px;
    text-align: center;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Лічильник задач Todoist — у потоці flex (row-reverse: пігулка зліва від логотипу) */
.gvp-completeness-icon__count--todoist {
    position: static;
    top: auto;
    right: auto;
    background-color: #1e293b;
    border: 1px solid #3d4855;
    color: #e5e7eb;
    font-size: 0.625rem;
    font-weight: 600;
    padding: 0.25rem 0.375rem;
    border-radius: 6px;
    min-width: auto;
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.gvp-completeness-tasks-completed {
    color: #10b981;
    font-weight: 600;
}

.gvp-completeness-tasks-separator {
    color: #64748b;
}

.gvp-completeness-tasks-total {
    color: #9ca3af;
}

.gvp-completeness-tasks-empty {
    color: #64748b;
}

.gvp-completeness-tasks-overdue {
    color: #ef4444;
    font-weight: 600;
}

.gvp-completeness-tasks-ghost {
    color: #64748b;
    opacity: 0.45;
    filter: grayscale(100%);
    font-weight: 500;
    letter-spacing: 0.03em;
}

/* Стилі для тексту складності */
.gvp-completeness-icon--complexity {
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    min-width: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.gvp-completeness-complexity-text {
    display: inline-block;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

.gvp-completeness-icon--complexity.gvp-completeness-icon--active {
    filter: drop-shadow(0 0 4px currentColor);
}

/* Стилі для складності без значення (сірий AAA) */
.gvp-completeness-icon--complexity:not(.gvp-completeness-icon--active) {
    filter: none;
}

/* Прогрес-бар етапів проекту */
.gvp-completeness-stages {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-top: 0.2rem;
    padding-top: 0.2rem;
    width: 100%;
}

.gvp-completeness-stages__bar {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.gvp-completeness-stages .gvp-sidebar-project__stage-indicator {
    position: relative;
    width: auto;
    min-width: 30px;
    height: 20px;
    border-radius: 4px;
    flex-shrink: 0;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.375rem;
}

.gvp-stage-indicator__label {
    font-size: 0.625rem;
    font-weight: 600;
    color: #ffffff;
    text-transform: lowercase;
    line-height: 1;
    text-align: center;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}

.gvp-completeness-stages .gvp-sidebar-project__stage-indicator--completed {
    background-color: rgba(72, 153, 139, 1);
    box-shadow: 0 0 4px 0 rgba(98, 192, 104, 1);
}

.gvp-completeness-stages .gvp-sidebar-project__stage-indicator--active {
    background-color: #A855F7;
}

.gvp-completeness-stages .gvp-sidebar-project__stage-indicator--pending {
    background-color: #64748b;
    opacity: 0.5;
}

/* Ghost прогрес-бар — стадії не вказані */
.gvp-completeness-stages--empty {
    opacity: 0.35;
}

.gvp-completeness-stages__ghost-bar {
    min-width: 30px;
    height: 20px;
    border-radius: 4px;
    background-color: #64748b;
    filter: grayscale(100%);
}

/* Стилі для номера пріоритету */
.gvp-completeness-icon__priority {
    position: absolute;
    top: -4px;
    right: -8px;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.125rem 0.25rem;
    border-radius: 4px;
    min-width: 20px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: #6b7280; /* За замовчуванням сірий */
}

/* Кольори для пріоритету P1 (червоний) */
.gvp-completeness-icon__priority--P1 {
    background-color: #ef4444 !important;
    border-color: rgba(239, 68, 68, 0.3);
}

/* Кольори для пріоритету P2 (помаранчевий) */
.gvp-completeness-icon__priority--P2 {
    background-color: #f59e0b !important;
    border-color: rgba(245, 158, 11, 0.3);
}

/* Кольори для пріоритету P3 (зелений) */
.gvp-completeness-icon__priority--P3 {
    background-color: #10b981 !important;
    border-color: rgba(16, 185, 129, 0.3);
}



/* ============================================================
   Action Wheel — floating circular menu on row hover
   ============================================================ */

/* Перша клітинка — position-контейнер для trigger */
.gvp-tbl__row td:first-child {
    position: relative;
}

/* Тригер зона 20×20px у лівому верхньому куті першої td */
.gvp-action-wheel-trigger {
    position: absolute;
    top: 0;
    left: 0;
    width: 150px;
    height: 150px;
    z-index: 101;
    cursor: pointer;
}

.gvp-action-wheel {
    position: fixed;
    width: 108px;
    height: 108px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

.gvp-action-wheel--visible {
    opacity: 1;
    pointer-events: all;
}

.gvp-action-wheel__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    border-radius: 50%;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Кольори як у Actions Menu 2.svg: #8997DC обводки, #6A6EAE напівпрозорий фон кільця */
.gvp-action-wheel__btn {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 26px;
    height: 26px;
    margin-top: -13px;
    margin-left: -12px;
    transform: translate(var(--wx), var(--wy));
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8997dc;
    padding: 0;
    border-radius: 50%;
    transition: color 0.15s, transform 0.15s, filter 0.15s;
    z-index: 1;
}

.gvp-action-wheel__btn svg {
    width: 18px;
    height: 18px;
    stroke: #8997dc;
}

.gvp-action-wheel__btn:hover {
    color: #c5d0f5;
    transform: translate(var(--wx), var(--wy)) scale(1.25);
    filter: drop-shadow(0 1px 3px rgba(137, 151, 220, 0.55));
}

.gvp-action-wheel__btn:hover svg {
    stroke: #e8ecfc;
}

/* Row clickable state */
.gvp-tbl__row--clickable {
    cursor: pointer;
}

.gvp-tbl__row--not-clickable {
    cursor: default;
    opacity: 0.7;
}

/* Стилі для заголовків з сортуванням */
.gvp-tbl__header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.gvp-tbl__header-content > span {
    flex: 1;
}

/* Кнопка сортування */
.gvp-tbl__sort-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 0.35rem 0.4rem;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--gvp-tbl-text-header);
    min-width: 28px;
    height: 32px;
    position: relative;
    opacity: 0.7;
}

.gvp-tbl__sort-btn:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.gvp-tbl__sort-btn--active {
    opacity: 1;
    background: rgba(37, 99, 235, 0.2);
    border-color: rgba(37, 99, 235, 0.4);
    color: #60a5fa;
    box-shadow: 0 0 8px rgba(37, 99, 235, 0.3);
}

.gvp-tbl__sort-btn--active:hover {
    background: rgba(37, 99, 235, 0.3);
    border-color: rgba(37, 99, 235, 0.5);
    box-shadow: 0 0 12px rgba(37, 99, 235, 0.4);
}

.gvp-tbl__sort-icon {
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
    position: absolute;
    transition: opacity 0.2s, transform 0.2s;
    display: block;
}

.gvp-tbl__sort-icon--up {
    top: 2px;
    opacity: 0.5;
}

.gvp-tbl__sort-icon--down {
    bottom: 2px;
    opacity: 0.5;
}

.gvp-tbl__sort-btn:hover .gvp-tbl__sort-icon {
    opacity: 0.8;
}

.gvp-tbl__sort-btn--active .gvp-tbl__sort-icon {
    opacity: 0.7;
}

.gvp-tbl__sort-btn--active.gvp-tbl__sort-btn--asc .gvp-tbl__sort-icon--up {
    opacity: 1;
    transform: scale(1.15);
    color: #60a5fa;
}

.gvp-tbl__sort-btn--active.gvp-tbl__sort-btn--asc .gvp-tbl__sort-icon--down {
    opacity: 0;
}

.gvp-tbl__sort-btn--active.gvp-tbl__sort-btn--desc .gvp-tbl__sort-icon--down {
    opacity: 1;
    transform: scale(1.15);
    color: #60a5fa;
}

.gvp-tbl__sort-btn--active.gvp-tbl__sort-btn--desc .gvp-tbl__sort-icon--up {
    opacity: 0;
}