/* ============================================================
   Postflow theme — brighter indigo, rounder, bigger, soft shadows.
   ============================================================ */

:root {
    /* Indigo / purple ramp (primary) — brighter, more saturated */
    --indigo-50:  #EDEBFF;
    --indigo-100: #D2CDFF;
    --indigo-200: #B3AAF5;
    --indigo-400: #877CEC;
    --indigo-600: #5B4FE3;
    --indigo-800: #463BC4;
    --indigo-900: #2D2682;

    /* Accent ramps used on the stat tiles — nudged a touch brighter */
    --teal-600:  #15B585;
    --teal-50:   #DFF6EF;
    --coral-600: #F2643A;
    --coral-50:  #FCEAE2;
    --amber-600: #FBA81E;
    --amber-50:  #FCEFD6;
    --blue-600:  #3D97F0;
    --blue-50:   #E4F0FC;
    --red-600:   #E84A52;
    --red-50:    #FCEAEB;

    /* Neutrals — faint lavender tint on the page background */
    --bg-page:    #F6F5FF;
    --bg-surface: #FFFFFF;
    --bg-muted:   #F0EEFB;
    --text-primary:   #22212E;
    --text-secondary: #5C5A6E;
    --text-tertiary:  #8D8B9E;
    --border:        #E6E3F5;
    --border-strong: #D2CEEC;

    /* Rounder corners */
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;

    /* Soft, playful card shadow */
    --shadow-card: 0 6px 18px rgba(45, 38, 130, 0.10);
    --shadow-soft: 0 3px 10px rgba(45, 38, 130, 0.08);

    --sidebar-w: 224px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg-page);
    color: var(--text-primary);
    font-size: 16px;
    line-height: 1.6;
}

a { color: var(--indigo-600); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- App shell ---------- */
.app-shell { display: flex; min-height: 100vh; }

/* ---------- Sidebar ---------- */
.sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    background: var(--bg-surface);
    border-right: 1px solid var(--border);
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px 18px;
}

.sidebar-brand .mark {
    width: 34px; height: 34px;
    border-radius: var(--radius-md);
    background: var(--indigo-600);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 16px;
}

.sidebar-brand .name { font-size: 14px; font-weight: 600; line-height: 1.2; }
.sidebar-brand .tag  { font-size: 11px; color: var(--text-tertiary); }

.nav-group-label {
    font-size: 10px;
    letter-spacing: 0.07em;
    color: var(--text-tertiary);
    margin: 14px 8px 4px;
    text-transform: uppercase;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: var(--radius-md);
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 2px;
}
.nav-link:hover { background: var(--bg-muted); text-decoration: none; color: var(--text-primary); }
.nav-link.active {
    background: var(--indigo-50);
    color: var(--indigo-800);
    font-weight: 600;
}
.nav-link .ico { width: 16px; text-align: center; }

.sidebar-footer {
    margin-top: auto;
    border-top: 1px solid var(--border);
    padding-top: 12px;
}
.sidebar-user {
    display: flex; align-items: center; gap: 9px;
    padding: 4px 8px;
}
.sidebar-user .avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--indigo-100); color: var(--indigo-800);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
}
.sidebar-user .info { line-height: 1.25; }
.sidebar-user .info .uname { font-size: 12px; font-weight: 600; }
.sidebar-user .info .urole { font-size: 10.5px; color: var(--text-tertiary); }

/* ---------- Main content ---------- */
.main { flex: 1; padding: 22px 28px; min-width: 0; }

.page-eyebrow {
    font-size: 11px;
    letter-spacing: 0.07em;
    color: var(--indigo-600);
    font-weight: 600;
    margin: 0 0 2px;
}
.page-title { font-size: 26px; font-weight: 700; margin: 0 0 3px; }
.page-sub   { font-size: 13px; color: var(--text-secondary); margin: 0 0 18px; }

/* ---------- Hero banner ---------- */
.hero {
    background: var(--indigo-900);
    border-radius: var(--radius-lg);
    padding: 18px 22px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.hero .eyebrow { font-size: 10px; letter-spacing: 0.07em; color: var(--indigo-200); margin: 0 0 5px; }
.hero .headline { font-size: 17px; font-weight: 600; color: #fff; margin: 0 0 4px; }
.hero .subtext  { font-size: 12.5px; color: var(--indigo-100); margin: 0; }
.hero-stats { display: flex; gap: 20px; text-align: center; flex-shrink: 0; }
.hero-stats .num { font-size: 26px; font-weight: 700; margin: 0; }
.hero-stats .num.up   { color: #9FE1CB; }
.hero-stats .num.down { color: #F0997B; }
.hero-stats .lbl { font-size: 9px; letter-spacing: 0.05em; color: var(--indigo-200); margin: 0; }

/* ---------- Stat tiles ---------- */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}
.stat-tile {
    border-radius: var(--radius-lg);
    padding: 20px 20px;
    color: #fff;
    box-shadow: var(--shadow-card);
}
.stat-tile .lbl { font-size: 11px; letter-spacing: 0.04em; margin: 0; opacity: 0.92; }
.stat-tile .val { font-size: 34px; font-weight: 700; margin: 5px 0 2px; }
.stat-tile .sub { font-size: 12px; margin: 0; opacity: 0.92; }
.stat-tile.teal  { background: var(--teal-600); }
.stat-tile.coral { background: var(--coral-600); }
.stat-tile.amber { background: var(--amber-600); }
.stat-tile.blue  { background: var(--blue-600); }

/* ---------- Cards ---------- */
.card-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 14px;
}
.card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px 24px;
    box-shadow: var(--shadow-card);
}
.card-eyebrow {
    font-size: 11px;
    letter-spacing: 0.06em;
    font-weight: 700;
    margin: 0 0 3px;
}
.card-eyebrow.coral  { color: var(--coral-600); }
.card-eyebrow.teal   { color: var(--teal-600); }
.card-eyebrow.indigo { color: var(--indigo-600); }
.card-title { font-size: 16px; font-weight: 600; margin: 0 0 12px; }

/* ---------- Focus list ---------- */
.focus-item {
    background: var(--bg-muted);
    border-left: 3px solid var(--text-tertiary);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: 9px 11px;
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    gap: 9px;
}
.focus-item.danger  { border-left-color: var(--red-600); }
.focus-item.warning { border-left-color: var(--amber-600); }
.focus-item.info    { border-left-color: var(--indigo-600); }
.focus-item .binitials {
    width: 28px; height: 28px; border-radius: var(--radius-md);
    background: var(--indigo-50); color: var(--indigo-800);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.focus-item .body { flex: 1; min-width: 0; }
.focus-item .body .ftitle { font-size: 12px; margin: 0; }
.focus-item .body .fsub   { font-size: 10.5px; color: var(--text-secondary); margin: 0; }
.focus-item .pill {
    font-size: 10px; padding: 3px 9px; border-radius: var(--radius-md); flex-shrink: 0;
}
.pill.danger  { background: var(--red-50);   color: #A32D2D; }
.pill.warning { background: var(--amber-50); color: #854F0B; }
.pill.info    { background: var(--indigo-50);color: var(--indigo-800); }

/* ---------- Schedule list ---------- */
.sched-row {
    display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.sched-row .time { font-size: 11px; color: var(--text-secondary); min-width: 38px; }
.sched-row .desc { font-size: 12px; flex: 1; }
.sched-row .dot  { font-size: 9px; }
.sched-row .dot.ontime { color: var(--teal-600); }
.sched-row .dot.late   { color: var(--amber-600); }

.empty-hint {
    font-size: 12px;
    color: var(--text-tertiary);
    padding: 10px 0;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    padding: 11px 20px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: var(--bg-surface);
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.12s ease, box-shadow 0.12s ease;
}
.btn:hover { background: var(--bg-muted); text-decoration: none; }
.btn-primary {
    background: var(--indigo-600);
    border-color: var(--indigo-600);
    color: #fff;
    box-shadow: var(--shadow-soft);
}
.btn-primary:hover { background: var(--indigo-800); }
.btn-block { width: 100%; justify-content: center; }

/* ---------- Login ---------- */
.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-page);
}
.login-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px 34px;
    width: 360px;
}
.login-card .mark {
    width: 40px; height: 40px;
    border-radius: var(--radius-md);
    background: var(--indigo-600);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 18px;
    margin-bottom: 14px;
}
.login-card h1 { font-size: 20px; margin: 0 0 4px; }
.login-card .sub { font-size: 13px; color: var(--text-secondary); margin: 0 0 22px; }

.form-field { margin-bottom: 14px; }
.form-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 5px;
}
.form-field input {
    width: 100%;
    height: 38px;
    padding: 0 11px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    font-size: 13px;
    background: var(--bg-surface);
}
.form-field input:focus {
    outline: none;
    border-color: var(--indigo-400);
    box-shadow: 0 0 0 3px var(--indigo-50);
}
.form-error {
    background: var(--red-50);
    color: #A32D2D;
    font-size: 12px;
    padding: 8px 11px;
    border-radius: var(--radius-md);
    margin-bottom: 14px;
}
.field-validation-error { color: #A32D2D; font-size: 11.5px; }
.validation-summary-errors { color: #A32D2D; font-size: 12px; margin-bottom: 10px; }

/* ---------- Misc ---------- */
.muted { color: var(--text-secondary); }
.section-gap { margin-top: 18px; }

/* ============================================================
   Increment 2 — Brands, social accounts, blueprint editor
   ============================================================ */

/* ---------- Toast ---------- */
.toast {
    background: var(--indigo-50);
    color: var(--indigo-800);
    border: 1px solid var(--indigo-100);
    border-radius: var(--radius-md);
    padding: 9px 13px;
    font-size: 13px;
    margin-bottom: 14px;
}

/* ---------- Page header row ---------- */
.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}
.breadcrumb {
    font-size: 12px;
    color: var(--text-tertiary);
    margin: 0 0 8px;
}
.breadcrumb a { color: var(--text-tertiary); }
.breadcrumb a:hover { color: var(--indigo-600); }

/* ---------- Filter bar ---------- */
.filter-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}
.filter-bar input[type=text],
.filter-bar select {
    height: 36px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    padding: 0 11px;
    font-size: 13px;
    background: var(--bg-surface);
}
.filter-bar input[type=text] { flex: 1; }
.filter-bar select { width: 160px; }

/* ---------- Brand card grid ---------- */
.brand-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 16px;
}
.brand-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px 22px;
    display: block;
    color: inherit;
    box-shadow: var(--shadow-soft);
}
.brand-card:hover { text-decoration: none; border-color: var(--border-strong); }
.brand-card-head {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 12px;
}
.brand-logo {
    width: 42px; height: 42px;
    border-radius: var(--radius-md);
    background: var(--indigo-50);
    color: var(--indigo-800);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px;
    flex-shrink: 0;
}
.brand-card-head .bname { font-size: 14px; font-weight: 600; margin: 0; }
.brand-card-head .bclient { font-size: 11.5px; color: var(--text-secondary); margin: 1px 0 0; }

