/* --- NEW MODERN DESIGN SYSTEM --- */

/* 1. Root Variables & Font Import */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root {
    --primary-blue: #0d6efd;
    --primary-dark-blue: #0810a3;
    --secondary-green: #198754;
    --secondary-dark-green: #157347;
    --danger-red: #dc3545;
    --warning-yellow: #ff9800;
    --info-cyan: #0dcaf0;
    --light-gray: #f8f9fa;
    --medium-gray: #dee2e6;
    --dark-gray: #6c757d;
    --text-dark: #212529;
    --text-light: #ffffff;
    --body-bg: #eef2f6;
    --card-shadow: 0 4px 25px rgba(0, 0, 0, 0.07);
    --card-radius: 12px;
}

/* 2. Global Styles */
body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    background-color: var(--body-bg);
    color: var(--text-dark);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 3. Reusable Components */

/* --- Cards --- */
.card {
    background-color: var(--text-light);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: 25px;
    border: 1px solid #e9ecef;
}

/* --- Buttons --- */
.btn {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 500;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: all 0.2s ease-in-out;
    font-family: 'Poppins', sans-serif;
}

/* --- NEW: Tighter button style for header --- */
.btn-header-action {
    padding: 8px 16px;
    font-size: 15px;
    /* Slightly smaller text to match */
}

.btn-primary {
    background-color: var(--primary-blue);
    color: var(--text-light);
}

.btn-primary:hover {
    background-color: var(--primary-dark-blue);
}

.btn-success {
    background-color: var(--secondary-green);
    color: var(--text-light);
}

.btn-success:hover {
    background-color: var(--secondary-dark-green);
}

/* UPDATED .btn-danger to include hover */
.btn-danger {
    background-color: var(--danger-red);
    color: var(--text-light);
}

.btn-danger:hover {
    background-color: #b02a37;
}

/* Darker red hover */

/* UPDATED .btn-secondary to include hover */
.btn-secondary {
    background-color: var(--dark-gray);
    color: var(--text-light);
}

.btn-secondary:hover {
    background-color: #5a6268;
}

/* Darker gray */

/* ADDED .btn-info and its hover */
.btn-info {
    background-color: var(--info-cyan);
    color: var(--text-dark);
}

.btn-info:hover {
    background-color: #0baccc;
}

/* Darker cyan */

/* --- Forms --- */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
    color: #495057;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--medium-gray);
    border-radius: 8px;
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
}

/* --- Styles for Inline Form Validation --- */
.form-group .error-message {
    color: var(--danger-red);
    font-size: 14px;
    margin-top: 5px;
    display: none;
    /* Hidden by default */
}

.form-group input.is-invalid {
    border-color: var(--danger-red);
}

.form-group input.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25);
}

/* --- Pagination --- */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    /* This line creates the 20px space */
}

.pagination.hidden {
    display: none;
}

/* Find and replace this rule in your style.css */
.pagination button:disabled {
    background-color: var(--dark-gray);
    /* Use the theme's secondary gray color */
    opacity: 0.65;
    /* Make it slightly transparent */
    cursor: not-allowed;
}

/* --- Page Layouts --- */
.page-header {
    background: linear-gradient(90deg, #003270, #004A91);
    color: var(--text-light);
    padding: 25px 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* --- NEW: Header Content Wrapper --- */
.header-content-wrapper {
    max-width: 1400px;
    /* Same as page-container */
    margin: 0 auto;
    /* Center it */
    padding: 0 20px;
    /* Match page-container's side padding */
    position: relative;
    /* This is the new anchor for the buttons */
    text-align: center;
    /* This will center the H1 */
    box-sizing: border-box;
}

.page-header h1 {
    margin: 0;
    font-size: 28px;
}

.page-container {
    max-width: 1400px;
    margin: 30px auto;
    padding: 0 20px;
}

/* 4. Specific Page Styles */

/* --- Login Page (index.html) --- */
.login-page-wrapper {
    display: grid;
    /* This creates two perfectly equal columns, each taking 50% of the width */
    grid-template-columns: 1fr 1fr;
    width: 100%;
    height: 100vh;
    /* Allow scrolling if content overflows on short screens */
    overflow: hidden;
}

.login-promo-column {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--text-light);
    background: linear-gradient(135deg, #003270, #004A91);
    padding: 40px;
    box-sizing: border-box;
    overflow: hidden;
}

.promo-content .icon {
    font-size: 80px;
    line-height: 1;
    display: block;
    margin-bottom: 20px;
}

.promo-content h1 {
    font-size: 42px;
    font-weight: 700;
    margin: 0 0 15px 0;
}

.promo-content p {
    font-size: 18px;
    max-width: 400px;
    margin: 0 auto;
    opacity: 0.9;
}

.login-form-column {
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-card {
    width: 100%;
    max-width: 420px;
}

.login-card h2 {
    font-size: 28px;
    color: var(--primary-dark-blue);
    margin-bottom: 25px;
}

/* --- NEW: Style for the Login Error Box --- */
#error:not(:empty) {
    background-color: #fdebee;
    /* A very light red */
    color: var(--danger-red);
    border: 1px solid var(--danger-red);
    padding: 12px 15px;
    border-radius: 8px;
    /* Matches your form inputs */
    margin-bottom: 20px;
    /* Matches your form-group margin */
    text-align: center;
    font-weight: 500;
    animation: fadeIn 0.3s;
    /* Add a little fade-in effect */
}

.captcha-box {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.captcha-code {
    font-weight: 600;
    font-size: 20px;
    letter-spacing: 4px;
    background: #eee;
    padding: 10px;
    border-radius: 8px;
    flex-grow: 1;
    /* Add these 3 lines to center the SVG */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Style for the main login button inside the new layout */
.login-card button[type="submit"] {
    font-size: 18px;
    padding: 15px;
}

/* Login page short-viewport fixes are handled in design.css */

/* --- Dashboard (index.html) --- */
.nav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 25px;
    margin-bottom: 30px;
    /* <-- ADD THIS LINE */
}

.nav-card {
    background-color: var(--text-light);
    padding: 25px;
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    text-align: center;
    text-decoration: none;
    color: var(--text-dark);
    font-weight: 600;
    font-size: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    transition: all 0.3s ease;
}

.nav-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    color: var(--primary-blue);
}

.nav-card .icon {
    font-size: 48px;
}

/* --- Register Pages (register.html, etc.) --- */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0 25px;
    /* Sets row-gap to 0 and column-gap to 25px */
}

.tabs-container {
    display: flex;
    gap: 10px;
    border-bottom: 2px solid var(--medium-gray);
    margin-bottom: 25px;
}

.tab-button {
    padding: 15px 25px;
    border: none;
    background: none;
    font-size: 18px;
    font-weight: 600;
    color: var(--dark-gray);
    cursor: pointer;
    border-bottom: 4px solid transparent;
    transition: color 0.2s, border-color 0.2s;
    font-family: 'Poppins', sans-serif;
}

.tab-button.active,
.tab-button:hover {
    color: var(--primary-blue);
    border-bottom-color: var(--primary-blue);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.5s;
    padding-bottom: 30px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeIn 0.5s ease-out forwards;
}

.tab-action-button {
    margin-left: auto;
    /* Pushes the button to the right */
    align-self: center;
    /* Vertically centers the button with the tabs */
    border: 1px solid var(--medium-gray);
    background-color: transparent;
    color: var(--primary-blue);
    font-weight: 600;
    padding: 8px 16px;
    /* Adjust padding to fit nicely */
}

.tab-action-button:hover {
    background-color: var(--light-gray);
}

/* --- FIXES for Register Page Layout & Components --- */

/* 1. Fix Grand Total and Payment Button Styles */
.grand-total-section {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: var(--light-gray);
    border-radius: 8px;
    margin-top: 10px;
    margin-bottom: 20px;
}

.grand-total-section label {
    font-weight: 700;
    font-size: 20px;
    color: var(--primary-dark-blue);
    margin: 0;
}

.grand-total-section input {
    width: 200px;
    font-weight: 700;
    font-size: 24px;
    color: var(--primary-dark-blue);
    border: none;
    background: transparent;
    text-align: right;
    padding: 0;
}

/* --- Settlement Section (register.html) --- */
.settlement-section {
    margin: 20px 0 20px 0;
}

.settlement-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 16px;
    background: var(--light-gray);
    border: 1px solid var(--medium-gray);
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--primary-dark-blue);
    text-align: left;
    transition: background 0.2s, border-color 0.2s;
}

.settlement-toggle:hover {
    background: #e9ecef;
    border-color: var(--primary-blue);
}

.settlement-toggle i:first-child {
    margin-right: 8px;
}

.settlement-chevron {
    font-size: 13px;
    color: var(--dark-gray);
    transition: transform 0.25s ease;
}

.settlement-panel {
    display: none;
    margin-top: 8px;
    padding: 18px;
    background: var(--light-gray);
    border: 1px solid var(--medium-gray);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
}

.settlement-search-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: 12px;
}

.settlement-results {
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 10px;
    border-radius: 8px;
}

/* Individual result row */
.settlement-result-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border: 1px solid var(--medium-gray);
    border-radius: 8px;
    margin-bottom: 6px;
    background: var(--text-light);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    font-family: 'Poppins', sans-serif;
}

.settlement-result-row:hover {
    background: var(--light-gray);
    border-color: var(--primary-blue);
}

.settlement-result-row.selected {
    background: #dce8ff;
    border-color: var(--primary-dark-blue);
}

.settlement-result-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
}

.settlement-result-meta {
    font-size: 12px;
    color: var(--dark-gray);
}

.settlement-result-amount {
    text-align: right;
}

.settlement-result-type {
    font-size: 12px;
    font-weight: 700;
}

.settlement-result-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-dark-blue);
}

/* Selected settlement chip */
.settlement-chip {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--text-light);
    border: 2px solid var(--primary-dark-blue);
    border-radius: 8px;
}

.settlement-chip-text {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    font-family: 'Poppins', sans-serif;
}

.settlement-chip-clear {
    border: none;
    background: none;
    color: var(--danger-red);
    font-weight: 700;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.15s;
}

.settlement-chip-clear:hover {
    background: #fde8ea;
}


.payment-modes {
    display: grid;
    /* <-- CHANGED to grid */
    grid-template-columns: repeat(4, 1fr);
    /* <-- FORCED 4 equal columns */
    gap: 15px;
}

.payment-modes button {
    padding: 15px;
    border-radius: 8px;
    background: #e9ecef;
    cursor: pointer;
    font-weight: 500;
    font-size: 16px;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    color: #333;
    font-family: 'Poppins', sans-serif;
}

.payment-modes button:hover {
    border-color: #adb5bd;
}

.payment-modes button.active {
    background: var(--primary-blue);
    color: var(--text-light);
    border-color: var(--primary-dark-blue);
}

.denominations-grid input {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--medium-gray);
    border-radius: 8px;
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
    text-align: center;
    font-weight: 600;
}

.denominations-grid input:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
}

/* --- NEW: Add bottom margin ONLY to transfer modal grids --- */
#transferModal .denominations-grid {
    grid-template-columns: 1fr 1fr 1fr;
    margin-bottom: 20px;
}

/* 2. Fix Cash Calculator Modal */
.modal {
    display: none;
    /* Hide by default */
    position: fixed;
    z-index: 1001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /* overflow:hidden — the overlay never scrolls;
       the modal-content handles its own internal overflow */
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.6);
    /* These two lines center the content inside */
    align-items: center;
    justify-content: center;
}

