/* app-mobile.css — global, additive mobile responsiveness for Maktab2.
 *
 * Loaded on every page through the shared chokepoints:
 *   - _nav.php            (all admin tool pages)
 *   - dashboard_layout.php (role dashboards, my_booking, my_visit_form)
 *   - index.php / login.php / set_password.php (standalone auth/public pages)
 *
 * Everything is scoped to <=768px and keyed off the app's shared class names,
 * so it layers on top of each page's own styles and never changes desktop.
 */

@media (max-width: 768px) {
    html { -webkit-text-size-adjust: 100%; }
    body { overflow-x: hidden; }

    /* Media never forces the page wider than the screen. (Tables are handled
       below — they scroll inside their card instead of being capped.) */
    img, pre, code, canvas, svg, iframe, video { max-width: 100%; height: auto; }

    /* Shared content wrappers: trim side padding, cap width */
    .qp-wrap, .qp-container, .container, .wrap, main {
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        box-sizing: border-box;
    }

    /* Cards become horizontal-scroll containers, so a wide table/chart inside
       one scrolls instead of stretching the whole page. */
    /* (Not .dash-card — its tables already sit in their own scroll wrappers,
       and overflow there would clip the dashboard's combo-box popovers.) */
    .qp-card, .card, .rp-frame { overflow-x: auto; }
    .qp-card, .dash-card { padding-left: 14px !important; padding-right: 14px !important; }

    /* Collapse multi-column CSS grids to a single column */
    .qp-grid-2, .qp-grid-3, .qp-grid-4,
    .cards-grid, .dash-kpi-grid, .dash-slot-grid, .dash-quick-grid,
    .head-strip,
    [class*="grid-"] { grid-template-columns: 1fr !important; }

    /* Flex toolbars / filter rows / button rows wrap onto multiple lines */
    .qp-toolbar, .dash-toolbar, .sem-filters, .filters, .toolbar,
    .actions, .btn-row, .rp-toolbar, .dash-imp-form { flex-wrap: wrap !important; }
    .sem-filter, .rp-toolbar > div { flex: 1 1 100% !important; min-width: 0 !important; }

    /* Form controls go full width and stay inside the viewport */
    input, select, textarea,
    .qp-input, .qp-select, .dash-select { max-width: 100% !important; box-sizing: border-box; }
    /* …but keep tiny intrinsic controls intact */
    input[type="checkbox"], input[type="radio"], input[type="color"] { max-width: initial !important; width: auto; }

    /* Big headings: tighten so they don't overflow */
    h1, .qp-title, .dash-new-title { font-size: 1.4rem !important; line-height: 1.25; word-break: break-word; }
    h2 { word-break: break-word; }

    /* Long links/words (emails, urls) wrap instead of pushing width.
       NOTE: do NOT include plain <td> here — forcing break-anywhere on table
       cells shatters space-less Thai names into one-character-per-line
       ("vertical text"). Wide tables already scroll inside their cards. */
    a, .primary, .secondary { overflow-wrap: anywhere; }
    /* Thai has no word spaces, so keep cell text from breaking mid-word; the
       row scrolls horizontally inside its wrapper instead of stacking chars. */
    td, th { word-break: keep-all; overflow-wrap: normal; }
}

/* ── Title rendering (all widths) ───────────────────────────────────────────
 * Many pages paint the gold gradient INTO the heading via
 *   background:linear-gradient(... gold-bright → gold-dark)
 *   -webkit-background-clip:text; -webkit-text-fill-color:transparent;
 * The dark gradient stop reads as a "shade" over the lower half of the letters
 * (and some browsers paint the gradient as a block because the standard
 * `background-clip:text` is missing). Force a clean, solid gold title instead.
 * Loaded after each page's inline <style> (via _nav.php), so !important wins. */
h1, .qp-title, .dash-new-title {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: var(--gold-bright, #f5e16a) !important;
    color: var(--gold-bright, #f5e16a) !important;
}