/* ==========================================================================
CrewSheet styles: base.css
==========================================================================
Design tokens (colors, type, spacing), base reset, page layout, header, sidebar, footer and utilities. Loaded first.

Part of the CrewSheet stylesheet set, loaded in this order by Views/Shared/_Layout.cshtml:
  base.css > components.css > pages/home.css > pages/jobs.css > pages/zones.css > pages/documents.css > pages/worklist.css > pages/reports.css > pages/settings.css
Section numbers are the same as in the old single site.css, so view comments like
"components.css 23" still point at the right place. New sections: next free number, in the file for that area.

SECTIONS IN THIS FILE
  1         DESIGN TOKENS
  2         BASE RESET & STRUCTURE
  3         LAYOUT CONTAINERS
  4         NAVIGATION HEADER
  5         LEFT SIDEBAR (desktop)
  15        FOOTER, UTILITIES & PRINT
  25        SIDEBAR GROUP HEADINGS
========================================================================== */

/*
THEMING
Every color, radius, shadow and spacing value lives in section 1.
Change a token there and it updates everywhere. To add a theme, override
the tokens under a [data-theme="..."] selector (example at end of section 1).

RULES OF THUMB
- Never hard-code a hex color below section 1. Use var(--cs-*).
- Need a new color? Add a token in section 1 first.
- Media queries can't use variables. Breakpoints used in this file:
575.98px (phone) 767.98px (tablet) 991.98px (lg) 1199.98px (xl)


*/

