/* ==========================================================================
   ComplyGuard Diesel Pilot Demo 20260124a — Insurer Portfolio Monitoring
   ========================================================================== */

:root {
    /* Primary palette */
    --color-primary: #c53030;
    --color-primary-dark: #9b2c2c;
    --color-primary-light: #fc8181;

    /* Neutrals */
    --color-gray-900: #1a202c;
    --color-gray-800: #2d3748;
    --color-gray-700: #4a5568;
    --color-gray-600: #718096;
    --color-gray-400: #a0aec0;
    --color-gray-300: #cbd5e0;
    --color-gray-200: #e2e8f0;
    --color-gray-100: #f7fafc;
    --color-white: #ffffff;

    /* Status colors */
    --color-success: #48bb78;
    --color-success-light: #c6f6d5;
    --color-warning: #ed8936;
    --color-warning-light: #feebc8;
    --color-info: #4299e1;
    --color-info-light: #bee3f8;
    --color-gold: #d69e2e;
    --color-gold-light: #faf089;

    /* Alert severity colors */
    --color-critical: #c53030;
    --color-critical-light: #fed7d7;
    --color-high: #ed8936;
    --color-high-light: #feebc8;
    --color-advisory: #4299e1;
    --color-advisory-light: #bee3f8;

    /* Typography */
    --font-main: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Spacing */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
body {
    margin: 0;
    font-family: var(--font-main);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--color-gray-800);
    background: var(--color-gray-100);
}
h1, h2, h3, h4 { margin: 0 0 var(--space-xs); line-height: 1.3; }
p { margin: 0 0 var(--space-xs); }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-gray-900);
    color: white;
    padding: var(--space-xs) var(--space-sm);
    z-index: 100;
}
.skip-link:focus { top: 0; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
header {
    background: var(--color-gray-900);
    color: var(--color-white);
    padding: var(--space-sm) var(--space-md);
    position: sticky;
    top: 0;
    z-index: 50;
}
.header-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header-left {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}
.logo {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-white);
    margin: 0;
}
.pilot-badge {
    background: var(--color-primary);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}
nav { display: flex; gap: var(--space-sm); }
.nav-item {
    padding: var(--space-xs) var(--space-sm);
    border-radius: 4px;
    font-size: 0.875rem;
    color: var(--color-gray-400);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.nav-item:hover { color: var(--color-white); background: var(--color-gray-800); }
.nav-item.active { color: var(--color-white); background: var(--color-gray-700); }
.badge {
    background: var(--color-primary);
    color: white;
    padding: 0.125rem 0.375rem;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Main Layout
   -------------------------------------------------------------------------- */
main {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

section {
    background: var(--color-white);
    border-radius: 8px;
    padding: var(--space-md);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* --------------------------------------------------------------------------
   Pilot Status Header
   -------------------------------------------------------------------------- */
.pilot-status {
    background: linear-gradient(135deg, var(--color-gray-900) 0%, var(--color-gray-800) 100%);
    color: var(--color-white);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
}
.pilot-title {
    font-size: 1.5rem;
    color: var(--color-white);
    margin-bottom: 0.25rem;
}
.pilot-scope {
    color: var(--color-gray-400);
    font-size: 0.875rem;
    margin: 0;
}
.polling-status {
    display: flex;
    gap: var(--space-md);
}
.polling-item {
    text-align: right;
}
.polling-label {
    display: block;
    font-size: 0.75rem;
    color: var(--color-gray-400);
    text-transform: uppercase;
}
.polling-value {
    display: block;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-white);
}

/* --------------------------------------------------------------------------
   Portfolio Stats
   -------------------------------------------------------------------------- */
.portfolio-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-sm);
    padding: var(--space-sm);
    background: transparent;
    box-shadow: none;
}
.portfolio-card {
    text-align: center;
    padding: var(--space-md);
    border-radius: 8px;
    background: var(--color-white);
    border: 2px solid var(--color-gray-300);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.portfolio-count {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-gray-900);
}
.portfolio-label {
    display: block;
    font-size: 0.8125rem;
    color: var(--color-gray-600);
    margin: 0.25rem 0;
    font-weight: 500;
}
.portfolio-percent {
    display: block;
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

.risk-low-card { border-color: var(--color-success); }
.risk-low-card .portfolio-count { color: var(--color-success); }

.risk-medium-card { border-color: var(--color-warning); }
.risk-medium-card .portfolio-count { color: var(--color-warning); }

.risk-high-card { border-color: var(--color-high); }
.risk-high-card .portfolio-count { color: var(--color-high); }

.risk-critical-card { border-color: var(--color-critical); }
.risk-critical-card .portfolio-count { color: var(--color-critical); }

/* --------------------------------------------------------------------------
   Alert Queue Table
   -------------------------------------------------------------------------- */
.alert-queue h3 {
    margin-bottom: var(--space-md);
    font-size: 1.125rem;
    color: var(--color-gray-900);
}
.alert-table {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.alert-table-header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr 1fr 1fr;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    background: var(--color-gray-100);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-gray-600);
}
.alert-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr 1fr 1fr;
    gap: var(--space-sm);
    padding: var(--space-sm);
    background: var(--color-white);
    border-radius: 6px;
    border-left: 4px solid var(--color-gray-300);
    align-items: center;
    font-size: 0.875rem;
}
.alert-row:hover {
    background: var(--color-gray-50);
}
.alert-critical { border-left-color: var(--color-critical); }
.alert-high { border-left-color: var(--color-high); }
.alert-advisory { border-left-color: var(--color-advisory); }

