/* Blueprint theme, shared by Reports and Runtime (Home/Index.cshtml carries
   its own copy of the same palette for its bespoke hero/card markup). Most
   of site.css's shared components (navbar, buttons, .stat-card, .report-card,
   the report preview SVGs) already read colors from the --ink/--surface/etc.
   custom properties, so overriding those here re-themes them for free. What's
   left are the pieces that were never tokenized: plain Bootstrap forms/
   tables/cards, flatpickr's popup calendar, and the MachineRuntimeChart
   component (which ships its own hardcoded-hex <style> block). */

body.home-blueprint {
    --ink: #e7edf7;
    --ink-muted: #8492ab;
    --surface: #101a2e;
    --surface-muted: #0e1729;
    --border-subtle: #24314a;

    --accent: #3ab7ff;
    --accent-dark: #0072ce;
    --accent-bg: #16223a;

    --status-running: #3ddc97;
    --status-running-bg: #10241c;
    --status-down: #ff6b6b;
    --status-down-bg: #2a1414;
    --status-attention: #f0b23c;
    --status-attention-bg: #2a220f;

    background: #0b1220;
    background-image:
        linear-gradient(rgba(58, 183, 255, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(58, 183, 255, .06) 1px, transparent 1px);
    background-size: 28px 28px;
    color: var(--ink);
}

body.home-blueprint h1,
body.home-blueprint h2,
body.home-blueprint h3,
body.home-blueprint h4,
body.home-blueprint h5,
body.home-blueprint h6 {
    color: var(--ink);
}

body.home-blueprint .text-muted {
    color: var(--ink-muted) !important;
}

/* ---- Forms: Bootstrap's .form-control isn't tokenized ---- */
body.home-blueprint .form-control,
body.home-blueprint input.text-box {
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    color: var(--ink);
}
body.home-blueprint .form-control:focus,
body.home-blueprint input.text-box:focus {
    background: var(--surface);
    border-color: var(--accent);
    color: var(--ink);
    box-shadow: 0 0 0 0.2rem rgba(58, 183, 255, .25);
}
body.home-blueprint .form-label {
    color: var(--ink-muted);
}
body.home-blueprint select.form-control option {
    background: var(--surface);
    color: var(--ink);
}

/* ---- Tables: Bootstrap's .table isn't tokenized ---- */
body.home-blueprint .table {
    color: var(--ink);
    border-color: var(--border-subtle);
}
body.home-blueprint .table thead th {
    color: var(--ink-muted);
    border-color: var(--border-subtle);
    font-weight: 600;
}
body.home-blueprint .table td,
body.home-blueprint .table th {
    border-color: var(--border-subtle);
}
body.home-blueprint .table-hover tbody tr:hover {
    background: var(--surface-muted);
    color: var(--ink);
}
body.home-blueprint .highlightedRow {
    background-color: rgba(240, 178, 60, .12);
}

/* ---- Cards: Runtime/Index uses plain Bootstrap .card for machine tiles ---- */
body.home-blueprint .card {
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    color: var(--ink);
}
body.home-blueprint .card-header {
    background: var(--surface-muted);
    border-bottom: 1px solid var(--border-subtle);
    color: var(--ink);
}
body.home-blueprint .card-header .nav-link {
    color: var(--ink) !important;
}

/* ---- Runtime timeline (MachineRuntimeChart component) ----
   The component's own <style> block hardcodes its colors (including a
   stray `body { background:#fff }` left over from when it likely rendered
   standalone) - these need to out-specificity plain-class/element
   selectors, not just redeclare the same ones. */
body.home-blueprint .runStateTimeline .bar {
    background-color: var(--surface-muted);
}
body.home-blueprint .graphTicks > div > div:first-child {
    background: var(--border-subtle) !important;
}
body.home-blueprint .no-events {
    color: var(--ink-muted);
}

/* ---- Flatpickr date picker popup ---- */
body.home-blueprint .flatpickr-calendar {
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
    color: var(--ink);
}
body.home-blueprint .flatpickr-calendar.arrowTop::before,
body.home-blueprint .flatpickr-calendar.arrowTop::after {
    border-bottom-color: var(--surface);
}
body.home-blueprint .flatpickr-months .flatpickr-month,
body.home-blueprint .flatpickr-weekdays,
body.home-blueprint span.flatpickr-weekday {
    background: var(--surface);
    color: var(--ink-muted);
    fill: var(--ink-muted);
}
body.home-blueprint .flatpickr-day {
    color: var(--ink);
}
body.home-blueprint .flatpickr-day.flatpickr-disabled,
body.home-blueprint .flatpickr-day.prevMonthDay,
body.home-blueprint .flatpickr-day.nextMonthDay {
    color: var(--ink-muted);
    opacity: .4;
}
body.home-blueprint .flatpickr-day:hover {
    background: var(--surface-muted);
}
body.home-blueprint .flatpickr-day.selected {
    background: var(--accent);
    border-color: var(--accent);
    color: #08101f;
}
body.home-blueprint .flatpickr-current-month input.cur-year,
body.home-blueprint .flatpickr-current-month .flatpickr-monthDropdown-months {
    background: var(--surface);
    color: var(--ink);
}
body.home-blueprint .flatpickr-prev-month svg,
body.home-blueprint .flatpickr-next-month svg {
    fill: var(--ink-muted);
}