/*
 * Admin Panel — Mobile-First Polish
 *
 * Comprehensive small-screen rules for the admin panel. Loaded LAST in
 * the admin design system chain so it has the final word on mobile
 * layout decisions. All rules scoped to body[data-page="admin"].
 *
 * Breakpoints (single source of truth):
 *   --admin-bp-sm : 640px   (phones)
 *   --admin-bp-md : 1024px  (tablet / sidebar drawer mode)
 *
 * Tokens consumed from admin-tokens.css.
 */

/* ═══════════════════════════════════════════════════════════════════════
 * SAFE-AREA SUPPORT
 * ═══════════════════════════════════════════════════════════════════════
 * iOS notched devices need padding equal to env(safe-area-inset-*) on
 * fixed elements so content isn't clipped by the rounded corner / camera
 * cutout. We apply it to the header (top) and sidebar (left, bottom).
 */

@supports (padding: max(0px, env(safe-area-inset-top))) {
    body[data-page="admin"] > #admin-container > header > div {
        padding-top: max(var(--admin-space-2), env(safe-area-inset-top));
        padding-left: max(var(--admin-space-5), env(safe-area-inset-left));
        padding-right: max(var(--admin-space-5), env(safe-area-inset-right));
    }
    body[data-page="admin"] #sidebar {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* ═══════════════════════════════════════════════════════════════════════
 * TABLET ↓ (max-width: 1023px) — sidebar becomes overlay drawer
 * ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {

    /* Sidebar drawer ----------------------------------------------------- */
    body[data-page="admin"] #sidebar {
        position: fixed !important;
        top: var(--admin-header-height) !important;
        bottom: 0 !important;
        left: 0 !important;
        width: min(86vw, 320px) !important;
        max-width: 320px !important;
        transform: translateX(-100%);
        transition: transform 260ms var(--admin-ease);
        box-shadow: var(--admin-shadow-3) !important;
        z-index: 35 !important;
        will-change: transform;
    }
    body[data-page="admin"] #sidebar.show {
        transform: translateX(0) !important;
    }

    /* Scrim overlay — uses body:has(#sidebar.show) so no JS needed.
     * Clicks bubble to body which already triggers the existing
     * "click outside sidebar" close logic in admin-main.js. */
    body[data-page="admin"]:has(#sidebar.show)::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.52);
        backdrop-filter: blur(2px);
        z-index: 32;
        animation: adminScrimFadeIn 200ms var(--admin-ease) both;
    }
    @media (prefers-reduced-motion: reduce) {
        body[data-page="admin"]:has(#sidebar.show)::before { animation: none; }
        body[data-page="admin"] #sidebar { transition: none !important; }
    }
    @keyframes adminScrimFadeIn {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    /* Sidebar toggle in header is visible at this breakpoint */
    body[data-page="admin"] #toggle-sidebar {
        display: inline-flex !important;
    }

    /* Main content takes full width (no sidebar offset) */
    body[data-page="admin"] main.flex-1 {
        margin-left: 0 !important;
        padding: var(--admin-space-4) !important;
    }

    /* Quick stats — adapt grid to 2 columns at this size */
    body[data-page="admin"] .admin-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--admin-space-3);
    }
}

