/* Animations */
@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Reset & Base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --primary:       #0D2545;
    --primary-hover: #081A35;
    --primary-light: #E6EDF5;
    --danger:        #EF4444;
    --danger-hover:  #DC2626;
    --success:       #10B981;
    /* Due-date urgency, shared by the Projects board and the project page. The tasks
       board predates these and still has its own .tk-due-* copies in its inline style
       block; anything new should read these so the three stay in step. */
    --due-overdue:   #B91C1C;
    --due-today:     #15803D;
    --due-soon:      #A16207;
    --border:        #EAECF0;
    --bg:            #F5F7FA;
    --surface:       #FFFFFF;
    --text:          #111827;
    --text-muted:    #6B7280;
    --text-light:    #9CA3AF;
    --radius:        10px;
    --radius-sm:     7px;
    --radius-lg:     14px;
    --radius-xl:     18px;
    --topnav-h:      52px;
    --nav-w:         268px;
    --sidebar-w:     292px;
    --shadow-sm:     0 1px 4px rgba(13,37,69,.07), 0 1px 2px rgba(0,0,0,.04);
    --shadow-md:     0 4px 16px rgba(13,37,69,.10), 0 2px 6px rgba(0,0,0,.06);
    --shadow-lg:     0 8px 32px rgba(13,37,69,.12), 0 4px 12px rgba(0,0,0,.08);
}

/* Dark Mode Variables */
html.dark {
    --primary:       #4A8FE8;
    --primary-hover: #0D2545;
    --primary-light: #1A2840;
    --danger:        #F87171;
    --danger-hover:  #EF4444;
    --success:       #34D399;
    --border:        #2D2D3A;
    --bg:            #0F0F14;
    --surface:       #18181F;
    --text:          #F1F0FF;
    --text-muted:    #9CA3AF;
    --text-light:    #6B7280;
    --shadow-sm:     0 1px 4px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
    --shadow-md:     0 4px 16px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.3);
    --shadow-lg:     0 8px 32px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.4);
}

/* Client Sub-Navigation */
.client-subnav {
    background: var(--surface);
    border-bottom: 1.5px solid var(--border);
    padding: 0 18px;
    flex-shrink: 0;
    z-index: 99;
}
.ec-panel { display: none; }
.client-subnav-inner {
    display: flex;
    align-items: stretch;
    gap: 0;
}
.client-subnav-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0 16px 0 0;
    margin-right: 4px;
    border-right: 1.5px solid var(--border);
    display: flex;
    align-items: center;
    white-space: nowrap;
    flex-shrink: 0;
}
.subnav-link {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    border-bottom: 2px solid transparent;
    margin-bottom: -1.5px;
    transition: color .15s, border-color .15s;
    white-space: nowrap;
}
.subnav-link:hover { color: var(--text); }
.subnav-link.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

/* Mobile: subnav collapses to dropdown */
.subnav-mobile-btn { display: none; }

@media (max-width: 768px) {
    .client-subnav { padding: 0; }
    .client-subnav-inner { flex-direction: column; position: relative; }
    .client-subnav-label { display: none; }
    .subnav-link {
        display: none;
        padding: 11px 18px;
        border-bottom: none;
        border-top: 1px solid var(--border);
        margin-bottom: 0;
        font-size: 14px;
    }
    .subnav-link.active {
        color: var(--accent);
        border-bottom: none;
        font-weight: 600;
    }
    .client-subnav.subnav-open .subnav-link { display: flex; }
    .subnav-mobile-btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 10px 18px;
        width: 100%;
        background: none;
        border: none;
        cursor: pointer;
        text-align: left;
        min-height: 42px;
    }
    .subnav-mobile-btn-text {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }
    .subnav-mobile-client {
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--text-muted);
    }
    .subnav-mobile-page {
        font-size: 13px;
        font-weight: 600;
        color: var(--text);
    }
    .subnav-mobile-chevron {
        flex-shrink: 0;
        color: var(--text-muted);
        transition: transform .2s;
    }
    .client-subnav.subnav-open .subnav-mobile-chevron { transform: rotate(180deg); }
}

