/* ================================================================
   LINGUA LINK 360 — RESPONSIVE / MOBILE-FIRST STYLESHEET
   No build step required — loaded directly by app.blade.php

   Mobile-first approach covering all major breakpoints:
     Mobile:       320px – 480px
     Tablet:       481px – 768px
     Small Laptop: 769px – 1024px
     Desktop:      1025px+
   ================================================================ */

/* ── 1. GLOBAL FOUNDATION ──────────────────────────────────────── */
/* NOTE: overflow-x:hidden is intentionally on body only (not html).
   Setting it on html breaks position:fixed in iOS Safari — fixed elements
   scroll with the page or become unclickable. See also §D1 / §29. */
html {
    max-width: 100%;
}

body {
    overflow-x: hidden;
    max-width: 100%;
}

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

/* All media is fluid */
img,
video,
iframe,
embed,
object {
    max-width: 100%;
    height: auto;
}

/* ── 2. LAYOUT — SIDEBAR TRANSITION ────────────────────────────── */
/* Smooth slide for the off-canvas sidebar on mobile */
@media (max-width: 1199px) {
    .wrapper {
        width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    /* The theme (style.css) toggles .collapsed-menu; we only add the transition */
    .aside-menu-container {
        transition: left 0.28s ease-in-out !important;
    }

    /* Shadow when sidebar is open */
    .aside-menu-container.collapsed-menu {
        box-shadow: 4px 0 25px rgba(0, 0, 0, 0.18) !important;
    }

    /* Subtle header shadow to separate from content */
    header.header {
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
    }
}

/* ── 3. HEADER — MOBILE ADJUSTMENTS ────────────────────────────── */
@media (max-width: 767px) {
    header.header {
        padding: 0 8px !important;
    }

    /* Hospital badge — compact text */
    .bg-light-primary.rounded-pill {
        padding: 4px 10px !important;
    }

    .bg-light-primary.rounded-pill span.fs-5,
    .bg-light-primary.rounded-pill span.fw-bold {
        font-size: 0.72rem !important;
        max-width: 90px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
    }

    .bg-light-primary.rounded-pill .fa-hospital {
        font-size: 0.85rem !important;
    }

    /* Header nav items — tighter spacing */
    .nav.align-items-center > li {
        padding-left: 0.3rem !important;
        padding-right: 0.3rem !important;
    }

    /* User dropdown name — truncate */
    button#menuDropDown {
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.8rem;
    }

    /* Admin impersonation timer — hide on small screens */
    #admin-imp-timer {
        display: none !important;
    }
}

@media (max-width: 480px) {
    /* Impersonation warning banner — compact */
    #impersonation-warning-banner {
        padding: 3px 6px !important;
        gap: 6px !important;
    }

    #impersonation-warning-banner .lh-sm > div {
        font-size: 0.65rem !important;
    }

    /* Profile image in header — smaller */
    header .image.image-circle.image-mini {
        width: 32px;
        height: 32px;
        min-width: 32px;
    }
}

