/* ==========================================================================
   ARKENSTONE REGISTRY — RESPONSIVE FOUNDATION  (loaded LAST)

   Tablet-primary responsive system. Everything here is gated at/below the
   tablet breakpoint (<=1024px) so the desktop layout (>=1025px) is untouched.

   Tiers:  Phone <=640px  ·  Tablet 641-1024px  ·  Desktop >=1025px
   ========================================================================== */

:root {
    --bp-phone: 640px;
    --bp-tablet: 1024px;
    --tap-min: 44px;                       /* min touch target */
    --modal-radius: 16px;
    --sheet-radius: 18px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
}

/* Body scroll-lock while a modal / drawer / sheet is open (set via arkLockScroll) */
body.ark-modal-open { overflow: hidden !important; }

/* Hamburger + nav scrim hidden on desktop; revealed at <=1024 (rules below) */
.ark-hamburger { display: none; }
.nav-scrim { display: none; }

/* ──────────────────────────────────────────────────────────────────────────
   PERSISTENT ICON RAIL + EXPANDABLE DRAWER  (tablet + phone, <= 1024px)
   The sidebar stays visible as an icon-only rail (one-tap access to every
   view); the hamburger expands it to a full labelled drawer (overlay + scrim).
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    :root { --rail-w: 64px; }

    .sidebar {
        position: fixed; top: 0; left: 0;
        height: 100dvh;
        width: var(--rail-w);
        transform: none;
        transition: width .22s ease, box-shadow .22s ease;
        z-index: 1200;
        overflow: hidden;                         /* clip labels while collapsed */
        padding: max(16px, var(--safe-top)) 8px 12px max(8px, var(--safe-left));
        gap: 4px;
    }
    /* main content always clears the rail */
    .main-area { padding-left: var(--rail-w); }

    /* collapsed rail: icons only, centered */
    .sidebar .brand-text,
    .sidebar .nav-item span,
    .sidebar .sidebar-copy,
    .sidebar .save-status-indicator span,
    .sidebar .nav-item .filter-count { display: none; }
    .sidebar .nav-item { justify-content: center; min-height: var(--tap-min); }
    .sidebar .nav-item i { font-size: 19px; }
    .sidebar-brand { justify-content: center; padding: 2px 0 12px; }
    .sidebar-footer { align-items: center; }

    /* expanded (hamburger) → full labelled drawer over the content */
    body.ark-nav-open .sidebar {
        width: 264px;
        overflow-y: auto;
        box-shadow: 2px 0 28px rgba(0,0,0,.22);
        padding-left: max(12px, var(--safe-left));
    }
    body.ark-nav-open .sidebar .brand-text,
    body.ark-nav-open .sidebar .nav-item span,
    body.ark-nav-open .sidebar .sidebar-copy,
    body.ark-nav-open .sidebar .save-status-indicator span,
    body.ark-nav-open .sidebar .nav-item .filter-count { display: inline-flex; }
    body.ark-nav-open .sidebar .nav-item { justify-content: flex-start; }
    body.ark-nav-open .sidebar-brand { justify-content: flex-start; }
    body.ark-nav-open .sidebar-footer { align-items: stretch; }

    /* scrim only appears when the rail is expanded */
    .nav-scrim {
        display: block; position: fixed; inset: 0;
        background: rgba(20,18,12,.45);
        opacity: 0; pointer-events: none;
        transition: opacity .22s ease; z-index: 1100;
    }
    body.ark-nav-open .nav-scrim { opacity: 1; pointer-events: auto; }

    /* hamburger now toggles expand/collapse of the rail */
    .ark-hamburger {
        display: inline-flex; align-items: center; justify-content: center;
        width: var(--tap-min); height: var(--tap-min); flex-shrink: 0;
        border: none; background: transparent; color: var(--color-ink-primary);
        cursor: pointer; font-size: 22px; border-radius: 8px; margin-right: 2px;
    }
    .ark-hamburger:hover { background: var(--color-canvas-secondary); }

    .topbar {
        gap: 8px;
        padding-left: max(10px, var(--safe-left));
        padding-right: max(10px, var(--safe-right));
        padding-top: max(10px, var(--safe-top));
    }
}

