/* ============================================================
   TP PH PERFORMANCE PULSE — LAYOUT
   App shell, sidebar, topbar, filter ribbon, page grid.
   ============================================================ */

.app-container {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    grid-template-rows: 100vh;
    height: 100vh;
    overflow: hidden;
    transition: grid-template-columns var(--transition-slow);
}
.app-container.sidebar-collapsed { grid-template-columns: var(--sidebar-collapsed) 1fr; }

/* ============================================================ SIDEBAR ============================================================ */
.sidebar {
    grid-row: 1; grid-column: 1;
    display: flex; flex-direction: column;
    background: var(--sidebar-bg);
    background-image: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-2) 100%);
    border-right: 1px solid var(--sidebar-border);
    height: 100vh; overflow: hidden; position: relative; z-index: 100;
    transition: width var(--transition-slow);
    width: var(--sidebar-width);
}
/* faint magenta wash at the top of the rail for depth */
.sidebar::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 220px; pointer-events: none;
    background: radial-gradient(120% 80% at 30% 0%, rgba(230,0,126,0.16), transparent 70%);
}
.sidebar > * { position: relative; z-index: 1; }
.sidebar-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 14px; height: var(--topbar-height);
    border-bottom: 1px solid var(--sidebar-border); flex-shrink: 0;
}
.logo { display: flex; align-items: center; gap: 11px; overflow: hidden; min-width: 0; }
.logo-mark { flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.logo-mark .app-logo { height: 40px; width: auto; }
.logo-text { display: flex; flex-direction: column; line-height: 1.18; overflow: hidden; white-space: nowrap; transition: opacity var(--transition-base); }
.logo-title { font-size: 0.95rem; font-weight: 800; color: var(--sidebar-text-strong); letter-spacing: -0.02em; display: flex; align-items: center; }
/* Sidebar BETA badge: tooltip opens downward (logo is at top of screen) */
.logo-title .beta-badge[data-tip]::after {
    bottom: unset;
    top: calc(100% + 8px);
    left: 0; transform: none;
}
.logo-version { font-size: 0.625rem; color: var(--sidebar-muted); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.sidebar-toggle { color: var(--sidebar-muted); flex-shrink: 0; }
.sidebar-toggle:hover { color: var(--sidebar-text-strong); background: var(--sidebar-hover); }
/* Footer slogan ships as black artwork; invert so it reads on the dark rail. */
.sidebar .brand-tagline { filter: invert(1) brightness(2.4); }

.nav-section-label {
    font-size: 0.625rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--sidebar-muted); padding: 16px 18px 6px; white-space: nowrap; overflow: hidden;
    transition: opacity var(--transition-base);
}
.nav-menu { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 4px 10px 10px; scrollbar-width: none; -ms-overflow-style: none; }
.nav-menu::-webkit-scrollbar { display: none; }
.nav-list { display: flex; flex-direction: column; gap: 1px; }
.nav-item {
    display: flex; align-items: center; gap: 11px; padding: 9px 11px;
    border-radius: var(--radius-md); cursor: pointer; color: var(--sidebar-text);
    transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
    white-space: nowrap; position: relative; user-select: none; min-height: 40px;
}
.nav-item:hover { background: var(--sidebar-hover); color: var(--sidebar-text-strong); }
.nav-item.active {
    background: var(--sidebar-active-bg); color: #fff;
    box-shadow: inset 0 0 0 1px rgba(var(--magenta-rgb), 0.35), 0 0 18px rgba(var(--magenta-rgb), 0.22);
}
.nav-item.active::before {
    content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px;
    border-radius: var(--radius-pill); background: var(--magenta-bright);
    box-shadow: 0 0 10px rgba(var(--magenta-rgb), 0.7);
}
.nav-item.active .nav-icon svg { color: var(--magenta-bright); }
.nav-icon { flex-shrink: 0; width: 20px; height: 20px; display: grid; place-items: center; color: inherit; }
.nav-icon svg { width: 19px; height: 19px; }
.nav-label { font-size: 0.875rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; flex: 1; transition: opacity var(--transition-base); }
.nav-badge { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.04em; padding: 2px 7px; border-radius: var(--radius-pill); white-space: nowrap; flex-shrink: 0; }
.nav-badge.alert { background: rgba(var(--accent-danger-rgb), 0.15); color: var(--accent-danger); }
.nav-sep { height: 1px; background: var(--sidebar-border); margin: 10px 8px; }

/* Collapsed state */
.app-container.sidebar-collapsed .sidebar { width: var(--sidebar-collapsed); }
.app-container.sidebar-collapsed .logo-text,
.app-container.sidebar-collapsed .nav-label,
.app-container.sidebar-collapsed .nav-badge { opacity: 0; pointer-events: none; width: 0; overflow: hidden; }
/* remove section labels entirely so vertical rhythm stays even */
.app-container.sidebar-collapsed .nav-section-label { display: none; }
/* keep the TP mark visible & centered; it becomes the expand control */
.app-container.sidebar-collapsed .sidebar-header { justify-content: center; padding: 0; }
.app-container.sidebar-collapsed .logo { gap: 0; }
.app-container.sidebar-collapsed .logo-text { display: none; }
.app-container.sidebar-collapsed .logo-mark { cursor: pointer; }
.app-container.sidebar-collapsed .sidebar-toggle { display: none; }
/* label/badge fully removed from flow (they have flex:1 and would otherwise
   grow even at width:0, shoving the icon left) */
.app-container.sidebar-collapsed .nav-label,
.app-container.sidebar-collapsed .nav-badge { display: none; }
/* gap:0 so the single visible icon truly centers */
.app-container.sidebar-collapsed .nav-item { justify-content: center; gap: 0; padding: 9px 0; }
.app-container.sidebar-collapsed .nav-menu { padding-left: 0; padding-right: 0; }
.app-container.sidebar-collapsed .nav-list { padding: 0 13px; }
.app-container.sidebar-collapsed .nav-item.active::before { display: none; }
.app-container.sidebar-collapsed .nav-sep { margin-left: 16px; margin-right: 16px; }
.app-container.sidebar-collapsed .nav-item::after {
    content: attr(data-tooltip); position: absolute; left: calc(var(--sidebar-collapsed) + 8px);
    background: var(--bg-surface-3); color: var(--text-primary); font-size: 0.8125rem; font-weight: 500;
    padding: 6px 10px; border-radius: var(--radius-md); white-space: nowrap; pointer-events: none;
    opacity: 0; transform: translateX(-4px); transition: opacity var(--transition-fast), transform var(--transition-fast);
    z-index: 200; box-shadow: var(--shadow-md); border: 1px solid var(--border-default);
}
.app-container.sidebar-collapsed .nav-item:hover::after { opacity: 1; transform: translateX(0); }

/* ============================================================ MAIN ============================================================ */
.main-content { grid-column: 2; display: flex; flex-direction: column; height: 100vh; overflow: hidden; background-color: var(--bg-app); }
.main-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; display: flex; flex-direction: column; min-height: 0; }
#global-ribbon { position: sticky; top: 0; z-index: 41; flex-shrink: 0; }
#global-banner { position: sticky; top: 60px; z-index: 40; flex-shrink: 0; background: var(--bg-surface-2); border-bottom: 1px solid var(--border-subtle); }
/* Premium canvas — deep navy with magenta/violet glow + faint grid (dark);
   a soft, subtle version in light. Fixed behind scrolling content for depth. */
