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

/* ==================== SIDEBAR ==================== */
.app-sidebar {
    width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
    background: var(--navy-900); color: #B8C6DD;
    display: flex; flex-direction: column;
    position: fixed; inset: 0 auto 0 0; z-index: 1040;
    transition: transform .22s cubic-bezier(.4,0,.2,1);
}
.sidebar-brand {
    display: flex; align-items: center; justify-content: center;
    padding: 1.05rem .9rem .95rem; border-bottom: 1px solid rgba(255,255,255,.07);
}
/* The dark-surface lockup ships white + gold on transparent, so it needs no
   panel and no filter — it reads directly on the navy rail as designed. */
.brand-logo { width: 100%; max-width: 186px; height: auto; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.brand-text b     { color: #fff; font-size: .95rem; font-weight: 650; }
.brand-text small { color: #7E90AE; font-size: .66rem; letter-spacing: .02em; }

.nav-label {
    font-size: .6rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
    color: #5C6E8C; padding: 0 .85rem; margin: .85rem 0 .3rem;
}
/* Four groups instead of one — the first needs no top gap. */
.sidebar-nav > .nav-label:first-child { margin-top: .35rem; }
.sidebar-nav { padding: .25rem .55rem; }
.sidebar-link {
    display: flex; align-items: center; gap: .65rem;
    padding: .48rem .7rem; margin-bottom: .1rem; border-radius: 8px;
    color: #B8C6DD; text-decoration: none; font-size: .875rem; font-weight: 500;
    transition: background .15s ease, color .15s ease;
}
.sidebar-link i { font-size: 1rem; width: 18px; text-align: center; }
.sidebar-link:hover:not(.disabled) { background: rgba(255,255,255,.07); color: #fff; }
.sidebar-link.active { background: var(--accent); color: #fff; box-shadow: 0 2px 10px rgba(30,107,255,.35); }
.sidebar-link.disabled { opacity: .38; cursor: not-allowed; }
.sidebar-link.active 
.sidebar-brands { padding: 0 .55rem; margin-top: .25rem; }
.brand-row {
    display: flex; align-items: center; gap: .5rem;
    padding: .42rem .7rem; font-size: .78rem; color: #A6B5CE;
}
.brand-row.muted { opacity: .45; }
.brand-row .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; display: inline-block; }

.sidebar-footer {
    padding: .7rem 1rem .9rem;
    border-top: 1px solid rgba(255,255,255,.07);
    font-size: .7rem; color: #6D7F9C;
}

/* ==================== MAIN ==================== */
.app-main { flex: 1; margin-left: var(--sidebar-w); display: flex; flex-direction: column; min-width: 0; }

.main-header {
    min-height: var(--header-h); background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 0 rgba(16,32,64,.03);
    display: flex; align-items: center; gap: 1rem; padding: .9rem 1.5rem;
    position: sticky; top: 0; z-index: 1020;
}
.header-title h1 { font-size: 1.15rem; font-weight: 650; margin: 0; }
.header-title p  { font-size: .8rem; color: var(--text-soft); margin: .1rem 0 0; }

.header-kpis { margin-left: auto; display: flex; gap: .5rem; }
.hkpi {
    display: flex; flex-direction: column; align-items: flex-end;
    padding: .35rem .9rem; border-left: 1px solid var(--border); line-height: 1.2;
}
.hkpi b    { font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; }
.hkpi span { font-size: .64rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-dim); }
/* The denominator. One resolved identity out of 54,479 records still waiting
   is a very different statement from a bare "1", and the bare number invites
   the reader to assume the smaller figure is the whole picture. */
.hkpi em {
    font-size: .6rem; font-style: normal; color: var(--text-dim);
    opacity: .8; white-space: nowrap; margin-top: .05rem;
}

.main-content { padding: 1.25rem 1.5rem 2.5rem; flex: 1; }
.page-section { display: none; }
.page-section.active { display: block; }

@media (max-width: 1199.98px) { .header-kpis { display: none; } }
@media (max-width: 991.98px) {
    .app-sidebar { transform: translateX(-100%); }
    .app-sidebar.open { transform: none; }
    .app-main { margin-left: 0; }
    .main-content { padding: 1rem; }
}

/* ==================== BRAND LOGOS ==================== */
/* The master TMC lockup is black artwork on transparent, so it needs
   inverting to read on the navy sidebar. */
/* Parent-company lockup, pinned to the bottom of the rail. margin-top:auto
   pushes it down; the portfolio list above it stays where it is. */
.sidebar-tmc {
    margin-top: auto; padding: 1rem 1rem .5rem;
    border-top: 1px solid rgba(255,255,255,.07);
}
.sidebar-tmc img {
    width: 100%; height: auto; display: block;
    filter: invert(1) brightness(1.9) contrast(.92); opacity: .9;
}
/* All five brands now ship as horizontal lockups (aspect 2.1–3.9), so one
   height reads consistently — which is how the master TMC lockup sets them.
   The two narrowest are nudged down so they do not look chunkier than the
   wide ones at the same height. */
.blogo {
    width: 132px; height: 34px; flex: 0 0 132px;
    display: inline-flex; align-items: center; justify-content: flex-start;
}
.blogo img {
    max-width: 100%; max-height: 26px; width: auto; object-fit: contain;
    filter: invert(1) brightness(1.85) contrast(.9); opacity: .88;
}
.b-cemsites    img { max-height: 23px; }   /* aspect 2.57 */
.b-justdigital img { max-height: 21px; }   /* aspect 2.10 */
.brand-row.muted .blogo img { opacity: .42; }

/* Live-source pulse */
.live {
    width: 6px; height: 6px; border-radius: 50%; background: var(--ok);
    display: inline-block; flex: 0 0 6px; margin-left: auto;
    box-shadow: 0 0 0 0 rgba(0,166,81,.6); animation: livePulse 2.4s infinite;
}
@keyframes livePulse {
    0%   { box-shadow: 0 0 0 0 rgba(0,166,81,.55); }
    70%  { box-shadow: 0 0 0 6px rgba(0,166,81,0); }
    100% { box-shadow: 0 0 0 0 rgba(0,166,81,0); }
}

/* ---- page-scoped header figures ----
   Set by whichever page is showing and cleared on every route change, so one
   page's numbers can never linger on another. */
.hkpi-page { display: flex; align-items: stretch; gap: 0; }
.hkpi-chip {
    display: flex; align-items: center; gap: .5rem;
    padding: 0 1rem; border-left: 1px solid var(--border);
}
.hkpi-chip b {
    display: block; font-size: .92rem; font-weight: 700; line-height: 1.2; color: var(--text);
}
.hkpi-chip span {
    display: block; font-size: .68rem; color: var(--text-dim);
    text-transform: none; letter-spacing: 0;
}
.hk-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
.hk-dot.on  { background: var(--ok); box-shadow: 0 0 0 3px rgba(0,166,81,.16); }
.hk-dot.off { background: var(--text-dim); }

@media (max-width: 1399.98px) { .hkpi-page { display: none; } }

/* ==================== SIGN IN ====================
   The grants only permit `authenticated` (migration 0072), so this is the
   whole app until a session exists — not a formality in front of it. */
.login-screen {
    position: fixed; inset: 0; z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    padding: 1.5rem;
    background:
      radial-gradient(1100px 600px at 15% -10%, rgba(24,58,110,.55), transparent 60%),
      radial-gradient(900px 520px at 105% 110%, rgba(176,141,63,.30), transparent 60%),
      var(--navy-900);
}
.login-card {
    width: 100%; max-width: 380px; background: var(--surface);
    border-radius: 16px; padding: 2rem 1.9rem 1.75rem;
    box-shadow: 0 24px 60px rgba(6,16,36,.45);
    border: 1px solid rgba(255,255,255,.08);
}
.login-logo { display: block; height: 40px; margin: 0 auto .9rem; }
.login-card h1 {
    font-size: 1.2rem; font-weight: 700; text-align: center;
    margin: 0 0 .15rem; letter-spacing: -.01em; color: var(--text);
}
.login-card > p {
    text-align: center; font-size: .74rem; color: var(--text-dim);
    text-transform: uppercase; letter-spacing: .09em; margin: 0 0 1.5rem;
}
.login-card label {
    display: block; font-size: .7rem; font-weight: 700; color: var(--text-dim);
    text-transform: uppercase; letter-spacing: .06em; margin: 0 0 .3rem;
}
.login-card input { margin-bottom: 1rem; }
.login-card .alert { font-size: .78rem; }
.login-card .btn { padding: .55rem; font-weight: 600; }

/* ---- who is signed in ---- */
.header-acct { margin-left: .85rem; }
.acct-btn {
    display: flex; align-items: center; gap: .55rem;
    background: transparent; border: 1px solid var(--border);
    border-radius: 999px; padding: .28rem .7rem .28rem .3rem;
    transition: border-color .14s ease, background .14s ease;
}
.acct-btn:hover { border-color: #C3D2E8; background: var(--surface-2); }
.acct-btn > .bi { font-size: .7rem; color: var(--text-dim); }
.acct-initials {
    width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: var(--navy-800); color: #fff;
    font-size: .72rem; font-weight: 700; letter-spacing: .02em;
}
.acct-who { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.acct-who b  { font-size: .78rem; font-weight: 600; color: var(--text); }
.acct-who em { font-size: .64rem; font-style: normal; color: var(--text-dim); }
.header-acct .dropdown-item { font-size: .82rem; display: flex; align-items: center; gap: .5rem; }

@media (max-width: 991.98px) { .acct-who { display: none; } }