/* This class is used by the JavaScript to show the modal */
.modal.active {
    display: flex;
    /* This is the key change to enable centering */
}

.modal-content {
    width: 80%;
    max-width: 800px;
    animation: fadeIn 0.3s;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--medium-gray);
    padding-bottom: 15px;
}

.modal-header h2 {
    margin: 0;
    color: var(--primary-dark-blue);
}

.close-btn {
    color: #aaa;
    font-size: 32px;
    font-weight: bold;
    cursor: pointer;
}

.cash-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-top: 20px;
}

.denominations-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    /* Increased gap for better spacing */
}

.change-summary .highlight {
    color: var(--primary-blue);
}

.change-summary .error {
    color: var(--danger-red);
}


/* 3. Redesign Transaction History Table */
#entryTable {
    border-collapse: collapse;
    box-shadow: var(--card-shadow);
    border-radius: var(--card-radius);
    overflow: hidden;
    /* This is key for the border-radius to work */
    table-layout: fixed;
    width: auto;
    white-space: nowrap;
    min-width: 100%;
}

#entryTable th,
#entryTable td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid var(--medium-gray);
    vertical-align: middle;
    /* Better alignment */
    word-wrap: break-word;
    /* Helps prevent long text from breaking the layout */
}

#entryTable th {
    background-color: var(--light-gray);
    font-weight: 600;
    font-size: 14px;
    color: var(--text-dark);
}

#entryTable tbody tr {
    background-color: var(--text-light);
    transition: background-color 0.2s ease;
}

#entryTable tbody tr:last-child td {
    border-bottom: none;
}

#entryTable tbody tr:hover {
    background-color: #f1f5f9;
}

/* Set a generous minimum width for the columns you want to be wider */
#entryTable th:nth-child(3),
#entryTable td:nth-child(3) {
    /* 3rd column: Customer */
    min-width: 170px;
}

#entryTable th:nth-child(4),
#entryTable td:nth-child(4) {
    /* 4th column: Service */
    min-width: 270px;
}

/* Optional: Set a width for the actions column to ensure buttons fit */
#entryTable th:nth-child(9),
#entryTable td:nth-child(9) {
    /* 9th column: Actions */
    min-width: 150px;
}

/* Redesign Expense History Table */
/* Redesign Expense AND Bank Accounts History Table */
#expenseTable {
    border-collapse: collapse;
    box-shadow: var(--card-shadow);
    border-radius: var(--card-radius);
    overflow: hidden;
    table-layout: fixed;
    width: auto;
    white-space: nowrap;
    min-width: 100%;
}

#expenseTable th,
#expenseTable td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid var(--medium-gray);
    vertical-align: middle;
    word-wrap: break-word;
}

#expenseTable th {
    background-color: var(--light-gray);
    font-weight: 600;
    font-size: 14px;
    color: var(--text-dark);
}

#expenseTable {
    background-color: var(--text-light);
    transition: background-color 0.2s ease;
}

#expenseTable tbody tr:last-child td,
#bankAccountsTable tbody tr:last-child td {
    border-bottom: none;
}

#expenseTable tbody tr:hover {
    background-color: #f1f5f9;
}

/* Set minimum widths for Expense Table columns */
#expenseTable th:nth-child(3),
#expenseTable td:nth-child(3) {
    /* Type */
    min-width: 350px;
}

#expenseTable th:nth-child(6),
#expenseTable td:nth-child(6) {
    /* Actions */
    width: 150px;
}

/* Redesign Hold History Table */
#holdTable {
    border-collapse: collapse;
    box-shadow: var(--card-shadow);
    border-radius: var(--card-radius);
    overflow: hidden;
    table-layout: fixed;
    width: auto;
    white-space: nowrap;
    min-width: 100%;
}

#holdTable th,
#holdTable td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid var(--medium-gray);
    vertical-align: middle;
    word-wrap: break-word;
}

#holdTable th {
    background-color: var(--light-gray);
    font-weight: 600;
    font-size: 14px;
    color: var(--text-dark);
}

#holdTable tbody tr {
    background-color: var(--text-light);
    transition: background-color 0.2s ease;
}

#holdTable tbody tr:last-child td {
    border-bottom: none;
}

#holdTable tbody tr:hover {
    background-color: #f1f5f9;
}

/* Set minimum widths for Hold Table columns */
#holdTable th:nth-child(3),
#holdTable td:nth-child(3) {
    /* Service */
    min-width: 250px;
}

#holdTable th:nth-child(4),
#holdTable td:nth-child(4) {
    /* Service */
    min-width: 350px;
}

#holdTable th:nth-child(10),
#holdTable td:nth-child(10) {
    /* Actions */
    min-width: 150px;
}

/* 4. Increase Page Container Width */
.page-container {
    max-width: 1400px;
}

/* --- Kiosk Display (display.html) --- */
.display-body {
    background-color: #f0f4f8;
    font-family: "Poppins", sans-serif;
    height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    overflow: hidden;
}

.display-header {
    background: var(--text-light);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.display-main {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    padding: 20px;
}

.token-column {
    background: var(--text-light);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    display: flex;
    flex-direction: column;
    text-align: center;
}

.token-column h2 {
    padding: 15px;
    margin: 0;
    font-size: 24px;
    color: var(--text-light);
    font-weight: 600;
    border-radius: var(--card-radius) var(--card-radius) 0 0;
}

#main-display-col h2 {
    background-color: var(--primary-blue);
}

#express-display-col h2 {
    background-color: var(--secondary-green);
}

#emergency-display-col h2 {
    background-color: var(--danger-red);
}

.current-token-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    color: var(--text-dark);
}

.token-number {
    font-size: 10vw;
    font-weight: 700;
    line-height: 1;
    color: var(--text-dark);
}

.token-name {
    font-size: 2.5vw;
    font-weight: 500;
    margin-top: 10px;
    color: #495057;
}

.display-footer {
    background: var(--primary-dark-blue);
    color: var(--text-light);
    padding: 10px;
    font-size: 24px;
    font-weight: 500;
    text-align: center;
    overflow: hidden;
}

.marquee-content {
    display: inline-block;
    white-space: nowrap;
    padding-left: 100%;
    animation: scroll-left 60s linear infinite;
}

@keyframes scroll-left {
    from {
        transform: translateX(50%);
    }

    to {
        transform: translateX(-100%);
    }
}

/* --- FIX for Services List Table in register.html --- */

.service-list-container {
    margin-bottom: 30px;
    /* This adds the 20px space below the table */
}

.service-list-container h3 {
    margin-bottom: 15px;
    color: var(--primary-dark-blue);
    text-align: center;
    font-weight: 600;
}

/* --- NEW: Style for scrollable tables --- */
.table-wrapper {
    width: 100%;
    overflow-x: auto;
    /* This enables horizontal scrolling */
}


/* Make the services table look like the main history table */
#currentServicesList {
    width: 100%;
    border-collapse: collapse;
    box-shadow: var(--card-shadow);
    border-radius: var(--card-radius);
    overflow: hidden;
    /* This is key for the border-radius to work */
}

#currentServicesList th,
#currentServicesList td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid var(--medium-gray);
    vertical-align: middle;
    /* Better alignment */
}

#currentServicesList th {
    background-color: var(--light-gray);
    font-weight: 600;
    font-size: 14px;
    color: var(--text-dark);
}

#currentServicesList tbody tr {
    background-color: var(--text-light);
    transition: background-color 0.2s ease;
}

#currentServicesList tbody tr:last-child td {
    border-bottom: none;
}

#currentServicesList tbody tr:hover {
    background-color: #f1f5f9;
}

/* This targets the 'Remove' button specifically */
#currentServicesList .btn-remove {
    background-color: var(--danger-red);
    color: var(--text-light);
    padding: 6px 12px;
    font-size: 14px;
}

/* Add this new rule */
#currentServicesList th:nth-child(4),
#currentServicesList td:nth-child(4) {
    min-width: 150px;
    /* Ensures a minimum size */
    width: 150px;
    /* Sets the fixed width */
    text-align: center;
    /* Centers the button group visually */
}

/* --- NEW: Style for the 3-column stats grid --- */
.stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* On larger screens, force 3 columns */
@media (min-width: 992px) {
    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Style adjustments for stats inside nav-cards */
.stats-grid .nav-card h3 {
    font-size: 18px;
    font-weight: 500;
    color: var(--dark-gray);
    margin: 0;
}

.stats-grid .nav-card p {
    font-size: 32px;
    font-weight: 700;
    color: var(--primary-dark-blue);
    margin: 10px 0 0 0;
}

.stats-grid .nav-card:hover {
    transform: scale(1.05);
    /* Apply a 5% zoom effect */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    /* Keep the enhanced shadow */
}

/* --- Styles for In-line Table Editing & Actions --- */
tr.editing td {
    background-color: #fff3cd !important;
}

/* This rule styles the text boxes that appear when editing */
tr.editing input,
tr.editing select {
    width: 100%;
    padding: 12px 15px;
    /* Matched to form-group */
    border: 1px solid var(--medium-gray);
    /* Matched to form-group */
    border-radius: 8px;
    /* Matched to form-group */
    font-size: 16px;
    /* Matched to form-group */
    font-family: 'Poppins', sans-serif;
    /* Matched to form-group */
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

tr.editing input:focus tr.editing select:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
    /* Matched to form-group */
}

/* Set a specific width for all number inputs during editing */
tr.editing input[type="number"] {
    min-width: 120px;
}

/* Give the Contact Number field more space */
tr.editing input[id="edit-contactNumber"] {
    min-width: 150px;
}

/* --- Set a specific width for the Mode field during editing --- */
tr.editing input[id="edit-paymentMode"],
tr.editing select[id="edit-paymentMode"] {
    min-width: 150px;
}

/* Set specific widths for Hold Register edit fields */
tr.editing input[id="edit-amount"] {
    min-width: 120px;
}

tr.editing input[id="edit-platform"],
tr.editing select[id="edit-status"] {
    min-width: 150px;
}

/* This sets the smaller size for all buttons in the table's action column */
/* --- Styles for Action Buttons inside the table --- */
.table-actions {
    display: flex;
    flex-direction: column;
    /* This stacks the buttons vertically */
    gap: 5px;
    /* This adds a 5px space between them */
}

.table-actions .btn {
    width: 100%;
    /* This makes each button stretch to the full cell width */
    padding: 6px 12px;
    font-size: 14px;
    margin-right: 0;
    box-sizing: border-box;
    /* Ensures padding is included in the width */
}

/* This styles the 'Edit' button (Green with White text) */
.table-actions .btn-edit {
    background-color: var(--secondary-green);
    /* Changed to green */
    color: var(--text-light);
    /* Changed to white */
}

.table-actions .btn-edit:hover {
    background-color: var(--secondary-dark-green);
}

/* This styles the 'Delete' and 'Cancel' buttons */
.table-actions .btn-danger {
    background-color: var(--danger-red);
    color: var(--text-light);
}

/* This styles the 'Save' button (Blue with White text) */
.table-actions .btn.save {
    background-color: var(--primary-blue);
    color: var(--text-light);
}

/* --- This hides the on-screen receipt element --- */
#printable-receipt {
    display: none;
}

/* --- Styles for Queue Admin Page --- */
.admin-controls .button-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding-bottom: 20px;
}

/* Pause button color and hover effect */
.admin-controls .btn-pause {
    background-color: var(--danger-red);
    color: var(--text-light);
}

