:root {
    --primary-slate: #1e293b;   /* Sidebar & Headings */
    --secondary-slate: #334155; /* Subtext */
    --accent-blue: #3b82f6;     /* Primary Buttons */
    --accent-hover: #2563eb;
    --bg-surface: #f1f5f9;      /* Page Background */
    --card-bg: #ffffff;
    --success-green: #10b981;
    --danger-red: #ef4444;
    --border-color: #e2e8f0;
}

/* --- Global Layout Locks --- */
html, body {
    height: 100%;           /* Lock window height */
    overflow: hidden;       /* Disable outer scrollbar */
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-surface);
    color: var(--secondary-slate);
}

/* --- Wrapper & Sidebar --- */
.d-flex#wrapper {
    width: 100%;
    height: 100vh;          /* Exact viewport height */
    height: 100dvh;
    overflow: hidden;
}

#sidebar-wrapper {
    width: 250px;
    min-width: 250px;
    max-width: 250px;
    height: 100%;
    background-color: var(--primary-slate);
    color: #fff;
    transition: width 0.3s ease-in-out, min-width 0.3s ease-in-out, max-width 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    overflow-y: auto;       /* Sidebar scrolls independently if needed */
    overflow-x: hidden;
    z-index: 1000;
}

#wrapper.toggled #sidebar-wrapper {
    width: 70px;
    min-width: 70px;
    max-width: 70px;
    margin-left: 0 !important;
}

/* Sidebar Content Hiding */
#wrapper.toggled .brand-text, 
#wrapper.toggled .list-group-item span,
#wrapper.toggled .sidebar-label,
#wrapper.toggled .btn-logout-text { display: none !important; }
#wrapper.toggled .sidebar-heading { justify-content: center !important; padding: 0; }
#wrapper.toggled .list-group-item { text-align: center; padding: 1rem 0; }
#wrapper.toggled .list-group-item i { margin-right: 0; font-size: 1.4rem; }
#wrapper.toggled .sidebar-heading img {
    display: none !important;
}

/* Sidebar Items */
.sidebar-heading {
    padding: 1.5rem; height: 72px; font-size: 1.25rem; font-weight: 700; color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.1); display: flex;
    justify-content: space-between; align-items: center; flex-shrink: 0;
}

#wrapper.toggled .sidebar-border-bottom {
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

.list-group-item {
    background-color: transparent; color: rgba(255,255,255,0.7); border: none;
    padding: 1rem 1.5rem; font-weight: 500; white-space: nowrap;
}
.list-group-item:hover { background-color: rgba(255,255,255,0.1); color: #fff; }
.list-group-item.active { background-color: var(--accent-blue); color: #fff; border-left: 4px solid #fff; }
.list-group-item i { margin-right: 10px; width: 20px; text-align: center; }

/* --- Sidebar Subtext Fixes --- */
#sidebar-wrapper .list-group-item small {
    color: rgba(255, 255, 255, 0.5) !important; /* Subtle gray/white for inactive items */
}

#sidebar-wrapper .list-group-item.active small {
    color: rgba(255, 255, 255, 0.8) !important; /* Brighter, readable white for the active item */
}

#sidebarToggle { color: rgba(255,255,255,0.7); cursor: pointer; padding: 4px; }
#sidebarToggle:hover { color: #fff; }

/* --- Sidebar Scrollbar Fix --- */
/* Makes the scrollbar visible against the dark #1e293b background */
#sidebar-wrapper::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.25);
    border-radius: 4px;
}
#sidebar-wrapper::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.4);
}

/* --- Main Content Area --- */
#page-content-wrapper {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column; /* Stack Navbar and Content vertically */
    overflow: hidden;
}

.top-navbar {
    background: #fff;
    padding: 1rem 2rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    display: flex; justify-content: space-between; align-items: center;
    flex-shrink: 0;         /* Prevent navbar from squishing */
    z-index: 900;
}

/* --- THE FLEX LAYOUT FIX --- */
.main-container {
    flex: 1;                /* Take all remaining height */
    display: flex;          /* Enable Flexbox */
    flex-direction: column; /* Stack children vertically */
    overflow: hidden;       /* No scroll on container */
    padding-bottom: 0;      /* Remove padding so card hits bottom */
    min-height: 0;          /* Allow shrinking */
}

.main-container .container-fluid {
    flex: 1;                /* Take all height inside main-container */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 1rem;   /* Small gap at bottom of screen */
    height: 100%;
}

/* Ensure notice card doesn't shrink, but pushes tabs down */
.container-fluid > .card-custom:not(.tab-content .card-custom) {
    flex-shrink: 0;
}

/* Make Tabs Header Rigid */
.nav-tabs {
    flex-shrink: 0;
}

