/* WATTS-TORQUE brand — charcoal + orange from the logo */
:root {
    --wt-charcoal: #363c44;
    --wt-charcoal-dark: #2a2f36;
    --wt-orange: #f97316;
}

body { background: #f4f5f7; }

.wt-navbar { background: var(--wt-charcoal); }
.wt-navbar .nav-link { color: #cfd4da; }
.wt-navbar .nav-link:hover { color: #fff; }
.wt-navbar .navbar-brand img { filter: none; }

.btn-primary {
    background: var(--wt-orange);
    border-color: var(--wt-orange);
}
.btn-primary:hover { background: #ea630a; border-color: #ea630a; }

a { color: #1f5f8b; }

/* dashboard tiles */
.wt-tile { border-left: 4px solid var(--wt-orange); }
.wt-tile.wt-amber { border-left-color: #f0ad00; }
.wt-tile.wt-red { border-left-color: #c0392b; }
.wt-tile-num { font-size: 1.8rem; font-weight: 700; color: var(--wt-charcoal); }
.wt-tile-label { font-size: .85rem; color: #6c757d; }

/* status badges */
.badge[class*="wt-status-"] { color: #fff; }
.wt-status-active { background: #2e7d32; }
.wt-status-inshop { background: #f0ad00; color: #212529 !important; }
.wt-status-outofservice { background: #c0392b; }
.wt-status-rented { background: #6f42c1; }
.wt-status-sold, .wt-status-inactive, .wt-status-transferred { background: #6c757d; }

/* key-value tables on detail pages */
.wt-kv th { width: 38%; font-weight: 600; color: #495057; }

/* Fleet.AI advisory output */
.wt-ai { background:#f6f8fb; border:1px solid #e3e8ef; white-space:pre-wrap; line-height:1.5; font-size:.95rem; }

/* ── App shell: left sidebar + main column ─────────────────────────────── */
.wt-shell { display:flex; min-height:100vh; align-items:stretch; }
.wt-main { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.wt-content { flex:1 0 auto; padding:1.25rem 1.5rem; }

.wt-sidebar { background:var(--wt-charcoal); color:#e2e6ea; width:240px; }
/* Bootstrap's .offcanvas-lg forces a transparent bg at lg+ — reassert the charcoal rail. */
.wt-sidebar.offcanvas-lg { background:var(--wt-charcoal) !important; }
.wt-sidebar-head { display:flex; align-items:center; justify-content:space-between;
    padding:16px 16px 12px; border-bottom:1px solid rgba(255,255,255,.08); }
.wt-brand img { width:196px; max-width:100%; height:auto; }
.wt-nav { padding:8px 8px 24px; }
.wt-grp { color:#9aa4b0; font-size:.64rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
    padding:14px 10px 4px; }
.wt-nav-i { display:flex; align-items:center; gap:9px; color:#e2e6ea; text-decoration:none;
    font-size:.9rem; font-weight:500; padding:7px 10px; border-radius:7px; line-height:1.2; }
.wt-nav-i .i { width:18px; text-align:center; font-size:.85rem; opacity:.95; flex:none; }
.wt-nav-i:hover { background:rgba(255,255,255,.08); color:#fff; }
.wt-nav-i.active { background:rgba(249,115,22,.18); color:#fff; box-shadow:inset 3px 0 0 var(--wt-orange); }

/* desktop: sticky full-height rail */
@media (min-width:992px){
    .wt-sidebar.offcanvas-lg { position:sticky; top:0; height:100vh; overflow-y:auto; visibility:visible; }
}
/* mobile offcanvas width */
.wt-sidebar.offcanvas-lg { --bs-offcanvas-width:250px; }

/* top bar */
.wt-topbar { display:flex; align-items:center; gap:.5rem; padding:.5rem 1rem;
    background:#fff; border-bottom:1px solid #e3e6ea; min-height:52px; position:sticky; top:0; z-index:20; }
.wt-burger { font-size:1.25rem; line-height:1; padding:.15rem .5rem; border:1px solid #d6dae0; color:var(--wt-charcoal); }
.wt-topbar-brand img { height:26px; }
.wt-topbar-link { color:#5b6570; text-decoration:none; font-size:.85rem; padding:.25rem .5rem; }
.wt-topbar-link:hover { color:var(--wt-charcoal); }

/* alert bell */
.wt-bell { position:relative; display:inline-flex; align-items:center; justify-content:center;
    width:38px; height:38px; border-radius:9px; text-decoration:none; color:#5b6570; }
.wt-bell:hover { background:#f0f2f5; }
.wt-bell-ic { font-size:1.05rem; filter:grayscale(.2); }
.wt-bell.warn .wt-bell-ic { filter:none; }
.wt-bell-badge { position:absolute; top:2px; right:2px; min-width:17px; height:17px; padding:0 4px;
    background:#c0392b; color:#fff; font-size:.62rem; font-weight:800; line-height:17px; text-align:center;
    border-radius:999px; border:2px solid #fff; }
.wt-bell.warn .wt-bell-badge { background:#e08600; }
.wt-bell.crit .wt-bell-badge { background:#c0392b; }

/* alert cards (Alerts page) */
.wt-alert { display:flex; background:#fff; border:1px solid #e3e6ea; border-radius:10px; overflow:hidden; }
.wt-alert-stripe { width:5px; flex:none; }
.wt-alert.crit .wt-alert-stripe { background:#c0392b; }
.wt-alert.warn .wt-alert-stripe { background:#e08600; }
.wt-alert.info .wt-alert-stripe { background:#1f5f8b; }
.wt-alert.resolved { opacity:.62; }
.wt-alert-body { flex:1 1 auto; min-width:0; padding:11px 14px; }
.wt-alert-actions { display:flex; flex-direction:column; gap:6px; justify-content:center; padding:10px 12px;
    border-left:1px solid #eef0f3; }
.wt-sev-chip { font-size:.62rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
    padding:2px 7px; border-radius:6px; }
.wt-sev-chip.crit { color:#c0392b; background:#fbe9e7; }
.wt-sev-chip.warn { color:#9a6600; background:#fbf1dc; }
.wt-sev-chip.info { color:#1f5f8b; background:#e6eefb; }
@media (max-width:575px){ .wt-alert-actions { flex-direction:row; flex-wrap:wrap; } }

/* sortable + filterable grids (table.wt-grid) */
table.wt-grid th.wt-sortable { cursor:pointer; user-select:none; white-space:nowrap; }
table.wt-grid th.wt-sortable:hover { color:var(--wt-orange); }
table.wt-grid th.wt-sortable::after { content:"\2195"; opacity:.35; font-size:.8em; margin-left:4px; }
table.wt-grid th.wt-sort-asc::after { content:"\2191"; opacity:1; color:var(--wt-orange); }
table.wt-grid th.wt-sort-desc::after { content:"\2193"; opacity:1; color:var(--wt-orange); }
table.wt-grid tr.wt-filter th { padding:4px 6px; background:#fbfbfc; }
table.wt-grid tr.wt-filter input { width:100%; min-width:70px; font-size:.78rem; font-weight:400;
    padding:3px 6px; border:1px solid #d6dae0; border-radius:5px; }
table.wt-grid tr.wt-filter input:focus { outline:none; border-color:var(--wt-orange); box-shadow:0 0 0 2px rgba(249,115,22,.15); }

/* ── Asset photos & thumbnails ─────────────────────────────────────────── */
.wt-thumb-cell { width:44px; }
.wt-thumb { display:inline-flex; align-items:center; justify-content:center;
    width:36px; height:36px; border-radius:6px; object-fit:cover; background:#f1f3f5;
    border:1px solid #e4e7eb; vertical-align:middle; overflow:hidden; }
.wt-thumb-ph { font-size:1.15rem; line-height:1; color:#8b95a1; }
.wt-asset-photo .wt-asset-img { max-width:100%; max-height:260px; width:auto; border-radius:10px;
    object-fit:contain; }
.wt-asset-ph { display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:.35rem; height:200px; background:#f6f7f9; border:1px dashed #d6dae0; border-radius:10px; }
.wt-asset-ph .g { font-size:4.5rem; line-height:1; }

/* ── Unit picker (_UnitPicker.cshtml + wt-unit.js) ─────────────────────── */
.wt-unit { position:relative; }
.wt-unit-list { position:absolute; left:0; right:0; top:calc(2.4rem + 2px); z-index:1050; max-height:19rem; overflow:auto;
    box-shadow:0 .5rem 1rem rgba(0,0,0,.18); border-radius:.375rem; }
.wt-unit-list .list-group-item { padding:.5rem .75rem; }
.wt-unit-no { font-weight:700; font-variant-numeric:tabular-nums; }
.wt-unit-detail { display:block; font-size:.8rem; opacity:.75; }
.wt-unit-picked:empty { display:none; }
.wt-unit-picked { color:var(--bs-success-text-emphasis, #0a3622); font-weight:600; }

/* ── Mechanic time tracking ────────────────────────────────────────────── */
.wt-timer-big { font-variant-numeric:tabular-nums; font-weight:800; font-size:1.6rem;
    color:var(--wt-orange); min-width:7.5rem; display:inline-block; line-height:1; }
.wt-timer { font-variant-numeric:tabular-nums; }
details > summary.btn { list-style:none; cursor:pointer; }
details > summary.btn::-webkit-details-marker { display:none; }
details > summary.btn::marker { content:""; }

/* ── Work-order activity timeline & photo strip ────────────────────────── */
.wt-photo-strip { display:flex; gap:.6rem; flex-wrap:wrap; }
.wt-photo { margin:0; width:120px; text-align:center; }
.wt-photo img { width:120px; height:90px; object-fit:cover; border-radius:8px;
    border:1px solid #e4e7eb; cursor:zoom-in; }
.wt-photo figcaption { font-size:.72rem; color:#8b95a1; margin-top:.15rem; line-height:1.15;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wt-timeline { list-style:none; margin:0; padding:0; border-left:2px solid #e9ecef; }
.wt-timeline > li { position:relative; padding:.3rem 0 .3rem 1rem; font-size:.9rem; }
.wt-timeline > li::before { content:""; position:absolute; left:-5px; top:.65rem;
    width:8px; height:8px; border-radius:50%; background:var(--wt-orange); }
.wt-timeline .ic { margin-right:.25rem; }
.wt-timeline .who { font-weight:600; }
.wt-timeline .when { float:right; font-size:.78rem; }

/* ── Work-order supervisor tile (active now) ───────────────────────────── */
.wt-tile.wt-green { border-left:3px solid #35c07a; }

/* ── Collapsible sidebar groups ────────────────────────────────────────── */
.wt-grp-d > summary.wt-grp { list-style:none; cursor:pointer; user-select:none;
    display:flex; align-items:center; justify-content:space-between; }
.wt-grp-d > summary.wt-grp::-webkit-details-marker { display:none; }
.wt-grp-d > summary.wt-grp::after { content:"\25B8"; font-size:.7rem; color:#9aa4b0;
    transition:transform .15s ease; }
.wt-grp-d[open] > summary.wt-grp::after { transform:rotate(90deg); }
.wt-grp-d > summary.wt-grp:hover { color:#cfd6dd; }

/* ── Auth pages (login / forgot-password) brand mark ───────────────────── */
.wt-auth-logo { width:100%; max-width:300px; height:auto; }

/* test-mode notice (Admin → Shop settings): pill left of the bell; stripe + short label on phones */
.wt-env-pill { display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .65rem; border-radius:999px;
    background:#fff3cd; color:#664d03; border:1px solid #ffe69c; font-size:.78rem; font-weight:600; letter-spacing:.01em;
    white-space:nowrap; max-width:60vw; overflow:hidden; text-overflow:ellipsis; }
.wt-env-ic { font-size:.9rem; line-height:1; }
.wt-env-short { display:none; }
body.wt-env-test .wt-topbar { border-top:4px solid #ffc107; }
@media (max-width: 767.98px) {
    .wt-env-full { display:none; }
    .wt-env-short { display:inline; }
}

/* ── Printing any page ─────────────────────────────────────────────────────
   Ctrl/Cmd+P (or the browser's Print) on any screen gives the content only: no menu, top bar, footer or
   buttons (form fields stay, with what is typed in them). Documents built for paper (a work order) have their own layout — _PrintLayout.cshtml + print.css. */
@media print {
    .wt-sidebar, .wt-topbar, .wt-main > footer, .offcanvas-backdrop, .no-print,
    .btn, details > summary, .wt-filter, .alert-success { display:none !important; }
    body.wt-app, .wt-shell, .wt-main, .wt-content { display:block !important; background:#fff !important;
        margin:0 !important; padding:0 !important; width:auto !important; max-width:none !important; min-height:0 !important; }
    .card { border:1px solid #c9ced6 !important; box-shadow:none !important; break-inside:avoid; }
    .table-responsive { overflow:visible !important; }
    a { color:inherit !important; text-decoration:none !important; }
    thead { display:table-header-group; }
    tr { break-inside:avoid; }
}

/* ── Fleet availability (Views/Availability) ───────────────────────────── */
.av-kpi-num { font-size: 2.2rem; font-weight: 700; line-height: 1.1; color: var(--wt-charcoal); }
.av-kpi-label { font-size: .85rem; color: #6c757d; }
/* Readable-on-white tones for a percentage (yellow text would not pass contrast). */
.av-pct-good { color:#1f6b2a; } .av-pct-warning { color:#8a5a00; } .av-pct-critical { color:#b02a1f; }
.av-level { display:inline-block; padding:.1rem .55rem; border-radius:999px; font-size:.8rem; font-weight:600; }
.av-group h2 { font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; }
.av-group dl { display:grid; grid-template-columns: 1fr auto; gap:.15rem .75rem; margin:0; font-size:.95rem; }
.av-group dd { margin:0; font-weight:600; text-align:right; }
.av-trend { width:100%; height:auto; max-height:220px; display:block; }
.av-trend .av-grid { stroke:#e3e6ea; stroke-width:1; }
.av-trend .av-warnline { stroke:#c0392b; stroke-width:1; stroke-dasharray:4 4; opacity:.6; }
.av-trend .av-axis { font-size:11px; fill:#6c757d; }
.av-trend .av-line { stroke:#2f6f9f; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.av-trend .av-dot { fill:#2f6f9f; stroke:#fff; stroke-width:2; }
.av-trend .av-pt:hover .av-dot { r:6; }
.av-trend .av-last { font-size:12px; font-weight:600; fill:#212529; }
.av-entry td, .av-entry th { vertical-align: middle; }
.av-entry .form-control, .av-entry .form-select { min-width: 7rem; }
.av-entry tr.av-row-down { background: #fdecea; }
.av-entry tr.av-row-other { background: #f1f3f5; }
.av-entry tr.av-row-error { outline: 2px solid #c0392b; outline-offset: -2px; }
.av-entry tr:not(.av-row-down) .av-down-only { visibility: hidden; }
.av-timeline { display:flex; flex-wrap:wrap; gap:3px; }
.av-timeline span { width:14px; height:22px; border-radius:3px; background:#e9ecef; }
.av-timeline .tl-Available { background:#2e7d32; }
.av-timeline .tl-Down { background:#c0392b; }
.av-timeline .tl-ForSale { background:#6c757d; }
.av-timeline .tl-AtDealer { background:#0dcaf0; }
.av-legend span { display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:.3rem; vertical-align:-1px; }