/* ============================================================================
   Park Industries® Internal Portal — Design System
   ----------------------------------------------------------------------------
   Component library that mirrors the look & feel of the CX Platform demo
   (customer-hub / internal-hub / pricing-tool / tech-dispatch) while staying
   on-brand per the PI Brand Style & Visual Guide.

   Loaded AFTER app.css, so it extends and refines the existing brand base:
     • Brand palette is unchanged (Midnight #04173F, Scarlet #FF2400,
       Steel Blue #5494CC, Forged Pewter #A9A392).
     • Typography stays Figtree + Arial; headings remain uppercase.
   What this file adds, taken from the demo's shared language:
     • Soft rounded cards + soft shadows
     • KPI / stat cards with colored top accents
     • Status pills with tinted backgrounds
     • Section headers, card headers, badges, alerts, empty states
     • Dark-header "machine" cards
     • Layout grid helpers and a subtle PI dot pattern utility
   These are additive component classes; page layout is not restructured.
   ========================================================================== */

:root {
    /* Semantic colors + tinted backgrounds (from the demo palettes) */
    --pi-green:        #1b7a3d;
    --pi-green-tint:   #e8f5e8;
    --pi-amber:        #b85c00;
    --pi-amber-tint:   #fff3e0;
    --pi-info:         #0d47a1;
    --pi-info-tint:    #e3f2fd;
    --pi-scarlet-tint: #fff0ed;
    --pi-steel-tint:   #e9f2fb;

    /* Surfaces / depth */
    --ds-radius:    10px;
    --ds-radius-sm: 7px;
    --ds-shadow:    0 2px 10px rgba(4, 23, 63, 0.08);
    --ds-shadow-lg: 0 8px 24px rgba(4, 23, 63, 0.14);

    /* Muted text that reads softer than --pi-ink for secondary copy */
    --ds-muted: #6b7280;
}

/* ----------------------------------------------------------------------------
   Card refinement — soften the existing brand cards to the demo aesthetic
   (rounded corners + soft shadow + scarlet hover accent), keeping the
   midnight top rule that gives PI cards their identity.
---------------------------------------------------------------------------- */
.card {
    border-radius: var(--ds-radius);
    box-shadow: var(--ds-shadow);
}

.card-link:hover {
    box-shadow: var(--ds-shadow-lg);
}

/* A plain surface card with no top rule, for dashboard widgets. */
.ds-card {
    background: var(--pi-white);
    border: 1px solid var(--pi-border);
    border-radius: var(--ds-radius);
    box-shadow: var(--ds-shadow);
    padding: 20px;
    margin-bottom: 20px;
}

/* Small uppercase label that heads a card's content (demo `.card-hdr`). */
.card-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--ds-muted);
}

/* ----------------------------------------------------------------------------
   Section header — page/section title with optional sub-line and right action
---------------------------------------------------------------------------- */
.section-hdr {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.section-hdr h2 {
    margin: 0;
    font-size: 1.25rem;
    letter-spacing: 1px;
}

.section-hdr .sub {
    margin-top: 4px;
    font-size: 0.8rem;
    color: var(--ds-muted);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}

/* ----------------------------------------------------------------------------
   KPI / stat cards — colored top accent, icon tile, big value, label
---------------------------------------------------------------------------- */
.kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 22px;
}

.kpi {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--pi-white);
    border: 1px solid var(--pi-border);
    border-top: 3px solid var(--pi-pewter);
    border-radius: var(--ds-radius);
    box-shadow: var(--ds-shadow);
    padding: 18px 20px;
}

.kpi.scarlet { border-top-color: var(--pi-scarlet); }
.kpi.navy    { border-top-color: var(--pi-midnight); }
.kpi.green   { border-top-color: var(--pi-green); }
.kpi.amber   { border-top-color: var(--pi-amber); }
.kpi.steel   { border-top-color: var(--pi-steel); }

