/* Kolmadia rail shell — Phase 1 navigation redesign.
   Desktop: lets the collapsed icon rail's group flyouts escape the sidebar's
   own clipping box. Mobile: a bottom tab bar replacing the hamburger drawer
   as primary navigation, with a dedicated phone-first More sheet.
   Loaded after next-shell.css so it can extend the collapsed-rail column
   width without fighting that file's own !important rules. */

/* Desktop: let the collapsed rail's per-group flyout (see NavMenu.razor.css)
   render outside the 72px sidebar column instead of being clipped by it. */
/* shell.css sets `.desktop-sidebar { overflow: hidden !important; }`
   unconditionally, so this override must also carry !important — a
   non-!important declaration can never win over an !important one
   regardless of selector specificity or load order, which silently
   defeated this rule and kept every collapsed-rail flyout clipped. */
.app-layout.sidebar-collapsed .desktop-sidebar { overflow: visible !important; }

/* next-shell.css already ships its own pre-existing collapsed-rail rules
   (.sidebar-collapsed .nav-menu .nav-item { padding:0 !important;
   font-size:0 !important; }) written for a plain icon-only column with no
   flyout. Those rules were never scoped to exclude content that reveals
   itself inside a flyout, so without an override here every label inside
   the new hover-flyout below would render at font-size:0 with zero
   padding — technically present, but invisible and nearly unclickable.
   Restore full, readable rendering specifically for anything inside the
   flyout panel. Nested module groups remain collapsed until selected so a
   large workspace does not become one unstructured scrolling wall. */
.app-layout.sidebar-collapsed .nav-vertical .nav-group-links .nav-item,
.app-layout.sidebar-collapsed .nav-vertical .nav-group-links .nav-link {
    padding: 0 10px 0 34px !important;
    font-size: .77rem !important;
    justify-content: flex-start !important;
}
.app-layout.sidebar-collapsed .nav-vertical .nav-group-links .nav-item::before,
.app-layout.sidebar-collapsed .nav-vertical .nav-group-links .nav-link::before {
    position: absolute !important;
    left: 13px !important;
}
.app-layout.sidebar-collapsed .nav-vertical .nav-group-links .nav-item-icon {
    font-size: .95rem !important;
}
.app-layout.sidebar-collapsed .nav-vertical .nav-group-links .nav-module-links { display: none !important; }
.app-layout.sidebar-collapsed .nav-vertical .nav-group-links .nav-module-menu.open > .nav-module-links,
.app-layout.sidebar-collapsed .nav-vertical .nav-group-links .nav-module-menu.search-open > .nav-module-links { display: grid !important; }
.app-layout.sidebar-collapsed .nav-vertical .nav-group-links .nav-module-toggle { display: block !important; }

/* The per-item icon spans (NavMenu.razor) make the small square/round
   bullet next-shell.css draws before every nav-item redundant wherever
   both are present — two markers for the same row reads as clutter, not
   hierarchy. Only items that actually have an icon lose their bullet;
   the deeper nav-subitem rows (no icon) keep theirs unchanged. */
.nav-menu .nav-item:has(.nav-item-icon)::before,
.nav-menu .nav-link:has(.nav-item-icon)::before { display: none !important; }

/* Bottom tab bar: hidden by default (desktop), shown only at the same
   900px breakpoint next-shell.css/shell.css already use for the mobile
   off-canvas drawer, so there is no dead zone between the two nav modes. */
.mobile-tab-bar { display: none; }

