/* CSS Variables - Light Theme (Default) */
:root {
    --bg-primary: #f8fafc;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f1f5f9;
    --text-primary: #1e293b;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --accent-primary: #51bbe8;
    --accent-primary-hover: #3a9fcc;
    --accent-primary-light: rgba(81, 187, 232, 0.15);
    --accent-blue: #51bbe8;
    --accent-green: #4ade80;
    --accent-yellow: #facc15;
    --accent-red: #f87171;
    --accent-purple: #c084fc;
    --border-color: #e2e8f0;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    /* Slightly softer corners platform-wide, matching the new login design.
     * --radius-sm is for chips/badges that should stay tight; --radius is
     * the default (inputs/buttons/cards); --radius-lg is for big
     * containers (modals, hero cards). */
    --radius-sm: 8px;
    --radius: 11px;
    --radius-lg: 10px;
    /* Hanken Grotesk shipped from Google Fonts in index.html. Falls back
     * to the OS sans serif if the network is slow / blocked. */
    --ff-body: 'Hanken Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --sidebar-width: 260px;
    --sidebar-width-collapsed: 70px;
    --header-height: 64px;
}

/* Dark Theme */
:root.dark-theme,
html.dark-theme {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --border-color: #334155;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}

/* =====================================================================
 * Login page — two-column hero + form design.
 *
 * #loginModal is a full-viewport container (not the usual centered .modal
 * card). It's shown by default and `app.js` adds .hidden once auth
 * succeeds. All classes inside the modal are namespaced `login-*` so
 * they don't collide with the rest of the app's CSS.
 *
 * The design is always light themed: the user's theme preference lives
 * on the API and isn't available pre-auth, and the brand photo + white
 * form panel pair reads better than a dark version.
 * ===================================================================== */
#loginModal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: #f4f7fa;
    color: #15232e;
    font-family: 'Hanken Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow: auto;
}
#loginModal.hidden { display: none !important; }

.login-shell {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    min-height: 100vh;
}

/* ---------- HERO (left) ---------- */
.login-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: #1d2c38;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 54px 56px;
}
.login-hero__photo {
    position: absolute;
    inset: 0;
    background-color: #243441;
    background-image:
        linear-gradient(135deg, rgba(43, 62, 77, 0.55) 0%, rgba(28, 42, 53, 0.4) 55%, rgba(22, 34, 44, 0.55) 100%),
        url('../images/NexusFleet_bckg1_large.jpg');
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
}
.login-hero__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(20, 31, 40, 0.55) 0%, rgba(20, 31, 40, 0) 26%),
        linear-gradient(0deg, rgba(15, 24, 31, 0.92) 0%, rgba(15, 24, 31, 0.35) 34%, rgba(15, 24, 31, 0) 60%);
}
.login-hero__top,
.login-hero__bottom { position: relative; z-index: 2; }

.login-hero__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    font-size: 19px;
    letter-spacing: 0.01em;
}
.login-hero__mark {
    width: 30px;
    height: 30px;
    flex: none;
    object-fit: contain;
}

.login-hero__tagline {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-primary);
    margin-bottom: 18px;
}
.login-hero__headline {
    font-size: 42px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.015em;
    max-width: 15ch;
}
.login-hero__sub {
    margin-top: 18px;
    font-size: 16px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.72);
    max-width: 42ch;
}

/* ---------- FORM (right) ---------- */
.login-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
    position: relative;
    background: #ffffff;
}

.login-form-wrap {
    width: 100%;
    max-width: 392px;
    display: flex;
    flex-direction: column;
}

.login-logo {
    height: 38px;
    width: auto;
    object-fit: contain;
    object-position: left center;
    align-self: flex-start;
    margin-bottom: 46px;
}

.login-welcome {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #15232e;
    margin: 0;
}
.login-welcome-sub {
    margin: 9px 0 0;
    font-size: 15.5px;
    color: #495a67;
    line-height: 1.5;
}

#loginForm { margin-top: 32px; }

.login-field { margin-bottom: 18px; }
.login-field__label {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: #15232e;
    margin-bottom: 8px;
}

.login-input-shell {
    position: relative;
    display: flex;
    align-items: center;
}
.login-input-shell__icon {
    position: absolute;
    left: 14px;
    width: 18px;
    height: 18px;
    color: #76858f;
    pointer-events: none;
    display: grid;
    place-items: center;
}
.login-input-shell__icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

#loginModal input[type="text"],
#loginModal input[type="password"] {
    width: 100%;
    height: 48px;
    border: 1px solid #d3dbe2;
    border-radius: 11px;
    background: #ffffff;
    padding: 0 14px 0 42px;
    font-family: inherit;
    font-size: 15px;
    color: #15232e;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#loginModal input::placeholder { color: #9aa7b1; }
#loginModal input:hover { border-color: #c2ccd5; }
#loginModal input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 4px rgba(81, 187, 232, 0.18);
}

.login-pw-toggle {
    position: absolute;
    right: 8px;
    height: 32px;
    width: 32px;
    border: none;
    background: transparent;
    color: #76858f;
    cursor: pointer;
    border-radius: 8px;
    display: grid;
    place-items: center;
    transition: color 0.15s ease, background 0.15s ease;
}
.login-pw-toggle:hover { color: #495a67; background: #f1f4f7; }
.login-pw-toggle svg { width: 19px; height: 19px; display: block; }

.login-field__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 22px;
}

.login-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    font-size: 13.5px;
    color: #495a67;
    white-space: nowrap;
    position: relative;
}
.login-remember input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.login-remember__box {
    width: 17px;
    height: 17px;
    border: 1.5px solid #d3dbe2;
    border-radius: 5px;
    display: grid;
    place-items: center;
    transition: all 0.15s ease;
    flex: none;
}
.login-remember__box svg {
    width: 11px;
    height: 11px;
    color: #fff;
    opacity: 0;
    transform: scale(0.6);
    transition: all 0.15s ease;
}
.login-remember input:checked + .login-remember__box {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}
.login-remember input:checked + .login-remember__box svg {
    opacity: 1;
    transform: scale(1);
}
.login-remember input:focus-visible + .login-remember__box {
    box-shadow: 0 0 0 4px rgba(81, 187, 232, 0.18);
}

.login-link {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--accent-primary-hover);
    text-decoration: none;
    transition: color 0.15s ease;
}
.login-link:hover {
    color: #266f94;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.login-btn {
    width: 100%;
    height: 50px;
    margin-top: 2px;
    border: none;
    border-radius: var(--radius);
    background: var(--accent-primary);
    color: #fff;
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(58, 142, 175, 0.22), 0 8px 20px rgba(81, 187, 232, 0.28);
    transition: background 0.15s ease, transform 0.06s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}
.login-btn:hover { background: var(--accent-primary-hover); }
.login-btn:active { transform: translateY(1px); background: #266f94; }
.login-btn:focus-visible {
    outline: none;
    box-shadow: 0 1px 2px rgba(58, 142, 175, 0.22), 0 8px 20px rgba(81, 187, 232, 0.28), 0 0 0 4px rgba(81, 187, 232, 0.18);
}
.login-btn__arrow { transition: transform 0.18s ease; }
.login-btn:hover .login-btn__arrow { transform: translateX(3px); }

.login-error {
    color: #d24a4a;
    font-size: 13.5px;
    text-align: center;
    margin-top: 14px;
    min-height: 1.2em;
}
.login-error a { color: inherit; text-decoration: underline; }

.login-help {
    margin-top: 28px;
    text-align: center;
    font-size: 13.5px;
    color: #76858f;
}
.login-help a {
    color: var(--accent-primary-hover);
    font-weight: 600;
    text-decoration: none;
}
.login-help a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.login-foot {
    position: absolute;
    bottom: 26px;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    font-size: 12.5px;
    color: #76858f;
}
.login-foot__secure {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.login-foot__secure svg {
    width: 13px;
    height: 13px;
    color: #5fa97f;
}
.login-foot__sep { color: #d3dbe2; }

/* ---------- responsive ---------- */
@media (max-width: 880px) {
    .login-shell { grid-template-columns: 1fr; }
    .login-hero { display: none; }
    .login-panel { min-height: 100vh; }
}
@media (max-width: 440px) {
    .login-panel { padding: 28px 22px 70px; }
}

/* Reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--ff-body);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.hidden {
    display: none !important;
}

/* Modal */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2100;
}

.modal-content {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: 0;
    max-width: 500px;
    width: 90%;
    box-shadow: var(--shadow-lg);
    max-height: 95vh;
    display: flex;
    flex-direction: column;
}

.modal-content.modal-lg {
    max-width: 720px;
}

.modal-content.modal-xl {
    max-width: 900px;
    width: 95%;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

.modal-content.modal-xl .modal-body {
    max-height: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.modal-content.modal-xl .report-table-container {
    flex: 1;
    min-height: 0;
    max-height: none;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h2 {
    font-size: 1.25rem;
    font-weight: 600;
}

.modal-header .close-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius);
    transition: all 0.2s;
}

.modal-header .close-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-row .form-group {
    margin-bottom: 0;
}

/* Modal form styling */
.modal-content form {
    padding: 1.5rem;
    padding-bottom: 0;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.modal-header,
.modal-content form .modal-footer {
    flex-shrink: 0;
}

.modal-content form .modal-footer {
    margin: 1.5rem -1.5rem 0;
    padding: 1rem 1.5rem;
}

.modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius);
    transition: all 0.2s;
}

.modal-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Form select styling */
.form-group select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 1rem;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
}

.form-group select:focus {
    outline: none;
    border-color: var(--accent-blue);
}

.form-group textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 1rem;
    font-family: inherit;
    resize: vertical;
}

.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-blue);
}

.login-modal {
    padding: 2.5rem;
    max-width: 420px;
}

.login-modal .login-header {
    text-align: center;
    margin-bottom: 2rem;
}

.login-header .login-logo {
    max-width: 280px;
    height: auto;
    margin: 0 auto 1rem;
    display: block;
}

.login-header i {
    font-size: 3rem;
    color: var(--accent-primary);
    margin-bottom: 1rem;
}

.login-header h1 {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

.login-header p {
    color: var(--text-secondary);
}

.form-group {
    margin-bottom: 1.25rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.005em;
}

.form-group input {
    width: 100%;
    min-height: 48px;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.9375rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-group input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 4px rgba(81, 187, 232, 0.18);
}

/* Inline explanatory note inside a form (e.g. why a field is disabled). */
.form-hint {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: -0.5rem 0 1.25rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.45;
}

.form-hint.hidden { display: none; }

.form-hint i {
    margin-top: 0.15rem;
    color: var(--accent-primary);
}

/* `.form-group input` above styles text fields — 48px tall, bordered, filled.
   A checkbox or radio inherited all of that and rendered as a tall rectangle
   with a tick or dot lost inside it. Resetting width and padding was not
   enough: min-height, border and background have to go too, and appearance
   must be left to the platform so it draws a real square/circle. */
.form-group input[type="checkbox"],
.form-group input[type="radio"] {
    width: auto;
    min-height: 0;
    padding: 0;
    margin-right: 0.4rem;
    border: none;
    background: none;
    box-shadow: none;
    appearance: auto;
    -webkit-appearance: auto;
    accent-color: var(--accent-primary);
    vertical-align: middle;
}

.error-message {
    color: var(--accent-red);
    margin-top: 1rem;
    text-align: center;
    font-size: 0.875rem;
}

/* Input + adjacent action button (e.g., Odometer field with Update button) */
.input-with-action {
    display: flex;
    gap: 6px;
    align-items: stretch;
}

.input-with-action > .form-control {
    flex: 1 1 auto;
    min-width: 0;
}

.input-with-action > .btn {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 0 0.6rem;
    font-size: 0.85rem;
}

/* Required field indicator — auto-adds asterisk to labels of required fields */
.form-group:has(> input[required], > select[required], > textarea[required]) > label::after,
label.required::after {
    content: ' *';
    color: var(--accent-red);
    font-weight: 700;
    margin-left: 2px;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 42px;
    padding: 0.625rem 1.25rem;
    border: none;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.06s ease, box-shadow 0.15s ease;
}

.btn-primary {
    background: var(--accent-primary);
    color: white;
    /* Subtle lift, derived from --accent-primary (#51bbe8). Mirrors the
     * login Sign-In button so primary actions read the same everywhere. */
    box-shadow: 0 1px 2px rgba(58, 142, 175, 0.22), 0 6px 16px rgba(81, 187, 232, 0.25);
}

.btn-primary:hover {
    background: var(--accent-primary-hover);
}

.btn-primary:active {
    transform: translateY(1px);
}

.btn-block {
    width: 100%;
    justify-content: center;
}

.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
}

.btn-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.btn-icon:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* App Layout */
.app {
    display: flex;
    height: 100vh;
}

/* Sidebar */
.sidebar {
    width: var(--sidebar-width);
    background: var(--bg-secondary);
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-color);
    transition: width 0.3s ease;
}

.sidebar.collapsed {
    width: var(--sidebar-width-collapsed);
}

.sidebar-header {
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0 1rem;
    border-bottom: 1px solid var(--border-color);
    overflow: hidden;
}

.sidebar-header .logo-full {
    height: 36px;
    width: auto;
}

.sidebar-header .logo-icon {
    height: 40px;
    width: 40px;
}

/* Exactly one of the four header logos shows. The four selectors below are
 * mutually exclusive on two axes — sidebar state and theme — so none of them
 * needs !important to beat the others. */
.sidebar-header .brand-logo { display: none; }

html:not(.dark-theme) .sidebar:not(.collapsed) .sidebar-header .logo-full.logo-light,
html.dark-theme .sidebar:not(.collapsed) .sidebar-header .logo-full.logo-dark,
html:not(.dark-theme) .sidebar.collapsed .sidebar-header .logo-icon.logo-light,
html.dark-theme .sidebar.collapsed .sidebar-header .logo-icon.logo-dark {
    display: block;
}

.sidebar.collapsed .sidebar-header {
    justify-content: center;
    padding: 0;
}

.sidebar-header i {
    font-size: 1.5rem;
    color: var(--accent-primary);
}

.sidebar-header span {
    font-size: 1.25rem;
    font-weight: 600;
}

.sidebar.collapsed .sidebar-header span {
    display: none;
}

.sidebar-nav {
    flex: 1;
    padding: 1rem 0.75rem;
    overflow-y: auto;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--radius);
    margin-bottom: 0.25rem;
    transition: all 0.2s;
}

.nav-item:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.nav-item.active {
    background: var(--accent-primary);
    color: white;
}

/* Collapsed sidebar nav styles */
.sidebar.collapsed .sidebar-nav {
    padding: 1rem 0.5rem;
}

.sidebar.collapsed .nav-item {
    justify-content: center;
    padding: 0.75rem;
}

.sidebar.collapsed .nav-item span {
    display: none;
}

.sidebar.collapsed .nav-item i {
    font-size: 1.25rem;
}

