/*
 * AgriLife TRIP — Vehicle Management System
 * Custom stylesheet (Bootstrap 5.3 overrides + application-specific styles)
 *
 * Fonts loaded via <link> in base.html.twig:
 *   - Open Sans  (body)
 *   - Proza Libre (headings, nav)
 * Bootstrap 5.3.3 loaded via CDN <link> in base.html.twig.
 */

/* ─────────────────────────────────────────────
   CSS custom properties
   ───────────────────────────────────────────── */
:root {
    font-family: "Open Sans", sans-serif;
    font-size: 100%;
    line-height: 1.3rem;

    /* Set our color variables */
    --vms-dark-gray: #333333;
    --vms-gray: #595959;
    --vms-off-white: #f8f9fa;
    --vms-green: #006600;
    --vms-light-blue: #c4e2ff;
    --vms-maroon: #500000; /* Texas A&M official brand maroon */
    --vms-medium-blue: #91c8ff;
    --vms-navy: #003366; /* AgriLife official blue */
    --vms-pale-blue: #d9edf7;
    --vms-red: #AB0000;
    --vms-yellow: #ffff99;

    --vms-nav-text: #020202; /* Near-black — default nav text */
    --vms-navbar-height: 50px;
    --vms-navbar-text: #595959;

    /* change some Bootstrap variables to ours */
    --bs-font-sans-serif: "Open Sans", sans-serif;
    --bs-body-line-height: 1.3rem;
    --bs-highlight-color: #FF9;
    --bs-link-color: #0051c3;
    --bs-link-color-rgb: 0, 81, 195;
    --bs-link-hover-color: #003d94;
    --bs-link-hover-color-rgb: 0, 61, 148;
    --required-color: var(--vms-red);
    --text-danger: var(--vms-red);
}

/* ─────────────────────────────────────────────
   Typography
   ───────────────────────────────────────────── */
body {
    font-family: "Open Sans", sans-serif;
    font-size: 1rem;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Proza Libre", serif;
}

/* ─────────────────────────────────────────────
   Layout — main content area
   ───────────────────────────────────────────── */
.vms-main {
    padding-top: calc(var(--vms-navbar-height) + 1rem);
    min-height: calc(100vh - var(--vms-navbar-height) - 80px);
}

/* ─────────────────────────────────────────────
   Page titles and Headers
   ───────────────────────────────────────────── */
