/* Main Application Container */
        .app-container {
            display: grid;
            grid-template-rows: auto 1fr;
            height: 100vh; 
            gap: 12px;
            padding: 16px;
            box-sizing: border-box;
    
        }

        /* Main App Header Grid Item & Layout */
.app-header {
    grid-column: 1 / -1; /* Spreads across all columns of your app grid container */
    grid-row: 1;
    background-color: #f0f2f4;
    padding: 1px 20px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    flex-wrap: wrap;
    gap: 15px;
    box-sizing: border-box;
}

/* Parent Container: Must include min-width: 0 to allow grid children to shrink and scroll */
.row-content {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 12px;
    height: 100%;
    overflow: hidden;
    min-width: 0; /* CRITICAL: Prevents the 1fr column track from locking up and clipping inner tables */
    box-sizing: border-box;
}

/* Sidebar Menu */
.column-menu {
    background-color: #f0f0f0;
    padding: 16px;
    border-radius: 8px;
    min-width: 0;
    box-sizing: border-box;
}

/* Second Column Container */
.column-content {
    display: grid;
    grid-template-rows: 60px 1fr; 
    gap: 10px;
    height: 100%;
    width: 100%;
    overflow: hidden;
    min-width: 0; /* Prevents grid children from overflowing horizontally */
    box-sizing: border-box;
}

/* Action Row */
.action-row {
    background-color: #e2e8f0;
    padding: 16px;
    border-radius: 8px;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    gap:15px;
}

