body {
}

@media screen and (min-width: 401px) and (max-width: 1024px) {
    .tablet-hidden {
        display: none;
    }
}

@media screen and (max-width: 400px) {
    .mobile-hidden {
        display: none;
    }
}

:root {
    font-size: 16px;
    height: 100%;
    --tblr-gray-50: #f8fafc;
    --tblr-gray-100: #f1f5f9;
    --tblr-gray-200: #e2e8f0;
    --tblr-gray-300: #c8d3e1;
    --tblr-gray-400: #9ba9be;
    --tblr-gray-500: #6c7a91;
    --tblr-gray-600: #49566c;
    --tblr-gray-700: #313c52;
    --tblr-gray-800: #1d273b;
    --tblr-gray-900: #0f172a;
    --tblr-gray-50-rgb: 248,250,252;
    --tblr-gray-100-rgb: 241,245,249;
    --tblr-gray-200-rgb: 226,232,240;
    --tblr-gray-300-rgb: 200,211,225;
    --tblr-gray-400-rgb: 155,169,190;
    --tblr-gray-500-rgb: 108,122,145;
    --tblr-gray-600-rgb: 73,86,108;
    --tblr-gray-700-rgb: 49,60,82;
    --tblr-gray-800-rgb: 29,39,59;
    --tblr-gray-900-rgb: 15,23,42;
    --tblr-card-bg: #ffffff;
    --tblr-card-bg-rgb: 255,255,255;
    --tblr-border-color: #e4e5e7;
    --tblr-border-color-light: #f2f2f3;
    --tblr-icon-color: var(--tblr-gray-500);
    --tblr-disabled-bg: var(--tblr-gray-100);
    --tblr-primary-rgb: 151,106,196;
    --tblr-primary: #206bc4;
    --tblr-link-color: ;

    /* Brand colors — defaults, overridden per-provider by CssVariableGenerator */
    --brand-primary: #206bc4;
    --brand-danger: #d63939;
    --brand-success: #2fb344;
    --brand-warning: #f59f00;
    --brand-info: #4299e1;
    --brand-button: var(--brand-primary);
    --brand-radius: 4px;

    /* ── Modal Design Tokens ──────────────────────── */
    --modal-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    --modal-border: 1px solid #cbd5e1;
    --modal-radius: 12px;
    --modal-header-bg: #fff;
    --modal-body-bg: #f1f5f9;
    --modal-footer-bg: #fff;
    --modal-header-border: 1px solid #e2e8f0;
    --modal-footer-border: 1px solid #e2e8f0;

}
.sticky-top {
    z-index: 1030;
}

/* Navbar collapse on mobile — ensure expanded menu is above sidebar and scrollable */
@media screen and (max-width: 767.98px) {
    .navbar-collapse.show,
    .navbar-collapse.collapsing {
        background: rgb(15, 23, 42);
        max-height: calc(100vh - 56px);
        overflow-y: auto;
    }

    .navbar .dropdown-menu.show {
        background: rgba(255,255,255,0.08);
        border: none;
        padding: 0 0 0 12px;
    }
}


.easepick-wrapper {
    z-index: 1 !important;
}

.pagination {
    margin-left: auto;
    margin-right: auto;
}

.pagination li {
    text-align: center;
}

pagination li, a {
    min-width: 1.75rem !important;
    border-radius: 4px;
    position: relative;
    display: block;
    padding: var(--tblr-pagination-padding-y) var(--tblr-pagination-padding-x);
    font-size: var(--tblr-pagination-font-size);
    color: var(--tblr-pagination-color);
    background-color: var(--tblr-pagination-bg);
    border: var(--tblr-pagination-border-width) solid var(--tblr-pagination-border-color);
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.pagination li.active {
    min-width: 1.75rem !important;
    border-radius: 4px;
    position: relative;
    padding: var(--tblr-pagination-padding-y) var(--tblr-pagination-padding-x);
    display: block;
    color: #fff;
    background-color: var(--brand-primary);
}

/* ── Navbar Select Styling ──────────────────────── */
/* Selects inside dark navbars: transparent bg, white text, rounded */
.navbar-dark .form-select,
.navbar-selectors-row .form-select {
    background-color: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    border-radius: var(--tblr-border-radius, 4px);
}

.navbar-dark .form-select:focus,
.navbar-selectors-row .form-select:focus {
    background-color: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    color: #ffffff;
    box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.15);
}

.navbar-dark .form-select option,
.navbar-selectors-row .form-select option {
    background-color: #1d273b;
    color: #ffffff;
}

/* White chevron arrow for selects on dark/colored navbar */
.navbar-dark .form-select,
.navbar-selectors-row .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* ── Material Icon Size Utilities ────────────────── */
.mi-12 { font-size: 12px !important; }
.mi-14 { font-size: 14px !important; }
.mi-16 { font-size: 16px !important; }
.mi-18 { font-size: 18px !important; }
.mi-20 { font-size: 20px !important; }
.mi-24 { font-size: 24px !important; }
.mi-28 { font-size: 28px !important; }
.mi-32 { font-size: 32px !important; }
.mi-48 { font-size: 48px !important; }
.mi-inline { vertical-align: middle; }
.mi-mr { margin-right: 4px; }

/* ── Vehicle Status Color Utilities ──────────────── */
.status-moving  { color: #4caf50; }
.status-idling  { color: #ff9800; }
.status-stopped { color: #f44336; }

/* ── Brand Color Utilities ───────────────────────── */
.text-brand { color: var(--brand-primary); }
.bg-brand   { background-color: var(--brand-primary); }

/* ── Brand Page Title ───────────────────────────── */
.page-title-brand { color: var(--brand-primary); font-size: 1.25rem; }

/* ── Unified Modal Styling ─────────────────────── */
.modal {
    --tblr-modal-border-radius: var(--modal-radius);
    --tblr-modal-inner-border-radius: calc(var(--modal-radius) - 1px);
}

.modal .modal-content {
    box-shadow: var(--modal-shadow) !important;
    border: var(--modal-border) !important;
    border-radius: var(--modal-radius) !important;
}

.modal .modal-header {
    background: var(--modal-header-bg);
    border-bottom: var(--modal-header-border);
}

.modal .modal-body {
    background: var(--modal-body-bg);
}

.modal .modal-footer {
    background: var(--modal-footer-bg);
    border-top: var(--modal-footer-border);
}