/* Creative Tasks page — marketing-facing creative cadence task list.
   Self-contained; relies only on the shared theme variables from dashboard.css. */

.ct-wrap { padding: 4px 0 32px; }

.ct-intro {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0 0 16px;
}

/* ── Game cards ─────────────────────────────────────────────────────── */
/* Header above the game grid: section label + Week|Month due-window toggle. */
.ct-cards-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 12px;
}
.ct-cards-title {
    font-size: 0.72rem; font-weight: 600; letter-spacing: .05em;
    text-transform: uppercase; color: var(--text-muted);
}
/* Sleek segmented control (iOS-style): pill track, raised active pane. */
.ct-tf-toggle {
    display: inline-flex; gap: 2px; padding: 2px;
    background: rgba(127,127,127,.10);
    border: 1px solid var(--border-color);
    border-radius: 9px;
}
.ct-tf-btn {
    appearance: none; border: 0; cursor: pointer;
    padding: 4px 16px; border-radius: 7px;
    font-size: 0.78rem; font-weight: 600; line-height: 1.4;
    color: var(--text-muted); background: transparent;
    transition: color .15s, background .15s, box-shadow .15s;
}
.ct-tf-btn:hover { color: var(--text-secondary); }
.ct-tf-btn.active {
    color: var(--text-primary);
    background: var(--bg-card);
    box-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.ct-tf-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* Empty left slot keeps the Week|Month toggle right-aligned when nothing's hidden. */
.ct-cards-spacer { flex: 0 0 auto; }

/* "Show/Hide hidden (N)" control. */
.ct-hidden-toggle {
    appearance: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: 8px;
    border: 1px solid var(--border-color); background: var(--bg-card);
    color: var(--text-secondary); font-size: 0.78rem; font-weight: 600;
    transition: color .15s, border-color .15s;
}
.ct-hidden-toggle:hover { color: var(--text-primary); border-color: var(--text-muted); }
.ct-hidden-badge {
    font-size: 0.7rem; font-weight: 700; font-variant-numeric: tabular-nums;
    color: var(--text-muted); background: rgba(127,127,127,.14);
    border-radius: 999px; padding: 0 6px;
}

/* "Show/Hide optional (N)" — reveals the low-spend (<$50/day avg) cells in the table. */
.ct-opt-toggle {
    appearance: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: 8px;
    border: 1px solid var(--border-color); background: var(--bg-card);
    color: var(--text-secondary); font-size: 0.78rem; font-weight: 600;
    transition: color .15s, border-color .15s, background .15s;
}
.ct-opt-toggle:hover { color: var(--text-primary); border-color: var(--text-muted); }
.ct-opt-toggle.active {
    color: var(--text-primary);
    border-color: rgba(139, 92, 246, .55);
    background: rgba(139, 92, 246, .12);
}
.ct-opt-badge {
    font-size: 0.7rem; font-weight: 700; font-variant-numeric: tabular-nums;
    color: var(--text-muted); background: rgba(127,127,127,.14);
    border-radius: 999px; padding: 0 6px;
}

/* "Show/Hide inactive (N)" — reveals campaigns paused in their network (no longer
   live in getZebraOperationalData), distinct from low-spend optional cells. */
.ct-inactive-toggle {
    appearance: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: 8px;
    border: 1px solid var(--border-color); background: var(--bg-card);
    color: var(--text-secondary); font-size: 0.78rem; font-weight: 600;
    transition: color .15s, border-color .15s, background .15s;
}
.ct-inactive-toggle:hover { color: var(--text-primary); border-color: var(--text-muted); }
.ct-inactive-toggle.active {
    color: var(--text-primary);
    border-color: rgba(148, 163, 184, .6);
    background: rgba(148, 163, 184, .14);
}
.ct-inactive-badge {
    font-size: 0.7rem; font-weight: 700; font-variant-numeric: tabular-nums;
    color: var(--text-muted); background: rgba(127,127,127,.14);
    border-radius: 999px; padding: 0 6px;
}

/* Restore section: compact chips for each hidden game. */
.ct-hidden-sec-head { opacity: .85; }
.ct-hidden-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.ct-restore {
    appearance: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 10px 5px 6px; border-radius: 999px;
    border: 1px solid var(--border-color); background: var(--bg-card);
    color: var(--text-secondary); font-size: 0.8rem; font-weight: 500;
    transition: color .15s, border-color .15s, background .15s;
}
.ct-restore:hover { color: var(--text-primary); border-color: var(--ct-accent, var(--primary)); }
.ct-hidden-icon { width: 20px; height: 20px; border-radius: 5px; object-fit: cover; flex: 0 0 auto; }
.ct-hidden-icon-ph {
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.7rem;
}
.ct-hidden-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-restore-icon { color: var(--text-muted); font-size: 0.85rem; }
.ct-restore:hover .ct-restore-icon { color: var(--ct-accent, var(--primary)); }

.ct-game-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.ct-game-grid:last-child { margin-bottom: 24px; }

/* ── Studio sections ────────────────────────────────────────────────── */
.ct-studio-head {
    display: flex; align-items: center; gap: 10px;
    margin: 2px 0 10px;
}
.ct-studio-name {
    font-size: 0.74rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--text-secondary);
}
.ct-studio-count {
    font-size: 0.7rem; font-weight: 600; color: var(--text-muted);
    background: rgba(127,127,127,.12); border-radius: 999px; padding: 1px 7px;
    font-variant-numeric: tabular-nums;
}
.ct-studio-rule { flex: 1; height: 1px; background: linear-gradient(to right, var(--border-color), transparent); }