.kpi-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ds-radius-sm);
    font-size: 20px;
}

.kpi.scarlet .kpi-icon { background: var(--pi-scarlet-tint); color: var(--pi-scarlet); }
.kpi.navy    .kpi-icon { background: var(--pi-steel-tint);   color: var(--pi-midnight); }
.kpi.green   .kpi-icon { background: var(--pi-green-tint);   color: var(--pi-green); }
.kpi.amber   .kpi-icon { background: var(--pi-amber-tint);   color: var(--pi-amber); }
.kpi.steel   .kpi-icon { background: var(--pi-steel-tint);   color: var(--pi-steel); }

.kpi-val {
    font-size: 1.7rem;
    font-weight: 900;
    line-height: 1;
    color: var(--pi-midnight);
}

.kpi-lbl {
    margin-top: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--ds-muted);
    text-transform: uppercase;
}

/* ----------------------------------------------------------------------------
   Layout grid helpers (from the demo's dashboard grids)
---------------------------------------------------------------------------- */
.grid-2     { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; }
.grid-2-eq  { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid-3     { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* ----------------------------------------------------------------------------
   Status pills — tinted background + colored text (demo `.pill`)
   Also restyles the existing solid `.status` chips into the softer pill look.
---------------------------------------------------------------------------- */
.pill,
.status {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1.6;
}

/* Generic pill variants */
.pill-scarlet { background: var(--pi-scarlet-tint); color: var(--pi-scarlet); }
.pill-navy    { background: var(--pi-steel-tint);   color: var(--pi-midnight); }
.pill-steel   { background: var(--pi-steel-tint);   color: var(--pi-steel); }
.pill-green   { background: var(--pi-green-tint);   color: var(--pi-green); }
.pill-amber   { background: var(--pi-amber-tint);   color: var(--pi-amber); }
.pill-info    { background: var(--pi-info-tint);    color: var(--pi-info); }
.pill-muted   { background: #eef0f2;               color: var(--ds-muted); }

/* Map the portal's existing status classes onto the tinted pill look.
   (These override the solid backgrounds defined in app.css.) */
.status            { background: #eef0f2; color: var(--ds-muted); }
.status-submitted  { background: #eef0f2;               color: var(--ds-muted); }
.status-inreview   { background: var(--pi-steel-tint);  color: var(--pi-steel); }
.status-scheduled  { background: var(--pi-steel-tint);  color: var(--pi-midnight); }
.status-completed  { background: var(--pi-green-tint);  color: var(--pi-green); }
.status-cancelled  { background: var(--pi-scarlet-tint); color: var(--pi-scarlet); }

/* ----------------------------------------------------------------------------
   Badges — small status/source markers, incl. a "live" pulsing dot
---------------------------------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--ds-radius-sm);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    border: 1px solid transparent;
}

.badge-scarlet { background: var(--pi-scarlet); color: var(--pi-white); }
.badge-navy    { background: var(--pi-midnight); color: var(--pi-white); }
.badge-soft    { background: var(--pi-paper); color: var(--pi-midnight); border-color: var(--pi-border); }
.badge-live    { background: var(--pi-green-tint); color: var(--pi-green); border-color: #bfe3bf; }

.badge-live .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pi-green);
    animation: pi-pulse-dot 1.6s infinite;
}

@keyframes pi-pulse-dot {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
    .badge-live .dot { animation: none; }
}

/* ----------------------------------------------------------------------------
   Dashboard activity feed (Home, associate view)
---------------------------------------------------------------------------- */
.dash-grid { margin-top: 18px; }

.activity-list { list-style: none; margin: 0; padding: 0; }

.activity-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--pi-border);
    font-size: 0.92rem;
}

.activity-item:last-child { border-bottom: none; }

.activity-time {
    color: var(--pi-steel);
    white-space: nowrap;
    font-size: 0.85rem;
}

/* ----------------------------------------------------------------------------
   Alert / callout items — tinted block with a colored left rule (demo `.alert-item`)
---------------------------------------------------------------------------- */
.alert-item {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--ds-radius-sm);
    margin-bottom: 10px;
    font-size: 0.85rem;
}

.alert-item .alert-icon { flex-shrink: 0; font-size: 16px; line-height: 1.4; }
.alert-item .alert-text strong { display: block; color: var(--pi-midnight); margin-bottom: 2px; }
.alert-item .alert-text span { color: var(--ds-muted); }

.alert-info    { background: var(--pi-info-tint);    border-left: 3px solid var(--pi-info); }
.alert-success { background: var(--pi-green-tint);   border-left: 3px solid var(--pi-green); }
.alert-warning { background: var(--pi-amber-tint);   border-left: 3px solid var(--pi-amber); }
.alert-danger  { background: var(--pi-scarlet-tint); border-left: 3px solid var(--pi-scarlet); }

/* ----------------------------------------------------------------------------
   Empty state
---------------------------------------------------------------------------- */
.empty-state {
    text-align: center;
    padding: 36px 24px;
    color: var(--ds-muted);
    font-size: 0.9rem;
}

.empty-state .empty-icon { font-size: 30px; opacity: 0.5; margin-bottom: 8px; }

/* ----------------------------------------------------------------------------
   Table refinement — match the demo's airy table (subtle header, row hover)
---------------------------------------------------------------------------- */
.table tbody tr { transition: background 0.12s ease; }
.table tbody tr:hover td { background: #fafafa; }
.table tr:last-child td { border-bottom: none; }

/* ----------------------------------------------------------------------------
   Button refinement — soften corners to the demo's rounded buttons,
   keeping the bold uppercase PI button voice.
---------------------------------------------------------------------------- */
.btn { border-radius: var(--ds-radius-sm); transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    .btn:hover, .btn:active { transform: none; }
}

/* ----------------------------------------------------------------------------
   Machine cards — dark header over a white body (demo `.mc`)
---------------------------------------------------------------------------- */
.machines-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
}

.mc {
    background: var(--pi-white);
    border: 2px solid transparent;
    border-radius: var(--ds-radius);
    box-shadow: var(--ds-shadow);
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.mc:hover { transform: translateY(-2px); box-shadow: var(--ds-shadow-lg); }
.mc.active-mc { border-color: var(--pi-scarlet); }

.mc-head {
    background: var(--pi-midnight);
    padding: 16px 18px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.mc-head .mc-model {
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--pi-white);
}

.mc-head .mc-category {
    margin-top: 2px;
    font-size: 0.62rem;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.mc-body { padding: 16px 18px; }

.mc-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    font-size: 0.82rem;
    border-bottom: 1px solid var(--pi-border);
}

.mc-row:last-child { border-bottom: none; }
.mc-row .mc-k { color: var(--ds-muted); text-transform: uppercase; font-size: 0.66rem; letter-spacing: 0.6px; font-weight: 700; }
.mc-row .mc-v { color: var(--pi-midnight); font-weight: 700; }

/* ----------------------------------------------------------------------------
   Action cards — navigation tiles with a leading icon and a CTA line
   (used on dashboards/landing pages). Builds on .card / .card-link.
---------------------------------------------------------------------------- */
.action-card { display: flex; flex-direction: column; }

.tile-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ds-radius-sm);
    background: var(--pi-scarlet-tint);
    color: var(--pi-scarlet);
    margin-bottom: 12px;
}

.tile-icon svg { width: 22px; height: 22px; display: block; }

.card-cta {
    margin-top: 14px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--pi-midnight);
}

