/*
  Aeriva design system v3 - "Clean Light"
  ----------------------------------------
  Approved direction: light, clean, restrained - inspired by Spruce.
  True Aeriva orange kept as the single primary accent (unchanged brand
  colour), used sparingly rather than throughout. Monospace instrument
  numerals dropped in favour of plain, humanist type everywhere -
  cleanliness here comes from whitespace and restraint, not a
  technical/gauge identity.

  IMPORTANT: this file uses the exact same CSS custom property names
  and component class names as the previous dark "Site Instrument"
  version. That's deliberate - the ~24+ pages built on this design
  system reference var(--av-*) tokens and .av-* classes throughout, so
  changing the *values* here re-themes the whole app from this one
  file, without needing to touch every individual page.

  This file is a plain stylesheet linked in layouts/app.blade.php - no
  build step required, just deploy the file and it's live.
*/

:root {
    /* Surfaces - canvas (page background) is a hair off pure white,
       cards ("paper") are pure white, creating gentle depth without
       heavy shadows or borders doing all the work. */
    --av-bg: #fafbfc;
    --av-surface: #ffffff;
    --av-surface-2: #f6f8f9;
    --av-border: #d8dee3;
    --av-border-strong: #c3cbd2;

    /* Text */
    --av-text: #16202b;
    --av-text-muted: #5b6b7a;
    --av-text-faint: #98a3ad;

    /* Primary accent - true Aeriva orange, unchanged from the original brand */
    --av-primary: #ff7a1a;
    --av-primary-hover: #e8690f;
    --av-primary-tint: #b35812;
    --av-primary-bg: #fff1e6;

    /* Signal accent - used for "complete" / "live data" markers. Lime
       (the previous dark-theme signal colour) doesn't read well on a
       light background, so this is a clean green instead - same
       semantic meaning, adapted for the new surface. */
    --av-signal: #1c8a4b;
    --av-signal-bg: #eaf7ef;
    --av-signal-border: #bfe6cf;

    /* AI / Intelligence accent (purple) - reserved for AI-assisted
       features (Smart Radiator Capture, Radiator Intelligence, EPC
       auto-fill). */
    --av-ai: #5b3ea6;
    --av-ai-tint: #5b3ea6;
    --av-ai-bg: #f1edfb;

    /* Status colours */
    --av-success: #1c8a4b;
    --av-success-bg: #eaf7ef;
    --av-success-border: #bfe6cf;

    --av-danger: #c0392b;
    --av-danger-text: #c0392b;
    --av-danger-bg: #fdecea;
    --av-danger-border: #f3c6c0;

    --av-warning: #b3790a;
    --av-warning-bg: #fdf3e0;
    --av-warning-border: #f0dcae;

    /* EPC A-G rating badge colours - a real certificate convention,
       deliberately kept separate from the general palette. */
    --av-epc-a: #0f9d58;
    --av-epc-b: #4caf50;
    --av-epc-c: #8bc34a;
    --av-epc-d: #ffc107;
    --av-epc-e: #ff9800;
    --av-epc-f: #ff5722;
    --av-epc-g: #e53935;

    /* Shape - softer, friendlier radii than the old instrument-panel look */
    --av-radius: 10px;
    --av-radius-pill: 999px;

    /* Type - dropped the monospace instrument numerals in favour of
       plain type everywhere. Kept --av-font-mono defined (rather than
       removing it) so every existing var(--av-font-mono)/.mono usage
       across the app automatically stops being monospace from this one
       change, without needing to edit every page that references it. */
    --av-font-display: 'Space Grotesk', sans-serif;
    --av-font-body: 'Inter', sans-serif;
    --av-font-mono: 'Inter', sans-serif;
}

/* Page wrapper */
.av-page {
    max-width: 520px;
    margin: 0 auto;
    padding: 20px 18px 44px;
    color: var(--av-text);
    font-family: var(--av-font-body);
    background: var(--av-bg);
    min-height: 100vh;
}

@media (min-width: 640px) {
    .av-page { max-width: 640px; }
}

.av-page-header {
    margin-bottom: 22px;
}

.av-page-title {
    font-family: var(--av-font-display);
    font-size: 26px;
    font-weight: 700;
    color: var(--av-text);
    margin: 0 0 4px;
    letter-spacing: -0.01em;
}

.av-page-subtitle {
    color: var(--av-text-muted);
    font-size: 14px;
}

.av-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--av-primary-bg);
    color: var(--av-primary-tint);
    padding: 10px 14px;
    border-radius: var(--av-radius);
    font-weight: 600;
    text-decoration: none;
    font-size: 13px;
    margin-top: 10px;
}

