/* Modern FMCSA App Styles - TruckingHub Colors */

:root {
    --primary-color: #007BC3;
    --primary-dark: #1A1D21;
    --secondary-color: #64748b;
    --success-color: #1CA13B;
    --warning-color: #d97706;
    --danger-color: #dc2626;
    --light-bg: #f8fafc;
    --border-color: #e2e8f0;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    
    /* Theme-aware colors */
    --text-color: #334155;
    --text-muted: #64748b;
    --card-bg: #ffffff;
    --input-bg: #ffffff;
    --input-border: #e0e0e0;
    --navbar-bg: #ffffff;
    --table-header-bg: #f8f9fa;
    --table-hover-bg: #f8f9fa;
    
    /* Focus styles */
    --focus-outline: 2px solid var(--primary-color);
    --focus-offset: 2px;

    /* Override Bootstrap warning to match app warning color */
    --bs-warning-rgb: 217, 119, 6;
    --bs-warning: #d97706;

    /* Remap Bootstrap's default blue (#0d6efd) to the brand blue everywhere it is used
       (links, .text-primary, .bg-primary badges, etc.). Component button/nav/pagination
       variables are set below. Darker shades are for hover/active states. */
    --primary-hover: #0069a6;
    --primary-active: #00629c;
    --bs-primary: var(--primary-color);
    --bs-primary-rgb: 0, 123, 195;
    --bs-link-color: var(--primary-color);
    --bs-link-color-rgb: 0, 123, 195;
    --bs-link-hover-color: var(--primary-hover);
    --bs-link-hover-color-rgb: 0, 105, 166;
}

/* Bootstrap component colors remapped to the brand blue (paired with the --bs-* vars above) */
.btn-primary {
    --bs-btn-bg: var(--primary-color);
    --bs-btn-border-color: var(--primary-color);
    --bs-btn-hover-bg: var(--primary-hover);
    --bs-btn-hover-border-color: var(--primary-hover);
    --bs-btn-active-bg: var(--primary-active);
    --bs-btn-active-border-color: var(--primary-active);
    --bs-btn-disabled-bg: var(--primary-color);
    --bs-btn-disabled-border-color: var(--primary-color);
}

.btn-outline-primary {
    --bs-btn-color: var(--primary-color);
    --bs-btn-border-color: var(--primary-color);
    --bs-btn-hover-bg: var(--primary-color);
    --bs-btn-hover-border-color: var(--primary-color);
    --bs-btn-active-bg: var(--primary-color);
    --bs-btn-active-border-color: var(--primary-color);
    --bs-btn-disabled-color: var(--primary-color);
    --bs-btn-disabled-border-color: var(--primary-color);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--primary-color);
}

.pagination {
    --bs-pagination-color: var(--primary-color);
    --bs-pagination-hover-color: var(--primary-hover);
    --bs-pagination-focus-color: var(--primary-hover);
    --bs-pagination-active-bg: var(--primary-color);
    --bs-pagination-active-border-color: var(--primary-color);
}

/* Form controls: checked/selected state uses the brand blue instead of Bootstrap's default */
.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

[data-theme="dark"] {
    --primary-color: #007BC3;
    --primary-dark: #0284c7;
    --secondary-color: #a1a1aa;
    --success-color: #1CA13B;
    --warning-color: #f59e0b;
    --danger-color: #ef4444;
    --light-bg: #1f1f1f;
    --border-color: #3f3f3f;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.5);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.6), 0 4px 6px -4px rgb(0 0 0 / 0.6);
    /* Dark theme colors - neutral dark grays like Microsoft 365 admin */
    --text-color: #e5e5e5;
    --text-muted: #a1a1aa;
    --card-bg: #2d2d2d;
    --input-bg: #2d2d2d;
    --input-border: #4a4a4a;
    --navbar-bg: #1f1f1f;
    --table-header-bg: #383838;
    --table-hover-bg: #383838;

    /* Override Bootstrap warning to match app warning color */
    --bs-warning-rgb: 245, 158, 11;
    --bs-warning: #f59e0b;
}

/* Accessibility: Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .theme-toggle:hover,
    .theme-toggle-btn:hover,
    .info-card:hover,
    .fleet-stat:hover,
    .search-btn:hover,
    .copyable-section:hover,
    .motus-pill:hover,
    .copyable-number:hover {
        transform: none !important;
    }
}

/* Prevent flash of unstyled content with smooth transitions */
html {
    transition: none !important;
    overflow-y: scroll; /* Always show scrollbar to prevent layout shift */
}

html[data-theme] {
    transition: background-color 0.3s ease, color 0.3s ease !important;
}

body {
    background-color: var(--light-bg);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Accessibility: Focus Indicators */
.theme-toggle-btn:focus-visible,
.search-btn:focus-visible,
.btn:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
}

.copyable-section:focus-visible,
.copyable-number:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
    border-radius: 4px;
}

.search-input:focus-visible,
.form-control:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
}

/* Theme Toggle Styles */
.theme-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1050;
    display: flex;
    gap: 8px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 8px;
    box-shadow: var(--shadow-lg);
    transition: all 0.3s ease;
}

.theme-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 10px 10px -5px rgb(0 0 0 / 0.04);
}

.theme-toggle-btn {
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 20px;
    background: transparent;
    color: var(--text-muted);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle-btn:hover {
    color: var(--primary-color);
    background: var(--light-bg);
}

.theme-toggle-btn.active {
    background: var(--primary-color);
    color: white;
}

/* Theme toggle divider */
.theme-toggle-divider {
    width: 1px;
    background: var(--border-color);
    margin: 2px 0;
}

/* Feedback Modal Overlay */
.feedback-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.feedback-overlay.active {
    opacity: 1;
    visibility: visible;
}

.feedback-modal {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    width: 380px;
    max-width: 90vw;
    box-shadow: var(--shadow-lg);
    transform: translateY(20px);
    transition: transform 0.25s ease;
}

.feedback-overlay.active .feedback-modal {
    transform: translateY(0);
}

.feedback-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--border-color);
}

.feedback-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color);
}

.feedback-close-btn {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 1rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.feedback-close-btn:hover {
    background: var(--light-bg);
    color: var(--text-color);
}

.feedback-body {
    padding: 16px 20px;
}

.feedback-body .form-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-color);
}

.feedback-footer {
    padding: 12px 20px 16px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.feedback-send-btn {
    background: var(--primary-color);
    color: white;
    border: none;
}

.feedback-send-btn:hover {
    background: #0069a8;
    color: white;
}

.feedback-send-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.feedback-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 20px;
    text-align: center;
    color: var(--text-color);
}

/* Dark mode compatibility - Cards and backgrounds */
.search-form-wrapper,
.results-section,
.info-card,
.company-content,
.insurance-policy-card {
    background: var(--card-bg);
    border-color: var(--border-color);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Dark mode compatibility - Inputs */
.search-input,
.form-control {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-color);
    transition: all 0.3s ease;
}

.search-input:focus,
.form-control:focus {
    background-color: var(--input-bg);
    border-color: var(--primary-color);
    color: var(--text-color);
    box-shadow: 0 0 0 0.2rem rgba(14, 165, 233, 0.25);
}

.search-input::placeholder,
.form-control::placeholder {
    color: var(--text-muted);
}

/* Dark mode compatibility - Navigation */
.navbar,
.bg-white {
    background-color: var(--navbar-bg) !important;
    border-color: var(--border-color);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Logo transition for smooth switching */
#navbar-logo {
    transition: opacity 0.2s ease;
}

/* Dark mode compatibility - Tables */
.table {
    color: var(--text-color);
    --bs-table-bg: var(--card-bg);
}

.table thead th {
    background-color: var(--table-header-bg);
    border-color: var(--border-color);
    color: var(--text-color);
    padding: 1rem 0.75rem;
}

.table tbody tr {
    background-color: var(--card-bg);
    transition: all 0.3s ease;
    cursor: pointer;
}

.table tbody tr:hover {
    background-color: var(--table-hover-bg);
    box-shadow: var(--shadow-sm);
}

.table tbody td {
    border-color: var(--border-color);
    padding: 1rem 0.75rem;
    vertical-align: middle;
    color: var(--text-color);
}

/* Remove redundant dark mode overrides - CSS custom properties handle this */
.table tbody td strong,
.table tbody td {
    color: var(--text-color) !important;
}

.table tbody td .text-muted {
    color: var(--text-muted) !important;
}