.sidebar.collapsed .nav-item .badge {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    font-size: 0.625rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar.collapsed .nav-divider {
    margin: 0.5rem 0;
}

.nav-item i {
    width: 20px;
    text-align: center;
}

.badge {
    margin-left: auto;
    padding: 0.125rem 0.5rem;
    background: var(--accent-red);
    color: white;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
}

.sidebar-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sidebar.collapsed .sidebar-footer {
    padding: 0.75rem;
    flex-direction: column;
    gap: 0.5rem;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-secondary);
}

.user-info i {
    font-size: 1.5rem;
}

.sidebar.collapsed .user-info span {
    display: none;
}

.sidebar.collapsed .user-info {
    justify-content: center;
}

/* Main Content */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header */
.header {
    height: var(--header-height);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-left h1 {
    font-size: 1.25rem;
    font-weight: 600;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Pages */
.page {
    display: none;
    flex: 1;
    padding: 1.5rem;
    overflow-y: auto;
}

.page.active {
    display: block;
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.page-header h2 {
    font-size: 1.5rem;
}

.page-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: var(--shadow);
}

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

.stat-icon.blue { background: rgba(81, 187, 232, 0.2); color: var(--accent-blue); }
.stat-icon.green { background: rgba(74, 222, 128, 0.2); color: var(--accent-green); }
.stat-icon.yellow { background: rgba(250, 204, 21, 0.2); color: var(--accent-yellow); }
.stat-icon.red { background: rgba(248, 113, 113, 0.2); color: var(--accent-red); }

.stat-info h3 {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}

.stat-info p {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Dashboard Grid */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 1.5rem;
    height: calc(100vh - var(--header-height) - 180px);
}

/* Cards */
.card {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
}

.card-header h2 {
    font-size: 1rem;
    font-weight: 600;
}

.card-actions {
    display: flex;
    gap: 0.5rem;
}

.view-all {
    color: var(--accent-blue);
    text-decoration: none;
    font-size: 0.875rem;
}

.view-all:hover {
    text-decoration: underline;
}

/* Map */
.map-container .card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

#map {
    flex: 1;
    min-height: 400px;
}

.full-map {
    height: 100%;
    min-height: 500px;
}

/* Bootstrap overlay shown between login success and the first paint of
   dashboard data. Sits above the app and the still-hidden login modal so
   the user sees clear progress instead of a blank screen. */
.app-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.app-loading-overlay.hidden { display: none; }
.app-loading-card {
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #1f2937);
    padding: 24px 32px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    min-width: 260px;
}
.app-loading-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border-color, #d1d5db);
    border-top-color: var(--primary, #2563eb);
    border-radius: 50%;
    animation: app-loading-spin 0.9s linear infinite;
}
@keyframes app-loading-spin { to { transform: rotate(360deg); } }
.app-loading-title { font-size: 15px; font-weight: 600; }
.app-loading-sub { font-size: 12px; opacity: 0.7; text-align: center; max-width: 320px; }

/* Vehicle List */
.side-panels {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.vehicle-list-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    max-height: 50%;
}

.alerts-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    max-height: 50%;
}

.vehicle-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}

.vehicle-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.2s;
}

.vehicle-item:hover {
    background: var(--bg-tertiary);
}

.vehicle-item.selected {
    background: rgba(81, 187, 232, 0.2);
    border: 1px solid var(--accent-blue);
}

.vehicle-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.vehicle-icon.moving { background: rgba(74, 222, 128, 0.2); color: var(--accent-green); }
.vehicle-icon.idle { background: rgba(250, 204, 21, 0.2); color: var(--accent-yellow); }
.vehicle-icon.stopped { background: rgba(248, 113, 113, 0.2); color: var(--accent-red); }
.vehicle-icon.offline { background: rgba(100, 116, 139, 0.2); color: var(--text-muted); }

.vehicle-info {
    flex: 1;
    min-width: 0;
}

