/* Dev environment banner — slim full-width strip at the very top of the page.
   Rendered only when ENVIRONMENT != production (see base.html / config.py). */
.dev-env-banner {
    background-color: #e65100;
    color: #fff;
    text-align: center;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    padding: 3px 12px;
}

/* In-app variant: a centered pill inside the (sticky) navbar, so it stays
   visible while using the app. Matches the Rampside Dev banner. */
.dev-env-pill {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background-color: #e65100;
    color: #fff;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    padding: 3px 12px;
    border-radius: 4px;
    pointer-events: none;
}

/* Bootstrap Primary Color Override */
:root {
    --bs-primary: #15135F;
    --bs-primary-rgb: 21, 19, 95;
    --bs-link-color: #15135F;
    --bs-link-hover-color: #100e4a;
}

.bg-primary {
    background-color: #15135F !important;
}

.btn-primary {
    background-color: #15135F;
    border-color: #15135F;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: #100e4a;
    border-color: #100e4a;
}

.btn-outline-primary {
    color: #15135F;
    border-color: #15135F;
}

.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
    background-color: #15135F;
    border-color: #15135F;
    color: white;
}

.text-primary {
    color: #15135F !important;
}

.border-primary {
    border-color: #15135F !important;
}

.bg-pink {
    background-color: #e91e63 !important;
    color: #fff !important;
}

a {
    color: #15135F;
}

a:hover {
    color: #100e4a;
}

/* Navbar Dropdown - Dark Theme */
.navbar-dark .dropdown-menu {
    background-color: #15135F;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.navbar-dark .dropdown-menu .dropdown-item {
    color: rgba(255, 255, 255, 0.85);
}

.navbar-dark .dropdown-menu .dropdown-item:hover,
.navbar-dark .dropdown-menu .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

.navbar-dark .dropdown-menu .dropdown-item.active {
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
}

.navbar-dark .dropdown-menu .dropdown-item i {
    opacity: 0.7;
}

/* Login Page */
.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #15135F 0%, #100e4a 100%);
}

.login-card {
    background: white;
    padding: 2.5rem;
    border-radius: 1rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 400px;
}

/* Stats Cards */
.stat-card {
    border: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
}

.stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.stat-icon-total {
    background-color: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
}

/* Status Columns */
.status-column {
    background: #f8f9fa;
    border-radius: 0.5rem;
    min-height: 400px;
}

.status-header {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem 0.5rem 0 0;
    font-weight: 600;
    color: white;
    display: flex;
    align-items: center;
}

.status-header.status-open {
    background: #0d6efd;
}

.status-header.status-in_progress {
    background: #ffc107;
    color: #212529;
}

.status-header.status-on_hold {
    background: #6c757d;
}

.status-header.status-completed {
    background: #198754;
}

.status-body {
    padding: 1rem;
}

/* Work Order Cards */
.work-order-card .card {
    border: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: transform 0.15s, box-shadow 0.15s;
}

.work-order-card .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

/* Priority Badges */
.badge.priority-low {
    background-color: #198754;
}

.badge.priority-medium {
    background-color: #ffc107;
    color: #212529;
}

.badge.priority-high {
    background-color: #fd7e14;
}

.badge.priority-urgent {
    background-color: #dc3545;
}

.badge.priority-routine {
    background-color: #0d6efd;
}

/* Status Badges */
.badge.status-open {
    background-color: #0d6efd;
}

.badge.status-in_progress {
    background-color: #ffc107;
    color: #212529;
}

.badge.status-on_hold {
    background-color: #6c757d;
}

.badge.status-completed {
    background-color: #198754;
}

/* Timeline */
.timeline {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.timeline-item {
    position: relative;
    padding-left: 1.5rem;
    padding-bottom: 1rem;
    border-left: 2px solid #dee2e6;
}

.timeline-item:last-child {
    padding-bottom: 0;
    border-left-color: transparent;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #0d6efd;
}

.timeline-date {
    display: block;
    font-size: 0.75rem;
    color: #6c757d;
}

.timeline-text {
    display: block;
    font-size: 0.875rem;
}

/* Comments */
.comment {
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 0.5rem;
}

/* Responsive Adjustments */
@media (max-width: 991.98px) {
    .status-column {
        min-height: auto;
    }

    .status-body {
        max-height: 300px;
    }
}

/* HTMX Loading Indicator */
.htmx-request {
    opacity: 0.7;
    transition: opacity 200ms ease-in;
}

.htmx-request.htmx-request {
    opacity: 0.7;
}

/* ===== Home dashboard ===== */
.home-header h2 {
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #1d2030;
}

.home-subtitle {
    color: #8a8f9c;
}

/* Quick-action launchers — the primary "create" CTAs on the dashboard */
.quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.85rem;
}

.quick-action {
    --accent: #15135F;
    --accent-soft: #ecebf3;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1.1rem;
    background: #fff;
    border: 1px solid #e7e7ef;
    border-radius: 14px;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(20, 18, 60, 0.04);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.quick-action:hover {
    border-color: var(--accent);
    box-shadow: 0 6px 18px rgba(20, 18, 60, 0.10);
    transform: translateY(-2px);
}

.qa-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    background: var(--accent-soft);
    color: var(--accent);
}

.qa-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

.qa-title {
    font-weight: 600;
    font-size: 0.98rem;
    color: #20232e;
}

.qa-sub {
    margin-top: 1px;
    font-size: 0.78rem;
    color: #8a8f9c;
}

.qa-plus {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 1.05rem;
    color: #c4c8d0;
    transition: color 0.18s ease;
}

.quick-action:hover .qa-plus {
    color: var(--accent);
}

.dash-card {
    border: 1px solid #ececf2;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(20, 18, 60, 0.05);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    --accent: #15135F;
    --accent-soft: #ecebf3;
}

.dash-card:hover {
    box-shadow: 0 6px 20px rgba(20, 18, 60, 0.09);
    transform: translateY(-2px);
}

.dash-card > .card-header {
    background: transparent;
    border-bottom: 1px solid #f2f2f7;
    padding: 1rem 1.25rem;
}

.dash-card-title {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: #20232e;
}

.dash-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    background: var(--accent-soft);
    color: var(--accent);
}

.dash-open-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--accent);
}

.dash-open-link:hover {
    color: var(--accent);
    opacity: 0.75;
}

/* Stat tiles */
.stat-grid {
    display: grid;
    gap: 0;
}

.stat-grid.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.stat-grid.cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.stat-tile {
    position: relative;
    padding: 0.35rem 0.5rem 0.45rem;
    text-align: center;
}

.stat-tile + .stat-tile::before {
    content: '';
    position: absolute;
    left: 0;
    top: 16%;
    bottom: 16%;
    border-left: 1px solid #eef0f4;
}

.stat-num {
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.1;
    color: #20232e;
    font-variant-numeric: tabular-nums;
}