/* Dark mode overrides that can't be done with variables alone */
html.dark .topnav {
    background: rgba(24,24,31,.92);
    border-bottom-color: var(--border);
}
html.dark .client-subnav {
    background: rgba(24,24,31,.92);
}
html.dark .login-page {
    background: linear-gradient(135deg, #0F0F14 0%, #13131A 50%, #0F0F14 100%);
}
html.dark .login-card {
    background: var(--surface);
    border-color: var(--border);
}
html.dark .field-input:hover,
html.dark .field-select:hover,
html.dark .field-textarea:hover {
    background: #1E1E2A;
}
html.dark .field-input:focus,
html.dark .field-select:focus,
html.dark .field-textarea:focus {
    background: #1E1E2A;
}
html.dark .upload-zone { background: #1E1E2A; }
html.dark .upload-zone:hover { background: var(--primary-light); }
html.dark .upload-zone-multi { background: #1E1E2A; }
html.dark .upload-zone-multi.drag-over { background: var(--primary-light); }
html.dark .kanban-col-header { background: #1E1E2A; }
html.dark .content-item:hover { background: #1E1E2A; }
html.dark .content-card:hover { background: #1E1E2A; }
html.dark .hamburger-menu.open { background: var(--surface); }
html.dark .media-browser-header { background: #1E1E2A; }
html.dark .quill-editor-wrap { background: #18181F; color: var(--text); }
html.dark .ql-toolbar { background: #1E1E2A; border-color: var(--border) !important; }
html.dark .ql-container { border-color: var(--border) !important; }
html.dark .ql-editor { color: var(--text); }
html.dark .ql-stroke { stroke: var(--text-muted) !important; }
html.dark .ql-fill { fill: var(--text-muted) !important; }
html.dark .ql-picker-label { color: var(--text-muted) !important; }
html.dark select option { background: var(--surface); color: var(--text); }
html.dark ::-webkit-scrollbar-thumb { background: #3D3D50; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #5D5D78; }

/* Dark mode toggle switch */
.dark-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
}
.dark-toggle-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
}
.dark-toggle-sub {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}
.toggle-switch {
    display: inline-block;
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    vertical-align: middle;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-track {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #9CA3AF;
    border-radius: 100px;
    cursor: pointer;
    transition: background .2s;
}
html.dark .toggle-track { background: #4B5563; }
.toggle-track::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 3px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: transform .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.toggle-switch input:checked + .toggle-track { background: var(--primary); }
.toggle-switch input:checked + .toggle-track::after { transform: translateX(20px); }

html, body { height: 100%; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    color: var(--text);
    background: var(--bg);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* Login Page */
.login-page {
    background: linear-gradient(135deg, #E6EDF5 0%, #F5F7FA 50%, #F0F4FA 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}
.login-wrap { width: 100%; max-width: 400px; padding: 24px; }
.login-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    margin-bottom: 28px;
    font-weight: 700;
    font-size: 17px;
    color: var(--text);
}
.login-logo { width: 220px; max-width: 70%; height: auto; display: block; }
.login-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 36px;
    box-shadow: var(--shadow-lg);
}
.login-card h1 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--text);
}
.login-card p.subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 24px;
}

/* Brand Mark */
.brand-mark {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #0D2545, #1A3A6E);
    color: #fff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: .5px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(13,37,69,.35);
}
.brand-mark.sm {
    width: 28px;
    height: 28px;
    font-size: 10px;
    border-radius: 8px;
}

/* Forms */
.form-group { margin-bottom: 16px; }
.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 6px;
}
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 9px 13px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
    background: var(--surface);
    transition: border-color .15s, box-shadow .15s;
    outline: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(13,37,69,.13);
}
.form-group textarea { resize: vertical; min-height: 80px; }
.form-hint { font-size: 12px; color: var(--text-muted); margin-top: 4px; margin-bottom: 16px; line-height: 1.5; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* Three-up variant for short fields (social URLs, yes/no selects) that read as a
   long ladder when stacked. minmax(0,1fr) so a long value cannot widen a column. */
.form-row-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
/* Three URL fields get cramped before the phone breakpoint, so step down to two
   first. The drop to one column rides along with .form-row at 600px. */
@media (max-width: 900px) { .form-row-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.form-actions { display: flex; align-items: center; gap: 10px; justify-content: flex-end; margin-top: 8px; }
.required { color: var(--danger); }

.form-section-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--text-muted);
    margin: 20px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 22px;
    border: 1.5px solid transparent;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .1s;
    white-space: nowrap;
    text-decoration: none;
    letter-spacing: .01em;
}
.btn:active { transform: scale(.97); }
.btn-primary {
    background: var(--primary);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(13,37,69,.18);
}
.btn-primary:hover {
    background: var(--primary-hover);
    box-shadow: 0 2px 6px rgba(13,37,69,.22);
}
.btn-danger  {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
}
.btn-danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); }
.btn-ghost {
    background: transparent;
    color: var(--text-muted);
    border-color: var(--border);
}
.btn-ghost:hover { background: var(--bg); color: var(--text); border-color: #D1D5DB; }
.btn-ghost:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.btn-send-review {
    background: transparent;
    color: #1A3A6E;
    border-color: #C4B5FD;
}
.btn-send-review:hover { background: #F5F3FF; border-color: #1A3A6E; }
html.dark .btn-send-review:hover { background: rgba(139,92,246,.12); }
.btn-sm  { padding: 5px 12px; font-size: 12px; }
.btn-xs  { padding: 3px 9px;  font-size: 11px; }
.btn-lg  { padding: 14px 30px; font-size: 15px; gap: 10px; }
.btn-block { width: 100%; }
/* Bright blue call-to-action. --primary is navy in light mode, so anything that has
   to stand out from a wall of form fields (file downloads, "do this next") uses this. */
.btn-blue {
    background: #2563EB;
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(37,99,235,.35);
}
.btn-blue:hover { background: #1D4ED8; color: #fff; box-shadow: 0 4px 14px rgba(37,99,235,.45); }
.btn-blue:focus-visible { outline: 2px solid #2563EB; outline-offset: 2px; }

/* Uploaded-file callout: a tinted panel so a download does not vanish among form fields. */
.file-callout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding: 16px 18px;
    background: rgba(37,99,235,.07);
    border: 1.5px solid rgba(37,99,235,.35);
    border-radius: var(--radius);
}
.file-callout-info { display: flex; align-items: center; gap: 14px; min-width: 0; }
.file-callout-info > i { font-size: 26px; color: #2563EB; flex-shrink: 0; }
.file-callout-title { font-size: 14px; font-weight: 600; color: var(--text); }
.file-callout-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.file-callout .btn { flex-shrink: 0; }

/* Alerts */
.alert {
    padding: 11px 15px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    margin-bottom: 16px;
    border: 1.5px solid transparent;
}
.alert-error   { background: #FEF2F2; color: #991B1B; border-color: #FECACA; }
.alert-success { background: #F0FDF4; color: #166534; border-color: #BBF7D0; }
.alert-warning { background: #FFFBEB; color: #92400E; border-color: #FDE68A; }
.alert a { text-decoration: underline; }

/* Media last-upload notice (content editor) */
.media-last-upload-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #FFFBEB;
    border: 1.5px solid #FDE68A;
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font-size: 12.5px;
    color: #92400E;
    margin-bottom: 8px;
}
.media-last-upload-notice i { flex-shrink: 0; font-size: 14px; color: #D97706; }
.media-last-upload-notice span { flex: 1; }
.media-last-upload-link {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: #D97706;
    text-decoration: none;
    white-space: nowrap;
}
.media-last-upload-link:hover { text-decoration: underline; }
.dark .media-last-upload-notice {
    background: #1C1408;
    border-color: #78350F;
    color: #FDE68A;
}
.dark .media-last-upload-notice i { color: #FBBF24; }
.dark .media-last-upload-link { color: #FBBF24; }

/* Top Nav */
.topnav {
    height: var(--topnav-h);
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    position: sticky;
    top: 0;
    z-index: 100;
    gap: 16px;
}
.topnav-left, .topnav-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.site-title {
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
    white-space: nowrap;
}
.brand-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    transition: background .15s;
}
.brand-back:hover { background: var(--bg); color: var(--text); }
.nav-links { display: flex; align-items: center; gap: 2px; margin-left: 8px; }
.nav-link {
    padding: 5px 11px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.nav-link:hover { background: var(--bg); color: var(--text); }
.nav-link.active { background: var(--primary-light); color: var(--primary); font-weight: 600; }

/* User Menu */
.user-menu { position: relative; }
.user-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px 5px 5px;
    border: 1.5px solid var(--border);
    border-radius: 100px;
    background: var(--surface);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    font-family: inherit;
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.user-btn:hover {
    background: var(--bg);
    border-color: #D1D5DB;
    box-shadow: var(--shadow-sm);
}
.user-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0D2545, #1A3A6E);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}
.user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    min-width: 210px;
    z-index: 200;
    overflow: hidden;
    display: none;
}
.user-dropdown.open { display: block; }
.user-dropdown-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}
.user-dropdown-name  { font-weight: 600; font-size: 13px; }
.user-dropdown-email { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.user-dropdown-item {
    display: block;
    padding: 10px 16px;
    font-size: 13px;
    color: var(--text);
    transition: background .1s;
}
.user-dropdown-item:hover { background: var(--bg); }

/* App Layout */
.app-page { overflow: hidden; height: 100vh; display: flex; flex-direction: column; padding-left: var(--nav-w); }
.app-body { display: flex; flex: 1; overflow: hidden; }

/* Home Dashboard */
.home-body { flex: 1; overflow-y: auto; background: var(--bg); }
.home-wrap { padding: 36px 40px 60px; }

/* Stats row */
.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 36px;
}
.stat-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 24px 28px;
    box-shadow: var(--shadow-sm);
    transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s ease;
    animation: fadeSlideUp .45s cubic-bezier(.22,1,.36,1) both;
}
.stat-card:nth-child(1) { animation-delay: .04s; }
.stat-card:nth-child(2) { animation-delay: .10s; }
.stat-card:nth-child(3) { animation-delay: .16s; }
.stat-card:nth-child(4) { animation-delay: .22s; }
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.stat-card-approved { border-color: rgba(16,185,129,.25); background: rgba(16,185,129,.04); }
.stat-card-pending  { border-color: rgba(245,158,11,.25);  background: rgba(245,158,11,.04); }
.stat-value {
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
    color: var(--text);
    margin-bottom: 6px;
}
.stat-card-approved .stat-value { color: #059669; }
.stat-card-pending  .stat-value { color: #D97706; }
.stat-label { font-size: 13px; color: var(--text-muted); font-weight: 500; }

/* Section */
.home-section {
    margin-bottom: 44px;
    animation: fadeSlideUp .5s cubic-bezier(.22,1,.36,1) both;
}
.home-section:nth-child(2) { animation-delay: .12s; }
.home-section:nth-child(3) { animation-delay: .22s; }
.home-section:nth-child(4) { animation-delay: .32s; }
.home-section-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 16px;
}
.home-section-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
}
.section-count {
    font-size: 13px;
    color: var(--text-muted);
}
.section-empty {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 28px 24px;
    background: var(--surface);
    border: 1.5px dashed var(--border);
    border-radius: var(--radius-xl);
    color: var(--text-muted);
    font-size: 14px;
}

/* Review grid (client "In Client Review") */
.review-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}
.review-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 20px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .12s;
    text-decoration: none;
    color: inherit;
}
.review-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.review-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.review-card-title { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.4; }
.review-card-date { font-size: 12px; color: var(--text-muted); }
.review-card-action {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
    margin-top: auto;
}

/* Client overview grid (admin dashboard) */
.client-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}
.client-overview-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 20px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s ease;
    animation: fadeSlideUp .45s cubic-bezier(.22,1,.36,1) both;
}
.client-overview-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.client-overview-top {
    display: flex;
    align-items: center;
    gap: 12px;
}
.client-overview-logo {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    object-fit: cover;
    border: 1.5px solid var(--border);
    flex-shrink: 0;
}
.client-overview-avatar {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #0D2545, #1A3A6E);
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.client-overview-name {
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
    line-height: 1.3;
}
.client-overview-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    text-align: center;
    margin-top: 2px;
}
.client-stat { padding: 8px 4px; border-radius: var(--radius-sm); background: var(--bg); }
.client-stat-approved { background: rgba(16,185,129,.08); }
.client-stat-pending  { background: rgba(245,158,11,.08); }
.client-stat-rejected { background: rgba(239,68,68,.08); }
.client-stat-value {
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    color: var(--text);
}
.client-stat-approved .client-stat-value { color: #059669; }
.client-stat-pending  .client-stat-value { color: #D97706; }
.client-stat-rejected .client-stat-value { color: #DC2626; }
.client-stat-label { font-size: 10px; color: var(--text-muted); margin-top: 3px; font-weight: 500; }
.client-overview-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
@media (max-width: 640px) {
    .client-overview-stats { grid-template-columns: repeat(2, 1fr); gap: 6px; }
    .client-stat-label { font-size: 11px; }

    /* Stats row: horizontal drag-scroll on mobile */
    .stats-row {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 12px;
        margin-bottom: 28px;
        cursor: grab;
    }
    .stats-row::-webkit-scrollbar { display: none; }
    .stats-row.is-dragging { cursor: grabbing; user-select: none; }
    .stats-row .stat-card {
        flex: 0 0 155px;
        scroll-snap-align: start;
        padding: 18px 20px;
    }
    .stats-row .stat-value { font-size: 28px; }
}

/* Client dashboard layout */
.home-client-layout { display: flex; flex-direction: column; }
.home-client-main { display: flex; flex-direction: column; }

/* Approved aside panel */
.home-approved-panel {
    position: sticky;
    top: 36px;
    background: var(--surface);
    border: 1.5px solid rgba(16,185,129,.3);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(16,185,129,.08);
}
.home-approved-body {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
}

/* Content type columns (client "All Content") */
.type-columns {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    align-items: start;
}
.type-col {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.type-col-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    font-weight: 700;
    font-size: 13px;
    border-bottom: 1.5px solid rgba(0,0,0,.06);
}
.type-col-count {
    font-size: 11px;
    font-weight: 700;
    background: rgba(0,0,0,.10);
    border-radius: 100px;
    padding: 2px 8px;
}
.type-col-items { display: flex; flex-direction: column; }

/* Shared content card (used in kanban + type columns) */
.content-card {
    display: block;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    border-left: 3px solid transparent;
    text-decoration: none;
    color: inherit;
    transition: background .15s ease, border-left-color .15s ease, padding-left .15s ease;
}
.content-card:last-child { border-bottom: none; }
.content-card:hover { background: var(--bg); border-left-color: var(--primary); padding-left: 13px; }
.content-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
    line-height: 1.4;
}
.content-card-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.content-card-date { font-size: 11px; color: var(--text-muted); }
.content-card-client { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.content-card-sent { font-size: 11px; color: var(--text-muted); margin-top: 3px; display: flex; align-items: center; gap: 4px; }
.wp-pub-badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; background: #E6EDF5; color: #081A35; border: 1px solid #c7d2fe; border-radius: 100px; font-size: 11px; font-weight: 600; white-space: nowrap; }

/* Edit-client nav groups */
.ec-nav-group-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); padding: 12px 14px 4px; }
.ec-nav-sub { padding-left: 28px !important; font-size: 13px !important; }

/* Discovery Notes - Client Info rows on Client Overview tab */
.dn-info-row {
    display: grid; grid-template-columns: 160px 1fr; gap: 8px 16px;
    padding: 10px 16px; align-items: baseline;
}
.dn-info-row:not(:last-child) { border-bottom: 1px solid var(--border); }
.dn-info-label { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.dn-info-value { font-size: 13px; color: var(--text); line-height: 1.55; }

/* Kanban board (admin) - Trello-style horizontal scroll */
.kanban-board {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    align-items: start;
    padding-bottom: 16px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    cursor: grab;
}
.kanban-board::-webkit-scrollbar { height: 6px; }
.kanban-board::-webkit-scrollbar-track { background: transparent; }
.kanban-board::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.kanban-board.is-dragging { cursor: grabbing; user-select: none; }
.kanban-col {
    flex: 0 0 280px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    animation: fadeSlideUp .45s cubic-bezier(.22,1,.36,1) both;
}
.kanban-col:nth-child(1) { animation-delay: .08s; }
.kanban-col:nth-child(2) { animation-delay: .15s; }
.kanban-col:nth-child(3) { animation-delay: .22s; }
.kanban-col:nth-child(4) { animation-delay: .29s; }
.kanban-col:nth-child(5) { animation-delay: .36s; }
.kanban-col:nth-child(6) { animation-delay: .43s; }
.kanban-col-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1.5px solid var(--border);
    background: var(--bg);
}
.kanban-col-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.kanban-col-name { font-size: 13px; font-weight: 700; color: var(--text); flex: 1; }
.kanban-col-count {
    font-size: 11px;
    font-weight: 700;
    border-radius: 100px;
    padding: 2px 8px;
}
.kanban-cards { display: flex; flex-direction: column; }
/* Card boards pad and gap their cards; the content board in admin/client-dashboard.php
   deliberately renders a flush border-bottom list, so this stays scoped. */
#clGrid .kanban-cards, #pjGrid .kanban-cards { padding: 10px; gap: 10px; }
.kanban-empty { padding: 20px 16px; font-size: 13px; color: var(--text-light); text-align: center; }

/* Kanban drag & drop - shared by the Clients and Projects boards */
.kanban-board [draggable="true"] { cursor: grab; }
.kanban-dragging { opacity: .35; box-shadow: none; transform: none; }
.kanban-col.kanban-drag-over { outline: 2px dashed var(--primary); outline-offset: -3px; }
.kanban-col.kanban-drag-over .kanban-col-header { background: var(--primary-light); }
.kanban-drop-placeholder {
    height: 6px;
    border-radius: 4px;
    background: var(--primary);
    opacity: .5;
    margin: 0;
    flex-shrink: 0;
}

/* Mirror of the board's horizontal scrollbar, pinned above it so you don't have
   to scroll to the bottom of a tall column to pan sideways.
   Deliberately full-size rather than `thin`: the Projects board runs to several
   thousand pixels across, so this is reached for constantly and wants a grab target
   you don't have to aim at. min-width keeps the thumb catchable on a narrow window,
   where the board/viewport ratio would otherwise shrink it to a sliver. */
.kanban-top-scroll {
    overflow-x: scroll;
    overflow-y: hidden;
    height: 16px;
    margin-bottom: 10px;
    scrollbar-width: auto;
    scrollbar-color: var(--text-muted) var(--border);
    border-radius: 8px;
}
.kanban-top-scroll::-webkit-scrollbar              { height: 16px; }
.kanban-top-scroll::-webkit-scrollbar-track        { background: var(--border); border-radius: 8px; }
.kanban-top-scroll::-webkit-scrollbar-thumb        { background: var(--text-muted); border-radius: 8px; min-width: 64px; }
.kanban-top-scroll::-webkit-scrollbar-thumb:hover  { background: var(--primary); }
/* Held, not just hovered - the pointer leaves the strip while you drag. */
.kanban-top-scroll::-webkit-scrollbar-thumb:active { background: var(--primary); }
.kanban-top-scroll-inner { height: 1px; }

/* Active nav link */
.nav-link-active { color: var(--primary) !important; font-weight: 600; }

/* Sidebar */
.sidebar {
    width: var(--sidebar-w);
    min-width: var(--sidebar-w);
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.sidebar-heading {
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: 1px solid var(--border);
}
.sidebar .content-list { padding: 8px; }
.sidebar-filters {
    padding: 12px;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.search-wrap { position: relative; display: flex; align-items: center; }
.search-icon { position: absolute; left: 10px; pointer-events: none; }
.search-input {
    width: 100%;
    padding: 8px 10px 8px 32px;
    border: 1.5px solid var(--border);
    border-radius: 100px;
    font-size: 13px;
    background: var(--bg);
    outline: none;
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
}
.search-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(13,37,69,.1);
    background: var(--surface);
}
.filter-row { display: flex; gap: 6px; }
.filter-select {
    flex: 1;
    padding: 6px 10px;
    border: 1.5px solid var(--border);
    border-radius: 100px;
    font-size: 12px;
    background: var(--bg);
    color: var(--text);
    font-family: inherit;
    cursor: pointer;
    outline: none;
}
.filter-select:hover { border-color: #D1D5DB; }
.filter-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(13,37,69,.1); }

.content-list { flex: 1; overflow-y: auto; padding: 6px; }
.list-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}
.content-item {
    display: block;
    padding: 11px 13px;
    border-radius: var(--radius);
    margin-bottom: 3px;
    cursor: pointer;
    transition: background .1s;
    text-decoration: none;
    color: inherit;
}
.content-item:hover { background: var(--bg); }
.content-item.active {
    background: var(--primary-light);
    box-shadow: inset 3px 0 0 var(--primary);
    padding-left: 10px;
}
.ci-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 6px;
    line-height: 1.4;
}
.ci-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.ci-client { font-size: 11px; color: var(--text-light); margin-top: 2px; }

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.badge-client-approved     { background: #D1FAE5; color: #065F46; }
.badge-client-not_approved { background: #FEE2E2; color: #991B1B; }
.badge-pending             { background: #F3F4F6; color: #6B7280; }

/* Detail Panel */
.detail-panel { flex: 1; overflow: hidden; background: var(--bg); display: flex; flex-direction: column; }
.detail-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 14px;
    color: var(--text-muted);
    font-size: 14px;
}
.detail-inner { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 32px 40px; overflow-y: auto; }
.detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}
.detail-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.detail-right { display: flex; flex-direction: column; gap: 12px; }
.save-bar { flex-shrink: 0; }
.approval-panel {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.approval-panel-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
}
.approval-btns { display: flex; flex-direction: column; gap: 6px; }
.btn-approval-approve {
    width: 100%;
    justify-content: center;
    background: rgba(16,185,129,.1);
    color: #059669;
    border: 1.5px solid rgba(16,185,129,.25);
    font-weight: 600;
}
.btn-approval-approve:hover { background: rgba(16,185,129,.18); color: #059669; }
.btn-approval-approve.active { background: #10B981; color: #fff; border-color: transparent; box-shadow: 0 2px 8px rgba(16,185,129,.3); }
.btn-approval-reject {
    width: 100%;
    justify-content: center;
    background: rgba(239,68,68,.08);
    color: #DC2626;
    border: 1.5px solid rgba(239,68,68,.2);
    font-weight: 600;
}
.btn-approval-reject:hover { background: rgba(239,68,68,.15); color: #DC2626; }
.btn-approval-reject.active { background: #EF4444; color: #fff; border-color: transparent; box-shadow: 0 2px 8px rgba(239,68,68,.3); }
.approval-clear {
    background: none;
    border: none;
    font-size: 11px;
    color: var(--text-muted);
    cursor: pointer;
    text-align: center;
    padding: 0;
    text-decoration: underline;
}
.approval-clear:hover { color: var(--text); }
.btn-save {
    width: 100%;
    padding: 12px;
    font-size: 15px;
    font-weight: 600;
    justify-content: center;
}
.detail-breadcrumb { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.detail-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
    outline: none;
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    margin: -6px -10px;
    min-width: 200px;
    word-break: break-word;
    background: var(--bg);
    border: 1.5px solid var(--border);
    transition: border-color .15s, box-shadow .15s;
}
.detail-title:hover { border-color: #9CA3AF; }
.detail-title:focus {
    background: var(--bg);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(13,37,69,.12);
    outline: none;
}

/* Field Rows */
.detail-fields {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.field-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid #F3F4F6;
    align-items: start;
}
.field-row:last-child { border-bottom: none; }
.field-row-stack { grid-template-columns: 1fr; }
.field-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    padding-top: 7px;
}
.field-row-stack .field-label { padding-top: 0; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.generate-ai-btn { font-size: 11px; }
.field-hint { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.field-value { flex: 1; }
.post-date-wrap { display: flex; flex-direction: column; gap: 6px; }
.post-date-input { width: 100%; }
.post-date-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.post-date-chip {
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 100px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-muted);
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
    line-height: 1.6;
}
.post-date-chip:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.field-input, .field-select, .field-textarea {
    width: 100%;
    padding: 6px 11px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
    background: var(--surface);
    transition: border-color .15s, background .15s, box-shadow .15s;
    outline: none;
}
.field-input:hover, .field-select:hover, .field-textarea:hover {
    border-color: #B0B7C3;
    background: var(--surface);
}
.field-input:focus, .field-select:focus, .field-textarea:focus {
    border-color: var(--primary);
    background: var(--surface);
    box-shadow: 0 0 0 3px rgba(13,37,69,.1);
}
.field-textarea { resize: vertical; min-height: 80px; }
.field-textarea-lg { min-height: 240px; }
.field-select { cursor: pointer; }
.text-muted { color: var(--text-muted); font-size: 13px; padding: 6px 0; display: inline-block; }

/* Image Field */
.image-preview { position: relative; display: inline-block; }
.image-preview img {
    max-width: 220px;
    max-height: 160px;
    width: auto;
    height: auto;
    border-radius: var(--radius);
    border: 1.5px solid var(--border);
    display: block;
    object-fit: cover;
}
.image-preview .btn-danger {
    position: absolute; top: 8px; right: 8px;
    opacity: 0; transition: opacity .15s;
}
.image-preview:hover .btn-danger { opacity: 1; }

.upload-zone {
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    padding: 24px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 13px;
}
.upload-zone:hover, .upload-zone.dragover {
    border-color: var(--primary);
    background: var(--primary-light);
}
.upload-hint { font-size: 11px; color: var(--text-light); }
.link-label { color: var(--primary); cursor: pointer; text-decoration: underline; }

/* Admin Pages */
.admin-body { flex: 1; overflow-y: auto; padding: 32px 24px; }
.admin-container { max-width: 1040px; margin: 0 auto; }
.admin-container-sm { max-width: 700px; }
.admin-header { margin-bottom: 24px; }
.admin-header h2 { font-size: 22px; font-weight: 700; }
.admin-subheader { color: var(--text-muted); font-size: 13px; margin-top: 5px; }

.admin-grid { display: grid; grid-template-columns: 1fr 400px; gap: 24px; }
.admin-section {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 22px 26px;
    box-shadow: var(--shadow-sm);
}
.admin-section h3 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 16px;

    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

/* Client cards */
.client-list { display: flex; flex-direction: column; gap: 10px; }
.client-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 13px 15px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s ease, border-color .15s;
    animation: fadeSlideUp .4s cubic-bezier(.22,1,.36,1) both;
}
.client-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: #D1D5DB; }
.client-card-left { display: flex; align-items: center; gap: 12px; }
.client-logo {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    object-fit: cover;
    border: 1.5px solid var(--border);
    flex-shrink: 0;
    display: block;
}
.client-logo-placeholder {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--primary-light), #EDE9FE);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    color: var(--primary);
    flex-shrink: 0;
}
.client-card-name { font-weight: 600; font-size: 14px; }
.client-card-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.client-card-left { flex: 1; min-width: 0; }
.client-card-actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 860px) {
    .admin-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .admin-body { padding: 16px 14px; }
    .admin-section { padding: 16px; }
    .admin-header h2 { font-size: 18px; }
    .client-card { padding: 12px; }
    .client-card-actions { width: 100%; justify-content: flex-start; }
    .client-card-name { font-size: 13px; }
    .form-row { grid-template-columns: 1fr; }
    .form-row-3 { grid-template-columns: 1fr; }
    .form-actions { flex-direction: column-reverse; }
    .form-actions .btn { width: 100%; justify-content: center; }
}

/* Logo upload preview in form */
.logo-upload-wrap { display: flex; align-items: center; gap: 14px; }
.logo-preview-box {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--bg);
    border: 1.5px dashed var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    cursor: pointer;
    transition: border-color .15s;
}
.logo-preview-box:hover { border-color: var(--primary); }
.logo-preview-box img { width: 44px; height: 44px; object-fit: cover; display: block; }
.logo-preview-box svg { opacity: .4; }

/* Status list */
.status-list { display: flex; flex-direction: column; gap: 8px; }
.status-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 13px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
}
.status-swatch { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.status-name { flex: 1; font-size: 13px; font-weight: 500; }

/* Color picker */
.color-picker-wrap { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.color-input { width: 40px !important; height: 36px !important; padding: 2px !important; cursor: pointer; border-radius: var(--radius-sm) !important; }
.color-hex { font-size: 13px; color: var(--text-muted); font-family: monospace; }
.color-presets { display: flex; flex-wrap: wrap; gap: 7px; }
.color-preset {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid var(--surface);
    cursor: pointer;
    box-shadow: 0 0 0 1.5px var(--border);
    transition: transform .1s, box-shadow .1s;
}
.color-preset:hover { transform: scale(1.2); box-shadow: 0 0 0 2px var(--primary); }
.dn-hex-input { width: 90px !important; font-family: monospace; font-size: 13px; }
.dn-slot-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.dn-slot-label { font-size: 12px; font-weight: 600; color: var(--text-muted); width: 68px; flex-shrink: 0; }
.dn-slot-clear { background: none; border: none; font-size: 18px; line-height: 1; color: var(--text-muted); cursor: pointer; padding: 0 2px; opacity: 0.5; }
.dn-slot-clear:hover { color: #e53e3e; opacity: 1; }
.dn-others-label { font-size: 12px; font-weight: 600; color: var(--text-muted); margin: 10px 0 4px; }

/* Toast */
.toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    padding: 11px 18px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    z-index: 9999;
    opacity: 0;
    transform: translateY(14px) scale(.96);
    transition: opacity .22s ease, transform .3s cubic-bezier(.22,1,.36,1);
    pointer-events: none;
    max-width: 320px;
    box-shadow: var(--shadow-md);
}
.toast.show { opacity: 1; transform: translateY(0) scale(1); }
.toast.success { background: #1F2937; }
.toast.error   { background: var(--danger); }
/* The quick-add FAB owns the bottom-right corner on mobile (.rmc-fab), and the toast
   outranks it on z-index - so it's lifted clear of the button rather than landing on
   top of it. Only `bottom` moves: .toast.show animates `transform`, so anything set
   there would be wiped the moment a toast appeared. */
@media (max-width: 768px) {
    .toast { bottom: calc(88px + env(safe-area-inset-bottom)); right: 16px; }
}

/* Persistent result panel - for output that has to be read and copied, which a
   toast cannot do because it disappears. */
.rmc-result {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%) translateY(-12px);
    width: min(860px, calc(100vw - 32px));
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0,0,0,.22);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, transform .22s cubic-bezier(.22,1,.36,1), visibility .18s;
}
.rmc-result.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.rmc-result-error { border-color: #fecaca; }
html.dark .rmc-result-error { border-color: rgba(239,68,68,.4); }
/* Warn: the run succeeded but did not cover everything asked for. A green tick
   would say "all done" about a partial result. */
.rmc-result-warn { border-color: #fcd34d; }
html.dark .rmc-result-warn { border-color: rgba(251,191,36,.45); }
.rmc-result-warn .rmc-result-icon { color: #b45309; }
html.dark .rmc-result-warn .rmc-result-icon { color: #fbbf24; }
.rmc-result-head {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; border-bottom: 1.5px solid var(--border);
}
.rmc-result-icon { color: #059669; font-size: 15px; flex-shrink: 0; }
.rmc-result-error .rmc-result-icon { color: var(--danger); }
.rmc-result-title { font-size: 13.5px; font-weight: 700; color: var(--text); flex: 1; }
.rmc-result-btn {
    background: var(--bg); border: 1.5px solid var(--border); border-radius: 7px;
    padding: 4px 12px; font: inherit; font-size: 12px; font-weight: 600;
    color: var(--text); cursor: pointer;
}
.rmc-result-btn:hover { background: var(--surface); border-color: var(--text-muted); }
.rmc-result-body {
    margin: 0; padding: 14px;
    max-height: min(52vh, 460px); overflow: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px; line-height: 1.6; color: var(--text);
    white-space: pre-wrap; word-break: break-word;
    user-select: text; -webkit-user-select: text;
}

/* Detail two-column body */
.detail-body {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 16px;
    align-items: start;
}
.detail-main { display: flex; flex-direction: column; gap: 16px; min-height: 0; overflow-y: auto; }

/* Read-only field value */
.field-readonly {
    display: block;
    font-size: 14px;
    color: var(--text);
    padding: 6px 0;
    line-height: 1.6;
}

/* Comments sidebar */
.comments-panel {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
}
.comments-header {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}
.comments-body { display: flex; flex-direction: column; }
.comments-count {
    margin-left: auto;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 100px;
}
.comments-thread {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.comments-empty {
    text-align: center;
    color: var(--text-light);
    font-size: 13px;
    padding: 20px 0;
}
.comment-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.comment-item-new {
    animation: commentIn .2s ease;
}
@keyframes commentIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.comment-avatar {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.comment-content { flex: 1; min-width: 0; }
.comment-meta {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-bottom: 3px;
}
.comment-author { font-size: 12px; font-weight: 600; color: var(--text); }
.comment-time   { font-size: 11px; color: var(--text-light); }
.comment-body   { font-size: 13px; color: var(--text); line-height: 1.55; word-break: break-word; }
.comment-form {
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
}
.comment-input {
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    font-size: 13px;
    font-family: inherit;
    color: var(--text);
    background: var(--bg);
    resize: none;
    outline: none;
    transition: background .15s;
    line-height: 1.5;
}
.comment-input:focus {
    background: var(--surface);
}
.comment-form-footer { display: flex; justify-content: flex-end; padding: 8px 12px; }

/* Status-colored select */
.status-colored {
    font-weight: 600 !important;
    border-radius: 100px !important;
    padding: 5px 12px !important;
    transition: background .2s, color .2s, border-color .2s !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.status-colored:hover,
.status-colored:focus {
    background: inherit !important;
    color: inherit !important;
    border-color: inherit !important;
    box-shadow: none !important;
}

/* Quill WYSIWYG */
.quill-editor-wrap {
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.quill-editor-wrap:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(13,37,69,.1);
}
.quill-editor-wrap .ql-toolbar {
    border: none !important;
    border-bottom: 1px solid var(--border) !important;
    background: var(--bg);
    padding: 6px 10px !important;
    border-radius: var(--radius) var(--radius) 0 0 !important;
}
.quill-editor-wrap .ql-container {
    border: none !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
}
.quill-editor-wrap .ql-editor {
    min-height: 240px;
    padding: 14px 16px !important;
    line-height: 1.7 !important;
}
.quill-comments-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.quill-comments-wrap .ql-container {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.quill-comments-wrap .ql-editor {
    flex: 1;
    min-height: 120px;
}
.quill-editor-wrap .ql-editor.ql-blank::before {
    color: var(--text-light) !important;
    font-style: normal !important;
}

/* Publish Panel */
.publish-panel {
    margin-top: 16px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.publish-panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 20px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}
.publish-actions { padding: 4px 0; }
.publish-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 20px;
    border-bottom: 1px solid #F3F4F6;
}
.publish-item:last-child { border-bottom: none; }
.publish-item-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}
.publish-done {
    display: flex;
    align-items: center;
    gap: 8px;
}
.publish-check {
    font-size: 12px;
    font-weight: 600;
    color: var(--success);
    background: #D1FAE5;
    padding: 3px 10px;
    border-radius: 100px;
}
.publish-missing {
    font-size: 12px;
    color: var(--text-muted);
}
.publish-missing a { color: var(--primary); text-decoration: underline; }

/* Misc */
.field-saving { opacity: .55; }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #9CA3AF; }

/* Nav logo */
.nav-logo { display: flex; align-items: center; flex-shrink: 0; margin-right: 4px; }
.nav-logo img { height: 30px !important; width: auto !important; max-width: none !important; display: block; }
.nav-logo-text { font-size: 16px; font-weight: 700; color: var(--text); text-decoration: none; letter-spacing: -0.02em; }

/* Hamburger menu (hidden on desktop) */
.hamburger-btn { display: none; }
.mobile-label { display: none; }
.hamburger-menu { display: none; }
.hamburger-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 13px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
    background: none;
    border: none;
    font-family: inherit;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    text-align: left;
    transition: background .1s;
}
.hamburger-item:last-child { border-bottom: none; }
.hamburger-item:hover { background: var(--bg); }
.hamburger-item-btn { justify-content: space-between; }
.sidebar-mobile-toggle { display: none; }
.sidebar-overlay { display: none; }

/* Responsive */
@media (max-width: 768px) {

    /* Nav */
    .topnav { padding: 0 12px; gap: 8px; position: relative; }
    .nav-links { display: none; }
    .user-btn span, .user-btn svg { display: none; }
    .user-btn { padding: 4px; border-radius: 50%; }
    .user-dropdown { right: 0; left: auto; min-width: 180px; max-width: calc(100vw - 24px); }

    /* Hamburger button */
    .hamburger-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 40px;
        background: none;
        border: 1.5px solid #D1D5DB;
        border-radius: 6px;
        cursor: pointer;
        padding: 0;
        flex-shrink: 0;
        transition: background .15s, border-color .15s;
    }
    .hamburger-btn:hover { background: #F3F4F6; border-color: #9CA3AF; }
    .hamburger-btn.open { border-color: var(--primary); background: var(--primary-light); }

    /* Nav logo - smaller on mobile */
    .nav-logo img { height: 24px; }

    /* Mobile label hidden - logo replaces it */
    .mobile-label {
        display: none;
        align-items: center;
        font-size: 14px;
        font-weight: 600;
        color: var(--text);
        text-decoration: none;
        white-space: nowrap;
    }

    /* Hamburger dropdown */
    .hamburger-menu.open {
        display: block;
        position: absolute;
        top: var(--topnav-h);
        left: 0;
        right: 0;
        background: var(--surface);
        border-bottom: 1.5px solid var(--border);
        box-shadow: var(--shadow-md);
        z-index: 150;
    }

    /* App body stacks vertically */
    .app-body { flex-direction: column; overflow-y: auto; overflow-x: hidden; }
    .app-page { overflow: auto; height: auto; min-height: 100vh; padding-left: 0; }

    /* client-subnav sticks below mobile topbar */
    .client-subnav { top: var(--topnav-h); }

    /* Same for the Client Info sub-tabs. On desktop these stick to the top of the
       inner scroll container, so top:0 is right there; on mobile the whole page
       scrolls under the sticky topbar and they need to clear it. */
    .ci-subnav { top: var(--topnav-h); }

    /* Hide desktop sidebar - replaced by flyout */
    .sidebar { display: none; }

    /* Pending Approval toggle - inline in topnav */
    .sidebar-mobile-toggle {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 5px 11px;
        background: var(--primary-light);
        border: none;
        border-radius: 100px;
        font-size: 13px;
        font-weight: 600;
        font-family: inherit;
        color: var(--primary);
        cursor: pointer;
        white-space: nowrap;
        flex-shrink: 0;
    }
    .sidebar-mobile-toggle svg { transition: transform .2s; }
    .sidebar-mobile-toggle.open svg { transform: rotate(180deg); }
    .sidebar-mobile-count {
        background: var(--primary-light);
        color: var(--primary);
        border-radius: 100px;
        padding: 1px 8px;
        font-size: 11px;
        font-weight: 700;
    }

    /* Overlay */
    .sidebar-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.45);
        z-index: 120;
    }
    .sidebar-overlay.open { display: block; }

    /* Sidebar flyout */
    .sidebar.open {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 80vw;
        max-width: 300px;
        z-index: 130;
        box-shadow: var(--shadow-lg);
        animation: slideInLeft .25s ease;
    }
    @keyframes slideInLeft {
        from { transform: translateX(-100%); }
        to   { transform: translateX(0); }
    }

    /* Detail panel full width */
    .detail-panel { width: 100%; overflow: visible; }
    .detail-inner { padding: 20px 16px; overflow: visible; }
    .detail-body {
        grid-template-columns: 1fr;
        overflow: visible;
    }
    .detail-main { overflow: visible; }

    /* Title smaller */
    .detail-title { font-size: 20px; }

    /* Fields full width */
    .field-row { flex-direction: column; gap: 4px; }
    .field-label { min-width: unset; }
}

/* Simple full-page layout (media, profile, forgot-pw) */
.simple-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    padding-left: var(--nav-w);
}
.simple-page .topnav { flex-shrink: 0; }
.simple-body {
    flex: 1;
    padding: 36px 40px 60px;
    max-width: 960px;
    margin: 0 auto;
    width: 100%;
}
.simple-body.wide { max-width: 1200px; }
.sp-pane { flex: 1; min-width: 0; overflow-y: auto; padding: 32px 40px 60px; display: flex; flex-direction: column; }
.as-role-badge { display:inline-block; font-size:11px; font-weight:600; padding:2px 8px; border-radius:4px; white-space:nowrap; }
.badge-admin       { background:var(--primary-light); color:var(--primary); }
.badge-client      { background:#dcfce7; color:#166534; }
.badge-superadmin  { background:#fef3c7; color:#92400e; }

/* Lead status badges */
.lead-badge { display:inline-flex; align-items:center; padding:2px 10px; border-radius:100px; font-size:11px; font-weight:600; white-space:nowrap; line-height:1.6; }
.lead-badge-lead { background:#DBEAFE; color:#1D4ED8; }
.lead-badge-spam { background:#F3F4F6; color:#6B7280; }
/* A lead carries a pipeline now, so the two-value lead|spam badge became the four
   statuses of that pipeline. lead-badge-lead is kept above: it is what every row
   written before the migration carried, and a page open in a tab may still send it. */
.lead-badge-open { background:#DBEAFE; color:#1D4ED8; }
.lead-badge-won  { background:#D1FAE5; color:#047857; }
.lead-badge-lost { background:#FEE2E2; color:#B91C1C; }

/* The Qualified pill beside the status badge. Its own element rather than a fifth
   status: qualified is independent of the stage (a lead can be Qualified and Open),
   and it mirrors CallRail's good_lead, so every surface shows it read-only. */
.lead-qual { display:inline-flex; align-items:center; gap:4px; margin-left:6px; padding:2px 8px; border-radius:100px; font-size:11px; font-weight:600; background:#ECFDF5; color:#047857; white-space:nowrap; line-height:1.6; }
/* inline-flex above outranks the UA [hidden] rule, so hidden has to be said again. */
.lead-qual[hidden] { display:none; }
html.dark .lead-qual { background:rgba(16,185,129,.16); color:#6EE7B7; }

/* The status select on the leads table. Built like the stage select next to it, but
   it keeps the badge's colour coding so the column still reads at a glance. */
.lead-status-select { font-weight:600; cursor:pointer; }
.lead-status-select:disabled { opacity:.6; cursor:default; }
.lead-status-open { background:#DBEAFE; color:#1D4ED8; border-color:#BFDBFE; }
.lead-status-won  { background:#D1FAE5; color:#047857; border-color:#A7F3D0; }
.lead-status-lost { background:#FEE2E2; color:#B91C1C; border-color:#FECACA; }
.lead-status-spam { background:#F3F4F6; color:#6B7280; border-color:#E5E7EB; }
/* The dropdown list itself is painted by the OS, so options need readable colours
   of their own rather than inheriting the closed select's tinted background. */
.lead-status-select option { background:var(--bg); color:var(--text); font-weight:500; }
.dark .lead-status-open { background:rgba(59,130,246,.16); color:#93C5FD; border-color:rgba(59,130,246,.35); }
.dark .lead-status-won  { background:rgba(16,185,129,.16); color:#6EE7B7; border-color:rgba(16,185,129,.35); }
.dark .lead-status-lost { background:rgba(239,68,68,.16);  color:#FCA5A5; border-color:rgba(239,68,68,.35); }
.dark .lead-status-spam { background:rgba(255,255,255,.06); color:#9CA3AF; border-color:rgba(255,255,255,.15); }

/* Channel chip on the leads table, for pages that do not load the report stylesheet
   in includes/reporting-style.php. Same mechanism as there, so one source looks the
   same wherever it is shown: reporting_channel_pill() puts the hue on the element,
   because the slugs are open-ended and a stylesheet cannot hold a rule for a channel
   a client invents this afternoon. A chip with no hue set keeps --chan-s at 0% and
   reads grey, which is how Other and Unknown stay colourless. */
.rp-chan {
    --chan-h:210; --chan-s:0%;
    display:inline-block; padding:2px 8px; border-radius:10px;
    background:hsl(var(--chan-h) var(--chan-s) 92%);
    color:hsl(var(--chan-h) var(--chan-s) 28%);
    font-weight:600; white-space:nowrap;
}
.dark .rp-chan {
    background:hsl(var(--chan-h) var(--chan-s) 22%);
    color:hsl(var(--chan-h) var(--chan-s) 78%);
}

/* Client service tags */
.svc-tag { display:inline-flex; align-items:center; padding:2px 8px; border-radius:100px; font-size:11px; font-weight:600; white-space:nowrap; line-height:1.6; }
.svc-seo           { background:#EDE9FE; color:#4C1D95; }
.svc-social_media  { background:#FCE7F3; color:#831843; }
.svc-facebook_ads  { background:#DBEAFE; color:#1D4ED8; }
.svc-google_ads    { background:#FEE2E2; color:#991B1B; }
.svc-lsa_ads       { background:#D1FAE5; color:#065F46; }
.svc-managed_web   { background:#E0F2FE; color:#075985; }
.svc-analytics     { background:#FEF3C7; color:#92400E; }
.svc-tags-wrap     { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.svc-toggle { cursor:pointer; border:1.5px solid transparent; font-family:inherit; transition:opacity .12s, transform .1s; }
.svc-toggle:hover  { opacity:.8; }
.svc-toggle:active { transform:scale(.95); }
.svc-off { background:var(--bg); color:var(--text-muted); border-color:var(--border); }
.svc-off:hover { border-color:var(--text-muted); color:var(--text); }
.btn-link { background:none; border:none; padding:0; color:var(--primary); cursor:pointer; font-size:inherit; text-decoration:underline; }
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
    gap: 16px;
    flex-wrap: wrap;
}
.page-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text);
}
.page-subtitle {
    font-size: 14px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Media Library */
.collections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}
.collection-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .12s;
    text-decoration: none;
    color: inherit;
}
.collection-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.collection-preview {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    background: var(--bg);
    aspect-ratio: 16/7;
    overflow: hidden;
}
.collection-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.collection-preview-empty {
    grid-column: 1/-1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
}
.collection-info {
    padding: 14px 16px;
}
.collection-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}
.collection-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.collection-meta {
    font-size: 11px;
    color: var(--text-light);
    font-weight: 500;
}
.collection-edit-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,.92);
    border: 1.5px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted);
    box-shadow: var(--shadow-sm);
    opacity: 0;
    transition: opacity .15s, background .15s, color .15s;
    z-index: 2;
}
.collection-card-wrap:hover .collection-edit-btn { opacity: 1; }
.collection-edit-btn:hover { background: var(--primary-light); color: var(--primary); border-color: var(--primary); }

/* Collection detail view */
.collection-detail-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.collection-detail-back {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
    text-decoration: none;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    transition: background .15s, color .15s;
    flex-shrink: 0;
}
.collection-detail-back:hover { background: var(--bg); color: var(--text); }
.collection-detail-info { flex: 1; }
.collection-detail-name { font-size: 22px; font-weight: 700; color: var(--text); }
.collection-detail-desc { font-size: 14px; color: var(--text-muted); margin-top: 4px; line-height: 1.5; }

/* Media grid */
.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
}
.media-item {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    position: relative;
    transition: border-color .15s, box-shadow .2s ease, transform .2s cubic-bezier(.22,1,.36,1);
}
.media-item:hover {
    border-color: #D1D5DB;
    box-shadow: var(--shadow-md);
    transform: translateY(-2px) scale(1.01);
}
.media-item-img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
}
.media-item-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.6) 0%, rgba(0,0,0,.1) 50%, transparent 100%);
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 8px;
    gap: 4px;
    opacity: 0;
    transition: opacity .15s;
    pointer-events: none;
}
.media-item:hover .media-item-overlay { opacity: 1; }
.media-item-overlay .btn,
.media-item-overlay a { pointer-events: auto; }
.media-item-name {
    font-size: 11px;
    color: var(--text-muted);
    padding: 5px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-top: 1px solid var(--border);
    background: var(--surface);
}
.media-item-video-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    background: rgba(0,0,0,.6);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 2px 6px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 3px;
    pointer-events: none;
}
.collection-preview-video-thumb {
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Upload progress modal */
.upload-progress-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(3px);
}
.upload-progress-backdrop.hidden { display: none; }
.upload-progress-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0,0,0,.18);
    width: 440px;
    max-width: calc(100vw - 32px);
    padding: 24px;
}
.upload-progress-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    gap: 12px;
}
.upload-progress-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}
.upload-progress-files {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 320px;
    overflow-y: auto;
}
.upload-file-row {
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.upload-file-row:last-child { border-bottom: none; }
.upload-file-row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}
.upload-file-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
.upload-file-pct {
    font-size: 12px;
    color: var(--text-muted);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    min-width: 36px;
    text-align: right;
}
.upload-file-pct.done { color: #059669; font-weight: 700; }
.upload-file-pct.error { color: #DC2626; font-weight: 700; }
.upload-bar-wrap {
    height: 5px;
    background: var(--bg);
    border-radius: 3px;
    overflow: hidden;
}
.upload-bar {
    height: 100%;
    width: 0%;
    background: var(--accent);
    border-radius: 3px;
    transition: width .12s linear;
}
.upload-bar.done { background: #059669; width: 100%; }
.upload-bar.error { background: #DC2626; }
.upload-progress-footer {
    margin-top: 18px;
    display: flex;
    justify-content: flex-end;
}
.upload-progress-footer.hidden { display: none; }

/* Upload drop zone (multi-file) */
.upload-zone-multi {
    border: 2px dashed var(--border);
    border-radius: var(--radius-lg);
    padding: 32px 24px;
    text-align: center;
    background: var(--bg);
    transition: border-color .15s, background .15s;
    cursor: pointer;
}
.upload-zone-multi.drag-over {
    border-color: var(--primary);
    background: var(--primary-light);
}
.upload-zone-multi svg { color: var(--text-light); margin-bottom: 10px; }
.upload-zone-multi p { font-size: 14px; color: var(--text-muted); }
.upload-zone-multi .link-label { color: var(--primary); font-weight: 600; cursor: pointer; }

/* New collection modal */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal-backdrop.hidden { display: none; }
.modal-card {
    background: var(--surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 480px;
    padding: 32px;
}
.modal-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 20px;
}
.modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
}

/* Media browser modal (admin, inside content editor) */
.media-browser-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    backdrop-filter: blur(4px);
    z-index: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.media-browser-modal.hidden { display: none; }
.media-browser-card {
    background: var(--surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 780px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.media-browser-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--bg);
}
.media-browser-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: var(--surface);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-muted);
    font-size: 14px;
    transition: background .1s, color .1s;
    flex-shrink: 0;
    border: 1.5px solid var(--border);
}
.media-browser-back:hover { background: var(--primary-light); color: var(--primary); border-color: var(--primary); }
.media-browser-back.hidden { visibility: hidden; pointer-events: none; }
.media-browser-header-info { flex: 1; min-width: 0; }
.media-browser-title { font-size: 15px; font-weight: 700; color: var(--text); }
.media-browser-subtitle { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.media-browser-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .1s, color .1s;
    flex-shrink: 0;
}
.media-browser-close:hover { background: var(--bg); color: var(--text); }
.media-browser-body { flex: 1; overflow-y: auto; padding: 16px 20px; }

/* Step 1: collection list */
.media-browser-collections { display: flex; flex-direction: column; gap: 6px; }
.media-browser-col-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    font-family: inherit;
    transition: border-color .12s, background .12s, box-shadow .12s;
    text-align: left;
    box-shadow: var(--shadow-sm);
}
.media-browser-col-btn:hover {
    border-color: var(--primary);
    background: var(--primary-light);
    box-shadow: var(--shadow-md);
}

/* Step 2: image grid */
.media-browser-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
}
.media-browser-img-wrap {
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    background: var(--bg);
    transition: border-color .12s, box-shadow .12s;
    position: relative;
}
.media-browser-img-wrap:hover {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(13,37,69,.15);
}
.media-browser-img-wrap img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
}
.media-browser-img-label {
    font-size: 10px;
    color: var(--text-muted);
    padding: 4px 6px;
    background: var(--surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-top: 1px solid var(--border);
}
.media-browser-img-actions {
    position: absolute;
    top: 4px;
    right: 4px;
    opacity: 0;
    transition: opacity .12s;
}
.media-browser-img-wrap:hover .media-browser-img-actions { opacity: 1; }
.media-browser-img-select {
    position: absolute;
    inset: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    width: 100%;
    /* Images are clicked via the img tag */
}
.media-browser-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.6;
}

/* Profile Page */
.profile-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 28px;
    align-items: start;
}
.profile-sidebar {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 28px 20px;
    text-align: center;
    box-shadow: var(--shadow-sm);
}
.profile-avatar-wrap {
    position: relative;
    display: inline-block;
    margin-bottom: 16px;
}
.profile-avatar-img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--border);
}
.profile-avatar-initials {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0D2545, #1A3A6E);
    color: #fff;
    font-size: 32px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--border);
}
.profile-avatar-edit {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    border: 2px solid var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    transition: background .15s;
}
.profile-avatar-edit:hover { background: var(--primary-hover); }
.profile-name { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.profile-email { font-size: 13px; color: var(--text-muted); }
.profile-role {
    display: inline-block;
    margin-top: 10px;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    background: var(--primary-light);
    color: var(--primary);
}
.profile-cards { display: flex; flex-direction: column; gap: 20px; }
.profile-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 28px;
    box-shadow: var(--shadow-sm);
}
.profile-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

/* Forgot / Reset Password */
.login-footer {
    text-align: center;
    margin-top: 16px;
    font-size: 13px;
    color: var(--text-muted);
}
.login-footer a { color: var(--primary); font-weight: 500; }
.login-footer a:hover { text-decoration: underline; }

@media (max-width: 640px) {
    .simple-body { padding: 20px 16px 40px; }
    .profile-layout { grid-template-columns: 1fr; }
    .media-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

/* Pending count badge in nav */
.nav-pending-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #EF4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    margin-left: 4px;
    line-height: 1;
    vertical-align: middle;
}

/* Content multi-images */
.content-images-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 10px;
}
.content-images-grid.content-images-empty { display: none; }
.content-image-item {
    position: relative;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: flex-start;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    background: var(--surface);
    padding: 10px;
    overflow: hidden;
}
.content-image-thumb {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    display: block;
    cursor: zoom-in;
}
.content-image-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.content-image-filename {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.content-image-caption {
    font-size: 12px;
    color: var(--text-muted);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-height: 1.4;
}
.content-image-overlay {
    position: absolute;
    top: 6px;
    right: 6px;
    opacity: 0;
    transition: opacity .15s;
}
.content-image-item:hover .content-image-overlay { opacity: 1; }
.content-image-remove {
    background: rgba(239,68,68,.9);
    border: none;
    color: #fff;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.content-image-remove:hover { background: #DC2626; }
@media (max-width: 900px) {
    .content-images-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    .content-images-grid { grid-template-columns: 1fr; }
}
.content-images-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.upload-zone-small {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border: 1.5px dashed var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 12px;
    color: var(--text-muted);
    background: var(--bg);
    transition: border-color .12s, background .12s, color .12s;
}
.upload-zone-small:hover { border-color: var(--primary); background: var(--primary-light); color: var(--primary); }
.upload-zone-small svg { flex-shrink: 0; }
.upload-zone-small.dragover { border-color: var(--primary); background: var(--primary-light); }

/* Media browser extras */
.media-browser-new-col-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1.5px dashed var(--border);
    border-radius: var(--radius);
    background: transparent;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    font-family: inherit;
    transition: border-color .12s, color .12s;
    margin-bottom: 8px;
    width: 100%;
    text-align: left;
}
.media-browser-new-col-btn:hover { border-color: var(--primary); color: var(--primary); }
.media-browser-col-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.media-browser-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    border-top: 1px solid var(--border);
    background: var(--surface);
    flex-shrink: 0;
}
.media-browser-footer.hidden { display: none; }
.media-browser-img-wrap.selected { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(13,37,69,.2); }
.mb-select-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-top: 1px solid var(--border);
    background: var(--surface);
    font-size: 11px;
    color: var(--text-muted);
    user-select: none;
}
.mb-select-check {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    flex-shrink: 0;
    background: var(--bg);
}
.media-browser-img-wrap.selected .mb-select-bar {
    background: rgba(13,37,69,.08);
    color: var(--primary);
    border-top-color: rgba(13,37,69,.2);
}
.media-browser-img-wrap.selected .mb-select-check {
    background: var(--primary);
    border-color: var(--primary);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 5l2.5 2.5L8 3' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    background-size: 10px;
    background-position: center;
    background-repeat: no-repeat;
}

/* Media item caption in grid */
.media-item-caption {
    font-size: 10px;
    color: var(--text-muted);
    padding: 2px 6px 4px;
    background: var(--surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-top: 1px solid var(--border);
    font-style: italic;
}

/* Lightbox */
.lightbox-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.88);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.lightbox-backdrop.hidden { display: none; }
.lightbox-card {
    display: flex;
    flex-direction: row;
    width: min(1140px, 100%);
    height: min(820px, 90vh);
    background: var(--surface);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0,0,0,.55);
}

/* Media pane (left) */
.lightbox-media {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0e0e0e;
    position: relative;
    overflow: hidden;
}
.lightbox-media img,
.lightbox-media video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}
.lightbox-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,.15);
    border: none;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
    z-index: 2;
}
.lightbox-nav-btn:hover { background: rgba(255,255,255,.28); }
.lightbox-nav-btn.prev { left: 14px; }
.lightbox-nav-btn.next { right: 14px; }

/* Sidebar (right) */
.lightbox-sidebar {
    width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-left: 1.5px solid var(--border);
    background: var(--surface);
    overflow: hidden;
}
.lightbox-sidebar-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1.5px solid var(--border);
    flex-shrink: 0;
}
.lightbox-close {
    background: none;
    border: 1.5px solid var(--border);
    color: var(--text-muted);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
    flex-shrink: 0;
}
.lightbox-close:hover { background: var(--surface-hover); color: var(--text); }
.lightbox-sidebar-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.lightbox-filename {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    word-break: break-all;
    line-height: 1.45;
}
.lightbox-sidebar-section { display: flex; flex-direction: column; }
.lightbox-field-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    margin-bottom: 7px;
}
.lightbox-caption-input {
    width: 100%;
    box-sizing: border-box;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    font-size: 13px;
    font-family: inherit;
    color: var(--text);
    background: var(--bg);
    resize: vertical;
    transition: border-color .12s;
    line-height: 1.5;
}
.lightbox-caption-input:focus { outline: none; border-color: var(--accent); }
.lightbox-collections-section { display: flex; flex-direction: column; }
.lightbox-collections-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 2px; }
.lightbox-col-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    transition: all .12s;
    user-select: none;
}
.lightbox-col-chip.active { background: var(--primary-light); border-color: var(--accent); color: var(--accent); }
.lightbox-col-chip:hover { border-color: var(--accent); }

/* Mobile: stack vertically */
@media (max-width: 700px) {
    .lightbox-card { flex-direction: column; height: 95vh; width: 100%; }
    .lightbox-media { min-height: 50%; flex: 1; }
    .lightbox-sidebar { width: 100%; flex-shrink: 0; max-height: 45%; border-left: none; border-top: 1.5px solid var(--border); }
}

/* Brand Hub */

/* Logo hero - full-width banner above the grid */
.brand-hero {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 40px 32px 32px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    box-shadow: var(--shadow-sm);
    animation: fadeSlideUp .4s cubic-bezier(.22,1,.36,1) both;
    position: relative;
}
.brand-hero-label {
    position: absolute;
    top: 16px;
    left: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
}
.brand-hero-logo-wrap {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.brand-hero-img {
    max-width: 340px;
    max-height: 150px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    transition: transform .2s ease;
}
.brand-hero-img:hover { transform: scale(1.02); }
.brand-hero-empty {
    width: 280px;
    height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--text-light);
    font-size: 13px;
    border: 2px dashed var(--border);
    border-radius: 14px;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.brand-hero-empty:hover { border-color: var(--primary); color: var(--text-muted); background: var(--primary-light); }
.brand-hero-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}
.brand-hero-hint {
    font-size: 12px;
    color: var(--text-light);
}

.brand-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 20px;
    align-items: start;
}
@media (max-width: 880px) {
    .brand-grid { grid-template-columns: 1fr; }
}
.brand-left, .brand-right { display: flex; flex-direction: column; gap: 16px; }

.brand-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
}
.brand-card-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 18px;
}

