body {
    font-family: 'Roboto', sans-serif;
    background: url('background.png') no-repeat center center fixed;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 120vh;
    margin: 5;
    opacity: 0.9;
    padding: 10px;
}

.container {
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    padding: 30px;
    max-width: 600px;
    width: 100%;
    text-align: center;
}

.logo {
    max-width: 120px;
    margin-bottom: 5px;
}

h1 {
    color: #333333;
    margin-bottom: 10px;
}

p {
    color: #555555;
    margin-bottom: 30px;
}

.form-group {
    margin-bottom: 20px;
    position: relative;
    text-align: left;
}

label {
    display: block;
    margin-bottom: 5px;
    color: #555555;
}

input[type="text"],
input[type="tel"],
textarea {
    width: calc(100% - 20px);
    padding: 10px;
    border: 1px solid #cccccc;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 16px;
    background-color: #f9f9f9;
    margin-left: 10px;
}

textarea {
    resize: vertical;
}

.phone-input {
    display: flex;
    align-items: center;
}

.prefix {
    padding: 10px;
    background-color: #ddd;
    border: 1px solid #cccccc;
    border-radius: 5px 0 0 5px;
    font-size: 16px;
    color: #333;
}

.phone-input input {
    border-radius: 0 5px 5px 0;
    margin-left: 0;
}

button {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    button:hover {
        background-color: #45a049;
    }

    button:disabled {
        background-color: #ccc;
        color: #666;
        cursor: not-allowed;
        pointer-events: none;
    }

.tooltip {
    display: none;
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 5px;
    font-size: 12px;
    z-index: 1;
    width: 200px;
}

.form-group:hover .tooltip {
    display: block;
}

#birthYear {
    width: 120px;
    height: 30px;
    font-size: 18px;
    padding: 8px;
}

#birthMonth {
    width: 150px;
    height: 40px;
    font-size: 18px;
    padding: 8px;
}

@media (max-width: 600px) {
    .container {
        padding: 20px;
    }

    input[type="text"],
    input[type="tel"],
    textarea {
        width: calc(100% - 10px);
        margin-left: 5px;
    }
}

.version-info {
    text-align: right;
    margin-top: 30px;
    font-size: 14px;
    color: #555;
}

#popup-buttons {
    display: none;
}

/* Ensure the popup-container covers the entire viewport */
.popup-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.popup-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: white;
    padding: 16px;
    border-radius: 10px;
    width: min(99vw, 1900px);
    height: min(92vh, 980px);
    max-width: calc(100vw - 12px);
    max-height: calc(100vh - 24px);
    overflow: hidden;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

/* Ensures the content is scrollable while keeping buttons in place */
.popup-body {
    flex-grow: 1;
    min-height: 0;
    overflow: hidden;
    padding-bottom: 10px;
}

/* Fix button positioning so they always remain inside */
.popup-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 15px 0;
    border-top: 1px solid #ccc;
    width: 100%;
    flex-shrink: 0; /* Prevents buttons from moving */
    background: white; /* Matches the popup background */
}

    /* Ensure buttons fit properly */
    .popup-buttons button {
        flex: 1;
        max-width: 150px;
        font-size: 14px;
        padding: 10px;
        border-radius: 5px;
        background-color: #007bff;
        color: white;
        border: none;
        cursor: pointer;
    }

        /* Button hover effect */
        .popup-buttons button:hover {
            background-color: #0056b3;
        }


/* Make the main content scrollable if needed */
.popup-body {
    flex-grow: 1; /* Allows content to expand but keeps space for buttons */
    min-height: 0;
    overflow: hidden; /* The schedule grid owns both scrollbars */
    padding-bottom: 20px; /* Prevents overlap with buttons */
}