/* ==========================================================================
1. DESIGN TOKENS
========================================================================== */
:root {
    /* ---------- 1a. Brand colors ---------- */
    --cs-navy: #002d62;
    --cs-navy-deep: #001f45;
    --cs-gold: #d4af37;
    --cs-gold-soft: #e8d48b;
    /* RGB triplets of the brand colors, used for translucent shadows/borders:
rgba(var(--cs-navy-rgb), 0.1). Keep in sync with the hex values above. */
    --cs-navy-rgb: 0, 45, 98;
    --cs-gold-rgb: 212, 175, 55;
    /* ---------- 1b. Soft blue tints (backgrounds, panel headers, hovers) ---------- */
    --cs-blue-50: #f5f9fe; /* hover rows, gradient starts */
    --cs-blue-100: #eaf2fb; /* panel headers, badges, footer */
    --cs-blue-200: #d6e5f6; /* soft borders on blue surfaces */
    --cs-blue-300: #b8c6dc; /* stronger outline (status badges) */
    /* ---------- 1b-2. Gray tints (KPI cards) ---------- */
    --cs-gray-100: #eceff3;
    --cs-gray-200: #dde2e8;
    --cs-gray-300: #c3cad4;
    --cs-gray-400: #a9b2be; /* edge for a gray-300 panel */
    /* ---------- Home KPI boxes (change here to restyle all four) ---------- */
    --cs-kpi-bg: var(--cs-gray-200);
    --cs-kpi-bg-hover: var(--cs-gray-300);
    --cs-kpi-border: var(--cs-gray-300);
    --cs-kpi-width: 30%; /* share of the table width on a full-size screen */
    /* ---------- Home KPI boxes (faint blue; change here to restyle all four) ---------- */
    /*    --cs-kpi-bg: var(--cs-blue-200);
       --cs-kpi-bg-hover: var(--cs-blue-300);
    --cs-kpi-border: var(--cs-blue-300);
    */
    /* ---------- Home page max width (keeps tables narrow on big screens) ---------- */
    --cs-home-max-width: 70rem;
    /* ---------- 1c. Neutral UI colors ---------- */
    --cs-bg: #eef3fa; /* page background */
    --cs-surface: #ffffff; /* cards, tables, inputs */
    --cs-text: #111a27; /* a touch darker than before (#1a2332) so regular text reads solid */
    --cs-heading: var(--cs-navy); /* titles, labels and links: navy text (light blue in dark mode) */
    --cs-muted: #465163; /* secondary text (dates, hints, "Welcome back"); was #5a6577, which looked faint */
    --cs-border: #d0d7e2;
    --cs-disabled-bg: #f5f6f8;
    /* Entry boxes (components.css 8). Faint blue; for faint gray use #f3f4f6 / #c3cad4 */
    --cs-input-bg: #f2f7fd;
    --cs-input-border: #b8c6dc;
    --cs-gold-tint: #fcf7e8; /* quote/invoice Total Cost column (same as the PDF) */
    --cs-gold-tint-strong: #f8f0d6; /* quote/invoice grand total */
    /* ---------- 1d. Text on dark (navy) surfaces ---------- */
    --cs-on-dark: #ffffff;
    --cs-on-dark-soft: #e8eef6;
    --cs-on-dark-muted: #a8b8cc;
    /* ---------- 1e. Semantic / status colors ---------- */
    /* success */
    --cs-success: #1f7a4d;
    --cs-success-bg: #e8f5ee;
    --cs-success-border: #a9d9bb;
    /* danger */
    --cs-danger: #b02a37;
    --cs-danger-bg: #fdeceb;
    --cs-danger-border: #f3b8bb;
    /* warning / in progress */
    --cs-warning: #8a6d1d;
    --cs-warning-bg: #fff6e0;
    --cs-warning-alert-bg: #fff8e6;
    /* info / sent */
    --cs-info: #0d5cab;
    --cs-info-bg: #e6f0fb;
    --cs-info-border: #b6d4f5;
    --cs-info-dot: #0d6efd;
    /* draft / neutral */
    --cs-neutral: #6c757d;
    --cs-neutral-bg: #eef0f2;
    --cs-neutral-border: #c9ccd1;
    /* ---------- 1e-2. Home accents: a KPI card and its panel share one set ---------- */
    /* accent = left border + big number + header underline; bg = tint; border = soft outline */
    --cs-accent-projects: var(--cs-info);
    --cs-accent-projects-bg: var(--cs-info-bg);
    --cs-accent-projects-border: var(--cs-info-border);
    --cs-accent-quotes: var(--cs-warning);
    --cs-accent-quotes-bg: var(--cs-warning-bg);
    --cs-accent-quotes-border: var(--cs-gold-soft);
    --cs-accent-invoices: var(--cs-danger);
    --cs-accent-invoices-bg: var(--cs-danger-bg);
    --cs-accent-invoices-border: var(--cs-danger-border);
    --cs-accent-worklists: var(--cs-success);
    --cs-accent-worklists-bg: var(--cs-success-bg);
    --cs-accent-worklists-border: var(--cs-success-border);
    /* ---------- 1f. Typography ---------- */
    /* Windows' own font (Segoe UI). Inter was tried 2026-10-08 and taken back out (the user didn't like it). */
    --cs-font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --cs-font-weight-body: 400;
    --cs-font-size-root: 15px;
    --bs-body-font-family: var(--cs-font-family);
    --bs-body-font-weight: var(--cs-font-weight-body);
    --cs-line-height: 1.5;
    /* ---------- 1g. Radius ---------- */
    --cs-radius-sm: 0.25rem;
    --cs-radius: 0.35rem;
    --cs-radius-md: 0.4rem;
    --cs-radius-lg: 0.5rem;
    --cs-radius-pill: 50rem;
    /* ---------- 1h. Shadows ---------- */
    --cs-shadow-sm: 0 1px 4px rgba(var(--cs-navy-rgb), 0.06);
    --cs-shadow-md: 0 3px 12px rgba(var(--cs-navy-rgb), 0.08);
    --cs-shadow-lg: 0 6px 16px rgba(var(--cs-navy-rgb), 0.14);
    --cs-shadow-nav: 0 2px 10px rgba(var(--cs-navy-rgb), 0.3);
    --cs-focus-ring: 0 0 0 0.2rem rgba(var(--cs-gold-rgb), 0.25);
    /* ---------- 1i. Spacing ---------- */
    --cs-gap: 1.25rem; /* standard gap between page blocks */
    --cs-gap-lg: 2.25rem; /* gap between major groups (e.g. KPIs -> panels) */
    /* ---------- 1j. Layout ---------- */
    --cs-header-height: 3.5rem;
    --cs-sidebar-width: 10.5rem;
    /* ---------- 1k. Motion ---------- */
    --cs-transition: 0.15s ease;
}

/* ---------- 1z. DARK MODE: the account menu's switch sets <html data-theme="dark"> (cookie cs-theme, _Layout + site.js).
   Only tokens change. Screen only: printing always uses the light colors above (paper stays white). ---------- */