.admin-controls .btn-pause:hover {
    background-color: #b02a37;
    /* Darker red */
}

/* Reset Queue button hover effect */
.admin-controls .btn-secondary:hover {
    background-color: #5a6268;
    /* Darker grey */
}

.issued-tokens-section,
.paused-list {
    margin-top: 20px;
    border-top: 1px solid var(--medium-gray);
}

.issued-tokens-section h3,
.paused-list h3 {
    text-align: center;
    color: var(--primary-dark-blue);
}

/* Grid layout for token lists */
.token-list,
.paused-list ul {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    padding: 15px;
    /* Added padding */
    list-style-type: none;
    background: var(--light-gray);
    /* Added background color */
    border-radius: 8px;
    /* Added rounded corners */
}

/* Scoped styles for content inside the new token cards */
.token-list .nav-card h3,
.paused-list .nav-card h3 {
    font-size: 14px;
    font-weight: 500;
    color: var(--dark-gray);
    margin: 0;
    word-break: break-word;
}

.token-list .nav-card p,
.paused-list .nav-card p {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-dark-blue);
    margin: 0;
}

.no-tokens-message {
    text-align: center;
    color: var(--text-dark);
    font-style: normal;
    /* Removed italics */
    /* This next line ensures it spans all columns in the grid */
    grid-column: 1 / -1;
}

/* Override hover animation for token cards to zoom */
.token-list .nav-card:hover,
.paused-list .nav-card:hover {
    transform: scale(1.05);
}

/* Increase size of admin control buttons for consistency */
.admin-controls .button-group .btn {
    padding: 15px;
    font-size: 18px;
}

/* --- Styles for Token Printing --- */
#printable-area {
    display: none;
}

@media print {

    #printable-area,
    #printable-area * {
        display: block !important;
        visibility: visible !important;
    }

    #printable-area {
        position: absolute;
        left: 0;
        top: 0;
        width: 58mm;
        font-family: 'Courier New', Courier, monospace;
        font-size: 10px;
        color: #000;
    }

    #printable-area .center-text {
        text-align: center;
    }

    #printable-area .header {
        font-size: 14px;
        font-weight: bold;
    }

    #printable-area p {
        margin: 3px 0;
    }

    #printable-area hr {
        border: none;
        border-top: 1px dashed #000;
        margin: 5px 0;
    }
}

/* --- Styles for Display Page --- */
.display-page {
    background-color: #EEF5FF;
    font-family: 'Inter', 'Anek Malayalam', sans-serif;
    margin: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* Header Redesign */
.display-page .header {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    /* Changed to white */
    padding: 5px 0;
    flex-shrink: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    /* Consistent shadow */
}

.display-page .logo {
    height: 50px;
    margin: 5px 15px;
}

.display-page .headtext {
    color: var(--primary-dark-blue);
    /* Changed to blue */
    font-size: 4vh;
    font-weight: 700;
}

/* Main Content Area */
.display-page main {
    flex-grow: 1;
    display: grid;
    grid-template-rows: calc(45% - 10px) calc(55% - 10px);
    gap: 20px;
    padding: 20px;
    overflow: hidden;
    box-sizing: border-box;
}

.display-page #token-display-area {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

/* Token Card Redesign */
.display-page .token-column {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.18), 0 1px 4px rgba(0,0,0,0.10);
    border: 1px solid rgba(255,255,255,0.08);
    display: flex;
    flex-direction: column;
    text-align: center;
    overflow: hidden;
}

.display-page .token-column h2 {
    padding: 13px 16px;
    margin: 0;
    font-size: 1.9vw;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.01em;
    line-height: 1.2;
}

.display-page #main-display-col h2 {
    background: linear-gradient(135deg, #003270 0%, #004A91 100%);
}

.display-page #express-display-col h2 {
    background: linear-gradient(135deg, #065f46 0%, #10b981 100%);
}

.display-page #emergency-display-col h2 {
    background: linear-gradient(135deg, #991b1b 0%, #ef4444 100%);
}

.display-page .current-token-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    perspective: 500px;
}

.display-page .token-number {
    font-family: 'Inter', sans-serif;
    font-size: 8.5vw;
    font-weight: 900;
    line-height: 1;
    color: #003270;
    letter-spacing: -0.04em;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.45s ease;
    transform-style: preserve-3d;
}

.display-page .token-number.updating {
    transform: rotateX(180deg);
    opacity: 0;
}

.display-page .token-name {
    font-family: 'Anek Malayalam', 'Inter', sans-serif;
    font-size: 1.85vw;
    font-weight: 600;
    margin-top: 6px;
    color: #475569;
    letter-spacing: 0.01em;
}

/* Media Area */
.display-page #media-area {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 100%;
    /* This is the critical line */
    gap: 20px;
    overflow: hidden;
}

.display-page #player,
.display-page .swiper {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,74,145,0.12);
    border: 1px solid #d0e3f7;
    background: #000;
    width: 100%;
    height: 100%;
    position: relative;
}

/* YouTube IFrame API injects an <iframe> inside #player.
   Give it an explicit size so YouTube always sees a desktop-width player.
   YouTube switches to mobile controls when the iframe is narrower than ~700px.
   min-width: 640px guarantees the desktop player UI is always used. */
.display-page #player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    min-width: 640px;
    border: 0;
}

.display-page .mySlides {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Marquee Redesign */
.display-page .marquee {
    background: linear-gradient(135deg, #003270 0%, #004A91 60%, #0066CC 100%);
    color: #ffffff;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
    border-top: 2px solid rgba(255,255,255,0.12);
    width: 100%;
    padding: 7px 0;
    font-size: 3.5vh;
    font-weight: 600;
    line-height: 1.3;
    overflow: hidden;
    flex-shrink: 0;
}

.display-page .marquee-content {
    display: inline-block;
    white-space: nowrap;
    padding-left: 100%;
    animation: scroll-left 600s linear infinite;
}

.display-page .marquee span {
    background: rgba(255,255,255,0.14);
    padding: 2px 12px;
    border-radius: 4px;
    display: inline;
}

@keyframes scroll-left {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

/* Sound activation overlay */
.display-page #sound-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 48px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    z-index: 1000;
}

/* Animation keyframes moved from display.html */
@keyframes fade {
    from {
        opacity: .4;
    }

    to {
        opacity: 1;
    }
}

/* --- Styles for New Swiper Carousel --- */
.swiper {
    width: 100%;
    height: 100%;
    border-radius: var(--card-radius, 12px);
}

.swiper-slide {
    color: white;
    overflow: hidden;
    /* This is the essential positioning context for the content */
    position: relative;

    /* Background Image Styles */
    background-color: #000;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.slide-content {
    /* Base positioning and width */
    position: absolute;
    width: 60%;
    top: 50%;

    /* Other styles */
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Specific rules for horizontal position and vertical alignment */
.content-left {
    left: 40px;
    /* Position from the left edge */
    transform: translateY(-50%);
    /* Center vertically */
    align-items: flex-start;
    text-align: left;
}

.content-center {
    left: 50%;
    /* Position from the center */
    transform: translate(-50%, -50%);
    /* Center both horizontally and vertically */
    align-items: center;
    text-align: center;
}

.content-right {
    right: 40px;
    /* Position from the right edge */
    transform: translateY(-50%);
    /* Center vertically */
    align-items: flex-end;
    text-align: right;
}

.slide-content>* {
    margin: 0;
}

/* Responsive text styles with corrected scaling */
.slide-content .top-title {
    font-size: clamp(14px, 1.25vw, 24px);
    /* Corrected scaling */
    line-height: 1.3;
    font-weight: 500;
    margin-bottom: 0.8em;
}

.slide-content .main-title {
    font-size: clamp(20px, 2.1vw, 40px);
    /* Corrected scaling */
    line-height: 1.1;
    font-weight: 700;
    margin-bottom: 0.3em;
}

.slide-content .sub-title {
    font-size: clamp(14px, 1.25vw, 24px);
    /* Corrected scaling */
    line-height: 1.4;
    font-weight: 500;
    margin-bottom: 1em;
}

.slide-content .btn {
    font-size: clamp(14px, 1.25vw, 24px);
    /* Corrected scaling */
    line-height: 1.5;
    padding: 0.4em 0.9em;
    font-weight: 700;
    font-family: "Anek Malayalam", sans-serif;
    /* Add this line */
    border-radius: 50px;
    /* Add this line */
}

/* Hide the Swiper loading spinner */
.swiper-lazy-preloader {
    opacity: 0;
}

.swiper-slide .swiper-lazy {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

/* Redesign Expense AND Bank Accounts History Table */
#bankAccountsTable,
#customersTable,
#servicesTable {
    border-collapse: collapse;
    box-shadow: var(--card-shadow);
    border-radius: var(--card-radius);
    overflow: hidden;
    table-layout: fixed;
    width: auto;
    white-space: nowrap;
    min-width: 100%;
}

#bankAccountsTable th,
#bankAccountsTable td,
#customersTable th,
#customersTable td,
#servicesTable th,
#servicesTable td {
    padding: 15px;
    text-align: center;
    border-bottom: 1px solid var(--medium-gray);
    vertical-align: middle;
    word-wrap: break-word;
}

#bankAccountsTable th,
#customersTable th,
#servicesTable th {
    background-color: var(--light-gray);
    font-weight: 600;
    font-size: 14px;
    color: var(--text-dark);
}

#bankAccountsTable tbody tr,
#customersTable tbody tr,
#servicesTable tbody tr {
    background-color: var(--text-light);
    transition: background-color 0.2s ease;
}

#bankAccountsTable tbody tr:last-child td,
#customersTable tbody tr:last-child td,
#servicesTable tbody tr:last-child td {
    border-bottom: none;
}

#bankAccountsTable tbody tr:hover,
#customersTable tbody tr:hover,
#servicesTable tbody tr:hover {
    background-color: #f1f5f9;
}

/* Action column width for Bank/Customer tables (3rd column) */
#bankAccountsTable th:nth-child(1),
#bankAccountsTable td:nth-child(1) {
    width: 600px;
}

/* Action column width for Bank/Customer tables (3rd column) */
#bankAccountsTable th:nth-child(4),
#bankAccountsTable td:nth-child(4),
#customersTable th:nth-child(3),
#customersTable td:nth-child(3) {
    width: 150px;
}

/* Align Customer Name (1st column) to the left */
#customersTable th:nth-child(1),
#customersTable td:nth-child(1) {
    text-align: left;
}

/* --- ADD THESE NEW RULES FOR SERVICES TABLE --- */
/* Action column width for Services table (5th column) */
#servicesTable th:nth-child(6),
#servicesTable td:nth-child(6) {
    width: 150px;
}

/* Align Service Name (1st column) to the left */
#servicesTable th:nth-child(1),
#servicesTable td:nth-child(1) {
    text-align: left;
}

/* --- END ADDED RULES --- */
/* Redesign History Tables */
#inventoryTable {
    border-collapse: collapse;
    box-shadow: var(--card-shadow);
    border-radius: var(--card-radius);
    overflow: hidden;
    table-layout: fixed;
    width: auto;
    white-space: nowrap;
    min-width: 100%;
}

#inventoryTable th,
#inventoryTable td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid var(--medium-gray);
    vertical-align: middle;
    word-wrap: break-word;
}

#inventoryTable th {
    background-color: var(--light-gray);
    font-weight: 600;
    font-size: 14px;
    color: var(--text-dark);
}

