/* ============================================
   IGNEOUS - MAIN STYLESHEET
   Standardized CSS for accounting.mineral.tech
   ============================================ */

/* ============================================
   CSS VARIABLES (Design Tokens)
   ============================================ */
:root {
    /* Primary Brand Colors */
    --color-primary-blue: #4a6cf7;
    --color-dark-blue: #2e4a7a;
    --color-dark-gray: #1a1a2e;
    --color-accent-orange: #e07a3a;

    /* Grays */
    --color-steel: #5c6480;
    --color-table-header: #d0d4e4;
    --color-border: #c8cad8;
    --color-light-bg: #ecedf6;
    --color-sidebar-dark: #1a1a2e;

    /* Text Colors */
    --color-text-primary: #1a1a2e;
    --color-text-body: #2d2d44;
    --color-text: #2d2d44;
    --color-text-heading: #1a1a2e;
    --color-text-light: #d8dce8;
    --color-text-medium: #4a4a66;
    --color-text-gray: #6a6a88;
    --color-text-muted: #6a6a88;

    /* Backgrounds */
    --color-bg-body: #f0f1f8;
    --color-bg-content: #ffffff;
    --color-bg-light: #f5f6fc;
    --color-bg-container: #e8eaf4;
    --color-bg-secondary: #f0f1f8;
    --color-surface: #f4f4f4;   /* raised control/button surface (Reva mode bar, file-debug) */

    /* Semantic Colors */
    --color-success: #0d9373;
    --color-danger: #d32f3f;
    --color-warning: #c8960b;
    --color-info: #7c5eb8;

    /* Overlay */
    --color-overlay: rgba(255, 255, 255, 0.8);

    /* Chart Palette — 15 distinct colors for data visualization */
    --color-chart-1: #4a6cf7;   /* primary blue */
    --color-chart-2: #e07a3a;   /* accent orange */
    --color-chart-3: #d32f3f;   /* danger red */
    --color-chart-4: #0d9373;   /* success teal */
    --color-chart-5: #7c5eb8;   /* info purple */
    --color-chart-6: #8aa626;   /* olive green */
    --color-chart-7: #c44d80;   /* rose */
    --color-chart-8: #2e8bc0;   /* cerulean */
    --color-chart-9: #9c755f;   /* sienna */
    --color-chart-10: #6a6a88;  /* muted gray */
    --color-chart-11: #2e4a7a;  /* dark blue */
    --color-chart-12: #c8960b;  /* warning amber */
    --color-chart-13: #5c6480;  /* steel */
    --color-chart-14: #a85d32;  /* burnt orange */
    --color-chart-15: #4a4a66;  /* dark navy-gray */

    /* Semantic Aliases — role-based names that reuse palette colors.
       Use these for intent ("what is it for") vs raw color ("what does it look like").
       Safe to change independently if a role needs its own color later. */
    --color-error-row: #d32f3f;            /* same as --color-danger */
    --color-status-ok: #0d9373;            /* same as --color-success */
    --color-status-fail: #d32f3f;          /* same as --color-danger */
    --color-kpi-accent: #4a6cf7;           /* KPI highlight, same as primary blue */
    --color-section-heading: #7c5eb8;      /* decorative section headers, same as info purple */
    --color-link: #4a6cf7;                 /* inline links, same as primary blue */
    --color-link-hover: #2e4a7a;           /* link hover, same as dark blue */
    --color-badge-new: #0d9373;            /* "new" badges, same as success teal */
    --color-badge-pending: #c8960b;        /* "pending" badges, same as warning amber */
    --color-highlight: #e07a3a;            /* callout / attention, same as accent orange */

    /* Status Badge Backgrounds — light tinted bg + dark text pairs for badges/pills */
    --color-success-bg: #d4f5eb;
    --color-success-text: #065f46;
    --color-danger-bg: #fde2e4;
    --color-danger-text: #7f1d1d;
    --color-warning-bg: #fef3cd;
    --color-warning-text: #7c5e10;
    --color-info-bg: #ede5f7;
    --color-info-text: #4a2e7a;
    --color-neutral-bg: #e9ecf4;
    --color-neutral-text: #5c6480;
    --color-orange-bg: #fde8d0;
    --color-orange-text: #945720;
    --color-cyan-bg: #d1ecf1;
    --color-cyan-text: #0c5460;
    --color-purple-bg: #e8daef;
    --color-purple-text: #6c3483;
    --color-teal-bg: #d1f2eb;
    --color-teal-text: #0e6655;
    /* Text that sits on a solid colored chip/button (badges, status pills).
       Stays near-white in both themes — it is foreground on an accent fill,
       so it must NOT follow the page background the way --color-bg-content does. */
    --color-text-on-accent: #ffffff;

    /* Contacts module — brand cyan accent. Was hardcoded as #43C3F2 across
       contacts.css (and main.css); tokenized in v0.712. -bg/-text are the light
       blue chip pair used for client/info chips in the Contacts UI. */
    --color-contact-accent: #43C3F2;
    --color-contact-accent-hover: #2baed4;
    --color-contact-accent-bg: #e3f2fd;
    --color-contact-accent-text: #1565c0;

    /* Spacing */
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 15px;
    --spacing-lg: 20px;
    --spacing-xl: 30px;
    --spacing-xxl: 40px;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 5px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-round: 50%;

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 15px rgba(34, 59, 77, 0.5);
    --shadow-lg: 0 8px 20px rgba(0,0,0,0.15);

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Motion tokens — Mac-style window animations for onboarding v2.
       See [[Onboarding_v2_Plan]] §3.14 Animations & motion. */
    --ease-out-soft:    cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-soft:     cubic-bezier(0.64, 0, 0.78, 0);
    --ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-spring-soft: cubic-bezier(0.32, 1.25, 0.5, 1);
    --duration-snap:    120ms;
    --duration-glide:   220ms;
    --duration-zoom:    320ms;

    /* Onboarding Section pill aliases — intent-named, reuse palette colors */
    --color-section-sizing:     #5c6480;   /* same as --color-neutral-text */
    --color-section-scheduled:  #7c5eb8;   /* same as --color-info */
    --color-section-onboarding: #4a6cf7;   /* same as --color-primary-blue */
    --color-section-activation: #c8960b;   /* same as --color-warning */
    --color-section-done:       #0d9373;   /* same as --color-success */

    /* Dashboard ops-column department accent. Feedback is the 6th dept and needs
       a hue distinct from filemgmt (which already owns --color-success teal). */
    --color-dept-feedback:      #20c997;   /* mint-teal, feedback queue dept */

    /* Primary-blue opacity tokens — rgba decompositions of --color-primary-blue (#4a6cf7)
       used by Onboarding v2 section pills and task-status backgrounds.
       Can't reference var(--color-primary-blue) directly inside rgba(), so we maintain
       these as separate tokens. Update all three together if the brand blue changes. */
    --color-primary-blue-subtle: rgba(74, 108, 247, 0.12);
    --color-primary-blue-glow:   rgba(74, 108, 247, 0.15);

    /* Font Sizes */
    --font-xs: 12px;
    --font-sm: 13px;
    --font-md: 14px;
    --font-base: 15px;
    --font-lg: 16px;
    --font-xl: 17px;
    --font-xxl: 20px;

    /* Z-Index Layers */
    --z-base: 1;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal: 1040;
    --z-tooltip: 1050;
}

/* ============================================
   GLOBAL STYLES
   ============================================ */
html {
    height: 100%;
}

body {
    background: var(--color-bg-body);
    color: var(--color-text-body);
    margin: 0;
    padding: 0;
    padding-top: 4.5rem;
    min-height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-text-heading);
}

a {
    text-decoration: none;
    transition: color var(--transition-fast);
}

/* ============================================
   FORM ELEMENTS
   ============================================ */
input[type=file] {
    color: var(--color-table-header);
}

