::selection {
    background: #3390FF;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

:root {
    --primary: #006400;
    --primary-light: #338333;
    --secondary: #EBF3EB;
    --dark: #333333;
    --light: #ffffff;

    /* Brand anchor that does NOT flip in dark mode — used by surfaces whose
     * identity (filter/search bar, primary buttons with white text) should
     * read the same in both themes. Per-company partial overrides this with
     * the company's own primary colour, also pinned across both modes. */
    --brand-primary: #006400;
    --brand-primary-contrast: #ffffff;

    /* Generic card + divider borders, flipped for dark mode. */
    --border: #e3e6f0;

    --background: #F7F8FB;

    --success: #2fb344;
    --info: #C29ADC;
    --warning: #F7762B;
    --danger: #E02D2D;

    --light-opacity: 70%;
    --success-light: color-mix(in srgb, var(--success), transparent var(--light-opacity));
    --info-light: color-mix(in srgb, var(--info), transparent var(--light-opacity));
    --warning-light: color-mix(in srgb, var(--warning), transparent var(--light-opacity));
    --danger-light: color-mix(in srgb, var(--danger), transparent var(--light-opacity));

    --tblr-border-radius: 0;

    --highlight: brightness(0.9);

    --muted: color-mix(in srgb, var(--dark), transparent 20%);

    /* Layout: sticky nav/filter/action heights */
    --header-height: 85px;
    --menu-height: 85px;
    --nav-transition-speed: 0.3s;

    /* DSR (Driving Style Report) palette */
    --dsr-green-light: #e8f5e9;
    --dsr-green: #2e7d32;
    --dsr-green-dark: #3d6b34;
    --dsr-green-darker: #2d5a27;
}

/* Dark mode palette — explicit opt-in via data-bs-theme="dark".
 * Rule: HSL hue+saturation preserved from light-mode; lightness inverted (l → 100 - l)
 * and clamped for contrast. Brand colour is swapped with --secondary because the pale
 * mint (#EBF3EB) reads as "our green" on a dark surface better than a pure hue-inverted
 * shade would. DSR tokens intentionally excluded — public DSR pages stay light.
 */
:root[data-bs-theme="dark"] {
    --primary: #EBF3EB;         /* swap: hsl(120,32%,94%) — brand presence on dark bg uses the light-mode secondary */
    --primary-light: #5cae5c;   /* hsl(120,33%,52%) — lighter tint for interactive states on dark bg */
    --secondary: #006400;       /* swap: hsl(120,100%,20%) — original brand green, now the "other" accent */
    --dark: #cccccc;            /* hsl(0,0%,80%) — was #333333 (hsl 0,0%,20%); inverted lightness for body text */
    --light: #121212;           /* hsl(0,0%,7%) — was #ffffff (hsl 0,0%,100%); near-black "surface" colour */

    --background: #0d0d10;      /* hsl(240,9%,5%) — was #F7F8FB (hsl 225,27%,97%); very dark neutral app bg */
    --border: #2a2d33;          /* hsl(220,8%,18%) — was #e3e6f0 (hsl 220,13%,92%); inverted lightness for card borders */
    /* --brand-primary intentionally NOT redefined — it must stay the light-mode brand colour across themes. */

    --success: #36c24b;         /* hsl(128,56%,49%) — was #2fb344 (hsl 128,59%,44%); slightly brighter green for dark bg legibility */
    --info: #8b5fb0;            /* hsl(275,31%,53%) — was #C29ADC (hsl 275,45%,73%); darkened violet keeps identity */
    --warning: #f89456;         /* hsl(20,92%,66%) — was #F7762B (hsl 20,93%,57%); softened orange, stays recognisably warning */
    --danger: #ff6b6b;          /* hsl(0,100%,71%) — was #E02D2D (hsl 0,75%,53%); softer red, eye-friendly on dark bg */

    --light-opacity: 80%;       /* slightly tighter than light-mode so "light" tints remain visible against dark surface */
    --success-light: color-mix(in srgb, var(--success), transparent var(--light-opacity));
    --info-light: color-mix(in srgb, var(--info), transparent var(--light-opacity));
    --warning-light: color-mix(in srgb, var(--warning), transparent var(--light-opacity));
    --danger-light: color-mix(in srgb, var(--danger), transparent var(--light-opacity));

    --highlight: brightness(1.15);  /* flip: dark mode brightens on hover instead of darkening */

    --muted: color-mix(in srgb, var(--dark), transparent 30%);  /* slightly more faded than light-mode --muted */
    /* DSR palette intentionally NOT overridden — DSR public pages are unauthenticated and stay light. */
}

.text-muted {
    color: var(--muted) !important;
}

a.nav-link>.logo {
    max-height: 60px;
}

.navbar-nav .nav-link {
    height: 100%;
}
.navbar-nav .dropdown-menu {
    top: 99%;
}

.navbar-collapse .dropdown-toggle:after {
    font-size: 16px;
    margin-left: 0.4rem;
    top: 2px;
    position: relative;
}

/* Logo header: only present when doubleTopBar is enabled */
header.logo-header {
    top: 0;
    position: fixed;
    width: 100%;
    z-index: 1051;
    transition: transform var(--nav-transition-speed) ease;
}

header.logo-header.nav-hidden {
    transform: translateY(calc(-1 * var(--header-height)));
}

/* Menu header: fixed at top (contains logo when doubleTopBar is off) */
header.menu-container {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1050;
    transition: transform var(--nav-transition-speed) ease;
}

/* Auto-hide nav on scroll down */
header.menu-container.nav-hidden {
    transform: translateY(calc(-1 * var(--menu-height)));
}

.navbar-overlap:after {
    display: none !important;
}

.page-wrapper {
    padding-top: var(--menu-height);
    color: var(--dark);
    background-color: var(--light);
}

/* Sticky filters bar — pinned to --brand-primary so the company colour stays
 * identical in light and dark mode (it's a recognisable anchor across themes). */
nav.navbar.navbar-filters {
    position: sticky;
    top: var(--menu-height);
    z-index: 1040;
    background-color: var(--brand-primary) !important;
    color: var(--brand-primary-contrast) !important;
    transition: top var(--nav-transition-speed) ease;
    padding: .5rem !important;
    border-radius: 29px;
    margin-bottom: .5rem;
}

nav.navbar.navbar-filters .nav-link,
nav.navbar.navbar-filters .navbar-toggler,
nav.navbar.navbar-filters .la,
nav.navbar.navbar-filters a {
    color: var(--brand-primary-contrast) !important;
}

nav.navbar.navbar-filters .nav-link:hover,
nav.navbar.navbar-filters .nav-link:focus,
nav.navbar.navbar-filters a:hover,
nav.navbar.navbar-filters a:focus {
    color: var(--brand-primary-contrast) !important;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 5px;
}

/* Filter dropdowns: white surface with brand-coloured text in both modes. */
nav.navbar.navbar-filters .dropdown-menu,
nav.navbar.navbar-filters .dropdown-menu a,
nav.navbar.navbar-filters .dropdown-menu a:hover,
nav.navbar.navbar-filters .dropdown-menu a:focus,
nav.navbar.navbar-filters .dropdown-menu .nav-link,
nav.navbar.navbar-filters .dropdown-menu .nav-link:hover,
nav.navbar.navbar-filters .dropdown-menu .nav-link:focus {
    background-color: var(--brand-primary-contrast);
    color: #333333 !important;
}

nav.navbar.navbar-filters #datatable_search_stack {
    background-color: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--brand-primary-contrast);
    border-radius: 100px;
    padding: .25rem .75rem;
}