.vms-page-title, h1 {
    color: var(--vms-maroon);
    font-family: "Proza Libre", serif;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

h2 {
    color: var(--vms-navy);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

h3 {
    color: var(--vms-green);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

h4 {
    color: var(--vms-gray);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* ─────────────────────────────────────────────
   Breadcrumb
   ───────────────────────────────────────────── */
.vms-breadcrumb {
    background-color: var(--vms-pale-blue);
    border-radius: 0.25rem;
    font-size: 0.9rem;
    font-weight: bold;
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
}

/* ─────────────────────────────────────────────
   Top navbar
   ───────────────────────────────────────────── */
.vms-navbar {
    min-height: var(--vms-navbar-height);
    padding-top: 0;
    padding-bottom: 0;
    background-color: #fff;
    border-bottom: 1px solid #dee2e6;
}

.vms-navbar .navbar-brand {
    font-family: "Proza Libre", serif;
    font-weight: 700;
    color: var(--vms-maroon);
    letter-spacing: 0.02em;
    font-size: 1rem;
}

.vms-navbar .navbar-brand:hover {
    color: var(--vms-maroon);
    opacity: 0.85;
}

/* Nav items */
.vms-navbar .nav-item .nav-link {
    align-items: center;
    color: var(--vms-nav-text);
    display: flex;
    flex-direction: column;
    font-family: "Proza Libre", serif;
    font-size: 0.85rem;
    font-variant: small-caps;
    font-weight: 600;
    min-height: var(--vms-navbar-height);
    height: auto;
    justify-content: center;
    min-width: clamp(60px, 10vw, 90px);
    padding: 0 0.6rem;
    text-align: center;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Ensure visible outline on elements as moving through */
.vms-navbar .nav-item .nav-link:focus-visible {
    outline: 3px solid var(--vms-maroon);
    outline-offset: 2px;
    /* Ensure it shows on both light and dark backgrounds */
    box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--vms-maroon);
}

@media (prefers-reduced-motion: reduce) {
    .vms-navbar .nav-item .nav-link {
        transition: none;
    }
}

.vms-navbar .nav-item .nav-link .nav-icon {
    font-size: 0.85rem;
    margin-bottom: 2px;
}

.vms-navbar .nav-item .nav-link:hover {
    background-color: var(--vms-navy);
    color: #fff;
}

.vms-navbar .nav-item.active .nav-link {
    background-color: var(--vms-light-blue);
    color: var(--vms-nav-text);
}

.vms-navbar .nav-item.active .nav-link:hover {
    background-color: var(--vms-medium-blue);
    color: var(--vms-nav-text);
}

/* Gear / offcanvas toggle button */
.vms-module-toggle {
    color: var(--vms-nav-text);
    padding: 0 0.75rem;
    min-height: var(--vms-navbar-height);
    height: auto;
    display: flex;
    align-items: center;
    border: none;
    background: none;
    font-size: 1.1rem;
    transition: background-color 0.15s ease;
}
.vms-module-toggle:focus-visible {
    outline: 3px solid var(--vms-maroon);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--vms-maroon);
    /* Prevent the background hover state from obscuring focus */
    border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .vms-module-toggle {
        transition: none;
    }
}

.vms-module-toggle:hover {
    background-color: var(--vms-navy);
    color: #fff;
}

/* AgriLife TRIP brand text — right side */
.vms-navbar .navbar-text {
    font-family: "Proza Libre", serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--vms-navbar-text);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ─────────────────────────────────────────────
   Mileage Report summary
   ───────────────────────────────────────────── */
.vms-report-summary {
    background-color: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-left: 4px solid var(--vms-navy);
    border-radius: var(--bs-border-radius);
    padding: 0.75rem 1rem;
}

.vms-report-summary-title {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.75rem;
}

.vms-report-summary dt {
    font-weight: 700;
    color: var(--vms-gray);
}

.vms-report-summary dd {
    margin-bottom: 0.35rem;
}

.vms-report-summary dd:last-child {
    margin-bottom: 0;
}

/* ─────────────────────────────────────────────
   Form
   ───────────────────────────────────────────── */
.form-control[readonly] {
    background-color: var(--bs-secondary-bg);
    cursor: not-allowed;
}

input:checked {
    background-color: var(--required-color);
}
.col-form-label.required, .form-label.required, label.required {
    color: var(--required-color);
    font-weight: bold;
}
.col-form-label.required::before, .form-label.required::before, label.required::before {
    content: "* ";
    color: var(--required-color);
    font-weight: bold;
    display: inline;
}

.ts-wrapper.form-select {
    background-image: none !important;
    padding: 0 !important;
}

.ts-wrapper.form-select .ts-control {
    border: 0;
    box-shadow: none;
}
.modal-body[tabindex="0"]:focus-visible {
    outline: 3px solid var(--vms-navy);
    outline-offset: -3px;
}

.date-field, .input-group > .date-field { width: 100%; max-width: 175px; }
.form-check { margin-top: .3rem; }
.form-check-input { border: var(--bs-border-width) solid #000102; }
.form-check-label {
    font-weight: normal;
    margin-top: .3rem;
    display: inline;
}
.form-error {
    margin-top: 10px;
    margin-bottom: 5px;
    color: var(--required-color);
}
.form-select, .input-group > .form-select { width: auto; }
.input-group-as > .form-select { flex: none; }
.input-group-as { width: auto; }
.input-group > [class*="input-"] {
    min-width: 0;
}
.input-50, .input-group > .input-50 { width: 100%; max-width: 50px; }
.input-75, .input-group > .input-75 { width: 100%; max-width: 75px; }
.input-100, .input-group > .input-100 { width: 100%; max-width: 100px; }
.input-150, .input-group > .input-150 { width: 100%; max-width: 150px; }
.input-200, .input-group > .input-200 { width: 100%; max-width: 200px; }
.input-250, .input-group > .input-250 { width: 100%; max-width: 250px; }
.input-300, .input-group > .input-300 { width: 100%; max-width: 300px; }
.input-350, .input-group > .input-350 { width: 100%; max-width: 350px; }
.input-400, .input-group > .input-400 { width: 100%; max-width: 400px; }
.input-450, .input-group > .input-450 { width: 100%; max-width: 450px; }
.input-500, .input-group > .input-500 { width: 100%; max-width: 500px; }
.input-550, .input-group > .input-550 { width: 100%; max-width: 550px; }
.input-600, .input-group > .input-600 { width: 100%; max-width: 600px; }

/* to make any placeholder text contract compliant */
::-moz-placeholder {
    color: #333;
    opacity: 1;
}

::-webkit-input-placeholder {
    color: #333;
}

/* ─────────────────────────────────────────────
   Offcanvas module nav
   ───────────────────────────────────────────── */
.vms-module-offcanvas .offcanvas-header {
    background-color: var(--vms-navy);
    color: #fff;
    padding: 0.75rem 1rem;
}

.vms-module-offcanvas .offcanvas-title {
    font-family: "Proza Libre", serif;
    font-variant: small-caps;
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
}

@media (forced-colors: none) {
    .vms-module-offcanvas .btn-close {
        filter: invert(1) brightness(2);
    }
}

@media (forced-colors: active) {
    .vms-module-offcanvas .btn-close {
        forced-color-adjust: none;
        background-color: ButtonText;
        color: Canvas;
    }
}

.vms-module-offcanvas .list-group-item-action {
    font-family: "Proza Libre", serif;
    font-size: 0.9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #333;
    border-left: 3px solid transparent;
}

.vms-module-offcanvas .list-group-item-action:hover {
    background-color: var(--vms-light-blue);
    border-left-color: var(--vms-navy);
}

.vms-module-offcanvas .list-group-item-action.active {
    background-color: var(--vms-light-blue);
    color: var(--vms-nav-text);
    border-left-color: var(--vms-navy);
}

/* ─────────────────────────────────────────────
   Environment banner
   ───────────────────────────────────────────── */
.vms-env-banner {
    font-family: "Proza Libre", serif;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 0;
    margin-bottom: 1rem;
    padding: 0.5rem 1rem;
    letter-spacing: 0.03em;
}

/* ─────────────────────────────────────────────
   Flash messages
   ───────────────────────────────────────────── */
.vms-flash {
    font-size: 0.9rem;
}

/* ─────────────────────────────────────────────
   Filter bar (Fleet Console and similar pages)
   ───────────────────────────────────────────── */
.vms-filter-bar {
    --vms-filter-control-height: 2.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 1rem;
}

.vms-filter-bar .filter-group {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
}

.vms-filter-bar .filter-view { width: 100%; max-width: 250px; }
.vms-filter-bar .filter-department { width: 100%; max-width: 475px; }
.vms-filter-bar .filter-vehicle { width: 100%; max-width: 325px; }
.vms-filter-bar .filter-month { width: 100%; max-width: 150px; }

.vms-filter-bar .form-select,
.vms-filter-bar .form-control {
    width: 100%;
}

.vms-filter-bar .ts-wrapper.form-select,
.vms-filter-bar .filter-month .form-control,
.vms-filter-bar .filter-month .input-group-text {
    min-height: var(--vms-filter-control-height);
}

.vms-filter-bar .ts-wrapper.form-select .ts-control {
    min-height: calc(var(--vms-filter-control-height) - 2 * var(--bs-border-width, 1px));
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    align-items: center;
}

.vms-filter-bar .filter-action {
    display: flex;
    align-items: flex-end;
    flex: 0 0 auto;
}

.vms-filter-bar .filter-action .btn {
    white-space: nowrap;
}

.vms-distribution-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
}

.vms-department-option,
.vms-department-item,
.vms-vehicle-option,
.vms-vehicle-item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vms-department-item,
.vms-vehicle-item {
    min-width: 0;
}

.vms-option-status,
.vms-selected-status {
    color: var(--vms-gray);
    font-size: 0.725rem;
}

.vms-status-option--separator-before {
    border-top: 1px solid var(--bs-border-color);
    margin-top: 0.25rem;
    padding-top: 0.35rem;
}

.vms-filter-select .ts-wrapper {
    max-width: 30rem;
    width: 100%;
}

.vms-filter-select .ts-control {
    flex-wrap: nowrap;
    min-height: calc(1.5em + 0.5rem + 2px);
}

.vms-filter-select .ts-control > input {
    min-width: 0;
}

.receipt-status { position: relative; display: inline-block; }
.receipt-status__flag {
    position: absolute;
    top: -0.45em;
    right: -0.6em;
    font-size: 0.6em;
}
/* ─────────────────────────────────────────────
   TIG table - to do global styles to tables
   ───────────────────────────────────────────── */
.tig-table, .tig-table.dataTable {
    font-size: 0.875rem;
    border-collapse: collapse;
}

.tig-table thead th, .tig-table.dataTable thead th {
    font-family: "Proza Libre", serif;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.4rem 0.6rem;
    white-space: nowrap;
}

/* exclude color changes for headers using bootstrap color classes */
.tig-table thead:not([class^="table-"]):not([class*=" table-"]) th,
.tig-table.dataTable thead:not([class^="table-"]):not([class*=" table-"]) th {
    color: #3A3636;
    background-color: #f1f3f5;
    border-bottom: 2px solid #dee2e6;
}

.tig-table tbody td, .tig-table.dataTable tbody td {
    padding: 0.3rem 0.6rem;
    line-height: 1.3;
}

.tig-table tfoot tr th,
.tig-table.dataTable tfoot tr th,
.tig-table tfoot tr td,
.tig-table.dataTable tfoot tr td {
    font-size: 0.9rem;
    padding: 0.3rem 0.6rem;
    background-color: var(--vms-off-white);
    font-weight: 600;
}

/* Hover — must come after striping rules and use !important
   to win over Bootstrap's box-shadow approach */
table.tig-table.dataTable.table-hover > tbody > tr:hover > * {
    --bs-table-hover-bg: #ffff66;
    --bs-table-bg: var(--vms-yellow);
    box-shadow: none !important;
}

/***
    A focus style that stands out in dense table rows - for accessibility
    The outline gives a visible ring
    The outline-offset is set to 2px to ensure the outline is visible
    The box-shadow is used to create a drop shadow effect around the focused element, that will be visible
        on both light and dark themes
***/
/* Table action buttons */
.tig-table .btn:focus-visible, .tig-table .dropdown-toggle:focus-visible {
    outline: 3px solid var(--vms-maroon);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--vms-maroon);
}

/* Shared dropdown hover and focus colors for links and buttons. */
.tig-table .dropdown-menu {
    --bs-dropdown-link-hover-bg: var(--vms-navy);
    --bs-dropdown-link-hover-color: #fff;
}

/* Bootstrap text utilities use !important; keep these items readable too. */
.tig-table .dropdown-menu .dropdown-item.text-danger:not(.disabled):not(:disabled):is(:hover, :focus) {
    color: var(--bs-dropdown-link-hover-color) !important;
}

/* Inset outline remains visible inside the menu during keyboard navigation. */
.tig-table .dropdown-menu .dropdown-item:not(.disabled):not(:disabled):focus-visible {
    outline: 2px solid #fff;
    outline-offset: -4px;
}

@media (forced-colors: active) {
    .tig-table .dropdown-menu .dropdown-item:not(.disabled):not(:disabled):focus-visible {
        outline-color: Highlight;
    }
}

/* Popover trigger buttons */
.tig-table [data-bs-toggle="popover"]:focus-visible {
    outline: 3px solid var(--vms-maroon);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--vms-maroon);
}
/*** End focus style section ***/

/* Console section heading */
.vms-console-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.vms-console-title {
    font-family: "Proza Libre", serif;
    font-size: 1rem;
    font-weight: 700;
    color: #333;
    margin: 0;
}

/* ─────────────────────────────────────────────
   More specific DataTable overrides
   ───────────────────────────────────────────── */
.dt-small-text {
    font-size: smaller;
}

.dt-container {
    padding: .33rem;
}

.table-dropdown-overflow {
    overflow: visible;
}

.table-dropdown-overflow .dropdown-menu.show {
    z-index: 1080;
}

.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover {
    background-color: var(--vms-navy);
}
/* Make the various data tables elements bold and smaller */
div.dt-container div.dt-paging,
div.dt-container div.dt-length,
div.dt-container div.dt-search,
div.dt-container div.dt-info,
div.dt-container div.dt-length label,
div.dt-container div.dt-search label,
.dt-empty {
    font-size: 1rem;
    font-weight: 600;
}

/* ─────────────────────────────────────────────
    Bootstrap overrides that don't fit elsewhere and can't
    be done with the general variable
───────────────────────────────────────────── */
/* thicken border of outline buttons to meet clarity requirements */
[class^="btn-outline-"], [class*=" btn-outline-"] {
    --bs-btn-border-width: 2px; /* Default is 1px */
}

/* Bold font of buttons for clarity */
[class^="btn"], [class*=" btn"] {
    --bs-btn-font-weight: 600; /* Default is 400 */
}

/* ensure small buttons meet minimum size requirements */
.btn-sm {
  min-width: 24px;
  min-height: 24px;
}

/* ─────────────────────────────────────────────
   Footer
   ───────────────────────────────────────────── */
.vms-footer {
    border-top: 1px solid #000;
    font-size: 0.875rem;
    color: var(--vms-dark-gray);
    text-align: center;
    margin-top: 2rem;
    padding: 1rem 0;
}

/* ─────────────────────────────────────────────
   Login page
   ───────────────────────────────────────────── */
.vms-login-page {
    min-height: 100vh;
    background-color: #f4f6f8;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vms-login-card {
    width: 100%;
    max-width: 480px;
    padding: 2.5rem 2rem;
    background-color: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
}

.vms-login-brand {
    font-family: "Proza Libre", serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--vms-maroon);
    text-align: center;
    letter-spacing: 0.02em;
}