/* Top project strip + tab bar (used by the nav partial) */
.av-topstrip {
    padding: 12px 0;
    border-bottom: 1px solid var(--av-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
    font-size: 12px;
    letter-spacing: 0.02em;
    color: var(--av-text-faint);
    background: var(--av-surface);
}

.av-topstrip b { color: var(--av-text); font-weight: 600; }

.av-tabrow {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 20px;
    background: var(--av-surface);
    box-shadow: inset 0 -1px 0 0 var(--av-border);
}

.av-tabrow::-webkit-scrollbar { display: none; }

.av-tab {
    flex: 0 0 auto;
    padding: 12px 4px;
    margin-right: 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--av-text-faint);
    box-shadow: inset 0 -2px 0 0 transparent;
    white-space: nowrap;
    text-decoration: none;
}

.av-tab.is-current {
    color: var(--av-primary-tint);
    box-shadow: inset 0 -2px 0 0 var(--av-primary);
}

.av-tab.is-ai.is-current {
    color: var(--av-ai);
    box-shadow: inset 0 -2px 0 0 var(--av-ai);
}

.av-tabgroup-label {
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--av-text-faint);
    padding: 10px 0 4px;
}

/* Readout strip - key metrics at the top of a page */
.av-readout-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius);
    overflow: hidden;
    margin-bottom: 22px;
    background: var(--av-surface);
}

.av-readout {
    padding: 14px 12px;
    border-right: 1px solid var(--av-border);
}

.av-readout:last-child { border-right: none; }

.av-readout-label {
    font-size: 11px;
    color: var(--av-text-faint);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.av-readout-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--av-text);
    line-height: 1;
}

.av-readout-value .unit {
    font-size: 11px;
    color: var(--av-text-faint);
    margin-left: 2px;
    font-weight: 500;
}

/* Signal dot - "complete" / "live data" marker */
.av-signal-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--av-signal);
    flex: 0 0 auto;
}

/* Collapsible numbered sections (replaces flat stacked cards) */
.av-section {
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius);
    margin-bottom: 10px;
    background: var(--av-surface);
    overflow: hidden;
}

.av-section[open] { border-color: var(--av-border-strong); }

.av-section > summary {
    list-style: none;
    cursor: pointer;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 15px;
    gap: 10px;
}

.av-section > summary::-webkit-details-marker { display: none; }

.av-section-index {
    color: var(--av-text-faint);
    font-size: 12px;
    margin-right: 10px;
    font-weight: 500;
}

.av-section-title-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
}

.av-section-status {
    font-size: 10px;
    padding: 3px 8px;
    border-radius: var(--av-radius-pill);
    letter-spacing: 0.03em;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
}

.av-section-status.done {
    background: var(--av-signal-bg);
    color: var(--av-signal);
    border: 1px solid var(--av-signal-border);
}

.av-section-status.partial {
    background: var(--av-warning-bg);
    color: var(--av-warning);
    border: 1px solid var(--av-warning-border);
}

.av-chev {
    color: var(--av-text-faint);
    transition: transform 0.15s ease;
    font-size: 12px;
    flex: 0 0 auto;
}

.av-section[open] .av-chev { transform: rotate(90deg); }

.av-section-body {
    padding: 0 16px 18px;
    border-top: 1px solid var(--av-border);
}

/* Non-collapsible variant, for sections that should always be open
   (e.g. the first/primary action on a page, like EPC Lookup) */
.av-card {
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius);
    margin-bottom: 10px;
    background: var(--av-surface);
    padding: 16px;
}

.av-card-title {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Field grid */
.av-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 14px;
}

.av-field-grid.single-col { grid-template-columns: 1fr; }
.av-field-grid .full { grid-column: 1 / -1; }

.av-card > .av-field-grid:first-of-type,
.av-section-body > .av-field-grid:first-of-type {
    margin-top: 14px;
}

.av-label {
    display: block;
    font-size: 12px;
    color: var(--av-text-muted);
    margin-bottom: 6px;
    font-weight: 500;
}

.av-input, .av-select, .av-textarea {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--av-border-strong);
    background: var(--av-surface);
    color: var(--av-text);
    font-family: var(--av-font-body);
    font-size: 14px;
    box-sizing: border-box;
}

.av-input.mono, .av-select.mono { font-family: var(--av-font-body); }

.av-input:focus, .av-select:focus, .av-textarea:focus {
    outline: none;
    border-color: var(--av-primary);
}

.av-hint {
    color: var(--av-text-faint);
    font-size: 12px;
    margin-top: 8px;
    line-height: 1.6;
}

.av-hint.mono { font-family: var(--av-font-body); }

/* Buttons */
.av-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: 9px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    text-decoration: none;
    font-size: 14px;
    font-family: var(--av-font-body);
}