nav.navbar.navbar-filters #datatable_search_stack .form-control {
    background-color: transparent;
    color: var(--brand-primary);
    border: none;
    box-shadow: none;
}

nav.navbar.navbar-filters #datatable_search_stack .form-control::placeholder {
    color: var(--brand-primary);
    opacity: .7;
}

nav.navbar.navbar-filters #datatable_search_stack .input-icon-addon {
    color: var(--brand-primary);
}

/* Active filter: semi-transparent white bg with contrast-colour text. */
nav.navbar.navbar-filters li.active > a.nav-link,
nav.navbar.navbar-filters li.active > a.nav-link:hover,
nav.navbar.navbar-filters li.active > a.nav-link:focus {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: var(--brand-primary-contrast) !important;
    border-radius: 5px;
}

body.nav-is-hidden .navbar-filters {
    top: 0;
}

/* Fixed bottom action buttons on list pages */
#bottom_buttons {
    position: fixed;
    z-index: 9001;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--secondary);
    padding: .5rem 1rem;
    border-radius: 0;
    box-shadow: 0 -4px 24px var(--light);
}

/* Prevent table content from being hidden behind fixed bottom bar */
[bp-section="crud-operation-list"] {
    padding-bottom: 3.5rem;
}

/* Length menu in bottom bar: keep on one line */
#bottom_bar_length .dataTables_length label {
    display: flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
    margin-bottom: 0;
}

#bottom_bar_length .dataTables_length select {
    width: auto;
}

/* Remove extra spacing on paginator in bottom bar */
#bottom_bar_pagination .dataTables_paginate {
    margin: 0;
    padding: 0;
}

#bottom_bar_pagination ul.pagination {
    padding-bottom: 0;
    margin-bottom: 0;
}

body[bp-layout=horizontal-overlap] .breadcrumb .active,
body[bp-layout=horizontal-overlap] .header-operation,
body[bp-layout=horizontal-overlap] [bp-section=page-heading] {
    color: var(--dark);
}

/* Combine page header + breadcrumbs into one row */
.page-body > main {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
}

.page-body > main > nav[aria-label="breadcrumb"] {
    order: 2;
    flex: 0 0 auto;
    margin-left: auto;
    margin-bottom: 0;
}

.page-body > main > nav[aria-label="breadcrumb"] .breadcrumb {
    margin-bottom: 0;
}

.page-body > main > .header-operation[bp-section="page-header"] {
    order: 1;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    margin-bottom: 0;
}

