/* ============================================================
   KineticRecruiter mobile app shell (spec 15, 20 July)
   Header bar, bottom tab bar, More sheet, bottom-sheet kit,
   sticky action bar and mobile spacing utilities.

   Loaded after the base <style> block so equal-specificity class
   rules here win over the desktop defaults.

   Rules of the file:
   - tokens only: var(--kr-*) plus the on-ink rgba mixes the base
     shell already uses (never raw hex outside a token definition)
   - no `display:` inside any ID selector rule (the .hidden trap)
   - safe-area env() always declared with a fallback
   - dvh always declared after a vh fallback

   z-index map (mobile):
     20  .kr-actionbar (sticky, inside content flow)
     30  .page-header (sticky, below the shell header)
     35  .kr-mtabs (bottom tab bar, above content)
     36  .kr-mtopbar (shell header)
     40  .kr-mfab (create FAB, above the tab bar, below sheets)
     46  .kr-msheet-dim (More sheet dim, covers tab bar)
     47  .kr-msheet (More sheet)
     50+ existing drawers/sheets (#candidatePreviewModal 50,
         #krCandDim 60, #krCandDrawer 61), ⌘K palette 80, toasts 100
   ============================================================ */

:root {
    /* Muted label on ink, matches the sidebar's inactive text (spec 15 .mtabs) */
    --kr-on-ink-muted: #8F8B82;
}

/* Desktop: the mobile shell does not exist */
.kr-mtopbar,
.kr-mtabs,
.kr-msheet,
.kr-msheet-dim,
.kr-mfab {
    display: none;
}

