/* %%  ApoTune Portal – Responsive / Mobile Styles  %%%%%%%%%%%%%%%%%%%%%%%%% */

/* ── Hamburger Toggle (header, hidden on desktop — mobile only) ───────── */
.sidebar-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.4rem;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    color: var(--text-color);
    line-height: 1;
    border-radius: 6px;
    transition: background 0.15s;
}
.sidebar-toggle:hover {
    background: rgba(0,0,0,0.06);
}
[data-color-mode="dark"] .sidebar-toggle:hover {
    background: rgba(255,255,255,0.08);
}

/* ── Sidebar collapse toggle (inside sidebar, hidden on mobile) ───────── */
.sb-toggle {
    display: flex;
}

/* ── Sidebar Backdrop (hidden on desktop) ─────────────────────────────── */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.sidebar-backdrop.show {
    display: block;
    opacity: 1;
}

/* ══════════════════════════════════════════════════════════════════════════
   TABLET  (< 992px)
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    /* Reduce main content padding */
    .main-content {
        padding: 1rem !important;
    }

    /* Smaller page titles */
    .page-title {
        font-size: 1.35rem !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE  (< 768px)
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {

    /* ── Show hamburger, hide internal sidebar toggle ─────────────────── */
    .sidebar-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sb-toggle {
        display: none;
    }

    /* ── Sidebar: full-width off-canvas overlay on mobile ──────────────── */
    .sidebar {
        position: fixed !important;
        top: 0;
        left: calc(0px - var(--sidebar-width) - 1.25rem);
        width: var(--sidebar-width) !important; /* ignore collapsed width on mobile */
        height: 100vh;
        height: 100dvh;
        z-index: 1050;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        flex-shrink: 0;
    }

    .app-shell.sidebar-open .sidebar {
        left: 0;
    }

    /* Restore hidden labels so collapsed state doesn't show icon-only on mobile */
    .sidebar .nav-lbl {
        opacity: 1 !important;
    }

    .sidebar .sb-logo-text {
        opacity: 1 !important;
        width: auto !important;
        flex: 1 !important;
    }

    .sidebar .nav-group {
        opacity: 0.4 !important;
    }

    .sidebar.collapsed .theme-pick:not(.active) {
        display: inline-flex !important;
    }

    /* ── Header ────────────────────────────────────────────────────────── */
    .app-header {
        padding: 0.5rem 0.75rem !important;
    }

    .app-header .text-muted.small {
        display: none; /* Hide "ApoTune Portal" text on mobile */
    }

    /* ── Main content ──────────────────────────────────────────────────── */
    .main-content {
        padding: 0.75rem !important;
    }

    /* ── Page titles ───────────────────────────────────────────────────── */
    .page-title {
        font-size: 1.15rem !important;
    }

    .page-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem;
    }

    .page-header .d-flex.gap-2 {
        flex-wrap: wrap;
    }

    /* ── Buttons & Button Groups ───────────────────────────────────────── */
    .page-header .btn-group {
        flex-wrap: wrap;
    }

    /* ── User badge in header ──────────────────────────────────────────── */
    .user-badge .badge {
        max-width: 160px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.7rem;
    }

    /* ── Modals ────────────────────────────────────────────────────────── */
    .modal-dialog {
        margin: 0.5rem;
    }

    /* ── Cards ─────────────────────────────────────────────────────────── */
    .card-body {
        padding: 0.75rem;
    }

    .card-header {
        padding: 0.5rem 0.75rem;
    }

    /* ── Tables (ensure horizontal scroll on all tables) ───────────────── */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }

    /* Toolbar search inputs – full width on mobile */
    .card-header input[type="search"],
    .card-header input[type="text"],
    .card-body input[type="search"],
    .card-body input[type="text"] {
        max-width: 100% !important;
    }

    /* ── Pharmacies – toolbar density ──────────────────────────────────── */
    .card-header .btn-group-sm .btn {
        padding: 0.2rem 0.4rem;
        font-size: 0.75rem;
    }

    /* ── Badges row (status counters) ──────────────────────────────────── */
    .page-header .badge {
        font-size: 0.7rem;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   SMALL MOBILE  (< 576px)
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
    .page-title {
        font-size: 1rem !important;
    }

    .main-content {
        padding: 0.5rem !important;
    }

    /* Stack filter controls vertically */
    .card-header .d-flex.flex-wrap {
        gap: 0.5rem !important;
    }

    /* Full-width search on tiny screens */
    .card-header .position-relative {
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }

    .card-header .form-select {
        min-width: auto !important;
    }
}