/* ===================================================================
   Zingara – shared mobile responsive layer
   Loaded AFTER gold-theme.css in every layout. Only adds rules inside
   media queries (plus a few harmless global safety rules), so desktop
   rendering is unchanged.
   =================================================================== */

/* ---------- Global safety (all sizes) ---------- */
img, video, iframe, svg { max-width: 100%; }
img { height: auto; }
html, body { max-width: 100%; }

/* Sidebar backdrop (created by responsive.js) */
.zr-backdrop { display: none; }

/* ---------- Tablet & below (< 992px) ---------- */
@media (max-width: 991.98px) {
    body { overflow-x: hidden; }

    /* Admin / CP / Property shell: off-canvas sidebar */
    header .navbar { padding-left: 8px; padding-right: 8px; flex-wrap: nowrap; }
    .nav-toggle-btn { display: inline-block !important; margin-left: 0 !important; cursor: pointer; }

    .page-container { margin-top: 65px; }
    .page-container .sidemenu {
        position: fixed !important;
        top: 65px !important;
        bottom: 0;
        left: 0 !important;
        width: 260px !important;
        min-width: 0 !important;
        max-width: 85vw;
        border-radius: 0;
        z-index: 1045;
        transform: translateX(0);
        transition: transform .3s ease;
        overflow-y: auto;
    }
    .page-container.display-full .sidemenu {
        left: 0 !important;
        transform: translateX(-110%);
        box-shadow: none;
    }
    .page-container .sidemenu .navbar-nav { height: auto; max-height: calc(100vh - 130px); }

    .page-container .mainpanel,
    .page-container.display-full .mainpanel {
        float: none !important;
        width: 100% !important;
        margin-left: 0 !important;
        padding: 12px !important;
    }

    .page-container:not(.display-full) ~ .zr-backdrop,
    body.zr-menu-open .zr-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .45);
        z-index: 1040;
    }

    footer, .page-footer, .page-footer.display-full {
        position: static !important;
        width: 100% !important;
        right: auto;
    }

    /* Event / public layouts: stack columns & scale spacing */
    section { padding-left: 0; padding-right: 0; }
    .container, .container-fluid { padding-left: 12px; padding-right: 12px; }
}

/* ---------- Phones (< 768px) ---------- */
@media (max-width: 767.98px) {
    html { font-size: 15px; }
    h1, .h1 { font-size: 1.6rem; }
    h2, .h2 { font-size: 1.4rem; }
    h3, .h3 { font-size: 1.2rem; }

    /* Header: hide secondary text, keep logo + actions */
    header .navbar .navbar-brand span small,
    header .administrator { display: none !important; }
    header .navbar-nav { gap: 8px !important; }
    header .navbar-brand img { height: 36px !important; width: 36px !important; }
    header .navbar-brand span.fs-4 { font-size: 1rem !important; }

    /* Tables: horizontal scroll instead of breaking layout */
    .table-responsive-auto,
    .dataTables_wrapper,
    .card-body:has(> table),
    .mainpanel .table-wrap,
    .panel-body:has(> table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table.table, table.dataTable, .mainpanel table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    table.table th, table.table td { padding: .45rem .5rem; font-size: .85rem; }
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate { float: none !important; text-align: left !important; display: block; margin-bottom: 8px; }
    .dt-buttons { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }

    /* Forms & buttons */
    .form-control, .form-select, select, input[type=text], input[type=email],
    input[type=password], input[type=number], input[type=tel], input[type=date],
    textarea { width: 100% !important; max-width: 100%; font-size: 16px; /* prevents iOS zoom */ }
    .select2-container { width: 100% !important; }
    .btn { white-space: normal; }
    .btn-group, .d-flex.gap-3 { flex-wrap: wrap; }
    .form-inline, .input-group { flex-wrap: wrap; }
    .row > [class*="col-"]:not([class*="col-12"]):not([class*="col-sm"]):not([class*="col-xs"]) {
        flex: 0 0 100%;
        max-width: 100%;
    }
    /* keep small stat tiles two-up where authors used col-6 */
    .row > .col-6 { flex: 0 0 50%; max-width: 50%; }

    /* Cards & dashboards */
    .card, .dashboard-portlet, .portlets__card { margin-bottom: 12px; }
    .card .card-header, .card .card-body { padding: .75rem; }
    .nav-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; white-space: nowrap; }
    .nav-tabs .nav-link { flex: 0 0 auto; }

    /* Modals */
    .modal-dialog { margin: .5rem; max-width: calc(100vw - 1rem); }
    .modal-dialog.modal-lg, .modal-dialog.modal-xl { max-width: calc(100vw - 1rem); }
    .logout-modal .logou-container { padding: 16px; }

    /* Charts / iframes / maps */
    canvas, .ct-chart, .chart-container { max-width: 100% !important; }
    iframe { width: 100%; }

    /* Fixed-width inline helpers authors used */
    [style*="width:500px"], [style*="width: 500px"],
    [style*="width:600px"], [style*="width: 600px"],
    [style*="width:400px"], [style*="width: 400px"] { width: 100% !important; max-width: 100% !important; }

    /* Offcanvas public menu */
    .offcanvas { max-width: 85vw; }
}

/* ---------- Small phones (< 480px) ---------- */
@media (max-width: 479.98px) {
    .container, .container-fluid { padding-left: 10px; padding-right: 10px; }
    .page-container .mainpanel { padding: 8px !important; }
    .btn { padding: .4rem .75rem; font-size: .9rem; }
    .row > .col-6 { flex: 0 0 100%; max-width: 100%; }
    .pagination { flex-wrap: wrap; }
}

/* Print should ignore all of the above where it matters */
@media print {
    .zr-backdrop { display: none !important; }
}