/* Slimmer rail on phones to preserve content width */
@media (max-width: 640px) {
    :root { --rail-w: 54px; }
    .sidebar { padding-left: max(6px, var(--safe-left)); padding-right: 6px; }
    .sidebar .nav-item i { font-size: 18px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   TABLET & PHONE  (<= 1024px)
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {

    /* iOS auto-zooms focused inputs under 16px — pin the floor on touch sizes */
    input, select, textarea,
    .form-input, .att-input, .kmodal-input, .kmodal-select, .kmodal-textarea,
    .matspec-cell, .matspec-picker-search {
        font-size: 16px;
    }

    /* Modal layering — the persistent nav rail is z-index 1200, but the app's
       modal overlays use wildly inconsistent z-indexes (150–9200). Lift the
       low ones above the rail so dialogs are never clipped by it. */
    .modal-overlay,
    .project-modal-wrap,
    .drawer-overlay,
    .settings-panel,
    #settingsOverlay,
    .logout-overlay { z-index: 1500 !important; }

    /* The login screen is the auth gate — it must cover the nav rail (z1200)
       and everything else when signed out */
    #loginScreen { z-index: 2000 !important; }

    /* Shared modal shell — centered dialogs become fluid + height-capped + scrollable.
       Applies to the common .modal-overlay/.modal-content pattern (New Project,
       Export, Profile, Meeting, catalog editor) and is safe for desktop (gated). */
    .modal-overlay { padding: 20px; }
    .modal-content {
        width: min(720px, 94vw) !important;
        max-width: 94vw !important;
        max-height: 90dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Touch-friendlier minimum for the most-tapped small icon buttons */
    .sroster-btn { width: 32px; height: 32px; }
    .sroster-btn i { font-size: 14px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   PHONE  (<= 640px)  — large centered dialogs become full-screen sheets
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {

    .modal-overlay { padding: 0; align-items: stretch; }
    .modal-content {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0 !important;
        padding-left: max(16px, var(--safe-left));
        padding-right: max(16px, var(--safe-right));
        padding-bottom: max(16px, var(--safe-bottom));
    }

    /* Toasts: full-width, above the bottom safe area */
    .toast-container, .toast-wrap, #toastContainer {
        left: 8px !important; right: 8px !important;
        bottom: calc(8px + var(--safe-bottom)) !important;
    }

    /* Mobile topbar: ONE row — hamburger + shrinking search + essential actions.
       (Assistant has a floating bubble; values/shortcuts/gear are desktop-only.) */
    .topbar { flex-wrap: nowrap; align-items: center; gap: 6px; }
    .ark-hamburger { order: 0; flex-shrink: 0; }
    .topbar-search-wrap { order: 1; flex: 1 1 auto; min-width: 0; }
    .topbar-search-wrap .topbar-search, .topbar-search-wrap #searchInput { width: 100%; min-width: 0; }
    .topbar-actions {
        order: 2; flex: 0 0 auto;
        display: flex; flex-wrap: nowrap; gap: 4px; overflow: visible;
    }
    .topbar-actions > * { flex-shrink: 0; }

    /* Hide desktop-only conveniences; keep Assistant (no floating bubble exists) */
    #btnEditMode, #btnValues, .btn-shortcuts, #btnHeaderSettings { display: none !important; }

    /* New Project + Assistant → icon-only */
    #btnNewProject, .btn-assistant { font-size: 0; padding-left: 9px; padding-right: 9px; }
    #btnNewProject i, .btn-assistant i { font-size: 17px; }
    .btn-assistant span:not(.assistant-btn-badge) { display: none; }

    /* Profile → photo only; clock compact icon */
    .profile-chip-name { display: none !important; }
    .profile-chip { padding: 3px !important; gap: 0 !important; }
    .att-clock-btn { padding: 7px 9px; }
    #attClockLabel { display: none; }

    /* Dropdowns anchored to the viewport below the single-row header.
       z-index above the nav rail (1200) so they aren't clipped by it. */
    .profile-dropdown {
        position: fixed !important;
        top: calc(56px + var(--safe-top)) !important;
        right: 6px !important; left: auto !important;
        z-index: 1300 !important;
    }
    #notifPanel, .notif-panel {
        position: fixed !important;
        top: calc(56px + var(--safe-top)) !important;
        left: 6px !important; right: 6px !important;
        width: auto !important; max-width: none !important; max-height: 74dvh;
        z-index: 1300 !important;
    }
}

/* ==========================================================================
   R2 — HEAVY SURFACES: Project detail modal + Settings panel
   ========================================================================== */
@media (max-width: 1024px) {
    .settings-panel { width: min(840px, 96vw); height: min(86dvh, 720px); }
}
@media (max-width: 640px) {
    /* Project detail modal → full-screen sheet (tab bar already scrolls) */
    .project-modal-wrap { padding: 0; }
    .project-modal {
        width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
    }
    .pm-left { max-height: 34vh !important; }
    .pm-header { padding-top: max(14px, var(--safe-top)); }
    .pm-tab-panel { padding-left: 16px; padding-right: 16px; }

    /* Settings panel → full-screen sheet */
    .settings-panel {
        top: 0 !important; left: 0 !important;
        transform: none !important;
        width: 100vw !important; height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important; border: none !important;
    }
    .settings-tab-panel { padding: 16px 16px 48px; }
    /* Stack the two-pane layout: hide the roster (team mgmt lives in the Team
       page on phone), give the settings content the full width */
    .settings-layout { flex-direction: column; }
    .settings-roster-col { display: none !important; }
}

/* ==========================================================================
   R3 — CRUD DIALOGS: creative/lead (kmodal), attendance, form stacking
   ========================================================================== */
@media (max-width: 1024px) {
    .kmodal-box { width: min(640px, 94vw); max-height: 90dvh; }
}
@media (max-width: 640px) {
    /* Creative + Sales lead editor (shared .kmodal-overlay/.kmodal-box) */
    .kmodal-overlay { padding: 0; align-items: stretch; }
    .kmodal-box {
        width: 100vw !important; max-width: 100vw !important;
        height: 100dvh; max-height: 100dvh; border-radius: 0 !important;
    }
    /* Attendance modals (plan / wrap / correct) → full-screen sheet */
    .att-modal-overlay { padding: 0; align-items: stretch; }
    .att-modal {
        width: 100vw !important; max-width: 100vw !important;
        height: 100dvh; max-height: 100dvh; border-radius: 0 !important;
    }
    /* Stack multi-column form rows to single column */
    .kmodal-row, .form-row, .modal-row, .form-grid,
    .att-cfg-grid, .att-report-controls, .att-gt-add {
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .kmodal-row > *, .form-row > * { width: 100%; }
}

/* ==========================================================================
   R4 — PICKERS & OVERLAYS: bottom sheets + full-width panels on phone
   ========================================================================== */
@media (max-width: 640px) {
    /* Material picker / project-image chooser → bottom sheet */
    .matspec-picker-overlay { padding: 0; align-items: flex-end; }
    .matspec-picker {
        width: 100vw !important; max-width: 100vw !important;
        max-height: 86dvh !important;
        border-radius: var(--sheet-radius) var(--sheet-radius) 0 0 !important;
    }
    /* Notifications + search dropdowns → full-width sheets */
    #notifPanel, .notif-panel {
        position: fixed !important;
        left: 6px !important; right: 6px !important; top: 64px !important;
        width: auto !important; max-width: none !important; max-height: 70dvh;
    }
    #searchDropdown, .search-dropdown {
        position: fixed !important;
        left: 6px !important; right: 6px !important;
        width: auto !important; max-width: none !important;
    }
    /* Date popover + globe folder picker → keep within viewport */
    .month-picker, .globe-folder-picker, .globe-picker { max-width: 92vw !important; }
    /* AI assistant chat → full-width drawer */
    .chat-panel { width: 100vw !important; max-width: 100vw !important; }
    /* Profile quick menu */
    .profile-dropdown { right: 8px !important; min-width: 200px; }
}

/* ==========================================================================
   R5 — VIEWS & TABLES: tables scroll, boards/grids reflow
   ========================================================================== */
@media (max-width: 1024px) {
    .view-container { padding-left: 16px; padding-right: 16px; }
    /* Projects table (min-width ~1100px) scrolls horizontally instead of squishing */
    .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    /* Kanban: narrower columns so several stages fit before scrolling (tablet) */
    .kanban-col { flex: 0 0 210px !important; min-width: 210px !important; width: 210px !important; }
    .kanban-board-4col .kanban-col { flex-basis: 210px !important; min-width: 210px !important; width: 210px !important; }

    /* Material Specs editor: its 2-column body (380px render rail + content)
       doesn't fit a phone — stack it so the spec table gets the full width. */
    #view-materials .ms-editor-body { flex-direction: column; }
    #view-materials .ms-render-col {
        width: 100% !important; flex-shrink: 1 !important;
        position: static !important; max-height: none !important;
    }
    #view-materials .ms-content-col { width: 100%; min-width: 0; }

    /* Material Specs grid: the global mobile table→card reflow (registry.css
       ~L1098) would stack its editable cells unusably. Keep all Materials-view
       tables as proper, horizontally-scrollable tables instead. */
    #view-materials .matspec-table-wrap,
    #view-materials .matspec-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
    #view-materials table   { display: table; }
    #view-materials thead   { display: table-header-group; }
    #view-materials tbody   { display: table-row-group; }
    #view-materials tr      { display: table-row; background: none; border: 0; border-radius: 0; margin: 0; }
    #view-materials th,
    #view-materials td      { display: table-cell; }
    #view-materials .matspec-table { min-width: 760px; }
}
@media (max-width: 640px) {
    /* NOTE: phone density previously used `zoom: var(--ui-scale-phone)` here, but
       CSS `zoom` on the scrolling content forces a single huge GPU layer on
       high-DPI phones (e.g. S24 Ultra) → flicker + unpainted tiles on scroll/tab
       switch. Removed. Density can be re-added later via a non-compositing method. */

    /* Kanban: scale to fit — compact columns + cards so 2+ stages are visible */
    .kanban-board { gap: 10px !important; }
    .kanban-col { flex: 0 0 165px !important; min-width: 165px !important; width: 165px !important; }
    .kanban-card { padding: 8px !important; }

    /* Card grids → multi-column (no more one card per row) */
    .att-board-grid { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)) !important; }
    .att-rep-grid   { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; }
    .matspec-grid   { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; }
    .att-cfg-grid   { grid-template-columns: 1fr !important; }   /* settings form stays single column */

    /* Gantt scrolls horizontally (frappe manages internal width) */
    .gantt-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    /* Calendar: compact cells so the month grid fits */
    .cal-cell { min-height: 46px !important; font-size: 11px; }
    .view-title, .view-header h1 { font-size: 26px; }
}