[data-theme="dark"] .main-content {
    background-image:
        radial-gradient(1100px 520px at 88% -8%, rgba(230,0,126,0.13), transparent 62%),
        radial-gradient(820px 480px at -4% 2%, rgba(106,63,240,0.12), transparent 58%),
        linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 46px 46px, 46px 46px;
    background-repeat: no-repeat, no-repeat, repeat, repeat;
}
[data-theme="light"] .main-content {
    background-image:
        radial-gradient(1000px 480px at 90% -10%, rgba(230,0,126,0.06), transparent 60%),
        radial-gradient(780px 440px at -4% 2%, rgba(106,63,240,0.05), transparent 56%),
        linear-gradient(rgba(20,22,45,0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(20,22,45,0.022) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 46px 46px, 46px 46px;
    background-repeat: no-repeat, no-repeat, repeat, repeat;
}

.topbar {
    display: flex; align-items: center; justify-content: space-between;
    height: var(--topbar-height); padding: 0 24px; background: var(--bg-topbar);
    border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; gap: 16px;
    position: sticky; top: 0; z-index: 50;
}
.topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; }
.breadcrumb-item { color: var(--text-secondary); }
.breadcrumb-item.active { color: var(--text-primary); font-weight: 600; }
.breadcrumb-sep { color: var(--text-tertiary); font-size: 0.75rem; }

.mobile-menu-toggle { display: none; color: var(--text-secondary); }

.refresh-stamp { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.refresh-stamp span { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); }
.refresh-stamp b { font-size: 0.75rem; font-weight: 700; color: var(--text-secondary); }

.theme-toggle, .icon-btn {
    color: var(--text-secondary); width: 36px; height: 36px; border-radius: var(--radius-md);
    display: grid; place-items: center; transition: background var(--transition-fast), color var(--transition-fast);
}
.theme-toggle:hover, .icon-btn:hover { background: var(--bg-hover); color: var(--text-primary); }

/* ============================================================ PAGE CONTENT ============================================================ */
.page-content { flex: 1; padding: 28px 32px 44px; }
.page-inner { max-width: var(--content-max); margin: 0 auto; }

.page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; }
.page-header-left { min-width: 0; }
.page-title { font-size: 1.75rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.025em; margin-bottom: 3px; }
.page-subtitle { font-size: 1.0rem; color: var(--text-secondary); font-weight: 400; }
.page-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }

