/*
 * Infodrive reserved area.
 * Visual language taken from the legacy area (Bootstrap 4 metrics plus
 * idassets/css/main.css): light grey canvas, rounded cards, navy sidebar,
 * red accents for active states.
 */

@font-face {
    font-family: 'Mistral';
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: local('Mistral'), url('../fonts/mistral.woff') format('woff');
}

:root {
    color-scheme: light;
    --red: #dc3545;
    --red-dark: #c82333;
    --red-brand: #e31e25;
    --navy: #00061f;
    --dark: #343a40;
    --dark-hover: #23272b;
    --band: #27303a;
    --primary: #007bff;
    --primary-dark: #0069d9;
    --success: #28a745;
    --warning: #ffc107;
    --info: #17a2b8;
    --secondary: #6c757d;
    --ink: #212529;
    --muted: #6c757d;
    --input: #495057;
    --border: rgba(0, 0, 0, .125);
    --line: #dee2e6;
    --field: #ced4da;
    --canvas: #f0f0f0;
    --header: #f7f7f7;
    --light: #f8f9fa;
    --shadow: 1px 1px 3px rgba(0, 0, 0, .1);
    --radius: 1rem;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--ink);
    background: var(--canvas);
}

a { color: var(--primary); text-decoration: none; transition: all .3s; }
a:hover { color: #0056b3; text-decoration: underline; }

h1, h2, h3, h4, h5 { margin: 0 0 .5rem; font-weight: 500; line-height: 1.2; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.1rem; margin-top: 1rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
p { margin: 0 0 1rem; }
hr { margin: 1rem 0; border: 0; border-top: 1px solid var(--border); }
small { font-size: 80%; }
strong, b { font-weight: 700; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.font-dosis { font-family: 'Dosis', var(--font); line-height: 1.2em; }
.tagline { font-family: 'Mistral', var(--font); font-weight: normal; }
.note, .muted { color: var(--muted); }
.mono { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.icon { line-height: 1; }

/* ---------------------------------------------------
SIDEBAR LAYOUT (central staff)
----------------------------------------------------- */

.app-wrapper {
    display: flex;
    width: 100vw;
    height: 100vh;
    align-items: stretch;
    overflow: hidden;
}

.sidebar {
    width: 250px;
    min-width: 250px;
    max-width: 250px;
    height: 100vh;
    margin-left: -250px;
    overflow-y: auto;
    background: var(--navy);
    color: #fff;
    transition: margin .3s;
    scrollbar-width: none;
}
.sidebar::-webkit-scrollbar { display: none; }
.sidebar.active { margin-left: 0; }

.sidebar-header { padding: 20px 20px 10px; background: var(--navy); }
.sidebar-search .form-control { border-radius: .5rem; }

.sidebar .components { margin: 0; padding: 20px 8px 20px 0; list-style: none; }
.sidebar ul { margin: 0; padding: 0; list-style: none; }

.sidebar .menu-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: 10px;
    border: 0;
    border-left: solid 3px #f0f0f0;
    background: var(--navy);
    color: #fff;
    font: inherit;
    font-size: .99em;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: all .3s;
}
.sidebar .components > li > .menu-item { border-left: 0; }
.sidebar .menu-item:hover { color: #282c3b; background: #f0f0f0; text-decoration: none; }
.sidebar .menu-item.active,
.sidebar .menu-item.expanded { color: #fff; background: var(--red-brand); }
.sidebar .menu-item.child { padding-left: 25px; font-size: .9em; }
.sidebar .menu-item.child.active { background: #f0f0f0; color: #000; }
.sidebar .menu-count { margin-left: auto; margin-right: 22px; }
.sidebar .dropdown-toggle::after { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }

.content {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    height: 100vh;
    background: var(--canvas);
}

.content > .navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 72px;
    padding: 15px 10px;
    background: var(--light);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}
.navbar-side { display: flex; align-items: center; gap: .75rem; flex: 1; }
.navbar-side-right { justify-content: flex-end; }
.navbar-logo { display: block; height: 40px; width: auto; }
.clock { display: flex; flex-direction: column; align-items: center; color: var(--muted); line-height: 1.3; }

.view-container {
    flex: 1;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto;
}

/* ---------------------------------------------------
TOP BAR LAYOUT (network, legal, claims)
----------------------------------------------------- */

.topbar-wrapper > .navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 15px 10px;
    background: var(--dark);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}
.navbar-brand { display: inline-flex; margin-right: 1rem; padding: .3125rem 0; }
.navbar-brand img { display: block; height: 30px; width: auto; }
.navbar-toggler {
    display: none;
    margin-left: auto;
    padding: .25rem .75rem;
    font-size: 1.25rem;
    color: rgba(255, 255, 255, .5);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: .25rem;
    cursor: pointer;
}
.navbar-collapse { display: flex; flex: 1; align-items: center; gap: .5rem; }
.navbar-nav { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.navbar-nav-right { margin-left: auto; }
.navbar-dark .nav-link {
    display: block;
    padding: .5rem;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .5);
    font: inherit;
    white-space: nowrap;
    cursor: pointer;
}
.navbar-dark .nav-link:hover,
.navbar-dark .nav-link:focus { color: rgba(255, 255, 255, .75); text-decoration: none; }
.navbar-dark .nav-link.active,
.navbar-dark .dropdown.show > .nav-link { color: #fff; }
.navbar-search { margin-left: auto; width: 14rem; }
.navbar-search + .navbar-nav-right { margin-left: 0; }
.navbar-search .form-control { height: calc(1.5em + .5rem + 2px); padding: .25rem .5rem; font-size: .875rem; }

.view-container-top { min-height: 100vh; padding-top: calc(var(--navbar-height, 72px) + 18px); }

/* ---------------------------------------------------
DROPDOWNS
----------------------------------------------------- */

.dropdown { position: relative; }
.dropdown-toggle::after {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
}
.dropdown-menu {
    position: absolute;
    top: 100%;
    z-index: 1030;
    min-width: 10rem;
    margin-top: .125rem;
    padding: .5rem 0;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: .25rem;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, .2);
    user-select: none;
}
.dropdown-menu-left { left: 0; }
.dropdown-menu-right { right: 0; }
.dropdown-item {
    display: block;
    width: 100%;
    padding: .25rem 1.5rem;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    text-align: left;
    text-transform: capitalize;
    white-space: nowrap;
    cursor: pointer;
}
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active { color: #fff !important; background: var(--red) !important; text-decoration: none; }
.dropdown-divider { height: 0; margin: .5rem 0; overflow: hidden; border-top: 1px solid #e9ecef; }

.settings-head { min-width: 280px; padding: 15px 1rem .5rem; text-align: center; }
.settings-avatar {
    display: inline-grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
}
.settings-head .username { margin: 8px 0 0; color: #000; text-transform: capitalize; }
.settings-head .userinfo { margin: 0; color: grey; font-size: .9em; text-transform: capitalize; }
.settings-item { display: flex; align-items: center; gap: .75rem; min-height: 45px; padding-left: 20px; }

/* ---------------------------------------------------
PAGE HEADER, CARDS
----------------------------------------------------- */

.page-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .75rem 1rem;
    margin-bottom: 1rem;
    padding: .75rem 1.25rem;
    background: var(--header);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.page-head h1 { margin: 0; font-size: 1.25rem; text-transform: capitalize; }
.page-head .note { margin: .25rem 0 0; }
.page-head .actions { margin: 0; }
.eyebrow {
    margin: 0 0 .15rem;
    color: var(--red);
    font-size: .8em;
    font-weight: 700;
    text-transform: uppercase;
    cursor: default;
}

.card, .panel {
    position: relative;
    min-width: 0;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    word-wrap: break-word;
}
.card + .card, .card + .grid-2, .grid-2 + .card, .grid-2 + .grid-2,
.stats + .card, .card + .stats, .card + .stack, .stack + .card { margin-top: 1rem; }

.card > h2:first-child,
.card > .card-head:first-child,
.card > .card-header {
    margin: -1.25rem -1.25rem 1.25rem;
    padding: .75rem 1.25rem;
    background: var(--header);
    border-bottom: 1px solid var(--border);
    border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}
.card > h2:first-child { font-size: 1.25rem; text-transform: capitalize; }
.card > .card-head:first-child h2 { margin: 0; font-size: 1.25rem; text-transform: capitalize; }
.card > .card-header h5 { margin: 0; text-transform: capitalize; }
.card > .card-header.bg-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.card h2:not(:first-child) {
    margin: 1.5rem 0 1.25rem;
    padding-bottom: .75rem;
    font-size: 1.15rem;
    text-transform: capitalize;
    border-bottom: dotted 1px #e5e5e5;
}
.card-body > .card-title { margin: 1.5rem 0 1rem; padding-bottom: .75rem; border-bottom: dotted 1px #e5e5e5; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }

.special-card { padding: 0; overflow: hidden; }
.infodrivecard-special {
    position: relative;
    padding: 20px 1rem 2px;
    text-align: center;
    border-bottom: 1px solid #e7e7e7;
}
.infodrivecard-special::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 10px;
    background: var(--band);
}
.infodrivecard-special.red::before { background: var(--red); }
.infodrivecard-special.blue::before { background: var(--info); }
.infodrivecard-special.orange::before { background: var(--warning); }
.infodrivecard-special.success::before { background: var(--success); }
.infodrivecard-special h4 { margin: 0 0 .75rem; font-size: 1.5rem; text-transform: capitalize; }
.special-body { padding: .5rem 1rem 1rem; }
.special-hint { margin: .5rem 0 1rem; text-align: center; font-style: italic; }
.special-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: .5rem; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.grid-2 > .card + .card { margin-top: 0; }
.stack { display: grid; gap: 1rem; }
.table-wrap { overflow-x: auto; }

/* ---------------------------------------------------
BUTTONS
----------------------------------------------------- */

.btn, .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .375rem .75rem;
    font: inherit;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    color: #fff;
    background: var(--red);
    border: 1px solid var(--red);
    border-radius: .25rem;
    cursor: pointer;
    user-select: none;
    transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s;
}
.btn:hover, .button:hover { color: #fff; background: var(--red-dark); border-color: #bd2130; text-decoration: none; }
.btn:focus-visible, .button:focus-visible { outline: 0; box-shadow: 0 0 0 .2rem rgba(225, 83, 97, .5); }
.btn:disabled, .button:disabled { opacity: .65; cursor: not-allowed; }

.btn-danger { color: #fff; background: var(--red); border-color: var(--red); }
.btn-primary { color: #fff; background: var(--primary); border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); border-color: #0062cc; }
.btn-dark, .button-ghost { color: #fff; background: var(--dark); border-color: var(--dark); }
.btn-dark:hover, .button-ghost:hover { color: #fff; background: var(--dark-hover); border-color: #1d2124; }
.btn-light, .button-quiet { color: var(--ink); background: var(--light); border-color: var(--field); }
.btn-light:hover, .button-quiet:hover { color: var(--ink); background: #e2e6ea; border-color: #dae0e5; }
.button-danger { color: var(--red); background: transparent; border-color: var(--red); }
.button-danger:hover { color: #fff; background: var(--red); border-color: var(--red); }
.btn-lg { padding: .5rem 1rem; font-size: 1.25rem; line-height: 1.5; border-radius: .3rem; }
.btn-block { display: flex; width: 100%; }

.link-button {
    display: inline;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.link-button:hover { color: #0056b3; text-decoration: underline; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1rem; }
.hero-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .5rem; max-width: 50rem; margin: 0 auto; }

/* ---------------------------------------------------
FORMS
----------------------------------------------------- */

form { display: grid; gap: .5rem; }
label { display: inline-block; margin-bottom: .25rem; font-weight: 400; }

input, select, textarea, .form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font: inherit;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--input);
    background: #fff;
    border: 1px solid var(--field);
    border-radius: .5rem;
    transition: border-color .15s, box-shadow .15s;
}
textarea { height: auto; min-height: 5rem; resize: vertical; }
select { appearance: auto; }
input[type="file"] { height: auto; padding: .3rem .5rem; }
input:focus, select:focus, textarea:focus, .form-control:focus {
    outline: 0;
    color: var(--input);
    border-color: #80bdff;
    box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input[type="checkbox"], input[type="radio"] {
    display: inline-block;
    width: auto;
    height: auto;
    padding: 0;
    accent-color: #f91027;
    box-shadow: none;
}

.fields { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem; }
.span-2 { grid-column: 1 / -1; }
.choices { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0; padding: 0; border: 0; }
.choices label { display: flex; align-items: center; gap: .4rem; margin: 0; }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem 1rem; margin: 0; padding: 0; border: 0; }
.checks legend { margin-bottom: .25rem; font-weight: 500; }
.checks label { display: flex; align-items: center; gap: .45rem; margin: 0; }
.inline-check { display: flex; align-items: center; gap: .5rem; margin: 0; }
.inline-form { display: inline; }
.input-row { display: flex; gap: .5rem; }
.field-action { display: flex; align-items: flex-end; }
.search { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.search input { max-width: 22rem; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.toolbar input { max-width: 24rem; }
.toolbar input[type="date"], .toolbar select { width: auto; }
.advanced { margin-bottom: 1rem; }
.error {
    margin: 0;
    color: var(--red);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

/* ---------------------------------------------------
TABLES (legacy DataTables look)
----------------------------------------------------- */

table { width: 100%; margin-bottom: 1rem; color: var(--ink); border-collapse: collapse; }
th, td { padding: .75rem; vertical-align: middle; text-align: left; border-top: 1px solid var(--line); }
thead th { vertical-align: bottom; border-top: 0; border-bottom: 2px solid var(--line); }
th { font-weight: 700; text-transform: uppercase; }
td { text-transform: uppercase; outline: none; }
td a[href^="mailto"], td .no-upper { text-transform: none; }
tbody tr:nth-of-type(odd) { background: rgba(0, 0, 0, .05); }
tbody tr:hover { background: rgba(0, 0, 0, .075); }
tr.selected td { background: #d4edda; }
.card > table:last-child, .card > .table-wrap:last-child table { margin-bottom: 0; }
.clip { display: inline-block; max-width: 28rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

.pager { display: flex; justify-content: flex-end; gap: 0; margin-top: 1rem; }
.pager a {
    padding: .5rem .75rem;
    margin-left: -1px;
    color: #000;
    background: #fff;
    border: 1px solid var(--line);
}
.pager a:first-child { border-radius: .25rem 0 0 .25rem; }
.pager a:last-child { border-radius: 0 .25rem .25rem 0; }
.pager a:only-child { border-radius: .25rem; }
.pager a:hover { color: var(--ink); background: #e2e6ea; border-color: #dae0e5; text-decoration: none; }

/* ---------------------------------------------------
BADGES, ALERTS, PILLS
----------------------------------------------------- */

.pill {
    display: inline-flex;
    align-items: center;
    gap: .3em;
    padding: .25em .4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    vertical-align: baseline;
    text-transform: uppercase;
    border-radius: .25rem;
}
.pill-ok { color: #fff; background: var(--success); }
.pill-warn { color: var(--ink); background: var(--warning); }
.pill-danger { color: #fff; background: var(--red); }
.pill-info { color: #fff; background: var(--info); }
.pill-muted { color: #fff; background: var(--secondary); }
.pill + .pill { margin-left: .25rem; }

.banner {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1rem;
    padding: .75rem 1.25rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
}
.banner-ok { color: #155724; background: #d4edda; border-color: #c3e6cb; }
.banner-warn { color: #856404; background: #fff3cd; border-color: #ffeeba; }
.banner-danger { color: #721c24; background: #f8d7da; border-color: #f5c6cb; }
.banner-info { color: #0c5460; background: #d1ecf1; border-color: #bee5eb; }
.alerts { display: grid; gap: .5rem; margin: .8rem 0; }
.alerts .banner { margin: 0; }

.count {
    display: inline-grid;
    place-items: center;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 .35rem;
    border-radius: 10rem;
    background: var(--red);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
}

/* nav-pills of the legacy area */
.filters, .subnav { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: 1rem; }
.filters a, .subnav a {
    padding: .35rem 1rem;
    color: #000;
    border-radius: 2px;
    text-transform: capitalize;
}
.filters a:hover, .subnav a:hover { background: #e2e6ea; text-decoration: none; }
.filters a.active { color: #fff; background: var(--red); }

/* ---------------------------------------------------
STATS AND SHORTCUTS
----------------------------------------------------- */

.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-bottom: 1rem; }
.stats-3 { grid-template-columns: repeat(3, 1fr); margin-bottom: 1.5rem; }
.stat {
    --tone: var(--dark);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    padding: .6rem .5rem;
    color: var(--tone);
    background: #fff;
    border: 1px dashed var(--tone);
    border-radius: 2px;
    font: inherit;
    text-align: center;
    cursor: pointer;
}
.stat:hover { color: var(--tone); background: #fafafa; text-decoration: none; }
.stat b { display: block; font-size: 2rem; font-weight: 500; line-height: 1.2; }
.stat span { display: block; color: inherit; font-size: 1rem; font-weight: 500; text-transform: uppercase; }
.stat span b { font-size: 2rem; }
.stat span span { font-size: .95rem; }
.stat .stat-icon { display: none; }
.stat-warn, .stat:has(.stat-icon.warn) { --tone: orange; }
.stat-danger, .stat:has(.stat-icon.danger) { --tone: crimson; }
.stat-info { --tone: mediumblue; }
.stat-ok, .stat:has(.stat-icon.ok) { --tone: #1e7e34; }
.stat:has(.stat-icon.muted) { --tone: var(--secondary); }
.stat.active { background: #fff3f4; border-style: solid; }

.detail-list { margin: 0; padding-left: 1.25rem; }

.modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .75rem; }
.module {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: .75rem;
    align-items: center;
    padding: .75rem 1rem;
    color: var(--ink);
    background: var(--light);
    border: 1px solid var(--field);
    border-radius: .5rem;
    transition: all .3s;
}
.module:hover { color: #fff; background: var(--red); border-color: var(--red); text-decoration: none; }
.module-icon { grid-row: span 2; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; font-size: 1.1rem; }
.module strong { font-weight: 500; text-transform: capitalize; }
.module span:last-child { font-size: .85rem; opacity: .8; }

.operator-state { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.operator-state > div:first-child { display: grid; gap: .15rem; }
.segmented { display: inline-flex; flex-wrap: wrap; }
.segmented button {
    padding: .375rem .75rem;
    margin-left: -1px;
    color: #000;
    background: transparent;
    border: 1px solid #f91027;
    font: inherit;
    cursor: pointer;
}
.segmented button:first-child { border-radius: .25rem 0 0 .25rem; }
.segmented button:last-child { border-radius: 0 .25rem .25rem 0; }
.segmented button:hover { color: #fff; background: #ff808c; }
.segmented button.active { color: #fff; background: #f91027; }

/* ---------------------------------------------------
DETAIL VIEWS, LISTS, MISC
----------------------------------------------------- */

dl { display: grid; gap: 0; margin: 0; }
dl div { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-top: 1px solid var(--line); }
dl div:first-child { border-top: 0; }
dt { color: var(--muted); font-size: .85rem; text-transform: uppercase; }
dd { margin: 0; font-weight: 500; text-align: right; text-transform: uppercase; }
.dl-grid { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
.dl-grid div { flex-direction: column; gap: .15rem; }
.dl-grid div:nth-child(2) { border-top: 0; }
.dl-grid dd { text-align: left; }
.dl-grid .span-2 { grid-column: 1 / -1; }

.related { display: grid; gap: .4rem; margin-top: 1.25rem; }
.result-groups { display: grid; gap: 1rem; }
.result-list { display: grid; margin: .4rem 0 0; padding: 0; list-style: none; }
.result-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .9rem;
    padding: .6rem .5rem;
    border-top: 1px solid var(--line);
    text-transform: uppercase;
}
.result-list li:nth-child(odd) { background: rgba(0, 0, 0, .03); }
.result-list li:first-child { border-top: 0; }
.result-list .button { margin-left: auto; padding: .25rem .5rem; font-size: .875rem; }

.empty { display: grid; justify-items: center; gap: .4rem; padding: 2rem 1rem; color: var(--muted); text-align: center; }
.empty .icon { font-size: 1.8rem; }
.empty p { margin: 0; text-transform: uppercase; font-size: .9rem; }

.timeline { margin: 0; padding: 0 0 0 1rem; list-style: none; border-left: 2px solid var(--line); }
.timeline li { position: relative; display: grid; gap: .1rem; padding: .45rem 0 .45rem .6rem; }
.timeline li::before { content: ""; position: absolute; left: -1.38rem; top: .85rem; width: .6rem; height: .6rem; border-radius: 50%; background: var(--red); }
.timeline span { color: var(--muted); font-size: .85rem; }

.plate-title { font-size: 2.2rem; letter-spacing: .08em; text-transform: uppercase; }
.step {
    display: inline-grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    margin-right: .4rem;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    font-size: .85rem;
}
.map { width: 100%; border: 1px solid var(--line); border-radius: .5rem; overflow: hidden; z-index: 0; }
.adapter-strip { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1rem; }
.adapter-strip .pill { border: 1px solid transparent; cursor: pointer; font: inherit; font-size: .8rem; font-weight: 700; }
.pill-active { border-color: #000 !important; }
.token { padding: .15rem .4rem; background: var(--light); border: 1px solid var(--line); border-radius: .25rem; word-break: break-all; text-transform: none; }
.alarm-crash { border-left: 4px solid var(--red); }
.policy-list { margin: 0; padding: 0; list-style: none; }
.policy-list > li { padding: .75rem 0; border-top: 1px solid var(--line); }
.policy-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.pair-form { margin-top: .75rem; padding: 1rem; background: var(--header); border: 1px solid var(--border); border-radius: .5rem; }

.app-footer { margin: 3rem 0 1rem; padding-bottom: .5rem; color: var(--muted); text-align: center; }
.app-footer .tagline { margin-bottom: 1rem; font-size: 1.5rem; }
.app-footer p:last-child { margin: 0; }

/* Public tracking page */
.track { width: min(72rem, calc(100% - 2rem)); margin: 0 auto; padding: 1.5rem 0 3rem; }
.track .logo { display: block; height: 40px; width: auto; margin-bottom: 1rem; }

/* ---------------------------------------------------
LOGIN
----------------------------------------------------- */

.login { display: grid; grid-template-columns: 5fr 7fr; min-height: 100vh; background: #fafafa; }
.login-road {
    display: flex;
    align-items: center;
    justify-content: center;
    background: url('../images/legacy/road.jpg') center / cover no-repeat;
    overflow: hidden;
}
.login-motto {
    margin: 0;
    color: #fff;
    font-family: 'Mistral', var(--font);
    font-size: 3em;
    font-weight: normal;
    text-align: center;
    text-shadow: 2px 2px #000;
    -webkit-text-fill-color: #fff;
    -webkit-text-stroke: 1px #000;
    transform: rotate(-10deg);
}
.login-side { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; text-align: center; }
.login-box { width: 75%; max-width: 32rem; }
.login-logo { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto 1.5rem; }
.login-box form { gap: 1rem; }
.login-actions { display: flex; justify-content: flex-end; }
.login-copy { margin: 1.5rem 0 0; }

/* ---------------------------------------------------
RESPONSIVE
----------------------------------------------------- */

@media (max-width: 1199.98px) {
    .navbar-toggler { display: block; }
    .topbar-wrapper > .navbar .navbar-collapse { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; }
    .topbar-wrapper > .navbar .navbar-collapse.show { display: flex; max-height: calc(100vh - 70px); overflow-y: auto; }
    .navbar-nav { flex-direction: column; align-items: stretch; }
    .navbar-nav-right { margin-left: 0; }
    .navbar-search { width: 100%; margin: .5rem 0; }
    .topbar-wrapper .dropdown-menu { position: static; margin: 0 0 .5rem; }
}

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

@media (max-width: 768px) {
    .sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 1040; }
    .navbar-logo { display: none; }
    .view-container { padding: 5px; }
    .view-container-top { padding-top: calc(var(--navbar-height, 72px) + 8px); }
    .card { padding: 1rem .5rem; }
    .card > h2:first-child, .card > .card-head:first-child, .card > .card-header { margin: -1rem -.5rem 1rem; }
    .fields, .checks, .dl-grid { grid-template-columns: 1fr; }
    .span-2 { grid-column: auto; }
    .stats, .stats-3 { grid-template-columns: 1fr; }
    .page-head { align-items: stretch; flex-direction: column; }
    dl div { flex-direction: column; gap: .15rem; }
    dd { text-align: left; }
    table { display: block; overflow-x: auto; }
    .login { grid-template-columns: 1fr; }
    .login-road { display: none; }
    .login-box { width: 100%; }
}