.ct-all-hidden { color: var(--text-muted); font-size: 0.85rem; padding: 8px 0 16px; }

.ct-game-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
    transition: border-color .15s, transform .1s, opacity .15s;
    border-left: 3px solid var(--ct-accent, var(--primary));
}
.ct-game-card:hover { transform: translateY(-1px); border-color: var(--ct-accent, var(--primary)); }

/* Hover-reveal "hide" affordance — top-right corner; the % badge yields to it on hover. */
.ct-game-hide {
    position: absolute; top: 6px; right: 8px;
    width: 20px; height: 20px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 6px; cursor: pointer;
    background: rgba(127,127,127,.14); color: var(--text-secondary);
    font-size: 1rem; line-height: 1;
    opacity: 0; transition: opacity .12s, background .12s, color .12s;
}
.ct-game-card:hover .ct-game-hide { opacity: 1; }
.ct-game-card:hover .ct-game-pct { opacity: 0; } /* avoid clashing with the × in the corner */
.ct-game-hide:hover { background: rgba(239,68,68,.18); color: var(--danger, #ef4444); }
.ct-game-hide:focus-visible { opacity: 1; outline: 2px solid var(--primary); outline-offset: 1px; }
.ct-game-card.selected {
    border-color: var(--ct-accent, var(--primary));
    box-shadow: 0 0 0 1px var(--ct-accent, var(--primary));
}
.ct-game-card.dimmed { opacity: .5; }

/* "Rest" card: a game with nothing due in the window needs no action now. Muted
   and bar-less so it recedes — unlike a 100%-complete card, which keeps its green
   bar. The colored accent stripe is neutralized and the note sits at the bottom
   (where the progress line would be) so heights stay aligned in the grid. */
.ct-game-card.ct-game-rest {
    display: flex; flex-direction: column;
    border-left-color: var(--border-color);
    opacity: .62;
}
.ct-game-card.ct-game-rest:hover { opacity: 1; }
.ct-game-card.ct-game-rest .ct-game-name { color: var(--text-secondary); }
.ct-game-rest-note {
    margin-top: auto;
    font-size: 0.72rem; color: var(--text-muted);
}

.ct-game-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; min-height: 28px; }
.ct-game-icon-img,
.ct-game-icon {
    width: 28px; height: 28px; border-radius: 6px; flex: 0 0 auto;
    object-fit: cover;
}
.ct-game-icon {
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.85rem;
}
.ct-game-name {
    font-weight: 600; font-size: 0.9rem; color: var(--text-primary);
    line-height: 1.25;
    flex: 1 1 auto; min-width: 0;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden;
}
/* Completion % for the game, sitting at the right of the icon/name header. */
.ct-game-pct {
    flex: 0 0 auto; margin-left: 4px;
    font-size: 0.82rem; font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    transition: opacity .12s;
}
.ct-game-pct.done { color: var(--success, #22c55e); }
.ct-game-meta {
    display: flex; gap: 10px; font-size: 0.72rem; color: var(--text-muted);
    margin-bottom: 8px;
}
.ct-game-prog { font-size: 0.72rem; color: var(--text-secondary); margin-top: 6px; }

/* ── Progress bar ───────────────────────────────────────────────────── */
.ct-bar {
    height: 6px; border-radius: 4px; overflow: hidden;
    background: var(--border-color);
}
.ct-bar-fill {
    height: 100%; border-radius: 4px;
    background: var(--primary);
    transition: width .25s ease;
}
.ct-bar-fill.done { background: var(--success, #22c55e); }

/* ── Controls (network filter + search) ─────────────────────────────── */
.ct-controls {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.ct-net-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.ct-controls-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ct-search { position: relative; width: 280px; max-width: 100%; flex: 0 0 auto; }
.ct-lang-select {
    padding: 8px 10px; border-radius: 8px;
    border: 1px solid var(--border-color); background: var(--bg-card);
    color: var(--text-primary); font-size: 0.84rem; cursor: pointer;
    transition: border-color .15s;
}
.ct-lang-select:focus { outline: none; border-color: var(--primary); }
.ct-search-input {
    width: 100%; box-sizing: border-box;
    padding: 8px 12px; border-radius: 8px;
    border: 1px solid var(--border-color); background: var(--bg-card);
    color: var(--text-primary); font-size: 0.84rem;
    transition: border-color .15s;
}
.ct-search-input::placeholder { color: var(--text-muted); }
.ct-search-input:focus { outline: none; border-color: var(--primary); }

/* ── Summary table ──────────────────────────────────────────────────── */
.ct-table-wrap {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-card);
}
.ct-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.ct-table thead th {
    text-align: left;
    padding: 10px 14px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
    background: rgba(127,127,127,.06);
}
.ct-table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    vertical-align: middle;
}
.ct-num { text-align: right; font-variant-numeric: tabular-nums; }
.ct-table thead th.ct-num { text-align: right; }
.ct-col-exp { width: 28px; text-align: center; color: var(--text-muted); }
.ct-col-prog { width: 220px; }
.ct-col-langs { text-align: center; }
.ct-table thead th.ct-col-langs { text-align: center; }

/* Clickable "sort by upload progress" header. */
.ct-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.ct-sort:hover { color: var(--text-secondary); }
.ct-sort-arrow { font-size: 0.62rem; opacity: .7; }

/* Languages column content (top-N codes + "+Nx"). */
.ct-langs { font-variant-numeric: tabular-nums; }
.ct-langs-more { color: var(--text-muted); font-size: 0.78rem; }
.ct-langs-empty { color: var(--text-muted); }
.ct-spend-zero { color: var(--text-muted); }

.ct-row { cursor: pointer; transition: background-color .12s; }
.ct-row:hover { background: rgba(139,92,246,.06); }
.ct-row.expanded { background: rgba(139,92,246,.08); }
.ct-row.expanded td { border-bottom-color: transparent; }

.ct-app { font-weight: 600; white-space: nowrap; }
.ct-campaign {
    max-width: 360px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ct-no-match { text-align: center; color: var(--text-muted); padding: 24px 14px; }
.ct-prog-cell { display: flex; align-items: center; gap: 10px; }
.ct-prog-cell .ct-bar { flex: 1; }
.ct-prog-text { font-size: 0.78rem; color: var(--text-secondary); min-width: 48px; text-align: right; font-variant-numeric: tabular-nums; }

/* ── Expanded language detail ───────────────────────────────────────── */
.ct-detail-row td { padding: 0 14px 16px; background: transparent; }
.ct-detail {
    background: rgba(127,127,127,.045);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px 16px;
}

.ct-detail-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.ct-detail-table thead th {
    text-align: left; padding: 7px 12px; font-size: 0.68rem; text-transform: uppercase;
    letter-spacing: .03em; color: var(--text-muted); border-bottom: 1px solid var(--border-color);
}
.ct-detail-table thead th.ct-num { text-align: right; }
.ct-detail-table tbody td {
    padding: 8px 12px; border-bottom: 1px solid var(--border-color); color: var(--text-primary);
    vertical-align: middle;
}
.ct-detail-table tbody tr:last-child td { border-bottom: none; }
.ct-detail-table tbody tr:hover { background: rgba(127,127,127,.04); }
.ct-lang { font-weight: 600; }
.ct-lang-col, .ct-detail-table td.ct-lang { width: 56px; white-space: nowrap; }
/* Tint completed rows faint green so the done block reads apart from the ongoing one. */
.ct-detail-table tbody tr.ct-lang-done { background: rgba(34,197,94,.06); }
.ct-detail-table tbody tr.ct-lang-done:hover { background: rgba(34,197,94,.11); }
.ct-date { color: var(--text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Daily-spend cell: value + the cadence spend-tier chip beneath it. */
.ct-spend-cell { white-space: nowrap; }
.ct-spend-val { display: block; line-height: 1.25; }
.ct-tier {
    display: inline-block; margin-top: 2px;
    padding: 0 5px; border-radius: 4px;
    background: rgba(127,127,127,.14); color: var(--text-muted);
    font-size: 0.64rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.ct-lang-done td { color: var(--text-muted); }
.ct-remaining { color: var(--warning, #f59e0b); font-weight: 700; }
.ct-prog-col { width: 170px; }
.ct-detail-table .ct-prog-cell { max-width: 170px; }
.ct-detail-table .ct-prog-text { min-width: 40px; }
.ct-prog-todo { color: var(--warning, #f59e0b); font-weight: 700; }
/* completed progress text in green — overrides the muted ct-lang-done td color */
.ct-detail-table .ct-prog-done { color: var(--success, #22c55e); font-weight: 700; }

/* Divider between the ongoing rows and the completed ones. */
.ct-detail-table tbody tr.ct-sep-row,
.ct-detail-table tbody tr.ct-sep-row:hover { background: transparent; }
.ct-sep-row td { border-bottom: none !important; padding: 4px 12px; }
.ct-sep { display: flex; align-items: center; gap: 12px; }
.ct-sep::before, .ct-sep::after {
    content: ""; flex: 1; height: 1px;
}
.ct-sep::before { background: linear-gradient(to right, transparent, var(--border-color)); }
.ct-sep::after  { background: linear-gradient(to left, transparent, var(--border-color)); }
.ct-sep-label {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 10px; border-radius: 999px;
    font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--success, #22c55e); background: rgba(34,197,94,.12);
    white-space: nowrap;
}
.ct-sep-label svg { flex: 0 0 auto; }

/* Optional (low-spend) cells: muted everywhere, tagged with a purple "optional"
   chip in place of the spend-tier chip. Hidden until "Show optional" is on. */
.ct-opt-chip {
    display: inline-block; margin-top: 2px;
    padding: 0 5px; border-radius: 4px;
    background: rgba(139, 92, 246, .14); color: #8b5cf6;
    font-size: 0.64rem; font-weight: 700; letter-spacing: .02em;
}
.ct-row.ct-row-optional td { color: var(--text-muted); }
.ct-detail-table tbody tr.ct-lang-optional td { color: var(--text-muted); }
.ct-bar.ct-bar-optional { opacity: .5; }
.ct-sep-label.ct-sep-optional {
    color: #8b5cf6; background: rgba(139, 92, 246, .12);
}

/* Network-inactive (paused) campaigns: muted row, slate "paused" chip, greyed
   progress bar. Hidden until "Show inactive" is on. */
.ct-inactive-chip {
    display: inline-block; margin-top: 2px;
    padding: 0 5px; border-radius: 4px;
    background: rgba(148, 163, 184, .16); color: #94a3b8;
    font-size: 0.64rem; font-weight: 700; letter-spacing: .02em;
}
.ct-row.ct-row-inactive td { color: var(--text-muted); }
.ct-bar.ct-bar-inactive { opacity: .5; }
.ct-bar.ct-bar-inactive .ct-bar-fill { background: var(--text-muted); }

/* ── Creative-type split (Google: video / playable / image) ──────────── */
/* Main-row per-type mini counts (V/P/I). */
.ct-tc-row { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end;
    font-variant-numeric: tabular-nums; }
.ct-tc { font-size: 0.76rem; font-weight: 600; white-space: nowrap;
    padding: 1px 6px; border-radius: 5px; }
.ct-tc-done { color: var(--success, #22c55e); background: rgba(34,197,94,.10); }
.ct-tc-todo { color: var(--warning, #f59e0b); background: rgba(245,158,11,.10); }
.ct-tc-ok { font-weight: 700; }

/* Split detail table: one count column per type. */
.ct-detail-split thead th.ct-type { text-align: right; white-space: nowrap; }
.ct-detail-split .ct-cycle { white-space: nowrap; }
.ct-detail-split .ct-arrow { color: var(--text-muted); }
.ct-detail-table td.ct-tcell { font-variant-numeric: tabular-nums; font-weight: 700;
    white-space: nowrap; }
.ct-detail-table .ct-tcell-done { color: var(--success, #22c55e); }
.ct-detail-table .ct-tcell-todo { color: var(--warning, #f59e0b); }
.ct-detail-table td.ct-tcell-na { color: var(--text-muted); font-weight: 400; }
.ct-tcell-ok, .ct-tcell-warn { font-size: 0.7rem; margin-left: 1px; }

/* ── Empty / error states ───────────────────────────────────────────── */
.ct-empty { text-align: center; padding: 60px 20px; color: var(--text-secondary); }
.ct-empty p { margin: 4px 0; }
.ct-empty-sub { font-size: 0.82rem; color: var(--text-muted); }
.ct-btn {
    margin-top: 12px; padding: 8px 16px; border-radius: 6px;
    border: 1px solid var(--border-color); background: var(--bg-card);
    color: var(--text-primary); cursor: pointer; font-size: 0.82rem;
}
.ct-btn:hover { border-color: var(--primary); }

/* Light-theme header contrast, matching the other tables. */
html[data-theme="light"] .ct-table thead th { background: #f2ece2; border-bottom-color: #d9d0c3; }
html[data-theme="light"] .ct-detail-row td { background: transparent; }
html[data-theme="light"] .ct-detail { background: #faf7f1; border-color: #e6ddd0; }