/* Grid helpers */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }

/* Financial Performance KPI band — hero(1,2) wider, std(3,4,5), projection panel(6) double-wide */
.rev-kpi-band { display: grid; grid-template-columns: 1.35fr 1.35fr 1fr 1fr 1fr 2fr; gap: 20px; align-items: stretch; }
/* Rev exec KPI band — sparklines removed, content vertically centered */
.rev-kpi-band .kpi-card { justify-content: center; padding: 24px 22px; }
.rev-kpi-band .kpi-card .kpi-top { gap: 18px; }
.rev-kpi-band .kpi-card .kpi-value { font-size: clamp(1.9rem, 2.3vw, 2.6rem); }
.rev-kpi-band .kpi-card .kpi-meta { gap: 28px; }
.rev-kpi-band .kpi-card .kpi-meta b { font-size: 0.9rem; }

/* Vertical table: center-align all non-name columns (overrides .numeric right-align) */
.vert-tbl table.data-table th.numeric,
.vert-tbl table.data-table td.numeric { text-align: center; }
.layout-content-aside { display: grid; grid-template-columns: 1fr 380px; gap: 20px; align-items: stretch; }

/* Executive mid layout — shares the 5-col rhythm of the KPI band so columns
   align to the cards above (main = first 3 cards, aside = last 2). */
.exec-mid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; align-items: stretch; }
.exec-mid .exec-main { grid-column: span 3; min-width: 0; }
.exec-mid .exec-aside { grid-column: span 2; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 1320px) { .exec-mid { grid-template-columns: 1fr; } .exec-mid .exec-main, .exec-mid .exec-aside { grid-column: 1 / -1; } }