.form-control-file {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.form-control-file + label {
    background-color: var(--color-primary-blue);
    border-radius: var(--radius-sm);
    color: var(--color-bg-content);
    cursor: pointer;
    margin: auto;
    border: none;
    text-align: center;
    vertical-align: middle;
    outline: none;
    font-size: var(--font-base);
    margin-left: auto;
    margin-right: 0;
    margin-top: var(--spacing-sm);
    border: solid thin;
    font-weight: 500;
    padding: var(--spacing-xs) var(--spacing-sm);
    transition: background-color var(--transition-normal), transform var(--transition-fast);
}

.form-control-file + label:hover {
    transform: scale(1.05);
    background-color: var(--color-dark-gray);
    box-shadow: var(--shadow-md);
}

.form-control-file + label::after {
    content: attr(data-selected);
    margin-left: 0.5em;
    font-size: 0.9em;
    font-weight: normal;
}

.modern-label {
    display: block;
    margin-bottom: 8px;
    color: var(--color-text-medium);
    font-size: var(--font-md);
}

.modern-input-email {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: var(--spacing-lg);
    border: 1px solid #ddd;
    border-radius: var(--radius-lg);
    font-size: var(--font-md);
    transition: all var(--transition-normal);
    position: relative;
    z-index: 3;
    pointer-events: auto;
    padding-left: 40px;
    background-image: url('../static/images/email.png');
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: 20px;
}

.modern-input-password {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: var(--spacing-lg);
    border: 1px solid #ddd;
    border-radius: var(--radius-lg);
    font-size: var(--font-md);
    transition: all var(--transition-normal);
    position: relative;
    z-index: 3;
    pointer-events: auto;
    padding-left: 40px;
    background-image: url('../static/images/password.png');
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: 20px;
}

.modern-input:focus,
.modern-input-email:focus,
.modern-input-password:focus {
    border-color: var(--color-primary-blue);
    outline: none;
    box-shadow: 0 0 0 2px rgba(67, 195, 242, 0.2);
}

.modern-input.is-invalid {
    border-color: var(--color-danger);
    background-image: none;
}

.invalid-feedback {
    color: var(--color-danger);
    font-size: var(--font-xs);
    margin-top: -15px;
    margin-bottom: 15px;
}

/* ============================================
   BUTTONS
   ============================================ */
.valory_styled_buttons,
.btn-primary {
    background-color: var(--color-primary-blue);
    border-radius: var(--radius-sm);
    color: var(--color-bg-content);
    cursor: pointer;
    margin: auto;
    border: none;
    text-align: center;
    vertical-align: middle;
    outline: none;
    font-size: var(--font-base);
    margin-left: auto;
    margin-right: 0;
    margin-top: var(--spacing-sm);
    border: solid thin;
    font-weight: 500;
    padding: var(--spacing-xs) var(--spacing-sm);
    transition: background-color var(--transition-normal), transform var(--transition-fast);
}

.valory_styled_buttons:hover,
.btn-primary:hover,
.active {
    transform: scale(1.05);
    background-color: var(--color-dark-gray);
    box-shadow: var(--shadow-md);
}

.igneous_buttons,
.btn-secondary {
    background-color: var(--color-dark-gray);
    color: var(--color-light-bg);
    cursor: pointer;
    width: 100px;
    height: 50px;
    border: none;
    text-align: center;
    vertical-align: middle;
    outline: none;
    margin: auto;
    border-radius: var(--radius-md);
    font-size: var(--font-lg);
    transition: background-color var(--transition-normal), transform var(--transition-fast);
}

.igneous_buttons:hover,
.btn-secondary:hover {
    transform: scale(1.05);
    background-color: var(--color-primary-blue);
    box-shadow: var(--shadow-md);
}

.igneous_buttons_2,
.btn-tertiary {
    cursor: pointer;
    margin: auto;
    border: none;
    text-align: center;
    vertical-align: middle;
    outline: none;
    font-size: var(--font-base);
    margin-left: auto;
    margin-right: 0;
    margin-top: var(--spacing-sm);
    border: solid thin;
    transition: background-color var(--transition-normal), transform var(--transition-fast);
}

.igneous_buttons_2:hover,
.btn-tertiary:hover {
    transform: scale(1.05);
    background-color: var(--color-primary-blue);
    box-shadow: var(--shadow-md);
}

.collapsible {
    background-color: var(--color-dark-gray);
    color: var(--color-light-bg);
    cursor: pointer;
    padding: 18px;
    margin: var(--spacing-sm);
    width: 200px;
    border: none;
    text-align: center;
    outline: none;
    font-size: var(--font-base);
    transition: background-color var(--transition-normal);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    border-color: var(--color-success);
    transition: background-color var(--transition-normal), transform var(--transition-fast);
}

.collapsible:hover {
    background-color: var(--color-primary-blue);
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

.login-btn,
.btn-login {
    width: 100%;
    padding: 12px;
    background: var(--color-primary-blue);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    font-size: var(--font-lg);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-normal);
    transform: scale(0.98);
}

.login-btn:hover,
.btn-login:hover {
    background: var(--color-accent-orange);
    transform: translateY(-1px);
}

/* ============================================
   TABLES
   ============================================ */
table {
    position: relative;
    width: 100%;
}

th {
    font-size: var(--font-sm);
    background-color: var(--color-table-header);
    position: sticky;
    top: 0;
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

td {
    white-space: nowrap;
    color: var(--color-text-primary);
    font-size: var(--font-xs);
    padding: 6px 8px;
}

.statement_header_valory,
.table-header-dark {
    padding: 18px;
    margin: 0px;
    text-align: center;
    background-color: var(--color-dark-blue);
    color: var(--color-text-light);
    font-size: var(--font-xxl);
    font-weight: bold;
}

.header_title_info {
    color: var(--color-text-primary);
    font-size: var(--font-md);
    font-weight: bold;
    border-bottom: solid var(--color-border);
    border-width: thin;
}

.section_headers_info,
.table-section-header {
    color: var(--color-text-primary);
    background-color: var(--color-table-header);
    font-weight: bold;
    border-bottom: solid var(--color-border);
    border-width: thin;
    font-size: var(--font-xxl);
    padding-left: var(--spacing-sm);
    text-align: center;
}

.values_title_info {
    color: var(--color-text-primary);
    font-size: var(--font-md);
    border-bottom: solid var(--color-border);
    border-width: thin;
}

.values_clean_table {
    color: var(--color-text-primary);
    font-size: var(--font-md);
}

.values_clean_table:after {
    content: '\200b';
}

.values_clean_table_loop {
    color: var(--color-text-primary);
    font-size: var(--font-md);
}

.collapsible_database {
    font-size: var(--font-sm);
    margin: 1px;
}

.collapsible_database:hover,
.active_database {
    background-color: var(--color-table-header);
    margin: 1px;
    cursor: pointer;
}

.progress_audit_html {
    font-size: var(--font-sm);
    margin: 1px;
    border-bottom: solid var(--color-border);
    border-width: thin;
}

/* ============================================
   CARDS & CONTAINERS
   ============================================ */
.login-card,
.card-standard {
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xxl);
    width: 100%;
    max-width: 400px;
    box-shadow: var(--shadow-lg);
    margin: auto;
    position: relative;
    z-index: 2;
    transition: transform var(--transition-normal);
    overflow: hidden;
}

.login-card:hover,
.card-standard:hover {
    transform: scale(1.01);
}

/* ============================================
   COLLAPSIBLE SIDEBAR STYLES
   ============================================ */
.sidebar-wrapper {
    width: 250px;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    background-color: var(--color-sidebar-dark);
    margin: 0;
    padding: 0;
    position: fixed;
    top: 4.5rem;
    left: 0;
    height: calc(100vh - 4.5rem);
    z-index: 100;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.sidebar-wrapper.collapsed {
    width: 70px;
}

/* Pinned sidebar footer: AI chat launcher + collapse toggle */
.sidebar-footer {
    flex-shrink: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 4px 0;
    background-color: var(--color-sidebar-dark);
    color: var(--color-bg-content);
}

.sidebar-footer-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 20px;
    margin: 0;
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    transition: background-color 0.2s ease;
}

.sidebar-footer-item:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.sidebar-footer-item .nav-icon-fa {
    font-size: 18px;
}

/* Collapse-toggle icon rotates when collapsed (preserves the old affordance) */
.sidebar-toggle-btn i {
    transition: transform 0.3s ease;
}

.sidebar-wrapper.collapsed .sidebar-toggle-btn i {
    transform: rotate(180deg);
}

/* Center footer icons when the sidebar is collapsed (mirrors nav rows) */
.sidebar-wrapper.collapsed .sidebar-footer-item {
    justify-content: center;
    padding: 12px 8px;
}

/* Scrollable nav area above the pinned footer.
   Compound selector beats the later `.content-section` rule (height/overflow). */
.content-section.sidebar-fixed {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    margin-bottom: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.content-section.sidebar-fixed::-webkit-scrollbar {
    width: 8px;
}

.content-section.sidebar-fixed::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 4px;
}

/* Main Layout Wrapper */
.main-layout-wrapper {
    display: flex;
    width: 100%;
    min-height: calc(100vh - 4.5rem);
    margin: 0;
    padding: 0;
}

.main-content-wrapper {
    flex: 1;
    padding: var(--spacing-xs);
    min-width: 0;
    margin: 0;
    margin-left: 250px;
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* When sidebar is collapsed, reduce the margin */
.sidebar-collapsed .main-content-wrapper {
    margin-left: 70px;
}

.container-padding {
    padding: var(--spacing-sm);
    padding-bottom: var(--spacing-xl);
    background-color: var(--color-bg-content);
    margin: 7px;
    border-radius: var(--radius-md);
    width: auto;
    border: 1px solid #dddddd;
    min-height: calc(100vh - 6rem);
    max-width: 100%;
}

.container-fluid {
    background-color: var(--color-bg-container);
    min-height: calc(100vh - 4.5rem);
    max-width: 100%;
    padding: 0;
    margin: 0;
}

.section-padding {
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    border-radius: var(--radius-md);
}

.content-section {
    background: var(--color-dark-gray);
    padding: 1px 1px;
    border: 1px solid #dddddd;
    border-radius: 1px;
    margin-bottom: var(--spacing-lg);
    left: 0;
    height: 100%;
    color: var(--color-bg-content);
    width: 100%;
    overflow: hidden;
}

/* ============================================
   NAVIGATION
   ============================================ */
.navbar-dark {
    background-color: var(--color-sidebar-dark);
}

.site-header .navbar-nav .nav-link {
    color: var(--color-bg-content);
    background: var(--color-sidebar-dark);
    font-weight: bold;
    height: 55px;
}

.site-header .navbar-nav .nav-link:hover {
    color: var(--color-primary-blue);
}

.site-header .navbar-nav .nav-link.active {
    font-weight: 500;
}

.navbar-logo {
    height: 40px;
    width: auto;
    padding: 2px;
    transform: scale(2.7);
    transform-origin: center center;
}

.navbar-logo-wrapper {
    padding-left: 2.5px;
}

.profile-pic {
    width: 38px;
    height: 38px;
    object-fit: cover;
}

/* Profile dropdown styling to match header */
.nav-item.dropdown .nav-link {
    background: var(--color-sidebar-dark) !important;
    font-size: 15px;
}

.nav-item.dropdown .nav-link .text-white {
    font-size: 15px;
    font-weight: 500;
}

.logo-text {
    color: var(--color-bg-content);
    font-weight: bold;
    padding-left: var(--spacing-sm);
    font-family: Calibri, 'Segoe UI', sans-serif;
}

.app-version-link {
    font-size: 10px;
    font-weight: 400;
    font-family: 'Consolas', 'Monaco', monospace;
    color: var(--color-text-light);
    opacity: 0.5;
    margin-left: 6px;
    vertical-align: super;
    text-decoration: none;
    letter-spacing: 0.2px;
    cursor: pointer;
    transition: opacity 0.15s, color 0.15s;
}
.app-version-link:hover {
    opacity: 1;
    color: var(--color-bg-content);
    text-decoration: none;
}

/* Release notes slide panel */
.release-notes-panel { padding: 16px 18px; }
.release-notes-panel .rn-current {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.release-notes-panel .rn-current strong {
    color: var(--color-text-primary);
    font-family: 'Consolas', 'Monaco', monospace;
    text-transform: none;
    letter-spacing: 0;
}
.release-notes-panel .rn-list { list-style: none; padding: 0; margin: 0; }
.release-notes-panel .rn-list li { margin-bottom: 4px; }
.release-notes-panel .rn-item {
    width: 100%;
    text-align: left;
    background: var(--color-bg-content);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 9px 12px;
    cursor: pointer;
    font-size: 13px;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.1s, border-color 0.1s;
}
.release-notes-panel .rn-item:hover {
    background: var(--color-bg-light);
    border-color: var(--color-primary-blue);
}
.release-notes-panel .rn-item-version {
    font-family: 'Consolas', 'Monaco', monospace;
    font-weight: 600;
}
.release-notes-panel .rn-item-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}
.release-notes-panel .rn-item-badge {
    background: var(--color-success-bg);
    color: var(--color-success-text);
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.release-notes-panel .rn-item-pdf {
    color: var(--color-text-muted);
    text-decoration: none;
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 13px;
}
.release-notes-panel .rn-item-pdf:hover {
    color: var(--color-danger);
    background: var(--color-bg-light);
}
.release-notes-panel .rn-empty {
    color: var(--color-text-muted);
    font-style: italic;
    text-align: center;
    padding: 24px 0;
}

/* Release notes viewer (inside nested slide panel) */
.rn-viewer-toolbar {
    padding: 8px 14px;
    background: var(--color-bg-light);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: flex-end;
}
.rn-pdf-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-primary-blue);
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    transition: background 0.15s;
}
.rn-pdf-btn:hover {
    background: var(--color-dark-blue);
    color: #fff;
    text-decoration: none;
}
.rn-viewer-iframe {
    width: 100%;
    height: calc(100vh - 110px);
    border: none;
    display: block;
    background: var(--color-bg-body);
}

.nav-icon {
    filter: brightness(0) invert(1);
    width: 20px;
    height: 20px;
    margin-right: 8px;
    vertical-align: middle;
    background: transparent !important;
}

/* Collapsible Section Headers */
.collapsible_database_layout {
    font-size: var(--font-lg);
    margin: 2px 0;
    padding: 12px 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: Calibri, 'Segoe UI', sans-serif;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 4px;
    position: relative;
}

.collapsible_database_layout:hover {
    background-color: rgba(67, 195, 242, 0.1);
    transform: translateX(2px);
}

.collapsible_database_layout.active_database_layout {
    background-color: var(--color-primary-blue);
    color: white;
}

.collapsible_database_layout.active_database_layout .nav-icon-fa,
.collapsible_database_layout.active_database_layout .nav-chevron {
    color: white;
}

/* FontAwesome Icons for Sections */
.nav-icon-fa {
    font-size: 18px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.nav-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 0.3s ease;
}

.nav-chevron {
    font-size: 12px;
    transition: transform 0.3s ease;
    margin-left: auto;
}

.collapsible_database_layout.active_database_layout .nav-chevron {
    transform: rotate(180deg);
}

/* When sidebar is collapsed */
.sidebar-wrapper.collapsed .nav-text,
.sidebar-wrapper.collapsed .nav-chevron {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

.sidebar-wrapper.collapsed .collapsible_database_layout {
    justify-content: center;
    padding: 12px 8px;
    overflow: hidden;
    max-width: 100%;
    width: 100%;
}

.sidebar-wrapper.collapsed .nav-icon-fa {
    font-size: 20px;
}

/* Constrain hover effect when collapsed to prevent spillover */
.sidebar-wrapper.collapsed .collapsible_database_layout:hover {
    transform: none;
    background-color: rgba(67, 195, 242, 0.1);
}

/* Submenu Wrapper - hidden by default */
.submenu-wrapper {
    display: none;
}

/* ============================================
   FLYOUT PANEL - Expanded Sidebar
   ============================================ */
.submenu-wrapper.flyout {
    display: block;
    position: fixed;
    left: 250px;
    top: 4.5rem;
    max-height: calc(100vh - 4.5rem);
    overflow-y: auto;
    background: var(--color-sidebar-dark);
    min-width: 220px;
    z-index: 1001;
    border-radius: 0 8px 8px 0;
    box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(67, 195, 242, 0.15);
    border-left: none;
    animation: flyoutSlideIn 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes flyoutSlideIn {
    from {
        transform: translateX(-10px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Flyout header showing section name */
.flyout-header {
    padding: 12px 16px 8px;
    font-weight: 600;
    font-size: 14px;
    color: var(--color-primary-blue);
    border-bottom: 1px solid rgba(67, 195, 242, 0.15);
    margin-bottom: 4px;
    font-family: Calibri, 'Segoe UI', sans-serif;
}

/* Flyout link padding - remove deep accordion indent */
.submenu-wrapper.flyout .layout_navbar .nav-link {
    padding: 10px 16px;
}

/* Flyout scrollbar */
.submenu-wrapper.flyout::-webkit-scrollbar {
    width: 6px;
}

.submenu-wrapper.flyout::-webkit-scrollbar-track {
    background: var(--color-sidebar-dark);
    border-radius: 0 8px 8px 0;
}

.submenu-wrapper.flyout::-webkit-scrollbar-thumb {
    background: var(--color-primary-blue);
    border-radius: 3px;
}

.layout_navbar {
    background-color: var(--color-sidebar-dark);
    font-size: var(--font-base);
    margin: 1px 0;
    transition: all 0.3s ease;
    font-family: Calibri, 'Segoe UI', sans-serif;
}

.layout_navbar .nav-link {
    font-family: Calibri, 'Segoe UI', sans-serif;
    font-weight: 400;
    padding: 10px 12px 10px 36px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-bg-content);
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 4px;
    margin: 2px 6px;
}

.layout_navbar .nav-link:hover {
    background-color: rgba(67, 195, 242, 0.1);
    color: var(--color-primary-blue);
    transform: translateX(4px);
}

.submenu-icon {
    font-size: 14px;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

/* When sidebar is collapsed - hide submenus */
.sidebar-wrapper.collapsed .submenu-wrapper {
    display: none;
}

/* Floating submenu for collapsed sidebar */
.sidebar-wrapper.collapsed .submenu-wrapper.floating {
    display: block;
    position: fixed;
    left: 70px;
    background: var(--color-sidebar-dark);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    min-width: 200px;
    z-index: 1001;
    max-height: 500px;
    overflow-y: auto;
    border: 1px solid rgba(67, 195, 242, 0.2);
}

.sidebar-wrapper.collapsed .submenu-wrapper.floating .layout_navbar .nav-link {
    padding: 10px 16px;
}

/* Show text in floating menus */
.sidebar-wrapper.collapsed .submenu-wrapper.floating .nav-text {
    opacity: 1;
    width: auto;
    overflow: visible;
}

/* Scrollbar for floating menus */
.sidebar-wrapper.collapsed .submenu-wrapper.floating::-webkit-scrollbar {
    width: 6px;
}

.sidebar-wrapper.collapsed .submenu-wrapper.floating::-webkit-scrollbar-track {
    background: var(--color-sidebar-dark);
}

.sidebar-wrapper.collapsed .submenu-wrapper.floating::-webkit-scrollbar-thumb {
    background: var(--color-primary-blue);
    border-radius: 3px;
}

/* ============================================
   NESTED SUBMENU - Second-level flyout
   ============================================ */
.nested-submenu-wrapper {
    display: none;
    position: fixed;
    min-width: 220px;
    max-height: calc(100vh - 4.5rem);
    overflow-y: auto;
    background: var(--color-sidebar-dark);
    border-radius: 0 8px 8px 0;
    box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(67, 195, 242, 0.15);
    border-left: none;
    z-index: 1002;
    animation: flyoutSlideIn 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.nested-submenu-wrapper.show {
    display: block;
}

.nested-submenu-header {
    padding: 12px 16px 8px;
    font-weight: 600;
    font-size: 14px;
    color: var(--color-primary-blue);
    border-bottom: 1px solid rgba(67, 195, 242, 0.15);
    margin-bottom: 4px;
    font-family: Calibri, 'Segoe UI', sans-serif;
}

.nested-submenu-wrapper .layout_navbar .nav-link {
    padding: 10px 16px;
}

/* Nested trigger chevron */
.nested-chevron {
    font-size: 10px;
    margin-left: auto;
    opacity: 0.6;
    transition: transform 0.2s ease;
}

.has-nested-submenu.nested-active .nested-chevron {
    transform: rotate(90deg);
    opacity: 1;
}

.has-nested-submenu.nested-active .nav-link {
    color: var(--color-primary-blue);
    background-color: rgba(67, 195, 242, 0.1);
}

/* Disabled link for Phase 2 items */
.nested-disabled {
    opacity: 0.5;
    cursor: not-allowed !important;
    pointer-events: none;
}

.database_layout {
    font-size: var(--font-lg);
    margin: 1px;
    padding: var(--spacing-sm) var(--spacing-md);
    transition: background-color var(--transition-normal), transform var(--transition-fast);
}

.database_layout:hover {
    background-color: var(--color-primary-blue);
    box-shadow: var(--shadow-md);
    margin: 1px;
    cursor: pointer;
}

.sidebar-menu {
    position: fixed;
    left: 0;
    top: 60px;
    width: 250px;
    padding: var(--spacing-md);
    background-color: var(--color-bg-light);
    height: 100vh;
    border-right: 1px solid #dee2e6;
    z-index: var(--z-dropdown);
}

/* ============================================
   DROPDOWNS
   ============================================ */
.dropdown-toggle::after {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
}

.dropdown-menu {
    background-color: var(--color-bg-content);
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    margin-top: 0.5rem;
}

.dropdown-item {
    color: var(--color-text-body);
    padding: 0.5rem 1.5rem;
    transition: all var(--transition-fast);
}

.dropdown-item:hover {
    background-color: var(--color-bg-light);
    color: var(--color-accent-orange);
}

.dropdown-item i {
    width: 20px;
    color: var(--color-primary-blue);
}

.dropdown-item:hover i {
    color: var(--color-accent-orange);
}

.dropdown-divider {
    border-top: 1px solid var(--color-border, #eee);
    margin: 0.5rem 0;
}

.dropdown-toggle {
    cursor: pointer;
}

/* ============================================
   LINKS & STYLED ELEMENTS
   ============================================ */
.link-container {
    display: flex;
    gap: 15px;
    margin-top: var(--spacing-sm);
}

.styled-link {
    display: flex;
    align-items: center;
    padding: 1px 12px;
    background-color: #758490;
    color: white;
    border-radius: var(--radius-md);
    font-weight: bold;
    text-decoration: none;
    transition: background-color var(--transition-normal), transform var(--transition-fast);
}

.styled-link i {
    margin-right: 8px;
    font-size: var(--font-lg);
}

.styled-link:hover {
    background-color: #0056b3;
    transform: scale(1.05);
    text-decoration: underline;
}

.collapsible_data {
    font-size: var(--font-base);
    text-decoration: none;
    color: inherit;
}

/* ============================================
   LOGIN PAGE
   ============================================ */

/* Animated background iframe layer */
#login-bg-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: #050d18; /* fallback while iframe loads */
}

#login-bg-iframe {
    width: 100%;
    height: 100%;
    border: none;
    pointer-events: none;
}

.login-container {
    background: transparent;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

/* Override container-padding styles on the login page */
.login-container.container-padding {
    background-color: transparent;
    border: none;
    margin: 0;
    padding: 0;
    max-width: 100%;
    width: 100%;
}

/* Transparent navbar on login page */
#login-bg-wrapper ~ .site-header .navbar-nav .nav-link,
#login-bg-wrapper ~ .site-header .navbar-nav .nav-item {
    background: transparent !important;
}

.login-container::before {
    content: '';
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 0;
    pointer-events: none;
}

/* Dark themed login card to match animated background */
.login-container .login-card {
    background: rgba(8, 18, 35, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 1px rgba(69, 176, 231, 0.15);
    border: 1px solid rgba(69, 176, 231, 0.08);
    margin-top: auto;
    margin-bottom: auto;
}

.login-container .login-card:hover {
    transform: scale(1.01);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 2px rgba(69, 176, 231, 0.2);
}

.login-container .modern-input-email,
.login-container .modern-input-password {
    background-color: rgba(5, 13, 24, 0.8);
    border: 1px solid rgba(69, 176, 231, 0.15);
    color: #e0e8f0;
}

.login-container .modern-input-email:focus,
.login-container .modern-input-password:focus {
    border-color: #45B0E7;
    box-shadow: 0 0 0 2px rgba(69, 176, 231, 0.2);
    background-color: rgba(5, 13, 24, 0.95);
}

.login-container .modern-label {
    color: rgba(200, 215, 230, 0.8);
}

.login-container .form-check-label {
    color: rgba(200, 215, 230, 0.7);
}

.login-container .form-check-input {
    background-color: rgba(5, 13, 24, 0.8);
    border-color: rgba(69, 176, 231, 0.2);
}

.login-container .form-check-input:checked {
    background-color: #005498;
    border-color: #45B0E7;
}

.login-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.login-header h2 {
    color: #e0e8f0;
    margin-bottom: var(--spacing-sm);
}

.login-header .text-muted {
    color: rgba(200, 215, 230, 0.5) !important;
}

/* Override all Bootstrap .text-muted within login pages */
.login-container .text-muted {
    color: rgba(200, 215, 230, 0.5) !important;
}

.login-footer {
    text-align: center;
    margin-top: 25px;
}

.login-footer a {
    color: #45B0E7;
    text-decoration: none;
    transition: color var(--transition-normal);
}

.login-footer a:hover {
    color: var(--color-accent-orange);
}

.forgot-password {
    margin-bottom: var(--spacing-md);
}

.register-link {
    color: rgba(200, 215, 230, 0.6);
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(69, 176, 231, 0.1);
}

/* ============================================
   PROFILE & USER
   ============================================ */
.nav-link img {
    border: 2px solid var(--color-primary-blue);
    transition: border-color var(--transition-fast);
}

.nav-link:hover img {
    border-color: var(--color-bg-content);
}

.account-img {
    height: 125px;
    width: 125px;
    margin-right: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.account-heading {
    font-size: 2.5rem;
    color: var(--color-dark-gray);
}

[data-theme="dark"] .account-heading {
    color: var(--color-text-heading);
}

[data-theme="dark"] .text-muted {
    color: var(--color-text-light) !important;
}

.article-img {
    height: 65px;
    width: 65px;
    margin-right: var(--spacing-lg);
}

.article-title {
    color: var(--color-text-heading);
}

a.article-title:hover {
    color: #428bca;
    text-decoration: none;
}

.article-content {
    white-space: pre-line;
}

.article-metadata {
    padding-bottom: 1px;
    margin-bottom: 4px;
    border-bottom: 1px solid #e3e3e3;
}

.article-metadata a:hover {
    color: var(--color-text-body);
    text-decoration: none;
}

.article-svg {
    width: 25px;
    height: 25px;
    vertical-align: middle;
}

/* ============================================
   LOADER & LOADING STATES
   ============================================ */
.loader {
    display: none;
    border: 16px solid #f3f3f3;
    border-top: 16px solid var(--color-primary-blue);
    border-radius: var(--radius-round);
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
    left: 58.5%;
    position: absolute;
    z-index: 1;
    top: 25%;
    margin: -76px 0 0 -76px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loading-overlay .spinner-border {
    width: 3rem;
    height: 3rem;
    color: #ffffff !important;
}

.loading-spinner {
    border: 8px solid #f3f3f3;
    border-top: 8px solid var(--color-primary-blue);
    border-radius: var(--radius-round);
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.bg-steel {
    background-color: var(--color-steel);
}

.bg-dark-blue {
    background-color: var(--color-dark-blue);
}

.bg-primary-blue {
    background-color: var(--color-primary-blue);
}

.bg-dark-gray {
    background-color: var(--color-dark-gray);
}

.bg-white {
    background-color: var(--color-bg-content);
}

.bg-light {
    background-color: var(--color-bg-light);
}

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

.text-dark-blue {
    color: var(--color-dark-blue);
}

.text-white {
    color: var(--color-bg-content);
}

.text-light {
    color: var(--color-text-light);
}

.thin-text {
    font-weight: 300;
}

.italic-text {
    font-style: italic;
    color: var(--color-primary-blue);
}

.nopadding {
    padding: 0 !important;
    margin: 0 !important;
}

.auto {
    height: 100%;
}

.auto-width {
    width: 100%;
    margin: 0;
}

.close_row {
    height: 18px;
}

.file-count {
    font-size: 0.9em;
    opacity: 0.8;
}

.section_headers_main {
    background-color: var(--color-bg-content);
    margin-top: 1px;
    margin-bottom: var(--spacing-sm);
    text-align: left;
    padding-left: var(--spacing-xs);
}

.statment_body_valory {
    background-color: var(--color-bg-content);
}

.list-group-mine .list-group-item {
    background: var(--color-dark-gray);
    border-color: var(--color-dark-gray);
    color: var(--color-bg-content);
}

.list-group-mine .list-group-item:hover {
    background-color: var(--color-primary-blue);
    border-color: #2b2d35;
}

/* ============================================
   SPECIAL ELEMENTS
   ============================================ */
#refreshed_statement {
    display: none;
}

/* ============================================
   RESPONSIVE UTILITIES
   ============================================ */
@media (max-width: 768px) {
    body {
        margin-top: 3rem;
    }

    .sidebar-menu {
        width: 200px;
    }

    .content-section {
        width: 200px;
    }

    .container-padding {
        min-height: auto;
    }
}

/* ============================================
   ADDITIONAL COMPONENT CLASSES
   (Extracted from inline styles)
   ============================================ */

/* Dark Header Pattern */
.header-dark {
    background-color: var(--color-dark-blue);
    color: var(--color-text-light);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

/* Options Box Pattern */
.options-box {
    background-color: var(--color-bg-content);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
}

.options-header {
    font-weight: bold;
    font-size: var(--font-lg);
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-heading);
}

.options-content {
    color: var(--color-text-body);
}

.title-box {
    padding: var(--spacing-md);
}

/* Search Container */
.search-container {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    align-items: center;
}

.search-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-md);
}

.search-button {
    padding: 8px 16px;
    background-color: var(--color-primary-blue);
    color: var(--color-bg-content);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.search-button:hover {
    background-color: var(--color-dark-gray);
}

/* Data Section (for critical_missing_db style) */
.data-section {
    background-color: var(--color-bg-content);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

.data-section h3 {
    color: var(--color-dark-blue);
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-xl);
}

/* Code Display */
.code-display {
    background-color: #f5f5f5;
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-family: 'Courier New', monospace;
    font-size: var(--font-sm);
    overflow-x: auto;
}

/* Details Panel */
.details-panel {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.details-header {
    background-color: var(--color-table-header);
    padding: var(--spacing-sm);
    font-weight: bold;
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-sm);
}

/* Chart Container */
.chart-container {
    position: relative;
    height: 400px;
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    background-color: var(--color-bg-content);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.chart-container-small {
    height: 300px;
}

.chart-container-large {
    position: relative;
    height: 500px;
}

.chart-canvas-full {
    width: 100%;
    height: 100%;
}

.card-body-no-padding {
    padding: 0;
}

/* Statement Display */
.statement-display {
    margin-bottom: var(--spacing-lg);
}

.statement-row {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid var(--color-border);
}

.statement-label {
    font-weight: 500;
    color: var(--color-text-heading);
}

.statement-value {
    color: var(--color-text-body);
}

/* Currency Sign */
.currency-sign {
    font-weight: bold;
    margin-right: 2px;
}

/* Status Indicators */
.status-success {
    color: var(--color-success);
    font-weight: bold;
}

.status-error {
    color: var(--color-danger);
    font-weight: bold;
}

.status-warning {
    color: var(--color-warning);
    font-weight: bold;
}

.status-info {
    color: var(--color-info);
    font-weight: bold;
}

/* Badge Styles */
.badge-primary {
    background-color: var(--color-primary-blue);
    color: var(--color-bg-content);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: var(--font-xs);
    font-weight: 500;
}

.badge-success {
    background-color: var(--color-success);
    color: var(--color-bg-content);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: var(--font-xs);
    font-weight: 500;
}

.badge-danger {
    background-color: var(--color-danger);
    color: var(--color-bg-content);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: var(--font-xs);
    font-weight: 500;
}

/* Modal Overrides */
.modal-header-dark {
    background-color: var(--color-dark-blue);
    color: var(--color-text-light);
}

.modal-content-standard {
    border-radius: var(--radius-lg);
    border: none;
    box-shadow: var(--shadow-lg);
}

/* Table Variations */
.table-hover tbody tr:hover {
    background-color: var(--color-bg-light);
    cursor: pointer;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.02);
}

/* Form Styles */
.form-group {
    margin-bottom: var(--spacing-md);
}

.form-label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: 500;
    color: var(--color-text-heading);
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-md);
    transition: border-color var(--transition-fast);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--color-primary-blue);
    outline: none;
    box-shadow: 0 0 0 2px rgba(67, 195, 242, 0.1);
}

/* Width Utilities */
.w-100 { width: 100%; }
.w-75 { width: 75%; }
.w-50 { width: 50%; }
.w-25 { width: 25%; }
.w-auto { width: auto; }

/* Display Utilities */
.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }

/* Text Alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Margin Utilities */
.m-0 { margin: 0; }
.m-1 { margin: var(--spacing-xs); }
.m-2 { margin: var(--spacing-sm); }
.m-3 { margin: var(--spacing-md); }
.m-4 { margin: var(--spacing-lg); }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--spacing-xs); }
.mt-2 { margin-top: var(--spacing-sm); }
.mt-3 { margin-top: var(--spacing-md); }
.mt-4 { margin-top: var(--spacing-lg); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--spacing-xs); }
.mb-2 { margin-bottom: var(--spacing-sm); }
.mb-3 { margin-bottom: var(--spacing-md); }
.mb-4 { margin-bottom: var(--spacing-lg); }

/* Padding Utilities */
.p-0 { padding: 0; }
.p-1 { padding: var(--spacing-xs); }
.p-2 { padding: var(--spacing-sm); }
.p-3 { padding: var(--spacing-md); }
.p-4 { padding: var(--spacing-lg); }

.pt-0 { padding-top: 0; }
.pt-1 { padding-top: var(--spacing-xs); }
.pt-2 { padding-top: var(--spacing-sm); }
.pt-3 { padding-top: var(--spacing-md); }
.pt-4 { padding-top: var(--spacing-lg); }

.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: var(--spacing-xs); }
.pb-2 { padding-bottom: var(--spacing-sm); }
.pb-3 { padding-bottom: var(--spacing-md); }
.pb-4 { padding-bottom: var(--spacing-lg); }

