/*mudthemeapp.css*/
/* Custom sticky table CSS using your Red/Brown color scheme with clean 1px borders */

/* Ensure page doesn't scroll when table is scrolling */
body {
    overflow-x: hidden; /* Prevent horizontal page scroll */
}

/* ===== STICKY TABLE CONTAINER ===== */
.csv-grid-container {
    overflow: auto;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 2px;
    background: var(--mud-palette-surface);
    max-height: 80vh; /* 80% of viewport height */
    position: relative;
}

.csv-grid-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 500px;
    position: relative;
    font-family: Arial, sans-serif; 
}

    /* ===== STICKY HEADER USING YOUR PRIMARY COLOR (Red.Accent4) ===== */
    .csv-grid-table thead {
        position: sticky;
        top: 0;
        z-index: 20;
        background: var(--mud-palette-primary) !important;
    }

        .csv-grid-table thead th {
            border: 1px solid var(--mud-palette-divider);
            text-align: center;
            vertical-align: middle;
            padding: 5px; /* HEADER HEIGHT CONTROL: Reduce padding to make headers shorter */
            font-size: 12px; /* HEADER HEIGHT CONTROL: Smaller font = shorter headers */
            line-height: normal;
            margin: 0;
            position: sticky;
            top: 0;
            background: var(--mud-palette-primary) !important; /* Red.Accent4 */
            color: white !important;
            z-index: 20;
            font-weight: 600;
        }

/* ===== CLEAN 1PX STICKY FIRST COLUMN (Company Column) ===== */
.company-header {
    position: sticky;
    left: 0;
    z-index: 25; /* Highest priority - corner element */
    background: var(--mud-palette-primary) !important; /* Red.Accent4 */
    color: white !important;
    border-right: 1px solid var(--mud-palette-secondary) !important; /* Clean 1px brown border */
    width: 200px;
    min-width: 200px;
    max-width: 200px;
    text-align: left !important;
    padding: 8px 8px; /* COMPANY COLUMN HEIGHT CONTROL: Reduce padding for shorter company cells */
    font-weight: 600;
    box-shadow: 2px 0 4px rgba(0,0,0,0.1); /* Subtle shadow for separation */
}

.company-cell {
    position: sticky;
    left: 0;
    z-index: 15;
    background: var(--mud-palette-surface) !important;
    border-right: 1px solid var(--mud-palette-secondary) !important; /* Clean 1px brown border */
    width: 200px;
    min-width: 200px;
    max-width: 200px;
    text-align: left !important;
    padding: 8px 8px; /* COMPANY CELL HEIGHT CONTROL: Reduce padding for shorter company cells */
    box-shadow: 2px 0 4px rgba(0,0,0,0.1); /* Subtle shadow for separation */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

    /* Persistent 1px border using pseudo-element (fallback) */
    .company-header::after,
    .company-cell::after {
        content: '';
        position: absolute;
        top: 0;
        right: -1px; /* Position just outside the border */
        width: 1px;
        height: 100%;
        background: var(--mud-palette-secondary) !important;
        z-index: 1;
        pointer-events: none;
    }

/* ===== STICKY FOOTER ROWS USING SECONDARY COLOR (Brown.Darken4) ===== */
.csv-grid-table tbody tr.special-company-row,
.csv-grid-table tbody tr.sticky-footer-row {
    position: sticky;
    bottom: 0;
    z-index: 18;
    background: #efebe9 !important; /* Light brown background */
    border-top: 1px solid var(--mud-palette-secondary) !important; /* Clean 1px brown border */
}

    .csv-grid-table tbody tr.sticky-footer-row td {
        background: #efebe9 !important; /* Light brown background */
        border-top: 1px solid var(--mud-palette-secondary) !important; /* Clean 1px brown border */
        font-weight: 600;
        z-index: 18;
        color: var(--mud-palette-secondary) !important; /* Brown text */
    }

    /* Enhanced sticky footer first column with persistent border */
    .csv-grid-table tbody tr.sticky-footer-row .company-cell {
        position: sticky;
        left: 0;
        z-index: 22;
        background: #efebe9 !important; /* Light brown background */
        border-top: 1px solid var(--mud-palette-secondary) !important; /* Clean 1px brown border */
        color: var(--mud-palette-secondary) !important; /* Brown text */
        /* Use box-shadow to create persistent border that won't disappear */
        box-shadow: 2px 0 4px rgba(0,0,0,0.1), inset -1px 0 0 var(--mud-palette-secondary) !important;
    }

/* ===== YEAR HEADERS WITH YOUR THEME COLORS ===== */
.year-header,
.year-header-group {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--mud-palette-primary) !important; /* Red.Accent4 */
    color: white !important;
    border-bottom: 1px solid var(--mud-palette-divider) !important;
    font-weight: 600;
    font-size: 12px; /* YEAR HEADER HEIGHT CONTROL: Smaller font = shorter headers */
    min-width: 60px;
    width: 60px;
    padding: 8px 4px; /* YEAR HEADER HEIGHT CONTROL: Reduce padding for shorter year headers */
    writing-mode: horizontal-tb;
    white-space: nowrap;
}

