/* ==========================================================================
   VALUIQ COLOR SYSTEM DOCUMENTATION
   ==========================================================================

   This CSS defines a unified color coding system for consistency across
   all ValuIQ pages. Please follow these guidelines:

   FINANCIAL TABLES:
   - Major sections (Assets, Revenue): Use .financial-section-header or .table-primary
   - Subsections (Current Assets): Use .financial-subsection-header or .table-light
   - Subtotals: Use .financial-total-row or .table-secondary
   - Grand totals: Use .financial-grand-total

   FORM INPUTS:
   - Calculated values: Use .calculated or [readonly]
   - Values from other models: Use .derived
   - User overrides: Use .user-input or .user-modified
   - Missing data: Use .missing-data or .placeholder
   - Validation errors: Use .error or .is-invalid

   ========================================================================== */

/* Import IBM Plex Sans font */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root {
    /* Primary Color Palette */
    --primary-color: #2c3e50;        /* Dark blue-gray - primary brand (unchanged for navbar) */
    --secondary-color: #3b82f6;       /* Modern blue - secondary actions (subtle update) */
    --accent-color: #e74c3c;          /* Red - warnings/errors */
    --success-color: #10b981;         /* Modern green - success states (subtle update) */
    --warning-color: #f59e0b;         /* Modern amber - warnings (subtle update) */
    --danger-color: #e74c3c;          /* Red - danger/delete */
    --light-color: #f1f5f9;           /* Softer gray - backgrounds (subtle update) */
    --dark-color: #2c3e50;            /* Dark blue-gray - text */
    
    /* Financial Table Color System */
    --table-section-header: #e3f2fd;  /* Light blue - major sections (Assets, Revenue) */
    --table-subsection-header: #f8f9fa; /* Light gray - subsections (Current Assets) */
    --table-total-row: #f5f5f5;       /* Medium gray - subtotals */
    --table-grand-total: #e1f5fe;     /* Darker blue - grand totals */
    
    /* Form Input Color System */
    --input-calculated: #e3f2fd;      /* Light blue - calculated/readonly values */
    --input-derived: #e8f5e9;         /* Light green - values from other models */
    --input-user-modified: #fff3e0;   /* Light orange - user overrides */
    --input-missing-data: #f5f5f5;    /* Light gray - missing/placeholder */
    --input-error: #ffebee;           /* Light red - validation errors */
    
    /* Text Colors for Inputs */
    --text-calculated: #1976d2;       /* Blue text for calculated */
    --text-derived: #2e7d32;          /* Green text for derived */
    --text-user-modified: #e65100;    /* Orange text for user input */
    --text-missing: #757575;          /* Gray text for missing */
    --text-error: #c62828;            /* Red text for errors */
}

body {
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: #f8f9fa;
}

/* Subtle heading refinements */
h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.01em;
    font-weight: 600;
}

h1 { font-weight: 700; }
h2 { font-weight: 600; }

/* Sidebar styles */
.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    padding: 48px 0 0;
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}

/* Main content styles */
main {
    padding-top: 1.5rem;
}

/* Card styles */
.card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 1rem;
}

/* Form styles */
.form-control:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Unsaved changes indicator */
.field-changed {
    border-left: 3px solid #0d6efd !important;
    background-color: rgba(13, 110, 253, 0.05) !important;
    transition: border-left 0.2s ease, background-color 0.2s ease;
}

/* Don't apply field-changed styling to checkboxes themselves */
input[type="checkbox"].field-changed {
    border-left: none !important;
    background-color: transparent !important;
    border: unset !important;
    box-shadow: unset !important;
}

/* For checkboxes, apply indicator styling to the parent container with a specific class */
.form-check.checkbox-changed {
    border-left: 3px solid #0d6efd !important;
    padding-left: 1rem;
    border-radius: 4px;
    transition: border-left 0.2s ease, padding-left 0.2s ease;
    /* No background color to avoid interfering with checkbox visibility */
}

/* Team Members Multi-Select Component */
.team-members-selector .selected-members {
    min-height: 32px;
}

.team-member-badge {
    display: inline-flex;
    align-items: center;
    margin: 2px;
    padding: 4px 8px;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 0.75rem;
    color: #495057;
}

.team-member-badge .remove-member {
    margin-left: 6px;
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    padding: 0;
    font-size: 14px;
    line-height: 1;
}

.team-member-badge .remove-member:hover {
    color: #dc3545;
}

.team-members-selector .dropdown-menu {
    max-height: 200px;
    overflow-y: auto;
}

