html, body {
    margin: 0;
    padding: 0;
    background-color: var(--tmr-body-bg);
    color: var(--tmr-body-fg);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Delayed-reveal loading spinner. The shared <LoadingSpinner> renders with
   this class so it stays invisible for the first 500ms of a load: a fast
   (warm-cache) load that resolves quickly never flashes a spinner, while a
   slow/cold load (>=500ms) fades it in instead of leaving a blank content
   area. If the parent removes the spinner before 500ms elapses, the user
   never sees it. */
.tmr-delayed-spinner {
    opacity: 0;
    animation: tmr-delayed-spinner-in 0.15s ease-in 0.5s forwards;
}

@keyframes tmr-delayed-spinner-in {
    to { opacity: 1; }
}

/* Impersonation banner — sticky top, red background, high contrast. Mirrors
   MVC's .impersonation-banner styling so admin sees the same warning UX in
   both apps during coexistence. Layout-shifts the page content below by the
   banner's height via padding-top on body when present. */
.tmr-impersonation-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #dc3545;
    color: #fff;
    padding: 10px 20px;
    z-index: 9999;
    border-bottom: 2px solid #b02a37;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tmr-impersonation-banner-label {
    flex: 1;
}

.tmr-impersonation-banner-countdown {
    font-variant-numeric: tabular-nums;
    margin: 0 0.75rem;
    padding: 0.15rem 0.5rem;
    background: rgba(0, 0, 0, 0.18);
    border-radius: 4px;
    font-size: 0.95rem;
}

.tmr-impersonation-banner-form {
    margin: 0;
    margin-left: 0.5rem;
}

/* Warning state — pulsing background when remaining time drops below the
   WarningMinutes threshold (5 min). Visually escalates so the admin notices
   they're about to be auto-ejected if they don't extend or end. */
.tmr-impersonation-banner-warning {
    background: #b02a37;
    animation: tmr-impersonation-banner-pulse 1.6s ease-in-out infinite;
}