@media (max-width: 767px) {

    /* --------------------------------------------------------
       Shell header (spec 15 .mtop): ink bar, brand mark,
       page title slot, actions slot.
       -------------------------------------------------------- */
    .kr-mtopbar {
        position: sticky;
        top: 0;
        z-index: 36;
        display: flex;
        align-items: center;
        gap: 11px;
        min-height: 52px;
        background: var(--kr-ink);
        color: var(--kr-bone);
        padding: 10px 16px;
        padding-top: calc(10px + env(safe-area-inset-top, 0px));
    }
    .kr-mtopbar .mk {
        position: relative;
        width: 22px;
        height: 22px;
        background: var(--kr-signal);
        flex: 0 0 auto;
        display: inline-block;
    }
    .kr-mtopbar .mk::after {
        content: "";
        position: absolute;
        width: 8px;
        height: 8px;
        background: var(--kr-ink);
        top: 7px;
        left: 7px;
    }
    .kr-mtopbar .ti {
        font-size: 15px;
        font-weight: 600;
        letter-spacing: -0.02em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
        color: var(--kr-bone);
    }
    .kr-mtopbar .sp {
        margin-left: auto;
        display: flex;
        gap: 6px;
        align-items: center;
    }
    .kr-mtopbar .ib {
        width: 32px;
        height: 32px;
        border: 1px solid rgba(244, 243, 239, .24);
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        color: var(--kr-bone);
        cursor: pointer;
        flex: 0 0 auto;
        padding: 0;
    }
    .kr-mtopbar .ib svg {
        width: 16px;
        height: 16px;
        stroke-width: 2;
    }

    /* The in-page sticky header now sticks below the shell header */
    .page-header {
        top: 52px;
        top: calc(52px + env(safe-area-inset-top, 0px));
    }

    /* Clear the fixed tab bar AND the floating create FAB at the bottom of
       every page. The FAB (.kr-mfab) sits at bottom: 74px and is 48px tall,
       so its top edge is 122px above the viewport bottom; 128px gives a small
       gap so trailing content never scrolls under the FAB. */
    .main-content {
        padding-bottom: 128px;
        padding-bottom: calc(128px + env(safe-area-inset-bottom, 0px));
    }

    /* --------------------------------------------------------
       Bottom tab bar (spec 15 .mtabs):
       Home · People · Jobs · Clients · More
       -------------------------------------------------------- */
    .kr-mtabs {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 35;
        display: flex;
        background: var(--kr-ink);
        border-top: 1px solid rgba(244, 243, 239, .14);
        padding: 8px 6px 10px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    }
    .kr-mtabs a,
    .kr-mtabs button {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        color: var(--kr-on-ink-muted);
        text-decoration: none;
        font-family: var(--kr-sans);
        font-size: 9px;
        font-weight: 500;
        padding: 4px 0;
        background: none;
        border: none;
        cursor: pointer;
        min-width: 0;
    }
    .kr-mtabs a svg,
    .kr-mtabs button svg {
        width: 19px;
        height: 19px;
        stroke-width: 2;
    }
    .kr-mtabs a.on,
    .kr-mtabs button.on {
        color: var(--kr-signal);
    }

    /* --------------------------------------------------------
       Bottom sheet kit (spec 15 .dimm/.sheet): used by the
       More sheet and reusable for future sheets. Visibility is
       driven by the .open class (never .hidden, never display
       on an ID) so the Tailwind .hidden trap cannot occur.
       -------------------------------------------------------- */
    .kr-msheet-dim {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(14, 14, 12, .34);
        z-index: 46;
        opacity: 0;
        visibility: hidden;
        transition: opacity .2s ease, visibility .2s ease;
    }
    .kr-msheet-dim.open {
        opacity: 1;
        visibility: visible;
    }
    .kr-msheet {
        display: flex;
        flex-direction: column;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 47;
        background: var(--kr-paper);
        border-top: 1.5px solid var(--kr-ink);
        border-radius: 18px 18px 0 0;
        padding: 8px 14px 16px;
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        max-height: 78vh;
        max-height: 78dvh;
        transform: translateY(105%);
        transition: transform .25s cubic-bezier(0.4, 0, 0.2, 1);
        overflow: hidden;
    }
    .kr-msheet.open {
        transform: translateY(0);
    }
    .kr-msheet-body {
        overflow-y: auto;
        min-height: 0;
        -webkit-overflow-scrolling: touch;
    }

    /* --------------------------------------------------------
       Create FAB (spec 15 .mfab): signal-yellow plus, one per
       tab, bottom-right above the tab bar. The More sheet's dim
       hides it while the sheet is open (sibling selector: the
       FAB sits after the dim in _mobile_nav.html).
       -------------------------------------------------------- */
    .kr-mfab {
        position: fixed;
        right: 14px;
        bottom: 74px;
        bottom: calc(74px + env(safe-area-inset-bottom, 0px));
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: var(--kr-signal);
        border: 1.5px solid var(--kr-ink);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        cursor: pointer;
        color: var(--kr-ink);
        z-index: 40;
        box-shadow: 0 4px 12px rgba(14, 14, 12, .2);
    }
    .kr-mfab svg {
        width: 22px;
        height: 22px;
        stroke-width: 2;
        color: var(--kr-ink);
    }
    .kr-msheet-dim.open ~ .kr-mfab {
        visibility: hidden;
    }

    /* --------------------------------------------------------
       Sticky action bar (spec 15 .pinned): pin a form's or
       record's primary actions in thumb reach, above the tabs.
       -------------------------------------------------------- */
    .kr-actionbar {
        position: sticky;
        bottom: 58px;
        bottom: calc(58px + env(safe-area-inset-bottom, 0px));
        z-index: 20;
    }

    /* --------------------------------------------------------
       Global search: full-screen overlay on mobile (spec 15 §F)
       -------------------------------------------------------- */
    .kr-cmdk-ovl {
        padding-top: 0 !important;
        align-items: stretch !important;
    }
    .kr-cmdk {
        width: 100%;
        max-width: 100%;
        height: 100%;
        border: none;
    }
    .kr-cmdk .cp-body {
        max-height: none;
        flex: 1;
    }

    /* --------------------------------------------------------
       Mobile spacing utilities (spec 15: 12px content padding,
       9px card gaps: Tailwind v2 CDN cannot express these
       responsively, so they are custom classes)
       -------------------------------------------------------- */
    .kr-m-pad { padding: 12px !important; }
    .kr-m-gap { gap: 9px !important; }
    .kr-m-hidden { display: none !important; }
}

/* Grab handle for any bottom sheet (visible wherever it is used) */
.kr-grab {
    width: 38px;
    height: 4px;
    border-radius: 2px;
    background: var(--kr-rule);
    margin: 2px auto 10px;
    flex: 0 0 auto;
}

/* Sticky action bar base look (spec 15 .pinned): desktop renders it
   as a plain footer row; mobile pins it (see media block above) */
.kr-actionbar {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    background: var(--kr-paper);
    border-top: 1.5px solid var(--kr-ink);
}

/* Mobile-only helper: hidden on desktop */
@media (min-width: 768px) {
    .kr-m-only { display: none !important; }
}