/* DEV-877: touch and narrow-screen layer, loaded last by _Layout, _AuthLayout and _LayoutEmpty.
   Width rules use the Bootstrap breakpoints; touch-only rules sit under (pointer: coarse), so a desktop with a mouse
   keeps today's density. */

/* ── Navigation: the hamburger opens Fillow's overlay sidebar below 1024px ─────────────────────────────────── */
@media (max-width: 1023.98px) {
    .nav-control { display: block !important; }   /* _sidebar.scss hides it for every width */
}

/* ── Tablets (768-1023): Fillow's "mini" rail cannot work without the icons Animo hides, so it took 238px of a
      768px screen. Hide it like the phone overlay; the hamburger slides it in. ───────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023.98px) {
    [data-sidebar-style="mini"] .dlabnav { left: -100%; width: 17rem; transition: left .2s ease; }
    [data-sidebar-style="mini"] .menu-toggle .dlabnav { left: 0; }
    [data-sidebar-style="mini"] .content-body,
    [data-sidebar-style="mini"] .footer { margin-left: 0; }
    [data-sidebar-style="mini"] .nav-header .nav-control { z-index: 9999; }   /* Fillow mini sends it behind (-1) */
    [data-sidebar-style="mini"] .nav-header .nav-control .hamburger { display: block; left: auto !important; }
}

/* ── Header below 1024px: logo + hamburger in a 9rem block, the account controls fit the rest ─────────────── */
@media (max-width: 1023.98px) {
    [data-sidebar-style] .nav-header { width: 9rem; }
    .nav-header .brand-logo { overflow: hidden; padding-left: 14px; justify-content: flex-start; }
    .nav-header .brand-logo img { max-width: 60px; height: auto; }
    .nav-header .nav-control { right: 0; }
    [data-sidebar-style] .header { padding-left: 9rem; }
    [data-sidebar-style] .header .header-content { padding-left: 0; }
}
@media (max-width: 575.98px) {
    #animoUserSegment .ws-name, #animoUserSegment .ws-header-arrow { display: none; }   /* the house icon stays */
}

/* ── DEV-875 phone path pages ─────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .setup-head { flex-wrap: wrap; padding: 16px; }          /* /status: the "Ready" time drops under the title */
    .setup-head__side { flex: 1 1 100%; padding-top: 0; }
}

/* The closed drill-down drawer waits just off the right edge; its shadow showed as a grey strip on narrow screens. */
.animo-drawer:not(.open) { box-shadow: none; }

/* Header "Getting started" menu is 440px wide (inline style in GettingStarted/Default.cshtml). */
.dropdown-menu.ns-menu { max-width: calc(100vw - 24px); }

/* 100vh runs under the mobile browser bars; dvh is the visible height (browsers without it keep the vh line). */
.drawer { height: 100dvh; }
.billing-paymodal { max-height: calc(100dvh - 48px); }

/* ── iOS zooms into a focused field under 16px ───────────────────────────────────────────────────────────── */
@media (pointer: coarse) {
    /* :is() takes its strongest argument's specificity, so this also beats "!important" rules like the filter bar's 0.8rem */
    :root :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]),
              select, textarea, .form-control, .form-select) { font-size: 16px !important; }
}

/* ── Tap targets: 44px on touch screens ───────────────────────────────────────────────────────────────────── */
@media (pointer: coarse) {
    .btn, .form-select, .as-btn-sm, [role=button] { min-height: 44px; }
    .animo-sidebar .sb-item, .animo-sidebar .sb-sub-item { min-height: 44px; }
}