/* ===== REGULAR DATA CELLS ===== */
.csv-grid-table th,
.csv-grid-table td {
    border: 1px solid var(--mud-palette-divider);
    text-align: center;
    vertical-align: middle;
    padding: 4px 5px; /* GENERAL CELL HEIGHT CONTROL: Reduce padding for all cells */
    font-size: 12px; /* GENERAL CELL HEIGHT CONTROL: Smaller font for all cells */
    line-height: normal;
    margin: 0;
}

/* PRIMARY DATA CELL HEIGHT CONTROL - MAIN ADJUSTMENT AREA */
.data-cell {
    min-width: 50px;
    width: 50px;
    padding: 2px; /* DATA CELL HEIGHT CONTROL: Main padding control - reduce to make cells shorter */
    height: auto; /* DATA CELL HEIGHT CONTROL: Primary height setting - increase/decrease as needed */
    font-size: 12px; /* DATA CELL HEIGHT CONTROL: Font size affects perceived height */
    border-right: 1px solid var(--mud-palette-divider);
    margin: 0;
    background: var(--mud-palette-surface);
}

    .data-cell:last-child {
        border-right: none;
    }

/* ===== ACCURACY COLUMN STYLING (Half-size data cells) ===== */
/* Accuracy columns inherit all data-cell styles but override width and font size */
.accuracy-col {
    min-width: 30px !important; /* Half of data-cell (50px) */
    width: 30px !important;
    max-width: 30px !important;
    font-size: 0.7rem !important; /* Slightly smaller font for tight fit */
}

    /* Apply smaller font to all text content within accuracy columns */
    .accuracy-col *,
    .accuracy-col .mud-input-control,
    .accuracy-col .mud-input-control .mud-input {
        font-size: 0.7rem !important;
    }

/* ===== MOBILE RESPONSIVE FOR ACCURACY COLUMNS ===== */
@media (max-width: 768px) {
    .accuracy-col {
        min-width: 20px !important;
        width: 20px !important;
        max-width: 20px !important;
    }

        .accuracy-col *,
        .accuracy-col .mud-input-control,
        .accuracy-col .mud-input-control .mud-input {
            font-size: 0.65rem !important;
        }
}

/* ===== CLEAN 1PX SPECIAL COMPANY STYLING ===== */
.special-company-cell {
    /* Light orange background   background: #fff3e0 !important;*/
    border-right: 1px solid var(--mud-palette-secondary) !important; /* Clean 1px brown border */
    position: sticky;
    left: 0;
    z-index: 19;
    box-shadow: 2px 0 4px rgba(0,0,0,0.1); /* Subtle shadow */
    color: var(--mud-palette-secondary) !important; /* Brown text */
}

    /* Special company pseudo-element for persistent 1px border */
    .special-company-cell::after {
        content: '';
        position: absolute;
        top: 0;
        right: -1px; /* Position just outside the border */
        width: 1px;
        height: 100%;
        background: var(--mud-palette-secondary) !important;
        z-index: 1;
        pointer-events: none;
    }

/* ===== HOVER EFFECTS WITH YOUR THEME ===== */
.csv-grid-table tbody tr:hover {
    background-color: var(--mud-palette-table-hover) !important;
}

    .csv-grid-table tbody tr:hover .company-cell {
        background-color: #ffebee !important; /* Light red background on hover */
        color: var(--mud-palette-primary) !important; /* Red text */
    }

    .csv-grid-table tbody tr:hover .data-cell {
        background-color: #fff3e0 !important; /* Light orange on hover */
    }