.vms-login-subtitle {
    font-family: "Proza Libre", serif;
    font-size: 0.95rem;
    color: #555;
    text-align: center;
    margin-bottom: 1.5rem;
}

.vms-login-divider {
    font-size: 0.8rem;
    color: #6d6d6d;
    text-align: center;
    margin: 1rem 0;
    position: relative;
}

.vms-login-divider::before,
.vms-login-divider::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 42%;
    height: 1px;
    background-color: #ddd;
}

.vms-login-divider::before { left: 0; }
.vms-login-divider::after { right: 0; }

.vms-cas-warning {
    background: #fff8e1;
    border: 1px solid #f0c36d;
    border-left: 4px solid #f0ad4e;
    border-radius: 0.375rem;
    padding: 1rem;
    margin: 1.5rem 0;
}

.vms-cas-warning-title {
    font-weight: 700;
    color: #7a4b00;
    margin-bottom: 0.5rem;
}

.vms-btn-cas {
    display: block;
    width: fit-content;
    margin: 1.75rem auto 1rem;
    padding: 0.5rem;
    border: 2px solid transparent;
    border-radius: 0.375rem;
    line-height: 0;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
    text-decoration: none;
}
@media (prefers-reduced-motion: reduce) {
    .vms-btn-cas {
        transition: none;
    }
}

