/* ============================================================
   Mobile Dashboard - Compact App-Like Style
   Full responsive for mobile devices
   ============================================================ */

:root {
    --mob-nav-h: 62px;
    --mob-accent: #0ea5e9;
}

/* ============================================================
   MOBILE BASE  (≤ 767px)
   ============================================================ */
@media (max-width: 767px) {

    /* ---------- scroll & overflow ---------- */
    html, body {
        -webkit-overflow-scrolling: touch;
        overflow-x: hidden;
    }

    /* space for fixed bottom nav */
    #scrollable-container {
        padding-bottom: calc(var(--mob-nav-h) + 10px) !important;
        height: auto !important;
        overflow-y: auto !important;
    }

    /* ---------- hide sidebar ---------- */
    .thetop > aside,
    .main-sidebar,
    .left-side {
        display: none !important;
    }

    /* ---------- full-width main ---------- */
    main.tw-flex-col,
    .content-wrapper {
        margin-left: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    /* ---------- AdminLTE margin reset ---------- */
    .sidebar-mini .content-wrapper,
    .sidebar-mini.sidebar-collapse .content-wrapper {
        margin-left: 0 !important;
    }

    /* ---------- header compact ---------- */
    .no-print .tw-px-5.tw-py-3 {
        padding: 8px 10px !important;
    }

    /* ---------- hide desktop-only header items ---------- */
    .tw-hidden.lg\:tw-inline-flex {
        display: none !important;
    }

    /* ---------- dashboard gradient top section ---------- */
    .tw-pb-6 {
        padding-bottom: 10px !important;
    }

    .tw-px-5.tw-pt-3 {
        padding: 8px 10px 6px !important;
    }

    /* ---------- welcome heading ---------- */
    h1.tw-text-2xl,
    h1.tw-text-2xl.tw-font-semibold {
        font-size: 1rem !important;
        margin-bottom: 6px !important;
        line-height: 1.3 !important;
    }

    /* ---------- header action row ---------- */
    .sm\:tw-flex.sm\:tw-items-center.sm\:tw-justify-between {
        flex-direction: column !important;
        gap: 6px !important;
    }

    /* ---------- location selector & filter buttons ---------- */
    .tw-mt-2 {
        margin-top: 4px !important;
    }

    /* ============================================================
       DASHBOARD STAT CARDS  — 2 columns, compact
       ============================================================ */

    /* top row (sell cards) */
    .tw-grid.tw-grid-cols-1.tw-gap-4.tw-mt-6 {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
        margin-top: 8px !important;
    }

    /* bottom row (purchase cards) */
    .tw-grid.tw-grid-cols-1.tw-gap-4.tw-mt-4 {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
        margin-top: 6px !important;
    }

    /* card wrapper */
    .tw-transition-all.tw-duration-200.tw-bg-white.tw-shadow-sm.tw-rounded-xl {
        border-radius: 10px !important;
    }

    /* card inner padding */
    .tw-p-4,
    .tw-p-4.sm\:tw-p-5 {
        padding: 8px !important;
    }

    /* card flex row */
    .tw-flex.tw-items-center.tw-gap-4 {
        gap: 8px !important;
        align-items: center !important;
    }

    /* icon circle — smaller */
    .tw-inline-flex.tw-items-center.tw-justify-center.tw-w-10.tw-h-10.tw-rounded-full,
    .tw-inline-flex.tw-items-center.tw-justify-center.tw-rounded-full {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        flex-shrink: 0 !important;
    }

    /* icon svg inside circle */
    .tw-inline-flex.tw-items-center.tw-justify-center.tw-rounded-full svg,
    .tw-inline-flex.tw-items-center.tw-justify-center.tw-w-10.tw-h-10.tw-rounded-full svg {
        width: 16px !important;
        height: 16px !important;
    }

    /* card label text */
    .tw-text-sm.tw-font-medium.tw-text-gray-500 {
        font-size: 0.65rem !important;
        line-height: 1.2 !important;
        white-space: normal !important;
    }

    /* card value text */
    .tw-text-xl.tw-font-semibold,
    .tw-text-xl.tw-truncate.tw-font-semibold,
    p.total_sell,
    p.net,
    p.invoice_due,
    p.total_sell_return,
    p.total_purchase,
    p.purchase_due,
    p.total_purchase_return,
    p.total_expense {
        font-size: 0.82rem !important;
        line-height: 1.3 !important;
        margin-top: 2px !important;
    }

    /* ============================================================
       SECOND CARD ROW (purchase section) — isolate wrapper
       ============================================================ */
    .tw-relative .tw-px-5.tw-isolate {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* ============================================================
       CHARTS SECTION
       ============================================================ */
    .tw-px-5.tw-py-6 {
        padding: 8px 10px !important;
    }

    .tw-grid.tw-grid-cols-1.tw-gap-4.sm\:tw-gap-5 {
        gap: 8px !important;
    }

    /* chart card heading */
    h3.tw-font-bold.tw-text-base {
        font-size: 0.8rem !important;
    }

    /* chart container */
    .tw-grid.tw-w-full.tw-h-100 {
        min-height: 180px !important;
    }

    /* ============================================================
       TABLES (payment dues, stock alerts)
       ============================================================ */
    .tw-flow-root.tw-mt-5 {
        margin-top: 8px !important;
    }

    .tw-overflow-x-auto {
        -webkit-overflow-scrolling: touch;
    }

    table.dataTable {
        font-size: 11px !important;
    }

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        float: none !important;
        text-align: left !important;
        margin-bottom: 6px;
        font-size: 12px;
    }

    /* ============================================================
       MISC
       ============================================================ */

    /* select2 full width */
    .select2-container {
        width: 100% !important;
    }

    /* modals full screen */
    .modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .modal-content {
        border-radius: 0 !important;
        min-height: 100vh;
    }

    /* touch-friendly buttons */
    .btn {
        min-height: 36px;
        padding: 5px 10px;
        font-size: 13px;
    }

    /* hide footer */
    footer.main-footer {
        display: none !important;
    }

    /* scroll-to-top above bottom nav */
    .scrolltop {
        bottom: calc(var(--mob-nav-h) + 10px) !important;
        right: 12px !important;
    }
}

