/**

 * ESMS Professional Theme - Professional Blue Palette

 * Optimized for excellent contrast, readability, and mobile responsiveness

 */



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

   1. ROOT VARIABLES & PALETTE

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

:root {

    /* PRIMARY PALETTE - Professional Blues */

    --primary-dark: #003366;          /* Dark Navy - Main Navbar & Sidebar */

    --primary-main: #0095D9;          /* Bright Blue - Primary actions, active links */

    --primary-medium: #007BB8;        /* Medium Blue - Button hover states */

    --primary-light: #A3C1DA;         /* Light Blue - Accents, borders */

    --primary-lighter: #E5F4FD;       /* Very Light Blue - Table headers, soft backgrounds */

    --primary-lightest: #F7F9FC;      /* Almost White - General body background */

    

    /* TEXT COLORS - Optimized for readability */

    --text-dark: #1B2B49;             /* Very Dark Blue - Main body text */

    --text-muted: #5A6B7F;            /* Medium gray-blue - Secondary text, captions */

    --text-light: #8FA3B5;            /* Light gray-blue - Tertiary text, placeholders */

    --text-white: #FFFFFF;            /* White - Text on dark backgrounds */

    

    /* SEMANTIC COLORS - State indicators */

    --success-color: #10B981;         /* Green - Paid, Approved, Active */

    --success-hover: #059669;

    --success-light: #D1FAE5;

    --success-lighter: #ECFDF5;

    

    --warning-color: #F59E0B;         /* Amber - Pending, Attention required */

    --warning-hover: #D97706;

    --warning-light: #FEF3C7;

    --warning-lighter: #FFFBEB;

    

    --danger-color: #EF4444;          /* Red - Errors, Failed, Overdue */

    --danger-hover: #DC2626;

    --danger-light: #FEE2E2;

    --danger-lighter: #FEF2F2;

    

    --info-color: #06B6D4;            /* Cyan - Information, Partial payments */

    --info-hover: #0891B2;

    --info-light: #CFFAFE;

    --info-lighter: #ECFDFD;

    

    /* NEUTRAL COLORS & BACKGROUNDS */

    --border-color: #CDD9E5;          /* Standard borders */

    --border-light: #DFE5EB;          /* Subtle dividers */

    --bg-white: #FFFFFF;              /* Card backgrounds */

    --bg-light: #F7F9FC;              /* Page backgrounds */

    --bg-lighter: #E5F4FD;            /* Highlighted areas */

    

    /* SHADOWS - Depth and elevation */

    --shadow-sm: 0 1px 2px 0 rgba(27, 43, 73, 0.05);

    --shadow-md: 0 4px 6px -1px rgba(27, 43, 73, 0.1);

    --shadow-lg: 0 10px 15px -3px rgba(27, 43, 73, 0.15);

    --shadow-xl: 0 20px 25px -5px rgba(27, 43, 73, 0.2);


    --sidebar-width: 280px; 
    --sidebar-collapsed-width: 80px; 
    /*--header-height: 64px; /* Average height of your Bootstrap navbar, adjust if needed */
}



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

   2. BOOTSTRAP OVERRIDES

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

* {

    --bs-primary: #0095D9;

    --bs-success: #10B981;

    --bs-danger: #EF4444;

    --bs-warning: #F59E0B;

    --bs-info: #06B6D4;

    --bs-secondary: #5A6B7F;

    --bs-body-color: #1B2B49;

    --bs-body-bg: #F7F9FC;

}



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

   3. GLOBAL STYLES & TYPOGRAPHY

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

   

html, body {

    color: var(--text-dark);

    background-color: var(--bg-light);

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

}



/* Headings */

h1, h2, h3, h4, h5, h6 {

    color: var(--text-dark);

    font-weight: 600;

}

h1 { font-size: 2rem; }

h2 { font-size: 1.75rem; }

/* Responsive Tabs */
.swipe-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-bottom: 2px solid var(--primary-light);
}
.swipe-tabs .nav-link {
    white-space: nowrap;
    padding: 10px 20px;
}

/* Table to Card Transformation */
@media (max-width: 991.98px) {
    .responsive-card-table thead {
        display: none; /* Hide headers on mobile */
    }
    .responsive-card-table tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        background: #fff;
        padding: 10px;
        box-shadow: var(--shadow-sm);
    }
    .responsive-card-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right;
        border-bottom: 1px solid var(--border-light);
        padding: 8px 5px;
    }
    .responsive-card-table td::before {
        content: attr(data-label);
        font-weight: bold;
        text-align: left;
        color: var(--primary-dark);
        flex: 1;
    }
    .responsive-card-table td:last-child {
        border-bottom: 0;
        justify-content: center;
        background: var(--primary-lightest);
        margin-top: 5px;
        border-radius: 4px;
    }
    
    /* Button Group adjustments for mobile */
    .btn-group {
        width: 100%;
    }
    .btn-group .btn {
        flex: 1;
    }
}
/* 1. Prevent the page from stretching horizontally */
.main-wrapper {
    width: 100%;
    overflow-x: hidden;
}

