/* ============================================================================
   EVO Cabinet Production Assistant v3 — global theme.
   Ported from the v2 header.php <style> block. NO page may add inline
   <style> blocks — put page-specific rules in assets/pages/<name>.css.
   ========================================================================== */

:root {
    --evo-blue:   #1ca8e6;   /* EVO logo sky blue */
    --evo-blue-d: #1689bd;   /* darker blue for hover / active */
    --evo-dark:   #34343a;   /* EVO logo charcoal */
    --evo-orange: #e05c1e;   /* warm secondary accent */
    --evo-ok:     #27ae60;
    --evo-err:    #e74c3c;
}

/* Global font uplift — every rem-based size scales up */
html { font-size: 17px; }
body {
    background: #eef1f5;
    font-family: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
    color: #2b2b30;
}

/* ── Navbar ─────────────────────────────────────────────────────────────── */
.navbar {
    background: #ffffff !important;
    border-bottom: 3px solid var(--evo-blue);
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
    padding-top: .45rem;
    padding-bottom: .45rem;
}
.navbar-brand { padding: 0; margin-right: 1.6rem; }
.evo-brand img { height: 48px; width: auto; display: block; }
.evo-word { display: inline-flex; align-items: baseline; gap: .3rem; line-height: 1; }
.evo-word .evo-evo { color: var(--evo-dark); font-weight: 800; font-size: 1.75rem; letter-spacing: .5px; }
.evo-word .evo-tri { color: var(--evo-blue); font-size: .85rem; }
.evo-word .evo-cab { color: var(--evo-blue); font-weight: 700; font-size: .95rem; letter-spacing: 3px; }
.nav-link {
    color: var(--evo-dark) !important;
    font-weight: 500;
    font-size: 1.03rem;
    padding: .5rem .85rem !important;
    border-radius: 8px;
}
.nav-link:hover  { color: var(--evo-blue) !important; background: #f1f8fd; }
.nav-link.active { color: var(--evo-blue) !important; background: #e7f4fb; font-weight: 700; }
.navbar-toggler  { border-color: #ccd2d8; }
.dropdown-menu   { font-size: 1rem; border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.12); }
.dropdown-item   { padding: .55rem 1rem; }
.dropdown-item.active, .dropdown-item:active { background: var(--evo-blue); }
.navbar-text { color: #6c757d !important; font-size: .95rem; }
.badge-remake { background: var(--evo-err); font-size: .72rem; }

/* ── Brand-colour Bootstrap's "primary" ─────────────────────────────────── */
.btn-primary {
    --bs-btn-bg: var(--evo-blue);          --bs-btn-border-color: var(--evo-blue);
    --bs-btn-hover-bg: var(--evo-blue-d);   --bs-btn-hover-border-color: var(--evo-blue-d);
    --bs-btn-active-bg: var(--evo-blue-d);  --bs-btn-active-border-color: var(--evo-blue-d);
    --bs-btn-disabled-bg: var(--evo-blue);  --bs-btn-disabled-border-color: var(--evo-blue);
}
.btn-outline-primary {
    --bs-btn-color: var(--evo-blue);        --bs-btn-border-color: var(--evo-blue);
    --bs-btn-hover-bg: var(--evo-blue);     --bs-btn-hover-border-color: var(--evo-blue);
    --bs-btn-active-bg: var(--evo-blue);    --bs-btn-active-border-color: var(--evo-blue);
}
.text-primary   { color: var(--evo-blue) !important; }
.bg-primary     { background-color: var(--evo-blue) !important; }
.border-primary { border-color: var(--evo-blue) !important; }
a { color: var(--evo-blue); }

/* ── Bigger, cleaner type & components ──────────────────────────────────── */
h1,.h1 { font-size: 2.05rem; } h2,.h2 { font-size: 1.7rem; }
h3,.h3 { font-size: 1.45rem; } h4,.h4 { font-size: 1.28rem; } h5,.h5 { font-size: 1.14rem; }
.btn    { font-weight: 500; }
.btn-lg { font-size: 1.2rem; padding: .6rem 1.1rem; }
.table  { font-size: 1rem; }
.form-control, .form-select { font-size: 1rem; }
.card {
    --bs-card-border-radius: 14px;
    --bs-card-inner-border-radius: 13px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.shadow-sm { box-shadow: 0 2px 12px rgba(0,0,0,.06) !important; }

/* ── Shared helpers (ported from v2) ────────────────────────────────────── */
.station-card { border: none; border-radius: 14px; transition: transform .15s, box-shadow .15s; cursor: pointer; }
.station-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,.15); }
.badge-status { font-size: .72rem; padding: 5px 11px; border-radius: 20px; }
.progress-stations { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.part-row { transition: background .1s; }
.part-row:hover { background: #f1f8fd; }
.qr-img { width: 80px; height: 80px; }

/* Station pill (station_badge() in lib/stations.php) */
.station-pill {
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    margin: 2px;
    display: inline-block;
    white-space: nowrap;
}

/* ── Login page (standalone layout, login.php) ──────────────────────────── */
body.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-card {
    background: #fff;
    width: 100%;
    max-width: 420px;
    border-radius: 18px;
    box-shadow: 0 10px 40px rgba(0,0,0,.10);
    border-top: 4px solid var(--evo-blue);
    padding: 30px 28px;
    margin: 16px;
}
.login-card .brand-line { text-align: center; margin-bottom: 18px; }
.login-card .evo-evo { color: var(--evo-dark); font-weight: 800; font-size: 1.9rem; letter-spacing: .5px; }
.login-card .evo-tri { color: var(--evo-blue); font-size: .95rem; margin: 0 .25rem; }
.login-card .evo-cab { color: var(--evo-blue); font-weight: 700; letter-spacing: 3px; font-size: 1rem; }
.login-card .err  { color: #993c1d; font-size: .92rem; margin: 0 0 10px; min-height: 1em; }
.login-card .lock { background: #fdecea; border: 1px solid #f5c2bc; color: #7b1f10; border-radius: 10px;
                    padding: 10px 14px; font-size: .9rem; margin-bottom: 16px; text-align: center; }
.login-card .boot { background: #fff8e1; border: 1px solid #fbd97a; color: #6e4a06; border-radius: 10px;
                    padding: 10px 14px; font-size: .9rem; margin-bottom: 16px; text-align: center; }
.login-card .boot a { color: #6e4a06; font-weight: 700; }

/* ── Scan feedback: border-band flash (app.js scanFlash()) ──────────────
   A thick colored band around the screen edges + a compact message pill,
   instead of a fullscreen wash (too bright on the eyes on the shop floor). */
.scan-flash {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    pointer-events: none;
    color: #fff;
    text-align: center;
    padding: 2rem;
    animation: scan-flash-fade 1.1s ease-out forwards;
}
.scan-flash .scan-flash-icon { font-size: 3rem; line-height: 1; }
.scan-flash .scan-flash-msg  { font-size: 1.35rem; font-weight: 700; }
/* Compact pill holding the icon + message — small, readable, not blinding */
.scan-flash .scan-flash-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: 1rem 2.2rem 1.2rem;
    border-radius: 18px;
    box-shadow: 0 8px 30px rgba(0,0,0,.25);
    max-width: min(90vw, 560px);
}
/* The band: crisp inner border + a soft inward glow, screen stays visible */
.scan-flash-ok {
    box-shadow: inset 0 0 0 14px rgba(39, 174, 96, .95),
                inset 0 0 70px 18px rgba(39, 174, 96, .30);
}
.scan-flash-ok  .scan-flash-card { background: rgba(39, 174, 96, .96); }
.scan-flash-err {
    box-shadow: inset 0 0 0 18px rgba(231, 76, 60, .97),
                inset 0 0 80px 22px rgba(231, 76, 60, .35);
}
.scan-flash-err .scan-flash-card { background: rgba(231, 76, 60, .97); }
/* Amber "not recorded" band — already-scanned no-op or a label that doesn't
   match the loaded job. Distinct from green success so an operator never reads
   a no-op as a good scan. */
.scan-flash-warn {
    box-shadow: inset 0 0 0 18px rgba(243, 156, 18, .97),
                inset 0 0 80px 22px rgba(243, 156, 18, .35);
}
.scan-flash-warn .scan-flash-card { background: rgba(243, 156, 18, .98); }
@keyframes scan-flash-fade {
    0%   { opacity: 0; }
    8%   { opacity: 1; }
    75%  { opacity: 1; }
    100% { opacity: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
    .scan-flash { animation-duration: .6s; }
}

/* ── Toasts (app.js toast()) ────────────────────────────────────────────── */
#evo-toasts {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 2100;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-width: min(360px, 90vw);
}
.evo-toast {
    background: var(--evo-dark);
    color: #fff;
    border-radius: 10px;
    padding: .7rem 1rem;
    box-shadow: 0 6px 24px rgba(0,0,0,.25);
    font-size: .98rem;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .2s, transform .2s;
}
.evo-toast.show { opacity: 1; transform: none; }
.evo-toast.toast-success { background: var(--evo-ok); }
.evo-toast.toast-danger  { background: var(--evo-err); }
.evo-toast.toast-warning { background: #b7791f; }

/* ── NC nesting pages (nc_sheet.php, nc_tools.php) ─────────────────────── */
.nc-svg {
    max-width: 100%;
    height: auto;
}
/* Legend swatch on the sheet detail page — matches the SVG's scanned-part
   overlay fill (see nc_render_svg in lib/nc.php). */
.nc-legend-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    background: #16a34a;
    opacity: .55;
    border: 1px solid #15803d;
    vertical-align: middle;
}
/* Tool-wear bars on nc_tools.php. Width + colour are data-driven and set
   per-row via style attributes; the track/bar shape lives here. */
.nc-wear-cell  { min-width: 220px; }
.nc-wear-track {
    height: 8px;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
}
.nc-wear-bar   { height: 100%; }

/* ── Print ──────────────────────────────────────────────────────────────── */
@media print {
    .no-print { display: none !important; }
    body { background: #fff; }
    html { font-size: 16px; }
}

/* ============================================================================
   STATION PAGE (station.php + assets/pages/station.js)
   The page sets --station-color on #stationRoot so every rule below follows
   the active station's colour without inline <style> blocks.
   ========================================================================== */
#stationRoot { --station-color: var(--evo-blue); }

.scan-multi-btn { position: sticky; top: 10px; z-index: 5; }
@media (max-width: 767.98px) { .scan-multi-btn { top: 6px; } }

.btn-station {
    background: var(--station-color);
    color: #fff;
    border: none;
}
.btn-station:hover, .btn-station:focus { color: #fff; filter: brightness(.92); }

.part-row-scanned {
    background: color-mix(in srgb, var(--station-color) 10%, #fff) !important;
    border-left: 4px solid var(--station-color);
}
.part-row-pending { border-left: 4px solid #e0e0e0; color: #888; }
.part-row-partial {
    background: #fffaf0 !important;
    border-left: 4px solid #f59e0b;
}
.part-row-locked  { background: #fff3cd; }
.part-row-highlight { animation: highlight-flash 2s ease; }
@keyframes highlight-flash {
    0%   { background: color-mix(in srgb, var(--station-color) 33%, #fff); }
    100% { background: color-mix(in srgb, var(--station-color) 10%, #fff); }
}
.row-flash { animation: rowFlashAnim 1.6s ease-out; }
@keyframes rowFlashAnim { 0% { background: #fff3cd; } 100% { background: transparent; } }

.parts-scroll { max-height: calc(100vh - 320px); overflow-y: auto; }
.progress-bar-station {
    height: 22px; border-radius: 11px;
    font-size: 12px; font-weight: 700; line-height: 22px;
    background: var(--station-color);
    transition: width .5s ease;
}
.qr-box { width: 92px; height: 92px; flex-shrink: 0; }
.qr-box canvas, .qr-box img { width: 92px !important; height: 92px !important; }

.station-done-badge {
    background: var(--station-color);
    font-size: 11px;
}
.scan-undo-link { font-size: 10px; }

/* CNC stalled alarm — same pulse the office boards use */
@keyframes pulse-alarm {
    0%, 100% { background: #fee2e2; color: #b91c1c; border-color: #b91c1c; }
    50%      { background: #b91c1c; color: #fff;    border-color: #b91c1c; }
}
.cnc-alarm-banner {
    animation: pulse-alarm 1.2s ease-in-out infinite;
    border: 2px solid; border-radius: 8px;
    padding: 10px 14px; font-weight: 600;
}

/* CNC nesting sheet tiles */
.nc-tile {
    display: inline-block; vertical-align: top;
    width: 200px; margin: 6px; padding: 6px;
    border: 1px solid #e5e7eb; border-radius: 8px;
    background: #fff; position: relative; text-align: center;
    transition: box-shadow .15s;
}
.nc-tile:hover { box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.nc-tile .nc-svg-wrap {
    position: relative; height: 160px;
    display: flex; align-items: center; justify-content: center;
    background: #fafbfc; border-radius: 4px; overflow: hidden;
}
.nc-tile svg { max-width: 100%; max-height: 160px; }
.nc-tile.is-cut .nc-svg-wrap::after {
    content: '\2713 CUT'; position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(22,163,74,.20); color: #15803d;
    font-size: 34px; font-weight: 800; letter-spacing: 3px;
    transform: rotate(-18deg); pointer-events: none;
    text-shadow: 0 1px 2px rgba(255,255,255,.6);
}
.nc-tile.is-cut { border-color: #22c55e; background: #f0fdf4; }
@keyframes nc-pulse-amber {
    0%, 100% { box-shadow: 0 0 0 0 #f59e0b; }
    50%      { box-shadow: 0 0 0 4px rgba(245,158,11,.4); }
}
.nc-tile.is-cutting { border-color: #f59e0b; animation: nc-pulse-amber 1.4s ease-in-out infinite; }
.nc-tile.is-cutting .nc-svg-wrap::after {
    content: 'CUTTING'; position: absolute; top: 6px; left: 6px;
    background: #f59e0b; color: #fff; padding: 2px 8px;
    border-radius: 10px; font-size: 11px; font-weight: 600;
}
.nc-tile .nc-name { font-family: monospace; font-weight: 700; font-size: 13px; margin-top: 4px; }
.nc-tile .nc-meta { font-size: 11px; color: #666; }
.nc-tile form { display: inline; margin: 0; }

/* Toast with an Undo button (station.js success toasts) */
.evo-toast .toast-undo-btn {
    margin-left: .75rem;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.55);
    color: #fff; border-radius: 7px;
    padding: .1rem .55rem; font-size: .85rem; font-weight: 600;
    cursor: pointer;
}
.evo-toast .toast-undo-btn:hover { background: rgba(255,255,255,.32); }

/* ============================================================================
   PART PAGE (part.php)
   ========================================================================== */
.part-station-circle {
    width: 52px; height: 52px; border-radius: 50%;
    background: #e0e0e0; color: #bbb;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; margin: 0 auto;
}
.part-station-circle.done { color: #fff; background: var(--circle-color, var(--evo-ok)); }
.part-station-label { font-size: 11px; margin-top: 4px; color: #aaa; }
.part-station-label.done { color: var(--circle-color, var(--evo-ok)); font-weight: 700; }
.part-station-time { font-size: 10px; color: #888; }
.scan-history-dot {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--circle-color, #999); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; flex-shrink: 0;
}
.vendor-door-note {
    background: #f3e8ff; border: 1px solid #8e44ad;
    border-radius: 6px; font-size: 12px;
    padding: .25rem .5rem; margin-bottom: .5rem;
}
#qr-code { display: flex; justify-content: center; margin-bottom: 12px; }

/* ============================================================================
   LABELS PAGE (labels.php) — printable QR label grid
   ========================================================================== */
body.labels-page { background: #fff; }
.labels-controls {
    background: #1a3c6e; color: #fff; padding: 12px 20px;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.labels-controls .btn-print {
    background: var(--evo-orange); border: none; color: #fff;
    padding: 8px 18px; border-radius: 6px; cursor: pointer; font-size: 14px;
}
.labels-controls a { color: rgba(255,255,255,.8); text-decoration: none; font-size: 13px; }
.labels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 8px; padding: 12px;
}
.label-card {
    border: 1.5px solid #333; border-radius: 6px; padding: 10px;
    page-break-inside: avoid; break-inside: avoid;
    font-size: 11px; display: flex; flex-direction: column;
    align-items: center; gap: 6px;
    background: #fff; box-shadow: none;
}
.label-job {
    font-weight: 700; font-size: 12px; color: #1a3c6e; text-align: center;
    border-bottom: 1px solid #eee; width: 100%; padding-bottom: 4px;
}
.label-name { font-weight: 700; font-size: 13px; text-align: center; word-break: break-word; }
.label-dims { font-size: 12px; color: #444; text-align: center; }
.label-cabinet { font-size: 11px; color: #666; text-align: center; }
.label-qr-text {
    font-family: monospace; font-size: 8px; color: #666;
    text-align: center; word-break: break-all;
}
.label-stations {
    display: flex; gap: 3px; flex-wrap: wrap; justify-content: center;
    border-top: 1px solid #eee; width: 100%; padding-top: 4px;
}
.station-box {
    border: 1.5px solid #333; border-radius: 3px; padding: 2px 6px;
    font-size: 9px; font-weight: 600; text-transform: uppercase;
}
.qr-container canvas, .qr-container img { width: 120px !important; height: 120px !important; }
@media print {
    .labels-controls { display: none; }
    .labels-grid { padding: 0; }
}

/* ============================================================================
   SHELF PACK PAGE (shelf_pack.php)
   ========================================================================== */
.bundle-empty-hint {
    border: 2px dashed #dee2e6; border-radius: 10px;
}

/* ============================================================================
   REFINED LIGHT THEME (2026-07-04, replaced the dark theme)
   A calmer, cleaner take on the original light look:
   - soft neutral background, less glare than pure white panels on #eef1f5
   - cards defined by a hairline border + gentle shadow (less heavy)
   - slate-blue table headers instead of near-black
   - clearer hover/focus states
   Delete from here to the end of the file to return to the plain v2 look.
   ========================================================================== */
:root {
    --lt-bg:      #f2f4f7;   /* page background */
    --lt-panel:   #ffffff;   /* cards */
    --lt-panel-2: #f7f9fb;   /* card headers, stripes */
    --lt-border:  #e2e7ee;
    --lt-slate:   #33445c;   /* table headers / strong accents */
    --lt-text:    #26303b;
    --lt-muted:   #64748b;
}

body { background: var(--lt-bg); color: var(--lt-text); }

/* Navbar — white, crisper divider, gentler shadow */
.navbar {
    box-shadow: 0 1px 8px rgba(23, 43, 77, .08);
    border-bottom-width: 3px;
}
.nav-link:hover  { background: #eef6fc; }
.nav-link.active { background: #e3f2fb; }

/* Cards — hairline border + soft shadow, slight lift on hover for links */
.card {
    border: 1px solid var(--lt-border);
    box-shadow: 0 1px 4px rgba(23, 43, 77, .06);
}
.card-header {
    background: var(--lt-panel-2);
    border-bottom: 1px solid var(--lt-border);
    font-weight: 600;
}
a .card.station-card { transition: transform .12s ease, box-shadow .12s ease; }
a .card.station-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(23, 43, 77, .12);
}

/* Tables — slate header instead of black, calm stripes */
.table thead.table-dark, .table-dark {
    --bs-table-bg: var(--lt-slate);
    --bs-table-color: #f4f7fb;
    --bs-table-border-color: #3f5470;
}
.table { --bs-table-striped-bg: var(--lt-panel-2); --bs-table-hover-bg: #eef3f9; }
.table thead.table-light th { background: var(--lt-panel-2); color: var(--lt-muted);
    text-transform: uppercase; font-size: .78rem; letter-spacing: .4px; }

/* Forms — clearer focus ring in brand blue */
.form-control, .form-select { border-color: #ccd5e0; }
.form-control:focus, .form-select:focus {
    border-color: var(--evo-blue);
    box-shadow: 0 0 0 .2rem rgba(28, 168, 230, .18);
}
.form-text { color: var(--lt-muted); }
.text-muted { color: var(--lt-muted) !important; }

/* Buttons — a touch more definition */
.btn { border-radius: 9px; }
.btn-outline-secondary { --bs-btn-color: #5c6b7f; --bs-btn-border-color: #b9c4d2; }

/* Alerts — softer tints */
.alert-success { background: #e9f7ef; border-color: #c4e8d2; color: #14603a; }
.alert-danger  { background: #fdeeec; border-color: #f5cdc8; color: #8a2b22; }
.alert-warning { background: #fdf6e3; border-color: #f0e2b6; color: #6e5308; }
.alert-info    { background: #e8f4fb; border-color: #c4e2f3; color: #135a80; }

/* Dropdowns / modals — match the card treatment */
.dropdown-menu, .modal-content { border: 1px solid var(--lt-border); }
.modal-header, .modal-footer { background: var(--lt-panel-2); }

/* Scrollbars (WebKit) — subtle */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--lt-bg); }
::-webkit-scrollbar-thumb { background: #c6cfda; border-radius: 6px; border: 2px solid var(--lt-bg); }
::-webkit-scrollbar-thumb:hover { background: #aeb9c8; }

/* ── PRINT: labels + packing slips stay plain black-on-white ────────────── */
@media print {
    body { background: #fff !important; color: #000 !important; }
    .card { border-color: #999; box-shadow: none; }
    .text-muted { color: #444 !important; }
}