/* Keep only necessary dark mode overrides for Bootstrap specificity */
[data-theme="dark"] .table {
    --bs-table-bg: var(--card-bg) !important;
    --bs-table-hover-bg: var(--table-hover-bg) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] .table-light th {
    background-color: var(--table-header-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .company-header {
    background: linear-gradient(135deg, #131313, #1A1D21);
}

/* Dark mode - Fleet stat numbers (Power Units, Drivers) white instead of blue */
[data-theme="dark"] .fleet-stat-number {
    color: #ffffff;
}

/* Dark mode compatibility - Text colors */
.text-muted {
    color: var(--text-muted) !important;
}

.text-primary {
    color: var(--primary-color) !important;
}

/* Dark mode - Make contact links white */
[data-theme="dark"] .info-value a {
    color: #ffffff !important;
}

[data-theme="dark"] .info-value a:hover {
    color: var(--primary-color) !important;
}

/* Dark mode - Back button (New Search) styling */
[data-theme="dark"] .btn-outline-primary.btn-modern {
    background-color: #1f1f1f;
    border-color: #ffffff;
    color: #ffffff;
}

[data-theme="dark"] .btn-outline-primary.btn-modern:hover {
    background-color: #131313;
    border-color: #ffffff;
    color: #ffffff;
}

/* Dark mode - "Search Another Company" button styling (same as New Search) */
[data-theme="dark"] .btn-primary.btn-modern {
    background-color: #1f1f1f;
    border-color: #ffffff;
    color: #ffffff;
}

[data-theme="dark"] .btn-primary.btn-modern:hover {
    background-color: #131313;
    border-color: #ffffff;
    color: #ffffff;
}

/* Dark mode - Advanced Search toggle link white text */
[data-theme="dark"] .advanced-search-btn {
    color: #ffffff !important;
}

[data-theme="dark"] .advanced-search-btn:hover {
    color: #ffffff !important;
    background-color: var(--table-header-bg);
}

/* Dark mode - Search page main title white text */
[data-theme="dark"] .search-main-title {
    color: #ffffff !important;
}

/* Dark mode - Crashes tab "View Details" button white text */
[data-theme="dark"] .toggle-crash-details {
    color: #ffffff !important;
    border-color: #ffffff !important;
}

[data-theme="dark"] .toggle-crash-details:hover {
    color: #ffffff !important;
    background-color: var(--table-header-bg) !important;
    border-color: #ffffff !important;
}

/* Dark mode - Inspections tab "View Details" button white text */
[data-theme="dark"] .toggle-violations {
    color: #ffffff !important;
    border-color: #ffffff !important;
}

[data-theme="dark"] .toggle-violations:hover {
    color: #ffffff !important;
    background-color: var(--table-header-bg) !important;
    border-color: #ffffff !important;
}

.badge.bg-light {
    background-color: var(--table-header-bg) !important;
    color: var(--text-muted) !important;
    border: 1px solid var(--border-color);
}

/* Company Logo Styles */
.company-logo {
    transition: all 0.3s ease;
    box-shadow: var(--shadow-sm);
}

.company-logo:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

.company-logo-large {
    transition: all 0.3s ease;
    box-shadow: var(--shadow-md);
}

.company-logo-large:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-lg);
}

/* Fallback styles for when logo fails to load */
.company-logo[style*="display: none"],
.company-logo-large[style*="display: none"] {
    display: none !important;
}

/* Search Container */
.search-container {
    max-width: 1000px;
    margin: 2rem auto;
    padding: 0 1rem;
    animation: fadeInUp 0.6s ease-out;
}

.search-header {
    margin-bottom: 3rem;
}

.search-main-title {
    color: var(--text-color);
    font-weight: 700;
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.search-header h1 {
    color: var(--primary-dark);
    font-weight: 700;
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.search-header h1 small a {
    color: var(--primary-color);
    transition: color 0.3s ease;
}

.search-header h1 small a:hover {
    color: var(--primary-dark);
}

.search-header p {
    color: var(--secondary-color);
    font-size: 1.1rem;
    margin-bottom: 0;
}

/* Enhanced Search Form */
.search-form-wrapper {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: var(--shadow-lg);
    margin-bottom: 3rem;
}

.search-input {
    border-radius: 8px;
    border: 1px solid var(--input-border);
    padding: 12px 16px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.search-btn {
    padding: 12px 30px;
    border-radius: 25px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--primary-color);
    border: none;
    color: white;
    transition: all 0.3s ease;
}

.search-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.search-help {
    margin-top: 0.5rem;
}

.search-help small {
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* Results Section */
.results-section {
    background: var(--card-bg);
    border-radius: 10px;
    padding: 2rem;
    box-shadow: var(--shadow-lg);
    animation: fadeInUp 0.6s ease-out;
}

.results-header {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1rem;
    margin-bottom: 2rem;
}

.results-header h3 {
    color: var(--text-color);
    font-weight: 700;
    margin: 0;
}

.table {
    margin-bottom: 0;
}

.identifiers .badge {
    font-size: 0.75rem;
    padding: 0.4rem 0.8rem;
    font-weight: 600;
    border-radius: 20px;
}

.badge.bg-primary {
    background-color: var(--primary-color) !important;
}

.badge.bg-secondary {
    background-color: var(--secondary-color) !important;
}

.badge.bg-success {
    background-color: var(--success-color) !important;
}

/* Override Bootstrap success color with consistent green */
.text-success {
    color: var(--success-color) !important;
}

.bg-success {
    background-color: var(--success-color) !important;
}

.progress-bar.bg-success {
    background-color: var(--success-color) !important;
}

/* No Results State */
.no-results {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--secondary-color);
}

.no-results i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.no-results h5 {
    color: var(--text-color);
    margin-bottom: 0.5rem;
}

/* Search Features */
.search-features {
    margin-top: 4rem;
}

/* Advanced Search Toggle - Center alignment */
.advanced-search-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 0;
    margin: 0.5rem 0;
}

.advanced-search-btn {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    padding: 0.5rem 1rem;
    border-radius: 8px;
}

.advanced-search-btn:hover {
    color: var(--primary-dark);
    background-color: var(--table-header-bg);
}

.advanced-search-btn .toggle-icon {
    transition: transform 0.3s ease;
}

.advanced-search-btn:not(.collapsed) .toggle-icon {
    transform: rotate(180deg);
}

/* Advanced Search Panel Styles */
.advanced-search-panel {
    background: var(--table-header-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 0;
}

.filter-section {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
}

.filter-header {
    padding: 1rem 1.25rem;
    background: var(--table-header-bg);
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-header:hover {
    background: var(--border-color);
}

.filter-icon {
    color: var(--primary-color);
    font-size: 1rem;
}

.filter-title {
    font-weight: 600;
    color: var(--text-color);
    font-size: 0.95rem;
}

.section-toggle-icon {
    color: var(--text-muted);
    transition: transform 0.3s ease;
}

.filter-header[aria-expanded="false"] .section-toggle-icon,
.filter-header.collapsed .section-toggle-icon {
    transform: rotate(180deg);
}

.filter-content {
    padding: 1.25rem;
    border-top: 1px solid var(--border-color);
}

.filter-subsection {
    margin-bottom: 0;
}

.filter-subsection-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Validation feedback for ZIP code */
.validation-feedback {
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

.validation-feedback.valid {
    color: var(--success-color);
}

.validation-feedback.invalid {
    color: var(--danger-color);
}

/* Dark mode adjustments for advanced search */
[data-theme="dark"] .advanced-search-panel {
    background: var(--light-bg);
}

[data-theme="dark"] .filter-section {
    background: var(--card-bg);
}

[data-theme="dark"] .filter-header {
    background: var(--table-header-bg);
}

[data-theme="dark"] .filter-header:hover {
    background: var(--border-color);
}

/* Mobile responsiveness for advanced search */
@media (max-width: 767.98px) {
    .advanced-search-panel {
        padding: 1rem;
    }
    
    .filter-header {
        padding: 0.875rem 1rem;
    }
    
    .filter-content {
        padding: 1rem;
    }
    
    .filter-title {
        font-size: 0.9rem;
    }
    
    .filter-subsection-label {
        font-size: 0.8rem;
    }
}

.feature-item {
    padding: 1.5rem;
    text-align: center;
}

.feature-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.feature-item h6 {
    color: var(--text-color);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.feature-item p {
    font-size: 0.9rem;
    margin-bottom: 0;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeInUp 0.6s ease-out;
}

/* Improved Alert styles - Theme-aware */
.alert {
    border-radius: 12px;
    border: 1px solid;
    font-weight: 500;
    margin-bottom: 2rem;
    transition: all 0.3s ease;
}

.alert-danger {
    background: linear-gradient(135deg, 
        color-mix(in srgb, var(--danger-color) 10%, var(--card-bg)), 
        color-mix(in srgb, var(--danger-color) 15%, var(--card-bg))
    );
    color: var(--danger-color);
    border-color: color-mix(in srgb, var(--danger-color) 30%, transparent);
}

.alert-warning {
    background: linear-gradient(135deg, 
        color-mix(in srgb, var(--warning-color) 10%, var(--card-bg)), 
        color-mix(in srgb, var(--warning-color) 15%, var(--card-bg))
    );
    color: var(--warning-color);
    border-color: color-mix(in srgb, var(--warning-color) 30%, transparent);
}

/* Fallback for browsers that don't support color-mix */
@supports not (background: color-mix(in srgb, var(--danger-color) 10%, var(--card-bg))) {
    .alert-danger {
        background: linear-gradient(135deg, #fee2e2, #fecaca);
        color: #991b1b;
        border-color: rgba(220, 38, 38, 0.3);
    }
    
    [data-theme="dark"] .alert-danger {
        background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.2));
        color: #fca5a5;
        border-color: rgba(239, 68, 68, 0.3);
    }
    
    .alert-warning {
        background: linear-gradient(135deg, #fef3c7, #fde68a);
        color: #92400e;
        border-color: rgba(217, 119, 6, 0.3);
    }
    
    [data-theme="dark"] .alert-warning {
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.2));
        color: #fcd34d;
        border-color: rgba(245, 158, 11, 0.3);
    }
}

/* Mobile keyboard optimization for numeric fields */
@media (max-width: 768px) {
    input[inputmode="numeric"] {
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    .theme-toggle {
        bottom: 15px;
        right: 15px;
        gap: 4px;
        padding: 4px;
    }
    
    .theme-toggle-btn {
        width: 20px;
        height: 20px;
        font-size: 12px;
        min-width: 20px;
        min-height: 20px;
    }
}

/* Mobile styles */
@media (max-width: 768px) {
    .search-container {
        margin: 1rem;
        padding: 0 0.5rem;
    }
    
    .search-form-wrapper {
        padding: 1.5rem;
    }
    
    .search-header h1 {
        font-size: 2rem;
    }
    
    .search-header h1 small {
        display: block;
        margin-top: 0.5rem;
    }
    
    .results-section {
        padding: 1.5rem;
    }
    
    .table-responsive {
        font-size: 0.875rem;
    }
    
    .table tbody td {
        padding: 0.75rem 0.5rem;
    }
    
    .identifiers .badge {
        font-size: 0.7rem;
        padding: 0.3rem 0.6rem;
    }
    
    .search-btn {
        padding: 10px 20px;
        font-size: 0.875rem;
    }
    
    .feature-item {
        padding: 1rem;
    }
    
    .feature-icon {
        font-size: 2rem;
    }

    /* Mobile logo adjustments */
    .company-logo {
        width: 24px !important;
        height: 24px !important;
    }
    
    .company-logo-large {
        width: 48px !important;
        height: 48px !important;
    }
    
    /* Stack navigation tabs vertically on mobile */
    .nav-tabs {
        flex-direction: column;
        padding: 0;
        border-bottom: none;
    }
    
    .nav-tabs .nav-item {
        width: 100%;
        margin-bottom: 0;
    }
    
    .nav-tabs .nav-link {
        width: 100%;
        text-align: left;
        border: none;
        border-left: 3px solid transparent;
        border-bottom: 1px solid var(--border-color);
        border-radius: 0;
        padding: 1rem 1.5rem;
    }
    
    .nav-tabs .nav-link.active {
        border-left-color: var(--primary-color);
        border-bottom-color: var(--border-color);
        background-color: var(--table-header-bg);
    }
    
    .nav-tabs .nav-link:hover {
        border-left-color: var(--primary-color);
        border-bottom-color: var(--border-color);
    }

    /* The share control is not a tab. Once the list stacks, ms-auto no longer pushes it right and the
       nav-item width:100% above would strand it on its own full-width row. It stays the ul's last
       child (visual order == focus order) but shrinks to a right-aligned chip below the final
       hairline -- i.e. at the top of the content zone, since the link it copies restores the panel
       below it, not the hero above it. */
    .nav-tabs .tab-share-item {
        width: auto;
        align-self: flex-end;
    }

    /* Give it a real button outline and a text label: a bare icon floating in the padding reads as
       stray, and touch devices never see the hover tooltip that explains it. The stacked .nav-tabs
       already carries the panel's 2rem side padding, so no right margin is needed for the chip to
       line up with the cards below. Keep it clear of the list's bottom edge: the tab surface is grey
       and the panel below is white, so any negative bottom margin would drag the chip across that
       seam and leave it half on each surface. */
    .nav-tabs .tab-share-item .tab-share-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        margin: 1rem 0 0.9rem auto;
        padding: 0.6rem 0.9rem;
        border: 1px solid var(--border-color);
        border-radius: 999px;
        font-size: 0.8rem;
        font-weight: 500;
        line-height: 1.4;
    }

    .nav-tabs .tab-share-item .tab-share-btn.copied {
        border-color: #1CA13B;
    }

    /* Outranks the later `.tab-share-label { display: none }`, which would otherwise win on source order */
    .nav-tabs .tab-share-item .tab-share-label {
        display: inline;
    }

    /* Reduce stat box padding on mobile for better spacing */
    .stat-box {
        padding: 12px !important;
        margin-bottom: 0.75rem;
    }
    
    .stat-number {
        font-size: 2rem !important;
    }
    
    .stat-label {
        font-size: 0.7rem !important;
        margin-top: 0.25rem !important;
    }
}

.company-header {
    background: linear-gradient(135deg, #1A1D21, #007BC3);
    color: white;
    padding: 2rem;
    border-radius: 12px 12px 0 0;
    margin-bottom: 0;
}

.company-name {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    letter-spacing: -0.025em;
}

.company-location {
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.company-location i {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
}

/* Phone hero: one centered stack - logo, name, dba, location line, pills, fleet stats.
   Above this width the logo sits beside the text and there is enough measure for it; below it,
   the logo was stealing 64px from a ~300px text column and the name wrapped against pills that
   still started at the card edge. Must stay after the 768px block: the 64px below has to
   out-cascade the 48px !important there on equal specificity. */
@media (max-width: 575.98px) {
    .company-header {
        padding: 1.5rem 1.25rem;
        text-align: center;
    }

    .company-header .company-name {
        flex-direction: column;
        font-size: 1.5rem;
        line-height: 1.2;
    }

    .company-header .company-logo-large {
        width: 64px !important;
        height: 64px !important;
        margin-right: 0 !important; /* the inline me-3 would skew the centered logo 0.5rem left */
        margin-bottom: 0.75rem;
    }

    .company-legal-name {
        display: block; /* span -> block, so text-wrap governs its line breaking */
        text-wrap: balance;
    }

    .company-dba-name {
        font-size: 1rem;
    }

    .company-location {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.25rem 0.9rem;
        font-size: 0.9rem;
    }

    .company-location .company-registration-date {
        margin-left: 0 !important; /* inline ms-3; the flex gap owns spacing now */
    }

    .company-meta {
        justify-content: center;
        gap: 0.5rem;
    }

    .fleet-stats {
        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
        margin-top: 1.25rem;
    }
}

.company-dba-name {
    font-size: 1.1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 0.15rem;
    margin-bottom: 0.35rem;
    letter-spacing: -0.015em;
    text-transform: none;
}

.company-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.1);
    padding: 0.4rem 0.8rem;
    border-radius: 12px;
}

.status-badge {
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-active {
    background-color: var(--success-color);
    color: white;
}

.status-inactive {
    background-color: var(--danger-color);
    color: white;
}

.status-unknown {
    background-color: var(--secondary-color);
    color: white;
}

/* Authority-based MC number colors */
.authority-authorized-for-hire {
    background-color: var(--success-color);
    color: white;
}

.authority-exempt-for-hire {
    background-color: var(--warning-color);
    color: white;
}

.authority-other {
    background-color: var(--danger-color);
    color: white;
}

.authority-unavailable {
    background-color: var(--secondary-color);
    color: white;
}

/* New CarriersFile-based authority status colors */
.authority-active {
    background-color: var(--success-color);
    color: white;
}

.authority-pending {
    background-color: var(--warning-color);
    color: white;
}

.authority-pending-revocation {
    background-color: var(--warning-color);
    color: white;
}

.authority-revoked {
    background-color: var(--danger-color);
    color: white;
}

/* Same red as the inactive DOT pill (.status-inactive) */
.authority-inactive {
    background-color: var(--danger-color);
    color: white;
}

/* Motus D6: Withdrawn is its own primary state (application withdrawn != lapsed/inactive) */
.authority-withdrawn {
    background-color: #64748b; /* slate — distinct from inactive */
    color: white;
}

/* Header pill: the USDOT's status in FMCSA MOTUS (every census USDOT has a MOTUS account); links to it */
.motus-pill {
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
}

.motus-pill:hover,
.motus-pill:focus-visible {
    color: white;
    filter: brightness(1.1);
    transform: scale(1.02);
}

.motus-active {
    background-color: var(--success-color);
}

/* Same red as the inactive DOT pill (.status-inactive) and MOTUS's own "Inactive" headline */
.motus-inactive {
    background-color: var(--danger-color);
}

/* BASIC score meters (Safety tab) */
.basic-scores {
    max-width: 720px;
}

.basic-score-row + .basic-score-row {
    margin-top: 1.5rem;
}

/* Keep every BASIC row the same height so the meters line up evenly, whether or not the
   row carries a percentile badge (badge rows are otherwise a couple px taller). */
.basic-score-row > .d-flex {
    min-height: 1.75rem;
}

.basic-meter {
    position: relative;
    height: 10px;
}

.basic-meter .progress {
    height: 10px;
    background-color: #e9ecef;
}

/* Shaded region from the FMCSA intervention threshold to 100 - "bad territory" reads
   without labels, and the 65% vs 80% thresholds show as different zone sizes */
.basic-meter-threshold-zone {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(220, 38, 38, 0.10);
    border-left: 2px solid rgba(220, 38, 38, 0.55);
    border-radius: 0 0.375rem 0.375rem 0;
    pointer-events: none;
}

.basic-score-value {
    font-variant-numeric: tabular-nums;
}

/* Stat strip: quiet inline summary stats sharing one surface (replaces accent-border stat boxes) */

/* Narrow screens: an auto-fit grid keeps every stat flush to a column edge. Flex-wrap could not do
   this -- a wrapped stat kept its 1.5rem left padding and hung indented under the row above.
   The 100px track is sized so a phone-width card (~250px of content) still fits two columns. */
.stat-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 1rem;
}

.stat-strip .stat {
    min-width: 0;
}

@media (min-width: 768px) {
    .stat-strip {
        display: flex;
        flex-wrap: wrap;
        row-gap: 1rem;
        column-gap: 0;
    }

    .stat-strip .stat {
        flex: 1 1 0;
        min-width: 150px;
        padding: 0 1.5rem;
    }

    .stat-strip .stat:first-child {
        padding-left: 0;
    }

    .stat-strip .stat + .stat {
        border-left: 1px solid var(--border-color);
    }
}

.stat-strip .stat-value {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.stat-strip .stat-value.stat-danger {
    color: var(--danger-color);
}

.stat-strip .stat-value.stat-warn {
    color: var(--warning-color);
}

.stat-strip .stat-label {
    font-size: 0.85rem;
    margin-top: 0.15rem;
}

.stat-strip.stat-strip-sm .stat-value {
    font-size: 1.1rem;
}

/* BASIC score history sparklines (Safety tab) */
/* No max-width: the panel takes the full card so the plot stretches to the window edge on desktop.
   A cap here fought --spark-min (200px sticky label + 58px/snapshot), so a normal 9-month history
   overflowed the cap and scrolled sideways inside a far wider card, clipping the last axis label. */
.basic-history {
    width: 100%;
}

/* The plot claims a fixed width per snapshot (--spark-min) so value bubbles never overlap; when that
   exceeds the card, the panel scrolls sideways instead of cramming the points together. */
.basic-history-scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

.basic-history-plot {
    width: max-content;
    min-width: 100%;
    /* room for the trailing value bubble, which is centred on the last point */
    padding-right: 22px;
}

.basic-history-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.basic-history-row + .basic-history-row {
    margin-top: 0.75rem;
}

/* Pinned so you can still tell which BASIC a scrolled-away line belongs to. It must stretch to the
   full row height, not just its text box, or the scrolling plot shows through above and below it.
   Selector outranks the later `.info-label`, whose display:block and bottom margin would otherwise
   win on source order and leave a ~5px unmasked strip along the bottom of every row. */
.basic-history-row > .basic-history-label {
    position: sticky;
    left: 0;
    z-index: 2;
    flex: 0 0 200px;
    align-self: stretch;
    display: flex;
    align-items: center;
    margin: 0;
    padding-right: 0.35rem;
    background-color: var(--card-bg, #ffffff);
}

/* Chart panel: SVG carries only the line; markers, value bubbles and axis labels are
   HTML overlays positioned by percent so they never distort with the stretched SVG */
.spark-wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: var(--spark-min, 340px);
    height: 84px;
}

.spark-wrap svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.spark-line {
    stroke: var(--primary-color);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.spark-marker {
    position: absolute;
    width: 9px;
    height: 9px;
    border: 2px solid var(--primary-color);
    background-color: var(--card-bg, #ffffff);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.spark-value {
    position: absolute;
    transform: translate(-50%, -145%);
    background-color: var(--primary-color);
    color: #ffffff;
    border-radius: 10px;
    padding: 0 6px;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.spark-axis {
    position: relative;
    flex: 1 1 auto;
    min-width: var(--spark-min, 340px);
    height: 18px;
}

.spark-axis small {
    position: absolute;
    transform: translateX(-50%);
    font-size: 0.7rem;
    color: var(--muted-text, #6c757d);
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    /* Give the plot more of the narrow viewport; the label stays pinned while the plot scrolls */
    .basic-history-row > .basic-history-label {
        flex-basis: 140px;
        font-size: 0.8rem;
    }
}

/* Out of Service Status */
.status-out-of-service {
    background-color: var(--danger-color) !important;
    color: white !important;
    border: 2px solid #b91c1c;
    animation: pulse-danger 2s infinite;
}

.authority-out-of-service {
    background-color: var(--danger-color) !important;
    color: white !important;
    border: 2px solid #b91c1c;
    animation: pulse-danger 2s infinite;
}

@keyframes pulse-danger {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(220, 38, 38, 0);
    }
}

.company-content {
    background: var(--card-bg);
    border-radius: 0 0 12px 12px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.nav-tabs {
    border-bottom: 2px solid var(--border-color);
    padding: 0 2rem;
    background-color: var(--table-header-bg);
}

.nav-tabs .nav-link {
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-color);
    font-weight: 600;
    padding: 1rem 1.5rem;
    transition: all 0.3s ease;
    text-decoration: none;
}

/* Keep icons blue in nav tabs */
.nav-tabs .nav-link i {
    color: var(--primary-color);
}

.nav-tabs .nav-link:hover {
    color: var(--text-color);
    background-color: transparent;
    border-bottom-color: var(--primary-color);
}

.nav-tabs .nav-link.active {
    color: var(--text-color);
    background-color: transparent;
    border-bottom-color: var(--primary-color);
}

.tab-content {
    padding: 2rem;
}

.info-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}

.info-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.info-card h6 {
    color: var(--text-color);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--border-color);
}

/* Keep icons blue in section headers */
.info-card h6 i {
    color: var(--primary-color);
}

.info-row {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
}

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

.info-label {
    font-weight: 600;
    color: var(--secondary-color);
    font-size: 0.85rem;
    letter-spacing: 0.3px;
    margin-bottom: 0.3rem;
    display: block;
}

.info-value {
    color: var(--text-color);
    font-weight: 500;
    font-size: 0.95rem;
    line-height: 1.4;
    margin-bottom: 0;
}

.fleet-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    margin-block: 1.5rem 0;
}

.fleet-stat {
    text-align: center;
    padding: 1.2rem 0.8rem; 
    background: linear-gradient(135deg, var(--table-header-bg), var(--border-color));
    border-radius: 12px;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.fleet-stat:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.fleet-stat-number {
    font-size: 2.5rem; 
    font-weight: 800;
    color: var(--primary-color);
    display: block;
    line-height: 1;
    margin-bottom: 0.5rem; 
}

.fleet-stat-label {
    font-size: 0.75rem; 
    color: var(--secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.cargo-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.cargo-tag {
    background: linear-gradient(135deg, #e0f2fe, #b3e5fc);
    color: #0277bd;
    padding: 0.4rem 1rem;
    border-radius: 25px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid #81d4fa;
    transition: all 0.3s ease;
}

.cargo-tag:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .cargo-tag {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.2), rgba(59, 130, 246, 0.2));
    color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Copyable Numbers and Sections */
.copyable-number {
    cursor: pointer;
    position: relative;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
    transition: all 0.3s ease;
    font-weight: 600;
}

.copyable-number:hover {
    color: var(--primary-color);
    text-decoration: solid;
    transform: scale(1.05);
}

.copyable-number:active {
    transform: scale(0.98);
}

.copyable-section {
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
    border-radius: 12px;
    min-width: fit-content;
    white-space: nowrap;
}

.copyable-section:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.02);
}

.copyable-section:active {
    transform: scale(0.98);
}

.copyable-section[data-copy-text=""] {
    cursor: default !important;
}

.copyable-section[data-copy-text=""]:hover {
    background-color: transparent !important;
    transform: none !important;
}

.copyable-section.copied {
    background-color: #1CA13B !important;
    color: white !important;
    padding: 0.4rem 0.8rem !important;
    border-radius: 12px !important;
    transition: all 0.3s ease;
    min-width: var(--original-width);
    width: var(--original-width);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.copyable-section.copy-failed {
    background-color: #ef4444 !important;
    color: white !important;
    padding: 0.4rem 0.8rem !important;
    border-radius: 12px !important;
    transition: all 0.3s ease;
    min-width: var(--original-width);
    width: var(--original-width);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.copyable-section.fading-out {
    transition: all 0.8s ease;
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: inherit !important;
    padding: 0.4rem 0.8rem !important;
}

/* Street View Container - Simplified */
.street-view-container {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.street-view-image {
    transition: all 0.3s ease;
}

/* Insurance Policy Card Styles */
.insurance-policy-card {
    background: linear-gradient(135deg, var(--card-bg), var(--table-header-bg));
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.insurance-policy-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), #4fc3f7);
}

.insurance-policy-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-color);
}

.policy-title {
    color: var(--primary-color);
    font-weight: 700;
    display: flex;
    align-items: center;
}

.policy-title i {
    color: var(--success-color);
}

.policy-title .badge.bg-warning {
    font-size: 0.75rem;
    padding: 0.5rem 1rem;
    border-radius: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    background-color: var(--warning-color) !important;
    color: #ffffff !important;
    animation: pulse-warning 2s infinite;
    border: 1px solid color-mix(in srgb, var(--warning-color) 80%, black);
}

.policy-title .badge.bg-warning i {
    color: #ffffff !important;
}

@keyframes pulse-warning {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(var(--bs-warning-rgb), 0.7);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(var(--bs-warning-rgb), 0);
    }
}

[data-theme="dark"] .policy-title .badge.bg-warning {
    background-color: var(--warning-color) !important;
    color: #ffffff !important;
    border-color: color-mix(in srgb, var(--warning-color) 80%, black);
}

[data-theme="dark"] .policy-title .badge.bg-warning i {
    color: #ffffff !important;
}

.insurance-policy-card .info-row {
    padding: 0.5rem 0;
    margin-bottom: 0.5rem;
}

.insurance-policy-card .info-label {
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
    letter-spacing: 0.5px;
}

.insurance-policy-card .info-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-color);
}

.insurance-policy-card .badge {
    font-size: 0.75rem;
    padding: 0.5rem 1rem;
    border-radius: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.insurance-policy-card .text-success {
    color: var(--success-color) !important;
}

.insurance-policy-card .text-info {
    color: #0891b2 !important;
}

.insurance-policy-card small.text-muted {
    font-size: 0.75rem;
    line-height: 1.4;
    display: block;
    margin-top: 0.5rem;
}

/* Insurance History Timeline Styles */
.insurance-history-section {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px solid var(--border-color);
}

.insurance-history-header {
    margin-bottom: 1rem;
}

.insurance-history-toggle {
    color: var(--text-color);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
    background: linear-gradient(135deg, var(--table-header-bg), var(--border-color));
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.insurance-history-toggle:hover {
    color: var(--primary-color);
    background: linear-gradient(135deg, var(--border-color), var(--table-header-bg));
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.insurance-history-toggle i.fa-history {
    color: var(--primary-color);
    font-size: 1.1rem;
}

.insurance-history-toggle .toggle-icon {
    margin-left: auto;
    transition: transform 0.3s ease;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.insurance-history-toggle:not(.collapsed) .toggle-icon {
    transform: rotate(180deg);
}

.insurance-history-toggle:not(.collapsed) .toggle-text::before {
    content: "Hide ";
}

.insurance-history-toggle.collapsed .toggle-text::before {
    content: "Show ";
}

.insurance-history-content {
    padding: 1.5rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-top: 1rem;
}

.timeline-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-color);
}

.timeline-header h6 {
    color: var(--text-color);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Keep icons blue in timeline headers */
.timeline-header h6 i {
    color: var(--primary-color);
}

.timeline-header p {
    font-size: 0.95rem;
    margin-bottom: 0;
}

/* Source-epoch divider inside the insurance history timeline (F6):
   Motus (current feed) and legacy (archived feed) records render as separate epochs. */
.timeline-epoch-header {
    margin: 1.25rem 0 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--table-header-bg);
    border-left: 3px solid var(--primary-color);
    border-radius: 0 4px 4px 0;
}

.timeline-epoch-title {
    color: var(--text-color);
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.timeline-container {
    max-height: 600px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.5rem;
}

/* Custom scrollbar for timeline */
.timeline-container::-webkit-scrollbar {
    width: 8px;
}

.timeline-container::-webkit-scrollbar-track {
    background: var(--table-header-bg);
    border-radius: 4px;
}

.timeline-container::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

.timeline-container::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

.timeline {
    position: relative;
    padding-left: 3rem;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 1.5rem;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--primary-color), var(--border-color));
}

.timeline-item {
    position: relative;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
}

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

.timeline-marker {
    position: absolute;
    left: -3rem;
    top: 0;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.timeline-number {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    border: 4px solid var(--card-bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.timeline-content {
    background: linear-gradient(135deg, var(--card-bg), var(--table-header-bg));
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.25rem;
    margin-left: 1rem;
    transition: all 0.3s ease;
    position: relative;
}

.timeline-content::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 1.25rem;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 8px 8px 0;
    border-color: transparent var(--border-color) transparent transparent;
}

.timeline-content:hover {
    transform: translateX(5px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
}

.timeline-date {
    color: var(--primary-color);
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.timeline-policy-header {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.timeline-duration {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding: 0.5rem;
    background: var(--light-bg);
    border-radius: 4px;
    border-left: 3px solid var(--primary-color);
}

.timeline-details {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.timeline-detail-row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.timeline-detail-row:last-child {
    margin-bottom: 0;
}

.detail-label {
    font-weight: 700;
    color: var(--text-color);
    min-width: 180px;
    margin-right: 0.5rem;
    letter-spacing: 0.5px;
}

.detail-value {
    color: var(--text-color);
    flex: 1;
}

/* Mobile responsiveness for timeline */
@media (max-width: 768px) {
    .timeline {
        padding-left: 2.5rem;
    }
    
    .timeline::before {
        left: 1.25rem;
    }
    
    .timeline-marker {
        left: -2.5rem;
        width: 2.5rem;
        height: 2.5rem;
    }
    
    .timeline-number {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 0.95rem;
        border-width: 3px;
    }
    
    .timeline-content {
        margin-left: 0.5rem;
        padding: 1rem;
    }
    
    .timeline-date {
        font-size: 0.9rem;
    }
    
    .timeline-policy-header {
        font-size: 0.9rem;
    }
    
    .timeline-detail-row {
        flex-direction: column;
        font-size: 0.85rem;
    }
    
    .detail-label {
        min-width: auto;
        margin-bottom: 0.25rem;
        font-size: 0.8rem;
    }
    
    .timeline-container {
        max-height: 500px;
    }
    
    .insurance-history-toggle {
        font-size: 0.9rem;
        padding: 0.5rem 0.75rem;
    }
}

/* ===================================================================================
   Company Timeline page (/dot/{n}/timeline)
   Vertical timeline: left spine, year-group markers, category-accented event cards, a
   terminal "Current" node. Category accents reuse the existing palette variables. Pure
   CSS, no JS. Distinct `ct-` prefix so it never collides with the insurance `.timeline`.
   =================================================================================== */
.ct-timeline-card {
    background: var(--card-bg);
    border-radius: 0 0 12px 12px;
    box-shadow: var(--shadow-lg);
    padding: 2rem;
    margin-bottom: 2rem;
    overflow: hidden;
}

/* Records-predate caption: plain muted line beneath the card. Deliberately no pill/badge/background
   or border — it is an honest footnote ("this carrier may be older"), not a status signal. */
.ct-note {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: -1rem 0 2rem;
}

.ct-timeline {
    position: relative;
    padding-left: 3rem;
}

/* The spine */
.ct-timeline::before {
    content: '';
    position: absolute;
    left: 1.5rem;
    top: 0.35rem;
    bottom: 0.35rem;
    width: 2px;
    background: var(--border-color);
}

.ct-year-group {
    position: relative;
    margin-bottom: 1.25rem;
}

/* Year marker: a station ON the spine, not a chip floating beside it. A solid dot sits
   centred on the rail (ringed in card-bg so the rail reads as passing behind it) and the year
   is set as letterspaced small-caps. The year stands on its own — no trailing rule. */
.ct-year-marker {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 1.9rem 0 1.1rem;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    font-variant-numeric: tabular-nums;
    /* Full-strength text colour (not muted): the year is the timeline's primary wayfinding. */
    color: var(--text-color);
    z-index: 2;
}

.ct-year-group:first-child .ct-year-marker {
    margin-top: 0;
}

.ct-year-marker::before {
    content: '';
    position: absolute;
    left: -1.5rem; /* the spine: 1.5rem from the timeline's border box, 3rem of padding */
    top: 50%;
    transform: translate(-50%, -50%);
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--text-muted);
    box-shadow: 0 0 0 4px var(--card-bg);
}

.ct-event {
    position: relative;
    margin-bottom: 1rem;
    /* Default accent; each category class overrides it below. */
    --ct-accent: var(--primary-color);
}

.ct-event:last-child {
    margin-bottom: 0;
}

/* Node dot sitting on the spine, vertically centred against its card */
.ct-node {
    position: absolute;
    left: -3rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3rem; /* spans back to the border edge; centres the dot on the 1.5rem spine */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.ct-node i {
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    background: var(--card-bg);
    border: 2px solid var(--ct-accent);
    color: var(--ct-accent);
    box-shadow: 0 0 0 3px var(--card-bg); /* mask the spine behind the dot */
}

.ct-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.8rem 1rem;
}

.ct-card-top {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.2rem;
}

.ct-date {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--ct-accent);
    font-variant-numeric: tabular-nums;
}

/* Provenance reads as a quiet citation, not a badge: muted small text set alongside the
   date, separated by a middot. Only Motus is ever cited (see the view/markdown), so this
   renders rarely and the data, not the label, stays the subject. */
.ct-source {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    white-space: nowrap;
}

.ct-source::before {
    content: '·';
    margin-right: 0.45rem;
    font-weight: 400;
    letter-spacing: 0;
    /* text-muted at half strength: legible on both themes, unlike --border-color which
       all but vanishes against the dark card background. */
    color: var(--text-muted);
    opacity: 0.55;
}

.ct-card-title {
    font-weight: 600;
    color: var(--text-color);
    overflow-wrap: anywhere;
}

.ct-card-desc {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
    overflow-wrap: anywhere;
    /* MCS-150 events carry one "Reported X: value" fact per '\n'-joined line. */
    white-space: pre-line;
}

/* Collapsed-row count ("(9 policies)"): same size as the title but muted and normal-weight, so a
   folded row reads as "one event, seen N times" as plain text — deliberately no pill/badge/background. */
.ct-count {
    color: var(--text-muted);
    font-weight: 400;
}

.ct-current-body {
    color: var(--text-color);
    overflow-wrap: anywhere;
}

/* Category accents — drawn from the existing palette variables */
.ct-cat-registration { --ct-accent: var(--primary-color); }
.ct-cat-authority { --ct-accent: var(--secondary-color); }
.ct-cat-insurance { --ct-accent: var(--success-color); }
.ct-cat-companychange { --ct-accent: var(--warning-color); }
.ct-cat-safety { --ct-accent: var(--danger-color); }
.ct-current { --ct-accent: var(--primary-color); }

@media (max-width: 575.98px) {
    .ct-timeline-card {
        padding: 1.25rem 1rem;
    }

    .ct-timeline {
        padding-left: 2.25rem;
    }

    .ct-timeline::before {
        left: 1rem;
    }

    .ct-node {
        left: -2.25rem;
        width: 2rem; /* centres the dot on the 1rem mobile spine */
    }

    .ct-node i {
        width: 1.6rem;
        height: 1.6rem;
        font-size: 0.7rem;
    }

    .ct-year-marker::before {
        /* spine sits at 1rem, timeline padding is 2.25rem */
        left: -1.25rem;
    }
}

/* ===================================================================================
   Company History card (/dot/{n} Overview tab)
   The same ct- timeline vocabulary as the full timeline page, compacted for a one-third
   column: tighter spine, smaller nodes, denser cards. Only geometry is overridden — the
   category accents, icons and type roles stay shared, so an event looks the same wherever
   it renders. The card sizes to its content and never stretches: a long history scrolls
   inside the event list instead of pushing the card past its neighbours.
   =================================================================================== */
.company-history-card .ct-timeline {
    padding-left: 2.5rem;
}

/* Height cap + inner scroll only in the three-up layout, where this card has neighbours to
   line up with. Ceiling, not a fixed height: a carrier with two events still gets a short
   card. 40rem was measured against the columns either side — it lands the card's bottom
   within ~35px of the Address+Officers stack and the Service Map+Operation Information
   stack, on both a sparse carrier and a busy one. Below lg the columns stack, there is
   nothing to align to, and a nested scroll area would just fight the page scroll. */
@media (min-width: 992px) {
    .company-history-card .ct-timeline {
        max-height: 40rem;
        overflow-y: auto;
        /* The node dots' card-bg halo bleeds a few px past the content box; clip it rather
           than letting it raise a horizontal scrollbar. */
        overflow-x: hidden;
        padding-right: 0.4rem;
        scrollbar-width: thin;
    }
}

.company-history-card .ct-timeline::before {
    left: 1.15rem;
}

.company-history-card .ct-event {
    margin-bottom: 0.85rem;
}

.company-history-card .ct-node {
    left: -2.5rem;
    width: 2.3rem;
}

.company-history-card .ct-node i {
    width: 1.6rem;
    height: 1.6rem;
    font-size: 0.7rem;
}

.company-history-card .ct-card {
    padding: 0.6rem 0.85rem;
}

.company-history-card .ct-date {
    font-size: 0.82rem;
}

.company-history-card .ct-card-title {
    font-size: 0.95rem;
}

.company-history-card .ct-card-desc {
    font-size: 0.84rem;
}

/* Footer sits directly under the last event. The link leads and spans the card — it is the
   one action here — with the explanatory line beneath it as a caption. */
.company-history-foot {
    padding-top: 1.1rem;
}

.company-history-foot .btn {
    display: block;
    width: 100%;
    margin-bottom: 0.6rem;
}

/* Related Companies Styles */
.related-company-card {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--table-header-bg);
    transition: all 0.2s ease;
}

.related-company-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

/* Dark mode - Related companies company name link white */
[data-theme="dark"] .related-company-card h6 a {
    color: #ffffff !important;
}

[data-theme="dark"] .related-company-card h6 a:hover {
    color: var(--primary-color) !important;
}

/* Dark mode - Related companies match count white */
[data-theme="dark"] .toggle-match-details .match-count {
    color: #ffffff !important;
}

.toggle-match-details {
    transition: all 0.2s ease;
    text-decoration: none;
}

/* Fleet Stats Cards in Related Companies */
.related-fleet-card {
    text-align: center;
    padding: 4px 16px;
}

/* hairline divider instead of boxes - same idiom as .stat-strip */
.related-fleet-card + .related-fleet-card {
    border-left: 1px solid var(--border-color);
}

.related-fleet-number {
    font-size: 1.35rem;
    font-weight: 600;
    color: inherit;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

/* Dark mode - Related companies fleet stats numbers white */
[data-theme="dark"] .related-fleet-number {
    color: #ffffff;
}

/* Dark mode - Related companies fleet stats labels white */
[data-theme="dark"] .related-fleet-label {
    color: #ffffff;
}

.related-fleet-label {
    font-size: 0.7rem;
    color: var(--muted-text);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 4px;
    white-space: nowrap;
}

/* Mobile responsive styles for related companies */
@media (max-width: 575.98px) {
    .related-fleet-stats {
        width: 100%;
        margin-top: 1rem !important;
        margin-left: 0 !important;
    }

    .related-fleet-card {
        flex: 1;
        min-width: 0;
        padding: 12px 8px !important;
    }

    .related-fleet-number {
        font-size: 1.75rem !important;
    }

    .related-fleet-label {
        font-size: 0.65rem !important;
    }
}

/* Tablet styles for related companies */
@media (min-width: 576px) and (max-width: 991.98px) {
    .related-fleet-stats {
        margin-top: 0.75rem;
    }

    .related-fleet-card {
        min-width: 80px;
    }
}

/* Mobile styles */

/* Connection Type Filter Chip Styles */
.connection-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--card-bg);
    border: 1.5px solid var(--border-color);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
}

.connection-filter-chip:hover {
    border-color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.connection-filter-chip.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    box-shadow: 0 2px 6px rgba(0, 123, 195, 0.3);
}

.connection-filter-chip.active:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

.connection-filter-chip i {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.connection-filter-chip.active i {
    color: white;
}

.connection-filter-chip .chip-label {
    font-weight: 500;
}

.connection-filter-chip .chip-count {
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    font-weight: 600;
}

.connection-filter-chip.active .chip-count {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

/* Mobile responsiveness for filter chips */
@media (max-width: 767.98px) {
    .connection-filter-chip {
        padding: 0.4rem 0.75rem;
        font-size: 0.8rem;
        gap: 0.375rem;
    }
    
    .connection-filter-chip i {
        font-size: 0.8rem;
    }
    
    .connection-filter-chip .chip-count {
        font-size: 0.7rem;
        padding: 0.1rem 0.4rem;
    }
}

/* Strong Link Badge - Header badge showing count of strong connections */
.strong-link-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    background: rgba(28, 161, 59, 0.12);
    border: 1px solid rgba(28, 161, 59, 0.35);
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #1CA13B;
    white-space: nowrap;
}

[data-theme="dark"] .strong-link-badge {
    background: rgba(28, 161, 59, 0.2);
    border-color: #1CA13B;
    color: #5ed178;
}

/* Connection Icons Row - Small icons showing connection types */
.connection-icons {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.connection-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 0.75rem;
    color: var(--text-muted);
    cursor: help;
}

.connection-icon i.fa-user-tie {
    color: var(--primary-color);
}

.connection-icon i.fa-envelope {
    color: #1CA13B;
}

.connection-icon i.fa-phone {
    color: #7c3aed;
}

.connection-icon i.fa-mail-bulk {
    color: #f59e0b;
}

.connection-icon i.fa-map-marker-alt {
    color: #ef4444;
}

/* Strong Badge - Inline badge for individual companies */
.strong-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    background: rgba(28, 161, 59, 0.12);
    border: 1px solid rgba(28, 161, 59, 0.35);
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #1CA13B;
    white-space: nowrap;
}

[data-theme="dark"] .strong-badge {
    background: rgba(28, 161, 59, 0.2);
    border-color: #1CA13B;
    color: #5ed178;
}

.strong-badge i {
    color: #1CA13B;
}

[data-theme="dark"] .strong-badge i {
    color: #5ed178;
}

/* Officer/contact name links — signal they navigate to a contact association page */
.contact-name-link {
    color: var(--primary-color);
    text-decoration: underline;
    text-decoration-color: rgba(0, 123, 195, 0.4);
    text-underline-offset: 2px;
    font-weight: 500;
}

.contact-name-link:hover {
    text-decoration-color: var(--primary-color);
}

.contact-name-link i {
    font-size: 0.7em;
    margin-left: 4px;
    opacity: 0.65;
    vertical-align: baseline;
}

[data-theme="dark"] .contact-name-link {
    color: #6cb8e6;
    text-decoration-color: rgba(108, 184, 230, 0.5);
}

/* Former badge — grey mirror of .strong-badge: identical size/weight, neutral colour */
.former-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    background: rgba(108, 117, 125, 0.14);
    border: 1px solid rgba(108, 117, 125, 0.35);
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #5c636a;
    white-space: nowrap;
}

.former-badge i {
    margin-right: 0.25rem;
}

[data-theme="dark"] .former-badge {
    background: rgba(148, 155, 162, 0.2);
    border-color: rgba(148, 155, 162, 0.45);
    color: #b6bcc2;
}

/* Tab share/anchor button — copies a link to the active tab */
.tab-share-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 0.4rem 0.65rem;
    margin-bottom: 0.25rem;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    border-radius: 6px;
    transition: color 0.15s ease, background 0.15s ease;
}

.tab-share-btn:hover {
    color: var(--primary-color);
    background: var(--table-header-bg);
}

.tab-share-btn.copied {
    color: #1CA13B;
}

/* Desktop leans on the hover tooltip, so the icon stands alone */
.tab-share-label {
    display: none;
}

/* Connection Separator - Dot between info items */
.connection-separator {
    color: var(--text-muted);
    font-size: 0.75rem;
}

/* Strong Connection Card - Highlight for cards with strong connections */
/* Strong connections are marked by the inline "Strong" badge; no accent border or wash -
   decoration duplicating the badge is what makes cards read as AI-generated */

/* Company Link Arrow */
.company-link-arrow {
    font-size: 0.75rem;
    opacity: 0.5;
    transition: all 0.2s ease;
}

.related-company-card:hover .company-link-arrow {
    opacity: 1;
    transform: translateX(3px);
}

/* Match Reason Item styling */
.match-reason-item {
    background-color: var(--table-header-bg);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.match-reason-item:hover {
    background-color: var(--border-color);
}

/* Match Details section */
.match-details {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

/* Dark mode - Toggle match details chevron white */
[data-theme="dark"] .toggle-match-details i {
    color: #ffffff !important;
}

/* Mobile responsiveness for connection icons */
@media (max-width: 575.98px) {
    .connection-icons {
        gap: 0.375rem;
    }
    
    .connection-icon {
        width: 20px;
        height: 20px;
        font-size: 0.7rem;
    }
    
    .strong-badge {
        font-size: 0.7rem;
        padding: 0.15rem 0.5rem;
    }
    
    .strong-link-badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.6rem;
    }
}
/* ============================================================================
   MOTUS Trends page (/motus) - SSR inline-SVG charts. Palette validated with the
   dataviz skill (categorical CVD worst-adjacent deltaE 13.3 light / 23.6 dark).
   Colors are roles on .motus-page so light/dark swap in one place; text stays in
   ink tokens, never a series color. Dark overrides key off [data-theme="dark"] to
   match the site theme-toggle mechanism.
   ============================================================================ */
.motus-page {
    --motus-granted: #008300;
    --motus-revoked: #e34948;
    --motus-neutral: #c9c9c4;
    --motus-new: #2a78d6;
    --motus-cancel: #eb6834;
    --motus-involuntary: #eb6834;
    --motus-voluntary: #2a78d6;
    --motus-bar: #2a78d6;
    --motus-grid: #e1e0d9;
    --motus-axis: #c3c2b7;

    /* Choropleth: 5-step sequential blue ramp (dataviz skill, ordinal ramp validated
       light->dark on the #ffffff card, single hue, adjacent dL >= 0.06, light end 2.11:1).
       b0 = none/absent, applied to zero states via the .motus-state-map svg .state rule below.
       In light it stays #d0d0d0 (the SVG's own default grey, so a no-op). b3 is the --motus-bar anchor. */
    --motus-map-b0: #d0d0d0;
    --motus-map-b1: #86b6ef;
    --motus-map-b2: #5598e7;
    --motus-map-b3: #2a78d6;
    --motus-map-b4: #184f95;
    --motus-map-border: #ffffff;
}

[data-theme="dark"] .motus-page {
    --motus-granted: #008300;
    --motus-revoked: #e66767;
    --motus-neutral: #4a4a46;
    --motus-new: #3987e5;
    --motus-cancel: #d95926;
    --motus-involuntary: #d95926;
    --motus-voluntary: #3987e5;
    --motus-bar: #3987e5;
    --motus-grid: #2c2c2a;
    --motus-axis: #383835;

    /* Dark ramp runs light->dark so MORE registrations = DARKER, matching the light theme
       (user decision 2026-07-08). Single hue; b4 (#256abf) still separates from the card and
       from b0 thanks to the border + hue. b0 is a recessive dark neutral (OKL L 0.39, ~1.4:1
       vs the card) so zero states read as quiet land. Applied via the .state group-fill rule. */
    --motus-map-b0: #45453e;
    --motus-map-b1: #9ec5f4;
    --motus-map-b2: #6da7ec;
    --motus-map-b3: #3987e5;
    --motus-map-b4: #256abf;
    --motus-map-border: #2d2d2d;
}

.motus-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
    color: var(--text-color);
}

.motus-hero {
    text-align: center;
}

.motus-hero h1 {
    font-size: 1.9rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

/* Second title line, rendered as its own block under "FMCSA MOTUS Data". It stays inside the h1 (the
   keywords belong there), but it is styled as a deck rather than a second title: at 1.55rem/700 it competed
   with the 1.9rem/700 line above it and the pair read as two headlines fighting. */
.motus-hero h1 .motus-h1-line2 {
    display: block;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-top: 0.2rem;
}

.motus-hero .motus-asof {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.motus-section {
    margin-top: 2.5rem;
}

.motus-section > h2 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.motus-section > .motus-section-note {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.motus-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
}

.motus-kpi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
}

.motus-kpi {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    box-shadow: var(--shadow-sm);
}

.motus-kpi .motus-kpi-value {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-color);
}

.motus-kpi .motus-kpi-label {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.motus-toc {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.motus-toc a {
    display: inline-block;
    padding: 0.35rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--card-bg);
    color: var(--text-color);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
}

.motus-toc a:hover,
.motus-toc a:focus {
    border-color: var(--motus-granted);
    color: var(--motus-granted);
}

.motus-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    color: var(--text-color);
}

.motus-legend .motus-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.motus-legend .motus-swatch {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    display: inline-block;
    flex-shrink: 0;
}

.motus-legend .motus-swatch-line {
    width: 16px;
    height: 3px;
    border-radius: 2px;
}

/* Choropleth map (reuses the company-page us-states.svg). All rules are scoped under
   .motus-state-map so they can never bleed into the company Overview service map. */
.motus-state-map .motus-map-canvas {
    background: var(--card-bg);
    border-radius: 8px;
    padding: 8px;
    margin-top: 0.75rem;
    overflow-x: auto;
}

.motus-state-map .motus-map-canvas svg {
    width: 100%;
    height: auto;
    display: block;
}

/* New | All map switch: CSS-only. Both map cards are server-rendered (both stay crawlable);
   the hidden radios just choose which card is visible. Selected pill uses --motus-map-b4 -
   the ramp's darkest ink, white text >= 4.5:1 in both themes. */
.motus-map-switch-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.motus-map-switch {
    display: flex;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.motus-map-switch label {
    display: inline-block;
    padding: 0.35rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--card-bg);
    color: var(--text-color);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

.motus-map-switch label:hover {
    border-color: var(--motus-granted);
    color: var(--motus-granted);
}

#motus-map-view-new:checked ~ .motus-map-switch label[for="motus-map-view-new"],
#motus-map-view-all:checked ~ .motus-map-switch label[for="motus-map-view-all"] {
    background: var(--motus-map-b4);
    border-color: var(--motus-map-b4);
    color: #fff;
}

#motus-map-view-new:focus-visible ~ .motus-map-switch label[for="motus-map-view-new"],
#motus-map-view-all:focus-visible ~ .motus-map-switch label[for="motus-map-view-all"] {
    outline: 2px solid var(--motus-map-b4);
    outline-offset: 2px;
}

#motus-map-view-new:checked ~ .motus-state-map--all,
#motus-map-view-all:checked ~ .motus-state-map--new {
    display: none;
}

/* Bucket-0 (zero/absent) fill. The state code classes (.ca, .tx, ...) sit on the child <path>s
   while .state sits on their parent <g>, so this group fill is inherited only by states with no
   per-bucket rule; the emitted per-instance svg .{code} rules override it on the child paths. */
.motus-state-map svg .state {
    fill: var(--motus-map-b0);
}

/* State outlines: white in light, card-colored in dark so bright states read as tiles. */
.motus-state-map svg .borders {
    stroke: var(--motus-map-border);
    stroke-width: 1;
}

/* Visible per-state count labels drawn on the map (JavaScript-free). pointer-events:none so the
   native <title> hover tooltip on the underlying shape still fires when the cursor is over a number. */
.motus-state-map svg .motus-map-num {
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    text-anchor: middle;
    dominant-baseline: central;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

/* First line of the stacked in-state label: the state code, smaller and quieter than the count. */
.motus-state-map svg .motus-map-num .motus-map-code {
    font-size: 8.5px;
    letter-spacing: 0.03em;
    opacity: 0.85;
}

/* Outside stacked labels (small east-coast states/DC): normal ink, left-anchored, code prefix. */
.motus-state-map svg .motus-map-out {
    fill: var(--text-color);
    text-anchor: start;
}

/* Leader line from a small state to its outside label. */
.motus-state-map svg .motus-map-leader {
    stroke: var(--motus-axis);
    stroke-width: 0.6;
    opacity: 0.75;
}

/* Dark card: --motus-axis (#383835) vanishes on #2d2d2d, so leaders go light. */
[data-theme="dark"] .motus-state-map svg .motus-map-leader {
    stroke: #d8d8d3;
    opacity: 0.7;
}

/* Labels anchored over the map background rather than on their shape (HI floats between
   its islands): theme text color instead of bucket ink, so they stay visible on the card. */
.motus-state-map svg .motus-map-num.motus-map-float {
    fill: var(--text-color);
}

/* Per-bucket label contrast, validated (WCAG) against each bucket fill. Light theme: b0-b2 fills are
   light -> dark ink; b3-b4 are dark -> light ink. */
.motus-state-map svg .motus-map-num-b0,
.motus-state-map svg .motus-map-num-b1,
.motus-state-map svg .motus-map-num-b2 {
    fill: #0b1b30;
}

.motus-state-map svg .motus-map-num-b3,
.motus-state-map svg .motus-map-num-b4 {
    fill: #f6f9ff;
}

/* Dark theme (light->dark ramp): b0 (dark neutral) and b4 (darkest blue) take light ink;
   b1-b3 fills are light enough that dark ink measures better (b3 #3987e5: 4.5:1 dark vs 3.5:1 light). */
[data-theme="dark"] .motus-state-map svg .motus-map-num-b0,
[data-theme="dark"] .motus-state-map svg .motus-map-num-b4 {
    fill: #f6f9ff;
}

[data-theme="dark"] .motus-state-map svg .motus-map-num-b1,
[data-theme="dark"] .motus-state-map svg .motus-map-num-b2,
[data-theme="dark"] .motus-state-map svg .motus-map-num-b3 {
    fill: #0b1b30;
}

/* Map legend: the shared .motus-legend primitives, tuned for numeric ranges. The recessive b0
   swatch needs an outline to read on the card, so every swatch here carries a border. */
/* The fixed feedback/theme pill (~123px deep from the right edge, including its offset) sits over the
   charts' newest month wherever the centered 1100px page's gutter is thinner than the pill - i.e. every
   viewport under ~1314px. On phones the horizontal scroll parks the current month exactly under it, so it
   is not even transient. Inset the scroller on this page only; wider viewports clear it on gutter alone. */
@media (max-width: 1360px) {
    .motus-page .motus-chart-scroll {
        padding-right: 108px;
    }
}

.motus-chart {
    width: 100%;
    height: auto;
    overflow: visible;
}

.motus-chart-scroll {
    overflow-x: auto;
}

/* Compact phone rendering of the monthly charts (.motus-chart-fit holds a 360-unit re-layout of
   the same chart): the wide scrolling variant hides on phones, the compact one everywhere else.
   max-width caps the compact SVG's upscale so its 10px viewBox text tops out ~13px. */
.motus-chart-fit {
    display: none;
}

@media (max-width: 639px) {
    .motus-page .motus-chart-scroll {
        display: none;
    }

    .motus-chart-fit {
        display: block;
    }

    .motus-chart-fit .motus-chart {
        display: block;
        max-width: 480px;
        margin: 0 auto;
    }
}

.motus-grid-line {
    stroke: var(--motus-grid);
    stroke-width: 1;
}

.motus-axis-line {
    stroke: var(--motus-axis);
    stroke-width: 1;
}

.motus-axis-label {
    fill: var(--text-muted);
    font-size: 11px;
    font-family: inherit;
}

.motus-value-label {
    fill: var(--text-color);
    font-size: 10px;
    font-family: inherit;
}

.motus-line {
    fill: none;
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.motus-marker {
    stroke: var(--card-bg);
    stroke-width: 1.5;
}

.motus-bars {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.motus-bar-row {
    display: grid;
    grid-template-columns: 130px 1fr auto;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.88rem;
}

.motus-bar-row .motus-bar-key {
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.motus-bar-track {
    background: var(--table-hover-bg);
    border-radius: 4px;
    height: 16px;
    overflow: hidden;
}

.motus-bar-fill {
    /* span is inline by default — width/height only apply once it generates a block box */
    display: block;
    background: var(--motus-bar);
    height: 100%;
    border-radius: 4px;
    min-width: 2px;
}

.motus-bar-row .motus-bar-val {
    color: var(--text-color);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.motus-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.6rem;
}

.motus-day-box {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0.7rem 0.4rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.motus-day-box .motus-day-count {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-color);
    font-variant-numeric: tabular-nums;
}

.motus-day-box .motus-day-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
}

/* Authorities granted, under the filed count in the same day box. Carries the granted series' color so
   the funnel strip and the monthly chart above it speak the same visual language. */
.motus-day-box .motus-day-sub {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--motus-granted);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

/* Partial periods (a month-to-date tile, or a first month that starts where the feed starts) are dashed,
   so "incomplete" is a visual grammar and not only a word in the label. */
.motus-status-tile--partial {
    border-style: dashed;
}

/* The three application-month tiles are the section's headline figures; at the default 1.4rem they read
   smaller than the day boxes below them, which inverts the hierarchy. */
#applications .motus-status-tile .motus-status-value {
    font-size: 1.75rem;
}

/* Section permalink: a link icon that copies the section's URL. Recessive until the heading is hovered or
   the icon is focused; always faintly visible on touch, where there is no hover to reveal it. */
.motus-anchor {
    margin-left: 0.5rem;
    font-size: 0.6em;
    color: var(--text-muted);
    opacity: 0;
    text-decoration: none;
    vertical-align: middle;
    transition: opacity 0.15s ease, color 0.15s ease;
}

h2:hover > .motus-anchor,
.motus-anchor:focus-visible {
    opacity: 1;
}

.motus-anchor:hover {
    color: var(--primary-color);
}

.motus-anchor.copied {
    opacity: 1;
    color: #1CA13B;
}

@media (hover: none) {
    .motus-anchor {
        opacity: 0.45;
    }
}

/* The granted figure's color, carried into the day-strip heading so the strip needs no legend. */
.motus-ink-granted {
    color: var(--motus-granted);
}

/* Two-column key/value tables (state -> count). Left to fill the container they open a ~800px void between
   the code and its number, and the rows stop being trackable. */
.motus-data-table--kv {
    max-width: 420px;
}

/* Wider tables (month + 2-3 figures) hit the same tracking gap at full width, just less severely. */
.motus-data-table--narrow {
    max-width: 640px;
}

/* A 50-row state table opened inline turns into a 1,600px skyscraper with an empty right half. Cap it and
   let it scroll in place, with the header pinned so the columns stay identified while scrolling. */
.motus-scroll-panel {
    max-height: 26rem;
    overflow-y: auto;
}

.motus-scroll-panel thead th {
    position: sticky;
    top: 0;
    background: var(--table-header-bg);
}

/* Insurer names are company names, not two-letter state codes: at 220px four of ten still ellipsed. Wrap
   rather than clip, so the column survives whatever the next insurer is called. */
.motus-bars--wide .motus-bar-row {
    grid-template-columns: 280px 1fr auto;
}

.motus-bars--wide .motus-bar-key {
    white-space: normal;
    line-height: 1.25;
}

@media (max-width: 576px) {
    .motus-bars--wide .motus-bar-row {
        grid-template-columns: 140px 1fr auto;
    }

    /* The on-state counts scale to ~4px at phone width - unreadable either way, so they only add noise.
       The shading carries "darker = more"; exact figures are in the table below. */
    .motus-state-map svg .motus-map-num {
        display: none;
    }
}

/* A card's headline figure ("N new applications in K states between ..."), under its h3. */
.motus-card-headline {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-color);
    font-variant-numeric: tabular-nums;
    margin: 0 0 0.85rem;
}

.motus-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

/* Tier 2 of the tile system: a flat tint with no resting border, so a section figure is visibly a different
   species from a page-level KPI card (bordered, shadowed, on --card-bg). With both bordered and both on
   near-identical greys, the page read as five identical rows of white boxes meaning five different things.
   The dashed partial-period grammar survives: only the border STYLE ever carried that signal. */
.motus-status-tile {
    text-align: center;
    padding: 0.75rem;
    border: 1px solid transparent;
    border-radius: 10px;
    background: var(--table-hover-bg);
}

.motus-status-tile--partial {
    border-color: var(--border-color);
}

.motus-status-tile .motus-status-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-color);
    font-variant-numeric: tabular-nums;
}

.motus-status-tile .motus-status-label {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.motus-subgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}

.motus-subgrid h3,
.motus-card h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.motus-details {
    margin-top: 0.75rem;
    font-size: 0.85rem;
}

.motus-details > summary {
    cursor: pointer;
    color: var(--primary-color);
}

.motus-data-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
    font-variant-numeric: tabular-nums;
}