.team-members-selector .dropdown-item {
    padding: 8px 16px;
    cursor: pointer;
    font-size: 0.875rem;
}

.team-members-selector .dropdown-item:hover {
    background-color: #f8f9fa;
}

.team-members-selector .dropdown-item.disabled {
    color: #6c757d;
    background-color: transparent;
    cursor: not-allowed;
}

/* Calculated/Readonly Values - Light Blue */
.form-control[readonly],
.form-control.calculated {
    background-color: var(--input-calculated);
    border-color: #bbdefb;
    color: var(--text-calculated);
    cursor: not-allowed;
}

/* Override for item name inputs - keep them plain */
.item-name-cell .form-control[readonly],
.form-control.item-name[readonly],
.form-control[readonly].read-from-model.item-name {
    background-color: transparent !important;
    border-color: #ced4da !important;
    color: #495057 !important;
    cursor: default;
}

/* Values Calculated from User Inputs - Light Purple */
.form-control.calculated-from-growth,
.form-control.calculated-from-margin {
    background-color: #f3e5f5;
    border-color: #ce93d8;
    color: #7b1fa2;
    cursor: not-allowed;
}

/* Values Derived from Other Models - Light Green */
.form-control.derived,
.form-control[readonly].read-from-model {
    background-color: var(--input-derived);
    border-color: #c8e6c9;
    color: var(--text-derived);
    cursor: not-allowed;
}

/* User Modified/Override Values - Light Orange */
.form-control.user-input,
.form-control.user-modified {
    background-color: var(--input-user-modified);
    border-color: #ffb74d;
    color: var(--text-user-modified);
}

/* Missing/Placeholder Data - Light Gray */
.form-control.missing-data,
.form-control.placeholder {
    background-color: var(--input-missing-data);
    border-color: #bdbdbd;
    color: var(--text-missing);
    border-style: dashed;
}

/* Validation Errors - Light Red */
.form-control.is-invalid,
.form-control.error {
    background-color: var(--input-error);
    border-color: #f44336;
    color: var(--text-error);
}

/* Button styles */
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.btn-primary:hover {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

/* Navigation styles */
.navbar {
    background-color: var(--primary-color) !important;
    padding: 0.25rem 1rem;
}

.navbar-brand {
    font-weight: bold;
}

/* Sidebar navigation */
.sidebar .nav-link {
    color: var(--dark-color);
    padding: 0.5rem 1rem;
}

.sidebar .nav-link:hover {
    color: var(--secondary-color);
}

.sidebar .nav-link.active {
    color: var(--secondary-color);
    font-weight: bold;
}

/* Content area */
#content {
    min-height: calc(100vh - 56px);
    padding: 1.5rem 0;
}

/* Login page specific */
.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Error messages */
.error-message {
    color: var(--danger-color);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Loading states */
.loading {
    opacity: 0.5;
    pointer-events: none;
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
    .sidebar {
        position: static;
        height: auto;
        padding-top: 0;
    }
    
    main {
        margin-top: 1rem;
    }
}

/* Table Styles */
.table th {
    background-color: #f8f9fa;
    position: sticky;
    top: 0;
    z-index: 1;
}

.table th,
.table td {
    white-space: nowrap;
    padding: 0.15rem 0.3rem;
    vertical-align: middle;
    line-height: 1.2;
}

.table-container {
    max-width: 100%;
}

.notes-column {
    min-width: 200px;
}

.amount-column {
    min-width: 120px;
}

.percentage-column {
    min-width: 120px;
}

/* Balance Sheet year header containers - let them size naturally like Income Statement */
#year-headers, 
#year-headers-liabilities,
#percentage-headers,
#percentage-headers-liabilities,
#outcome-year-headers {
    width: auto;
    min-width: auto;
}

.item-column {
    min-width: 200px;
}

.table .table-secondary td,
.table .table-primary td {
    font-weight: bold;
}

.table .table-secondary input,
.table .table-primary input {
    font-weight: bold;
    background-color: var(--light-color);
}

