/* ============================================
   Ray2Volt Solar Toolbox - Brutalist Light Theme
   Sharp Edges, Cyan-Blue Accents
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,400,0,0');

.material-symbols-rounded {
    display: inline-block;
    font-family: 'Material Symbols Rounded';
    font-weight: 400;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* --- CSS Custom Properties ---
   Everything below is the light theme. The dark theme further down re-declares
   the colour tokens only; sizes, spacing and radii are shared. Anything in the
   app chrome should reach for a token rather than a literal colour, so it
   follows the theme. Documents - the A4 previews and everything that prints -
   deliberately do not: they carry their own local palettes and stay on paper
   white in both themes. */
:root {
    color-scheme: light;

    /* Primary Colors - Light Cyan Accent */
    --primary: #06B6D4;
    --primary-light: #CFFAFE;
    --primary-dark: #0891B2;
    /* Accent text on a light background. --primary is 2.45:1 and --primary-dark
       3.68:1 against white, so neither is legible as body text; this is 5.37:1.
       Use it wherever the accent is the text itself, never as a fill. */
    --primary-text: #0E7490;

    /* Neutral Colors - Clean Light Theme */
    /* The page sits one step below the cards rather than a full shade of grey
       below them: halfway from the old #F5F7F8 to white. Cards still read as
       raised because every one of them carries a --border-light edge, so the
       fill only has to hint at the difference, not carry it. */
    --bg-body: #FAFBFC;
    --bg-card: #FFFFFF;
    --bg-sidebar: #FFFFFF;
    --bg-hover: #EEF1F3;
    --bg-active: #E0F7FA;

    /* Text Colors */
    --text-primary: #111827;
    --text-secondary: #4B5563;
    --text-muted: #6B7280;

    /* Text that sits on a --primary fill, never on the page */
    --on-primary: #FFFFFF;

    /* Border Colors - Stronger for brutalist */
    --border-light: #D1D5DB;
    --border-medium: #9CA3AF;

    /* Alternating rows in a UI table (a document's own striping is its own) */
    --row-stripe: #F9FAFB;

    /* The pale band behind a UI table's header row */
    --table-head-bg: #E8F4FA;

    /* The surface a document preview is laid on, a shade below the page so
       the paper reads as paper. The paper itself never themes. */
    --viewer-bg: #E8ECF0;

    /* Status colours for the app chrome - validation blocks, save states,
       destructive buttons. Each is a text/fill/edge trio so a block can be
       built from one family and still flip cleanly with the theme. */
    --danger-text: #B42318;
    --danger-strong: #8C1A12;
    --danger-bg: #FFF6F5;
    --danger-border: #E8A9A2;

    --warning-text: #8A6100;
    --warning-bg: #FFFBEB;
    --warning-border: #E4C580;

    --success-text: #1B7F4B;
    --success-bg: #F1FAF5;
    --success-border: #9BD5B4;

    --info-text: #1D4ED8;
    --info-bg: #EFF6FF;
    --info-border: #BFDBFE;

    /* Shadows - Minimal for brutalist */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.1);

    /* The lift under a card. Every panel a person fills in - form cards, item
       cards, calculator panels, result cards - carries this and nothing else,
       so the whole toolbox sits at one height above the page. It is deliberately
       faint: the card already has a --border-medium edge doing most of the work,
       and the sharp 2px corners this toolbox is built on turn muddy under a
       heavy shadow. Documents never take it - paper is flat. */
    --lift: 0 1px 1px rgba(17, 24, 39, 0.03), 0 3px 8px -2px rgba(17, 24, 39, 0.07);

    /* Transitions */
    --transition-fast: 0.1s ease;
    --transition-base: 0.2s ease;

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 0.75rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;

    /* Border Radius - Sharp/Brutalist */
    --radius-sm: 2px;
    --radius-md: 2px;
    --radius-lg: 4px;

    /* Sidebar Width */
    --sidebar-width: 250px;
    --sidebar-collapsed-width: 76px;

    /* Shared width for every tool's content column */
    --tool-width: 1100px;

    /* Vertical gap between a tool's top-level sections (cards, grids, tables) */
    --section-gap: 1.5rem;

    /* Scrollbars - one grey pill, shared by every scrolling area */
    --scrollbar-size: 6px;
    --scrollbar-thumb: #6B7280;
    --scrollbar-thumb-hover: #4B5563;
    --scrollbar-thumb-active: #374151;
}

/* --- Dark theme ---
   theme.js stamps data-theme on <html> before the first paint. Only colours
   change; every size, radius and transition is shared with the light theme
   above. The neutrals are warm-free greys so the cyan accent stays the only
   colour on the page, and the accent itself brightens because #0891B2 sinks
   into a dark surface. */