.status-badge {
    font-size: 10.5px;
    padding: 3px 9px;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}
.status-badge.active     { background: #E1F5EE; color: #085041; }
.status-badge.onboarding { background: #FAEEDA; color: #854F0B; }
.status-badge.paused     { background: var(--bg-muted); color: var(--text-secondary); }

.acct-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.acct-badge {
    font-size: 11px;
    background: var(--bg-muted);
    color: var(--text-secondary);
    padding: 3px 8px;
    border-radius: var(--radius-md);
}
.brand-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--border);
    margin-top: 14px;
    padding-top: 13px;
    font-size: 12.5px;
    color: var(--text-secondary);
}
.foot-pending { color: #854F0B; font-weight: 600; }
.foot-clear   { color: #085041; font-weight: 600; }

/* ---------- Generic form layout ---------- */
.form-wrap { max-width: 560px; }
.form-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px 24px;
}
.form-card .form-field select,
.form-card .form-field textarea {
    width: 100%;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    font-size: 13px;
    background: var(--bg-surface);
    padding: 8px 11px;
}
.form-card .form-field select { height: 38px; padding: 0 11px; }
.form-card .form-field textarea { min-height: 70px; resize: vertical; }
.form-hint { font-size: 11.5px; color: var(--text-tertiary); margin: 4px 0 0; }
.form-actions {
    display: flex;
    gap: 8px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

/* ---------- Detail page ---------- */
.detail-head {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 18px;
}
.detail-head .brand-logo { width: 48px; height: 48px; font-size: 16px; }
.detail-head .dname { font-size: 18px; font-weight: 700; margin: 0; }
.detail-head .dmeta { font-size: 12px; color: var(--text-secondary); margin: 2px 0 0; }

.section-label {
    font-size: 12.5px;
    font-weight: 600;
    margin: 18px 0 8px;
}

/* ---------- Row list (accounts, team) ---------- */
.row-list { display: flex; flex-direction: column; gap: 6px; }
.row-item {
    display: flex;
    align-items: center;
    gap: 11px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 10px 13px;
}
.row-item .ri-icon {
    width: 30px; height: 30px;
    border-radius: var(--radius-md);
    background: var(--bg-muted);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; color: var(--text-secondary);
    flex-shrink: 0;
}
.row-item .ri-body { flex: 1; min-width: 0; }
.row-item .ri-title { font-size: 12.5px; margin: 0; }
.row-item .ri-sub { font-size: 11px; color: var(--text-secondary); margin: 1px 0 0; }
.row-item .ri-status { font-size: 11px; flex-shrink: 0; }
.ri-status.ok      { color: #085041; }
.ri-status.warn    { color: #854F0B; }
.ri-status.muted   { color: var(--text-tertiary); }
.row-item .ri-actions { display: flex; gap: 6px; flex-shrink: 0; }
.btn-sm {
    font-size: 11.5px;
    padding: 4px 9px;
    border-radius: var(--radius-sm);
}
.btn-danger {
    color: #A32D2D;
    border-color: #F0999A;
}
.btn-danger:hover { background: #FCEBEB; }

.add-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--indigo-600);
    padding: 7px 2px;
}

/* ---------- Two-column detail grid ---------- */
.detail-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 6px;
}

/* ---------- Blueprint editor ---------- */
.bp-account {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 10px;
    overflow: hidden;
}
.bp-account-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 15px;
    background: var(--bg-muted);
    border-bottom: 1px solid var(--border);
}
.bp-account-head .bp-platform { font-size: 13px; font-weight: 600; }
.bp-account-head .bp-handle { font-size: 11.5px; color: var(--text-secondary); }
.bp-account-head .bp-total {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-secondary);
}
.bp-rows { padding: 4px 15px; }
.bp-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
}
.bp-row:last-child { border-bottom: none; }
.bp-type-pill {
    font-size: 11.5px;
    background: var(--indigo-50);
    color: var(--indigo-800);
    padding: 3px 9px;
    border-radius: var(--radius-md);
    min-width: 56px;
    text-align: center;
    flex-shrink: 0;
}
.bp-row .bp-themes { font-size: 12px; flex: 1; min-width: 0; }
.bp-row .bp-times { font-size: 11.5px; color: var(--text-secondary); }
.bp-row .bp-freq { font-size: 11.5px; font-weight: 600; min-width: 28px; text-align: right; }
.bp-row .bp-actions { display: flex; gap: 6px; flex-shrink: 0; }
.bp-add-row {
    padding: 9px 0 5px;
}
.bp-empty-account {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-surface);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    padding: 11px 14px;
    margin-bottom: 6px;
}
.bp-empty-account .ri-body { flex: 1; }

/* ---------- Empty state ---------- */
.empty-panel {
    background: var(--bg-surface);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    text-align: center;
}
.empty-panel .ep-title { font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.empty-panel .ep-sub { font-size: 12.5px; color: var(--text-secondary); margin: 0 0 14px; }

/* ============================================================
   Increment 3 — content pipeline (library, writer's desk, hashtags)
   ============================================================ */

/* ---------- Content library grid ---------- */
.content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 11px;
}
.content-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: block;
    color: inherit;
    box-shadow: var(--shadow-soft);
}
.content-card:hover { text-decoration: none; border-color: var(--border-strong); }
.content-thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #14122d;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.content-thumb img,
.content-thumb video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.content-thumb .thumb-placeholder {
    font-size: 24px;
    color: #b9b6d6;
}
/* play overlay shown over video card thumbnails so the user can tell at
   a glance that it's a video, not a still image. */