/* Year header - consolidated styles */
.year-header {
    text-align: center;
    background-color: var(--light-color);
    padding: 0.1rem 0.2rem !important;
    font-size: 0.75rem;
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Action Buttons */
.btn-action {
    padding: 0.25rem 0.5rem;
    margin: 0 0.25rem;
}

/* Modal Styles */
.modal-content {
    border-radius: 0.5rem;
}

.modal-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

/* Allow container to expand when tables are wide - all screen sizes */
.container {
    max-width: none;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0.25rem;
    padding-top: 0.5rem;
    padding-right: 0.25rem;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .table-responsive {
        margin-bottom: 1rem;
    }
    
    .btn-action {
        margin-bottom: 0.5rem;
    }
}

/* Assumptions Form Styles */
.assumptions-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.assumptions-form {
    background: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #333;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}

.form-group textarea {
    min-height: 100px;
    resize: vertical;
}

.form-group input[readonly] {
    background-color: #f5f5f5;
    cursor: not-allowed;
}

.form-actions {
    margin-top: 30px;
    text-align: right;
}

.year-item {
    padding: 4px 8px;
    margin: 2px 0;
    background-color: #f8f9fa;
    border-radius: 4px;
    font-size: 0.9rem;
}

/* Remove year-button styles */
.historical-years-list,
.projected-years-list {
    margin-top: 8px;
}

/* Table Component Styles */
.btn-group {
    display: inline-flex;
    margin-left: 10px;
}

/* btn-group .btn styles moved to compact section */

.item-name-cell {
    display: flex;
    align-items: center;
}

.item-name-cell input {
    flex-grow: 1;
}

.hidden {
    display: none !important;
}

/* Financial Statement Specific Styles */
.amount-columns {
    width: 25%;
    min-width: 150px;
}

.percentage-columns {
    width: 25%;
    min-width: 150px;
}

/* =========================
   REPORT VIEW CONSISTENCY
   ========================= */

/* Report View Styles - Using Unified Color System */
.report-view .table {
    font-size: 0.9rem;
}

.report-view .section-header {
    background-color: var(--table-section-header);
    font-weight: 600;
}

.report-view .total-row {
    font-weight: 600;
    background-color: var(--table-total-row);
}

.report-view .amount-column {
    text-align: right;
    white-space: nowrap;
}

.report-view .grand-total {
    background-color: var(--table-grand-total);
    font-weight: 700;
}

.report-view .subtotal-row {
    font-weight: 500;
    background-color: var(--table-subsection-header);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .amount-columns,
    .percentage-columns {
        min-width: 120px;
    }
    
    .table-responsive {
        margin-bottom: 1rem;
    }
    
    .btn-action {
        margin-bottom: 0.5rem;
    }
}

/* Year Control Styles */
.input-group .btn-outline-secondary {
    border-color: #ced4da;
    color: #6c757d;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

.input-group .btn-outline-secondary:hover {
    background-color: #e9ecef;
    color: #495057;
}

.input-group #yearsToProject {
    border-left: 0;
    border-right: 0;
    text-align: center;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

.input-group #yearsToProject:focus {
    box-shadow: none;
    border-color: #ced4da;
}

/* =========================
   ULTRA COMPACT LAYOUT SYSTEM
   ========================= */

/* Global table compacting - applies to all tables */
.table {
    font-size: 0.85rem; /* Smaller base font size */
    margin-bottom: 1rem; /* Reduced margin */
}

/* Ultra compact form controls in tables */
.table .form-control {
    padding: 0.1rem 0.25rem; /* Minimal padding */
    font-size: 0.8rem; /* Smaller text */
    min-height: 1.4rem; /* Much smaller height */
    border-width: 1px;
    line-height: 1.2;
}

/* Compact card spacing */
.card-body {
    padding: 0.75rem; /* Reduced from default 1.25rem */
}

.card-header {
    padding: 0.5rem 0.75rem; /* Reduced header padding */
    font-size: 0.9rem;
}

/* Compact financial section headers */
.financial-section-header td,
.financial-subsection-header td,
.financial-total-row td,
.financial-grand-total td {
    padding: 0.1rem 0.3rem; /* Extra compact for headers */
    font-size: 0.8rem;
}

/* Compact buttons */
.btn-sm {
    padding: 0.1rem 0.3rem;
    font-size: 0.75rem;
    line-height: 1.2;
}

/* Compact button groups */
.btn-group .btn {
    padding: 0.1rem 0.25rem;
    font-size: 0.7rem;
}

.mt-4 {
    margin-top: 1rem !important; /* Reduced from 1.5rem */
}

.mb-4 {
    margin-bottom: 1rem !important; /* Reduced from 1.5rem */
}

/* Page header compacting */
.d-flex.justify-content-between.align-items-center.mb-4 {
    margin-bottom: 0.75rem !important;
}

.d-flex.justify-content-between.align-items-center h2 {
    font-size: 1.3rem; /* Smaller page titles */
    margin-bottom: 0.25rem;
}

.d-flex.justify-content-between.align-items-center h4 {
    font-size: 1rem; /* Smaller subtitles */
    margin-bottom: 0;
}

/* Save button area compacting */
.d-grid.gap-2 {
    margin-top: 1rem;
    gap: 0.5rem !important;
}


/* =========================
   PROJECT ASSUMPTIONS PAGE COMPACTING
   ========================= */

/* Compact Bootstrap form spacing for Project Assumptions page */
.mb-3 {
    margin-bottom: 0.5rem !important; /* Further reduced from 0.75rem to 0.5rem */
}

/* Ultra compact for assumptions form groups */
.card .card-body .mb-3 {
    margin-bottom: 0.25rem !important; /* Even more aggressive inside cards */
}

.form-label {
    font-size: 0.85rem; /* Smaller labels to match table styling */
    margin-bottom: 0.25rem; /* Reduced from Bootstrap's 0.5rem */
    font-weight: 500;
}

/* Compact form controls outside of tables (for assumptions page) */
.form-control:not(.table .form-control):not(.table-responsive .form-control),
textarea.form-control {
    padding: 0.25rem 0.375rem; /* Smaller than Bootstrap default but not as tight as tables */
    font-size: 0.85rem; /* Match table font size */
    line-height: 1.3;
}

/* Compact card spacing for assumptions */
.card .card-body {
    padding: 0.75rem 1rem; /* Reduced from Bootstrap's 1.25rem */
}

.card .card-body .row {
    margin-bottom: 0.25rem; /* Much more aggressive reduction */
    margin-left: -0.375rem; /* Tighter column gutters */
    margin-right: -0.375rem;
}

.card .card-body .row:last-child {
    margin-bottom: 0; /* Remove margin from last row */
}

.card .card-body .col-md-6 {
    padding-left: 0.375rem; /* Tighter column gutters */
    padding-right: 0.375rem;
}

.card .card-header {
    padding: 0.5rem 1rem; /* Reduced header padding */
}

.card .card-header h5 {
    font-size: 0.95rem; /* Smaller card headers */
    margin-bottom: 0;
}

/* Compact date picker and select elements */
input[type="date"],
select.form-control {
    padding: 0.25rem 0.375rem;
    font-size: 0.85rem;
}

/* Compact checkbox styling */
.form-check {
    margin-bottom: 0.25rem; /* Reduced from Bootstrap's 0.5rem */
    padding-left: 1.25rem; /* Slightly reduced from default 1.5rem */
}

.form-check-label {
    font-size: 0.85rem; /* Match other form labels */
    line-height: 1.3;
    margin-bottom: 0;
}

.form-check-input {
    margin-top: 0.15rem; /* Fine-tune alignment with smaller text */
}

/* Reduce spacing between cards */
.card.mb-4 {
    margin-bottom: 1.5rem !important; /* Reduced from Bootstrap's 2.5rem */
}

/* Compact button styling for Project Assumptions page - using safer selectors */
/* Target buttons in the assumptions context by using the specific button ID as a marker */
/* Compact styling for all buttons using semantic approach with higher specificity */
.btn.btn-primary,
.btn.btn-success,
.btn.btn-warning,
.btn.btn-outline-secondary,
.btn.btn-outline-light,
.btn.btn-secondary {
    padding: 0.2rem 0.6rem !important; /* Consistent compact padding */
    font-size: 0.85rem !important; /* Consistent font size */
    line-height: 1.3;
}

/* Extra small buttons in tables remain even more compact */
.table .btn,
.btn-sm {
    padding: 0.1rem 0.3rem; /* Override with even tighter spacing for table context */
    font-size: 0.75rem;
    line-height: 1.2;
}

/* Compact styling for Select Valuation Models modal */
#modelSelectionModal .modal-body {
    padding: 1rem; /* Reduced from Bootstrap's 1.5rem */
}

#modelSelectionModal .modal-header {
    padding: 0.75rem 1rem; /* Reduced from Bootstrap's 1rem 1.5rem */
}