#inventoryTable tbody tr {
    background-color: var(--text-light);
    transition: background-color 0.2s ease;
}

#inventoryTable tbody tr:last-child td {
    border-bottom: none;
}

#inventoryTable tbody tr:hover {
    background-color: #f1f5f9;
}

/* --- Styles for Inventory Table Columns --- */

/* 1. Center align all columns by default */
#inventoryTable th,
#inventoryTable td {
    text-align: center;
}

/* 2. Set Name column width and align its text to the left */
#inventoryTable th:nth-child(1),
#inventoryTable td:nth-child(1) {
    min-width: 350px;
    text-align: left;
}

/* 3. Set Action column width */
#inventoryTable th:nth-child(7),
#inventoryTable td:nth-child(7) {
    width: 150px;
}

/* --- Styles for Inventory Status --- */
.status-unavailable {
    color: var(--danger-red);
    font-weight: 600;
}

.status-low {
    color: var(--warning-yellow);
    font-weight: 600;
}

.status-available {
    color: var(--secondary-green);
    font-weight: 600;
}

/* --- Styles for Denomination Warnings --- */
.denom-unavailable {
    color: var(--danger-red);
    font-weight: 600;
}

.denom-low {
    color: var(--warning-yellow);
    font-weight: 600;
}

/* --- Styles for Autocomplete Dropdown --- */
.autocomplete-container {
    position: relative;
}

.autocomplete-items {
    position: absolute;
    z-index: 99;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 200px;
    overflow-y: auto;
    background-color: white;
    border-radius: 0 0 8px 8px;
}

.autocomplete-items:not(:empty) {
    border: 1px solid var(--medium-gray);
    border-top: none;
}

.autocomplete-items div {
    padding: 10px;
    cursor: pointer;
}

.autocomplete-items div:hover {
    background-color: #e9e9e9;
}

.autocomplete-item-active {
    background-color: var(--primary-blue) !important;
    color: #ffffff;
}

.add-new-service {
    font-style: italic;
    color: var(--secondary-green);
    font-weight: 600;
}

/* Utility class to make a grid item span the full width of its container */
.full-width-grid-item {
    grid-column: 1 / -1;
}

/* --- Definitive Styles for Scrolling Multi-Select Field --- */

/* 1. The main wrapper: Sets the position anchor and fixed width. */
.multi-select-wrapper {
    position: relative;
    width: 150px;
}

/* 2. The visible input container: Handles the scrolling content. */
.multi-select-container {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 10px;
    border: 1px solid var(--medium-gray);
    border-radius: 8px;
    background-color: white;
    cursor: text;
    height: 49px;
    box-sizing: border-box;
    overflow-x: auto;
    /* Enable horizontal scrolling */
    overflow-y: hidden;
    /* Prevent vertical scrollbar */
    white-space: nowrap;
    /* Keep all tags on one line */
}

.multi-select-container:focus-within {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
}

/* 3. The tags and the actual input field inside the container. */
.selected-tags {
    display: flex;
    gap: 5px;
}

.tag {
    background-color: var(--primary-blue);
    color: white;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.tag .close {
    cursor: pointer;
    font-weight: bold;
}

.multi-select-container input#edit-paymentMode {
    border: none;
    outline: none;
    padding: 0;
    background: transparent;
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
    min-width: 80px;
    flex-grow: 1;
}

/* 4. The dropdown: Positioned absolutely relative to the wrapper. */
.multi-select-wrapper .autocomplete-items {
    position: absolute;
    top: 100%;
    /* Position it directly below the wrapper */
    left: 0;
    width: 100%;
    /* Match the wrapper's width */
    z-index: 100;
    /* Ensure it appears on top of other content */
}

/* --- Custom Scrollbar for Multi-Select Field --- */

/* For Webkit Browsers (Chrome, Safari, Edge) */
.multi-select-container::-webkit-scrollbar {
    height: 5px;
    /* Makes the scrollbar thinner */
}

.multi-select-container::-webkit-scrollbar-track {
    background: var(--light-gray);
    /* Light grey track */
    border-radius: 10px;
}

.multi-select-container::-webkit-scrollbar-thumb {
    background: var(--medium-gray);
    /* Darker grey handle */
    border-radius: 10px;
}

.multi-select-container::-webkit-scrollbar-thumb:hover {
    background: var(--dark-gray);
    /* Even darker on hover */
}

/* For Firefox */
.multi-select-container {
    scrollbar-width: thin;
    /* Makes the scrollbar thin */
    scrollbar-color: var(--medium-gray) var(--light-gray);
    /* thumb and track color */
}

/* --- Styles for Table Controls (Search & Sort) --- */
.table-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    /* Allows controls to stack on smaller screens */
    margin-bottom: 20px;
    gap: 20px;
}

.table-controls .form-group {
    margin-bottom: 0;
    /* Override default margin */
    display: flex;
    align-items: center;
    gap: 10px;
}

.table-controls .search-bar {
    flex-grow: 1;
    /* Allows search bar to take available space */
}

.table-controls input,
.table-controls select {
    /* Use width: auto for selects so they only take the space they need */
    width: auto;
    min-width: 150px;
}

.table-controls .search-bar input {
    width: 100%;
    /* Make search input take full width of its container */
}

/* --- FINAL GRID-BASED STYLES for Stacked Token Cards --- */

.display-page .token-column {
    display: flex;
    flex-direction: column;
}

/* 1. The stack is now a CSS Grid container */
.display-page .token-stack {
    flex-grow: 1;
    display: grid;
    grid-template-rows: 1fr auto;
    /* Top card is flexible, bottom is fixed height */
    min-height: 0;
}

/* 2. The current token card is positioned within the grid */
.display-page .current-token-card {
    background: #ffffff;
    border-bottom: 1px solid var(--medium-gray, #dee2e6);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: var(--card-radius, 12px);
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
    /* Sits on top */
    overflow: hidden;
    min-height: 0;
    grid-row: 1 / 2;
    /* Occupies the first row */
    grid-column: 1 / 2;
    margin-bottom: -40px;
    /* Overlap effect: pulls the row below it upwards */
}

/* 3. The slider wrapper is also positioned in the grid */
.display-page .upcoming-tokens-wrapper {
    background: linear-gradient(90deg, #022f7c, #007bff);
    border-radius: var(--card-radius, 12px);
    box-shadow: var(--card-shadow, 0 4px 25px rgba(0, 0, 0, 0.07));
    position: relative;
    z-index: 1;
    /* Sits behind */
    overflow: hidden;
    grid-row: 2 / 3;
    /* Occupies the second row */
    grid-column: 1 / 2;
    height: 100px;
    /* Give it a sufficient, fixed height */
    padding-top: 40px;
    /* Creates top padding to clear the card above */
    box-sizing: border-box;
}

/* This is the track that will move up with the slide-to-top animation */
.display-page .upcoming-token-slider {
    width: 100%;
    transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.display-page .upcoming-token {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-light, #ffffff);
    /* CHANGED: Set font size as requested */
    font-size: 1.7vw;
    height: 60px;
    padding: 0 20px;
    box-sizing: border-box;
}

.display-page .upcoming-token .upcoming-id {
    font-weight: 700;
}

.display-page .upcoming-token .upcoming-name {
    font-weight: 400;
    opacity: 0.9;
}

/* --- Styles for Empty Queue Message --- */
.display-page .no-one-in-queue-message {
    display: none;
    /* Hidden by default */
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    font-size: 1.7vw;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    box-sizing: border-box;
}

/* When the wrapper has the 'is-empty' class, show the message */
.display-page .upcoming-tokens-wrapper.is-empty .no-one-in-queue-message {
    display: flex;
}

/* And hide the slider */
.display-page .upcoming-tokens-wrapper.is-empty .upcoming-token-slider {
    display: none;
}

/* --- Styles for Active Token List in Register --- */
.token-chip-container {
    display: flex;
    flex-wrap: nowrap;
    /* Keep on one line */
    gap: 10px;
    overflow-x: auto;
    /* Allow horizontal scrolling */
    padding: 10px;
    background-color: var(--light-gray);
    border-radius: 8px;
    min-height: 40px;
    /* Give it some height even when empty */
    align-items: center;
}

.token-chip {
    background-color: var(--primary-blue);
    color: var(--text-light);
    padding: 8px 15px;
    border-radius: 20px;
    /* Pill shape */
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
    white-space: nowrap;
    /* Prevent chips from wrapping text */
}

.token-chip:hover {
    background-color: var(--primary-dark-blue);
}

.token-chip.selected {
    background-color: var(--secondary-green);
}

.token-chip.selected:hover {
    background-color: var(--secondary-dark-green);
}

.token-chip strong {
    font-weight: 700;
    margin-right: 5px;
}

.token-chip-container .no-tokens-message {
    color: var(--text-dark);
    /* Changed to black */
    width: 100%;
    /* Added */
    text-align: center;
    /* Added */
}

/* --- Styles for Paused Transactions --- */
.form-actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 10px;
}

.form-actions-grid .btn {
    width: 100%;
    padding: 15px;
    font-size: 18px;
}

.btn-warning {
    background-color: var(--warning-yellow);
    color: var(--text-dark);
    font-weight: 600;
}

.btn-warning:hover {
    background-color: #e68a00;
}

.btn-pause {
    background-color: var(--danger-red);
    color: var(--text-light);
}

.btn-pause:hover {
    background-color: #b02a37;
    /* Darker red */
}

#paused-transactions-card {
    margin-top: 30px;
}

#paused-transactions-list .no-tokens-message {
    color: var(--text-dark);
    /* Changed to black */
    font-style: normal;
    /* Changed to regular text */
    text-align: center;
}

.paused-transaction-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background-color: var(--light-gray);
    border-radius: 8px;
    border: 1px solid var(--medium-gray);
}

.paused-transaction-item div {
    font-size: 16px;
}

.paused-transaction-item strong {
    color: var(--primary-dark-blue);
    font-size: 18px;
}

.paused-transaction-item .btn {
    padding: 8px 15px;
}

/* --- NEW: Footer Styles --- */
.main-footer {
    background-color: #111827;
    /* A slightly lighter dark blue */
    color: #ecf0f1;
    /* Light gray text */
    font-size: 15px;
    line-height: 1.6;
}

.footer-top-bar {
    padding: 40px 20px;
    /* Match page container padding */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    border-bottom: 1px solid #34495e;
    max-width: 1400px;
    /* Match page container width */
    margin: 0 auto;
    /* Center the bar */
    box-sizing: border-box;
    /* Include padding in the width */
}

/* --- NEW: Footer column widths for large screens --- */
@media (min-width: 768px) {
    .footer-top-bar {
        /* On larger screens, use the 40/30/30 split */
        grid-template-columns: 4fr 3fr 3fr;
    }
}

.footer-column h4 {
    color: #ffffff;
    font-size: 18px;
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 2px solid var(--primary-blue);
    padding-bottom: 5px;
    display: inline-block;
}