/* Logo */
.brand-logo-wrap {
    min-height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    border: 1.5px dashed var(--border);
    border-radius: var(--radius-sm);
    padding: 16px;
    margin-bottom: 12px;
}
.brand-logo-img {
    max-width: 100%;
    max-height: 120px;
    object-fit: contain;
    border-radius: 4px;
}
.brand-logo-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 12px;
}
.brand-logo-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.brand-logo-hint { font-size: 11px; color: var(--text-muted); }

/* Colour palette */
.brand-colors-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 8px;
    align-items: flex-end;
}
.brand-color-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.brand-color-swatch {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    border: 1.5px solid rgba(0,0,0,.08);
    transition: transform .12s, box-shadow .12s;
    flex-shrink: 0;
}
.brand-color-swatch:hover { transform: scale(1.06); box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.brand-color-remove {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    background: rgba(0,0,0,.35);
    border-radius: 7px;
    text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.brand-color-swatch:hover .brand-color-remove { display: flex; }
.brand-color-footer {
    display: flex;
    align-items: center;
    gap: 3px;
}
.brand-color-hex {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted);
    font-family: monospace;
    letter-spacing: .02em;
}
.brand-color-copy {
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    border-radius: 3px;
    transition: color .12s, background .12s;
}
.brand-color-copy:hover { color: var(--primary); background: var(--primary-light); }
.brand-color-add {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    border: 1.5px dashed var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted);
    transition: border-color .12s, color .12s;
    margin-bottom: 19px;
}
.brand-color-add:hover { border-color: var(--primary); color: var(--primary); }
.brand-color-hint { font-size: 11px; color: var(--text-muted); }

/* Contact / Notes fields */
.brand-field-row { margin-bottom: 12px; }
.brand-field-row:last-child { margin-bottom: 0; }
.brand-field-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 5px;
}
.brand-field-input {
    width: 100%;
    box-sizing: border-box;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 7px 10px;
    font-size: 13px;
    font-family: inherit;
    color: var(--text);
    background: var(--bg);
    transition: border-color .12s;
}
.brand-field-input:hover { border-color: #D1D5DB; }
.brand-field-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(13,37,69,.1); }
.brand-notes-input {
    width: 100%;
    box-sizing: border-box;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    font-size: 13px;
    font-family: inherit;
    color: var(--text);
    background: var(--bg);
    resize: vertical;
    line-height: 1.5;
    transition: border-color .12s;
}
.brand-notes-input:hover { border-color: #D1D5DB; }
.brand-notes-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(13,37,69,.1); }

/* Upload zone */
.brand-upload-zone {
    border: 1.5px dashed var(--border);
    border-radius: var(--radius-sm);
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    background: var(--bg);
    transition: border-color .12s, background .12s;
    margin-bottom: 16px;
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
}
.brand-upload-zone:hover,
.brand-upload-zone.drag-over {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--text);
}
.brand-upload-zone .link-label { color: var(--primary); font-weight: 500; }

/* Assets grid */
.brand-assets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}
.brand-asset-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    transition: border-color .12s;
}
.brand-asset-item:hover { border-color: var(--primary); }
.brand-asset-thumb {
    width: 52px;
    height: 52px;
    border-radius: 5px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
}
.brand-asset-thumb img { width: 100%; height: 100%; object-fit: cover; }
.brand-asset-file { background: var(--primary-light); }
.brand-asset-type {
    font-size: 10px;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.brand-asset-info { flex: 1; min-width: 0; }
.brand-asset-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.brand-asset-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.brand-asset-actions { display: flex; gap: 4px; flex-shrink: 0; }
.brand-asset-item { cursor: pointer; }

/* Brand asset modal */
.asset-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.7);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.asset-modal {
    background: var(--surface);
    border-radius: var(--radius);
    max-width: 860px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.asset-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: rgba(0,0,0,.35);
    border: none;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background .12s;
}
.asset-modal-close:hover { background: rgba(0,0,0,.6); }
.asset-modal-preview {
    flex: 1;
    overflow: auto;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    max-height: 70vh;
}
.asset-modal-preview img {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    display: block;
}
.asset-modal-file-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 40px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .05em;
}
.asset-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-top: 1.5px solid var(--border);
    flex-shrink: 0;
}
.asset-modal-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    word-break: break-all;
}
.asset-modal-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* Product Tour */

/* Full-screen mask - blocks page interaction during the tour */
.tour-mask {
    position: fixed;
    inset: 0;
    z-index: 8000;
    pointer-events: all;
    transition: background .3s ease;
}

/* Spotlight - sits above the mask, uses box-shadow to dim everything outside */
.tour-spotlight {
    position: fixed;
    border-radius: 14px;
    box-shadow: 0 0 0 0 rgba(0,0,0,0);     /* starts invisible */
    z-index: 8001;
    pointer-events: none;
    transition:
        top    .38s cubic-bezier(.22,1,.36,1),
        left   .38s cubic-bezier(.22,1,.36,1),
        width  .38s cubic-bezier(.22,1,.36,1),
        height .38s cubic-bezier(.22,1,.36,1),
        box-shadow .3s ease;
}
.tour-spotlight--on {
    box-shadow: 0 0 0 9999px rgba(0,0,0,.58), 0 0 0 2px rgba(255,255,255,.25);
}

/* Tooltip card - styled inline in tour.js */

