/* ───────────────────────────────────────────────────────────────────────
   Boost Boss — Dashboard Shell
   Shared design system + chrome (sidebar, top bar, content area) used by
   both /publish/dashboard (developer.html) and /ads/dashboard
   (advertiser.html). Single source of truth so the two dashboards stay
   visually aligned.

   Notes for the maintenance pass after the Phase-1 incident:
   - Everything below is class-scoped. No bare element selectors
     (no `nav {}`, `header {}`, `main {}`). This avoids the kind of
     collision that broke /publish/dashboard last time, where a stale
     `nav {…}` rule from the old chrome matched the new sidebar's inner
     <nav> and forced position:sticky on it inside the grid layout.
   - The sidebar's internal nav element is a <div role="navigation"> in
     the HTML rather than <nav> — belt + braces against any future
     bare-`nav` rule sneaking back in.
   ─────────────────────────────────────────────────────────────────── */

:root {
    /* ─── Color tokens ────────────────────────────────────────────── */
    --shell-brand-pink:        #FF2D78;
    --shell-brand-pink-dark:   #E01E65;
    --shell-brand-pink-soft:   #FFF0F6;
    --shell-brand-cyan:        #04BEFE;
    --shell-brand-violet:      #9D7AFF;
    --shell-brand-yellow:      #FFE600;

    --shell-ink:               #1A1A2E;
    --shell-ink-soft:          #4B5563;
    --shell-muted:             #6B7280;
    --shell-muted-2:           #9CA3AF;

    --shell-page-bg:           #FAFAF7;
    --shell-surface:           #FFFFFF;
    --shell-surface-2:         #F9FAFB;
    --shell-surface-3:         #F3F4F6;

    --shell-border:            #E5E7EB;
    --shell-border-soft:       #F0F0F2;
    --shell-border-strong:     #D1D5DB;

    --shell-success:           #1D9E75;
    --shell-success-bg:        #ECFDF5;
    --shell-warning:           #B97309;
    --shell-warning-bg:        #FFF7E6;
    --shell-danger:            #E24B4A;
    --shell-danger-bg:         #FEF2F2;
    --shell-info:              #2563EB;
    --shell-info-bg:           #EFF6FF;

    --shell-sidebar-bg:        #0F0F1A;
    --shell-sidebar-bg-hover:  #1A1A2E;
    --shell-sidebar-text:      #C4C6CF;
    --shell-sidebar-text-muted:#7C7E89;
    --shell-sidebar-text-active:#FFFFFF;
    --shell-sidebar-border:    #1F2030;

    --shell-product-accent:    var(--shell-brand-pink);
    --shell-product-accent-bg: var(--shell-brand-pink-soft);

    /* ─── Layout tokens ───────────────────────────────────────────── */
    --shell-sidebar-w:         240px;
    --shell-sidebar-w-collapsed: 64px;
    --shell-topbar-h:          56px;
    /* No max-width cap — content reaches both side edges of the .shell-main
       inner area (only the --shell-content-px gutter remains on each side).
       Was 1200px which centered everything with ~250px whitespace on each
       side on wide viewports; Andy wanted edge-to-edge. */
    --shell-content-max:       none;
    --shell-content-px:        28px;

    /* ─── Typography ──────────────────────────────────────────────── */
    --shell-font-sans:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --shell-font-display:      'Space Grotesk', var(--shell-font-sans);
    --shell-font-mono:         'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

    /* ─── Spacing scale ───────────────────────────────────────────── */
    --shell-s-1:   4px;
    --shell-s-2:   8px;
    --shell-s-3:   12px;
    --shell-s-4:   16px;
    --shell-s-5:   24px;
    --shell-s-6:   32px;
    --shell-s-7:   48px;
    --shell-s-8:   64px;

    /* ─── Radius + shadow ─────────────────────────────────────────── */
    --shell-radius-sm:  6px;
    --shell-radius-md:  8px;
    --shell-radius-lg:  12px;
    --shell-radius-xl:  16px;
    --shell-radius-pill: 100px;

    --shell-shadow-card: 0 1px 2px rgba(15, 15, 26, 0.04),
                         0 8px 24px rgba(15, 15, 26, 0.05);
    --shell-shadow-pop:  0 24px 70px rgba(15, 15, 26, 0.20);
    --shell-shadow-nav:  0 2px 10px rgba(0, 0, 0, 0.03);

    /* ─── Transitions ─────────────────────────────────────────────── */
    --shell-trans-fast:   120ms cubic-bezier(0.4, 0, 0.2, 1);
    --shell-trans-base:   200ms cubic-bezier(0.4, 0, 0.2, 1);
    --shell-trans-sidebar:220ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ─────────────────────────────────────────────────────────────────────
   Page root — `.shell-wrap` is the CSS grid container
   ───────────────────────────────────────────────────────────────────── */
.shell-wrap[data-shell-layout="dashboard"] {
    background: var(--shell-page-bg);
    color: var(--shell-ink);
    font-family: var(--shell-font-sans);
    font-size: 14px;
    line-height: 1.5;
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--shell-sidebar-w) 1fr;
    grid-template-rows: var(--shell-topbar-h) 1fr;
    grid-template-areas:
        "sidebar topbar"
        "sidebar main";
    transition: grid-template-columns var(--shell-trans-sidebar);
}
.shell-wrap[data-shell-sidebar="collapsed"] {
    grid-template-columns: var(--shell-sidebar-w-collapsed) 1fr;
}