.footer-column p {
    margin: 0 0 10px 0;
    padding-right: 70px;
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column ul li {
    margin-bottom: 10px;
}

.footer-column ul li i {
    margin-right: 10px;
    color: var(--primary-blue);
    width: 20px;
    text-align: center;
}

.footer-column a {
    color: #ecf0f1;
    text-decoration: none;
    transition: color 0.2s;
}

.footer-column a:hover {
    color: var(--primary-blue);
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    font-size: 24px;
}

.footer-bottom-bar {
    color: #f8f9fa;
    /* Light text */
    padding: 20px 20px;
    /* Match page container padding */
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    max-width: 1400px;
    /* Match page container width */
    margin: 0 auto;
    /* Center the bar */
    box-sizing: border-box;
    /* Include padding in the width */
}

.footer-bottom-bar p {
    margin: 0;
}

.footer-bottom-bar a {
    color: #f8f9fa;
    text-decoration: none;
    font-weight: 500;
}

.footer-bottom-bar a:hover {
    text-decoration: underline;
}

/* --- NEW: Changelog Page Styles --- */
.changelog-page #changelog-content-edit {
    width: 100%;
    height: 400px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    border: 1px solid var(--medium-gray);
    border-radius: 8px;
    padding: 15px;
    box-sizing: border-box;
}

/* Styles for the rendered HTML changelog */
.changelog-page #changelog-content-display h4 {
    color: var(--primary-dark-blue);
    border-bottom: 2px solid var(--light-gray);
    padding-bottom: 5px;
    margin-top: 20px;
}

.changelog-page #changelog-content-display ul {
    line-height: 1.6;
}

/* --- Styles for Receipt Preview Page --- */
body {
    background-color: var(--body-bg);
}

.receipt-preview-container {
    background-color: #fff;
    box-shadow: var(--card-shadow);
    border-radius: var(--card-radius);
    padding-top: 30px;
    padding: 30px;
}

/* UPDATED HEADER RULE */
.receipt-header {
    display: flex;
    /* Use flexbox for columns */
    justify-content: space-between;
    /* Pushes logo left, details right */
    align-items: flex-start;
    /* Aligns items to the top */
    margin-bottom: 20px;
}

/* UPDATED H2 RULE */
.receipt-header h2 {
    margin: 0;
    color: var(--primary-dark-blue);
    text-align: right;
    /* Align "Invoice" to the right */
    margin-bottom: 10px;
    /* Add space below "Invoice" */
}

/* --- ADD THESE NEW RULES --- */
.receipt-logo {
    width: 100px;
    /* Adjust size as needed */
    height: auto;
    margin-right: 20px;
}

.receipt-shop-details {
    text-align: right;
    /* Aligns all text to the right */
    line-height: 1.4;
    /* Improves readability */
}

.receipt-shop-details p {
    margin: 0;
    /* Removes default paragraph margins */
    font-size: 14px;
    color: var(--dark-gray);
}

/* --- END OF NEW RULES --- */


/* UPDATED to remove .receipt-details */
.receipt-summary p {
    margin: 5px 0;
    font-size: 14px;
}

/* UPDATED to remove .receipt-details */
.receipt-summary strong {
    color: var(--text-dark);
}

/* --- UPDATED RULES FOR THE CUSTOMER TABLE --- */
.receipt-details {
    /* This adds the separator line below the block */
    padding-bottom: 10px;
    border-bottom: 2px solid var(--dark-gray);
}

.receipt-customer-details {
    width: 100%;
    font-size: 14px;
    border-collapse: collapse;
    /* So borders connect */
}

.receipt-customer-details td {
    padding: 5px 0;
    /* Matches summary padding */
}

.receipt-customer-details td:first-child {
    font-weight: bold;
    color: var(--text-dark);
    text-align: left;
    /* Explicitly align left */
}

/* This targets the value cells we just added the class to */
.receipt-customer-details .total-value {
    font-weight: bold;
    text-align: right;
}

.receipt-details,
.receipt-items,
.receipt-summary {
    margin-bottom: 20px;
}

.receipt-items table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.receipt-items th,
.receipt-items td {
    padding: 8px;
    border-bottom: 1px solid var(--medium-gray);
    text-align: left;
}

.receipt-items th {
    background-color: var(--light-gray);
    font-weight: 600;
}

.receipt-items td.amount {
    text-align: right;
}

.receipt-items td.amount {
    text-align: right;
}

/* ADD THIS NEW RULE FOR THE HEADERS */
.receipt-items th.amount {
    text-align: right;
}

.receipt-summary {
    border-top: 2px solid var(--dark-gray);
    padding-top: 15px;
}

.receipt-summary table {
    width: 100%;
    font-size: 16px;
    border-collapse: collapse;
    /* This is important */
}

.receipt-summary tr {
    /* This creates the line "margin" */
    border-bottom: 1px solid var(--medium-gray);
}

.receipt-summary tr:last-child {
    border-bottom: none;
    /* No line on the last item */
}

.receipt-summary td {
    padding: 5px 0;
    /* This creates the vertical spacing */
}

.receipt-summary .total-label {
    font-weight: bold;
    text-align: left;
    /* Keep label aligned to the left */
}

.receipt-summary .total-value {
    font-weight: bold;
    text-align: right;
}

.receipt-actions {
    margin-top: 30px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* This creates the 2-column grid */
    gap: 10px;
    /* This matches the admin button gap */
    border-top: 1px solid var(--medium-gray);
    padding-top: 20px;
    padding-bottom: 30px;
}

.receipt-actions .btn {
    width: 100%;
    padding: 15px;
    /* This sets the height */
    font-size: 18px;
    /* This matches the admin button font size */
}

/* Make buttons fill grid cells */
.receipt-footer {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    color: var(--dark-gray);
}

/* Styles for Printable Area (for Browser Print) */
@media print {
    body * {
        visibility: hidden;
    }

    /* Hide everything */
    #receipt-display-area,
    #receipt-display-area * {
        visibility: visible;
        /* Show only the receipt */
    }

    #receipt-display-area {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        /* Adjust as needed */
        margin: 0;
        padding: 0;
        box-shadow: none;
        border-radius: 0;
    }

    .receipt-actions {
        display: none !important;
    }

    /* Hide buttons when printing */
    .page-container {
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* --- Styles for Internal Transfer Modal --- */
.transfer-view {
    display: none;
    /* Hide all views by default */
    padding-top: 15px;
    border-top: 1px solid var(--medium-gray);
    margin-top: 15px;
}

.transfer-view.active {
    display: block;
    /* Show only the active view */
}

/* This class will be added by JS just for PDF generation */
.hide-for-pdf {
    display: none !important;
}

/* --- Styles for Credentials Table (replicates the #credentialsTable block from analysis) --- */
.credentials-table {
    border-collapse: collapse;
    box-shadow: var(--card-shadow);
    border-radius: var(--card-radius);
    overflow: hidden;
    table-layout: fixed;
    width: auto;
    white-space: nowrap;
    min-width: 100%;
}

.credentials-table th,
.credentials-table td {
    padding: 15px;
    text-align: center;
    border-bottom: 1px solid var(--medium-gray);
    vertical-align: middle;
    word-wrap: break-word;
}

.credentials-table th {
    background-color: var(--light-gray);
    font-weight: 600;
    font-size: 14px;
    color: var(--text-dark);
}

.credentials-table tbody tr {
    background-color: var(--text-light);
    transition: background-color 0.2s ease;
}

.credentials-table tbody tr:last-child td {
    border-bottom: none;
}

.credentials-table tbody tr:hover {
    background-color: #f1f5f9;
}

/* Specific Column Widths and Alignments for Credentials */
.credentials-table th:nth-child(1),
.credentials-table td:nth-child(1) {
    /* Service Name */
    min-width: 200px;
    text-align: left;
}

.credentials-table th:nth-child(2),
.credentials-table td:nth-child(2) {
    /* Username */
    min-width: 150px;
    text-align: left;
}

.credentials-table th:nth-child(3),
.credentials-table td:nth-child(3) {
    /* Password */
    min-width: 150px;
    text-align: left;
}

.credentials-table th:nth-child(4),
.credentials-table td:nth-child(4) {
    /* Notes */
    min-width: 100px;
    text-align: left;
}

.credentials-table th:nth-child(5),
.credentials-table td:nth-child(5) {
    /* Actions */
    min-width: 100px;
}

/* ============================================================
   MODERN DESIGN UPGRADE & RESPONSIVE LAYOUT SYSTEM
   Added: Responsive breakpoints + UI enhancements
   ============================================================ */

/* --- Enhanced Design Tokens --- */
:root {
    --card-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.13);
    --header-gradient: linear-gradient(135deg, #011e52 0%, #0d47c9 60%, #0099ff 100%);
    --promo-gradient: linear-gradient(145deg, #010f2e 0%, #0a2a8a 50%, #0d6efd 100%);
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    --nav-card-radius: 16px;
}

/* --- Global Smoothing --- */
html {
    scroll-behavior: smooth;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* --- Custom Scrollbar (Global) --- */
::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #b0bec5;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-blue);
}

* {
    scrollbar-width: thin;
    scrollbar-color: #b0bec5 #f1f5f9;
}

/* --- Text Selection --- */
::selection {
    background: var(--primary-blue);
    color: #fff;
}

/* --- Modern Button Enhancements --- */
.btn {
    position: relative;
    overflow: hidden;
    letter-spacing: 0.02em;
    transform: translateY(0);
    transition: var(--transition-smooth), transform 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.btn:active {
    transform: translateY(0px);
    box-shadow: none;
}

/* Ripple effect on buttons */
.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.18);
    opacity: 0;
    border-radius: inherit;
    transition: opacity 0.2s;
}

.btn:hover::after {
    opacity: 1;
}

/* --- Modern Page Header --- */
.page-header {
    background: var(--header-gradient);
    box-shadow: 0 4px 20px rgba(1, 30, 82, 0.3);
    position: relative;
    overflow: hidden;
    /* Note: overflow:hidden is overridden to visible on mobile (see hamburger media query)
       so the dropdown menu is not clipped by the header boundary */
}

/* Animated shimmer on header */
.page-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: 0;
    /* static anchor — layout position never changes */
    width: 40%;
    height: 200%;
    background: rgba(255, 255, 255, 0.07);
    pointer-events: none;
    /* transform-based animation never expands scroll area, even when overflow:visible */
    animation: headerShimmer 6s ease-in-out infinite;
}

@keyframes headerShimmer {

    /* Start: fully off-screen to the left, invisible */
    0%,
    100% {
        transform: translateX(-250%) skewX(-20deg);
        opacity: 0;
    }

    /* Fade in as it crosses */
    40% {
        opacity: 1;
    }

    /* End: fully off-screen to the right, invisible */
    60% {
        transform: translateX(400%) skewX(-20deg);
        opacity: 0;
    }
}

/* --- Modern Login Page --- */
.login-promo-column {
    background: var(--promo-gradient);
    position: relative;
    overflow: hidden;
}

.login-promo-column::before {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 50%;
    top: -80px;
    left: -80px;
}

.login-promo-column::after {
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 50%;
    bottom: -60px;
    right: -60px;
}

/* Floating animation on promo icon */
.promo-content .icon {
    animation: floatIcon 3.5s ease-in-out infinite;
    display: inline-block;
}

@keyframes floatIcon {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-14px);
    }
}

/* --- Modern Cards --- */
.card {
    transition: box-shadow 0.3s ease;
}

.card:hover {
    box-shadow: var(--card-shadow-hover);
}

/* --- Modern Nav Cards --- */
.nav-card {
    border-radius: var(--nav-card-radius);
    position: relative;
    overflow: hidden;
    transition: var(--transition-bounce);
    border: 1px solid rgba(13, 110, 253, 0.07);
}

.nav-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.05) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.nav-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 16px 40px rgba(13, 110, 253, 0.15);
    border-color: rgba(13, 110, 253, 0.25);
}

.nav-card:hover::before {
    opacity: 1;
}