.tour-badge {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--primary);
    margin-bottom: 10px;
}
.tour-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
    margin-bottom: 10px;
}
.tour-body {
    font-size: 13.5px;
    color: var(--text-muted);
    line-height: 1.65;
    margin-bottom: 22px;
}
.tour-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.tour-dots {
    display: flex;
    gap: 6px;
    align-items: center;
}
.tour-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border);
    transition: background .2s, transform .2s, width .2s;
    flex-shrink: 0;
}
.tour-dot.active {
    background: var(--primary);
    transform: scale(1.35);
}
.tour-dot.done {
    background: var(--primary);
    opacity: .35;
}
.tour-btns {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.tour-skip {
    display: block;
    margin-top: 14px;
    font-size: 12px;
    color: var(--text-light);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    transition: color .15s;
    text-align: left;
}
.tour-skip:hover { color: var(--text-muted); }

/* Help / replay button (bottom-left floating) */
.tour-help-btn {
    position: fixed;
    bottom: 24px;
    left: 24px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(13,37,69,.4);
    z-index: 7800;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s;
    animation: fadeSlideUp .4s cubic-bezier(.22,1,.36,1) both;
}
.tour-help-btn span {
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    font-family: serif;
}
.tour-help-btn:hover {
    transform: scale(1.12);
    box-shadow: 0 6px 24px rgba(13,37,69,.5);
}
.tour-help-btn:active { transform: scale(.96); }

/* Sitewide entrance animations    All pages share style.css so animations are declared here once.
   The fadeSlideUp keyframe is defined near the top of this file.
 */

/* Brand Hub - brand.php */
.brand-card {
    transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s ease;
    animation: fadeSlideUp .45s cubic-bezier(.22,1,.36,1) both;
}
.brand-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.brand-left  .brand-card:nth-child(1), .brand-right .brand-card:nth-child(1) { animation-delay: .05s; }
.brand-left  .brand-card:nth-child(2), .brand-right .brand-card:nth-child(2) { animation-delay: .12s; }
.brand-left  .brand-card:nth-child(3), .brand-right .brand-card:nth-child(3) { animation-delay: .19s; }

.brand-asset-item {
    animation: fadeSlideUp .4s cubic-bezier(.22,1,.36,1) both;
    transition: border-color .12s, transform .2s cubic-bezier(.22,1,.36,1), box-shadow .15s;
}
.brand-asset-item:hover { border-color: var(--primary); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.brand-asset-item:nth-child(1) { animation-delay: .04s; }
.brand-asset-item:nth-child(2) { animation-delay: .08s; }
.brand-asset-item:nth-child(3) { animation-delay: .12s; }
.brand-asset-item:nth-child(4) { animation-delay: .16s; }
.brand-asset-item:nth-child(5) { animation-delay: .20s; }
.brand-asset-item:nth-child(6) { animation-delay: .24s; }
.brand-asset-item:nth-child(7) { animation-delay: .28s; }
.brand-asset-item:nth-child(8) { animation-delay: .32s; }

/* Media Library - media.php */
.collection-card-wrap {
    animation: fadeSlideUp .45s cubic-bezier(.22,1,.36,1) both;
}
.collection-card-wrap:nth-child(1) { animation-delay: .04s; }
.collection-card-wrap:nth-child(2) { animation-delay: .10s; }
.collection-card-wrap:nth-child(3) { animation-delay: .16s; }
.collection-card-wrap:nth-child(4) { animation-delay: .22s; }
.collection-card-wrap:nth-child(5) { animation-delay: .28s; }
.collection-card-wrap:nth-child(6) { animation-delay: .34s; }

.media-item { animation: fadeSlideUp .4s cubic-bezier(.22,1,.36,1) both; }
.media-item:nth-child(1)  { animation-delay: .03s; }
.media-item:nth-child(2)  { animation-delay: .06s; }
.media-item:nth-child(3)  { animation-delay: .09s; }
.media-item:nth-child(4)  { animation-delay: .12s; }
.media-item:nth-child(5)  { animation-delay: .15s; }
.media-item:nth-child(6)  { animation-delay: .18s; }
.media-item:nth-child(7)  { animation-delay: .21s; }
.media-item:nth-child(8)  { animation-delay: .24s; }
.media-item:nth-child(9)  { animation-delay: .27s; }
.media-item:nth-child(10) { animation-delay: .30s; }
.media-item:nth-child(11) { animation-delay: .33s; }
.media-item:nth-child(12) { animation-delay: .36s; }

/* Profile - profile.php */
.profile-sidebar {
    animation: fadeSlideUp .45s cubic-bezier(.22,1,.36,1) .04s both;
}
.profile-card {
    animation: fadeSlideUp .45s cubic-bezier(.22,1,.36,1) both;
    transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s ease;
}
.profile-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.profile-card:nth-child(1) { animation-delay: .08s; }
.profile-card:nth-child(2) { animation-delay: .15s; }
.profile-card:nth-child(3) { animation-delay: .22s; }
.profile-card:nth-child(4) { animation-delay: .29s; }

/* Admin Statuses - admin/statuses.php */
.admin-section {
    animation: fadeSlideUp .45s cubic-bezier(.22,1,.36,1) both;
}
.admin-section:nth-child(1) { animation-delay: .06s; }
.admin-section:nth-child(2) { animation-delay: .14s; }

.status-row {
    animation: fadeSlideUp .4s cubic-bezier(.22,1,.36,1) both;
    transition: background .15s, transform .18s cubic-bezier(.22,1,.36,1), box-shadow .15s;
}
.status-row:hover { background: var(--bg); transform: translateX(4px); }
.status-row:nth-child(1)  { animation-delay: .04s; }
.status-row:nth-child(2)  { animation-delay: .08s; }
.status-row:nth-child(3)  { animation-delay: .12s; }
.status-row:nth-child(4)  { animation-delay: .16s; }
.status-row:nth-child(5)  { animation-delay: .20s; }
.status-row:nth-child(6)  { animation-delay: .24s; }
.status-row:nth-child(7)  { animation-delay: .28s; }
.status-row:nth-child(8)  { animation-delay: .32s; }

/* Content Detail - content.php sidebar items */
.content-item {
    animation: fadeSlideUp .35s cubic-bezier(.22,1,.36,1) both;
}
.content-item:nth-child(1)  { animation-delay: .03s; }
.content-item:nth-child(2)  { animation-delay: .06s; }
.content-item:nth-child(3)  { animation-delay: .09s; }
.content-item:nth-child(4)  { animation-delay: .12s; }
.content-item:nth-child(5)  { animation-delay: .15s; }
.content-item:nth-child(6)  { animation-delay: .18s; }
.content-item:nth-child(7)  { animation-delay: .21s; }
.content-item:nth-child(8)  { animation-delay: .24s; }
.content-item:nth-child(9)  { animation-delay: .27s; }
.content-item:nth-child(10) { animation-delay: .30s; }

.detail-inner { animation: fadeIn .4s ease .05s both; }

/* Clients Table (admin/clients.php) */
.table-scroll-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.clients-table { width: 100%; border-collapse: collapse; min-width: 540px; }
.clients-table th {
    text-align: left; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-muted); padding: 0 12px 10px;
    border-bottom: 1.5px solid var(--border);
}
.clients-table td {
    padding: 14px 12px; border-bottom: 1px solid var(--border);
    font-size: 14px; vertical-align: middle;
}
.clients-table tr:last-child td { border-bottom: none; }
.clients-table tbody tr:hover td { background: var(--surface-hover); }
.ct-name-cell { display: flex; align-items: center; gap: 10px; }
.ct-name-cell img {
    width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
    object-fit: cover; border: 1.5px solid var(--border);
}
.ct-avatar {
    width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
    background: var(--accent); color: #fff;
    font-size: 13px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--border);
}
.ct-name-link { font-weight: 600; color: var(--text); text-decoration: none; font-size:14px; }
.ct-name-link:hover { color: var(--accent); text-decoration: underline; }
.ct-stat-approved { color: #059669; font-weight: 600; }
.ct-stat-pending  { color: #D97706; font-weight: 600; }
.ct-stat-rejected { color: #DC2626; font-weight: 600; }
.cl-content-stats { display:flex; align-items:center; gap:5px; font-size:13px; font-weight:600; white-space:nowrap; }
.cl-stat-sep      { color:var(--border); font-weight:400; }
.cl-stat-total    { color:var(--text-muted); font-size:12px; font-weight:400; }

/* Clients list toolbar */
.cl-toolbar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 16px;
}
.cl-search-wrap {
    position: relative; flex: 1; min-width: 200px; max-width: 300px;
}
.cl-search-wrap svg,
.cl-search-wrap i {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    pointer-events: none; color: var(--text-muted);
}
.cl-search-input {
    width: 100%; padding: 7px 10px 7px 34px; border: 1.5px solid var(--border);
    border-radius: 8px; font-size: 13px; background: var(--surface);
    color: var(--text); outline: none; font-family: inherit;
    transition: border-color .15s;
}
.cl-search-input:focus { border-color: var(--primary); }
.cl-filters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cl-filter-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px; border-radius: 100px; font-size: 12px; font-weight: 600;
    border: 1.5px solid var(--border); background: var(--surface); color: var(--text-muted);
    cursor: pointer; transition: all .15s; white-space: nowrap; font-family: inherit;
}
.cl-filter-btn:hover { border-color: var(--text-muted); color: var(--text); }
.cl-filter-btn.active { border-color: var(--primary); background: var(--primary-light); color: var(--primary); }
.cl-results-bar { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }
.cl-results-bar strong { color: var(--text); }
.cl-empty-state { text-align:center; padding: 48px 20px; color: var(--text-muted); font-size:14px; }
.ct-name-cell { display: flex; flex-direction: column; gap: 5px; }
.ct-client-row { display: flex; align-items: center; gap: 10px; }
.ct-initial {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    font-size: 12px; font-weight: 700; color: #fff;
    display: flex; align-items: center; justify-content: center;
}

/* 3-dot action menu */
.action-menu { position: relative; display: inline-block; }
.action-menu-btn {
    background: none; border: none; cursor: pointer;
    padding: 6px 8px; border-radius: 6px; color: var(--text-muted);
    display: flex; align-items: center; line-height: 1;
}
.action-menu-btn:hover { background: var(--surface-hover); color: var(--text); }
.action-dropdown {
    display: none; position: absolute; right: 0; top: calc(100% + 4px);
    background: var(--surface); border: 1.5px solid var(--border);
    border-radius: 10px; box-shadow: var(--shadow-md);
    min-width: 160px; z-index: 100; overflow: hidden;
}
.action-dropdown.open { display: block; }
/* When opened from a table with overflow scroll, JS anchors it as fixed so it overlays instead of clipping. */
.action-dropdown.open[style*="top"] { position: fixed; z-index: 1000; }
.action-dropdown-item {
    display: block; padding: 9px 14px; font-size: 13px;
    color: var(--text); text-decoration: none;
    background: none; border: none; width: 100%;
    text-align: left; cursor: pointer; font-family: inherit;
}
.action-dropdown-item:hover { background: var(--surface-hover); }
.action-dropdown-item.danger { color: #DC2626; }
.action-dropdown-item.danger:hover { background: #FEF2F2; }

/* Content-page image/video lightbox (ci-lightbox) */
.ci-lightbox-card {
    background: var(--surface);
    border-radius: var(--radius-xl);
    box-shadow: 0 24px 64px rgba(0,0,0,.35);
    width: min(940px, 95vw);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ci-lightbox-media {
    flex: 1;
    min-height: 200px;
    background: #0e0e0e;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.ci-lightbox-media img,
.ci-lightbox-media video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}
.ci-lightbox-footer {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1.5px solid var(--border);
    flex-shrink: 0;
}

/* Video thumbnail in content images grid */
.content-image-video-thumb {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    display: block;
    cursor: zoom-in;
    background: #000;
}

/* Video preview in media browser grid */
.mb-video-preview {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
    background: #000;
    object-fit: contain;
}

/* New-content type picker */
.nc-type-picker-wrap {
    margin-top: 16px;
}
.nc-type-picker-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    margin-bottom: 10px;
}
.nc-type-picker {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.nc-type-opt { position: relative; }
.nc-type-opt input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.nc-type-opt-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    text-align: center;
    transition: border-color .15s, background .15s, box-shadow .15s;
    background: var(--surface);
}
.nc-type-opt-inner:hover {
    border-color: var(--primary);
    background: rgba(13,37,69,.04);
}
.nc-type-opt input[type="radio"]:checked + .nc-type-opt-inner {
    border-color: var(--primary);
    background: rgba(13,37,69,.07);
    box-shadow: 0 0 0 3px rgba(13,37,69,.12);
}
.nc-type-opt-icon {
    color: var(--text-muted);
    display: flex;
    transition: color .15s;
}
.nc-type-opt-inner:hover .nc-type-opt-icon,
.nc-type-opt input[type="radio"]:checked + .nc-type-opt-inner .nc-type-opt-icon {
    color: var(--primary);
}
.nc-type-opt-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
}
@media (max-width: 600px) {
    .nc-type-picker { grid-template-columns: repeat(2, 1fr); }
}

/* Trash page */
.trash-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 60px 0;
    color: var(--text-muted);
}
.trash-empty svg { opacity: .35; }
.trash-empty p { font-size: 15px; margin: 0; }
.table-wrap { overflow-x: auto; }

/* Activity Log panel */
.activity-log-panel {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1.5px solid var(--border);
}
.activity-log-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    margin: 0 0 14px;
}
.activity-log-empty {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}
.activity-log-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.activity-log-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
}
.activity-log-item:last-child { border-bottom: none; }
.al-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border);
    flex-shrink: 0;
    margin-top: 4px;
}
.al-dot.content_created      { background: #0D2545; }
.al-dot.sent_for_review       { background: #F59E0B; }
.al-dot.client_approved       { background: #10B981; }
.al-dot.client_not_approved   { background: #EF4444; }
.al-dot.admin_status_changed  { background: #1A3A6E; }
.al-dot.wordpress_published   { background: #3B82F6; }
.al-dot.comment_posted                { background: #9CA3AF; }
.al-body { flex: 1; min-width: 0; }
.al-label { font-size: 13px; color: var(--text); line-height: 1.4; }
.al-time  { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* Revision History panel */
.revisions-panel {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1.5px solid var(--border);
}
.revisions-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.revision-item {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 9px 6px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background .12s;
}
.revision-item:last-child { border-bottom: none; }
.revision-item:hover { background: var(--bg); }
.rev-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
    flex-shrink: 0;
}
.rev-body { flex: 1; min-width: 0; }
.rev-time   { font-size: 13px; color: var(--text); line-height: 1.4; }
.rev-author { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.rev-restore-btn {
    font-size: 11px;
    font-weight: 500;
    color: var(--primary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
    transition: background .12s;
}
.rev-restore-btn:hover { background: var(--primary-light); }

/* Revision viewer modal */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal-box {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 680px;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}
.revision-modal-box { max-width: 1100px; width: 95vw; }
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.modal-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}
.modal-close {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 4px;
}
.modal-close:hover { background: var(--bg); }
.revision-modal-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}
.rev-diff-field { border-bottom: 1px solid var(--border); }
.rev-diff-field:last-child { border-bottom: none; }
.rev-diff-field-label {
    padding: 8px 16px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}
.rev-diff-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
}
.rev-diff-col-hdr {
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-bottom: 1px solid var(--border);
}
.rev-diff-col-hdr-removed { background: #fff1f2; color: #9f1239; border-right: 1px solid var(--border); }
.rev-diff-col-hdr-added   { background: #f0fdf4; color: #14532d; }
.rev-diff-content {
    padding: 14px 16px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
    min-height: 40px;
}
.rev-diff-left  { border-right: 1px solid var(--border); background: #fffbfb; }
.rev-diff-right { background: #fbfffb; }
mark.diff-removed { background: #ffdce0; color: inherit; border-radius: 2px; padding: 0 1px; }
mark.diff-added   { background: #ccffd8; color: inherit; border-radius: 2px; padding: 0 1px; }
.rev-diff-empty   { color: var(--text-muted); font-style: italic; }
.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

/* Quick-add Add Task modal: 90% of the screen, matching .tk-modal-box.tk-modal-solo
   in admin/tasks.php (what that modal uses in new-task mode). The two Add Task modals
   are the same form and have to look the same. Kept here rather than inline on the
   element so the mobile rule below can override it - an inline height would win over
   a media query. */
#cuTaskBackdrop .modal-box { width: 90vw; height: 90vh; max-width: none; max-height: none; }

/* Full-screen, scrollable Add Task modal on mobile so the footer (Save) stays on screen */
@media (max-width: 768px) {
    #cuTaskBackdrop { padding: 0; align-items: stretch; }
    #cuTaskBackdrop .modal-box {
        width: 100%;
        max-width: none !important;
        height: 100%;
        max-height: none;
        border-radius: 0;
    }
}

/* Kanban filter bar */
.kanban-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.kb-search-wrap {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0 10px;
    height: 34px;
    min-width: 200px;
    color: var(--text-muted);
}
.kb-search-wrap:focus-within {
    border-color: var(--primary);
    color: var(--text);
}
.kb-search {
    border: none;
    background: transparent;
    outline: none;
    font-size: 13px;
    color: var(--text);
    width: 100%;
}
.kb-search::placeholder { color: var(--text-muted); }
.kb-filter {
    display: flex;
    align-items: center;
    gap: 5px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0 8px 0 10px;
    height: 34px;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
}
.kb-filter:focus-within { border-color: var(--primary); }
.kb-filter-prefix {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    pointer-events: none;
}
.kb-filter select {
    border: none;
    background: transparent;
    outline: none;
    font-size: 13px;
    color: var(--text);
    appearance: none;
    -webkit-appearance: none;
    padding-right: 14px;
    cursor: pointer;
}
.kb-chevron {
    color: var(--text-muted);
    pointer-events: none;
    flex-shrink: 0;
}
.kb-clear {
    background: none;
    border: 1.5px solid var(--border);
    border-radius: 7px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.kb-clear:hover { border-color: var(--text-muted); color: var(--text); }
.kb-results {
    font-size: 12px;
    color: var(--text-muted);
    margin-left: auto;
    white-space: nowrap;
}

/* Navigation Sidebar */
.app-sidebar {
    position: fixed;
    top: 0; left: 0;
    width: var(--nav-w);
    height: 100vh;
    height: 100svh; /* iOS Safari: use small viewport height so footer isn't clipped by browser chrome */
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    z-index: 150;
    overflow: hidden;
    transition: width .22s ease;
}
.app-page  { transition: padding-left .22s ease; }

/* Collapsed sidebar */
body.sb-collapsed .app-sidebar       { width: 60px; }
body.sb-collapsed.app-page           { padding-left: 60px; }
body.sb-collapsed .sb-label          { display: none; }
body.sb-collapsed .sb-badge          { display: none; }
body.sb-collapsed .sb-link           { justify-content: center; padding: 10px 0; }
body.sb-collapsed .sb-collapse-icon  { transform: rotate(180deg); }

/* Brand lockup */
.sb-brand {
    padding: 17px 16px 15px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.sb-logo-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.sb-logo-full {
    height: 25px;
    width: auto;
    max-width: 100%;
    display: block;
}
html.dark .sb-logo-full { filter: brightness(0) invert(1); opacity: .92; }
.sb-logo-mark {
    display: none;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--primary), #14B8A6);
    color: #fff;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.sb-brand-sub {
    margin-top: 9px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.sb-collapsed .sb-brand { padding: 14px 0 12px; display: flex; justify-content: center; }
body.sb-collapsed .sb-logo-full { display: none; }
body.sb-collapsed .sb-logo-mark { display: flex; }

/* Sidebar nav filter */
.sb-search { padding: 10px 12px 2px; }
body.sb-collapsed .sb-search { display: none; }
.sb-search-wrap { position: relative; display: flex; align-items: center; }
.sb-search-icon {
    position: absolute;
    left: 11px;
    font-size: 12px;
    color: var(--text-muted);
    opacity: .6;
    pointer-events: none;
}
.sb-search-input {
    width: 100%;
    padding: 8px 28px 8px 31px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font-size: 13px;
    outline: none;
    transition: border-color .12s, box-shadow .12s, background .12s;
}
.sb-search-input::placeholder { color: var(--text-muted); opacity: .7; }
.sb-search-input:focus {
    border-color: var(--primary);
    background: var(--surface);
    box-shadow: 0 0 0 3px rgba(13,37,69,.1);
}
html.dark .sb-search-input:focus { box-shadow: 0 0 0 3px rgba(74,143,232,.18); }
.sb-search-clear {
    position: absolute;
    right: 6px;
    display: none;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 5px;
    background: none;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
}
.sb-search-clear:hover { background: var(--bg); color: var(--text); }
.sb-search.has-query .sb-search-clear { display: flex; }

.sb-nav {
    flex: 1;
    overflow-y: auto;
    padding: 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.sb-section-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 16px 12px 5px;
    opacity: .5;
}
body.sb-collapsed .sb-section-label { display: none; }

/* Sidebar group dropdown */
.sb-group-toggle {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    transition: background .12s, color .12s;
    text-align: left;
}
.sb-group-toggle:hover { background: var(--bg); color: var(--text); }
.sb-group.open .sb-group-toggle { color: var(--text); }
.sb-group-arrow { margin-left: auto; transition: transform .2s; opacity: .5; }
.sb-group.open .sb-group-arrow { transform: rotate(180deg); opacity: .7; }
.sb-group-items {
    display: none;
    flex-direction: column;
    gap: 2px;
    margin: 3px 0 3px 22px;
    padding-left: 10px;
    border-left: 1.5px solid var(--border);
}
.sb-group.open .sb-group-items { display: flex; }
.sb-link-sub { padding: 8px 10px !important; font-size: 13.5px; }
.sb-link-sub::before { display: none !important; }
.sb-sub-icon {
    width: 15px;
    font-size: 13px;
    text-align: center;
    flex-shrink: 0;
    opacity: .7;
}
.sb-link-sub.active .sb-sub-icon { opacity: 1; }
body.sb-collapsed .sb-group-items { display: none !important; }
body.sb-collapsed .sb-group-toggle { justify-content: center; padding: 10px 0; }

.sb-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    transition: background .12s, color .12s;
    position: relative;
}
.sb-link:hover {
    background: var(--bg);
    color: var(--text);
}
.sb-link.active {
    background: var(--primary-light);
    color: var(--primary);
    font-weight: 600;
}
.sb-link.active::before {
    content: '';
    position: absolute;
    left: -2px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 18px;
    border-radius: 0 3px 3px 0;
    background: var(--primary);
}
body.sb-collapsed .sb-link.active::before { display: none; }
.sb-link svg { flex-shrink: 0; opacity: .75; }
.sb-link.active svg { opacity: 1; }
.sb-link-signout { color: var(--text-muted); }
.sb-link-signout:hover { color: var(--danger); background: rgba(239,68,68,.06); }
.sb-link-add {
    background: var(--primary);
    color: #fff;
    font-weight: 600;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(13,37,69,.15);
    margin-bottom: 2px;
}
.sb-link-add svg, .sb-link-add i { opacity: 1; color: #fff; }
.sb-link-add:hover { background: var(--primary-hover); color: #fff; }
.sb-link-add.active { background: var(--primary-hover); color: #fff; box-shadow: none; }
.sb-link-add.active::before { display: none; }


.sb-badge {
    margin-left: auto;
    background: var(--primary);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 100px;
    padding: 1px 7px;
    line-height: 17px;
    min-width: 18px;
    text-align: center;
}
.sb-badge-urgent { background: #EF4444; }
.sb-link-pending { color: #EF4444; }
.sb-link-pending:hover { color: #EF4444; background: rgba(239,68,68,.06); }
.sb-link-pending.active { color: #EF4444; background: rgba(239,68,68,.08); font-weight: 600; }

.sb-footer {
    padding: 10px 12px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sb-collapse-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    width: 100%;
    text-align: left;
}
.sb-collapse-icon {
    transition: transform .22s ease;
    flex-shrink: 0;
}
.sb-user-block {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px 12px;
    border-bottom: 1.5px solid var(--border);
    flex-shrink: 0;
}
.sb-user-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 12px;
}
.sb-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0D2545, #1A3A6E);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
}
.sb-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sb-user-details { min-width: 0; }
.sb-user-name  { font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user-email   { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user-company { font-size: 10.5px; font-weight: 600; color: var(--primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }

/* Switch-user banner - sits above the topbar on every page while a superadmin
   is signed in as someone else. Deliberately loud: it is the only thing telling
   them that what they do here lands on the other user's account. */
.imp-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding: 8px 20px;
    background: #7C2D12;
    color: #FFF7ED;
    font-size: 13px;
    line-height: 1.3;
    position: relative;
    z-index: 160;
}
.imp-bar-ic       { font-size: 14px; opacity: .85; }
.imp-bar-text strong { font-weight: 700; }
.imp-bar-sub      { opacity: .7; margin-left: 6px; }
.imp-bar-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 13px;
    border-radius: 999px;
    background: rgba(255,255,255,.16);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease;
}
.imp-bar-btn:hover { background: rgba(255,255,255,.3); color: #fff; }
@media (max-width: 900px) {
    .imp-bar     { padding: 7px 14px; font-size: 12px; gap: 8px; }
    .imp-bar-sub { display: none; }
}

/* Desktop Top Bar */
.app-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 0 20px 0 24px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    flex-shrink: 0;
    position: relative;
}
.topbar-search-bar {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    width: 340px;
    height: 40px;
    padding: 0 14px;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: 100px;
    cursor: pointer;
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.topbar-search-bar:hover {
    border-color: var(--primary);
    background: var(--surface);
}
.topbar-search-bar:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(13,37,69,.1);
    background: var(--surface);
}
.topbar-search-icon {
    font-size: 13px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.topbar-search-placeholder {
    flex: 1;
    font-size: 13.5px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}
.topbar-search-kbd {
    font-size: 10px;
    color: var(--text-light);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 2px 6px;
    background: var(--surface);
    flex-shrink: 0;
    letter-spacing: .03em;
    font-family: inherit;
}
@media (max-width: 900px) { .topbar-search-bar { width: 240px; } .topbar-search-kbd { display: none; } }
.topbar-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Client Nav Dropdown (topbar) */
.topbar-client-nav { position: relative; flex-shrink: 0; }
.topbar-client-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px 8px;
    border-radius: 7px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    transition: background .15s;
    white-space: nowrap;
    max-width: 400px;
}
.topbar-client-btn:hover { background: var(--bg); }
.topbar-client-btn.open { background: var(--bg); }
.topbar-client-name { color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.topbar-client-sep { color: var(--text-muted); font-weight: 400; }
.topbar-client-section { color: var(--text-muted); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.topbar-client-chevron { font-size: 10px; color: var(--text-muted); flex-shrink: 0; margin-left: 2px; transition: transform .2s; }
.topbar-client-btn.open .topbar-client-chevron { transform: rotate(180deg); }
.topbar-client-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 210px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    z-index: 900;
    overflow: hidden;
}
.topbar-client-dropdown.open { display: block; }
.topbar-client-dropdown-header {
    padding: 11px 14px 9px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: 1px solid var(--border);
}
.topbar-client-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    font-size: 13.5px;
    color: var(--text);
    text-decoration: none;
    transition: background .1s;
}
.topbar-client-link i { width: 15px; text-align: center; color: var(--text-muted); font-size: 13px; flex-shrink: 0; }
.topbar-client-link:hover { background: var(--bg); }
.topbar-client-link.active { color: var(--primary); font-weight: 600; background: var(--primary-light); }
.topbar-client-link.active i { color: var(--primary); }
.topbar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-left: auto;
}
.topbar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 7px;
    color: var(--text-muted);
    text-decoration: none;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 15px;
    transition: background .12s, color .12s;
    position: relative;
    font-family: inherit;
}
.topbar-btn:hover { background: var(--bg); color: var(--text); }
.topbar-btn.active { color: var(--primary); background: var(--primary-light); }
.topbar-btn-signout:hover { color: var(--danger); background: rgba(239,68,68,.06); }
.topbar-btn .notif-badge { top: 3px; right: 3px; }

/* Topbar: "+ Add" quick-create button + flyout */
.topbar-add { position: relative; flex-shrink: 0; }
.topbar-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px 0 16px;
    border: none;
    border-radius: 50px;
    background: var(--primary);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(13,37,69,.18);
    transition: background .15s, box-shadow .15s;
}
.topbar-add-btn:hover { background: var(--primary-hover); box-shadow: 0 2px 8px rgba(13,37,69,.25); }
.topbar-add-btn > .fa-plus { font-size: 14px; }
.topbar-add-chevron { font-size: 10px; opacity: .85; transition: transform .2s; }
.topbar-add-btn.open .topbar-add-chevron { transform: rotate(180deg); }

.topbar-add-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    min-width: 232px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    z-index: 900;
    overflow: hidden;
    padding: 6px;
}
.topbar-add-menu.open { display: block; }
.topbar-add-head {
    padding: 8px 10px 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    opacity: .7;
}
.topbar-add-item {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background .12s;
}
.topbar-add-item:hover { background: var(--bg); }
.topbar-add-ic {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 13px;
    flex-shrink: 0;
}
/* Mobile quick-add: a Material floating action button, bottom-right.
   Hidden by default and switched on at the mobile breakpoint below, the mirror of
   .app-mobile-bar - the desktop topbar keeps its "+ Add" pill.

   z-index sits above the page and the sticky mobile bar (100) but below both sidebar
   overlays (120 legacy, 140 app), the notifications panel (499) and modals (1000): a
   dimmed screen means something else has the floor, and a button floating over the dim
   would look live when it isn't. */
.rmc-fab {
    display: none;
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 115;
}
/* 56px circle, 24px icon, elevation 6 - Material's resting FAB. The three-layer shadow
   is what reads as "floating" rather than "printed on"; a single blur doesn't. */
.rmc-fab-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 24px;
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12);
    transition: box-shadow .2s cubic-bezier(.4,0,.2,1), background .15s, transform .2s cubic-bezier(.4,0,.2,1);
}
/* Elevation 12 while pressed, and the plus turns into a close X on the way open -
   the icon says what the next tap does, which is the whole affordance on a button
   with no label. */
.rmc-fab-btn:active { box-shadow: 0 7px 8px -4px rgba(0,0,0,.2), 0 12px 17px 2px rgba(0,0,0,.14), 0 5px 22px 4px rgba(0,0,0,.12); }
.rmc-fab-btn > i { transition: transform .2s cubic-bezier(.4,0,.2,1); }
.rmc-fab-btn.open { background: var(--primary-hover); }
.rmc-fab-btn.open > i { transform: rotate(135deg); }

/* The menu opens upward from above the button, right edges aligned, because there is
   no room below it. Absolute inside the fixed .rmc-fab, so it travels with the FAB. */
.rmc-fab-menu {
    position: absolute;
    bottom: calc(100% + 12px);
    right: 0;
    top: auto;
    left: auto;
    transform-origin: bottom right;
}
.rmc-fab-menu.open { animation: rmcFabMenuIn .18s cubic-bezier(.4,0,.2,1); }
@keyframes rmcFabMenuIn {
    from { opacity: 0; transform: scale(.9) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
/* Bigger tap targets than the desktop flyout's - this list is reached by thumb. */
.rmc-fab-menu .topbar-add-item { padding: 11px 10px; font-size: 14.5px; }

@media (max-width: 768px) { .rmc-fab { display: block; } }

/* Topbar: Account avatar menu */
.topbar-account { position: relative; flex-shrink: 0; }
.topbar-account-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 3px 7px 3px 3px;
    border-radius: 100px;
    font-family: inherit;
    transition: background .12s;
}
.topbar-account-btn:hover, .topbar-account-btn.open { background: var(--bg); }
.topbar-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #1A3A6E);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
}
.topbar-avatar img { width: 100%; height: 100%; object-fit: cover; }
.topbar-account-chevron {
    font-size: 9px;
    color: var(--text-muted);
    transition: transform .2s;
}
.topbar-account-btn.open .topbar-account-chevron { transform: rotate(180deg); }
.topbar-account-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 224px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    z-index: 900;
    overflow: hidden;
    padding: 6px;
}
.topbar-account-dropdown.open { display: block; }
.topbar-account-head {
    padding: 8px 10px 10px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 6px;
}
.topbar-account-name { font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-account-email { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.topbar-account-link {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background .12s, color .12s;
}
.topbar-account-link i { width: 16px; text-align: center; font-size: 14px; color: var(--text-muted); flex-shrink: 0; }
.topbar-account-link:hover { background: var(--bg); }
.topbar-account-link.active { color: var(--primary); background: var(--primary-light); }
.topbar-account-link.active i { color: var(--primary); }
.topbar-account-signout { color: var(--danger); }
.topbar-account-signout i { color: var(--danger); }
.topbar-account-signout:hover { background: rgba(239,68,68,.08); }

@media (max-width: 768px) { .app-topbar { display: none; } }

/* Mobile Top Bar */
.app-mobile-bar {
    display: none;
    height: var(--topnav-h);
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    position: sticky;
    top: 0;
    z-index: 100;
    flex-shrink: 0;
}
.sb-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    border: 1.5px solid var(--border);
    border-radius: 7px;
    cursor: pointer;
    color: var(--text);
    transition: background .12s, border-color .12s;
    flex-shrink: 0;
}
.sb-hamburger:hover { background: var(--bg); border-color: #9CA3AF; }
.sb-mobile-brand {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
    letter-spacing: -0.02em;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Right-aligned action cluster in the mobile top bar (search, notifications, account).
   Quick-add used to live here too - it's the .rmc-fab in the bottom-right corner now. */
.mobile-bar-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
/* Mobile account dropdown: anchored below the sticky mobile bar */
.topbar-account-dropdown-mobile {
    position: fixed;
    top: calc(var(--topnav-h) + 6px);
    right: 10px;
    left: auto;
    z-index: 130;
    min-width: 220px;
}

/* Sidebar Overlay */
.sb-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 140;
}
.sb-overlay.open { display: block; }

/* Mobile Sidebar Flyout */
@media (max-width: 768px) {
    /* simple-page padding override must come after the base rule (cascade order) */
    .simple-page { padding-left: 0; }

    /* Dashboard/content wrap tighter padding on mobile */
    .home-wrap { padding: 20px 16px 40px; }

    .app-mobile-bar { display: flex; }
    .app-sidebar {
        transform: translateX(-100%);
        transition: transform .25s ease;
    }
    .app-sidebar.open {
        transform: translateX(0);
        box-shadow: var(--shadow-lg);
    }
}

/* Dark mode sidebar */
html.dark .app-mobile-bar {
    background: rgba(24,24,31,.92);
    border-bottom-color: var(--border);
}

/* Documentation */
.docs-layout { display: flex; height: 100%; overflow: hidden; flex: 1; min-width: 0; }

.docs-nav {
    width: 320px;
    flex-shrink: 0;
    border-right: 1.5px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--surface);
    transition: width .22s ease, min-width .22s ease;
}

/* Inner sidebar collapse */
.docs-nav-footer {
    padding: 6px 8px;
    border-top: 1.5px solid var(--border);
    flex-shrink: 0;
}
.docs-nav-collapse-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    padding: 7px 8px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    transition: background .15s, color .15s;
    font-family: inherit;
    white-space: nowrap;
    overflow: hidden;
}
.docs-nav-collapse-btn:hover { background: var(--bg); color: var(--text); }
.docs-nav-collapse-icon { font-size: 12px; flex-shrink: 0; transition: transform .22s ease; }

@media (min-width: 769px) {
    .docs-layout.nav-collapsed .docs-nav { width: 40px; min-width: 40px; }
    .docs-layout.nav-collapsed .docs-nav > *:not(.docs-nav-footer) { display: none; }
    .docs-layout.nav-collapsed .docs-nav-footer { border-top: none; padding: 8px 0; }
    .docs-layout.nav-collapsed .docs-nav-collapse-btn { justify-content: center; padding: 7px 0; }
    .docs-layout.nav-collapsed .docs-nav-collapse-label { display: none; }
    .docs-layout.nav-collapsed .docs-nav-collapse-icon { transform: rotate(180deg); }
}
.docs-search-wrap { padding: 10px; border-bottom: 1.5px solid var(--border); }
.docs-tree { flex: 1; overflow-y: auto; padding: 6px; }

.docs-cat-group { margin-bottom: 4px; }
.docs-cat-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 8px 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
}
.docs-cat-header svg { flex-shrink: 0; }
.docs-cat-items { display: flex; flex-direction: column; gap: 1px; padding-left: 4px; }

.docs-nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 7px;
    font-size: 13px;
    color: var(--text);
    text-decoration: none;
    transition: background .12s;
    white-space: nowrap;
    overflow: hidden;
    background: none;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    font-family: inherit;
    text-overflow: ellipsis;
}
.docs-nav-link:hover  { background: var(--bg); }
.docs-nav-link.active { background: var(--primary-light); color: var(--primary); font-weight: 600; }
.docs-nav-link.hidden { display: none; }

/* Workflow client rows: name link + hover kebab menu */
.wf-client-row { position: relative; }
.wf-client-row.hidden { display: none; }
.wf-client-row .wf-client-link { padding-right: 30px; }

.wf-client-kebab {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 5px;
    background: none;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s, background .12s, color .12s;
}
.wf-client-row:hover .wf-client-kebab,
.wf-client-kebab:focus-visible,
.wf-client-kebab.open { opacity: 1; }
.wf-client-kebab:hover { background: var(--border); color: var(--text); }
@media (hover: none) { .wf-client-kebab { opacity: 1; } }

.wf-client-menu {
    position: fixed;
    z-index: 9500;
    min-width: 190px;
    padding: 5px;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: 9px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .16);
}
.wf-client-menu-name {
    padding: 6px 10px 7px;
    margin-bottom: 3px;
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}
.wf-client-menu button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 6px;
    background: none;
    font-family: inherit;
    font-size: 13px;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}
.wf-client-menu button:hover { background: var(--bg-alt); }

.docs-nav-section { margin-bottom: 8px; }
.docs-nav-section + .docs-nav-section { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 4px; }
.docs-nav-section-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
    padding: 10px 10px 4px;
}

.docs-panel {
    flex: 1;
    overflow-y: auto;
    display: flex;
    background: var(--bg);
    padding-bottom: 60px;
}

.docs-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: var(--text-muted);
    font-size: 14px;
    padding: 60px 20px;
}

.docs-content {
    flex: 1;
    min-width: 0;
    max-width: 760px;
    padding: 36px 48px 120px;
}
.docs-content-wide {
    max-width: none;
}

.docs-nav-subnav {
    display: flex;
    flex-direction: column;
    margin: 2px 0 4px 10px;
    padding-left: 12px;
    border-left: 2px solid var(--border);
}
.docs-nav-sublink {
    font-size: 12px;
    color: var(--text-muted);
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 6px;
    line-height: 1.4;
    transition: color .12s, background .12s;
}
.docs-nav-sublink:hover {
    color: var(--text);
    background: var(--bg);
}
.docs-nav-sublink.active {
    color: var(--primary);
    font-weight: 600;
}

.doc-title-readonly {
    font-size: 28px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 8px;
    line-height: 1.3;
}

.doc-meta-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.doc-body {
    font-size: 15px;
    line-height: 1.75;
    color: var(--text);
    padding-bottom: 80px;
}
.doc-body h2 { font-size: 20px; font-weight: 700; margin: 32px 0 12px; scroll-margin-top: 20px; }
.doc-body h3 { font-size: 16px; font-weight: 600; margin: 24px 0 8px; scroll-margin-top: 20px; }
.doc-body p  { margin: 0 0 14px; }
.doc-body ul,
.doc-body ol { padding-left: 24px; margin: 0 0 14px; }
.doc-body li { margin-bottom: 4px; }
.doc-body a  { color: var(--primary); text-decoration: underline; }
.doc-body strong { font-weight: 600; }
.doc-body em { font-style: italic; }
.doc-body code {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 13px;
    font-family: 'Courier New', monospace;
}
.doc-body pre {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
    overflow-x: auto;
    margin: 0 0 16px;
}
.doc-body pre code { background: none; border: none; padding: 0; }
.doc-body blockquote {
    border-left: 3px solid var(--primary);
    padding-left: 16px;
    color: var(--text-muted);
    margin: 0 0 14px;
    font-style: italic;
}

.doc-feedback {
    border-top: 1.5px solid var(--border);
    margin-top: 48px;
    padding-top: 24px;
}
.doc-feedback-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.doc-feedback-label {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
}
.doc-feedback-votes {
    display: flex;
    gap: 6px;
}
.doc-vote-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1.5px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.doc-vote-btn:hover           { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.doc-vote-btn.voted-up        { border-color: #16a34a; color: #16a34a; background: #f0fdf4; }
.doc-vote-btn.voted-down      { border-color: #dc2626; color: #dc2626; background: #fef2f2; }
.doc-feedback-thanks {
    font-size: 13px;
    color: var(--text-muted);
    font-style: italic;
}
.doc-suggest-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: color .15s;
    font-family: inherit;
}
.doc-suggest-toggle:hover { color: var(--primary); }
.doc-suggest-form {
    margin-top: 14px;
    padding: 20px;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    background: var(--bg);
}

/* Docs mobile back link - hidden on desktop */
.docs-mobile-back {
    display: none;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    margin-bottom: 20px;
    padding: 8px 0;
}
.docs-mobile-back:hover { opacity: .75; }

/* Workflows */
.wf-nav-back {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 1.5px solid var(--border);
    flex-shrink: 0;
    transition: color .12s;
}
.wf-nav-back:hover { color: var(--primary); }

.wf-progress-wrap { margin-bottom: 24px; }
.wf-progress-track {
    height: 6px;
    background: var(--border);
    border-radius: 99px;
    overflow: hidden;
}
.wf-progress-bar {
    height: 100%;
    background: var(--primary);
    border-radius: 99px;
    transition: width .3s ease;
}

/* Onboarding "Client Info" completion blocks (client-launch workflow only) */
.wf-oc {
    margin-bottom: 24px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px 20px;
}
.wf-oc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.wf-oc-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
}
.wf-oc-overall { font-size: 13px; font-weight: 700; color: var(--primary); }
.wf-oc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px;
}
.wf-oc-card {
    display: block;
    text-decoration: none;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: 11px;
    padding: 12px 13px 11px;
    transition: border-color .15s, transform .15s;
}
.wf-oc-card:hover { border-color: var(--primary); transform: translateY(-1px); }
.wf-oc-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.wf-oc-ic {
    width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--primary-light); color: var(--primary); font-size: 12px;
}
.wf-oc-card.done .wf-oc-ic { background: #D1FAE5; color: #059669; }
.wf-oc-name { font-size: 12.5px; font-weight: 700; color: var(--text); line-height: 1.25; }
.wf-oc-count { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.wf-oc-track { height: 6px; border-radius: 5px; background: var(--border); overflow: hidden; }
.wf-oc-bar { height: 100%; border-radius: 5px; background: var(--primary); transition: width .3s ease; }
.wf-oc-card.done .wf-oc-bar { background: #10b981; }
.wf-oc-foot { display: flex; align-items: center; justify-content: flex-end; margin-top: 8px; }
.wf-oc-pct { font-size: 11.5px; font-weight: 700; color: var(--text-muted); }
.wf-oc-card.done .wf-oc-pct { color: #059669; }
.wf-oc-missing {
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px dashed var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.wf-oc-missing-label {
    width: 100%;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    margin-bottom: 2px;
}
.wf-oc-chip {
    font-size: 10.5px;
    font-weight: 600;
    color: #b45309;
    background: #FEF3C7;
    border: 1px solid #FDE68A;
    border-radius: 6px;
    padding: 2px 7px;
    line-height: 1.5;
}

/* Auto-completed workflow items (checked automatically from the client's intake data) */
.wf-auto-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 20px;
    background: #ede9fe;
    color: #6d28d9;
    border: 1px solid #ddd6fe;
    vertical-align: middle;
    margin-left: 4px;
    white-space: nowrap;
}
.wf-item--auto .wf-circle-btn { cursor: default; }

/* Deep-link focus highlight for a discovery field (edit-client.php ?focus=) */
.ec-focus-flash { animation: ecFocusFlash 2.2s ease; border-radius: 6px; }
@keyframes ecFocusFlash {
    0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
    12%      { box-shadow: 0 0 0 3px var(--primary); }
    65%      { box-shadow: 0 0 0 3px var(--primary-light); }
}

.wf-checklist { list-style: none; margin: 0; padding: 0 0 48px; display: flex; flex-direction: column; gap: 8px; }
.wf-checklist > li:last-child { margin-bottom: 60px; }

.wf-item-row { display: flex; align-items: center; gap: 10px; }

.wf-item {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    transition: border-color .15s, background .15s;
}
.wf-item.checked { border-color: #10b981; background: #f0fdf4; }
.dark .wf-item.checked { background: rgba(16,185,129,.08); border-color: #059669; }
.wf-item.unneeded { border-color: #ef4444; background: #fef2f2; }
.dark .wf-item.unneeded { background: rgba(239,68,68,.08); border-color: #dc2626; }

/* Items flagged 'important' in workflows-data.php - a red left bar so the step is
   findable while scanning a long phase. The bar drops once the row is resolved
   (checked or not needed) so a finished list still reads as finished. */
/* padding-left matches .wf-item--status-change so the inset bar does not eat into
   the row's own left padding. */
.wf-item--important { border-color: #fca5a5; background: #fffbfb; box-shadow: inset 4px 0 0 #ef4444; padding-left: 20px; }
.dark .wf-item--important { border-color: rgba(239,68,68,.45); background: rgba(239,68,68,.05); box-shadow: inset 4px 0 0 #dc2626; }
.wf-item--important.checked, .wf-item--important.unneeded { box-shadow: none; padding-left: 16px; }

/* The warning marker itself - solid red chip left of the label, white glyph, so it
   carries across a screen of grey rows. Sized to the pair of circles beside it. */
.wf-important-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    font-size: 18px;
    color: #fff;
    background: #dc2626;
    box-shadow: 0 1px 3px rgba(220,38,38,.45);
}
.dark .wf-important-icon { background: #ef4444; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
/* Once the step is resolved the marker stops shouting but stays visible, matching
   how the note and badge fade rather than disappear. */
.wf-item.checked .wf-important-icon,
.wf-item.unneeded .wf-important-icon { opacity: .3; box-shadow: none; }
/* The row has no mobile breakpoint of its own, so the chip gives back a few pixels
   on phones rather than squeezing the label. */
@media (max-width: 520px) {
    .wf-important-icon { width: 28px; height: 28px; font-size: 15px; border-radius: 8px; }
}

.wf-circles { display: flex; gap: 8px; flex-shrink: 0; align-items: flex-start; }

.wf-circle-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.wf-circle-btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: var(--bg);
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, border-color .15s, transform .1s;
}
.wf-circle-btn:hover { transform: scale(1.12); }
.wf-circle-btn--check:hover { border-color: #10b981; }
.wf-circle-btn--x:hover { border-color: #ef4444; }

.wf-item.checked .wf-circle-btn--check { background: #10b981; border-color: #10b981; }
.dark .wf-item.checked .wf-circle-btn--check { background: #059669; border-color: #059669; }
.wf-item.unneeded .wf-circle-btn--x { background: #ef4444; border-color: #ef4444; }
.dark .wf-item.unneeded .wf-circle-btn--x { background: #dc2626; border-color: #dc2626; }

.wf-circle-icon { font-size: 9px; line-height: 1; }
.wf-circle-icon--check { color: #10b981; }
.wf-circle-icon--x { color: #ef4444; }
.dark .wf-circle-icon--check { color: #34d399; }
.dark .wf-circle-icon--x { color: #f87171; }

.wf-item-label {
    display: block;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--text);
    transition: color .15s;
}
.wf-item.checked .wf-item-label { text-decoration: line-through; color: var(--text-muted); }
.wf-item.unneeded .wf-item-label { text-decoration: line-through; color: var(--text-muted); }

.wf-item-meta {
    font-size: 11.5px;
    color: #10b981;
    font-weight: 500;
    margin-top: 2px;
}
.dark .wf-item-meta { color: #34d399; }
.wf-item.unneeded .wf-item-meta { color: #ef4444; }
.dark .wf-item.unneeded .wf-item-meta { color: #f87171; }

.wf-item-note {
    display: inline-flex;
    align-items: flex-start;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 5px;
    padding: 3px 8px;
    margin-top: 5px;
    line-height: 1.4;
}
.dark .wf-item-note { color: #fde68a; background: rgba(251,191,36,.1); border-color: rgba(251,191,36,.3); }
.wf-item.checked .wf-item-note,
.wf-item.unneeded .wf-item-note { opacity: .45; }

/* An item's "sub_list" - a short list of things the tech needs on hand before
   they can do the step. Rendered under the label, above any guide link. */
.wf-item-sublist {
    margin-top: 6px;
    padding: 8px 12px 8px 14px;
    border-left: 2px solid var(--border);
    background: var(--surface-2, #f8f9fb);
    border-radius: 0 6px 6px 0;
}
.wf-item-sublist-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.wf-item-sublist ul {
    margin: 0;
    padding-left: 16px;
    list-style: disc;
}
.wf-item-sublist li {
    font-size: 12.5px;
    color: var(--text-muted);
    line-height: 1.6;
}
/* A row carrying a resolved client value: label, then a click-to-copy chip. */
.wf-item-sublist li.wf-sublist-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    padding: 1px 0;
}
.wf-sublist-label {
    font-weight: 600;
    color: var(--text);
    flex-shrink: 0;
}
.wf-copy-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 2px 8px;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    transition: border-color .15s, background .15s, color .15s;
}
.wf-copy-chip:hover { border-color: var(--primary); color: var(--primary); }
.wf-copy-chip i { font-size: 10px; opacity: .55; flex-shrink: 0; }
.wf-copy-chip:hover i { opacity: 1; }
.wf-copy-chip-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-copy-chip.copied,
.wf-copy-chip.copied:hover { border-color: #34d399; color: #059669; background: rgba(52,211,153,.1); }
.wf-copy-chip--empty {
    color: var(--text-muted);
    font-style: italic;
    border-style: dashed;
}
.dark .wf-item-sublist { background: rgba(255,255,255,.03); }
.dark .wf-copy-chip { background: rgba(255,255,255,.04); }
.dark .wf-copy-chip.copied { color: #34d399; }
.wf-item.checked .wf-item-sublist,
.wf-item.unneeded .wf-item-sublist { opacity: .45; }

.wf-status-change-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 100px;
    border: 1px solid;
    margin-left: 6px;
    vertical-align: middle;
    transition: opacity .2s;
}
.wf-item.checked .wf-status-change-badge,
.wf-item.unneeded .wf-status-change-badge { opacity: .4; }

/* An item that moves a status previews which one with a left stripe in that status's
   colour. It must not FILL the row: both "Complete" (project) and "Active" (client)
   are #F0FDF4, the exact background .checked uses, so a tinted unchecked row was
   indistinguishable from a finished one - only the border shade differed. The fill now
   means done and nothing else. Which status it sets is spelled out in words by
   .wf-status-change-hint below, so nothing is lost by dropping the tint.
   inset box-shadow rather than border-left: no layout shift, and it follows the radius. */
.wf-item--status-change { box-shadow: inset 4px 0 0 var(--sc-color); padding-left: 20px; }
/* Once resolved the row is an ordinary checked/unneeded row - the stripe would only
   fight the fill, and the hint it belonged to is hidden by then anyway. */
.wf-item--status-change.checked,
.wf-item--status-change.unneeded { box-shadow: none; padding-left: 16px; }
.wf-item--status-change.checked { background: #f0fdf4; border-color: #10b981; }
.wf-item--status-change.unneeded { background: #fef2f2; border-color: #ef4444; }
.wf-item--status-change .wf-status-change-hint {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    margin-top: 4px;
    color: var(--sc-color);
    opacity: .85;
}
.wf-item--status-change.checked .wf-status-change-hint,
.wf-item--status-change.unneeded .wf-status-change-hint { display: none; }

.wf-doc-btn {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
    background: var(--primary-light);
    border: none;
    border-radius: 6px;
    padding: 5px 10px;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    flex-shrink: 0;
    transition: opacity .15s;
}
.wf-doc-btn:hover { opacity: .75; }

.wf-guide-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    margin-top: 3px;
    opacity: .85;
    transition: opacity .15s;
}
.wf-guide-link i { font-size: 9px; }
.wf-guide-link:hover { opacity: 1; text-decoration: underline; }
.wf-item.checked .wf-guide-link,
.wf-item.unneeded .wf-guide-link { opacity: .45; }

/* ── Item action row (guide + assign task) ─────────────────────────────────── */
.wf-item-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
}
.wf-guide-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 6px;
    border: 1.5px solid var(--primary);
    background: none;
    font-size: 11px;
    font-weight: 600;
    font-family: inherit;
    color: var(--primary);
    text-decoration: none;
    white-space: nowrap;
    opacity: .85;
    transition: opacity .15s, background .15s;
}
.wf-guide-btn i { font-size: 10px; }
.wf-guide-btn:hover { opacity: 1; background: var(--bg-alt); text-decoration: none; }
.wf-item.checked .wf-guide-btn,
.wf-item.unneeded .wf-guide-btn { opacity: .45; }
/* Same footprint as a guide button, but plainly not clickable - used when the
   thing the button would open (e.g. the Lookalike Audience CSV) is not on file. */
.wf-guide-btn--empty {
    color: var(--text-muted);
    border-color: var(--border);
    border-style: dashed;
    font-style: italic;
    cursor: default;
}
.wf-guide-btn--empty:hover { opacity: .85; background: none; }
/* Solid bright-blue fill so a file the step needs (the client's customer list
   CSV) stands out from the outlined guide buttons next to it. Same blue in both
   themes - --primary is navy in light mode and would not read as a call to action. */
.wf-guide-btn--download {
    background: #2563EB;
    border-color: #2563EB;
    color: #FFFFFF;
    opacity: 1;
    box-shadow: 0 1px 3px rgba(37,99,235,.35);
}
.wf-guide-btn--download:hover {
    background: #1D4ED8;
    border-color: #1D4ED8;
    color: #FFFFFF;
    opacity: 1;
}

/* ── Notes on a checklist item ─────────────────────────────────────────────── */
.wf-notes { margin-top: 4px; }
.wf-notes-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    opacity: .8;
    transition: color .15s, opacity .15s;
}
.wf-notes-toggle i { font-size: 10px; }
.wf-notes-toggle:hover { color: var(--primary); opacity: 1; }
.wf-notes-toggle.has { color: var(--primary); opacity: 1; }
.wf-item.checked .wf-notes-toggle:not(.has),
.wf-item.unneeded .wf-notes-toggle:not(.has) { opacity: .4; }

.wf-notes-panel {
    margin-top: 7px;
    padding: 9px 10px;
    border: 1.5px solid var(--border);
    border-radius: 9px;
    background: var(--bg-alt);
    max-width: 640px;
}
.wf-notes-list { display: flex; flex-direction: column; gap: 7px; margin-bottom: 8px; }

.wf-note {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 7px 10px;
}
.wf-note-head { display: flex; align-items: center; gap: 8px; }
.wf-note-head .who  { font-size: 12px; font-weight: 700; color: var(--text); }
.wf-note-head .when { font-size: 10.5px; color: var(--text-muted); }
.wf-note-edited { font-size: 10.5px; font-style: italic; color: var(--text-muted); }
.wf-note-act {
    background: none;
    border: none;
    padding: 2px 4px;
    font-size: 10.5px;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s, color .15s;
}
.wf-note-head .wf-note-act:first-of-type { margin-left: auto; }
.wf-note:hover .wf-note-act,
.wf-note-act:focus-visible { opacity: .7; }
.wf-note-act:hover { opacity: 1; color: var(--primary); }
.wf-note-del:hover { color: #dc2626; }

.wf-note-edit { position: relative; margin-top: 6px; }
.wf-note-edit .wf-notes-input { width: 100%; }
.wf-note-edit-actions { display: flex; gap: 6px; margin-top: 6px; }
.wf-note-body {
    margin-top: 3px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text);
    word-break: break-word;
}
.wf-mention {
    font-weight: 700;
    color: var(--primary);
    background: var(--primary-light);
    border-radius: 4px;
    padding: 0 3px;
}

.wf-notes-form { position: relative; display: flex; align-items: flex-start; gap: 7px; }
.wf-notes-input {
    flex: 1;
    min-width: 0;
    resize: vertical;
    font-family: inherit;
    font-size: 12.5px;
    line-height: 1.45;
    padding: 7px 9px;
    border: 1.5px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
    color: var(--text);
}
.wf-notes-input:focus { outline: none; border-color: var(--primary); }
.wf-notes-send { flex-shrink: 0; white-space: nowrap; }

.wf-mention-menu {
    position: absolute;
    left: 0;
    bottom: calc(100% + 5px);
    z-index: 300;
    min-width: 190px;
    max-height: 210px;
    overflow-y: auto;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0,0,0,.14);
}
.wf-mention-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 11px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
}
.wf-mention-item.active, .wf-mention-item:hover { background: var(--bg-alt); }
.wf-mention-ini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 10.5px;
    font-weight: 800;
    flex-shrink: 0;
}

.wf-item--locked .wf-circle-btn--check { cursor: default; opacity: .55; }
.wf-item--locked .wf-circle-btn--check:hover { transform: none; border-color: var(--border); }
.wf-item--locked:not(.checked) .wf-circle-icon--check { color: var(--text-muted); }
.wf-item--locked.checked .wf-circle-btn--check { opacity: 1; cursor: default; }
.wf-item--locked.checked .wf-circle-btn--check:hover { transform: none; }

.wf-trash-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1.5px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    padding: 4px 9px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    transition: color .15s, border-color .15s, background .15s;
}
.wf-trash-btn:hover { color: #ef4444; border-color: #ef4444; background: #fef2f2; }
.dark .wf-trash-btn:hover { background: rgba(239,68,68,.08); border-color: #dc2626; color: #f87171; }
.wf-trash-btn.active { color: #ef4444; border-color: #ef4444; background: #fef2f2; }
.dark .wf-trash-btn.active { background: rgba(239,68,68,.08); border-color: #dc2626; color: #f87171; }

.wf-phase-header {
    list-style: none;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
    padding: 8px 0 2px;
    margin-top: 8px;
    border-top: 1.5px solid var(--border);
}
.wf-phase-header:first-child { margin-top: 0; border-top: none; padding-top: 0; }
.wf-phase-note { display: block; font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-muted); margin-top: 2px; opacity: .8; }

/* Milestones */
.wf-milestone-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 20px; background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; vertical-align: middle; margin-left: 5px; white-space: nowrap; }
/* Red so it reads as "do not skip", distinct from the blue Milestone pill and the
   yellow "Not in services" one that can sit on the same row. */
.wf-important-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 20px; background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; vertical-align: middle; margin-left: 5px; white-space: nowrap; }
.dark .wf-important-badge { background: rgba(239,68,68,.14); color: #fca5a5; border-color: rgba(239,68,68,.4); }
.wf-item.checked .wf-important-badge, .wf-item.unneeded .wf-important-badge { opacity: .45; }

.wf-milestone-strip { margin-bottom: 20px; padding: 12px 14px; border-radius: 10px; border: 1.5px solid var(--border); background: var(--bg-alt); }
.wf-milestone-strip-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 8px; }
.wf-milestone-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wf-milestone-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 20px; border: 1.5px solid var(--border); background: var(--bg); color: var(--text-muted); text-decoration: none; transition: border-color .15s, color .15s; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.wf-milestone-chip:hover { border-color: var(--primary); color: var(--primary); }
.wf-milestone-chip--done { border-color: #a7f3d0; background: #f0fdf4; color: #059669; }
.wf-milestone-chip--done:hover { border-color: #059669; color: #059669; }
.wf-milestone-chip--unneeded { opacity: .45; text-decoration: line-through; }

/* Milestones hero - the main content of the client workflows dashboard. One card
   per bucket, each a vertical timeline: green filled dot = reached, hollow ring =
   still to come (the first of those is tagged Next), grey x = not needed, and the
   amber trophy is a whole workflow's completion. */
.wf-ms-hero { margin-bottom: 8px; }
.wf-ms-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.wf-ms-head-ic { width: 36px; height: 36px; border-radius: 9px; background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.wf-ms-head-text { flex: 1; min-width: 0; }
.wf-ms-head-title { font-size: 16px; font-weight: 800; color: var(--text); line-height: 1.2; }
.wf-ms-head-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.wf-ms-head-sub strong { color: var(--text); font-weight: 700; }
.wf-ms-head-pct { font-size: 22px; font-weight: 800; color: var(--primary); letter-spacing: -.02em; flex-shrink: 0; }
.wf-ms-head-pct--done { color: #10b981; }
.wf-ms-track { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; margin-bottom: 18px; }
.wf-ms-bar { height: 100%; border-radius: 3px; background: var(--primary); transition: width .3s; }
.wf-ms-bar--done { background: #10b981; }

.wf-ms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.wf-ms-card { background: var(--surface); border: 1.5px solid var(--border); border-radius: 12px; padding: 12px 14px 8px; }
.wf-ms-card--done { border-color: #a7f3d0; }
.dark .wf-ms-card--done { border-color: rgba(16,185,129,.4); }
.wf-ms-card-head { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--border); }
.wf-ms-card-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-ms-card-count { margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--text-muted); }
.wf-ms-card-count i { font-size: 11px; }
.wf-ms-card--done .wf-ms-card-count { color: #10b981; }

.wf-ms-list { list-style: none; margin: 0; padding: 0; }
.wf-ms-row { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 0 0 12px; }
.wf-ms-row:last-child { padding-bottom: 4px; }
/* Connector between one dot and the next; green once the step above is reached. */
.wf-ms-row::before { content: ''; position: absolute; left: 9px; top: 21px; bottom: -1px; width: 2px; background: var(--border); }
.wf-ms-row:last-child::before { display: none; }
.wf-ms-row--done::before { background: #a7f3d0; }
.dark .wf-ms-row--done::before { background: rgba(16,185,129,.35); }

.wf-ms-dot { position: relative; z-index: 1; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border); background: var(--surface); display: flex; align-items: center; justify-content: center; font-size: 9px; flex-shrink: 0; margin-top: 1px; color: #fff; box-sizing: border-box; }
.wf-ms-row--done .wf-ms-dot { background: #10b981; border-color: #10b981; }
.wf-ms-row--unneeded .wf-ms-dot { background: var(--border); border-color: var(--border); color: var(--text-muted); }
.wf-ms-row--next .wf-ms-dot { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.wf-ms-row--next .wf-ms-dot::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.wf-ms-row--wf .wf-ms-dot { color: #f59e0b; border-color: #fcd34d; }
.wf-ms-row--wf.wf-ms-row--done .wf-ms-dot { background: #f59e0b; border-color: #f59e0b; color: #fff; }
.wf-ms-row--wf.wf-ms-row--next .wf-ms-dot { border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.18); }
.wf-ms-row--wf.wf-ms-row--next .wf-ms-dot::after { display: none; }

.wf-ms-body { flex: 1; min-width: 0; display: block; text-decoration: none; color: inherit; border-radius: 6px; padding: 2px 6px 3px; margin: -2px 0 0 -6px; transition: background .15s; }
.wf-ms-body:hover { background: var(--bg-alt); }
.wf-ms-label-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.wf-ms-label { font-size: 13px; font-weight: 600; color: var(--text-muted); line-height: 1.35; min-width: 0; }
.wf-ms-row--done .wf-ms-label { color: var(--text); }
.wf-ms-row--next .wf-ms-label { color: var(--text); font-weight: 700; }
.wf-ms-row--unneeded .wf-ms-label { text-decoration: line-through; opacity: .55; }
.wf-ms-row--wf .wf-ms-label { font-style: italic; }
.wf-ms-body:hover .wf-ms-label { color: var(--primary); }
.wf-ms-meta { display: block; font-size: 11px; color: var(--text-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wf-ms-row--pending:not(.wf-ms-row--next) .wf-ms-meta { opacity: .75; }
.wf-ms-next-tag { flex-shrink: 0; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 1px 6px; border-radius: 20px; background: var(--primary); color: #fff; line-height: 1.5; }

/* Section heading that separates the milestones from the workflow cards below. */
.wf-dash-section-head { display: flex; align-items: center; gap: 9px; margin: 30px 0 14px; }
.wf-dash-section-head i { font-size: 13px; color: var(--primary); }
.wf-dash-section-head span { font-size: 13px; font-weight: 800; color: var(--text); }
.wf-dash-section-rule { flex: 1; height: 1px; background: var(--border); }

/* A step lit up on arrival via #item-<slug> (milestone rows link this way). */
.wf-item--flash { border-radius: 8px; animation: wfItemFlash 2.6s ease-out; }
@keyframes wfItemFlash {
    0%, 35% { box-shadow: 0 0 0 3px var(--primary-light), 0 0 0 5px var(--primary); }
    100%    { box-shadow: 0 0 0 0 transparent; }
}

.wf-group-header {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
    padding: 10px 14px 4px;
    margin-top: 2px;
    border-top: 1.5px solid var(--border);
}
.wf-group-header:first-child { margin-top: 0; border-top: none; }

/* Phase headings between workflows (non-collapsible) */
.wf-phase-block { display: flex; flex-direction: column; }
.wf-phase-heading {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    margin-bottom: 4px;
    background: var(--border);
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
}
.wf-phase-heading-label { flex-shrink: 0; }
.wf-status-badge {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 9px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    padding: 2px 7px;
    border-radius: 20px;
    background: var(--primary);
    color: #fff;
    white-space: nowrap;
    /* Rendered as a link to the Clients / Projects board, with the status colors
       set inline; border stays transparent unless one is supplied. */
    border: 1px solid transparent;
    text-decoration: none;
}
a.wf-status-badge:hover { filter: brightness(.94); }
.wf-phase-block + .wf-phase-block .wf-phase-heading { margin-top: 6px; }

/* Non-active service workflows: hidden until revealed via the toggle.
   !important so it beats the inline display:flex on .wf-group-header rows. */
.docs-tree:not(.wf-show-nonactive) .wf-nonactive { display: none !important; }
.wf-nonactive-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 8px 6px;
    padding: 5px 10px;
    width: calc(100% - 16px);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
    transition: color .15s, border-color .15s;
}
.wf-nonactive-toggle:hover { color: var(--primary); border-color: var(--primary); }

@media (max-width: 768px) {
    /* Fix the collapsed layout - parent is height:auto on mobile so
       height:100% collapses to 0. Let the content flow naturally. */
    .docs-layout { height: auto; overflow: visible; flex-direction: column; }
    .docs-panel  { overflow-y: visible; flex: none; }

    /* No doc open: nav becomes a full-width list replacing the sidebar */
    .docs-nav {
        display: flex;
        width: 100%;
        border-right: none;
        border-bottom: 1.5px solid var(--border);
        max-height: none;
    }
    .docs-tree { overflow-y: visible; }

    /* Doc open: hide nav (user can tap "All Docs" to go back) */
    .docs-layout.has-doc .docs-nav { display: none; }

    /* Hide the "select a document" empty state - on mobile the nav IS the index */
    .docs-empty { display: none; }

    /* Show the back link when a doc is open */
    .docs-layout.has-doc .docs-mobile-back { display: flex; }

    .docs-content { padding: 20px 16px 60px; }

    /* Doc page content tweaks */
    .doc-title-readonly { font-size: 22px; }
    .doc-body { font-size: 14px; overflow-x: hidden; }
    .doc-body h2 { font-size: 18px; }

    /* Ensure nothing inside doc body overflows horizontally */
    .doc-body * { max-width: 100%; box-sizing: border-box; }
    .doc-body pre { overflow-x: auto; }
    .doc-body table { display: block; overflow-x: auto; }
}

/* Credentials */
.cred-page {
    flex: 1;
    padding: 36px 40px 80px;
    min-width: 0;
    overflow-y: auto;
}
.cred-header {
    margin-bottom: 16px;
}
.cred-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 4px;
}
.cred-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

/* Table */
.cred-table-wrap {
    border: 1.5px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    overflow-x: auto;
}
.cred-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.cred-table thead th {
    background: var(--surface);
    padding: 10px 14px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    border-bottom: 1.5px solid var(--border);
    white-space: nowrap;
}
.cred-th-sort a {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.cred-th-sort a:hover { color: var(--text); }
.cred-th-sort-active a { color: var(--primary); }
.cred-table thead th:first-child,
.cred-table tbody td:first-child { width: 250px; min-width: 250px; }
.cred-group-row td {
    padding: 8px 14px 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    background: #ECEEF2;
    border-top: 1.5px solid #D5D8DF;
    border-bottom: 1px solid #D5D8DF;
}
.cred-group-row:first-child td { border-top: none; }
html.dark .cred-group-row td { background: #1E1E2A; border-color: #2D2D3A; }
.cred-row td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    color: var(--text);
}
.cred-row:last-child td { border-bottom: none; }
.cred-row:hover td { background: var(--bg); }

.cred-website { min-width: 160px; }
.cred-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}
.cred-link:hover { text-decoration: underline; }

.cred-username {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    min-width: 140px;
}
.cred-copy-btn {
    background: none;
    border: none;
    padding: 3px;
    cursor: pointer;
    color: var(--text-muted);
    border-radius: 4px;
    opacity: 0;
    transition: opacity .12s, color .12s;
    flex-shrink: 0;
}
.cred-row:hover .cred-copy-btn { opacity: 1; }
.cred-copy-btn:hover { color: var(--primary); }

.cred-password-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    min-width: 160px;
}
.cred-mask {
    font-family: monospace;
    font-size: 14px;
    color: var(--text-muted);
    letter-spacing: 2px;
    user-select: none;
    min-width: 80px;
    display: inline-block;
}
.cred-mask.revealed {
    font-size: 13px;
    letter-spacing: normal;
    color: var(--text);
    user-select: text;
}
.cred-icon-btn {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--text-muted);
    border-radius: 4px;
    opacity: 0;
    transition: opacity .12s, color .12s;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.cred-row:hover .cred-icon-btn { opacity: 1; }
.cred-icon-btn:hover { color: var(--primary); }

.cred-notes {
    color: var(--text-muted);
    font-size: 12.5px;
    max-width: 260px;
}
.cred-empty-notes { color: var(--border); }

.cred-actions { text-align: right; width: 64px; white-space: nowrap; }
.cred-delete-btn {
    background: none;
    border: none;
    padding: 5px;
    cursor: pointer;
    color: var(--text-muted);
    border-radius: 5px;
    opacity: 0;
    transition: opacity .12s, color .12s;
}
.cred-row:hover .cred-delete-btn { opacity: 1; }
.cred-delete-btn:hover { color: #ef4444; }
.mn-note-card .cred-delete-btn { opacity: 1; }

.cred-edit-btn {
    background: none;
    border: none;
    padding: 5px;
    cursor: pointer;
    color: var(--text-muted);
    border-radius: 5px;
    opacity: 0;
    transition: opacity .12s, color .12s;
}
.cred-row:hover .cred-edit-btn { opacity: 1; }
.cred-edit-btn:hover { color: var(--primary); }
.mn-note-card .cred-edit-btn { opacity: 1; }

/* Client assignment dropdown inside table cell */
.cred-client-select {
    font-size: 12px;
    padding: 3px 24px 3px 6px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    width: 100%;
    max-width: 230px;
    transition: border-color .12s, background .12s;
    text-overflow: ellipsis;
}
.cred-client-select:hover,
.cred-client-select:focus { border-color: var(--border); background: var(--bg); color: var(--text); outline: none; }

/* Inline edit row */
.cred-edit-row td { padding: 0; border-bottom: 1.5px solid var(--primary); background: var(--bg); }
.cred-edit-panel {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cred-edit-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
}
.cred-edit-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 140px;
}
.cred-edit-field-wide { flex: 2; min-width: 200px; }
.cred-edit-field label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.cred-edit-field .field-input { height: 34px; font-size: 13px; }
.cred-edit-field textarea.field-input { height: auto; min-height: 160px; resize: vertical; padding: 6px 10px; }
.cred-edit-field .cred-pw-wrap .field-input { height: 34px; }
.cred-edit-actions { display: flex; gap: 8px; margin-top: 12px; }

/* Empty state */
.cred-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 80px 20px;
    color: var(--text-muted);
    font-size: 14px;
    text-align: center;
}

/* Search + filter bar */
.cred-filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.cred-search-wrap {
    position: relative;
    flex: 1 1 200px;
    min-width: 0;
}
.cred-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}
.cred-search-wrap .field-input {
    padding-left: 32px;
    padding-right: 30px;
    width: 100%;
    height: 36px;
    background: var(--surface);
    border-color: var(--border);
}
.cred-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    padding: 2px;
    border-radius: 4px;
}
.cred-search-clear:hover { color: var(--text); }
.cred-filter-select {
    flex: 1 1 140px;
    min-width: 0;
    height: 36px;
    padding: 0 10px;
    font-size: 13px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: inherit;
    outline: none;
    cursor: pointer;
}
.cred-filter-select:focus { border-color: var(--primary); }
.cred-filter-count {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Development URLs */
.dev-form-bar {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.dev-form-bar .field-input {
    height: 36px;
    padding: 0 10px;
    font-size: 13px;
    flex: 1;
    min-width: 140px;
}
.dev-form-select { flex: 0 0 180px !important; min-width: 0 !important; }
.dev-client-cell { color: var(--text-muted); font-size: 13px; }

/* The linked project's status, read-only. Colours are inlined per row from
   project_statuses(), so this rule is shape only - that keeps the Dev URLs page, the
   board and the project header painting a status identically without a second palette
   here to drift from the first. */
.dev-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border: 1px solid;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
}
.dev-status-pill:hover { filter: brightness(0.96); }

/* A link still pointing at an archived project. */
.dev-archived-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    margin-left: 5px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    background: #F3F4F6;
    color: #6B7280;
}
html.dark .dev-archived-tag { background: #1F2937; color: #9CA3AF; }

/* Vendors */
.vend-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
}
.vend-badge-new          { background: #DBEAFE; color: #1E40AF; }
.vend-badge-needs_review { background: #FEF3C7; color: #92400E; }
.vend-badge-approved     { background: #D1FAE5; color: #065F46; }
.vend-badge-do_not_use   { background: #FEE2E2; color: #991B1B; }
html.dark .vend-badge-new          { background: #1E3A5F; color: #93C5FD; }
html.dark .vend-badge-needs_review { background: #451A03; color: #FCD34D; }
html.dark .vend-badge-approved     { background: #022C22; color: #6EE7B7; }
html.dark .vend-badge-do_not_use   { background: #450A0A; color: #FCA5A5; }

.vend-type-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
    background: var(--bg);
    color: var(--text-muted);
    border: 1px solid var(--border);
    white-space: nowrap;
}

.vend-rating-cell { white-space: nowrap; }

.vend-edit-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 16px;
    margin-bottom: 12px;
}
.vend-edit-notes { grid-column: 1 / -1; }
.vend-edit-grid .cred-edit-field label { font-size: 12px; font-weight: 500; color: var(--text-muted); margin-bottom: 4px; display: block; }
.vend-edit-grid .field-input { height: 34px; font-size: 13px; padding: 0 10px; width: 100%; }
.vend-edit-grid textarea.field-input { height: auto; padding: 6px 10px; resize: vertical; }

.vend-add-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}
.vend-add-notes { grid-column: 1 / -1; }

/* Client Ad Spend. .ads-cell-link is a month total on the client row, pointing at
   the recap it was read from; styled like the client name so both read as the
   same kind of link. */
.ads-client-cell { font-weight: 500; }
.ads-client-link, .ads-cell-link { color: inherit; text-decoration: none; }
.ads-client-link:hover, .ads-cell-link:hover { text-decoration: underline; color: var(--accent); }

/* Monthly Notes */
.mn-nav-header {
    padding: 14px 12px 12px;
    border-bottom: 1.5px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-shrink: 0;
}
.mn-nav-title { font-size: 13px; font-weight: 700; color: var(--text); }
.mn-nav-filters {
    padding: 10px;
    border-bottom: 1.5px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}
.mn-filter-select { font-size: 12px; height: 30px; padding: 0 8px; }
.mn-filter-row { display: flex; gap: 6px; }
.mn-filter-row .mn-filter-select { flex: 1; min-width: 0; }
.mn-filter-btns { display: flex; gap: 6px; align-items: center; }
.mn-filter-btn {
    flex: 1;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    transition: border-color .12s, color .12s, background .12s;
    white-space: nowrap;
}
.mn-filter-btn:hover { border-color: var(--primary); color: var(--primary); }
.mn-filter-btn.active { border-color: var(--primary); background: var(--primary-light); color: var(--primary); font-weight: 600; }
.mn-filter-btn-clear { flex: none; padding: 4px 10px; color: var(--text-muted); border-color: transparent; background: none; }
.mn-filter-btn-clear:hover { color: #ef4444; border-color: transparent; background: none; }
.mn-client-group { display: flex; flex-direction: column; }
.mn-client-btn {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px 10px;
    border-radius: 7px;
    font-size: 13px;
    color: var(--text);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    gap: 8px;
    transition: background .12s;
}
.mn-client-btn:hover { background: var(--bg); }
.mn-client-btn.active { background: var(--primary-light); color: var(--primary); font-weight: 600; }
.mn-client-chevron {
    font-size: 10px;
    color: var(--text-muted);
    flex-shrink: 0;
    width: 12px;
    transition: transform .15s;
}
.mn-client-group.open > .mn-client-btn .mn-client-chevron { transform: rotate(90deg); }
.mn-client-name-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mn-client-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn-client-last-update { font-size: 11px; color: var(--text-muted); font-weight: 400; line-height: 1.3; margin-top: 1px; }
.mn-client-count {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--border);
    border-radius: 99px;
    padding: 1px 7px;
    flex-shrink: 0;
}
.mn-client-btn.active .mn-client-count { background: var(--primary-light); color: var(--primary); }
.mn-client-months {
    display: none;
    flex-direction: column;
    margin: 2px 0 4px 20px;
    padding-left: 10px;
    border-left: 2px solid var(--border);
}
.mn-client-group.open .mn-client-months { display: flex; }
.mn-month-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 12px;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    width: 100%;
    font-family: inherit;
    transition: color .12s, background .12s;
    line-height: 1.4;
}
.mn-month-link:hover { color: var(--text); background: var(--bg); }
.mn-month-link.active { color: var(--primary); font-weight: 600; background: var(--primary-light); }
.mn-month-link-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mn-client-panel { display: none; flex: 1; flex-direction: column; min-width: 0; overflow: hidden; }
.mn-client-panel.active { display: flex; }

.mn-panel-header {
    padding: 18px 24px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
    background: var(--surface);
}
.mn-panel-title { font-size: 16px; font-weight: 700; color: var(--text); }
.mn-panel-last-update { font-size: 12px; color: var(--text-muted); }

/* Ad Spend bar on monthly-notes */
.mn-adspend-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-subtle, #F9FAFB);
    flex-shrink: 0;
    font-size: 13px;
}
html.dark .mn-adspend-bar { background: var(--bg-subtle, #1a1d23); }
.mn-adlaunch-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-page, #f8fafc);
    border-bottom: 1px solid var(--border);
    padding: 8px 20px;
    font-size: 13px;
}
html.dark .mn-adlaunch-bar { background: var(--bg-subtle, #1a1d23); }
/* The --intab modifiers are gone. They pulled these bars 16px outside their
   container with negative margins so they could sit flush inside the old note
   tab panels; once the tabs went, that bleed was just a bar hanging off the
   edge of the card. Spend now renders as .mn-spend below. */
.mn-adlaunch-toggles {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.mn-adlaunch-item { display: flex; align-items: center; gap: 8px; }
.mn-adlaunch-name { font-size: 12px; color: var(--text-muted); min-width: 52px; }
.mn-adlaunch-status { font-size: 12px; color: var(--text-muted); min-width: 78px; }
.mn-adlaunch-spend { font-size: 13px; font-weight: 600; color: var(--text-primary); }
/* Read-only stand-in for the launch toggle. The card shows state; the Edit panel is
   where it changes, so this must not look like something you can press. */
.mn-launch-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
    background: var(--border);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}
.mn-launch-dot--on { background: #16a34a; box-shadow: none; }
.mn-adlaunch-spend--total { color: var(--primary); }
.mn-adspend-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    margin-right: 2px;
}
.mn-section-ctx {
    font-size: 10px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-muted);
    background: var(--bg-page, #fff);
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 1px 6px;
    margin-left: 3px;
}
html.dark .mn-section-ctx { background: var(--bg-card, #23272f); }
.mn-adspend-stats {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.mn-adspend-stat {
    display: flex;
    align-items: center;
    gap: 4px;
}
.mn-adspend-stat-label {
    font-size: 12px;
    color: var(--text-muted);
}
.mn-adspend-stat-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
.mn-adspend-total { color: #0ea5e9; }
html.dark .mn-adspend-total { color: #38bdf8; }
.mn-adspend-sep {
    width: 1px;
    height: 14px;
    background: var(--border);
    margin: 0 2px;
}

.mn-notes-list {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px 48px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
}

/* Note cards */
.mn-note-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 4px 16px 16px;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
    transition: box-shadow .2s, border-color .2s;
}
.mn-note-card:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,.09);
}
.mn-note-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--border);
    border-radius: 11px 11px 0 0;
}
.mn-note-card--this::before { background: linear-gradient(90deg, #059669, #34d399); }
.mn-note-card--next::before { background: linear-gradient(90deg, #2563eb, #60a5fa); }

.mn-note-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}
.mn-note-card-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}
.mn-note-period {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}
.mn-note-period i { opacity: .45; font-size: 13px; }
.mn-period-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.mn-period-badge-this  { background: #D1FAE5; color: #065F46; }
.mn-period-badge-next  { background: #DBEAFE; color: #1E40AF; }
html.dark .mn-period-badge-this { background: #022c22; color: #6ee7b7; }
html.dark .mn-period-badge-next { background: #1e3a5f; color: #93c5fd; }
.mn-note-card-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
.mn-note-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    letter-spacing: .02em;
}
.mn-note-author-wrap { min-width: 0; }
.mn-note-author { font-size: 13px; font-weight: 600; color: var(--text); display: block; }
.mn-note-timestamp { font-size: 11px; color: var(--text-muted); }
.mn-note-body {
    font-size: 14px;
    color: var(--text);
    line-height: 1.7;
    word-break: break-word;
}
.mn-note-body-empty { color: var(--text-muted); font-size: 13px; }

/* ── Month sections ─────────────────────────────────────────────────────────
   A month reads top to bottom - plan, spend, results, files - rather than as
   four tabs you have to click through to find out whether anything is in them.
   One rule between sections, not one under every heading: the spend table and
   the file row already carry their own edges, and stacking borders under four
   headings on top of that turned the card into a ledger. */
.mn-sections { display: flex; flex-direction: column; padding-top: 4px; }
.mn-section { min-width: 0; padding: 18px 0; }
.mn-section:last-child { padding-bottom: 4px; }
.mn-section + .mn-section { border-top: 1px solid var(--border); }
.mn-section-title {
    display: flex; align-items: center; gap: 7px;
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--text-muted);
    margin-bottom: 10px;
}
.mn-section-title i { font-size: 11px; opacity: .6; }

/* Per-platform spend. A small table, so three amounts line up and can be read
   against each other and against the total. */
.mn-spend {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}
.mn-spend-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(80px, auto);
    align-items: center;
    gap: 14px;
    padding: 9px 14px;
    font-size: 13px;
}
.mn-spend-row + .mn-spend-row { border-top: 1px solid var(--border); }
.mn-spend-name  { font-weight: 600; color: var(--text); }
.mn-spend-state {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12.5px; color: var(--text-muted); white-space: nowrap;
}
.mn-spend-state.is-on { color: var(--text); }
.mn-spend-amt {
    text-align: right; font-weight: 600; color: var(--text);
    font-variant-numeric: tabular-nums;
}
.mn-spend-amt.is-empty { color: var(--text-muted); font-weight: 400; }
.mn-spend-row--total { background: var(--bg); }
.mn-spend-row--total .mn-spend-amt { color: var(--primary); }
@media (max-width: 520px) {
    .mn-spend-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
    .mn-spend-state { grid-column: 1; }
    .mn-spend-amt   { grid-column: 2; grid-row: 1 / span 2; }
}
/* The editor's spend block is this same table with controls in the cells: the
   launch toggle where the dot was, an amount box where the figure was. The card
   keeps its shape when Edit is pressed. Rows are padded a touch less because a
   26px input stands taller than a line of text, and the status text takes the
   row's on/off colour the way the read view's does. */
.mn-spend--edit .mn-spend-row { padding: 7px 14px; }
.mn-spend--edit .mn-spend-state { gap: 8px; }
.mn-spend--edit .mn-spend-state.is-on .mn-launch-status-text { color: var(--text); }
.mn-spend--edit .mn-spend-amt {
    display: inline-flex; align-items: center; justify-content: flex-end; gap: 3px;
}
.mn-spend--edit .mn-launch-spend-input { text-align: right; }

/* Labelled blocks inside the inline editor and the new-month form. */
.mn-edit-field { margin-bottom: 16px; }
.mn-edit-field:last-child { margin-bottom: 0; }
.mn-edit-label {
    display: block; margin-bottom: 6px;
    font-size: 11.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--text-muted);
}

.mn-note-tabs-wrap {
    margin: 0 -16px;
}
.mn-note-tabs {
    display: flex;
    overflow-x: auto;
    gap: 5px;
    padding: 10px 14px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    scrollbar-width: none;
}
.mn-note-tabs::-webkit-scrollbar { display: none; }
.mn-note-tab {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 13px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    transition: color .12s, background .12s, border-color .12s;
    line-height: 1.4;
}
.mn-note-tab i { font-size: 10px; opacity: .8; }
.mn-note-tab:hover { color: var(--text); border-color: var(--text-muted); }
.mn-note-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 600; }
.mn-note-tab.active i { opacity: 1; }
.mn-note-tab--results { color: #059669; }
.mn-note-tab--results:hover { color: #047857; border-color: #059669; }
.mn-note-tab--results.active { background: #059669; color: #fff; border-color: #059669; }
html.dark .mn-note-tab--results { color: #34d399; }
html.dark .mn-note-tab--results:hover { color: #6ee7b7; border-color: #34d399; }
html.dark .mn-note-tab--results.active { background: #059669; color: #fff; }
.mn-note-tab[data-has-content="1"]::after {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--primary);
    flex-shrink: 0;
    opacity: 0.7;
}
.mn-note-tab.active[data-has-content="1"]::after { background: rgba(255,255,255,0.9); opacity: 1; }
.mn-note-tab--results[data-has-content="1"]::after { background: #059669; }
.mn-note-tab--results.active[data-has-content="1"]::after { background: rgba(255,255,255,0.9); }
html.dark .mn-note-tab[data-has-content="1"]::after { background: var(--primary); }
.mn-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 8px;
}
.mn-search-icon {
    position: absolute;
    left: 9px;
    font-size: 11px;
    color: var(--text-muted);
    pointer-events: none;
}
.mn-search-input {
    width: 100%;
    height: 30px;
    font-size: 12px;
    padding-left: 28px !important;
    padding-right: 28px !important;
}
.mn-search-clear {
    position: absolute;
    right: 7px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 4px;
    font-size: 11px;
    display: flex;
    align-items: center;
    border-radius: 3px;
}
.mn-search-clear:hover { color: var(--text); background: var(--border); }
.mn-tab-panels { }
.mn-tab-panel { display: none; padding: 16px 16px 8px; }
.mn-tab-panel.active { display: block; }
/* The editor's spend rows used to be their own stack of .mn-launch-item flex rows
   here. They are the read view's .mn-spend table now (see .mn-spend--edit above),
   so only the controls that sit inside its cells remain: the toggle, its status
   text, and the amount box. */
.mn-launch-toggle {
    position: relative;
    width: 38px;
    height: 21px;
    border-radius: 11px;
    border: none;
    background: var(--border);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background .2s;
}
.mn-launch-toggle::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
    transition: transform .2s;
}
.mn-launch-toggle:disabled { opacity: .5; cursor: default; }
.mn-launch-toggle--on { background: #059669; }
.mn-launch-toggle--on::after { transform: translateX(17px); }
.mn-launch-status-text { font-size: 12px; color: var(--text-muted); min-width: 78px; }
.mn-launch-view-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}
.mn-launch-view-badge--on  { background: #d1fae5; color: #065f46; }
.mn-launch-view-badge--off { background: #f3f4f6; color: #9ca3af; }
html.dark .mn-launch-view-badge--on  { background: #022c22; color: #6ee7b7; }
html.dark .mn-launch-view-badge--off { background: #1f2937; color: #6b7280; }
.mn-launch-view-spend { font-size: 13px; font-weight: 600; color: var(--text); padding-left: 10px; border-left: 1px solid var(--border); }
.mn-launch-view-spend--empty { font-weight: 400; color: var(--text-muted); }
.mn-launch-spend-prefix { font-size: 13px; color: var(--text-muted); }
.mn-launch-spend-input { width: 88px !important; height: 26px !important; padding: 0 6px !important; font-size: 13px !important; }
.mn-launch-edit-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mn-launch-spend-edit { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-muted); flex-shrink: 0; }
.mn-launch-checkboxes { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }
.mn-launch-checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); cursor: pointer; }

/* Monthly Note Attachments. The same chips render server-side in the card,
   client-side after an upload (mnAttachmentHtml) and, dashed, as files staged
   on the new-month form (mnNewRenderPending). */
.mn-attachments { display:flex; flex-wrap:wrap; align-items:flex-start; gap:8px; padding:8px 0 4px; }
.mn-attachment { position:relative; display:inline-flex; max-width:100%; }
.mn-attach-thumb { width:72px; height:72px; object-fit:cover; border-radius:6px; border:1px solid var(--border); display:block; }
.mn-attach-file { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid var(--border); border-radius:6px; font-size:12px; color:var(--text); text-decoration:none; background:var(--surface); max-width:260px; min-width:0; }
.mn-attach-file:hover { border-color:var(--primary); color:var(--primary); }
.mn-attach-file i { flex-shrink:0; opacity:.7; }
.mn-attach-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mn-attach-size { flex-shrink:0; font-size:11px; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.mn-attachment--pending .mn-attach-file,
.mn-attachment--pending .mn-attach-file:hover { border-style:dashed; border-color:var(--border); color:var(--text-muted); cursor:default; }
.mn-attach-del { position:absolute; top:-6px; right:-6px; width:18px; height:18px; border-radius:50%; background:#ef4444; color:#fff; border:none; font-size:13px; line-height:1; padding:0; cursor:pointer; display:none; align-items:center; justify-content:center; }
.mn-attachment:hover .mn-attach-del { display:flex; }
.mn-attach-add { display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border:1px dashed var(--border); border-radius:6px; font-size:12px; color:var(--text-muted); cursor:pointer; transition:border-color .15s,color .15s; }
.mn-attach-add:hover { border-color:var(--primary); color:var(--primary); }
.mn-attach-add.is-busy { pointer-events:none; opacity:.65; }
.mn-attach-add-wide { width:100%; justify-content:center; padding:10px; box-sizing:border-box; }
.mn-attach-hint { width:100%; font-size:11.5px; line-height:1.45; color:var(--text-muted); margin-top:2px; }
.mn-file-chip { display:inline-flex; align-items:center; padding:3px 8px; background:var(--surface); border:1px solid var(--border); border-radius:4px; font-size:12px; color:var(--text); max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.mn-comments-section {
    border-top: 1px solid var(--border);
    margin-top: 14px;
    padding-top: 12px;
}
.mn-comment-item {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}
.mn-comment-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}
.mn-comment-delete {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 15px;
    padding: 0 2px;
    line-height: 1;
    margin-left: auto;
    opacity: 0;
    transition: opacity .15s;
}
.mn-comment-item:hover .mn-comment-delete { opacity: 1; }
.mn-comment-form-wrap {
    margin-top: 8px;
}
.mn-mention-dropdown {
    display: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0,0,0,.1);
    max-height: 180px;
    overflow-y: auto;
    margin-bottom: 4px;
}
.mn-mention-item {
    padding: 7px 12px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
}
.mn-mention-item:hover,
.mn-mention-item.active { background: var(--bg); }
.mn-comment-form {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.mn-comment-textarea {
    flex: 1;
    resize: none;
    font-size: 13px;
    padding: 6px 10px;
    line-height: 1.4;
    min-height: 34px;
    overflow: hidden;
}

/* The Month / Year row at the top of the editor is a .cred-edit-fields block, which
   carries no bottom margin of its own - the first plan box otherwise sits hard
   against the dropdown. Scoped to this panel; other users of that block keep theirs. */
.mn-edit-panel-inline > .cred-edit-fields { margin-bottom: 18px; }
.mn-edit-panel-inline {
    margin-top: 14px;
    padding: 16px;
    background: var(--bg);
    border-radius: 10px;
    border: 1px solid var(--border);
    border-top: 3px solid var(--primary);
}

/* Note Card Action Buttons */
.mn-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    font-family: inherit;
    transition: color .12s, background .12s, border-color .12s;
    white-space: nowrap;
    line-height: 1.4;
}
.mn-action-btn i { font-size: 11px; }
.mn-action-btn:hover { color: var(--text); border-color: var(--text-muted); background: var(--bg); }
.mn-action-btn--edit:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-light); }
.mn-action-btn--history:hover { color: var(--text); }
.mn-action-btn--save { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 600; }
.mn-action-btn--save:hover { background: var(--primary-dark, #4338ca); border-color: var(--primary-dark, #4338ca); color: #fff; }
.mn-action-btn--close:hover { color: #ef4444; border-color: #ef4444; }

/* Note History Modal */
.mn-history-modal-list { display: flex; flex-direction: column; }
.mn-history-modal-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
}
.mn-history-modal-item:last-child { border-bottom: none; }
.mn-history-modal-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    border: 1px solid var(--border);
}
.mn-history-modal-icon--create { background: #f0fdf4; color: #059669; border-color: #bbf7d0; }
.mn-history-modal-icon--edit   { background: #E6EDF5; color: #081A35; border-color: #c7d2fe; }
html.dark .mn-history-modal-icon--create { background: #022c22; color: #6ee7b7; border-color: #065f46; }
html.dark .mn-history-modal-icon--edit   { background: #1A2840; color: #4A8FE8; border-color: #3730a3; }
.mn-history-modal-info { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.mn-history-modal-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
}
.mn-history-modal-name { font-size: 14px; font-weight: 600; color: var(--text); }
.mn-history-modal-time { font-size: 12px; color: var(--text-muted); }
.mn-history-modal-none {
    padding: 16px 0;
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
}

/* Add New Note Card */
#mnNewNoteInline {
    border-color: var(--primary);
    border-width: 2px;
    animation: mn-slide-in .18s ease-out;
}
#mnNewNoteInline::before {
    background: var(--primary);
    border-radius: 10px 10px 0 0;
}
#mnPanel > #mnNewNoteInline {
    margin: 24px;
}
@keyframes mn-slide-in {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.mn-new-note-header {
    background: var(--bg);
    margin: 0 -16px 0;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}
.mn-new-note-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.mn-new-note-fields-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
}
.mn-new-note-field-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mn-new-note-field-group--grow { flex: 1; min-width: 140px; }
.mn-new-field-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
}
.mn-new-note-ta {
    width: 100%;
    resize: vertical;
    box-sizing: border-box;
    min-height: 160px;
}
.mn-new-note-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 0 0;
    margin-top: 4px;
    border-top: 1px solid var(--border);
}

.mn-panel-empty {
    padding: 48px 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}

.mn-mobile-back {
    display: none;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--primary);
    cursor: pointer;
    background: none;
    border: none;
    padding: 14px 16px 0;
    font-weight: 500;
}
@media (max-width: 768px) {
    .docs-layout.has-client .docs-nav { display: none; }
    .mn-mobile-back { display: flex; }
    .mn-notes-list { padding: 16px 14px 40px; }
    .mn-panel-header { padding: 14px 16px; }
}

/* The active/paused/inactive status pills that used to live here are gone with the
   ad_spends table. A recap records a launched flag and an amount, not a status. */

/* Ad Spend - summary stat cards */
.ads-summary-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.ads-summary-card {
    flex: 1;
    min-width: 155px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 13px;
}
.ads-summary-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.ads-icon-fb    { background: #E8F0FE; color: #1877F2; }
.ads-icon-goog  { background: #FEF0EE; color: #EA4335; }
.ads-icon-lsa   { background: #ECFDF5; color: #16A34A; }
.ads-icon-total { background: var(--primary-light); color: var(--primary); }
html.dark .ads-icon-fb    { background: #172554; color: #60A5FA; }
html.dark .ads-icon-goog  { background: #450A0A; color: #FCA5A5; }
html.dark .ads-icon-lsa   { background: #052E16; color: #4ADE80; }
.ads-summary-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    margin-bottom: 1px;
}
.ads-summary-value {
    font-size: 19px;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.ads-summary-sub {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Ad Spend - platform dots, on the breakdown row labels */
.ads-col-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: middle;
    flex-shrink: 0;
}
.ads-dot-fb   { background: #1877F2; }
.ads-dot-goog { background: #EA4335; }
.ads-dot-lsa  { background: #16A34A; }

/* Ad Spend - month matrix.
   Fourteen columns, so the client column is narrower than the .cred-table default
   and pinned while the months scroll under it. The :first-child overrides are
   scoped to .ads-matrix so the 250px pin every other cred table relies on is
   untouched. Nothing here widens the .cf-wrap-scoped credentials-repeater grid -
   see the note next to those rules; this table still puts .cred-row on a <tr>. */
.ads-matrix thead th:first-child,
.ads-matrix tbody td:first-child,
.ads-matrix tfoot td:first-child {
    width: 190px;
    min-width: 190px;
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--surface);
}
.ads-matrix tbody tr:hover td:first-child { background: #E6EDF5; }
html.dark .ads-matrix tbody tr:hover td:first-child { background: #1A2840; }
/* Month figures sit centred under centred month headers - the platform breakdown
   rows put several figures under one header, and a centred stack reads as a
   column where a right-aligned one reads as a ragged edge. */
.ads-m-cell {
    text-align: center;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-size: 13px;
}
/* Qualified with the table so it outranks .cred-table thead th's text-align: left;
   a bare .ads-m-th loses that fight and the headers sit left of their figures. */
.ads-matrix thead th.ads-m-th { text-align: center; }
/* Months still ahead are dimmed, never hidden: recaps are written a month early,
   so a future column can legitimately hold real figures. */
.ads-m-future { opacity: .55; }
.ads-m-dup {
    font-size: 9px;
    margin-left: 4px;
    opacity: .45;
    vertical-align: super;
}
.ads-archived-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 20px;
    background: var(--bg-alt);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 600;
    vertical-align: middle;
}

/* Ad Spend - total column */
.ads-total-col {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    background: var(--bg) !important;
}
.cred-row:hover .ads-total-col { background: #E6EDF5 !important; }
html.dark .cred-row:hover .ads-total-col { background: #1A2840 !important; }

/* Ad Spend - tfoot totals row */
.ads-tfoot-row td {
    background: var(--surface);
    border-top: 2px solid var(--border) !important;
    padding: 11px 14px;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}
.ads-tfoot-row .ads-total-col { background: var(--bg) !important; }
.ads-tfoot-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
}

/* Ad Spend - platform breakdown.
   Each client is a group: the client row (.ads-main-row) holds the month totals,
   and the .ads-sub-row rows under it hold one platform each. Lines are drawn at
   group boundaries only - the top of each client row - so a client and its
   breakdown read as one block rather than four rows. The footer follows suit:
   .ads-tfoot-sub rows sit under the Totals row with no line between. */
.ads-matrix .ads-main-row td {
    border-top: 1px solid var(--border);
    border-bottom: none;
}
.ads-matrix tbody .ads-main-row:first-child td { border-top: none; }
.ads-matrix .ads-main-row .ads-m-cell { font-weight: 500; }

/* Bottom padding is the breathing room under the LAST breakdown row of a group;
   a sub-row followed by another sub-row gives most of it back (below). */
.ads-matrix .ads-sub-row td {
    padding: 3px 14px 9px;
    border-bottom: none;
    font-size: 12px;
    color: var(--text-muted);
}
.ads-matrix .ads-sub-row .ads-total-col {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
}
.ads-sub-label {
    padding-left: 30px !important;
    font-weight: 500;
    white-space: nowrap;
}
.ads-sub-label .ads-col-dot { margin-right: 7px; }
.ads-matrix .ads-sub-row:has(+ .ads-sub-row) td { padding-bottom: 4px; }

.ads-matrix .ads-tfoot-sub td {
    background: var(--surface);
    border-top: none;
    font-weight: 500;
}
.ads-matrix .ads-tfoot-sub .ads-total-col { background: var(--bg) !important; }

/* Totals only: every breakdown row goes, body and footer alike. !important so the
   inline display filterAdSpend() writes on these rows cannot bring them back. */
.ads-matrix.ads-totals-only .ads-sub-row { display: none !important; }

/* Ad Spend - Add+ on an empty month of a client row.
   Always on show, in the dash's place, so an empty month reads as something to do
   rather than as nothing. Laid over the cell so the whole cell is the click target;
   the dash stays in the markup (hidden, not removed) so the cell keeps its height
   and the figure the harness reads is still a dash. Quieter than a figure until
   hovered or tabbed to, so a row of twelve empty months does not shout. */
.ads-m-empty { position: relative; }
.ads-m-empty .cred-empty-notes { visibility: hidden; }
.ads-add-link {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .7;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--primary);
    text-decoration: none;
    white-space: nowrap;
}
.ads-m-empty:hover .ads-add-link,
.ads-add-link:focus-visible { opacity: 1; outline: none; }
.ads-add-link:hover { text-decoration: underline; }

/* Ad Spend - launched state on the breakdown rows.
   A dot before each platform figure: green when the platform was marked launched
   on that month's recap, gray when it was not. Only a figure gets one (a recorded
   $0 included) - a dash, whether the month has no recap or the platform was left
   blank on it, stands alone. Read-only, like the
   .mn-launch-dot on the recap card it echoes; the recap's Edit panel is where it
   changes. --text-light rather than the card's --border: at 7px a border-coloured
   dot is the same tone as the dash (.cred-empty-notes) and reads as "nothing"
   instead of "not launched".
   The dot hangs to the LEFT of the figure at no net width (7px + 5px gap - 12px),
   so a figure stays centred under its header, and under the client total above
   it, whether or not that month has a dot. */
.ads-launch-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-left: -12px;
    margin-right: 5px;
    vertical-align: middle;
    background: var(--text-light);
}
.ads-launch-dot--on { background: #16A34A; }

/* Ad Spend - new-tab twin of a month total's link. Always there but quiet, and
   hung off the RIGHT of the figure at no net width (4px gap + 9px - 13px) for the
   same reason the dot hangs off the left; the explicit width keeps that sum exact
   whatever the glyph measures. Hover goes to --primary, which is what
   .ads-add-link and the other icon links on the page use. */
.ads-cell-ext {
    display: inline-block;
    width: 9px;
    margin-left: 4px;
    margin-right: -13px;
    font-size: 9px;
    line-height: 1;
    text-align: center;
    color: inherit;
    opacity: .45;
    text-decoration: none;
}
.ads-cell-ext:hover,
.ads-cell-ext:focus-visible { opacity: 1; color: var(--primary); }

/* Ad Spend - month-over-month sign on the platform rows.
   An up caret after a platform figure when it is higher than the month to its
   left, a down caret when lower, nothing when equal - and nothing when either
   side is a dash, which is "not entered" rather than zero (see ads_trend() in
   ad-spend.php). Hung off the RIGHT of the figure at no net width (3px gap + 9px
   - 12px), the same trick .ads-cell-ext uses, so a figure stays centred whether
   or not it carries one. The caret glyph is narrow and sits in the lower half
   of its em, so it runs a size larger than the twin icon to read at a glance.
   --success / --danger are the up and down tokens the rest of the app uses, and
   both already carry a dark-mode value. */
.ads-trend {
    display: inline-block;
    width: 9px;
    margin-left: 3px;
    margin-right: -12px;
    font-size: 12px;
    line-height: 1;
    text-align: center;
    vertical-align: middle;
}
.ads-trend--up   { color: var(--success); }
.ads-trend--down { color: var(--danger); }

/* Licenses form bar */
.lic-form-bar {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.lic-form-bar .field-input {
    height: 36px;
    padding: 0 10px;
    font-size: 13px;
    flex: 1;
    min-width: 120px;
}
.lic-key-wrap {
    flex: 2;
    min-width: 180px;
}
.lic-key-wrap .field-input { width: 100%; }
.lic-name-cell {
    font-weight: 500;
    color: var(--text);
}

/* Inline add form bar */
.cred-form-bar {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 12px 14px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.cred-form-bar .field-input {
    height: 36px;
    padding: 0 10px;
    font-size: 13px;
}
.cred-form-bar .cred-pw-wrap {
    flex: 1.2;
    min-width: 120px;
}
.cred-form-bar .cred-pw-wrap .field-input { width: 100%; }
.cred-form-select { flex: 1.2; min-width: 130px; }
.cred-form-bar input[type="text"] { flex: 1; min-width: 110px; }
.cred-form-submit { white-space: nowrap; height: 36px; padding: 0 16px; flex-shrink: 0; }

/* Password input with toggle */
.cred-pw-wrap {
    position: relative;
    display: flex;
}
.cred-pw-wrap .field-input {
    flex: 1;
    padding-right: 40px;
}
.cred-pw-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px;
    display: flex;
    align-items: center;
    transition: color .12s;
}
.cred-pw-toggle:hover { color: var(--text); }

@media (max-width: 768px) {
    .cred-page { padding: 20px 16px 60px; }
    .cred-form-bar { flex-direction: column; align-items: stretch; }
    .cred-form-bar .field-input,
    .cred-form-bar .cred-pw-wrap,
    .cred-form-select { flex: none; width: 100%; min-width: 0; }
    .cred-form-submit { width: 100%; justify-content: center; }
}

/* Admin Settings */
.as-table-wrap {
    border: 1.5px solid var(--border);
    border-radius: 12px;
    overflow-x: auto;
    overflow-y: hidden;
}
.as-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}
.as-table thead th {
    background: var(--bg-alt);
    padding: 10px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    border-bottom: 1.5px solid var(--border);
}
.as-table thead th:not(:first-child) {
    text-align: center;
}
.as-table tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background .15s;
}
.as-table tbody tr:last-child { border-bottom: none; }
.as-table tbody tr:hover { background: var(--bg-alt); }
.as-admin-cell {
    padding: 14px 16px;
    min-width: 200px;
}
.as-admin-name {
    font-weight: 600;
    color: var(--text);
    font-size: 13.5px;
}
.as-admin-email {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}
.as-toggle-cell {
    padding: 14px 16px;
    text-align: center;
    vertical-align: middle;
}
.as-empty {
    text-align: center;
    padding: 60px 24px;
    color: var(--text-muted);
    font-size: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.as-empty a { color: var(--primary); text-decoration: none; }
.as-empty a:hover { text-decoration: underline; }

/* Discovery Notes */
.dn-layout {
    display: flex;
    gap: 0;
    align-items: flex-start;
}
.dn-sidebar {
    width: 190px;
    flex-shrink: 0;
    border-right: 1.5px solid var(--border);
    padding: 4px 10px 24px 0;
    position: sticky;
    top: 0;
    align-self: flex-start;
}
.dn-sidebar-actions {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1.5px solid var(--border);
}
.dn-content {
    flex: 1;
    min-width: 0;
    padding-left: 24px;
    padding-top: 4px;
}
.dn-tabs { display: flex; flex-direction: column; gap: 2px; }
.dn-tab {
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background .15s, color .15s;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}
.dn-tab:hover { background: var(--surface); color: var(--text); }
.dn-tab.active { background: var(--primary-light); color: var(--primary); font-weight: 600; }
.dn-tab--superadmin { color: #b45309; }
.dn-tab--superadmin:hover { background: #fef3c7; color: #92400e; }
.dn-tab--superadmin.active { background: #fef3c7; color: #92400e; }
.dark .dn-tab--superadmin { color: #fbbf24; }
.dark .dn-tab--superadmin:hover { background: #451a03; color: #fde68a; }
.dark .dn-tab--superadmin.active { background: #451a03; color: #fde68a; }
.dn-tab-actions { display: flex; gap: 8px; flex-shrink: 0; }
.dn-tab-panel { padding-top: 4px; }

/* Client Info sub-tabs. Horizontal, so this is deliberately not .dn-tab (which is
   the vertical left-rail style). Sticky because a group is still a couple of
   screens tall and the bar has to stay reachable while scrolling one. */
.ci-subnav {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    gap: 4px;
    padding: 8px 0 10px;
    margin-bottom: 4px;
    background: var(--bg);
    border-bottom: 1.5px solid var(--border);
    overflow-x: auto;
    scrollbar-width: thin;
}
.ci-subnav-btn {
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background .15s, color .15s;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    flex-shrink: 0;
}
.ci-subnav-btn i { font-size: 13px; opacity: .75; }
.ci-subnav-btn:hover { background: var(--surface); color: var(--text); }
.ci-subnav-btn.active {
    background: var(--primary-light);
    color: var(--primary);
    font-weight: 600;
}
.ci-subnav-btn.active i { opacity: 1; }

/* Permission-gated tab (Financials). Same amber the restricted panel header and
   .dn-tab--superadmin already use, so "you are somewhere restricted" reads the
   same wherever it appears. */
.ci-subnav-btn--restricted { color: #b45309; }
.ci-subnav-btn--restricted:hover { background: #fef3c7; color: #92400e; }
.ci-subnav-btn--restricted.active { background: #fef3c7; color: #92400e; }
.dark .ci-subnav-btn--restricted { color: #fbbf24; }
.dark .ci-subnav-btn--restricted:hover { background: #451a03; color: #fde68a; }
.dark .ci-subnav-btn--restricted.active { background: #451a03; color: #fde68a; }
/* Superadmin-only tab (Danger Zone). Red rather than amber: this one is not
   restricted data, it is archive / delete, and it borrows the .dn-danger-zone
   palette so the tab and the box it opens read as the same thing. */
.ci-subnav-btn--danger { color: #b91c1c; }
.ci-subnav-btn--danger:hover { background: #fee2e2; color: #991b1b; }
.ci-subnav-btn--danger.active { background: #fee2e2; color: #991b1b; }
.dark .ci-subnav-btn--danger { color: #f87171; }
.dark .ci-subnav-btn--danger:hover { background: #450a0a; color: #fecaca; }
.dark .ci-subnav-btn--danger.active { background: #450a0a; color: #fecaca; }
.dn-brief-missing {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--primary-light, #eff6ff);
    border: 1.5px solid var(--primary, #2563eb);
    border-radius: var(--radius);
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 13px;
    color: var(--text);
}
.dn-brief-missing > i { color: var(--primary); font-size: 15px; margin-top: 1px; flex-shrink: 0; }
.dn-brief-missing-title { font-weight: 600; margin-bottom: 8px; color: var(--primary); }
.dn-brief-missing-list { display: flex; flex-wrap: wrap; gap: 6px; }
.dn-brief-missing-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fff;
    border: 1px solid var(--primary, #2563eb);
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
}
.dark .dn-brief-missing-item { background: var(--surface); }
.dn-brief-missing-tab {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    background: var(--bg);
    border-radius: 4px;
    padding: 1px 5px;
}
.dn-tab-textarea {
    display: block;
    width: 100%;
    height: calc(100vh - 280px);
    min-height: 400px;
    padding: 16px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text);
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    resize: vertical;
    box-sizing: border-box;
    transition: border-color .15s;
}
.dn-tab-textarea:focus { outline: none; border-color: var(--primary); }

.dn-section { padding: 22px 0; border-bottom: 1.5px solid var(--border); }
.dn-section:last-child { border-bottom: none; }
#dn-panel-general .dn-section {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-bottom: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px 24px 20px;
    margin-bottom: 14px;
}
#dn-panel-general .dn-section:last-child { border-bottom: 1.5px solid var(--border); margin-bottom: 0; }
#dn-panel-general .dn-section-title { margin-bottom: 18px; }
.dn-section-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 14px;
}
.dn-half { max-width: calc(50% - 7px); }
.dn-superadmin-wrapper {
    margin-top: 26px;
    border: 1.5px solid #f59e0b;
    border-radius: 12px;
    overflow: hidden;
}
.dn-superadmin-wrapper .dn-section {
    padding: 22px 20px;
    border-bottom: 1.5px solid #fde68a;
    margin: 0;
}
.dn-superadmin-wrapper .dn-section:last-child {
    border-bottom: none;
}
.dark .dn-superadmin-wrapper {
    border-color: #92400e;
}
.dark .dn-superadmin-wrapper .dn-section {
    border-bottom-color: #451a03;
}
.dn-superadmin-header {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #92400e;
    background: #fef3c7;
    padding: 8px 16px;
    border-bottom: 1.5px solid #f59e0b;
}
.dark .dn-superadmin-header {
    color: #fcd34d;
    background: #451a03;
    border-bottom-color: #92400e;
}
/* Explainer line under the gold header, above the first financials section. */
.dn-superadmin-note {
    font-size: 12.5px;
    line-height: 1.5;
    color: #92400e;
    background: #fffbeb;
    padding: 10px 16px;
    border-bottom: 1.5px solid #fde68a;
}
.dark .dn-superadmin-note {
    color: #fcd34d;
    background: #2c1403;
    border-bottom-color: #451a03;
}
.badge-superadmin {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 5px;
    padding: 2px 7px;
    margin-left: 8px;
    vertical-align: middle;
    line-height: 1.4;
}
.dark .badge-superadmin {
    color: #fcd34d;
    background: #451a03;
    border-color: #92400e;
}


.dn-check-group { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }
.dn-check-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
    padding: 2px 0;
    font-weight: 400;
}
.dn-check-item input[type="checkbox"] {
    width: 15px;
    height: 15px;
    cursor: pointer;
    flex-shrink: 0;
    accent-color: var(--primary);
}

.dn-list {
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-top: 4px;
}
.dn-list-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--border);
    transition: background .12s;
}
.dn-list-item:last-child { border-bottom: none; }
.dn-list-item:hover { background: var(--surface); }
.dn-list-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--primary);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dn-list-info { flex: 1; min-width: 0; }
.dn-list-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dn-list-biz {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}
.dn-list-date { font-size: 12px; color: var(--text-muted); flex-shrink: 0; white-space: nowrap; }

@media (max-width: 900px) {
    .dn-half { max-width: 100%; }
    .dn-layout { flex-direction: column; }
    .dn-sidebar { width: 100%; border-right: none; border-bottom: 1.5px solid var(--border); padding: 0 0 12px; position: static; }
    .dn-tabs { flex-direction: row; flex-wrap: wrap; }
    .dn-tab { width: auto; }
    /* Pin the Save button to the bottom of the screen so it's tappable at any time */
    .dn-sidebar-actions {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 90;
        margin-top: 0;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        border-top: 1.5px solid var(--border);
        background: var(--surface);
        box-shadow: 0 -4px 16px rgba(0,0,0,.08);
    }
    .dn-content { padding-left: 0; padding-top: 12px; padding-bottom: 80px; }
    .dn-tab-textarea { height: 60vh; min-height: 280px; }
}

/* Monthly Notes: Platform Pills */
.mn-platform-pills {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.mn-platform-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .03em;
    white-space: nowrap;
}
.mn-platform-pill--fb   { background: #dbeafe; color: #1d4ed8; }
.mn-platform-pill--goog { background: #fef9c3; color: #92400e; }
.mn-platform-pill--lsa  { background: #f0fdf4; color: #166534; }
html.dark .mn-platform-pill--fb   { background: #1e3a5f; color: #93c5fd; }
html.dark .mn-platform-pill--goog { background: #2d2600; color: #fcd34d; }
html.dark .mn-platform-pill--lsa  { background: #022c22; color: #6ee7b7; }

/* Monthly Notes: Month Overview Panel */
.mn-overview-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}
.mn-overview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 24px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    flex-shrink: 0;
}
.mn-overview-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}
.mn-overview-grid {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px 48px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    align-content: start;
}
.mn-ovc-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
    transition: box-shadow .18s, border-color .18s, transform .15s;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mn-ovc-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
    border-color: var(--primary);
    transform: translateY(-2px);
}
.mn-ovc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.mn-ovc-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mn-ovc-pills { display: flex; gap: 3px; flex-shrink: 0; }
.mn-ovc-spend { font-size: 12px; font-weight: 600; color: var(--primary); }
.mn-ovc-snippet {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mn-ovc-meta { display: flex; gap: 10px; align-items: center; }
.mn-ovc-meta-item {
    font-size: 11px;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.mn-overview-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
    padding: 48px 0;
}

/* Monthly Notes: Tabbed Edit Panel */
.mn-edit-tabs-wrap { margin-top: 12px; }
.mn-edit-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
}
.mn-edit-tabs::-webkit-scrollbar { display: none; }
.mn-edit-tab {
    padding: 7px 16px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: color .12s, border-color .12s;
    margin-bottom: -1px;
}
.mn-edit-tab:hover { color: var(--text); }
.mn-edit-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.mn-edit-tab-panel { display: none; padding-top: 14px; }
.mn-edit-tab-panel.active { display: block; }

@media (max-width: 768px) {
    .mn-overview-grid { grid-template-columns: 1fr; padding: 14px 14px 40px; }
    .mn-overview-header { padding: 14px 16px; }
}

/* Assign button - the Workflows page's "Assign as Task" (workflows.php) */
.cl-assign-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: var(--primary);
    border: 1.5px solid var(--primary);
    border-radius: 7px;
    padding: 4px 10px;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s, border-color .15s, opacity .15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.cl-assign-btn:hover { opacity: .85; }

/* Dashboard */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    align-items: start;
}
.dashboard-widget {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow .15s, border-color .15s;
    animation: fadeSlideUp .25s ease both;
}
.dashboard-widget-wide { grid-column: span 2; }

/* Edit mode */
.dashboard-edit-mode .dashboard-widget {
    border-color: var(--primary);
    border-style: dashed;
    box-shadow: 0 0 0 3px rgba(13,37,69,.08);
}
.dashboard-edit-mode .dashboard-widget:hover { cursor: default; }
.widget-drag-ghost { opacity: .45; background: var(--primary-light) !important; }

/* Widget header */
.widget-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--border);
}
.widget-drag-handle {
    display: none;
    color: var(--text-muted);
    cursor: grab;
    font-size: 13px;
    flex-shrink: 0;
}
.widget-drag-handle:active { cursor: grabbing; }
.dashboard-edit-mode .widget-drag-handle { display: flex; }
.widget-icon { font-size: 15px; flex-shrink: 0; }
.widget-title { font-size: 14px; font-weight: 600; color: var(--text); flex: 1; }
.widget-badge {
    background: rgba(245,158,11,.15);
    color: #B45309;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 100px;
    flex-shrink: 0;
}
.widget-hide-btn {
    display: none;
    background: none;
    border: none;
    font-size: 18px;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 2px;
    border-radius: 4px;
    flex-shrink: 0;
    transition: color .1s, background .1s;
}
.widget-hide-btn:hover { color: var(--danger); background: rgba(239,68,68,.08); }
.dashboard-edit-mode .widget-hide-btn { display: flex; align-items: center; }

/* Widget body */
.widget-body { padding: 12px 16px 16px; }

.widget-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 28px 0;
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
}

/* Pending Reviews - list */
.widget-list { display: flex; flex-direction: column; gap: 2px; }
.widget-list-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background .1s;
}
.widget-list-row:hover { background: var(--bg); }
.widget-list-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.content-type-chip {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 100px;
    white-space: nowrap;
}
.widget-list-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.widget-list-meta { display: flex; align-items: center; gap: 8px; padding-left: 2px; }
.widget-client-badge {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg);
    border: 1px solid var(--border);
    padding: 1px 7px;
    border-radius: 100px;
    white-space: nowrap;
}
.widget-time { font-size: 11px; color: var(--text-light); white-space: nowrap; margin-left: auto; }

/* Recent Activity - feed */
.activity-feed { display: flex; flex-direction: column; gap: 2px; }
.activity-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    transition: background .1s;
}
.activity-row:hover { background: var(--bg); }
.activity-avatar {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0D2545, #1A3A6E);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}
.activity-body { flex: 1; min-width: 0; }
.activity-label { font-size: 13px; color: var(--text); line-height: 1.4; }
.activity-content-link {
    display: block;
    font-size: 12px;
    color: var(--primary);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}
.activity-content-link:hover { text-decoration: underline; }
.activity-time { font-size: 11px; color: var(--text-light); white-space: nowrap; flex-shrink: 0; margin-top: 2px; }

/* My Checklists */
.checklist-feed { display: flex; flex-direction: column; gap: 10px; }
.checklist-client-group { display: flex; flex-direction: column; gap: 2px; }
.checklist-client-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 0 10px;
    margin-bottom: 2px;
}
.checklist-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background .1s;
}
.checklist-row:hover { background: var(--bg); }
.checklist-row-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--text);
    font-weight: 500;
}
.checklist-freq-badge {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg);
    border: 1px solid var(--border);
    padding: 1px 6px;
    border-radius: 100px;
}
.checklist-done { color: var(--success); font-size: 16px; flex-shrink: 0; }
.checklist-due {
    font-size: 11px;
    font-weight: 700;
    color: #D97706;
    background: rgba(245,158,11,.12);
    padding: 2px 8px;
    border-radius: 100px;
    flex-shrink: 0;
}
.widget-view-all {
    display: block;
    text-align: center;
    font-size: 12px;
    color: var(--primary);
    text-decoration: none;
    padding: 10px 0 2px;
    font-weight: 600;
}
.widget-view-all:hover { text-decoration: underline; }

/* Dashboard greeting / at-a-glance strip */
.dash-header {
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.dash-greeting { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dash-greeting-title { font-size: 20px; font-weight: 700; color: var(--text); }
.dash-glance { display: flex; flex-wrap: wrap; gap: 8px; }
.dash-glance-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border: 1.5px solid var(--border);
    border-radius: 100px;
    background: var(--surface);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .12s, color .12s;
}
a.dash-glance-chip:hover { border-color: var(--primary); color: var(--primary); }
.dash-glance-chip strong { color: var(--text); font-weight: 700; }
.dash-glance-chip-danger { color: var(--danger); border-color: rgba(239,68,68,.35); }
.dash-glance-chip-danger strong { color: var(--danger); }
a.dash-glance-chip-danger:hover { border-color: var(--danger); color: var(--danger); }

/* My Tasks widget */
.task-list { display: flex; flex-direction: column; gap: 2px; }
.task-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background .1s;
}
.task-row:hover { background: var(--bg); }
.task-row-title {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.task-row-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.task-status-pill {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 2px 7px;
    border: 1px solid;
    border-radius: 100px;
    white-space: nowrap;
}
.task-due {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}
.task-due.overdue { color: var(--danger); }

/* Notifications widget */
.dash-notif-list { display: flex; flex-direction: column; }
.dash-notif-list .notif-item { border-radius: var(--radius-sm); padding: 10px 10px; }
.widget-markall-btn {
    background: none;
    border: none;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
    padding: 3px 7px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    transition: background .12s;
}
.widget-markall-btn:hover { background: var(--primary-light); }

/* My Time widget */
.time-stat-row { display: flex; gap: 10px; margin-bottom: 12px; }
.time-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.time-stat-value { font-size: 20px; font-weight: 700; color: var(--text); line-height: 1.1; }
.time-stat-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.time-recent { display: flex; flex-direction: column; gap: 2px; }
.time-recent-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 8px;
    border-radius: var(--radius-sm);
}
.time-recent-row:hover { background: var(--bg); }
.time-recent-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.time-recent-desc {
    font-size: 13px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}
.time-recent-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.time-recent-mins { font-size: 12px; font-weight: 700; color: var(--primary); }

/* Widget tray (edit mode) */
.widget-tray {
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding: 14px 18px;
    background: var(--surface);
    border: 1.5px dashed var(--border);
    border-radius: var(--radius-lg);
    flex-wrap: wrap;
}
.widget-tray-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
}
.widget-tray-items { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.widget-tray-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: 1.5px solid var(--primary);
    border-radius: 100px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background .1s, border-color .1s;
}
.widget-tray-chip:hover { background: var(--primary); color: #fff; }

@media (max-width: 1100px) {
    .dashboard-grid { grid-template-columns: repeat(2, 1fr); }
    .dashboard-widget-wide { grid-column: span 2; }
}
@media (max-width: 700px) {
    .dashboard-grid { grid-template-columns: 1fr; }
    .dashboard-widget-wide { grid-column: span 1; }
}

/* Notification Center */

/* Bell button - mobile top bar */
.notif-bell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: color .15s, background .15s;
    flex-shrink: 0;
}
.notif-bell:hover { color: var(--text); background: var(--bg); }

/* Bell button - desktop sidebar (uses .sb-link styling, just needs badge wrapper) */
.notif-bell-desktop {
    background: none;
    border: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    width: 100%;
}
.notif-bell-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

/* Unread count badge */
.notif-badge {
    position: absolute;
    top: -5px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 100px;
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
}
.notif-badge-desktop {
    top: -4px;
    right: -8px;
}

/* Slide-in panel */
.notif-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 360px;
    max-width: 100vw;
    height: 100dvh;
    background: var(--surface);
    border-left: 1.5px solid var(--border);
    box-shadow: var(--shadow-lg);
    z-index: 500;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .25s cubic-bezier(.22,1,.36,1);
    overflow: hidden;
}
.notif-panel.open { transform: translateX(0); }

/* Semi-transparent backdrop */
.notif-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.3);
    z-index: 499;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
}
.notif-overlay.open { opacity: 1; pointer-events: auto; }

/* Panel header */
.notif-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1.5px solid var(--border);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    background: var(--surface);
    z-index: 1;
}
.notif-panel-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin-right: auto;
}
.notif-mark-all {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    transition: background .15s;
}
.notif-mark-all:hover { background: var(--primary-light); }
.notif-clear-all { color: var(--danger); margin-left: 2px; }
.notif-clear-all:hover { background: rgba(239,68,68,.1); }
/* Close (X) button -- the main way to dismiss the panel on mobile, where it covers the full screen */
.notif-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: 4px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 17px;
    border-radius: var(--radius-sm);
    transition: background .15s, color .15s;
    flex-shrink: 0;
}
.notif-close:hover { background: var(--bg); color: var(--text); }
.notif-settings {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: 2px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 14px;
    border-radius: var(--radius-sm);
    transition: background .15s, color .15s;
    flex-shrink: 0;
    text-decoration: none;
}
.notif-settings:hover { background: var(--bg); color: var(--text); }

/* Scrollable list */
.notif-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0;
}

/* Individual notification row */
.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 18px;
    cursor: pointer;
    transition: background .12s;
    border-left: 3px solid transparent;
    text-decoration: none;
}
.notif-item:hover { background: var(--bg); }
.notif-item.unread {
    background: var(--primary-light);
    border-left-color: var(--primary);
}
.notif-item.unread:hover { background: var(--primary-light); filter: brightness(.97); }

.notif-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 1px;
}
.notif-item.unread .notif-item-icon { background: var(--surface); }

.notif-item-body { flex: 1; min-width: 0; }
.notif-item-msg {
    font-size: 13px;
    color: var(--text);
    line-height: 1.45;
    word-break: break-word;
}
.notif-item.unread .notif-item-msg { font-weight: 600; }
.notif-item-time {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 3px;
}

/* Per-item clear (X) -- appears on hover; always visible on touch devices */
.notif-item-clear {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    padding: 0;
    border: none;
    background: none;
    color: var(--text-light);
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .12s, background .12s, color .12s;
}
.notif-item:hover .notif-item-clear,
.notif-item-clear:focus-visible { opacity: 1; }
.notif-item-clear:hover { background: rgba(239,68,68,.12); color: var(--danger); }
@media (hover: none) { .notif-item-clear { opacity: 1; } }

/* Empty state */
.notif-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 48px 24px;
    color: var(--text-muted);
    text-align: center;
}
.notif-empty i { font-size: 32px; opacity: .4; }
.notif-empty p { font-size: 13px; }

@media (max-width: 768px) {
    .notif-panel { width: 100vw; border-left: none; }
}



/* Command Palette */
.cmd-palette-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1200;
}
.cmd-palette-backdrop.open { display: block; }

/* Sits high on the screen and is bounded by the viewport rather than by a fixed
   results height: the list now spans seven groups (clients, projects, notebooks,
   notes, workflows, docs, pages), so anything shorter buries most of an answer
   below the fold. clamp() keeps it off the very top edge on a laptop and stops it
   drifting into the middle of a tall monitor. */
.cmd-palette-modal {
    --cmd-top: clamp(32px, 7vh, 96px);
    display: none;
    flex-direction: column;
    position: fixed;
    top: var(--cmd-top);
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 660px;
    /* The gutter is what's left below the modal, so it never runs off the bottom.
       dvh second, for mobile chrome that eats part of vh - ignored where unknown. */
    max-height: calc(100vh - var(--cmd-top) - 40px);
    max-height: calc(100dvh - var(--cmd-top) - 40px);
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 1201;
    overflow: hidden;
}
.cmd-palette-modal.open { display: flex; }

.cmd-palette-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.cmd-palette-icon { color: var(--text-muted); font-size: 14px; flex-shrink: 0; }
.cmd-palette-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 15px;
    background: transparent;
    color: var(--text);
}
.cmd-palette-esc {
    font-size: 11px;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 6px;
    flex-shrink: 0;
}

/* No height of its own: the modal is content-sized until it hits the viewport cap
   above, at which point this is the part that scrolls. min-height:0 is what lets a
   flex child shrink below its content and actually scroll instead of overflowing. */
.cmd-palette-results {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 0;
}
.cmd-palette-results:empty { display: none; }

.cmd-palette-group-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 8px 16px 4px;
}
.cmd-palette-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text);
    text-decoration: none;
}
.cmd-palette-item:hover,
.cmd-palette-item.active {
    background: var(--bg);
}
.cmd-palette-item-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
    background: var(--bg);
    color: var(--text-muted);
}
/* min-width:0 so a long label truncates instead of pushing the meta column
   off the right edge of the palette. */
.cmd-palette-item-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Second line under a result's title - the matched passage of a note. */
.cmd-palette-item-sub {
    display: block;
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cmd-palette-item-meta {
    font-size: 12px;
    color: var(--text-muted);
    flex-shrink: 0;
    white-space: nowrap;
}
.cmd-palette-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
    padding: 24px 16px;
}

/* AI Assistant Chat Bubble & Panel */
#chat-bubble {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 450;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,.22);
    transition: transform .15s, box-shadow .15s, background .15s;
}
#chat-bubble:hover {
    background: var(--primary-light, #1a3d6b);
    transform: scale(1.07);
    box-shadow: 0 6px 20px rgba(0,0,0,.28);
}

.chat-panel {
    position: fixed;
    bottom: 88px;
    right: 24px;
    z-index: 450;
    width: 370px;
    max-height: 520px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl, 14px);
    box-shadow: var(--shadow-lg, 0 8px 32px rgba(0,0,0,.18));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(10px);
    opacity: 0;
    transition: transform .2s ease, opacity .2s ease;
}
.chat-panel.chat-open {
    transform: translateY(0);
    opacity: 1;
}

.chat-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    flex-shrink: 0;
}
.chat-panel-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 6px;
}
.chat-panel-actions {
    display: flex;
    gap: 4px;
}
.chat-icon-btn {
    width: 28px;
    height: 28px;
    border-radius: var(--radius, 8px);
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .12s, color .12s;
}
.chat-icon-btn:hover {
    background: var(--bg);
    color: var(--text);
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}

.chat-welcome {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 0;
}
.chat-welcome-text {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}
.chat-suggestions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.chat-suggestion {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius, 8px);
    color: var(--text);
    font-size: 12px;
    padding: 7px 9px;
    cursor: pointer;
    text-align: left;
    transition: background .12s, border-color .12s;
    line-height: 1.3;
}
.chat-suggestion:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.chat-msg {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 88%;
    animation: chatMsgIn .15s ease;
}
@keyframes chatMsgIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.chat-msg-user  { align-self: flex-end; }
.chat-msg-assistant { align-self: flex-start; }

.chat-bubble-text {
    padding: 9px 12px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.5;
    word-break: break-word;
}
.chat-msg-user .chat-bubble-text {
    background: var(--primary);
    color: #fff;
    border-bottom-right-radius: 4px;
    white-space: pre-wrap;
}
.chat-msg-assistant .chat-bubble-text {
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-bottom-left-radius: 4px;
}
.chat-msg-assistant .chat-bubble-text p {
    margin: 0 0 4px;
}
.chat-msg-assistant .chat-bubble-text p:last-child { margin-bottom: 0; }
.chat-msg-assistant .chat-bubble-text ul {
    margin: 2px 0 4px;
    padding-left: 16px;
}
.chat-msg-assistant .chat-bubble-text li { margin: 2px 0; }
.chat-msg-assistant .chat-bubble-text strong { font-weight: 600; }
.chat-msg-assistant .chat-bubble-text em { font-style: italic; }
.chat-msg-assistant .chat-bubble-text .chat-link {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 500;
}
.chat-msg-assistant .chat-bubble-text .chat-link:hover { opacity: .75; }

.chat-loading-dots {
    display: flex;
    gap: 4px;
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    border-bottom-left-radius: 4px;
    align-self: flex-start;
}
.chat-loading-dots span {
    width: 6px;
    height: 6px;
    background: var(--text-muted);
    border-radius: 50%;
    animation: chatDot 1.2s infinite ease-in-out;
}
.chat-loading-dots span:nth-child(2) { animation-delay: .2s; }
.chat-loading-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes chatDot {
    0%, 80%, 100% { transform: scale(.7); opacity: .4; }
    40%           { transform: scale(1);  opacity: 1; }
}

.chat-input-area {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--border);
    background: var(--surface);
    flex-shrink: 0;
    align-items: flex-end;
}
.chat-textarea {
    flex: 1;
    border: 1px solid var(--border);
    border-radius: var(--radius, 8px);
    background: var(--bg);
    color: var(--text);
    font-size: 13px;
    padding: 8px 10px;
    resize: none;
    font-family: inherit;
    line-height: 1.4;
    max-height: 100px;
    overflow-y: auto;
    transition: border-color .15s;
}
.chat-textarea:focus {
    outline: none;
    border-color: var(--primary);
}
.chat-send-btn {
    width: 34px;
    height: 34px;
    border-radius: var(--radius, 8px);
    background: var(--primary);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .12s, opacity .12s;
}
.chat-send-btn:hover   { background: var(--primary-light, #1a3d6b); }
.chat-send-btn:disabled { opacity: .5; cursor: default; }

/* Mobile: full-width panel */
@media (max-width: 480px) {
    .chat-panel {
        right: 12px;
        left: 12px;
        width: auto;
        bottom: 80px;
    }
    #chat-bubble { right: 16px; bottom: 16px; }
}

/* ══ Onboarding Form (cf-*) ═══════════════════════════════════════════════
   Rendered by two surfaces that share includes/onboarding-form-body.php: the
   /onboarding portal page and the token link at client-form.php. These lived
   inline in client-form.php until the form moved into the portal; they are
   here now because that page is no longer the only one that needs them.
   Deliberately dropped in the move: a bare body{background;min-height} rule
   that fought body.app-page in the portal, and the dead .cf-gate* password
   gate whose markup was removed long ago. */

.cf-wrap {
    max-width: 980px;
    margin: 0 auto;
    padding: 48px 24px 80px;
}

.cf-welcome {
    text-align: center;
    font-size: 30px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -.02em;
    margin-bottom: 32px;
}

/* ── Form page ──────────────────────────────────────────────────── */
.cf-header {
    margin-bottom: 32px;
}
.cf-header-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
    letter-spacing: -.02em;
}
.cf-header-sub {
    font-size: 15px;
    color: var(--text-muted);
    line-height: 1.6;
}

.cf-section {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px 28px 24px;
    margin-bottom: 20px;
}
.cf-section-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1.5px solid var(--border);
}
/* Flags a whole block as nice-to-have. Nothing on this form is enforced as
   required - this is purely a visual cue. */
.cf-optional {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 20px;
    background: #f1f5f9;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .04em;
    vertical-align: middle;
}
.cf-tab-nav {
    display: flex;
    gap: 0;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 24px;
}
.cf-tab-btn {
    flex: 1;
    padding: 10px 16px;
    border: none;
    border-radius: 9px;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: background .15s, color .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.cf-tab-btn.active {
    background: var(--card-bg);
    color: var(--text);
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.cf-tab-btn .cf-tab-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    background: var(--border);
    color: var(--text-muted);
    flex-shrink: 0;
    transition: background .15s, color .15s;
}
.cf-tab-btn.active .cf-tab-num {
    background: var(--primary);
    color: #fff;
}
.cf-tab-btn.done .cf-tab-num {
    background: #10b981;
    color: #fff;
}
.cf-tab-panel { display: none; }
.cf-tab-panel.active { display: block; }
.cf-phone-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 480px) {
    .cf-phone-row { grid-template-columns: 1fr; }
}
.cf-sticky-save {
    position: sticky;
    bottom: 0;
    background: #fff;
    border-top: 1.5px solid var(--border);
    padding: 14px 0;
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 10;
}
.cf-sticky-save .btn { min-width: 200px; padding: 11px 24px; }

.cf-section .form-group { margin-bottom: 18px; }
.cf-section .form-group:last-child { margin-bottom: 0; }
.cf-section label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
}
.cf-section textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--text);
    background: var(--surface);
    font-family: inherit;
    box-sizing: border-box;
    resize: vertical;
    transition: border-color .15s;
}
.cf-section textarea:focus {
    outline: none;
    border-color: var(--primary);
}
.cf-section input[type=text],
.cf-section input[type=url],
.cf-section input[type=password],
.cf-section input[type=file] {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--text);
    background: var(--surface);
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color .15s;
}
.cf-section input:focus {
    outline: none;
    border-color: var(--primary);
}
.cf-section input[type=file] {
    padding: 7px 10px;
    cursor: pointer;
    background: var(--bg);
}
.cf-hint {
    font-size: 12.5px;
    color: var(--text-muted);
    margin-top: 6px;
    line-height: 1.55;
}
.cf-note {
    font-size: 13px;
    color: var(--text-muted);
    background: var(--primary-light);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    line-height: 1.55;
    margin-top: 6px;
}
/* Amber variant of .cf-note for scope/cost caveats - reads as "read this" without
   the alarm of an error state. */
.cf-note-warn {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #78350f;
}
.cf-existing-file {
    font-size: 12.5px;
    color: var(--success);
    margin-top: 6px;
}

/* ── Account Access cards ───────────────────────────────────────────
   Accounts that define a step checklist render as a full card; the rest
   keep the plain label + status radios below. */
.cf-acct {
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 18px 16px;
    margin-bottom: 16px;
    background: var(--surface);
}
.cf-acct-head { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.cf-acct-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #fff;
    flex-shrink: 0;
}
.cf-acct-title { font-size: 15px; font-weight: 700; color: var(--text); }
.cf-acct-intro { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin-bottom: 14px; }

.cf-acct-doc {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    background: var(--primary);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 16px;
    transition: background .15s, transform .15s;
}
.cf-acct-doc:hover { background: var(--primary-hover); transform: translateY(-1px); }

.cf-step {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px 13px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
    cursor: pointer;
    background: var(--bg);
    transition: border-color .15s, background .15s;
}
.cf-step:hover { border-color: var(--primary); }
.cf-step.done { border-color: var(--success); background: rgba(16, 185, 129, .07); }
.cf-step input { width: 17px; height: 17px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--success); cursor: pointer; }
.cf-step-num {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-light);
    min-width: 15px;
    margin-top: 2px;
    flex-shrink: 0;
}
.cf-step.done .cf-step-num { color: var(--success); }
.cf-step-label { font-size: 13.5px; font-weight: 600; color: var(--text); }
.cf-step-hint  { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; margin-top: 2px; }

@media (max-width: 600px) {
    .cf-acct { padding: 15px 14px 13px; }
    .cf-acct-doc { width: 100%; justify-content: center; }
}

/* ── Credentials repeater ───────────────────────────────────────── */
/* Scoped to .cf-wrap on purpose. The admin tables (Dev URLs, Credentials, Licenses,
   Vendors, Ad Spend, Website Catalog) put .cred-row / .cred-actions on <tr> and <td>;
   unscoped, the grid below took those rows out of the table's column layout and the
   body stopped lining up with the header. */
.cf-wrap .cred-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 10px;
    align-items: start;
    margin-bottom: 10px;
}
.cf-wrap .cred-row input { margin: 0; }
.cf-wrap .cred-actions { display: flex; gap: 6px; }
.cf-wrap .cred-remove, .cf-wrap .cred-edit {
    background: none;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 9px 11px;
    transition: color .15s, border-color .15s;
}
.cf-wrap .cred-remove:hover { color: var(--danger); border-color: var(--danger); }
.cf-wrap .cred-edit { font-size: 13px; }
.cf-wrap .cred-edit:hover { color: var(--primary); border-color: var(--primary); }
/* Standing in for the password box on a row that already has one stored. Matches the
   input's box metrics so the grid row stays aligned with its neighbours. */
.cf-wrap .cred-saved {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--success);
    background: var(--bg-secondary);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    box-sizing: border-box;
    min-height: 40px;
}
.cf-wrap .cred-eye {
    position: absolute;
    right: 0; top: 0; bottom: 0;
    padding: 0 10px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 14px;
    display: flex;
    align-items: center;
}
.cf-wrap .cred-eye:hover { color: var(--text); }
.cf-wrap .cred-labels {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 10px;
    margin-bottom: 6px;
}
.cf-wrap .cred-labels span {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ── Submit area ────────────────────────────────────────────────── */
.cf-submit-area {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 24px;
    background: var(--surface);
    border-top: 1.5px solid var(--border);
    box-shadow: 0 -4px 16px rgba(0,0,0,.07);
}
.cf-submit-area .btn { min-width: 200px; padding: 12px 28px; font-size: 15px; }
#formArea { padding-bottom: 80px; }

/* ── Success state ──────────────────────────────────────────────── */
.cf-success {
    background: var(--surface);
    border: 1.5px solid #A7F3D0;
    border-radius: var(--radius-lg);
    padding: 40px 36px;
    text-align: center;
}
.cf-success-icon { font-size: 40px; color: var(--success); margin-bottom: 14px; }
.cf-success-title { font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.cf-success-sub { font-size: 14px; color: var(--text-muted); line-height: 1.6; }

/* ── Payment toggle ─────────────────────────────────────────────── */
.pay-toggle {
    display: flex;
    gap: 0;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.pay-toggle-btn {
    flex: 1;
    cursor: pointer;
}
.pay-toggle-btn input[type=radio] { display: none; }
.pay-toggle-btn span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 16px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg);
    transition: background .15s, color .15s;
    border-right: 1.5px solid var(--border);
    white-space: nowrap;
}
.pay-toggle-btn:last-child span { border-right: none; }
.pay-toggle-btn input:checked + span {
    background: var(--primary);
    color: #fff;
}

@media (max-width: 600px) {
    .cf-wrap { padding: 28px 16px 60px; }
    .cf-section { padding: 20px 16px 18px; }
    .cf-wrap .cred-row { grid-template-columns: 1fr; }
    .cf-wrap .cred-labels { display: none; }
    .cf-wrap .cred-actions { width: 100%; }
    .cf-wrap .cred-remove, .cf-wrap .cred-edit { flex: 1; }
    /* Three steps do not fit side by side, so stack the number over the label. */
    .cf-tab-btn { flex-direction: column; gap: 5px; padding: 9px 4px; font-size: 11.5px; text-align: center; line-height: 1.25; }
}

/* ── Admin view history ─────────────────────────────────────────── */
.cf-admin-btn {
    position: fixed;
    top: 14px;
    right: 16px;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: border-color .15s, color .15s;
    font-family: inherit;
}
.cf-admin-btn:hover { border-color: var(--primary); color: var(--primary); }
.cf-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.cf-modal-overlay.open { display: flex; }
.cf-modal-box {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg, 0 20px 40px rgba(0,0,0,.15));
    width: 100%;
    max-width: 620px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}
.cf-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 16px;
    border-bottom: 1.5px solid var(--border);
    flex-shrink: 0;
}
.cf-modal-head h3 { font-size: 15px; font-weight: 700; color: var(--text); margin: 0; }
.cf-modal-close {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 6px;
    line-height: 1;
}
.cf-modal-close:hover { color: var(--text); }
.cf-modal-body { overflow-y: auto; padding: 0; }
.cf-vh-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cf-vh-table th {
    text-align: left;
    padding: 10px 16px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    border-bottom: 1.5px solid var(--border);
    background: var(--bg);
    position: sticky;
    top: 0;
}
.cf-vh-table td { padding: 10px 16px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: top; }
.cf-vh-table tr:last-child td { border-bottom: none; }
.cf-vh-ua { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.cf-vh-empty { padding: 32px; text-align: center; color: var(--text-muted); font-size: 13.5px; }

/* ── Attachment strip ───────────────────────────────────────────────
   Shared by both Add Task modals (admin/tasks.php #tkModal and the
   quick-add one in includes/sidebar.php), which have to look identical.
   The whole box is a drop target, so it reads as one dashed well rather
   than a button with a list bolted underneath. */
.att-zone {
    border: 1px dashed var(--border);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    transition: border-color .12s, background .12s;
}
.att-zone.drag { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 7%, transparent); }
.att-list { display: flex; flex-wrap: wrap; gap: 8px; }
.att-list:empty { display: none; }
.att-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 4px 8px;
    max-width: 280px;
    font-size: 12.5px;
}
/* Staged on a task that does not exist yet: dashed and dimmed until saving uploads it */
.att-item.pending { border-style: dashed; opacity: .75; }
.att-item a { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--text); text-decoration: none; }
.att-item a:hover { color: var(--primary); }
.att-thumb { width: 26px; height: 26px; object-fit: cover; border-radius: 5px; flex-shrink: 0; display: block; }
.att-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-size { color: var(--text-muted); font-size: 11px; flex-shrink: 0; }
.att-del {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    padding: 0 2px;
    flex-shrink: 0;
}
.att-del:hover { color: #ef4444; }
.att-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.att-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 5px 10px;
    font-size: 12.5px;
    font-weight: 600;
    font-family: inherit;
    color: var(--text-muted);
    background: var(--surface);
    cursor: pointer;
    flex-shrink: 0;
}
.att-add:hover { border-color: var(--primary); color: var(--primary); }
.att-hint { font-size: 11px; color: var(--text-muted); min-width: 0; }

/* ── Task checklist strip ───────────────────────────────────────────────
   The subtask list that sits under a task's Description. Shared by both Add
   Task modals (admin/tasks.php #tkModal and the quick-add one in
   includes/sidebar.php), which have to look identical. Same dashed well as
   the attachment strip above, so the two read as a pair. */
.ck-zone {
    border: 1px dashed var(--border);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ck-list { display: flex; flex-direction: column; gap: 2px; }
.ck-list:empty { display: none; }
.ck-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 5px 6px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.45;
}
.ck-item:hover { background: var(--bg-alt); }
/* Staged on a task that does not exist yet: dashed and dimmed until saving creates it */
.ck-item.pending { border: 1px dashed var(--border); opacity: .8; padding: 4px 6px; }
.ck-item input[type="checkbox"] { width: auto; margin: 2px 0 0; flex-shrink: 0; cursor: pointer; }
.ck-text {
    flex: 1;
    min-width: 0;
    color: var(--text);
    cursor: text;
    word-break: break-word;
    border-radius: 4px;
    padding: 1px 3px;
}
.ck-text:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.ck-item.done .ck-text { text-decoration: line-through; color: var(--text-muted); }
/* The inline rename field replaces .ck-text in place, so it has to sit flush */
.ck-edit {
    flex: 1;
    min-width: 0;
    font: inherit;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--primary);
    border-radius: 5px;
    padding: 1px 4px;
}
.ck-del {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    padding: 0 2px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity .12s;
}
.ck-item:hover .ck-del, .ck-del:focus { opacity: 1; }
.ck-del:hover { color: #ef4444; }
.ck-bar { display: flex; align-items: center; gap: 8px; }
.ck-add-input {
    flex: 1;
    min-width: 0;
    font: inherit;
    font-size: 12.5px;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 6px 9px;
}
.ck-add-input:focus { outline: none; border-color: var(--primary); }
/* "2 of 5 done" beside the Checklist label, with a thin bar underneath it */
.ck-progress { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; color: var(--text-muted); }
.ck-progress:empty { display: none; }
.ck-progress-track { width: 54px; height: 4px; border-radius: 3px; background: var(--border); overflow: hidden; }
.ck-progress-fill { height: 100%; background: var(--primary); border-radius: 3px; transition: width .15s; }
.ck-progress.all-done .ck-progress-fill { background: #059669; }
.ck-progress.all-done { color: #059669; }