/* ============================================================
   EXTRA SMALL  (≤ 400px)  — even tighter
   ============================================================ */
@media (max-width: 400px) {

    .tw-grid.tw-grid-cols-1.tw-gap-4.tw-mt-6,
    .tw-grid.tw-grid-cols-1.tw-gap-4.tw-mt-4 {
        gap: 5px !important;
    }

    .tw-p-4,
    .tw-p-4.sm\:tw-p-5 {
        padding: 6px !important;
    }

    .tw-inline-flex.tw-items-center.tw-justify-center.tw-w-10.tw-h-10.tw-rounded-full,
    .tw-inline-flex.tw-items-center.tw-justify-center.tw-rounded-full {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
    }

    .tw-text-sm.tw-font-medium.tw-text-gray-500 {
        font-size: 0.6rem !important;
    }

    p.total_sell, p.net, p.invoice_due, p.total_sell_return,
    p.total_purchase, p.purchase_due, p.total_purchase_return, p.total_expense {
        font-size: 0.75rem !important;
    }
}

/* ============================================================
   BOTTOM NAVIGATION BAR
   ============================================================ */

/* hidden on desktop */
#mobile-bottom-nav,
#mob-more-menu,
#mob-more-overlay {
    display: none;
}

@media (max-width: 767px) {

    /* ---------- bottom nav bar ---------- */
    #mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9999;
        height: var(--mob-nav-h);
        background: #fff;
        border-top: 1px solid #e5e7eb;
        box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
        align-items: stretch;
        justify-content: space-around;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* ---------- regular nav item ---------- */
    #mobile-bottom-nav .mob-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        text-decoration: none;
        color: #9ca3af;
        font-size: 10px;
        font-weight: 500;
        padding: 6px 2px 4px;
        cursor: pointer;
        border: none;
        background: none;
        -webkit-tap-highlight-color: transparent;
        position: relative;
        transition: color 0.15s;
    }

    #mobile-bottom-nav .mob-nav-item svg {
        width: 22px;
        height: 22px;
        stroke-width: 1.75;
        flex-shrink: 0;
        transition: stroke 0.15s;
    }

    #mobile-bottom-nav .mob-nav-item span {
        font-size: 10px;
        line-height: 1;
        white-space: nowrap;
    }

    #mobile-bottom-nav .mob-nav-item.active {
        color: var(--mob-accent);
    }

    #mobile-bottom-nav .mob-nav-item.active svg {
        stroke: var(--mob-accent);
    }

    #mobile-bottom-nav .mob-nav-item.active::after {
        content: '';
        position: absolute;
        top: 4px;
        width: 18px;
        height: 2px;
        border-radius: 2px;
        background: var(--mob-accent);
    }

    /* ---------- FAB (center add button) ---------- */
    #mobile-bottom-nav .mob-nav-fab {
        flex: 1;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding-top: 0;
    }

    #mobile-bottom-nav .mob-nav-fab .fab-btn {
        position: absolute;
        top: -20px;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%);
        color: #fff;
        border: 3px solid #fff;
        box-shadow: 0 4px 16px rgba(14,165,233,0.45);
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        transition: transform 0.18s, box-shadow 0.18s;
    }

    #mobile-bottom-nav .mob-nav-fab .fab-btn:active {
        transform: scale(0.92);
        box-shadow: 0 2px 8px rgba(14,165,233,0.3);
    }

    #mobile-bottom-nav .mob-nav-fab .fab-label {
        margin-top: 34px;
        font-size: 10px;
        color: #9ca3af;
        font-weight: 500;
        line-height: 1;
        white-space: nowrap;
    }

    /* ---------- more menu overlay ---------- */
    #mob-more-overlay {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 9998;
        background: rgba(0,0,0,0.4);
    }

    #mob-more-overlay.open {
        display: block;
    }

    /* ---------- more menu popup ---------- */
    #mob-more-menu {
        display: none;
        position: fixed;
        bottom: calc(var(--mob-nav-h) + 6px);
        left: 8px;
        right: 8px;
        z-index: 10000;
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 8px 32px rgba(0,0,0,0.16);
        padding: 14px 12px 12px;
    }

    #mob-more-menu.open {
        display: block;
        animation: mobMenuUp 0.2s ease;
    }

    @keyframes mobMenuUp {
        from { opacity: 0; transform: translateY(14px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    #mob-more-menu .mob-more-title {
        font-size: 10px;
        font-weight: 700;
        color: #9ca3af;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        padding: 0 4px 10px;
    }

    #mob-more-menu .mob-more-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    #mob-more-menu .mob-more-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 10px 4px;
        border-radius: 12px;
        background: #f9fafb;
        text-decoration: none;
        color: #374151;
        font-size: 11px;
        font-weight: 500;
        text-align: center;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.12s;
    }

    #mob-more-menu .mob-more-item:active {
        background: #e0f2fe;
        color: #0284c7;
    }

    #mob-more-menu .mob-more-item .mob-more-icon {
        width: 42px;
        height: 42px;
        border-radius: 11px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    #mob-more-menu .mob-more-item .mob-more-icon svg {
        width: 22px;
        height: 22px;
        stroke-width: 1.75;
    }
}

/* ============================================================
   LANDSCAPE MOBILE  (≤ 767px landscape)
   ============================================================ */
@media (max-width: 767px) and (orientation: landscape) {

    :root { --mob-nav-h: 52px; }

    #mobile-bottom-nav {
        height: 52px;
    }

    #mobile-bottom-nav .mob-nav-fab .fab-btn {
        width: 44px;
        height: 44px;
        top: -16px;
    }

    #mobile-bottom-nav .mob-nav-fab .fab-label {
        margin-top: 30px;
    }
}

/* ============================================================
   VERY SMALL PHONES  (≤ 360px)
   ============================================================ */
@media (max-width: 360px) {

    :root { --mob-nav-h: 56px; }

    #mobile-bottom-nav {
        height: 56px;
    }

    #mobile-bottom-nav .mob-nav-item span,
    #mobile-bottom-nav .mob-nav-fab .fab-label {
        display: none;
    }

    #mobile-bottom-nav .mob-nav-fab .fab-btn {
        top: -16px;
        width: 44px;
        height: 44px;
    }
}

/* ============================================================
   RTL
   ============================================================ */
[dir="rtl"] #mob-more-menu {
    left: 8px;
    right: 8px;
}