.nav-card .icon {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
    display: inline-block;
    will-change: transform;
}

.nav-card:hover .icon {
    animation: iconBounce 0.5s cubic-bezier(0.34, 1.6, 0.64, 1) both;
}

/* Staggered entrance animation for nav grid items */
.nav-grid .nav-card {
    animation: slideUpFade 0.5s ease-out both;
}

.nav-grid .nav-card:nth-child(1) {
    animation-delay: 0.05s;
}

.nav-grid .nav-card:nth-child(2) {
    animation-delay: 0.10s;
}

.nav-grid .nav-card:nth-child(3) {
    animation-delay: 0.15s;
}

.nav-grid .nav-card:nth-child(4) {
    animation-delay: 0.20s;
}

.nav-grid .nav-card:nth-child(5) {
    animation-delay: 0.25s;
}

.nav-grid .nav-card:nth-child(6) {
    animation-delay: 0.30s;
}

.nav-grid .nav-card:nth-child(7) {
    animation-delay: 0.35s;
}

.nav-grid .nav-card:nth-child(8) {
    animation-delay: 0.40s;
}

.nav-grid .nav-card:nth-child(9) {
    animation-delay: 0.45s;
}

.nav-grid .nav-card:nth-child(10) {
    animation-delay: 0.50s;
}

@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stats grid hover: scale instead of translateY */
.stats-grid .nav-card:hover {
    transform: scale(1.06);
    box-shadow: 0 12px 35px rgba(13, 110, 253, 0.12);
}

/* --- Modern Tabs --- */
.tabs-container {
    border-radius: 12px 12px 0 0;
    background: #fff;
    padding: 0 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.tab-button {
    white-space: nowrap;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
    border-radius: 8px 8px 0 0;
}

.tab-button:hover {
    background: rgba(13, 110, 253, 0.05);
}

/* --- Enhanced Form Inputs --- */
.form-group input:hover,
.form-group select:hover {
    border-color: #adb5bd;
}

.form-group input,
.form-group select {
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

/* --- Enhanced Table Row Hover --- */
#entryTable tbody tr,
#expenseTable tbody tr,
#holdTable tbody tr,
#bankAccountsTable tbody tr,
#customersTable tbody tr,
#servicesTable tbody tr,
#inventoryTable tbody tr,
.credentials-table tbody tr {
    transition: background-color 0.2s ease, transform 0.15s ease;
}

/* --- Enhanced Pagination --- */
.pagination button {
    transition: var(--transition-smooth);
    border-radius: 8px;
}

.pagination button:not(:disabled):hover {
    transform: translateY(-2px);
}

/* --- Enhanced Modal --- */
.modal-content {
    border-radius: 16px;
    animation: modalSlideUp 0.35s cubic-bezier(0.34, 1.3, 0.64, 1);
}

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

/* --- Large Tablet (max 1024px) --- */
@media (max-width: 1024px) {
    .page-header {
        padding: 20px 0;
    }

    .page-header h1 {
        font-size: 24px;
    }

    .page-container {
        padding: 0 15px;
        margin: 20px auto;
    }

    .nav-grid {
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
        gap: 18px;
    }

    .nav-card {
        font-size: 16px;
        padding: 20px 15px;
    }

    .nav-card .icon {
        font-size: 38px;
    }

    .stats-grid .nav-card p {
        font-size: 26px;
    }

    .payment-modes {
        grid-template-columns: repeat(2, 1fr);
    }

    .admin-controls .button-group {
        grid-template-columns: 1fr 1fr;
    }

    .token-list,
    .paused-list ul {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --- Tablet (max 768px) --- */
@media (max-width: 768px) {

    /* === Login Page Stacked Layout === */
    .login-page-wrapper {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        height: auto;
        min-height: 100vh;
        overflow-y: auto;
    }

    .login-promo-column {
        padding: 35px 30px;
        min-height: 220px;
    }

    .promo-content .icon {
        font-size: 52px;
        margin-bottom: 12px;
    }

    .promo-content h1 {
        font-size: 26px;
        margin-bottom: 8px;
    }

    .promo-content p {
        font-size: 15px;
    }

    .login-form-column {
        padding: 30px 20px;
        align-items: flex-start;
    }

    .login-card {
        max-width: 100%;
        padding: 0;
    }

    /* === Header: stack buttons and title === */
    .page-header {
        padding: 0;
    }

    .header-content-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 15px 15px;
        gap: 10px;
        text-align: center;
    }

    .header-content-wrapper h1 {
        font-size: 20px;
        margin: 0;
        order: 2;
    }

    /* Reset absolute positioning — use flex order instead */
    .header-content-wrapper .btn-header-action {
        position: static !important;
        order: 1;
        width: auto;
        align-self: stretch;
        text-align: center;
        padding: 8px 14px;
        font-size: 14px;
    }

    /* Row of header buttons */
    .header-content-wrapper {
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-between;
    }

    .header-content-wrapper h1 {
        flex: 1 1 100%;
        order: 1;
        text-align: center;
    }

    .header-content-wrapper .btn-header-action:first-of-type {
        order: 2;
    }

    .header-content-wrapper .btn-header-action:last-of-type {
        order: 3;
    }

    /* === Page Container === */
    .page-container {
        padding: 0 12px;
        margin: 15px auto;
    }

    /* === Dashboard Nav Grid === */
    .nav-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 14px;
    }

    .nav-card {
        font-size: 14px;
        padding: 18px 12px;
        gap: 10px;
    }

    .nav-card .icon {
        font-size: 34px;
    }

    /* === Stats Grid === */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .stats-grid .nav-card h3 {
        font-size: 14px;
    }

    .stats-grid .nav-card p {
        font-size: 22px;
    }

    /* === Tabs === */
    .tabs-container {
        gap: 4px;
        padding: 0 4px;
    }

    .tab-button {
        padding: 12px 14px;
        font-size: 14px;
    }

    .tab-action-button {
        padding: 8px 12px;
        font-size: 13px;
    }

    /* === Form Grid → 1 Column === */
    .form-grid,
    .form-grid[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    /* === Payment Modes → 2 Columns === */
    .payment-modes {
        grid-template-columns: repeat(2, 1fr);
    }

    /* === Grand Total === */
    .grand-total-section {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .grand-total-section input {
        width: 100%;
        text-align: left;
        font-size: 20px;
    }

    /* === Form Action Buttons === */
    .form-actions-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .form-actions-grid .btn {
        padding: 12px;
        font-size: 15px;
    }

    /* === Modal → Full Width === */
    .modal-content {
        width: 95% !important;
        max-width: none !important;
        margin: 10px;
    }

    /* === Cash Grid → Stacked === */
    .cash-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* === Table Controls → Column === */
    .table-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .table-controls .form-group.search-bar {
        width: 100%;
    }

    .table-controls .form-group.sort-controls {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .table-controls input,
    .table-controls select {
        width: 100%;
        min-width: unset;
    }

    /* === Token List Grid → 2 Columns === */
    .token-list,
    .paused-list ul {
        grid-template-columns: repeat(2, 1fr);
    }

    /* === Admin Button Group === */
    .admin-controls .button-group .btn {
        padding: 12px;
        font-size: 15px;
    }

    /* === Receipt Actions → 1 Column === */
    .receipt-actions {
        grid-template-columns: 1fr;
    }

    .receipt-actions .btn {
        font-size: 15px;
        padding: 12px;
    }

    /* === Footer === */
    .footer-top-bar {
        grid-template-columns: 1fr !important;
        padding: 30px 15px;
        gap: 24px;
    }

    .footer-column p {
        padding-right: 0;
    }

    .footer-bottom-bar {
        flex-direction: column;
        text-align: center;
        gap: 8px;
        padding: 15px;
    }
}

/* --- Mobile (max 576px) --- */
@media (max-width: 576px) {

    /* === Login === */
    .login-promo-column {
        display: none;
    }

    .login-page-wrapper {
        grid-template-rows: 1fr;
    }

    .login-form-column {
        padding: 40px 20px;
        justify-content: flex-start;
        padding-top: 60px;
        align-items: center;
    }

    .login-card {
        max-width: 100%;
    }

    .login-card h2 {
        font-size: 22px;
    }

    /* === Header === */
    .header-content-wrapper {
        padding: 12px 10px;
        gap: 8px;
    }

    .page-header h1 {
        font-size: 17px;
    }

    .btn-header-action {
        font-size: 12px;
        padding: 7px 10px;
    }

    /* === Nav Grid → 2 Columns === */
    .nav-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .nav-card {
        padding: 15px 10px;
        font-size: 13px;
        gap: 8px;
    }

    .nav-card .icon {
        font-size: 28px;
    }

    /* === Stats Grid → 2 Columns === */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .stats-grid .nav-card h3 {
        font-size: 12px;
    }

    .stats-grid .nav-card p {
        font-size: 18px;
    }

    /* === Tabs → Scroll === */
    .tabs-container {
        padding: 0 2px;
        gap: 2px;
    }

    .tab-button {
        padding: 10px 12px;
        font-size: 13px;
    }

    /* === Form Actions → Stack === */
    .form-actions-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    /* === Payment Modes → 2 Columns === */
    .payment-modes {
        grid-template-columns: repeat(2, 1fr);
    }

    .payment-modes button {
        padding: 12px 8px;
        font-size: 14px;
    }

    /* === Modal Content === */
    .modal-content {
        width: 100% !important;
        margin: 0 !important;
        border-radius: 16px 16px 0 0;
        align-self: flex-end;
    }

    .modal {
        align-items: flex-end;
    }

    /* === Denominations Grid → 1 Column on very small === */
    .denominations-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    /* === Pagination Buttons === */
    .pagination button {
        padding: 8px 14px;
        font-size: 14px;
    }

    /* === Admin Token List → 2 Cols === */
    .token-list,
    .paused-list ul {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    /* === Table scroll hint === */
    .table-wrapper {
        position: relative;
    }

    .table-wrapper::after {
        display: block;
        text-align: center;
        font-size: 11px;
        color: var(--dark-gray);
        padding: 4px 0;
        opacity: 0.7;
    }

    /* === Card padding reduction === */
    .card {
        padding: 18px 14px;
    }

    /* === Page container === */
    .page-container {
        padding: 0 10px;
        margin: 12px auto;
    }

    /* === Footer === */
    .footer-top-bar {
        padding: 24px 12px;
        gap: 20px;
    }

    .footer-column h4 {
        font-size: 16px;
    }

    .footer-bottom-bar {
        padding: 12px 10px;
        font-size: 12px;
    }
}

/* --- Small Mobile (max 400px) --- */
@media (max-width: 400px) {
    .page-header h1 {
        font-size: 15px;
    }

    .btn-header-action {
        font-size: 11px;
        padding: 6px 8px;
    }

    .nav-card {
        padding: 12px 8px;
        font-size: 12px;
    }

    .nav-card .icon {
        font-size: 24px;
    }

    .stats-grid .nav-card h3 {
        font-size: 11px;
    }

    .stats-grid .nav-card p {
        font-size: 16px;
    }

    .tab-button {
        padding: 8px 10px;
        font-size: 12px;
    }

    .payment-modes button {
        padding: 10px 5px;
        font-size: 13px;
    }

    .card {
        padding: 14px 10px;
    }

    .login-card h2 {
        font-size: 20px;
    }

    .form-group input,
    .form-group select {
        font-size: 14px;
        padding: 10px 12px;
    }
}

/* ============================================================
   MISCELLANEOUS MODERN REFINEMENTS
   ============================================================ */

/* Paused transaction item on mobile */
@media (max-width: 576px) {
    .paused-transaction-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .paused-transaction-item .btn {
        width: 100%;
        text-align: center;
    }
}

/* Credentials / Settings table controls */
@media (max-width: 768px) {
    .denominations-grid {
        grid-template-columns: 1fr 1fr;
    }

    #transferModal .denominations-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Badge-style status labels */
.status-available,
.status-unavailable,
.status-low {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 13px;
}

.status-available {
    background: rgba(25, 135, 84, 0.1);
}

.status-unavailable {
    background: rgba(220, 53, 69, 0.1);
}

.status-low {
    background: rgba(255, 152, 0, 0.1);
}

/* Smooth page load fade-in */
body {
    animation: pageFadeIn 0.4s ease-out;
}

@keyframes pageFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ============================================================
   HAMBURGER MENU SYSTEM
   Two menus per page:
   1. .header-hamburger  — wraps Back/Logout buttons in header
   2. .tabs-hamburger    — wraps tab buttons in tabs-container
   ============================================================ */

/* --- Hamburger Toggle Button (hidden on desktop) --- */
.hamburger-btn {
    display: none;
    background: rgba(255, 255, 255, 0.15);
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    border-radius: 8px;
    width: 42px;
    height: 38px;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
    transition: background 0.2s;
    flex-shrink: 0;
}

.hamburger-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}

.hamburger-btn span {
    display: block;
    width: 20px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s;
}

/* Animate to X when open */
.hamburger-btn.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.hamburger-btn.open span:nth-child(2) {
    opacity: 0;
}

.hamburger-btn.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* --- Tabs-specific hamburger (dark theme) --- */
.tabs-hamburger-btn {
    display: none;
    background: var(--light-gray);
    border: 1.5px solid var(--medium-gray);
    color: var(--text-dark);
    border-radius: 8px;
    width: 42px;
    height: 38px;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
    transition: background 0.2s;
    flex-shrink: 0;
}

.tabs-hamburger-btn:hover {
    background: var(--medium-gray);
}

.tabs-hamburger-btn span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--text-dark);
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s;
}

.tabs-hamburger-btn.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.tabs-hamburger-btn.open span:nth-child(2) {
    opacity: 0;
}

.tabs-hamburger-btn.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* --- Header Nav Dropdown Menu --- */
.header-nav-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
    padding: 8px;
    display: none;
    flex-direction: column;
    gap: 6px;
    min-width: 200px;
    max-width: calc(100vw - 30px);
    z-index: 2000;
    animation: dropdownSlide 0.2s ease;
}

.header-nav-menu.open {
    display: flex;
}

.header-nav-menu .nav-menu-item {
    display: block;
    width: 100%;
    padding: 11px 16px;
    background: none;
    border: none;
    border-radius: 8px;
    text-align: left;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-dark);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s;
}

.header-nav-menu .nav-menu-item:hover {
    background: var(--light-gray);
    color: var(--primary-blue);
}

.header-nav-menu .nav-menu-item.danger {
    color: var(--danger-red);
}

.header-nav-menu .nav-menu-item.danger:hover {
    background: #fdebee;
}

.header-nav-menu hr.menu-divider {
    border: none;
    border-top: 1px solid var(--medium-gray);
    margin: 4px 0;
}

/* --- Tabs Dropdown Menu --- */
.tabs-nav-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    padding: 8px;
    display: none;
    flex-direction: column;
    gap: 4px;
    min-width: 220px;
    max-width: calc(100vw - 20px);
    z-index: 2000;
    animation: dropdownSlide 0.2s ease;
}

.tabs-nav-menu.open {
    display: flex;
}

.tabs-nav-menu .tab-menu-item {
    display: block;
    width: 100%;
    padding: 11px 16px;
    background: none;
    border: none;
    border-radius: 8px;
    text-align: left;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-dark);
    cursor: pointer;
    transition: background 0.15s;
}

