/*
 * hospital-clinical-mobile.css
 * Targeted mobile-responsive supplements for the highest-traffic clinical
 * forms (admission, lab order, medication order, vital signs, daily round).
 *
 * Why this file exists
 * --------------------
 * `medical-theme.css` already covers the dashboard widgets, modals, tables
 * and nav. It does NOT cover the dense multi-column form layouts used in
 * the order-entry screens. Editing 642 blade files individually would be
 * months of churn, so this stylesheet imposes mobile-friendly rules at the
 * cascade level — one file, predictable scope, no blade churn.
 *
 * Scope by container class:
 *   .hospital-clinical-form  — opt-in container that the largest forms
 *                              already use (or that we add by find-replace).
 *   form[data-clinical-mobile] — alternate hook for forms that don't have
 *                              the .hospital-clinical-form class yet.
 *
 * Tap-target floor
 * ----------------
 * 44×44 px is the minimum recommended by Apple HIG / Material guidelines
 * for accurate touch on a tablet. Inputs/buttons under that threshold are
 * the single largest source of nurse mis-taps in the field.
 */

@media (max-width: 991px) {
    /* Stack all multi-column rows once we are on a tablet portrait or smaller.
       Bootstrap col-md-* still applies on landscape tablets (≥992px). */
    .hospital-clinical-form .form-row > [class*="col-"],
    .hospital-clinical-form .row > [class*="col-md-"],
    .hospital-clinical-form .row > [class*="col-lg-"],
    form[data-clinical-mobile] .form-row > [class*="col-"],
    form[data-clinical-mobile] .row > [class*="col-md-"],
    form[data-clinical-mobile] .row > [class*="col-lg-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-bottom: 12px;
    }

    .hospital-clinical-form .form-group,
    form[data-clinical-mobile] .form-group {
        margin-bottom: 14px;
    }

    /* Labels: easier to read at arm's length on a tablet. */
    .hospital-clinical-form .form-group > label,
    form[data-clinical-mobile] .form-group > label {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 6px;
    }

    /* Inputs: 44px tap floor. The 16px font-size is also what stops iOS Safari
       from auto-zooming when the field gets focus. */
    .hospital-clinical-form .form-control,
    .hospital-clinical-form select,
    .hospital-clinical-form textarea,
    .hospital-clinical-form input[type="text"],
    .hospital-clinical-form input[type="number"],
    .hospital-clinical-form input[type="date"],
    .hospital-clinical-form input[type="datetime-local"],
    .hospital-clinical-form input[type="time"],
    form[data-clinical-mobile] .form-control,
    form[data-clinical-mobile] select,
    form[data-clinical-mobile] textarea,
    form[data-clinical-mobile] input[type="text"],
    form[data-clinical-mobile] input[type="number"],
    form[data-clinical-mobile] input[type="date"],
    form[data-clinical-mobile] input[type="datetime-local"],
    form[data-clinical-mobile] input[type="time"] {
        min-height: 44px;
        font-size: 16px !important;
        padding: 10px 12px;
    }

    /* Select2 single rendering: match the same 44px tap target. */
    .hospital-clinical-form .select2-container--default .select2-selection--single,
    form[data-clinical-mobile] .select2-container--default .select2-selection--single {
        min-height: 44px !important;
        height: 44px !important;
    }

    .hospital-clinical-form .select2-container--default .select2-selection--single .select2-selection__rendered,
    form[data-clinical-mobile] .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 42px !important;
        font-size: 15px !important;
    }

    .hospital-clinical-form .select2-container--default .select2-selection--single .select2-selection__arrow,
    form[data-clinical-mobile] .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 42px !important;
    }

    /* Select2 multiple: tags grow vertically, container expands to fit. */
    .hospital-clinical-form .select2-container--default .select2-selection--multiple,
    form[data-clinical-mobile] .select2-container--default .select2-selection--multiple {
        min-height: 44px !important;
        padding: 4px;
    }

    /* Select2 dropdown: full-width on phones, large enough rows to tap. */
    .select2-container--open .select2-results__option {
        min-height: 44px;
        line-height: 1.5;
        padding: 10px 12px;
        font-size: 15px;
    }

    /* DataTables filter row: keep the search input full-width and tappable. */
    .hospital-clinical-form .dataTables_filter,
    form[data-clinical-mobile] .dataTables_filter {
        text-align: start !important;
    }

    .hospital-clinical-form .dataTables_filter input,
    form[data-clinical-mobile] .dataTables_filter input {
        width: 100% !important;
        min-height: 44px;
        font-size: 16px;
    }

    /* Action button row at the bottom of every order/admission form: stack
       vertically and pin to the viewport so the nurse never has to scroll
       past a long form just to find the save button. */
    .hospital-clinical-form .form-actions,
    .hospital-clinical-form .clinical-save-bar,
    form[data-clinical-mobile] .form-actions,
    form[data-clinical-mobile] .clinical-save-bar {
        position: sticky;
        bottom: 70px; /* clears the mobile tab bar (z-index 1050, ~70px tall) */
        background: #ffffff;
        border-top: 1px solid #e5e7eb;
        padding: 10px 12px;
        margin: 16px -15px 0;
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        z-index: 100;
    }

    .hospital-clinical-form .form-actions .btn,
    .hospital-clinical-form .clinical-save-bar .btn,
    form[data-clinical-mobile] .form-actions .btn,
    form[data-clinical-mobile] .clinical-save-bar .btn {
        flex: 1 1 auto;
        min-height: 44px;
        font-size: 15px;
        padding: 10px 16px;
    }

    /* Long-form text blocks (clinical_indication, history, notes) get more
       vertical room — a 2-line textarea at the same width is unusable for
       the round-note + assessment fields nurses actually use. */
    .hospital-clinical-form textarea,
    form[data-clinical-mobile] textarea {
        min-height: 110px;
    }

    /* Cards/sections: tighter horizontal padding so the input fields can
       actually breathe on a 360px viewport without overflowing. */
    .hospital-clinical-form .card,
    .hospital-clinical-form .panel,
    .hospital-clinical-form .box,
    form[data-clinical-mobile] .card,
    form[data-clinical-mobile] .panel,
    form[data-clinical-mobile] .box {
        padding: 12px !important;
    }
}

