/* Brand overrides for the IT Hub's MudBlazor shell. Colors come from the --tcc-* tokens in
   christman.css (Christman Color System v16); never add raw hex here. */

/* ── Legacy tokens ────────────────────────────────────────────────────────────
   Pages and older stylesheets still use the Hub-era --christman-* names. Point them at the
   v16 palette so they follow the brand. tech-innovation.css and innovation.css (loaded later)
   still define some of these themselves; those files are rebranded in a later pass. */
:root {
    --christman-copper: var(--tcc-copper);
    --christman-dark-copper: var(--tcc-black);
    --christman-gold: var(--tcc-sandstone);
    --christman-navy: var(--tcc-steel-blue);
    --christman-teal: var(--tcc-teal-patina);
    --christman-dark-green: var(--tcc-timber);
    --christman-green: var(--tcc-timber);
    --christman-rust: var(--tcc-oxide);
    --christman-red: var(--tcc-oxide);
    --christman-yellow-gold: var(--tcc-sandstone);
    --christman-medium-gray: var(--tcc-black-70);
    --christman-off-white: var(--tcc-black-6);
    --christman-cream: var(--tcc-sand-20);
    --christman-primary: var(--tcc-copper);
    --christman-secondary: var(--tcc-timber);
    --christman-accent: var(--tcc-steel-blue);
    --christman-info: var(--tcc-steel-blue);
    --christman-warning: var(--tcc-sandstone);
    --christman-error: var(--tcc-oxide);
}

/* ── Header: white bar, copper rule underneath, black logo on the left — in light and dark mode ── */
.mud-appbar.tcc-appbar {
    border-bottom: 3px solid var(--tcc-copper);
}
.tcc-appbar .tcc-app-name {
    font-family: var(--tcc-font-display);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .875rem;
    color: var(--tcc-black-70);
    white-space: nowrap;
}
.tcc-appbar .tcc-logo {
    height: 32px;
    width: auto;
    display: block;
}
/* The header is white in both modes, so its copper stays full Copper (the dark-mode accent,
   Copper 50%, is too light on white). */
.tcc-appbar .mud-button-outlined-primary {
    color: var(--tcc-copper);
    border-color: var(--tcc-copper);
}

/* Innovation app-bar tools (search, department filter, notifications) sit on the white header. */
.mud-appbar .innovation-scope.innovation-appbar-tools {
    color: var(--tcc-black);
    /* The scope's dark-mode page background must not paint inside the (always white) header */
    background: transparent !important;
}
.mud-appbar .innovation-appbar-tools .appbar-search,
.mud-appbar .innovation-appbar-tools .appbar-dept {
    border-color: var(--tcc-black-15);
    background: var(--tcc-black-6);
    color: var(--tcc-black);
}
.mud-appbar .innovation-appbar-tools .appbar-search::placeholder { color: var(--tcc-black-70); }
.mud-appbar .innovation-appbar-tools .appbar-dept option { background: #fff; color: var(--tcc-black); }
.mud-appbar .innovation-appbar-tools .icon-btn { color: var(--tcc-black); }

/* "Viewing as" proxy banner: Sandstone field, black text (one flat color, no gradient). */
.tcc-proxy-banner {
    background: var(--tcc-sandstone) !important;
    color: var(--tcc-black) !important;
}
.tcc-proxy-banner .mud-typography { color: var(--tcc-black) !important; }
.tcc-proxy-banner .mud-button-outlined {
    color: var(--tcc-black);
    border-color: var(--tcc-black);
}

/* Copper section-label bar (the brand's .tcc-bar) used above Hub cards. */
.christman-copper-bar {
    background-color: var(--tcc-copper) !important;
    color: #fff;
    border-radius: 0;
}

/* Page titles: Oswald in Copper (the sector-sheet headline). */
.mud-main-content .mud-typography-h4,
.mud-main-content .mud-typography-h5 {
    color: var(--tcc-accent);
}

/* Buttons read like .tcc-btn: Oswald, uppercase, slight tracking. */
.mud-button-root .mud-button-label {
    font-family: var(--tcc-font-display);
    letter-spacing: .04em;
}

/* Table headers: copper header text. */
.mud-table-head .mud-table-cell {
    color: var(--tcc-accent);
    font-weight: 600;
}

/* Running footer with Marketing's fine-dot bar above it. */
.tcc-app-footer {
    margin-top: 48px;
}
.tcc-app-footer .tcc-graphic {
    width: 160px;
    margin: 0 24px 8px;
}

/* Blazor's unhandled-error bar */
.blazor-error-boundary {
    background: var(--tcc-oxide);
    padding: 1rem;
    color: #fff;
}
.blazor-error-boundary::after {
    content: "An error has occurred.";
}

/* Phone widths: keep the header's icons on screen. */
@media (max-width: 599px) {
    .tcc-appbar .tcc-logo { height: 24px; }
    .mud-appbar .mud-toolbar-gutters { padding-left: 8px; padding-right: 8px; }
    .mud-appbar .mud-icon-button { padding: 8px; }
}

@media print {
    .tcc-app-footer { display: none; }
}