.vehicle-info h4 {
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vehicle-info p {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Second line under make/model: who's driving this vehicle right now. */
.vehicle-info .vehicle-driver {
    margin-top: 2px;
    font-size: 0.72rem;
    color: var(--text-tertiary, var(--text-secondary));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 5px;
}
.vehicle-info .vehicle-driver i {
    font-size: 0.65rem;
    opacity: 0.7;
}
.vehicle-driver-empty {
    color: var(--text-tertiary, var(--text-secondary));
    opacity: 0.6;
    font-style: italic;
}

/* Search box above the tracking sidebar's vehicle list. */
.vehicle-list-search {
    position: relative;
    padding: 8px 10px 6px;
    border-bottom: 1px solid var(--border);
}
.vehicle-list-search > i.fa-search {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary, var(--text-secondary));
    font-size: 12px;
    pointer-events: none;
}
.vehicle-list-search-input {
    width: 100%;
    padding: 7px 30px 7px 30px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.3;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.vehicle-list-search-input:focus {
    outline: none;
    border-color: var(--primary, #2563eb);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18);
}
.vehicle-list-search-input::placeholder {
    color: var(--text-tertiary, var(--text-secondary));
    opacity: 0.7;
}
.vehicle-list-search-clear {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--text-tertiary, var(--text-secondary));
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 3px;
    font-size: 11px;
}
.vehicle-list-search-clear:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

/* ===== Per-vehicle kebab menu + contextual sidebar view ===== */

/* Kebab (three-dot) button on each vehicle item — sits to the right of the
   existing pin button. Inherits the same icon-button styling so the row stays
   visually consistent. */
.vehicle-kebab-btn {
    background: transparent;
    border: none;
    color: var(--text-tertiary, var(--text-secondary));
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 14px;
    margin-left: 2px;
    transition: background 0.12s ease, color 0.12s ease;
}
.vehicle-kebab-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
}

/* Position-fixed popup menu — opens beneath the kebab button. Single
   instance reused across rows. */
.vehicle-action-menu {
    position: fixed;
    z-index: 2000;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 200px;
    max-width: 280px;
}
.vehicle-action-menu.hidden { display: none; }
.vehicle-action-menu button[data-action] {
    background: transparent;
    border: none;
    text-align: left;
    color: var(--text-primary);
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.1s ease, color 0.1s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vehicle-action-menu button[data-action]:hover {
    background: var(--primary, #2563eb);
    color: #fff;
}
.vehicle-action-menu button[data-action] i {
    width: 14px;
    text-align: center;
    font-size: 12px;
    opacity: 0.8;
}
.vehicle-action-menu-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}

/* Sidebar contextual view (history list or alerts list). Replaces the
   vehicle-list-view when a kebab action is picked. */
.vehicle-list-view,
.vehicle-context-view {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}
.vehicle-list-view.hidden,
.vehicle-context-view.hidden { display: none; }

.vehicle-context-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
}
.vehicle-context-back {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: 5px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.12s ease;
}
.vehicle-context-back:hover {
    background: rgba(255, 255, 255, 0.05);
}
.vehicle-context-title {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.vehicle-context-title span {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vehicle-context-title small {
    font-size: 11px;
    color: var(--text-tertiary, var(--text-secondary));
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vehicle-context-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

/* Alert list — one row per alert, severity-colour dot on the left. */
.alert-context-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.alert-context-item {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-left: 3px solid var(--text-tertiary, var(--text-secondary));
    border-radius: 6px;
    padding: 8px 10px;
    cursor: pointer;
    transition: background 0.12s ease;
}
.alert-context-item:hover { background: rgba(255, 255, 255, 0.04); }
.alert-context-item.severity-critical { border-left-color: #dc2626; }
.alert-context-item.severity-warning  { border-left-color: #f59e0b; }
.alert-context-item.severity-info     { border-left-color: #3b82f6; }
.alert-context-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-primary);
}
.alert-context-row strong { font-weight: 600; }
.alert-context-time {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-tertiary, var(--text-secondary));
    white-space: nowrap;
}
.alert-sev-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--text-tertiary, var(--text-secondary));
}
.alert-sev-dot.severity-critical { background: #dc2626; }
.alert-sev-dot.severity-warning  { background: #f59e0b; }
.alert-sev-dot.severity-info     { background: #3b82f6; }
.alert-context-msg {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.35;
}

/* Empty-state shown when the search filter has zero matches. */
.vehicle-list-empty {
    padding: 28px 16px;
    text-align: center;
    color: var(--text-tertiary, var(--text-secondary));
    font-size: 13px;
}
.vehicle-list-empty i {
    display: block;
    font-size: 18px;
    margin-bottom: 8px;
    opacity: 0.5;
}

.vehicle-speed {
    font-size: 0.875rem;
    font-weight: 600;
}

.vehicle-speed.moving { color: var(--accent-green); }

/* Vehicle Pin/Follow Button */
.vehicle-pin-btn {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    transition: all 0.2s;
    flex-shrink: 0;
    opacity: 0.5;
}

.vehicle-item:hover .vehicle-pin-btn {
    opacity: 1;
}

.vehicle-pin-btn:hover {
    background: rgba(81, 187, 232, 0.15);
    color: var(--accent-blue);
    opacity: 1;
}

.vehicle-pin-btn.pinned {
    background: rgba(81, 187, 232, 0.2);
    color: var(--accent-blue);
    opacity: 1;
    animation: pinPulse 2s ease-in-out infinite;
}

@keyframes pinPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(81, 187, 232, 0.3); }
    50% { box-shadow: 0 0 0 4px rgba(81, 187, 232, 0); }
}

/* Alerts List */
.alerts-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}

.alert-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s ease;
}

.alert-item:last-child { border-bottom: none; }
.alert-item:hover { background: var(--bg-tertiary); }

.alert-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.alert-icon.critical { background: rgba(248, 113, 113, 0.2); color: var(--accent-red); }
.alert-icon.warning { background: rgba(250, 204, 21, 0.2); color: var(--accent-yellow); }
.alert-icon.info { background: rgba(81, 187, 232, 0.2); color: var(--accent-blue); }

.alert-content {
    flex: 1;
    min-width: 0;
}

.alert-content h4 {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.alert-content p {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.alert-time {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Filter Select */
.filter-select {
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 0.875rem;
    cursor: pointer;
}

/* Data Table */
.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.data-table th {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.data-table td {
    font-size: 0.875rem;
}

.data-table tbody tr:hover {
    background: var(--bg-tertiary);
}

/* ===== TableEnhancer (sort / search / paginate) ===== */
.te-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.75rem 0.25rem;
}
.te-toolbar-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-left: auto;
}
.te-search {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 220px;
    flex: 0 1 320px;
}
.te-search > i {
    position: absolute;
    left: 0.75rem;
    color: var(--text-muted);
    font-size: 0.8rem;
    pointer-events: none;
}
.te-search-input {
    width: 100%;
    padding-left: 2.1rem !important;
}
.te-pagesize {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
}
.te-pagesize select {
    width: auto;
    padding: 0.25rem 1.75rem 0.25rem 0.5rem;
    font-size: 0.8rem;
}
.te-count {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.te-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    padding: 0.75rem 0.25rem;
    flex-wrap: wrap;
}
.te-footer:empty { display: none; }
.te-page-btn {
    min-width: 34px;
    padding: 0.35rem 0.5rem;
}
.te-page-btn[disabled] { opacity: 0.4; cursor: default; }
.te-page-info {
    font-size: 0.8rem;
    color: var(--text-secondary);
    padding: 0 0.5rem;
    white-space: nowrap;
}

/* Sortable headers */
.data-table th.te-sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.data-table th.te-sortable:hover { color: var(--text-primary); }
/* Sort arrow is a pseudo-element on the <th> so i18n textContent updates
   (which replace child nodes) can never remove it. */
.data-table th.te-sortable::after {
    content: '\f0dc';   /* fa-sort */
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free';
    font-weight: 900;
    margin-left: 0.4em;
    opacity: 0.35;
    font-size: 0.8em;
}
.data-table th.te-sort-asc::after  { content: '\f0de'; opacity: 1; }   /* fa-sort-up */
.data-table th.te-sort-desc::after { content: '\f0dd'; opacity: 1; }   /* fa-sort-down */

.te-empty-cell {
    text-align: center !important;
    color: var(--text-muted);
    padding: 1.5rem !important;
}

/* Row action buttons must stay on a single line even when a neighbouring
   column (e.g. a long driver name) squeezes the table. The :has() net covers
   any table whose last column holds buttons, without touching text columns. */
.data-table td.row-actions,
.data-table td:last-child:has(> .btn) {
    white-space: nowrap;
}

/* Stacked date-over-time cell (keeps datetime columns narrow) */
.cell-datetime {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.2;
}
.cell-datetime .cd-time {
    color: var(--text-muted);
    font-size: 0.85em;
}

/* Status Badge */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-badge.moving { background: rgba(74, 222, 128, 0.2); color: var(--accent-green); }
.status-badge.idle { background: rgba(250, 204, 21, 0.2); color: var(--accent-yellow); }
.status-badge.stopped { background: rgba(248, 113, 113, 0.2); color: var(--accent-red); }
.status-badge.offline { background: rgba(100, 116, 139, 0.2); color: var(--text-muted); }
.status-badge.active { background: rgba(74, 222, 128, 0.2); color: var(--accent-green); }

.status-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* Tracking Layout */
.tracking-layout {
    /* Map fills the whole tracking area; the sidebar is now an overlay (see
       .tracking-sidebar below) rather than a grid column.
       overflow:hidden clips the collapsed sidebar's translateX off-screen so
       it doesn't trigger a horizontal scrollbar on the parent .page. */
    position: relative;
    height: calc(100vh - var(--header-height) - 3rem);
    overflow: hidden;
}

.tracking-map-container {
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    height: 100%;
    width: 100%;
}

/* Floating icon-only toggle for the vehicles/trip-details overlay. Sits on the
   right, directly under Leaflet's built-in layers control (top-right of map).
   Compact 36×36 px square matches the map-mode-btn icon size. */
.tracking-sidebar-toggle {
    position: absolute;
    top: 56px;
    right: 10px;
    z-index: 1100;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transition: background 0.15s ease, transform 0.15s ease, color 0.15s ease;
}
.tracking-sidebar-toggle:hover {
    background: var(--bg-tertiary, var(--bg-primary));
    color: var(--primary, #2563eb);
}
.tracking-sidebar-toggle.is-active {
    background: var(--primary, #2563eb);
    color: #fff;
    border-color: var(--primary, #2563eb);
}
.tracking-sidebar-toggle i { font-size: 15px; }

.tracking-map-container .leaflet-top.leaflet-left {
    top: 46px;
}

.map-mode-toggle {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1000;
    display: flex;
    align-items: stretch;
    background: var(--bg-primary, #fff);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    overflow: visible;
}

.map-mode-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    background: var(--bg-primary, #fff);
    color: var(--text-secondary, #666);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.map-mode-btn:hover {
    background: var(--bg-tertiary, #f0f0f0);
    color: var(--text-primary, #333);
}

.map-mode-btn.active {
    background: var(--accent-primary, #2563eb);
    color: #fff;
}

.map-mode-btn i {
    font-size: 14px;
}

/* Leaflet base-layer switcher — match the height/look of the left toolbar buttons */
.leaflet-top.leaflet-right {
    top: 10px;
}

.leaflet-top.leaflet-right .leaflet-control {
    margin-top: 0 !important;
}

.leaflet-control-layers {
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    background: var(--bg-primary, #fff) !important;
    overflow: hidden;
    margin-top: 0 !important;
}

.leaflet-control-layers-toggle {
    width: 34px !important;
    height: 34px !important;
    background-size: 18px 18px !important;
    background-position: center !important;
}

.leaflet-control-layers-expanded {
    padding: 8px 10px !important;
    color: var(--text-primary, #333) !important;
    font-size: 13px;
}

.leaflet-control-layers-expanded label {
    display: flex !important;
    align-items: center;
    gap: 6px;
    margin: 4px 0 !important;
    cursor: pointer;
}

.leaflet-control-layers-base input[type="radio"] {
    accent-color: var(--accent-primary, #2563eb);
}

.leaflet-control-layers-separator {
    border-top: 1px solid var(--border-color, rgba(0, 0, 0, 0.1)) !important;
    margin: 6px 0 !important;
}

.map-toggle-divider {
    width: 1px;
    height: 20px;
    background: var(--border-color, rgba(255,255,255,0.2));
    margin: 0 2px;
    flex-shrink: 0;
}

/* Pin label dropdown (multi-select) */
.pin-label-control {
    position: relative;
    display: flex;
}

.pin-label-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 4px;
    background: var(--accent-blue, #2563eb);
    color: #fff;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 700;
}

.pin-label-count:empty {
    display: none;
}

.pin-label-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 180px;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 6px;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pin-label-menu.hidden {
    display: none;
}

.pin-label-menu label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
}

.pin-label-menu label:hover {
    background: var(--bg-tertiary, #f0f0f0);
}

.pin-label-menu input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
    accent-color: var(--accent-blue, #2563eb);
}

/* Share live tracking link modal */
.share-links-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 280px;
    overflow-y: auto;
    padding: 6px 2px;
}

.share-link-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    background: var(--bg-tertiary);
    border-radius: 6px;
}

.share-link-info {
    flex: 1;
    min-width: 0;
}

.share-link-url-row {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 6px;
}

.share-link-url {
    flex: 1;
    min-width: 0;
    font-family: monospace;
    font-size: 0.78rem;
    background: var(--bg-primary);
    cursor: text;
}

.share-link-meta {
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* Installation checks modal (GPS / ignition ON / ignition OFF) */
.install-check-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 6px 2px;
}

.install-check-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    border-left: 3px solid transparent;
}

.install-check-row.install-check-pass { border-left-color: var(--success, #16a34a); }
.install-check-row.install-check-fail,
.install-check-row.install-check-noData,
.install-check-row.install-check-noDevice,
.install-check-row.install-check-timeout,
.install-check-row.install-check-error { border-left-color: var(--danger, #dc2626); }
.install-check-row.install-check-running { border-left-color: var(--accent-blue, #2563eb); }

.install-check-main { flex: 1; min-width: 0; }

.install-check-title { font-weight: 600; }

.install-check-hint {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.install-check-result { margin-top: 8px; }

.install-check-elapsed {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.install-check-message {
    margin-top: 4px;
    font-size: 0.85rem;
}

.install-check-evidence {
    margin-top: 4px;
    font-family: monospace;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.popup-link-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color);
    cursor: pointer;
}

.popup-link-secondary:hover {
    background: var(--bg-primary);
}

/* Geofence shape edit handles (custom vertex draggers) */
.gf-edit-handle {
    background: #fff;
    border: 2px solid var(--accent-blue, #2563eb);
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    cursor: grab;
    transition: transform 0.1s ease;
}

.gf-edit-handle:hover {
    transform: scale(1.25);
}

.gf-edit-handle:active {
    cursor: grabbing;
}

.gf-edit-handle-center {
    background: var(--accent-blue, #2563eb);
    color: #fff;
    border-color: #fff;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    border-radius: 50%;
}

.gf-edit-handle-edge {
    background: var(--accent-yellow, #f59e0b);
    border-color: #fff;
}

/* Edge-midpoint "add a point" ghost. Deliberately quieter than a real vertex —
   dashed and translucent so the shape's actual corners stay readable — but it
   comes forward on hover so it reads as clickable. */
.gf-edit-handle-mid {
    background: rgba(255, 255, 255, 0.75);
    border-style: dashed;
    border-width: 2px;
    opacity: 0.7;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    color: var(--accent-blue, #2563eb);
    cursor: copy;
}

.gf-edit-handle-mid:hover {
    opacity: 1;
    border-style: solid;
    transform: scale(1.35);
}

/* Floating toolbar shown while interactively reshaping a geofence */
.geofence-shape-edit-toolbar {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1010;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    background: var(--bg-primary, #fff);
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    font-size: 0.88rem;
    color: var(--text-primary);
}

.geofence-shape-edit-toolbar.hidden { display: none; }

.geofence-shape-edit-toolbar .edit-hint {
    color: var(--text-muted);
    font-size: 0.78rem;
    border-left: 1px solid var(--border-color);
    padding-left: 12px;
}

/* Geofences page POI toolbar — top-right, with room for the Leaflet layer switcher */
.geofence-poi-toolbar {
    position: absolute;
    top: 10px;
    right: 54px; /* 34px layer switcher + 10px right offset + 10px gap */
    z-index: 1000;
    display: flex;
    background: var(--bg-primary, #fff);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.geofence-map-container {
    position: relative;
}

/* When placed in top-right, the dropdown menu must align to the right edge of the
   button so it never overflows the map container */
.geofence-poi-toolbar .poi-search-menu {
    right: 0;
    left: auto;
}

/* POI popup with "Create geofence here" action */
.poi-popup {
    min-width: 220px;
}

.poi-popup-coords {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 4px 0 8px 0;
}

.poi-popup .btn-sm {
    width: 100%;
    font-size: 0.85rem;
}

/* POI search dropdown */
.poi-search-control {
    position: relative;
    display: flex;
}

.poi-search-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 280px;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, rgba(0,0,0,0.1));
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 10px;
    z-index: 1010;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.poi-search-menu.hidden { display: none; }

.poi-search-menu .form-control {
    width: 100%;
}

.poi-categories {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.poi-categories button {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 0.85rem;
    cursor: pointer;
    color: var(--text-primary);
    text-align: left;
    transition: background 0.15s ease;
}

.poi-categories button:hover {
    background: rgba(37, 99, 235, 0.12);
}

.poi-categories button.poi-clear-btn {
    grid-column: span 2;
    color: var(--accent-red);
    text-align: center;
}

.poi-categories button.poi-clear-btn:hover {
    background: rgba(248, 113, 113, 0.12);
}

/* POI marker pin (Leaflet divIcon) */
.poi-marker-icon { background: transparent; border: none; }

.poi-marker-pin {
    width: 30px;
    height: 30px;
    background: var(--accent-blue, #2563eb);
    color: #fff;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.poi-marker-pin i {
    transform: rotate(45deg);
    font-size: 14px;
}

.poi-marker-pin.poi-gas_station { background: #f59e0b; }
.poi-marker-pin.poi-car_repair { background: #6b7280; }
.poi-marker-pin.poi-parking { background: #2563eb; }
.poi-marker-pin.poi-restaurant { background: #ef4444; }
.poi-marker-pin.poi-hospital { background: #ec4899; }
.poi-marker-pin.poi-address { background: #10b981; }

/* Generic map tools toolbar (tracking page top-right). Shares button style with the
   geofences POI toolbar — leaves room for the Leaflet base-layer switcher. */
.map-tools-toolbar {
    position: absolute;
    top: 10px;
    right: 54px;
    z-index: 1000;
    display: flex;
    background: var(--bg-primary, #fff);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.map-tools-toolbar .map-mode-btn.active,
.geofence-poi-toolbar .map-mode-btn.active {
    background: var(--accent-blue, #2563eb);
    color: #fff;
}

.map-tools-toolbar .poi-search-menu,
.geofence-poi-toolbar .poi-search-menu {
    right: 0;
    left: auto;
}

/* Find Places lives inside the consolidated left-side toolbar now; anchor the
   dropdown left so it doesn't extend off the right edge. */
.map-mode-toggle .poi-search-menu {
    left: 0;
    right: auto;
}

/* Ruler tool — segment + total distance labels rendered as Leaflet divIcons */
.ruler-segment-label,
.ruler-total-label {
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #111);
    border: 1px solid rgba(37, 99, 235, 0.6);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    transform: translate(-50%, -50%);
}

.ruler-total-label {
    background: var(--accent-blue, #2563eb);
    color: #fff;
    border-color: #1d4ed8;
    font-size: 12px;
    transform: translate(-50%, -120%);
}

.ruler-total-label i {
    margin-right: 4px;
}

/* When the ruler is engaged, the cursor on the map should be a crosshair */
.leaflet-container.ruler-active,
.leaflet-container.ruler-active .leaflet-interactive {
    cursor: crosshair !important;
}

/* Vehicle pin label (Leaflet) */
.vehicle-pin-label {
    position: absolute;
    top: 36px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 23, 42, 0.85);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    padding: 3px 7px;
    border-radius: 4px;
    white-space: nowrap;
    text-align: center;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    margin-top: 2px;
}

.vehicle-pin-label.offline {
    background: rgba(100, 116, 139, 0.95);
}

.vehicle-pin-label .row {
    display: block;
}

.custom-marker {
    position: relative;
    overflow: visible !important;
}

/* Cesium 3D vehicle popup */
.cesium-vehicle-popup {
    font-family: var(--font-family, sans-serif);
}

.cesium-popup-content {
    position: relative;
    background: var(--bg-primary, #fff);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    padding: 14px 16px 12px 16px;
    color: var(--text-primary, #333);
}

.cesium-popup-content .vehicle-popup {
    color: var(--text-primary, #333);
}

.cesium-popup-close {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 22px;
    height: 22px;
    background: none;
    border: none;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    color: var(--text-muted, #888);
    padding: 0;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cesium-popup-close:hover {
    background: var(--bg-tertiary, rgba(0, 0, 0, 0.06));
    color: var(--text-primary, #333);
}

/* Arrow pointing down from popup */
.cesium-popup-content::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid var(--bg-primary, #fff);
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
}

/* Floating overlay sidebar — sits ON TOP of the map (not next to it) so the
   map can fill the viewport. Slides in from the right when the user clicks
   the toggle button or selects a vehicle. The `is-collapsed` modifier
   translates it off-screen so animations are CSS-driven and the panel stays
   in the DOM (preserves scroll position, in-flight requests, etc.). */
.tracking-sidebar {
    position: absolute;
    top: 10px;
    right: 10px;
    bottom: 10px;
    width: 360px;
    max-width: calc(100vw - 20px);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    background: var(--bg-secondary);
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.18s ease;
}
.tracking-sidebar.is-collapsed {
    transform: translateX(calc(100% + 20px));
    opacity: 0;
    pointer-events: none;
}
/* Hide the toggle while the panel is open — the panel's own close button
   provides the dismiss action, so there's no point duplicating it. */
.tracking-sidebar-toggle.is-active {
    opacity: 0;
    pointer-events: none;
}

/* Close button in the sidebar header. The standard X icon, right-aligned. */
.sidebar-close {
    margin-left: auto;
    background: transparent;
    border: none;
    color: var(--text-secondary, var(--text-primary));
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 14px;
    transition: background 0.15s ease, color 0.15s ease;
}
.sidebar-close:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
}

.tracking-sidebar .card {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.tracking-sidebar .vehicle-list {
    flex: 1;
}

/* Tabbed sidebar — top-level tabs (Vehicles / Trip Details) get full sidebar height */
.sidebar-tabbed-card {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* Top-level Vehicles/Trip-Details tabs were removed — the sidebar now opens
   straight to the vehicle list and the trip detail appears as a context
   sub-view. .sidebar-header-bar is the slim strip that hosts the panel
   label and the close button. */
.sidebar-header-bar {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    gap: 8px;
}
.sidebar-header-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.sidebar-header-bar .sidebar-close {
    margin-left: auto;
}

.sidebar-panel {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.sidebar-panel.hidden {
    display: none;
}

/* Trip Details container fills the parent panel */
#tripDetailsCard {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.trip-details-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.trip-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.trip-tab {
    flex: 1;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.15s ease;
}

.trip-tab:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.trip-tab.active {
    color: var(--accent-blue);
    border-bottom-color: var(--accent-blue);
    background: transparent;
}

.trip-panel {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0.75rem 1rem;
}

.trip-panel.hidden {
    display: none;
}

/* When the trip panel is mounted inside the vehicle-context-body (the new
   workflow B layout), the body is already the scroll container — let it
   own the scrollbar and padding so we don't end up with nested scrolls. */
.vehicle-context-body .trip-panel {
    overflow: visible;
    padding: 4px 4px 12px;
    flex: none;
}

/* Quick-action history row at the top of the trip context view — gives
   the user direct shortcuts to today/yesterday/hour/full history without
   bouncing through the kebab menu. */
.trip-context-quickactions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 8px 4px 12px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 4px;
}
.trip-context-quickactions button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 4px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.72rem;
    line-height: 1.1;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.trip-context-quickactions button:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--accent-blue);
}
.trip-context-quickactions button i {
    font-size: 0.95rem;
    color: var(--accent-blue);
}

.trip-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 1.5rem 0.5rem;
    font-size: 0.9rem;
}

.trip-empty.text-error {
    color: var(--accent-red);
}

.trip-banner {
    background: rgba(148, 163, 184, 0.15);
    color: var(--text-secondary);
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    text-align: center;
    margin-bottom: 0.75rem;
}

.trip-section {
    margin-bottom: 1rem;
}

.trip-section h4 {
    margin: 0 0 0.5rem 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.trip-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 0.85rem;
    gap: 8px;
}

.trip-row > span:first-child {
    color: var(--text-muted);
    flex-shrink: 0;
}

.trip-row > strong {
    text-align: right;
    word-break: break-word;
}

.trip-row-empty {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.8rem;
    padding: 6px 0;
    justify-content: flex-start;
}

.badge-active {
    background: var(--accent-green);
    color: #fff;
    padding: 2px 8px;
    border-radius: 9px;
    font-size: 0.7rem;
    font-weight: 600;
}

.trip-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 0.5rem;
    padding: 6px 10px;
    background: var(--accent-blue);
    color: #fff !important;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
}

.trip-link:hover {
    background: var(--accent-blue-hover, #1d4ed8);
}

.trip-history-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.trip-history-item {
    padding: 0.6rem 0.75rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.15s ease;
}

.trip-history-item:hover {
    background: rgba(81, 187, 232, 0.15);
}

.trip-history-time {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.trip-history-stats {
    display: flex;
    gap: 12px;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.trip-history-stats span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.vehicle-details {
    padding: 1rem;
}

.vehicle-details .detail-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
}

.vehicle-details .detail-row:last-child {
    border-bottom: none;
}

.vehicle-details .detail-label {
    color: var(--text-secondary);
}

.vehicle-details .detail-value {
    font-weight: 500;
}

/* Geofence Layout */
.geofence-layout {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 1.5rem;
    height: calc(100vh - var(--header-height) - 6rem);
}

.geofence-map-container {
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
}

.geofence-draw-toolbar {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    padding: 8px 16px;
}

.draw-toolbar-content {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.draw-toolbar-content select {
    width: auto;
    min-width: 100px;
}

.draw-instruction {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.draw-radius-control {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
}

.draw-radius-control label {
    margin: 0;
    font-weight: 500;
}

.draw-radius-control input {
    text-align: center;
}

.geofence-list-container {
    min-height: 0;
}

.geofence-list-container .card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Search box above the geofence list. Sits outside .geofence-list so it stays
   put while the list scrolls under it. */
.geofence-search {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0.5rem 0.5rem 0;
    flex-shrink: 0;
}

.geofence-search > .fa-search {
    position: absolute;
    left: 1.1rem;
    color: var(--text-muted);
    font-size: 0.8rem;
    pointer-events: none;
}

.geofence-search .form-control {
    padding-left: 2rem;
    padding-right: 2rem;
}

.geofence-search-clear {
    position: absolute;
    right: 1rem;
    background: none;
    border: none;
    padding: 0.25rem;
    color: var(--text-muted);
    cursor: pointer;
}

.geofence-search-clear:hover {
    color: var(--text-primary);
}

.geofence-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}

.geofence-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: var(--radius);
    margin-bottom: 0.5rem;
    background: var(--bg-tertiary);
    cursor: pointer;
}

.geofence-item {
    cursor: pointer;
}

.geofence-item:hover {
    background: var(--bg-primary);
}

.geofence-item.selected {
    background: rgba(81, 187, 232, 0.15);
    border-left: 3px solid var(--accent-blue);
    padding-left: calc(0.75rem - 3px);
}

.geofence-color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.geofence-info {
    flex: 1;
}

.geofence-info h4 {
    font-size: 0.875rem;
    font-weight: 600;
}

.geofence-info p {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.geofence-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.geofence-actions .btn-icon {
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
    opacity: 0;
    transition: opacity 0.15s;
}

.geofence-item:hover .geofence-actions .btn-icon {
    opacity: 1;
}

.geofence-actions .text-danger {
    color: var(--accent-red);
}

/* Reports Grid */
.reports-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.report-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
}

.report-card:hover {
    border-color: var(--accent-blue);
    transform: translateY(-2px);
}

.report-card i {
    font-size: 2.5rem;
    color: var(--accent-blue);
    margin-bottom: 1rem;
}

.report-card h3 {
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
}

.report-card p {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* Report Modal Styles */
.date-range-inputs {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.date-range-inputs input {
    flex: 1;
}

.date-range-inputs span {
    color: var(--text-muted);
}

/* A two-column form was tried here for the wide report modal and removed: it put
   every control in the left half and left the right half empty. The wide modal
   stays a single column — the vehicle picker fills the width, which is what the
   extra room was for. */

/* Format choice reads as a row of pills rather than five stacked radio rows,
   which is ~90px of a 500px-wide modal reclaimed. Scoped to this container so
   the shared .radio-label used elsewhere is unaffected. */
.report-format-options {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.report-format-options .radio-label {
    gap: 0.4rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-size: 0.85rem;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}
.report-format-options .radio-label:hover { background: var(--bg-tertiary); }
/* :has() keeps the checked pill highlighted without a JS class toggle; browsers
   without it simply show the plain pill, which is still perfectly usable. */
.report-format-options .radio-label:has(input:checked) {
    border-color: var(--accent-blue);
    background: var(--bg-tertiary);
    font-weight: 600;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.radio-label input[type="radio"] {
    width: auto;
    margin: 0;
}

/* Report View Styles */
/* Report chrome above the table is deliberately thin: the data is what the user
   came for. Period and vehicle sit on one wrapping line instead of two stacked
   paragraphs in a tall box (FR-034). */
.report-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1rem;
    background: var(--bg-tertiary);
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius);
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.report-summary p {
    margin: 0;
    color: var(--text-secondary);
}

/* Reads as one sentence once the parts share a line. */
.report-summary > p + p::before {
    content: '·';
    margin-right: 0.6rem;
    color: var(--text-muted);
}

.report-stats {
    display: grid;
    /* auto-fit rather than a fixed 4 columns: reports carry 3–6 stats, and a
       fixed 4 either stretched them absurdly wide or wrapped one card alone. */
    grid-template-columns: repeat(auto-fit, minmax(115px, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-shrink: 0;
}

.report-stat-card {
    background: var(--bg-tertiary);
    padding: 0.45rem 0.6rem;
    border-radius: var(--radius);
    text-align: center;
}

.report-stat-card .stat-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent-blue);
    line-height: 1.2;
}

.report-stat-card .stat-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 0.1rem;
    line-height: 1.2;
}

.report-table-container {
    overflow-x: auto;
    max-height: 400px;
    overflow-y: auto;
}

/* Journey report toolbar (column picker, etc.) */
.journey-report-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin: 0.5rem 0 0.5rem 0;
}

.column-picker-wrapper {
    position: relative;
}

.column-picker-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, rgba(0,0,0,0.1));
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    padding: 8px;
    min-width: 200px;
    max-height: 320px;
    overflow-y: auto;
    z-index: 1010;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.column-picker-menu.hidden {
    display: none;
}

.column-picker-menu label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.85rem;
    cursor: pointer;
    color: var(--text-primary);
    user-select: none;
}

.column-picker-menu label:hover {
    background: var(--bg-tertiary);
}

.column-picker-menu input[type="checkbox"] {
    cursor: pointer;
    accent-color: var(--accent-blue, #2563eb);
}

/* Inline action button (table cells) */
.btn-link-action {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--accent-blue, #2563eb);
    border-radius: 4px;
    cursor: pointer;
    margin-right: 4px;
}

.btn-link-action:hover {
    background: rgba(37, 99, 235, 0.12);
}

.journey-report-table td em {
    color: var(--accent-green, #10b981);
    font-style: italic;
    font-weight: 600;
}

.report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.report-table th,
.report-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.report-table th {
    background: var(--bg-tertiary);
    font-weight: 600;
    position: sticky;
    top: 0;
}

.report-table tbody tr:hover {
    background: var(--bg-tertiary);
}

/* Export buttons */
.export-dropdown {
    display: flex;
    gap: 0.5rem;
}

/* Toast */
.toast-container {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    /* Above every overlay in the app, deliberately. At 1100 a toast fired while a
       modal was open rendered *underneath* the modal's 80%-opaque backdrop
       (.modal is 2100), so a validation error on save was invisible and the modal
       just looked like it had done nothing — the success path only seemed fine
       because the modal closes on success. Must stay above: .vehicle-action-menu
       (2000), .modal (2100) and .app-loading-overlay (9999). The SuperAdmin
       console already ordered these correctly. */
    z-index: 10000;
}

.toast {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--bg-secondary);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    margin-top: 0.5rem;
    animation: slideIn 0.3s ease;
    border-left: 4px solid;
}

.toast.success { border-color: var(--accent-green); }
.toast.error { border-color: var(--accent-red); }
.toast.warning { border-color: var(--accent-yellow); }
.toast.info { border-color: var(--accent-blue); }

/* Dismissible notifications (FR-031): the whole toast is clickable, the × is the
   affordance, and "Dismiss all" clears a stack that is covering the map. */
.toast { cursor: pointer; }
.toast > span { flex: 1 1 auto; min-width: 0; }
.toast-close {
    flex-shrink: 0;
    margin-left: auto;
    padding: 0 0 0 0.25rem;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
}
.toast-close:hover { color: var(--text-primary); }
/* margin-left:auto right-aligns it inside the container without making the
   container a flex box, which would resize the toasts themselves. */
.toast-dismiss-all {
    display: block;
    margin-left: auto;
    padding: 0.35rem 0.7rem;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}
.toast-dismiss-all:hover { background: var(--bg-tertiary); }

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Loading */
.loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: var(--text-secondary);
    gap: 0.75rem;
}

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

/* Responsive */
@media (max-width: 1200px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        left: -var(--sidebar-width);
        z-index: 100;
        transition: left 0.3s;
    }

    .sidebar.open {
        left: 0;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    /* .tracking-layout is no longer a grid (it's a positioning context for the
       overlay sidebar) so it doesn't need a single-column responsive override
       like .geofence-layout does. */
    .geofence-layout {
        grid-template-columns: 1fr;
    }

    /* On narrow viewports the overlay panel becomes near-fullscreen so the
       user can scroll the list comfortably. */
    .tracking-sidebar {
        width: calc(100vw - 20px);
        max-width: 420px;
    }

    /* Results-page filter panel: stack controls and go full-width on mobile. */
    .report-filter-panel .rfp-summary { display: none; }
    .report-filter-panel .rfp-body .date-range-inputs {
        flex-direction: column;
        align-items: stretch;
    }
    .report-filter-panel .rfp-actions { justify-content: stretch; }
    .report-filter-panel .rfp-actions .btn { width: 100%; }

    /* Vehicle picker: no room for two columns — stack them, and put the divider
       back between the toggle and the list where it reads as a separator again. */
    .rvp-cols { grid-template-columns: 1fr; gap: 0; }
    .rvp-col-list {
        border-left: none;
        border-top: 1px solid var(--border-color, #e5e7eb);
        padding-left: 0;
        padding-top: 8px;
        margin-top: 8px;
    }
}

/* Leaflet Custom Styles */
.leaflet-container {
    background: var(--bg-primary);
}

.custom-marker {
    background: none;
    border: none;
}

.marker-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    border: 2px solid white;
}

.marker-icon.moving { background: var(--accent-green); }
.marker-icon.idle { background: var(--accent-yellow); }
.marker-icon.stopped { background: var(--accent-red); }
.marker-icon.offline { background: var(--text-muted); }

.vehicle-popup {
    min-width: 240px;
    max-width: 320px;
}

.vehicle-popup h3 {
    margin: 0 0 0.15rem 0;
    font-size: 1rem;
    font-weight: 700;
}

.vehicle-popup .popup-subtitle {
    margin: 0 0 0.5rem 0;
    font-size: 0.8rem;
    color: var(--text-muted, #888);
}

.vehicle-popup .popup-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 0.25rem 0;
    font-size: 0.875rem;
}

.vehicle-popup .popup-label {
    color: var(--text-muted, #666);
    flex-shrink: 0;
}

.vehicle-popup .popup-row > span:last-child {
    text-align: right;
    word-break: break-word;
}

/* Last GPS message: exact clock time on top, relative age beneath (FR-006). */
.vehicle-popup .popup-lastsignal {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.25;
    white-space: nowrap;
}

.vehicle-popup .popup-lastsignal small {
    font-size: 0.75rem;
    color: var(--text-muted, #888);
}

.vehicle-popup .popup-actions {
    margin-top: 0.65rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color, rgba(0,0,0,0.08));
}

.vehicle-popup .popup-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: var(--accent-blue, #2563eb);
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    transition: background 0.15s ease;
}

.vehicle-popup .popup-link:hover {
    background: var(--accent-blue-hover, #1d4ed8);
    color: #fff;
}

/* ========================================
   ENHANCED DASHBOARD STYLES
   ======================================== */

/* Additional stat icon colors */
.stat-icon.purple { background: rgba(192, 132, 252, 0.2); color: var(--accent-purple); }
.stat-icon.orange { background: rgba(249, 115, 22, 0.2); color: #f97316; }
.stat-icon.teal { background: rgba(20, 184, 166, 0.2); color: #14b8a6; }

/* Secondary stats grid */
.stats-grid-secondary {
    margin-bottom: 1.5rem;
}

/* Navigation divider */
.nav-divider {
    height: 1px;
    background: var(--border-color);
    margin: 0.75rem 1rem;
}

/* Charts Section */
.charts-section {
    margin-top: 1.5rem;
}

.charts-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.charts-grid-secondary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.chart-card {
    min-height: 280px;
}

.chart-container {
    height: 200px;
    padding: 1rem;
}

.chart-container-wide {
    height: 180px;
    padding: 1rem;
}

/* Top Drivers List */
.top-drivers-list {
    padding: 0.5rem 1rem;
}

.top-driver-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
}

.top-driver-item:last-child {
    border-bottom: none;
}

.top-driver-item .rank {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
}

.top-driver-item:nth-child(1) .rank { background: #ffd700; color: #000; }
.top-driver-item:nth-child(2) .rank { background: #c0c0c0; color: #000; }
.top-driver-item:nth-child(3) .rank { background: #cd7f32; color: #000; }

.top-driver-item .driver-info {
    flex: 1;
}

.top-driver-item .driver-name {
    font-weight: 500;
    display: block;
}

.top-driver-item .driver-trips {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.top-driver-item .driver-score {
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 600;
}

.driver-score.excellent { background: rgba(74, 222, 128, 0.2); color: var(--accent-green); }
.driver-score.good { background: rgba(81, 187, 232, 0.2); color: var(--accent-blue); }
.driver-score.fair { background: rgba(250, 204, 21, 0.2); color: var(--accent-yellow); }
.driver-score.poor { background: rgba(248, 113, 113, 0.2); color: var(--accent-red); }

/* Activity List */
.activity-list {
    padding: 0.5rem 1rem;
    max-height: 300px;
    overflow-y: auto;
}

.activity-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
}

.activity-item:last-child {
    border-bottom: none;
}

.activity-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.activity-icon.info { background: rgba(81, 187, 232, 0.2); color: var(--accent-blue); }
.activity-icon.success { background: rgba(74, 222, 128, 0.2); color: var(--accent-green); }
.activity-icon.warning { background: rgba(250, 204, 21, 0.2); color: var(--accent-yellow); }
.activity-icon.error { background: rgba(248, 113, 113, 0.2); color: var(--accent-red); }

.activity-content {
    flex: 1;
}

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

.activity-time {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Quick Actions */
.quick-actions-section {
    margin-top: 2rem;
    padding: 1.5rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
}

.quick-actions-section h3 {
    font-size: 1rem;
    margin-bottom: 1rem;
    color: var(--text-secondary);
}

.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
}

.quick-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-primary);
}

.quick-action-btn:hover {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
}

.quick-action-btn i {
    font-size: 1.5rem;
}

.quick-action-btn span {
    font-size: 0.75rem;
    text-align: center;
}

/* ========================================
   LANGUAGE SELECTOR
   ======================================== */

.language-selector {
    position: relative;
}

.language-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.875rem;
}

.language-btn:hover {
    background: var(--bg-secondary);
}

.language-btn .current-lang {
    font-weight: 500;
}

.language-dropdown {
    /* Inside the profile menu the language selector lays out as a sibling
       block — no absolute positioning needed (the parent .profile-menu is
       already absolutely placed above the rest of the page). */
    margin-top: 4px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
}

/* ─── Profile menu (top-right header) ─────────────────────────────────
   Replaces the dead settings-cog button. Holds personal preferences
   (Change Password / Language / Theme) plus Sign Out. Company-wide
   settings live on the Settings page (CompanyAdmin only). */
.profile-menu-wrap { position: relative; }
.profile-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 260px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    /* Same 2000 as .vehicle-action-menu — must clear Leaflet controls
       (~1000) and the tracking sidebar overlay (1050). */
    z-index: 2000;
    padding: 4px 0;
    color: var(--text-primary);
}
.profile-menu.hidden { display: none; }
.profile-menu-header {
    padding: 10px 14px 6px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 4px;
}
.profile-menu-name { font-weight: 600; font-size: 0.95rem; line-height: 1.2; }
.profile-menu-email { font-size: 0.78rem; opacity: 0.7; margin-top: 2px; }
.profile-menu-section { padding: 6px 14px 10px; }
.profile-menu-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.6;
    margin-bottom: 6px;
}
.profile-theme-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}
.profile-theme-options .theme-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 0;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.profile-theme-options .theme-btn:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}
.profile-theme-options .theme-btn.active {
    border-color: var(--accent-primary, #51bbe8);
    color: var(--accent-primary, #51bbe8);
}
.profile-menu-divider {
    border-top: 1px solid var(--border-color);
    margin: 4px 0;
}
.profile-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
}
.profile-menu-item:hover { background: var(--bg-tertiary); }
.profile-menu-item i { width: 16px; text-align: center; opacity: 0.7; }
.profile-menu-danger { color: var(--accent-error, #ef4444); }
.profile-menu-danger:hover { background: rgba(239, 68, 68, 0.08); }

/* Inline language picker inside the profile menu. One row per locale,
   active one highlighted with the accent border. */
.profile-language-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.profile-lang-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 0.85rem;
    cursor: pointer;
    text-align: left;
}
.profile-lang-btn:hover { background: var(--bg-tertiary); }
.profile-lang-btn.active {
    background: var(--bg-tertiary);
    border-color: var(--accent-primary, #51bbe8);
}
.profile-lang-flag { font-size: 1.05rem; line-height: 1; }
.profile-lang-name { line-height: 1.2; }

/* flatpickr calendar — repainted with the app's theme variables so it works
   in both light and dark mode without swapping stylesheets at runtime.
   See web/js/datepicker.js for why the native pickers were replaced. */
.flatpickr-calendar {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after { border-bottom-color: var(--bg-secondary); }
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after { border-top-color: var(--bg-secondary); }
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-weekdays,
span.flatpickr-weekday {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    fill: var(--text-secondary);
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg { fill: var(--text-secondary); }
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: var(--accent-primary); }
.flatpickr-day {
    color: var(--text-primary);
    border-radius: 4px;
}
.flatpickr-day:hover { background: var(--bg-tertiary); border-color: var(--bg-tertiary); }
.flatpickr-day.today { border-color: var(--accent-primary); }
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #fff;
}
.flatpickr-day.inRange { background: var(--accent-primary-light); border-color: transparent; box-shadow: none; }
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay { color: var(--text-muted); }
.flatpickr-time input,
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
    background: var(--bg-secondary);
    color: var(--text-primary);
}
.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover { background: var(--bg-tertiary); }
.numInputWrapper span { border-color: var(--border-color); }

/* Date / time format pickers */
.profile-menu-label-spaced { margin-top: 10px; }
.profile-format-select {
    width: 100%;
    padding: 6px 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color, rgba(128, 128, 128, 0.3));
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 0.85rem;
    cursor: pointer;
}
.profile-format-select:focus {
    outline: none;
    border-color: var(--accent-primary, #51bbe8);
}

.language-option {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    text-align: left;
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.2s;
}

.language-option:hover {
    background: var(--bg-tertiary);
}

.language-option.active {
    background: rgba(81, 187, 232, 0.2);
    color: var(--accent-blue);
}

/* ========================================
   ADMIN PANEL STYLES
   ======================================== */

.admin-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
}

.admin-tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: transparent;
    border: none;
    border-radius: var(--radius);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.admin-tab:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.admin-tab.active {
    background: var(--accent-blue);
    color: white;
}

.admin-tab-content {
    display: none;
}

.admin-tab-content.active {
    display: block;
}

/* Role badges */
.role-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
}

.role-badge.admin { background: rgba(248, 113, 113, 0.2); color: var(--accent-red); }
.role-badge.manager { background: rgba(81, 187, 232, 0.2); color: var(--accent-blue); }
.role-badge.dispatcher { background: rgba(192, 132, 252, 0.2); color: var(--accent-purple); }
.role-badge.viewer { background: rgba(100, 116, 139, 0.2); color: var(--text-muted); }

/* Roles Grid */
.roles-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    padding: 1rem;
}

.role-card {
    background: var(--bg-tertiary);
    border-radius: var(--radius);
    padding: 1.5rem;
}

.role-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.role-header i {
    font-size: 1.25rem;
}

.role-header.admin i { color: var(--accent-red); }
.role-header.manager i { color: var(--accent-blue); }
.role-header.dispatcher i { color: var(--accent-purple); }
.role-header.viewer i { color: var(--text-muted); }

.role-card p {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.role-permissions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.permission-tag {
    padding: 0.25rem 0.5rem;
    background: var(--bg-secondary);
    border-radius: var(--radius);
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Action badges */
.action-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius);
    font-size: 0.75rem;
    font-weight: 500;
}

.action-badge.login { background: rgba(74, 222, 128, 0.2); color: var(--accent-green); }
.action-badge.create { background: rgba(81, 187, 232, 0.2); color: var(--accent-blue); }
.action-badge.update { background: rgba(250, 204, 21, 0.2); color: var(--accent-yellow); }
.action-badge.delete { background: rgba(248, 113, 113, 0.2); color: var(--accent-red); }
.action-badge.logout { background: rgba(148, 163, 184, 0.2); color: var(--text-muted); }

/* Empty / loading states for the Audit Log table — single full-width cell
   that holds an icon, headline, and a short explanation. */
.audit-loading,
.audit-empty {
    text-align: center;
    padding: 32px 12px;
    color: var(--text-muted);
}
.audit-empty i.fa-shield-alt {
    font-size: 28px;
    opacity: 0.4;
    display: block;
    margin-bottom: 10px;
}

/* Date input */
.date-input {
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 0.875rem;
}

/* Button danger */
.btn-danger {
    background: var(--accent-red);
    color: white;
}

.btn-danger:hover {
    background: #dc2626;
}

.btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    background: var(--bg-primary);
}

/* Integrations Grid */
.integrations-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 1rem;
}

.integration-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
}

.integration-card.connected {
    border-color: var(--accent-green);
}

.integration-logo {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-blue);
}

.integration-info {
    flex: 1;
}

.integration-info h4 {
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

.integration-info p {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.integration-status {
    display: inline-block;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.integration-status.connected {
    color: var(--accent-green);
}

/* ========================================
   SETTINGS PAGE STYLES
   ======================================== */

.settings-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.settings-card {
    padding-bottom: 1.5rem;
}

.settings-card .card-header h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
}

.settings-form {
    padding: 1rem 1.25rem;
}

.settings-form .form-group {
    margin-bottom: 1.25rem;
}

.settings-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.form-control {
    width: 100%;
    min-height: 42px;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.875rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Branding upload control — file-picker + thumbnail preview. Sits in
 * the Reseller Portal's white-label form. */
.branding-upload {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.625rem;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-tertiary);
}
.branding-upload__preview {
    flex: 0 0 auto;
    width: 96px;
    height: 48px;
    object-fit: contain;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 4px;
}
.branding-upload__preview--icon {
    width: 48px;
    height: 48px;
}
.branding-upload__controls {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    flex: 1 1 auto;
}
.branding-upload__btns {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}
.branding-upload__controls .form-help {
    margin: 0;
}
/* Bottom action bar of the Reseller > Portal Branding form. */
.branding-footer-actions {
    display: flex;
    align-items: center;
    margin-top: 1.25rem;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Per-color row: native colour swatch on the left, a quiet Reset link
 * on the right that nulls just that one colour back to the platform
 * default. */
.branding-color-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}
.branding-color-row .form-control {
    flex: 0 0 auto;
    width: 80px;
    padding: 0.25rem;
    min-height: 42px;
}
.branding-color-row .btn-link-action {
    flex: 0 0 auto;
}

.form-control:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 4px rgba(81, 187, 232, 0.18);
}

/* Toggle Switch */
.toggle-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.toggle {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
}

.toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-tertiary);
    transition: 0.3s;
    border-radius: 24px;
    border: 1px solid var(--border-color);
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background-color: var(--text-muted);
    transition: 0.3s;
    border-radius: 50%;
}

.toggle input:checked + .toggle-slider {
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
}

.toggle input:checked + .toggle-slider:before {
    transform: translateX(24px);
    background-color: white;
}

/* Checkbox Group */
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
}

.checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent-blue);
}

/* Theme Options */
.theme-options {
    display: flex;
    gap: 0.75rem;
}

.theme-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.theme-btn:hover {
    border-color: var(--accent-blue);
}

.theme-btn.active {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

.theme-btn i {
    font-size: 1.25rem;
}

.theme-btn span {
    font-size: 0.75rem;
}

.settings-actions {
    margin-top: 2rem;
    display: flex;
    justify-content: flex-end;
}

/* ========================================
   RESPONSIVE ENHANCEMENTS
   ======================================== */

@media (max-width: 1400px) {
    .charts-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

@media (max-width: 1200px) {
    .charts-grid-secondary {
        grid-template-columns: 1fr;
    }

    .settings-grid {
        grid-template-columns: 1fr;
    }

    .roles-grid,
    .integrations-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .charts-grid {
        grid-template-columns: 1fr;
    }

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

    .admin-tabs {
        flex-wrap: wrap;
    }

    .language-selector {
        display: none;
    }
}

/* ========================================
   ALERT RULES STYLES
   ======================================== */

/* Match the look of .data-table rows (Routes page) — transparent
 * background, horizontal divider between rows, subtle hover wash.
 * The card-header above the list already supplies the divider above
 * the first row; the last row drops its bottom border so it doesn't
 * double-up with the card edge. */
.alert-rule-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s ease;
}

.alert-rule-item:last-child {
    border-bottom: none;
}

.alert-rule-item:hover {
    background: var(--bg-tertiary);
}

.alert-rule-item.inactive {
    opacity: 0.6;
}

.rule-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.rule-icon.info {
    background: rgba(81, 187, 232, 0.2);
    color: var(--accent-blue);
}

.rule-icon.warning {
    background: rgba(250, 204, 21, 0.2);
    color: var(--accent-yellow);
}

.rule-icon.critical {
    background: rgba(248, 113, 113, 0.2);
    color: var(--accent-red);
}

.rule-info {
    flex: 1;
}

.rule-info h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.rule-type {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.rule-threshold {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-left: 0.75rem;
}

.rule-status {
    margin-right: 1rem;
}

.rule-actions {
    display: flex;
    gap: 0.5rem;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 3rem;
    color: var(--text-secondary);
}

.empty-state i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-state p {
    margin-bottom: 1.5rem;
}

/* Form Help Text */
.form-help {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* Permissions Grid */
.permissions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.permissions-grid label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

/* API Key Display */
.api-key-display {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--bg-tertiary);
    padding: 1rem;
    border-radius: var(--radius);
    margin-top: 1rem;
}

.api-key-display code {
    flex: 1;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    word-break: break-all;
    color: var(--accent-green);
}

/* Alert Box */
.alert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
}

.alert-warning {
    background: rgba(250, 204, 21, 0.15);
    border: 1px solid rgba(250, 204, 21, 0.3);
    color: var(--accent-yellow);
}

.alert i {
    font-size: 1.1rem;
    margin-top: 0.1rem;
}

/* Modal Small Size */
.modal-content.modal-sm {
    max-width: 400px;
}

/* Button Danger */
.btn-danger {
    background: var(--accent-red);
    color: white;
}

.btn-danger:hover {
    background: #dc2626;
}

/* =====================================================================
 * Confirm Dialog
 * ===================================================================== */
.confirm-modal-content {
    max-width: 400px;
    text-align: center;
}

.confirm-modal-icon {
    padding: 1.75rem 1.5rem 0;
    font-size: 2.5rem;
    line-height: 1;
}

.confirm-modal-icon.danger { color: var(--accent-red); }
.confirm-modal-icon.warning { color: var(--accent-yellow); }
.confirm-modal-icon.info { color: var(--accent-primary); }

.confirm-modal-body {
    padding: 1rem 1.5rem 0.25rem;
}

.confirm-modal-body h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
    color: var(--text-primary);
}

.confirm-modal-body p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0;
}

.confirm-modal-content .modal-footer {
    justify-content: center;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem 1.5rem;
    border-top: none;
}

/* Detail block — the list of what a destructive action would take with it (e.g. a
   reseller's client companies). Left-aligned inside an otherwise centred dialog:
   this is a list to read line by line, not a sentence. Scrolls rather than growing,
   so a reseller with 40 companies still leaves the buttons on screen. */
.confirm-modal-detail {
    margin-top: 0.9rem;
    padding: 0.75rem 0.9rem;
    text-align: left;
    background: var(--bg-secondary, rgba(127, 127, 127, 0.08));
    border: 1px solid var(--border-color, rgba(127, 127, 127, 0.25));
    border-radius: 6px;
    max-height: 40vh;
    overflow-y: auto;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.confirm-modal-detail ul {
    margin: 0.35rem 0 0;
    padding-left: 1.1rem;
}

.confirm-modal-detail li { margin-bottom: 0.2rem; }

.confirm-modal-detail strong { color: var(--text-primary); }

.confirm-modal-detail .confirm-modal-detail__note {
    display: block;
    margin-top: 0.6rem;
    font-size: 0.8rem;
    opacity: 0.85;
}

/* Type-to-confirm gate. Widened text-align so the label reads naturally above the
   input while the dialog itself stays centred. */
#confirmModalGate {
    margin-top: 1rem;
    text-align: left;
}

#confirmModalGate label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.35rem;
}

#confirmModalInput {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    letter-spacing: 0.05em;
}

/* ========================================
   CUSTOMIZABLE DASHBOARD STYLES
   ======================================== */

/* Dashboard Page Header */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1rem;
}

.dashboard-header h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.dashboard-actions {
    display: flex;
    gap: 0.75rem;
}

.dashboard-loading {
    grid-column: span 12;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4rem;
    color: var(--text-muted);
    font-size: 1.1rem;
}

.dashboard-loading i {
    font-size: 2rem;
    color: var(--accent-blue);
}

.dashboard-customize-header {
    display: flex;
    justify-content: flex-end;
    padding: 0 1rem 1rem;
}

.customizable-dashboard {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
    padding: 0 1rem 1rem;
    min-height: calc(100vh - 200px);
}

/* Widget Sizes */
.dashboard-widget {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: all 0.2s ease;
    cursor: grab;
}

.dashboard-widget:hover {
    box-shadow: var(--shadow-lg);
}

.dashboard-widget.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.dashboard-widget.drag-over-top {
    border-top: 3px solid var(--accent-blue);
}

.dashboard-widget.drag-over-bottom {
    border-bottom: 3px solid var(--accent-blue);
}

/* Widget Width Classes */
.widget-w-small {
    grid-column: span 4;
}

.widget-w-medium {
    grid-column: span 6;
}

.widget-w-large {
    grid-column: span 12;
}

/* Widget Height Classes */
.widget-h-small .widget-content {
    height: 200px;
}

.widget-h-medium .widget-content {
    height: 350px;
}

.widget-h-large .widget-content {
    height: 500px;
}

/* Legacy support for old size classes */
.widget-small {
    grid-column: span 4;
}

.widget-medium {
    grid-column: span 6;
}

.widget-large {
    grid-column: span 12;
}

@media (max-width: 1200px) {
    .widget-w-small { grid-column: span 6; }
    .widget-w-medium { grid-column: span 6; }
    .widget-w-large { grid-column: span 12; }
    .widget-small { grid-column: span 6; }
    .widget-medium { grid-column: span 6; }
    .widget-large { grid-column: span 12; }
}

@media (max-width: 768px) {
    .widget-w-small, .widget-w-medium, .widget-w-large,
    .widget-small, .widget-medium, .widget-large {
        grid-column: span 12;
    }
}

/* Widget Header */
.widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.1);
    cursor: grab;
}

.widget-header:active {
    cursor: grabbing;
}

.widget-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
}

.widget-title i {
    color: var(--accent-blue);
}

.widget-controls {
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity 0.2s;
}

.dashboard-widget:hover .widget-controls {
    opacity: 1;
}

.widget-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius);
    transition: all 0.2s;
}

.widget-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.widget-btn.widget-remove:hover {
    background: var(--accent-red);
    color: white;
}

/* Widget Content */
.widget-content {
    padding: 1rem;
    height: 200px; /* Default height, overridden by widget-h-* classes */
    overflow: auto;
    cursor: default;
}

.widget-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
}

.widget-map {
    height: 100%;
    min-height: 200px;
    border-radius: var(--radius);
}

/* Widget Stat Cards */
.widget-stat-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    height: 100%;
    align-content: flex-start;
}

/* Stat cards adapt to widget width */
.widget-w-large .widget-stat-cards .mini-stat-card,
.widget-large .widget-stat-cards .mini-stat-card {
    flex: 1 1 calc(16.666% - 0.75rem);
    min-width: 100px;
}

.widget-w-medium .widget-stat-cards .mini-stat-card,
.widget-medium .widget-stat-cards .mini-stat-card {
    flex: 1 1 calc(33.333% - 0.75rem);
    min-width: 100px;
}

.widget-w-small .widget-stat-cards .mini-stat-card,
.widget-small .widget-stat-cards .mini-stat-card {
    flex: 1 1 calc(50% - 0.75rem);
    min-width: 80px;
}

.mini-stat-card {
    background: var(--bg-tertiary);
    border-radius: var(--radius);
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: fit-content;
}

.mini-stat-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
}

.mini-stat-icon.blue { background: rgba(81, 187, 232, 0.2); color: var(--accent-blue); }
.mini-stat-icon.green { background: rgba(74, 222, 128, 0.2); color: var(--accent-green); }
.mini-stat-icon.yellow { background: rgba(250, 204, 21, 0.2); color: var(--accent-yellow); }
.mini-stat-icon.red { background: rgba(248, 113, 113, 0.2); color: var(--accent-red); }
.mini-stat-icon.purple { background: rgba(192, 132, 252, 0.2); color: var(--accent-purple); }
.mini-stat-icon.orange { background: rgba(249, 115, 22, 0.2); color: #f97316; }

.mini-stat-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.mini-stat-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 0.125rem;
    white-space: nowrap;
}

/* Widget Alerts List — table-row look (mirrors .data-table on the
 * Routes page). Rows are transparent against the widget card, with a
 * 1px horizontal divider. Last row drops its bottom border. The
 * semantic left-border (severity) stays. */
.widget-alerts-list {
    display: flex;
    flex-direction: column;
}

.widget-alert-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.5rem;
    border-bottom: 1px solid var(--border-color);
    border-left: 3px solid transparent;
    transition: background 0.15s ease;
}

.widget-alert-item:last-child { border-bottom: none; }
.widget-alert-item:hover { background: var(--bg-tertiary); }

.widget-alert-item.critical { border-left-color: var(--accent-red); }
.widget-alert-item.warning { border-left-color: var(--accent-yellow); }
.widget-alert-item.info { border-left-color: var(--accent-blue); }

.widget-alert-item .alert-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}

.widget-alert-item.critical .alert-icon { background: rgba(248, 113, 113, 0.2); color: var(--accent-red); }
.widget-alert-item.warning .alert-icon { background: rgba(250, 204, 21, 0.2); color: var(--accent-yellow); }
.widget-alert-item.info .alert-icon { background: rgba(81, 187, 232, 0.2); color: var(--accent-blue); }

.widget-alert-item .alert-content {
    flex: 1;
    min-width: 0;
}

.widget-alert-item .alert-text {
    display: block;
    font-size: 0.85rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.widget-alert-item .alert-time {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Widget Vehicle List */
.widget-vehicle-list {
    display: flex;
    flex-direction: column;
}

.widget-vehicle-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.5rem;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s ease;
}

.widget-vehicle-item:last-child { border-bottom: none; }
.widget-vehicle-item:hover { background: var(--bg-tertiary); }

.vehicle-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.vehicle-status-dot.moving { background: var(--accent-green); }
.vehicle-status-dot.idle { background: var(--accent-yellow); }
.vehicle-status-dot.stopped { background: var(--text-muted); }
.vehicle-status-dot.offline { background: var(--accent-red); }

.widget-vehicle-item .vehicle-info {
    display: flex;
    justify-content: space-between;
    flex: 1;
}

.widget-vehicle-item .vehicle-reg {
    font-weight: 600;
    font-size: 0.9rem;
}

.widget-vehicle-item .vehicle-speed {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Widget Activity / Drivers / Maintenance / Geofence Lists */
.widget-activity-list, .widget-drivers-list, .widget-maintenance-list, .widget-geofence-list {
    display: flex;
    flex-direction: column;
}

.widget-activity-item, .widget-driver-item, .widget-maintenance-item, .widget-geofence-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.5rem;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s ease;
}

.widget-activity-item:last-child,
.widget-driver-item:last-child,
.widget-maintenance-item:last-child,
.widget-geofence-item:last-child { border-bottom: none; }

.widget-activity-item:hover,
.widget-driver-item:hover,
.widget-maintenance-item:hover,
.widget-geofence-item:hover { background: var(--bg-tertiary); }

.widget-activity-item .activity-icon, .widget-geofence-item .geofence-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border-radius: 50%;
    color: var(--accent-blue);
    flex-shrink: 0;
}

.widget-geofence-item .geofence-icon.entered { color: var(--accent-green); }
.widget-geofence-item .geofence-icon.exited { color: var(--accent-yellow); }

.widget-activity-item .activity-content, .widget-geofence-item .geofence-content {
    flex: 1;
    min-width: 0;
}

.widget-activity-item .activity-text, .widget-geofence-item .geofence-text {
    display: block;
    font-size: 0.85rem;
    color: var(--text-primary);
}

.widget-activity-item .activity-time, .widget-geofence-item .geofence-time {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Widget Driver Item */
.widget-driver-item .driver-rank {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-blue);
    color: white;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
}

.widget-driver-item .driver-name {
    flex: 1;
    font-size: 0.9rem;
}

.widget-driver-item .driver-score {
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius);
}

.widget-driver-item .driver-score.excellent { background: rgba(74, 222, 128, 0.2); color: var(--accent-green); }
.widget-driver-item .driver-score.good { background: rgba(250, 204, 21, 0.2); color: var(--accent-yellow); }

/* Widget Maintenance Item */
.widget-maintenance-item {
    flex-direction: column;
    align-items: flex-start;
}

.widget-maintenance-item .maintenance-vehicle {
    font-weight: 600;
    font-size: 0.9rem;
}

.widget-maintenance-item .maintenance-info {
    display: flex;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Widget Quick Actions */
.widget-quick-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    height: 100%;
}

.quick-action-btn.mini {
    padding: 0.75rem;
    font-size: 0.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.quick-action-btn.mini i {
    font-size: 1.25rem;
}

/* Available Widgets Grid (Modal) */
.available-widgets-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    max-height: 400px;
    overflow-y: auto;
    padding: 0.5rem;
}

.available-widget-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius);
    border: 2px solid transparent;
    transition: all 0.2s;
}

.available-widget-card:hover {
    border-color: var(--accent-blue);
}

.available-widget-card.added {
    border-color: var(--accent-green);
    background: rgba(74, 222, 128, 0.1);
}

.widget-card-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border-radius: var(--radius);
    color: var(--accent-blue);
    flex-shrink: 0;
}

.widget-card-info {
    flex: 1;
    min-width: 0;
}

.widget-card-info h5 {
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.widget-card-info p {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.modal-description {
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.modal-body h4 {
    margin-bottom: 0.75rem;
    font-size: 1rem;
}

/* Vehicle View Modal */
#vehicleViewModal .modal-content {
    max-width: 500px;
}

#vehicleViewModal .vehicle-details {
    padding: 0;
}

#vehicleViewModal .vehicle-details .detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
}

#vehicleViewModal .vehicle-details .detail-row:last-child {
    border-bottom: none;
}

#vehicleViewModal .vehicle-details .detail-label {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

#vehicleViewModal .vehicle-details .detail-value {
    font-weight: 500;
    text-align: right;
}

.btn-info {
    background-color: #0ea5e9;
    color: white;
}

.btn-info:hover {
    background-color: #0284c7;
}

/* ========================================
   DEVICE MANAGEMENT STYLES
   ======================================== */

/* Stats Row */
.stats-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 1200px) {
    .stats-row {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .stats-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Filters Row */
.filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem;
    align-items: flex-end;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 150px;
}

.filter-group label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.filter-group .form-control {
    min-width: 150px;
}

@media (max-width: 768px) {
    .filters-row {
        flex-direction: column;
    }

    .filter-group {
        width: 100%;
    }

    .filter-group .form-control {
        width: 100%;
    }
}

/* Device Health Indicator */
.health-indicator {
    font-size: 1rem;
    display: inline-block;
}

.health-good {
    color: var(--accent-green);
}

.health-warning {
    color: var(--accent-yellow);
}

.health-critical {
    color: var(--accent-red);
}

/* Device Status Badge Extensions */
.status-badge.warning {
    background: rgba(250, 204, 21, 0.2);
    color: var(--accent-yellow);
}

.status-badge.critical {
    background: rgba(248, 113, 113, 0.2);
    color: var(--accent-red);
}

/* Inventory states that are neither good nor bad — In Warehouse, Decommissioned.
   Muted on purpose: red belongs to the Connection column, which is the live one. */
.status-badge.neutral {
    background: rgba(100, 116, 139, 0.2);
    color: var(--text-muted);
}

/* ⓘ next to a column header, and the legend panel it opens. */
.th-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin-left: 6px;
    border: 1px solid var(--text-muted);
    border-radius: 50%;
    color: var(--text-muted);
    font-size: 0.6rem;
    font-weight: 700;
    font-style: italic;
    line-height: 1;
    cursor: help;
    vertical-align: middle;
    user-select: none;
}

.th-info:hover,
.th-info:focus-visible {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    outline: none;
}

/* Fixed, and appended to <body>, so `.table-responsive`'s overflow cannot clip it.
   Also resets the header's uppercase/letter-spacing, which it would otherwise
   inherit if it were ever nested inside the <th>. */
.legend-popover {
    position: fixed;
    z-index: 4000;
    width: 250px;
    max-width: calc(100vw - 16px);
    padding: 12px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    white-space: normal;
}

.legend-title {
    font-weight: 600;
    font-size: 0.8rem;
    margin-bottom: 4px;
}

.legend-title-sub {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}

.legend-note {
    margin: 0 0 8px;
    color: var(--text-secondary);
    font-size: 0.72rem;
    line-height: 1.35;
}

.legend-rows {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.legend-row {
    display: flex;
    align-items: center;
    gap: 7px;
}

.legend-row .legend-label {
    flex: 1;
}

.legend-row .legend-rule {
    color: var(--text-muted);
    font-size: 0.72rem;
    white-space: nowrap;
}

.legend-row .health-indicator {
    font-size: 0.85rem;
}

/* Connection cell: coloured dot + label on one line, GPS quality muted beneath. */
.device-conn {
    white-space: nowrap;
}

.device-conn small {
    display: block;
    color: var(--text-muted);
    font-size: 0.75rem;
}

/* Button Success/Warning */
.btn-success {
    background: var(--accent-green);
    color: white;
}

.btn-success:hover {
    background: #16a34a;
}

.btn-warning {
    background: var(--accent-yellow);
    color: #000;
}

.btn-warning:hover {
    background: #ca8a04;
}

/* Device View Modal */
.device-view-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.view-section {
    background: var(--bg-tertiary);
    padding: 1rem;
    border-radius: var(--radius);
}

.view-section h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--accent-blue);
}

.view-section h4 i {
    font-size: 1rem;
}

.view-section .detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0;
    font-size: 0.85rem;
}

.view-section .detail-label {
    color: var(--text-secondary);
}

.view-section .detail-value {
    font-weight: 500;
    text-align: right;
    max-width: 60%;
    word-break: break-word;
}

/* Device Modal Form Layout */
#deviceModal .modal-content {
    max-width: 700px;
}

#deviceModal .modal-body {
    max-height: 70vh;
}

/* Device Form Sections */
.form-section {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.form-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.form-section-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent-blue);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Device Assign Modal */
#deviceAssignModal .modal-content {
    max-width: 500px;
}

/* Device View Modal */
#deviceViewModal .modal-content {
    max-width: 700px;
}