/* Table View Container */
.row-table {
    display: grid;
    grid-template-rows: auto 1fr;
    background-color: white;
    padding: 0px; 
    height: 100%;
    overflow: hidden;
    min-width: 0; /* CRITICAL: Allows table container to safely scale down */
    box-sizing: border-box;
}



    .status-life { background-color: #fff2cc !important; color: #000 !important; }
    .status-current { background-color: #d9ead3 !important; color: #000 !important; }
    .status-active { background-color: #cfe2f3 !important; color: #000 !important; }
    .status-inactive { background-color: #f4cccc !important; color: #000 !important; }
    .status-deceased { background-color: #6c757d !important; color: white !important; }
    .status-emigrated { background-color: #e2d9f3 !important; color: #000 !important; }

.offcanvas-body {
    overflow-y: auto;
    max-height: calc(100vh - 120px); /* Leaves space for the header and footer */
}

/* Left Section: Logo + Title */
.header-logo {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-logo h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #2563eb;
}

/* Middle Section: Tracker */
.header-tracker {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    text-align: center;

}

.header-tracker small#lastActivityDisplay {
    color: #1e293b !important; /* Dark slate */
    font-size: 0.85rem;
    font-weight: 500;
}

/* Right Section: Profile + Logout */
.header-profile {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-profile-text {
    color: #475569;
    font-size: 0.875rem;
    font-weight: 700;
}

.logout-btn {
    background: transparent;
    color: #dc3545;
    border: 1px solid #dc3545;
    padding: 5px 10px;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.logout-btn:hover {
    background-color: #dc3545;
    color: #fff;
}

        #userProfileDisplay {
    background-color: #343a40 !important; /* A dark grey background */
    padding: 5px 10px;
    border-radius: 4px;
    color: white !important; /* Force text to white */
    display: inline-flex;
    align-items: center;
}

#userProfileDisplay small {
    color: #ced4da !important; /* A lighter grey that stands out against the dark bg */
}

#userProfileDisplay strong {
    color: #ffffff !important;
}


 /* First Column Styles */
     

            /* Style the button to reset default browser button styles */
    .hamburger-btn {
        display: flex;
        align-items: center;
        gap: 8px;                    /* Space between the icon and the word "Menu" */
        background-color: #ffffff;
        border: 1px solid #cbd5e1;
        border-radius: 6px;
        padding: 8px 14px;
        font-size: 16px;
        font-weight: 500;
        color: #1e293b;
        cursor: pointer;
        transition: background-color 0.2s ease, border-color 0.2s ease;
        margin-bottom: 0px;
    }

    /* Hover effect */
    .hamburger-btn:hover {
        background-color: #f1f5f9;
        border-color: #94a3b8;
    }

    /* Focus state for keyboard navigation (accessibility) */
    .hamburger-btn:focus-visible {
        outline: 2px solid #2563eb;
        outline-offset: 2px;
    }

    /* Make the hamburger icon pop a bit more */
    .hamburger-icon {
        font-size: 20px;
        line-height: 1;
    }   
        .custom-tabs {
            list-style: none; /* Removes bullet points */
            gap: 20px;         /* Space between tabs */
            margin: 0;
            padding: 0;
            overflow-x: auto; /* Allows horizontal scrolling if screen is too small */
        }

        .tab-btn {
            background-color: transparent;
            border: 1px solid transparent;
            padding: 8px 16px;
            margin-bottom: 20px;
            font-size: 14px;
            font-weight: 500;
            color: #64748b;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        /* Hover state */
        .tab-btn:hover {
            color: #adc6ed;
            background-color: #6c46f3;
        }

        /* Active state for the currently selected tab */
        .tab-btn.active {
            color: #2563eb;
            background-color: #ffffff;
            border-color: #cbd5e1;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        }
        
        


        /* --- Mobile / Minimized View (Screens 768px wide and smaller) --- */
@media (max-width: 768px) {
    .app-container {
        /* Change grid from 2 columns to 1 column */
        grid-template-columns: 1fr; 
        
    }

    .row-content {
        display: grid;
        grid-template-columns: 1fr; /* Content takes full width since sidebar is a floating drawer */
        grid-column: 1 / -1;
        width: 100%;
    }

   .column-menu {    
        position: fixed;
        top: 0px;
        left: -250px; /* Hidden outside the screen view */
        width: 160px;
        height: 100vh;
        background-color: white;
        box-shadow: 4px 0 15px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        transition: left 0.3s ease-in-out; /* Smooth sliding animation */
        padding-top: 60px; /* Space at the top */
    }
    .column-menu.drawer-open {
        left: 0;
    }

    /* Optional: Background overlay when menu is open */
    .menu-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.4);
        z-index: 999;
    }

    .menu-overlay.active {
        display: block;
    }
}

@media(min-width: 768px)
    {
    .hamburger-btn
    {
    display:none;
    }
    }


   /* Pane Visibility Control */
.tab-pane {
    display: none;
}

.tab-pane.active {
    display: flex;             /* Turns the active pane into a flex container */
    flex-direction: column;    /* Stacks the card header on top and table underneath */
    height: 100%;              /* Locks it strictly to the parent .row-table height */
    min-height: 0;             /* CRITICAL: Allows the pane to shrink and enable internal scrolling */
    overflow: hidden;          /* Clips any outer spillover */
}


/* Card Header Layout */
.card-header-custom {
    background-color: #ffffff;
    padding: 10px 8px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

/* Search Box Design */
.search-group {
    display: flex;
    align-items: center;
    background-color: #f8f9fa;
    border-radius: 4px;
    max-width: 250px;
    width: 100%;
}

.custom-search-input {
    border: none;
    background: transparent;
    padding: 6px 10px;
    font-size: 13px;
    outline: none;
    width: 100%;
}

.custom-clear-btn {
    background: transparent;
    border: none;
    color: #6c757d;
    padding: 6px 10px;
    cursor: pointer;
}

/* Pagination Controls */
.pagination-area {
    display: flex;
    align-items: center;
}

.page-info-text {
    color: #6c757d;
    font-size: 12px;
    margin-right: 8px;
}

.custom-pagination {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2px;
}

.page-link-custom {
    display: block;
    padding: 4px 8px;
    font-size: 12px;
    color: #0d6efd;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
}

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

/* Table Responsive Scrolling */
.table-responsive-custom {
    width: 100%;
    height: 100%;
    flex: 1;          /* Ensures it takes up the remaining flexible grid height */
    overflow-x: auto; /* Forces horizontal scrolling when squeezed */
    overflow-y: auto; /* Handles vertical scrolling */
    min-width: 0;     /* Essential to prevent grid blowout */
    min-height: 0;    /* Essential for flex/grid child overflow */
    background-color: #ffffff;
    box-sizing: border-box;
}

/* Custom Data Table Styles */
.custom-data-table {
    width: 100%;
    min-width: 750px; /* Forces the table to hold its shape and trigger the horizontal scrollbar below this width */
    border-collapse: collapse;
    font-size: 13px;
    color: #212529;
    box-sizing: border-box;
}

.custom-data-table th, 
.custom-data-table td {
    padding: 8px 12px;
    vertical-align: middle;
    border-bottom: 1px solid #dee2e6;
}

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

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

.loading-cell {
    text-align: center;
    color: #6c757d;
    padding: 24px;
}

/* Hide columns on mobile matching d-none d-md-table-cell behavior */
@media (max-width: 768px) {
    .hide-mobile {
        display: none;
    }
}

.custom-data-table th {
    background-color: #0d6efd;
    color: white;
    position: sticky;
    top: 0;
    z-index: 10;
}

 /* dashboard */

 /* Ensure the dashboard tab-pane container allows vertical scrolling */
#dashboardView {
    overflow-y: auto !important; /* Forces vertical scrollbar when dashboard elements exceed height */
    overflow-x: hidden;
    min-height: 0;
}

/* Make sure the internal fluid container can size correctly */
#dashboardView .container-fluid {
    height: auto;
    min-height: 100%;
    box-sizing: border-box;
}

  .dashboard-card {
  background: rgb(255, 255, 255);
  border-radius: 15px; /* Slightly more rounded */
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
  transition: transform 0.3s ease;
  padding: 1.5rem;
}

.chart-card {
  background-color: #ffffff;
  border: none; /* Remove border if you prefer the shadow look */
  border-radius: 0.5rem;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Adds depth */
  display: flex;
  flex-direction: column;
}
.stat-val { 
  font-size: 2.2rem; /* Made slightly larger */
  font-weight: 800; 
  line-height: 1.2;
  color: #212529;
}

.stat-label {
  text-align: center;
  color: #495057; /* A professional dark grey */
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-top: 1px solid #dee2e6; /* Adds a nice divider between chart and title */
  padding-top: 8px;
}

/* Special color for the New Member count to make it stand out */
#statNew {
  color: #6610f2; /* Matching your Dashboard button color */
}

@media print {
    @page {
        size: A4 portrait;
        margin: 1.0cm;
    }

    body { font-size: 11pt;
    
   }

    /* 1. HIDE NON-PRINT ELEMENTS */
    .nav, .nav-tabs, .btn, .input-group, .d-print-none, 
    .no-print, button, input {
        display: none !important;
    }

    /* 2. FORCE FULL COLOR AND LAYOUT */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* 3. RESET PARENT CONTAINERS */
    #dashboardPane, .container-fluid {
        width: 100% !important;
        padding-left: 0.3% !important;
        padding-right: 0.3% !important;
        margin: 0 !important;
    }

    /* 4. FORCE LAYOUT STRUCTURE (Row 1: Charts) */
    /* Targets the row containing statusChart/genderChart */
    .row .col-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* 5. FORCE LAYOUT STRUCTURE (Row 2: Stats/Financials) */
    /* Total/Life/Deceased/Emigrated row */
    .row .col-md-3 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }
    
    /* New Members and Fee Revenue cards */
    .row .col-md-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* 6. FORCE LAYOUT STRUCTURE (Row 3: County Chart) */
    .row.mt-4 .col-12 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* 7. PREVENT PAGE BREAKS INSIDE CARDS */
    .p-3, .border, .row {
        break-inside: avoid;
    }

    /* 8. SHOW PRINT-ONLY CONTENT */
    .d-print-block { 
        display: block !important; 
    }

    /* 9. OPTIMIZE CHARTS */
    canvas {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }
}

