/* ============================================
   MODERN FINANCIAL APP STYLES
   ============================================ */

/* ROOT VARIABLES - Modern Financial Color Palette */
:root {
    --primary-dark: #0A1929;        /* Deep navy for headers */
    --primary-blue: #215FA6;        /* Professional blue — refined, less saturated than Material */
    --primary-blue-hover: #184C86;  /* Darker blue for hover / active states */
    --primary-light: #E8F0FA;       /* Light blue backgrounds */
    --accent-green: #16A34A;        /* Positive numbers — restrained, less neon */
    --accent-red: #DC2626;          /* Negative numbers */
    --accent-amber: #FFA000;        /* Warnings/highlights */
    
    --surface-white: #FFFFFF;
    --surface-light: #F8FAFC;       /* Subtle background */
    --surface-gray: #F1F5F9;        /* Card backgrounds */
    --border-light: #E2E8F0;
    --border-medium: #CBD5E1;
    
    --text-primary: #1E293B;
    --text-secondary: #64748B;
    --text-light: #94A3B8;
    
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    
    --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', sans-serif;
    --font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
}

/* ============================================
   BASE STYLES
   ============================================ */

html, body {
    font-family: var(--font-primary);
    color: var(--text-primary);
    background-color: var(--surface-light);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Main content area with subtle background */
article.content {
    background-color: var(--surface-light);
    min-height: 100vh;
}

.content {
    padding-top: 1.5rem;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

h2 {
    font-size: 1.5rem;
    margin-bottom: 0.875rem;
}

h1:focus {
    outline: none;
}

/* ============================================
   LINKS & BUTTONS
   ============================================ */

a, .btn-link {
    color: var(--primary-blue);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover, .btn-link:hover {
    color: var(--primary-blue-hover);
}

.btn-primary {
    color: #fff;
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
    font-weight: 500;
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm);
}

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

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(33, 95, 166, 0.25);
    outline: none;
}

.btn-sm {
    padding: 0.375rem 0.875rem;
    font-size: 0.875rem;
    border-radius: var(--radius-sm);
}

/* ============================================
   CARDS & CONTAINERS
   ============================================ */

.card {
    background: var(--surface-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    /* Keep Bootstrap's inner-corner math in sync with the theme radius — .card-header's
       opaque background otherwise squares off over the rounded border at the top corners
       (visible on colored borders like .border-primary). */
    --bs-card-border-radius: var(--radius-lg);
    --bs-card-inner-border-radius: calc(var(--radius-lg) - 1px);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    min-width: 0; /* CRITICAL: stops the card from stretching past the main container */
}

.card:hover {
    box-shadow: var(--shadow-md);
}

.card-header {
    background-color: var(--surface-white);
    border-bottom: 1px solid var(--border-light);
    padding: 1.25rem 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
}

.card-body {
    padding: 1.5rem;
}

/* ============================================
   FORMS
   ============================================ */

.form-control {
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    padding: 0.625rem 0.875rem;
    font-size: 0.9375rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(33, 95, 166, 0.1);
}

.valid.modified:not([type=checkbox]) {
    outline: none;
    border-color: var(--accent-green);
}

.invalid {
    outline: none;
    border-color: var(--accent-red);
}

.validation-message {
    color: var(--accent-red);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.darker-border-checkbox.form-check-input {
    border-color: var(--border-medium);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--text-light);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ============================================
   FINANCIAL DATA TABLES
   ============================================ */

.financial-data-card {
    padding: 0;
    background: var(--surface-white);
}

/* Higher specificity (div.class) ensures this overflow: auto
   can never be beaten by the generic .table-responsive rule below */
div.financial-data-container {
    max-height: 700px;
    max-width: calc(100vw - 3rem);
    overflow: auto;
    position: relative;
}

/* Custom scrollbar for financial tables */
.financial-data-container::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.financial-data-container::-webkit-scrollbar-track {
    background: var(--surface-gray);
    border-radius: 5px;
}

.financial-data-container::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: 5px;
}

.financial-data-container::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

.financial-data-table {
    margin-bottom: 0;
    width: auto !important;  /* Overrides Bootstrap's .table { width: 100% } */
    min-width: 100%;
    font-size: 0.875rem;
    border-collapse: collapse; /* Back to Bootstrap default — avoids sticky rendering artefacts */
}

/* STICKY HEADERS - PRESERVED */
.financial-data-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

.table.financial-data-table thead th {
    background-color: var(--primary-dark);
    color: var(--surface-white);
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1rem 0.875rem;
    white-space: nowrap;
    border: none;
    border-bottom: 2px solid var(--primary-blue);
}

.table.financial-data-table thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 11;
    background-color: var(--primary-dark);
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
}

/* Top-left corner cell: doubly sticky (top + left) - PRESERVED */
.financial-data-table thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 11;
    background-color: var(--primary-dark);
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
}