@media screen {
    :root[data-theme="dark"] {
        color-scheme: dark; /* native date pickers, scrollbars */
        --cs-navy-deep: #0b1322;
        --cs-bg: #0f1724;
        --cs-surface: #172033;
        --cs-text: #e6ecf5;
        --cs-heading: #9cc3f0;
        --cs-muted: #9aa8bd;
        --cs-border: #2a364d;
        --cs-disabled-bg: #1c2638;
        --cs-input-bg: #1b263b;
        --cs-input-border: #3a4d70;
        --cs-blue-50: #1b263b;
        --cs-blue-100: #202d45;
        --cs-blue-200: #2a3a58;
        --cs-blue-300: #3a4d70;
        --cs-gray-100: #1f2937;
        --cs-gray-200: #263244;
        --cs-gray-300: #334155;
        --cs-gray-400: #475569;
        --cs-gold-tint: #2b2716;
        --cs-gold-tint-strong: #3a331b;
        --cs-success: #5cc98d;
        --cs-success-bg: #12301f;
        --cs-success-border: #1f5c3a;
        --cs-danger: #f07178;
        --cs-danger-bg: #3a1418;
        --cs-danger-border: #6b2a30;
        --cs-warning: #e3c164;
        --cs-warning-bg: #33290f;
        --cs-warning-alert-bg: #2f2610;
        --cs-info: #7ab8f5;
        --cs-info-bg: #13243a;
        --cs-info-border: #24456b;
        --cs-neutral: #a0a8b3;
        --cs-neutral-bg: #252c36;
        --cs-neutral-border: #3b4452;
        --cs-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.35);
        --cs-shadow-md: 0 3px 12px rgba(0, 0, 0, 0.4);
        --cs-shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.5);
    }
}



/* ==========================================================================
2. BASE RESET & STRUCTURE
========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: var(--cs-font-size-root);
    height: 100%;
}

body.cs-body {
    margin: 0;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    font-family: var(--cs-font-family);
    font-weight: var(--cs-font-weight-body);
    color: var(--cs-text);
    background: var(--cs-bg);
    line-height: var(--cs-line-height);
}

/* Bootstrap sets these back to 400; keep them the same weight as the rest of the text */
.form-control,
.form-select,
.btn,
.table {
    font-weight: var(--cs-font-weight-body);
}

.cs-main {
    flex: 1 0 auto;
}

    .cs-main .cs-content {
        padding-top: 1.25rem;
        padding-bottom: 2rem;
    }

    .cs-main h1,
    .cs-main h2,
    .cs-main h3 {
        color: var(--cs-heading);
        font-weight: 700;
    }



/* ==========================================================================
3. LAYOUT CONTAINERS
========================================================================== */

/* Pull margins closer to screen edges */
.cs-content,
.cs-project-detail {
    width: 100%;
    max-width: 98% !important;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

@media (min-width: 768px) {
    .cs-content,
    .cs-project-detail {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

/* Vertical stack where cards hug the width of the widest table (Zones) */
.cs-detail-sections {
    display: grid;
    grid-template-columns: max-content;
    justify-content: center;
    row-gap: 1.5rem;
    width: 100%;
}

    .cs-detail-sections .cs-section-card {
        margin-bottom: 0 !important; /* row-gap replaces the margin */
    }

        .cs-detail-sections .cs-section-card.cs-section-fit {
            width: 100%;
            margin-bottom: 0 !important;
        }

            .cs-detail-sections .cs-section-card.cs-section-fit .table-responsive {
                padding: 0 0.5rem;
            }

@media (max-width: 767.98px) {
    .cs-detail-sections {
        justify-content: start; /* left-align on mobile */
    }
}



/* ==========================================================================
4. NAVIGATION HEADER
========================================================================== */
.cs-header {
    position: sticky;
    top: 0;
    z-index: 1030;
}

.cs-navbar {
    background: var(--cs-navy);
    border-bottom: 3px solid var(--cs-gold);
    box-shadow: var(--cs-shadow-nav);
}

.cs-nav-inner {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 0.75rem;
}

.cs-nav-brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 3rem;
}

.cs-brand {
    font-weight: 700;
    font-size: 1.35rem; /* was 1.2rem */
    color: var(--cs-on-dark) !important;
    text-decoration: none !important;
    letter-spacing: 0.04em;
}

    .cs-brand:hover {
        color: var(--cs-gold-soft) !important;
    }

/* Brand + current page name, e.g. "CrewSheet — Home" */
.cs-brand-group {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    min-width: 0;
}

.cs-brand-page {
    color: var(--cs-on-dark-soft);
    font-size: 1.08rem; /* was 0.95rem */
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- Hamburger toggle (mobile) ---------- */
.cs-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.4rem;
    background: transparent;
    border: 1px solid rgba(var(--cs-gold-rgb), 0.5);
    border-radius: 0.3rem;
    cursor: pointer;
}

    .cs-menu-toggle span {
        display: block;
        height: 2px;
        background: var(--cs-on-dark);
        border-radius: 1px;
    }

/* ---------- Nav links & user bar ---------- */
.cs-nav-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.5rem;
}

.cs-nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem;
}