/* Buttons stay fixed at the bottom */
.popup-buttons {
    display: flex;
    justify-content: center; /* Center horizontally */
    gap: 10px;
    padding: 15px 0;
    border-top: 1px solid #ccc;
    width: 100%;
    flex-shrink: 0; /* Prevents buttons from shrinking */
}

    /* Ensure buttons have a consistent size */
    .popup-buttons button {
        flex: 1;
        max-width: 150px;
        font-size: 14px;
        padding: 10px;
        border-radius: 5px;
        background-color: #007bff;
        color: white;
        border: none;
        cursor: pointer;
    }

        /* Button hover effect */
        .popup-buttons button:hover {
            background-color: #0056b3;
        }



#testCallNow {
    background-color: #ff5733;
    color: white;
    width: 120px;
    padding: 8px;
    font-size: 14px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    #testCallNow:hover {
        background-color: #d9451c;
    }

    #testCallNow:disabled {
        background-color: #b0b0b0;
        color: #666666;
        cursor: not-allowed;
        opacity: 0.6;
    }

.day-container {
    margin: 20px 0;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.time-slot {
    margin: 5px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    display: inline-block;
    width: 120px;
    text-align: center;
}

    .time-slot:hover {
        background-color: #f0f0f0;
    }

    .time-slot.selected {
        background-color: #007bff;
        border: 2px solid blue;
        color: blue !important;
    }
   

    .time-slot.reserved {
        background-color: #FFD700;
        color: #8A2BE2;
        cursor: not-allowed;
    }

    .time-slot.available-daily {
        background-color: #e0f7fa;
        color: #00796b;
    }

    .time-slot.available-weekly {
        background-color: #c8e6c9;
        color: #388e3c;
    }

#timeSlotContainer {
    white-space: nowrap; /* Prevents wrapping */
    max-width: 100%; /* Ensures it doesn’t exceed screen width */
    overflow: visible;
}

#tableWrapper {
    overflow-x: auto; /* Enables scrolling */
    display: block;
    max-width: 100%;
    width: 100%;
}

#scrollContainer {
    height: 100%;
    min-height: 0;
    overflow: auto; /* Keep both scrollbars available when the popup is smaller */
    position: relative;
    width: 100%;
}

/* Ensure the table structure remains responsive */
.time-slot-table,
#scheduleTable {
    width: auto;
    min-width: 1140px; /* Keep the week readable while fitting more days on screen */
    border-collapse: separate;
    border-spacing: 8px 8px;
}

/* Fix the day-of-the-week header at the top */
.time-slot-table thead th,
#scheduleTable thead th {
    position: sticky;
    top: 0;
    background-color: rgba(255, 255, 255, 0.96);
    z-index: 4;
    font-size: 20px;
    padding: 0 10px 8px;
}

/* Fix the first column (time slot column) */
.time-slot-table th:first-child,
.time-slot-table td:first-child,
#scheduleTable th:first-child,
#scheduleTable td:first-child {
    position: sticky;
    left: 0;
    background-color: rgba(255, 255, 255, 0.96);
    z-index: 3;
    min-width: 92px;
    box-shadow: 6px 0px 8px rgba(255, 255, 255, 0.85);
}

.time-slot-table thead th:first-child,
#scheduleTable thead th:first-child {
    z-index: 5;
}

.time-slot-table .time-label {
    font-size: 20px;
    text-align: right;
    padding-right: 0;
    color: #111;
}

.time-slot-table th:not(:first-child),
.time-slot-table .time-slot-cell {
    min-width: 160px;
}

.time-slot-table .time-slot {
    box-sizing: border-box;
    width: 100%;
    min-width: 140px;
    margin: 0;
}

#scheduleTable {
    display: none;
}

/* Ensure the horizontal scrollbar remains visible */
#tableWrapper {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    height: 20px;
    background-color: #fff;
    z-index: 3;
}