/* Sticky first column data cells - PRESERVED */
.financial-data-table tbody tr td:first-child {
    position: sticky;
    left: 0;
    z-index: 5;
    background-color: var(--surface-white);
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
}

.financial-data-table tbody tr:hover td:first-child {
    background-color: var(--primary-light);
}

/* Table cell styling */
.financial-data-table td,
.financial-data-table th {
    white-space: nowrap;
    padding: 0.875rem;
    border-bottom: 1px solid var(--border-light);
}

.financial-data-table tbody tr {
    transition: background-color 0.15s ease;
}

.financial-data-table tbody tr:hover {
    background-color: var(--primary-light);
}

/* Number formatting in tables */
.financial-data-table td[class*="text-end"],
.financial-data-table td.numeric {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

/* Section headers - PRESERVED & ENHANCED */
.financial-data-table tbody tr.section-header td {
    background-color: var(--surface-gray);
    font-weight: 600;
    color: var(--text-primary);
    padding: 0.75rem 1rem;
    position: sticky;
}

.financial-data-table tbody tr.section-header td:first-child {
    position: sticky;
    left: 0;
    z-index: 8;
    background-color: var(--surface-gray);
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
}

/* Bootstrap table color variants - PRESERVED with modern colors */
.financial-data-table tbody tr.table-success td:first-child,
.financial-data-table tbody tr.table-success.section-header td:first-child {
    background-color: #D1F4E0;
}

.financial-data-table tbody tr.table-warning td:first-child,
.financial-data-table tbody tr.table-warning.section-header td:first-child {
    background-color: #FFF4E5;
}

.financial-data-table tbody tr.table-danger td:first-child,
.financial-data-table tbody tr.table-danger.section-header td:first-child {
    background-color: #FFE9E9;
}

.financial-data-table tbody tr.table-info td:first-child,
.financial-data-table tbody tr.table-info.section-header td:first-child {
    background-color: var(--primary-light);
}

.financial-data-table tbody tr.table-primary td:first-child,
.financial-data-table tbody tr.table-primary.section-header td:first-child {
    background-color: var(--primary-light);
}

/* ============================================
   REGULAR TABLES (NON-FINANCIAL)
   ============================================ */

/* Note: NO overflow: hidden here — it would break any child scroll containers */
.table-responsive {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.table {
    margin-bottom: 0;
}

.table thead th {
    background-color: var(--surface-gray);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.875rem;
    border-bottom: 2px solid var(--border-medium);
    padding: 0.875rem;
}

.table-hover tbody tr {
    transition: background-color 0.15s ease;
}

.table-hover tbody tr:hover {
    background-color: var(--primary-light);
    cursor: pointer;
}

/* ============================================
   BADGES & STATUS INDICATORS
   ============================================ */

.badge {
    padding: 0.375em 0.75em;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    letter-spacing: 0.025em;
}

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

.badge.bg-danger {
    background-color: var(--accent-red) !important;
}

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

/* ============================================
   ALERTS
   ============================================ */

.alert {
    border-radius: var(--radius-md);
    border: none;
    box-shadow: var(--shadow-sm);
}

.alert-dismissible .btn-close {
    padding: 0.75rem;
}

/* ============================================
   MARKDOWN CONTENT
   ============================================ */

.markdown-content {
    font-family: var(--font-primary);
    line-height: 1.7;
    color: var(--text-primary);
}

/* Offset in-page jumps (report Contents / TOC) so a heading isn't hidden under the
   sticky landing top bar when scrolled to the top of the viewport. */
.markdown-content h1,
.markdown-content h2,
.markdown-content h3 {
    scroll-margin-top: 5rem;
}

/* In a modal the scroll container is .modal-body, which nothing overlays, so the
   heading should land flush at the top rather than 5rem short. */
.modal-body .markdown-content h1,
.modal-body .markdown-content h2,
.modal-body .markdown-content h3 {
    scroll-margin-top: 0;
}

.markdown-content h1 {
    border-bottom: 2px solid var(--border-light);
    padding-bottom: 0.5rem;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    font-size: 2em;
    font-weight: 600;
}

.markdown-content h2 {
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 0.375rem;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    font-size: 1.5em;
    font-weight: 600;
}

.markdown-content h3 {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    font-size: 1.25em;
    font-weight: 600;
}

.markdown-content p {
    margin-bottom: 1rem;
}

.markdown-content code {
    background-color: var(--surface-gray);
    border-radius: var(--radius-sm);
    font-size: 0.875em;
    margin: 0;
    padding: 0.25em 0.5em;
    font-family: var(--font-mono);
    color: var(--accent-red);
}

.markdown-content pre {
    background-color: var(--primary-dark);
    color: var(--surface-white);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    overflow-x: auto;
    line-height: 1.5;
}

.markdown-content pre code {
    background-color: transparent;
    padding: 0;
    color: var(--surface-white);
}

.markdown-content ul, .markdown-content ol {
    padding-left: 2em;
    margin-bottom: 1rem;
}

.markdown-content blockquote {
    border-left: 4px solid var(--primary-blue);
    color: var(--text-secondary);
    padding: 0 1.25em;
    margin: 0 0 1rem 0;
    font-style: italic;
}

.markdown-content table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 1rem;
    font-size: 0.9375rem;
}

.markdown-content table th,
.markdown-content table td {
    border: 1px solid var(--border-light);
    padding: 0.75rem 1rem;
}

.markdown-content table th {
    background-color: var(--surface-gray);
    font-weight: 600;
    color: var(--text-primary);
}

.markdown-content table tr:nth-child(even) {
    background-color: var(--surface-light);
}

.markdown-content a {
    color: var(--primary-blue);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

.markdown-content a:hover {
    border-bottom-color: var(--primary-blue);
}

.markdown-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}

/* ============================================
   ERROR HANDLING
   ============================================ */

.blazor-error-boundary {
    background: linear-gradient(135deg, #D32F2F 0%, #B71C1C 100%);
    padding: 1.25rem 1.25rem 1.25rem 4rem;
    color: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    position: relative;
}

.blazor-error-boundary::before {
    content: "⚠";
    position: absolute;
    left: 1.25rem;
    font-size: 2rem;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

#blazor-error-ui {
    color-scheme: light only;
    background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
    color: var(--text-primary);
    bottom: 0;
    box-shadow: var(--shadow-lg);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 1rem 1.5rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    border-top: 3px solid var(--accent-amber);
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: 0.875rem;
    font-size: 1.25rem;
    color: var(--text-secondary);
}

/* ============================================
   GOOGLE ATTRIBUTION (PRESERVED)
   ============================================ */

.google-chip-container {
    display: inline-flex;
    align-items: center;
    opacity: 0.6;
    transition: opacity 0.3s ease;
    transform: scale(0.85);
    transform-origin: left;
}

.google-chip-container:hover {
    opacity: 1;
}

.google-attribution-layout {
    width: 100%;
    overflow: visible !important;
}

.google-attribution-layout ul,
.google-attribution-layout li {
    list-style: none !important;
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.google-attribution-layout a {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    text-decoration: none !important;
}

.google-attribution-layout .container {
    max-width: 100% !important;
    width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.google-attribution-layout .carousel {
    flex: 1 !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
}

.google-attribution-layout .chip {
    display: inline-block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}

.google-attribution-layout .headline {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.text-positive {
    color: var(--accent-green) !important;
    font-weight: 600;
}

.text-negative {
    color: var(--accent-red) !important;
    font-weight: 600;
}

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

.bg-subtle {
    background-color: var(--surface-light) !important;
}

.border-subtle {
    border-color: var(--border-light) !important;
}

/* Stat cards for dashboard */
.stat-card {
    background: linear-gradient(135deg, var(--surface-white) 0%, var(--surface-gray) 100%);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

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

.stat-card-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.stat-card-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

/* ============================================
   AUTH PAGES (login / register / recovery)
   ============================================ */

.auth-container {
    max-width: 460px;
    margin: 2rem auto;
}

.auth-card {
    background: var(--surface-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 2rem;
}

.auth-title {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
    text-align: center;
}

.auth-subtitle {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}

/* Labelled divider, e.g. "or continue with" — replaces bare <hr>s */
.auth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--text-light);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 1.5rem 0;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid var(--border-light);
}

.auth-divider:not(:empty)::before {
    margin-right: 0.75rem;
}

.auth-divider:not(:empty)::after {
    margin-left: 0.75rem;
}

.auth-footer {
    text-align: center;
    margin-top: 1.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.auth-links {
    text-align: center;
    font-size: 0.875rem;
    margin-top: 0.75rem;
}

.auth-links p {
    margin-bottom: 0.375rem;
}

/* ============================================
   MANAGE ACCOUNT PAGES (Account/Manage/*)
   Extends the auth-card look/tokens above rather than inventing new ones —
   the manage pages sit in the interactive app shell (MainLayout), not the
   standalone auth-container, so they get their own shell + nav treatment.
   ============================================ */

.manage-shell {
    max-width: 980px;
}

.manage-grid {
    display: grid;
    grid-template-columns: 220px 1fr;
    align-items: start;
    gap: 1.5rem;
}

.manage-nav-card {
    background: var(--surface-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 0.75rem;
    /* Comfortably accommodates a future 5th (Billing) entry without resizing. */
}

.manage-nav {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.manage-nav-link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9375rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.manage-nav-link .bi {
    color: var(--text-light);
    font-size: 1rem;
    width: 1.1rem;
    text-align: center;
    transition: color 0.15s ease;
}

.manage-nav-link:hover {
    background-color: var(--primary-light);
    color: var(--primary-blue);
}

.manage-nav-link:hover .bi {
    color: var(--primary-blue);
}

.manage-nav-link.active {
    background-color: var(--primary-light);
    color: var(--primary-blue);
}

.manage-nav-link.active .bi {
    color: var(--primary-blue);
}

.manage-card {
    background: var(--surface-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.75rem;
}

.manage-card-title {
    font-size: 1.375rem;
    margin-bottom: 0.25rem;
}

.manage-card-subtitle {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

/* Destructive flows (delete account, reset 2FA/authenticator) keep the
   red danger card border so they read as different from ordinary settings. */
.manage-card-danger {
    border-color: rgba(220, 38, 38, 0.35);
}

.manage-card-danger .manage-card-title {
    color: var(--accent-red);
}

@media (max-width: 860px) {
    .manage-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
    h1 {
        font-size: 1.75rem;
    }
    
    .financial-data-container {
        max-height: 500px;
    }
    
    .card-body {
        padding: 1rem;
    }
}
/* ============================================
   SEC FILING BADGE (financial data table headers)
   ============================================ */

.filing-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    color: var(--primary-blue);
    background-color: var(--primary-light);
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
    margin-top: 0.2rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.filing-badge:hover,
.filing-badge:focus-visible {
    background-color: var(--primary-blue);
    color: #fff;
}

.filing-badge .bi {
    font-size: 0.65rem;
}

/* ============================================
   EMBEDDED SEC REPORT TABLE (FilingDetailsModal)
   Styles EDGAR R#.htm report-table markup (classes th/tl/pl/num/nump/re/ro/hide)
   ============================================ */

.filing-report-container {
    overflow: auto;
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: var(--radius-md);
}

.filing-report-container table.report {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    margin: 0;
}

.filing-report-container table.report th {
    background-color: var(--primary-blue);
    color: #fff;
    font-weight: 600;
    padding: 0.45rem 0.6rem;
    text-align: center;
    position: sticky;
    top: 0;
}

.filing-report-container table.report th.tl {
    text-align: left;
}

.filing-report-container table.report td {
    padding: 0.3rem 0.6rem;
    border-bottom: 1px solid #edf0f3;
    vertical-align: top;
}

.filing-report-container table.report tr.re td,
.filing-report-container table.report tr.reu td {
    background-color: #f8f9fb;
}

.filing-report-container table.report td.pl {
    text-align: left;
}

.filing-report-container table.report td.num,
.filing-report-container table.report td.nump,
.filing-report-container table.report td.text {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Footnote/definition popups were toggled by SEC's Show.js, which is stripped — keep them hidden */
.filing-report-container .hide {
    display: none;
}

/* De-scripted footnote anchors render as inert labels, not links */
.filing-report-container table.report a.a {
    color: inherit;
    text-decoration: none;
    cursor: default;
}

/* ============================================
   COLLAPSIBLE SIDEBAR (desktop icon-only rail)
   The toggle class lives on .page (MainLayout) but the labels live inside
   NavMenu — two separate scoped stylesheets — so the collapse behaviour is
   defined here in global CSS, where it can reach both. State is toggled/
   persisted by the .sidebar-collapse-button handler in app.js.
   ============================================ */

/* Hidden on mobile — there the hamburger (.navbar-toggler-button) is used. */
.sidebar-collapse-button {
    display: none;
}

@media (min-width: 641px) {
    .sidebar {
        transition: width 0.2s ease;
    }

    .sidebar-collapse-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        padding: 0;
        cursor: pointer;
        color: #fff;
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 4px;
    }

        .sidebar-collapse-button:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }

    .sidebar-collapse-icon {
        width: 1rem;
        height: 1rem;
        background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3E%3Cpath fill-rule='evenodd' d='M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
        transition: transform 0.2s ease;
    }

    /* --- Collapsed state: narrow icon rail --- */
    .page.sidebar-collapsed .sidebar {
        width: 64px;
    }

    /* Chevron points the other way (expand) once collapsed */
    .page.sidebar-collapsed .sidebar-collapse-icon {
        transform: rotate(180deg);
    }

    /* Hide the brand text and centre the toggle button in the rail */
    .page.sidebar-collapsed .navbar-brand {
        display: none;
    }

    .page.sidebar-collapsed .top-row .container-fluid {
        justify-content: center !important;
    }

    /* Drop the section divider and the username; keep icons only */
    .page.sidebar-collapsed .nav-scrollable hr,
    .page.sidebar-collapsed .user-profile small {
        display: none;
    }

    /* Collapse the trailing text-node labels to zero and centre each icon.
       font-size:0 (not display:none) keeps the label in the accessibility tree. */
    .page.sidebar-collapsed .nav-item .nav-link,
    .page.sidebar-collapsed .user-profile .nav-link,
    .page.sidebar-collapsed .user-profile form button {
        font-size: 0;
        justify-content: center;
    }

    .page.sidebar-collapsed .nav-link .bi {
        margin-right: 0;
    }

    /* Tighten item padding so 64px comfortably centres the icons */
    .page.sidebar-collapsed .nav-item {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* In the 64px icon rail a visible scrollbar track (~15px) eats into the
       icon column and pushes icons out of view. Hide the track visually while
       keeping the scroll container functional — wheel and touch still scroll. */
    .page.sidebar-collapsed .nav-items-scroll {
        scrollbar-width: none; /* Firefox */
    }

        .page.sidebar-collapsed .nav-items-scroll::-webkit-scrollbar {
            display: none; /* Chrome / Safari / Opera */
        }
}

/* ============================================
   STAT TILES (Key statistics, Returns on capital)
   ============================================
   Shared rather than scoped: these began as KeyStatisticsCard.razor.css and moved here when a
   second card adopted the same idiom, so the two read as one component family instead of drifting
   apart a tile at a time. Anything genuinely specific to one card still belongs in its own
   .razor.css — the ladder strip below is the example. */

.stat-group-title {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-light);
    margin-bottom: 0.5rem;
}

.stat-group-title:not(:first-child) {
    margin-top: 1.25rem;
}

/* Auto-fit keeps the tiles readable from the narrow dashboard column up to full width
   without a breakpoint per column count. */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    gap: 0.5rem;
    margin-bottom: 0;
}

.stat-tile {
    background: var(--surface-light);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 0.625rem 0.75rem;
}

.stat-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0.125rem;
}

.stat-value {
    font-family: var(--font-mono);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0;
    /* Ratios are compared down the column, so keep the digits from shifting. */
    font-variant-numeric: tabular-nums;
}

.stat-value-muted {
    color: var(--text-light);
    font-weight: 500;
}

/* A status standing in for a number: it is a phrase, not a figure, so it drops out of the
   monospace scale rather than being stretched across a tile built for digits. */
.stat-value-note {
    font-family: var(--font-body, inherit);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.stat-footnote {
    font-size: 0.75rem;
    color: var(--text-light);
    margin-top: 1rem;
    margin-bottom: 0;
}

/* ============================================
   SITE FOOTER
   ============================================ */

.site-footer {
    border-top: 1px solid var(--border-light);
    background-color: var(--surface-gray);
}

.footer-disclaimer {
    padding: 0.6rem 0.85rem;
    background-color: #fffbeb;
    border-left: 3px solid var(--accent-amber);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    line-height: 1.45;
}

/* On phones the disclaimer wraps to several lines and eats too much of a scrollable
   report modal — tighten it so more of the report stays visible. */
@media (max-width: 640px) {
    .footer-disclaimer {
        padding: 0.4rem 0.6rem;
        line-height: 1.3;
    }

    .footer-disclaimer small {
        font-size: 0.72rem;
    }
}

.footer-link {
    font-size: 0.8rem;
    color: var(--primary-blue);
    text-decoration: none;
}

.footer-link:hover {
    color: var(--primary-blue-hover);
    text-decoration: underline;
}

.footer-sep {
    color: var(--text-light);
    font-size: 0.8rem;
}

.footer-legal {
    font-size: 0.75rem;
}

/* ============================================
   LEGAL PAGES (Privacy Policy, Terms of Service, Cookie Disclosures)
   ============================================ */

.legal-page h1 {
    color: var(--primary-dark);
    font-size: 1.65rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
}

.legal-effective-date {
    color: var(--text-light);
    font-size: 0.82rem;
    margin-bottom: 1.75rem;
}

.legal-page h2 {
    color: var(--primary-blue);
    font-size: 1.05rem;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 0.65rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border-light);
    scroll-margin-top: 1.5rem; /* ensures #disclaimer anchor clears the top-row */
}

.legal-page h3 {
    color: var(--text-primary);
    font-size: 0.92rem;
    font-weight: 600;
    margin-top: 1.1rem;
    margin-bottom: 0.4rem;
}

.legal-page p,
.legal-page li {
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.75;
}

.legal-card {
    background: var(--surface-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 2.5rem 3rem;
    box-shadow: var(--shadow-sm);
}

@media (max-width: 576px) {
    .legal-card {
        padding: 1.5rem 1.25rem;
    }
}

.disclaimer-box {
    background-color: #fffbeb;
    border: 1px solid #fde68a;
    border-left: 4px solid var(--accent-amber);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem;
    margin: 1rem 0 1.5rem;
}

.disclaimer-box p {
    color: var(--text-primary);
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}

/* ============================================
   COOKIE DISCLOSURE TABLE
   ============================================ */

.cookie-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    margin: 0.75rem 0 1.25rem;
}

.cookie-table th {
    background-color: var(--primary-blue);
    color: #fff;
    font-weight: 600;
    padding: 0.55rem 0.75rem;
    text-align: left;
}

.cookie-table td {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--border-light);
    vertical-align: top;
    color: var(--text-secondary);
}

.cookie-table tr:nth-child(even) td {
    background-color: var(--surface-gray);
}

.badge-necessary {
    display: inline-block;
    background-color: #dcfce7;
    color: #166534;
    padding: 0.2rem 0.55rem;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.badge-future {
    display: inline-block;
    background-color: #fef9c3;
    color: #854d0e;
    padding: 0.2rem 0.55rem;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 600;
}