.alert-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
}
.badge-critical {
    background: var(--color-critical-light);
    color: var(--color-critical);
    border: 1px solid var(--color-critical);
}
.badge-high {
    background: var(--color-high-light);
    color: var(--color-high);
    border: 1px solid var(--color-high);
}
.badge-advisory {
    background: var(--color-advisory-light);
    color: var(--color-advisory);
    border: 1px solid var(--color-advisory);
}

.action-link {
    color: var(--color-primary);
    font-size: 0.8125rem;
    font-weight: 500;
}
.action-link:hover {
    text-decoration: underline;
}

.alert-summary {
    margin-top: var(--space-sm);
    font-size: 0.8125rem;
    color: var(--color-gray-600);
    text-align: center;
}
.advisory-count {
    color: var(--color-advisory);
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   FMCSA Timeline
   -------------------------------------------------------------------------- */
.fmcsa-timeline h3 {
    margin-bottom: var(--space-md);
    font-size: 1.125rem;
}
.detection-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.detection-item {
    display: flex;
    gap: var(--space-sm);
    align-items: flex-start;
    padding: var(--space-sm);
    border-radius: 6px;
    background: var(--color-gray-100);
    border-left: 4px solid var(--color-gray-300);
}
.detection-critical { border-left-color: var(--color-critical); background: var(--color-critical-light); }
.detection-high { border-left-color: var(--color-high); background: var(--color-high-light); }
.detection-positive { border-left-color: var(--color-success); background: var(--color-success-light); }

.detection-time {
    font-size: 0.75rem;
    color: var(--color-gray-600);
    width: 90px;
    flex-shrink: 0;
    text-align: right;
}
.detection-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}
.detection-content {
    flex: 1;
}
.detection-content strong {
    display: block;
    font-size: 0.875rem;
    color: var(--color-gray-900);
    margin-bottom: 0.125rem;
}
.detection-content p {
    font-size: 0.8125rem;
    color: var(--color-gray-600);
    margin: 0;
}

/* --------------------------------------------------------------------------
   Section Divider
   -------------------------------------------------------------------------- */
.section-divider {
    background: linear-gradient(90deg, transparent 0%, var(--color-gray-300) 50%, transparent 100%);
    height: 2px;
    margin: var(--space-lg) 0;
    position: relative;
    box-shadow: none;
    padding: 0;
}
.divider-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--color-gray-100);
    padding: 0 var(--space-md);
    font-size: 1rem;
    color: var(--color-gray-600);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* --------------------------------------------------------------------------
   Carrier Header (with Critical Alert variant)
   -------------------------------------------------------------------------- */
.carrier-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--space-sm);
}
.carrier-header.carrier-alert {
    border: 3px solid var(--color-critical);
    background: linear-gradient(135deg, var(--color-critical-light) 0%, #fff5f5 100%);
}
.carrier-identity h2 {
    font-size: 1.5rem;
    color: var(--color-gray-900);
    margin-bottom: 0.25rem;
}
.dba {
    color: var(--color-gray-600);
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}
.identifiers {
    color: var(--color-gray-500);
    font-size: 0.8125rem;
    margin: 0;
}

.carrier-badges {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
}
.risk-badge {
    text-align: center;
    padding: var(--space-xs) var(--space-sm);
    border-radius: 6px;
}
.risk-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    opacity: 0.8;
}
.risk-value {
    display: block;
    font-size: 1.125rem;
    font-weight: 700;
}
.risk-critical {
    background: var(--color-critical);
    color: white;
    border: 2px solid var(--color-critical-dark);
}