/* ── 4. TOP NAVBAR (sub-menu strip) ────────────────────────────── */
@media (max-width: 1199px) {
    .top-navbar {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .top-navbar .navbar-nav {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
    }

    .top-navbar .container-fluid {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    #nav-header .navbar-nav .nav-link {
        white-space: nowrap !important;
        padding: 8px 10px !important;
        font-size: 0.85rem !important;
    }
}

/* ── 5. CONTENT AREA SPACING ────────────────────────────────────── */
@media (max-width: 767px) {
    .content.d-flex.flex-column.flex-column-fluid {
        padding-top: 12px !important;
    }

    .container-fluid {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

@media (max-width: 480px) {
    .container-fluid {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

/* ── 6. DASHBOARD — STAT CARDS ──────────────────────────────────── */
/* Fix hardcoded 345px width */
.dashboard-card {
    width: 100% !important;
    max-width: 345px;
}

@media (max-width: 575px) {
    .dashboard-card {
        max-width: 100% !important;
    }
}

/* Doctor dashboard card — remove fixed pixel widths */
.dashbord-doctor-card {
    width: 100% !important;
}

@media (max-width: 425px) {
    .dashbord-doctor-card {
        margin-bottom: 16px !important; /* was 280px — caused huge blank space */
    }
}

/* Dashboard visit label */
@media (max-width: 767px) {
    .dashboard-vizit {
        margin-left: 0 !important;
    }
}

/* Admin user card body direction */
@media (max-width: 1024px) {
    .admin-dashbord-user-card-body {
        flex-direction: column !important;
    }
}

/* Admin user data margin */
@media (max-width: 767px) {
    .admin-user-data {
        margin-top: 0 !important;
    }
}

/* Dashboard chart header */
@media (max-width: 767px) {
    .card-header-dashbord {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 12px 16px !important;
        gap: 8px;
    }
}

/* Doctor dashboard body */
@media (max-width: 767px) {
    .dashbord-doctor-card-body {
        flex-direction: column !important;
    }
}

/* ── 7. SLOT SCHEDULING — REMOVE MARGIN HACKS ──────────────────── */
/* Replace the cascading 10-breakpoint margin-left hack with a single clean rule */
@media (max-width: 500px) {
    .add-slot {
        flex-direction: column !important;
        margin-left: 0 !important;
        align-items: flex-start !important;
        gap: 8px;
    }
}

/* ── 8. SMART PATIENT CARD ──────────────────────────────────────── */
/* Remove fixed 600px width */
.smart-card-tem-body {
    width: 100% !important;
    max-width: 600px;
    overflow-x: auto;
}

@media (max-width: 640px) {
    .smart-card-tem-body {
        max-width: 100%;
    }
}

@media (max-width: 575px) {
    .patient-modal-content .card .card-body {
        padding: 12px !important;
        flex-direction: column !important;
    }

    .patient-modal-content .card .card-body .card-img {
        width: 70px !important;
        min-width: 70px !important;
        height: 100px;
    }
}

/* ── 9. TABLES — HORIZONTAL SCROLL ─────────────────────────────── */
/* All table wrappers get touch-friendly horizontal scroll */
.table-responsive {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto !important;
    overflow-y: visible;
    margin-bottom: 1rem;
    width: 100%;
}

/* Minimum width prevents columns crushing before scroll kicks in */
@media (max-width: 768px) {
    .livewire-table,
    table.table {
        min-width: 550px;
    }

    /* Tighter cell padding on tablet */
    .livewire-table thead th,
    table.table thead th {
        padding: 10px 8px !important;
        font-size: 0.75rem !important;
    }

    .livewire-table tbody td,
    table.table tbody td {
        padding: 10px 8px !important;
        font-size: 0.8rem !important;
    }
}

@media (max-width: 480px) {
    .livewire-table thead th,
    table.table thead th {
        font-size: 0.7rem !important;
        padding: 8px 6px !important;
    }

    .livewire-table tbody td,
    table.table tbody td {
        font-size: 0.75rem !important;
        padding: 8px 6px !important;
    }
}

/* ── 10. FORMS — iOS ZOOM PREVENTION ───────────────────────────── */
/* iOS zooms in when input font-size < 16px — prevent that */
@media (max-width: 767px) {
    input.form-control,
    textarea.form-control,
    select.form-control,
    .form-select,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="date"] {
        font-size: 16px !important;
    }
}

/* Select2 containers always full width */
.select2-container {
    width: 100% !important;
    max-width: 100%;
}

/* ── 11. FORMS — COLUMN STACKING ────────────────────────────────── */
@media (max-width: 575px) {
    /* Stack multi-column form rows on small screens */
    .row > .col-md-6:not(.col-sm-6):not(.col-6),
    .row > .col-md-4:not(.col-sm-4):not(.col-4),
    .row > .col-md-3:not(.col-sm-3):not(.col-3),
    .row > .col-lg-6:not(.col-sm-6):not(.col-6),
    .row > .col-lg-4:not(.col-sm-4):not(.col-4),
    .row > .col-lg-3:not(.col-sm-3):not(.col-3) {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* ── 12. MODALS — MOBILE SIZING ─────────────────────────────────── */
@media (max-width: 575px) {
    /* Modal takes most of screen width on mobile */
    .modal-dialog:not(.modal-fullscreen):not(.modal-sm) {
        margin: 8px auto !important;
        width: calc(100% - 16px) !important;
        max-width: calc(100% - 16px) !important;
    }

    .modal-content {
        border-radius: 12px;
        max-height: 90vh;
        overflow-y: auto;
    }

    .modal-header {
        padding: 12px 16px !important;
    }

    .modal-title {
        font-size: 1rem !important;
    }

    .modal-body {
        padding: 12px 16px !important;
    }

    .modal-footer {
        padding: 8px 16px !important;
        gap: 8px;
        flex-wrap: nowrap;
    }

    .modal-footer .btn {
        flex: 1;
        min-height: 42px;
        font-size: 0.875rem;
    }
}

/* ── 13. BUTTONS — TOUCH TARGETS ────────────────────────────────── */
/* Minimum touch target size per WCAG: 44px */
@media (max-width: 768px) {
    .btn {
        min-height: 38px;
    }

    /* Hamburger and sidebar toggles */
    .sidebar-btn,
    .navbar-toggler,
    button.btn.px-0[type="button"] {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ── 14. AUTH PAGES (login / register) ──────────────────────────── */
@media (max-width: 600px) {
    .width-540 {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

@media (max-width: 575px) {
    /* Auth card inner padding */
    .bg-white.rounded-15.shadow-md {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
        border-radius: 12px !important;
        margin-left: 4px;
        margin-right: 4px;
    }

    /* Auth page container */
    .d-flex.flex-column.flex-column-fluid.align-items-center.justify-content-center {
        padding: 0.75rem !important;
    }
}

/* ── 15. FRONT-END PAGES ────────────────────────────────────────── */
/* Logo size constraint */
.front-app-logo {
    max-height: 55px;
    max-width: 180px;
    width: auto;
    object-fit: contain;
}

@media (max-width: 767px) {
    .front-app-logo {
        max-height: 42px;
        max-width: 140px;
    }
}

@media (max-width: 480px) {
    .front-app-logo {
        max-height: 36px;
        max-width: 120px;
    }
}

/* Front header button group */
@media (max-width: 991px) {
    .header-btn-grp {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 8px;
    }

    .header-btn-grp .btn {
        min-height: 42px;
        padding: 8px 16px;
    }
}

/* Front-end nav collapse spacing */
@media (max-width: 991px) {
    .collapse.navbar-collapse {
        padding: 8px 0;
    }

    .navbar-nav.align-items-center {
        align-items: flex-start !important;
        padding: 0 8px;
    }

    .navbar-nav .nav-link {
        padding: 10px 12px !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    }
}

/* ── 16. RENEWAL WARNING BANNER ─────────────────────────────────── */
@media (max-width: 575px) {
    .alert.alert-warning.d-flex.align-items-center {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 10px 12px !important;
    }

    .alert.alert-warning.d-flex.align-items-center i.fas {
        margin-right: 0 !important;
        margin-bottom: 6px;
    }
}

/* ── 17. CARD HEADERS WITH TOOLBARS ─────────────────────────────── */
@media (max-width: 575px) {
    /* Page title + back button rows */
    .d-flex.justify-content-between.align-items-end.mb-5 {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px;
    }

    .d-flex.justify-content-between.align-items-end.mb-5 a.btn.btn-outline-primary {
        align-self: flex-start;
    }
}

/* ── 18. CALENDAR (FullCalendar) ─────────────────────────────────── */
@media (max-width: 767px) {
    .fc {
        font-size: 0.75rem !important;
    }

    .fc .fc-toolbar {
        flex-direction: column !important;
        align-items: center;
        gap: 8px;
    }

    .fc .fc-toolbar-title {
        font-size: 1rem !important;
    }

    .fc .fc-button {
        padding: 4px 8px !important;
        font-size: 0.78rem !important;
    }

    .fc .fc-daygrid-event,
    .fc .fc-list-event {
        font-size: 0.7rem !important;
    }
}

/* ── 19. NOTIFICATION DROPDOWN ──────────────────────────────────── */
@media (max-width: 575px) {
    .custom-dropdown .dropdown-menu,
    .dropdown-menu[aria-labelledby="dropdownMenuButton1"] {
        width: calc(100vw - 32px) !important;
        max-width: 320px !important;
        right: 0 !important;
        left: auto !important;
        transform: none !important;
    }
}

/* ── 20. USER DROPDOWN MENU ─────────────────────────────────────── */
@media (max-width: 575px) {
    .dropdown-menu[aria-labelledby="menuDropDown"] {
        width: calc(100vw - 32px) !important;
        max-width: 280px !important;
        right: 0 !important;
        left: auto !important;
    }
}

/* ── 21. TOAST NOTIFICATIONS ────────────────────────────────────── */
@media (max-width: 480px) {
    #toast-container {
        width: 100% !important;
        padding: 0 8px;
        left: 0 !important;
        right: 0 !important;
    }

    #toast-container > .toast {
        width: 100% !important;
        min-width: 0 !important;
        margin-bottom: 4px;
    }
}

/* ── 22. TYPOGRAPHY SCALING ─────────────────────────────────────── */
@media (max-width: 768px) {
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.25rem; }
    h3 { font-size: 1.1rem; }
}

@media (max-width: 480px) {
    h1 { font-size: 1.3rem; }
    h2 { font-size: 1.1rem; }
}

/* ── 23. STAT CARDS — GRID ──────────────────────────────────────── */
/* 2-column grid for stat widgets on mobile */
@media (max-width: 575px) {
    .row > .col-md-3,
    .row > .col-lg-3 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

@media (max-width: 400px) {
    .row > .col-md-3,
    .row > .col-lg-3 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* ── 24. PAGINATION ──────────────────────────────────────────────── */
@media (max-width: 575px) {
    .pagination {
        flex-wrap: wrap;
        gap: 3px;
        justify-content: center;
    }

    .pagination .page-link {
        padding: 6px 10px;
        font-size: 0.8rem;
    }
}

/* ── 25. PRESCRIPTION MEDICINE TABLE ────────────────────────────── */
@media (max-width: 575px) {
    #prescriptionMedicineTable td,
    #prescriptionMedicineTable th {
        padding: 6px 4px !important;
        font-size: 0.75rem;
    }

    #prescriptionMedicineTable input.form-control {
        padding: 4px !important;
    }
}

/* ── 26. SIDEBAR BOTTOM TRASH BIN ───────────────────────────────── */
/* Ensure the fixed-position bottom button still works on mobile */
@media (max-width: 1199px) {
    #sidebar .nav-link {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }
}

/* ── 27. PATIENT DETAIL TABS ────────────────────────────────────── */
@media (max-width: 767px) {
    .patient-detail-page .patient-detail-tabs-row {
        flex-direction: column;
        gap: 8px;
    }

    .patient-detail-page .patient-detail-diagnose-btn {
        align-self: flex-start;
        margin-top: 0;
    }
}

/* ── 28. DARK MODE — RESPONSIVE HEADER ──────────────────────────── */
@media (max-width: 1199px) {
    .dark-mode header.header {
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
    }
}

/* ── 29. OVERFLOW PROTECTION ────────────────────────────────────── */
/* Prevent any direct child of body from overflowing */
.d-flex.flex-column.flex-root {
    overflow-x: hidden;
}

/* ── 30. ACCESSIBILITY — FOCUS INDICATORS ───────────────────────── */
@media (max-width: 768px) {
    :focus-visible {
        outline: 2px solid #217FF7;
        outline-offset: 2px;
    }
}

/* ── 31. PRINT — HIDE NAVIGATION ───────────────────────────────── */
@media print {
    #sidebar,
    header.header,
    .bg-overlay,
    #sidebar-overly {
        display: none !important;
    }

    .wrapper {
        margin-left: 0 !important;
    }
}

/* ── 32. GAME / LANGUAGE CARD GRIDS ─────────────────────────────── */
@media (max-width: 575px) {
    .row > .col-sm-6.col-md-4.col-lg-3 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

@media (max-width: 400px) {
    .row > .col-sm-6.col-md-4.col-lg-3 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* ── 33. LIVE CONSULTATIONS ─────────────────────────────────────── */
@media (max-width: 575px) {
    .start-meeting-btn,
    .join-meeting-btn {
        width: 100%;
        margin-bottom: 4px;
    }
}

/* ── 34. DASHBOARD XL COLUMNS ───────────────────────────────────── */
@media (max-width: 767px) {
    .row > .col-xl-4,
    .row > .col-xxl-8,
    .row > .col-xxl-12 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* ── 35. MY RESOURCE TABLE MIN-WIDTH OVERRIDE ON MOBILE ─────────── */
/* Override the 360px min-width from my-resource.scss on small screens */
@media (max-width: 575px) {
    td.text-center {
        min-width: auto !important;
    }
}

/* ── 36. HOSPITAL BADGE — ALWAYS VISIBLE ────────────────────────── */
/* The d-none d-sm-block was removed in blade; ensure it shows well at all sizes */
@media (max-width: 360px) {
    .bg-light-primary.rounded-pill {
        display: none !important; /* Only hide on very tiny screens where space is critical */
    }
}

/* ── 37. HOSPITAL INDEX STATS CARDS — WRAP ON MOBILE ────────────── */
@media (max-width: 767px) {
    /* Clinic stats row in hospital index */
    .d-flex.gap-3 {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .rounded.shadow-sm.px-4.py-2[style*="background-color"] {
        min-width: 70px !important;
        padding: 6px 10px !important;
    }

    /* Header area with h1 + stats badges */
    .d-flex.align-items-center.flex-wrap.gap-4 {
        gap: 8px !important;
    }

    .d-flex.align-items-center.justify-content-between.mb-7 {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px;
    }
}

/* ── 38. APPOINTMENT CALENDAR CARD HEADER ───────────────────────── */
@media (max-width: 575px) {
    /* Calendar header legend badges — wrap on mobile */
    .card-header .d-flex.align-items-center.flex-wrap {
        flex-wrap: wrap !important;
        gap: 6px;
    }
}

/* ── 39. APPOINTMENT SLOT CONTAINER ─────────────────────────────── */
/* The slot grid inside a form — ensure it's scrollable on mobile */
.fc-timegrid-slot.form-control.h-300px {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* ── 40. SUBSCRIPTION EXPIRED PAGE ──────────────────────────────── */
@media (max-width: 575px) {
    .subscription-expired-page,
    .subscription-expired-content {
        padding: 16px !important;
        text-align: center;
    }
}

/* ── 41. PROFILE FORM — 2-COLUMN STACKING ───────────────────────── */
@media (max-width: 767px) {
    /* Profile form label/value 2-col → 1-col */
    .row > .col-lg-4,
    .row > .col-lg-8 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* ── 42. CLINICAL FORMS — TABLE HEADERS OVERFLOW PROTECTION ─────── */
@media (max-width: 768px) {
    /* Clinical form assessment tables */
    .table > thead > tr > th,
    .table > tbody > tr > td {
        white-space: normal !important;
        word-break: break-word;
    }
}

/* ── 43. TRANSACTIONS TABLE ─────────────────────────────────────── */
@media (max-width: 768px) {
    #table-transactions table {
        min-width: 700px;
    }
}

/* ── 44. DOCTOR / STAFF SHOW PAGE ───────────────────────────────── */
@media (max-width: 767px) {
    /* 2-col layout in show pages */
    .col-lg-3.text-lg-end {
        text-align: left !important;
        margin-top: 4px;
    }
}

/* ── 45. SETTING PAGE ────────────────────────────────────────────── */
@media (max-width: 767px) {
    /* Settings menu tabs — horizontal scroll */
    .setting-menu,
    .nav.nav-tabs.nav-line-tabs {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
    }

    .nav.nav-tabs.nav-line-tabs .nav-item {
        flex-shrink: 0;
    }
}

/* ── 46. ROLES & PERMISSIONS PAGE ───────────────────────────────── */
@media (max-width: 767px) {
    /* Permission checkbox groups — better touch spacing */
    .form-check {
        padding: 8px 0 8px 2rem;
    }

    .form-check-label {
        font-size: 0.875rem;
    }
}

/* ── 47. MEDICINE BILLS / PRESCRIPTIONS ─────────────────────────── */
@media (max-width: 767px) {
    /* Multi-medicine table inside prescription */
    .prescription-medicine-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .prescription-medicine-table table {
        min-width: 600px;
    }
}

/* ── 48. SEARCH INPUT INSIDE SIDEBAR ────────────────────────────── */
/* Sidebar search is already flex; just ensure it doesn't overflow */
.aside-menu-container__aside-search .form-control {
    font-size: 14px !important; /* override the 16px iOS rule inside sidebar */
    min-width: 0;
}

/* ── 49. GENDER RADIO BUTTONS — TOUCH SPACING ───────────────────── */
@media (max-width: 575px) {
    .form-check-input[type="radio"] {
        width: 18px;
        height: 18px;
        margin-top: 0.1rem;
    }

    .is-valid .mt-2 label.form-label {
        margin-bottom: 0;
        line-height: 2;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   50. PWA — SAFE AREA INSETS (notch / home indicator)
   Uses CSS env() to respect iPhone X+ notch and Android cutout areas.
   ───────────────────────────────────────────────────────────────────────── */
body {
    padding-left:  env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

@media (display-mode: standalone) {
    body {
        padding-bottom: env(safe-area-inset-bottom, 16px);
    }

    header.header {
        padding-top: env(safe-area-inset-top, 0px);
    }

    .container-fluid > footer,
    .footer-wrapper {
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
    }
}

/* ── 51. PWA — TOUCH INTERACTION POLISH ─────────────────────────────────── */
a,
button,
.btn,
[role="button"],
input[type="submit"],
input[type="button"] {
    -webkit-tap-highlight-color: transparent;
}

html,
.table-responsive,
.aside-menu-container,
.top-navbar {
    -webkit-overflow-scrolling: touch;
}

.sidebar-btn,
.navbar-toggler,
.btn,
header.header {
    -webkit-user-select: none;
    user-select: none;
}

/* ── 52. PWA — INSTALL BANNER ────────────────────────────────────────────── */
.pwa-install-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #fff;
    border-top: 1px solid #e4e6ef;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform;
}

.pwa-install-banner--visible {
    transform: translateY(0);
}

.pwa-install-banner__inner {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 600px;
    margin: 0 auto;
}

.pwa-install-banner__icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    object-fit: contain;
    flex-shrink: 0;
    border: 1px solid #f1f3f9;
}

.pwa-install-banner__text {
    flex: 1;
    min-width: 0;
}

.pwa-install-banner__text strong {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: #1e1e2d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pwa-install-banner__text span {
    display: block;
    font-size: 0.75rem;
    color: #7e8299;
    line-height: 1.4;
}

.pwa-install-banner__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.pwa-install-banner__btn {
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    min-height: 36px;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.15s, transform 0.1s;
}

.pwa-install-banner__btn:active { transform: scale(0.96); }

.pwa-install-banner__btn--primary {
    background: #5e72e4;
    color: #fff;
}

.pwa-install-banner__btn--primary:hover { background: #4558d4; }

.pwa-install-banner__btn--ghost {
    background: #f1f3f9;
    color: #7e8299;
    padding: 8px 10px;
}

.pwa-install-banner__btn--ghost:hover { background: #e4e6ef; }

/* ── 53. PWA — iOS INSTALL MODAL ─────────────────────────────────────────── */
.pwa-ios-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.pwa-ios-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pwa-ios-modal--visible .pwa-ios-modal__backdrop { opacity: 1; }

.pwa-ios-modal__card {
    position: relative;
    background: #fff;
    border-radius: 20px 20px 0 0;
    padding: 28px 24px;
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
    width: 100%;
    max-width: 480px;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-align: center;
}

.pwa-ios-modal__card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 12px 0 8px;
    color: #1e1e2d;
}

.pwa-ios-modal__card p {
    font-size: 0.875rem;
    color: #7e8299;
    margin-bottom: 16px;
}

.pwa-ios-modal--visible .pwa-ios-modal__card { transform: translateY(0); }

.pwa-ios-modal__icon {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    object-fit: contain;
    border: 1px solid #f1f3f9;
}

.pwa-ios-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: #f1f3f9;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 0.85rem;
    color: #7e8299;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}

.pwa-ios-modal__steps {
    text-align: left;
    padding-left: 20px;
    margin-bottom: 16px;
}

.pwa-ios-modal__steps li {
    font-size: 0.875rem;
    color: #3f4254;
    margin-bottom: 8px;
    line-height: 1.5;
}

.pwa-ios-modal__note {
    font-size: 0.8rem !important;
    color: #a1a5b7 !important;
    margin-bottom: 0 !important;
}

.pwa-ios-share-icon {
    display: inline-block;
    background: #007aff;
    color: #fff;
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 0.75rem;
}

/* ── 50. SUMMARY TOTAL ROW IN TABLES ─────────────────────────────── */
@media (max-width: 575px) {
    tfoot tr td {
        font-size: 0.8rem !important;
        padding: 8px 6px !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   AUDIT FIX BATCH — Mobile Responsiveness Round 2
   Covers: add-button visibility, chart height, duplicate tab nav,
   table toolbars, search field, card titles, notification dropdown,
   action buttons, header improvements.
   ───────────────────────────────────────────────────────────────────────── */

/* ── A1. LIVEWIRE TABLE TOOLBAR — ADD BUTTON ALWAYS VISIBLE ─────────────── */
/* Root fix: the toolbar row in table.blade.php used d-flex without flex-wrap,
   pushing the "Add Patient / Doctor / Staff" button off-screen on narrow devices.
   The vendor view now has class `lwt-table-header`; this CSS backs it up. */

.lwt-table-header {
    flex-wrap: wrap !important;
}

/* Left side (search) — always visible, flexible width */
.lwt-search-wrapper {
    flex: 1 1 240px;
    min-width: 0;
}

/* On very small screens, search takes full row, buttons wrap below */
@media (max-width: 575px) {
    .lwt-search-wrapper,
    .lwt-search-wrapper form {
        width: 100% !important;
    }

    /* Remove the fixed 320px width from the search input container */
    .lwt-search-inner,
    .width-320 {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Right-side actions wrap to new line and align right */
    .lwt-table-actions {
        width: 100%;
        justify-content: flex-end !important;
    }
}

/* Fallback: any d-flex justify-content-between that wraps search + add button */
@media (max-width: 575px) {
    /* Generic table toolbar pattern without the lwt class */
    .d-flex.justify-content-between.mb-5 {
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin-bottom: 0.75rem !important;
    }

    .d-flex.justify-content-between.mb-5 > form {
        width: 100% !important;
    }

    .d-flex.justify-content-between.mb-5 .width-320 {
        width: 100% !important;
    }
}

/* ── A2. CHART HEIGHT OVERRIDE — MOBILE ─────────────────────────────────── */
/* Inline style="height: 350px" is too tall for portrait mobile screens. */
@media (max-width: 767px) {
    #appointmentChartId,
    #appointmentDoctorChartId {
        height: 220px !important;
    }
}

@media (max-width: 480px) {
    #appointmentChartId,
    #appointmentDoctorChartId {
        height: 185px !important;
    }
}

/* ── A3. DASHBOARD — DAY / WEEK / MONTH TAB BUTTONS ─────────────────────── */
/* The period filter tabs now live in a single (non-duplicate) nav.
   Shrink padding on small screens so all three fit without overflow. */
@media (max-width: 575px) {
    .doctor-period-nav .nav-link,
    .nav-link.btn.btn-sm.btn-color-muted.btn-active-light-primary {
        padding-left: 8px !important;
        padding-right: 8px !important;
        font-size: 0.78rem !important;
    }
}

/* ── A4. HEADER — HOSPITAL BADGE IMPROVEMENTS ───────────────────────────── */
/* Wider max-width so shorter names aren't truncated; hide icon at 480px. */
@media (max-width: 767px) {
    .bg-light-primary.rounded-pill span.fs-5,
    .bg-light-primary.rounded-pill span.fw-bold {
        max-width: 120px !important;  /* was 90px — allows ~15 chars */
    }
}

@media (max-width: 480px) {
    /* Hide the hospital icon to recover ~24px of header width */
    .bg-light-primary.rounded-pill .fa-hospital {
        display: none !important;
    }

    .bg-light-primary.rounded-pill span.fs-5,
    .bg-light-primary.rounded-pill span.fw-bold {
        max-width: 100px !important;
    }
}

/* ── A5. NOTIFICATION DROPDOWN — RESPONSIVE HEIGHT ──────────────────────── */
@media (max-width: 575px) {
    /* Prevent notification scroll area from eating the full viewport */
    .inner-scroll.height-270 {
        max-height: 200px !important;
        overflow-y: auto;
    }

    /* Tighten notification header padding */
    .dropdown-menu .px-7 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* ── A6. SMART CARD BUTTON — TOUCH PADDING ──────────────────────────────── */
@media (max-width: 575px) {
    a.btn.px-5.show_patient_card {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

/* ── A7. TABLE HEADER TEXT — PREVENT MULTI-LINE WRAPPING ────────────────── */
/* Headers that wrap to 2+ lines are unreadable; the table scrolls instead. */
@media (max-width: 992px) {
    .table thead th {
        white-space: nowrap !important;
    }
}

/* ── A8. ACTION BUTTONS IN TABLE ROWS — TOUCH TARGETS ───────────────────── */
@media (max-width: 768px) {
    [class*="-action-column"] .btn,
    .doctor-action-column .btn,
    .staff-action-column .btn,
    .patient-action-column .btn {
        min-height: 34px;
        min-width: 34px;
        padding: 4px 7px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }
}

/* ── A9. DOCTOR/PATIENT TABS ON LIST PAGES ───────────────────────────────── */
@media (max-width: 767px) {
    /* Tab list scrolls horizontally, items don't wrap */
    .nav.nav-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }

    .nav.nav-tabs .nav-item {
        flex-shrink: 0;
    }

    .nav.nav-tabs .nav-link {
        white-space: nowrap;
        padding: 8px 14px !important;
        font-size: 0.875rem !important;
    }

    /* Reduce large me-7 margins on tab items */
    .nav.nav-tabs .nav-item.me-7 {
        margin-right: 1rem !important;
    }
}

/* ── A10. CARD TITLE TEXT — SMALL SCREEN SCALING ────────────────────────── */
@media (max-width: 575px) {
    .card-label.fw-bolder.fs-3 {
        font-size: 0.95rem !important;
    }

    /* Earnings title + currency symbol wraps instead of overflowing */
    h3.card-title span.card-label {
        word-break: break-word;
        white-space: normal;
    }
}

/* ── A11. USER DROPDOWN — REDUCE EXCESSIVE PADDING ──────────────────────── */
@media (max-width: 575px) {
    .dropdown-menu.py-7 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
}

/* ── A12. FILTER DROPDOWN — WIDTH ON MOBILE ──────────────────────────────── */
@media (max-width: 575px) {
    /* Prevent filter dropdowns overflowing the viewport */
    .dropdown-menu[aria-labelledby*="dashboardFilter"],
    .dropdown-menu[aria-labelledby*="Filter"] {
        min-width: calc(100vw - 32px) !important;
        max-width: calc(100vw - 32px) !important;
        right: 0 !important;
        left: auto !important;
    }
}

/* ── A13. HEADER NAV — PREVENT OVERFLOW AT NARROW WIDTHS ────────────────── */
/* The ul.nav.align-items-center in the header is a flex row.
   On very small screens, squeeze icons tighter. */
@media (max-width: 380px) {
    .nav.align-items-center > li {
        padding-left: 0.1rem !important;
        padding-right: 0.1rem !important;
    }

    button#menuDropDown {
        max-width: 60px !important;
        font-size: 0.75rem !important;
    }

    .bg-light-primary.rounded-pill {
        padding: 3px 6px !important;
    }
}

/* ── A14. DASHBOARD COLUMN RESPONSIVE (LG BREAKPOINT) ───────────────────── */
/* The blade files now use col-lg-4 / col-lg-8, so at 992-1199px
   the dashboard shows side-by-side instead of fully stacked.
   This rule tightens the chart card padding to recover space. */
@media (min-width: 992px) and (max-width: 1199px) {
    .card-header-dashbord {
        padding: 12px 16px !important;
    }

    #appointmentChartId,
    #appointmentDoctorChartId {
        height: 280px !important;
    }
}

/* ── A15. CARD TOOLBAR — WRAPPING ON MOBILE ──────────────────────────────── */
/* Toolbars in card headers with a title + right-side button group */
@media (max-width: 575px) {
    /* Filter dropdown button in dashboard card header */
    .card-header-dashbord .dropdown.d-flex {
        margin-right: 0 !important;
    }

    .card-header-dashbord {
        flex-wrap: wrap !important;
    }

    /* Allow filter to breathe */
    .ms-0.ms-md-2.mb-3 {
        margin-left: 0 !important;
    }
}

/* ── A16. IMPERSONATION BANNER — COMPACT AT VERY NARROW ─────────────────── */
@media (max-width: 400px) {
    #impersonation-warning-banner {
        max-width: 120px;
        overflow: hidden;
    }

    #impersonation-warning-banner .lh-sm div {
        font-size: 0.6rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 90px;
    }
}

/* ── A17. SEARCH FIELD — REMOVE FIXED WIDTH ON MOBILE ───────────────────── */
/* The width-320 theme class applies 320px to the search input container.
   On ≤575px screens this pushes the add button off-screen. */
@media (max-width: 575px) {
    .width-320 {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ── A18. PILLS / BADGE OVERFLOW ─────────────────────────────────────────── */
@media (max-width: 575px) {
    /* Status badges in tables — prevent wrapping */
    .badge.rounded-pill,
    span.badge {
        white-space: nowrap;
        font-size: 0.7rem !important;
    }
}

/* ── A19. LIVEWIRE TABLE SEARCH — iOS FONT-SIZE ─────────────────────────── */
/* The theme overrides font-size to 16px for all inputs at ≤767px.
   The sidebar search was already excluded; also ensure Livewire search
   field doesn't trigger iOS zoom (needs ≥16px). */
.search-box.form-control {
    font-size: 16px;
}

/* ── A20. DOCTOR DASHBOARD — HEADER ROW FLEXBOX ─────────────────────────── */
/* The "Recent Appointments + Day/Week/Month" header row now uses flex-wrap
   so the period buttons drop below the title on narrow screens. */
@media (max-width: 575px) {
    .d-flex.flex-wrap.align-items-center.border-0.pt-5 {
        gap: 6px;
    }

    .d-flex.flex-wrap.align-items-center.border-0.pt-5 h3 {
        font-size: 1rem !important;
    }
}

/* ================================================================
   TABLE MOBILE OVERHAUL — B1–B9
   Prevents vertical cell stacking; table scrolls horizontally.
   Desktop (≥1025px) layouts are completely unaffected.
   ================================================================ */

/* ── B1. HORIZONTAL SCROLL + ENLARGED MIN-WIDTH ─────────────────── */
/* Livewire tables with 9+ columns need more than the default 550px.
   Horizontal scroll takes over so cells never wrap. */
@media (max-width: 1024px) {
    .table-responsive > table.table {
        min-width: 800px;
    }
}

/* ── B2. STICKY HEADER ───────────────────────────────────────────── */
/* As the user scrolls right inside the scrollable container the
   column headers stay pinned at the top of the table. */
@media (max-width: 1200px) {
    .table-responsive {
        position: relative;
    }

    table.table thead th {
        position: sticky;
        top: 0;
        z-index: 5;
        background-color: #fff;
        background-clip: padding-box;
    }
}

/* ── B3. SCROLL SHADOW — VISUAL CUE THAT TABLE IS SCROLLABLE ─────── */
@media (max-width: 1024px) {
    .table-responsive {
        box-shadow: inset -8px 0 10px -8px rgba(0, 0, 0, 0.15);
    }
}

/* ── B4. TBODY CELLS — NO WRAPPING ────────────────────────────────── */
/* Combined with min-width above, cells stay single-line and the
   browser adds a horizontal scrollbar instead of stacking text. */
@media (max-width: 1200px) {
    table.table tbody td {
        white-space: nowrap;
    }
}

/* ── B5. NAME CELLS — HIDE EMAIL SUB-LINE ────────────────────────── */
/* Name cells render as: [avatar] [name ↵ email].
   Hiding the email span at tablet/mobile keeps rows single-line height. */
@media (max-width: 992px) {
    table.table tbody td .d-flex.flex-column > span.fs-6 {
        display: none !important;
    }
}

/* ── B6. PROFILE AVATARS — COMPACT IN TABLE CELLS ────────────────── */
@media (max-width: 768px) {
    table.table tbody td .image.image-circle.image-mini {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px;
    }

    table.table tbody td .image.image-circle.image-mini img {
        width: 32px !important;
        height: 32px !important;
    }
}

/* ── B7. REGISTERED-ON BADGE — SHRINK FONT ───────────────────────── */
/* Full datetime (DD MMM YYYY hh:mm A) in a badge is wide; shrink it. */
@media (max-width: 992px) {
    table.table tbody td .badge.bg-primary {
        font-size: 0.7rem !important;
        padding: 4px 6px !important;
        white-space: nowrap;
    }
}

/* ── B8. ACTION BUTTONS — TIGHTER PADDING ────────────────────────── */
@media (max-width: 992px) {
    [data-action-column="true"] .btn,
    [class*="-action-column"] .btn {
        padding: 5px 8px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        font-size: 0.8rem !important;
    }

    [data-action-column="true"],
    [class*="-action-column"] {
        min-width: 80px;
        white-space: nowrap;
    }
}

/* ── B9. SPECIALIZATION INLINE STYLE OVERRIDE ────────────────────── */
/* StaffTable.php sets style="width:150px; max-width:150px" inline.
   Overflow hidden + ellipsis prevents the text from widening the column. */
@media (max-width: 1200px) {
    table.table tbody td[style*="max-width"] {
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ================================================================
   MOBILE CARD LAYOUT — Livewire Data Tables  (C1–C18)
   Below 768 px: each <tr> becomes a standalone info card.
   Above 768 px: nothing changes — full desktop table is preserved.
   ================================================================ */

@media (max-width: 767px) {

    /* C1. Kill horizontal scroll — cards don't need it */
    [wire\:id] .table-responsive {
        overflow-x: visible !important;
        box-shadow: none !important;
    }

    /* C2. Reset the 800 px min-width (B1) so cards fill the column */
    [wire\:id] .table-responsive > table.table {
        min-width: 0 !important;
        width: 100% !important;
        display: block !important;
    }

    /* C3. tbody must also be block so its children stack vertically */
    [wire\:id] .table-responsive > table.table > tbody {
        display: block !important;
        width: 100% !important;
    }

    /* C4. Hide the desktop column header row */
    [wire\:id] .table-responsive > table.table > thead {
        display: none !important;
    }

    /* ── C5. CARD SHELL: each <tr> ─────────────────────────────────── */
    [wire\:id] .table-responsive > table.table > tbody > tr {
        display: block !important;
        position: relative !important;
        background: #ffffff !important;
        border-radius: 14px !important;
        box-shadow: 0 2px 14px rgba(0, 0, 0, 0.07) !important;
        border: 1px solid #e4e6ef !important;
        border-left: none !important; /* prevent hover rule from adding left border */
        margin-bottom: 14px !important;
        padding: 0 !important;
        overflow: hidden !important;
        cursor: default !important;
        transition: box-shadow 0.2s ease !important;
    }

    [wire\:id] .table-responsive > table.table > tbody > tr:hover {
        box-shadow: 0 4px 22px rgba(0, 0, 0, 0.11) !important;
        background-color: #ffffff !important;
        border-left: none !important;
    }

    /* ── C6. CARD ROW: each <td> as labelled flex row ────────────────
       Overrides B4 (nowrap), B6 (avatar sizing), and d-none/d-sm-table-cell
       so ALL columns appear in the card view. */
    [wire\:id] .table-responsive > table.table > tbody > tr > td {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        padding: 10px 16px !important;
        border: none !important;
        border-bottom: 1px solid #f5f5f5 !important;
        font-size: 13px !important;
        white-space: normal !important;
        min-height: 46px !important;
        gap: 10px !important;
        color: #3f4254 !important;
    }

    [wire\:id] .table-responsive > table.table > tbody > tr > td:last-child {
        border-bottom: none !important;
    }

    /* C7. Column label prefix via data-label attribute */
    [wire\:id] .table-responsive > table.table > tbody > tr > td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 10px;
        color: #a1a5b7;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        min-width: 100px;
        flex-shrink: 0;
        line-height: 1.4;
    }

    /* ── C8. CARD HEADER: Name/Avatar cell ─────────────────────────
       Detected via the avatar image; shown as a prominent header strip. */
    [wire\:id] .table-responsive > table.table > tbody > tr > td:has(.image-circle) {
        padding: 14px 16px !important;
        border-bottom: 2px solid #e8eaf0 !important;
        background: linear-gradient(to right, #f8f9fc, #ffffff) !important;
        min-height: 72px !important;
        gap: 12px !important;
    }

    /* No label for the name/avatar cell — the card header speaks for itself */
    [wire\:id] .table-responsive > table.table > tbody > tr > td:has(.image-circle)::before {
        display: none !important;
    }

    /* C9. Avatar sizing: slightly larger in card header */
    [wire\:id] .table-responsive > table.table > tbody > tr > td:has(.image-circle) .image.image-circle.image-mini {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        border: 2px solid #e0e3ef !important;
    }

    /* C10. Patient name typography in card header */
    [wire\:id] .table-responsive > table.table > tbody > tr > td:has(.image-circle) .d-flex.flex-column a {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #181c32 !important;
        line-height: 1.3 !important;
    }

    /* C11. Email sub-line: re-show (overrides B5 which hides it below 992 px) */
    [wire\:id] .table-responsive > table.table > tbody > tr > td:has(.image-circle) .d-flex.flex-column span.fs-6 {
        display: block !important;
        font-size: 12px !important;
        color: #7e8299 !important;
        margin-top: 2px !important;
    }

    /* ── C12. SR# COLUMN: compact badge, top-right of card ──────────
       position: absolute takes it out of flow; remaining cells stack cleanly. */
    [wire\:id] .table-responsive > table.table > tbody > tr > td:first-child {
        position: absolute !important;
        top: 14px !important;
        right: 14px !important;
        width: auto !important;
        min-height: auto !important;
        padding: 2px 8px !important;
        border: none !important;
        border-bottom: none !important;
        background: #eff2f5 !important;
        border-radius: 20px !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        color: #b5b5c3 !important;
        gap: 0 !important;
        z-index: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    [wire\:id] .table-responsive > table.table > tbody > tr > td:first-child::before {
        display: none !important;
    }

    /* ── C13. ACTION COLUMN: touch-friendly button row ──────────────────
       Primary:  detected via data-column-type="action" (set in td.blade.php)
       Fallback: :has([data-action-column]) for any missed edge cases */
    [wire\:id] .table-responsive > table.table > tbody > tr > td[data-column-type="action"],
    [wire\:id] .table-responsive > table.table > tbody > tr > td:has([data-action-column="true"]) {
        justify-content: center !important;
        flex-wrap: wrap !important;
        background: #f9fafb !important;
        padding: 12px 16px !important;
        border-top: 1px solid #eff2f5 !important;
        border-bottom: none !important;
        gap: 8px !important;
        min-height: 58px !important;
    }

    /* No label for action column */
    [wire\:id] .table-responsive > table.table > tbody > tr > td[data-column-type="action"]::before,
    [wire\:id] .table-responsive > table.table > tbody > tr > td:has([data-action-column="true"])::before {
        display: none !important;
    }

    /* C14. Action column inner wrapper: horizontal row */
    [wire\:id] .table-responsive > table.table > tbody > tr > td[data-column-type="action"] [data-action-column="true"],
    [wire\:id] .table-responsive > table.table > tbody > tr > td:has([data-action-column="true"]) [data-action-column="true"],
    [wire\:id] .table-responsive > table.table > tbody > tr > td[data-column-type="action"] .transaction-action-column,
    [wire\:id] .table-responsive > table.table > tbody > tr > td:has([data-action-column="true"]) .transaction-action-column {
        flex-direction: row !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding: 0 !important;
        width: 100% !important;
        display: flex !important;
    }

    /* C15. Action buttons — 44 px touch target (WCAG 2.1 minimum)
       Note: font-size: 0 hides text labels; icons are restored below.
       The form-check (toggle switch) is excluded to keep its visual. */
    [wire\:id] .table-responsive > table.table > tbody > tr > td[data-column-type="action"] .btn:not(.form-check),
    [wire\:id] .table-responsive > table.table > tbody > tr > td:has([data-action-column="true"]) .btn:not(.form-check) {
        min-width: 44px !important;
        min-height: 44px !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0 !important; /* hide text residue; icon restored below */
    }

    [wire\:id] .table-responsive > table.table > tbody > tr > td[data-column-type="action"] .btn i,
    [wire\:id] .table-responsive > table.table > tbody > tr > td:has([data-action-column="true"]) .btn i {
        font-size: 16px !important;
    }

    /* C16. Badges: prevent wrapping in card rows */
    [wire\:id] .table-responsive table.table tbody td .badge {
        white-space: nowrap !important;
        font-size: 11px !important;
        padding: 5px 10px !important;
    }

    /* C17. Status select: constrained width so it fits in a card row */
    [wire\:id] .table-responsive table.table tbody td .appointment-status-change {
        max-width: 170px !important;
        flex: 1 !important;
    }

    /* ── C18. DARK MODE ─────────────────────────────────────────────── */
    [data-bs-theme="dark"] [wire\:id] .table-responsive > table.table > tbody > tr {
        background: #1e1e2d !important;
        border-color: #2b2b40 !important;
        box-shadow: 0 2px 14px rgba(0, 0, 0, 0.28) !important;
    }

    [data-bs-theme="dark"] [wire\:id] .table-responsive > table.table > tbody > tr:hover {
        box-shadow: 0 4px 22px rgba(0, 0, 0, 0.35) !important;
    }

    [data-bs-theme="dark"] [wire\:id] .table-responsive > table.table > tbody > tr > td {
        color: #cdcdde !important;
        border-bottom-color: #2b2b40 !important;
    }

    [data-bs-theme="dark"] [wire\:id] .table-responsive > table.table > tbody > tr > td::before {
        color: #5e6278 !important;
    }

    [data-bs-theme="dark"] [wire\:id] .table-responsive > table.table > tbody > tr > td:has(.image-circle) {
        background: linear-gradient(to right, #1a1a27, #1e1e2d) !important;
        border-bottom-color: #2b2b40 !important;
    }

    [data-bs-theme="dark"] [wire\:id] .table-responsive > table.table > tbody > tr > td:has(.image-circle) .d-flex.flex-column a {
        color: #d1d3e0 !important;
    }

    [data-bs-theme="dark"] [wire\:id] .table-responsive > table.table > tbody > tr > td:first-child {
        background: #2b2b40 !important;
        color: #5e6278 !important;
    }

    [data-bs-theme="dark"] [wire\:id] .table-responsive > table.table > tbody > tr > td[data-column-type="action"],
    [data-bs-theme="dark"] [wire\:id] .table-responsive > table.table > tbody > tr > td:has([data-action-column="true"]) {
        background: #13131f !important;
        border-top-color: #2b2b40 !important;
    }

} /* end @media (max-width: 767px) */

/* ================================================================
   SECTION D: MOBILE NAVIGATION & INTERACTION FIXES
   Fixes: sticky header, hamburger always-visible, sidebar z-index,
   body scroll-lock, tab-bar swipe, impersonation banner overflow.
   ALL rules are mobile-scoped; desktop (≥1200px) is unaffected.
   ================================================================ */

/* ── D1. STICKY HEADER WITH CORRECT Z-INDEX STACK ─────────────────
   Z-index hierarchy on mobile:
     page content   → auto (0)
     sidebar-overly → 109  (dims content; does NOT cover the header)
     header-wrapper → 200  (above overlay — hamburger stays tappable)
     top-navbar     → 999  (right slide panel, unused in our UI)
     sidebar drawer → 1009 (above everything)

   STICKY TARGET: the .wrapper's first-child <div> (the container-fluid
   that wraps header.header). Applying sticky to header.header itself
   won't work because its containing block is only 70px tall — the sticky
   effect ends as soon as the parent scrolls past its own height.
   The .wrapper's first-child is the right level: its containing block
   (.wrapper) spans the entire page, so sticky persists throughout scroll.

   The header being above the overlay (200 > 109) is intentional:
   users can always tap the hamburger to toggle the sidebar. */
@media (max-width: 1199px) {
    /* Stick the container-fluid that holds the header, not the header itself */
    .wrapper > div:first-child {
        position: sticky !important;
        top: 0 !important;
        z-index: 200 !important;
        background-color: #ffffff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    /* Dark mode override */
    [data-bs-theme="dark"] .wrapper > div:first-child {
        background-color: #1e1e2d;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }
}

/* ── D2. HAMBURGER BUTTON — ALWAYS VISIBLE, NEVER SQUISHED ────────
   The right-side <ul> can overflow leftward and cover the hamburger.
   flex-shrink:0 + order:-1 keeps the button pinned at the far left,
   regardless of how many items are in the nav. */
@media (max-width: 1199px) {
    header.header > button.sidebar-btn {
        flex-shrink: 0 !important;
        order: -1;
        min-width: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* ── D3. IMPERSONATION BANNER — PREVENT HEADER OVERFLOW ───────────
   The "Account Access Active" + admin-name text is ~180px wide.
   On < 480px screens, collapse it to the 18px pulsing dot only.
   On < 360px, hide the entire banner (hospital badge is enough info). */
@media (max-width: 480px) {
    #impersonation-warning-banner .lh-sm {
        display: none !important;
    }
    #impersonation-warning-banner {
        padding: 4px 6px !important;
        gap: 0 !important;
    }
}
@media (max-width: 360px) {
    #impersonation-warning-banner {
        display: none !important;
    }
}

/* ── D4. BODY SCROLL LOCK — SIDEBAR OPEN ──────────────────────────
   When plugins.js toggles .collapsed-menu on <body> (sidebar open),
   prevent background content from scrolling under the overlay. */
@media (max-width: 1199px) {
    body.collapsed-menu {
        overflow: hidden !important;
    }
}

/* ── D5. SIDEBAR DRAWER — SMOOTH SLIDE + Z-INDEX ENFORCEMENT ──────
   Reinforce z-index so the drawer is always above the sticky header.
   Use a CSS-standard cubic-bezier for a native-app feel. */
@media (max-width: 1199px) {
    .aside-menu-container {
        transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
        z-index: 1009 !important;
    }

    /* Momentum scroll + overscroll containment inside the sidebar */
    .aside-menu-container .sidebar-scrolling {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        touch-action: pan-y;
    }
}

/* ── D6. PATIENT DETAIL TABS — HORIZONTAL SWIPE RESTORED ──────────
   Root cause: the tab-list is a flex child with default min-width:auto.
   Without min-width:0, the item can't shrink below its content width,
   so overflow-x:auto has nothing to scroll against — content just widens
   the parent row. Setting min-width:0 unlocks internal scrolling.
   touch-action:pan-x tells the browser that horizontal swipe on this
   element should scroll it (not trigger page scroll). */
.patient-detail-tab-list {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    scrollbar-width: none; /* Firefox */
}
.patient-detail-tab-list::-webkit-scrollbar {
    display: none; /* Chrome / Safari */
}

/* The diagnose button must never be pushed off-screen */
.patient-detail-diagnose-btn {
    flex-shrink: 0 !important;
}

/* ── D7. SOAP NOTE ACTIONS — ADEQUATE TOUCH TARGETS ───────────────
   Edit / Delete buttons need ≥44px height (WCAG 2.1 §2.5.5). */
@media (max-width: 767px) {
    .edit-soap-note-btn,
    .delete-soap-note-btn {
        min-height: 44px !important;
        padding: 10px 16px !important;
    }
}

/* ── D8. SIDEBAR OVERLAY — OVERLAY ONLY CONTENT, NOT HEADER ───────
   With the header now sticky at z-index 200 and the overlay at 109,
   the overlay naturally covers content but not the header. No extra
   rule needed — this comment documents the intentional design. */

/* ── D9. DARK MODE STICKY HEADER WRAPPER ──────────────────────────── */
@media (max-width: 1199px) {
    body.dark-mode .wrapper > div:first-child,
    .dark-theme .wrapper > div:first-child {
        background-color: #1e1e2d;
    }
}

/* ── D10. HEADER RIGHT NAV — PREVENT WRAPPING TO 2ND ROW ──────────── */
@media (max-width: 1199px) {
    header.header > ul.nav.align-items-center {
        flex-wrap: nowrap !important;
    }
    header.header {
        flex-wrap: nowrap !important;
        align-items: center !important;
    }
}