.card-cta::after { content: " \2192"; }
.card-link:hover .card-cta { color: var(--pi-scarlet); }

/* ----------------------------------------------------------------------------
   PI dot pattern utility — the subtle precision pattern from the brand guide.
   Apply to dark surfaces (e.g. hero / banner) for on-brand depth.
---------------------------------------------------------------------------- */
.pi-dot-pattern {
    background-image: radial-gradient(rgba(84, 148, 204, 0.48) 1.3px, transparent 1.7px);
    background-size: 15px 15px;
}

/* Customer/section banner — midnight panel with a scarlet vertical accent line. */
.ds-banner {
    position: relative;
    overflow: hidden;
    background: var(--pi-midnight);
    color: var(--pi-white);
    border-radius: var(--ds-radius);
    padding: 24px 28px 24px 44px;
    margin-bottom: 24px;
}

/* Scarlet vertical line on the left. */
.ds-banner::before {
    content: "";
    position: absolute;
    left: 24px;
    top: 22px;
    bottom: 22px;
    width: 4px;
    border-radius: 2px;
    background: var(--pi-scarlet);
    z-index: 0;
    pointer-events: none;
}

.ds-banner > * { position: relative; z-index: 1; }
.ds-banner-name { font-size: 1.7rem; font-weight: 900; letter-spacing: 0.5px; text-transform: uppercase; line-height: 1.1; }
.ds-banner-sub  { margin-top: 4px; font-size: 0.82rem; color: rgba(255, 255, 255, 0.6); }