@media (max-width: 900px) {
    /* This final shell layer intentionally replaces shell.css's old left
       drawer and next-shell.css's 282px width. Keep the declarations here
       because both legacy files load after the component-scoped stylesheet. */
    .mobile-menu-panel {
        inset: auto 0 calc(58px + env(safe-area-inset-bottom)) 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: min(78dvh, 700px) !important;
        border-radius: 20px 20px 0 0 !important;
        box-shadow: 0 -18px 54px rgba(0, 0, 0, .32) !important;
        transform: translateY(calc(100% + 12px)) !important;
    }
    .mobile-menu-panel.open { transform: translateY(0) !important; }

    /* The More sheet's own content (grabber, quick-utility row, grouped
       destination list, support footer) is a phone-only structure with no
       equivalent in the legacy drawer this file replaces above, so — unlike
       the panel shell itself — none of the older stylesheets style it at
       all. Without this it rendered as unstyled buttons and divs stacked
       edge to edge. */
    .mobile-menu-grabber {
        width: 36px;
        height: 4px;
        margin: 8px auto 0;
        border-radius: 999px;
        background: rgba(255, 255, 255, .22);
        flex: 0 0 auto;
    }
    .mobile-menu-panel { display: flex !important; flex-direction: column !important; }
    .mobile-menu-header { flex: 0 0 auto !important; }
    .mobile-menu-header > div { display: flex; flex-direction: column; gap: 1px; }
    .mobile-menu-header > div > span:first-child { font-size: .7rem; color: rgba(255, 255, 255, .55); text-transform: uppercase; letter-spacing: .04em; }
    .mobile-menu-header > div > strong { font-size: 1rem; color: #fff; }
    .mobile-menu-close { border-radius: 50%; width: 34px; height: 34px; display: grid; place-items: center; }
    .mobile-menu-close:hover { background: rgba(255, 255, 255, .1); }

    .mobile-more-utilities {
        flex: 0 0 auto;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        padding: 12px 14px;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
    }
    .mobile-more-utilities button {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        padding: 10px 4px;
        border: 0;
        border-radius: 12px;
        background: rgba(255, 255, 255, .06);
        color: rgba(255, 255, 255, .85);
        font: inherit;
        cursor: pointer;
    }
    .mobile-more-utilities button b { font-size: 1.05rem; font-weight: 400; }
    .mobile-more-utilities button span { font-size: .68rem; font-weight: 600; }
    .mobile-more-utilities button em {
        position: absolute;
        top: 4px; right: 10px;
        min-width: 15px; height: 15px;
        padding: 0 3px;
        border-radius: 999px;
        background: var(--km2-danger);
        color: #fff;
        font: 700 .6rem/15px system-ui, sans-serif;
        font-style: normal;
        text-align: center;
    }

    .mobile-more-destinations {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        padding: 6px 0 calc(14px + env(safe-area-inset-bottom));
    }
    .mobile-more-destinations section { padding: 10px 14px 4px; }
    .mobile-more-destinations h3 {
        margin: 0 0 4px;
        font-size: .68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: rgba(255, 255, 255, .45);
    }
    .mobile-more-destinations section > div { display: flex; flex-direction: column; gap: 2px; }
    .mobile-more-destinations button {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 10px 6px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: #fff;
        text-align: left;
        font: inherit;
        cursor: pointer;
    }
    .mobile-more-destinations button:active,
    .mobile-more-destinations button.current { background: rgba(255, 255, 255, .08); }
    .mobile-more-destinations button b { flex: 0 0 20px; font-size: 1rem; font-weight: 400; text-align: center; }
    .mobile-more-destinations button span { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
    .mobile-more-destinations button span strong { font-size: .85rem; font-weight: 600; }
    .mobile-more-destinations button span small { font-size: .72rem; color: rgba(255, 255, 255, .55); }
    .mobile-more-destinations button i { flex: 0 0 auto; color: rgba(255, 255, 255, .4); font-style: normal; }

    .mobile-more-support {
        display: flex;
        flex-direction: column;
        gap: 2px;
        margin-top: 6px;
        padding: 10px 14px calc(14px + env(safe-area-inset-bottom));
        border-top: 1px solid rgba(255, 255, 255, .08);
    }
    .mobile-more-support a,
    .mobile-more-support button {
        padding: 9px 6px;
        border: 0;
        background: transparent;
        color: rgba(255, 255, 255, .75);
        text-align: left;
        text-decoration: none;
        font: inherit;
        font-size: .82rem;
        cursor: pointer;
    }

    /* "Create new" was a 280px dropdown pinned under the top-right icon
       button at every viewport — reachable with two thumbs at best on a
       phone, and not the "action sheet" this shell's other overlays use.
       Give it the same bottom-sheet treatment and scrim as the More menu. */
    .create-menu-backdrop {
        position: fixed;
        inset: 0;
        z-index: 96;
        background: rgba(9, 25, 19, .5);
    }
    .create-menu {
        position: fixed !important;
        inset: auto 0 calc(58px + env(safe-area-inset-bottom)) 0 !important;
        top: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        box-shadow: 0 -18px 54px rgba(0, 0, 0, .32) !important;
        padding: 10px 10px calc(10px + env(safe-area-inset-bottom)) !important;
        z-index: 97 !important;
        max-height: min(70dvh, 560px);
        overflow-y: auto;
    }
    .create-menu::before {
        content: "";
        display: block;
        width: 36px;
        height: 4px;
        margin: 2px auto 10px;
        border-radius: 999px;
        background: var(--km2-border-strong);
    }

    .mobile-tab-bar {
        display: flex;
        align-items: stretch;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        height: 58px;
        padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
        background: var(--km2-sidebar);
        border-top: 1px solid rgba(255, 255, 255, .08);
        box-shadow: 0 -10px 30px rgba(0, 0, 0, .28);
        z-index: 95;
    }
    .mobile-tab-item {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        border: 0;
        border-radius: 10px;
        margin: 3px 2px;
        background: transparent;
        color: rgba(255, 255, 255, .62);
        text-decoration: none;
        font: inherit;
        cursor: pointer;
    }
    .mobile-tab-item span { font-size: 1.15rem; line-height: 1; }
    .mobile-tab-item small { font-size: .62rem; font-weight: 700; letter-spacing: .01em; }
    .mobile-tab-item.active,
    .mobile-tab-item[aria-expanded="true"] { color: #fff; background: rgba(255, 255, 255, .08); }

    /* The "More" drawer's overlay only covers the drawer's own width
       (min(310px, 88vw)) plus a separate backdrop layered under the tab
       bar's own z-index; without this, the tab bar's rightmost buttons —
       whichever fall outside the drawer's width — stayed visible and
       clickable above the dimmed backdrop while the drawer was open,
       which read as "tapping something does nothing" when it silently
       re-toggled the drawer shut instead of navigating anywhere. */
    .mobile-tab-bar.menu-open { pointer-events: none; z-index: 110; }
    .mobile-tab-bar.menu-open .mobile-tab-more { pointer-events: auto; }

    /* Keep the app behind the More sheet still, and make every page hand its
       width down to children instead of letting one desktop-sized grid widen
       the phone viewport. Dense ledgers retain their own horizontal scroller. */
    .app-layout.mobile-menu-active { height: 100dvh; overflow: hidden; }
    .app-layout,
    .app-layout .workspace,
    .app-layout .page-content { width: 100%; max-width: 100%; min-width: 0; overflow-x: clip; }
    .app-layout .page-content > * { max-width: 100%; min-width: 0; box-sizing: border-box; }
    .app-layout .page-content :is(section, article, div, form, header, footer) { min-width: 0; }
    .app-layout .page-content :is(
        .table-wrap, .table-scroll, .ticket-table, .ledger-table,
        .employee-ledger, .labor-detail-table, .inventory-table-wrap,
        .users-table-wrap, .logistics-table, .helpguide-table-wrap
    ) { width: 100%; max-width: 100%; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }

    /* Reserve room for the fixed tab bar and keep the existing floating
       reminder/help buttons above it instead of overlapping it. */
    .page-content { padding-bottom: calc(78px + env(safe-area-inset-bottom)) !important; }
    /* Phone utilities live inside More; floating circles covered filters and
       row actions on small screens. Desktop keeps both launchers unchanged. */
    .page-help-button,
    .dashboard-reminder-launcher { display: none !important; }
}