/* ============================================================
   responsive.css  — Bootstrap-powered mobile layout overrides
   ============================================================ */

/* ── Hamburger toggle button (hidden on desktop) ─────────── */
.sidebar-toggle {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1100;
    background: var(--primarycolor);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* ── Offcanvas sidebar overlay ───────────────────────────── */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1050;
}
.sidebar-overlay.active { display: block; }

/* ── Public pages (login / signup / index.html) ──────────── */
.auth-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 100%);
}

.auth-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(10,118,216,0.10);
    padding: 40px 36px;
    width: 100%;
    max-width: 460px;
}

.auth-card .header-text {
    font-size: 26px;
    font-weight: 700;
    color: #161c2d;
    margin-bottom: 4px;
}

.auth-card .sub-text {
    font-size: 14px;
    color: #6c757d;
    margin-bottom: 24px;
}

/* ── Tables → horizontal scroll on small screens ─────────── */
.table-responsive-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Search bar in header ────────────────────────────────── */
.header-searchbar {
    flex: 1 1 auto;
    min-width: 0;
}

/* ── Dashboard stat cards → wrap ────────────────────────── */
.dashboard-items {
    min-width: 140px;
}

/* ═══════════════════════════════════════════════════════════
   ALL SCREENS — dash-body header table (nav-bar row)
   The outermost <table> at the top of every .dash-body uses
   fixed td widths (13%, 15%, 10%).  Make it responsive on all
   screen sizes by converting to a flex row that wraps.
═══════════════════════════════════════════════════════════ */
.dash-body > div > table:first-child,
.dash-body > table:first-child {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    border-spacing: 0 !important;
}
.dash-body > div > table:first-child > tbody,
.dash-body > div > table:first-child > tr,
.dash-body > div > table:first-child > tbody > tr,
.dash-body > table:first-child > tbody,
.dash-body > table:first-child > tr,
.dash-body > table:first-child > tbody > tr {
    display: contents !important; /* let td be direct flex children */
}
.dash-body > div > table:first-child td.nav-bar,
.dash-body > table:first-child td.nav-bar {
    flex: 1 1 200px;
    min-width: 0;
}
.dash-body > div > table:first-child td[width],
.dash-body > table:first-child td[width] {
    flex: 0 0 auto;
}

/* ── Booking cards in sub-table (3-per-row pattern) ──────── */
/* Each card is <td style="width:25%"> inside a plain <tr>    */
.sub-table > tbody > tr > td.booking-card,
.sub-table tr > td > .dashboard-items.search-items {
    max-width: 100%;
}

/* ═══════════════════════════════════════════════════════════
   TABLET  ≤ 992px
═══════════════════════════════════════════════════════════ */
@media (max-width: 992px) {

    /* Sidebar collapses off-screen */
    .menu {
        position: fixed !important;
        top: 0;
        left: -100%;
        width: 260px !important;
        height: 100vh !important;
        z-index: 1060;
        background: #fff;
        border-right: 1.5px solid rgb(235,235,235);
        overflow-y: auto;
        transition: left 0.3s ease;
        box-shadow: 4px 0 20px rgba(0,0,0,0.12);
    }

    .menu.open {
        left: 0;
    }

    /* Main content takes full width */
    .dash-body {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: 100% !important;
        padding-top: 56px; /* space for toggle button */
    }

    /* Show hamburger */
    .sidebar-toggle {
        display: block;
    }

    /* Container no longer needs flex-row; override Bootstrap d-flex */
    .dash-wrapper {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* Stat cards row → wrap */
    .filter-container tr,
    .filter-container td {
        display: block !important;
        width: 100% !important;
    }

    .dashboard-items {
        width: 90% !important;
        margin: 8px auto !important;
    }

    /* Header search bar */
    .header-search {
        flex-wrap: wrap;
        gap: 6px;
    }

    /* Nav bar table → stack */
    .nav-bar td {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
    }

    /* Booking cards row: 3-per-row → 2-per-row */
    .sub-table tr > td[style*="width: 25%"],
    .sub-table tr > td[style*="width:25%"] {
        display: inline-block !important;
        width: 48% !important;
        vertical-align: top;
    }

    /* Two-column dashboard tables (upcoming appo / sessions) → stack */
    .dashbord-tables > tbody > tr > td[width="50%"],
    .dashbord-tables > tbody > tr > td {
        display: block !important;
        width: 100% !important;
    }

    /* Filter form (date/provider) → stack inline items */
    .filter-container-items {
        width: 100% !important;
    }

    /* Provider welcome button */
    .Provider-header .btn-primary {
        width: 100% !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE  ≤ 576px
═══════════════════════════════════════════════════════════ */
@media (max-width: 576px) {

    /* Auth cards */
    .auth-card {
        padding: 28px 18px;
    }

    /* Full-width inputs */
    .input-text,
    .box {
        width: 100% !important;
    }

    /* Popup modals */
    .popup {
        width: 92% !important;
        margin: 30px auto !important;
    }

    /* Sub-tables inside dashboards */
    .sub-table,
    .dashbord-tables {
        font-size: 13px;
    }

    .table-headin {
        font-size: 13px;
        padding: 6px;
    }

    /* Buttons */
    .login-btn,
    .logout-btn {
        width: 100% !important;
    }

    /* Heading sizes */
    .heading-text {
        font-size: 28px !important;
    }

    /* Landing page navbar links */
    .landing-nav td {
        display: block;
        text-align: center;
    }

    /* Profile section in sidebar */
    .profile-title { font-size: 16px; }
    .profile-subtitle { font-size: 12px; }

    /* Dashboard double-column tables → single column */
    .dashbord-tables > tbody > tr > td {
        display: block !important;
        width: 100% !important;
    }

    /* Scrollable data table container */
    .abc {
        height: auto !important;
        max-height: 320px;
        overflow-y: auto;
    }

    /* Search bar */
    .header-searchbar {
        width: 100% !important;
    }

    /* Booking cards → full-width on phones */
    .sub-table tr > td[style*="width: 25%"],
    .sub-table tr > td[style*="width:25%"] {
        display: block !important;
        width: 100% !important;
    }

    /* Doctor/patient card rows */
    .search-items {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    /* Add-session / add-new forms */
    .add-doc-form-container {
        padding: 12px !important;
    }

    /* Booking page session cards */
    .filter-container {
        width: 98% !important;
    }

    /* Settings tabs: each row is one card, make it full-width */
    .filter-container td[style*="width: 25%"],
    .filter-container td[style*="width:25%"] {
        display: block !important;
        width: 100% !important;
    }

    /* Filter form rows → each item full-width */
    .filter-container tr > td[width] {
        display: block !important;
        width: 100% !important;
        padding-top: 4px;
        padding-bottom: 4px;
    }

    /* Date/provider inputs inside filter form */
    .filter-container input[type="date"],
    .filter-container select,
    .filter-container input[type="submit"] {
        width: 100% !important;
        margin: 0 !important;
    }
}

/* Setting-tab card headings: even smaller on phones */
@media (max-width: 576px) {
    .setting-tabs .h1-dashboard {
        font-size: 15px !important;
    }
    .setting-tabs .h3-dashboard {
        font-size: 12px !important;
    }
}