/* All other main children (content, widgets) flow below */
.page-body > main > .container-fluid,
.page-body > main > div {
    order: 3;
    flex: 0 0 100%;
}

.table-header-icon {
    font-size: 20px;
}

.mr-2 {
    margin-right: 4px;
}

a.nav-link i {
    font-size: 30px !important;
}

.dropdown-separator {
    padding: 1rem 1rem 0;
    margin: 0;
    color: var(--tblr-gray-500);
}

.page.page-center {
    background-image: linear-gradient(to bottom, rgb(255, 255, 255), #9ab646dd), url("/img/traffic-332857_1920.jpg");
    background-size: cover;
    background-position: center center;
}

.navbar-overlap:after {
    height: 7rem;
}

.infringements-very-low {
    background-color: var(--warning-light);
}

.infringements-low {
    background-color: var(--warning-light);
}

.infringements-medium {
    background-color: var(--warning);
}

.infringements-high {
    background-color: var(--danger);
}

.infringements-very-high {
    background-color: var(--danger);
}

.infringements-none,
.status-pending {
    background-color: var(--tblr-gray-500);
}

.status-parsing {
    background-color: var(--tblr-yellow);
}

.status-parsed {
    background-color: var(--tblr-info);
}

.status-analyzing {
    background-color: var(--tblr-warning);
}

.status-analyzed {
    background-color: var(--success);
}

.status-analyzed-limited-data {
    background-color: var(--success);
}

.status-no-companylock,
.status-no-activities,
.status-error-parsing,
.status-error-analyzing,
.badge-danger {
    background-color: var(--danger);
}

.status-skipped {
    background-color: var(--tblr-table-bg);
    color: var(--tblr-body-color);
}

.btn-group .dt-button-collection {
    width: unset;
    min-width: 218px;
    max-width: 90vw;
}

/* DataTables button dropdowns in bottom bar: open upwards.
   Override the inline top set by DataTables JS which miscalculates
   for position:fixed containers when the page is scrolled. */
#bottom_buttons .dt-button-collection {
    top: auto !important;
    bottom: 100%;
}

#crudTable td,
#crudTable td.dtr-control:first-child {
    padding-top: .25rem;
    padding-bottom: .25rem;
}

.border-color-danger {
    border-color: var(--danger);
}

.border-color-warning {
    border-color: var(--warning);
}

.border-color-warning-light {
    border-color: var(--warning-light);
}

.border-color-success {
    border-color: var(--success);
}

.border-color-success-light {
    border-color: var(--success-light);
}

.text-success-light {
    color: var(--success-light);
}

/* Save actions bar on create/edit pages */
#saveActions {
    display: block;
    position: fixed;
    z-index: 9001;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--secondary);
    padding: .5rem 1rem;
    border-radius: 0;
    box-shadow: 0 -4px 24px var(--light);
}

form:has(#saveActions) {
    padding-bottom: 3.5rem;
}

#saveActions {
    margin: 0;
}

/* Show page bottom bar: add padding so content isn't hidden */
[bp-section="crud-operation-show"],
body:has(#bottom_buttons) main {
    padding-bottom: 3.5rem;
}

/* "Set End of Service" button: pushed to the right */
#bottom_buttons .js-end-of-service-button {
    margin-left: auto;
    order: 90;
}

/* Destructive buttons in bottom bars: rightmost */
#bottom_buttons .btn.btn-danger,
#bottom_buttons a[bp-button="delete"],
#bottom_buttons a[bp-button="bulkDelete"],
#bottom_buttons a[bp-button="destroy"],
#bottom_buttons a[bp-button="bulkDestroy"],
#bottom_buttons a[bp-button="trash"],
#bottom_buttons a[bp-button="bulkTrash"],
#bottom_buttons [data-button-type="delete"],
#bottom_buttons .bulk-button-delete {
    order: 100;
}

/* Push destructive buttons to the right only when no end-of-service button is present */
#bottom_buttons .d-flex:not(:has(.js-end-of-service-button)) > a[bp-button="delete"],
#bottom_buttons .d-flex:not(:has(.js-end-of-service-button)) > a[bp-button="bulkDelete"],
#bottom_buttons .d-flex:not(:has(.js-end-of-service-button)) > a[bp-button="bulkDestroy"],
#bottom_buttons .d-flex:not(:has(.js-end-of-service-button)) > .bulk-button-delete,
#bottom_buttons .d-flex:not(:has(.js-end-of-service-button)) > .btn.btn-danger {
    margin-left: auto;
}

/** If you see this, you're probably thinking WTF, but this piece of technology makes it so the date selector on the driver page can make duplicates without seeing them.. best fix is a quick fix right???? */
h2.text-dark+h2.text-dark {
    display: none;
}

.nowrap {
    white-space: nowrap;
}

.bg-danger-light {
    background-color: var(--danger-light) !important;
}

.bg-warning-light {
    background-color: var(--warning-light) !important;
}

.bg-info-light {
    background-color: var(--info-light) !important;
}

.bg-danger-lighter {
    background-color: var(--danger-light) !important;
}

