:root {
    --navy: #17324d;
    --teal: #1f6f8b;
    --sky: #eaf3f7;
    --ink: #213547;
    --muted: #667b8b;
}

body {
    background: #f4f7f9;
    color: var(--ink);
    min-height: 100vh;
}

.navbar-brand {
    font-weight: 800;
    letter-spacing: .02em;
}

.app-navbar {
    background: linear-gradient(120deg, var(--navy), #224f6b);
}

@media (min-width: 992px) {
    .app-navbar .container {
        max-width: 1480px;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .app-navbar .nav-link {
        font-size: .86rem;
    }
}

.hero-panel {
    background: linear-gradient(135deg, #17324d, #1f6f8b);
    border: 0;
    color: #fff;
    overflow: hidden;
    position: relative;
}

.hero-panel::after {
    background: rgba(255, 255, 255, .07);
    border-radius: 50%;
    content: "";
    height: 230px;
    position: absolute;
    right: -60px;
    top: -85px;
    width: 230px;
}

.stat-card,
.card {
    border: 1px solid #dce6ec;
    box-shadow: 0 8px 24px rgba(25, 58, 80, .05);
}

.stat-number {
    color: var(--navy);
    font-size: 1.8rem;
    font-weight: 800;
}

.table thead th {
    background: #edf4f7;
    color: #29465a;
    font-size: .79rem;
    letter-spacing: .025em;
    text-transform: uppercase;
    white-space: nowrap;
}

.table-report td {
    font-size: .86rem;
    max-width: 340px;
    vertical-align: top;
}

.text-clamp {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.narrative-details {
    min-width: 260px;
}

.narrative-details summary {
    color: var(--teal);
    cursor: pointer;
    font-weight: 700;
}

.narrative-details[open] {
    min-width: min(380px, 32vw);
}

.narrative-details div {
    line-height: 1.55;
    white-space: normal;
}

.source-badge {
    font-size: .68rem;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.report-position-summary {
    display: grid;
    gap: .65rem;
    min-width: 235px;
}

.report-position-summary > div {
    border-left: 3px solid #b9d4df;
    display: grid;
    gap: .12rem;
    padding-left: .55rem;
}

.report-position-summary strong,
.report-position-summary span,
.report-position-summary code,
.report-position-summary a {
    display: block;
}

.report-position-summary code {
    color: var(--muted);
    font-size: .72rem;
}

.report-wide-page {
    max-width: 1920px;
}

.report-overview-table {
    min-width: 1450px;
    table-layout: auto;
}

.report-overview-table th:first-child,
.report-overview-table td:first-child {
    background: #fff;
    left: 0;
    position: sticky;
    z-index: 1;
}

.report-overview-table th:first-child {
    background: #edf4f7;
    z-index: 3;
}

.report-actions {
    min-width: 150px;
    white-space: normal;
}

.report-actions > a,
.report-actions > form {
    display: inline-block;
    margin: 0 .2rem .3rem 0;
}

.form-hint {
    color: var(--muted);
    font-size: .82rem;
}

.test-metric {
    background: var(--sky);
    border: 1px solid #d7e7ee;
    border-radius: .65rem;
    display: grid;
    gap: .15rem;
    height: 100%;
    padding: .85rem 1rem;
}

.test-metric span {
    color: var(--muted);
    font-size: .75rem;
    text-transform: uppercase;
}

.test-metric strong {
    color: var(--navy);
    font-size: 1.05rem;
}

.login-shell {
    align-items: center;
    display: flex;
    min-height: calc(100vh - 76px);
}

.provider-card[open] summary {
    border-bottom: 1px solid #dce6ec;
}

.provider-card summary {
    cursor: pointer;
    font-weight: 700;
    list-style: none;
    padding: 1rem 1.25rem;
}

.provider-card summary::-webkit-details-marker {
    display: none;
}

.empty-state {
    color: var(--muted);
    padding: 3.5rem 1rem;
    text-align: center;
}

.decision-hero {
    background: linear-gradient(120deg, #17324d 0%, #1f6f8b 72%, #2f8eaa 100%);
    border: 0;
    color: #fff;
    overflow: hidden;
    position: relative;
}

.decision-hero::after {
    border: 46px solid rgba(255, 255, 255, .06);
    border-radius: 50%;
    content: "";
    height: 240px;
    pointer-events: none;
    position: absolute;
    right: -70px;
    top: -100px;
    width: 240px;
}

.decision-hero .card-body {
    position: relative;
    z-index: 1;
}

.metric-label {
    color: var(--muted);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.metric-note {
    color: var(--muted);
    font-size: .78rem;
    margin-top: .25rem;
}

.stat-card .progress {
    background: #e1ebef;
    height: .45rem;
}

.stat-card .progress-bar {
    background: var(--teal);
}

.insight-card {
    background: #fff;
    border: 1px solid #dce6ec;
    border-left-width: 4px;
    border-radius: .65rem;
    height: 100%;
    padding: 1rem 1.1rem;
}

.chart-shell {
    height: 310px;
    position: relative;
}

.chart-shell-tall {
    height: 390px;
}

.fleet-status-table {
    max-height: 390px;
}

.fleet-status-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
}

.fleet-map {
    background: #dce8ed;
    height: min(68vh, 650px);
    min-height: 480px;
    width: 100%;
}

.journey-map {
    background: #dce8ed;
    height: min(64vh, 620px);
    min-height: 460px;
    width: 100%;
}

.journey-events-table {
    max-height: 620px;
}

.journey-events-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

.journey-event-row {
    cursor: pointer;
}

.journey-endpoint {
    background: transparent;
}

.journey-endpoint span {
    align-items: center;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 3px 10px rgba(23, 50, 77, .35);
    color: #fff;
    display: flex;
    font-size: .82rem;
    font-weight: 800;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.journey-start span {
    background: #198754;
}

.journey-finish span {
    background: #c0392b;
}

.position-result-card {
    background: linear-gradient(110deg, #fff, #edf5ff);
}

.vehicle-map-icon {
    background: transparent;
}

.vehicle-map-icon span {
    background: #17324d;
    border: 2px solid #fff;
    border-radius: .45rem;
    box-shadow: 0 3px 10px rgba(23, 50, 77, .35);
    color: #fff;
    display: block;
    font-size: .7rem;
    font-weight: 800;
    line-height: 24px;
    overflow: hidden;
    padding: 0 .35rem;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vehicle-map-icon span::after {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #17324d;
    bottom: -6px;
    content: "";
    left: calc(50% - 5px);
    position: absolute;
}

.vehicle-popup {
    min-width: 220px;
}

.vehicle-popup > strong,
.vehicle-popup > span {
    display: block;
}

.vehicle-popup > strong {
    color: var(--navy);
    font-size: 1rem;
}

.vehicle-popup > span {
    color: var(--muted);
    font-size: .78rem;
    margin-bottom: .65rem;
}

.vehicle-popup dl {
    display: grid;
    font-size: .78rem;
    gap: .25rem .65rem;
    grid-template-columns: auto 1fr;
    margin-bottom: .65rem;
}

.vehicle-popup dt,
.vehicle-popup dd {
    margin: 0;
}

.vehicle-popup dt {
    color: var(--muted);
}

.chat-polo {
    bottom: 1.25rem;
    position: fixed;
    right: 1.25rem;
    z-index: 1080;
}

.chat-polo-launcher {
    align-items: center;
    background: linear-gradient(120deg, var(--navy), var(--teal));
    border: 0;
    border-radius: 999px;
    box-shadow: 0 10px 30px rgba(23, 50, 77, .3);
    color: #fff;
    display: flex;
    font-weight: 800;
    gap: .45rem;
    padding: .8rem 1.15rem;
}

.chat-polo-launcher span {
    color: #9ee7ff;
    font-size: 1.2rem;
}

.chat-polo-panel {
    background: #fff;
    border: 1px solid #cddce4;
    border-radius: 1rem;
    box-shadow: 0 18px 50px rgba(23, 50, 77, .28);
    display: grid;
    grid-template-rows: auto minmax(180px, 1fr) auto auto;
    max-height: min(680px, calc(100vh - 2.5rem));
    overflow: hidden;
    width: min(390px, calc(100vw - 2rem));
}

.chat-polo-panel[hidden] {
    display: none;
}

.chat-polo-header {
    align-items: center;
    background: linear-gradient(120deg, var(--navy), var(--teal));
    color: #fff;
    display: flex;
    justify-content: space-between;
    padding: .9rem 1rem;
}

.chat-polo-header strong,
.chat-polo-header span {
    display: block;
}

.chat-polo-header span {
    color: #d8edf4;
    font-size: .75rem;
}

.chat-polo-close {
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
}

.chat-polo-messages {
    background: #f4f7f9;
    display: flex;
    flex-direction: column;
    gap: .65rem;
    max-height: 390px;
    min-height: 240px;
    overflow-y: auto;
    padding: 1rem;
}

.chat-polo-message {
    border-radius: .8rem;
    font-size: .88rem;
    line-height: 1.45;
    max-width: 88%;
    padding: .7rem .8rem;
    white-space: pre-line;
}

.chat-polo-message.is-assistant,
.chat-polo-message.is-waiting {
    align-self: flex-start;
    background: #fff;
    border: 1px solid #d9e5ea;
}

.chat-polo-message.is-waiting {
    color: var(--muted);
}

.chat-polo-message.is-user {
    align-self: flex-end;
    background: var(--teal);
    color: #fff;
}

.chat-polo-message.is-error {
    align-self: flex-start;
    background: #fff0f0;
    border: 1px solid #f2c4c4;
    color: #8a1f1f;
}

.chat-polo-links {
    display: grid;
    gap: .25rem;
    margin-top: .55rem;
}

.chat-polo-suggestions {
    display: flex;
    gap: .4rem;
    overflow-x: auto;
    padding: .65rem .75rem 0;
}

.chat-polo-suggestions button {
    background: #eef6f9;
    border: 1px solid #c8dfe8;
    border-radius: 999px;
    color: var(--teal);
    flex: 0 0 auto;
    font-size: .74rem;
    padding: .35rem .65rem;
}

.chat-polo-form {
    display: grid;
    gap: .5rem;
    grid-template-columns: 1fr auto;
    padding: .75rem;
}

.chat-polo-form textarea {
    border: 1px solid #cbd9e0;
    border-radius: .65rem;
    max-height: 110px;
    min-height: 48px;
    padding: .55rem .65rem;
    resize: vertical;
}

.chat-polo-form button {
    align-self: stretch;
    background: var(--navy);
    border: 0;
    border-radius: .65rem;
    color: #fff;
    font-weight: 700;
    padding: 0 .8rem;
}

.alert-category-card {
    background: #fff;
    border: 1px solid #dce6ec;
    border-radius: .7rem;
    color: var(--ink);
    display: flex;
    height: 100%;
    justify-content: space-between;
    padding: .8rem .9rem;
}

.alert-category-card:hover {
    border-color: var(--teal);
    color: var(--teal);
}

.alert-category-card strong {
    color: var(--navy);
    font-size: 1.1rem;
}

.alerts-table-shell {
    max-height: 720px;
}

.alerts-table {
    min-width: 1250px;
}

.alerts-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

.alert-actions {
    min-width: 220px;
}

.alert-review-details summary {
    color: var(--teal);
    cursor: pointer;
    font-size: .82rem;
    font-weight: 700;
}

.alert-review-form {
    background: #f7fafb;
    border: 1px solid #dce6ec;
    border-radius: .55rem;
    margin-top: .5rem;
    padding: .65rem;
}

@media (max-width: 767.98px) {
    .table-responsive {
        font-size: .85rem;
    }

    .chart-shell,
    .chart-shell-tall {
        height: 270px;
    }

    .fleet-map {
        height: 55vh;
        min-height: 390px;
    }

    .journey-map {
        height: 52vh;
        min-height: 360px;
    }

    .chat-polo {
        bottom: .75rem;
        right: .75rem;
    }

    .chat-polo-panel {
        max-height: calc(100vh - 1.5rem);
        width: calc(100vw - 1.5rem);
    }
}