.developer-note {
    display: none;
    margin-top: 20px;
    padding: 10px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    text-align: left; /* Ensure left alignment */
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

    .developer-note ol {
        padding-left: 20px;
    }

    .developer-note li {
        margin-bottom: 6px;
    }


.admin-panel button {
    margin: 10px 0;
    padding: 12px 18px;
    font-size: 16px;
}

.primary-btn {
    background-color: #0078d4;
    color: white;
}

.admin-only-btn {
    background-color: #444;
    color: white;
}

/* =========================================================
   Start page polish (UI only, scoped to .page-start)
   No functional changes.
   ========================================================= */
/* Page layout stays centered */
.page-start body,
body.page-start {
    height: 100vh;
    margin: 0;
    padding: 16px; /* slightly tighter */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* WIDER popup / card */
.page-start .container {
    width: 100%;
    max-width: 900px; /* was 520px */
    min-width: 680px; /* gives that “wide” feel on desktop */
    padding: 28px 32px; /* more breathing room */
    border-radius: 16px;
    background-color: rgba(255, 255, 255, 0.92);
    box-shadow: 0 16px 36px rgba(0,0,0,.14);
    backdrop-filter: blur(6px);
}
/* Header */
.page-start .page-header {
    margin-bottom: 14px;
}

.page-start .page-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.page-start h1 {
    margin: 0;
    font-size: 22px;
    letter-spacing: .2px;
}

.page-start .page-subtitle {
    margin: 6px 0 0 0;
    color: #556;
    font-size: 13px;
}

/* Small env badge */
.page-start .env-badge {
    font-size: 12px;
    color: #111;
    background: rgba(0,0,0,.06);
    border: 1px solid rgba(0,0,0,.08);
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

/* Simple card sections */
.page-start .card {
    margin-top: 12px;
    padding: 14px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.08);
    background: rgba(255,255,255,.75);
}

    .page-start .card.subtle {
        background: rgba(255,255,255,.55);
    }

/* Auth status text */
.page-start .muted-text {
    margin: 0 0 10px 0;
    color: #556;
    font-size: 13px;
}

/* Button system (scoped so your other pages keep current look) */
.page-start button {
    width: auto; /* override global width:100% */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.1;
}

/* Action row makes buttons look “app-like” */
.page-start .action-row {
    display: flex;
    gap: 10px;
}

    .page-start .action-row .btn {
        flex: 1;
    }

/* Base button */
.page-start .btn {
    border: 1px solid rgba(0,0,0,.12);
    background: rgba(255,255,255,.9);
    color: #111;
}

    .page-start .btn:hover {
        background: rgba(255,255,255,1);
    }

/* Default "primary" class (used elsewhere); keep it */
.page-start .btn-primary {
    background: #2563eb;
    color: #fff;
    border: 1px solid rgba(0,0,0,.12);
}

    .page-start .btn-primary:hover {
        background: #1d4ed8;
    }

/* Default "secondary" class (used elsewhere); keep it */
.page-start .btn-secondary {
    background: rgba(255,255,255,.92);
    color: #111;
}

/* Keep disabled behavior clean */
.page-start button:disabled {
    opacity: .55;
}

/* Form alignment: keep your existing inputs but make spacing cleaner */
.page-start .form-group label {
    font-size: 13px;
}

.page-start input[type="tel"],
.page-start input[type="text"],
.page-start textarea {
    margin-left: 0; /* override the left indent from global styles */
    width: 100%;
}

/* Mobile */
@media (max-width: 600px) {
    .page-start body,
    body.page-start {
        padding: 14px;
        align-items: flex-start;
    }

    .page-start .container {
        padding: 18px;
        border-radius: 12px;
        text-align: left;
    }

    .page-start .action-row {
        flex-direction: column;
    }
}

/* =========================================================
   Start page background refinement
   ========================================================= */
body.page-start {
    position: relative;
    overflow: hidden;
}

    /* Soft dark overlay to reduce busy background */
    body.page-start::before {
        content: '';
        position: fixed;
        inset: 0;
        background: linear-gradient( 180deg, rgba(10, 20, 40, 0.45), rgba(10, 20, 40, 0.55) );
        z-index: -1;
    }

/* Optional subtle blur without killing performance */
@supports (backdrop-filter: blur(2px)) {
    body.page-start::before {
        backdrop-filter: blur(2px);
    }
}

/* =========================================================
   Start page action button differentiation (complementary)
   ========================================================= */

/* Open User Grid – primary product action (teal-blue) */
.page-start #btnOpenUserGrid {
    background: #0f766e; /* teal-blue, complements slate */
    color: #ffffff;
    border: 1px solid rgba(0,0,0,.16);
}

    .page-start #btnOpenUserGrid:hover {
        background: #115e59;
    }