.shell-wrap[data-shell-product="publisher"]  { --shell-product-accent: var(--shell-brand-pink); }
.shell-wrap[data-shell-product="advertiser"] { --shell-product-accent: var(--shell-brand-pink); }

/* ─────────────────────────────────────────────────────────────────────
   Sidebar
   ───────────────────────────────────────────────────────────────────── */
.shell-sidebar {
    grid-area: sidebar;
    background: var(--shell-sidebar-bg);
    color: var(--shell-sidebar-text);
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--shell-sidebar-border);
    overflow: hidden;
    position: sticky;
    top: 0;
    height: 100vh;
}

.shell-sidebar__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--shell-sidebar-border);
    min-height: var(--shell-topbar-h);
    box-sizing: border-box;
    flex-shrink: 0;
}
.shell-sidebar__logo {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.shell-sidebar__logo svg { width: 100%; height: 100%; }
.shell-sidebar__product {
    font-family: var(--shell-font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--shell-sidebar-text-active);
    letter-spacing: -0.3px;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity var(--shell-trans-sidebar);
    /* Flex-grow so it pushes the collapse-btn to the right edge of the head. */
    flex: 1;
}
.shell-sidebar__product .accent { color: var(--shell-brand-pink); }
.shell-wrap[data-shell-sidebar="collapsed"] .shell-sidebar__product { opacity: 0; pointer-events: none; }

.shell-sidebar__nav {
    flex: 1;
    overflow-y: auto;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.shell-sidebar__nav::-webkit-scrollbar { width: 6px; }
.shell-sidebar__nav::-webkit-scrollbar-thumb { background: var(--shell-sidebar-border); border-radius: 3px; }

.shell-nav-section-label {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--shell-sidebar-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 12px 10px 6px;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity var(--shell-trans-sidebar);
}
.shell-wrap[data-shell-sidebar="collapsed"] .shell-nav-section-label {
    opacity: 0;
    height: 12px;
    padding-top: 12px;
    padding-bottom: 0;
}

.shell-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: var(--shell-radius-md);
    color: var(--shell-sidebar-text);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--shell-trans-fast), color var(--shell-trans-fast);
    white-space: nowrap;
    overflow: hidden;
    border: 1px solid transparent;
    background: transparent;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    text-align: left;
    position: relative;
}
.shell-nav-item:hover {
    background: var(--shell-sidebar-bg-hover);
    color: var(--shell-sidebar-text-active);
}
.shell-nav-item.is-active {
    background: var(--shell-sidebar-bg-hover);
    color: var(--shell-sidebar-text-active);
    border-color: var(--shell-sidebar-border);
}
.shell-nav-item.is-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 18px;
    background: var(--shell-product-accent);
    border-radius: 0 2px 2px 0;
    transform: translateY(-50%);
}
.shell-nav-item__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.shell-nav-item__icon svg { width: 100%; height: 100%; }
.shell-nav-item__label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity var(--shell-trans-sidebar);
}
.shell-wrap[data-shell-sidebar="collapsed"] .shell-nav-item__label { opacity: 0; pointer-events: none; }
.shell-wrap[data-shell-sidebar="collapsed"] .shell-nav-item {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}
.shell-wrap[data-shell-sidebar="collapsed"] .shell-nav-item__icon { margin: 0 auto; }