/* --- Tab Content & Pane Filling --- */
.tab-content {
    flex: 1;                /* Fill remaining space */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.tab-pane {
    height: 100%;           /* Needs height to fill parent */
    flex-direction: column;
}

/* Bootstrap sets display:block on active. We need flex to fill height. */
.tab-pane.active {
    display: flex !important; 
    flex: 1;
    overflow: hidden;
}

/* --- Card Scrolling Internals --- */
/* The Card inside the tab pane */
.tab-pane .card-custom {
    flex: 1;                /* Fill the tab pane */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-bottom: 0;       /* Remove bottom margin to fit flush */
}

/* The Header inside the card */
.card-header-custom {
    padding: 1.25rem 1.5rem;
    background-color: #fff;
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--primary-slate);
    flex-shrink: 0;         /* Header stays fixed */
}

/* The Body (Table) inside the card */
.card-body-custom {
    padding: 0;
    
    /* Flex Layout: Stacks children vertically */
    display: flex;
    flex-direction: column;
    
    /* Fill the card */
    flex: 1;
    min-height: 0;
    
    /* Disable outer scrollbars */
    overflow: hidden; 
    position: relative;
}

.card-body-custom > .flex-fill {
    flex: 1 1 0px !important; 
    min-height: 0;
}

/* General Card Styles (Fallback for non-tab cards) */
.card-custom {
    background: var(--card-bg);
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

/* --- Table Styles --- */
.table { margin-bottom: 0; color: var(--secondary-slate); }
.table thead th {
    background-color: #f8fafc; color: var(--primary-slate);
    font-weight: 600; text-transform: uppercase; font-size: 0.75rem;
    letter-spacing: 0.5px; border-bottom: 1px solid var(--border-color);
    padding: 1rem;
    position: sticky;       /* Sticky Header */
    top: 0;
    z-index: 10;
    position: sticky;
    top: 0;
    box-shadow: 0 1px 0 var(--border-color);
}
.table tbody td { padding: 1rem; vertical-align: middle; border-bottom: 1px solid var(--border-color); }
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(241, 245, 249, 0.4); }
.table-hover tbody tr:hover { background-color: rgba(59, 130, 246, 0.05); }

.table-responsive {
    /* Fill whatever space is left (subtracting headers/pagination) */
    flex: 1;
    
    /* Enable internal scrolling */
    overflow-y: auto;
    overflow-x: auto;
    
    /* Reset height to let Flexbox handle the sizing */
    height: auto !important; 
    width: 100%;
}

.card-body-custom nav {
    flex-shrink: 0; /* Keep pagination fixed at bottom */
    background-color: #fff;
    border-top: 1px solid var(--border-color);
    padding: 1rem;
    z-index: 20;
}

/* --- UI Elements --- */
.badge { padding: 0.5em 0.8em; font-weight: 500; border-radius: 6px; letter-spacing: 0.3px; }
.btn-primary { background-color: var(--accent-blue); border-color: var(--accent-blue); padding: 0.5rem 1rem; font-weight: 500; }
.btn-primary:hover { background-color: var(--accent-hover); }

/* Chevron & Interactions */
.card-header-custom[data-bs-toggle="collapse"] { 
    cursor: pointer; 
    user-select: none; 
}

.chevron-icon { 
    /* CRITICAL FIX: Allows the transform to work on the <i> tag */
    display: inline-block !important; 
    
    transition: transform 0.25s ease-in-out; 
}

/* LOGIC CHANGE: 
   1. When Collapsed (.collapsed exists): Do nothing. Icon stays naturally Down (0deg).
   2. When Open (NO .collapsed): Rotate 180deg to point Up.
*/
.card-header-custom:not(.collapsed) .chevron-icon { 
    transform: rotate(-180deg); 
}

.card-header-custom.collapsed { 
    border-bottom: none; 
    border-radius: 12px; 
    transition: border-radius 0.2s delay 0.2s; 
}