/* Grid View – secondary product action (slate) */
.page-start #btn-open-grid {
    background: #334155; /* slate */
    color: #ffffff;
    border: 1px solid rgba(0,0,0,.18);
}

    .page-start #btn-open-grid:hover {
        background: #1e293b;
    }

/* =========================================================
   De-emphasize Microsoft sign-in button (reduce color conflict)
   ========================================================= */
.page-start #loginButton {
    background: #e5e7eb; /* soft neutral */
    color: #111827;
    border: 1px solid rgba(0,0,0,.15);
}

    .page-start #loginButton:hover {
        background: #d1d5db;
    }


/* Shared “console tool page” header */
.grid-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 12px;
    background: #ffffff;
    margin: 10px 0 12px;
}

.grid-page-title h1 {
    font-size: 28px;
    letter-spacing: .2px;
}

.grid-page-subtitle {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
}

.grid-page-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Button system (shared) */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.12);
    font-size: 14px;
    line-height: 1.1;
    cursor: pointer;
    white-space: nowrap;
}

.btn-primary {
    background: #10b981;
    color: #0b1220;
}

.btn-secondary {
    background: #0f766e;
    color: #ffffff;
}

.btn-ghost {
    background: rgba(0,0,0,.04);
    color: #111827;
}

/* Subtle difference between pages (accent only) */
.grid-page-header.schedule-accent {
    box-shadow: inset 4px 0 0 rgba(51, 65, 85, .55);
}

.grid-page-header.user-accent {
    box-shadow: inset 4px 0 0 rgba(15, 118, 110, .55);
}

/* ===============================
   Schedule Admin Layout
   =============================== */

.page-schedule .schedule-admin-container {
    max-width: 96vw; /* almost full screen */
    width: 100%;
    margin: 0 auto;
    padding: 12px 16px;
}

/* Schedule admin action buttons */

.page-schedule .schedule-admin-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 12px 0 16px;
    flex-wrap: wrap; /* handles small screens */
}

    .page-schedule .schedule-admin-actions button {
        width: auto; /* ← key fix */
        min-width: 180px;
        padding: 10px 16px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 600;
    }

/* Grid container must be allowed to grow */
.page-schedule #grid-root {
    width: 100%;
    min-height: 500px;
}

.react-grid-Grid {
    min-width: 1200px; /* allows horizontal scroll instead of squishing */
}

/* ============================
   Schedule Admin page overrides
   ============================ */
body.page-schedule {
    /* Override the global "body { display:flex; ... }" */
    display: block;
    justify-content: initial;
    align-items: initial;
    height: auto;
    min-height: 100vh;
    margin: 0;
    padding: 16px;
    /* Keep your background image from the global body rule */
}

    /* Make the outer wrapper wider than the inline max-width:1400px */
    body.page-schedule > div {
        max-width: 96vw !important;
    }

    /* Override global "button { width:100%; display:block }" ONLY for this page */
    body.page-schedule button {
        width: auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Make the grid header action buttons compact (these are created in grid-view-v6.js) */
    body.page-schedule .grid-page-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
    }

        body.page-schedule .grid-page-actions button,
        body.page-schedule button.btn {
            width: auto;
            padding: 8px 12px;
            border-radius: 10px;
            white-space: nowrap;
        }

    /* Let the grid take full width and scroll horizontally if needed */
    body.page-schedule #grid-root,
    body.page-schedule .grid-page {
        width: 100%;
    }

    body.page-schedule #grid-root {
        overflow-x: auto;
    }

/* user grid*/
/* Consent color coding */
.consent-granted {
    color: #16a34a; /* green */
    font-weight: 600;
}

.consent-pending {
    color: #d97706; /* amber */
    font-weight: 600;
}

.consent-denied {
    color: #dc2626; /* red */
    font-weight: 600;
}