/* ==========================================================================
   REPORTS view — weekly report + member history (mobile)
   ========================================================================== */
@media (max-width: 1024px) {
    /* Sub-nav tab bars scroll horizontally instead of wrapping/cramping */
    .sub-nav { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
    .sub-nav::-webkit-scrollbar { display: none; }
    .sub-nav .sub-nav-btn { flex-shrink: 0; }

    /* (Team Workload table reflows to labeled cards on phone via the global
       data-label rule — its cells now carry data-label attributes.) */

    /* AI report bar wraps neatly */
    .report-ai-bar { flex-wrap: wrap; }
    .report-ai-bar .btn-ai { width: 100%; justify-content: center; }
}
@media (max-width: 640px) {
    /* Member history: stack the sidebar over the feed; let the page scroll */
    .mh-wrap { flex-direction: column; height: auto !important; min-height: 0 !important; }
    .mh-sidebar {
        width: 100% !important; flex-shrink: 0;
        border-right: none; border-bottom: 0.75px solid var(--color-border-rule);
    }
    .mh-sidebar-title { padding: 10px 12px 8px; }
    /* Member picker → horizontal scrolling pills */
    .mh-member-list {
        display: flex; flex-direction: row; flex-wrap: nowrap;
        overflow-x: auto; overflow-y: hidden; gap: 6px; padding: 4px 10px 10px;
        scrollbar-width: none;
    }
    .mh-member-list::-webkit-scrollbar { display: none; }
    .mh-member-row {
        width: auto !important; flex-shrink: 0;
        border: 0.75px solid var(--color-border-rule); border-radius: 999px;
        padding: 6px 12px;
    }
    .mh-main { overflow: visible !important; }
    .mh-feed { overflow: visible !important; max-height: none !important; }
    /* Member detail charts (sparkline + heatmap) stack */
    .mh-charts-row { flex-direction: column; }
    .mh-chart-block, .mh-chart-block-wide { min-width: 0 !important; }
}

/* ==========================================================================
   GPU COMPOSITING RELIEF (touch ≤1024px) — fixes flicker / unpainted elements
   `backdrop-filter: blur()` forces an expensive off-screen composite pass that
   thrashes mobile GPUs (worst on high-DPI phones): flicker on scroll and tab/
   settings switches, and tiles that fail to paint. Blur is purely decorative,
   so we drop it on touch layout — the translucent background colour stays, so
   overlays still read as dimmed.
   ========================================================================== */
@media (max-width: 1024px) {
    * {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}