.alert-badge-large {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: var(--space-xs) var(--space-sm);
    background: white;
    border: 2px solid var(--color-critical);
    border-radius: 6px;
}
.alert-icon-large {
    font-size: 1.5rem;
}
.alert-text-large {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-critical);
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Delta Detection Table
   -------------------------------------------------------------------------- */
.delta-detection h3 {
    margin-bottom: 0.5rem;
    font-size: 1.125rem;
}
.delta-subtitle {
    font-size: 0.8125rem;
    color: var(--color-gray-600);
    margin-bottom: var(--space-md);
}
.delta-table {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.delta-header {
    display: grid;
    grid-template-columns: 1.5fr 1.5fr 1.5fr 1fr;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    background: var(--color-gray-800);
    color: white;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}
.delta-row {
    display: grid;
    grid-template-columns: 1.5fr 1.5fr 1.5fr 1fr;
    gap: var(--space-sm);
    padding: var(--space-sm);
    background: var(--color-white);
    border-radius: 4px;
    border-left: 4px solid var(--color-gray-300);
    font-size: 0.875rem;
    align-items: center;
}
.delta-ok { border-left-color: var(--color-success); }
.delta-changed { border-left-color: var(--color-info); }
.delta-critical {
    border-left-color: var(--color-critical);
    background: var(--color-critical-light);
}

.status-icon-mini {
    margin-right: 0.25rem;
}

/* --------------------------------------------------------------------------
   Status Cards (with danger variant)
   -------------------------------------------------------------------------- */
.status-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-sm);
    padding: 0;
    background: transparent;
    box-shadow: none;
}
.status-card {
    background: var(--color-white);
    border-radius: 8px;
    padding: var(--space-md);
    display: flex;
    gap: var(--space-sm);
    align-items: flex-start;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    border-left: 4px solid var(--color-gray-300);
}
.status-ok { border-left-color: var(--color-success); }
.status-warning { border-left-color: var(--color-warning); }
.status-danger {
    border-left-color: var(--color-critical);
    background: var(--color-critical-light);
    border: 2px solid var(--color-critical);
}
.status-info { border-left-color: var(--color-info); }

.status-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.status-ok .status-icon { background: var(--color-success-light); color: #276749; }
.status-warning .status-icon { background: var(--color-warning-light); color: #975a16; }
.status-danger .status-icon { background: var(--color-critical); color: white; font-size: 1.125rem; }
.status-info .status-icon { background: var(--color-info-light); color: #2b6cb0; }

.status-content h3 {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--color-gray-600);
    font-weight: 500;
    margin-bottom: 0.25rem;
}
.status-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-gray-900);
    margin: 0;
}
.status-danger .status-value {
    color: var(--color-critical);
    font-size: 1.125rem;
}
.status-detail {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
    margin: 0;
}
.status-danger .status-detail {
    color: var(--color-critical-dark);
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   Alert Timeline
   -------------------------------------------------------------------------- */
.alert-timeline h3 {
    margin-bottom: var(--space-md);
}
.timeline-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.timeline-item {
    display: flex;
    gap: var(--space-sm);
    align-items: flex-start;
    padding: var(--space-sm);
    border-radius: 6px;
    background: var(--color-gray-100);
}
.timeline-date {
    font-size: 0.75rem;
    color: var(--color-gray-500);
    width: 60px;
    flex-shrink: 0;
    text-align: right;
    font-weight: 500;
}
.timeline-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    background: var(--color-gray-200);
}
.item-detection .timeline-icon { background: var(--color-info-light); }
.item-alert .timeline-icon { background: var(--color-critical-light); }
.item-notification .timeline-icon { background: var(--color-success-light); }
.item-pending .timeline-icon { background: var(--color-warning-light); }

.timeline-content strong {
    display: block;
    color: var(--color-gray-900);
    font-size: 0.875rem;
    margin-bottom: 0.125rem;
}
.timeline-content p {
    font-size: 0.8125rem;
    color: var(--color-gray-600);
    margin: 0;
}

/* --------------------------------------------------------------------------
   Risk Analysis
   -------------------------------------------------------------------------- */