.shell-sidebar__foot {
    border-top: 1px solid var(--shell-sidebar-border);
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}
.shell-sidebar__user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px;
    border-radius: var(--shell-radius-md);
    color: var(--shell-sidebar-text);
}
.shell-sidebar__user-avatar {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--shell-product-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    font-family: var(--shell-font-display);
}
.shell-sidebar__user-text {
    flex: 1;
    overflow: hidden;
    min-width: 0;
    transition: opacity var(--shell-trans-sidebar);
}
.shell-sidebar__user-text .shell-user-name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--shell-sidebar-text-active);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.shell-sidebar__user-text .shell-user-role {
    display: block;
    font-size: 11px;
    color: var(--shell-sidebar-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.shell-wrap[data-shell-sidebar="collapsed"] .shell-sidebar__user-text { opacity: 0; pointer-events: none; }

/* Sidebar collapse toggle. Lives in .shell-sidebar__head, right-aligned
   next to the brand text. Compact 32x32 square that fits cleanly inside
   the head's 14px padding. When the sidebar is collapsed (64px wide),
   the brand text fades out and the head re-centers the logo + button so
   both stay tappable. The icon is a symmetric panel-left shape so no
   rotation is needed for state feedback — position alone tells the user
   what it does. */
.shell-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--shell-radius-sm);
    color: var(--shell-sidebar-text-muted);
    cursor: pointer;
    transition: background var(--shell-trans-fast), color var(--shell-trans-fast);
}
.shell-collapse-btn:hover {
    background: var(--shell-sidebar-bg-hover);
    color: var(--shell-sidebar-text-active);
}
.shell-collapse-btn svg { width: 18px; height: 18px; }

/* Collapsed-mode layout: 64px is too narrow for logo + button side by
   side AND the brand text is faded, so we tuck the button under the
   logo (column flex) and shrink padding to keep it visible. */
.shell-wrap[data-shell-sidebar="collapsed"] .shell-sidebar__head {
    flex-direction: column;
    gap: 8px;
    padding: 14px 8px;
}

/* ─────────────────────────────────────────────────────────────────────
   Top bar
   ───────────────────────────────────────────────────────────────────── */
.shell-topbar {
    grid-area: topbar;
    background: var(--shell-surface);
    border-bottom: 1px solid var(--shell-border);
    display: flex;
    align-items: center;
    gap: var(--shell-s-4);
    padding: 0 var(--shell-s-5);
    height: var(--shell-topbar-h);
    box-sizing: border-box;
    position: sticky;
    top: 0;
    z-index: 50;
}

.shell-topbar__breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--shell-ink);
    margin-right: auto;
    min-width: 0;
    flex-shrink: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.shell-topbar__breadcrumb .shell-crumb-sep {
    color: var(--shell-muted-2);
    font-weight: 400;
    margin: 0 2px;
}
.shell-topbar__breadcrumb .shell-crumb-muted { color: var(--shell-muted); font-weight: 500; }

.shell-topbar__search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: var(--shell-surface-3);
    border: 1px solid var(--shell-border);
    border-radius: var(--shell-radius-md);
    color: var(--shell-muted);
    font-size: 13px;
    cursor: pointer;
    min-width: 220px;
    transition: background var(--shell-trans-fast), border-color var(--shell-trans-fast);
    font-family: inherit;
}
.shell-topbar__search:hover {
    background: var(--shell-surface);
    border-color: var(--shell-border-strong);
}
.shell-topbar__search kbd {
    margin-left: auto;
    background: var(--shell-surface);
    border: 1px solid var(--shell-border);
    border-bottom-width: 2px;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 10.5px;
    font-family: var(--shell-font-mono);
    color: var(--shell-muted);
}