/* ============================================================================
   APP SHELL — full-height navy sidebar + white page header
   Overrides the stacked topbar/sidenav layout from app.css. Loaded after
   app.css, so these rules win.
   ========================================================================== */
:root {
    --sidebar-w: 244px;
    --topbar-h: 64px;
}

.app-shell {
    display: flex;
    align-items: stretch;
    min-height: 100vh;
}

/* ---- Sidebar (navy, runs the whole left side) ---- */
.sidebar {
    flex: 0 0 var(--sidebar-w);
    width: var(--sidebar-w);
    background: var(--pi-midnight);
    color: var(--pi-white);
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 14px rgba(4, 23, 63, 0.18);
    z-index: 30;
}

.sidebar-brand {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 18px 16px;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-logo { height: 38px; width: auto; display: block; }

.sidebar-brand-sub {
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 3px;
    color: var(--pi-pewter);
}

/* Nav region fills the middle and scrolls if the menu is long. */
.sidebar-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 10px 0;
    overflow-y: auto;
}

.nav-label {
    padding: 14px 18px 5px;
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.32);
}

/* Light nav items inside the dark sidebar (override app.css dark-on-light). */
.sidebar-nav .nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1px;
    border-left: 3px solid transparent;
}

.sidebar-nav .nav-item svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--pi-steel); }

.sidebar-nav .nav-item:hover { background: rgba(255, 255, 255, 0.06); color: var(--pi-white); }

.sidebar-nav .nav-item.active {
    background: rgba(255, 36, 0, 0.16);
    color: var(--pi-white);
    border-left-color: var(--pi-scarlet);
}