.risk-analysis h3 {
    margin-bottom: var(--space-md);
}
.risk-factors {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}
.risk-factor {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    padding: var(--space-sm);
    border-radius: 6px;
    background: var(--color-gray-100);
    border-left: 4px solid var(--color-gray-300);
}
.factor-ok { border-left-color: var(--color-success); }
.factor-warning { border-left-color: var(--color-warning); }
.factor-critical { border-left-color: var(--color-critical); background: var(--color-critical-light); }

.factor-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.factor-ok .factor-icon { background: var(--color-success-light); }
.factor-warning .factor-icon { background: var(--color-warning-light); }
.factor-critical .factor-icon { background: var(--color-critical); color: white; font-size: 1.125rem; }

.factor-content {
    flex: 1;
}
.factor-content strong {
    display: block;
    font-size: 0.875rem;
    color: var(--color-gray-900);
}
.factor-content p {
    font-size: 0.8125rem;
    color: var(--color-gray-600);
    margin: 0;
}

.factor-contribution {
    font-size: 0.875rem;
    font-weight: 700;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}
.factor-ok .factor-contribution { background: var(--color-success-light); color: #276749; }
.factor-warning .factor-contribution { background: var(--color-warning-light); color: #975a16; }
.factor-critical .factor-contribution { background: var(--color-critical); color: white; }

.risk-score-bar {
    height: 32px;
    background: var(--color-gray-200);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
}
.score-fill {
    height: 100%;
    border-radius: 16px;
    transition: width 0.5s ease;
}
.score-fill.score-low { background: linear-gradient(90deg, var(--color-success) 0%, #68d391 100%); }
.score-fill.score-medium { background: linear-gradient(90deg, var(--color-warning) 0%, #f6ad55 100%); }
.score-fill.score-high { background: linear-gradient(90deg, var(--color-critical) 0%, var(--color-primary-light) 100%); }
.score-label {
    position: absolute;
    right: var(--space-sm);
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-gray-900);
}

/* --------------------------------------------------------------------------
   Polling History
   -------------------------------------------------------------------------- */
.polling-history h3 {
    margin-bottom: var(--space-md);
}
.polling-table {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.polling-row {
    display: grid;
    grid-template-columns: 100px 2fr 2fr;
    gap: var(--space-sm);
    padding: var(--space-sm);
    background: var(--color-gray-100);
    border-radius: 4px;
    border-left: 4px solid var(--color-gray-300);
    font-size: 0.875rem;
    align-items: center;
}
.polling-changed {
    border-left-color: var(--color-critical);
    background: var(--color-critical-light);
    font-weight: 500;
}
.polling-clean {
    border-left-color: var(--color-success);
}

.polling-cycle {
    font-weight: 600;
    color: var(--color-gray-700);
}
.polling-timestamp {
    color: var(--color-gray-600);
}
.polling-status {
    color: var(--color-gray-700);
}

.polling-cadence {
    margin-top: var(--space-sm);
    font-size: 0.8125rem;
    color: var(--color-gray-600);
    text-align: center;
    font-style: italic;
}

/* --------------------------------------------------------------------------
   What This Means
   -------------------------------------------------------------------------- */
.what-this-means {
    background: linear-gradient(135deg, var(--color-gray-800) 0%, var(--color-gray-900) 100%);
    color: white;
}
.what-this-means h3 {
    color: white;
    margin-bottom: var(--space-sm);
}
.what-this-means p {
    color: var(--color-gray-300);
    line-height: 1.6;
}
.what-this-means p:last-child {
    margin-bottom: 0;
}
.what-this-means strong {
    color: white;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
footer {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-md);
    text-align: center;
}
footer p {
    color: var(--color-gray-500);
    font-size: 0.8125rem;
    margin: 0;
}
.footer-tagline {
    color: var(--color-primary);
    font-weight: 500;
    margin-top: 0.25rem !important;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    header { padding: var(--space-sm); }
    .header-content { flex-direction: column; gap: var(--space-sm); }
    nav { flex-wrap: wrap; justify-content: center; }
    .pilot-status { flex-direction: column; }
    .carrier-header { flex-direction: column; }
    .carrier-badges { flex-wrap: wrap; }
    .alert-table-header { display: none; }
    .alert-row {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
    .delta-header { display: none; }
    .delta-row {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
    .polling-row {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
}

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

/* --------------------------------------------------------------------------
   Reduced Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .score-fill { transition: none; }
}