/* =====================================================================
   Global responsive protection layer — Phase 1
   ---------------------------------------------------------------------
   Loaded LAST in every layout head so it overrides the Metronic/theme CSS.
   Almost every rule is screen-only and scoped to max-width:991.98px, so the
   desktop (>=992px) layout is intentionally left untouched.
   RTL-specific position swaps live in responsive-fixes.rtl.css.
   ===================================================================== */

/* ---- Mega-menu panel (portal) — replaces inline style="width:600px" ---- */
/* Base width identical to the old inline value (desktop unchanged). */
.mega-panel { width: 600px; }

/* =====================================================================
   MOBILE + TABLET  (<= 991.98px)
   ===================================================================== */
@media screen and (max-width: 991.98px) {

    /* ---- 1. Kill page-level horizontal scroll -------------------------
       A single overflowing child must not scroll the whole page.
       Dedicated scroll wrappers (.table-responsive / .dataTables_wrapper)
       keep scrolling internally — handled below. */
    html, body { max-width: 100%; overflow-x: hidden; }

    /* ---- 2. Media never forces overflow (content area only) ----------
       NOTE: do NOT set height:auto or touch <svg> here — that overrides
       Metronic's avatar sizing (.symbol > img) and theme icons, blowing
       decorative images up. max-width alone stops horizontal overflow
       while keeping the theme's own dimensions. */
    #kt_content img,
    .container_layout img,
    #kt_content video { max-width: 100%; }

    /* ---- 3. Long unbroken text doesn't push the layout wide ---------- */
    #kt_content, .container_layout { overflow-wrap: break-word; word-wrap: break-word; }

    /* ---- 4. Tables: scroll INSIDE their own box, not the page -------- */
    .dataTables_wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    /* DataTables manages its own table; only non-DataTables tables get
       display:block. Scoped to the content wrapper (#kt_content covers
       layout_1/2 + IPA; .container_layout is the inner page wrapper). */
    #kt_content table.table:not(.dataTable),
    .container_layout table.table:not(.dataTable) {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    /* ---- 5. Fixed-pixel WIDTH offenders degrade (content only) ------- */
    /* Inline width:NNpx on table headers / boxes would force horizontal
       scroll. max-width:100% is a no-op for already-fluid elements. */
    #kt_content [style*="width"][style*="px"],
    .container_layout [style*="width"][style*="px"] { max-width: 100% !important; }

    /* ---- 6. Sidebar / drawer never leaves the screen ---------------- */
    #aside_menu {
        max-width: min(300px, 90vw) !important;
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* ---- 7. Mega-menu panel fits the viewport ----------------------- */
    .mega-panel { width: 100% !important; max-width: 100vw; }
}

/* =====================================================================
   PHONES  (<= 767.98px)
   ===================================================================== */
@media screen and (max-width: 767.98px) {

    /* ---- Top bar: wrap instead of overflowing, shrink the icons ----- */
    .header .topbar { flex-wrap: wrap; justify-content: flex-end; align-items: center; }
    .header .topbar .btn.btn-icon.btn-lg { height: 36px; width: 36px; }
    /* Role badge can be a long label — clamp it */
    .header .topbar .topbar-item > .badge {
        max-width: 110px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
        vertical-align: middle;
    }

    /* ---- Long page title doesn't break the subheader row ------------ */
    .pageTitle { max-width: 55vw !important; font-size: 1rem !important; }

    /* ---- Horizontal forms stack on mobile ---------------------------
       Many forms use a FIXED label column with no breakpoint, e.g.
       `.form-group.row   > label.col-3 + div.col-6`  or
       `.form-group.d-flex > label.col-2 + div.col-9`.
       On a phone that label column stays ~16-25% wide, so long Arabic
       labels wrap onto 2-3 lines and inputs only use part of the width.
       Stacking (label above, field below, each full width) fixes both the
       wrapping and the wasted space. Targets any .form-group with col-*
       children (covers both .row and .d-flex flavours). */
    .form-group > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .form-group > label[class*="col-"] {
        margin-bottom: .25rem;
        text-align: start;
        white-space: normal;
    }

    /* Compact inline number inputs (e.g. days / hours / minutes with a unit
       label between each) use `.form-control.w-auto`, which is too wide and
       forces the trio to wrap onto several rows. Cap them so they sit on
       one row next to their unit labels. */
    .form-group input[type="number"].form-control.w-auto {
        width: 3.75rem !important;
        flex: 0 0 auto;
        min-width: 0;
    }
    /* Keep the inline group on one line and tidy the spacing between
       each number input and its unit label. */
    .form-group > [class*="col-"].d-flex.flex-wrap {
        align-items: center;
        gap: .25rem .4rem;
    }

    /* ---- Calendar (FullCalendar) toolbar tidy on mobile --------------
       FullCalendar v5's toolbar is a single flex row (prev/next/today |
       title | view buttons) that squishes/scatters on a phone. Stack the
       three chunks vertically and centre them, keeping each chunk's own
       buttons inline — so it reads as three tidy centred rows instead of
       scattered controls with big gaps. (v3 float classes handled too.) */
    .fc .fc-header-toolbar.fc-toolbar,
    .fc .fc-toolbar,
    .fc-toolbar.fc-header-toolbar {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        gap: .5rem;
        margin-bottom: .75rem;
    }
    .fc .fc-toolbar-chunk,
    .fc-toolbar > .fc-left,
    .fc-toolbar > .fc-center,
    .fc-toolbar > .fc-right {
        float: none !important;
        margin: 0 !important;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: .35rem;
    }
    .fc-toolbar-title,
    .fc-toolbar h2 { font-size: 1.15rem; margin: 0; white-space: nowrap; }

    /* Tabs that also hold action buttons (calendar / timeline + "new
       appointment" / "resend") get breathing room instead of cramming. */
    .nav-tabs { row-gap: .35rem; }
    .nav-tabs .nav-item > .btn { margin: 0 .15rem !important; }

    /* ---- Card header action buttons wrap with breathing room --------
       Toolbars with several buttons (export / print / QR ... ) were
       cramming on top of each other with no spacing on small screens. */
    .card-header { flex-wrap: wrap; }
    .card-header > .card-toolbar {
        flex-wrap: wrap;
        gap: .5rem;
        width: 100%;
        margin-top: .5rem;
        justify-content: flex-start;
    }
    .card-toolbar .btn-toolbar { flex-wrap: wrap; gap: .5rem; width: 100%; }
    /* Neutralise the tight horizontal margins these buttons ship with so the
       gap above is the single source of spacing. */
    .card-header > .card-toolbar > .btn,
    .card-header > .card-toolbar > a.btn,
    .card-toolbar .btn-toolbar > .btn,
    .card-toolbar .btn-toolbar > a.btn { margin-left: 0 !important; margin-right: 0 !important; }
}

/* =====================================================================
   SMALL PHONES  (<= 575.98px)
   ===================================================================== */
@media screen and (max-width: 575.98px) {

    .pageTitle { max-width: 45vw !important; font-size: .95rem !important; }

    /* Tighten card / subheader padding to reclaim space */
    .card > .card-body { padding: 1rem; }
    .card > .card-header { padding: .75rem 1rem; min-height: auto; }
    .subheader { padding-top: .5rem !important; padding-bottom: .5rem !important; }

    /* Relax oversized fixed heights — but NEVER on chart containers, which
       rely on an explicit height to render (ApexCharts reads it). */
    #kt_content [style*="min-height"]:not([id*="chart"]):not([class*="chart"]):not([class*="apex"]) {
        min-height: auto !important;
    }
}

/* =====================================================================
   PRINT — undo anything that would corrupt printed/PDF output
   ===================================================================== */
@media print {
    html, body { overflow: visible !important; max-width: none !important; }
    .container_layout table.table:not(.dataTable) {
        display: table !important;
        white-space: normal !important;
        overflow: visible !important;
    }
}