@keyframes tmr-impersonation-banner-pulse {
    0%, 100% { background: #b02a37; }
    50%      { background: #dc3545; }
}

body:has(.tmr-impersonation-banner) {
    padding-top: 50px;
}

/* Avatar — first-initial in a maroon circle. Used by the authenticated
   user's dropdown toggle in AppNavbar. Ported verbatim from MVC's site.css
   so the look stays consistent across both apps during coexistence. */
[data-letters]:before {
    content: attr(data-letters);
    display: inline-block;
    font-size: 1.0em;
    width: 1.5em;
    height: 1.5em;
    line-height: 1.5em;
    text-align: center;
    border-radius: 50%;
    background: maroon;
    vertical-align: middle;
    margin-right: 1em;
    color: white;
}

a {
    color: var(--tmr-link);
}

.tmr-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.tmr-main {
    flex: 1;
    padding: 1.5rem;
}

/* PR8h (TMRW-64) — left + right gutter content (TopTenSourcesPanel,
   FaqCard). MVC's _Layout.cshtml uses inline `margin-top: 50px` on
   the gutter wrapper; mirror that offset here so the gutter heading
   sits below the navbar / breadcrumb chrome rather than getting clipped.
   Bootstrap's `d-none d-lg-block` on the <aside> hides the gutters
   below the lg breakpoint, so this rule only fires at lg+ widths. */
.tmr-gutter {
    padding-top: 50px;
}

/* Top navbar — always dark, even when data-bs-theme="dark" */
.tmr-navbar {
    background-color: var(--tmr-navbar-bg) !important;
    border-bottom: 1px solid var(--tmr-border);
    box-shadow: var(--tmr-shadow);
}

.tmr-navbar .navbar-brand,
.tmr-navbar .nav-link,
.tmr-navbar .dropdown-toggle {
    color: var(--tmr-navbar-link-fg) !important;
}

.tmr-navbar .nav-link:hover,
.tmr-navbar .dropdown-toggle:hover {
    color: var(--tmr-navbar-link-hover-fg) !important;
}

.tmr-navbar .dropdown-menu {
    background-color: var(--tmr-navbar-dropdown-bg);
    /* Bootstrap defaults dropdown-menu to z-index: 1000 and sticky-top to
       z-index: 1020 — so any admin page with a sticky table header (e.g.
       Impersonate User's user-table) floats OVER navbar dropdown items
       that align with the header's vertical position. Bumping the navbar
       dropdown to 1030 sits ABOVE sticky-top (1020) but stays BELOW the
       site's overlay/panel chrome:
           1040 .tmr-detail-panel-overlay
           1050 .tmr-detail-panel
           1080 .tmr-toaster
           1090 .tmr-cookie-banner
           9999 .tmr-impersonation-banner
       Detail-panel overlays + drill-down side panels correctly cover the
       dropdown when open (they're modal-style chrome that should block
       background interaction); the toaster, cookie banner, and
       impersonation banner all top the dropdown too. */
    z-index: 1030;
}

.tmr-navbar .dropdown-menu .nav-link,
.tmr-navbar .dropdown-menu .dropdown-item {
    color: var(--tmr-navbar-link-fg);
}

/* The dropdown toggle is a <button> (not <a href="#">) so it doesn't navigate
   to /# pre-hydration. Strip the default button chrome so it visually matches
   the surrounding nav-link anchors. */
.tmr-navbar .nav-item.dropdown > button.dropdown-toggle {
    background: transparent;
    border: 0;
    padding: 0.5rem 1rem;
    text-decoration: none;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.tmr-navbar .nav-item.dropdown > button.dropdown-toggle:hover,
.tmr-navbar .nav-item.dropdown > button.dropdown-toggle:focus {
    text-decoration: none;
    background: transparent;
}

/* The logout dropdown item is a <form><button> so the action goes through
   POST + antiforgery. Strip the form's default margin so the button sits
   flush with the surrounding <a> dropdown items. */
.tmr-navbar .dropdown-menu .tmr-logout-form {
    margin: 0;
}

/* Footer */
.tmr-footer {
    border-top: 1px solid var(--tmr-border);
    padding: 0.75rem 1rem;
    color: var(--tmr-muted-fg);
    font-size: 0.875rem;
    text-align: center;
}

.tmr-footer a {
    color: var(--tmr-muted-fg);
    text-decoration: none;
    margin: 0 0.25rem;
}

.tmr-footer a:hover {
    color: var(--tmr-link);
}

/* Version footer (existing component) */
.tmr-version-footer {
    border-top: 1px solid var(--tmr-border);
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    color: var(--tmr-muted-fg);
    display: flex;
    justify-content: space-between;
}

/* Breadcrumbs */
.tmr-breadcrumbs {
    padding: 0.75rem 1.5rem 0;
    margin: 0;
    font-size: 0.875rem;
}

/* Hero carousel */
.tmr-carousel {
    position: relative;
    width: 100%;
    height: 430px;
    overflow: hidden;
    border-radius: var(--bs-border-radius);
    margin-bottom: 1rem;
}

.tmr-carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.tmr-carousel-slide {
    position: absolute;
    inset: 0;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    pointer-events: none;
}

.tmr-carousel-slide.active {
    opacity: 1;
    pointer-events: auto;
}

.tmr-carousel-caption {
    color: #1a1a1a;
    padding: 12rem 0 0 12rem;
    max-width: 36rem;
}

.tmr-carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 0;
    background-color: rgba(255, 255, 255, 0.5);
    color: #1a1a1a;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.tmr-carousel-control:hover { background-color: rgba(255, 255, 255, 0.85); }
.tmr-carousel-control.prev { left: 1rem; }
.tmr-carousel-control.next { right: 1rem; }

.tmr-carousel-indicators {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
}

.tmr-carousel-indicator {
    width: 0.75rem;
    height: 0.75rem;
    padding: 0;
    border-radius: 50%;
    border: 1px solid #1a1a1a;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

.tmr-carousel-indicator.active { background-color: #1a1a1a; }

@media (max-width: 768px) {
    .tmr-carousel { height: 280px; }
    .tmr-carousel-caption { padding: 6rem 1rem 0 1rem; }
}

/* Cookie banner */
.tmr-cookie-banner {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    max-width: 36rem;
    margin: 0 auto;
    padding: 1rem 1.25rem;
    background-color: var(--tmr-card-bg, #fff);
    color: var(--tmr-body-fg);
    border: 1px solid var(--tmr-border);
    border-radius: var(--bs-border-radius);
    box-shadow: var(--tmr-shadow);
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

@media (min-width: 576px) {
    .tmr-cookie-banner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.tmr-cookie-banner-title { margin: 0 0 0.25rem 0; font-weight: 600; }
.tmr-cookie-banner-text { margin: 0; font-size: 0.9rem; line-height: 1.35; }

.tmr-cookie-banner-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Toaster */
.tmr-toaster {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 1080;
    max-width: 24rem;
}

.tmr-toast {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: var(--bs-border-radius);
    box-shadow: var(--tmr-shadow);
    background-color: var(--tmr-card-bg, #fff);
    color: var(--tmr-body-fg);
    border-left: 4px solid transparent;
    animation: tmr-toast-in 0.18s ease-out;
}

.tmr-toast-info { border-left-color: var(--bs-info, #0dcaf0); }
.tmr-toast-success { border-left-color: var(--bs-success, #198754); }
.tmr-toast-warning { border-left-color: var(--bs-warning, #ffc107); }
.tmr-toast-error { border-left-color: var(--bs-danger, #dc3545); }

.tmr-toast-body {
    flex: 1;
    font-size: 0.9rem;
    line-height: 1.35;
}

@keyframes tmr-toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* MVC marketing-page styles ported per kickoff plan's "preserve MVC's color
   palette and component styling" anchor. Originals live in MVC's site.css /
   carousel.css / pricing.css. Slate-teal #81a2a9 is the kickoff-anchored
   accent color; matches MVC dropzone/form/button styling. */

.box-shadow {
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05);
}

.featurette-divider {
    margin: 80px 0;
}

.featurette-heading {
    font-weight: 300;
    line-height: 1;
    letter-spacing: -1px;
}

@media (min-width: 768px) {
    .featurette-heading {
        font-size: 50px;
    }
}

@media (min-width: 992px) {
    .featurette-heading {
        margin-top: 120px;
    }
}

.marketing {
    padding-left: 15px;
    padding-right: 15px;
}

@media (min-width: 768px) {
    .marketing {
        padding-left: 0;
        padding-right: 0;
    }
}

.faq-link {
    text-decoration: none;
    color: #007bff;
    transition: color 0.2s, text-decoration 0.2s;
    font-weight: 400;
    font-size: 20px;
    font-style: italic;
}

.faq-link:hover {
    text-decoration: underline;
    color: #0056b3;
}

.tmr-link {
    text-decoration: none;
    color: #6f6f6f !important;
    transition: color 0.2s, text-decoration 0.2s;
    font-weight: 400;
    font-style: italic;
}

.tmr-link:hover {
    text-decoration: underline;
    color: #0056b3;
}

/* Dark-theme legibility. Bootstrap's .text-dark / .link-dark utilities set
   color with !important, which overrides .faq-link / .tmr-link and renders
   near-black anchors and labels illegible against the #121212 dark body.
   theme-init defaults to the OS preference, so a dark-mode-OS user lands on
   the dark theme by default — these were invisible for them. Remap to the
   theme foreground / link color. The [data-bs-theme="dark"] prefix raises
   specificity above Bootstrap's utility so this !important wins; light theme
   is untouched. (.tmr-nav-link.active keeps its own white bg + black text and
   is not a .text-dark/.link-dark element, so it is unaffected.) */
[data-bs-theme="dark"] .text-dark {
    color: var(--tmr-body-fg) !important;
}

[data-bs-theme="dark"] .link-dark,
[data-bs-theme="dark"] .link-dark:hover,
[data-bs-theme="dark"] .tmr-link,
[data-bs-theme="dark"] .tmr-link:hover {
    color: var(--tmr-link) !important;
}

.tmr-form-shadow {
    background-color: #81a2a9;
    border: 1px solid #000000;
    box-shadow: 0 10px 20px #000000 !important;
    color: #ffffff;
}

.tmr-content-header {
    background-color: #81a2a9;
}

/* Bootstrap 5 dropped btn-default; MVC's marketing CTAs use it. Restore as a
   light neutral variant matching Bootstrap 4's effective default-button look
   so MVC-source CTAs render with intent rather than browser-unstyled. */
.btn-default {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #d3d4d5;
}

.btn-default:hover,
.btn-default:focus {
    color: #212529;
    background-color: #e2e6ea;
    border-color: #c8cbcf;
}

.tmr-btn-submit {
    color: #ffffff;
    background-color: #81a2a9;
    border-color: #81a2a9;
}

.tmr-btn-submit:hover {
    color: #ffffff;
    background-color: #77989F;
    border-color: #81a2a9;
}

.tmr-btn-submit-shadow {
    color: #ffffff;
    background-color: #81a2a9;
    border-color: #81a2a9;
    border: 1px solid #000000;
    box-shadow: 0 10px 20px #000000 !important;
}

.tmr-btn-submit-shadow:hover {
    color: #ffffff;
    background-color: #77989F;
    border-color: #81a2a9;
}

/* Tab styling — port from MVC site.css 327-352. White-on-transparent for
   inactive tabs, black-on-white for active. Without these rules, browsers
   fall back to default Bootstrap nav-tabs which doesn't match the rest of
   the app's color palette. */
.tmr-nav-link {
    color: white;
    background-color: transparent;
    padding: 0.5rem 1rem;
    text-decoration: none;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
    border: 1px solid transparent;
    border-radius: 0.5rem 0.5rem 0 0;
}

.tmr-nav-link:hover, .tmr-nav-link:focus {
    color: white;
    background-color: rgba(255, 255, 255, 0.1);
}

.tmr-nav-link.disabled {
    color: #6c757d;
    pointer-events: none;
    cursor: default;
}

.tmr-nav-link.active {
    color: black;
    background-color: white;
    border-bottom-color: transparent;
    font-weight: bold;
}

/* Raised card border + shadow — port from MVC cards.css. Used by the
   KPI summary cards on the Background Jobs admin page (and any future
   raised-card UI). */
.tmr-card-raised {
    border: 1px solid #000000;
    box-shadow: 0 10px 20px #000000 !important;
}

.breadcrumb.wizard {
    display: flex;
    justify-content: space-between;
}

.breadcrumb.wizard .breadcrumb-item {
    position: relative;
    flex: 1;
    text-align: center;
}

.breadcrumb.wizard .breadcrumb-item::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: 1px;
    background-color: #007bff;
    z-index: -1;
}

.breadcrumb.wizard .breadcrumb-item.active::before,
.breadcrumb.wizard .breadcrumb-item.active::after {
    background-color: #28a745;
}

.breadcrumb.wizard .breadcrumb-item::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -0.5em;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #fff;
    border: 2px solid #007bff;
    z-index: 1;
}

.pricing-header {
    max-width: 700px;
}

.pricing-card-title {
    font-size: 2.5rem;
    font-weight: 600;
}

/* Theme toggle */
.tmr-theme-toggle .btn {
    color: var(--tmr-navbar-link-fg);
    border-color: transparent;
    background-color: transparent;
    padding: 0.25rem 0.5rem;
}

.tmr-theme-toggle .btn.active,
.tmr-theme-toggle .btn:hover {
    color: var(--tmr-navbar-link-hover-fg);
    background-color: rgba(255, 255, 255, 0.1);
}

/* PR5f follow-on — Quill rich-text editor wrapper. Mirrors MVC's _rte.cshtml
   inline styles so the editor reads as a white card inside the dark
   tmr-form-shadow form. */
.quill-editor-wrapper {
    background-color: #fff;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.quill-editor-wrapper .ql-toolbar.ql-snow {
    background-color: #e9ecef !important;
    border: none !important;
    border-bottom: 1px solid #ccc !important;
}
.quill-editor-wrapper .ql-container.ql-snow {
    background-color: #fff !important;
    border: none !important;
}
.quill-editor-wrapper .ql-editor {
    min-height: 150px;
    max-height: 350px;
    overflow-y: auto;
    color: #333;
}

/* Action-icon affordance pill — black icons on a small light chip so the
   site-wide text-dark icon convention reads against the dark form-shadow
   background. Used for the top-left Add CTA on admin manage pages and for
   per-row Edit/Clear cells. */
.tmr-action-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    border-radius: 0.375rem;
    padding: 0.25rem 0.5rem;
}

/* PR5f follow-on — Bootstrap version compat shim, NOT a deviation from MVC.
   MVC loads Bootstrap 5.0.2, where `.table`'s default `--bs-table-bg` is
   `transparent` so cells inherit the parent (the #81a2a9 blue-gray of
   tmr-form-shadow) and text-dark _actionLink icons sit visibly on the
   blue-gray. Blazor loads Bootstrap 5.3.3, which changed `.table` to
   explicitly set `--bs-table-bg` to `--bs-body-bg` (white in light theme),
   so cells render white and mask the form-shadow. This rule restores MVC's
   visual behavior on the Blazor side without touching the Bootstrap CDN
   reference. */
.tmr-form-shadow .table {
    --bs-table-bg: transparent;
    --bs-table-color: #ffffff;
    --bs-table-hover-bg: rgba(255, 255, 255, 0.08);
    --bs-table-hover-color: #ffffff;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.04);
    color: #ffffff;
}
.tmr-form-shadow .table > :not(caption) > * > * {
    background-color: transparent;
    color: inherit;
}

/* PR5f follow-on — pager link styling. Ported verbatim from MVC's site.css
   so the Blazor Pager component reads identically to MVC's _pager partial. */
.tmr-page-link {
    position: relative;
    display: block;
    padding: 0.5rem 0.75rem;
    margin-left: 3px;
    line-height: 1.25;
    color: #ffffff;
    background-color: #6c757d;
    border: 1px solid #000000;
    border-radius: 5px;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    text-decoration: none;
}
.tmr-page-link:hover {
    z-index: 2;
    color: #ffffff;
    text-decoration: none;
    background-color: #5c636a;
    border-color: #000000;
}
.tmr-page-link:focus {
    z-index: 3;
    color: #0a58ca;
    background-color: #77989F;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.page-item.disabled .tmr-page-link {
    color: #6c757d;
    pointer-events: none;
    background-color: #fff;
    border-color: #dee2e6;
}

/* PR5f follow-on — drop-shadow utility for form buttons. Apply alongside any
   button color class (btn-secondary, btn-danger, etc.) to give it the same
   border + shadow treatment tmr-btn-submit-shadow has. Keeps Save and Cancel
   visually consistent on the dark form-shadow page bg. */
.tmr-btn-shadow {
    border: 1px solid #000000;
    box-shadow: 0 10px 20px #000000 !important;
}

/* PR6 (TMRW-64) — match-highlight pill for the Log Detail drawer body.
   Wraps each free-text-query occurrence in the searched log body. Yellow
   accent reads against the drawer's bg-light pre block without fighting
   the white panel chrome. */
.tmr-log-match {
    background-color: #fff3a6;
    color: #1a1a1a;
    padding: 0 2px;
    border-radius: 2px;
}

/* Master-plan PR6 (TMRW-64) — compact filter-bar Apply button.
   Matches the height + font scale of the filter-row selects/inputs so
   the Apply button reads as part of the row rather than dominating it.
   Generic (not under tmr-aispend-* namespace) so future admin filter
   surfaces (Insights when ported, etc.) reuse the same visual.
   Pinned to Settings.ButtonClasses.FilterApplyAction.

   Color uses the documented brand palette from wwwroot/css/palette.css
   (--tmr-primary / --tmr-primary-border) — the slate-teal MVC's
   `.tmr-btn-submit` ships. Theme-aware via CSS custom properties. */
.tmr-btn-filter-apply {
    background: var(--tmr-primary);
    color: #ffffff;
    border: 1px solid var(--tmr-primary-border);
    border-radius: 6px;
    padding: 0.35rem 1rem;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s;
}

.tmr-btn-filter-apply:hover {
    background: var(--tmr-primary-border);
    border-color: var(--tmr-primary-border);
}

.tmr-btn-filter-apply:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Master-plan PR6 (TMRW-64) — AI Spend Report styles ported from MVC's
   insights.css under a tmr-aispend-* namespace so visual parity holds
   for the side-by-side comparison window. Same color values as MVC's
   .insights-container / .kpi-card / .chart-grid / .filter-bar / etc. */
.tmr-aispend-page-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1a202c;
    margin: 1rem 0;
}

.tmr-aispend-container {
    background-color: #f4f6f9;
    color: #2d3748;
    padding: 1.5rem;
    border-radius: 8px;
}

.tmr-aispend-filter-bar {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.tmr-aispend-filter-bar label {
    color: #718096;
    font-size: 0.85rem;
    margin: 0;
}

.tmr-aispend-filter-bar select,
.tmr-aispend-filter-bar input[type="date"] {
    background: #f7fafc;
    color: #2d3748;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.35rem 0.6rem;
    font-size: 0.85rem;
}

.tmr-aispend-filter-bar select:focus,
.tmr-aispend-filter-bar input[type="date"]:focus {
    border-color: #3b82f6;
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.tmr-aispend-kpi-bar {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.tmr-aispend-kpi-card {
    flex: 1;
    min-width: 105px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.75rem 0.55rem;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s, transform 0.2s;
}

.tmr-aispend-kpi-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.tmr-aispend-kpi-card .kpi-value {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.1;
}

.tmr-aispend-kpi-card .kpi-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #718096;
    margin-top: 0.3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tmr-aispend-kpi-card.accent-blue .kpi-value { color: #3b82f6; }
.tmr-aispend-kpi-card.accent-green .kpi-value { color: #10b981; }
.tmr-aispend-kpi-card.accent-amber .kpi-value { color: #f59e0b; }
.tmr-aispend-kpi-card.accent-purple .kpi-value { color: #8b5cf6; }
.tmr-aispend-kpi-card.accent-emerald .kpi-value { color: #059669; }

.tmr-aispend-section-header {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #3b82f6;
    margin: 0.5rem 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e2e8f0;
}

.tmr-aispend-chart-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.tmr-aispend-chart-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s;
}

.tmr-aispend-chart-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.tmr-aispend-chart-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1a202c;
    margin: 0;
}

.tmr-aispend-chart-title i {
    color: #3b82f6;
    margin-right: 0.3rem;
}

.tmr-aispend-chart-subtitle {
    font-size: 0.75rem;
    color: #a0aec0;
    display: block;
    margin-bottom: 0.75rem;
}

@media (max-width: 992px) {
    .tmr-aispend-chart-grid {
        grid-template-columns: 1fr;
    }
    .tmr-aispend-kpi-bar {
        flex-direction: column;
    }
}

@media (max-width: 576px) {
    .tmr-aispend-container {
        padding: 0.75rem;
    }
}

/* ----- Master-plan PR7 (Insights) ----------------------------------- */
/* Insights page styles. Mirrors MVC's TrackMyResumeMVC/wwwroot/css/
   insights.css under a tmr-insights-* namespace so visual parity holds
   for the side-by-side comparison window. The KPI / chart-grid / chart-
   card / section-header rules echo the AI Spend Report block above; the
   tier-3 / accent-red / admin-locked rules are Insights-specific.
   CONTRACT — class names match the inline literals in
   Components/Pages/Insights.razor. */
.tmr-insights-page-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1a202c;
    margin: 1rem 0;
}

.tmr-insights-container {
    background-color: #f4f6f9;
    color: #2d3748;
    padding: 1.5rem;
    border-radius: 8px;
}

.tmr-insights-filter-bar {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.tmr-insights-filter-bar label {
    color: #718096;
    font-size: 0.85rem;
    margin: 0;
}

.tmr-insights-filter-bar select,
.tmr-insights-filter-bar input[type="date"] {
    background: #f7fafc;
    color: #2d3748;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.35rem 0.6rem;
    font-size: 0.85rem;
}

.tmr-insights-filter-bar select:focus,
.tmr-insights-filter-bar input[type="date"]:focus {
    border-color: #3b82f6;
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.tmr-insights-kpi-bar {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.tmr-insights-kpi-card {
    flex: 1;
    min-width: 105px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.75rem 0.55rem;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s, transform 0.2s;
}

.tmr-insights-kpi-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.tmr-insights-kpi-card .kpi-value {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.1;
}

.tmr-insights-kpi-card .kpi-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #718096;
    margin-top: 0.3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tmr-insights-kpi-card.accent-blue .kpi-value { color: #3b82f6; }
.tmr-insights-kpi-card.accent-green .kpi-value { color: #10b981; }
.tmr-insights-kpi-card.accent-amber .kpi-value { color: #f59e0b; }
.tmr-insights-kpi-card.accent-purple .kpi-value { color: #8b5cf6; }
.tmr-insights-kpi-card.accent-emerald .kpi-value { color: #059669; }
.tmr-insights-kpi-card.accent-red .kpi-value { color: #ef4444; }

.tmr-insights-section-header {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #3b82f6;
    margin: 0.5rem 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e2e8f0;
}

.tmr-insights-chart-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.tmr-insights-chart-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s;
}

.tmr-insights-chart-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.tmr-insights-chart-card-fullwidth {
    grid-column: 1 / -1;
}

.tmr-insights-chart-header {
    margin-bottom: 0.75rem;
}

.tmr-insights-chart-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1a202c;
    margin: 0;
}

.tmr-insights-chart-title i {
    color: #3b82f6;
    margin-right: 0.3rem;
}

.tmr-insights-chart-subtitle {
    font-size: 0.75rem;
    color: #a0aec0;
    display: block;
    margin-top: 0.25rem;
}

/* Admin "locked" card — surfaces when meets_threshold == 0 */
.tmr-insights-admin-locked {
    text-align: center;
    padding: 2rem;
}

.tmr-insights-admin-lock-icon {
    font-size: 2rem;
    color: #a0aec0;
}

.tmr-insights-admin-lock-text {
    color: #718096;
    margin-top: 0.75rem;
}

/* Drill-down panel body styling — table rendered inside <DetailPanel> */
.tmr-insights-detail-table {
    font-size: 0.85rem;
}

.tmr-insights-detail-table th {
    background: #f7fafc;
    color: #4a5568;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
}

.tmr-insights-detail-loading,
.tmr-insights-detail-empty {
    text-align: center;
    padding: 2rem;
    color: #a0aec0;
}

@media (max-width: 992px) {
    .tmr-insights-chart-grid {
        grid-template-columns: 1fr;
    }
    .tmr-insights-kpi-bar {
        flex-direction: column;
    }
}

@media (max-width: 576px) {
    .tmr-insights-container {
        padding: 0.75rem;
    }
}

/* ----- Master-plan PR7 — DetailPanel shared component (ADR-017) ----- */
/* Generic slide-out detail panel chrome. Class names match the inline
   literals in TrackMyResume.Blazor.Components/DetailPanel.razor. */
.tmr-detail-panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1040;
    cursor: pointer;
}

.tmr-detail-panel {
    position: fixed;
    top: 0;
    height: 100vh;
    background: #ffffff;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.15);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    max-width: 100vw;
}

.tmr-detail-panel-right {
    right: 0;
}

.tmr-detail-panel-left {
    left: 0;
}

.tmr-detail-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.tmr-detail-panel-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #1a202c;
}

.tmr-detail-panel-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1.25rem;
}

@media (max-width: 576px) {
    .tmr-detail-panel {
        width: 100vw !important;
    }
}

/* ----- Master-plan PR8a — Admin CRUD shared components (ADR-018) ---- */
/* AdminListTable + AdminFormShell namespace styles. Class names match
   the inline literals in TrackMyResume.Blazor.Components/AdminListTable.razor
   and TrackMyResume.Blazor.Components/AdminFormShell.razor. The
   tmr-form-shadow rule that wraps the form body is defined earlier in
   this file (existing site rule); only the admin-specific chrome lands
   here. */

/* (Originally housed tmr-admin-list-* selectors here. Removed 2026-05-08
   when AdminListTable.razor was rewritten to match the NotificationsManage
   chrome standard — the rewritten component emits tmr-form-shadow + the
   site-wide table chrome, NOT a tmr-admin-list-* namespace. Keeping this
   anchor comment so the section header above still has a body section.) */

.tmr-admin-form-container {
    padding-top: 0.5rem;
}

.tmr-admin-form-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1a202c;
    margin: 1rem 0 0.75rem 0;
}

/* Validation messages inside the dark form-shadow chrome use Bootstrap
   danger red so error states read with the conventional severity color
   AND remain legible against the form-shadow's slate-teal background.
   Original yellow was wrong-headed — Craig's site convention is RED for
   data-validation errors (matches MVC's Bootstrap text-danger default). */
.tmr-admin-form-container .validation-message {
    color: #dc3545;
}

/* Error page (Error.razor). The status image carried no CSS, so it
   rendered at its intrinsic width and overflowed its col-md-6 into the
   copy column on the two-column 400/401/403/404/418/429 layout — the
   image + copy overlap Craig caught 2026-05-28. Constrain the image to
   its column (and cap its height) so it can never bleed into the text,
   and pad the container so content isn't flush to the viewport edge. */
.error-container {
    padding: 1.5rem;
}
.error-logo {
    max-width: 100%;
    height: auto;
    max-height: 360px;
    display: block;
    margin-bottom: 1rem;
}