.motus-data-table th,
.motus-data-table td {
    border: 1px solid var(--border-color);
    padding: 0.3rem 0.55rem;
    text-align: right;
}

.motus-data-table th:first-child,
.motus-data-table td:first-child {
    text-align: left;
}

.motus-data-table thead th {
    background: var(--table-header-bg);
    color: var(--text-color);
}

.motus-unavailable {
    color: var(--text-muted);
    font-style: italic;
    padding: 1rem 0;
}

.motus-methodology {
    margin-top: 2.5rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.7;
}

.motus-methodology h2 {
    font-size: 1.05rem;
    color: var(--text-color);
    margin-bottom: 0.5rem;
}

.motus-methodology a {
    color: var(--primary-color);
}

.motus-teaser {
    margin-top: 1.75rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    box-shadow: var(--shadow-sm);
}

.motus-teaser .motus-teaser-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

.motus-teaser .motus-teaser-title {
    font-weight: 700;
    color: var(--text-color);
}

.motus-teaser .motus-teaser-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    text-align: center;
}

.motus-teaser .motus-teaser-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-color);
    font-variant-numeric: tabular-nums;
}

.motus-teaser .motus-teaser-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

@media (max-width: 576px) {
    .motus-bar-row {
        grid-template-columns: 96px 1fr auto;
        font-size: 0.8rem;
    }
    .motus-days {
        grid-template-columns: repeat(7, 1fr);
        gap: 0.3rem;
    }
    .motus-day-box {
        padding: 0.5rem 0.2rem;
    }

    /* At ~44px per box the date wraps to a third line on the longer labels only, so the row grows to fit
       the worst one and the baselines go ragged. The card heading already says "Last 7 days" and the month
       is established by the tiles above, so the weekday alone carries it. */
    .motus-day-date {
        display: none;
    }
    .motus-day-box .motus-day-count {
        font-size: 1.05rem;
    }
    .motus-day-box .motus-day-sub {
        font-size: 0.8rem;
    }
    .motus-day-box .motus-day-label {
        font-size: 0.68rem;
    }
}