/* ═══════════════════════════════════════════════════════════════════════
 * PHONE ↓ (max-width: 640px) — tighter, single-column, thumb-friendly
 * ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

    /* ── Header ─────────────────────────────────────────────────────── */
    body[data-page="admin"] > #admin-container > header {
        height: 56px;
    }
    body[data-page="admin"] > #admin-container > header > div {
        height: 56px;
        padding-left: var(--admin-space-3) !important;
        padding-right: var(--admin-space-3) !important;
    }
    body[data-page="admin"] > #admin-container > header h1 {
        font-size: 15px;
    }
    /* Action cluster — tight, thumb-friendly */
    body[data-page="admin"] > #admin-container > header > div > div:last-child {
        gap: var(--admin-space-2);
    }
    /* On phones, hide the welcome text (sidebar can show user info instead) */
    body[data-page="admin"] > #admin-container > header .text-sm.text-gray-400 {
        display: none !important;
    }
    /* Theme toggle: icon-only */
    body[data-page="admin"] #ds-theme-toggle {
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
        padding: 0;
        justify-content: center;
    }
    body[data-page="admin"] #ds-theme-toggle [data-theme-label] {
        display: none;
    }
    /* Logout — compact but still readable */
    body[data-page="admin"] #logout-btn {
        padding: 0 var(--admin-space-3) !important;
        font-size: 12px;
    }
    /* Header pushes content down — adjust the spacer */
    body[data-page="admin"] > #admin-container > div.flex.pt-16 {
        padding-top: 56px !important;
    }
    body[data-page="admin"] #sidebar {
        top: 56px !important;
    }

    /* ── Main content padding ────────────────────────────────────────── */
    body[data-page="admin"] main.flex-1 {
        padding: var(--admin-space-3) !important;
    }

    /* ── Section titles ──────────────────────────────────────────────── */
    body[data-page="admin"] main .section-content h2,
    body[data-page="admin"] main .section-content .text-3xl {
        font-size: 20px !important;
        line-height: 1.2;
    }
    body[data-page="admin"] main .section-content h2 + p,
    body[data-page="admin"] main .section-content .text-3xl + p {
        font-size: 13px;
        line-height: 1.45;
    }
    body[data-page="admin"] main .section-content .mb-6 {
        margin-bottom: var(--admin-space-4) !important;
    }

    /* ── Cards ──────────────────────────────────────────────────────── */
    body[data-page="admin"] main .admin-card,
    body[data-page="admin"] main .v2-modal,
    body[data-page="admin"] main .rounded-lg.p-6,
    body[data-page="admin"] main .rounded-xl.p-6 {
        padding: var(--admin-space-4) !important;
        border-radius: var(--admin-radius-md) !important;
    }

    /* ── Quick stat grid: 2 columns on phone, single col below 380px ─── */
    body[data-page="admin"] .admin-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--admin-space-2);
    }
    @media (max-width: 380px) {
        body[data-page="admin"] .admin-stat-grid {
            grid-template-columns: 1fr;
        }
    }

    /* Stat card density on phone */
    body[data-page="admin"] .admin-stat {
        padding: var(--admin-space-3) !important;
        min-height: 84px;
        flex-direction: row;
        align-items: center;
        gap: var(--admin-space-3);
    }
    body[data-page="admin"] .admin-stat__value {
        font-size: 22px !important;
    }
    body[data-page="admin"] .admin-stat__label {
        font-size: 10px;
    }
    body[data-page="admin"] .admin-stat__icon {
        width: 36px;
        height: 36px;
    }
    body[data-page="admin"] .admin-stat__icon svg {
        width: 18px;
        height: 18px;
    }

    /* ── Generic horizontal-scroll table fallback ────────────────────── */
    /* Tables that don't use the responsive label-mode (Organizations,
     * Teams, Audit log) get a horizontally scrollable container with
     * min-widths on cells so they remain readable. */
    body[data-page="admin"] main .overflow-x-auto {
        margin-left: calc(var(--admin-space-3) * -1);
        margin-right: calc(var(--admin-space-3) * -1);
        padding-left: var(--admin-space-3);
        padding-right: var(--admin-space-3);
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }
    body[data-page="admin"] main .overflow-x-auto > table {
        min-width: 640px;
    }
    body[data-page="admin"] main .overflow-x-auto > table th,
    body[data-page="admin"] main .overflow-x-auto > table td {
        white-space: nowrap;
        scroll-snap-align: start;
    }
    /* Plan / Status / Action cells often contain pills — let them wrap
     * within their min-width column. */
    body[data-page="admin"] main .overflow-x-auto > table td .inline-flex {
        white-space: nowrap;
    }

    /* ── Admin Users table — label-mode card view ────────────────────── */
    /* The existing label-mode (admin.css 4719–4790) kicks in at 720px.
     * Reinforce the look here with tokens so light theme is readable. */
    body[data-page="admin"] .admin-users-table tr {
        background: var(--admin-surface) !important;
        border: 1px solid var(--admin-border) !important;
        border-radius: var(--admin-radius-md) !important;
        margin-bottom: var(--admin-space-2);
        padding: var(--admin-space-3) !important;
    }
    body[data-page="admin"] .admin-users-table td {
        padding: var(--admin-space-2) 0 !important;
    }
    body[data-page="admin"] .admin-users-table td::before {
        color: var(--admin-text-muted) !important;
    }

    /* ── Audit log entries (rendered by JS as flex rows) ─────────────── */
    body[data-page="admin"] #admin-audit-log-results > div {
        padding: var(--admin-space-3) !important;
        font-size: 13px;
    }
    body[data-page="admin"] #admin-audit-log-results .flex {
        flex-wrap: wrap;
        gap: var(--admin-space-2);
    }

    /* ── Toolbar / filter rows ───────────────────────────────────────── */
    body[data-page="admin"] .admin-users-toolbar {
        grid-template-columns: 1fr;
        gap: var(--admin-space-2);
    }
    body[data-page="admin"] .admin-users-toolbar label,
    body[data-page="admin"] .admin-users-toolbar button {
        width: 100%;
    }

    /* Generic filter / search rows that use flex */
    body[data-page="admin"] main .flex.flex-wrap.gap-3,
    body[data-page="admin"] main .flex.flex-wrap.gap-4 {
        gap: var(--admin-space-2) !important;
    }
    body[data-page="admin"] main .flex.flex-col.sm\:flex-row {
        flex-direction: column !important;
    }

    /* Inputs / selects — comfortable height for thumbs */
    body[data-page="admin"] main input[type="text"],
    body[data-page="admin"] main input[type="email"],
    body[data-page="admin"] main input[type="password"],
    body[data-page="admin"] main input[type="search"],
    body[data-page="admin"] main input[type="number"],
    body[data-page="admin"] main input[type="date"],
    body[data-page="admin"] main input[type="time"],
    body[data-page="admin"] main input[type="datetime-local"],
    body[data-page="admin"] main select,
    body[data-page="admin"] main textarea {
        height: 44px;
        font-size: 16px; /* prevents iOS zoom on focus */
        padding-left: var(--admin-space-3);
        padding-right: var(--admin-space-3);
    }
    body[data-page="admin"] main textarea {
        height: auto;
        min-height: 88px;
        padding-top: var(--admin-space-2);
        padding-bottom: var(--admin-space-2);
    }

    /* Buttons — 44px min-height, comfortable */
    body[data-page="admin"] main button,
    body[data-page="admin"] main .admin-btn,
    body[data-page="admin"] main a.admin-btn,
    body[data-page="admin"] main button[type="submit"] {
        min-height: 44px;
    }
    /* Full-width primary action buttons in the hero/header rows */
    body[data-page="admin"] main .admin-users-hero,
    body[data-page="admin"] main .flex.items-center.justify-between.mb-6 {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: var(--admin-space-3);
    }
    body[data-page="admin"] main .admin-users-hero button,
    body[data-page="admin"] main .admin-users-primary-action,
    body[data-page="admin"] main .flex.items-center.justify-between.mb-6 > button {
        width: 100%;
        justify-content: center;
    }

    /* ── Tabs (settings / billing) — horizontal scroll chip row ─────── */
    body[data-page="admin"] .settings-tabs,
    body[data-page="admin"] .billing-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: var(--admin-space-1);
        margin-left: calc(var(--admin-space-3) * -1);
        margin-right: calc(var(--admin-space-3) * -1);
        padding: var(--admin-space-1) var(--admin-space-3);
    }
    body[data-page="admin"] .settings-tab-button,
    body[data-page="admin"] .billing-tab {
        flex: 0 0 auto;
        scroll-snap-align: start;
        white-space: nowrap;
    }
    /* Hide scrollbar visually on tabs while keeping accessibility */
    body[data-page="admin"] .settings-tabs::-webkit-scrollbar,
    body[data-page="admin"] .billing-tabs::-webkit-scrollbar {
        height: 0;
    }

    /* ── Needs-attention rows ───────────────────────────────────────── */
    body[data-page="admin"] .needs-attention-item,
    body[data-page="admin"] .needs-attention-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: var(--admin-space-2);
    }
    body[data-page="admin"] .needs-attention-item button,
    body[data-page="admin"] .needs-attention-row button {
        width: 100%;
        justify-content: center;
    }

    /* ── Quick actions row (dashboard) ──────────────────────────────── */
    body[data-page="admin"] .quick-actions-row {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--admin-space-2);
    }
    body[data-page="admin"] .quick-action-btn {
        min-height: 56px;
        font-size: 12px;
        padding: var(--admin-space-2);
    }

    /* ── Comparison table (reports) ─────────────────────────────────── */
    body[data-page="admin"] .cmp-wrap {
        margin-left: calc(var(--admin-space-3) * -1);
        margin-right: calc(var(--admin-space-3) * -1);
        padding: 0 var(--admin-space-3);
        overflow-x: auto;
    }
    body[data-page="admin"] .cmp-table {
        min-width: 560px;
    }

    /* ── Empty state on phones ──────────────────────────────────────── */
    body[data-page="admin"] .admin-empty-state {
        padding: var(--admin-space-6) var(--admin-space-3);
    }
    body[data-page="admin"] .admin-empty-state__title {
        font-size: 15px;
    }
    body[data-page="admin"] .admin-empty-state__body {
        font-size: 12px;
    }

    /* ── Pills / chips don't shrink-wrap ────────────────────────────── */
    body[data-page="admin"] main .inline-flex.items-center.px-2\.5 {
        flex: 0 0 auto;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
 * MODAL BOTTOM-SHEET (phone)
 * ═══════════════════════════════════════════════════════════════════════
 * On phones, modals dock to the bottom of the screen (familiar mobile
 * pattern) instead of floating centered. Wider thumb reach, more screen
 * real estate, less visual chrome. Applies only when the backdrop is
 * the actual flex container holding the modal.
 */

@media (max-width: 640px) {

    body[data-page="admin"] .v2-modal-backdrop {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    body[data-page="admin"] .v2-modal-backdrop > .v2-modal,
    body[data-page="admin"] .v2-modal-backdrop > [class*="rounded"][class*="border"] {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 90dvh !important;
        margin: 0 !important;
        border-radius: var(--admin-radius-lg) var(--admin-radius-lg) 0 0 !important;
        animation: adminSheetSlideUp 280ms var(--admin-ease) both;
    }

    /* Drag handle decoration at the top of every bottom-sheet */
    body[data-page="admin"] .v2-modal-backdrop > .v2-modal::before,
    body[data-page="admin"] .v2-modal-backdrop > [class*="rounded"][class*="border"]::before {
        content: "";
        position: sticky;
        top: 0;
        display: block;
        width: 36px;
        height: 4px;
        margin: var(--admin-space-2) auto;
        background: var(--admin-border-strong);
        border-radius: var(--admin-radius-pill);
    }

    @keyframes adminSheetSlideUp {
        from { transform: translateY(20%); opacity: 0; }
        to   { transform: translateY(0);   opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) {
        body[data-page="admin"] .v2-modal-backdrop > .v2-modal,
        body[data-page="admin"] .v2-modal-backdrop > [class*="rounded"][class*="border"] {
            animation: none;
        }
    }

    /* Modal form fields — stack to single column */
    body[data-page="admin"] .v2-modal .grid.grid-cols-2,
    body[data-page="admin"] .v2-modal .grid.sm\:grid-cols-2,
    body[data-page="admin"] .admin-users-modal .grid.grid-cols-2,
    body[data-page="admin"] .admin-users-modal .grid.sm\:grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: var(--admin-space-3) !important;
    }
    /* Modal footer buttons — full width stacked, primary at bottom */
    body[data-page="admin"] .v2-modal-footer,
    body[data-page="admin"] .admin-users-modal-actions,
    body[data-page="admin"] .v2-modal .flex.justify-end.gap-3,
    body[data-page="admin"] .v2-modal .flex.justify-end.gap-2 {
        flex-direction: column-reverse !important;
        gap: var(--admin-space-2) !important;
    }
    body[data-page="admin"] .v2-modal-footer > *,
    body[data-page="admin"] .admin-users-modal-actions > *,
    body[data-page="admin"] .v2-modal .flex.justify-end.gap-3 > *,
    body[data-page="admin"] .v2-modal .flex.justify-end.gap-2 > * {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
 * VERY SMALL PHONES (≤ 360px)
 * ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 360px) {
    body[data-page="admin"] > #admin-container > header h1 {
        font-size: 14px;
    }
    body[data-page="admin"] #logout-btn {
        padding: 0 var(--admin-space-2) !important;
        font-size: 11px;
    }
    body[data-page="admin"] main .section-content h2,
    body[data-page="admin"] main .section-content .text-3xl {
        font-size: 18px !important;
    }
    body[data-page="admin"] .admin-stat__value {
        font-size: 20px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
 * LANDSCAPE PHONE
 * ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 920px) and (orientation: landscape) and (max-height: 500px) {
    /* On landscape phone, shrink vertical padding so more content fits */
    body[data-page="admin"] > #admin-container > header,
    body[data-page="admin"] > #admin-container > header > div {
        height: 48px;
    }
    body[data-page="admin"] > #admin-container > div.flex.pt-16 {
        padding-top: 48px !important;
    }
    body[data-page="admin"] #sidebar {
        top: 48px !important;
    }
    body[data-page="admin"] main.flex-1 {
        padding: var(--admin-space-2) var(--admin-space-3) !important;
    }
}