/* ============================================================
   NIMBLE ACCOUNTS — RESPONSIVE STYLESHEET
   Breakpoints: mobile <640px | tablet 640–1023px | desktop ≥1024px
   ============================================================ */

/* ── Mobile overlay for sidebar ────────────────────────────── */
.sidebar-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 39;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    transition: opacity .25s;
}

/* ── Responsive Table Wrapper ──────────────────────────────── */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Mobile card rows (hide on desktop) ────────────────────── */
.mobile-card { display: none; }
.desktop-only { display: table-row; }

/* ============================================================
   TABLET  640px – 1023px
   ============================================================ */
@media (max-width: 1023px) {

    /* Sidebar becomes a slide-in drawer */
    .sidebar {
        transform: translateX(-260px);
        z-index: 50;
        box-shadow: 4px 0 24px rgba(0,0,0,.18);
    }
    .sidebar.mobile-open {
        transform: translateX(0);
    }
    .sidebar-overlay.active { display: block; }

    /* Topbar full width */
    .topbar { left: 0 !important; padding: 0 16px; }
    body.sidebar-collapsed .topbar { left: 0; }

    /* Content full width */
    .content { margin-left: 0 !important; padding: 72px 16px 100px; }

    /* Bottom nav for quick access */
    .mobile-bottom-nav {
        display: flex;
        position: fixed; bottom: 0; left: 0; right: 0;
        background: #fff;
        border-top: 1px solid #e2e8f0;
        z-index: 38;
        box-shadow: 0 -4px 16px rgba(15,23,42,.08);
        padding: 0;
        height: 60px;
    }
    .mobile-bottom-nav a, .mobile-bottom-nav button {
        flex: 1; display: flex; flex-direction: column;
        align-items: center; justify-content: center; gap: 3px;
        font-size: 10px; font-weight: 500; color: #64748b;
        text-decoration: none; padding: 8px 4px;
        border: none; background: none; cursor: pointer;
        transition: color .15s;
    }
    .mobile-bottom-nav a.active, .mobile-bottom-nav a:active { color: #4f46e5; }
    .mobile-bottom-nav svg { width: 20px; height: 20px; }

    /* Hamburger visible */
    .topbar-hamburger { display: flex !important; }

    /* Hide sidebar toggle in topbar on mobile (use hamburger) */
    .topbar-collapse-btn { display: none; }

    /* Card padding tighter */
    .card { padding: 1rem; border-radius: 10px; }

    /* Stat grids: 2-col on tablet */
    .stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ============================================================
   MOBILE  < 640px
   ============================================================ */
@media (max-width: 639px) {

    /* Stat grids: 1-col on small mobile */
    .stat-grid { grid-template-columns: 1fr !important; }

    /* Content padding tighter */
    .content { padding: 68px 12px 80px; }

    /* Card full width, minimal padding */
    .card { padding: .875rem; border-radius: 10px; }

    /* Topbar compact */
    .topbar { padding: 0 12px; height: 56px; }
    .content { padding-top: 64px; }

    /* Topbar title truncate */
    .topbar-title { font-size: 14px; max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* Hide user pill text on small screens */
    .topbar-username { display: none; }

    /* Tables: horizontal scroll */
    .table-wrap, .fc-table-wrap, .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table { min-width: 600px; }

    /* Forms: single column */
    .fc-grid-3, .fc-grid-2 { grid-template-columns: 1fr !important; }
    .fc-picker-grid { grid-template-columns: 1fr 1fr !important; }
    .fc-picker-grid.cols-5 { grid-template-columns: 1fr 1fr !important; }

    /* Page headers stack */
    .li-header, .fc-header { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
    .li-actions, .fc-header-right { width: 100%; }
    .li-actions a, .li-actions button { width: 100%; justify-content: center; }

    /* Buttons full width in action areas */
    .mobile-full { width: 100% !important; }

    /* Bottom nav smaller */
    .mobile-bottom-nav { height: 56px; }
    .mobile-bottom-nav a, .mobile-bottom-nav button { font-size: 9px; gap: 2px; }
    .mobile-bottom-nav svg { width: 18px; height: 18px; }

    /* Filter panels stack */
    .filter-panel { flex-direction: column !important; }
    .filter-panel input, .filter-panel select, .filter-panel button, .filter-panel a { width: 100% !important; min-width: unset !important; }

    /* Stat values smaller */
    .stat-value { font-size: 16px !important; }

    /* Hide non-essential table columns on mobile */
    .hide-mobile { display: none !important; }

    /* Summary grids */
    .summary-grid { grid-template-columns: 1fr !important; }

    /* Two col grids → single col */
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
}

/* ============================================================
   DESKTOP ≥ 1024px  —  hide mobile-only elements
   ============================================================ */
@media (min-width: 1024px) {
    .mobile-bottom-nav { display: none; }
    .topbar-hamburger { display: none !important; }
    .sidebar-overlay { display: none !important; }
}

/* ── Touch-friendly tap targets ────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
    .btn, .act-btn, .nav-link, .nav-sub-link { min-height: 44px; }
    .nav-sub-link { padding-top: 10px; padding-bottom: 10px; }
    .input, .select, .textarea { font-size: 16px; } /* prevent iOS zoom */
    .ts-wrapper.single .ts-control { font-size: 16px; }
}

/* ── Print: hide nav ───────────────────────────────────────── */
@media print {
    .sidebar, .topbar, .mobile-bottom-nav { display: none !important; }
    .content { margin: 0 !important; padding: 0 !important; }
}