/* 2. Fix the Tabs (Gmail Style Scroll) */
#financeTabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
    border-bottom: 2px solid var(--primary-light);
    scrollbar-width: none; /* Hide scrollbar Firefox */
}

@media (max-width: 768px) {
    .sidebar-wrapper { 
        position: fixed; 
        
        /* MAGIC HAPPENS HERE */
        top: var(--header-height); 
        height: calc(100vh - var(--header-height)); 
        
        margin-left: calc(-1 * var(--sidebar-width)); 
        
        /* Ensure it can scroll internally if you have many menu items */
        overflow-y: auto; 
        
        /* Optional: Add a shadow so it pops out from the main content when sliding in */
        box-shadow: 4px 0 10px rgba(0,0,0,0.1); 
    }
    
    .sidebar-wrapper.mobile-show { 
        margin-left: 0; 
    }
}

#financeTabs::-webkit-scrollbar {
    display: none; /* Hide scrollbar Chrome/Safari */
}

/* 3. The "Responsive Card" Table logic */
@media (max-width: 768px) {
    .responsive-card-table, 
    .responsive-card-table tbody, 
    .responsive-card-table tr, 
    .responsive-card-table td {
        display: block;
        width: 100%;
    }

    .responsive-card-table thead {
        display: none; /* Hide headers */
    }

    .responsive-card-table tr {
        margin-bottom: 15px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        box-shadow: var(--shadow-sm);
    }

    .responsive-card-table td {
        text-align: right;
        padding: 10px;
        position: relative;
        border-bottom: 1px solid var(--border-light);
    }

    /* This creates the labels on the left side of the card */
    .responsive-card-table td::before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
        color: var(--primary-dark);
    }

    .responsive-card-table td:last-child {
        border-bottom: 0;
        background: var(--bg-lighter);
        text-align: center;
    }
}

/* Update your theme.css or add to a style block */
.swipe-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling for iOS */
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 5px;
}

.swipe-tabs .nav-item {
    flex: 0 0 auto; /* Prevents tabs from shrinking */
}

/* Hide scrollbar but keep functionality */
.swipe-tabs::-webkit-scrollbar {
    display: none;
}
.swipe-tabs {
    scrollbar-width: none;
}

@media (max-width: 576px) {
    /* Reduce page-level padding so the card has room */
    .container-fluid.px-4 {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Reduce the padding inside the white tab content */
    .tab-content.p-4 {
        padding: 15px !important;
    }

    /* Ensure form rows don't have negative margins causing overflow */
    .row {
        margin-left: 0;
        margin-right: 0;
    }
    
    .col-md-8, .col-md-6 {
        padding-left: 0;
        padding-right: 0;
    }
}

/* --- Mobile Icon Tabs Adjustment --- */
.mobile-icon-tabs {
    border-bottom: 2px solid var(--border-light);
    flex-wrap: nowrap; /* Prevents stacking */
}
.mobile-icon-tabs .nav-link {
    padding: 10px 5px;
    border-radius: 8px 8px 0 0;
    white-space: nowrap;
}

/* --- Table to Card Transformation (Mobile Only) --- */
@media (max-width: 768px) {
    /* Main container overflow protection */
    .main-content {
        min-width: 0 !important;
        overflow-x: hidden;
    }

    /* Hide the standard table header */
    .responsive-card-table thead {
        display: none;
    }

    /* Make each row look like a floating card */
    .responsive-card-table tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        background-color: #fff;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }

    /* Transform table cells into flex rows */
    .responsive-card-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right;
        border-bottom: 1px solid var(--border-light);
        padding: 12px 15px;
    }

    /* Grab the data-label and put it on the left side of the card */
    .responsive-card-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--primary-dark);
        text-align: left;
        flex: 1;
    }

    /* Action buttons cell at the bottom of the card */
    .responsive-card-table td:last-child {
        border-bottom: none;
        background-color: var(--bg-light);
        justify-content: center; /* Center the buttons */
        border-radius: 0 0 8px 8px;
    }
    
    /* Make buttons span full width of the card bottom */
    .responsive-card-table td:last-child form,
    .responsive-card-table td:last-child button {
        width: 100%;
        margin: 0;
    }
}