:root[data-theme="dark"] {
    color-scheme: dark;

    --primary: #22D3EE;
    --primary-light: #0E3A44;
    --primary-dark: #06B6D4;
    /* 8.9:1 on --bg-card. The light theme's #0E7490 is 2.1:1 there. */
    --primary-text: #67E8F9;

    --bg-body: #17191C;
    --bg-card: #1F2225;
    --bg-sidebar: #1B1E21;
    --bg-hover: #292D31;
    --bg-active: #0E3239;

    --text-primary: #E6E8EA;
    --text-secondary: #B0B6BC;
    /* Muted has to clear 4.5:1 on the *hover* surface, not just the card -
       captions and icon buttons live there. #878E95 was 4.18:1 on it. */
    --text-muted: #959CA3;

    /* The accent is bright enough that white on it is 1.9:1; near-black is
       12:1, so filled buttons keep their contrast when the theme flips. */
    --on-primary: #06222A;

    --border-light: #2F3438;
    --border-medium: #464C52;

    --row-stripe: #24282C;
    --table-head-bg: #22343A;
    --viewer-bg: #101214;

    --danger-text: #FCA5A5;
    --danger-strong: #FECACA;
    --danger-bg: #3A1E1B;
    --danger-border: #7A3B34;

    --warning-text: #F0C46A;
    --warning-bg: #33280F;
    --warning-border: #6E5A28;

    --success-text: #6EE7A8;
    --success-bg: #12301F;
    --success-border: #2E6A47;

    --info-text: #93C5FD;
    --info-bg: #16263C;
    --info-border: #2C4E7C;

    /* A shadow has nothing to darken on a dark surface, so it deepens
       instead of softening. */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 4px 14px rgba(0, 0, 0, 0.6);

    /* A drop shadow has little to darken here, so the lift is carried mostly by
       a one-pixel highlight along the card's top edge - the way a raised surface
       catches the light - with the shadow underneath only deepening the gap. */
    --lift: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 1px 2px rgba(0, 0, 0, 0.45), 0 4px 12px -3px rgba(0, 0, 0, 0.55);

    --scrollbar-thumb: #4A5058;
    --scrollbar-thumb-hover: #5E656D;
    --scrollbar-thumb-active: #737B84;
}

/* Printing is always on paper. Documents carry their own palettes and are
   unaffected either way, but any chrome that reaches the page - a header, a
   note, a table rule - has to come back to ink on white. */
@media print {
    :root,
    :root[data-theme="dark"] {
        color-scheme: light;

        --bg-body: #FFFFFF;
        --bg-card: #FFFFFF;
        --bg-sidebar: #FFFFFF;
        --bg-hover: #F3F4F6;
        --bg-active: #E0F7FA;

        --text-primary: #111827;
        --text-secondary: #4B5563;
        --text-muted: #6B7280;
        --on-primary: #FFFFFF;

        --border-light: #D1D5DB;
        --border-medium: #9CA3AF;
        --row-stripe: #F9FAFB;
        --table-head-bg: #E8F4FA;
        --viewer-bg: #FFFFFF;

        --primary: #06B6D4;
        --primary-light: #CFFAFE;
        --primary-dark: #0891B2;
        --primary-text: #0E7490;

        /* Paper is flat. */
        --lift: none;
    }
}

/* --- Scrollbars ---
   One scrollbar for the whole toolbox: a solid dark grey pill, the same
   neutral as the body text. Wherever an area can scroll, its bar is drawn -
   at rest, not on hover - so a scrollable area always looks scrollable and
   never changes appearance under the pointer. The track is transparent and
   always reserves its width, so the content underneath never reflows. */
::-webkit-scrollbar {
    width: var(--scrollbar-size);
    height: var(--scrollbar-size);
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 999px;
    transition: background-color var(--transition-base);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

::-webkit-scrollbar-thumb:active {
    background: var(--scrollbar-thumb-active);
}

/* Firefox has no ::-webkit-scrollbar, so it gets the same bar through the
   standard properties. They are scoped to browsers without the WebKit
   pseudo-elements on purpose: setting scrollbar-width or scrollbar-color in
   Chromium makes it drop the styled scrollbar above and fall back to its own
   thin one, which is both fatter and a different shape. */
@supports not selector(::-webkit-scrollbar) {
    * {
        scrollbar-width: thin;
        scrollbar-color: var(--scrollbar-thumb) transparent;
    }
}

/* --- Reset & Base Styles --- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: 'Google Sans Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: var(--bg-body);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Google Sans', 'Google Sans Flex', sans-serif;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary);
}

a {
    text-decoration: none;
    color: inherit;
}

/* --- App Container --- */