.stat-num.is-muted { color: #c4c8d0; }
.stat-num.is-alert { color: #e03131; }
.stat-num.is-warn  { color: #f08c00; }
.stat-num.is-ok    { color: #2f9e44; }

.stat-label {
    margin-top: 0.15rem;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #8a8f9c;
}

/* List sections inside dashboard cards */
.dash-section-label {
    display: flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9a9fab;
}

.dash-list .list-group-item {
    border-color: #f2f2f7;
}

.dash-list a {
    color: #2c3040;
}

.dash-list a:hover {
    color: var(--accent, #15135F);
}

/* Soft, scoped badges for dashboard line items — calmer than the
   saturated solid pills used elsewhere in the app. */
.dash-list .badge {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    padding: 0.3em 0.6em;
    border-radius: 6px;
}

/* App-specific status/priority classes (no !important upstream). */
.dash-list .badge.priority-low,
.dash-list .badge.ticket-status-resolved { background: #e6f4ea; color: #1b7a3d; }

.dash-list .badge.priority-medium,
.dash-list .badge.ticket-status-in_progress { background: #fff3df; color: #b06f00; }

.dash-list .badge.priority-high { background: #ffe9d6; color: #c1500a; }

.dash-list .badge.priority-urgent,
.dash-list .badge.priority-critical { background: #fde4e4; color: #c92a2a; }

.dash-list .badge.priority-routine,
.dash-list .badge.ticket-status-new { background: #e7f0fe; color: #1c5fc7; }

.dash-list .badge.priority-untriaged,
.dash-list .badge.ticket-status-pending_user,
.dash-list .badge.ticket-status-pending_vendor { background: #eef0f2; color: #5f6672; }

.dash-list .badge.ticket-status-assigned { background: #e0f2f5; color: #0b7285; }
.dash-list .badge.ticket-status-closed { background: #e9ecef; color: #343a40; }

.dash-list .badge.badge-unassigned { background: #fde6f0; color: #c2255c; }

/* Bootstrap's bg-* utilities carry !important, so match it to win inside the list. */
.dash-list .badge.bg-success { background-color: #e6f4ea !important; color: #1b7a3d; }
.dash-list .badge.bg-warning { background-color: #fff3df !important; color: #b06f00; }
.dash-list .badge.bg-danger  { background-color: #fde4e4 !important; color: #c92a2a; }
.dash-list .badge.bg-primary { background-color: #e7f0fe !important; color: #1c5fc7; }
.dash-list .badge.bg-secondary { background-color: #eef0f2 !important; color: #5f6672; }
.dash-list .badge.bg-light   { background-color: #f1f3f5 !important; color: #6b7280 !important; }


/* IT Ticket priority and status badge colors */
.priority-low { background-color: #198754; color: white; }
.priority-medium { background-color: #ffc107; color: black; }
.priority-high { background-color: #fd7e14; color: white; }
.priority-critical { background-color: #dc3545; color: white; }
.priority-untriaged { background-color: #6c757d; color: white; }

.ticket-status-new { background-color: #0d6efd; color: white; }
.ticket-status-assigned { background-color: #17a2b8; color: white; }
.ticket-status-in_progress { background-color: #ffc107; color: black; }
.ticket-status-pending_user { background-color: #6c757d; color: white; }
.ticket-status-pending_vendor { background-color: #6c757d; color: white; }
.ticket-status-resolved { background-color: #198754; color: white; }
.ticket-status-closed { background-color: #343a40; color: white; }

/* ===== IT module pages (.it-page) =====
   Same calm treatment as the home dashboard, scoped to the IT module so the
   shared priority-*/ticket-status-*/bg-* badge classes keep their solid look
   elsewhere in the app. */
.it-page {
    --accent: #0c8599;
    --accent-soft: #e2f1f3;
}

/* Primary CTA that follows the module accent (teal on IT pages) */
.btn-accent {
    background-color: var(--accent, #15135F);
    border: 1px solid var(--accent, #15135F);
    color: #fff;
    border-radius: 10px;
    font-weight: 500;
    transition: box-shadow 0.15s ease, transform 0.15s ease, filter 0.15s ease;
}

.btn-accent:hover, .btn-accent:focus, .btn-accent:active {
    background-color: var(--accent, #15135F);
    border-color: var(--accent, #15135F);
    color: #fff;
    filter: brightness(1.12);
    box-shadow: 0 4px 12px rgba(20, 18, 60, 0.18);
    transform: translateY(-1px);
}

.it-page .card {
    border: 1px solid #ececf2;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(20, 18, 60, 0.05);
    overflow: hidden;
}

.it-page .card > .card-header {
    background: transparent;
    border-bottom: 1px solid #f2f2f7;
    padding: 0.9rem 1.25rem;
}

.it-page .list-group-item {
    border-color: #f2f2f7;
}

/* Six-stat KPI strip — divided tiles that re-flow cleanly per breakpoint */
.stat-strip {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}

.stat-strip .stat-tile {
    padding: 0.45rem 0.5rem 0.5rem;
}

@media (max-width: 991.98px) {
    .stat-strip {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 0.85rem;
    }
    /* No divider on the first tile of each wrapped row */
    .stat-strip .stat-tile:nth-child(3n+1)::before { content: none; }
}

@media (max-width: 575.98px) {
    .stat-strip { grid-template-columns: repeat(2, 1fr); }
    .stat-strip .stat-tile:nth-child(3n+1)::before { content: ''; }
    .stat-strip .stat-tile:nth-child(2n+1)::before { content: none; }
}

/* Soft badges across the IT module (overrides the solid defaults above
   and the per-template <style> blocks via higher specificity). */
.it-page .badge {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    padding: 0.32em 0.6em;
    border-radius: 6px;
}

.it-page .badge.priority-low,
.it-page .badge.ticket-status-resolved { background: #e6f4ea; color: #1b7a3d; }

.it-page .badge.priority-medium,
.it-page .badge.ticket-status-in_progress { background: #fff3df; color: #b06f00; }

.it-page .badge.priority-high { background: #ffe9d6; color: #c1500a; }

.it-page .badge.priority-critical { background: #fde4e4; color: #c92a2a; }

.it-page .badge.ticket-status-new { background: #e7f0fe; color: #1c5fc7; }

.it-page .badge.priority-untriaged,
.it-page .badge.ticket-status-pending_user,
.it-page .badge.ticket-status-pending_vendor { background: #eef0f2; color: #5f6672; }

.it-page .badge.ticket-status-assigned { background: #e0f2f5; color: #0b7285; }
.it-page .badge.ticket-status-closed { background: #e9ecef; color: #343a40; }

/* Bootstrap bg-* utilities carry !important — match it to win here. */
.it-page .badge.bg-success { background-color: #e6f4ea !important; color: #1b7a3d; }
.it-page .badge.bg-warning { background-color: #fff3df !important; color: #b06f00; }
.it-page .badge.bg-danger  { background-color: #fde4e4 !important; color: #c92a2a; }
.it-page .badge.bg-primary { background-color: #e7f0fe !important; color: #1c5fc7; }
.it-page .badge.bg-info    { background-color: #e0f2f5 !important; color: #0b7285; }
.it-page .badge.bg-secondary { background-color: #eef0f2 !important; color: #5f6672; }
.it-page .badge.bg-light   { background-color: #f1f3f5 !important; color: #6b7280 !important; }

/* ===== Facilities module pages (.facilities-page) =====
   Same calm treatment as the home dashboard and IT module, scoped so the
   shared badge/status classes keep their solid look elsewhere (e.g. the
   public status board, which is intentionally untouched). */
.facilities-page {
    --accent: #15135F;
    --accent-soft: #ecebf3;
}

.facilities-page .card {
    border: 1px solid #ececf2;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(20, 18, 60, 0.05);
    overflow: hidden;
}

.facilities-page .card > .card-header {
    background: transparent;
    border-bottom: 1px solid #f2f2f7;
    padding: 0.9rem 1.25rem;
}

.facilities-page .list-group-item {
    border-color: #f2f2f7;
}

/* Four-stat KPI strip (facilities board) */
.stat-strip-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.stat-strip-4 .stat-tile {
    padding: 0.45rem 0.5rem 0.5rem;
}

@media (max-width: 767.98px) {
    .stat-strip-4 {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 0.85rem;
    }
    .stat-strip-4 .stat-tile:nth-child(2n+1)::before { content: none; }
}

/* Kanban columns: neutral headers with a status-colored icon instead of
   solid colored banners. */
.facilities-page .status-column {
    background: #f8f9fb;
    border: 1px solid #ececf2;
    border-radius: 14px;
    overflow: hidden;
}

.facilities-page .status-header.status-open,
.facilities-page .status-header.status-in_progress,
.facilities-page .status-header.status-on_hold,
.facilities-page .status-header.status-completed {
    background: transparent;
    color: #3a3f4c;
    border-bottom: 1px solid #ececf2;
}

.facilities-page .status-header.status-open i { color: #1c5fc7; }
.facilities-page .status-header.status-in_progress i { color: #b06f00; }
.facilities-page .status-header.status-on_hold i { color: #5f6672; }
.facilities-page .status-header.status-completed i { color: #1b7a3d; }

.facilities-page .status-header .status-count {
    background: #fff;
    color: #5f6672;
    border: 1px solid #e7e7ef;
}

.facilities-page .work-order-card .card {
    border: 1px solid #ececf2;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(20, 18, 60, 0.04);
}

/* Soft badges across the facilities module */
.facilities-page .badge {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    padding: 0.32em 0.6em;
    border-radius: 6px;
}

.facilities-page .badge.priority-low,
.facilities-page .badge.status-completed { background: #e6f4ea; color: #1b7a3d; }

.facilities-page .badge.priority-medium,
.facilities-page .badge.status-in_progress { background: #fff3df; color: #b06f00; }

.facilities-page .badge.priority-high { background: #ffe9d6; color: #c1500a; }

.facilities-page .badge.priority-urgent,
.facilities-page .badge.priority-critical { background: #fde4e4; color: #c92a2a; }

.facilities-page .badge.priority-routine,
.facilities-page .badge.status-open { background: #e7f0fe; color: #1c5fc7; }

.facilities-page .badge.priority-untriaged,
.facilities-page .badge.status-on_hold { background: #eef0f2; color: #5f6672; }

.facilities-page .badge.badge-unassigned { background: #fde6f0; color: #c2255c; }

/* Bootstrap bg-* utilities carry !important — match it to win here. */
.facilities-page .badge.bg-success { background-color: #e6f4ea !important; color: #1b7a3d; }
.facilities-page .badge.bg-warning { background-color: #fff3df !important; color: #b06f00 !important; }
.facilities-page .badge.bg-danger  { background-color: #fde4e4 !important; color: #c92a2a; }
.facilities-page .badge.bg-primary { background-color: #e7f0fe !important; color: #1c5fc7; }
.facilities-page .badge.bg-info    { background-color: #e0f2f5 !important; color: #0b7285; }
.facilities-page .badge.bg-secondary { background-color: #eef0f2 !important; color: #5f6672; }
.facilities-page .badge.bg-light   { background-color: #f1f3f5 !important; color: #6b7280 !important; }

/* Denser facilities board: more cards visible at a glance */
.facilities-page .status-body {
    padding: 0.6rem;
}

.facilities-page .status-header.status-open,
.facilities-page .status-header.status-in_progress,
.facilities-page .status-header.status-on_hold,
.facilities-page .status-header.status-completed {
    padding: 0.55rem 0.85rem;
}

.facilities-page .work-order-card .card {
    margin-bottom: 0.5rem !important;
}

.facilities-page .work-order-card .card-title {
    font-size: 0.85rem;
    line-height: 1.25;
}

.facilities-page .work-order-card .wo-meta {
    font-size: 0.72rem;
    line-height: 1.45;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.facilities-page .work-order-card .badge {
    font-size: 0.66rem;
    padding: 0.28em 0.5em;
}

.facilities-page .stat-strip-4 .stat-num {
    font-size: 1.35rem;
}

/* ===== Shared soft module theme (.soft-page) =====
   Generic version of the .it-page/.facilities-page treatment for the
   remaining modules (flight line, purchasing, assets, reports, admin).
   Default accent is the brand indigo; module classes override it. */
.soft-page {
    --accent: #15135F;
    --accent-soft: #ecebf3;
}

.soft-page.fl-page {
    --accent: #2f9e44;
    --accent-soft: #e6f4ea;
}

.soft-page.pr-page,
.soft-page.assets-page {
    --accent: #5c6370;
    --accent-soft: #eef0f2;
}

.soft-page .card {
    border: 1px solid #ececf2;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(20, 18, 60, 0.05);
    overflow: hidden;
}

.soft-page .card > .card-header {
    background: transparent;
    border-bottom: 1px solid #f2f2f7;
    padding: 0.9rem 1.25rem;
}

.soft-page .list-group-item {
    border-color: #f2f2f7;
}

.soft-page .badge {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    padding: 0.32em 0.6em;
    border-radius: 6px;
}

.soft-page .badge.priority-low,
.soft-page .badge.status-completed,
.soft-page .badge.ticket-status-resolved { background: #e6f4ea; color: #1b7a3d; }

.soft-page .badge.priority-medium,
.soft-page .badge.status-in_progress,
.soft-page .badge.ticket-status-in_progress { background: #fff3df; color: #b06f00; }

.soft-page .badge.priority-high { background: #ffe9d6; color: #c1500a; }

.soft-page .badge.priority-urgent,
.soft-page .badge.priority-critical { background: #fde4e4; color: #c92a2a; }

.soft-page .badge.priority-routine,
.soft-page .badge.status-open,
.soft-page .badge.ticket-status-new { background: #e7f0fe; color: #1c5fc7; }

.soft-page .badge.priority-untriaged,
.soft-page .badge.status-on_hold,
.soft-page .badge.ticket-status-pending_user,
.soft-page .badge.ticket-status-pending_vendor { background: #eef0f2; color: #5f6672; }

.soft-page .badge.ticket-status-assigned { background: #e0f2f5; color: #0b7285; }
.soft-page .badge.ticket-status-closed { background: #e9ecef; color: #343a40; }
.soft-page .badge.badge-unassigned { background: #fde6f0; color: #c2255c; }

/* Bootstrap bg-* utilities carry !important — match it to win here. */
.soft-page .badge.bg-success { background-color: #e6f4ea !important; color: #1b7a3d; }
.soft-page .badge.bg-warning { background-color: #fff3df !important; color: #b06f00 !important; }
.soft-page .badge.bg-danger  { background-color: #fde4e4 !important; color: #c92a2a; }
.soft-page .badge.bg-primary { background-color: #e7f0fe !important; color: #1c5fc7; }
.soft-page .badge.bg-info    { background-color: #e0f2f5 !important; color: #0b7285 !important; }
.soft-page .badge.bg-secondary { background-color: #eef0f2 !important; color: #5f6672; }
.soft-page .badge.bg-dark    { background-color: #e2e4e8 !important; color: #343a40; }
.soft-page .badge.bg-light   { background-color: #f1f3f5 !important; color: #6b7280 !important; }

/* Five-stat KPI strip (reports: tickets tab) */
.stat-strip-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

.stat-strip-5 .stat-tile {
    padding: 0.45rem 0.5rem 0.5rem;
}

@media (max-width: 991.98px) {
    .stat-strip-5 {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 0.85rem;
    }
    .stat-strip-5 .stat-tile:nth-child(3n+1)::before { content: none; }
}

@media (max-width: 575.98px) {
    .stat-strip-5 { grid-template-columns: repeat(2, 1fr); }
    .stat-strip-5 .stat-tile:nth-child(3n+1)::before { content: ''; }
    .stat-strip-5 .stat-tile:nth-child(2n+1)::before { content: none; }
}

/* ============================================================
   DARK MODE
   Bootstrap 5.3's data-bs-theme="dark" handles native components
   (body, cards, tables, forms, dropdowns, modals) automatically.
   The rules below re-map the hardcoded light colors used in the
   custom classes above so the app's bespoke surfaces, text and
   soft badges read correctly on a dark background.
   ============================================================ */
[data-bs-theme="dark"] {
    /* Lift the deep-indigo brand into a periwinkle that has contrast on dark */
    --bs-primary: #8482ec;
    --bs-primary-rgb: 132, 130, 236;
    --bs-link-color: #9d9bf0;
    --bs-link-hover-color: #b8b6f5;

    /* Shared dark-surface tokens referenced by the overrides below.
       Page background is Bootstrap's dark body (#212529): elevated panels
       read lighter, recessed fills read darker. */
    --tf-surface: #2b2e35;      /* elevated card / panel (quick-actions) */
    --tf-surface-2: #1b1d22;    /* recessed fill (kanban columns, comments) */
    --tf-border: #3a3d46;       /* hairline borders */
    --tf-text: #e4e6eb;         /* primary text */
    --tf-text-soft: #c3c7d0;    /* slightly dimmed text */
    --tf-text-muted: #9197a3;   /* labels / captions */
}

/* --- Brand text & links (these are hardcoded with !important above) --- */
[data-bs-theme="dark"] a { color: var(--bs-link-color); }
[data-bs-theme="dark"] a:hover { color: var(--bs-link-hover-color); }
[data-bs-theme="dark"] .text-primary { color: #9d9bf0 !important; }
[data-bs-theme="dark"] .btn-outline-primary { color: #9d9bf0; border-color: #6f6ce0; }
[data-bs-theme="dark"] .btn-outline-primary:hover,
[data-bs-theme="dark"] .btn-outline-primary:focus,
[data-bs-theme="dark"] .btn-outline-primary:active {
    background-color: #6f6ce0;
    border-color: #6f6ce0;
    color: #fff;
}

/* --- Home dashboard --- */
[data-bs-theme="dark"] .home-header h2,
[data-bs-theme="dark"] .qa-title,
[data-bs-theme="dark"] .dash-card-title,
[data-bs-theme="dark"] .stat-num { color: var(--tf-text); }
[data-bs-theme="dark"] .home-subtitle,
[data-bs-theme="dark"] .qa-sub,
[data-bs-theme="dark"] .stat-label,
[data-bs-theme="dark"] .dash-section-label { color: var(--tf-text-muted); }
[data-bs-theme="dark"] .stat-num.is-muted { color: #6a6f7b; }

[data-bs-theme="dark"] .quick-action {
    background: var(--tf-surface);
    border-color: var(--tf-border);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
[data-bs-theme="dark"] .quick-action:hover {
    border-color: var(--bs-link-color);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
[data-bs-theme="dark"] .qa-plus { color: #5a5f6b; }

[data-bs-theme="dark"] .dash-card { border-color: var(--tf-border); }
[data-bs-theme="dark"] .dash-card > .card-header { border-bottom-color: var(--tf-border); }
[data-bs-theme="dark"] .stat-tile + .stat-tile::before { border-left-color: var(--tf-border); }
[data-bs-theme="dark"] .dash-list .list-group-item { border-color: var(--tf-border); }
[data-bs-theme="dark"] .dash-list a { color: var(--tf-text-soft); }
[data-bs-theme="dark"] .dash-list a:hover { color: var(--bs-link-color); }

/* --- Module card shells (IT / Facilities / generic soft-page) --- */
[data-bs-theme="dark"] .it-page .card,
[data-bs-theme="dark"] .facilities-page .card,
[data-bs-theme="dark"] .soft-page .card { border-color: var(--tf-border); }
[data-bs-theme="dark"] .it-page .card > .card-header,
[data-bs-theme="dark"] .facilities-page .card > .card-header,
[data-bs-theme="dark"] .soft-page .card > .card-header { border-bottom-color: var(--tf-border); }
[data-bs-theme="dark"] .it-page .list-group-item,
[data-bs-theme="dark"] .facilities-page .list-group-item,
[data-bs-theme="dark"] .soft-page .list-group-item { border-color: var(--tf-border); }

/* --- Kanban board (generic + facilities) --- */
[data-bs-theme="dark"] .status-column { background: var(--tf-surface-2); }
[data-bs-theme="dark"] .facilities-page .status-column {
    background: var(--tf-surface-2);
    border-color: var(--tf-border);
}
[data-bs-theme="dark"] .facilities-page .status-header.status-open,
[data-bs-theme="dark"] .facilities-page .status-header.status-in_progress,
[data-bs-theme="dark"] .facilities-page .status-header.status-on_hold,
[data-bs-theme="dark"] .facilities-page .status-header.status-completed {
    color: var(--tf-text-soft);
    border-bottom-color: var(--tf-border);
}
[data-bs-theme="dark"] .facilities-page .status-header .status-count {
    background: var(--tf-surface);
    color: var(--tf-text-muted);
    border-color: var(--tf-border);
}

/* --- Timeline & comments --- */
[data-bs-theme="dark"] .timeline-item { border-left-color: var(--tf-border); }
[data-bs-theme="dark"] .timeline-item:last-child { border-left-color: transparent; }
[data-bs-theme="dark"] .timeline-date { color: var(--tf-text-muted); }
[data-bs-theme="dark"] .comment { background: var(--tf-surface-2); }

/* --- Login card (page keeps its indigo gradient backdrop) --- */
[data-bs-theme="dark"] .login-card {
    background: var(--tf-surface);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

/* --- Soft badges ---------------------------------------------------------
   The light-mode pastel pills (light fill + saturated text) are too bright
   on dark. Swap to translucent tints with a luminous text color. Grouped to
   cover every module scope (dash-list / it-page / facilities-page / soft-page)
   plus Bootstrap's bg-* utilities (which carry !important). */
[data-bs-theme="dark"] .dash-list .badge.priority-low,
[data-bs-theme="dark"] .dash-list .badge.ticket-status-resolved,
[data-bs-theme="dark"] .it-page .badge.priority-low,
[data-bs-theme="dark"] .it-page .badge.ticket-status-resolved,
[data-bs-theme="dark"] .facilities-page .badge.priority-low,
[data-bs-theme="dark"] .facilities-page .badge.status-completed,
[data-bs-theme="dark"] .soft-page .badge.priority-low,
[data-bs-theme="dark"] .soft-page .badge.status-completed,
[data-bs-theme="dark"] .soft-page .badge.ticket-status-resolved,
[data-bs-theme="dark"] .dash-list .badge.bg-success,
[data-bs-theme="dark"] .it-page .badge.bg-success,
[data-bs-theme="dark"] .facilities-page .badge.bg-success,
[data-bs-theme="dark"] .soft-page .badge.bg-success {
    background-color: rgba(47, 158, 68, 0.20) !important;
    color: #6cd98a;
}

[data-bs-theme="dark"] .dash-list .badge.priority-medium,
[data-bs-theme="dark"] .dash-list .badge.ticket-status-in_progress,
[data-bs-theme="dark"] .it-page .badge.priority-medium,
[data-bs-theme="dark"] .it-page .badge.ticket-status-in_progress,
[data-bs-theme="dark"] .facilities-page .badge.priority-medium,
[data-bs-theme="dark"] .facilities-page .badge.status-in_progress,
[data-bs-theme="dark"] .soft-page .badge.priority-medium,
[data-bs-theme="dark"] .soft-page .badge.status-in_progress,
[data-bs-theme="dark"] .soft-page .badge.ticket-status-in_progress,
[data-bs-theme="dark"] .dash-list .badge.bg-warning,
[data-bs-theme="dark"] .it-page .badge.bg-warning,
[data-bs-theme="dark"] .facilities-page .badge.bg-warning,
[data-bs-theme="dark"] .soft-page .badge.bg-warning {
    background-color: rgba(240, 140, 0, 0.20) !important;
    color: #f0b95e !important;
}

[data-bs-theme="dark"] .dash-list .badge.priority-high,
[data-bs-theme="dark"] .it-page .badge.priority-high,
[data-bs-theme="dark"] .facilities-page .badge.priority-high,
[data-bs-theme="dark"] .soft-page .badge.priority-high {
    background-color: rgba(193, 80, 10, 0.22);
    color: #ff9f5e;
}

[data-bs-theme="dark"] .dash-list .badge.priority-urgent,
[data-bs-theme="dark"] .dash-list .badge.priority-critical,
[data-bs-theme="dark"] .it-page .badge.priority-critical,
[data-bs-theme="dark"] .facilities-page .badge.priority-urgent,
[data-bs-theme="dark"] .facilities-page .badge.priority-critical,
[data-bs-theme="dark"] .soft-page .badge.priority-urgent,
[data-bs-theme="dark"] .soft-page .badge.priority-critical,
[data-bs-theme="dark"] .dash-list .badge.bg-danger,
[data-bs-theme="dark"] .it-page .badge.bg-danger,
[data-bs-theme="dark"] .facilities-page .badge.bg-danger,
[data-bs-theme="dark"] .soft-page .badge.bg-danger {
    background-color: rgba(201, 42, 42, 0.22) !important;
    color: #ff8a8a;
}

[data-bs-theme="dark"] .dash-list .badge.priority-routine,
[data-bs-theme="dark"] .dash-list .badge.ticket-status-new,
[data-bs-theme="dark"] .it-page .badge.ticket-status-new,
[data-bs-theme="dark"] .facilities-page .badge.priority-routine,
[data-bs-theme="dark"] .facilities-page .badge.status-open,
[data-bs-theme="dark"] .soft-page .badge.priority-routine,
[data-bs-theme="dark"] .soft-page .badge.status-open,
[data-bs-theme="dark"] .soft-page .badge.ticket-status-new,
[data-bs-theme="dark"] .dash-list .badge.bg-primary,
[data-bs-theme="dark"] .it-page .badge.bg-primary,
[data-bs-theme="dark"] .facilities-page .badge.bg-primary,
[data-bs-theme="dark"] .soft-page .badge.bg-primary {
    background-color: rgba(28, 95, 199, 0.26) !important;
    color: #8db4f5;
}

[data-bs-theme="dark"] .dash-list .badge.priority-untriaged,
[data-bs-theme="dark"] .dash-list .badge.ticket-status-pending_user,
[data-bs-theme="dark"] .dash-list .badge.ticket-status-pending_vendor,
[data-bs-theme="dark"] .it-page .badge.priority-untriaged,
[data-bs-theme="dark"] .it-page .badge.ticket-status-pending_user,
[data-bs-theme="dark"] .it-page .badge.ticket-status-pending_vendor,
[data-bs-theme="dark"] .facilities-page .badge.priority-untriaged,
[data-bs-theme="dark"] .facilities-page .badge.status-on_hold,
[data-bs-theme="dark"] .soft-page .badge.priority-untriaged,
[data-bs-theme="dark"] .soft-page .badge.status-on_hold,
[data-bs-theme="dark"] .soft-page .badge.ticket-status-pending_user,
[data-bs-theme="dark"] .soft-page .badge.ticket-status-pending_vendor,
[data-bs-theme="dark"] .dash-list .badge.bg-secondary,
[data-bs-theme="dark"] .it-page .badge.bg-secondary,
[data-bs-theme="dark"] .facilities-page .badge.bg-secondary,
[data-bs-theme="dark"] .soft-page .badge.bg-secondary {
    background-color: rgba(140, 147, 160, 0.24) !important;
    color: #b6bcc6;
}

[data-bs-theme="dark"] .dash-list .badge.ticket-status-assigned,
[data-bs-theme="dark"] .it-page .badge.ticket-status-assigned,
[data-bs-theme="dark"] .soft-page .badge.ticket-status-assigned,
[data-bs-theme="dark"] .it-page .badge.bg-info,
[data-bs-theme="dark"] .facilities-page .badge.bg-info,
[data-bs-theme="dark"] .soft-page .badge.bg-info {
    background-color: rgba(11, 114, 133, 0.30) !important;
    color: #5fcfe0 !important;
}

[data-bs-theme="dark"] .dash-list .badge.ticket-status-closed,
[data-bs-theme="dark"] .it-page .badge.ticket-status-closed,
[data-bs-theme="dark"] .soft-page .badge.ticket-status-closed,
[data-bs-theme="dark"] .soft-page .badge.bg-dark {
    background-color: rgba(140, 147, 160, 0.28) !important;
    color: #cfd3da;
}

[data-bs-theme="dark"] .dash-list .badge.badge-unassigned,
[data-bs-theme="dark"] .facilities-page .badge.badge-unassigned,
[data-bs-theme="dark"] .soft-page .badge.badge-unassigned {
    background-color: rgba(194, 37, 92, 0.24);
    color: #f08cb5;
}

[data-bs-theme="dark"] .dash-list .badge.bg-light,
[data-bs-theme="dark"] .it-page .badge.bg-light,
[data-bs-theme="dark"] .facilities-page .badge.bg-light,
[data-bs-theme="dark"] .soft-page .badge.bg-light {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #c3c7d0 !important;
}

/* The .bg-light utility is also used as a panel surface (resolution-notes
   card, comment bubbles, file-drop zones, input addons). Bootstrap keeps it
   a fixed light gray in dark mode, so the inherited light body text reads as
   washed-out white-on-white. Re-map it to a recessed dark surface — but not
   for badges (handled above) which set their own fill. */
[data-bs-theme="dark"] .bg-light:not(.badge) {
    background-color: var(--tf-surface-2) !important;
    color: var(--tf-text-soft);
}

[data-bs-theme="dark"] .card.bg-light > .card-header {
    background-color: rgba(255, 255, 255, 0.03);
    border-bottom-color: var(--tf-border);
}

/* Unscoped .bg-light badges (e.g. the role chip in the indigo navbar) become a
   translucent chip so their text keeps contrast in dark mode. */
[data-bs-theme="dark"] .badge.bg-light {
    background-color: rgba(255, 255, 255, 0.14) !important;
}

/* ---- Dark-mode audit follow-ups ------------------------------------------
   Fixes for fixed-light utilities and per-template inline styles that don't
   pick up the theme on their own. */

/* .text-dark is a fixed-dark utility used on links/titles/icons — invisible on
   dark. Re-map to body text; badges (which set their own fill) are excluded. */
[data-bs-theme="dark"] .text-dark:not(.badge) { color: var(--tf-text) !important; }

/* bg-light badges that pin dark text (paperclip, due-date, log "Comment"): the
   chip is dark in dark mode, so the forced-dark text must flip light. */
[data-bs-theme="dark"] .badge.bg-light.text-dark { color: var(--tf-text-soft) !important; }

/* table-light headers otherwise stay a bright white band — darken them. */
[data-bs-theme="dark"] .table-light {
    --bs-table-bg: #2b2e35;
    --bs-table-color: var(--tf-text-soft);
    --bs-table-border-color: var(--tf-border);
}

/* it_ticket_detail.html ships its own inline timeline styles (#666 / #15135F);
   the date/border are handled by the .timeline rules above, this covers text. */
[data-bs-theme="dark"] .timeline-text { color: var(--tf-text-soft); }

/* User module-access chips (users.html inline pastels) -> translucent tints. */
[data-bs-theme="dark"] .mod-facilities { background-color: rgba(99, 102, 241, 0.18); color: #aab4ff; border-color: rgba(99, 102, 241, 0.30); }
[data-bs-theme="dark"] .mod-it         { background-color: rgba(16, 185, 129, 0.16); color: #5fd6a6; border-color: rgba(16, 185, 129, 0.28); }
[data-bs-theme="dark"] .mod-flight     { background-color: rgba(234, 88, 12, 0.16);  color: #ff9d5c; border-color: rgba(234, 88, 12, 0.28); }
[data-bs-theme="dark"] .mod-purchasing { background-color: rgba(168, 85, 247, 0.16); color: #cd9cf7; border-color: rgba(168, 85, 247, 0.28); }
[data-bs-theme="dark"] .mod-frontdesk  { background-color: rgba(6, 182, 212, 0.16);  color: #5fd3e6; border-color: rgba(6, 182, 212, 0.28); }

/* Calendar: the JS tooltip is a hardcoded white popup; FullCalendar's grid is
   themed via its --fc-* custom properties. */
[data-bs-theme="dark"] .calendar-tooltip {
    background: var(--tf-surface);
    border-color: var(--tf-border);
    color: var(--tf-text);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
[data-bs-theme="dark"] .calendar-tooltip .tooltip-title { border-bottom-color: var(--tf-border); }
[data-bs-theme="dark"] .calendar-tooltip .tooltip-label { color: var(--tf-text-muted); }
[data-bs-theme="dark"] .fc-day-today { background-color: rgba(132, 130, 236, 0.12) !important; }
[data-bs-theme="dark"] .fc {
    --fc-border-color: var(--tf-border);
    --fc-page-bg-color: transparent;
    --fc-neutral-bg-color: var(--tf-surface-2);
    --fc-today-bg-color: rgba(132, 130, 236, 0.12);
}

/* Flight-line compliance matrix (flight_line/dashboard.html inline styles —
   the page has no module wrapper, so target the table directly). */
[data-bs-theme="dark"] .compliance-table { border-color: var(--tf-border); }
[data-bs-theme="dark"] .compliance-table th,
[data-bs-theme="dark"] .compliance-table td {
    border-bottom-color: var(--tf-border);
    border-right-color: var(--tf-border);
}
[data-bs-theme="dark"] .compliance-table th.aircraft-col,
[data-bs-theme="dark"] .compliance-table td.aircraft-col {
    background: var(--tf-surface);
    border-right-color: var(--tf-border);
}
[data-bs-theme="dark"] .compliance-table th.service-divider,
[data-bs-theme="dark"] .compliance-table td.service-divider { border-right-color: var(--tf-border); }
[data-bs-theme="dark"] .compliance-table .service-header { background-color: var(--tf-surface-2); }
[data-bs-theme="dark"] .compliance-table .sub-header { color: var(--tf-text-muted); }
[data-bs-theme="dark"] .compliance-table .due-ok { color: #6cd98a; }
[data-bs-theme="dark"] .compliance-table .due-overdue { color: #ff8a8a; background: rgba(201, 42, 42, 0.22) !important; }
[data-bs-theme="dark"] .compliance-table .due-today { color: #f0b95e; background: rgba(240, 140, 0, 0.20) !important; }
[data-bs-theme="dark"] .compliance-table .check-btn { color: #9d9bf0; border-color: #6f6ce0; }
[data-bs-theme="dark"] .compliance-table .check-btn:hover { background-color: #6f6ce0; color: #fff; }

/* Drag-and-drop transient states (admin settings / purchasing config) — these
   flash a light fill mid-drag. */
[data-bs-theme="dark"] .sortable-ghost { background-color: rgba(255, 255, 255, 0.06) !important; }
[data-bs-theme="dark"] .sortable-chosen { background-color: var(--tf-surface-2); }

/* --- Quill rich-text editor (Front Desk reply box) in dark mode ---
   The snow theme draws near-black icon strokes/fills and light borders that
   disappear on dark surfaces; recolor them to the dark tokens. */
[data-bs-theme="dark"] .ql-toolbar.ql-snow,
[data-bs-theme="dark"] .ql-container.ql-snow { border-color: var(--tf-border); }
[data-bs-theme="dark"] .ql-toolbar.ql-snow { background: var(--tf-surface); }
[data-bs-theme="dark"] .ql-container.ql-snow { background: var(--tf-surface-2); }
[data-bs-theme="dark"] .ql-editor { color: var(--tf-text); }
[data-bs-theme="dark"] .ql-editor.ql-blank::before { color: var(--tf-text-muted); }

/* Toolbar icon glyphs (SVG stroke/fill) and picker labels */
[data-bs-theme="dark"] .ql-snow .ql-stroke { stroke: var(--tf-text-soft); }
[data-bs-theme="dark"] .ql-snow .ql-fill { fill: var(--tf-text-soft); }
[data-bs-theme="dark"] .ql-snow .ql-picker { color: var(--tf-text-soft); }

/* Hover / active states use the brand periwinkle */
[data-bs-theme="dark"] .ql-snow .ql-toolbar button:hover .ql-stroke,
[data-bs-theme="dark"] .ql-snow button.ql-active .ql-stroke { stroke: var(--bs-link-color); }
[data-bs-theme="dark"] .ql-snow .ql-toolbar button:hover .ql-fill,
[data-bs-theme="dark"] .ql-snow button.ql-active .ql-fill { fill: var(--bs-link-color); }
[data-bs-theme="dark"] .ql-snow .ql-toolbar button:hover,
[data-bs-theme="dark"] .ql-snow button.ql-active,
[data-bs-theme="dark"] .ql-snow .ql-picker-label:hover { color: var(--bs-link-color); }

/* Link-edit tooltip popover */
[data-bs-theme="dark"] .ql-snow .ql-tooltip {
    background: var(--tf-surface);
    border-color: var(--tf-border);
    color: var(--tf-text);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
[data-bs-theme="dark"] .ql-snow .ql-tooltip input[type="text"] {
    background: var(--tf-surface-2);
    border-color: var(--tf-border);
    color: var(--tf-text);
}
/* Picker dropdown (e.g. list options) */
[data-bs-theme="dark"] .ql-snow .ql-picker-options {
    background: var(--tf-surface);
    border-color: var(--tf-border);
}

/* ---- Front Desk rich-text editor (.fd-editor wrapper) ----
   Scoped so it never touches Quill editors elsewhere in the app. We keep Quill's
   native line model: Enter starts a new paragraph rendered tight (no margin), so
   consecutive Enters read as single-spaced lines and pressing Enter twice leaves
   a clear blank line — the familiar email-composer feel, with reliable Delete. */
.fd-editor .ql-toolbar.ql-snow {
    border-top-left-radius: .375rem;
    border-top-right-radius: .375rem;
    border-color: var(--bs-border-color);
    background: var(--bs-tertiary-bg);
}
.fd-editor .ql-container.ql-snow {
    border-bottom-left-radius: .375rem;
    border-bottom-right-radius: .375rem;
    border-color: var(--bs-border-color);
    font-family: inherit;
    /* Let agents drag the bottom edge to fit longer messages. The inline height
       on the editor div is just the starting point; min-height keeps it usable. */
    resize: vertical;
    overflow-y: auto;
    min-height: 6rem;
}
.fd-editor .ql-editor {
    font-size: .95rem;
    line-height: 1.55;
}
.fd-editor .ql-editor p { margin: 0; }
.fd-editor .ql-editor h2 { font-size: 1.3rem; margin: .2rem 0 .5rem; }
.fd-editor .ql-editor h3 { font-size: 1.12rem; margin: .2rem 0 .5rem; }
.fd-editor .ql-editor ul,
.fd-editor .ql-editor ol { margin: 0 0 .7rem; }
.fd-editor .ql-editor blockquote {
    border-left: 3px solid var(--bs-border-color);
    padding-left: .8rem;
    margin: .4rem 0 .7rem;
    color: var(--bs-secondary-color);
}
.fd-editor .ql-editor.ql-blank::before {
    font-style: normal;
    color: var(--bs-secondary-color);
}
/* Keep the popover toolbar tidy on smaller composer widths. */
.fd-editor .ql-snow .ql-toolbar,
.fd-editor .ql-toolbar.ql-snow { padding: .35rem .5rem; }

/* ---- Notifications dropdown (navbar bell) ----
   The bell dropdown lives inside .navbar-dark, which paints all navbar dropdowns
   navy. That clashes with the list items inside, so we override it into a clean,
   theme-aware popover: a surface that matches the page (white in light, dark in
   dark), readable text, a subtle tint + accent bar on unread rows. ID selectors
   keep specificity above the navbar-dark rules. */
#notifMenu.dropdown-menu {
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    color: var(--bs-body-color);
    padding: 0;
    border-radius: .6rem;
    overflow: hidden;
}
#notifMenu strong { color: var(--bs-body-color); }
#notifMenu .dropdown-divider { border-top-color: var(--bs-border-color); opacity: 1; margin: 0; }
#notifMenu #notifMarkAll { color: var(--bs-primary); }
[data-bs-theme="dark"] #notifMenu #notifMarkAll { color: #8fa8cf; }
#notifMenu #notifMarkAll:hover { text-decoration: underline; }
#notifMenu .notif-empty { color: var(--bs-secondary-color); }
#notifMenu .notif-empty i { font-size: 1.4rem; opacity: .5; }

#notifMenu .notif-item {
    display: block;
    padding: .6rem .9rem;
    text-decoration: none;
    color: var(--bs-body-color);
    border-bottom: 1px solid var(--bs-border-color);
    transition: background-color .12s ease;
}
#notifMenu .notif-item:last-child { border-bottom: 0; }
#notifMenu .notif-item:hover,
#notifMenu .notif-item:focus { background-color: var(--bs-tertiary-bg); color: var(--bs-body-color); }
#notifMenu .notif-item.unread {
    background-color: #eef1f8;
    box-shadow: inset 3px 0 0 var(--bs-primary);
}
[data-bs-theme="dark"] #notifMenu .notif-item.unread {
    background-color: rgba(143, 168, 207, .12);
    box-shadow: inset 3px 0 0 #8fa8cf;
}
#notifMenu .notif-item.unread:hover { background-color: #e4e9f4; }
[data-bs-theme="dark"] #notifMenu .notif-item.unread:hover { background-color: rgba(143, 168, 207, .18); }

#notifMenu .notif-row { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; }
#notifMenu .notif-content { min-width: 0; }
#notifMenu .notif-title {
    font-size: .85rem; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#notifMenu .notif-item.unread .notif-title { font-weight: 600; }
#notifMenu .notif-body {
    font-size: .78rem; color: var(--bs-secondary-color); margin-top: .1rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#notifMenu .notif-time { font-size: .72rem; color: var(--bs-secondary-color); flex-shrink: 0; white-space: nowrap; }

/* ---- Priority emphasis: action items lead with an accent dot + slightly
   stronger title; ambient activity sits muted below. Consistent with the soft
   design language — emphasis is a dot + weight, not a loud color block. ---- */
#notifMenu .notif-item.action .notif-title::before {
    content: ""; display: inline-block; width: .42rem; height: .42rem;
    border-radius: 50%; background: var(--bs-primary);
    margin-right: .4rem; vertical-align: middle; flex-shrink: 0;
}
#notifMenu .notif-item.action .notif-title { font-weight: 600; }
#notifMenu .notif-item.activity .notif-title { color: var(--bs-secondary-color); }
#notifMenu .notif-item.activity.unread .notif-title { color: var(--bs-body-color); }

/* Grouped older updates: indented, lighter, hidden until expanded. */
#notifMenu .notif-group { border-bottom: 1px solid var(--bs-border-color); }
#notifMenu .notif-group:last-child { border-bottom: 0; }
#notifMenu .notif-group .notif-item { border-bottom: 0; }
#notifMenu .notif-item.notif-sub { padding-left: 1.6rem; background-color: var(--bs-tertiary-bg); }
#notifMenu .notif-item.notif-sub .notif-title { font-size: .8rem; }
#notifMenu .notif-more {
    display: block; width: 100%; text-align: left;
    padding: .3rem .9rem .4rem 1.6rem;
    background: none; border: 0;
    font-size: .74rem; color: var(--bs-secondary-color);
}
#notifMenu .notif-more:hover { color: var(--bs-primary); background-color: var(--bs-tertiary-bg); }

/* Pinned pending-review row: a persistent, slightly tinted call-to-action that
   sits above everything and isn't dismissable from the bell. */
#notifMenu .notif-item.notif-pinned {
    background-color: var(--bs-tertiary-bg);
    box-shadow: inset 3px 0 0 var(--bs-primary);
}
#notifMenu .notif-item.notif-pinned .notif-time i { color: var(--bs-primary); }

/* ---- Front Desk module accent (slate blue) ----
   Centralized so every Front Desk surface (inbox, conversation, settings,
   compose, templates, Scans, home cards) shares one accent and adapts to dark
   mode from a single place. In dark mode the accent lightens for legibility and
   the soft tint becomes a translucent wash. */
.fd-accent { --accent: #3b5b8f; --accent-soft: #e8eef5; }
[data-bs-theme="dark"] .fd-accent { --accent: #8fa8cf; --accent-soft: rgba(127, 155, 196, .22); }

/* ============================================================================
   Styled dropdowns (TomSelect) + date/time pickers (Flatpickr)
   Ported from DROPDOWN_DATEPICKER_PORTING_GUIDE.md. Themed against Bootstrap 5
   CSS variables; loads after the library CSS so these win.
   ============================================================================ */

/* ── Flatpickr date picker theming ── */
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange {
    background: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}
.flatpickr-calendar {
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    border: none;
}
.flatpickr-day.today {
    background-color: #e7f1ff !important;
    border-color: #e7f1ff !important;
    color: #000 !important;
}
.flatpickr-day.today.selected {
    background: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: white !important;
}
.flatpickr-day:hover {
    background: #e9ecef !important;
    border-color: #e9ecef !important;
}
.flatpickr-day.selected:hover {
    background: #0b5ed7 !important;
    border-color: #0b5ed7 !important;
}
/* Compact flatpickr alt-inputs to match a small form-control */
.flatpickr-input.form-control-sm + .form-control {
    font-size: 0.875rem;
    padding: 0.25rem 0.5rem;
    height: calc(1.5em + 0.5rem + 2px);
}

/* ── TomSelect theming ── */
/* Selected tag chips in MULTI selects use the primary color */
.ts-wrapper .ts-control .item {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: white !important;
}
.ts-wrapper.focus .ts-control {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}
/* Shared base styling for single selects */
.ts-wrapper.single .ts-control {
    border: 1px solid var(--bs-border-color);
    padding: 0 0.5rem;
    min-height: 31px;
    font-size: 0.85rem;
}
.ts-dropdown {
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.1);
    margin-top: 2px;
    font-size: 0.85rem;
    /* Sit above table rows, sticky bars, modals (1055), and the app's overlays. */
    z-index: 2000;
}
.ts-dropdown .option { padding: 0.375rem 0.5rem; }
.ts-dropdown .option.active { background: var(--bs-secondary-bg); color: inherit; }
/* In a SINGLE select the selected value should look like plain text, not a chip */
.ts-wrapper.single .ts-control .item { background: none !important; color: inherit !important; }
/* Plain (non-search) dropdowns show a pointer; a search control has an <input> child
   and keeps the text cursor. !important so this wins even if default tom-select CSS
   loads after this file. */
.ts-wrapper.single .ts-control:not(:has(> input)) { cursor: pointer !important; }
.ts-wrapper.single .ts-control:not(:has(> input)) > * { cursor: pointer !important; }
/* Inline auto-width dropdowns (<select class="form-select w-auto">) shrink to
   their text and crowd the caret — give them a minimum width. */
.ts-wrapper.form-select.w-auto { min-width: 9rem; }

/* ── Flatpickr dark mode ── */
[data-bs-theme="dark"] .flatpickr-calendar {
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
}
[data-bs-theme="dark"] .flatpickr-calendar.arrowTop:before,
[data-bs-theme="dark"] .flatpickr-calendar.arrowTop:after { border-bottom-color: var(--bs-secondary-bg); }
[data-bs-theme="dark"] .flatpickr-calendar.arrowBottom:before,
[data-bs-theme="dark"] .flatpickr-calendar.arrowBottom:after { border-top-color: var(--bs-secondary-bg); }
[data-bs-theme="dark"] .flatpickr-months .flatpickr-month,
[data-bs-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months,
[data-bs-theme="dark"] .flatpickr-weekday {
    color: var(--bs-body-color);
    fill: var(--bs-body-color);
}
[data-bs-theme="dark"] .flatpickr-months .flatpickr-prev-month svg,
[data-bs-theme="dark"] .flatpickr-months .flatpickr-next-month svg { fill: var(--bs-body-color); }
[data-bs-theme="dark"] .flatpickr-day { color: var(--bs-body-color); }
[data-bs-theme="dark"] .flatpickr-day.flatpickr-disabled,
[data-bs-theme="dark"] .flatpickr-day.prevMonthDay,
[data-bs-theme="dark"] .flatpickr-day.nextMonthDay { color: var(--bs-secondary-color); }
[data-bs-theme="dark"] .flatpickr-day:hover {
    background: var(--bs-tertiary-bg) !important;
    border-color: var(--bs-tertiary-bg) !important;
}
[data-bs-theme="dark"] .flatpickr-day.today {
    background-color: rgba(var(--bs-primary-rgb), 0.4) !important;
    border-color: transparent !important;
    color: var(--bs-emphasis-color) !important;
}
[data-bs-theme="dark"] .numInputWrapper span { border-color: var(--bs-border-color); }
[data-bs-theme="dark"] .flatpickr-time input,
[data-bs-theme="dark"] .flatpickr-time .flatpickr-am-pm { color: var(--bs-body-color); }
[data-bs-theme="dark"] .flatpickr-time input:hover,
[data-bs-theme="dark"] .flatpickr-time .flatpickr-am-pm:hover { background: var(--bs-tertiary-bg); }

/* ── TomSelect dark mode (bootstrap5 theme ships light surfaces) ── */
[data-bs-theme="dark"] .ts-dropdown,
[data-bs-theme="dark"] .ts-control,
[data-bs-theme="dark"] .ts-wrapper.single .ts-control {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .ts-dropdown { box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.5); }
[data-bs-theme="dark"] .ts-dropdown .option.active,
[data-bs-theme="dark"] .ts-dropdown .active {
    background: var(--bs-tertiary-bg);
    color: var(--bs-emphasis-color);
}
[data-bs-theme="dark"] .ts-control input,
[data-bs-theme="dark"] .ts-control input::placeholder { color: var(--bs-body-color); }