/* Kepla-Chem custom theme, layered on top of Bootstrap 5.
   Bootstrap supplies the grid/JS/component primitives; everything below
   is the Chem-specific visual identity (type, color, surfaces, spacing).
   --chem-primary is set inline per-request from AppConfig.primary_color
   (core/models.py), so a customer's brand color flows into buttons,
   links, and focus states everywhere, not just the navbar. */

:root {
    --chem-primary: #0B2545;
    --chem-bg: #f4f6f9;
    --chem-surface: #ffffff;
    --chem-border: #e2e6ec;
    --chem-text-muted: #667085;
    --chem-radius: 0.5rem;
    --chem-radius-sm: 0.375rem;
    --chem-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
    --chem-shadow: 0 4px 12px rgba(16, 24, 40, 0.08);
    --chem-focus-ring: color-mix(in srgb, var(--chem-primary) 25%, transparent);
    --chem-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
}

[data-bs-theme="dark"] {
    --chem-bg: #12161f;
    --chem-surface: #1a1f2b;
    --chem-border: #2a2f3d;
    --chem-text-muted: #96a0b5;
}

body {
    background-color: var(--chem-bg);
    font-family: var(--chem-font-sans);
}

a {
    color: var(--chem-primary);
}

/* --- Navbar --- */
.navbar {
    box-shadow: var(--chem-shadow-sm);
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

.navbar-brand-logo {
    height: 32px;
    width: auto;
}

.nav-link {
    transition: opacity 0.15s ease;
}

.nav-link:hover {
    opacity: 0.85;
}

/* --- Buttons: brand color drives the primary action everywhere --- */
.btn-primary {
    --bs-btn-bg: var(--chem-primary);
    --bs-btn-border-color: var(--chem-primary);
    --bs-btn-hover-bg: var(--chem-primary);
    --bs-btn-hover-border-color: var(--chem-primary);
    --bs-btn-active-bg: var(--chem-primary);
    --bs-btn-active-border-color: var(--chem-primary);
    --bs-btn-focus-shadow-rgb: 0, 0, 0;
}

.btn-primary:hover,
.btn-primary:active {
    filter: brightness(0.9);
}

.btn,
.form-control,
.form-select {
    border-radius: var(--chem-radius-sm);
}

.btn:focus-visible,
.form-control:focus,
.form-select:focus {
    box-shadow: 0 0 0 0.2rem var(--chem-focus-ring);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--chem-primary);
}

/* --- Cards & surfaces --- */
.card {
    background-color: var(--chem-surface);
    border-color: var(--chem-border);
    border-radius: var(--chem-radius);
    box-shadow: var(--chem-shadow-sm);
}

/* --- Tables --- */
.table {
    --bs-table-border-color: var(--chem-border);
}

.table thead th {
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--chem-text-muted);
    border-bottom-width: 1px;
}

/* --- Alerts: left accent bar instead of full-tint borders --- */
.alert {
    border-radius: var(--chem-radius-sm);
    border-width: 0 0 0 4px;
}

/* --- Sign-in / auth screens --- */
.chem-auth-page {
    min-height: 100vh;
    background-color: var(--chem-bg);
    background-image: var(--chem-login-bg-image, none);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.chem-auth-card {
    box-shadow: var(--chem-shadow);
    border: none;
}

.chem-login-logo {
    max-height: 64px;
    width: auto;
}

/* --- Phase 02 mockup shell: two-pane management layout --- */
.chem-managed {
    display: flex;
    align-items: flex-start;
    gap: 0;
}

.chem-locations {
    flex: 0 0 260px;
    max-width: 260px;
    align-self: flex-start;
    background-color: var(--chem-surface);
    border-right: 1px solid var(--chem-border);
    padding: 0.75rem;
    /* Pin the tree and let it scroll on its own, so a long list of
       locations never pushes the page content down or off-screen. */
    position: sticky;
    top: 0;
    max-height: calc(100vh - 56px);
    overflow-y: auto;
}

.chem-managed-body {
    flex: 1 1 auto;
    min-width: 0;
}

.chem-submenu {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.5rem 1rem;
    background-color: var(--chem-surface);
    border-bottom: 1px solid var(--chem-border);
}

.chem-submenu-title {
    font-weight: 600;
    font-size: 0.9rem;
    margin-right: 0.75rem;
    color: var(--chem-primary);
}

.chem-submenu-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
}

.chem-submenu-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border-radius: var(--chem-radius-sm);
    font-size: 0.875rem;
    color: var(--chem-text-muted);
    text-decoration: none;
}

.chem-submenu-link:hover {
    background-color: var(--chem-bg);
    color: var(--chem-primary);
}

.chem-submenu-link.active {
    background-color: var(--chem-primary);
    color: #fff;
}

