/* ============================================================
   Fred Beans Automotive Group - brand override theme.
   Loaded AFTER app.css (in index.html) so its rules win.
   Colors sampled from the dealer logo (img/beans2.png).

   BRANDING SWITCH: this whole project is deployed to more than one
   URL, each with its own brand. To change the brand for a deployment,
   edit the ONE brand <link> in wwwroot/index.html and point it at a
   different file in this folder:
       css/fredbeans.css   -> Fred Beans   (default in this build)
       css/papertrail.css  -> default PaperTrail
   ============================================================ */
:root {
    --brand:        #00306C;
    --brand-d:      #00224E;
    --brand-l:      #3a5e94;
    --accent:       #0061A8;
    --accent-d:     #004E86;
    --accent-l:     #4d90c8;
    --accent-soft:  rgba(0, 97, 168, .10);
    --accent-soft-2:rgba(0, 97, 168, .16);
    --ring:         rgba(0, 97, 168, .35);
}

/* Replace the "PT / PaperTrail" wordmark with the Fred Beans logo (sidebar + login card).
   Centered and enlarged versus the default wordmark. */
.brand,
.auth-brand {
    display: block;
    background: url("../img/beans2.png") center center / contain no-repeat;
    min-height: 92px;
}
.brand > *,
.auth-brand > * { display: none; }

/* Login backdrop in Fred Beans navy (the white auth card keeps the navy logo legible). */
.auth-shell { background: linear-gradient(135deg, #00306C, #00224E); }

/* Dashboard KPI cards: force every accent stripe to the Fred Beans blue for a
   uniform on-brand look (overrides the ok/warn/alert status colors). */
.kpi,
.kpi-ok,
.kpi-warn,
.kpi-alert { --stripe: var(--accent); }

/* ============================================================
   BRAND PASS — push Fred Beans navy/blue through the whole shell
   instead of only tiny accents. All light-on-navy colors are chosen
   for AA contrast on the navy sidebar.
   ============================================================ */

/* Cooler page canvas so white cards read as "on brand" surfaces, not a blank page. */
:root { --bg: #eef2f8; }

/* ---- Sidebar: deep Fred Beans navy with light text ---- */
.sidebar {
    background: linear-gradient(180deg, #124A85 0%, #0C356A 100%);
    border-right: none;
    color: #dce7f5;
    box-shadow: 2px 0 18px rgba(0, 20, 55, .18);
}
/* Logo (transparent PNG) sits directly on the navy rail; the lighter navy above
   gives the dark chrome shield distinction. No white plate. */
.brand {
    border-bottom: none;
    margin-bottom: 16px;
}

/* Nav items: light by default, white pill when active. */
.nav-item { color: #cfdcef; }
.nav-item:hover { background: rgba(255, 255, 255, .10); color: #ffffff; }
.nav-item.active { background: #ffffff; color: var(--brand); font-weight: 600; box-shadow: 0 6px 16px rgba(0, 15, 45, .30); }
.nav-item.active:hover { background: #eef3fa; color: var(--brand-d); }
.nav-item.active .nav-ico { opacity: 1; }
.nav-badge { background: rgba(255, 255, 255, .18); color: #ffffff; }
.nav-item.active .nav-badge { background: var(--accent-soft-2); color: var(--brand); }

/* Sidebar footer (scope / user / sign-out) on navy. */
.user-box { border-top-color: rgba(255, 255, 255, .16); }
.sidebar .user-name { color: #ffffff; }
.sidebar .user-role,
.sidebar .muted,
.sidebar .small { color: #a9c1e0; }
.env-pill { background: rgba(255, 255, 255, .10); color: #dce7f5; border-color: rgba(255, 255, 255, .20); }
.signout { background: rgba(255, 255, 255, .08); color: #eaf1fb; border-color: rgba(255, 255, 255, .20); }
.signout:hover { background: rgba(255, 255, 255, .18); color: #ffffff; border-color: transparent; }

/* ---- Content chrome: bring brand into the white expanse ---- */
/* Page titles in Fred Beans navy. */
h1 { color: var(--brand); }
/* Table header rows get a branded tint (hits the Deals list, records, etc.). */
.grid th { background: var(--accent-soft); color: var(--accent-d); }
/* Panel / section headers get a light brand wash so cards aren't edge-to-edge white. */
.panel-head { background: var(--accent-soft); }
/* Sticky top bar tied to the brand with a blue hairline. */
.topbar { border-bottom-color: var(--accent-soft-2); }