.vms-btn-cas img {
    display: block;
    width: 100%;
    max-width: 280px;
    height: auto;
    border-radius: 0.25rem;
    border: 1px solid #d0d5db;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
}

.login-instruction {
    text-align: center;
    font-size: 1rem;
    color: var(--vms-gray);
    margin-top: 0.5rem;
    margin-bottom: 0;
}

.vms-btn-cas:hover {
    border-color: var(--vms-maroon);
    box-shadow: 0 2px 8px rgba(80, 0, 0, 0.18);
    opacity: 0.88;
}

.vms-btn-cas:focus-visible {
    outline: 3px solid var(--vms-maroon);
    outline-offset: 2px;
    border-color: var(--vms-maroon);
}

/* ─────────────────────────────────────────────
   Tom Select — ensure dropdown clears Bootstrap
   modal backdrop (z-index 1040–1050)
   ───────────────────────────────────────────── */
.ts-dropdown {
    z-index: 2000;
}

.modal-open .ts-dropdown {
    z-index: 9999 !important;
}

.vms-login-help {
    font-size: 0.8rem;
    color: var(--vms-gray);
    text-align: center;
    margin-top: 1.5rem;
}

/* ─────────────────────────────────────────────
   Utility — hide before JS initializes tables
   ───────────────────────────────────────────── */