.video-play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(20, 18, 45, 0.75);
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.content-status-tag {
    position: absolute;
    top: 6px;
    left: 6px;
    font-size: 9.5px;
    padding: 2px 7px;
    border-radius: var(--radius-md);
}
.cst-draft     { background: var(--bg-muted); color: var(--text-secondary); }
.cst-pending   { background: #E6F1FB; color: #0C447C; }
.cst-approved  { background: #E1F5EE; color: #085041; }
.cst-rejected  { background: #FCEBEB; color: #A32D2D; }
.cst-used      { background: #FAEEDA; color: #854F0B; }
.content-card-body { padding: 8px 10px; }
.content-card-body .cc-caption { font-size: 11.5px; margin: 0; line-height: 1.4; }
.content-card-body .cc-meta {
    font-size: 10px;
    color: var(--text-secondary);
    margin: 4px 0 0;
}

/* upload tile in the grid */
.upload-tile {
    background: var(--bg-surface);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 168px;
    color: var(--text-secondary);
    font-size: 11.5px;
}
.upload-tile:hover { text-decoration: none; border-color: var(--indigo-400); color: var(--indigo-600); }
.upload-tile .ut-ico { font-size: 22px; }

.generator-note {
    background: var(--bg-muted);
    border-radius: var(--radius-md);
    padding: 9px 13px;
    font-size: 11.5px;
    color: var(--text-secondary);
    margin-top: 14px;
}

/* ---------- Writer's desk (content editor) ---------- */
.editor-layout {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 16px;
}
.editor-media {
    /* left column */
}
.editor-media-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0 0 6px;
}
.editor-media-frame {
    background: var(--bg-muted);
    border-radius: var(--radius-md);
    /* No forced aspect ratio — let the media show in its real shape so
       landscape, square, and portrait pieces all preview correctly.
       A min-height keeps the empty/placeholder state from collapsing. */
    min-height: 180px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    overflow: hidden;
}
.editor-media-frame img,
.editor-media-frame video {
    width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: contain;
    display: block;
}
.editor-media-frame .emf-placeholder {
    font-size: 28px;
    color: var(--text-tertiary);
}
.editor-media-frame .emf-name {
    font-size: 10.5px;
    color: var(--text-tertiary);
    padding: 0 8px;
    text-align: center;
}
.editor-media-meta {
    font-size: 10.5px;
    color: var(--text-secondary);
    margin: 6px 0 0;
}

.editor-main {
    /* right column */
}
.editor-row {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}
.editor-row select {
    flex: 1;
    height: 36px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    padding: 0 10px;
    font-size: 12.5px;
    background: var(--bg-surface);
}
.editor-row input[type=text] {
    flex: 1;
    height: 36px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    padding: 0 10px;
    font-size: 12.5px;
    background: var(--bg-surface);
}
.caption-box {
    width: 100%;
    min-height: 130px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
    background: var(--bg-surface);
}
.caption-box:focus {
    outline: none;
    border-color: var(--indigo-400);
    box-shadow: 0 0 0 3px var(--indigo-50);
}

/* Claude assist bar */
.assist-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 9px 0;
    flex-wrap: wrap;
}
.assist-chip {
    font-size: 11.5px;
    padding: 5px 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    cursor: pointer;
    color: var(--text-secondary);
}
.assist-chip:hover { background: var(--bg-muted); color: var(--text-primary); }
.assist-chip.primary {
    background: var(--indigo-50);
    border-color: var(--indigo-100);
    color: var(--indigo-800);
}
.assist-status {
    font-size: 11px;
    color: var(--text-tertiary);
}
.assist-result {
    background: var(--indigo-50);
    border: 1px solid var(--indigo-100);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    margin: 8px 0;
    font-size: 12.5px;
    display: none;
}
.assist-result .ar-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--indigo-800);
    letter-spacing: 0.04em;
    margin: 0 0 5px;
}
.assist-result .ar-text { margin: 0 0 8px; white-space: pre-wrap; }
.assist-result .ar-actions { display: flex; gap: 6px; }

/* hashtag picker inside the editor */
.tag-picker-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 12px 0 6px;
}
.tag-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.tag-chip {
    font-size: 11px;
    background: var(--bg-muted);
    color: var(--text-secondary);
    padding: 3px 9px;
    border-radius: var(--radius-md);
    cursor: pointer;
    border: none;
}
.tag-chip:hover { background: var(--indigo-50); color: var(--indigo-800); }
.tag-empty { font-size: 11.5px; color: var(--text-tertiary); }