#modelSelectionModal .modal-footer {
    padding: 0.75rem 1rem; /* Reduced from Bootstrap's 1rem 1.5rem */
}

#modelSelectionModal .form-check {
    margin-bottom: 1rem; /* Reduced from 1.5rem */
    padding-left: 1.25rem; /* Slightly reduced */
}

#modelSelectionModal .form-check-label h5 {
    font-size: 0.95rem; /* Smaller headings */
    margin-bottom: 0.25rem; /* Reduced margin */
}

#modelSelectionModal .form-check-label p {
    font-size: 0.8rem; /* Smaller description text */
    margin-bottom: 0.25rem; /* Reduced margin */
    line-height: 1.3;
}

#modelSelectionModal .modal-title {
    font-size: 1.1rem; /* Smaller modal title */
}

/* =========================
   SIMPLE STICKY HEADERS FOR FINANCIAL TABLES
   ========================= */
/* Automatically detects financial tables with year headers */

.table thead th.year-header,
.table thead th.percentage-header {
    position: sticky;
    top: 0;
    background: white;
    z-index: 10;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    font-weight: 600;
}

/* Remove horizontal scroll to enable sticky headers */
.table-responsive {
    width: 100%;
    overflow-x: visible;
}

/* Tables use natural responsive sizing */
.table-responsive table {
    width: 100%;
}