/* Phone-only refinements (≤480px). Most NICU tablets are 10–11" so this
   bracket only applies to nurses using a personal phone. Keep it conservative
   so we never make the tablet experience worse. */
@media (max-width: 480px) {
    .hospital-clinical-form h1,
    .hospital-clinical-form .content-header > h1,
    form[data-clinical-mobile] h1,
    form[data-clinical-mobile] .content-header > h1 {
        font-size: 17px !important;
    }

    .hospital-clinical-form .form-actions .btn,
    .hospital-clinical-form .clinical-save-bar .btn,
    form[data-clinical-mobile] .form-actions .btn,
    form[data-clinical-mobile] .clinical-save-bar .btn {
        flex: 1 1 100%;
    }
}

/* Landscape tablets (≥992px): no override — the original desktop layout is
   intentional and already verified. We do NOT want to leak mobile-specific
   stacking onto the bedside cart workstation. */

/* ============================================================
   GLOBAL HOSPITAL-PAGE COVERAGE
   ------------------------------------------------------------
   The opt-in selectors above (.hospital-clinical-form / data-clinical-mobile)
   stay as the strict-scope path, but bedside staff hit hundreds of secondary
   screens (lab order index, daily round detail, NICU dashboard, problem
   list, etc.) that nobody is going to retrofit one-by-one. The body class
   `hospital-page` is auto-applied by the main layout when the request is
   under `/hospital/*` or `/parent-portal/*`. These rules apply tablet-class
   safe defaults to EVERY form / row / input on those pages without touching
   any blade.
   ============================================================ */
@media (max-width: 991px) {
    /* Stack multi-column rows on tablet portrait + below. */
    body.hospital-page .row > [class*="col-md-"]:not(.col-md-12),
    body.hospital-page .row > [class*="col-lg-"]:not(.col-lg-12),
    body.hospital-page .form-row > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-bottom: 12px;
    }

    /* Inputs / selects / textareas: 44px tap floor + 16px font (no iOS zoom). */
    body.hospital-page form .form-control,
    body.hospital-page form select,
    body.hospital-page form textarea,
    body.hospital-page form input[type="text"],
    body.hospital-page form input[type="number"],
    body.hospital-page form input[type="date"],
    body.hospital-page form input[type="datetime-local"],
    body.hospital-page form input[type="time"] {
        min-height: 44px;
        font-size: 16px !important;
        padding: 10px 12px;
    }

    /* Buttons: tap floor of 44px even when stacked vertically. */
    body.hospital-page .btn {
        min-height: 44px;
        padding: 10px 14px;
    }

    /* Select2 single rendering: same tap-friendly height. */
    body.hospital-page .select2-container--default .select2-selection--single {
        min-height: 44px !important;
        height: 44px !important;
    }
    body.hospital-page .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 42px !important;
        font-size: 15px !important;
    }
    body.hospital-page .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 42px !important;
    }
    body.hospital-page .select2-container--default .select2-selection--multiple {
        min-height: 44px !important;
        padding: 4px;
    }

    /* DataTables filter row: full-width on tablet/phone. */
    body.hospital-page .dataTables_filter input {
        width: 100% !important;
        min-height: 44px;
        font-size: 16px;
    }

    /* DataTables length+pagination: stack instead of squeezing on phones. */
    body.hospital-page .dataTables_length,
    body.hospital-page .dataTables_filter,
    body.hospital-page .dataTables_info,
    body.hospital-page .dataTables_paginate {
        text-align: start !important;
        margin-bottom: 8px;
    }

    /* Tables: kill the fixed widths AdminLTE imposes so wide tables
       horizontally scroll inside their box rather than overflowing the page. */
    body.hospital-page .table-responsive > table {
        min-width: 100%;
    }

    /* Cards / panels / boxes: tighter horizontal padding for 360–768px. */
    body.hospital-page .card,
    body.hospital-page .panel,
    body.hospital-page .box {
        padding: 12px !important;
    }
}

/* Phone-only (≤480px): most NICU staff use 10–11" tablets, but some use
   personal phones for off-hours review. Keep this bracket conservative. */
@media (max-width: 480px) {
    body.hospital-page h1,
    body.hospital-page .content-header > h1 {
        font-size: 17px !important;
    }
    body.hospital-page .breadcrumb {
        font-size: 12px;
        padding: 6px 10px;
    }
    /* Modal full-screen on tiny viewports — rooming-in nurses on a 5"
       phone shouldn't have to scroll inside a centered popup. */
    body.hospital-page .modal-dialog {
        margin: 0;
        max-width: 100%;
        width: 100%;
    }
    body.hospital-page .modal-content {
        border-radius: 0;
        min-height: 100vh;
    }
}