/* Ensure the checkbox has a visible border and background */
.form-check-input {
    border: 1px solid #adb5bd !important;
    background-color: #fff !important;
}

/* Ensure the checkmark color stands out against the background */
.form-check-input:checked {
    background-color: #198754 !important; /* Bootstrap success green */
    border-color: #198754 !important;
}

/* Ensure these buttons are invisible by default during page load */
#renewalNotifyBtn, 
#requestNotifyBtn,
#vetiBtn {
    display: none !important;
}

/* Only show them if they have the 'd-none' class removed by your JS */
#renewalNotifyBtn:not(.d-none), 
#requestNotifyBtn:not(.d-none),
#vetiBtn:not(.d-none) {
    display: inline-flex !important; /* Adjust if your layout needs block or flex */
}

/* veti button */
@keyframes pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(197, 48, 48, 0.7); }
  70% { transform: scale(1.03); box-shadow: 0 0 0 10px rgba(197, 48, 48, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(197, 48, 48, 0); }
}

.slide-panel {
    position: fixed;
    top: 0;
    right: -100%; /* Hidden off-screen by default */
    width: 100%;
    max-width: 400px; /* Perfect for mobile */
    height: 100%;
    background-color: white;
    box-shadow: -2px 0 10px rgba(0,0,0,0.1);
    transition: right 0.3s ease-in-out;
    z-index: 1050; /* Above everything */
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.slide-panel.active {
    right: 0; /* Slide into view */
}

/* Optional: Overlay to darken background */
.slide-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: none;
    z-index: 1040;
}

.slide-overlay.active {
    display: block;
}

.menu-rounded{
  border-radius:8px;
  border: 2px solid #73AD21;
 background-color:snow;
 color: white;
}

    /* This adds the red asterisk to any label associated with a required input */
.form-label.required::after {
    content: " *";
    color:red;
    font-weight: bold;
}