.shell-topbar__actions {
    display: flex;
    align-items: center;
    gap: 6px;
}
.shell-icon-btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--shell-radius-md);
    color: var(--shell-ink-soft);
    cursor: pointer;
    position: relative;
    transition: background var(--shell-trans-fast), border-color var(--shell-trans-fast);
}
.shell-icon-btn:hover {
    background: var(--shell-surface-3);
    border-color: var(--shell-border);
    color: var(--shell-ink);
}
.shell-icon-btn svg { width: 18px; height: 18px; }
.shell-icon-btn__badge {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 7px;
    height: 7px;
    background: var(--shell-product-accent);
    border-radius: 50%;
    border: 1.5px solid var(--shell-surface);
}

/* ─────────────────────────────────────────────────────────────────────
   Phase 2 — hash-route visibility
   Routes are hidden by default; the wrapper's `data-shell-active-route`
   attribute reveals just the matching one. JS sets the attribute from
   window.location.hash (e.g. `#/performance` → "performance").

   IMPORTANT — modals (deposit / add-rule / compare / settings / etc.)
   must NOT live inside a [data-shell-route] wrapper, or they'll hide
   along with the parent route. Modals are siblings of the route blocks.
   ───────────────────────────────────────────────────────────────────── */
[data-shell-route] {
    display: none;
}
.shell-wrap[data-shell-active-route="home"]         [data-shell-route="home"],
.shell-wrap[data-shell-active-route="performance"]  [data-shell-route="performance"],
.shell-wrap[data-shell-active-route="campaigns"]    [data-shell-route="campaigns"],
.shell-wrap[data-shell-active-route="billing"]      [data-shell-route="billing"],
.shell-wrap[data-shell-active-route="setup"]        [data-shell-route="setup"],
.shell-wrap[data-shell-active-route="integrations"] [data-shell-route="integrations"],
.shell-wrap[data-shell-active-route="placements"]   [data-shell-route="placements"],
.shell-wrap[data-shell-active-route="payouts"]      [data-shell-route="payouts"],
.shell-wrap[data-shell-active-route="promote"]      [data-shell-route="promote"],
.shell-wrap[data-shell-active-route="usage"]        [data-shell-route="usage"],
.shell-wrap[data-shell-active-route="api"]          [data-shell-route="api"] {
    display: block;
}
/* Onboarding banner / full-width announcements that should appear on
   every route — add data-shell-route="any" to opt in. */
.shell-wrap[data-shell-active-route] [data-shell-route="any"] {
    display: block;
}

/* ─────────────────────────────────────────────────────────────────────
   Main content area
   ───────────────────────────────────────────────────────────────────── */
.shell-main {
    grid-area: main;
    padding: var(--shell-s-5) var(--shell-content-px) var(--shell-s-8);
    overflow-x: hidden;
    min-width: 0;
}
.shell-main__inner {
    max-width: var(--shell-content-max);
    margin: 0 auto;
    width: 100%;
}

/* Page heading — shown above each route's content */
.shell-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--shell-s-4);
    margin-bottom: var(--shell-s-5);
    padding-bottom: var(--shell-s-4);
    border-bottom: 1px solid var(--shell-border-soft);
    flex-wrap: wrap;
}
.shell-page-title {
    font-family: var(--shell-font-display);
    font-size: 24px;
    font-weight: 700;
    color: var(--shell-ink);
    margin: 0;
    letter-spacing: -0.5px;
}
.shell-page-sub {
    font-size: 13px;
    color: var(--shell-muted);
    margin-top: 4px;
}

/* ─────────────────────────────────────────────────────────────────────
   Mobile fallback (<960px)
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
    .shell-wrap[data-shell-layout="dashboard"] {
        grid-template-columns: 1fr;
        grid-template-areas:
            "topbar"
            "main";
    }
    .shell-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: var(--shell-sidebar-w);
        z-index: 200;
        transform: translateX(-100%);
        transition: transform var(--shell-trans-sidebar);
        box-shadow: var(--shell-shadow-pop);
    }
    .shell-wrap[data-shell-sidebar="mobile-open"] .shell-sidebar {
        transform: translateX(0);
    }
    .shell-topbar__search { min-width: 0; }
    .shell-topbar__search-label { display: none; }
}