.bg-warning-lighter {
    background-color: var(--warning-light) !important;
}

.bg-info-lighter {
    background-color: var(--info-light) !important;
}

.bg-success-lighter {
    background-color: var(--success-light) !important;
}

.opacity-50 {
    opacity: 0.5;
}

#contact-moment-create-form-content {
    display: none;
}

.form-group:has([name="create_task"]:checked)+#contact-moment-create-form-content {
    display: block;
}

.rounded-lg {
    border-radius: 16px;
}

.btn-none {
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    outline: none;
}

.z-index-1 {
    z-index: 1;
}

.task.card:hover {
    transform: scale(1.01);
}

.task .task-description {
    overflow: hidden;
    height: 0;
    opacity: 0;
    transition: opacity 0.1s ease-in-out;
}

.task.card:hover .task-description {
    height: auto;
    opacity: 1;
}

.task.card a:hover .la {
    transform: scale(1.2);
}

/* Filter count badges */
.category-count,
.assigned-to-count,
.company-count {
    font-size: 0.75rem;
    min-width: 20px;
    text-align: center;
    padding: 0.25rem 0.5rem;
    border-radius: 10px;
    font-weight: 500;
}

.task-filter .form-check {
    margin-bottom: 0.5rem;
}

.task-filter .form-check>div:first-child {
    flex: 1;
}

.blur {
    filter: blur(.5rem);
}

.btn {
    border-radius: 8px;
    padding: 8px 14px;

    &.btn-sm {
        padding: 4px 10px;
        font-size: .8rem;
    }

    &.btn-primary {
        background-color: var(--primary) !important;
        color: var(--light) !important;
    }

    &.bg-primary-lighter {
        background-color: var(--primary-light) !important;
        color: var(--light) !important;
    }

    &:hover {
        filter: var(--highlight);
    }

    &.btn-success {
        background-color: var(--success) !important;
        color: var(--light) !important;
    }
}

.text-primary {
    color: var(--primary) !important;
}

/* ──────────────────────────────────────────────────────────────
   Admin card + field-row surfaces
   ──────────────────────────────────────────────────────────────
   Previously duplicated inline across driver_show / company_show /
   vehicle_show / company_gap_analysis(_select).blade.php. Using
   CSS vars so dark mode flips naturally. */

.card {
    border: 1px solid var(--border);
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
}

.card-header {
    background-color: var(--background);
    border-bottom: 1px solid var(--border);
    padding: 1rem 1.25rem;
}

.card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--dark);
    margin: 0;
}

/* Field display rows — two-column label/value used on entity show pages. */
.field-group {
    border-bottom: 1px solid var(--background);
    padding: 0.5rem 0;
}

.field-group:last-child {
    border-bottom: none;
}

.field-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.field-label {
    width: 50%;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dark);
    min-width: 120px;
    flex-shrink: 0;
}

.field-value {
    font-size: 0.875rem;
    color: var(--dark);
    word-wrap: break-word;
    flex: 1;
}

/* ──────────────────────────────────────────────────────────────
   Driving Style Report (DSR)
   ────────────────────────────────────────────────────────────── */

.dsr-banner-img {
    aspect-ratio: 1280 / 200;
    overflow: hidden;
}

.dsr-banner-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 12px 12px 0 0;
}

.dsr-date-header .date-start {
    color: #888;
    font-weight: 500;
    font-size: 0.78rem;
}

.dsr-date-header .date-arrow {
    color: #bbb;
    font-size: 0.65rem;
    line-height: 1;
}

.dsr-date-header .date-end {
    font-weight: 600;
    color: var(--dark);
    font-size: 0.88rem;
}

.dsr-section-cell {
    width: 210px;
    border-left: 4px solid var(--primary);
    border-right: 1px solid #eee;
    background: #fafcfa;
    padding: 1rem 1.25rem;
    vertical-align: middle;
}

.dsr-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--dsr-green-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dsr-icon-box i {
    font-size: 1.4rem;
    color: var(--dsr-green);
}

.dsr-section-start td {
    border-top: 2px solid #e0e0e0;
}