/* media picker modal-ish panel (inline, no JS modal) */
.media-picker {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    margin-top: 4px;
}
.media-picker-head {
    font-size: 11.5px;
    color: var(--text-secondary);
    padding: 8px 11px;
    border-bottom: 1px solid var(--border);
}
.media-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 6px;
    padding: 10px 11px;
    max-height: 230px;
    overflow-y: auto;
}
.media-pick-item {
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    background: var(--bg-muted);
}
.media-pick-item.selected { border-color: var(--indigo-600); }
.media-pick-item .mpi-thumb {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.media-pick-item .mpi-thumb img,
.media-pick-item .mpi-thumb video {
    width: 100%; height: 100%; object-fit: cover;
}
.media-pick-item .mpi-thumb .mpi-ph { font-size: 16px; color: var(--text-tertiary); }
.media-pick-item .mpi-name {
    font-size: 9px;
    color: var(--text-secondary);
    padding: 3px 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- Hashtag bank admin ---------- */
.hashtag-bank-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 14px 0;
}
.hashtag-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    padding: 5px 10px;
    font-size: 12.5px;
}
.hashtag-pill .hp-remove {
    border: none;
    background: none;
    color: var(--text-tertiary);
    cursor: pointer;
    font-size: 13px;
    padding: 0;
    line-height: 1;
}
.hashtag-pill .hp-remove:hover { color: #A32D2D; }
.hashtag-add-row {
    display: flex;
    gap: 8px;
    max-width: 420px;
}
.hashtag-add-row input[type=text] {
    flex: 1;
    height: 36px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    padding: 0 11px;
    font-size: 13px;
    background: var(--bg-surface);
}

/* ---------- file input ---------- */
.file-input {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    font-size: 13px;
    background: var(--bg-surface);
}
.config-warning {
    background: #FAEEDA;
    color: #854F0B;
    border-radius: var(--radius-md);
    padding: 9px 13px;
    font-size: 12.5px;
    margin-bottom: 14px;
}

/* ============================================================
   Increment 4 — planner (generate panel, calendar, slots)
   ============================================================ */

/* ---------- Plan list ---------- */
.plan-list { display: flex; flex-direction: column; gap: 8px; }
.plan-row {
    display: flex;
    align-items: center;
    gap: 13px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
    color: inherit;
    box-shadow: var(--shadow-soft);
}
.plan-row:hover { text-decoration: none; border-color: var(--border-strong); }
.plan-row .pr-icon {
    width: 34px; height: 34px;
    border-radius: var(--radius-md);
    background: var(--indigo-50);
    color: var(--indigo-800);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.plan-row .pr-body { flex: 1; min-width: 0; }
.plan-row .pr-period { font-size: 13px; font-weight: 600; margin: 0; }
.plan-row .pr-meta { font-size: 11.5px; color: var(--text-secondary); margin: 1px 0 0; }
.plan-row .pr-fill {
    font-size: 11.5px;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.plan-status-badge {
    font-size: 10.5px;
    padding: 3px 9px;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}
.psb-draft           { background: var(--bg-muted); color: var(--text-secondary); }
.psb-internalreview  { background: #E6F1FB; color: #0C447C; }
.psb-pendingapproval { background: #FAEEDA; color: #854F0B; }
.psb-approved        { background: #E1F5EE; color: #085041; }
.psb-published       { background: #EEEDFE; color: #3C3489; }

/* ---------- Generate panel ---------- */
.gen-layout { max-width: 620px; }
.gen-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px 22px;
    margin-bottom: 14px;
}
.gen-section-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0 0 8px;
}
.period-options {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 8px;
}
.period-opt {
    font-size: 12.5px;
    padding: 7px 13px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    cursor: pointer;
    color: var(--text-secondary);
}
.period-opt.active {
    background: var(--indigo-50);
    border-color: var(--indigo-200);
    color: var(--indigo-800);
    font-weight: 600;
}
.custom-range {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.custom-range input[type=date] {
    height: 36px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    padding: 0 10px;
    font-size: 12.5px;
    background: var(--bg-surface);
}
.resolved-period {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 8px;
}

/* coverage rows */
.coverage-list { display: flex; flex-direction: column; gap: 6px; }
.coverage-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-muted);
    border-radius: var(--radius-md);
    padding: 9px 12px;
}
.coverage-row .cv-icon {
    width: 24px; height: 24px;
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; color: var(--text-secondary);
    flex-shrink: 0;
}
.coverage-row .cv-label { font-size: 12px; flex: 1; min-width: 0; }
.coverage-row .cv-status { font-size: 11.5px; flex-shrink: 0; }
.cv-status.ok      { color: #085041; }
.cv-status.partial { color: #854F0B; }
.cv-status.empty   { color: #A32D2D; }

.coverage-summary {
    display: flex;
    gap: 16px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.coverage-summary .cs-stat { text-align: center; }
.coverage-summary .cs-num { font-size: 20px; font-weight: 700; margin: 0; }
.coverage-summary .cs-lbl { font-size: 10px; color: var(--text-secondary); margin: 0; letter-spacing: 0.03em; }
.cs-num.filled { color: #1D9E75; }
.cs-num.empty  { color: #D85A30; }

.conflict-warning {
    background: #FCEBEB;
    color: #A32D2D;
    border-radius: var(--radius-md);
    padding: 10px 13px;
    font-size: 12.5px;
    margin-bottom: 14px;
}
.conflict-warning a { color: #A32D2D; font-weight: 600; text-decoration: underline; }

/* ---------- Calendar ---------- */
.calendar-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}
.calendar-month {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}
.cal-day {
    background: var(--bg-muted);
    border-radius: var(--radius-md);
    padding: 7px 6px;
    min-height: 130px;
}
.cal-day.is-today { background: var(--indigo-50); }
.cal-day-label {
    font-size: 10.5px;
    color: var(--text-tertiary);
    text-align: center;
    margin: 0 0 6px;
}
.cal-day.is-today .cal-day-label { color: var(--indigo-800); font-weight: 600; }

.cal-slot {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-left: 2px solid var(--text-tertiary);
    border-radius: 0 4px 4px 0;
    padding: 5px 6px;
    margin-bottom: 5px;
    display: block;
    color: inherit;
}
.cal-slot:hover { text-decoration: none; border-color: var(--border-strong); }
.cal-slot.filled { border-left-color: #1D9E75; }
.cal-slot.empty  { border-left-color: var(--border-strong); border-style: dashed; }
.cal-slot.reused { border-left-color: #EF9F27; }
.cal-slot .cs-time {
    font-size: 9.5px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 3px;
}
.cal-slot .cs-caption {
    font-size: 10.5px;
    margin: 2px 0 0;
    line-height: 1.35;
}
.cal-slot .cs-empty-label {
    font-size: 10.5px;
    color: var(--text-tertiary);
    margin: 2px 0 0;
}
.cal-slot .cs-tag {
    font-size: 8.5px;
    color: var(--text-tertiary);
}

.cal-legend {
    display: flex;
    gap: 14px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.cal-legend span { font-size: 11px; color: var(--text-secondary); }
.legend-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 2px;
    margin-right: 4px;
    vertical-align: middle;
}
.legend-dot.filled { background: #1D9E75; }
.legend-dot.reused { background: #EF9F27; }
.legend-dot.empty  { background: var(--border-strong); }

.cal-month-weekday-head {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin-bottom: 6px;
}
.cal-month-weekday-head span {
    font-size: 10px;
    color: var(--text-tertiary);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.cal-day.cal-pad { background: transparent; min-height: 0; }

/* ---------- Slot content picker ---------- */
.slot-summary {
    background: var(--bg-muted);
    border-radius: var(--radius-md);
    padding: 11px 14px;
    margin-bottom: 14px;
    font-size: 12.5px;
}
.slot-summary strong { color: var(--text-primary); }
.slot-content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}
.slot-content-option {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.slot-content-option.is-current { border-color: var(--indigo-400); border-width: 2px; }
.slot-content-option .sco-thumb {
    aspect-ratio: 4 / 5;
    background: var(--bg-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.slot-content-option .sco-thumb img,
.slot-content-option .sco-thumb video {
    width: 100%; height: 100%; object-fit: cover;
}
.slot-content-option .sco-ph { font-size: 22px; color: var(--text-tertiary); }
.slot-content-option .sco-body { padding: 8px 10px; }
.slot-content-option .sco-caption { font-size: 11px; margin: 0 0 4px; line-height: 1.4; }
.slot-content-option .sco-meta { font-size: 9.5px; color: var(--text-secondary); margin: 0 0 7px; }
.sco-fresh-tag {
    font-size: 9px;
    background: #E1F5EE; color: #085041;
    padding: 1px 6px; border-radius: var(--radius-sm);
}
.sco-used-tag {
    font-size: 9px;
    background: #FAEEDA; color: #854F0B;
    padding: 1px 6px; border-radius: var(--radius-sm);
}
.sco-busy-tag {
    font-size: 9px;
    background: var(--bg-muted); color: var(--text-tertiary);
    padding: 1px 6px; border-radius: var(--radius-sm);
}

/* ============================================================
   Increment 5 — approval chain (queue, decision, client view)
   ============================================================ */

/* ---------- Approval queue / lists ---------- */
.approval-list { display: flex; flex-direction: column; gap: 8px; }
.approval-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 12px 15px;
    color: inherit;
}
.approval-row:hover { text-decoration: none; border-color: var(--border-strong); }
.approval-row .ar-brand {
    width: 34px; height: 34px;
    border-radius: var(--radius-md);
    background: var(--indigo-50);
    color: var(--indigo-800);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
    flex-shrink: 0;
}
.approval-row .ar-body { flex: 1; min-width: 0; }
.approval-row .ar-target { font-size: 13px; font-weight: 600; margin: 0; }
.approval-row .ar-meta { font-size: 11.5px; color: var(--text-secondary); margin: 1px 0 0; }
.approval-row .ar-type-pill {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: var(--radius-md);
    background: var(--bg-muted);
    color: var(--text-secondary);
    flex-shrink: 0;
}
.approval-row .ar-decide-hint {
    font-size: 11px;
    color: var(--indigo-600);
    flex-shrink: 0;
}

.approval-status-badge {
    font-size: 10.5px;
    padding: 3px 9px;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}
.asb-pending          { background: #FAEEDA; color: #854F0B; }
.asb-approved         { background: #E1F5EE; color: #085041; }
.asb-rejected         { background: #FCEBEB; color: #A32D2D; }
.asb-changesrequested { background: #E6F1FB; color: #0C447C; }

/* ---------- Approval detail (decision screen) ---------- */
.approval-detail-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 18px;
    align-items: start;
}
@media (max-width: 800px) {
    .approval-detail-layout { grid-template-columns: 1fr; }
}

.target-panel {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.target-panel-head {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 9px;
}
.target-panel-head .tph-title { font-size: 13px; font-weight: 600; }
.target-panel-body { padding: 16px; }

/* content review */
.content-review {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 18px;
}
@media (max-width: 700px) {
    .content-review { grid-template-columns: 1fr; }
}
.content-review-media {
    background: #14122d;
    border-radius: var(--radius-md);
    min-height: 220px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 6px;
}
.content-review-media img,
.content-review-media video {
    width: 100%;
    height: auto;
    max-height: 60vh;
    object-fit: contain;
    display: block;
    border-radius: 8px;
}
.content-review-media .approval-media-img { cursor: zoom-in; }
.content-review-media .crm-ph { font-size: 28px; color: #b9b6d6; }
.content-review-caption {
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
    margin: 6px 0 0;
}
.content-review-tags {
    font-size: 11.5px;
    color: var(--text-secondary);
    margin-top: 10px;
}
.content-review-meta-line {
    font-size: 11.5px;
    color: var(--text-tertiary);
    margin: 10px 0 0;
}

/* plan review */
.plan-review-summary {
    display: flex;
    gap: 18px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.plan-review-summary .prs-stat { text-align: center; }
.plan-review-summary .prs-num { font-size: 18px; font-weight: 700; margin: 0; }
.plan-review-summary .prs-lbl { font-size: 9.5px; color: var(--text-secondary); margin: 0; letter-spacing: 0.03em; }
.plan-review-slots { display: flex; flex-direction: column; gap: 5px; }
.plan-review-slot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 9px;
    background: var(--bg-muted);
    border-radius: var(--radius-sm);
    border-left: 2px solid #1D9E75;
}
.plan-review-slot.is-empty { border-left-color: var(--border-strong); }
.plan-review-slot .prs-thumb {
    width: 32px; height: 32px;
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    overflow: hidden;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.plan-review-slot .prs-thumb img,
.plan-review-slot .prs-thumb video { width: 100%; height: 100%; object-fit: cover; }
.plan-review-slot .prs-thumb .prs-ph { font-size: 13px; color: var(--text-tertiary); }
.plan-review-slot .prs-when { font-size: 10.5px; color: var(--text-secondary); flex-shrink: 0; }
.plan-review-slot .prs-cap { font-size: 11.5px; flex: 1; min-width: 0; }

/* decision sidebar */
.decision-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px;
}
.decision-card .dc-title {
    font-size: 12.5px;
    font-weight: 600;
    margin: 0 0 4px;
}
.decision-card .dc-sub {
    font-size: 11.5px;
    color: var(--text-secondary);
    margin: 0 0 12px;
}
.decision-card textarea {
    width: 100%;
    min-height: 80px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    padding: 8px 10px;
    font-size: 12.5px;
    font-family: inherit;
    resize: vertical;
    margin-bottom: 10px;
}
.decision-buttons { display: flex; flex-direction: column; gap: 7px; }
.decision-buttons button { width: 100%; }
.btn-approve {
    background: #1D9E75;
    color: #fff;
    border-color: #1D9E75;
}
.btn-approve:hover { background: #178A65; }
.btn-changes {
    background: var(--bg-surface);
    color: #0C447C;
    border-color: #A9CCEC;
}
.btn-changes:hover { background: #E6F1FB; }

.decided-banner {
    border-radius: var(--radius-md);
    padding: 12px 14px;
    font-size: 12.5px;
}
.decided-banner.approved         { background: #E1F5EE; color: #085041; }
.decided-banner.rejected         { background: #FCEBEB; color: #A32D2D; }
.decided-banner.changesrequested { background: #E6F1FB; color: #0C447C; }

.via-link-note {
    background: var(--indigo-50);
    border: 1px solid var(--indigo-100);
    color: var(--indigo-800);
    border-radius: var(--radius-md);
    padding: 9px 13px;
    font-size: 12px;
    margin-bottom: 14px;
}

/* comment history */
.comment-thread { display: flex; flex-direction: column; gap: 8px; }
.comment-item {
    background: var(--bg-muted);
    border-radius: var(--radius-md);
    padding: 9px 12px;
}
.comment-item .ci-head {
    display: flex;
    justify-content: space-between;
    font-size: 10.5px;
    color: var(--text-secondary);
    margin-bottom: 3px;
}
.comment-item .ci-body { font-size: 12px; line-height: 1.5; }
.comment-item .ci-resolved-tag {
    font-size: 9px;
    color: #085041;
}

/* ---------- Change request inbox ---------- */
.cr-list { display: flex; flex-direction: column; gap: 8px; }
.cr-row {
    display: flex;
    gap: 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 13px 15px;
}
.cr-row .cr-brand {
    width: 32px; height: 32px;
    border-radius: var(--radius-md);
    background: var(--indigo-50);
    color: var(--indigo-800);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
    flex-shrink: 0;
}
.cr-row .cr-body { flex: 1; min-width: 0; }
.cr-row .cr-target { font-size: 12.5px; font-weight: 600; margin: 0 0 3px; }
.cr-row .cr-comment {
    font-size: 12px;
    line-height: 1.5;
    background: var(--bg-muted);
    border-radius: var(--radius-sm);
    padding: 7px 10px;
    margin: 0 0 5px;
}
.cr-row .cr-meta { font-size: 10.5px; color: var(--text-secondary); margin: 0; }
.cr-row .cr-actions { flex-shrink: 0; display: flex; flex-direction: column; gap: 6px; }

/* ---------- Client home ---------- */
.client-hero {
    background: var(--indigo-900, #26215C);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 22px 24px;
    margin-bottom: 18px;
}
.client-hero h1 { font-size: 19px; margin: 0 0 4px; color: #fff; }
.client-hero p { font-size: 13px; margin: 0; color: rgba(255,255,255,0.78); }

.client-brand-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}
.client-brand-chip {
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 9px 13px;
}
.client-brand-chip .cbc-logo {
    width: 28px; height: 28px;
    border-radius: var(--radius-sm);
    background: var(--indigo-50);
    color: var(--indigo-800);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
}
.client-brand-chip .cbc-name { font-size: 12.5px; font-weight: 600; }
.client-brand-chip .cbc-count {
    font-size: 11px;
    color: #854F0B;
}
.client-brand-chip .cbc-count.clear { color: #085041; }

/* ---------- mark-posted toggle on calendar ---------- */
.posted-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}
.posted-toggle button {
    font-size: 9px;
    padding: 2px 7px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: var(--bg-surface);
    cursor: pointer;
    color: var(--text-secondary);
}
.posted-toggle button.is-posted {
    background: #E1F5EE;
    border-color: #9FD6C3;
    color: #085041;
}
.cal-slot.published {
    border-left-color: #3C3489;
    background: var(--indigo-50);
}
.cal-slot .cs-posted-tag {
    font-size: 8.5px;
    color: #3C3489;
    font-weight: 600;
}

/* ============================================================
   Blueprint row form — structured day + time schedule editor
   ============================================================ */
.schedule-editor {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 8px;
}
.schedule-entry {
    display: flex;
    gap: 8px;
    align-items: center;
}
.schedule-entry .schedule-day {
    flex: 1;
    height: 38px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    padding: 0 11px;
    font-size: 13px;
    background: var(--bg-surface);
}
.schedule-entry .schedule-time {
    width: 130px;
    height: 38px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    padding: 0 11px;
    font-size: 13px;
    background: var(--bg-surface);
    font-family: inherit;
}
.schedule-entry .schedule-remove {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    color: var(--text-tertiary);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}
.schedule-entry .schedule-remove:hover {
    background: #FCEBEB;
    border-color: #F0999A;
    color: #A32D2D;
}

/* ============================================================
   Media upload progress bar
   ============================================================ */
.upload-progress {
    margin: 4px 0 16px;
}
.upload-progress-head {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.upload-progress-head #uploadProgressPct {
    font-weight: 600;
    color: var(--indigo-700, var(--indigo-800));
}
.upload-progress-track {
    height: 8px;
    background: var(--bg-muted);
    border-radius: 999px;
    overflow: hidden;
}
.upload-progress-bar {
    height: 100%;
    width: 0%;
    background: var(--indigo-600);
    border-radius: 999px;
    transition: width 0.2s ease;
}

/* "Indeterminate" mode — used while the server uploads to S3, when we
   can't measure real progress. A moving stripe replaces the static 100%
   so the user can see something is still happening. */
.upload-progress-bar-indeterminate {
    width: 100% !important;
    background: linear-gradient(
        90deg,
        var(--indigo-600) 0%, var(--indigo-600) 35%,
        var(--indigo-400) 50%,
        var(--indigo-600) 65%, var(--indigo-600) 100%);
    background-size: 200% 100%;
    animation: upload-stripe 1.4s linear infinite;
}
@keyframes upload-stripe {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* ============================================================
   Plan approval — calendar view + slot popup
   ============================================================ */
.approval-cal-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}
.approval-cal-monthhead {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin-bottom: 6px;
}
.approval-cal-monthhead span {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-align: center;
    letter-spacing: 0.03em;
}
.approval-cal-month {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}
.approval-cal-day {
    background: var(--bg-muted);
    border-radius: var(--radius-sm);
    padding: 6px;
    min-height: 72px;
}
.approval-cal-day.acd-pad {
    background: transparent;
}
.acd-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0 0 5px;
}
.acd-slot {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-left: 2px solid #1D9E75;
    border-radius: var(--radius-sm);
    padding: 5px 6px;
    margin-bottom: 4px;
    cursor: pointer;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.acd-slot:hover {
    border-color: var(--border-strong);
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
}
.acd-slot.is-empty {
    border-left-color: var(--border-strong);
    border-style: dashed;
}
.acd-slot-time {
    display: block;
    font-size: 9.5px;
    color: var(--text-secondary);
    margin-bottom: 2px;
}
.acd-slot-cap {
    display: block;
    font-size: 10.5px;
    line-height: 1.35;
    color: var(--text-primary);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.acd-slot-empty {
    display: block;
    font-size: 10px;
    color: var(--text-tertiary);
    font-style: italic;
}

/* slot popup modal */
.acd-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(20, 18, 45, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 24px;
}
.acd-modal {
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    max-width: 460px;
    width: 100%;
    max-height: 88vh;
    overflow: auto;
    position: relative;
    box-shadow: 0 18px 50px rgba(0,0,0,0.3);
}
.acd-modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 30px;
    height: 30px;
    border: none;
    background: rgba(255,255,255,0.85);
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    color: var(--text-secondary);
    cursor: pointer;
    z-index: 2;
}
.acd-modal-close:hover {
    background: #fff;
    color: var(--text-primary);
}
.acd-modal-media {
    background: var(--bg-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    max-height: 420px;
    overflow: hidden;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.acd-modal-media img,
.acd-modal-media video {
    width: 100%;
    height: auto;
    max-height: 420px;
    object-fit: contain;
}
.acd-modal-ph {
    font-size: 12px;
    color: var(--text-tertiary);
    padding: 40px 20px;
    text-align: center;
}
.acd-modal-body {
    padding: 16px 18px 20px;
}
.acd-modal-when {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 3px;
}
.acd-modal-meta {
    font-size: 11.5px;
    color: var(--text-secondary);
    margin: 0 0 12px;
}
.acd-modal-caption {
    font-size: 13px;
    line-height: 1.55;
    white-space: pre-wrap;
    color: var(--text-primary);
}

/* ============================================================
   User management — role pills, inactive tag, checkbox label
   ============================================================ */
.role-pill {
    font-size: 10.5px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--radius-md);
    flex-shrink: 0;
    letter-spacing: 0.01em;
}
.role-pill.role-superadmin { background: #EDE9FB; color: #4A3D9E; }
.role-pill.role-manager    { background: #E6F1FB; color: #0C447C; }
.role-pill.role-editor     { background: #E1F5EE; color: #085041; }
.role-pill.role-designer   { background: #FBEEF7; color: #8A2D6B; }
.role-pill.role-client     { background: #FAEEDA; color: #854F0B; }

.inactive-tag {
    font-size: 9.5px;
    font-weight: 600;
    color: #A32D2D;
    background: #FCEBEB;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    margin-left: 6px;
    vertical-align: middle;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
    width: auto;
    margin: 0;
}

/* ============================================================
   Carousels — content card badge, writer's-desk reorder strip
   ============================================================ */

/* count badge on the library card + planner thumbnails */
.carousel-badge {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background: rgba(20, 18, 45, 0.82);
    color: #fff;
    font-size: 10.5px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: var(--radius-sm);
    letter-spacing: 0.02em;
}

/* the "N images" badge next to the editor media label */
.carousel-count-badge {
    display: inline-block;
    background: var(--indigo-50);
    color: var(--indigo-800);
    font-size: 10.5px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-md);
    margin-left: 6px;
    vertical-align: middle;
}

/* writer's-desk reorder strip */
.carousel-strip {
    margin-top: 10px;
}
.carousel-strip-hint {
    font-size: 11px;
    color: var(--text-secondary);
    margin: 0 0 6px;
}
.carousel-strip-items {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.carousel-item {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-strong);
    overflow: hidden;
    cursor: grab;
    background: var(--bg-muted);
    flex-shrink: 0;
}
.carousel-item:first-child {
    border-color: var(--indigo-600);
    box-shadow: 0 0 0 2px var(--indigo-100);
}
.carousel-item.dragging {
    opacity: 0.5;
}
.carousel-item-thumb {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.carousel-item-thumb img,
.carousel-item-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.carousel-item-thumb .ci-ph {
    font-size: 18px;
    color: var(--text-tertiary);
}
.carousel-item-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    background: rgba(20, 18, 45, 0.78);
    color: #fff;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.carousel-item-remove:hover {
    background: #A32D2D;
}
/* small "cover" hint on the first item */
.carousel-item:first-child::after {
    content: "cover";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--indigo-600);
    color: #fff;
    font-size: 8px;
    font-weight: 600;
    text-align: center;
    padding: 1px 0;
    letter-spacing: 0.04em;
}

/* ============================================================
   Calendar slot popup + slot thumbnails
   ============================================================ */

/* clickable slots + the thumbnail on filled slots */
.cal-slot-clickable { cursor: pointer; }
.cal-slot-clickable:hover {
    box-shadow: 0 0 0 2px var(--indigo-200);
}
.cs-thumb {
    width: 100%;
    height: 56px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 5px;
    background: var(--bg-muted);
}
.cs-thumb img,
.cs-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cs-fill-hint {
    display: inline-block;
    margin-top: 3px;
    font-size: 10px;
    color: var(--indigo-600);
    font-weight: 600;
}

/* ---- modal shell ---- */
.slot-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 18, 45, 0.55);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.slot-modal {
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 460px;
    max-height: 88vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 60px rgba(20, 18, 45, 0.35);
}
.slot-modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    color: var(--text-tertiary);
    cursor: pointer;
}
.slot-modal-close:hover { color: var(--text-primary); }
.slot-modal-head {
    padding: 16px 18px 10px;
    border-bottom: 1px solid var(--border);
}
.slot-modal-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}
.slot-modal-sub {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 2px 0 0;
}
.slot-modal-body { padding: 16px 18px 18px; }
.slot-modal-loading {
    text-align: center;
    color: var(--text-tertiary);
    font-size: 13px;
    padding: 30px 0;
}

/* ---- VIEW: styled social-media post preview ---- */
.spp-card {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #fff;
}
.spp-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
}
.spp-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--indigo-600);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.spp-handle {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
/* the media area: each frame fills the width; carousel scrolls horizontally.
   height is capped but media keeps its own aspect via object-fit: contain so
   vertical posts stay vertical and landscape posts stay landscape. */
.spp-media-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}
.spp-media-frame {
    flex: 0 0 100%;
    scroll-snap-align: start;
    background: #14122d;
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 60vh;
}
.spp-media-frame img,
.spp-media-frame video {
    width: 100%;
    max-height: 60vh;
    object-fit: contain;
    display: block;
}
.spp-media-ph {
    width: 100%;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b9b6d6;
    font-size: 32px;
}
.spp-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 5px;
    padding: 7px 0 3px;
}
.spp-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border-strong);
}
.spp-dot.active { background: var(--indigo-600); }
.spp-caption {
    padding: 9px 11px 12px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
}

/* ---- EDIT: pick / swap content ---- */
.slot-edit-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
    margin: 0 0 7px;
}
.slot-edit-current {
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.slot-edit-current-row,
.slot-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: 7px;
}
.slot-option.is-used { opacity: 0.55; }
.so-thumb {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg-muted);
    flex-shrink: 0;
}
.so-thumb img,
.so-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.so-thumb .so-ph {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    font-size: 16px;
}
.so-carousel {
    position: absolute;
    bottom: 1px;
    right: 1px;
    background: rgba(20, 18, 45, 0.82);
    color: #fff;
    font-size: 8.5px;
    font-weight: 600;
    padding: 1px 4px;
    border-radius: 3px;
}
.so-body { flex: 1; min-width: 0; }
.so-caption {
    font-size: 12px;
    color: var(--text-primary);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.so-meta {
    font-size: 10.5px;
    margin: 3px 0 0;
}
.so-fresh { color: #1D9E75; font-weight: 600; }
.so-reused { color: #D85A30; font-weight: 600; }
.so-inplan { color: var(--text-tertiary); }
.so-pick { flex-shrink: 0; }
.slot-options-empty {
    font-size: 12px;
    color: var(--text-tertiary);
    line-height: 1.5;
    background: var(--bg-muted);
    padding: 11px;
    border-radius: var(--radius-md);
    margin: 0;
}

/* ============================================================
   All-brands library — brand badge on content cards
   ============================================================ */
.cc-brand-row {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 5px;
}
.cc-brand-badge {
    width: 17px;
    height: 17px;
    border-radius: var(--radius-sm);
    background: var(--indigo-600);
    color: #fff;
    font-size: 8.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cc-brand-name {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================
   All-brands planner — multi-brand plan rows
   ============================================================ */
/* the row is now a container holding two links: the brand badge (to the
   brand's planner) and the main body (to the plan's calendar). */
.plan-row-multi {
    gap: 0;
    padding: 0;
    overflow: hidden;
}
.pr-brand-badge-link {
    display: flex;
    align-items: center;
    padding: 13px 13px 13px 16px;
    flex-shrink: 0;
}
.pr-brand-badge-link:hover { background: var(--indigo-50); }
.pr-brand-badge {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md);
    background: var(--indigo-600);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pr-main {
    display: flex;
    align-items: center;
    gap: 13px;
    flex: 1;
    min-width: 0;
    padding: 13px 16px 13px 3px;
    color: inherit;
}
.pr-main:hover { text-decoration: none; }
.plan-row-multi:hover { border-color: var(--border-strong); }
.pr-brand-name {
    display: inline-block;
    font-weight: 700;
    color: var(--indigo-800);
    margin-right: 4px;
}

/* ============================================================
   Brands list + detail polish — stat chips, glance grid
   ============================================================ */

/* small stat chips under a page title (replaces a plain text sub-line) */
.stat-chip-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 4px 0 18px;
}
.stat-chip {
    font-size: 13px;
    color: var(--text-secondary);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 13px;
    box-shadow: var(--shadow-soft);
}
.stat-chip strong {
    color: var(--indigo-600);
    font-weight: 700;
}

/* "At a glance" stat grid inside a card on the brand detail page */
.glance-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 4px;
}
.glance-stat {
    background: var(--bg-muted);
    border-radius: var(--radius-md);
    padding: 13px 12px;
    text-align: center;
}
.glance-num {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.1;
}
.glance-num.glance-teal  { color: var(--teal-600); }
.glance-num.glance-amber { color: var(--amber-600); }
.glance-lbl {
    font-size: 11px;
    color: var(--text-secondary);
    margin: 4px 0 0;
    line-height: 1.3;
}

/* detail-page action buttons — let them wrap neatly, with a small gap */
.detail-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* ============================================================
   Danger zone — brand delete confirmation page + danger button
   ============================================================ */

/* solid red button for truly destructive actions */
.btn-danger-strong {
    background: var(--red-600);
    border-color: var(--red-600);
    color: #fff;
    box-shadow: var(--shadow-soft);
}
.btn-danger-strong:hover { background: #C73D44; border-color: #C73D44; }
.btn-danger-strong:disabled {
    background: var(--border-strong);
    border-color: var(--border-strong);
    color: #fff;
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.7;
}

/* danger card on the confirmation page */
.danger-card {
    border: 2px solid var(--red-600);
    box-shadow: 0 8px 22px rgba(232, 74, 82, 0.12);
}
.danger-head {
    display: flex;
    align-items: center;
    gap: 14px;
}
.danger-head .brand-logo {
    background: var(--red-50);
    color: var(--red-600);
}

/* the "what will be wiped" list on the confirmation page */
.delete-summary {
    background: var(--red-50);
    border-radius: var(--radius-md);
    padding: 14px 18px;
    margin-top: 8px;
}
.ds-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 4px 0;
    font-size: 14px;
    color: var(--text-primary);
}
.ds-num {
    min-width: 30px;
    font-weight: 700;
    color: var(--red-600);
    font-size: 16px;
}
.ds-lbl { color: var(--text-secondary); }

/* danger zone at the bottom of the brand detail page */
.danger-zone {
    margin-top: 32px;
    padding: 18px 22px;
    background: var(--bg-surface);
    border: 1px solid #F3C5C7;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
}
.danger-zone-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.dz-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
}
.dz-sub {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 3px 0 0;
    max-width: 540px;
    line-height: 1.5;
}

/* ============================================================
   Performance page — account tabs, summary grid, weekly table
   ============================================================ */

/* account selector tabs */
.account-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 18px 0 18px;
}
.account-tab {
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 8px 16px 8px 9px;
    cursor: pointer;
    font-size: 13.5px;
    box-shadow: var(--shadow-soft);
    color: var(--text-secondary);
    text-decoration: none;
}
.account-tab:hover { text-decoration: none; border-color: var(--border-strong); }
.account-tab.active {
    background: var(--indigo-50);
    border-color: var(--indigo-200);
    color: var(--indigo-800);
    font-weight: 600;
}
.account-tab .ico {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--indigo-600);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* "this week" summary tiles */
.summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 22px;
}
@media (max-width: 980px) {
    .summary-grid { grid-template-columns: repeat(2, 1fr); }
}
.summary-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    box-shadow: var(--shadow-soft);
}
.sc-lbl {
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--text-tertiary);
    margin: 0 0 4px;
}
.sc-val {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
}
.sc-delta {
    font-size: 12.5px;
    margin: 4px 0 0;
    font-weight: 600;
}
.sc-delta.up   { color: var(--teal-600); }
.sc-delta.down { color: var(--coral-600); }
.sc-delta.flat { color: var(--text-tertiary); }

/* the weekly table card */
.table-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}
.tc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border);
}
.tc-title { font-size: 16px; font-weight: 600; margin: 0; }
.tc-sub   { font-size: 12.5px; color: var(--text-secondary); margin: 2px 0 0; }

.tbl-wrap { overflow-x: auto; }
table.metrics {
    width: 100%;
    min-width: 980px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
}
table.metrics thead th {
    background: var(--bg-muted);
    color: var(--text-secondary);
    text-align: right;
    padding: 12px 14px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
table.metrics thead th:first-child {
    text-align: left;
    padding-left: 22px;
    position: sticky;
    left: 0;
    background: var(--bg-muted);
    z-index: 1;
}
table.metrics tbody td {
    padding: 14px;
    text-align: right;
    border-bottom: 1px solid var(--border);
    font-variant-numeric: tabular-nums;
}
table.metrics tbody td:first-child {
    text-align: left;
    font-weight: 600;
    padding-left: 22px;
    position: sticky;
    left: 0;
    background: var(--bg-surface);
    z-index: 1;
}
table.metrics tbody tr:last-child td { border-bottom: none; }
table.metrics tbody tr:hover td { background: var(--indigo-50); }
table.metrics tbody tr:hover td:first-child { background: var(--indigo-50); }
.wk-date {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-tertiary);
    margin-top: 2px;
}
.delta {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 600;
}
.delta.up   { color: var(--teal-600); }
.delta.down { color: var(--coral-600); }
.empty-week td { color: var(--text-tertiary); font-style: italic; background: #fcfcfe; }
.empty-week td:first-child {
    font-style: normal;
    font-weight: 600;
    color: var(--text-primary);
    background: #fcfcfe;
}

/* the entry form metric grid */
.metric-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 600px) {
    .metric-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Editor media downloads — inline meta-line link + carousel badge
   ============================================================ */
.emf-download-link {
    color: var(--indigo-600);
    font-weight: 600;
    text-decoration: none;
}
.emf-download-link:hover { text-decoration: underline; }

/* small download badge on carousel items — sits next to the × remove */
.carousel-item-download {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    background: rgba(20, 18, 45, 0.78);
    color: #fff;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.carousel-item-download:hover {
    background: var(--indigo-600);
    text-decoration: none;
}

/* ============================================================
   Multi-target content — "Also usable on" chip widget on the
   editor, and the small subtitle line on library cards.
   ============================================================ */

.extra-targets {
    margin: 6px 0 14px;
    padding: 12px 14px;
    background: var(--bg-muted);
    border-radius: var(--radius-md);
}
.extra-targets-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.extra-targets-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    text-transform: uppercase;
}
.extra-targets-select {
    flex: 1;
    min-width: 200px;
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-family: inherit;
}
.extra-targets-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    min-height: 26px;
    align-items: center;
}
.extra-target-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--indigo-800);
    background: var(--indigo-50);
    border: 1px solid var(--indigo-100);
    border-radius: 999px;
    padding: 4px 6px 4px 12px;
}
.extra-target-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--indigo-600);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0;
}
.extra-target-remove:hover { background: var(--indigo-100); }
.extra-targets-empty {
    font-size: 12px;
    color: var(--text-tertiary);
    font-style: italic;
}

/* the "Also on Instagram - Reel, LinkedIn - Post" line on library cards */
.cc-also {
    margin: 4px 0 0;
    font-size: 11.5px;
    color: var(--indigo-600);
    font-weight: 600;
}

/* ============================================================
   Approval page enrichments — info chips, carousel strip,
   inline caption edit, image lightbox.
   ============================================================ */

.approval-info-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.ai-chip {
    display: inline-flex;
    align-items: center;
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--indigo-50);
    color: var(--indigo-800);
    border: 1px solid var(--indigo-100);
}
.ai-chip-muted {
    background: var(--bg-muted);
    color: var(--text-secondary);
    border-color: var(--border);
    font-weight: 500;
}
.ai-chip-type.video {
    background: var(--coral-50);
    color: #8C3315;
    border-color: #F6C9B5;
}
.ai-chip-type.image {
    background: var(--teal-50);
    color: #0C5C44;
    border-color: #BCE7D9;
}

.approval-also {
    margin: 0 0 12px;
    font-size: 12.5px;
    color: var(--indigo-800);
}
.approval-also strong { font-weight: 700; }

/* small carousel strip below the cover on the approval page */
.carousel-thumb-strip {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
    width: 100%;
    justify-content: center;
}
.carousel-thumb {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: #1d1a3a;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-in;
    border: 2px solid transparent;
}
.carousel-thumb:hover { border-color: var(--indigo-400); }
.carousel-thumb img { width: 100%; height: 100%; object-fit: cover; }
.carousel-thumb .ci-ph { color: #b9b6d6; font-size: 16px; }

/* inline caption editor on the approval page (SuperAdmin only) */
.approval-edit-hint {
    font-size: 12px;
    color: var(--text-tertiary);
    margin: 0 0 6px;
    font-style: italic;
}
.approval-caption-edit {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.55;
    background: var(--bg-surface);
    color: var(--text-primary);
    resize: vertical;
    min-height: 120px;
}
.approval-caption-edit:focus {
    outline: none;
    border-color: var(--indigo-600);
    box-shadow: 0 0 0 3px rgba(91, 79, 227, 0.12);
}

/* lightbox */
.approval-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(20, 18, 45, 0.92);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 60px;
}
.approval-lightbox .lb-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 92vw;
    max-height: 80vh;
}
.approval-lightbox .lb-img,
.approval-lightbox .lb-video {
    max-width: 92vw;
    max-height: 80vh;
    border-radius: var(--radius-md);
    background: #14122d;
}
.approval-lightbox .lb-ph {
    color: #b9b6d6;
    font-size: 64px;
}
.approval-lightbox .lb-caption {
    color: #fff;
    margin-top: 14px;
    font-size: 13px;
    opacity: 0.85;
    text-align: center;
}
.approval-lightbox .lb-close,
.approval-lightbox .lb-prev,
.approval-lightbox .lb-next {
    position: absolute;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.12s ease;
}
.approval-lightbox .lb-close:hover,
.approval-lightbox .lb-prev:hover,
.approval-lightbox .lb-next:hover {
    background: rgba(255, 255, 255, 0.24);
}
.approval-lightbox .lb-close {
    top: 20px;
    right: 24px;
    width: 40px;
    height: 40px;
    font-size: 24px;
    line-height: 1;
}
.approval-lightbox .lb-prev,
.approval-lightbox .lb-next {
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    font-size: 32px;
    line-height: 1;
}
.approval-lightbox .lb-prev { left: 18px; }
.approval-lightbox .lb-next { right: 18px; }

/* ============================================================
   Library card preview popup — opens when a card is clicked on
   the per-brand library. Mimics a social-media post layout.
   ============================================================ */

.content-card-btn {
    /* Reset button defaults so it visually looks identical to the
       previous <a class="content-card"> anchor element. */
    background: var(--bg-surface);
    text-align: left;
    font: inherit;
    cursor: pointer;
    width: 100%;
    padding: 0;
    color: inherit;
}
.content-card-archived {
    opacity: 0.85;
    position: relative;
}

.cp-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 18, 45, 0.7);
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.cp-modal {
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 540px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 24px 60px rgba(20, 18, 45, 0.5);
}
.cp-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(20, 18, 45, 0.08);
    color: var(--text-primary);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    z-index: 1;
}
.cp-modal-close:hover { background: rgba(20, 18, 45, 0.15); }
.cp-modal-loading {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 14px;
}

/* the social-media-style card inside the popup */
.cp-post-card {
    display: flex;
    flex-direction: column;
}
.cp-post-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 16px 20px;
}
.cp-brand-badge {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--indigo-600);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cp-platform-line {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}
.cp-status-line {
    margin: 1px 0 0;
    font-size: 12px;
    color: var(--text-tertiary);
}

.cp-media-wrap {
    width: 100%;
    background: #14122d;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    max-height: 65vh;
    overflow: hidden;
    position: relative;
}
.cp-media {
    width: 100%;
    height: auto;
    max-height: 65vh;
    object-fit: contain;
    display: block;
}
.cp-media-ph {
    color: #b9b6d6;
    padding: 40px 20px;
}
.cp-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(20, 18, 45, 0.75);
    color: #fff;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* carousel strip below the cover, when there's more than one media */
.cp-strip {
    display: flex;
    gap: 6px;
    padding: 8px 14px;
    overflow-x: auto;
    background: var(--bg-muted);
}
.cp-strip-item {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: #1d1a3a;
    cursor: zoom-in;
    flex-shrink: 0;
    border: 2px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cp-strip-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cp-strip-item.active { border-color: var(--indigo-600); }
.cp-strip-ph { color: #b9b6d6; font-size: 16px; }

.cp-post-body {
    padding: 14px 20px 18px;
}
.cp-chip-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.cp-chip {
    display: inline-flex;
    align-items: center;
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--bg-muted);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}
.cp-chip-video {
    background: var(--coral-50);
    color: #8C3315;
    border-color: #F6C9B5;
}
.cp-chip-image {
    background: var(--teal-50);
    color: #0C5C44;
    border-color: #BCE7D9;
}
.cp-chip-status.approved {
    background: var(--teal-50);
    color: #0C5C44;
    border-color: #BCE7D9;
}
.cp-chip-status.pendingapproval {
    background: var(--amber-50);
    color: #6A4A0F;
    border-color: #F4DBA0;
}
.cp-chip-status.draft {
    background: var(--indigo-50);
    color: var(--indigo-800);
    border-color: var(--indigo-100);
}
.cp-chip-status.rejected {
    background: var(--red-50);
    color: #771E22;
    border-color: #F1B5B8;
}
.cp-also {
    font-size: 12.5px;
    color: var(--indigo-800);
    margin: 0 0 10px;
}
.cp-caption {
    font-size: 14px;
    line-height: 1.55;
    white-space: pre-wrap;
    color: var(--text-primary);
}
.cp-tag {
    color: var(--indigo-600);
    font-weight: 600;
}

.cp-actions {
    display: flex;
    gap: 8px;
    padding: 0 20px 20px;
    flex-wrap: wrap;
}
.cp-actions .cp-archive-form {
    display: inline;
    margin: 0;
}

/* ============================================================
   Per-card action row on the library — visible always so the
   archive / edit actions don't depend on the popup script.
   ============================================================ */
.content-card-wrap {
    display: flex;
    flex-direction: column;
}
.content-card-wrap .content-card-btn { margin-bottom: 0; }
.content-card-actions {
    display: flex;
    gap: 6px;
    padding: 8px 10px 10px;
    background: var(--bg-surface);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    border: 1px solid var(--border);
    border-top: none;
    margin-top: -6px;
}
.content-card-actions form { display: inline; margin: 0; flex: 1; }
.cca-btn {
    flex: 1;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 8px;
    border-radius: 999px;
    background: var(--bg-muted);
    color: var(--text-primary);
    border: 1px solid var(--border);
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    width: 100%;
    font-family: inherit;
}
.cca-btn:hover { background: var(--indigo-50); border-color: var(--indigo-100); color: var(--indigo-800); }
.cca-btn-archive {
    background: #FCEAEC;
    border-color: #F1B5B8;
    color: #771E22;
}
.cca-btn-archive:hover { background: #F8D6D8; border-color: #E89A9F; }