/* FleetCheck skin v3 (Sep 2026) — a real modernisation of stock Bootstrap 5.3.
 *
 * Loaded right after bootstrap.min.css by headers.php. No markup changes:
 * everything hangs off Bootstrap's CSS variables plus a handful of component
 * rules. Heights of buttons and inputs stay on Bootstrap's own scale (a .btn
 * still lines up with a .form-control), but radius, weight, colour, spacing,
 * shadows and chrome all move to a 2026 look.
 *
 * Switch: /?skin=classic sticks the stock look for the session, /?skin=new puts
 * it back. FC_SKIN_ALL in headers.php is the site-wide kill switch.
 *
 * Palette: navy #0d2036, blue #1d4ed8, orange #9a3412 for "needs someone",
 * neutral greys from slate. Semantic hues keep their meaning (Simon is
 * red-green colourblind: our own pages always pair a state with a word/icon).
 */

:root {
  --fc-navy: #0d2036;
  --fc-blue: #1d4ed8;
  --fc-blue-deep: #1e40af;
  --fc-blue-soft: #eaf0fd;
  --fc-ink: #111827;
  --fc-ink-2: #374151;
  --fc-muted: #6b7280;
  --fc-line: #e5e7eb;
  --fc-line-2: #d1d5db;
  --fc-surface: #ffffff;
  --fc-surface-2: #f8fafc;
  --fc-surface-3: #f1f5f9;
  --fc-radius: .75rem;
  --fc-radius-sm: .6rem;
  --fc-shadow-1: 0 1px 2px rgba(13, 32, 54, .06), 0 1px 3px rgba(13, 32, 54, .08);
  --fc-shadow-2: 0 4px 14px rgba(13, 32, 54, .10);
  --fc-shadow-3: 0 18px 48px rgba(13, 32, 54, .16);
  --fc-ring: 0 0 0 4px rgba(29, 78, 216, .16);

  --bs-primary: var(--fc-blue);
  --bs-primary-rgb: 29, 78, 216;
  --bs-secondary: #475569;
  --bs-secondary-rgb: 71, 85, 105;
  --bs-success: #15803d;  --bs-success-rgb: 21, 128, 61;
  --bs-danger: #b91c1c;   --bs-danger-rgb: 185, 28, 28;
  --bs-warning: #d97706;  --bs-warning-rgb: 217, 119, 6;
  --bs-info: #0e7490;     --bs-info-rgb: 14, 116, 144;
  --bs-body-color: var(--fc-ink);
  --bs-link-color: var(--fc-blue);          --bs-link-color-rgb: 29, 78, 216;
  --bs-link-hover-color: var(--fc-blue-deep); --bs-link-hover-color-rgb: 30, 64, 175;
  --bs-border-color: var(--fc-line);
  --bs-border-color-translucent: rgba(17, 24, 39, .08);
  --bs-border-radius: var(--fc-radius-sm);
  --bs-border-radius-sm: .5rem;
  --bs-border-radius-lg: var(--fc-radius);
  --bs-border-radius-xl: 1.1rem;
  --bs-focus-ring-color: rgba(29, 78, 216, .16);
  --bs-focus-ring-width: 4px;
  --bs-secondary-bg: var(--fc-surface-3);
  --bs-tertiary-bg: var(--fc-surface-2);
}

/* ============================================================ buttons */
/* Simon, 15 Sep 2026: "everything with a solid fill just seems too aggressive".
   So no filled action buttons at all. Every variant is TONAL — a light tint of
   its colour with the colour as text — and neutral buttons are white ghosts.
   Hover darkens the tint one step; active two steps. Height, padding and
   font size stay on Bootstrap's scale. */