/* ============================================================ GLOBAL FILTER RIBBON (app shell — always visible between topbar and page content) ============================================================ */
.app-filter-ribbon {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 0 24px; min-height: 60px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

.ribbon-group { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ribbon-label {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.09em; color: var(--text-quaternary); white-space: nowrap;
}
.ribbon-div { width: 1px; height: 26px; background: var(--border-subtle); flex-shrink: 0; align-self: center; }
.ribbon-spacer { flex: 1; min-width: 8px; }
.ribbon-filters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ribbon-date-sep {
    font-size: 0.82rem; color: var(--text-quaternary); flex-shrink: 0; line-height: 1;
}

/* Date inputs */
.ribbon-date-input {
    height: 37px; padding: 0 10px; width: 130px;
    background: var(--bg-input); border: 1px solid var(--border-default);
    border-radius: var(--radius-md); color: var(--text-primary);
    font-size: 0.92rem; font-family: inherit; font-weight: 500;
    transition: border-color var(--dur-micro), box-shadow var(--dur-micro);
    -webkit-appearance: none; appearance: none; color-scheme: inherit;
}
.ribbon-date-input:hover { border-color: var(--border-strong); }
.ribbon-date-input:focus {
    outline: none; border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(var(--accent-secondary-rgb), 0.12);
}
[data-theme="dark"] .ribbon-date-input { color-scheme: dark; }

/* Segmented buttons */
.ribbon-seg-sm { padding: 2px; gap: 1px; }
.ribbon-seg-sm .seg { padding: 6px 13px; font-size: 0.875rem; }

/* Filter dropdowns in the ribbon */
.ribbon-filter-ctrl .filter-trigger {
    min-width: 124px; max-width: 184px; padding: 6px 12px;
    font-size: 0.92rem; height: 37px;
}
.ribbon-filter-ctrl .ft-label { font-size: 0.67rem; }
.ribbon-filter-ctrl .ft-count { font-size: 0.67rem; }

@media (max-width: 980px) {
    .app-filter-ribbon { padding: 0 16px; gap: 8px; min-height: 52px; }
}

/* ============================================================ PAGE-LEVEL FILTER RIBBON (legacy — for pageScaffold compat) ============================================================ */
.filter-ribbon {
    background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
    padding: 12px 16px; margin-bottom: 22px;
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.filter-ribbon-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filter-ribbon-label { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); }
.filter-ribbon-divider { width: 1px; align-self: stretch; background: var(--border-subtle); margin: 2px 0; }
.filter-ribbon-spacer { flex: 1; }

/* ============================================================ TP BRANDING ============================================================ */
/* Real PNG assets used as-is (no auto-invert). Top-right swaps white/black by
   theme; the sidebar is always dark so it uses the white asset. */
.app-logo { display: block; width: auto; }
.logo-light { display: block; }
.logo-dark  { display: none; }
[data-theme="dark"] .logo-light { display: none; }
[data-theme="dark"] .logo-dark  { display: block; }

/* Top-right brand */
.topbar-divider { width: 1px; height: 26px; background: var(--border-default); margin: 0 6px; flex-shrink: 0; }
.topbar-brand { display: inline-flex; align-items: center; }
.topbar-brand .app-logo { height: 26px; }

/* Sidebar footer — Last Refreshed info */
.sidebar-footer {
    flex-shrink: 0; border-top: 1px solid var(--sidebar-border); padding: 12px 16px;
}
.slr-full { display: flex; flex-direction: column; gap: 2px; }
.slr-label {
    font-size: 0.67rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.1em; color: var(--sidebar-muted);
}
.slr-time {
    font-size: 0.9rem; font-weight: 600; color: var(--sidebar-text-strong);
    font-variant-numeric: tabular-nums; line-height: 1.2;
}
.slr-tz {
    font-size: 0.75rem; color: var(--sidebar-muted); margin-top: 1px;
}
.slr-mini { display: none; align-items: center; justify-content: center; }
.slr-mini svg { color: var(--sidebar-muted); }
.app-container.sidebar-collapsed .sidebar-footer { padding: 12px 0; }
.app-container.sidebar-collapsed .slr-full { display: none; }
.app-container.sidebar-collapsed .slr-mini { display: flex; }

/* ============================================================ MOBILE ============================================================ */
.mobile-only { display: none !important; }
@media (max-width: 980px) {
    .app-container { grid-template-columns: 0 1fr; }
    .app-container.mobile-open { grid-template-columns: var(--sidebar-width) 1fr; }
    .sidebar { position: fixed; left: 0; top: 0; z-index: 300; transform: translateX(-100%); transition: transform var(--transition-slow); box-shadow: var(--shadow-xl); }
    .app-container.mobile-open .sidebar { transform: translateX(0); }
    .mobile-only { display: flex !important; }
    .desktop-only { display: none !important; }
    .mobile-menu-toggle { display: grid; }
    .main-scroll { -webkit-overflow-scrolling: touch; }
    .page-content { padding: 18px 16px 40px; }
    .grid-2, .grid-3, .grid-4, .grid-5, .rev-kpi-band { grid-template-columns: 1fr; }
    .layout-content-aside { grid-template-columns: 1fr; }
    .topbar { padding: 0 16px; }
}
@media (min-width: 981px) and (max-width: 1320px) {
    .grid-5 { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .layout-content-aside { grid-template-columns: 1fr; }
    .rev-kpi-band { grid-template-columns: repeat(3, 1fr); }
}

/* Backdrop for mobile sidebar */
.mobile-backdrop { display: none; }
@media (max-width: 980px) {
    .app-container.mobile-open .mobile-backdrop {
        display: block; position: fixed; inset: 0; background: var(--bg-overlay); z-index: 200;
    }
}