/* --- Global Styles & Variables --- */
:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --background-color: #f0f2f5;
    --surface-color: #ffffff;
    --text-color: #333;
    --light-text-color: #777;
    --border-color: #ddd;
    --danger-color: #dc3545;
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    --border-radius: 12px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    overflow: hidden;
    height: 100vh;
}

.app-container {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 480px; /* Typical mobile width */
    margin: 0 auto;
    background-color: var(--surface-color);
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
}

/* --- Page Transitions --- */
.page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Align content to the top */
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease-in-out, visibility 0.4s;
    overflow-y: auto;
}
#cover-page {
    justify-content: center; /* Center cover page content only */
}
.page.active {
    opacity: 1;
    visibility: visible;
    z-index: 10;
}

/* --- Cover Page --- */
#cover-page {
    /* background: linear-gradient(135deg, var(--primary-color), #0056b3);*/
    background: #72b3f1 !important;
    color: white;
    text-align: center;
}
#cover-page h1 { font-size: 3rem; font-weight: 700; }
#cover-page p { font-size: 1.2rem; margin-bottom: 30px; }

.no-data {
    text-align: center;
    vertical-align: middle;
    padding: 12px;
    font-weight: 500;
    color: #666;
}


/* --- Buttons --- */
.btn {
    padding: 15px 30px;
    border: none;
    border-radius: var(--border-radius);
    background-color: var(--surface-color);
    color: var(--primary-color);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
}
.btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}
.btn.btn-primary {
    background-color: var(--primary-color);
    color: white;
    width: 100%;
}

/* --- Forms (Login/Register/Profile/Customer) --- */
.form-container {
    width: 100%;
    max-width: 350px;
    padding: 20px;
    animation: fadeIn 0.5s ease;
    margin-top: 50px;
}
#auth-page .form-container { margin-top: 0; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.form-title { text-align: center; margin-bottom: 25px; font-size: 1.8rem; color: var(--text-color); }
.form-subtitle { text-align: center; margin-bottom: 25px; font-size: 1rem; color: var(--light-text-color); }
.input-group { position: relative; margin-bottom: 20px; }
    .input-group i {
        position: absolute;
        left: 15px;
        top: 18px;
        color: #000;
    }
.input-group input, .input-group textarea {
    width: 100%;
    padding: 15px 15px 15px 45px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: 1rem;
    background-color: #f9f9f9;
    font-family: 'Poppins', sans-serif;
}
.input-group textarea { padding-top: 15px; resize: vertical; }
.input-group input:focus, .input-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}
.input-group .file-label {
    position: absolute; left: 45px; top: 15px; color: var(--light-text-color);
}
.input-group input[type="file"] {
    padding-left: 45px;
    color: var(--text-color);
}
.form-links { text-align: right; margin-bottom: 15px; }
.form-links a, .form-switch-link a { color: var(--primary-color); text-decoration: none; font-weight: 600; }
.form-switch-link { text-align: center; margin-top: 20px; color: var(--light-text-color); }

/* --- App Header --- */
.app-header {
    position: fixed; top: 0; left: 0; right: 0;
    max-width: 480px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: 15px 20px; background-color: var(--surface-color);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); z-index: 100;
}
.app-header i { font-size: 1.5rem; cursor: pointer; color: var(--text-color); }
.header-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--primary-color);
}

/* --- Page Content Layout --- */
.page-content {
    padding-top: 70px; /* Header height + padding */
    width: 100%;
}
#dashboard-page .page-content { text-align: center; }

/* --- Side Menu --- */
.side-menu {
    position: fixed; top: 0; left: -280px;
    width: 280px; height: 100%;
    background-color: var(--surface-color); box-shadow: var(--shadow);
    z-index: 200; transition: left 0.3s ease-in-out;
    display: flex; flex-direction: column;
}
.side-menu.open { left: 0; }
.menu-header { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid var(--border-color); }
.menu-header h3 { font-size: 1.5rem; }
.menu-header i { font-size: 1.5rem; cursor: pointer; }
.side-menu ul { list-style: none; padding: 20px 0; }
.side-menu ul li a { display: flex; align-items: center; padding: 15px 20px; text-decoration: none; color: var(--text-color); font-size: 1.1rem; transition: background-color 0.2s; }
.side-menu ul li a i { margin-right: 15px; width: 24px; text-align: center; color: var(--light-text-color); }
.side-menu ul li a:hover { background-color: var(--background-color); }