.av-btn-primary { background: var(--av-primary); color: #fff; }
.av-btn-primary:hover { background: var(--av-primary-hover); }

.av-btn-outline {
    background: transparent;
    color: var(--av-primary-tint);
    border: 1px solid var(--av-primary);
}

.av-btn-outline-danger {
    background: transparent;
    color: var(--av-danger-text);
    border: 1px solid var(--av-danger-border);
    font-size: 12px;
    padding: 9px 13px;
}

.av-btn-ai { background: var(--av-ai); color: white; }

.av-btn-row { display: flex; gap: 10px; margin-top: 18px; }
.av-btn-row .av-btn { flex: 1; }

/* Status banners */
.av-banner {
    border-radius: var(--av-radius);
    padding: 12px 14px;
    margin-bottom: 16px;
    font-weight: 600;
    font-size: 13px;
}

.av-banner-success { background: var(--av-success-bg); border: 1px solid var(--av-success-border); color: var(--av-success); }
.av-banner-danger { background: var(--av-danger-bg); border: 1px solid var(--av-danger-border); color: var(--av-danger-text); }
.av-banner-warning { background: var(--av-warning-bg); border: 1px solid var(--av-warning-border); color: var(--av-warning); }

/* Badges / pills */
.av-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 600;
    border-radius: var(--av-radius-pill);
    padding: 3px 9px;
    letter-spacing: 0.03em;
}

.av-badge-ai { background: var(--av-ai-bg); border: 1px solid var(--av-ai); color: var(--av-ai); }
.av-badge-neutral { background: var(--av-surface-2); border: 1px solid var(--av-border); color: var(--av-text-muted); }
.av-badge-success { background: var(--av-signal-bg); border: 1px solid var(--av-signal-border); color: var(--av-signal); }

/* EPC certificate badge (A-G) - page-specific, real-world convention */
.av-epc-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 9px;
    font-weight: 700;
    font-size: 19px;
    color: #111;
    flex: 0 0 auto;
}

.av-epc-badge.a { background: var(--av-epc-a); color: #fff; }
.av-epc-badge.b { background: var(--av-epc-b); color: #fff; }
.av-epc-badge.c { background: var(--av-epc-c); }
.av-epc-badge.d { background: var(--av-epc-d); }
.av-epc-badge.e { background: var(--av-epc-e); color: #fff; }
.av-epc-badge.f { background: var(--av-epc-f); color: #fff; }
.av-epc-badge.g { background: var(--av-epc-g); color: #fff; }

.av-result-row {
    background: var(--av-surface-2);
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

body { background: var(--av-bg); }

/* The shared Breeze layout wraps every page in a min-h-screen/bg-gray-100
   div that sits on top of <body>. Now that the design system itself is
   light, this matters less than it did with the old dark theme (there's
   no jarring light-canvas-behind-dark-cards mismatch any more), but it's
   kept for consistency/robustness so pages using the design system get
   a guaranteed, correct background regardless of what Breeze's own
   default does. */
.min-h-screen:has(.av-page),
.min-h-screen:has(.av-topstrip) {
    background: var(--av-bg) !important;
}

/*
  Desktop layout
  --------------
  Everything above this point was built mobile-first, since that's how
  Aeriva is actually used day-to-day. But now that other tradespeople
  are signing up, some genuinely working from a laptop, two real
  problems showed up on wider screens:

  1. The project tab bar scrolls horizontally with a deliberately
     hidden scrollbar (clean on a phone, where you swipe it) - but a
     desktop has no swipe gesture and no visible scrollbar, so there
     was no way to reach any tab beyond whatever fit in the initial
     view. Fixed here by having the tabs wrap onto as many lines as
     needed instead of scrolling at all once there's enough width to
     make wrapping look reasonable, so every tab is just visible.

  2. Every page is capped at 520-640px wide, which is right for a
     phone but leaves most of a laptop screen empty. Several pages set
     their own inline max-width in the template itself (520-900px
     depending on the page), which would block a plain override here -
     `!important` is used deliberately for this reason, the standard,
     correct way to have a central stylesheet win over an inline style.
*/
@media (min-width: 900px) {
    .av-page {
        max-width: 1100px !important;
    }

    /* A handful of pages (Project Overview, Radiator Scan, Radiator
       Intelligence, Rooms edit, Photos) predate the shared .av-page
       class and kept their own page-specific wrapper class with its
       own hardcoded max-width - these need the same desktop widening,
       just via their own class names. */
    .wrap,
    .rs,
    .ri,
    .photo-survey-page,
    .sp-page {
        max-width: 1100px !important;
    }

    .av-tabrow {
        overflow-x: visible;
        flex-wrap: wrap;
        box-shadow: none;
        border-bottom: 1px solid var(--av-border);
        padding-bottom: 6px;
    }

    .av-tab {
        margin-right: 24px;
        margin-bottom: 8px;
    }
}