.js-ready .hide-on-load { display: none !important; }

/* ─────────────────────────────────────────────
   Mileage Report List — GridJS compact overrides Reduces cell padding and font size so narrow columns
   (Miles, Charge, Receipts, Account) display without truncation or wrapping at 1536px viewport width.
   ───────────────────────────────────────────── */
.gridjs-th,
.gridjs-button {
    padding: 0.2rem 0.3rem;
    font-size: 0.9rem;
    white-space: nowrap;
    text-align: center !important;
    vertical-align: middle !important;
}

.gridjs-button .btn {
    line-height: 1.2;
    white-space: nowrap;
}

.gridjs-th,
.gridjs-td {
    padding: 12px 12px !important;
    font-size: 0.9rem;
}

.gridjs-container,
.gridjs-wrapper {
    overflow: visible !important;
}

.gridjs-wrapper {
    position: relative;
    z-index: 30;
}

.gridjs-footer {
    position: relative;
    z-index: 0 !important;
}

#table_footer_summary {
    position: relative;
    z-index: 0 !important;
}

.gridjs-td {
    overflow: visible !important;
}

.gridjs-td .dropdown-menu.show {
    z-index: 9999;
}

a.phone-link {
    color: #0645ad;
    text-decoration: underline;
}

/* ─────────────────────────────────────────────
    Specifically for accessibility
 ───────────────────────────────────────────── */