/* --- Overlay for Side Menu --- */
.overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.5); z-index: 199;
    opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s;
}
.overlay.active { opacity: 1; visibility: visible; }

/* --- Search Customer Page --- */
.search-and-tabs-container { margin-bottom: 20px; }
.search-bar { position: relative; margin-bottom: 15px; }
.search-bar i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--light-text-color); }
.search-bar input { width: 100%; padding: 15px 15px 15px 45px; border: 1px solid var(--border-color); border-radius: var(--border-radius); font-size: 1rem; }
.tabs { display: flex; border: 1px solid var(--border-color); border-radius: var(--border-radius); overflow: hidden; }
.tab-link {
    flex-grow: 1; padding: 12px;
    background-color: #f9f9f9; border: none;
    font-size: 0.9rem; font-weight: 600;
    cursor: pointer; transition: background-color 0.2s, color 0.2s;
    border-right: 1px solid var(--border-color);
}
.tab-link:last-child { border-right: none; }
.tab-link.active { background-color: var(--primary-color); color: white; }

.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeIn 0.4s; }
.table-container-wrapper { width: 100%; }

/* --- Responsive & Horizontally Scrolling Tables --- */
.table-container { overflow-x: auto; width: 100%; }
/*/
.responsive-table { width: 100%; border-collapse: collapse; }
.responsive-table th, .responsive-table td {
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
    white-space: nowrap;
}
.responsive-table thead { background-color: var(--background-color); }
.responsive-table th { font-weight: 600; }
.responsive-table tbody tr:last-child td { border-bottom: none; }

*/




/* Styles for the responsive table */
.responsive-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
    display: flex; /* Use flex to allow tbody to scroll independently */
    flex-direction: column; /* Stack header and body vertically */
}

    .responsive-table thead,
    .responsive-table tbody {
        display: block; /* Make thead and tbody block-level for independent scrolling */
    }

        .responsive-table thead tr,
        .responsive-table tbody tr {
            display: flex; /* Use flex for table rows as well */
            width: 100%; /* Ensure rows take full width */
        }

    .responsive-table th,
    .responsive-table td {
        padding: 0.75rem;
        text-align: left;
        border-bottom: 1px solid #dee2e6;
        /* Adjust width for each column as needed */
        flex: 1; /* Distribute space equally among columns */
        /* Example specific widths, adjust as per your content */
        /*
    &:nth-child(1) { flex: 0 0 80px; } // Photo
    &:nth-child(2) { flex: 2; } // Name
    &:nth-child(3) { flex: 1.5; } // Mobile
    &:nth-child(4) { flex: 1.5; } // GST No
    &:nth-child(5) { flex: 1; } // Actions
    */
    }

    /* Specific style for the scrollable tbody */
    .responsive-table tbody {
        max-height: 330px; /* Adjust this value as needed. This is the height after which scroll appears. */
        overflow-y: auto; /* Adds a vertical scrollbar when content exceeds max-height */
        /* Optional: Add a border for visual separation */
        border: 1px solid #dee2e6;
        border-top: none; /* No top border if you want it to blend with thead */
    }

    /* Optional: To make header and body columns align perfectly,
   you often need to set explicit widths or flex-basis for TH and TD.
   This is a common challenge with scrollable tbody.
   You'll need to match the flex values or widths precisely for th and td.
*/
    .responsive-table th:nth-child(1),
    .responsive-table td:nth-child(1) {
        flex: 0 0 80px;
    }
    /* Photo */

    .responsive-table th:nth-child(2),
    .responsive-table td:nth-child(2) {
        flex: 2;
    }
    /* Name */

    .responsive-table th:nth-child(3),
    .responsive-table td:nth-child(3) {
        flex: 1.5;
    }
    /* Mobile */

    .responsive-table th:nth-child(4),
    .responsive-table td:nth-child(4) {
        flex: 1.5;
    }
    /* GST No */

    .responsive-table th:nth-child(5),
    .responsive-table td:nth-child(5) {
        flex: 1;
    }