/* =========================
   HISTORICAL VS PROJECTED YEAR DISTINCTION
   ========================= */
/* Visual distinction between historical and projected years */

/* Historical years - darker background */
.year-header.historical {
    position: sticky !important;
    top: 0 !important;
    background-color: #f8f9fa !important;
    border-left: 3px solid #6c757d;
    color: #495057;
    font-weight: 600;
    z-index: 10 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

/* Projected years - lighter background with accent */
.year-header.projected {
    position: sticky !important;
    top: 0 !important;
    background-color: #e3f2fd !important;
    border-left: 3px solid #2196f3;
    color: #1976d2;
    font-weight: 600;
    z-index: 10 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

/* Hover effects for better UX */
.year-header.historical:hover {
    background-color: #e9ecef !important;
}

.year-header.projected:hover {
    background-color: #bbdefb !important;
}

/* =========================
   LEGACY COMPATIBILITY
   ========================= */
/* These classes now use the unified system defined above */

.form-control[data-source]:hover::after {
    content: attr(data-source);
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
}

/* =========================
   DCF ANALYSIS CONSISTENCY
   ========================= */

/* DCF Analysis Table Styles - Using Unified System */
.dcf-analysis-row input {
    background-color: var(--table-subsection-header);
    border: 1px solid #dee2e6;
    color: #495057;
    font-weight: 500;
}

.dcf-analysis-row input[data-calculated="true"] {
    background-color: var(--input-calculated);
    border-color: #bbdefb;
    color: var(--text-calculated);
    font-weight: 600;
}

.dcf-analysis-row td:first-child {
    font-weight: 600;
    color: #495057;
}

.dcf-analysis-row input[value*="%"] {
    color: #28a745;
    font-weight: 600;
}

.dcf-analysis-row input[value*="$"] {
    color: #495057;
    font-weight: 500;
}

/* =========================
   UNIFIED TABLE SYSTEM
   ========================= */

/* Major Section Headers (Assets, Revenue, etc.) */
.financial-section-header,
.table-primary {
    background-color: var(--table-section-header) !important;
    font-weight: bold;
}

/* Subsection Headers (Current Assets, etc.) */
.financial-subsection-header,
.table-light {
    background-color: var(--table-subsection-header) !important;
    font-weight: 600;
}

/* Subtotal Rows */
.financial-total-row,
.table-secondary {
    background-color: var(--table-total-row) !important;
    font-weight: bold;
}

/* Grand Total Rows */
.financial-grand-total {
    background-color: var(--table-grand-total) !important;
    font-weight: 700;
}

/* Table input styling consistency */
.table .table-secondary input,
.table .table-primary input,
.financial-total-row input,
.financial-grand-total input,
.financial-section-header input {
    font-weight: bold;
    background-color: var(--input-calculated);
    color: var(--text-calculated);
    border: 1px solid #bbdefb;
}

/* Remove number input spinners (arrows) for all browsers */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

/* =========================
   DISABLED NAVIGATION BUTTONS
   ========================= */
/* Disabled state for navigation buttons during save operations */
.btn-nav-disabled {
    pointer-events: none !important;
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    position: relative;
}

.btn-nav-disabled::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.3);
    z-index: 1;
}

/* =========================
   UNSAVED CHANGES MODAL
   ========================= */

/* Clean, professional modal styling for unsaved changes confirmation */
#unsaved-changes-modal .modal-content {
    border-radius: 8px;
    border: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

#unsaved-changes-modal .modal-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

#unsaved-changes-modal .btn {
    font-weight: 500;
    border-radius: 6px;
}

#unsaved-changes-modal .btn:focus {
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}