/* Flex Utilities */
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.align-start { align-items: flex-start; }
.align-center { align-items: center; }
.align-end { align-items: flex-end; }

/* Gap Utilities */
.gap-1 { gap: var(--spacing-xs); }
.gap-2 { gap: var(--spacing-sm); }
.gap-3 { gap: var(--spacing-md); }
.gap-4 { gap: var(--spacing-lg); }

/* Shadow Utilities */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-none { box-shadow: none; }

/* Border Utilities */
.border { border: 1px solid var(--color-border); }
.border-top { border-top: 1px solid var(--color-border); }
.border-bottom { border-bottom: 1px solid var(--color-border); }
.border-none { border: none; }

.rounded { border-radius: var(--radius-md); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }

/* Cursor Utilities */
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }

/* Overflow Utilities */
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-scroll { overflow: scroll; }

/* Position Utilities */
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-fixed { position: fixed; }
.position-sticky { position: sticky; }

/* ============================================
   SPECIALIZED PAGE STYLES
   ============================================ */

/* Frost Main Application & Lead Scoring Specific Styles */
.section-card {
    background: var(--color-bg-content);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.section-header {
    color: var(--color-dark-blue);
    font-weight: 500;
}

.options-box-frost {
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    margin-left: auto;
    width: fit-content;
    min-width: 300px;
}

.modern-input-pencil {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: var(--spacing-lg);
    border: 1px solid #ddd;
    border-radius: var(--radius-lg);
    font-size: var(--font-md);
    transition: all var(--transition-normal);
    padding-left: 40px;
    background-image: url('../static/images/pencil.png');
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: 20px;
}

.modern-input-pencil:focus {
    border-color: var(--color-primary-blue);
    outline: none;
    box-shadow: 0 0 0 2px rgba(67, 195, 242, 0.2);
}

.upload-container {
    position: relative;
    display: inline-block;
}

.files-container li:last-child {
    border-bottom: none !important;
}

/* Lead Scoring Specific Styles */
.search-spinner {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}

.spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
    color: var(--color-dark-blue);
}