/* Actions */


/* Hide scrollbar for webkit browsers (Chrome, Safari) if desired */
/*
.responsive-table tbody::-webkit-scrollbar {
    width: 0;
    background: transparent;
}
*/







/* Make the search customer table horizontally scrollable on ALL screen sizes */
.table-horizontal-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}


.welcome-logo-container img {
    
    height: 250px;
    border-radius: 50%; /* Makes the image container circular if needed */
    background-color: #fff; /* White background for the logo */
    /*box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
         padding: 5px;  Optional padding around the logo */
}

/* --- Dashboard Page Styles --- */

/* Ensure the dashboard page content has no extra top padding from the generic rule */
#dashboard-page .page-content {
    padding-top: 70px; /* Header height */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pushes footer buttons down */
    height: 100%;
}

/*.dashboard-logo-container {
    padding: 10px 0 25px 0;
    text-align: center;
}*/

    .dashboard-logo-container img {
        max-width: 150px;
        height: 150px;
        border-radius: 20%; /* Makes the image container circular if needed */
        background-color: #fff; /* White background for the logo */
        /*box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
         padding: 5px;  Optional padding around the logo */
    }

.dashboard-logo-container-login img {
    max-width: 150px;
    height: 130px;
    border-radius: 20%; /* Makes the image container circular if needed */
    background-color: #fff; /* White background for the logo */
    /*box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
         padding: 5px;  Optional padding around the logo */
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Creates a 2x2 grid */
    gap: 20px; /* Space between the grid items */
    width: 100%;
    padding: 0 10px; /* A little space from the edges */
}

.dashboard-card {
    background-color: #72b3f1; /* Light blue from the screenshot */
    border-radius: 20px;
    padding: 10px 10px;
    text-align: center;
    text-decoration: none;
    color: var(--text-color);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .dashboard-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
    }

    .dashboard-card .card-icon-container {
        margin-bottom: 15px;
        height: 70px; /* Fixed height for alignment */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .dashboard-card img {
        max-height: 100%;
        max-width: 80px; /* Adjust size as needed */
    }

    /* Style for the Font Awesome icon */
    .dashboard-card .card-icon-container i {
        font-size: 50px; /* Icon size */
        color: #fff; /* White building icon */
    }

    .dashboard-card p {
        font-weight: 600;
        font-size: 0.95rem;
        color: #fff; /* White text */
    }

.dashboard-footer-buttons {
    width: 100%;
    padding: 20px;
}

.btn-footer {
    width: 100%;
    text-align: center;
    background-color: #72b3f1;
    color: white;
    font-size: 1.1rem;
    padding: 15px;
    margin-bottom: 15px;
    display: block; /* Make it a block element */
    border-radius: 15px;
}

    .btn-footer:last-child {
        margin-bottom: 0;
    }



    /*---------------------*/
/* Change icon colors to white to be visible on the blue background */
#dashboard-page .app-header i {
    color: #fff;
    font-size: 1.8rem;
}

#dashboard-page .app-header {
    background-color: transparent;
    box-shadow: none;
    position: relative; /* Keep it in the flow */
}

.dashboard-header-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200px; /* Set the height of the blue area */
    background-color: #72b3f1; /* Light blue from screenshot */
    border-bottom-left-radius: 35px; /* Create the bottom curve */
    border-bottom-right-radius: 35px;
}
#dashboard-page {
    background-color: #f9f5ec4d !important;
}

/* Pull the logo up to overlap with the blue header */
    #dashboard-page .dashboard-logo-container {
        /* margin-top: -85px;  Negative margin to pull the logo up */
        position: relative; /* Needed for z-index to work */
        z-index: 1; /* Ensure logo is on top of the grid */
        padding-bottom: 20px;
    }