.btn {
  --bs-btn-border-radius: var(--fc-radius-sm);
  --bs-btn-font-weight: 600;
  --bs-btn-focus-box-shadow: var(--fc-ring);
  letter-spacing: .005em;
  box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn-sm { --bs-btn-border-radius: .5rem; }
.btn-lg { --bs-btn-border-radius: .8rem; }
.btn .bi { vertical-align: -.1em; }

/* neutral ghosts: white, hairline border, hover a shade darker than the page */
.btn-secondary, .btn-light, .btn-outline-secondary, .btn-outline-dark, .btn-dark {
  --bs-btn-color: var(--fc-ink-2); --bs-btn-bg: #fff; --bs-btn-border-color: var(--fc-line-2);
  --bs-btn-hover-color: var(--fc-navy); --bs-btn-hover-bg: #eaeef4; --bs-btn-hover-border-color: #b6c0cc;
  --bs-btn-active-color: var(--fc-navy); --bs-btn-active-bg: #dfe5ed; --bs-btn-active-border-color: #a9b4c1;
  --bs-btn-disabled-color: #9aa3ad; --bs-btn-disabled-bg: #fff; --bs-btn-disabled-border-color: var(--fc-line);
  --bs-btn-focus-shadow-rgb: 71, 85, 105;
}
/* tonal colours: tint background, colour as text, darker tint on hover */
.btn-primary, .btn-outline-primary {
  --bs-btn-color: #1e40af; --bs-btn-bg: #e4ecfb; --bs-btn-border-color: #d3e0f9;
  --bs-btn-hover-color: #1e3a8a; --bs-btn-hover-bg: #d4e1f9; --bs-btn-hover-border-color: #b9cdf4;
  --bs-btn-active-color: #1e3a8a; --bs-btn-active-bg: #c3d5f6; --bs-btn-active-border-color: #a6bfef;
  --bs-btn-disabled-color: #8fa4d6; --bs-btn-disabled-bg: #eef3fc; --bs-btn-disabled-border-color: #e4ecfb;
  --bs-btn-focus-shadow-rgb: 29, 78, 216;
}
.btn-success, .btn-outline-success {
  --bs-btn-color: #166534; --bs-btn-bg: #e3f5e9; --bs-btn-border-color: #cfeddb;
  --bs-btn-hover-color: #14532d; --bs-btn-hover-bg: #d1eedb; --bs-btn-hover-border-color: #b4e0c4;
  --bs-btn-active-color: #14532d; --bs-btn-active-bg: #bfe6cd; --bs-btn-active-border-color: #9fd6b3;
  --bs-btn-disabled-color: #8fbf9f; --bs-btn-disabled-bg: #eef8f1; --bs-btn-disabled-border-color: #e3f5e9;
  --bs-btn-focus-shadow-rgb: 21, 128, 61;
}
.btn-danger, .btn-outline-danger {
  --bs-btn-color: #991b1b; --bs-btn-bg: #fbe7e7; --bs-btn-border-color: #f6d4d4;
  --bs-btn-hover-color: #7f1d1d; --bs-btn-hover-bg: #f6d5d5; --bs-btn-hover-border-color: #efb8b8;
  --bs-btn-active-color: #7f1d1d; --bs-btn-active-bg: #f0c3c3; --bs-btn-active-border-color: #e8a3a3;
  --bs-btn-disabled-color: #cf9a9a; --bs-btn-disabled-bg: #fdf1f1; --bs-btn-disabled-border-color: #fbe7e7;
  --bs-btn-focus-shadow-rgb: 185, 28, 28;
}
.btn-warning, .btn-outline-warning {
  --bs-btn-color: #92400e; --bs-btn-bg: #fdf0dc; --bs-btn-border-color: #f9e2bf;
  --bs-btn-hover-color: #78350f; --bs-btn-hover-bg: #fae4c3; --bs-btn-hover-border-color: #f3cf95;
  --bs-btn-active-color: #78350f; --bs-btn-active-bg: #f6d8a8; --bs-btn-active-border-color: #ecbe78;
  --bs-btn-disabled-color: #cfa66d; --bs-btn-disabled-bg: #fef7ea; --bs-btn-disabled-border-color: #fdf0dc;
  --bs-btn-focus-shadow-rgb: 217, 119, 6;
}
.btn-info, .btn-outline-info {
  --bs-btn-color: #155e75; --bs-btn-bg: #e0f3f7; --bs-btn-border-color: #c9e9ef;
  --bs-btn-hover-color: #164e63; --bs-btn-hover-bg: #cdeaf1; --bs-btn-hover-border-color: #a9dbe6;
  --bs-btn-active-color: #164e63; --bs-btn-active-bg: #b9e1ea; --bs-btn-active-border-color: #8fcfdc;
  --bs-btn-disabled-color: #86b8c4; --bs-btn-disabled-bg: #edf8fa; --bs-btn-disabled-border-color: #e0f3f7;
  --bs-btn-focus-shadow-rgb: 14, 116, 144;
}
.btn-link { --bs-btn-color: var(--fc-blue); --bs-btn-hover-color: var(--fc-blue-deep); --bs-btn-font-weight: 600; text-decoration: none; }
.btn-link:hover { text-decoration: underline; text-underline-offset: 3px; }
/* a checked toggle (btn-check) or .active still needs to read as ON: one more step of tint */
.btn-check:checked + .btn-primary, .btn-primary.active, .btn-check:checked + .btn-outline-primary, .btn-outline-primary.active { background: #c3d5f6; border-color: #a6bfef; color: #1e3a8a; }
.btn-check:checked + .btn-secondary, .btn-secondary.active, .btn-check:checked + .btn-outline-secondary, .btn-outline-secondary.active { background: #dfe5ed; border-color: #a9b4c1; color: var(--fc-navy); }
.btn-check:checked + .btn, .btn.active, .btn.show { box-shadow: none; }
.btn-close { --bs-btn-close-focus-shadow: var(--fc-ring); border-radius: 50%; }
.btn-close:hover { background-color: #eaeef4; }

/* ============================================================ inputs */
.form-control, .form-select {
  border: 1px solid var(--fc-line-2);
  border-radius: var(--fc-radius-sm);
  color: var(--fc-ink);
  background-color: #fff;
  box-shadow: inset 0 1px 2px rgba(13, 32, 54, .04);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control-sm, .form-select-sm { border-radius: .5rem; }
.form-control:hover:not(:focus):not(:disabled), .form-select:hover:not(:focus):not(:disabled) { border-color: #b6c0cc; }
.form-control:focus, .form-select:focus { border-color: var(--fc-blue); box-shadow: var(--fc-ring); }
.form-control::placeholder { color: #9aa3ad; }
.form-control:disabled, .form-control[readonly] { background-color: var(--fc-surface-3); color: var(--fc-ink-2); box-shadow: none; }
.form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m3 6 5 5 5-5'/%3e%3c/svg%3e"); }
.form-control[type="file"] { padding-left: 0; overflow: hidden; }
.form-control[type="file"]::file-selector-button {
  background: var(--fc-surface-3); color: var(--fc-ink-2); border: 0; border-right: 1px solid var(--fc-line-2);
  border-radius: 0; margin-right: .75rem; font-weight: 600; cursor: pointer;
}
.form-control[type="file"]:hover::file-selector-button { background: #e2e8f0; }
.form-label, .col-form-label { font-weight: 600; color: var(--fc-ink-2); }
.form-text { color: var(--fc-muted); }
.form-check-input { border: 1.5px solid #9aa3ad; border-radius: .35rem; }
.form-check-input:checked { background-color: var(--fc-blue); border-color: var(--fc-blue); }
.form-check-input:focus { border-color: var(--fc-blue); box-shadow: var(--fc-ring); }
.form-switch .form-check-input { border-radius: 2em; }
.form-switch .form-check-input:focus { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2393b0ee'/%3e%3c/svg%3e"); }
.input-group-text { background: var(--fc-surface-3); border-color: var(--fc-line-2); color: var(--fc-muted); }
.input-group > .btn { box-shadow: none; }
.form-floating > .form-control, .form-floating > .form-select { border-radius: var(--fc-radius-sm); }
.form-floating > label { color: var(--fc-muted); }

/* ============================================================ surfaces */
.card {
  --bs-card-border-color: var(--fc-line);
  --bs-card-border-radius: var(--fc-radius);
  --bs-card-inner-border-radius: calc(var(--fc-radius) - 1px);
  --bs-card-cap-bg: var(--fc-surface-2);
  box-shadow: var(--fc-shadow-1);
}
.card-header { border-bottom-color: var(--fc-line); font-weight: 600; }
.card-title { font-weight: 700; letter-spacing: -.01em; }

.modal-content {
  --bs-modal-border-radius: 1.1rem;
  --bs-modal-inner-border-radius: calc(1.1rem - 1px);
  --bs-modal-border-color: transparent;
  box-shadow: var(--fc-shadow-3);
}
.modal-header { --bs-modal-header-border-color: var(--fc-line); --bs-modal-header-padding: 1.1rem 1.5rem; }
.modal-title { font-weight: 700; letter-spacing: -.01em; color: var(--fc-navy); }
.modal-body { --bs-modal-padding: 1.5rem; }
.modal-footer { --bs-modal-footer-border-color: var(--fc-line); --bs-modal-padding: 1rem 1.5rem; background: var(--fc-surface-2);
  border-bottom-left-radius: 1.1rem; border-bottom-right-radius: 1.1rem; }
.modal-backdrop { --bs-backdrop-bg: var(--fc-navy); --bs-backdrop-opacity: .45; }
@supports (backdrop-filter: blur(2px)) { .modal-backdrop.show { backdrop-filter: blur(3px); } }

.dropdown-menu {
  --bs-dropdown-border-color: var(--fc-line);
  --bs-dropdown-border-radius: var(--fc-radius);
  --bs-dropdown-padding-x: .4rem; --bs-dropdown-padding-y: .4rem;
  --bs-dropdown-item-padding-x: .75rem; --bs-dropdown-item-padding-y: .45rem;
  --bs-dropdown-link-active-bg: #d4e1f9; --bs-dropdown-link-active-color: #1e3a8a;
  --bs-dropdown-link-hover-bg: #eaeef4;
  --bs-dropdown-link-hover-color: var(--fc-navy);
  --bs-dropdown-divider-bg: var(--fc-line);
  box-shadow: var(--fc-shadow-2);
}
.dropdown-item { border-radius: .5rem; }
.dropdown-header { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--fc-muted); }

.alert { --bs-alert-border-radius: var(--fc-radius-sm); border-left-width: 4px; }
.toast { --bs-toast-border-radius: var(--fc-radius-sm); box-shadow: var(--fc-shadow-2); }
.offcanvas { --bs-offcanvas-border-color: var(--fc-line); box-shadow: var(--fc-shadow-3); }
.accordion { --bs-accordion-border-color: var(--fc-line); --bs-accordion-border-radius: var(--fc-radius); --bs-accordion-inner-border-radius: calc(var(--fc-radius) - 1px);
  --bs-accordion-active-bg: var(--fc-blue-soft); --bs-accordion-active-color: var(--fc-blue-deep); --bs-accordion-btn-focus-box-shadow: var(--fc-ring); --bs-accordion-btn-font-weight: 600; }
.list-group { --bs-list-group-border-color: var(--fc-line); --bs-list-group-border-radius: var(--fc-radius); --bs-list-group-active-bg: var(--fc-blue); --bs-list-group-active-border-color: var(--fc-blue); --bs-list-group-action-hover-bg: var(--fc-surface-2); }
.popover { --bs-popover-border-color: var(--fc-line); --bs-popover-border-radius: var(--fc-radius); box-shadow: var(--fc-shadow-2); }
.tooltip { --bs-tooltip-bg: var(--fc-navy); --bs-tooltip-border-radius: .5rem; --bs-tooltip-opacity: 1; }
.progress { --bs-progress-border-radius: 999px; --bs-progress-bg: var(--fc-surface-3); --bs-progress-bar-bg: var(--fc-blue); }
hr { border-top-color: var(--fc-line); opacity: 1; }

/* ============================================================ navigation */
.nav-tabs {
  --bs-nav-tabs-border-width: 0;
  --bs-nav-tabs-border-color: transparent;
  --bs-nav-tabs-link-active-border-color: transparent;
  --bs-nav-tabs-link-hover-border-color: transparent;
  --bs-nav-tabs-link-active-bg: transparent;
  --bs-nav-tabs-link-active-color: var(--fc-navy);
  border-bottom: 1px solid var(--fc-line);
  gap: .25rem;
}
.nav-tabs .nav-link {
  color: var(--fc-ink-2); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px;
  border-radius: .5rem .5rem 0 0; transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.nav-tabs .nav-link:hover { color: var(--fc-navy); background: #eaeef4; }
.nav-tabs .nav-link.active { color: var(--fc-navy); font-weight: 600; border-bottom-color: var(--fc-blue); }
.nav-pills { --bs-nav-pills-border-radius: 999px; --bs-nav-pills-link-active-bg: #e4ecfb; --bs-nav-pills-link-active-color: #1e3a8a; gap: .25rem; }
.nav-pills .nav-link { color: var(--fc-ink-2); font-weight: 500; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { color: #1e3a8a; font-weight: 600; }
.nav-pills .nav-link:hover:not(.active) { background: #eaeef4; color: var(--fc-navy); }
.breadcrumb { --bs-breadcrumb-divider-color: #b6c0cc; --bs-breadcrumb-item-active-color: var(--fc-navy); }
.breadcrumb .active { font-weight: 600; }

/* ============================================================ badges */
/* Simon, 15 Sep 2026: pills were still heavy. Every badge is a tint of its
   colour with the colour as text and a hairline border — same treatment as the
   buttons. Bootstrap's .bg-* / .text-bg-* rules are !important, so these are too. */
.badge { --bs-badge-border-radius: 999px; --bs-badge-font-weight: 600; --bs-badge-padding-x: .6em; --bs-badge-padding-y: .35em; letter-spacing: .01em; border: 1px solid transparent; }
.badge.bg-primary, .badge.text-bg-primary     { background-color: #e4ecfb !important; color: #1e3a8a !important; border-color: #cfdcf8; }
.badge.bg-secondary, .badge.text-bg-secondary { background-color: #eaeef4 !important; color: #374151 !important; border-color: #d9dfe7; }
.badge.bg-success, .badge.text-bg-success     { background-color: #e3f5e9 !important; color: #166534 !important; border-color: #c6ead3; }
.badge.bg-danger, .badge.text-bg-danger       { background-color: #fbe7e7 !important; color: #991b1b !important; border-color: #f2cccc; }
.badge.bg-warning, .badge.text-bg-warning     { background-color: #fdf0dc !important; color: #92400e !important; border-color: #f5ddb3; }
.badge.bg-info, .badge.text-bg-info           { background-color: #e0f3f7 !important; color: #155e75 !important; border-color: #bfe3ec; }
.badge.bg-dark, .badge.text-bg-dark           { background-color: #e6ebf1 !important; color: #0d2036 !important; border-color: #ccd5e0; }
.badge.bg-light, .badge.text-bg-light         { background-color: #fff !important; color: #374151 !important; border-color: #d9dfe7; }
.badge.text-dark { color: #374151 !important; }

/* ============================================================ tables */
.table { --bs-table-border-color: var(--fc-line); --bs-table-striped-bg: var(--fc-surface-2); --bs-table-hover-bg: #f3f6fb; --bs-table-color: var(--fc-ink); }
.table > :not(caption) > * > * { border-bottom-width: 1px; }
.table > thead th, .table > thead td { color: var(--fc-ink-2); font-weight: 600; background: var(--fc-surface-2); border-bottom: 1px solid var(--fc-line-2); }
.table-dark > thead th { background: inherit; color: inherit; }
.table > tbody > tr:last-child > * { border-bottom-color: var(--fc-line); }
.table-bordered > :not(caption) > * > * { border-color: var(--fc-line); }
.table-sm > :not(caption) > * > * { padding: .45rem .5rem; }

.pagination { --bs-pagination-border-color: transparent; --bs-pagination-border-radius: .5rem; --bs-pagination-active-bg: #e4ecfb; --bs-pagination-active-border-color: #d3e0f9; --bs-pagination-active-color: #1e3a8a;
  --bs-pagination-color: var(--fc-ink-2); --bs-pagination-hover-bg: #eaeef4; --bs-pagination-hover-color: var(--fc-navy); --bs-pagination-focus-box-shadow: var(--fc-ring);
  --bs-pagination-disabled-color: #b6c0cc; --bs-pagination-disabled-bg: transparent; --bs-pagination-disabled-border-color: transparent; gap: .15rem; }
.page-link { border-radius: .5rem !important; font-weight: 500; }
div.dt-container .dt-paging .dt-paging-button { border-radius: .5rem !important; border: 1px solid transparent !important; color: var(--fc-ink-2) !important; background: transparent !important; font-weight: 500; }
div.dt-container .dt-paging .dt-paging-button:hover { background: #eaeef4 !important; color: var(--fc-navy) !important; }
div.dt-container .dt-paging .dt-paging-button.current, div.dt-container .dt-paging .dt-paging-button.current:hover { background: #e4ecfb !important; border-color: #d3e0f9 !important; color: #1e3a8a !important; font-weight: 600; }
div.dt-container .dt-paging .dt-paging-button.disabled, div.dt-container .dt-paging .dt-paging-button.disabled:hover { color: #b6c0cc !important; background: transparent !important; }
div.dt-container .dt-info, div.dt-container .dt-length label, div.dt-container .dt-search label { color: var(--fc-muted); }
div.dt-container .dt-input, div.dt-container select.dt-input { border: 1px solid var(--fc-line-2); border-radius: .5rem; }
table.dataTable thead > tr > th.dt-orderable-asc:hover, table.dataTable thead > tr > th.dt-orderable-desc:hover { outline: none; background: var(--fc-surface-3); }
table.dataTable > thead > tr > th, table.dataTable > thead > tr > td { border-bottom: 1px solid var(--fc-line-2); }
div.dt-container .dt-buttons .btn { box-shadow: var(--fc-shadow-1); }

/* ============================================================ details */
::selection { background: rgba(29, 78, 216, .16); }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #c8d0da; border-radius: 999px; border: 2px solid #fff; }
*::-webkit-scrollbar-thumb:hover { background: #b6c0cc; }
*::-webkit-scrollbar-track { background: transparent; }
:focus-visible { outline: none; }
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link) { text-underline-offset: 3px; }