/* Locations tree */
.chem-tree-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.5rem;
}

.chem-tree-title {
    font-weight: 600;
    color: var(--chem-primary);
}

.chem-tree-clear {
    font-size: 0.75rem;
}

.chem-tree-search {
    margin-bottom: 0.5rem;
}

.chem-tree-root,
.chem-tree-children {
    list-style: none;
    margin: 0;
    padding: 0;
}

.chem-tree-children {
    padding-left: 0.85rem;
    border-left: 1px solid var(--chem-border);
    margin-left: 0.35rem;
}

.chem-tree-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0;
    font-size: 0.875rem;
}

.chem-tree-toggle {
    border: 0;
    background: none;
    width: 1.1rem;
    height: 1.1rem;
    line-height: 1;
    padding: 0;
    color: var(--chem-text-muted);
    cursor: pointer;
    flex: 0 0 auto;
}

.chem-tree-toggle.chem-tree-leaf {
    cursor: default;
}

.chem-tree-label {
    color: var(--chem-primary);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chem-tree-label:hover {
    text-decoration: underline;
}

.chem-tree-label.selected {
    font-weight: 600;
    background-color: var(--chem-bg);
    border-radius: var(--chem-radius-sm);
    padding: 0 0.3rem;
}

.chem-tree-empty {
    font-size: 0.8rem;
    color: var(--chem-text-muted);
    padding: 0.15rem 0;
}

/* Keep the tree BESIDE the content at every practical width — just narrow
   it as the window shrinks, rather than dropping it below the page. */
@media (max-width: 1200px) {
    .chem-locations { flex-basis: 220px; max-width: 220px; }
}
@media (max-width: 900px) {
    .chem-locations { flex-basis: 180px; max-width: 180px; padding: 0.5rem; }
    .chem-tree-row { font-size: 0.8rem; }
}

/* Only on a true phone width does the tree move above the content — and even
   then it's a short scrollable strip so the data stays near the top. */
@media (max-width: 575.98px) {
    .chem-managed { flex-direction: column; }
    .chem-locations {
        position: static;
        flex-basis: auto;
        max-width: none;
        width: 100%;
        max-height: 38vh;
        border-right: 0;
        border-bottom: 1px solid var(--chem-border);
    }
}

/* --- Calendar (Phase 05, redesigned 2026-09-08) --- */
.cal-nav-label { min-width: 9rem; text-align: center; display: inline-block; }

.cal-card {
    border: 1px solid var(--chem-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    align-items: center;
    margin-bottom: 0.6rem;
    font-size: 0.8rem;
    color: var(--chem-muted, #6c757d);
}
.cal-legend-item { display: inline-flex; align-items: center; gap: 0.4rem; }
/* Legend swatch for event TYPE — a small rectangle with the same left-border
   accent + tinted fill as the real chips (.cal-ev-wo etc, combined on this
   span), so the key actually matches what's on the calendar. */
.cal-legend-swatch {
    display: inline-block;
    width: 22px;
    height: 14px;
    flex: none;
    border-radius: var(--chem-radius-sm);
    border-left: 3px solid transparent;
}
.cal-legend-swatch-out {
    border-radius: var(--chem-radius-sm);
    background: repeating-linear-gradient(
        45deg, rgba(108, 117, 125, 0.16), rgba(108, 117, 125, 0.16) 4px,
        rgba(108, 117, 125, 0.30) 4px, rgba(108, 117, 125, 0.30) 8px
    );
}

.cal-month td.calendar-cell {
    width: 14.28%;
    min-height: 112px;
    vertical-align: top;
}
.cal-ev {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    line-height: 1.2;
    padding: 0.18rem 0.45rem;
    margin-bottom: 0.2rem;
    border-radius: var(--chem-radius-sm);
    border-left: 3px solid transparent;
    overflow: hidden;
    cursor: grab;
    transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.cal-ev:hover { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); }
.cal-ev:active { cursor: grabbing; }
.cal-ev a {
    color: inherit; text-decoration: none; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
/* Border colour is the configured event colour (Settings > Branding); the
   fill is a faint tint of it via colour-mix so any hex still reads well. */
.cal-ev-wo { border-left-color: var(--cal-workorder); background: color-mix(in srgb, var(--cal-workorder) 14%, transparent); }
.cal-ev-pm { border-left-color: var(--cal-pm); background: color-mix(in srgb, var(--cal-pm) 14%, transparent); }
.cal-ev-wr { border-left-color: var(--cal-request); background: color-mix(in srgb, var(--cal-request) 14%, transparent); }
.cal-ev-overdue { border-left-color: var(--cal-overdue); background: color-mix(in srgb, var(--cal-overdue) 16%, transparent); }

.cal-out-badge {
    display: block;
    font-size: 0.75rem;
    line-height: 1.2;
    padding: 0.18rem 0.45rem;
    margin-bottom: 0.2rem;
    border-radius: var(--chem-radius-sm);
    background: repeating-linear-gradient(
        45deg, rgba(108, 117, 125, 0.16), rgba(108, 117, 125, 0.16) 6px,
        rgba(108, 117, 125, 0.30) 6px, rgba(108, 117, 125, 0.30) 12px
    );
    color: #495057;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}


/* A technician's colour, shown as a small dot on their events (see the
   Technicians legend row) — separate dimension from the type colour, which
   is the chip's background/border. Deterministic per user (scheduling.
   services.tech_color), set via inline style since it isn't one of a fixed
   set of CSS classes. */
.cal-dot-tech {
    display: inline-block;
    width: 7px;
    height: 7px;
    min-width: 7px;
    border-radius: 50%;
    flex: none;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7);
}
.cal-ev-time { font-size: 0.68rem; color: var(--chem-muted, #6c757d); flex: none; }
.cal-ev-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }

.cal-month-cell { padding: 0.35rem; position: relative; transition: background 0.1s; }
.cal-month-cell:hover { background: rgba(13, 110, 253, 0.035); cursor: pointer; }
.cal-month-daynum { font-weight: 600; font-size: 0.8rem; margin-bottom: 0.15rem; }
.cal-month-events { display: flex; flex-direction: column; }
.dash-kpi-card { cursor: pointer; transition: box-shadow 0.15s, transform 0.1s; }
.dash-kpi-card:hover { box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1); transform: translateY(-1px); }

.cal-out-of-month { background: var(--bs-tertiary-bg, rgba(0, 0, 0, 0.02)); color: var(--chem-muted, #6c757d); }
.cal-out-of-month .cal-month-daynum { opacity: 0.55; }

/* NOTE: these use real `border`/`outline`, not `box-shadow` — Chrome/Safari
   do not paint an inset box-shadow on a <td>/<th> inside a border-collapse
   table (a long-standing WebKit/Blink limitation), so a box-shadow-based
   highlight here silently never renders. `.calendar-cell.drag-over` below
   already worked around this the same way with `outline`. */
.cal-today { outline: 2px solid var(--chem-primary); outline-offset: -2px; }
.cal-today-header { border-bottom: 3px solid var(--chem-primary); }

/* Week swimlanes: bold outline around the whole today column (header + every technician row) */
.cal-swimlanes .cal-today-header {
    border-top: 3px solid var(--chem-primary);
    border-left: 3px solid var(--chem-primary);
    border-right: 3px solid var(--chem-primary);
}
.cal-swimlanes .cal-today {
    border-left: 3px solid var(--chem-primary);
    border-right: 3px solid var(--chem-primary);
    background: color-mix(in srgb, var(--chem-primary) 6%, transparent);
}
.cal-swimlanes tbody tr:last-child .cal-today {
    border-left: 3px solid var(--chem-primary);
    border-right: 3px solid var(--chem-primary);
    border-bottom: 3px solid var(--chem-primary);
}

.calendar-cell.drag-over {
    background: rgba(13, 110, 253, 0.1) !important;
    outline: 2px dashed var(--bs-primary, #0d6efd);
    outline-offset: -2px;
}

/* ── Day view time grid ─────────────────────────────────────── */
.cal-grid-scroll { max-height: 72vh; overflow-y: auto; }
.cal-day-grid { width: 100%; border-collapse: collapse; min-width: max-content; }
.cal-grid-corner {
    background: var(--bs-light, #f8f9fa);
    border-right: 1px solid var(--chem-border);
    border-bottom: 2px solid var(--chem-border);
    position: sticky;
    left: 0;
    top: 0;
    z-index: 4;
    min-width: 84px;
}
.cal-day-grid thead th, .cal-day-grid thead td { position: sticky; top: 0; z-index: 3; background: #fff; }
.cal-grid-tech-header {
    background: var(--bs-light, #f8f9fa);
    padding: 0.55rem 0.5rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.83rem;
    border-right: 1px solid var(--chem-border);
    border-bottom: 2px solid var(--chem-border);
    min-width: 170px;
    white-space: nowrap;
}
.cal-grid-allday-row th, .cal-grid-allday-row td {
    top: 37px;
    background: #fbfbfc;
    border-bottom: 2px solid var(--chem-border);
}
.cal-grid-allday-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--chem-muted, #6c757d); font-weight: 600; }
.cal-grid-allday-cell { padding: 0.3rem; min-width: 170px; vertical-align: top; }
.cal-grid-time-label {
    background: var(--bs-light, #f8f9fa);
    border-right: 1px solid var(--chem-border);
    border-bottom: 1px solid #f0f0f0;
    padding: 0.2rem 0.5rem;
    font-size: 0.7rem;
    color: var(--chem-muted, #6c757d);
    text-align: right;
    white-space: nowrap;
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 84px;
    height: 34px;
    vertical-align: top;
}
/* A technician's whole day is one rowspan'd cell (.cal-grid-col) so an
   event block can be positioned by pixel offset/height to actually span
   the rows for its real duration — a table can't rowspan a single event
   across otherwise-independent per-technician cells any other way. */
.cal-grid-col { border-right: 1px solid #eee; min-width: 170px; padding: 0; vertical-align: top; }
.cal-grid-col-inner { position: relative; }
.cal-grid-hit {
    position: absolute;
    left: 0;
    right: 0;
    border-bottom: 1px solid #f2f2f2;
    transition: background 0.1s;
}
.cal-grid-hit:hover { background: rgba(13, 110, 253, 0.04); cursor: pointer; }
.cal-grid-block {
    position: absolute;
    left: 2px;
    right: 2px;
    z-index: 1;
    overflow: hidden;
}
.cal-grid-block .cal-ev { height: 100%; align-items: flex-start; margin-bottom: 0; }
.cal-grid-block .cal-ev .cal-ev-time { flex: none; }

/* ── Week swimlanes ──────────────────────────────────────────── */
.cal-swimlanes td.calendar-cell { min-width: 150px; min-height: 84px; vertical-align: top; }
.cal-swimlane-name {
    background: var(--bs-light, #f8f9fa);
    font-weight: 600;
    font-size: 0.83rem;
    position: sticky;
    left: 0;
    z-index: 1;
}

/* Drag-to-reorder tab strips (asset / part detail) */
.nav-tabs[data-reorder] .nav-item { display: flex; align-items: center; }
.tab-grip {
    cursor: grab;
    opacity: 0.3;
    font-size: 0.8em;
    line-height: 1;
    padding: 0 0.15rem 0 0.35rem;
    user-select: none;
}
.tab-grip:hover { opacity: 0.7; }
.nav-item.tab-dragging { opacity: 0.4; }

/* Alternating banded rows on the calendar so a technician's cells (week
   board) or a week's days (month grid) are easy to track straight across.
   The .table-striped class on the tables does the banding; these rules
   tune the strength and pin the technician-name column. */
#calendar-board,
.cal-month {
    --bs-table-striped-bg: rgba(16, 24, 40, 0.05);
    --bs-table-hover-bg: rgba(11, 37, 69, 0.09);
}
[data-bs-theme="dark"] #calendar-board,
[data-bs-theme="dark"] .cal-month {
    --bs-table-striped-bg: rgba(255, 255, 255, 0.055);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.09);
}
/* Pin the technician-name column so it stays visible while scrolling the
   week horizontally; keep it opaque and matching the row's stripe. */
#calendar-board tbody th {
    text-align: left;
    white-space: nowrap;
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: var(--chem-surface);
}
#calendar-board.table-striped > tbody > tr:nth-of-type(odd) > th {
    background-color: #eef1f5;
}
[data-bs-theme="dark"] #calendar-board.table-striped > tbody > tr:nth-of-type(odd) > th {
    background-color: #22252f;
}

/* User manual print support: browser-native print dialog via a plain
   @media print stylesheet, per the plan — no server-side PDF pipeline.
   .no-print hides nav chrome/the print button itself; .doc-content is
   widened to use the full printable page. */
@media print {
    .navbar, .no-print {
        display: none !important;
    }
    .doc-content {
        width: 100% !important;
    }
    body {
        background-color: #fff;
    }
    .doc-print-page {
        page-break-before: always;
    }
}

/* Cost dashboard: dim a chart card while its filtered data is loading */
.cost-chart-loading { opacity: .55; transition: opacity .15s; }

/* "Received in Full" PO watermark — a small stamp-style badge once every
   receivable line item hits full quantity. Sits in normal document flow,
   right after the PO's header info and right-aligned, rather than as an
   absolutely-positioned overlay — it used to float centered over the page
   and could sit on top of (and visually block) the Details/Line Items
   content underneath it. */
.po-watermark-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}
.po-watermark {
    display: inline-block;
    transform: rotate(-6deg);
    text-align: center;
    white-space: nowrap;
    border: 3px solid rgba(25, 135, 84, 0.55);
    border-radius: 8px;
    padding: 0.25rem 1rem;
}
.po-watermark-text {
    display: block;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: rgba(25, 135, 84, 0.75);
    text-transform: uppercase;
}
.po-watermark-sub {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(25, 135, 84, 0.8);
}
@media (max-width: 576px) {
    .po-watermark-row { justify-content: center; }
    .po-watermark-text { font-size: 1.1rem; }
}