.description-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Card Styling */
.card {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.card-header {
    background-color: var(--color-bg-light);
    border-bottom: 1px solid #eee;
    padding: var(--spacing-md) var(--spacing-lg);
}

.card-header h4 {
    margin: 0;
}

.card-body {
    padding: var(--spacing-lg);
}

.table {
    margin-bottom: 0;
}

.table th {
    border-top: none;
    font-weight: 500;
    color: var(--color-text-gray);
}

/* County Toggle Styles */
.county-toggle {
    color: var(--color-dark-blue);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.county-toggle:hover {
    color: var(--color-primary-blue);
    text-decoration: none;
}

.county-list {
    max-height: 200px;
    overflow-y: auto;
    padding: var(--spacing-xs) 0;
}

.county-item {
    padding: 3px 0;
    color: var(--color-text-body);
    font-size: var(--font-md);
}

.fa-chevron-down {
    transition: transform var(--transition-fast);
}

.county-toggle[aria-expanded="true"] .fa-chevron-down {
    transform: rotate(180deg);
}

/* Print Styles */
@media print {
    @page {
        margin: 1.5cm;
        size: portrait;
    }

    body {
        background: white !important;
    }

    .valory_styled_buttons,
    .btn-primary,
    .btn-secondary,
    form,
    .search-container,
    nav,
    footer {
        display: none !important;
    }

    .login-card {
        margin: 0 !important;
        padding: var(--spacing-lg) !important;
        box-shadow: none !important;
        border: none !important;
    }

    .login-card[style*="background-color: #215b85"] {
        background-color: var(--color-dark-blue) !important;
        color: white !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .card {
        break-inside: avoid;
        border: 1px solid #ddd !important;
        margin-bottom: var(--spacing-lg) !important;
    }

    .row {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    .table {
        width: 100% !important;
        border-collapse: collapse !important;
    }

    .table th,
    .table td {
        padding: 8px !important;
        border: 1px solid #ddd !important;
    }

    #radarChart {
        height: 500px !important;
        width: 100% !important;
        max-width: 800px !important;
        margin: 0 auto !important;
        page-break-inside: avoid;
    }

    .collapse {
        display: block !important;
        height: auto !important;
    }

    .county-toggle .fa-chevron-down {
        display: none !important;
    }

    .county-list {
        max-height: none !important;
        overflow: visible !important;
        columns: 2;
        padding: var(--spacing-sm) 0 !important;
    }

    .county-item {
        break-inside: avoid;
        padding: 3px var(--spacing-sm) !important;
    }

    * {
        color: black !important;
    }

    .description-text,
    .options-header {
        color: white !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}

/* ============================================
   DATABASE MANAGEMENT PAGES
   ============================================ */
.btn-igneous {
    background-color: var(--color-dark-gray);
    color: var(--color-light-bg);
    transition: background-color var(--transition-normal), transform var(--transition-fast);
}

.btn-igneous:hover {
    background-color: var(--color-accent-orange);
    color: var(--color-light-bg);
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

.btn-igneous-danger {
    background-color: var(--color-light-bg);
    color: var(--color-dark-gray);
    border: 1px solid var(--color-dark-gray);
    transition: background-color var(--transition-normal), transform var(--transition-fast);
}

.btn-igneous-danger:hover {
    background-color: var(--color-accent-orange);
    color: var(--color-light-bg);
    border-color: var(--color-accent-orange);
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

.client-form-input,
.payor-form-input {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: var(--spacing-lg);
    border: 1px solid #ddd;
    border-radius: var(--radius-lg);
    font-size: var(--font-md);
    transition: all var(--transition-normal);
}

.client-form-input:focus,
.payor-form-input:focus {
    border-color: var(--color-primary-blue);
    outline: none;
    box-shadow: 0 0 0 2px rgba(67, 195, 242, 0.2);
}

.search-container {
    position: relative;
}

.search-container input {
    padding-left: 35px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>');
    background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 15px;
    background-color: white;
}

.search-container input:focus {
    box-shadow: 0 0 0 2px rgba(67, 195, 242, 0.2);
    border-color: var(--color-primary-blue);
}

.highlight {
    background-color: #fff3cd;
}

.login-card-full-width {
    max-width: none;
    transform: none !important;
    transition: none !important;
    overflow: visible;
}

.form-no-margin {
    margin-bottom: 0;
}

.search-input-width {
    width: 250px;
    margin-bottom: 0 !important;
}

.tenant-select {
    min-width: 150px;
    height: 38px;
}

.btn-auto-width {
    width: auto;
    padding: 8px 20px;
}

.actions-column {
    width: 150px;
}

.alert-fixed {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1050;
    min-width: 300px;
}

/* ============================================
   MAIN APPLICATION / FILE PROCESSING PAGES
   ============================================ */
.header-card-dark-blue {
    max-width: none;
    background-color: var(--color-dark-blue);
    transform: none !important;
    transition: none !important;
}

.header-dark-blue {
    background-color: var(--color-dark-blue);
    transform: none !important;
    transition: none !important;
}

.no-transform {
    max-width: none;
    transform: none !important;
    transition: none !important;
}

.login-card-full-width {
    max-width: none;
    transform: none !important;
    transition: none !important;
    overflow: visible;
}

.header-title-white {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: var(--spacing-md);
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.header-description-white {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

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

.w-30 {
    width: 30%;
}

.options-header {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: var(--spacing-md);
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.options-content {
    color: rgba(255, 255, 255, 0.9);
}

.options-box {
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    margin-left: auto;
    width: fit-content;
    min-width: 300px;
}

.options-divider {
    width: 1px;
    background-color: rgba(255, 255, 255, 0.2);
    margin: 0 var(--spacing-md);
}

.description-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.modern-label-white {
    color: #ffffff;
}

.form-input-full-width {
    width: 100%;
    margin-bottom: 0;
}

.upload-container {
    position: relative;
    display: inline-block;
}

.custom-file-upload {
    display: inline-block;
    cursor: pointer;
    margin-bottom: 0 !important;
}

.btn-min-width {
    margin: 0;
    min-width: 150px;
}

.files-container {
    background: var(--color-bg-light);
    min-height: 200px;
    border: 1px solid #dee2e6;
    transition: all var(--transition-normal);
}

.files-container:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.files-container li {
    transition: background-color var(--transition-fast);
}

.files-container li:hover {
    background-color: #fff;
}

.files-container li:last-child {
    border-bottom: none !important;
}

.min-height-750 {
    min-height: 750px;
}

.statement-header-left {
    padding: 3px;
    text-align: left;
}

.file-info-list {
    font-size: 12px;
}

.file-name-failed {
    color: red;
}

.error-text-red {
    color: red;
}

.modern-input-home {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: var(--spacing-lg);
    border: 1px solid #ddd;
    border-radius: var(--radius-lg);
    font-size: var(--font-md);
    transition: all var(--transition-normal);
    padding-left: 40px;
    background-image: url('../static/images/home.png');
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: 20px;
}

.modern-input-home:focus {
    border-color: var(--color-primary-blue);
    outline: none;
    box-shadow: 0 0 0 2px rgba(67, 195, 242, 0.2);
}

#processingText {
    margin-top: 1rem;
    font-size: 1.2rem;
}

/* ============================================
   LEAD SCORING / MARKETING PAGES
   ============================================ */
.search-spinner {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}

.spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
    color: var(--color-dark-blue);
}

.modern-label-dark {
    color: #333;
}

.owner-header {
    display: flex;
    align-items: center;
    gap: 15px;
}

.owner-location {
    font-size: 0.8em;
    color: #666;
    font-weight: normal;
}

.chart-height-600 {
    height: 600px;
}

.county-toggle {
    color: var(--color-dark-blue);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.county-toggle:hover {
    color: var(--color-primary-blue);
    text-decoration: none;
}

.county-list {
    max-height: 200px;
    overflow-y: auto;
    padding: 5px 0;
}

.county-item {
    padding: 3px 0;
    color: #333;
    font-size: 14px;
}

.fa-chevron-down {
    transition: transform 0.2s;
}

.county-toggle[aria-expanded="true"] .fa-chevron-down {
    transform: rotate(180deg);
}

/* Print styles for lead scoring reports */
@media print {
    @page {
        margin: 1.5cm;
        size: portrait;
    }

    body {
        background: white !important;
    }

    .valory_styled_buttons,
    form,
    .search-container,
    nav,
    footer {
        display: none !important;
    }

    .login-card {
        margin: 0 !important;
        padding: 20px !important;
        box-shadow: none !important;
        border: none !important;
    }

    .header-card-dark-blue {
        background-color: var(--color-dark-blue) !important;
        color: white !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .card {
        break-inside: avoid;
        border: 1px solid #ddd !important;
        margin-bottom: 20px !important;
    }

    .row {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    .table {
        width: 100% !important;
        border-collapse: collapse !important;
    }

    .table th,
    .table td {
        padding: 8px !important;
        border: 1px solid #ddd !important;
    }

    #radarChart {
        height: 500px !important;
        width: 100% !important;
        max-width: 800px !important;
        margin: 0 auto !important;
        page-break-inside: avoid;
    }

    .collapse {
        display: block !important;
        height: auto !important;
    }

    .county-toggle .fa-chevron-down {
        display: none !important;
    }

    .county-list {
        max-height: none !important;
        overflow: visible !important;
        columns: 2;
        padding: 10px 0 !important;
    }

    .county-item {
        break-inside: avoid;
        padding: 3px 10px !important;
    }

    * {
        color: black !important;
    }

    .description-text,
    .options-header {
        color: white !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}

/* Database Management Form Inputs */
.db-form-input,
.product-form-input,
.gl-form-input,
.deduction-form-input,
.expense-form-input,
.ba-form-input,
.interest-form-input {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: var(--spacing-lg);
    border: 1px solid #ddd;
    border-radius: var(--radius-lg);
    font-size: var(--font-md);
    transition: all var(--transition-normal);
}

.db-form-input:focus,
.product-form-input:focus,
.gl-form-input:focus,
.deduction-form-input:focus,
.expense-form-input:focus,
.ba-form-input:focus,
.interest-form-input:focus {
    border-color: var(--color-primary-blue);
    outline: none;
    box-shadow: 0 0 0 2px rgba(67, 195, 242, 0.2);
}

/* Card Margin Variant */
.login-card-margin-20 {
    margin: 0 20px;
}

/* ============================================
   REPORT TEMPLATE STYLES
   ============================================ */

/* Form Select (Reports) */
.form-select-dark {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: var(--font-md);
    width: 100%;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8.825L1.175 4 2.238 2.938 6 6.7l3.763-3.762L10.825 4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.form-select-dark:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
}

.form-select-dark option {
    background-color: var(--color-dark-blue);
    color: white;
    padding: 8px;
}

.form-select-dark option:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.form-label-white {
    color: #ffffff;
}

/* Table Sorting */
.sortable {
    cursor: pointer;
    user-select: none;
}

.sortable:hover {
    background-color: rgba(33, 91, 133, 0.08) !important;
}

.sortable i {
    font-size: 0.8rem;
    transition: transform var(--transition-fast);
}

.sortable:hover i {
    color: var(--color-dark-blue) !important;
}

/* Table Header Background */
.table-header-light {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
}

/* Report Table Styles */
.report-table {
    table-layout: fixed;
    width: 100%;
}

.report-table th {
    font-weight: 500;
    color: #495057;
    font-size: 0.95rem;
}

.report-table td {
    color: #333;
    font-size: 0.95rem;
    vertical-align: middle;
}

.report-table tbody tr:hover {
    background-color: rgba(33, 91, 133, 0.04);
}

/* Collapse Row Styles */
.collapse-row {
    background-color: #fafbfc !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}

.collapse-row td {
    font-size: 0.8rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

/* Chart Wrapper */
.chart-wrapper {
    background-color: white;
    padding: 1rem;
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.chart-canvas-300 {
    width: 100%;
    height: 300px;
}

.chart-canvas-400 {
    width: 100%;
    height: 400px;
}

.chart-canvas-440 {
    width: 100%;
    height: 440px;
}

/* Color Utilities for Reports */
.text-positive {
    color: #28a745;
}

.text-negative {
    color: #dc3545;
}

.text-neutral {
    color: #333;
}

.text-dark-blue {
    color: var(--color-dark-blue);
}

.text-igneous-primary {
    color: var(--color-primary-blue);
}

.text-gray-light {
    color: #6c757d;
}

/* Detail Row Text */
.detail-row-label {
    color: var(--color-dark-blue);
    padding-left: 2.5rem;
}

/* KPI Specific Styles */
.kpi-sidebar,
.kpi-chart-container,
.kpi-selector,
.audit-sidebar,
.audit-chart-container {
    background: var(--color-bg-content);
    border: 1px solid #e0e0e0;
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
}

.kpi-sidebar,
.kpi-selector,
.audit-sidebar {
    height: 500px;
}

.kpi-chart-container,
.audit-chart-container {
    width: 100%;
    height: 500px;
    margin-bottom: var(--spacing-lg);
}

.kpi-option {
    display: block;
    padding: 8px 12px;
    margin: 3px 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 1px solid transparent;
    font-size: var(--font-md);
    font-weight: normal;
    background: var(--color-bg-light);
}

.kpi-option:hover {
    background: #e9ecef;
    border-color: #dee2e6;
}

.kpi-option.active {
    background: #e3f2fd;
    border-color: #2196f3;
}

.kpi-color-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: var(--radius-round);
    margin-right: 8px;
    vertical-align: middle;
}

/* Audit Header */
.audit-header {
    background: var(--color-dark-blue);
    color: white;
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-lg);
}

/* Audit Stats */
.audit-stats {
    background: var(--color-bg-content);
    border: 1px solid #e0e0e0;
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--spacing-lg);
}

.stat-card {
    text-align: center;
    padding: var(--spacing-md);
    border-radius: 6px;
    background: var(--color-bg-light);
}

.stat-number {
    font-size: 2rem;
    font-weight: bold;
    color: var(--color-primary-blue);
}

.stat-label {
    font-size: 0.9rem;
    color: #6c757d;
    margin-top: var(--spacing-xs);
}

/* Cell Color Classes (KPI Tables) */
.cell-blue {
    background-color: var(--color-primary-blue) !important;
    color: #ffffff !important;
    font-weight: 500;
}

.cell-white {
    background-color: #ffffff !important;
    color: var(--color-text-primary) !important;
    font-weight: 500;
}

/* Export Row Styles (igneous_exports.html) */
.export-row {
    align-items: center;
}

.export-checkbox-col {
    align-self: center;
    width: 10px;
}

.export-label-col {
    vertical-align: middle;
}

/* Revenue Report Specific Styles */
.revenue-totals-row {
    background-color: #f8f9fa;
    font-weight: 500;
}

.revenue-totals-row td {
    color: #333;
}

.revenue-client-row {
    background-color: #ffffff;
}

.revenue-client-row:hover {
    background-color: #f8f9fa;
}

.revenue-detail-row td {
    font-size: 0.8rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    background-color: #fafbfc !important;
}

.revenue-totals-row-distinct {
    background-color: rgba(33, 91, 133, 0.1) !important;
    font-weight: 500;
}

.revenue-totals-row-distinct:hover {
    background-color: rgba(33, 91, 133, 0.15) !important;
}

.revenue-table td:last-child,
.revenue-table th:last-child {
    background-color: rgba(33, 91, 133, 0.03);
    border-left: 1px solid rgba(33, 91, 133, 0.1);
}

.revenue-table .revenue-totals-row-distinct td:last-child {
    background-color: rgba(33, 91, 133, 0.1) !important;
}

.revenue-table .revenue-totals-row-distinct:hover td:last-child {
    background-color: rgba(33, 91, 133, 0.15) !important;
}

.revenue-expand-btn {
    color: var(--color-dark-blue);
}

.chart-row-wrapper {
    padding: 1rem;
}

/* Border utilities */
.border-bottom-none {
    border-bottom: none;
}

/* KPI Description Text */
.kpi-description {
    font-size: 13px;
    color: #6c757d;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e0e0e0;
}

/* Dropdown Menu Scroll */
.dropdown-menu-scroll {
    max-height: 300px;
    overflow-y: auto;
}

/* Table Scroll Container */
.table-scroll-400 {
    height: 400px;
    overflow: auto;
}

/* Allocation Cards (statement_a_deduct.html) */
.allocation-card {
    border-left: solid var(--color-border);
    border-width: thin;
    width: 400px;
}

.allocation-header {
    font-size: var(--font-base);
    padding: 1px;
    font-weight: bold;
    text-align: center;
}

.allocation-header-missing {
    font-size: var(--font-base);
    padding: 1px;
    font-weight: bold;
    text-align: center;
    background-color: indianred;
}

/* ============================================
   DATA VIEW TEMPLATE STYLES
   ============================================ */

/* Content Section for Collapsible Areas */
.content {
    padding: 0 5px;
    overflow: hidden;
    background-color: #f1f1f1;
}

/* Currency Sign */
.currSign:before {
    content: '$';
}

/* Font Weight Classes */
.font-weight-bold {
    font-weight: bold;
}

/* Font Monospace */
.font-monospace {
    font-family: monospace;
}

/* Font Size Small */
.font-size-small {
    font-size: small;
}

/* Table Styles for Data Views */
.table {
    border-collapse: collapse;
    width: 100%;
}

.table th {
    position: sticky;
    top: 0;
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    padding: 12px 8px;
    white-space: nowrap;
}

.table td {
    padding: 8px;
    border: 1px solid #dee2e6;
    white-space: nowrap;
}

.table tbody tr:hover {
    background-color: rgba(0,0,0,.075);
}

/* Pagination Styles */
.pagination {
    margin: 20px 0;
    display: flex;
    justify-content: center;
}

.pagination .page-item {
    margin: 0 5px;
}

.pagination .page-link {
    color: #333;
    border: 1px solid #dee2e6;
    padding: 8px 12px;
    text-decoration: none;
}

.pagination .page-item.active .page-link {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}

.pagination .page-link:hover {
    background-color: #e9ecef;
}

/* ============================================
   1099 FORMS PAGE
   ============================================ */
.status-item {
    text-align: center;
    padding: 10px 20px;
}

.status-value {
    font-size: 2rem;
    font-weight: 500;
    margin-bottom: 5px;
}

.status-label {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
}

/* Revenue Report Table Utilities */
.border-bottom-none {
    border-bottom: none !important;
}

.revenue-subtotal {
    border-bottom: none;
    color: var(--color-dark-blue);
    padding-left: 2.5rem;
}

.revenue-total {
    color: var(--color-dark-blue);
    padding-left: 2.5rem;
}

.table-col-client {
    width: 200px;
}

.chart-container {
    width: 100%;
    height: 300px;
}

.card-white {
    background-color: white;
    padding: 1rem;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* ============================================
   DASHBOARD SPECIFIC STYLES
   ============================================ */

/* Dashboard Header */
.dashboard-header-card {
    background: linear-gradient(135deg, #43C3F2 0%, #215b85 100%);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: 0 8px 24px rgba(67, 195, 242, 0.3);
    border: none;
}

.dashboard-header-content {
    color: white;
}

.dashboard-title {
    font-size: 28px;
    font-weight: 700;
    color: white;
    margin: 0;
}

.dashboard-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 400;
}

/* Filter Card */
.dashboard-filters-card {
    background: var(--color-bg-content);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
}

.filter-label {
    font-weight: 600;
    color: var(--color-text-heading);
    margin-bottom: 0.5rem;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dashboard-select {
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    font-size: 14px;
    transition: all var(--transition-fast);
    background-color: var(--color-bg-light);
    color: var(--color-text-body);
}

.dashboard-select:focus {
    border-color: var(--color-primary-blue);
    box-shadow: 0 0 0 3px rgba(67, 195, 242, 0.1);
    background-color: var(--color-bg-content);
}

/* KPI Cards */
.dashboard-kpi-card {
    border-radius: var(--radius-lg);
    padding: 0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    border: none;
    overflow: hidden;
    transition: all var(--transition-normal);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.dashboard-kpi-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.kpi-header {
    padding: 1.5rem;
    text-align: center;
}

.kpi-icon {
    font-size: 32px;
    color: white;
    display: inline-block;
}

.kpi-body {
    background: var(--color-bg-content);
    padding: 1.5rem;
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.kpi-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-medium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
}

.kpi-value {
    font-size: 32px;
    font-weight: 700;
    margin: 0;
}

/* KPI Card Color Variants */
.kpi-card-blue .kpi-header {
    background: linear-gradient(135deg, #43C3F2 0%, #2a9ac8 100%);
}

.kpi-card-blue .kpi-value {
    color: #43C3F2;
}

.kpi-card-orange .kpi-header {
    background: linear-gradient(135deg, #f27243 0%, #e65a2f 100%);
}

.kpi-card-orange .kpi-value {
    color: #f27243;
}

.kpi-card-teal .kpi-header {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
}

.kpi-card-teal .kpi-value {
    color: #17a2b8;
}

/* Chart Cards */
.dashboard-chart-card {
    background: var(--color-bg-content);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    overflow: hidden;
    max-width: 100%;
}

.chart-card-header {
    background: linear-gradient(135deg, #215b85 0%, #1a4766 100%);
    padding: 1.25rem 1.5rem;
    border-bottom: none;
}

.chart-card-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: white;
}

.chart-card-body {
    padding: 1.5rem;
    max-width: 100%;
    overflow: hidden;
}

/* Chart Containers */
.chart-container-small {
    position: relative;
    height: 200px;
    width: 100%;
}

.chart-container-medium {
    position: relative;
    height: 350px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.chart-container-large {
    position: relative;
    height: 500px;
    width: 100%;
    max-width: 100%;
    padding: 1rem;
    overflow: hidden;
}

.chart-canvas-full {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
}

/* Table overflow prevention */
.table-responsive {
    overflow-x: auto;
    overflow-y: visible;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}

.table-container {
    overflow-x: auto;
    overflow-y: visible;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}

/* Prevent Bootstrap row overflow */
.row {
    max-width: 100%;
}

.col,
.col-md-4,
.col-md-6,
.col-md-8,
.col-md-12,
[class*="col-"] {
    max-width: 100%;
}

/* Dark Theme Dashboard Overrides */
[data-theme="dark"] .dashboard-header-card {
    background: linear-gradient(135deg, #2a9ac8 0%, #1a4766 100%);
    box-shadow: 0 8px 24px rgba(67, 195, 242, 0.2);
}

[data-theme="dark"] .dashboard-filters-card {
    background: var(--color-bg-content);
    border-color: var(--color-border);
}

[data-theme="dark"] .filter-label {
    color: var(--color-text-heading);
}

[data-theme="dark"] .dashboard-select {
    background-color: var(--color-bg-light);
    color: var(--color-text-body);
    border-color: var(--color-border);
}

[data-theme="dark"] .dashboard-kpi-card {
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

[data-theme="dark"] .dashboard-kpi-card:hover {
    box-shadow: 0 8px 24px rgba(67, 195, 242, 0.2);
}

[data-theme="dark"] .kpi-body {
    background: var(--color-bg-content);
}

[data-theme="dark"] .kpi-card-blue .kpi-value {
    color: #5ac8f5;
}

[data-theme="dark"] .kpi-card-orange .kpi-value {
    color: #f58a5f;
}

[data-theme="dark"] .kpi-card-teal .kpi-value {
    color: #20c1db;
}

[data-theme="dark"] .dashboard-chart-card {
    background: var(--color-bg-content);
    border-color: var(--color-border);
    box-shadow: var(--shadow-md);
}

[data-theme="dark"] .chart-card-header {
    background: linear-gradient(135deg, #1a3a52 0%, #0f2233 100%);
}

/* Dark theme for Bootstrap cards */
[data-theme="dark"] .card {
    background-color: var(--color-bg-content);
    border-color: var(--color-border);
    color: var(--color-text-body);
}

[data-theme="dark"] .card-header {
    background-color: var(--color-bg-container);
    border-bottom-color: var(--color-border);
    color: var(--color-text-heading);
}

[data-theme="dark"] .card-body {
    background-color: var(--color-bg-content);
}

/* Dark theme for tables */
[data-theme="dark"] .table {
    color: #ffffff;
    border-color: var(--color-border);
    background-color: transparent;
}

[data-theme="dark"] .table th {
    background-color: var(--color-bg-container);
    border-color: var(--color-border);
    color: #ffffff;
}

[data-theme="dark"] .table td {
    border-color: var(--color-border);
    background-color: rgba(255, 255, 255, 0.03);
    color: #ffffff;
}

[data-theme="dark"] .table tbody tr {
    background-color: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .table tbody tr:hover {
    background-color: rgba(67, 195, 242, 0.15);
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(even) {
    background-color: rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd):hover {
    background-color: rgba(67, 195, 242, 0.15);
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(even):hover {
    background-color: rgba(67, 195, 242, 0.15);
}

[data-theme="dark"] .table-bordered {
    border-color: var(--color-border);
}

[data-theme="dark"] .table-bordered td,
[data-theme="dark"] .table-bordered th {
    border-color: var(--color-border);
}

/* Dark theme for login cards */
[data-theme="dark"] .login-card {
    background-color: var(--color-bg-content);
    border-color: var(--color-border);
}

[data-theme="dark"] .login-card .form-control {
    background-color: var(--color-bg-light);
    border-color: var(--color-border);
    color: var(--color-text-body);
}

[data-theme="dark"] .login-card .form-control:focus {
    background-color: var(--color-bg-content);
    border-color: var(--color-primary-blue);
    color: var(--color-text-body);
}

[data-theme="dark"] .login-card .form-label {
    color: var(--color-text-body);
}

/* Dark theme autofill override */
[data-theme="dark"] .form-control:-webkit-autofill,
[data-theme="dark"] .form-control:-webkit-autofill:hover,
[data-theme="dark"] .form-control:-webkit-autofill:focus,
[data-theme="dark"] .form-control:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--color-bg-light) inset !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: var(--color-border) !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* ============================================
   THEME TOGGLE SWITCH (VERTICAL)
   ============================================ */
.theme-switch {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 50px;
    min-width: 28px;
    max-width: 28px;
    min-height: 50px;
    max-height: 50px;
    cursor: pointer;
    flex-shrink: 0;
    overflow: hidden;
}

.theme-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.theme-switch .theme-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, #43C3F2 0%, #215b85 100%);
    transition: var(--transition-normal);
    border-radius: 25px;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.theme-switch .theme-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 2px;
    top: 2px;
    background-color: white;
    transition: var(--transition-normal);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.theme-switch input:checked + .theme-slider {
    background: linear-gradient(180deg, #1a1a1e 0%, #0a0a0d 100%);
}

.theme-switch input:checked + .theme-slider:before {
    transform: translateY(24px);
    background-color: #43C3F2;
    box-shadow: 0 0 8px rgba(67, 195, 242, 0.6);
}

/* ============================================
   DARK THEME
   ============================================ */
[data-theme="dark"] {
    /* Override CSS variables for dark theme */
    --color-primary-blue: #82aaff;
    --color-dark-blue: #a8c4ff;
    --color-dark-gray: #1a1a1e;
    --color-accent-orange: #ffcb6b;

    /* Dark backgrounds */
    --color-bg-body: #111114;
    --color-bg-content: #1a1a1e;
    --color-bg-light: #222226;
    --color-bg-container: #28282e;
    --color-bg-secondary: #222226;
    --color-surface: #2a2a2e;   /* raised control/button surface (dark) */
    --color-sidebar-dark: #0e0e11;

    /* Dark text colors */
    --color-text-primary: #ccd6f6;
    --color-text-body: #bdc6e0;
    --color-text: #bdc6e0;
    --color-text-heading: #e2e8ff;
    --color-text-light: #8892b0;
    --color-text-medium: #a0aac4;
    --color-text-gray: #495670;
    --color-text-muted: #8892b0;

    /* Table and borders */
    --color-table-header: #222226;
    --color-border: #2e2e34;
    --color-light-bg: #222226;
    --color-steel: #8892b0;

    /* Semantic colors for dark mode */
    --color-success: #64ffda;
    --color-danger: #f07178;
    --color-warning: #ffcb6b;
    --color-info: #c792ea;

    /* Overlay */
    --color-overlay: rgba(17, 17, 20, 0.8);

    /* Chart Palette — dark mode variants, brighter for dark backgrounds */
    --color-chart-1: #82aaff;   /* primary blue */
    --color-chart-2: #ffcb6b;   /* amber */
    --color-chart-3: #f07178;   /* coral red */
    --color-chart-4: #64ffda;   /* teal */
    --color-chart-5: #c792ea;   /* purple */
    --color-chart-6: #c3e88d;   /* lime green */
    --color-chart-7: #ff5370;   /* hot pink */
    --color-chart-8: #89ddff;   /* sky cyan */
    --color-chart-9: #e07a3a;   /* orange */
    --color-chart-10: #a8c4ff;  /* light blue */
    --color-chart-11: #4a6cf7;  /* mid blue */
    --color-chart-12: #f28e2c;  /* tangerine */
    --color-chart-13: #0d9373;  /* deep teal */
    --color-chart-14: #7c5eb8;  /* mid purple */
    --color-chart-15: #bdc6e0;  /* light text */

    /* Semantic Aliases — dark mode variants */
    --color-error-row: #f07178;
    --color-status-ok: #64ffda;
    --color-status-fail: #f07178;
    --color-kpi-accent: #82aaff;
    --color-section-heading: #c792ea;
    --color-link: #82aaff;
    --color-link-hover: #a8c4ff;
    --color-badge-new: #64ffda;
    --color-badge-pending: #ffcb6b;
    --color-highlight: #ffcb6b;

    /* Status Badge Backgrounds — dark mode: dark tinted bg + bright text */
    --color-success-bg: rgba(100, 255, 218, 0.15);
    --color-success-text: #64ffda;
    --color-danger-bg: rgba(240, 113, 120, 0.15);
    --color-danger-text: #f07178;
    --color-warning-bg: rgba(255, 203, 107, 0.15);
    --color-warning-text: #ffcb6b;
    --color-info-bg: rgba(199, 146, 234, 0.15);
    --color-info-text: #c792ea;
    --color-neutral-bg: rgba(136, 146, 176, 0.15);
    --color-neutral-text: #8892b0;
    --color-orange-bg: rgba(224, 122, 58, 0.15);
    --color-orange-text: #f4a67a;
    --color-cyan-bg: rgba(137, 221, 255, 0.15);
    --color-cyan-text: #89ddff;
    --color-purple-bg: rgba(199, 146, 234, 0.15);
    --color-purple-text: #c4a1d8;
    --color-teal-bg: rgba(100, 255, 218, 0.15);
    --color-teal-text: #76d7c4;
    /* White-on-accent text stays near-white in dark too (foreground on a fill). */
    --color-text-on-accent: #ffffff;
    /* Feedback dept accent — brighter mint for dark, distinct from success cyan. */
    --color-dept-feedback: #34d399;

    /* Contacts module accent — brighter cyan/blue chip pair for dark mode. */
    --color-contact-accent: #89ddff;
    --color-contact-accent-hover: #64c3e8;
    --color-contact-accent-bg: #1a365d;
    --color-contact-accent-text: #90cdf4;

    /* Shadows for dark mode */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 15px rgba(0,0,0,0.5);
    --shadow-lg: 0 8px 20px rgba(0,0,0,0.6);
}

/* Dark theme specific overrides */
[data-theme="dark"] body {
    background: var(--color-bg-body);
    color: var(--color-text-body);
}

/* Dark mode checkboxes and form inputs */
[data-theme="dark"] .form-check-input {
    background-color: var(--color-bg-content);
    border-color: var(--color-border);
}
[data-theme="dark"] .form-check-input:checked {
    background-color: var(--color-primary-blue);
    border-color: var(--color-primary-blue);
}
[data-theme="dark"] .form-check-input:focus {
    border-color: var(--color-primary-blue);
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--color-primary-blue) 25%, transparent);
}
[data-theme="dark"] input[type="checkbox"]:not(.form-check-input) {
    accent-color: var(--color-primary-blue);
}

[data-theme="dark"] .login-card,
[data-theme="dark"] .section-card,
[data-theme="dark"] .content-section {
    background: var(--color-bg-content);
    border-color: var(--color-border);
    box-shadow: var(--shadow-md);
}

/* Dark mode modals */
[data-theme="dark"] .modal-content {
    background: var(--color-bg-content);
    border-color: var(--color-border);
    color: var(--color-text-body);
}
[data-theme="dark"] .modal-header {
    border-bottom-color: var(--color-border);
}
[data-theme="dark"] .modal-footer {
    background: var(--color-bg-light);
    border-top-color: var(--color-border);
}

[data-theme="dark"] .header-card-dark-blue {
    background: linear-gradient(135deg, #1a3a52 0%, #0f2233 100%);
}

/* Blue Header Sections - used in file processing pages */
[data-theme="dark"] .blue-header-section {
    background: linear-gradient(135deg, #1a3a52 0%, #0f2233 100%) !important;
}

[data-theme="dark"] .blue-header-section .options-box {
    background: rgba(0, 0, 0, 0.2);
}

/* Form inputs inside blue header sections need special styling */
[data-theme="dark"] .blue-header-section .modern-input-pencil,
[data-theme="dark"] .blue-header-section .modern-input-home,
[data-theme="dark"] .blue-header-section .form-control,
[data-theme="dark"] .blue-header-section .form-select {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .blue-header-section .modern-input-pencil:focus,
[data-theme="dark"] .blue-header-section .modern-input-home:focus,
[data-theme="dark"] .blue-header-section .form-control:focus,
[data-theme="dark"] .blue-header-section .form-select:focus {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-color: var(--color-primary-blue) !important;
    box-shadow: 0 0 0 2px rgba(90, 200, 245, 0.3);
}

[data-theme="dark"] .blue-header-section .form-select option {
    background-color: #1a3a52;
    color: #ffffff;
}

[data-theme="dark"] .blue-header-section .status-label {
    color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .blue-header-section .phase-description,
[data-theme="dark"] .blue-header-section .text-muted {
    color: rgba(255, 255, 255, 0.8) !important;
}

[data-theme="dark"] .sidebar-fixed {
    background-color: var(--color-sidebar-dark);
    border-right: 1px solid var(--color-border);
}

/* The collapse toggle is now a flat row in .sidebar-footer (v0.704), not a
   floating circular button — it inherits the footer's --color-sidebar-dark
   background and the .sidebar-footer-item:hover affordance in both themes, so
   the old dark-mode blue-fill + glow rules were removed to avoid a stray blue
   row in dark mode. */

[data-theme="dark"] .collapsible_database_layout {
    color: var(--color-text-body);
}

[data-theme="dark"] .collapsible_database_layout:hover {
    background-color: rgba(67, 195, 242, 0.1);
}

[data-theme="dark"] .collapsible_database_layout.active_database_layout {
    background-color: var(--color-primary-blue);
    color: white;
}

[data-theme="dark"] .nav-icon-fa,
[data-theme="dark"] .nav-text,
[data-theme="dark"] .nav-chevron {
    color: var(--color-text-body);
}

[data-theme="dark"] .collapsible_database_layout.active_database_layout .nav-icon-fa,
[data-theme="dark"] .collapsible_database_layout.active_database_layout .nav-text,
[data-theme="dark"] .collapsible_database_layout.active_database_layout .nav-chevron {
    color: white;
}

[data-theme="dark"] .layout_navbar {
    background-color: var(--color-sidebar-dark);
}

[data-theme="dark"] .layout_navbar a {
    color: var(--color-text-body);
}

[data-theme="dark"] .layout_navbar a:hover {
    color: var(--color-primary-blue);
    background-color: rgba(67, 195, 242, 0.1);
}

[data-theme="dark"] .submenu-wrapper.floating {
    background: var(--color-sidebar-dark);
    border: 1px solid var(--color-border);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .submenu-icon {
    color: var(--color-text-muted);
}

[data-theme="dark"] .table {
    color: var(--color-text-body);
    border-color: var(--color-border);
}

[data-theme="dark"] .table thead th {
    background-color: var(--color-table-header);
    color: var(--color-text-heading);
    border-color: var(--color-border);
}

[data-theme="dark"] .table tbody tr {
    border-color: var(--color-border);
}

[data-theme="dark"] .table tbody tr:hover {
    background-color: rgba(67, 195, 242, 0.05);
}

[data-theme="dark"] .table td,
[data-theme="dark"] .table th {
    border-color: var(--color-border);
}

[data-theme="dark"] .modern-input,
[data-theme="dark"] .modern-input-pencil,
[data-theme="dark"] .modern-input-email,
[data-theme="dark"] .modern-input-home,
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--color-bg-light);
    color: var(--color-text-body);
    border-color: var(--color-border);
}

[data-theme="dark"] .modern-input:focus,
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: var(--color-bg-content);
    border-color: var(--color-primary-blue);
    color: var(--color-text-body);
}

[data-theme="dark"] .valory_styled_buttons {
    background: linear-gradient(135deg, var(--color-primary-blue) 0%, #2a9ac8 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(67, 195, 242, 0.3);
}

[data-theme="dark"] .valory_styled_buttons:hover {
    background: linear-gradient(135deg, #5ac8f5 0%, var(--color-primary-blue) 100%);
    box-shadow: 0 6px 16px rgba(67, 195, 242, 0.4);
}

[data-theme="dark"] .badge.bg-primary-blue {
    background-color: var(--color-primary-blue) !important;
    color: #0a0a0a !important;
}

[data-theme="dark"] .badge.bg-dark-blue {
    background-color: var(--color-dark-blue) !important;
}

[data-theme="dark"] .text-accent-orange {
    color: var(--color-accent-orange) !important;
}

[data-theme="dark"] .dropdown-menu {
    background-color: var(--color-bg-content);
    border-color: var(--color-border);
}

[data-theme="dark"] .dropdown-item {
    color: var(--color-text-body);
}

[data-theme="dark"] .dropdown-item:hover {
    background-color: rgba(67, 195, 242, 0.1);
    color: var(--color-primary-blue);
}

[data-theme="dark"] .dropdown-divider {
    border-color: var(--color-border);
}

[data-theme="dark"] .alert {
    background-color: var(--color-bg-light);
    border-color: var(--color-border);
    color: var(--color-text-body);
}

[data-theme="dark"] .alert-warning {
    background-color: rgba(255, 193, 7, 0.15);
    border-color: rgba(255, 193, 7, 0.3);
    color: #ffc107;
}

[data-theme="dark"] .alert-danger {
    background-color: rgba(220, 53, 69, 0.15);
    border-color: rgba(220, 53, 69, 0.3);
    color: #dc3545;
}

[data-theme="dark"] .alert-success {
    background-color: rgba(40, 167, 69, 0.15);
    border-color: rgba(40, 167, 69, 0.3);
    color: #28a745;
}

[data-theme="dark"] .file-item {
    background: var(--color-bg-content);
    border-color: var(--color-border);
}

[data-theme="dark"] .progress-item {
    border-color: var(--color-border);
}

/* File status badges in processing pages */
[data-theme="dark"] .file-status-item {
    background: var(--color-bg-content);
    border-color: var(--color-border);
    color: var(--color-text-body);
}

[data-theme="dark"] .file-status-item:hover {
    background: var(--color-bg-light);
    border-color: var(--color-primary-blue);
}

/* Reset/redo buttons - need !important to override inline styles */
[data-theme="dark"] .reset-button {
    background: var(--color-bg-content) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-body) !important;
}

[data-theme="dark"] .reset-button:hover {
    background: var(--color-bg-light) !important;
    border-color: var(--color-primary-blue) !important;
}

[data-theme="dark"] .files-container {
    background-color: var(--color-bg-light);
    border: 1px solid var(--color-border);
}

[data-theme="dark"] .card-white {
    background-color: var(--color-bg-content);
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .loading-overlay {
    background-color: rgba(15, 17, 23, 0.9);
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--color-text-heading);
}

[data-theme="dark"] .section-header {
    color: var(--color-text-heading);
}

/* Keep vibrant colors for brand elements */
[data-theme="dark"] .bg-primary-blue {
    background-color: var(--color-primary-blue) !important;
    color: #0a0a0a !important;
}

[data-theme="dark"] .text-primary-blue {
    color: var(--color-primary-blue) !important;
}

[data-theme="dark"] .bg-dark-blue {
    background-color: #1a3a52 !important;
}

[data-theme="dark"] .navbar {
    background: linear-gradient(90deg, #16181f 0%, #1a1d25 100%);
    border-bottom: 1px solid var(--color-border);
}

/* Dark mode profile dropdown styling */
[data-theme="dark"] .nav-item.dropdown .nav-link {
    background: transparent !important;
}

[data-theme="dark"] .nav-item.dropdown .nav-link:hover {
    background: rgba(67, 195, 242, 0.1) !important;
}

/* Chart.js canvas elements */
[data-theme="dark"] canvas {
    filter: brightness(0.9);
}

/* Bootstrap badge overrides for dark theme */
[data-theme="dark"] .badge.bg-success {
    background-color: #28a745 !important;
    color: white !important;
}

[data-theme="dark"] .badge.bg-danger {
    background-color: #dc3545 !important;
    color: white !important;
}

/* Revenue Report dark mode text fixes */
[data-theme="dark"] .text-neutral {
    color: #e0e0e0 !important;
}

[data-theme="dark"] .revenue-totals-row-distinct {
    background-color: rgba(100, 160, 200, 0.2) !important;
}

[data-theme="dark"] .revenue-totals-row-distinct:hover {
    background-color: rgba(100, 160, 200, 0.3) !important;
}

[data-theme="dark"] .revenue-client-row {
    background-color: var(--dark-card-bg);
}

[data-theme="dark"] .revenue-client-row:hover {
    background-color: var(--dark-hover-bg);
}

[data-theme="dark"] .revenue-detail-row td,
[data-theme="dark"] .collapse.bg-light td {
    background-color: var(--dark-bg) !important;
    color: var(--dark-text) !important;
}

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

/* ============================================
   OCR PROCESSING & DEED PARSING STYLES
   ============================================ */
/* Options box for status displays */
.options-box {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 15px;
    margin-left: auto;
    width: fit-content;
    min-width: 300px;
}

.status-item {
    text-align: center;
    padding: 10px 20px;
}

.status-value {
    font-size: 2rem;
    font-weight: 500;
    margin-bottom: 5px;
}

.status-label {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
}

/* Card styling for light mode */
.card {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    border: none;
    margin-bottom: 1rem;
    background-color: #ffffff;
}

.card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
    padding: 0.75rem 1.25rem;
}

.card-header h5 {
    margin: 0;
    font-weight: 500;
}

.card-body {
    padding: 1.25rem;
}

/* Table numeric column alignment */
.table th:nth-child(n+7):nth-child(-n+20),
.table td:nth-child(n+7):nth-child(-n+20) {
    text-align: right;
}

/* Loading overlay for processing */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loading-overlay .spinner-border {
    width: 3rem;
    height: 3rem;
    color: #ffffff !important;
}

#processingStatus {
    background: rgba(0, 0, 0, 0.5);
    padding: 1.5rem;
    border-radius: 8px;
    max-width: 80%;
    text-align: center;
}

#currentFile {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

#processingStage {
    animation: pulse 2s infinite;
}

/* OCC MAPPING STYLES */
.occ-map-container {
    min-height: 600px;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
}

.occ-form-label {
    color: #ffffff !important;
}

/* Dark theme for OCC mapping */
[data-theme="dark"] .occ-map-container {
    background: var(--color-bg-content);
    border: 1px solid var(--color-border);
}

[data-theme="dark"] .occ-map-container .alert-info {
    background-color: rgba(67, 195, 242, 0.1);
    border-color: rgba(67, 195, 242, 0.2);
    color: var(--color-text-body);
}

@keyframes pulse {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}

/* ============================================
   IGNEOUS TIME TRACKING — Timer Widget
   ============================================ */

/* Widget container — left-aligned in navbar */
#igneous-timer-widget {
    position: relative;
    gap: 8px;
    display: flex !important;
    align-items: center;
    flex-shrink: 1;
    min-width: 0;
    max-width: 380px;
}

/* Brand group — logo + text, never shrink */
.navbar-brand-group {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: 24px;
}

/* Spacer pushes right-side items to the right */
.navbar-spacer {
    flex: 1 1 auto;
}

.igneous-widget-inner {
    display: flex;
    align-items: center;
    position: relative;
}

/* Buttons */
.igneous-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    border: none;
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 150ms ease;
    white-space: nowrap;
    line-height: 1;
}

.igneous-btn:active {
    transform: scale(0.97);
    transition: transform 50ms ease;
}

/* Clock In button — Flame Orange */
.igneous-btn-in {
    background: #ff8142;
    color: #fff;
    box-shadow: 0 0 12px rgba(255, 129, 66, 0.3);
}

.igneous-btn-in:hover {
    background: #ffa06b;
    box-shadow: 0 0 20px rgba(255, 129, 66, 0.45);
}

/* Clock Out button — Smoke Purple */
.igneous-btn-out {
    background: #b55cfa;
    color: #fff;
    padding: 5px 10px;
    box-shadow: 0 0 12px rgba(181, 92, 250, 0.3);
}

.igneous-btn-out:hover {
    background: #cb8afc;
    box-shadow: 0 0 20px rgba(181, 92, 250, 0.45);
}

/* Start button in dropdown */
.igneous-btn-start {
    background: #ff8142;
    color: #fff;
    flex: 1;
}

.igneous-btn-start:hover:not(:disabled) {
    background: #ffa06b;
}

.igneous-btn-start:disabled {
    background: #ccc;
    cursor: not-allowed;
    box-shadow: none;
}

/* Active clock display */
.igneous-active-clock {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Timer digits */
.igneous-timer {
    font-variant-numeric: tabular-nums;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.85rem;
    font-weight: 700;
    color: #ff8142;
    letter-spacing: 0.02em;
    min-width: 70px;
}

/* Context label (client · workflow) */
.igneous-context {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Clock icon link */
.igneous-link {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
    transition: color 150ms ease;
    text-decoration: none;
}

.igneous-link:hover {
    color: #ff8142;
}

/* Quick-select dropdown */
.igneous-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
    background: var(--color-bg-content, #fff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: var(--z-dropdown, 1000);
    width: 240px;
    transform-origin: top center;
}

.igneous-dropdown-inner {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.igneous-select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 6px;
    font-size: 0.8rem;
    background: var(--color-bg-content, #fff);
    color: var(--color-text-body, #333);
    transition: border-color 150ms ease;
}

.igneous-select:focus {
    outline: none;
    border-color: #ff8142;
    box-shadow: 0 0 0 2px rgba(255, 129, 66, 0.15);
}

.igneous-dropdown-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Glow pulse on active timer */
@keyframes igneous-pulse {
    0%, 100% { text-shadow: 0 0 8px rgba(255, 129, 66, 0.2); }
    50%      { text-shadow: 0 0 16px rgba(255, 129, 66, 0.5); }
}

.igneous-active-clock .igneous-timer {
    animation: igneous-pulse 3s ease-in-out infinite;
}

/* ---- Dark mode overrides ---- */
[data-theme="dark"] .igneous-timer {
    color: #ffa06b;
}

[data-theme="dark"] .igneous-dropdown {
    background: #1e1a28;
    border-color: #2a2735;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .igneous-select {
    background: #15121c;
    border-color: #2a2735;
    color: #f5f3f7;
}

[data-theme="dark"] .igneous-context {
    color: rgba(255, 255, 255, 0.45);
}

[data-theme="dark"] @keyframes igneous-pulse {
    0%, 100% { text-shadow: 0 0 12px rgba(255, 160, 107, 0.3); }
    50%      { text-shadow: 0 0 24px rgba(255, 160, 107, 0.6); }
}

/* ---- Responsive: hide context text on smaller screens ---- */
@media (max-width: 992px) {
    .igneous-context {
        display: none;
    }
}

@media (max-width: 768px) {
    .navbar-brand-group {
        flex-shrink: 1;
        min-width: 0;
        overflow: hidden;
    }
    .igneous-timer {
        font-size: 0.75rem;
        min-width: 60px;
    }
    .igneous-btn {
        padding: 5px 10px;
        font-size: 0.75rem;
    }
}

/* --- Global thin scrollbars ---- */
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--color-steel); border-radius: 3px; }
*::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }
* { scrollbar-width: thin; scrollbar-color: var(--color-steel) transparent; }

/* --- Leaflet dark-mode: invert map tiles ---- */
[data-theme="dark"] .leaflet-tile-pane {
    filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
}

/* ============================================
   END OF STYLESHEET
   ============================================ */