/* Customer ("acting as") switcher re-themed for the dark sidebar. */
.sidebar-nav .customer-switcher {
    padding: 12px 16px 14px;
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-nav .customer-switcher-label { color: var(--pi-pewter); }

.sidebar-nav .customer-switcher-select {
    background: var(--pi-midnight);
    border-color: rgba(255, 255, 255, 0.18);
    color: var(--pi-white);
}

/* Sidebar footer — signed-in user identity. */
.sidebar-foot {
    padding: 14px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.sb-user { display: flex; align-items: center; gap: 10px; }

.sb-avatar {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--pi-scarlet);
    color: var(--pi-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 800;
}

.sb-user-info { min-width: 0; }
.sb-user-info .u-name { font-size: 0.78rem; font-weight: 700; color: var(--pi-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user-info .u-sub { font-size: 0.64rem; color: rgba(255, 255, 255, 0.45); }

/* ---- Main area + white page header ---- */
.main-area {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* Clip (not scroll) any horizontal full-bleed so the viewport-width
       banner can't trigger a horizontal scrollbar. */
    overflow-x: clip;
}

/* ----------------------------------------------------------------------------
   Full-bleed banner — break the .ds-banner out of the content padding and the
   1200px max-width cap so it spans the entire page width beside the sidebar.
---------------------------------------------------------------------------- */
.ds-banner.full-bleed {
    margin-top: -32px;                          /* meet the white top bar */
    margin-left: -40px;                         /* cancel .content left padding */
    width: calc(100vw - var(--sidebar-w));      /* fill the area beside the sidebar */
    max-width: none;
    border-radius: 0;
}

/* Sidebar collapses to a top bar here, so the banner uses the full viewport. */
@media (max-width: 900px) {
    .ds-banner.full-bleed {
        margin-top: -24px;
        margin-left: -20px;
        width: 100vw;
    }
}

@media (max-width: 600px) {
    .ds-banner.full-bleed {
        margin-top: -18px;
        margin-left: -14px;
    }
}

/* Redefine the topbar as a white, sticky page header (was a navy bar in app.css). */
.topbar {
    background: var(--pi-white);
    border-bottom: 1px solid var(--pi-border);
    color: var(--pi-midnight);
    height: var(--topbar-h);
    padding: 0 28px;
    gap: 14px;
    position: sticky;
    top: 0;
    z-index: 20;
    box-shadow: 0 1px 6px rgba(4, 23, 63, 0.05);
}

.topbar-title {
    flex: 1;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--pi-midnight);
}

.topbar-logo { height: 34px; width: auto; display: block; }

/* User menu sits in the white header now, so its text must be dark. */
.topbar .user-name { color: var(--pi-midnight); }
.topbar .user-menu-caret { color: var(--pi-pewter); }
.topbar .user-menu-trigger:hover { background: var(--pi-paper); }

/* Dropdown: navy panel with light text, matching the sidebar. */
.user-menu-dropdown { background: var(--pi-midnight); border-color: rgba(255, 255, 255, 0.12); }
.user-menu-dropdown .user-menu-item { color: rgba(255, 255, 255, 0.85); }
.user-menu-dropdown .user-menu-item:hover { background: rgba(255, 255, 255, 0.08); color: var(--pi-white); }
.user-menu-dropdown .user-menu-item + .user-menu-item { border-top-color: rgba(255, 255, 255, 0.10); }

.main-area .content { flex: 1; width: 100%; }

/* Footer: midnight with a scarlet top border to separate it from the page. */
.footer {
    background: var(--pi-midnight);
    border-top: 4px solid var(--pi-scarlet);
    color: rgba(255, 255, 255, 0.88);
}

.footer a { color: #8fb3e0; }
.footer a:hover { color: var(--pi-white); }

/* The badge art is white-on-transparent, so it reads directly on midnight. */
.footer-badge {
    padding: 6px 14px;
}

/* ---- Sidebar collapses to a top bar on small screens ---- */
@media (max-width: 900px) {
    .app-shell { flex-direction: column; }

    .sidebar {
        position: static;
        height: auto;
        width: 100%;
        flex: none;
        box-shadow: 0 2px 10px rgba(4, 23, 63, 0.18);
    }

    .sidebar-brand { flex-direction: row; align-items: center; gap: 12px; }
    .sidebar-brand-sub { align-self: center; }

    .sidebar-nav { flex-direction: row; flex-wrap: wrap; align-items: center; padding: 4px 8px; }

    .sidebar-nav .nav-item {
        border-left: none;
        border-bottom: 3px solid transparent;
        padding: 10px 14px;
    }

    .sidebar-nav .nav-item.active { border-left-color: transparent; border-bottom-color: var(--pi-scarlet); }

    .nav-label { width: 100%; padding: 6px 14px 0; }
    .sidebar-nav .customer-switcher { width: 100%; border-bottom: none; }
    .sidebar-foot { display: none; }
}

/* ============================================================================
   AUTH — full-screen split-screen sign-in (uses AuthLayout, no app chrome)
   ========================================================================== */
.auth-split {
    display: flex;
    align-items: stretch;
    min-height: 100vh;
    background: var(--pi-midnight);
}

/* Left: branded gradient panel with headline + feature facts. */
.auth-brand {
    flex: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 64px;
    color: var(--pi-white);
    background: var(--pi-midnight);
}

/* Background image on its own layer so we can brighten it. */
.auth-brand::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('/img/bg-blue-flag.webp') left / cover no-repeat;
    filter: brightness(1.4);
    z-index: 0;
}

/* Dark scrim over the image for headline/body legibility. */
.auth-brand::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(200deg, rgba(4, 23, 63, 0.85) 0%, rgba(4, 23, 63, 0.60) 40%, rgba(4, 23, 63, 0.30) 75%, rgba(4, 23, 63, 0.15) 100%);
    z-index: 0;
    pointer-events: none;
}

.auth-brand-inner { position: relative; z-index: 1; max-width: 460px; }

.auth-logo { height: 46px; width: auto; display: block; margin-bottom: 44px; }

.auth-headline {
    margin: 0 0 16px;
    border: none;
    padding: 0;
    display: block;
    font-size: 2.4rem;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--pi-white);
}

.auth-headline span { color: rgba(255, 255, 255, 0.5); }

/* Scarlet highlight behind a key phrase. box-decoration-break keeps the
   background intact if the phrase wraps across lines. */
.auth-headline .auth-mark {
    color: var(--pi-white);
    background: var(--pi-scarlet);
    padding: 1px 8px;
    border-radius: 4px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.auth-sub { margin: 0 0 36px; font-size: 1rem; color: rgba(255, 255, 255, 0.82); max-width: 420px; }

.auth-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }

.auth-fact { display: flex; align-items: center; gap: 14px; color: rgba(255, 255, 255, 0.88); }

.auth-fact-ic {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 9px;
    background: var(--pi-scarlet);
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-fact-ic svg { width: 20px; height: 20px; }
.auth-fact strong { display: block; font-size: 1.05rem; font-weight: 800; line-height: 1.1; }
.auth-fact span { font-size: 0.8rem; color: rgba(255, 255, 255, 0.6); }

/* Right: white form panel. */
.auth-panel {
    flex: 0 0 480px;
    max-width: 100%;
    background: var(--pi-white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 44px;
    overflow-y: auto;
}

.auth-card { width: 100%; max-width: 380px; margin: 0 auto; }

.auth-card h2 {
    margin: 0 0 4px;
    font-size: 1.5rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--pi-midnight);
}

.auth-card-sub { margin: 0 0 24px; color: var(--ds-muted); font-size: 0.9rem; }

.auth-note { margin-top: 18px; font-size: 0.8rem; color: var(--ds-muted); }

.auth-associate {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--pi-border);
    text-align: center;
    font-size: 0.8rem;
    color: var(--ds-muted);
}

.auth-associate a { color: var(--pi-midnight); font-weight: 700; }
.auth-associate a:hover { color: var(--pi-scarlet); }

@media (max-width: 860px) {
    .auth-split { flex-direction: column; }
    .auth-brand { padding: 40px 28px; }
    .auth-headline { font-size: 1.8rem; }
    .auth-panel { flex: 1; width: 100%; padding: 36px 24px; }
}

@media (max-width: 560px) {
    .auth-facts { display: none; }
    .auth-sub { margin-bottom: 0; }
}

/* ------------------------------ Responsive -------------------------------- */
@media (max-width: 1100px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px)  { .grid-2, .grid-2-eq { grid-template-columns: 1fr; } .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .kpi-row { grid-template-columns: 1fr; } .grid-3 { grid-template-columns: 1fr; } .topbar { padding: 0 16px; } }