.vms-skip-link {
    position: absolute;
    left: 0;
    transform: translateY(-100%);
    transition: transform 0.3s;
    background: #000;
    color: #fff;
    padding: 0.5rem;
    z-index: 100;
}

@media (prefers-reduced-motion: reduce) {
    .vms-skip-link {
        transition: none;
    }
}

.vms-skip-link:focus {
    transform: translateY(0);
}

/* Global focus fallback, just in case */
:focus-visible {
    outline: 3px solid var(--vms-maroon);
    outline-offset: 2px;
}

/* Keep selected months readable in both Tempus Dominus themes. */
.tempus-dominus-widget.vms-month-picker {
    --td-active-bg: var(--vms-maroon);
    --td-active-color: #fff;
    --td-dark-active-bg: #91c8ff;
    --td-dark-active-color: #000;
}

.tempus-dominus-widget.vms-month-picker.dark [data-action]:focus-visible {
    outline-color: #fff;
}

/* ─────────────────────────────────────────────
    Custom tab stylings, primarily used for reports
 ───────────────────────────────────────────── */
.report-tabs {
    border-bottom: none;
    margin-bottom: 0;
}
.report-tab-content {
    border: 1px solid #3072AB;
    border-radius: 4px 4px 4px 4px;
    padding: 0.5em;
}
.report-tabs .nav-link {
    margin-right: .5em;
    border: 1px solid #4297d7;
    background: #245a8a;
    color: #FFF;
    font-weight: bold;
    border-radius: 4px 4px 0 0;
}
.report-tabs .nav-link:hover, .report-tabs > .active > a:hover, .report-tabs > li.active > a, .report-tabs > li.active > a:focus {
    color: #FFF;
    border: 1px solid #4297d7;
    cursor: default;
    background: #036;
}
.report-tabs .nav-link.active {
    color: #1f5a8a;
    background-color: #FFF;
    border: 1px solid #4297d7;
    cursor: default;
}

.report-tabs .nav-link:focus-visible {
    color: #1f5a8a;
    background-color: #FFF;
    border: 1px solid #4297d7;
    outline: 3px solid var(--vms-maroon);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--vms-maroon);
}

.report-tabs .active:hover {
    color: #1f5a72;
    border: 1px solid #4297d7;
    cursor: default;
    background: #D9EDF7;
}
.card-title {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: var(--bs-card-title-spacer-y);
}

/* ─────────────────────────────────────────────
    Popovers
 ───────────────────────────────────────────── */
.tig-popover {
    --bs-popover-header-color: var(--bs-white);
    --bs-popover-header-bg: var(--vms-maroon);
    --bs-popover-border-color: var(--vms-maroon);
}

/* ─────────────────────────────────────────────
   Mobile token pages (templates/mobile/)
   ───────────────────────────────────────────── */
.vms-mobile-page {
    min-height: 100vh;
    background-color: #f4f6f8;
}

.vms-mobile-main {
    width: 100%;
    max-width: 480px;
}

.vms-mobile-brand {
    font-family: "Proza Libre", serif;
    font-weight: 700;
    color: var(--vms-maroon);
}

.vms-mobile-summary {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 0.75rem;
    row-gap: 0.25rem;
}

.vms-mobile-summary dt {
    font-weight: 600;
    color: var(--vms-gray);
}

.vms-mobile-summary dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.vms-mobile-start {
    font-size: 1.5rem;
}

.vms-odometer-input {
    font-size: 2rem;
    letter-spacing: 0.05em;
}