.tabs-nav-menu .tab-menu-item:hover {
    background: var(--light-gray);
    color: var(--primary-blue);
}

.tabs-nav-menu .tab-menu-item.active {
    color: var(--primary-blue);
    background: rgba(13, 110, 253, 0.07);
}

@keyframes dropdownSlide {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Hamburger wrapper in header --- */
.header-hamburger-wrapper {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    display: none;
    /* hidden on desktop */
}

/* --- Hamburger wrapper in tabs --- */
.tabs-hamburger-wrapper {
    position: relative;
    display: none;
    /* hidden on desktop */
    margin-left: auto;
    align-items: center;
}

/* ============================================================
   ACTIVATE HAMBURGER MENUS AT ≤ 768px
   ============================================================ */
@media (max-width: 768px) {

    /* Show hamburger wrappers — position:relative keeps dropdown inside viewport */
    .header-hamburger-wrapper {
        display: flex;
        position: relative;
        transform: none;
        flex-shrink: 0;
        align-items: center;
    }

    .tabs-hamburger-wrapper {
        display: flex;
    }

    /* Show hamburger buttons */
    .hamburger-btn {
        display: flex;
    }

    .tabs-hamburger-btn {
        display: flex;
    }

    /* Hide the header action buttons — moved into dropdown */
    .header-content-wrapper .btn-header-action {
        display: none !important;
    }

    /* Make header wrapper flex so title + hamburger are in a row */
    .header-content-wrapper {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        /* Right padding is 0 so the hamburger button sits flush to the edge */
        padding: 14px 0 14px 12px !important;
        flex-wrap: nowrap !important;
        position: relative;
        box-sizing: border-box;
        max-width: 100%;
        overflow: visible;
    }

    /* Prevent horizontal scroll from any overflowing element */
    body {
        overflow-x: hidden;
    }

    /* Allow header dropdown to overflow the header boundary on mobile */
    .page-header {
        overflow: visible;
    }

    /* Disable the shimmer animation on mobile entirely.
       Even with transform-based animation, the ::before pseudo-element on an
       overflow:visible parent still triggers scrollbar flash / layout shifts on
       mobile browsers. Removing the element is the only guaranteed fix. */
    .page-header::before {
        display: none;
    }

    .header-content-wrapper h1 {
        flex: 1 !important;
        order: unset !important;
        text-align: left !important;
        font-size: 18px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Hide tab buttons — moved into dropdown */
    .tabs-container .tab-button {
        display: none !important;
    }

    /* Keep tab-action-button (e.g. Internal Transfer) visible */
    .tabs-container .tab-action-button {
        display: inline-flex !important;
        align-items: center;
    }

    /* Tabs container layout: hamburger + optional action button */
    .tabs-container {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 10px 12px !important;
        border-radius: 12px !important;
        overflow: visible !important;
        white-space: normal !important;
        flex-wrap: nowrap !important;
    }

    /* Active tab label shown next to hamburger */
    .tabs-active-label {
        display: flex;
        flex: 1;
        font-weight: 600;
        font-size: 15px;
        color: var(--primary-blue);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* --- On very small screens, shrink tab label --- */
@media (max-width: 400px) {
    .header-content-wrapper h1 {
        font-size: 15px !important;
    }

    .tabs-active-label {
        font-size: 13px;
    }
}

/* ============================================================
   DMT PAGE SPECIFIC
   ============================================================ */

/* Modern full-screen DMT phone lookup */
.dmt-lookup-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--promo-gradient, linear-gradient(145deg, #010f2e 0%, #0a2a8a 50%, #0d6efd 100%));
    position: relative;
    overflow: hidden;
    padding: 20px;
}

.dmt-lookup-wrapper::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 50%;
    top: -150px;
    right: -150px;
}

.dmt-lookup-wrapper::after {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 50%;
    bottom: -80px;
    left: -80px;
}

.dmt-lookup-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 960px;
    width: 100%;
    min-height: 500px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
    position: relative;
    z-index: 1;
}

.dmt-lookup-promo {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 48px 36px;
    color: #fff;
}

.dmt-lookup-promo .promo-icon {
    font-size: 72px;
    display: block;
    margin-bottom: 20px;
    animation: floatIcon 3.5s ease-in-out infinite;
}

.dmt-lookup-promo h2 {
    font-size: 30px;
    font-weight: 700;
    margin: 0 0 12px;
}

.dmt-lookup-promo p {
    opacity: 0.85;
    font-size: 16px;
    line-height: 1.6;
    max-width: 320px;
}

.dmt-lookup-promo .promo-features {
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
    text-align: left;
    width: 100%;
    max-width: 280px;
}

.dmt-lookup-promo .promo-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    margin-bottom: 12px;
    opacity: 0.9;
}

.dmt-lookup-promo .promo-features li i {
    color: #4fc3f7;
    width: 16px;
}

.dmt-lookup-form-side {
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 44px;
}

.dmt-lookup-form-side h3 {
    font-size: 26px;
    color: var(--primary-dark-blue);
    margin: 0 0 6px;
}

.dmt-lookup-form-side p.subtitle {
    color: var(--dark-gray);
    font-size: 15px;
    margin: 0 0 30px;
}

.dmt-lookup-form-side .form-group label {
    font-weight: 600;
    font-size: 14px;
    color: #495057;
    margin-bottom: 6px;
}

.dmt-lookup-form-side .form-group input {
    font-size: 18px;
    padding: 14px 16px;
    letter-spacing: 1px;
}

.dmt-lookup-form-side .btn-dmt-lookup {
    width: 100%;
    padding: 16px;
    font-size: 18px;
    margin-top: 8px;
    border-radius: 10px;
}

/* Responsive: DMT workflow stacks on tablet/mobile */
@media (max-width: 900px) {
    .dmt-lookup-container {
        grid-template-columns: 1fr;
        max-width: 480px;
    }

    .dmt-lookup-promo {
        display: none;
    }

    .dmt-lookup-form-side {
        padding: 40px 30px;
    }
}

@media (max-width: 576px) {
    .dmt-lookup-wrapper {
        padding: 0;
        align-items: flex-start;
    }

    .dmt-lookup-container {
        border-radius: 0;
        min-height: 100vh;
        max-width: 100%;
    }

    .dmt-lookup-form-side {
        padding: 60px 20px 30px;
    }
}

/* DMT Workflow: stack columns on tablet */
@media (max-width: 900px) {
    #dmt-workflow-view {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

/* ================================================================
   ROUND 2 CSS — Corrected Responsive Styles
   ================================================================ */

/* --- Status Badges (Hold + Projects + Inventory) --- */
.status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    white-space: nowrap;
}

.status-badge.status-pending,
.status-badge.status-not-printed,
.status-badge.status-unavailable {
    background: #fff0f0;
    color: #c0392b;
    border: 1.5px solid #e74c3c55;
}

.status-badge.status-resolved,
.status-badge.status-printed,
.status-badge.status-available {
    background: #eafaf0;
    color: #1a7a3f;
    border: 1.5px solid #27ae6055;
}

.status-badge.status-low {
    background: #fff8e1;
    color: #b7770d;
    border: 1.5px solid #f39c1255;
}

/* --- Cash Calculator Summary (used in expense.js + register.js) --- */
.cash-summary {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 14px 18px;
    margin: 14px 0;
}

.cash-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 0.92rem;
    color: #444;
    border-bottom: 1px solid #eee;
}

.cash-summary-row:last-child {
    border-bottom: none;
}

.cash-summary-net span:last-child {
    font-size: 1.04rem;
    font-weight: 700;
    color: #198754;
    transition: color 0.2s;
}

