/*
 * responsive.css — Global Responsive Layer
 * Loaded from base.html; applies to ALL pages (dashboard + public).
 * Breakpoints mirror Bootstrap 5:
 *   sm  ≥576px   md  ≥768px   lg  ≥992px   xl  ≥1200px
 * We collapse the sidebar and reflow layouts at ≤991.98px (lg-1).
 */

/* ═══════════════════════════════════════════════════════════════════
   1. MOBILE SIDEBAR DRAWER
   ═══════════════════════════════════════════════════════════════════ */

/* Overlay backdrop — always in DOM, animates via opacity + pointer-events */
#sb-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .48);
    z-index: 1040;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    cursor: pointer;
}
#sb-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Mobile topbar wrapper — hidden on desktop, flex on mobile */
#mobile-topbar {
    display: none;
}

/* Hamburger button — inside #mobile-topbar */
#sb-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border: 1.5px solid var(--db-card-border, #dee2e6);
    border-radius: .45rem;
    background: var(--db-card-bg, #fff);
    color: var(--db-text, #212529);
    cursor: pointer;
    transition: background .15s, border-color .15s;
    padding: 0;
}
#sb-hamburger:hover {
    background: var(--sb-hover-bg, #f0f4ff);
    border-color: var(--sb-accent, #0d6efd);
    color: var(--sb-accent, #0d6efd);
}

@media (max-width: 991.98px) {
    /* Show mobile topbar and hamburger.
       justify-content: flex-end in RTL = physical LEFT side.
       This keeps the hamburger on the LEFT so it stays accessible
       when the sidebar drawer opens from the RIGHT. */
    #mobile-topbar {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-bottom: .5rem;
    }

    /* Sidebar off-canvas drawer — slides from the physical RIGHT edge.
       IMPORTANT: use physical properties (right/top/bottom), NOT logical
       properties (inset-inline-end). In RTL, inset-inline-end = LEFT which
       would position the sidebar on the wrong side and cause the "middle of
       screen" bug. */
    .dashboard-sidebar {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        right: 0 !important;
        left: auto !important;
        height: 100dvh !important;
        width: 280px !important;
        max-width: 85vw !important;
        z-index: 1050;
        transform: translateX(100%); /* off-screen to the right */
        transition: transform .28s cubic-bezier(.4, 0, .2, 1);
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-top: 0 !important;
        box-shadow: none;
    }
    .dashboard-sidebar.sb-open {
        transform: translateX(0); /* back to right: 0 */
        box-shadow: -6px 0 32px rgba(0, 0, 0, .18);
    }

    /* Full-width main content (sidebar is now floating overlay) */
    .dashboard-wrap {
        margin: -0.75rem -1.5rem !important; /* matches container-fluid px-4 at all breakpoints */
    }
    .dashboard-main {
        padding: 1rem !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Close button inside sidebar on mobile */
    .sb-close-btn {
        display: flex !important;
    }
}

@media (min-width: 992px) {
    /* Hide mobile-only close button on desktop */
    .sb-close-btn { display: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   2. PAGE HEADER
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 991.98px) {
    .page-header {
        flex-wrap: wrap;
        gap: .5rem;
        margin-bottom: 1rem;
        align-items: center;
    }
    .page-header h4 {
        font-size: 1rem;
        margin: 0;
        flex: 1;
        min-width: 0;
    }
    .page-header .d-flex,
    .page-header [class*="btn"],
    .page-header a[class*="btn"] {
        flex-shrink: 0;
    }
}

@media (max-width: 575.98px) {
    .page-header h4 { font-size: .92rem; }
}

/* Management header responsive */
@media (max-width: 767.98px) {
    .mgmt-header {
        margin-bottom: 1rem !important;
        gap: .5rem !important;
    }
    .mgmt-header h4 { font-size: 1rem !important; }
    .mgmt-breadcrumb { font-size: .75rem; }
}


/* ═══════════════════════════════════════════════════════════════════
   3. MANAGEMENT TABLE — HORIZONTAL SCROLL
   JS adds .mgmt-table-wrap around every .mgmt-table inside .mgmt-card
   ═══════════════════════════════════════════════════════════════════ */

.mgmt-table-wrap,
.resp-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

/* Ensure tables inside cards can scroll without clipping */
@media (max-width: 991.98px) {
    .mgmt-card { overflow: visible !important; }

    .mgmt-table {
        min-width: 560px;
    }

    .mgmt-table thead th,
    .mgmt-table tbody td {
        padding: .45rem .75rem;
        font-size: .8rem;
        white-space: nowrap;
    }

    /* Bootstrap .table inside Bootstrap .card */
    .card-body > .table,
    .card > .table {
        min-width: 480px;
    }

    /* Any table not already inside a .table-responsive */
    .table:not(.table-responsive .table):not([data-wrapped]) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 767.98px) {
    .mgmt-table thead th,
    .mgmt-table tbody td {
        padding: .38rem .6rem;
        font-size: .78rem;
    }
    .table th, .table td {
        padding: .38rem .55rem;
        font-size: .8rem;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   4. MANAGEMENT CARD HEADER
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {
    .mgmt-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: .5rem;
    }
    .mgmt-card-header > * { width: 100%; }
    .mgmt-card-header .d-flex { flex-wrap: wrap; gap: .4rem; }
    .mgmt-card-header .mgmt-btn { white-space: nowrap; }
}


/* ═══════════════════════════════════════════════════════════════════
   5. SEARCH / FILTER BARS
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {
    .mgmt-search-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .mgmt-search-bar input,
    .mgmt-search-bar select,
    .mgmt-search-bar .mgmt-btn {
        width: 100%;
        min-width: 0;
    }
    .mgmt-search-bar .mgmt-btn {
        justify-content: center;
    }
}

/* Management header filter forms (Bootstrap-based) */
@media (max-width: 767.98px) {
    form.d-flex.flex-wrap.gap-2 {
        flex-direction: column;
    }
    form.d-flex.flex-wrap.gap-2 input,
    form.d-flex.flex-wrap.gap-2 select,
    form.d-flex.flex-wrap.gap-2 button {
        width: 100%;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   6. MODALS — FULL WIDTH ON MOBILE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {
    .modal-dialog {
        margin: .5rem !important;
        max-width: calc(100vw - 1rem) !important;
    }
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl,
    .modal-dialog.modal-xxl {
        max-width: calc(100vw - 1rem) !important;
    }
    .modal-header {
        padding: .75rem 1rem;
        font-size: .92rem;
    }
    .modal-body {
        padding: 1rem;
    }
    .modal-footer {
        padding: .65rem 1rem;
        flex-wrap: wrap;
        gap: .5rem;
    }
    .modal-footer .btn { flex: 1 1 120px; }

    /* Helpdesk referral popup */
    .ref-modal {
        width: calc(100vw - 1rem) !important;
        max-width: 100% !important;
    }
    /* BPM / agency popups */
    .bpm-modal-box,
    .bpm-dialog {
        width: calc(100vw - 1rem) !important;
        max-width: 100% !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   7. KPI / STAT CARDS
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 575.98px) {
    .admin-kpi-card {
        padding: .85rem 1rem;
        gap: .75rem;
    }
    .kpi-value { font-size: 1.45rem !important; }
    .kpi-icon { width: 42px !important; height: 42px !important; font-size: 1.2rem !important; }
    .stat-card { padding: .9rem 1rem; gap: .75rem; }
    .stat-icon { width: 40px !important; height: 40px !important; font-size: 1.2rem !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   8. MANAGEMENT BUTTONS
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 575.98px) {
    .mgmt-btn { padding: .28rem .6rem; font-size: .78rem; }
}


/* ═══════════════════════════════════════════════════════════════════
   9. PAGINATION
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {
    .mgmt-pager { justify-content: center; flex-wrap: wrap; }
    .mgmt-pager a { padding: .25rem .5rem; font-size: .78rem; }
    .pagination { flex-wrap: wrap; justify-content: center; gap: .2rem; }
}


/* ═══════════════════════════════════════════════════════════════════
   10. FORM LAYOUTS
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {
    /* Bootstrap grid stacks automatically; only fix edge cases */
    .row > [class*="col-"] { min-width: 0; }

    /* Multi-column action bars */
    .d-flex.justify-content-between {
        flex-wrap: wrap;
        gap: .5rem;
    }

    /* Date pickers width */
    .shamsi-picker-wrap { width: 100%; }

    /* Invoice form layout */
    .inv-row-2col { grid-template-columns: 1fr !important; }
    .inv-row-3col { grid-template-columns: 1fr !important; }
}

@media (max-width: 575.98px) {
    /* Stack all Bootstrap columns on very small phones */
    [class*="col-sm-"],
    [class*="col-md-"],
    [class*="col-lg-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    /* But allow explicit xs cols to keep their width */
    [class*="col-xs-"] {
        flex: initial !important;
        max-width: initial !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   11. SPECIFIC PAGE LAYOUTS
   ═══════════════════════════════════════════════════════════════════ */

/* Helpdesk ticket detail — two-column grid */
@media (max-width: 767.98px) {
    .hd-detail-layout {
        display: block !important;
        grid-template-columns: none !important;
    }
    .hd-detail-layout > * + * { margin-top: 1rem; }
}

/* Warranty list filter row */
@media (max-width: 767.98px) {
    .wl-filters { flex-direction: column !important; }
    .wl-filters > * { width: 100%; }
}

/* Purchasing / import detail split layout */
@media (max-width: 767.98px) {
    .detail-split { flex-direction: column !important; }
    .detail-split > * { width: 100% !important; flex: none !important; }
}

/* Invoice action detail info-grid */
@media (max-width: 767.98px) {
    .inv-info-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 479px) {
    .inv-info-grid { grid-template-columns: 1fr !important; }
}

/* Warehouse tree — horizontal scroll */
@media (max-width: 991.98px) {
    .wh-tree-canvas { overflow-x: auto; min-width: 0; }
}

/* Chat layout */
@media (max-width: 767.98px) {
    .chat-layout { flex-direction: column !important; height: auto !important; }
    .chat-sidebar { width: 100% !important; height: 220px !important; border-left: none !important; border-bottom: 1px solid var(--db-card-border); }
    .chat-main { height: calc(100dvh - 220px - 56px) !important; }
}

/* BPM workflow builder canvas */
@media (max-width: 991.98px) {
    .wf-canvas-wrap { overflow: auto; }
}

/* Reports charts */
@media (max-width: 767.98px) {
    canvas.report-chart { max-height: 220px !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   12. NAVBAR
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 575.98px) {
    .navbar .navbar-brand .brand-name { display: none; }
    .navbar .nav-link span.d-none.d-sm-inline { display: none !important; }

    /* Compact notification bell badge */
    #notif-badge { font-size: .6rem; padding: .15em .35em; }
}


/* ═══════════════════════════════════════════════════════════════════
   13. UTILITY
   ═══════════════════════════════════════════════════════════════════ */

/* Prevent horizontal scroll on the body */
body { overflow-x: hidden; }

/* Touch-friendly tap targets */
@media (max-width: 991.98px) {
    .sidebar-link,
    .sidebar-acc-btn {
        min-height: 42px;
        padding-block: .5rem;
    }
    .sidebar-link i { font-size: 1rem !important; }
}

/* Smooth scroll on all scrollable containers */
* { scroll-behavior: smooth; }

/* Responsive images — ensure they never overflow */
img, video, svg { max-width: 100%; height: auto; }
table img { max-width: none; } /* but tables can overflow their wrapper */