/* ============================================================================
   FolksHR — responsive / mobile layer (loaded LAST). Presentation only.
   Breakpoints: >992 desktop (fixed sidebar) · <=992 tablet/mobile (off-canvas)
   · <=640 phone. All rules are RTL-aware via logical properties + dir selectors.
   ============================================================================ */

/* prevent the PAGE from ever scrolling horizontally (content scrolls internally) */
html, body { max-width: 100%; overflow-x: hidden; }

/* ---- OFF-CANVAS SIDEBAR + HAMBURGER (tablet + mobile) --------------------- */
@media (max-width: 992px) {
    .topbar .hamburger { display: grid; }

    /* sidebar slides in from the reading-start edge (left LTR / right RTL) */
    .app > .sidebar {
        position: fixed;
        top: 0; bottom: 0;
        inset-inline-start: 0;
        z-index: 1200;
        width: var(--sidebar-w, 260px);
        flex-basis: var(--sidebar-w, 260px);
        transform: translateX(-100%);
        transition: transform .25s ease;
        box-shadow: var(--shadow-lg);
    }
    html[dir="rtl"] .app > .sidebar { transform: translateX(100%); }
    .app.nav-open > .sidebar { transform: none; }
    /* RTL open must out-specify the RTL closed rule (which includes html[dir]) */
    html[dir="rtl"] .app.nav-open > .sidebar { transform: none; }

    .nav-backdrop {
        position: fixed; inset: 0; z-index: 1150;
        background: rgba(40, 33, 22, .42);
        animation: fade .15s ease;
    }

    .main { width: 100%; min-width: 0; }
    .topbar { padding: 0 14px; gap: 8px; }
    .topbar .search { display: none; }
    .content { padding: 20px 18px 48px; }

    /* tables: scroll inside their container instead of squashing columns */
    .table-responsive, .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--radius-sm); }
    .table-responsive .table, .table-wrap table.data { min-width: 640px; }
}

/* ---- PHONE (<=640) -------------------------------------------------------- */
@media (max-width: 640px) {
    .lang-switch .lang-cur { display: none; }          /* icon-only language pill */
    .content { padding: 14px 12px 40px; }
    .page-title { font-size: 22px; }
    .kpi-grid { grid-template-columns: 1fr 1fr; }
    .grid-2, .grid-3 { grid-template-columns: 1fr; }

    /* forms: full-width fields, stacked */
    .form-grid > * { grid-column: span 12 !important; }
    .field .input, .field .select, .form-control, .form-select { width: 100%; }
    .form-actions, .table-tools, .table-foot { flex-direction: column; align-items: stretch; gap: 10px; }
    .form-actions .btn, .table-tools .btn { width: 100%; justify-content: center; }

    /* last-resort: let any wide table scroll on phones (no column overlap) */
    .content table.table:not(.table-static) { display: block; overflow-x: auto; white-space: nowrap; }

    /* dialogs fit the phone screen and scroll inside */
    .modal-dialog { max-width: calc(100vw - 20px) !important; margin: 12px auto !important; }
    .modal .modal-content, .modal-dialog > .modal-content { max-height: calc(100vh - 28px); }
    .modal-body { padding: 16px; }
    .modal-footer { flex-wrap: wrap; }
    .modal-footer .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---- very small phones (<=380) ------------------------------------------- */
@media (max-width: 380px) {
    .kpi-grid { grid-template-columns: 1fr; }
    .user-chip .avatar-img { width: 30px; height: 30px; }
}