/* ===== NO HOVER EFFECTS FOR SPECIAL ROWS ===== */
/* Disable hover effects for readonly rows */
.csv-grid-table tbody tr.readonly-row:hover {
    background-color: #fafafa !important; /* Keep readonly background */
}

/* Disable hover effects for special company rows - keep transparent background */
.csv-grid-table tbody tr.special-company-row:hover {
    background-color: transparent !important; /* No background color */
}

/* Disable hover effects for sticky footer rows - preserve brown background */
.csv-grid-table tbody tr.sticky-footer-row:hover {
    background-color: #efebe9 !important; /* Keep brown background */
}

/* Disable hover effects on cells within readonly rows */
.csv-grid-table tbody tr.readonly-row:hover .company-cell,
.csv-grid-table tbody tr.readonly-row:hover .data-cell {
    background-color: #fafafa !important; /* Keep readonly background */
    color: var(--mud-palette-text-secondary) !important; /* Keep readonly text color */
}

/* Disable hover effects on cells within special company rows - keep original backgrounds */
.csv-grid-table tbody tr.special-company-row:hover .company-cell,
.csv-grid-table tbody tr.special-company-row:hover .data-cell {
    background-color: var(--mud-palette-surface) !important; /* Keep original background */
    color: inherit !important; /* Keep original text color */
}

/* Disable hover effects on cells within sticky footer rows */
.csv-grid-table tbody tr.sticky-footer-row:hover .company-cell,
.csv-grid-table tbody tr.sticky-footer-row:hover .data-cell {
    background-color: #efebe9 !important; /* Keep brown background */
    color: var(--mud-palette-secondary) !important; /* Keep brown text */
}

/* Set default cursor for all cells in special rows */
.csv-grid-table tbody tr.readonly-row .company-cell,
.csv-grid-table tbody tr.readonly-row .data-cell,
.csv-grid-table tbody tr.special-company-row .company-cell,
.csv-grid-table tbody tr.special-company-row .data-cell,
.csv-grid-table tbody tr.sticky-footer-row .company-cell,
.csv-grid-table tbody tr.sticky-footer-row .data-cell {
    cursor: default !important;
}

/* Optional: Visual distinction for readonly rows only */
.csv-grid-table tbody tr.readonly-row {
    background-color: #fafafa !important; 
}

    .csv-grid-table tbody tr.readonly-row .company-cell,
    .csv-grid-table tbody tr.readonly-row .data-cell {
        color: var(--mud-palette-text-secondary) !important;
        font-weight: 500 !important;
    }

/* ===== PENDING AND INTERACTIVE STATES ===== */
.cell-pending {
    background-color: #fff3e0 !important; /* Light orange for pending */
    border: 1px solid var(--mud-palette-warning) !important;
}

    .cell-pending:hover {
        background-color: #ffe0b2 !important; /* Slightly darker orange on hover */
    }

/* INTERACTIVE CELL CONTENT HEIGHT CONTROL */
.compact-cell {
    width: 100%;
    height: 100%; /* INTERACTIVE CELL HEIGHT CONTROL: Inherits from parent data-cell height */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px; /* INTERACTIVE CELL HEIGHT CONTROL: Font size affects content height */
    cursor: pointer;
    border-radius: 1px;
    transition: background-color 0.2s ease;
    font-family: Arial, sans-serif; 
    margin: 0;
    padding: 0; /* INTERACTIVE CELL HEIGHT CONTROL: No padding keeps content tight */
}

.compact-cell:hover {
    background-color: #ffebee !important; /* Light red hover */
}