/* Upload & Spinner */
.upload-drop-zone { border: 2px dashed #cbd5e1; border-radius: 12px; padding: 3rem; text-align: center; background-color: #f8fafc; transition: all 0.2s; cursor: pointer; }
.upload-drop-zone:hover, .upload-drop-zone.drag-over { border-color: var(--accent-blue); background-color: #eff6ff; transform: scale(1.01); }
#spinner-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.8); backdrop-filter: blur(2px); display: flex; justify-content: center; align-items: center; z-index: 9999; }
.spinner { border: 4px solid rgba(59, 130, 246, 0.1); border-left-color: var(--accent-blue); border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Scrollbar Polish */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0.2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(0,0,0,0.3); }

/* --- Fix for Open Disputes Tab (Double Nesting) --- */

/* 1. The Host Div (in disputed-claim-list.html) */
.tab-fragment-host {
    display: flex;
    flex-direction: column;
    flex: 1;            /* Fill the card */
    min-height: 0;      /* Allow shrinking */
    overflow: hidden;   /* Clip overflow */
}

/* 2. The Fragment Div (The invisible div created by th:insert) */
/* We must force this inner div to ALSO behave like a flex column */
.tab-fragment-host > div {
    display: flex;
    flex-direction: column;
    flex: 1;            /* Fill the Host */
    min-height: 0;      /* Allow shrinking */
    overflow: hidden;   /* Clip overflow */
    height: 100%;       /* Ensure it fills height reliably */
}

/* --- Icon Button Sizing Fix --- */
.icon-button svg {
    width: 16px;
    height: 16px;
    fill: #64748b;
    transition: fill 0.2s ease;
}

/* Ensure the button itself stays circular and centered */
.icon-button {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex; /* Changed from flex to inline-flex for better table behavior */
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #f1f5f9;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.icon-button:hover {
    background-color: var(--accent-blue);
    transform: translateY(-2px);
}

.icon-button:hover svg {
    fill: #fff;
}

.rounded-button {
    border-radius: 5px !important;
}

/* On mobile/tablet devices (adjust breakpoint as needed) */
@media (max-width: 992px) {
    html, body {
        height: 100%;
        overflow: hidden; 
    }

    /* 1. The Wrapper handles ONLY horizontal scrolling */
    #wrapper {
        display: flex !important;
        flex-wrap: nowrap !important;
        height: 100dvh !important; 
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }

    /* 2. Sidebar is pinned to the left edge but scrolls vertically internally */
    #sidebar-wrapper {
        position: sticky !important; 
        left: 0;
        top: 0;
        z-index: 1050;
        height: 100dvh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        flex-shrink: 0;
    }

    /* 3. Page Content shrink-wraps to the table width and scrolls vertically */
    #page-content-wrapper {
        flex: 1 0 auto; 
        min-width: fit-content !important; /* Magic: makes it perfectly match the table width */
        height: 100dvh !important;
        overflow-y: auto !important; 
        overflow-x: visible !important; 
        display: block !important; 
    }

    /* 4. Release height locks. 
       CRITICAL: Notice we only target .tab-pane.active so hidden tabs stay hidden! */
    .main-container,
    .container-fluid,
    .tab-content,
    .tab-pane.active, 
    .card-custom,
    .card-body-custom,
    .tab-fragment-host,
    .tab-fragment-host > div,
    .table-responsive {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        display: block !important; 
    }

    /* 5. Title bar layout */
    .top-navbar {
        gap: 1.5rem;
        padding-right: 2rem;
        display: flex !important; 
        min-width: max-content !important; /* Add this line */
    }
    
    .top-navbar > div {
        flex-shrink: 0;
    }

    /* 6. Table and input sizing */
    .table-responsive table {
        min-width: 100% !important; /* Forces table to fill empty card space on light pages */
        width: max-content !important; 
        table-layout: auto !important;
    }
    
    .table-responsive input[type="text"] { min-width: 110px; }
    .table-responsive input[type="date"] { min-width: 140px; }
    .table-responsive select.form-select { min-width: 180px !important; }

    /* 7. Disable the fixed split-pane layout completely */
    #split-container, 
    #top-pane, 
    #bottom-pane {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        display: block !important; 
        flex: none !important;
    }
    
    #top-pane {
        padding-bottom: 1.5rem; 
        flex-basis: auto !important;
    }

    #resize-handle {
        display: none !important; 
    }
}

input::placeholder {
    color: #6c757d;       /* Sets the text color (e.g., a muted gray) */
    font-style: italic;   /* Makes the text italic */
    font-size: 0.9em;     /* Slightly smaller text size */
    opacity: 1;           /* Firefox reduces opacity by default; this fixes it */
}

/* This targets the content area specifically to make the text scrollable, leaving the title and button in place */
.fixed-height-popup .swal2-html-container {
    max-height: 60vh;
    overflow-y: auto; /* Adds a vertical scrollbar if the text is too long */
    padding-right: 10px; /* Optional: Adds some padding to prevent text from being cut off by the scrollbar */
}

/* Custom Batch ID Icon for dynamic numbers */
.batch-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    font-size: 0.65rem;
    font-weight: bold;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    cursor: default;
    
    /* Layout fixes for centering and row height */
    vertical-align: middle;
    position: relative;
    top: -1px;             /* Nudges the icon slightly up to optically center it with the text */
    margin-top: -5px;      /* Prevents the top of the icon from pushing the row taller */
    margin-bottom: -5px;   /* Prevents the bottom of the icon from pushing the row taller */
}

.batch-chevron {
	transition: transform 0.25s ease-in-out;
	display: inline-block;
}
tr[aria-expanded="true"] .batch-chevron {
	transform: rotate(90deg);
}