/* -------------------------------------------------------
   PREDICTIVE MODEL � ISS Score Simulator
   ------------------------------------------------------- */

/* ── Restyle (2026-07): quick-start strip, control grouping, collapsible reference ──
   Structure of the score header + JS-rendered grids is unchanged; these additions improve
   the information hierarchy around them. */

/* Quick-start: 3-step model + current/simulated legend */
.pred-howto {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem 1.5rem;
    padding: 1rem 1.5rem;
}
.pred-howto-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.pred-howto-step { display: flex; align-items: center; gap: 0.6rem; }
.pred-howto-num {
    flex: 0 0 auto;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: #2563eb;
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pred-howto-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    font-size: 0.82rem;
    color: var(--muted, #64748b);
}
.pred-howto-text strong { font-size: 0.95rem; color: inherit; }
.pred-howto-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    font-size: 0.82rem;
    color: var(--muted, #64748b);
}
.pred-legend-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.pred-legend-swatch { width: 0.85rem; height: 0.85rem; border-radius: 3px; display: inline-block; flex: 0 0 auto; }
.pred-legend-current { background: #94a3b8; }
.pred-legend-sim { background: #2563eb; }

/* Group label between the score panel and the interactive controls */
.pred-group-label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 1.6rem 0 0.4rem;
    font-size: 0.9rem;
}
.pred-group-tag {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #2563eb;
    background: rgba(37, 99, 235, 0.1);
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    flex: 0 0 auto;
}
.pred-group-tag-result { color: #15803d; background: rgba(22, 163, 74, 0.12); }
.pred-group-text { font-weight: 600; color: var(--muted, #475569); }

/* Subtle current/simulated accent on the score boxes (complements the JS-set value colors) */
.predictive-score-current { border-top: 3px solid #94a3b8; }
.predictive-score-simulated { border-top: 3px solid #2563eb; }

/* Collapsible reference sections (How ISS Works, Calibration) — collapsed by default so the
   interactive simulator stays the focus. */
.pred-collapsible { padding: 0; overflow: hidden; }
.pred-details { width: 100%; }
.pred-details > summary.pred-details-summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.1rem 1.5rem;
    cursor: pointer;
    list-style: none;
}
.pred-details > summary.pred-details-summary::-webkit-details-marker { display: none; }
.pred-details-summary:hover { background: rgba(37, 99, 235, 0.04); }
.pred-details-summary .analytics-tool-title { margin: 0; }
.pred-details-hint {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    background: rgba(100, 116, 139, 0.14);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
}
.pred-details-hint-admin { color: #b45309; background: rgba(180, 83, 9, 0.12); }
.pred-details-chevron {
    margin-left: auto;
    font-size: 1rem;
    color: #64748b;
    transition: transform 0.18s ease;
}
.pred-details[open] > summary .pred-details-chevron { transform: rotate(180deg); }
.pred-details > .analytics-tool-body { padding: 0 1.5rem 1.5rem; }
.pred-collapsible-desc { margin-top: 0; }

@media (max-width: 640px) {
    .pred-howto { flex-direction: column; align-items: flex-start; }
    .pred-howto-steps { flex-direction: column; gap: 0.55rem; }
}

.predictive-score-header {
    padding: 1.25rem 1.5rem;
    position: sticky;
    /* Sit clear of the app header plus a small gap, so the sticky simulated-score
       panel is never tucked under it on scroll. The header grows to multiple rows
       on smaller/windowed screens, so its live height is measured in JS and
       published as --pred-sticky-offset; the calc() is the static fallback. */
    top: var(--pred-sticky-offset, calc(var(--app-header-height, 80px) + 0.5rem));
    z-index: 120;
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
    transition: background-color 0.18s ease, box-shadow 0.18s ease, backdrop-filter 0.18s ease;
}

.predictive-score-header.predictive-score-header-scrolled {
    background: rgba(255, 255, 255, 1);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 24px -20px rgba(15, 23, 42, 0.45);
}

.predictive-score-header.predictive-score-header-compact {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.predictive-score-header.predictive-score-header-compact .pred-header-split {
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

.predictive-score-header.predictive-score-header-compact .pred-header-right,
.predictive-score-header.predictive-score-header-compact .pred-chart-title,
.predictive-score-header.predictive-score-header-compact .pred-chart-wrap {
    display: none;
}

.predictive-score-header.predictive-score-header-compact .predictive-score-comparison {
    margin-bottom: 0.6rem;
    gap: 0.85rem;
}

.predictive-score-header.predictive-score-header-compact .predictive-score-box {
    min-width: 88px;
}

.predictive-score-header.predictive-score-header-compact .predictive-score-label,
.predictive-score-header.predictive-score-header-compact .predictive-score-rec,
.predictive-score-header.predictive-score-header-compact #predDeltaLabel {
    font-size: 0.745rem;
}

.predictive-score-header.predictive-score-header-compact .predictive-score-value {
    font-size: 1.675rem;
    margin-bottom: 0.05rem;
}

.predictive-score-header.predictive-score-header-compact .predictive-score-arrow {
    font-size: 1.125rem;
}

.predictive-score-header.predictive-score-header-compact .predictive-score-bar-wrap {
    margin-bottom: 0.55rem;
}

.predictive-score-header.predictive-score-header-compact .pred-path-indicator {
    padding: 0.45rem 0.6rem;
}

.predictive-score-header.predictive-score-header-compact .pred-path-desc,
.predictive-score-header.predictive-score-header-compact .predictive-actions-row,
.predictive-score-header.predictive-score-header-compact .pred-violations-status {
    display: none;
}

@media (max-width: 900px) {
    .predictive-score-header {
        top: var(--pred-sticky-offset, calc(var(--app-header-height, 80px) + 0.25rem));
    }
}

/* 50/50 horizontal split: ISS scores | Trend chart */
.pred-header-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 900px) {
    .pred-header-split {
        grid-template-columns: 1fr;
    }
}

.pred-header-left {
    min-width: 0;
}

.pred-header-right {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.pred-chart-title {
    font-size: 0.845rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    margin-bottom: 0.5rem;
}

.pred-chart-wrap {
    position: relative;
    width: 100%;
    height: 220px;
}

.pred-chart-wrap canvas {
    width: 100% !important;
    height: 100% !important;
}

.predictive-score-comparison {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.predictive-score-box {
    text-align: center;
    min-width: 120px;
}

.predictive-score-label {
    font-size: 0.845rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    margin-bottom: 0.25rem;
}

.predictive-score-value {
    font-size: 2.325rem;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 0.15rem;
}

.predictive-score-rec {
    font-size: 0.845rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pred-score-red { color: #dc2626; }
.pred-score-orange { color: #d97706; }
.pred-score-green { color: #16a34a; }

.pred-delta-worse { color: #dc2626; }
.pred-delta-better { color: #16a34a; }
.pred-delta-same { color: #94a3b8; }

.predictive-score-arrow {
    font-size: 1.925rem;
    color: #94a3b8;
    font-weight: 300;
}

/* Score bar */
.predictive-score-bar-wrap {
    margin: 0.75rem 0 0.5rem;
}

.predictive-score-bar {
    position: relative;
    display: flex;
    height: 28px;
    border-radius: 6px;
    overflow: visible;
}

.predictive-bar-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.745rem;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
    letter-spacing: 0.03em;
}

.predictive-bar-pass { background: #16a34a; border-radius: 6px 0 0 6px; }
.predictive-bar-optional { background: #d97706; }
.predictive-bar-inspect { background: #dc2626; border-radius: 0 6px 6px 0; }

.predictive-bar-marker {
    position: absolute;
    top: -6px;
    width: 3px;
    height: 40px;
    border-radius: 2px;
    transform: translateX(-50%);
    transition: left 0.3s ease;
    z-index: 2;
}

.predictive-bar-current {
    background: #1e293b;
    box-shadow: 0 0 0 2px #fff;
}

.predictive-bar-sim {
    background: #3b82f6;
    box-shadow: 0 0 0 2px #fff;
}

.predictive-actions-row {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.predictive-reset-btn {
    background: none;
    border: 1px solid #cbd5e1;
    color: #475569;
    padding: 0.35rem 1rem;
    border-radius: 6px;
    font-size: 0.905rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.predictive-reset-btn:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}

.predictive-update-btn {
    background: none;
    border: 1px solid #93c5fd;
    color: #2563eb;
    padding: 0.35rem 1rem;
    border-radius: 6px;
    font-size: 0.905rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.predictive-update-btn:hover {
    background: #eff6ff;
    border-color: #3b82f6;
}

.predictive-update-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pred-violations-status {
    text-align: center;
    margin-top: 0.35rem;
    font-size: 0.805rem;
    min-height: 1em;
}

.pred-status-ok {
    color: #16a34a;
    font-weight: 600;
}

.pred-status-date {
    color: #94a3b8;
}

.pred-status-updated {
    color: #2563eb;
    font-weight: 600;
}

.pred-status-empty {
    color: #94a3b8;
    font-style: italic;
}

.pred-status-error {
    color: #dc2626;
    font-weight: 600;
}

/* BASIC cards grid � 5 public categories, wider cards */
.predictive-basics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 0.85rem;
}

.predictive-basic-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.75rem 0.85rem;
    transition: all 0.15s ease;
}

.predictive-basic-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.predictive-basic-disabled {
    opacity: 0.45;
    background: #f8fafc;
}

.predictive-basic-alert {
    border-color: #fca5a5;
    background: #fef2f2;
}

.predictive-basic-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
}

.predictive-basic-name {
    font-weight: 700;
    font-size: 0.945rem;
    flex: 1;
}

.predictive-basic-diff {
    font-size: 0.845rem;
    font-weight: 700;
}

.pred-diff-up { color: #dc2626; }
.pred-diff-down { color: #16a34a; }
.pred-diff-same { color: #94a3b8; }

/* Violation score display */
.pred-viol-score-row {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}

.pred-viol-score {
    font-size: 1.625rem;
    font-weight: 900;
    color: #1e293b;
    line-height: 1;
}

.pred-viol-score-alert {
    color: #dc2626;
}

.pred-viol-score-label {
    font-size: 0.805rem;
    color: #94a3b8;
    font-weight: 600;
}

/* Measure display */
.pred-viol-measure-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.805rem;
    color: #64748b;
    margin-bottom: 0.35rem;
}

.pred-viol-measure-label {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
}

.pred-viol-measure-value {
    font-weight: 600;
    color: #475569;
}

.pred-viol-measure-base {
    color: #94a3b8;
    font-weight: 400;
}

/* Violation list header */
.pred-viol-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.45rem;
    padding-top: 0.4rem;
    border-top: 1px solid #e2e8f0;
    font-size: 0.805rem;
    color: #64748b;
    font-weight: 600;
}

.pred-viol-add-btn {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #3b82f6;
    font-size: 0.805rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.1s ease;
}

.pred-viol-add-btn:hover {
    background: #dbeafe;
    border-color: #93c5fd;
}

/* Violation list */
.pred-viol-list {
    max-height: 260px;
    overflow-y: auto;
    margin-top: 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    /* Keep the list scrollable but hide the visible scrollbar track. */
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* legacy Edge/IE */
}

.pred-viol-list::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;                /* Chrome/Safari/Edge */
}

.pred-viol-item {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.35rem 0.45rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.805rem;
    transition: all 0.1s ease;
}

.pred-viol-item.pred-viol-disabled {
    opacity: 0.45;
    background: #f1f5f9;
}

.pred-viol-item.pred-viol-added {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.pred-viol-toggle {
    flex-shrink: 0;
    margin-top: 1px;
}

.pred-viol-toggle input {
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.pred-viol-item-body {
    flex: 1;
    min-width: 0;
}

.pred-viol-item-desc {
    color: #1e293b;
    line-height: 1.35;
    word-break: break-word;
}

.pred-viol-item-desc strong {
    color: #475569;
}

.pred-viol-oos {
    background: #dc2626;
    color: #fff;
    font-size: 0.685rem;
    font-weight: 800;
    padding: 0.08rem 0.3rem;
    border-radius: 3px;
    vertical-align: middle;
}

.pred-viol-item-meta {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.15rem;
    font-size: 0.725rem;
    color: #94a3b8;
    font-weight: 600;
}

.pred-tw-high { color: #dc2626; }
.pred-tw-mid { color: #f59e0b; }
.pred-tw-low { color: #94a3b8; }

.pred-viol-remove-btn {
    flex-shrink: 0;
    background: none;
    border: none;
    color: #dc2626;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 700;
    padding: 0.1rem;
    line-height: 1;
    opacity: 0.6;
    transition: opacity 0.1s;
}

.pred-viol-remove-btn:hover {
    opacity: 1;
}

.pred-viol-empty {
    font-size: 0.805rem;
    color: #94a3b8;
    font-style: italic;
    padding: 0.4rem 0;
}

/* Inspection simulation elements */
.pred-insp-loading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0;
    font-size: 0.905rem;
    color: #64748b;
}

.pred-insp-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: pred-spin 0.6s linear infinite;
}

@keyframes pred-spin {
    to { transform: rotate(360deg); }
}

.pred-insp-totw-label {
    font-weight: 700;
    color: #475569;
    font-size: 0.785rem;
}

.pred-insp-total-note {
    color: #94a3b8;
    font-weight: 400;
    font-size: 0.745rem;
}

.pred-insp-item-header {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.pred-insp-date {
    font-weight: 700;
    color: #1e293b;
    font-size: 0.845rem;
}

.pred-insp-report {
    font-size: 0.765rem;
    color: #94a3b8;
    font-weight: 600;
}

.pred-insp-report-link {
    font-size: 0.765rem;
    color: #3b82f6;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.pred-insp-report-link:hover {
    text-decoration: underline;
    color: #2563eb;
}

.pred-viol-item.pred-insp-clickable {
    cursor: default;
}

.pred-viol-item.pred-insp-clickable .pred-insp-item-header {
    cursor: default;
}

.pred-insp-viols {
    margin-top: 0.2rem;
    padding-left: 0.15rem;
    border-left: 2px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.pred-insp-viol-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.745rem;
    color: #64748b;
    padding: 0.08rem 0 0.08rem 0.35rem;
}

.pred-insp-viol-code {
    font-weight: 700;
    color: #3b82f6;
    flex-shrink: 0;
    min-width: 52px;
}

.pred-insp-viol-desc {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pred-insp-viol-wt {
    flex-shrink: 0;
    font-weight: 700;
    color: #475569;
    min-width: 42px;
    text-align: right;
}

/* Remove column — fixed width so the per-row checkbox lines up under the
   "Remove" header on every screen size. */
.pred-insp-viol-rm {
    flex-shrink: 0;
    width: 48px;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pred-insp-viol-check {
    width: 14px;
    height: 14px;
    margin: 0;
    cursor: pointer;
    accent-color: #dc2626;
}

/* Column header row inside each inspection's violation list. */
.pred-insp-viol-head {
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.675rem;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 0.14rem;
    margin-bottom: 0.06rem;
}

.pred-insp-viol-head .pred-insp-viol-desc {
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}

.pred-insp-viol-row.pred-insp-viol-removed {
    opacity: 0.5;
}

.pred-insp-viol-row.pred-insp-viol-removed .pred-insp-viol-code,
.pred-insp-viol-row.pred-insp-viol-removed .pred-insp-viol-desc,
.pred-insp-viol-row.pred-insp-viol-removed .pred-insp-viol-wt {
    text-decoration: line-through;
}

/* "Remove all" master checkbox in the inspection header. */
.pred-insp-removeall {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
    font-size: 0.705rem;
    font-weight: 700;
    color: #dc2626;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    cursor: pointer;
    white-space: nowrap;
}

.pred-insp-removeall-check {
    width: 13px;
    height: 13px;
    margin: 0;
    cursor: pointer;
    accent-color: #dc2626;
}

/* -- Score Improvement Strategy card -- */
.pred-suggestions-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pred-suggestions-loading {
    font-size: 0.875rem;
    color: #94a3b8;
    font-style: italic;
    padding: 0.5rem 0;
}

.pred-sug-badges {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pred-sug-badge {
    font-size: 0.785rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
}

.pred-sug-badge-alert {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fca5a5;
}

.pred-sug-badge-warn {
    background: #fffbeb;
    color: #d97706;
    border: 1px solid #fde68a;
}

.pred-sug-badge-ok {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

.pred-sug-card {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.75rem 0.85rem;
    background: #fff;
}

.pred-sug-card-alert {
    border-color: #fca5a5;
    background: #fef2f2;
}

.pred-sug-card-warn {
    border-color: #fde68a;
    background: #fffbeb;
}

.pred-sug-card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.pred-sug-card-name {
    font-size: 0.945rem;
    font-weight: 800;
}

.pred-sug-card-status {
    font-size: 0.765rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}

.pred-sug-impact-title {
    font-size: 0.805rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #475569;
    margin-bottom: 0.3rem;
}

.pred-sug-impact-list {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-bottom: 0.5rem;
}

.pred-sug-impact-item {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    font-size: 0.785rem;
    color: #475569;
    padding: 0.2rem 0.3rem;
    border-radius: 4px;
    background: rgba(255,255,255,0.6);
}

.pred-sug-impact-rank {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #3b82f6;
    color: #fff;
    font-size: 0.685rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pred-sug-impact-code {
    font-weight: 700;
    color: #3b82f6;
    flex-shrink: 0;
    min-width: 52px;
}

.pred-sug-impact-desc {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pred-sug-impact-wt {
    flex-shrink: 0;
    font-weight: 700;
    color: #64748b;
    min-width: 36px;
    text-align: right;
}

.pred-sug-recs {
    margin-top: 0.25rem;
}

.pred-sug-recs-title {
    font-size: 0.805rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #16a34a;
    margin-bottom: 0.2rem;
}

.pred-sug-recs ul {
    margin: 0;
    padding: 0 0 0 1.1rem;
    list-style: disc;
}

.pred-sug-recs li {
    font-size: 0.845rem;
    color: #334155;
    line-height: 1.5;
    margin-bottom: 0.3rem;
}

.pred-sug-all-clear {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 8px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.pred-sug-all-clear-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #16a34a;
    color: #fff;
    font-size: 1.025rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pred-sug-all-clear-text {
    font-size: 0.875rem;
    color: #334155;
    line-height: 1.5;
}

/* Add violation modal */
.pred-add-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.35);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pred-add-modal-content {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    width: 380px;
    max-width: 92vw;
    overflow: hidden;
}

.pred-add-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.975rem;
    gap: 0.5rem;
}

.pred-add-modal-basic {
    font-weight: 700;
    font-size: 0.875rem;
    flex: 1;
    text-align: right;
}

.pred-add-modal-close {
    background: none;
    border: none;
    font-size: 1.125rem;
    cursor: pointer;
    color: #94a3b8;
    padding: 0.2rem;
    flex-shrink: 0;
}

.pred-add-modal-body {
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* Live search */
.pred-add-search-wrap {
    position: relative;
}

.pred-add-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 220px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-top: none;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 10;
}

.pred-search-item {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.4rem 0.55rem;
    cursor: pointer;
    font-size: 0.845rem;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.08s;
}

.pred-search-item:hover {
    background: #eff6ff;
}

.pred-search-item strong {
    color: #3b82f6;
    font-size: 0.805rem;
    flex-shrink: 0;
    min-width: 60px;
}

.pred-search-item-desc {
    flex: 1;
    color: #1e293b;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pred-search-item-type {
    flex-shrink: 0;
    font-size: 0.725rem;
    color: #94a3b8;
    font-weight: 600;
}

.pred-search-item-sev {
    flex-shrink: 0;
    font-size: 0.725rem;
    color: #475569;
    font-weight: 700;
}

.pred-search-empty {
    padding: 0.55rem;
    font-size: 0.845rem;
    color: #94a3b8;
    font-style: italic;
    text-align: center;
}

/* Selected violation chip */
.pred-add-selected {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.55rem;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
}

.pred-add-selected-info {
    flex: 1;
    min-width: 0;
    font-size: 0.845rem;
    line-height: 1.4;
}

.pred-add-selected-info strong {
    color: #3b82f6;
    margin-right: 0.3rem;
}

.pred-add-selected-info span {
    color: #1e293b;
}

.pred-add-sel-type {
    display: block;
    font-size: 0.745rem;
    color: #64748b !important;
    font-weight: 600;
}

.pred-add-sel-clear {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 0.975rem;
    padding: 0.1rem;
    flex-shrink: 0;
}

.pred-add-sel-clear:hover {
    color: #dc2626;
}

/* Row layout for severity + date */
.pred-add-row {
    display: flex;
    gap: 0.75rem;
}

.pred-add-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.pred-add-cancel-btn {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #475569;
    padding: 0.45rem 0.85rem;
    border-radius: 6px;
    font-size: 0.905rem;
    font-weight: 600;
    cursor: pointer;
    margin-right: 0.4rem;
}

.pred-add-cancel-btn:hover {
    background: #e2e8f0;
}

.pred-add-field-label {
    font-size: 0.805rem;
    font-weight: 700;
    color: #475569;
    margin-top: 0.15rem;
}

.pred-add-input {
    width: 100%;
    padding: 0.4rem 0.55rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.925rem;
    color: #1e293b;
    box-sizing: border-box;
}

.pred-add-input-sm {
    width: 120px;
}

.pred-add-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
}

.pred-add-modal-footer {
    padding: 0.65rem 1rem;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
}

.pred-add-submit-btn {
    background: #3b82f6;
    color: #fff;
    border: none;
    padding: 0.45rem 1rem;
    border-radius: 6px;
    font-size: 0.905rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.1s;
}

.pred-add-submit-btn:hover {
    background: #2563eb;
}

/* Instructional hint inside add-violation modal */
.pred-add-hint {
    font-size: 0.805rem;
    color: #94a3b8;
    margin: 0;
    line-height: 1.4;
}

/* Time-weight section */
.pred-add-tw-section {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.pred-add-tw-group {
    display: flex;
    gap: 0.4rem;
}

.pred-add-tw-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    padding: 0.45rem 0.35rem;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.805rem;
    color: #475569;
    transition: border-color 0.1s, background 0.1s, color 0.1s;
    line-height: 1.25;
}

.pred-add-tw-btn:hover {
    border-color: #93c5fd;
    background: #eff6ff;
}

.pred-add-tw-btn.pred-add-tw-active {
    border-color: #3b82f6;
    background: #eff6ff;
    color: #1d4ed8;
}

.pred-add-tw-mult {
    font-size: 1.005rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.pred-add-tw-active .pred-add-tw-mult {
    color: #2563eb;
}

.pred-add-tw-range {
    font-size: 0.725rem;
    font-weight: 500;
    color: inherit;
    text-align: center;
}

/* Adj buttons (shared) */
.pred-adj-btn {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #475569;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    font-size: 0.905rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.1s ease;
    flex-shrink: 0;
}

.pred-adj-btn:hover:not(:disabled) {
    background: #e2e8f0;
    border-color: #94a3b8;
}

.pred-adj-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Percentile bar under each BASIC */
.predictive-basic-bar-wrap {
    position: relative;
    height: 6px;
    background: #f1f5f9;
    border-radius: 3px;
    margin-bottom: 0.35rem;
}

.predictive-basic-bar {
    height: 100%;
    border-radius: 3px;
    transition: width 0.2s ease, background 0.2s ease;
}

.predictive-basic-threshold {
    position: absolute;
    top: -3px;
    width: 2px;
    height: 12px;
    background: #ef4444;
    border-radius: 1px;
}

/* Fleet fields grid */
.predictive-fleet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
}

.predictive-fleet-field {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.65rem 0.75rem;
}

.predictive-fleet-label {
    font-size: 0.875rem;
    font-weight: 700;
    color: #1e3a5f;
    margin-bottom: 0.35rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
}

.pred-field-reset-btn {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 1px solid #dbe3ee;
    background: #f8fafc;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.945rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.16s ease;
}

.pred-field-reset-btn:hover {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #2563eb;
    transform: rotate(-20deg);
}

.pred-field-reset-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.18);
}

.predictive-fleet-controls {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.25rem;
}

.pred-fleet-input {
    width: 80px;
    text-align: center;
    font-size: 1.025rem;
    font-weight: 700;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.3rem;
    flex: 1;
    color: #1e293b;
    background: #fff;
    appearance: textfield;
    -moz-appearance: textfield;
}

.pred-fleet-input::-webkit-outer-spin-button,
.pred-fleet-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pred-fleet-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
}

.predictive-fleet-baseline {
    font-size: 0.745rem;
    color: #94a3b8;
    font-weight: 600;
}

/* Breakdown */
.predictive-breakdown-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.5rem;
}

.predictive-breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.45rem 0.65rem;
    background: #f8fafc;
    border-radius: 6px;
    border: 1px solid transparent;
}

.predictive-breakdown-item.pred-bk-changed {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.predictive-breakdown-item.pred-bk-alert {
    background: #fef2f2;
    border-color: #fca5a5;
}

.predictive-breakdown-group {
    grid-column: 1 / -1;
    background: #f0f9ff;
    border-color: #bae6fd;
}

.pred-bk-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #475569;
}

.pred-bk-value {
    font-size: 0.905rem;
    font-weight: 800;
    color: #1e293b;
}

/* Predictive section card title spacing */
.predictive-section {
    padding: 1rem 1.25rem !important;
    margin-bottom: 0.5rem;
}

.predictive-section .analytics-tool-title {
    font-weight: 900;
    margin-top: 0.15rem;
}

.predictive-section .analytics-tool-header {
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
}

/* Fleet path label */
.predictive-fleet-path-label {
    grid-column: 1 / -1;
    font-size: 0.845rem;
    font-weight: 700;
    color: #3b82f6;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    padding: 0.4rem 0.65rem;
    margin-bottom: 0.15rem;
}

/* Path indicator */
.pred-path-indicator {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
    margin-bottom: 0.35rem;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}

.pred-path-indicator.pred-path-safety {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.pred-path-indicator.pred-path-oneAway {
    background: #fffbeb;
    border-color: #fde68a;
}

.pred-path-indicator.pred-path-zeroInsp {
    background: #fef2f2;
    border-color: #fecaca;
}

.pred-path-indicator.pred-path-someInsp {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.pred-path-icon {
    font-size: 1.375rem;
    line-height: 1;
    flex-shrink: 0;
}

.pred-path-text {
    flex: 1;
    min-width: 0;
}

.pred-path-text strong {
    font-size: 0.945rem;
    color: #1e293b;
}

.pred-path-range {
    font-size: 0.805rem;
    color: #64748b;
    font-weight: 600;
}

.pred-path-desc {
    font-size: 0.805rem;
    color: #64748b;
    margin-top: 0.15rem;
    line-height: 1.4;
}

/* Fleet derived ratios */
.pred-fleet-ratios {
    grid-column: 1 / -1;
    display: flex;
    gap: 1.5rem;
    font-size: 0.845rem;
    color: #475569;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 6px;
    padding: 0.4rem 0.65rem;
}

.pred-fleet-ratios strong {
    color: #1e293b;
}

/* Breakdown why section */
.pred-breakdown-why {
    margin-bottom: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.pred-why-item {
    font-size: 0.875rem;
    color: #475569;
    line-height: 1.5;
    padding: 0.35rem 0.55rem;
    background: #f8fafc;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.pred-why-item.pred-why-primary {
    background: #f0f9ff;
    border-color: #bae6fd;
}

.pred-why-basic {
    font-weight: 700;
    font-size: 0.845rem;
    white-space: nowrap;
}

.pred-why-basic em {
    font-weight: 400;
    color: #64748b;
}

.pred-bk-flag {
    font-size: 0.745rem;
    color: #dc2626;
    font-weight: 700;
}

/* Explainer section */
.pred-explainer {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.pred-explainer-block {
    padding: 0;
}

.pred-explainer-heading {
    font-size: 0.905rem;
    font-weight: 800;
    color: #1e3a5f;
    margin-bottom: 0.3rem;
}

.pred-explainer p {
    font-size: 0.875rem;
    color: #475569;
    line-height: 1.5;
    margin: 0 0 0.3rem;
}

.pred-explainer-note {
    font-style: italic;
    color: #64748b !important;
    font-size: 0.825rem !important;
}

.pred-explainer-zones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.pred-zone-tag {
    font-size: 0.825rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    color: #fff;
}

.pred-zone-pass { background: #16a34a; }
.pred-zone-optional { background: #d97706; }
.pred-zone-inspect { background: #dc2626; }
.pred-zone-oos { background: #1e293b; }

.pred-explainer-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.845rem;
    margin: 0.4rem 0;
}

.pred-explainer-table th,
.pred-explainer-table td {
    padding: 0.3rem 0.5rem;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
}

.pred-explainer-table th {
    font-weight: 700;
    color: #64748b;
    font-size: 0.805rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pred-explainer-table td {
    color: #1e293b;
}

.pred-explainer-list {
    font-size: 0.845rem;
    color: #475569;
    line-height: 1.6;
    padding-left: 1.2rem;
    margin: 0.3rem 0;
}

.pred-explainer-list li {
    margin-bottom: 0.15rem;
}

/* Responsive */
@media (max-width: 640px) {
    .predictive-score-comparison {
        flex-direction: column;
        gap: 0.75rem;
    }
    .predictive-score-arrow {
        transform: rotate(90deg);
    }
    .predictive-basics-grid {
        grid-template-columns: 1fr;
    }
    .predictive-fleet-grid {
        grid-template-columns: 1fr;
    }
}

/* ?? New-tab search workflow ?????????????????????????????????????????????? */

/* Shared spinner used in the loading shell and search-results loading state */
.ntab-spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid rgba(37, 99, 235, 0.2);
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: ntab-spin 0.7s linear infinite;
    vertical-align: middle;
    margin-right: 0.45em;
    flex-shrink: 0;
}

@keyframes ntab-spin {
    to { transform: rotate(360deg); }
}

/* ?? Loading shell ?? */
.ntab-loading-shell {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.ntab-shell-header {
    padding: 1rem 1.25rem !important;
}

.ntab-shell-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ntab-shell-dot {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text);
}

.ntab-shell-status {
    display: flex;
    align-items: center;
    font-size: 0.945rem;
    color: var(--text-muted);
}

/* 2-column card grid matching the Overview layout rhythm */
.ntab-shell-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
}

@media (max-width: 700px) {
    .ntab-shell-grid { grid-template-columns: 1fr; }
}

.ntab-shell-card {
    padding: 1rem 1.1rem !important;
    min-height: 110px;
}

/* Skeleton shimmer lines */
.ntab-skel-block {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding-top: 0.25rem;
}

.ntab-skel-line {
    height: 0.72rem;
    border-radius: 4px;
    background: linear-gradient(
        90deg,
        rgba(15, 23, 42, 0.06) 0%,
        rgba(15, 23, 42, 0.11) 50%,
        rgba(15, 23, 42, 0.06) 100%
    );
    background-size: 200% 100%;
    animation: ntab-shimmer 1.4s ease-in-out infinite;
}

@keyframes ntab-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ?? Search results page ?? */
.ntab-results-shell {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.ntab-results-header {
    padding: 1rem 1.25rem !important;
}

.ntab-results-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ntab-results-loading {
    display: flex;
    align-items: center;
    padding: 1.25rem;
    color: var(--text-muted);
    font-size: 1.005rem;
}

.ntab-results-empty {
    padding: 1.25rem;
    color: var(--text-muted);
    font-size: 1.005rem;
    text-align: center;
}

.ntab-result-row {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.8rem 1rem !important;
    text-align: left;
    cursor: pointer;
    background: var(--glass) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
    width: 100%;
}

.ntab-result-row:hover {
    border-color: rgba(37, 99, 235, 0.3) !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.1) !important;
    transform: translateY(-1px);
}

.ntab-result-name {
    font-size: 1.045rem;
    font-weight: 700;
    color: var(--text);
}

.ntab-result-meta {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.ntab-result-dot {
    font-size: 0.925rem;
    font-weight: 600;
    color: var(--accent);
}

.ntab-result-state {
    font-size: 0.905rem;
    color: var(--text-muted);
}
/* ?? End new-tab search workflow ???????????????????????????????????????????? */
/* Clean inspection ratio placeholder */
#cleanInspectionRatio.clean-ratio-placeholder { font-style: italic; opacity: 0.75; font-size: 0.85em; }



/* --- SAFER section option lists (Operation Classification, Carrier Operation, Cargo Carried) --- */
.safer-option-list { display:flex; flex-direction:column; gap:0.18rem; max-height:280px; overflow-y:auto; padding-right:0.25rem; font-size:0.945rem; }
.safer-option-row { display:flex; align-items:flex-start; gap:0.5rem; padding:0.18rem 0.35rem; border-radius:4px; line-height:1.25; }
.safer-option-row.is-selected { background:rgba(37,99,235,0.06); }
.safer-option-mark { display:inline-block; width:1.05rem; flex:0 0 1.05rem; text-align:center; font-weight:700; font-family:'Segoe UI',Arial,sans-serif; }
.safer-option-mark-on { color:#1e3a5f; }
.safer-option-mark-off { color:#cbd5e1; }
.safer-option-label { color:#334155; }
.safer-option-label-on { color:#0f172a; font-weight:600; }
.safer-option-empty { color:#94a3b8; font-style:italic; font-size:0.975rem; padding:0.4rem 0; }



/* Constrain containers to viewport width - preserve existing layout */
/* overflow-x: clip (not hidden) avoids creating a scroll container, so
   child cards with translateY on hover are not clipped at the top. */
.az-content-body,
.dashboard-main,
.page-content-surface,
.tool-container,
.az-content,
.container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
    box-sizing: border-box !important;
}

/* Ensure grids don't overflow without changing their internal layout */
.ov-grid,
.ov-row-triple,
.ov-row-quad,
.ov-row-even {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
    box-sizing: border-box !important;
}

/* Inspections/Crashes (OOS) table now shares a row with the three SAFER lists,
   so keep it compact and let it scroll inside its card (never the page) if a
   carrier's numbers are still too wide for the narrower column. */
#companyColOosRates #oosRatesTable {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
#companyColOosRates .oos-rates-table {
    font-size: 0.905rem !important;
    width: 100%;
}
#companyColOosRates .oos-rates-table th,
#companyColOosRates .oos-rates-table td {
    font-size: 0.905rem !important;
    padding: 0.32rem 0.4rem !important;
    white-space: nowrap;
}


/* Saved report cards: fill the container width (which carries the page side
   gutters) instead of a 100vw / negative-left hack that overflowed to the right. */
.report-history-item {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: relative !important;
    left: 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
    transition: none !important;
}

/* Prevent hover movement */
.report-history-item:hover,
.report-stat-card:hover {
    transform: none !important;
    transition: none !important;
}

/* Fix parent containers */
.profile-history-card {
    transform: none !important;
    position: static !important;
    left: auto !important;
}

.report-history-row,
.report-history-list {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* Fix z-index for dropdown and search results */
#navUserDropdown,
#carrierSearchResults {
    z-index: 10000 !important;
    position: absolute !important;
}

/* Fix header positioning - make it fixed at top */
.az-header,
.app-header {
    z-index: 9999 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    overflow: visible !important;
}

/* ── Large text-size mode (Settings → Text Size ≥ 20px) ───────────────────
   The fixed 80px header clips/overlaps its contents once the app is zoomed up.
   Let the header flow in normal document order so it grows to fit both rows —
   search + user menu on top, nav buttons below — and stop reserving the fixed
   header offset since the header now takes its own space. */
body.app-large-text .az-header.app-header,
body.app-large-text .app-header {
    position: static !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
}
body.app-large-text .az-header.app-header .app-header-inner,
body.app-large-text .app-header .app-header-inner {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    flex-wrap: wrap;
    row-gap: 0.4rem;
}
body.app-large-text .az-header.app-header .app-header-menu {
    max-height: none !important;
    height: auto !important;
    flex-wrap: wrap;
}
body.app-large-text #toolContainer {
    padding-top: 0 !important;
}

/* Prevent header containers from being scrollable */
.az-header .container,
.app-header .container,
.az-header-left,
.az-header-right {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
}

/* Add padding to main content to account for fixed header */
#toolContainer {
    padding-top: 80px !important;
}

/* Ensure report content doesn't overlap dropdown */
.report-history-item,
.ov-grid,
.dashboard-main {
    position: relative !important;
    z-index: 1 !important;
}

/* Fix body margin/padding */
body {
    margin: 0 !important;
    padding: 0 !important;
}

/* ─── Carrier History two-card redesign ─────────────────────────────────── */

.carrier-history-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 992px) {
    .carrier-history-row {
        grid-template-columns: 1fr 1fr;
    }
}

/* Card 1 — horizontally scrollable Status & Metrics table.
   Rows are monthly snapshots; the Date column sticks to the left and the
   header row sticks to the top, so both axes stay visible while scrolling. */
.ch-history-table-wrap {
    overflow: auto;
    max-height: 240px;
    border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 8px;
    -webkit-overflow-scrolling: touch;
}

.ch-history-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    /* Fixed size so the table does not shrink on smaller screens — it keeps its
       size and the wrapper scrolls (vertically via max-height, and horizontally
       when the viewport is too narrow to show every column). */
    font-size: 0.925rem;
    font-variant-numeric: tabular-nums;
}

.ch-history-table th,
.ch-history-table td {
    padding: 0.4rem 0.7rem;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid rgba(37, 99, 235, 0.07);
}

/* Sticky header row */
.ch-history-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #1e3a5f;
    color: #fff;
    font-weight: 700;
    font-size: 0.845rem;
    letter-spacing: 0.02em;
}

/* Sortable column headers — clickable everywhere except Status & Carrier Operation */
.ch-history-table thead th.ch-sortable {
    cursor: pointer;
    user-select: none;
}

.ch-history-table thead th.ch-sortable:hover {
    background: #2a4d7a;
}

.ch-history-table .ch-sort-ind {
    margin-left: 4px;
    font-size: 0.82em;
    opacity: 0.45;
}

.ch-history-table .ch-sort-ind.active {
    opacity: 1;
}

/* Sticky first (Date) column */
.ch-history-table .ch-th-date,
.ch-history-table .ch-td-date {
    position: sticky;
    left: 0;
    z-index: 1;
    font-weight: 700;
    color: #1e3a5f;
}

/* Top-left corner sits above both sticky axes */
.ch-history-table .ch-th-date {
    z-index: 3;
}

/* Zebra striping — opaque cell backgrounds so the sticky Date column and
   header never show the scrolled content underneath them. */
.ch-history-table tbody tr:nth-child(odd) td {
    background: #ffffff;
}

.ch-history-table tbody tr:nth-child(even) td {
    background: #f8fafc;
}

.ch-history-table tbody tr:nth-child(odd) .ch-td-date {
    background: #f1f5f9;
}

.ch-history-table tbody tr:nth-child(even) .ch-td-date {
    background: #e8eef6;
}

.ch-history-table tbody tr:hover td,
.ch-history-table tbody tr:hover .ch-td-date {
    background: #eaf2ff;
}

/* Chart controls bar (right card) */
.ch-chart-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.6rem;
    min-height: 0;
}

.ch-chart-controls .chart-toggle-btn {
    width: auto !important;
    padding: 0.18rem 0.6rem !important;
    font-size: 0.845rem !important;
    border-radius: 5px !important;
    line-height: 1.5 !important;
    text-align: center !important;
}

/* ── Year-range slider for the carrier-history trend chart ──────────────── */
.ch-year-range {
    margin: 0.1rem 0 0.7rem;
    padding: 0.2rem 0.4rem 0;
}
.ch-year-range-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.845rem;
    color: #64748b;
    margin-bottom: 0.35rem;
}
.ch-year-range-values { font-weight: 600; color: #2563eb; }
.ch-year-slider { position: relative; height: 24px; }
.ch-year-track,
.ch-year-track-fill {
    position: absolute;
    top: 50%;
    height: 4px;
    transform: translateY(-50%);
    border-radius: 4px;
    pointer-events: none;
}
.ch-year-track { left: 0; right: 0; background: #e2e8f0; }
.ch-year-track-fill { background: #2563eb; }
.ch-year-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 24px;
    margin: 0;
    background: none;
    pointer-events: none; /* track is non-interactive; only thumbs are */
    -webkit-appearance: none;
    appearance: none;
}
#chYearFrom { z-index: 4; }
#chYearTo { z-index: 4; }
.ch-year-input::-webkit-slider-runnable-track { background: none; border: none; }
.ch-year-input::-moz-range-track { background: none; border: none; }
.ch-year-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    pointer-events: auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #2563eb;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.25);
    margin-top: -6px; /* center the 16px thumb on the 4px track */
}
.ch-year-input::-moz-range-thumb {
    pointer-events: auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #2563eb;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.25);
}

/* ── Equal-height, compact carrier-history cards ─────────────────────────
   The metrics table caps the (now shorter) card height; the chart card matches
   it through the grid's stretch and the chart flex-fills the leftover space, so
   it shrinks to fit rather than forcing the card taller. */
.carrier-history-row .analytics-tool-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.carrier-history-row .analytics-tool-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Canvas wrapper — fills the card height remaining after the header/controls. */
.ch-chart-wrap {
    position: relative;
    flex: 1 1 auto;
    min-height: 150px;
}

.ch-chart-wrap canvas {
    width: 100% !important;
}

/* Pin the canvas inside the wrapper so Chart.js fills the flex height without
   feeding its own intrinsic size back into the layout. */
.carrier-history-row .ch-chart-wrap canvas {
    position: absolute;
    inset: 0;
    height: 100% !important;
}

/* Placeholder shown when a non-critical FMCSA section can't be loaded.
   Muted + italic so it reads as a status note, not real data. */
.data-unavailable {
    color: var(--text-soft);
    font-style: italic;
    font-weight: 400;
    opacity: 0.85;
}

/* Data-completeness badge on saved report cards (Profile page). */
.report-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.845rem;
    font-weight: 600;
    line-height: 1.4;
    vertical-align: middle;
    white-space: nowrap;
}

.report-status-badge--complete {
    background: #28a745;
    color: #ffffff;
}

.report-status-badge--partial {
    background: #ffc107;
    color: #212529; /* dark text — yellow needs contrast */
}

.report-status-badge--incomplete {
    background: #dc3545;
    color: #ffffff;
}

/* Overview header: keep the carrier name and completeness badge on one line,
   wrapping gracefully on narrow screens. */
.ov-company-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ov-company-name-row .report-status-badge {
    margin-left: 0; /* spacing handled by the row's gap */
}

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE HEADER + CARD LAYOUT
   ────────────────────────────────────────────────────────────────────
   Wide monitors (≥1700px) keep the original centered-overlay header — that
   is the lowest width at which the centered nav menu clears the search box.
   At ≤1699px the header becomes a self-sizing, sticky two-row bar so the
   nav tabs (incl. "Predictive Model") never overlap the search box, and
   the fixed 80px height never clips wrapped rows. CSS-only — no markup or
   JS changes; the scroll-offset JS reads the header's live offsetHeight.
   ════════════════════════════════════════════════════════════════════ */

/* azia.css hides the brand logo below 992px by default — keep it visible at
   every size so the header always carries the brand. */
.az-header .az-header-left .az-logo.app-logo {
    display: inline-flex !important;
}

@media (max-width: 1950px) {
    /* Self-sizing sticky header — replaces the fixed 80px height and the
       absolutely-centered nav menu that overlapped the search/FMCSA-status pill.
       Sticky keeps it pinned while letting it grow to fit however many rows it needs.
       Breakpoint is 1950 (not 1699): the centered nav's rightmost tab ("Predictive
       Model") overlapped the FMCSA status pill from ~1700px up to ~1900px, and was
       cramped (≈9px) at 1920px — so the nav wraps to its own row up to 1950px, and the
       roomy single-row centered layout only applies on genuinely wide (≥1951px) screens. */
    nav.az-header.app-header,
    .az-header.app-header {
        position: sticky !important;
        top: 0 !important;
        height: auto !important;
        min-height: var(--app-header-height);
        max-height: none !important;
        overflow: visible !important;
    }

    /* Row 1 — logo + search + user; wrap so nothing is ever clipped. */
    .az-header.app-header .app-header-inner,
    .az-header.app-header .container {
        height: auto !important;
        flex-wrap: wrap;
        align-items: center;
        row-gap: 8px;
        column-gap: clamp(8px, 1.5vw, 20px);
        padding: 10px clamp(10px, 2vw, 24px);
    }

    .app-header-center {
        order: 2;
        flex: 1 1 auto;
        justify-content: center;
        min-width: 0;
    }
    .app-header-search {
        width: auto;
        flex: 1 1 280px;
        min-width: 0;
        max-width: 460px;
        justify-content: center;
    }
    .az-header-right {
        order: 3;
        width: auto;
        flex: 0 0 auto;
    }
    .az-header.app-header .nav-user {
        width: auto;
    }

    /* Row 2 — nav tabs become a real, in-flow row (no longer overlaid). */
    .az-header.app-header .app-header-menu {
        position: static !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.3rem;
        padding: 4px clamp(10px, 2vw, 24px) 8px;
        overflow-x: auto;
    }

    /* Header is now in normal/sticky flow, so drop the fixed-header offset. */
    #toolContainer,
    .az-content-dashboard {
        padding-top: 0 !important;
    }
}

/* Tablet / phone — search drops to its own full-width row, the user menu
   stays on the top row, the tagline is hidden, and tap targets hit 44px. */
@media (max-width: 768px) {
    .az-header.app-header .app-header-inner,
    .az-header.app-header .container {
        column-gap: 8px;
    }
    .az-header-right { order: 2; margin-left: auto; }
    .app-header-center {
        order: 3;
        flex: 1 1 100%;
        justify-content: stretch;
    }
    .app-header-search {
        width: 100%;
        flex: 1 1 100%;
        max-width: none;
        justify-content: flex-start;
        gap: 6px;
    }
    /* Input fills the row; the button sits directly beside it (no stray gap). */
    .app-header-search input {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        max-width: none;
    }
    .app-header-search button { flex: 0 0 auto; }
    .app-header-copy { display: none; }

    /* Touch-friendly tap targets */
    .app-header-search input,
    #dotSearchBtnPersistent,
    .nav-user-btn {
        min-height: 44px;
    }
    .nav-tab {
        font-size: 0.845rem;
        padding: 0.5rem 0.6rem;
    }

    /* Overview rows collapse to one column (page side-gutters are applied
       globally to .page-content-surface in the mobile card block below, so
       every tab shares the same margins). */
    .ov-row-triple,
    .ov-row-quad,
    .ov-row-even {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    /* Saved-report cards fill the surface (which has small mobile gutters), no
       extra side margin, so they use as much width as possible without overflow. */
    .report-history-item {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        left: 0 !important;
        padding: clamp(10px, 3vw, 16px) !important;
    }
    .report-history-meta-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .az-logo.app-logo { font-size: 18px; }
    .nav-user-btn { font-size: 15px; padding: 6px 10px; }
    #dotNumberPersistent { font-size: 15px; }
    .nav-tab { font-size: 0.805rem; padding: 0.4rem 0.5rem; }
    .report-history-meta-grid { grid-template-columns: 1fr !important; }
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE INFO CARDS — every tab (≤768px)
   ────────────────────────────────────────────────────────────────────
   Unifies the card layout across all tabs into a single scrollable column
   with consistent width/padding/gutters, and shrinks the fixed card heights,
   charts and headings so each card fits its data instead of reserving large
   empty space. Page side-gutters live on .page-content-surface so every tab
   shares identical margins.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* 1) Every multi-column grid on every tab → one column */
    .responsive-panel-row,
    .predictive-basics-grid,
    .predictive-fleet-grid,
    .analytics-funnel-stats,
    .analytics-basic-history-grid,
    .analytics-top-violations-grid,
    .admin-summary-grid,
    .admin-create-grid,
    .two-column-grid,
    .violations-grid,
    .basics-two-column,
    .company-snapshot-grid,
    .incident-map-layout,
    .overview-analytics-row {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* 2) Small side gutters for ALL tab content on mobile — use more of the
          narrow screen while still leaving a margin on both sides. */
    .page-content-surface {
        padding-left: clamp(8px, 2.5vw, 12px);
        padding-right: clamp(8px, 2.5vw, 12px);
        box-sizing: border-box;
    }

    /* 3) Uniform cards: full width, consistent padding, no leftover offsets */
    .page-content-surface .card,
    .page-content-surface .ov-card,
    .page-content-surface .violation-card,
    .page-content-surface .violation-library-card,
    .page-content-surface .analytics-tool-card,
    .page-content-surface .incident-state-panel,
    .page-content-surface .fixed-scroll-card,
    .page-content-surface .subpanel {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        left: 0 !important;
        box-sizing: border-box !important;
        padding: clamp(12px, 3.5vw, 18px) !important;
    }

    /* 4) Shrink the fixed-height scroll panels so they fit the data — cap each
          at the same height and let their inner table scroll. */
    .violations-grid .violation-card,
    .violation-library-card,
    .incident-state-panel,
    .fixed-scroll-card {
        height: auto !important;
        min-height: 0 !important;
        max-height: 72vh !important;
    }

    /* The incident map needs a definite height — cap it to a mobile-friendly
       size instead of the 620px desktop reservation. */
    .map-canvas-placeholder,
    #incidentMap {
        min-height: 0 !important;
        height: 360px !important;
    }

    /* 5) Shrink charts to fit (responsive Chart.js fills these heights) */
    .pred-chart-wrap,
    .analytics-basic-history-canvas-wrap,
    .basics-chart-canvas-wrap,
    .ov-chart-compact .basics-chart-canvas-wrap,
    .ch-chart-wrap {
        height: 180px !important;
        min-height: 0 !important;
        max-height: 180px !important;
    }
    /* The Overview chart wrap is a flex:1 item inside the auto-height card; on
       mobile flex-basis 0% collapses it to 0px (the height above is ignored in
       the flex main axis), leaving the BASIC chart invisible. Pin it to a fixed
       block instead — a little taller than the generic 180px so the 7-series
       bottom legend still leaves a usable plot area on phones. */
    .ov-chart-compact .basics-chart-canvas-wrap {
        flex: 0 0 auto !important;
        height: 220px !important;
        max-height: 220px !important;
    }
    /* The Projected Alert Timeline chart runs Chart.js with maintainAspectRatio:false +
       responsive:true, so it fills its PARENT's height. min-height:0 with no height let
       the wrap collapse to 0px → the chart vanished on mobile. Pin a definite height
       (same fix the Overview BASIC chart above needed). */
    .analytics-chart-wrap {
        min-height: 0 !important;
        height: 240px !important;
    }
    .analytics-chart-wrap canvas {
        max-height: 240px !important;
    }
    .basics-chart-container {
        height: auto !important;
        min-height: 0 !important;
        max-height: 240px !important;
    }

    /* 6) Shrink oversized headings/text so they fit narrow cards */
    .page-content-surface h1 {
        font-size: clamp(1.325rem, 5.5vw, 1.725rem) !important;
        line-height: 1.2;
    }
    .page-content-surface h2,
    .page-content-surface .incident-section-title,
    .page-content-surface .analytics-tool-title {
        font-size: clamp(1.145rem, 4.8vw, 1.475rem) !important;
        line-height: 1.25;
    }
    .page-content-surface .ov-detail-title,
    .page-content-surface .subpanel-title {
        font-size: 1.045rem !important;
    }

    /* 7) Crash / Inspection history tables: 9 fixed columns forced into a ~340px
          card collapse to ~30px each, which wraps every cell character-by-character
          into unreadable vertical text. Keep them tabular and scroll HORIZONTALLY
          instead: natural column widths, single-line cells, a real (thin) scrollbar
          so the swipe affordance is visible. */
    .incident-history-table {
        table-layout: auto !important;
        min-width: 620px !important;
    }
    .incident-history-table th,
    .incident-history-table td {
        white-space: nowrap;
        padding: 0.55rem 0.7rem !important;
    }
    .incident-history-table-wrap {
        overflow-x: auto !important;
        scrollbar-width: thin !important;
        -ms-overflow-style: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .incident-history-table-wrap::-webkit-scrollbar {
        display: block !important;
        height: 6px;
    }
    .incident-history-table-wrap::-webkit-scrollbar-thumb {
        background: rgba(100, 116, 139, 0.5);
        border-radius: 3px;
    }
}

/* ─── Operating Authority Registration(s) card (Insurance & Authority tab) ─── */
.oa-legal-name {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.5rem 0 0.6rem;
    margin-bottom: 0.6rem;
    border-bottom: 1.5px solid rgba(37, 99, 235, 0.12);
}

.oa-item {
    border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 8px;
    padding: 0.4rem 0.75rem;
    margin-bottom: 0.6rem;
    background: rgba(248, 250, 255, 0.4);
}

.oa-item:last-child {
    margin-bottom: 0;
}

.oa-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(37, 99, 235, 0.07);
}

.oa-row:last-child {
    border-bottom: none;
}

.oa-label {
    font-size: 0.925rem;
    font-weight: 600;
    color: #475569;
    flex: 0 0 auto;
}

.oa-value {
    font-size: 0.975rem;
    color: #1e3a5f;
    text-align: right;
    min-width: 0;
    word-break: break-word;
}

.oa-legal-name .oa-value {
    font-weight: 700;
}

.oa-status-badge {
    display: inline-block;
    padding: 0.12rem 0.55rem;
    border-radius: 999px;
    font-size: 0.845rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.oa-status-active {
    background: #dcfce7;
    color: #166534;
}

.oa-status-inactive {
    background: #fee2e2;
    color: #991b1b;
}

.oa-status-other {
    background: #e2e8f0;
    color: #475569;
}

/* ═══════════════════════════════════════════════════════════════════════
   SAVED REPORT CARDS — redesigned layout (Profile page)
   Header: identity block on the left (company → USDOT → active status / docket),
   with a subtle status dot + remove button pinned to the top-right. Stat cards
   below are equal-width, centered, with the ISS card colour-coded by score.
   ═══════════════════════════════════════════════════════════════════════ */

/* Header: top-align so the corner cluster sits at the top-right. */
.report-history-item .report-history-header {
    align-items: flex-start !important;
    gap: 12px;
    margin-bottom: 4px;
}

.report-history-identity {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1 1 auto;
}

/* USDOT below the company name — plain text matching the Active Status / Docket
   rows (no gray pill/box, left-aligned). Overrides the badge styling in
   components.css (whose color is !important, so this must be too). */
.report-history-item .report-history-dot {
    display: block;
    padding: 0;
    margin: 2px 0 0;
    border: none;
    background: none;
    border-radius: 0;
    line-height: 1.4;
    font-size: 0.965rem;
    font-weight: 600;
    color: #475569 !important;
}

/* Active Status + Docket below the USDOT. */
.report-history-item .report-history-subheader {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    align-items: baseline;
    margin: 2px 0 0;
    font-size: 0.965rem;
    color: #475569;
}

.report-history-item .report-active-status strong,
.report-history-item .report-docket-number strong {
    color: #1e3a5f;
}

/* Top-right corner: status dot + remove button, equal margin from the edge. */
.report-history-corner {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

/* ── Super-admin "Reload Report" button — styled to match the Export-to-PDF pill,
   sits just to the right of it. While loading it shows only a small spinning circle. ── */
.report-reload-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    background: #fff;
    color: #2563eb;
    border: 1px solid #c7d6f5;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.845rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.report-reload-btn:hover { background: #2563eb; color: #fff; border-color: #2563eb; }
.report-reload-btn:active { transform: translateY(1px); }
.report-reload-btn:disabled { cursor: default; }

/* Small spinning circle, hidden until loading. */
.report-reload-spinner {
    display: none;
    width: 13px;
    height: 13px;
    border: 2px solid rgba(37, 99, 235, 0.3);
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: report-reload-spin 0.7s linear infinite;
}
.report-reload-btn.is-loading {
    /* Hold the button still while loading; only the inner circle spins. */
    background: #fff;
    color: #2563eb;
    border-color: #c7d6f5;
}
.report-reload-btn.is-loading .report-reload-label { display: none; }
.report-reload-btn.is-loading .report-reload-spinner { display: inline-block; }
@keyframes report-reload-spin {
    to { transform: rotate(360deg); }
}

/* ── Subtle status dot + hover/focus tooltip ── */
.report-status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    cursor: help;
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.05);
}

.report-status-dot--complete { background: #28a745; }
.report-status-dot--partial { background: #ffc107; }
.report-status-dot--incomplete { background: #dc3545; }

.report-status-dot::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #1e293b;
    color: #fff;
    font-size: 0.845rem;
    font-weight: 600;
    padding: 6px 9px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.12s ease, transform 0.12s ease;
    z-index: 40;
}

.report-status-dot:hover::after,
.report-status-dot:focus::after {
    opacity: 1;
    transform: translateY(0);
}

/* ── Stat cards: equal width, centered text, consistent 16px padding ── */
.report-history-item .report-history-meta-grid {
    gap: 16px !important;
    margin-top: 16px !important;
    align-items: stretch;
}

.report-history-item .report-stat-card {
    padding: 16px !important;
    display: flex;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 4px !important;
    min-height: 74px;
    border-radius: 10px;
}

.report-history-item .report-stat-title {
    font-size: 0.905rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}

.report-history-item .report-stat-value {
    font-size: 1.325rem;
    font-weight: 700;
    color: #1e3a5f;
}

/* ── ISS colour coding (subtle tinted background + border) ── */
.report-stat-iss.iss-good {
    background: rgba(40, 167, 69, 0.10) !important;
    border-color: rgba(40, 167, 69, 0.45) !important;
}
.report-stat-iss.iss-good .report-stat-value { color: #1e7e34; }

.report-stat-iss.iss-warn {
    background: rgba(255, 193, 7, 0.16) !important;
    border-color: rgba(255, 193, 7, 0.6) !important;
}
.report-stat-iss.iss-warn .report-stat-value { color: #9a7400; }

.report-stat-iss.iss-poor {
    background: rgba(220, 53, 69, 0.10) !important;
    border-color: rgba(220, 53, 69, 0.45) !important;
}
.report-stat-iss.iss-poor .report-stat-value { color: #c0392b; }

/* Insurance & Authority top row: Operating Authority (left) + Active Insurance
   (right), evenly split on desktop. Below 992px the existing rules stack it. */
@media (min-width: 992px) {
    #licensingInsuranceSection .responsive-panel-row {
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
    }
}

/* ─── Admin 69 Pro Max — extra admin-panel controls (super-admin only) ─── */
.admin-role-fixed {
    font-weight: 700;
    color: #1d4ed8;
    white-space: nowrap;
}

.admin-online-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.945rem;
    font-weight: 600;
    white-space: nowrap;
}

.admin-online-badge .admin-online-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
}

.admin-online-badge.is-online {
    color: #15803d;
}

.admin-online-badge.is-online .admin-online-dot {
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

.admin-online-badge.is-offline {
    color: #94a3b8;
}

.admin-online-badge.is-offline .admin-online-dot {
    background: #cbd5e1;
}

.admin-delete-btn {
    border: 1px solid #ef4444;
    color: #ef4444;
    background: #fff;
    border-radius: 6px;
    padding: 0.25rem 0.7rem;
    font-size: 0.925rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.admin-delete-btn:hover {
    background: #ef4444;
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════
   Cross-page readability pass
   • Wider page gutters so multi-column card rows sit closer together on
     desktop (the content area was effectively full-bleed before).
   • Body/data text bumped ~2px for legibility. Titles (.ov-detail-title,
     .section-label, headings) and bold labels keep their sizes so the
     visual hierarchy (small-caps label → prominent value) is preserved.
   ═══════════════════════════════════════════════════════════════════════ */

/* +2px base: all inherited body/data text (0.875rem → 1rem). */
body {
    font-size: 1.125rem;
}

/* Page side gutters — shrink the content width so cards are closer together. */
@media (min-width: 992px) {
    .page-content-surface {
        padding-left: clamp(24px, 4vw, 72px);
        padding-right: clamp(24px, 4vw, 72px);
    }
}

/* Overview "Company detail" values (data, not the bold labels).
   Note: the #companyCol* ID rules in components.css are the authoritative size
   for the identity/contact/address/fleet/compliance columns; this matches them
   for any other .ov-detail cards. */
.ov-detail p,
.ov-detail p span {
    font-size: 1.145rem;
}
/* Long values (DOT Email, Company Reps) must wrap/break instead of overflowing
   into the line below — this overlap was most visible at larger text sizes. */
.ov-detail p {
    margin: 0.18rem 0;
    line-height: 1.4;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.ov-detail p span {
    overflow-wrap: anywhere;
    word-break: break-word;
}
.ov-detail .warning-item {
    font-size: 1.075rem;
}

/* Score side-stack — secondary (non-label) data. */
.ov-side-value-sm { font-size: 1.125rem; }
.ov-side-sub { font-size: 0.975rem; }

/* SAFER option lists, Operating Authority values, risk-analysis values. */
.safer-option-label { font-size: 1.075rem; }
.oa-value { font-size: 1.125rem; }
.ov-card-val { font-size: 1.105rem; }
.ov-trend-val { font-size: 1.075rem; }

/* On phones, dial the desktop +2px bump back down so dense cards stay readable
   and fit the narrow width without needing to zoom or scroll horizontally. */
@media (max-width: 768px) {
    body { font-size: 1.025rem; }
    #companyColIdentity span,
    #companyColAddresses span,
    #companyColContact span,
    #companyColFleetMetrics span,
    #companyColComplianceStatus span,
    .ov-detail p,
    .ov-detail p span {
        font-size: 1.025rem;
    }
    .safer-option-label { font-size: 1.005rem; }
    .ov-card-val,
    .ov-trend-val { font-size: 1.025rem; }

    /* Inspections/Crashes-in-US table: shrink to fit the card, and let it scroll
       inside the card (never the page) if a carrier's values are still too wide. */
    #oosRatesTable {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .oos-rates-table {
        font-size: 0.845rem !important;
    }
    .oos-rates-table th,
    .oos-rates-table td {
        padding: 0.3rem 0.32rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   ISS/Risk score card — Alerts item.
   Lay it out as a vertical block: a header row ("Alerts" label on the left, a
   "⚠ N" count on the right) and the list of alerting BASICs stacked below.
   This replaces the old single flex row where the names sat inline with the
   count and overlapped/were clipped on narrow score-card widths. The item
   sizes to its content so the list never spills over neighbouring rows.
   ═══════════════════════════════════════════════════════════════════════ */
.ov-side-stack .ov-side-item.ov-side-item-alerts {
    flex: 0 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0.3rem;
    position: relative;       /* anchor the vertically-centered count on the right */
    padding-right: 2.9rem;    /* reserve room so the large count clears the label/list */
}

.ov-side-item-alerts .ov-alerts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
}

.ov-side-item-alerts .ov-alerts-header .ov-side-label {
    flex: 0 1 auto;
}

.ov-alerts-count {
    /* Centered vertically on the right side of the card. */
    position: absolute;
    right: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2.025rem;
    font-weight: 800;
    color: #dc2626;
    line-height: 1;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.ov-alerts-count.ov-alerts-none {
    color: #16a34a;
    font-weight: 700;
    /* "None" is not a count — keep it modest rather than ISS-score sized. */
    font-size: 0.975rem;
}

/* The names list (overrides the old inline/wrap/justify-end layout). */
.ov-side-item-alerts .snapshot-alerts-inline.ov-alerts-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.1rem;
    min-height: 0;
    flex: 0 0 auto;
    width: 100%;
}

.ov-side-item-alerts .ov-alerts-list:empty {
    display: none;
}

.ov-alerts-list .ov-alert-line {
    font-size: 0.925rem;
    line-height: 1.3;
    font-weight: 600;
    color: #b91c1c;
    word-break: break-word;
}

/* Carrier load error / retry state (shown in #carrierLoadErrorCard when a report
   fails to load). Deliberately distinct from a real carrier card so a failed load
   can never be mistaken for live data. Dark mode is covered via .app-state-card. */
#carrierLoadErrorCard.app-state-card {
    padding: 2rem;
    text-align: center;
}
.carrier-error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0;
}
.carrier-error-state .carrier-error-icon {
    font-size: 2.25rem;
    line-height: 1;
}
.carrier-error-state h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #b91c1c;
}
.carrier-error-state p {
    margin: 0;
    max-width: 32rem;
    color: var(--text-muted, #64748b);
    font-size: 0.95rem;
    line-height: 1.45;
}
.carrier-error-retry {
    margin-top: 0.35rem;
    min-width: 8rem;
}

/* -------------------------------------------------------
   OVERVIEW - Risk Warnings & Notices card
   Data-driven indicators (renderRiskWarnings in app.js).
   Levels: warn (red) / caution (amber) / info (blue).
   ------------------------------------------------------- */
.risk-warnings-list { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.5rem; }
.risk-warning-item {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    border-left: 3px solid transparent;
    font-size: 0.9rem;
    line-height: 1.35;
}
.risk-warning-icon { flex: 0 0 auto; }
.risk-warning-warn    { border-left-color: #dc2626; background: rgba(220, 38, 38, 0.08); color: #991b1b; }
.risk-warning-caution { border-left-color: #d97706; background: rgba(217, 119, 6, 0.10); color: #92400e; }
.risk-warning-info    { border-left-color: #2563eb; background: rgba(37, 99, 235, 0.08); color: #1e40af; }
.risk-warning-none    { border-left-color: #16a34a; background: rgba(22, 163, 74, 0.08); color: #166534; }
.risk-warnings-empty, .peer-group-empty { color: #6b7280; font-size: 0.9rem; padding: 0.5rem 0; }
.ov-card-footnote { margin-top: 0.65rem; font-size: 0.75rem; color: #6b7280; }

body.theme-dark .risk-warning-warn    { background: rgba(220, 38, 38, 0.16); color: #fca5a5; }
body.theme-dark .risk-warning-caution { background: rgba(217, 119, 6, 0.16); color: #fcd34d; }
body.theme-dark .risk-warning-info    { background: rgba(37, 99, 235, 0.18); color: #93c5fd; }
body.theme-dark .risk-warning-none    { background: rgba(22, 163, 74, 0.15); color: #86efac; }
body.theme-dark .risk-warnings-empty, body.theme-dark .peer-group-empty,
body.theme-dark .ov-card-footnote, body.theme-dark .peer-group-footnote { color: #9ca3af; }

/* -------------------------------------------------------
   OVERVIEW - Peer Group Comparison card
   (renderPeerGroupAnalysis in app.js; averages from /api/peers/summary)
   ------------------------------------------------------- */
.peer-group-bracket { font-weight: 500; font-size: 0.85em; color: #6b7280; margin-left: 0.35rem; }
.peer-group-table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; font-size: 0.88rem; }
.peer-group-table th, .peer-group-table td { text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid rgba(107, 114, 128, 0.2); }
.peer-group-table th { font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; color: #6b7280; }
.peer-status { white-space: nowrap; font-size: 0.82rem; font-weight: 600; }
.peer-status-bad  { color: #dc2626; }
.peer-status-good { color: #16a34a; }
.peer-status-ok   { color: #6b7280; }
.peer-status-info { color: #2563eb; }
.peer-status-na   { color: #9ca3af; }

.peer-basics-block { margin-top: 1rem; }
.peer-basics-title { font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.03em; color: #6b7280; margin-bottom: 0.5rem; }
.peer-basic-row { display: grid; grid-template-columns: 8.5rem 3rem 1fr 6.5rem; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; font-size: 0.85rem; }
.peer-basic-label { color: inherit; }
.peer-basic-mine { font-weight: 700; text-align: right; }
.peer-basic-mine-over { color: #dc2626; }
.peer-basic-track { position: relative; height: 0.65rem; border-radius: 4px; background: rgba(107, 114, 128, 0.18); overflow: visible; }
.peer-basic-fill { height: 100%; border-radius: 4px; background: #2563eb; }
.peer-basic-fill-over { background: #dc2626; }
.peer-basic-marker { position: absolute; top: -0.2rem; bottom: -0.2rem; width: 2px; background: #111827; opacity: 0.75; }
.peer-basic-peer { color: #6b7280; font-size: 0.78rem; white-space: nowrap; }
.peer-group-footnote { margin-top: 0.75rem; font-size: 0.75rem; color: #6b7280; }

body.theme-dark .peer-basic-marker { background: #f9fafb; }
body.theme-dark .peer-basic-track { background: rgba(156, 163, 175, 0.25); }
body.theme-dark .peer-group-table th { color: #9ca3af; }
body.theme-dark .peer-group-table th, body.theme-dark .peer-group-table td { border-bottom-color: rgba(156, 163, 175, 0.25); }
body.theme-dark .peer-status-bad  { color: #fca5a5; }
body.theme-dark .peer-status-good { color: #86efac; }
body.theme-dark .peer-status-ok   { color: #9ca3af; }
body.theme-dark .peer-status-info { color: #93c5fd; }
body.theme-dark .peer-basic-mine-over { color: #fca5a5; }

@media (max-width: 700px) {
    .peer-basic-row { grid-template-columns: 6.5rem 2.6rem 1fr; }
    .peer-basic-peer { grid-column: 3; justify-self: end; }
}

/* -------------------------------------------------------
   ACORD 25 pre-fill page (renderAcord25Page in app.js)
   A review-DRAFT editor, not a clone of the official form.
   ------------------------------------------------------- */
.acord25-page { max-width: 960px; margin: 0 auto; padding: 0.5rem 0 2rem; }

.acord25-draft-banner {
    display: flex; align-items: flex-start; gap: 0.6rem;
    padding: 0.75rem 1rem; margin-bottom: 1rem;
    border-left: 4px solid #d97706; border-radius: 6px;
    background: rgba(217, 119, 6, 0.10); color: #92400e; font-size: 0.9rem; line-height: 1.4;
}
.acord25-draft-icon { flex: 0 0 auto; font-size: 1.05rem; }

.acord25-toolbar {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem;
    padding: 1rem; margin-bottom: 1rem; border-radius: 8px;
    background: rgba(37, 99, 235, 0.05); border: 1px solid rgba(37, 99, 235, 0.12);
}
.acord25-toolbar-field { display: flex; flex-direction: column; gap: 0.3rem; }
.acord25-toolbar-field > label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: #6b7280; }
.acord25-toolbar-actions { display: flex; gap: 0.5rem; margin-left: auto; align-items: flex-end; flex-wrap: wrap; }
.acord25-dot-row { display: flex; gap: 0.4rem; }
.acord25-select, .acord25-input {
    padding: 0.5rem 0.6rem; border: 1px solid #cbd5e1; border-radius: 6px;
    font-size: 0.9rem; background: #fff; color: #1e293b; min-width: 0;
}
.acord25-select { min-width: 240px; }
.acord25-input:focus, .acord25-select:focus { outline: 2px solid rgba(37, 99, 235, 0.35); outline-offset: 1px; border-color: #2563eb; }

.acord25-btn {
    padding: 0.5rem 0.9rem; border: 1px solid #cbd5e1; border-radius: 6px;
    background: #fff; color: #1e293b; font-size: 0.88rem; font-weight: 600; cursor: pointer;
    white-space: nowrap; transition: background 0.12s, border-color 0.12s;
}
.acord25-btn:hover:not(:disabled) { background: #f1f5f9; border-color: #94a3b8; }
.acord25-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.acord25-btn-primary { background: #2563eb; border-color: #2563eb; color: #fff; }
.acord25-btn-primary:hover:not(:disabled) { background: #1d4ed8; border-color: #1d4ed8; }

.acord25-status {
    padding: 0.6rem 0.9rem; margin-bottom: 1rem; border-radius: 6px;
    font-size: 0.85rem; line-height: 1.4; white-space: pre-line; border-left: 3px solid transparent;
}
.acord25-status-busy { background: rgba(37, 99, 235, 0.08); border-left-color: #2563eb; color: #1e40af; }
.acord25-status-ok   { background: rgba(22, 163, 74, 0.08); border-left-color: #16a34a; color: #166534; }
.acord25-status-warn { background: rgba(217, 119, 6, 0.10); border-left-color: #d97706; color: #92400e; }
.acord25-status-error{ background: rgba(220, 38, 38, 0.08); border-left-color: #dc2626; color: #991b1b; }
.acord25-status-info { background: rgba(100, 116, 139, 0.10); border-left-color: #64748b; color: #334155; }

.acord25-sheet { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.acord25-sheet-head { border-bottom: 2px solid #1e293b; padding-bottom: 0.75rem; margin-bottom: 1.25rem; }
.acord25-sheet-title { font-size: 1.15rem; font-weight: 700; color: #1e293b; }
.acord25-sheet-sub { font-size: 0.85rem; color: #64748b; margin-top: 0.2rem; }
.acord25-sheet-draftmark { margin-top: 0.5rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; color: #b45309; }

.acord25-fieldset { border: 1px solid #e2e8f0; border-radius: 8px; padding: 1rem 1.1rem 1.1rem; margin: 0 0 1.1rem; }
.acord25-fieldset > legend { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #2563eb; padding: 0 0.4rem; }
.acord25-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.85rem 1rem; }
.acord25-field { display: flex; flex-direction: column; gap: 0.3rem; }
.acord25-field-wide { grid-column: 1 / -1; }
.acord25-field-narrow { max-width: 130px; }
.acord25-label { font-size: 0.75rem; font-weight: 600; color: #475569; }
.acord25-blanknote { margin: 0.5rem 0 0; font-size: 0.78rem; color: #6b7280; line-height: 1.45; }

/* Dark mode */
body.theme-dark .acord25-draft-banner { background: rgba(217, 119, 6, 0.16); color: #fcd34d; }
body.theme-dark .acord25-toolbar { background: rgba(37, 99, 235, 0.10); border-color: rgba(37, 99, 235, 0.25); }
body.theme-dark .acord25-toolbar-field > label, body.theme-dark .acord25-label { color: #9ca3af; }
body.theme-dark .acord25-select, body.theme-dark .acord25-input { background: #1f2937; color: #e5e7eb; border-color: #4b5563; }
body.theme-dark .acord25-btn { background: #1f2937; color: #e5e7eb; border-color: #4b5563; }
body.theme-dark .acord25-btn:hover:not(:disabled) { background: #374151; }
body.theme-dark .acord25-btn-primary { background: #2563eb; color: #fff; border-color: #2563eb; }
body.theme-dark .acord25-sheet { background: #111827; border-color: #374151; box-shadow: none; }
body.theme-dark .acord25-sheet-head { border-bottom-color: #e5e7eb; }
body.theme-dark .acord25-sheet-title { color: #f3f4f6; }
body.theme-dark .acord25-fieldset { border-color: #374151; }
body.theme-dark .acord25-blanknote, body.theme-dark .acord25-sheet-sub { color: #9ca3af; }

@media (max-width: 640px) {
    .acord25-toolbar-actions { margin-left: 0; width: 100%; }
    .acord25-select { min-width: 0; width: 100%; }
    .acord25-toolbar-field { width: 100%; }
}

/* Print: show only the ACORD sheet, hide app chrome + toolbar. */
@media print {
    body * { visibility: hidden !important; }
    .acord25-sheet, .acord25-sheet * { visibility: visible !important; }
    .acord25-noprint { display: none !important; }
    .acord25-sheet {
        position: absolute; left: 0; top: 0; width: 100%;
        border: none; box-shadow: none; padding: 0; margin: 0;
    }
    .acord25-input { border: none; border-bottom: 1px solid #333; border-radius: 0; padding: 2px 0; background: transparent; color: #000; }
    .acord25-fieldset { break-inside: avoid; }
    .acord25-sheet-draftmark { color: #b45309 !important; }
}

/* -------------------------------------------------------
   ACORD 25 — full form additions (coverages, textareas,
   signature) + Certificate Holder modal
   ------------------------------------------------------- */
.acord25-checks { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; }
.acord25-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; font-weight: 600; color: #334155; cursor: pointer; }
.acord25-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: #2563eb; cursor: pointer; }

.acord25-textarea {
    padding: 0.5rem 0.6rem; border: 1px solid #cbd5e1; border-radius: 6px;
    font-size: 0.9rem; font-family: inherit; background: #fff; color: #1e293b; resize: vertical; min-height: 3rem;
}
.acord25-textarea:focus { outline: 2px solid rgba(37, 99, 235, 0.35); outline-offset: 1px; border-color: #2563eb; }

.acord25-autofilltag {
    font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    color: #16a34a; background: rgba(22, 163, 74, 0.12); padding: 1px 6px; border-radius: 999px; margin-left: 0.5rem; vertical-align: middle;
}
.acord25-inline-edit {
    float: right; font-size: 0.72rem; font-weight: 600; color: #2563eb; background: none;
    border: 1px solid rgba(37, 99, 235, 0.35); border-radius: 5px; padding: 2px 8px; cursor: pointer;
}
.acord25-inline-edit:hover { background: rgba(37, 99, 235, 0.08); }

.acord25-signature-line { height: 2.2rem; border-bottom: 1.5px solid #64748b; margin: 0.2rem 0; max-width: 340px; }
.acord25-sign-note { font-size: 0.72rem; font-style: italic; color: #6b7280; }

/* Modal */
.acord25-modal-overlay {
    /* The app header is fixed at z-index 9999; at 1000 this overlay rendered UNDER it and
       the dialog's top was clipped. Sit above it (matching the 12000 used elsewhere for
       "above the auth screen and fixed app header") AND start below the header so the
       title bar is never hidden on short screens. */
    position: fixed; inset: 0; z-index: 12000; display: flex; align-items: flex-start; justify-content: center;
    background: rgba(15, 23, 42, 0.55);
    padding: 1rem;
    /* --measured-header-height is the header's LIVE height published from JS —
       --app-header-height is a static 80px, but a wrapped header is ~131px and clipped
       the modal title bar. Falls back to the static var when JS hasn't measured yet. */
    padding-top: calc(var(--measured-header-height, var(--app-header-height, 80px)) + 1rem);
    overflow-y: auto;
}
.acord25-modal {
    background: #fff; border-radius: 10px; width: min(680px, 100%);
    max-height: calc(100vh - var(--measured-header-height, var(--app-header-height, 80px)) - 3rem);
    display: flex; flex-direction: column;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}
.acord25-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid #e2e8f0; }
.acord25-modal-title { font-size: 1.05rem; font-weight: 700; color: #1e293b; }
.acord25-modal-close { background: none; border: none; font-size: 1.1rem; color: #64748b; cursor: pointer; line-height: 1; }
.acord25-modal-body { padding: 1.1rem 1.25rem; overflow-y: auto; }
.acord25-modal-desc { margin: 0 0 1rem; font-size: 0.82rem; color: #6b7280; }
.acord25-modal-section { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #2563eb; margin: 0.5rem 0 0.6rem; padding-bottom: 0.3rem; border-bottom: 1px solid #eef2f7; }
.acord25-modal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem 1rem; margin-bottom: 0.75rem; }
.acord25-modal-foot { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 0.9rem 1.25rem; border-top: 1px solid #e2e8f0; }
.acord25-btn-danger { color: #b91c1c; border-color: #fca5a5; }
.acord25-btn-danger:hover:not(:disabled) { background: rgba(220, 38, 38, 0.08); }

/* Dark mode */
body.theme-dark .acord25-check { color: #cbd5e1; }
body.theme-dark .acord25-textarea { background: #1f2937; color: #e5e7eb; border-color: #4b5563; }
body.theme-dark .acord25-sign-note, body.theme-dark .acord25-modal-desc { color: #9ca3af; }
body.theme-dark .acord25-signature-line { border-bottom-color: #9ca3af; }
body.theme-dark .acord25-modal { background: #111827; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6); }
body.theme-dark .acord25-modal-head, body.theme-dark .acord25-modal-foot { border-color: #374151; }
body.theme-dark .acord25-modal-title { color: #f3f4f6; }
body.theme-dark .acord25-modal-section { color: #93c5fd; border-bottom-color: #374151; }

/* Print: the signature line + checkboxes must render on paper. */
@media print {
    .acord25-textarea { border: none; border-bottom: 1px solid #333; border-radius: 0; background: transparent; color: #000; }
    .acord25-check input[type="checkbox"] { -webkit-appearance: checkbox; appearance: checkbox; }
    .acord25-autofilltag { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* -------------------------------------------------------
   ACORD 25 — full-form ("acf-") layout.
   Structural recreation of the official ACORD 25 grid:
   INSR LTR | TYPE | ADDL INSD | SUBR WVD | POLICY # | EFF |
   EXP | LIMITS. Responsive: stacks on mobile.
   ------------------------------------------------------- */
.acord25-page { max-width: 1120px; }
.acord25-sheet { padding: 0.9rem; }

.acf-in {
    width: 100%; min-width: 0; border: none; border-bottom: 1px solid #cbd5e1;
    background: transparent; font-size: 0.78rem; padding: 2px 3px; color: #1e293b; font-family: inherit;
}
.acf-in:focus { outline: none; border-bottom-color: #2563eb; background: rgba(37, 99, 235, 0.06); }
.acf-center { text-align: center; }
.acf-ta {
    width: 100%; border: 1px solid #cbd5e1; border-radius: 3px; background: transparent;
    font-size: 0.78rem; font-family: inherit; padding: 4px; color: #1e293b; resize: vertical;
}
.acf-ta:focus { outline: none; border-color: #2563eb; }
.acf-mini { font-size: 0.6rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.02em; }
.acf-dollar { font-weight: 700; color: #475569; font-size: 0.72rem; }

.acf-titlebar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 2px solid #1e293b; padding-bottom: 0.4rem; }
.acf-title { font-size: 1.02rem; font-weight: 700; letter-spacing: 0.02em; color: #1e293b; }
.acf-titledate { display: flex; flex-direction: column; min-width: 150px; }
.acf-sub { font-size: 0.72rem; color: #64748b; margin: 0.25rem 0 0.5rem; }

.acf-legal { font-size: 0.58rem; line-height: 1.45; color: #475569; border: 1px solid #e2e8f0; padding: 0.4rem 0.5rem; margin-bottom: 0.4rem; }
.acf-legal-tight { font-size: 0.55rem; }

.acf-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; margin-bottom: 0.4rem; }
.acf-box { border: 1px solid #cbd5e1; padding: 0.4rem 0.5rem; display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.acf-boxlabel { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; color: #1e293b; letter-spacing: 0.03em; margin-bottom: 0.15rem; }
.acf-inline3 { display: grid; grid-template-columns: 1fr 42px 72px; gap: 0.3rem; }
.acf-kv { display: flex; flex-direction: column; }
.acf-kv2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
.acf-insurers-head { display: flex; justify-content: space-between; font-size: 0.6rem; font-weight: 700; color: #1e293b; border-bottom: 1px solid #cbd5e1; padding-bottom: 2px; margin-bottom: 2px; }
.acf-insurer { display: grid; grid-template-columns: 70px 1fr 68px; gap: 0.3rem; align-items: center; }
.acf-ltr { font-size: 0.6rem; font-weight: 700; color: #475569; }
.acf-naicin { border-bottom-color: #94a3b8; }

.acf-covhead { display: flex; align-items: center; gap: 0.5rem; background: #f1f5f9; border: 1px solid #cbd5e1; padding: 0.3rem 0.5rem; margin-bottom: 0.4rem; }
.acf-covhead-t { font-size: 0.8rem; font-weight: 700; color: #1e293b; margin-right: auto; }
.acf-covhead .acf-in { max-width: 130px; }

/* Coverage grid */
.acf-cov {
    display: grid;
    grid-template-columns: 34px minmax(0, 1.35fr) 42px 42px minmax(0, 1fr) 82px 82px minmax(0, 1.5fr);
    gap: 0; border: 1px solid #cbd5e1; border-top: none;
}
.acf-cov > div { border-right: 1px solid #e2e8f0; padding: 0.3rem; min-width: 0; display: flex; flex-direction: column; justify-content: flex-start; }
.acf-cov > div:last-child { border-right: none; }
.acf-cov-head { border-top: 1px solid #cbd5e1; background: #f1f5f9; }
.acf-cov-head > div { font-size: 0.55rem; font-weight: 700; text-align: center; color: #334155; line-height: 1.2; justify-content: center; }
.acf-c-addl, .acf-c-subr { align-items: center; justify-content: center; }
.acf-c-addl input[type="checkbox"], .acf-c-subr input[type="checkbox"] { width: 14px; height: 14px; accent-color: #2563eb; }
.acf-na { font-size: 0.55rem; font-weight: 700; color: #94a3b8; }
.acf-typename { font-size: 0.66rem; font-weight: 700; color: #1e293b; margin-bottom: 0.15rem; }
.acf-cb { display: flex; align-items: center; gap: 0.3rem; font-size: 0.62rem; color: #334155; cursor: pointer; }
.acf-cb input[type="checkbox"] { width: 13px; height: 13px; accent-color: #2563eb; flex: 0 0 auto; }
.acf-cb-strong { font-weight: 700; }
.acf-agg { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; margin-top: 0.2rem; padding-top: 0.2rem; border-top: 1px dotted #cbd5e1; }
.acf-agg-other { max-width: 110px; }
.acf-yn { max-width: 34px; }
.acf-lim { display: grid; grid-template-columns: 1fr auto minmax(64px, 88px); gap: 0.25rem; align-items: center; font-size: 0.56rem; color: #475569; line-height: 1.15; padding: 1px 0; }
.acf-lim + .acf-lim { border-top: 1px dotted #e2e8f0; }

.acf-desc { border: 1px solid #cbd5e1; padding: 0.4rem 0.5rem; margin-bottom: 0.4rem; }
.acf-footer { display: flex; justify-content: space-between; font-size: 0.55rem; color: #64748b; margin-top: 0.5rem; padding-top: 0.3rem; border-top: 1px solid #e2e8f0; }

/* Dark mode */
body.theme-dark .acf-in, body.theme-dark .acf-ta { color: #e5e7eb; border-color: #4b5563; }
body.theme-dark .acf-in:focus { background: rgba(37, 99, 235, 0.18); border-bottom-color: #60a5fa; }
body.theme-dark .acf-title, body.theme-dark .acf-boxlabel, body.theme-dark .acf-typename,
body.theme-dark .acf-covhead-t, body.theme-dark .acf-insurers-head { color: #f3f4f6; }
body.theme-dark .acf-mini, body.theme-dark .acf-dollar, body.theme-dark .acf-ltr,
body.theme-dark .acf-legal, body.theme-dark .acf-lim, body.theme-dark .acf-cb { color: #cbd5e1; }
body.theme-dark .acf-sub, body.theme-dark .acf-footer { color: #9ca3af; }
body.theme-dark .acf-titlebar { border-bottom-color: #e5e7eb; }
body.theme-dark .acf-box, body.theme-dark .acf-cov, body.theme-dark .acf-desc,
body.theme-dark .acf-legal, body.theme-dark .acf-covhead { border-color: #4b5563; }
body.theme-dark .acf-cov > div { border-right-color: #374151; }
body.theme-dark .acf-cov-head, body.theme-dark .acf-covhead { background: #1f2937; }
body.theme-dark .acf-cov-head > div { color: #d1d5db; }
body.theme-dark .acf-lim + .acf-lim { border-top-color: #374151; }
body.theme-dark .acf-agg { border-top-color: #4b5563; }
body.theme-dark .acf-footer { border-top-color: #374151; }

/* Mobile: stack the coverage grid into labeled blocks */
@media (max-width: 860px) {
    .acf-row2 { grid-template-columns: 1fr; }
    .acf-cov { grid-template-columns: 1fr; }
    .acf-cov > div { border-right: none; border-bottom: 1px solid #e2e8f0; }
    .acf-cov-head { display: none; }
    .acf-c-ltr::before { content: 'INSR LTR'; }
    .acf-c-addl::before { content: 'ADDL INSD'; }
    .acf-c-subr::before { content: 'SUBR WVD'; }
    .acf-c-pol::before { content: 'POLICY NUMBER'; }
    .acf-c-eff::before { content: 'POLICY EFF'; }
    .acf-c-exp::before { content: 'POLICY EXP'; }
    .acf-c-lim::before { content: 'LIMITS'; }
    .acf-cov > div::before {
        font-size: 0.55rem; font-weight: 700; color: #64748b; text-transform: uppercase; margin-bottom: 2px;
    }
    .acf-c-addl, .acf-c-subr { align-items: flex-start; }
    .acf-titlebar { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
    body.theme-dark .acf-cov > div { border-bottom-color: #374151; }
    body.theme-dark .acf-cov > div::before { color: #9ca3af; }
}

/* Print: render the grid as it appears on screen, ink-friendly. */
@media print {
    .acf-in { border-bottom: 1px solid #333; color: #000; background: transparent; }
    .acf-ta { border: 1px solid #333; color: #000; }
    .acf-cov, .acf-box, .acf-desc, .acf-legal, .acf-covhead { border-color: #333 !important; }
    .acf-cov > div { border-right-color: #666 !important; }
    .acf-cov-head, .acf-covhead { background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .acf-cov { break-inside: avoid; }
}

/* ACORD 25 — signature block (per-user uploaded image) */
.acf-sig { display: flex; flex-direction: column; gap: 0.3rem; }
.acf-sig-preview { min-height: 42px; display: flex; align-items: flex-end; }
.acf-sig-preview img { max-height: 46px; max-width: 260px; object-fit: contain; }
.acf-sig-empty { font-size: 0.68rem; font-style: italic; color: #9ca3af; }
.acf-sig-actions { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; margin-top: 0.2rem; }
.acord25-btn-sm { padding: 0.25rem 0.55rem; font-size: 0.72rem; }
label.acord25-btn { display: inline-block; cursor: pointer; }
body.theme-dark .acf-sig-empty { color: #6b7280; }
/* Keep an applied signature visible on paper, but never the upload controls. */
@media print { .acf-sig-actions, #acord25SigApplyWrap { display: none !important; } }

/* ACORD 25 — auto-save indicator */
.acord25-savehint { font-size: 0.72rem; color: #16a34a; align-self: center; margin-right: 0.3rem; white-space: nowrap; }
.acord25-savehint.is-error { color: #dc2626; }
body.theme-dark .acord25-savehint { color: #86efac; }
body.theme-dark .acord25-savehint.is-error { color: #fca5a5; }

/* ACORD 25 — certificate-holder library picker + OTHER row limits */
.acord25-ch-picker { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.35rem; }
.acord25-ch-picker .acord25-select { flex: 1; min-width: 0; }
.acord25-modal-hint { margin: 0 0 0.9rem; font-size: 0.72rem; color: #6b7280; }
.acf-lim-other { grid-template-columns: 1fr auto minmax(64px, 88px); }
.acf-lim-other .acf-in { font-size: 0.56rem; }
body.theme-dark .acord25-modal-hint { color: #9ca3af; }

/* ── Agency Management ─────────────────────────────────────────────────────
   Fleet/driver board + tables. Follows the acord25-* conventions above (same
   control sizing, palette and dark-mode approach) so the two sub-tabs of the
   page look like one tool. Every dark-mode rule sets an explicit dark surface —
   no inherited white — because a light panel behind a dark card is this app's
   most recurring theme bug. */
/* .card has no base padding in this app — each feature adds its own inner padding (the
   section header uses 16px 20px, the prospects card 20px 24px). The agency content
   sections are bare .card/.dashboard-section, so give them the same 20px 24px or their
   text sits flush against the border. */
.agency-tabpanel > .dashboard-section { padding: 20px 24px; }

.agency-subtabs { display: flex; gap: 0.4rem; margin-bottom: 1rem; flex-wrap: wrap; }
.agency-subtab {
    padding: 0.55rem 1rem; border: 1px solid #cbd5e1; border-radius: 8px;
    background: #fff; color: #475569; font-size: 0.9rem; font-weight: 600; cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.agency-subtab:hover { background: #f1f5f9; border-color: #94a3b8; }
.agency-subtab.active { background: #2563eb; border-color: #2563eb; color: #fff; }

.agency-h3 { font-size: 1.05rem; font-weight: 700; color: #1e293b; margin: 0; }
.agency-h4 { font-size: 0.85rem; font-weight: 700; color: #1e293b; margin: 1.1rem 0 0.35rem; }
.agency-sub { font-size: 0.82rem; color: #64748b; margin: 0.2rem 0 0; }
.agency-label { display: block; font-size: 0.75rem; font-weight: 600; color: #475569; margin-bottom: 0.3rem; }

.agency-board-head, .agency-detail-head {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
    gap: 1rem; margin-bottom: 1rem;
}
.agency-board-add { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.agency-dot-row { display: flex; gap: 0.4rem; }

.agency-select, .agency-input {
    padding: 0.5rem 0.6rem; border: 1px solid #cbd5e1; border-radius: 6px;
    font-size: 0.9rem; background: #fff; color: #1e293b; min-width: 0;
}
.agency-select { min-width: 220px; }
.agency-input:focus, .agency-select:focus { outline: 2px solid rgba(37, 99, 235, 0.35); outline-offset: 1px; border-color: #2563eb; }
.agency-file { font-size: 0.88rem; margin-top: 0.6rem; }

.agency-btn {
    padding: 0.5rem 0.9rem; border: 1px solid #cbd5e1; border-radius: 6px;
    background: #fff; color: #1e293b; font-size: 0.88rem; font-weight: 600; cursor: pointer;
    white-space: nowrap; transition: background 0.12s, border-color 0.12s;
}
.agency-btn:hover:not(:disabled) { background: #f1f5f9; border-color: #94a3b8; }
.agency-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.agency-btn-primary { background: #2563eb; border-color: #2563eb; color: #fff; }
.agency-btn-primary:hover:not(:disabled) { background: #1d4ed8; border-color: #1d4ed8; }

.agency-status:empty { display: none; }
.agency-status {
    padding: 0.55rem 0.85rem; margin-bottom: 0.85rem; border-radius: 6px;
    font-size: 0.85rem; line-height: 1.4; border-left: 3px solid transparent;
    background: rgba(100, 116, 139, 0.10); color: #334155;
}
.agency-status-ok    { background: rgba(22, 163, 74, 0.08); border-left-color: #16a34a; color: #166534; }
.agency-status-error { background: rgba(220, 38, 38, 0.08); border-left-color: #dc2626; color: #991b1b; }
.agency-empty { padding: 1.25rem; text-align: center; font-size: 0.88rem; color: #64748b; }
.agency-loading { padding: 1rem; text-align: center; font-size: 0.85rem; color: #64748b; }
.agency-warn {
    margin-top: 0.6rem; padding: 0.55rem 0.85rem; border-radius: 6px; font-size: 0.8rem;
    background: rgba(217, 119, 6, 0.10); border-left: 3px solid #d97706; color: #92400e;
}

/* Carrier board */
.agency-carrier-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.75rem; }
.agency-carrier-card {
    position: relative; display: flex; border: 1px solid #e2e8f0; border-radius: 8px;
    background: #fff; transition: border-color 0.12s, box-shadow 0.12s;
}
.agency-carrier-card:hover { border-color: #94a3b8; box-shadow: 0 1px 6px rgba(0,0,0,0.07); }
.agency-carrier-card.is-active { border-color: #2563eb; box-shadow: 0 0 0 1px #2563eb; }
.agency-carrier-main {
    flex: 1; display: flex; flex-direction: column; gap: 0.25rem; align-items: flex-start;
    padding: 0.85rem 2rem 0.85rem 0.95rem; background: none; border: none; cursor: pointer; text-align: left;
}
.agency-carrier-name { font-size: 0.92rem; font-weight: 600; color: #1e293b; line-height: 1.3; }
.agency-carrier-dot { font-size: 0.75rem; color: #64748b; }
.agency-carrier-counts { display: flex; gap: 0.4rem; margin-top: 0.3rem; }
.agency-badge {
    font-size: 0.72rem; font-weight: 600; color: #475569;
    background: #f1f5f9; border-radius: 999px; padding: 0.15rem 0.5rem;
}
.agency-carrier-remove {
    position: absolute; top: 0.4rem; right: 0.5rem;
    background: none; border: none; color: #94a3b8; font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.agency-carrier-remove:hover { color: #dc2626; }

/* Tables */
.agency-entity-tabs { display: flex; gap: 0.3rem; margin: 0.5rem 0 1rem; border-bottom: 1px solid #e2e8f0; }
.agency-entity-tab {
    padding: 0.5rem 0.9rem; border: none; border-bottom: 2px solid transparent; background: none;
    color: #64748b; font-size: 0.88rem; font-weight: 600; cursor: pointer;
}
.agency-entity-tab.active { color: #2563eb; border-bottom-color: #2563eb; }
.agency-table-tools { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.75rem; }
.agency-table-count { font-size: 0.8rem; color: #64748b; margin-left: auto; }

/* Wide tables scroll inside their own box — the page itself must never scroll sideways. */
.agency-table-wrap { overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 8px; }
.agency-preview-wrap { max-height: 260px; overflow-y: auto; }
.agency-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.agency-table th {
    text-align: left; padding: 0.5rem 0.6rem; background: #f8fafc; color: #475569;
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
    border-bottom: 1px solid #e2e8f0; white-space: nowrap; position: relative;
}
.agency-table td { padding: 0.2rem; border-bottom: 1px solid #f1f5f9; }
.agency-table tr:last-child td { border-bottom: none; }
.agency-th-actions, .agency-td-actions { width: 2.5rem; }
.agency-cell {
    width: 100%; min-width: 8rem; padding: 0.4rem 0.5rem;
    border: 1px solid transparent; border-radius: 4px;
    background: transparent; color: #1e293b; font-size: 0.85rem;
}
.agency-cell:hover { border-color: #e2e8f0; }
.agency-cell:focus { outline: none; border-color: #2563eb; background: #fff; box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15); }
.agency-col-remove {
    margin-left: 0.35rem; background: none; border: none; color: #94a3b8;
    font-size: 0.9rem; line-height: 1; cursor: pointer;
}
.agency-col-remove:hover { color: #dc2626; }
.agency-row-remove { background: none; border: none; color: #94a3b8; font-size: 0.9rem; cursor: pointer; padding: 0.3rem; }
.agency-row-remove:hover { color: #dc2626; }

/* Import modal */
.agency-modal {
    /* The app header is fixed at z-index 9999 — an overlay below that gets its title
       bar clipped. Same 12000 + header-offset the ACORD modals use. */
    position: fixed; inset: 0; z-index: 12000; display: flex; align-items: flex-start; justify-content: center;
    padding: 1rem; padding-top: calc(var(--app-header-height, 80px) + 1rem); overflow-y: auto;
}
.agency-modal-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); }
.agency-modal-panel {
    position: relative; background: #fff; border-radius: 10px; width: min(560px, 100%);
    max-height: calc(100vh - var(--app-header-height, 80px) - 3rem);
    display: flex; flex-direction: column; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}
.agency-modal-wide { width: min(860px, 100%); }
.agency-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid #e2e8f0; }
.agency-modal-head h3 { font-size: 1.05rem; font-weight: 700; color: #1e293b; margin: 0; }
.agency-modal-close { background: none; border: none; font-size: 1.25rem; color: #64748b; cursor: pointer; line-height: 1; }
.agency-modal-body { padding: 1.1rem 1.25rem; overflow-y: auto; }
.agency-modal-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.9rem 1.25rem; border-top: 1px solid #e2e8f0;
}
.agency-modal-foot .agency-status { margin-bottom: 0; flex: 1; }
.agency-modal-actions { display: flex; gap: 0.5rem; margin-left: auto; }

.agency-import-row { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; flex-wrap: wrap; }
.agency-import-row > label { font-size: 0.8rem; font-weight: 600; color: #475569; min-width: 7rem; }
.agency-detected { font-size: 0.75rem; color: #16a34a; }
.agency-detected-warn { color: #b45309; }
.agency-map-wrap { max-height: 220px; overflow-y: auto; border: 1px solid #e2e8f0; border-radius: 8px; }
.agency-map-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.agency-map-table th {
    text-align: left; padding: 0.45rem 0.6rem; background: #f8fafc; color: #475569;
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; border-bottom: 1px solid #e2e8f0;
}
.agency-map-table td { padding: 0.35rem 0.6rem; border-bottom: 1px solid #f1f5f9; }
.agency-map-header { font-weight: 600; color: #1e293b; }
.agency-map-select { min-width: 200px; width: 100%; }

/* Dark mode */
body.theme-dark .agency-subtab { background: #1f2937; color: #cbd5e1; border-color: #4b5563; }
body.theme-dark .agency-subtab:hover { background: #374151; }
body.theme-dark .agency-subtab.active { background: #2563eb; color: #fff; border-color: #2563eb; }
body.theme-dark .agency-h3, body.theme-dark .agency-h4 { color: #f3f4f6; }
body.theme-dark .agency-sub, body.theme-dark .agency-empty, body.theme-dark .agency-loading,
body.theme-dark .agency-table-count, body.theme-dark .agency-carrier-dot { color: #9ca3af; }
body.theme-dark .agency-label, body.theme-dark .agency-import-row > label { color: #9ca3af; }
body.theme-dark .agency-select, body.theme-dark .agency-input { background: #1f2937; color: #e5e7eb; border-color: #4b5563; }
body.theme-dark .agency-btn { background: #1f2937; color: #e5e7eb; border-color: #4b5563; }
body.theme-dark .agency-btn:hover:not(:disabled) { background: #374151; }
body.theme-dark .agency-btn-primary { background: #2563eb; color: #fff; border-color: #2563eb; }
body.theme-dark .agency-status { background: rgba(148, 163, 184, 0.12); color: #cbd5e1; }
body.theme-dark .agency-status-ok { background: rgba(22, 163, 74, 0.16); color: #86efac; }
body.theme-dark .agency-status-error { background: rgba(220, 38, 38, 0.16); color: #fca5a5; }
body.theme-dark .agency-warn { background: rgba(217, 119, 6, 0.16); color: #fcd34d; }
body.theme-dark .agency-carrier-card { background: #111827; border-color: #374151; }
body.theme-dark .agency-carrier-card:hover { border-color: #6b7280; box-shadow: none; }
body.theme-dark .agency-carrier-card.is-active { border-color: #3b82f6; box-shadow: 0 0 0 1px #3b82f6; }
body.theme-dark .agency-carrier-name { color: #f3f4f6; }
body.theme-dark .agency-badge { background: #374151; color: #cbd5e1; }
body.theme-dark .agency-entity-tabs { border-bottom-color: #374151; }
body.theme-dark .agency-entity-tab { color: #9ca3af; }
body.theme-dark .agency-entity-tab.active { color: #93c5fd; border-bottom-color: #93c5fd; }
body.theme-dark .agency-table-wrap, body.theme-dark .agency-map-wrap { border-color: #374151; }
body.theme-dark .agency-table th, body.theme-dark .agency-map-table th { background: #1f2937; color: #cbd5e1; border-bottom-color: #374151; }
body.theme-dark .agency-table td, body.theme-dark .agency-map-table td { border-bottom-color: #1f2937; }
body.theme-dark .agency-map-header { color: #e5e7eb; }
body.theme-dark .agency-cell { color: #e5e7eb; }
body.theme-dark .agency-cell:hover { border-color: #4b5563; }
body.theme-dark .agency-cell:focus { background: #1f2937; border-color: #3b82f6; }
body.theme-dark .agency-modal-panel { background: #111827; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6); }
body.theme-dark .agency-modal-head, body.theme-dark .agency-modal-foot { border-color: #374151; }
body.theme-dark .agency-modal-head h3 { color: #f3f4f6; }

@media (max-width: 720px) {
    .agency-board-head, .agency-detail-head { flex-direction: column; align-items: stretch; }
    .agency-select { min-width: 0; width: 100%; }
    .agency-carrier-list { grid-template-columns: 1fr; }
}
/* --- ACORD 25: description editor modal, holder history, extra OTHER rows --- */
.acord25-modal-wide { width: min(880px, 100%); }
/* One big text window: a 40-truck schedule should be visible at once. Monospace so the
   Year/Make/VIN columns line up; the modal body scrolls if the viewport is short. */
.acord25-desc-ta {
    width: 100%; min-height: 52vh; resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: 0.82rem; line-height: 1.55;
}
.acord25-modal-foot-spacer { flex: 1 1 auto; }
.acord25-addother { padding: 2px 0 8px; }
.acord25-addother .acord25-inline-edit { float: none; }

.acord25-chh-list { display: flex; flex-direction: column; gap: 8px; }
.acord25-chh-item {
    display: flex; flex-direction: column; gap: 2px; text-align: left;
    padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 8px;
    background: #f8fafc; cursor: pointer; font: inherit; color: inherit;
}
.acord25-chh-item:hover { border-color: #2563eb; background: rgba(37, 99, 235, 0.06); }
.acord25-chh-name { font-weight: 700; color: #1e293b; }
.acord25-chh-meta { font-size: 0.8rem; color: #64748b; }
.acord25-chh-when { font-size: 0.72rem; color: #94a3b8; }
.acord25-chh-empty { padding: 14px 4px; font-size: 0.85rem; color: #6b7280; }

/* --- ACORD 25: quick-policy chips, bottom action, description template creator --- */
.acord25-quickpolicies { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.acord25-quickpolicies-label { font-size: 0.82rem; font-weight: 600; color: #64748b; }
.acord25-chip-btn {
    padding: 5px 12px; border-radius: 999px; border: 1px solid #cbd5e1; background: #fff;
    font-size: 0.82rem; font-weight: 700; color: #334155; cursor: pointer; letter-spacing: 0.02em;
}
.acord25-chip-btn:hover { border-color: #2563eb; background: #eff4ff; }
.acord25-chip-btn.is-active { background: #2563eb; border-color: #2563eb; color: #fff; }

.acord25-form-actions { display: flex; justify-content: flex-end; margin: 14px 0 4px; }
.acord25-btn-lg { font-size: 1rem; padding: 10px 22px; }

/* Description editor: template panel (left) + editor (right). */
.acord25-modal-xwide { width: min(1040px, 100%); }
.acord25-desc-body { display: grid; grid-template-columns: 230px 1fr; gap: 16px; align-items: start; }
.acord25-tpl-panel { border-right: 1px solid #e2e8f0; padding-right: 14px; min-width: 0; }
.acord25-tpl-head { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #2563eb; margin-bottom: 4px; }
.acord25-tpl-hint { font-size: 0.76rem; color: #6b7280; margin: 0 0 8px; }
.acord25-tpl-new { width: 100%; margin-bottom: 10px; }
.acord25-tpl-list { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow-y: auto; }
.acord25-tpl-item { display: flex; align-items: stretch; gap: 4px; }
.acord25-tpl-load {
    flex: 1 1 auto; text-align: left; padding: 7px 9px; border: 1px solid #e2e8f0; border-radius: 6px;
    background: #f8fafc; cursor: pointer; font: inherit; font-size: 0.84rem; color: #1e293b;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acord25-tpl-load:hover { border-color: #2563eb; background: rgba(37,99,235,0.06); }
.acord25-tpl-del { flex: 0 0 auto; width: 28px; border: 1px solid #e2e8f0; border-radius: 6px; background: #fff; color: #b91c1c; cursor: pointer; font-size: 1rem; line-height: 1; }
.acord25-tpl-del:hover { background: rgba(220,38,38,0.08); border-color: #fca5a5; }
.acord25-tpl-empty { font-size: 0.8rem; color: #6b7280; padding: 6px 2px; }
.acord25-desc-main { min-width: 0; }
@media (max-width: 720px) {
    .acord25-desc-body { grid-template-columns: 1fr; }
    .acord25-tpl-panel { border-right: none; border-bottom: 1px solid #e2e8f0; padding-right: 0; padding-bottom: 12px; }
    .acord25-tpl-list { max-height: 22vh; }
}