/* ===== TEXT STYLING ===== */
.main-value  {
    font-weight: 600;
    font-size: 12px; /* TEXT HEIGHT CONTROL: Font size affects text height */
    color: var(--mud-palette-text-primary);
    line-height: normal; /* TEXT HEIGHT CONTROL: Line height affects text spacing */
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.standard-value-display { 
    font-size: 12px; /* TEXT HEIGHT CONTROL: Font size affects text height */
    color: var(--mud-palette-text-primary);
    line-height: normal; /* TEXT HEIGHT CONTROL: Line height affects text spacing */
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.percentage-value {
    font-size: 12px; /* TEXT HEIGHT CONTROL: Font size affects text height */
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
    line-height: normal; /* TEXT HEIGHT CONTROL: Line height affects text spacing */
    font-family: Arial, sans-serif; 
    margin: 0;
    padding: 0;
}

.live-value {
    color: var(--mud-palette-text-secondary);
    font-size: 12px; /* TEXT HEIGHT CONTROL: Font size affects text height */  
    font-family: Arial, sans-serif; 
    margin: 0;
    padding: 0;
}

.pending-value {
    color: var(--mud-palette-secondary); /* Brown color for pending */   
    font-size: 12px; /* TEXT HEIGHT CONTROL: Font size affects text height */
    font-family: Arial, sans-serif; 
    margin: 0;
    padding: 0;
}

/* ===== EMPTY CELLS STYLING ===== */
.compact-empty-cell {
    width: 100%;
    height: 100%; /* EMPTY CELL HEIGHT CONTROL: Inherits from parent data-cell height */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px dashed var(--mud-palette-divider);
    border-radius: 1px;
    transition: all 0.2s ease;
    background-color: transparent;
    margin: 0;
    padding: 0; /* EMPTY CELL HEIGHT CONTROL: No padding keeps content tight */
}

    .compact-empty-cell:hover {
        border-color: var(--mud-palette-primary) !important; /* Red border on hover */
        background-color: #ffebee !important; /* Light red background */
        border-style: solid !important;
    }

.empty-placeholder {
    color: var(--mud-palette-text-disabled);
    font-size: 12px; /* PLACEHOLDER HEIGHT CONTROL: Font size affects placeholder height */
    font-weight: 500;
    transition: color 0.2s ease;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif; 
}

.compact-empty-cell:hover .empty-placeholder {
    color: var(--mud-palette-primary) !important; /* Red text on hover */
}

/* ===== SCROLLBAR STYLING TO MATCH THEME ===== */
.csv-grid-container::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.csv-grid-container::-webkit-scrollbar-track {
    background: var(--mud-palette-surface);
}

.csv-grid-container::-webkit-scrollbar-thumb {
    background: var(--mud-palette-secondary); /* Brown scrollbar */
    border-radius: 4px;
}

    .csv-grid-container::-webkit-scrollbar-thumb:hover {
        background: var(--mud-palette-primary); /* Red scrollbar on hover */
    }

/* ===== MUDBLAZOR INPUT OVERRIDES - TABLE CELLS ONLY ===== */
/* TEXTBOX HEIGHT CONTROL - PRIMARY ADJUSTMENT AREA FOR INPUT FIELDS */
.csv-grid-container .compact-cell .mud-input-control,
.csv-grid-container .compact-empty-cell .mud-input-control {
    font-size: 0.75rem !important; /* TEXTBOX HEIGHT CONTROL: Font size affects input height */
    margin: 0 !important;
    height: auto !important;
    min-height: 20px !important;
    max-height: 28px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important; /* TEXTBOX HEIGHT CONTROL: Line height affects text spacing */
}

    .csv-grid-container .compact-cell .mud-input-control .mud-input,
    .csv-grid-container .compact-empty-cell .mud-input-control .mud-input {
        font-size: 0.75rem !important; /* TEXTBOX HEIGHT CONTROL: Font size affects input appearance */
        padding: 0px !important; /* TEXTBOX HEIGHT CONTROL: Remove padding for tighter fit */
        min-height: 15px !important; /* TEXTBOX HEIGHT CONTROL: Match parent container height */
        max-height: 15px !important; /* TEXTBOX HEIGHT CONTROL: Match parent container height */
        height: 15px !important; /* TEXTBOX HEIGHT CONTROL: Explicit height setting */
        line-height: 1 !important; /* TEXTBOX HEIGHT CONTROL: Tight line height */
        text-align: center !important;
        font-family: Arial, sans-serif; 
        border: none !important;
        background: transparent !important;
        width: 100% !important;
        margin: 0 !important;
        border-radius: 0px !important;
    }

    /* Force MudBlazor's internal input wrapper to be compact - TABLE ONLY */
    .csv-grid-container .compact-cell .mud-input-control .mud-input-control-input-container,
    .csv-grid-container .compact-empty-cell .mud-input-control .mud-input-control-input-container {
        min-height: 15px !important; /* TEXTBOX HEIGHT CONTROL: Internal wrapper height */
        height: 15px !important; /* TEXTBOX HEIGHT CONTROL: Internal wrapper height */
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Remove MudBlazor's default margins and paddings - TABLE ONLY */
    .csv-grid-container .compact-cell .mud-input-control .mud-input-slot,
    .csv-grid-container .compact-empty-cell .mud-input-control .mud-input-slot {
        min-height: 15px !important; /* TEXTBOX HEIGHT CONTROL: Input slot height */
        height: 15px !important; /* TEXTBOX HEIGHT CONTROL: Input slot height */
        padding: 0 !important;
        margin: 0 !important;
    }

    .csv-grid-container .compact-cell .mud-input-control .mud-input:focus,
    .csv-grid-container .compact-empty-cell .mud-input-control .mud-input:focus {
        background: #ffebee !important; /* Light red focus background */
        outline: 1px solid var(--mud-palette-primary) !important; /* Red outline */
        border-radius: 2px !important;
    }

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    .csv-grid-container {
        max-height: 60vh;
    }

    /* MOBILE HEIGHT CONTROL - Smaller screens get smaller cells */
    .company-header,
    .company-cell {
        width: 150px;
        min-width: 150px;
        max-width: 150px;
        padding: 4px 2px; /* MOBILE COMPANY CELL HEIGHT CONTROL: Reduce padding */
        font-size: 0.8rem; /* MOBILE COMPANY CELL HEIGHT CONTROL: Smaller font */
    }

    .year-header {
        min-width: 50px;
        width: 50px;
        padding: 4px 2px; /* MOBILE YEAR HEADER HEIGHT CONTROL: Reduce padding */
        font-size: 0.8rem; /* MOBILE YEAR HEADER HEIGHT CONTROL: Smaller font */
    }

    .data-cell {
        min-width: 45px;
        width: 45px;
        font-size: 0.8rem; /* MOBILE DATA CELL HEIGHT CONTROL: Smaller font */
        /* Note: height remains same as desktop for consistency */
    }
}

/* ===== CALCULATED AND READONLY CELLS ===== */
.calculated-cell {
    cursor: default; 
    background: #f3e5f5 !important; /* Light purple for calculated */
}

    .calculated-cell:hover {
        background-color: #e1bee7 !important; /* Slightly darker purple on hover */
    }

.readonly-cell {
    background: #f5f5f5 !important; 
    cursor: not-allowed;
}

/* ===== ERROR AND MISMATCH STATES ===== */
.mismatch-highlight {
    background: #ffebee !important; /* Light red for errors */
    border: 1px solid var(--mud-palette-primary) !important; /* Red border */
    padding: 2px 8px;
}

.text-error {
    color: var(--mud-palette-primary) !important; /* Red text for errors */
}

/* ===== EXPANSION PANELS SUPER COMPACT! ===== */
.compact-expansion .mud-expand-panel-header {
    min-height: 32px !important;
    padding: 2px 8px !important;
}

.compact-expansion .mud-checkbox {
    margin: 0 !important;
}

/*
============ QUICK HEIGHT ADJUSTMENT GUIDE ============

TO MAKE CELLS TALLER:
1. Increase .data-cell height from 15px to desired height (e.g., 20px)
2. Update all TEXTBOX HEIGHT CONTROL values to match (.mud-input-control height, etc.)
3. Optionally increase .data-cell padding from 2px to add more internal space

TO MAKE CELLS SHORTER:
1. Decrease .data-cell height from 15px to desired height (e.g., 12px)
2. Update all TEXTBOX HEIGHT CONTROL values to match
3. Consider reducing font-size from 0.75rem to 0.7rem for better fit

TO ADJUST COMPANY COLUMN WIDTH:
1. Change .company-header and .company-cell width/min-width/max-width values
2. Consider adjusting padding proportionally

TO MAKE HEADERS SHORTER:
1. Reduce thead th padding (currently 8px 6px)
2. Reduce .year-header padding (currently 8px 4px)
3. Consider smaller font-size

============ END GUIDE ============
*/