.cs-nav-link {
    color: var(--cs-on-dark-soft) !important;
    font-weight: 500;
    text-decoration: none !important;
    padding: 0.45rem 0.75rem;
    border-radius: var(--cs-radius-sm);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

    .cs-nav-link:hover {
        color: var(--cs-on-dark) !important;
        background: rgba(255, 255, 255, 0.08);
        border-bottom-color: var(--cs-gold);
    }

.cs-nav-user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-left: auto;
}

.cs-user-email {
    color: var(--cs-on-dark-muted);
    font-size: 0.8rem;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Header buttons ---------- */
.cs-btn-ghost {
    color: var(--cs-on-dark-soft) !important;
    border: 1px solid rgba(var(--cs-gold-rgb), 0.5) !important;
    background: transparent !important;
    text-decoration: none !important;
    padding: 0.25rem 0.6rem;
    border-radius: var(--cs-radius-sm);
    font-size: 0.875rem;
}

    .cs-btn-ghost:hover {
        background: rgba(var(--cs-gold-rgb), 0.15) !important;
        color: var(--cs-on-dark) !important;
    }

.cs-btn-logout {
    color: var(--cs-navy) !important;
    background: var(--cs-gold) !important;
    border: 1px solid var(--cs-gold) !important;
    font-weight: 600 !important;
    padding: 0.25rem 0.65rem;
    border-radius: var(--cs-radius-sm);
    font-size: 0.875rem;
    cursor: pointer;
}

    .cs-btn-logout:hover {
        background: var(--cs-gold-soft) !important;
    }

/* ---------- Responsive nav ---------- */
@media (max-width: 991.98px) {
    .cs-menu-toggle {
        display: flex;
    }

    .cs-nav-menu {
        display: none;
        flex-direction: column;
        align-items: stretch;
        padding: 0.5rem 0 0.75rem;
        border-top: 1px solid rgba(var(--cs-gold-rgb), 0.35);
    }

        .cs-nav-menu.is-open {
            display: flex;
        }

    .cs-nav-links {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.25rem;
        width: 100%;
    }

    .cs-nav-link {
        text-align: center;
        padding: 0.65rem 0.35rem;
        background: rgba(255, 255, 255, 0.06);
    }

    .cs-nav-user {
        margin-left: 0;
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        justify-content: flex-start;
    }
}

@media (min-width: 480px) and (max-width: 991.98px) {
    .cs-nav-links {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (min-width: 992px) {
    .cs-nav-inner {
        display: flex;
        align-items: center;
        gap: 1rem;
        min-height: 3.25rem;
        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
    }

    .cs-nav-brand-row {
        min-height: auto;
    }

    .cs-nav-menu {
        flex: 1;
        padding-bottom: 0;
        display: flex !important;
    }
}

/* Mobile menu: highlight the current page */
.cs-nav-links .cs-nav-link.is-active {
    border-bottom-color: var(--cs-gold);
}



/* ==========================================================================
5. LEFT SIDEBAR (desktop)
========================================================================== */
.cs-shell {
    flex: 1 0 auto;
    display: flex;
}

    .cs-shell > .cs-main {
        flex: 1 1 0;
        min-width: 0; /* lets wide tables scroll instead of stretching the page */
    }

.cs-sidebar {
    flex: 0 0 var(--cs-sidebar-width);
    position: sticky;
    top: var(--cs-header-height);
    align-self: flex-start;
    min-height: calc(100vh - var(--cs-header-height));
    padding: 1rem 0.6rem;
    background: var(--cs-navy-deep);
    border-right: 3px solid var(--cs-gold);
}

    /* Sidebar links: centered, button-style at every width */
    .cs-sidebar .cs-nav-link {
        display: block;
        margin-bottom: 0.2rem;
        padding: 0.55rem 0.75rem;
        text-align: center;
        background: rgba(255, 255, 255, 0.06); /* the faint "outlined" button look */
        border-bottom: none;
        border-left: 3px solid transparent;
    }

        .cs-sidebar .cs-nav-link:hover {
            background: rgba(255, 255, 255, 0.12);
            border-left-color: var(--cs-gold);
        }

        .cs-sidebar .cs-nav-link.is-active {
            background: rgba(255, 255, 255, 0.12);
            border-left-color: var(--cs-gold);
            color: var(--cs-on-dark) !important;
        }


/* ---------- Responsive nav ----------
   768px and up : banner (brand + account/login) and the sidebar carries the menu links
   under 768px  : no sidebar; banner row (brand + account/login) with the menu links below it
   These rules override the collapsing menu in section 4, so keep this block after section 4. */

/* 768px and up: the sidebar has the links, so the banner drops them and the hamburger */
@media (min-width: 768px) {
    .cs-navbar .cs-nav-links,
    .cs-navbar .cs-menu-toggle {
        display: none;
    }
}

/* 768-991px: section 4 collapses the menu below 992px, so restore the one-row desktop banner */
@media (min-width: 768px) and (max-width: 991.98px) {
    .cs-nav-inner {
        display: flex;
        align-items: center;
        gap: 1rem;
        min-height: 3.25rem;
        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
    }

    .cs-nav-brand-row {
        min-height: auto;
    }

    .cs-nav-menu {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex: 1;
        padding: 0;
        border-top: 0;
    }

    .cs-nav-user {
        margin: 0 0 0 auto;
        padding: 0;
        border-top: 0;
    }
}

/* Under 768px: row 1 = brand + account/login, row 2 = menu links (always visible, small) */
@media (max-width: 767.98px) {
    .cs-sidebar {
        display: none !important;
    }

    .cs-nav-inner {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        column-gap: 0.5rem;
    }

    .cs-nav-brand-row {
        grid-column: 1;
        grid-row: 1;
        min-height: 2.6rem;
    }

    .cs-brand {
        font-size: 1.15rem; /* was 1.05rem */
    }

    .cs-menu-toggle {
        display: none; /* links are always visible, so no hamburger */
    }

    /* Lets the links and the user block sit directly in the grid above */
    .cs-nav-menu {
        display: contents;
    }

    .cs-nav-user {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
        padding: 0;
        border-top: 0;
        justify-content: flex-end;
        flex-wrap: nowrap;
    }

        .cs-nav-user .cs-btn-ghost,
        .cs-nav-user .cs-btn-logout {
            padding: 0.2rem 0.5rem;
            font-size: 0.78rem;
        }

    /* Menu links: small buttons that wrap and stretch to fill each row */
    .cs-nav-links {
        grid-column: 1 / -1;
        grid-row: 2;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.25rem;
        width: auto;
        padding-bottom: 0.5rem;
    }

    .cs-nav-link {
        flex: 1 1 auto;
        padding: 0.3rem 0.5rem;
        font-size: 0.75rem;
    }
}

/* Very small phones: hide the email to leave room for Account / Log out */
@media (max-width: 575.98px) {
    .cs-user-email {
        display: none;
    }
}


/* ==========================================================================
15. FOOTER, UTILITIES & PRINT
========================================================================== */
.cs-footer {
    flex-shrink: 0;
    padding: 0.85rem 0;
    font-size: 0.85rem;
    color: var(--cs-muted);
    background: var(--cs-blue-100);
    border-top: 2px solid var(--cs-gold);
}

/* Logo + text on one line; wraps under the logo on phones */
.cs-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
}

.cs-footer-logo {
    height: 1.9rem;
    width: auto;
}

/* Dark mode: the navy logo needs a light chip behind it to show */
:root[data-theme="dark"] .cs-footer-logo {
    padding: 0.15rem 0.35rem;
    background: #ffffff;
    border-radius: var(--cs-radius-md);
}

/* ---------- Utilities ---------- */
.text-muted {
    color: var(--cs-muted) !important;
}

.text-navy {
    color: var(--cs-heading) !important;
}

/* ---------- Print ---------- */
@media print {
    .cs-header,
    .cs-footer,
    .no-print,
    .btn {
        display: none !important;
    }

    body.cs-body {
        background: #ffffff;
    }
}

/* Standard page footer: Back / navigation buttons, always bottom-RIGHT on every page (_BackButton) */
.cs-page-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: var(--cs-gap);
    padding-top: 0.75rem;
    border-top: 1px solid var(--cs-border);
}



/* ==========================================================================
25. SIDEBAR GROUP HEADINGS
Views/Shared/_NavLinks.cshtml. Headings show in the desktop sidebar only;
the phone menu (top bar) keeps its compact row of buttons.
========================================================================== */
.cs-nav-heading {
    display: none;
}

.cs-sidebar .cs-nav-heading {
    display: block;
    margin: 1.5rem 0.25rem 0.3rem;   /* room above each heading */
    padding-bottom: 0.2rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
    color: var(--cs-on-dark-muted);
    border-bottom: 1px solid var(--cs-gold);   /* full-strength gold line */
}