.dsr-bg-dark {
    background: linear-gradient(135deg, var(--dsr-green-darker) 0%, var(--dsr-green-dark) 50%, #4a7c3f 100%);
}

.dsr-bg-light {
    background: linear-gradient(135deg, var(--dsr-green-light) 0%, #c8e6c9 40%, #a5d6a7 100%);
}

.dsr-bg-bar {
    background: linear-gradient(90deg, var(--dsr-green-light), #f0f7f0, var(--dsr-green-light));
}

/* DSR main overview table */
.dsr-table {
    width: 100%;
    border-collapse: collapse;
}

.dsr-table thead th {
    padding: 1rem 0.75rem;
    text-align: center;
    vertical-align: middle;
    background: #f6faf6;
    border-bottom: 2px solid #ddd;
    font-size: 0.88rem;
}

.dsr-table tbody td {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.88rem;
    color: #444;
}

.dsr-chart-wrapper svg {
    max-width: 100%;
    height: auto;
}

/* DSR summary score table (dark header) */
.dsr-summary-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.dsr-summary-table thead th {
    background: var(--dsr-green-darker);
    color: #fff;
    padding: 0.5rem 0.6rem;
    text-align: center;
    border: 1px solid #4a7c3f;
    font-size: 0.8rem;
    font-weight: 600;
}

.dsr-summary-table thead th .date-start {
    font-size: 0.72rem;
    opacity: 0.8;
}

.dsr-summary-table thead th .date-arrow {
    font-size: 0.6rem;
    opacity: 0.5;
    line-height: 1;
}

.dsr-summary-table thead th .date-end {
    font-weight: 700;
}

.dsr-summary-table tbody td {
    padding: 0.4rem 0.6rem;
    text-align: center;
    border: 1px solid #4a7c3f;
    font-weight: 600;
    color: var(--dark);
}

.dsr-summary-table tbody td:first-child {
    text-align: left;
    background: var(--dsr-green-dark);
    color: #fff;
    font-weight: 500;
}

/* DSR per-vehicle table */
.dsr-vehicle-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.dsr-vehicle-table thead th {
    background: var(--dsr-green);
    color: #fff;
    padding: 0.4rem 0.6rem;
    text-align: center;
    border: 1px solid #4a9e4e;
    font-weight: 600;
    font-size: 0.85rem;
}

.dsr-vehicle-table tbody td {
    padding: 0.25rem 0.5rem;
    border: 1px solid #b5d8b7;
    color: var(--dark);
    font-size: 0.8rem;
}

.dsr-vehicle-table .vt-label,
.dsr-vehicle-table .vt-label-r {
    font-weight: 600;
    background: #3d8b40;
    white-space: nowrap;
    color: #fff;
}

.dsr-vehicle-table .vt-label {
    text-align: right;
    padding-right: 0.75rem;
}

.dsr-vehicle-table .vt-label-r {
    text-align: left;
    padding-left: 0.75rem;
}

/* Score color utilities */
.score-bg-excellent  { background: #00bc55; }
.score-bg-good       { background: #a2d668; }
.score-bg-fair       { background: #ffe07d; }
.score-bg-mediocre   { background: #f5c304; }
.score-bg-poor       { background: #ff5757; }

.score-text-excellent { color: #00bc55; font-weight: 700; }
.score-text-good      { color: #a2d668; font-weight: 700; }
.score-text-fair      { color: #ffe07d; font-weight: 700; }
.score-text-mediocre  { color: #f5c304; font-weight: 700; }
.score-text-poor      { color: #ff5757; font-weight: 700; }

.score-cell-excellent { background: #00bc55; color: #fff; }
.score-cell-good      { background: #a2d668; color: #fff; }
.score-cell-fair      { background: #ffe07d; color: #333; }
.score-cell-mediocre  { background: #f5c304; color: #333; }
.score-cell-poor      { background: #ff5757; color: #fff; }

/* ──────────────────────────────────────────────────────────────
   DSR — Mobile responsive styles
   ────────────────────────────────────────────────────────────── */

/* Horizontal scroll wrapper for all DSR tables */
.dsr-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
    /* Banner: taller aspect ratio on small screens */
    .dsr-banner-img {
        aspect-ratio: 1280 / 350;
    }

    /* Section cells: compact on mobile — icon only, label hidden */
    .dsr-section-cell {
        width: 48px !important;
        min-width: 48px;
        max-width: 48px;
        padding: 0.4rem !important;
        border-left: 3px solid var(--primary);
        border-right: none;
        text-align: center;
    }

    .dsr-section-cell .d-flex {
        flex-direction: column;
        align-items: center;
        gap: 0 !important;
    }

    /* Label text below icon, compact */
    .dsr-section-cell .d-flex > div:last-child {
        font-size: 0.6rem;
        line-height: 1.1;
    }

    .dsr-section-cell .d-flex > div:last-child .fst-italic {
        display: none;
    }

    .dsr-icon-box {
        width: 36px;
        height: 36px;
        border-radius: 8px;
    }

    .dsr-icon-box i {
        font-size: 1.1rem;
    }

    /* Tables: horizontal scroll via wrapper, keep table display for rowspan */
    .dsr-table,
    .dsr-summary-table,
    .dsr-vehicle-table {
        white-space: nowrap;
    }

    /* Cap label columns at 33% on mobile */
    .dsr-table tbody td:not(.dsr-section-cell):first-child,
    .dsr-table tbody td:nth-child(2),
    .dsr-summary-table tbody td:first-child,
    .dsr-vehicle-table tbody th.vt-label {
        max-width: 33%;
        white-space: normal;
    }

    /* 2-line clamp on label text via inner span */
    .dsr-label-clamp {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        white-space: normal;
        max-width: 120px;
    }

    /* Reduce font sizes and padding */
    .dsr-table thead th,
    .dsr-table tbody td {
        padding: 0.4rem 0.5rem;
        font-size: 0.78rem;
    }

    .dsr-summary-table thead th,
    .dsr-summary-table tbody td {
        padding: 0.3rem 0.4rem;
        font-size: 0.72rem;
    }

    .dsr-vehicle-table thead th,
    .dsr-vehicle-table tbody td {
        padding: 0.2rem 0.4rem;
        font-size: 0.72rem;
    }

    .dsr-date-header .date-start { font-size: 0.65rem; }
    .dsr-date-header .date-end   { font-size: 0.75rem; }
    .dsr-date-header .date-arrow { font-size: 0.55rem; }

    /* Coach footer: stack vertically */
    .card > .d-flex.align-items-center[style*="border-top:3px"] {
        flex-direction: column;
        text-align: center;
        padding: 1rem !important;
        gap: 1rem !important;
    }

    .card > .d-flex.align-items-center[style*="border-top:3px"] > div[style*="flex:0 0 260px"] {
        flex: 1 1 auto !important;
    }

    /* Summary section: stack chart and table */
    .dsr-bg-dark .row.g-3 .col-md-5,
    .dsr-bg-dark .row.g-3 .col-md-7 {
        padding: 0 0.5rem;
    }

    .dsr-bg-dark .row.g-3 {
        flex-direction: column;
    }

    .dsr-bg-dark h3 {
        font-size: 1.1rem !important;
    }

    /* Vehicle table section: reduce padding */
    .dsr-bg-light {
        padding: 1rem !important;
    }

    .dsr-bg-light h2 {
        font-size: 1.1rem !important;
    }

    /* General container padding reduction */
    .container.py-4[style*="max-width:1280px"] {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* Page title */
    .container.py-4 h1.text-primary {
        font-size: 1.3rem;
    }

    /* Questions bar */
    .dsr-bg-bar {
        font-size: 0.78rem !important;
        padding: 0.5rem 0.75rem !important;
    }
}

/* ──────────────────────────────────────────────────────────────
   Development Board — Concern lanes & tickets
   ────────────────────────────────────────────────────────────── */

.concern-lanes { overflow-x: auto; }

.concern-lane {
    min-width: 200px;
    flex: 1;
}

.concern-lane-header {
    border-left: 3px solid var(--tblr-gray-500);
}

.concern-lane-badge {
    color: #fff;
    background: var(--tblr-gray-500);
}

.concern-lane-body {
    max-height: 50dvh;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 400px;
}

/* Backlog renders priority buckets inside one scrollable wrapper. Each
   bucket is its own Sortable drop zone but stays compact when empty —
   just enough to land a dragged ticket on. The wrapper (.concern-lane-body)
   still owns the single scrollbar. */
.concern-priority-body {
    min-height: 2.25rem;
}

.concern-priority-body:empty::before {
    content: '';
    display: block;
    height: 2.25rem;
}

/* Bootstrap's default offcanvas-end width is ~400px which feels cramped for
   a concern body with markdown + comments + editor. Push it to most of the
   viewport, capped so ultra-wide monitors don't show a 2000px panel. */
.concern-detail-panel.offcanvas-end {
    width: 80vw;
    max-width: 1200px;
}

/* The fixed nav headers sit at z-index 1050 / 1051, above Bootstrap's
   default offcanvas (1045). Raise both the panel and its backdrop so the
   concern sidebar covers the nav while open. The backdrop rule is global
   because Bootstrap appends it to <body> with no hook back to the panel;
   this app currently has no other offcanvas, so the bump is safe. */
.concern-detail-panel.offcanvas {
    z-index: 1060;
}

.offcanvas-backdrop {
    z-index: 1058;
}

.concern-lane {
    overflow-x: hidden;
}

.concern-lane-body * {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Per-lane colors */
.concern-lane--backlog .concern-lane-header { border-left-color: #929dab; background: rgba(146,157,171,.08); }
.concern-lane--backlog .concern-lane-badge  { background: #929dab; }
.concern-lane--backlog .concern-ticket      { border-left-color: #929dab; }

.concern-lane--doable .concern-lane-header { border-left-color: #4299e1; background: rgba(66,153,225,.08); }
.concern-lane--doable .concern-lane-badge  { background: #4299e1; }
.concern-lane--doable .concern-ticket      { border-left-color: #4299e1; }

.concern-lane--doing .concern-lane-header { border-left-color: #F7762B; background: rgba(247,118,43,.08); }
.concern-lane--doing .concern-lane-badge  { background: #F7762B; }
.concern-lane--doing .concern-ticket      { border-left-color: #F7762B; }

.concern-lane--qa .concern-lane-header { border-left-color: #C29ADC; background: rgba(194,154,220,.08); }
.concern-lane--qa .concern-lane-badge  { background: #C29ADC; }
.concern-lane--qa .concern-ticket      { border-left-color: #C29ADC; }

.concern-lane--ready .concern-lane-header { border-left-color: #2fb344; background: rgba(47,179,68,.08); }
.concern-lane--ready .concern-lane-badge  { background: #2fb344; }
.concern-lane--ready .concern-ticket      { border-left-color: #2fb344; }

/* Ticket boxes */
.concern-ticket {
    background: #fff;
    border: 1px solid #e9ecef;
    border-left: 3px solid var(--tblr-gray-500);
    border-radius: 4px;
    padding: 0.5rem 0.65rem;
    margin-bottom: 0.4rem;
    cursor: pointer;
    transition: box-shadow 0.15s ease;
}

.concern-ticket:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.concern-ticket-title {
    font-weight: 600;
    font-size: 0.85rem;
    line-height: 1.3;
}

.concern-copy-id {
    cursor: pointer;
}

.concern-copy-id:hover {
    text-decoration: underline;
}

.concern-ticket--released {
    border-left-color: #2fb344;
}

.concern-comment-meta {
    font-size: .85rem;
}

/* Priority gradient: P-0 = full --primary, P-5 = lightest */
.concern-priority--0 { border-left-color: var(--primary); }
.concern-priority--1 { border-left-color: color-mix(in srgb, var(--primary) 80%, var(--secondary)); }
.concern-priority--2 { border-left-color: color-mix(in srgb, var(--primary) 60%, var(--secondary)); }
.concern-priority--3 { border-left-color: color-mix(in srgb, var(--primary) 40%, var(--secondary)); }
.concern-priority--4 { border-left-color: color-mix(in srgb, var(--primary) 20%, var(--secondary)); }
.concern-priority--idea { border-left-color: var(--secondary); }

.concern-priority-badge {
    font-size: 0.7rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.concern-priority-badge--0 { background: var(--primary); color: #fff; }
.concern-priority-badge--1 { background: color-mix(in srgb, var(--primary) 80%, var(--secondary)); color: #fff; }
.concern-priority-badge--2 { background: color-mix(in srgb, var(--primary) 60%, var(--secondary)); color: #fff; }
.concern-priority-badge--3 { background: color-mix(in srgb, var(--primary) 40%, var(--secondary)); color: #fff; }
.concern-priority-badge--4 { background: color-mix(in srgb, var(--primary) 20%, var(--secondary)); color: var(--dark); }
.concern-priority-badge--idea { background: var(--secondary); color: var(--dark); font-style: italic; }

/* Releases accordion */
#releasesAccordion .accordion-button {
    background: #f8f9fa;
    font-size: 0.9rem;
}

#releasesAccordion .accordion-button:not(.collapsed) {
    background: #e9ecef;
    box-shadow: none;
}

/* Global swal styling */
.swal-title {
    text-align: left;
    font-size: 1.1rem;
    padding: 0.75rem 1.25rem;
}

.swal-content {
    text-align: left;
    padding: 0 1.25rem;
}

.swal-button--cancel {
    color: var(--dark);
    background-color: #e9ecef;
    border: 1px solid #ced4da;
}

.swal-button--cancel:hover {
    background-color: #dee2e6;
}

.swal-content .tox-tinymce {
    border-radius: .375rem;
}

.tox.tox-tinymce-aux {
    z-index: 99999 !important;
}

/* Reusable wide swal modal */
.swal-modal--wide {
    width: 100%;
    max-width: 1280px;
}

/* Concern detail swal modal */
.swal-modal--concern .swal-footer {
    display: flex;
    justify-content: space-between;
}

/* Concern suggestion swal modal */

.swal-modal--suggestion .swal-form-group {
    margin-bottom: 0.75rem;
}

.swal-modal--suggestion .swal-form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.swal-modal--concern .dashboard-markdown-content {
    max-height: 40vh;
    overflow-y: auto;
}

.concern-comment-status--synced { color: #2fb344; }
.concern-comment-status--needs-sync { color: #f76707; }


.dashboard-markdown-content {
    font-size: 0.9em;
    line-height: 1.6;
}

.dashboard-markdown-content h1,
.dashboard-markdown-content h2,
.dashboard-markdown-content h3,
.dashboard-markdown-content h4,
.dashboard-markdown-content h5,
.dashboard-markdown-content h6 {
    margin-top: 1em;
    margin-bottom: 0.5em;
    font-weight: 600;
}

.dashboard-markdown-content h1 { font-size: 1.5em; }
.dashboard-markdown-content h2 { font-size: 1.3em; }
.dashboard-markdown-content h3 { font-size: 1.1em; }

.dashboard-markdown-content ul,
.dashboard-markdown-content ol {
    margin-left: 1.5em;
    margin-bottom: 1em;
}

.dashboard-markdown-content li { margin-bottom: 0.25em; }
.dashboard-markdown-content p { margin-bottom: 0.75em; }

.dashboard-markdown-content pre,
.dashboard-markdown-content code {
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-family: monospace;
    font-size: 0.9em;
}

.dashboard-markdown-content blockquote {
    border-left: 3px solid #ddd;
    padding-left: 1em;
    margin-left: 0;
    color: #666;
}

.dashboard-markdown-content img {
    max-width: 100%;
    height: auto;
}

.dashboard-markdown-content a { color: #0066cc; text-decoration: none; }
.dashboard-markdown-content a:hover { text-decoration: underline; }

/* ──────────────────────────────────────────────────────────────
   Dark-mode scoped overrides for selectors with hard-coded hexes.
   Scope: only [data-bs-theme="dark"]. .dsr-* and .score-* NOT touched.
   Rule: each colour below was inverted in lightness (HSL) from its
   light-mode counterpart, keeping hue + saturation.
   ────────────────────────────────────────────────────────────── */

/* Card shadow flipped for dark bg — stronger, near-black instead of slate-grey. */
[data-bs-theme="dark"] .card {
    box-shadow: 0 0.15rem 1.75rem 0 rgba(0, 0, 0, 0.5);
}

[data-bs-theme="dark"] .page.page-center {
    /* light-mode: linear-gradient white → olive-green overlay. Dark-mode: near-black → same olive.
     * hsl(0,0%,100%) → hsl(0,0%,7%); olive overlay #9ab646dd left intact so the photo still reads. */
    background-image: linear-gradient(to bottom, rgba(18, 18, 18, 1), #9ab646dd), url("/img/traffic-332857_1920.jpg");
}

[data-bs-theme="dark"] .concern-ticket {
    background: #1e1e22;        /* hsl(240,7%,12%) — was #fff (hsl 0,0%,100%); near-black card surface */
    border: 1px solid #2a2d33;  /* hsl(220,8%,18%) — was #e9ecef (hsl 210,14%,93%); inverted border */
}

[data-bs-theme="dark"] .concern-ticket:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);  /* stronger shadow on dark bg to remain visible */
}

[data-bs-theme="dark"] #releasesAccordion .accordion-button {
    background: #1c1f23;  /* hsl(220,10%,12%) — was #f8f9fa (hsl 210,17%,98%); inverted lightness */
    color: var(--dark);
}

[data-bs-theme="dark"] #releasesAccordion .accordion-button:not(.collapsed) {
    background: #2a2d33;  /* hsl(220,8%,18%) — was #e9ecef; slightly lighter "active" surface */
    box-shadow: none;
}

[data-bs-theme="dark"] .swal-button--cancel {
    color: var(--dark);
    background-color: #2a2d33;  /* hsl(220,8%,18%) — was #e9ecef; matches accordion active */
    border: 1px solid #3a3d43;  /* hsl(220,7%,25%) — was #ced4da (hsl 210,14%,83%) */
}

[data-bs-theme="dark"] .swal-button--cancel:hover {
    background-color: #34373d;  /* hsl(220,8%,22%) — was #dee2e6; one step lighter than rest */
}

[data-bs-theme="dark"] .dashboard-markdown-content blockquote {
    border-left: 3px solid #444;  /* hsl(0,0%,27%) — was #ddd (hsl 0,0%,87%); inverted lightness */
    color: #999;                  /* hsl(0,0%,60%) — was #666 (hsl 0,0%,40%); inverted lightness */
}

[data-bs-theme="dark"] .dashboard-markdown-content a {
    color: #66b3ff;  /* hsl(210,100%,70%) — was #0066cc (hsl 210,100%,40%); inverted lightness, still clearly "link blue" */
}

/* Code blocks in markdown get a subtle dark surface so inline code reads. */
[data-bs-theme="dark"] .dashboard-markdown-content pre,
[data-bs-theme="dark"] .dashboard-markdown-content code {
    background-color: rgba(255, 255, 255, 0.06);  /* 6% white overlay — near-invisible on light, faint tint on dark */
}

/* Concern status colours — keep hue, slightly lift saturation/lightness so the tinted
 * 8%-alpha backgrounds remain visible on a dark body bg. The ticket border colours stay
 * identical to light-mode so the lane identity reads the same. */
[data-bs-theme="dark"] .concern-lane--backlog .concern-lane-header { background: rgba(146,157,171,.18); }
[data-bs-theme="dark"] .concern-lane--doable  .concern-lane-header { background: rgba(66,153,225,.18); }
[data-bs-theme="dark"] .concern-lane--doing   .concern-lane-header { background: rgba(247,118,43,.18); }
[data-bs-theme="dark"] .concern-lane--qa      .concern-lane-header { background: rgba(194,154,220,.18); }
[data-bs-theme="dark"] .concern-lane--ready   .concern-lane-header { background: rgba(47,179,68,.18); }

/* Comment status — shift hues minimally but lift lightness for dark bg. */
[data-bs-theme="dark"] .concern-comment-status--synced      { color: #4fd168; }  /* hsl(132,58%,57%) — was #2fb344 (hsl 128,59%,44%) */
[data-bs-theme="dark"] .concern-comment-status--needs-sync  { color: #ff9446; }  /* hsl(22,100%,63%) — was #f76707 (hsl 24,96%,50%) */

/* SortableJS drag states — Bootstrap has no equivalent for "placeholder
   outline at drop target" or "low-opacity chosen source"; these two tiny
   rules replace what would otherwise be repeated utility-class juggling
   per drag frame. */
.concern-ticket-ghost {
    opacity: 0.4;
    background: var(--tblr-gray-100, #f1f3f5);
    border-style: dashed;
}
.concern-ticket-chosen {
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
}
[data-bs-theme="dark"] .concern-ticket-ghost {
    background: var(--tblr-gray-800, #2a2e33);
}