#deviceViewModal .modal-body {
    max-height: 70vh;
}

/* Device Filter Bar */
.device-filters {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.device-filters .filter-select {
    min-width: 150px;
}

.device-filters .search-input {
    min-width: 200px;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.device-filters .search-input:focus {
    outline: none;
    border-color: var(--accent-blue);
}

/* Device Table Actions */
.data-table td .btn-success,
.data-table td .btn-warning {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

/* Device Health Widget */
.device-health-summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.device-health-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius);
}

.device-health-item .health-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.25rem;
}

.device-health-item .health-icon.good {
    background: rgba(74, 222, 128, 0.2);
    color: var(--accent-green);
}

.device-health-item .health-icon.warning {
    background: rgba(250, 204, 21, 0.2);
    color: var(--accent-yellow);
}

.device-health-item .health-icon.critical {
    background: rgba(248, 113, 113, 0.2);
    color: var(--accent-red);
}

.device-health-item .health-icon.offline {
    background: rgba(100, 116, 139, 0.2);
    color: var(--text-muted);
}

.device-health-item .health-info h4 {
    font-size: 1.25rem;
    font-weight: 700;
}

.device-health-item .health-info p {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    .device-view-grid {
        grid-template-columns: 1fr;
    }

    .device-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .device-filters .filter-select,
    .device-filters .search-input {
        width: 100%;
    }

    .device-health-summary {
        grid-template-columns: 1fr;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Chatbot Widget
   ═══════════════════════════════════════════════════════════════════════════ */

/* Floating Action Button */
.chatbot-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1090;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: var(--accent-primary, #51bbe8);
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(81, 187, 232, 0.4);
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chatbot-fab:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(81, 187, 232, 0.5);
}

.chatbot-fab.active {
    background: var(--text-secondary, #475569);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Chat Panel */
.chatbot-panel {
    position: fixed;
    bottom: 90px;
    right: 24px;
    z-index: 1090;
    width: 400px;
    height: 540px;
    background: var(--bg-secondary, #fff);
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    border: 1px solid var(--border-color, #e2e8f0);
}

.chatbot-panel.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Header */
.chatbot-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--accent-primary, #51bbe8);
    color: #fff;
    flex-shrink: 0;
}

.chatbot-header-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chatbot-header-info > i {
    font-size: 24px;
    opacity: 0.9;
}

.chatbot-header-title {
    font-weight: 600;
    font-size: 15px;
    line-height: 1.2;
}

.chatbot-header-subtitle {
    font-size: 12px;
    opacity: 0.8;
}

.chatbot-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.chatbot-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Messages Area */
.chatbot-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--bg-primary, #f8fafc);
}

.chatbot-messages::-webkit-scrollbar {
    width: 5px;
}

.chatbot-messages::-webkit-scrollbar-thumb {
    background: var(--border-color, #ccc);
    border-radius: 4px;
}

/* Message Bubbles */
.chatbot-message {
    display: flex;
    flex-direction: column;
    max-width: 88%;
    animation: chatFadeIn 0.25s ease;
}

.chatbot-message.user {
    align-self: flex-end;
}

.chatbot-message.bot {
    align-self: flex-start;
}

.chatbot-bubble {
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13.5px;
    line-height: 1.55;
    word-wrap: break-word;
}

.chatbot-message.user .chatbot-bubble {
    background: var(--accent-primary, #51bbe8);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.chatbot-message.bot .chatbot-bubble {
    background: var(--bg-secondary, #fff);
    color: var(--text-primary, #1e293b);
    border: 1px solid var(--border-color, #e2e8f0);
    border-bottom-left-radius: 4px;
}

.chatbot-bubble strong {
    font-weight: 600;
}

/* Long-running 'thinking' hint inside the in-progress bubble. Hidden until
   30 s elapses; surfaces a longer copy at 90 s so the user knows the
   assistant didn't lock up — Qwen3 14B CPU inference can take minutes. */
.chatbot-thinking-hint {
    display: block;
    margin-top: 6px;
    font-size: 11.5px;
    opacity: 0.7;
    font-style: italic;
}

.chatbot-bubble em {
    color: var(--text-secondary, #475569);
    font-style: italic;
}

/* Quick-Action Chips */
.chatbot-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.chatbot-chip {
    padding: 5px 12px;
    border-radius: 16px;
    border: 1px solid var(--accent-primary, #51bbe8);
    background: transparent;
    color: var(--accent-primary, #51bbe8);
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.chatbot-chip:hover {
    background: var(--accent-primary, #51bbe8);
    color: #fff;
}

/* ── Inline chart / table inside a chatbot bubble (used by tools that emit
   view: chart or view: table) ── */
.chatbot-view-title {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}
.chatbot-table {
    margin-top: 6px;
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.chatbot-table th, .chatbot-table td {
    border: 1px solid var(--border);
    padding: 4px 8px;
    text-align: left;
    white-space: nowrap;
}
.chatbot-table th {
    background: var(--bg-tertiary, rgba(255,255,255,0.04));
    font-weight: 600;
}
.chatbot-view-chart {
    margin-top: 8px;
    height: 200px;
    position: relative;
}

/* Input Area */
.chatbot-input-area {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-top: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-secondary, #fff);
    gap: 8px;
    flex-shrink: 0;
}

.chatbot-input {
    flex: 1;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 20px;
    padding: 9px 16px;
    font-size: 13.5px;
    background: var(--bg-primary, #f8fafc);
    color: var(--text-primary, #1e293b);
    outline: none;
    transition: border-color 0.15s;
}

.chatbot-input:focus {
    border-color: var(--accent-primary, #51bbe8);
}

.chatbot-input::placeholder {
    color: var(--text-muted, #94a3b8);
}

.chatbot-send {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: var(--accent-primary, #51bbe8);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, transform 0.1s;
    flex-shrink: 0;
}

.chatbot-send:hover {
    background: var(--accent-primary-hover, #3a9fcc);
    transform: scale(1.05);
}

@keyframes chatFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive — smaller screens */
@media (max-width: 480px) {
    .chatbot-panel {
        width: calc(100vw - 16px);
        height: calc(100vh - 120px);
        right: 8px;
        bottom: 80px;
        border-radius: var(--radius, 8px);
    }

    .chatbot-fab {
        bottom: 16px;
        right: 16px;
    }
}

/* ===== Routes module ===== */

.route-editor-modal {
    width: 92vw;
    max-width: 1400px;
    height: 88vh;
    display: flex;
    flex-direction: column;
}

.route-editor-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.route-editor-sidebar {
    width: 380px;
    flex-shrink: 0;
    overflow-y: auto;
    padding: 16px;
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.route-editor-sidebar label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 6px;
}

.route-editor-sidebar h4 {
    margin: 8px 0 4px 0;
    font-size: 0.95rem;
}

.route-editor-sidebar .re-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.route-editor-sidebar .re-hint {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 4px 0;
}

.re-point-mode {
    display: flex;
    gap: 4px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.re-point-mode .btn {
    flex: 1;
    font-size: 0.82rem;
}

.re-point-mode .btn.btn-primary {
    background: var(--accent-blue);
    color: #fff;
}

.re-points-list, .re-presence-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.re-point-row {
    display: grid;
    grid-template-columns: auto auto auto 1fr auto auto auto;
    gap: 6px;
    align-items: center;
    padding: 6px 8px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    font-size: 0.85rem;
}

/* Driving-order badge on the left of every row: waypoints 1..N, Start/End as S/E */
.re-point-row .re-point-seq {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--accent-blue, #2563eb);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
}
.re-point-row .re-point-seq-start { background: #10b981; }
.re-point-row .re-point-seq-end { background: #ef4444; }

.re-point-row .re-point-kind {
    font-weight: 600;
    color: var(--accent-blue);
    font-size: 0.75rem;
    text-transform: uppercase;
}

.re-point-row .re-point-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.re-point-row .re-point-coords {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.re-point-row .re-icon-btn {
    background: transparent;
    border: 1px solid var(--border-color, #d1d5db);
    cursor: pointer;
    color: var(--text-muted, #9ca3af);
    padding: 4px 6px;
    border-radius: 4px;
    min-width: 28px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.re-point-row .re-icon-btn:hover { color: var(--accent-blue, #2563eb); border-color: var(--accent-blue, #2563eb); }

/* Bookmark turns solid-blue when this point is flagged as a presence point */
.re-point-row .re-presence-btn.is-on {
    color: #fff;
    background: var(--accent-blue, #2563eb);
    border-color: var(--accent-blue, #2563eb);
}

.re-point-row .re-delete-btn:hover {
    color: #fff;
    background: var(--accent-red, #ef4444);
    border-color: var(--accent-red, #ef4444);
}

/* Waypoint drag handle (Start/End render an empty grip cell so all rows align) */
.re-point-row .re-point-grip {
    width: 12px;
    display: inline-flex;
    justify-content: center;
    color: var(--text-muted, #9ca3af);
    opacity: 0.55;
}
.re-point-row.re-point-wp,
.re-point-row.re-point-wp .re-point-grip { cursor: grab; }

/* Route editor: geofence selector control — left side, under the +/- zoom buttons */
.re-geofence-control { position: absolute; top: 78px; left: 10px; z-index: 500; }
.re-geofence-control .re-gf-count { font-size: 11px; opacity: 0.9; margin-left: 2px; }
.re-geofence-panel {
    position: absolute; top: 100%; left: 0; margin-top: 4px;
    width: 250px; background: var(--bg-secondary, #fff);
    border: 1px solid var(--border-color, #d1d5db); border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,.18); padding: 8px;
}
.re-geofence-panel .form-control { margin-bottom: 6px; width: 100%; }
.re-gf-all { display: flex; align-items: center; gap: 8px; padding: 2px 6px 6px; font-size: 13px; font-weight: 600; cursor: pointer; border-bottom: 1px solid var(--border-color, #e5e7eb); margin-bottom: 6px; }
.re-geofence-panel-list { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.re-gf-item { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 4px; cursor: pointer; font-size: 13px; }
.re-gf-item:hover { background: var(--bg-tertiary, #f3f4f6); }
.re-gf-swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; border: 1px solid rgba(0,0,0,.15); }
.re-gf-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.re-gf-empty { color: var(--text-muted, #9ca3af); font-size: 13px; padding: 8px; text-align: center; }

/* Alert rule: "Selected vehicles only" picker */
.alert-vehicle-list {
    max-height: 200px; overflow-y: auto; margin-top: 4px;
    border: 1px solid var(--border-color, #d1d5db); border-radius: 6px; padding: 4px;
    display: flex; flex-direction: column; gap: 2px;
}
.alert-vehicle-item { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 4px; cursor: pointer; font-size: 13px; }
.alert-vehicle-item:hover { background: var(--bg-tertiary, #f3f4f6); }

/* Report modal: multi-select vehicle picker (Journey Timeline + Journey report) */
.rvp {
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 8px;
    padding: 8px;
    background: var(--bg-primary, #fff);
}
/* Side-by-side layout: All-vehicles toggle + selected chips on the left, search
   + list on the right. Halves the picker's height, which matters because it sits
   inside the results-page filter panel and a 500px report modal. */
.rvp-cols {
    display: grid;
    grid-template-columns: minmax(140px, 0.85fr) minmax(0, 1.15fr);
    gap: 12px;
    align-items: start;
}
.rvp-col { min-width: 0; }
.rvp-col-list {
    border-left: 1px solid var(--border-color, #e5e7eb);
    padding-left: 12px;
}
.rvp-summary {
    display: flex; flex-wrap: wrap; gap: 6px;
    min-height: 26px;
    max-height: 132px; overflow-y: auto;
}
.rvp-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--bg-tertiary, #eef2ff);
    color: var(--text-primary, #1f2937);
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 999px; padding: 2px 8px; font-size: 12px; line-height: 1.6;
}
.rvp-chip-all { background: var(--accent-primary, #2563eb); color: #fff; border-color: transparent; }
.rvp-chip-all i { font-size: 11px; }
.rvp-chip-x {
    background: none; border: none; cursor: pointer;
    color: inherit; opacity: 0.7; font-size: 15px; line-height: 1; padding: 0;
}
.rvp-chip-x:hover { opacity: 1; }
.rvp-empty-sel { color: var(--text-muted, #9ca3af); font-size: 12px; font-style: italic; align-self: center; }
.rvp-all {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600; cursor: pointer;
    padding: 2px 2px 8px;
}
.rvp-all .rvp-count { color: var(--text-muted, #9ca3af); font-weight: 400; }
.rvp-search {
    width: 100%; margin: 0 0 6px;
    padding: 6px 8px; font-size: 13px;
    border: 1px solid var(--border-color, #d1d5db); border-radius: 6px;
    background: var(--bg-primary, #fff); color: var(--text-primary, #1f2937);
    box-sizing: border-box;
}
.rvp-list { max-height: 148px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.rvp-item { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 4px; cursor: pointer; font-size: 13px; }
/* Registration + " — name" can be longer than the narrower list column. */
.rvp-item > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rvp-item:hover { background: var(--bg-tertiary, #f3f4f6); }
.rvp-empty { color: var(--text-muted, #9ca3af); font-size: 13px; padding: 8px; text-align: center; }

.re-presence-list li {
    padding: 4px 8px;
    font-size: 0.85rem;
}

.re-summary {
    display: flex;
    gap: 16px;
    padding: 8px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    font-size: 0.9rem;
}

.re-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.route-editor-map-container {
    flex: 1;
    position: relative;
}

/* Route editor map markers — same style as POI pins but kind-coloured */
.re-point-icon { background: transparent; border: none; }
.re-point-pin {
    width: 28px;
    height: 28px;
    color: #fff;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.re-point-pin i {
    transform: rotate(45deg);
    font-size: 13px;
}
/* Waypoint pins carry their order number — counter-rotate it out of the pin's -45deg */
.re-point-pin .re-point-num {
    transform: rotate(45deg);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.routes-list-card { padding: 0; }
.routes-list-card .data-table th,
.routes-list-card .data-table td { padding: 10px 12px; }


/* Active route status panel — progress bar */
.route-progress-bar {
    width: 100%;
    height: 6px;
    background: var(--bg-tertiary, #e5e7eb);
    border-radius: 3px;
    overflow: hidden;
    margin: 4px 0 8px 0;
}
.route-progress-fill {
    height: 100%;
    background: linear-gradient(to right, #10b981, #2563eb);
    transition: width 0.4s ease-out;
}

/* Unassign-route button in the active route card */
.trip-row-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
}
.route-cancel-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Phase C: presence-point row in route editor */
.re-presence-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.re-presence-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 8px;
    padding: 8px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    margin-bottom: 4px;
}
.re-presence-label {
    font-weight: 600;
    grid-column: 1;
}
.re-presence-coords {
    grid-column: 1;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.re-presence-inputs {
    grid-column: 1;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.re-presence-inputs label {
    font-size: 0.78rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}
.re-presence-inputs input {
    width: 70px;
    padding: 2px 4px;
    font-size: 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    background: var(--bg-primary);
    color: var(--text-primary);
}
.re-presence-row .re-icon-btn {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
}

/* Geofence picker modal */
.gp-list {
    max-height: 50vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.gp-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}
.gp-item:hover { background: var(--bg-tertiary); }
.gp-item i { color: var(--accent-blue); }

/* Presence-point status list in the active route card */
.presence-summary-row { margin-top: 6px; }
.presence-list {
    list-style: none;
    padding: 0;
    margin: 4px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.presence-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    font-size: 0.85rem;
}
.presence-row .presence-label {
    flex: 0 0 auto;
    font-weight: 500;
}

/* Routes table: assigned-to + start-time cells */
.route-assigned-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px 2px 8px;
    margin: 2px 4px 2px 0;
    background: var(--bg-tertiary);
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 500;
}
.route-unassign-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-muted, #9ca3af);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    padding: 0;
    transition: background 0.15s, color 0.15s;
}
.route-unassign-btn:hover {
    background: var(--accent-red, #ef4444);
    color: #fff;
}
.route-start-time {
    font-size: 0.85rem;
    color: var(--text-primary);
}

/* Route notification settings modal */
.rn-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
}
.rn-table th,
.rn-table td {
    text-align: left;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
}
.rn-table th:nth-child(2),
.rn-table th:nth-child(3),
.rn-table td:nth-child(2),
.rn-table td:nth-child(3) {
    text-align: center;
    width: 100px;
}
.rn-table tbody tr:hover {
    background: var(--bg-tertiary);
}

/* Multi-select assign modal */
.ar-toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 6px 0;
}
.ar-toolbar .ar-count {
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.ar-vehicle-list {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 4px;
    background: var(--bg-primary);
    margin-bottom: 8px;
}
.ar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 0.9rem;
}
.ar-row:hover { background: var(--bg-tertiary); }
.ar-row .ar-sub {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* Vehicle groups modal — reuses .ar-row / .ar-vehicle-list for both the group list and the
   membership checklist. Only the colour dot and the per-row buttons are new. */
.group-swatch {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid var(--border-color);
}
/* The group list has actions after .ar-sub, so .ar-sub's margin-left:auto is what pushes both
   to the right; this keeps the buttons from being squeezed by a long group name. */
.group-row-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

/* Routes table: per-pill share button (sits between reg + unassign) */
.route-share-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--accent-blue, #2563eb);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    padding: 0;
    transition: background 0.15s, color 0.15s;
}
.route-share-btn:hover {
    background: var(--accent-blue, #2563eb);
    color: #fff;
}

/* Route share modal — existing-links list */
.rs-row {
    padding: 8px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    margin-bottom: 6px;
}
.rs-row-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.rs-row-url {
    display: flex;
    gap: 4px;
}
.rs-row-url input { flex: 1; }

/* Routes page: List ↔ History view toggle */
.routes-view-toggle {
    display: inline-flex;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
}
.rv-btn {
    padding: 6px 14px;
    border: none;
    background: var(--bg-primary);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
}
.rv-btn.active {
    background: var(--accent-blue, #2563eb);
    color: #fff;
}
.routes-filters-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    align-items: center;
}
.routes-filters-bar.hidden { display: none; }

/* History table — tighter rows, slightly smaller font for 16 columns */
#routesHistoryTable th,
#routesHistoryTable td {
    font-size: 0.82rem;
    padding: 6px 8px;
    white-space: nowrap;
}

/* Journey report — range mode tabs */
.range-mode-tabs {
    display: inline-flex;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
}
.range-mode-tabs .rm-tab {
    padding: 6px 12px;
    border: none;
    background: var(--bg-primary);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
}
.range-mode-tabs .rm-tab + .rm-tab { border-left: 1px solid var(--border-color); }
.range-mode-tabs .rm-tab.active {
    background: var(--accent-blue, #2563eb);
    color: #fff;
}

/* "Yesterday" resolves its own date, so it shows the day read-only instead of an
   input — same footprint as the date field it replaces, so the form doesn't jump. */
.rm-static-date {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border: 1px dashed var(--border-color);
    border-radius: 6px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}
.rm-static-date i { color: var(--accent-blue, #2563eb); }

/* Journey report — period nav (Prev/Next around the date label) */
.report-period-nav {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.report-period-nav .btn { padding: 4px 10px; }

/* Route Replay / Route Report modal */
.route-replay-modal {
    width: 96vw;
    max-width: 1600px;
    height: 92vh;
    display: flex;
    flex-direction: column;
}
.route-replay-body {
    flex: 1;
    display: flex;
    overflow: hidden;
}
.rr-map-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.rr-sidebar {
    width: 320px;
    flex-shrink: 0;
    border-left: 1px solid var(--border-color);
    padding: 12px;
    overflow-y: auto;
    background: var(--bg-secondary);
}
.rr-sidebar h4 { margin: 12px 0 6px 0; }
#rrMap { flex: 1; min-height: 0; }

.rr-timeline {
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
    padding: 8px 12px;
}
.rr-timeline-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.rr-timeline-row input[type=range] {
    flex: 1;
}
.rr-time {
    min-width: 200px;
    font-family: monospace;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.rr-fuel {
    height: 140px;
    margin-top: 10px;
    padding: 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
}
.rr-fuel canvas { width: 100% !important; height: 100% !important; }

.rr-fuel-empty {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--text-muted, #6b7280);
    gap: 4px;
    padding: 4px 12px;
}
.rr-fuel-empty-icon { font-size: 28px; opacity: 0.5; }
.rr-fuel-empty-stat { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.rr-fuel-empty-value { font-size: 20px; font-weight: 600; color: var(--text-primary, #1f2937); }
.rr-fuel-empty-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.rr-fuel-empty-msg { font-size: 13px; }
.rr-fuel-empty-note { font-size: 11px; opacity: 0.8; max-width: 100%; }

.rr-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}
.rr-stat {
    background: var(--bg-tertiary);
    border-radius: 6px;
    padding: 8px;
    display: flex;
    flex-direction: column;
}
.rr-stat .lbl { font-size: 0.75rem; color: var(--text-muted); }
.rr-stat .val { font-size: 1rem; font-weight: 600; }
/* "Back to all vehicles" spans the full stats grid, sitting above the cards. */
.rr-back-all { grid-column: 1 / -1; width: 100%; justify-content: center; }

/* Direction-arrow markers on the route trail: a white halo makes the colored
   arrowheads stand out against any basemap (streets, satellite, dark). */
.rr-arrow i {
    text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 2px #fff;
    -webkit-text-stroke: 0.5px rgba(255, 255, 255, 0.65);
}

/* Alert History report — per-row "show on map" action + the alert-location modal. */
.alert-map-btn {
    background: none;
    border: none;
    padding: 2px 4px;
    cursor: pointer;
    font: inherit;
    color: #51bbe8;
    white-space: nowrap;
}
.alert-map-btn:hover { text-decoration: underline; }
.alert-map-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    margin-bottom: 10px;
    font-size: 0.9rem;
    color: var(--text-muted);
}
.alert-map-meta a { color: #51bbe8; text-decoration: none; }
.alert-map-meta a:hover { text-decoration: underline; }
.alert-map-container {
    height: 60vh;
    min-height: 320px;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
}

.rr-events {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: calc(100vh - 380px);
    overflow-y: auto;
}
.rr-event {
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    gap: 8px;
    font-size: 0.85rem;
    border-left: 3px solid transparent;
}
.rr-event:hover { background: var(--bg-tertiary); }
.rr-event.success { border-left-color: #10b981; }
.rr-event.danger { border-left-color: #ef4444; }
.rr-event.warn { border-left-color: #f59e0b; }
.rr-event.info { border-left-color: #0ea5e9; }
.rr-event.muted { border-left-color: #6b7280; }
.rr-event-time { font-family: monospace; color: var(--text-muted); font-size: 0.78rem; }

/* Route Replay map pins */
.rr-pin { background: transparent; border: none; }
.rr-pin-inner {
    width: 26px; height: 26px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.rr-pin-inner i { transform: rotate(45deg); font-size: 12px; }

/* Route Report: header vehicle filter (all vehicles ⇄ one) */
.rr-header-bar { gap: 12px; flex-wrap: wrap; }
.rr-vehicle-filter { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.rr-vehicle-filter label { font-size: 0.85rem; color: var(--text-secondary); margin: 0; }
.rr-vehicle-filter select {
    padding: 5px 8px; font-size: 0.85rem;
    border: 1px solid var(--border-color, #d1d5db); border-radius: 6px;
    background: var(--bg-primary, #fff); color: var(--text-primary, #1f2937);
    max-width: 220px;
}

/* Route Report: clickable color legend (all-vehicles overview) */
.rr-legend {
    background: var(--bg-secondary, #fff);
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 8px;
    padding: 8px 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
    max-height: 44vh; overflow-y: auto;
    font-size: 12px; min-width: 130px;
}
.rr-legend-title { font-weight: 600; margin-bottom: 6px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; font-size: 10px; }
.rr-legend-item { display: flex; align-items: center; gap: 8px; padding: 3px 4px; border-radius: 4px; cursor: pointer; }
.rr-legend-item:hover { background: var(--bg-tertiary, #f3f4f6); }
.rr-legend-swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; border: 1px solid rgba(0,0,0,.15); display: inline-block; }
.rr-legend-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Route Report: per-vehicle summary table (all-vehicles overview) */
.rr-multi-stats { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.rr-multi-stats th {
    text-align: left; font-weight: 600; color: var(--text-muted);
    padding: 4px 6px; border-bottom: 1px solid var(--border-color); font-size: 0.72rem; text-transform: uppercase; letter-spacing: .03em;
}
.rr-multi-stats td { padding: 5px 6px; border-bottom: 1px solid var(--border-color); }
.rr-ms-row { cursor: pointer; }
.rr-ms-row:hover { background: var(--bg-tertiary); }
.rr-ms-name { font-weight: 600; }
.rr-multi-hint { font-size: 0.75rem; color: var(--text-muted); margin: 10px 2px 0; display: flex; align-items: flex-start; gap: 6px; }

/* Reports rendered inline in the page (replaces the modal popup). */
.page-report-inline {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}
.page-report-inline.hidden { display: none; }

/* The reports page is a flex column so the inline panel can claim leftover height */
#reportsPage.page.active {
    display: flex;
    flex-direction: column;
}
#reportsPage .page-header { flex-shrink: 0; }
#reportsPage .reports-grid { flex-shrink: 0; }

/* Results-page collapsible filter panel + swappable results body */
.report-results-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.report-filter-panel {
    flex-shrink: 0;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-primary);
}
.report-filter-panel.hidden { display: none; }
.report-filter-panel .rfp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    user-select: none;
}
.report-filter-panel .rfp-header:hover { background: var(--bg-secondary); }
.report-filter-panel .rfp-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    min-width: 0;
}
.report-filter-panel .rfp-summary {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.report-filter-panel .rfp-caret {
    transition: transform 0.2s;
    flex-shrink: 0;
    color: var(--text-muted);
}
.report-filter-panel.collapsed .rfp-caret { transform: rotate(-90deg); }
.report-filter-panel.collapsed .rfp-body { display: none; }
.report-filter-panel .rfp-body {
    padding: 12px 16px 16px;
    border-top: 1px solid var(--border-color);
    max-height: 55vh;
    overflow-y: auto;
}
.report-filter-panel .rfp-actions {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
}

/* Inline-report internal layout */
.page-report-inline .ri-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-primary);
    flex-shrink: 0;
}
.page-report-inline .ri-header h2 { margin: 0; font-size: 1.1rem; }
.page-report-inline .ri-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.page-report-inline .ri-body {
    flex: 1;
    overflow: auto;
    padding: 16px;
    min-height: 0;
}

/* Route-replay panel uses the full body as a flex grid (map | sidebar + chart) */
.page-report-inline .ri-body.route-replay-body {
    display: flex;
    overflow: hidden;
    padding: 0;
}
.page-report-inline .rr-map-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}
.page-report-inline #rrMap { flex: 1; min-height: 0; }
.page-report-inline .rr-sidebar {
    width: 320px;
    flex-shrink: 0;
    border-left: 1px solid var(--border-color);
    padding: 12px;
    overflow-y: auto;
    background: var(--bg-secondary);
}

/* Route Replay title nav (Prev / Next chevrons next to the period text) */
.page-report-inline .rr-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 1.05rem;
    flex-wrap: wrap;
}
.rr-nav-btn {
    padding: 4px 10px;
}
.rr-title-text { font-weight: 500; }

/* ===== Device messages — the admin's diagnostic log =====
   docs/plans/device-diagnostics.md */

.page-header-subject {
    font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-left: 6px;
}

.device-messages-count {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 500;
}

.device-messages-pager {
    display: flex;
    align-items: center;
    gap: 8px;
}

.device-messages-table tbody tr {
    cursor: pointer;
}

/* Three states, as the reference screen has: a clean message with a live fix, one that
   arrived without a fix, and one we could not use. Left border rather than a full row
   tint so the rows stay readable in dark mode. */
.device-messages-table tbody tr.dm-ok    { border-left: 3px solid var(--success, #16a34a); }
.device-messages-table tbody tr.dm-nofix { border-left: 3px solid var(--warning, #f59e0b); }
.device-messages-table tbody tr.dm-error { border-left: 3px solid var(--danger, #dc2626); }

.device-messages-table .dm-summary {
    font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
    white-space: nowrap;
}

/* The hex is truncated in the cell with the whole value in the title. Muted because it is
   reference material — the Decoded Content column is what is read. */
.device-messages-table .dm-content {
    font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
    font-size: 0.78rem;
    color: var(--text-muted);
    max-width: 340px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.device-messages-table .dm-error-cell {
    color: var(--danger, #dc2626);
    font-size: 0.82rem;
}

.table-placeholder {
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
}

.filter-group-check {
    display: flex;
    align-items: flex-end;
}

/* ----- One message, decoded ----- */

.device-message-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 12px;
}

.dm-detail-section {
    margin-bottom: 16px;
}

.dm-detail-section h4 {
    margin: 0 0 8px;
    font-size: 0.9rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dm-detail-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 8px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    font-size: 0.86rem;
}

.dm-detail-row:last-child { border-bottom: none; }

.dm-detail-label { color: var(--text-secondary); }

.dm-detail-value {
    font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
    text-align: right;
}

.dm-detail-code {
    color: var(--text-muted);
    font-size: 0.78rem;
}

/* A code the catalog does not name yet. Visible on purpose — it is what lets an admin
   report one so it can be named. */
.dm-detail-unknown .dm-detail-label { font-style: italic; color: var(--text-muted); }

.dm-detail-error .dm-detail-value { color: var(--danger, #dc2626); }

.dm-detail-hex {
    font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
    font-size: 0.76rem;
    background: var(--bg-secondary, #f8fafc);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
    padding: 8px;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-all;
}

/* FMS test — the four readings under the badge. docs/plans/device-diagnostics.md §7 */
.install-check-fms {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.install-check-fms-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.8rem;
    font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
}

/* "not reported" is not zero and must not look like a reading. Muted and italic, never
   red: one missing value on an otherwise working CAN bus is a gap, not a fault. */
.install-check-fms-missing {
    color: var(--text-muted);
    font-style: italic;
}