.cash-warning {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffc10755;
    border-radius: 6px;
    padding: 7px 12px;
    font-size: 0.88rem;
    margin-top: 8px;
    font-weight: 600;
}

.denom-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.denom-row label {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    color: #555;
}

.denom-max {
    font-size: 0.77rem;
    background: #e8f4fd;
    color: #0a6ebd;
    padding: 1px 7px;
    border-radius: 20px;
    font-weight: 600;
}

.denom-row input {
    width: 80px;
    text-align: center;
}

/* --- Reports Nav Button --- */
.reports-nav-btn {
    display: block;
    width: 100%;
    padding: 18px;
    margin: 20px 0;
    background: linear-gradient(135deg, #1a1a9a 0%, #0d6efd 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(13, 110, 253, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
    letter-spacing: 0.5px;
}

.reports-nav-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(13, 110, 253, 0.4);
    color: #fff;
    text-decoration: none;
}

.reports-nav-btn i {
    margin-right: 10px;
}

/* --- Nav Card Icon Images --- */
.nav-card .nav-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    display: block;
    margin: 0 auto 8px;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        filter 0.3s ease;
    will-change: transform;
}

.nav-card:hover .nav-icon {
    animation: iconBounce 0.5s cubic-bezier(0.34, 1.6, 0.64, 1) both;
    filter: drop-shadow(0 4px 10px rgba(13, 110, 253, 0.35));
}

.nav-card .icon-fa {
    font-size: 1.8rem;
    display: block;
    margin: 0 auto 8px;
    color: var(--primary-blue);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        color 0.25s ease,
        text-shadow 0.25s ease;
    will-change: transform;
}

.nav-card:hover .icon-fa {
    animation: iconBounce 0.5s cubic-bezier(0.34, 1.6, 0.64, 1) both;
    color: #3d8bfd;
    text-shadow: 0 0 16px rgba(13, 110, 253, 0.45);
}

/* Shared springy-bounce keyframe for all nav-grid icons */
@keyframes iconBounce {
    0% {
        transform: scale(1) rotate(0deg);
    }

    30% {
        transform: scale(1.18) rotate(-8deg);
    }

    55% {
        transform: scale(1.26) rotate(4deg);
    }

    75% {
        transform: scale(1.20) rotate(-2deg);
    }

    90% {
        transform: scale(1.23) rotate(1deg);
    }

    100% {
        transform: scale(1.22) rotate(0deg);
    }
}

/* --- Tabs active label: hidden on desktop, visible on mobile via media query --- */
.tabs-active-label {
    display: none;
}

@media (min-width: 769px) {
    .tabs-active-label {
        display: none !important;
    }
}

/* --- Text-based CAPTCHA --- */
.captcha-math-box {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px solid #dee2e6;
    border-radius: 12px;
    padding: 14px 20px;
    text-align: center;
    margin-bottom: 8px;
    position: relative;
    overflow: hidden;
}

.captcha-math-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(45deg,
            transparent,
            transparent 4px,
            rgba(0, 0, 0, 0.03) 4px,
            rgba(0, 0, 0, 0.03) 8px);
}

.captcha-question {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1a1a9a;
    letter-spacing: 3px;
    font-family: 'Courier New', monospace;
    position: relative;
    z-index: 1;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    user-select: none;
}

/* ================================================================
   MOBILE / TABLET RESPONSIVE (≤ 768px) — Tables, Modals, Tabs
   ================================================================ */
@media (max-width: 768px) {

    /* Tabs hamburger label: visible only on mobile */
    .tabs-active-label {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-weight: 600;
        font-size: 0.95rem;
        color: var(--primary-dark-blue, #1a1a9a);
        padding: 6px 12px;
        background: var(--light-gray, #f8f9fa);
        border-radius: 8px;
        max-width: calc(100% - 60px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Modals: always centred in the viewport on mobile.
       The overlay (position:fixed) covers exactly the screen — it never scrolls.
       The content is capped at the dynamic viewport height so it always fits,
       and scrolls internally via overflow-y:auto. */
    .modal {
        padding: 16px;
        box-sizing: border-box;
        overflow: hidden;
        /* Overlay must NEVER scroll on mobile */
        align-items: center;
        /* Keep vertical centering in the flex overlay */
    }

    .modal-content {
        width: 100%;
        max-width: 100%;
        /* 100dvh = dynamic viewport height: shrinks when mobile browser chrome appears,
           so the modal is always fully visible even when the address bar is shown.
           Falls back to 100vh for older browsers. */
        max-height: calc(100vh - 32px);
        max-height: calc(100dvh - 32px);
        overflow-y: auto;
        /* Content scrolls internally, not the page */
        -webkit-overflow-scrolling: touch;
        /* Smooth momentum scroll on iOS */
        border-radius: 12px;
        box-sizing: border-box;
    }

    /* Tables: horizontal scroll on mobile */
    .table-wrapper,
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table-wrapper table,
    .table-container table {
        min-width: 600px;
    }

    /* Services list: min-width ensures scrolling in .table-wrapper */
    #currentServicesList {
        min-width: 550px;
        font-size: 0.85rem;
    }

    /* Tab content tables: scrollable on mobile */
    .tab-content .table-wrapper table,
    .tab-content table {
        min-width: 550px;
    }

    /* Credentials table on mobile */
    .credentials-table {
        min-width: 500px;
    }

    /* Password cell fix on mobile */
    .password-cell {
        min-width: 150px;
    }
}

/* ================================================================
   BANK DEBIT REFUND PANEL
   ================================================================ */

.refund-panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #fff8e1, #fffde7);
    border: 1px solid var(--warning-yellow);
    border-radius: 8px 8px 0 0;
    font-weight: 600;
    font-size: 15px;
    color: #7a5a00;
}

.refund-badge {
    margin-left: auto;
    background: var(--warning-yellow);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    letter-spacing: 0.5px;
}

.refund-panel {
    padding: 16px;
    background: #fffdf0;
    border: 1px solid var(--warning-yellow);
    border-top: none;
    border-radius: 0 0 8px 8px;
}

.refund-hint {
    margin: 0 0 14px 0;
    font-size: 13px;
    color: var(--dark-gray);
}

.refund-hint i {
    color: var(--primary-blue);
    margin-right: 5px;
}

.refund-service-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid var(--medium-gray);
    border-radius: 8px;
    margin-bottom: 8px;
    transition: border-color 0.2s, background 0.2s;
    flex-wrap: wrap;
}

.refund-service-row.refund-checked {
    border-color: var(--warning-yellow);
    background: #fffdf0;
}

.refund-service-row label {
    flex: 1;
    min-width: 160px;
    font-size: 14px;
    font-weight: 500;
    margin: 0;
    cursor: pointer;
    color: var(--text-dark);
}

.refund-service-row .refund-amount {
    font-weight: 700;
    color: var(--danger-red);
    font-size: 14px;
    white-space: nowrap;
}

.refund-bank-selector {
    display: none;
    flex: 1;
    min-width: 200px;
}

.refund-service-row.refund-checked .refund-bank-selector {
    display: block;
}

.refund-bank-selector input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--medium-gray);
    border-radius: 6px;
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
}

.refund-bank-selector input:focus {
    outline: none;
    border-color: var(--warning-yellow);
    box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.2);
}

.refund-bank-selector .autocomplete-items div {
    font-size: 13px;
    padding: 8px 12px;
}

/* Already-refunded locked row */
.refund-service-row.refund-already-done {
    background: #f0faf4;
    border-color: #a5d6a7;
    opacity: 0.85;
    cursor: default;
}

.refund-service-row.refund-already-done label {
    color: #2e7d32;
    cursor: default;
}

.refund-done-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    background: #c8e6c9;
    color: #1b5e20;
    border: 1px solid #a5d6a7;
    white-space: nowrap;
    margin-left: auto;
}

/* Sub-options inside a refund row (Advance return + Commission return) */
.refund-sub-option {
    display: none; /* shown via JS when bank refund checkbox is checked */
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 4px 0 0 30px;
    padding: 8px 12px;
    background: linear-gradient(135deg, #e8f5e9, #f1f8f1);
    border: 1px solid #a5d6a7;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #1b5e20;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    box-sizing: border-box;
}

.refund-sub-option:has(input:checked) {
    background: linear-gradient(135deg, #c8e6c9, #dcedc8);
    border-color: #66bb6a;
    font-weight: 600;
}

.refund-sub-option input[type="checkbox"] {
    flex-shrink: 0;
    cursor: pointer;
    accent-color: #2e7d32;
}

/* ================================================================
   END ROUND 2 CSS

/* ================================================================
   SLIDER MANAGER (settings.html — Sliders tab)
   ================================================================ */

/* Color picker: palette swatch + hex input side by side */
.color-picker-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.color-picker-wrap input[type="color"] {
    width: 44px;
    height: 38px;
    padding: 2px;
    border: 1.5px solid var(--medium-gray, #dee2e6);
    border-radius: 8px;
    cursor: pointer;
    background: none;
    flex-shrink: 0;
}

.color-picker-wrap .hex-input {
    flex: 1;
    padding: 8px 10px;
    border: 1.5px solid var(--medium-gray, #dee2e6);
    border-radius: 8px;
    font-size: 0.85rem;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    min-width: 0;
    width: 100% !important;
    box-sizing: border-box;
}

.color-picker-wrap .hex-input:focus {
    outline: none;
    border-color: var(--primary-blue, #0d6efd);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}

.slider-color-group label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 2px;
}

/* Slider cards in the "Manage Sliders" list */
.slider-card {
    display: grid;
    grid-template-columns: 120px 1fr auto;
    gap: 16px;
    align-items: start;
    background: var(--card-bg, #fff);
    border: 1.5px solid var(--medium-gray, #dee2e6);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
    position: relative;
}

.slider-card:hover {
    border-color: var(--primary-blue, #0d6efd);
    box-shadow: 0 4px 16px rgba(13, 110, 253, 0.1);
}

.slider-card.is-disabled {
    opacity: 0.6;
    border-color: #ced4da;
}

.slider-thumb {
    width: 120px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    background: #f0f0f0;
    display: block;
    flex-shrink: 0;
}

.slider-card-body {
    min-width: 0;
}

.slider-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark, #212529);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.slider-card-meta {
    font-size: 0.8rem;
    color: var(--text-secondary, #6c757d);
    margin-bottom: 6px;
}

.slider-status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.slider-status-badge.enabled {
    background: #eafaf0;
    color: #1a7a3f;
    border: 1.5px solid #27ae6055;
}

.slider-status-badge.disabled {
    background: #fff0f0;
    color: #c0392b;
    border: 1.5px solid #e74c3c55;
}

.slider-status-badge.scheduled {
    background: #fff8e1;
    color: #b7770d;
    border: 1.5px solid #f39c1255;
}

.slider-card-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    min-width: 110px;
}

.slider-card-actions .btn {
    font-size: 0.8rem;
    padding: 7px 12px;
    text-align: center;
}

/* Colour preview swatches in slider card */
.slider-colors-preview {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.swatch {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid rgba(0,0,0,0.15);
    display: inline-block;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .slider-card {
        grid-template-columns: 1fr;
    }
    .slider-thumb {
        width: 100%;
        height: 160px;
    }
    .slider-card-actions {
        flex-direction: row;
        min-width: unset;
    }
    .slider-card-actions .btn {
        flex: 1;
    }
    .form-grid[style*="repeat(5, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
/* ================================================================
   END SLIDER MANAGER CSS
   ================================================================ */