#dashboard-page .dashboard-grid {
    z-index: 1; /* Ensure grid is below the logo */
}


/* --- About Us Page Styles --- */
/*.about-us-container {
    text-align: center;
    padding: 20px;
}

.about-logo {
    max-width: 150px;
    margin-bottom: 15px;
    border-radius: 25px;
    background-color: #fff;
    box-shadow: var(--shadow);
}

.about-us-container h2 {
    font-size: 2rem;
    color: var(--primary-color);
}

.tagline {
    font-size: 1rem;
    color: var(--light-text-color);
    margin-bottom: 30px;
}

.about-text {
    text-align: justify;
    margin-bottom: 20px;
    line-height: 1.6;
}*/


/* --- Modal (Pop-up) Styles --- */
/*.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 300;*/ /* Higher than the overlay */
    /*display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

    .modal.open {
        opacity: 1;
        visibility: visible;
    }

.modal-content {
    position: relative;
    background-color: var(--surface-color);
    padding: 40px 25px 25px 25px;
    border-radius: var(--border-radius);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    width: 100%;
    max-width: 400px;
    text-align: center;
    animation: fadeIn 0.3s ease;*/ /* Reuse existing animation */
/*}

.modal-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 1.5rem;
    color: var(--light-text-color);
    cursor: pointer;
}*/

/* Reusing 'about-us' styles for the modal content */
/*.modal-content .about-logo {
    max-width: 120px;
    margin-bottom: 10px;
    border-radius: 20px;
}

.modal-content h2 {
    font-size: 1.8rem;
    color: var(--primary-color);
}

.modal-content .tagline {
    font-size: 1rem;
    color: var(--light-text-color);
    margin-bottom: 20px;
}

.modal-content .about-text {
    font-size: 0.95rem;
    text-align: center;
    margin-bottom: 20px;
    line-height: 1.6;
}

.modal-content .app-version {
    margin-top: 20px;
    color: var(--secondary-color);
    font-size: 0.9rem;
}*/

/* --- Responsive Fixes for Small Mobile Devices --- */

/* This media query targets screens with a width of 400px or less */
@media screen and (max-width: 400px) {

    /* Make the page scrollable if content overflows, which fixes the cut-off buttons */
    .page.active {
        overflow-y: auto;
    }

    /* 1. Reduce the height of the top blue header area */
    .dashboard-header-container {
        height: 160px; /* Reduced from 200px */
    }

    /* 2. Adjust page content padding to match the smaller header */
    #dashboard-page .page-content {
        padding-top: 100px; /* Reduced from 130px */
        justify-content: flex-start; /* Stop buttons from being pushed off-screen */
    }

    /* 3. Adjust the logo to fit the new header size */
    #dashboard-page .dashboard-logo-container {
        margin-top: -75px; /* Reduced from -85px */
        padding-bottom: 20px;
    }

    .dashboard-logo-container img {
        max-width: 150px; /* Make logo slightly smaller */
    }

    /* 4. Make the dashboard grid and cards smaller */
    .dashboard-grid {
        gap: 15px; /* Reduce space between cards */
        padding: 0 15px;
    }

    .dashboard-card {
        padding: 15px 5px; /* Reduce padding inside the card */
        border-radius: 15px;
    }

        /* 5. Reduce the size of the icons inside the cards */
        .dashboard-card .card-icon-container {
            height: 55px; /* Reduced from 70px */
            margin-bottom: 10px;
        }

        .dashboard-card img {
            max-height: 100%;
            max-width: 70px; /* Reduced from 80px */
        }

        .dashboard-card .card-icon-container i {
            font-size: 38px; /* Reduced from 50px */
        }

        /* 6. Make the text on the cards smaller */
        .dashboard-card p {
            font-size: 0.8rem; /* Reduced from 0.95rem */
        }

    /* 7. Make the footer buttons smaller to save space */
    .dashboard-footer-buttons {
        padding: 20px 15px;
    }

    .btn-footer {
        padding: 12px;
        font-size: 1rem;
        margin-bottom: 10px;
    }

    #pageLoader{
        display:none !important;
    }
}