/*
 * Podiapro - mobile responsiveness layer.
 * Loaded after core.css (see common/master.blade.php). Every rule is scoped to small screens,
 * so desktop is unaffected. This is a plain static file: iterate freely and just re-upload it
 * (no `npm` rebuild needed); bump the ?v= in master.blade.php to bust the browser cache.
 */

/* ============================ Phones (<= 767px) ============================ */
@media (max-width: 767.98px) {

    /* Use the full width: trim large outer paddings that are meant for desktop. */
    .content-wrapper,
    .main-content,
    .content { padding-left: 10px !important; padding-right: 10px !important; }

    /* Page headers / toolbars (title + action buttons): wrap instead of overflowing. */
    .page-top-section,
    .page-header,
    .content-header,
    .content-heading { flex-wrap: wrap; row-gap: .5rem; }

    /* Data tables already scroll horizontally via .table-responsive - polish the scroll. */
    .table-responsive { -webkit-overflow-scrolling: touch; }
    .table td, .table th { white-space: nowrap; }

    /* ---- Modals become full-screen (Add / Edit patient, etc.) ---- */
    .modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    .modal-dialog.modal-dialog-centered { align-items: stretch; min-height: 100%; }
    .modal-content {
        min-height: 100vh;
        border: 0;
        border-radius: 0;
    }
    .modal-body { overflow-x: hidden; }

    /* Modal footer buttons: full-width, stacked. */
    .modal-footer { flex-direction: column; align-items: stretch; }
    .modal-footer .btn { width: 100%; margin: .2rem 0; }

    /* ---- Touch-friendly controls ---- */
    .form-control,
    .custom-select,
    select,
    textarea,
    .btn { min-height: 42px; font-size: 15px; }
    .btn-sm,
    .btn-group-sm > .btn { min-height: 34px; }

    /* Cards: a little tighter on phones. */
    .card-body { padding: .85rem; }

    /* ---- Tab bars (patient detail: Personal / Notes / Examination) ---- */
    .nav-tabs,
    .nav-pills { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .nav-tabs .nav-link,
    .nav-pills .nav-link { white-space: nowrap; }

    /* Media never overflows the viewport. */
    img, video { max-width: 100%; height: auto; }

    /* select2 dropdowns should fit the screen width. */
    .select2-container { max-width: 100% !important; }

    /* ---- Patient list: compact "one patient per row" view ----
       1) Override the datatable's built-in stacked/label responsive mode (.table-view-responsive)
          so it stays a REAL horizontal table (header row + one patient per row). */
    .patient-list-page .table-view-responsive table { display: table !important; width: 100% !important; }
    .patient-list-page .table-view-responsive thead { display: table-header-group !important; }
    .patient-list-page .table-view-responsive tbody { display: table-row-group !important; }
    .patient-list-page .table-view-responsive thead tr,
    .patient-list-page .table-view-responsive tbody tr { display: table-row !important; }
    .patient-list-page .table-view-responsive th,
    .patient-list-page .table-view-responsive td { display: table-cell !important; }
    .patient-list-page .table-view-responsive td:before,
    .patient-list-page .table-view-responsive th:before { content: "" !important; display: none !important; }
    .patient-list-page .table-view-responsive tbody tr {
        border: 0 !important;
        border-bottom: 1px solid var(--default-border-color) !important;
    }

    /* 2) Show only Reg ID, Name, Reg date, Current Branch (+ the actions column); hide the rest.
       Selector is scoped through .table-view-responsive so it out-specifies the display:table-cell
       rule above (otherwise that rule would re-reveal these columns). */
    .patient-list-page .table-view-responsive [data-col="patient_name_hindi"],
    .patient-list-page .table-view-responsive [data-col="chief_complaint"],
    .patient-list-page .table-view-responsive [data-col="users"],
    .patient-list-page .table-view-responsive [data-col="orders"],
    .patient-list-page .table-view-responsive [data-col="satisfaction_status"] { display: none !important; }

    /* 3) Keep it compact so it fits without sideways scrolling. */
    .patient-list-page .table { min-width: 0 !important; }
    .patient-list-page .table td,
    .patient-list-page .table th {
        white-space: normal;
        font-size: 12px;
        padding: .4rem .35rem !important;
        vertical-align: middle;
    }
}

/* ============================ Small tablets (<= 991px) ============================ */
@media (max-width: 991.98px) {
    /* Give tables a sensible minimum so columns stay readable while scrolling. */
    .table-responsive .table { min-width: 640px; }
}