/* Phones and narrow tablets (ported from the LocalHands admin, AdminLayout).
   Below 960px the sidebar would eat a third of the screen — on a phone all of
   it — so it slides in from the left behind a burger in a top bar.
   Behaviour: navdrawer.js; its NAV_DRAWER_QUERY must match the breakpoint here.
   Loaded last, so these rules win over styles/catalog/customers/team.css. */

/* Above the breakpoint the phone-only bits do not exist. */
.m-topbar, .nav-backdrop, .nav-close { display: none; }

@media (max-width: 960px) {
  /* ── Shell: drawer, backdrop, top bar ─────────────────────────────── */
  .app { display: block; }
  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 1001;
    width: min(300px, 86vw); height: 100vh; height: 100dvh;
    padding: 0 12px calc(14px + env(safe-area-inset-bottom));
    overscroll-behavior: contain;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 240ms cubic-bezier(0.2, 0.7, 0.3, 1), visibility 0s linear 240ms;
  }
  html.nav-open .sidebar {
    transform: none;
    visibility: visible;
    transition: transform 240ms cubic-bezier(0.2, 0.7, 0.3, 1);
    box-shadow: 0 0 40px rgba(20, 26, 44, 0.35);
  }
  .nav-backdrop {
    display: block; position: fixed; inset: 0; z-index: 1000;
    background: rgba(35, 44, 69, 0.5);
    opacity: 0; visibility: hidden;
    transition: opacity 200ms ease, visibility 0s linear 200ms;
  }
  html.nav-open .nav-backdrop { opacity: 1; visibility: visible; transition: opacity 200ms ease; }
  html.nav-open, html.nav-open body { overflow: hidden; }

  /* Drawer head stays put while the long section list scrolls. */
  .brand-row {
    position: sticky; top: 0; z-index: 1;
    margin: 0 -12px; padding: calc(12px + env(safe-area-inset-top)) 12px 8px 20px;
    background: var(--sidebar-bg);
  }
  .nav-close {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 40px; height: 40px; margin-left: 4px;
    border: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.08); color: #fff; cursor: pointer;
  }
  .nav-close svg, .m-burger svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  .nav-close:active { background: rgba(255, 255, 255, 0.16); }
  .env-badge { margin-left: auto; }

  /* Finger-sized rows; the rail's «short screen» squeeze does not apply. */
  .sidebar nav { gap: 12px; }
  .nav-item, .sidebar .nav-item { padding: 11px 12px; font-size: 15.5px; }
  .nav-label { padding: 8px 12px 3px; font-size: 12px; }
  .sidebar-footer { padding: 12px 8px 0; }

  .m-topbar {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; gap: 10px;
    margin: 0 -16px 12px; padding: calc(8px + env(safe-area-inset-top)) 16px 8px;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--divider);
  }
  .m-burger {
    position: relative; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin-left: -4px;
    border: 1px solid var(--stroke); border-radius: 10px;
    background: var(--surface); color: var(--ink); cursor: pointer;
  }
  .m-burger:active { background: var(--elevated); }
  .m-burger-dot {
    position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%;
    background: var(--accent); box-shadow: 0 0 0 2px var(--surface);
  }
  .m-burger:not([data-has-badge]) .m-burger-dot { display: none; }
  .m-title {
    flex: 1; min-width: 0;
    font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .m-env:empty { display: none; }
  .m-env.beta { background: var(--amber-weak); color: var(--amber); }
  .m-env.prod { background: var(--green-weak); color: var(--green); }

  main { padding: 0 16px calc(48px + env(safe-area-inset-bottom)); max-width: none; }

  /* Аня's mood bar: one scrolling line instead of a block of wrapped buttons. */
  .anya-bar { margin: 0 0 10px; justify-content: flex-start; }
  .anya-themes { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .anya-themes-label { display: none; }

  /* ── Tables: scroll in their own box (navdrawer.js → initWideTables) ── */
  main table:not(.fit-table) {
    display: block; max-width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  main table.scroll-table:not(.is-scroll-end) {
    -webkit-mask-image: linear-gradient(to left, transparent 0, black 36px);
    mask-image: linear-gradient(to left, transparent 0, black 36px);
  }
  main pre { max-width: 100%; overflow-x: auto; }
  main img, main video, main iframe { max-width: 100%; }

  /* iOS zooms into any field under 16px on focus and never zooms back. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px !important; }

  /* ── Page heads, filters, segments ─────────────────────────────────── */
  .ct-head { align-items: flex-start; gap: 12px; }
  .ct-head-actions { width: 100%; }
  .view-head { flex-wrap: wrap; align-items: flex-start; }
  .view-head .an-note { text-align: left; max-width: none; }
  .an-bar { flex-direction: column; align-items: stretch; gap: 8px; }
  .an-filters { order: -1; padding-bottom: 0; flex-wrap: wrap; }
  .an-split { grid-template-columns: 1fr; gap: 0; }
  .an-chart-box { height: 220px; }
  .an-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .an-kpis .card { padding: 12px 14px; box-shadow: inset 0 -1px 0 var(--divider), -1px 0 0 var(--divider); }
  .cu-segs, .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .cu-segs::-webkit-scrollbar, .tabs::-webkit-scrollbar, .anya-themes::-webkit-scrollbar { display: none; }
  .cu-seg, .tabs a { flex: none; white-space: nowrap; }
  .cu-filters { flex-wrap: wrap; }
  .cu-filters > * { flex: 1 1 100%; max-width: none; }
  .au-filters select, .au-filters input[type="search"] { flex: 1 1 100%; max-width: none; min-width: 0; }

  /* Settings → roles: the role list becomes a strip of chips above the switches. */
  .ac-roles { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; gap: 6px; }
  .ac-roles h4 { display: none; }
  .ac-role { flex: none; min-width: 168px; }
  .ac-bar { bottom: calc(10px + env(safe-area-inset-bottom)); }

  /* Tooltips hang off hover — on a touch screen they only get in the way. */
  [data-tip]:not(.hint)::after, [data-tip]:not(.hint)::before { display: none; }
  /* «?» hints are tapped, not hovered: the text shows as a strip at the bottom
     of the screen instead of a bubble that runs off the right edge. */
  .hint::after {
    position: fixed; left: 16px; right: 16px; top: auto; bottom: calc(16px + env(safe-area-inset-bottom));
    width: auto; max-width: none; font-size: 13.5px; z-index: 1100;
  }
  .hint::before { display: none; }
}

@media (max-width: 640px) {
  .ct-title, h2 { font-size: 24px; }
  .cu-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .cu-kpi { padding: 10px 12px; }
  .cu-kpis .cu-kpi b { font-size: clamp(20px, 18cqi, 28px); }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  /* Dashboard: alerts stack, tiles two per row, departures lose the badge
     column, the fill bar drops under the name. */
  .dh-alerts { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .dh-alert-n { font-size: 20px; }
  .dh-hero { padding: 16px 14px 12px; border-radius: var(--r-lg); }
  .dh-seg { width: 100%; }
  .dh-seg button { flex: 1; padding: 6px 4px; }
  .dh-tiles { gap: 8px; }
  .dh-tile { flex-direction: column; align-items: stretch; gap: 4px; padding: 10px 11px; }
  .dh-tile-value { font-size: 20px; }
  .dh-tile-sub { white-space: normal; }
  .dh-spark { width: 100%; height: 24px; }
  .dh-fit-full { display: none; }
  .dh-fit-short { display: inline; }
  .dh-chart-card { padding: 10px 6px 6px; }
  .dh-compare { margin-left: 0; }
  .dh-chart, .dh-chart-card .dh-chart { height: 200px; min-height: 0; flex: none; }
  .dh-chart-light { height: 170px; }
  .dh-dep { grid-template-columns: 42px minmax(0, 1fr) 10px; gap: 6px 12px; }
  .dh-dep .dh-chev { grid-column: 3; grid-row: 1; }
  .dh-dep-fill { grid-column: 2; }
  .dh-dep-status { display: none; }
  .dh-dep-date { height: 42px; }
  .dh-base { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dh-base-item { padding: 12px 14px; box-shadow: inset 0 -1px 0 var(--divider), -1px 0 0 var(--divider) !important; }
  .dh-lost-row { grid-template-columns: minmax(0, 104px) minmax(0, 1fr) 22px; }
  .dh-econ { padding: 14px 12px; border-radius: var(--r-lg); }
  .dh-kpis, .dh-kpis-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dh-kpi { padding: 9px 10px; }
  .dh-kpi-value { font-size: 18px; }
  .dh-fc-sums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dh-chart-fc { flex: none; height: 220px; min-height: 0; }
  .dh-deps.has-money .dh-dep { grid-template-columns: 42px minmax(0, 1fr) 10px; }
  .dh-prog { min-width: 0; }
  .dh-revbar, .dh-mbar { display: none; }
  .dh-dep-money { grid-column: 2; flex-direction: row; gap: 8px; align-items: baseline; justify-content: flex-start; }
  .card { padding: 12px 14px; }
  .card .value { font-size: 22px; }
  .panel { padding: 14px; }
  /* Person / staff head: avatar beside the name, everything else under it. */
  .cu-head { align-items: start; gap: 12px 14px; grid-template-columns: 56px minmax(0, 1fr); }
  .cu-ava-xl { width: 56px; height: 56px; font-size: 20px; }
  .cu-title h1 { font-size: 24px; margin-bottom: 8px; }
  .ct-head-actions > * { flex: 1 1 auto; justify-content: center; }

  /* Modals become bottom sheets with room for the thumb. */
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal, .modal.wide, .modal.narrow {
    width: 100% !important; max-height: 94dvh; overflow-y: auto;
    border-radius: 18px 18px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  #confirm-overlay { align-items: flex-end; }
  .modal-head { position: sticky; top: 0; z-index: 1; background: var(--surface); padding: 14px 18px; }
  .modal-body { padding: 16px 18px 22px; }
  .modal-actions { flex-wrap: wrap; }

  /* ── Lists as cards: a row is a card, a cell a «label — value» line ── */
  main table.m-cards, main table.m-cards tbody, main table.m-cards tr { display: block; width: 100%; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  main table.m-cards thead { display: none; }
  main table.m-cards tr { position: relative; padding: 12px 2px; border-bottom: 1px solid var(--divider); }
  main table.m-cards tr:last-child { border-bottom: 0; }
  main table.m-cards td {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 3px 0; border: 0; text-align: right; min-width: 0;
  }
  main table.m-cards td[data-label]::before {
    content: attr(data-label); flex: none; max-width: 46%;
    color: var(--subtle); font-size: 12.5px; font-weight: 500; text-align: left;
  }
  main table.m-cards td:not([data-label]), main table.m-cards td.m-main { display: block; text-align: left; }
  main table.m-cards td.m-main::before { content: none; }
  main table.m-cards td.m-main { padding-bottom: 6px; }
  main table.m-cards td.m-hide, main table.m-cards td:empty { display: none; }
  main table.m-cards td > div { text-align: inherit; }
  main table.m-cards .row-actions { justify-content: flex-start; flex-wrap: wrap; }

  /* Customers and team rows: the tick sits next to the person. */
  .cu-table tr { padding-left: 34px !important; }
  .cu-table.tm-table tr { padding-left: 2px !important; }
  .cu-table td.cu-col-check { position: absolute; left: 4px; top: 22px; padding: 0; }
  .cu-table td.cu-col-check::before { content: none; }
  .cu-places, .cu-wants-sub { max-width: 60vw; }

  .cu-quick { flex-wrap: wrap; }
  .cu-stats { gap: 18px; }
  .pg-actions { flex-wrap: wrap; justify-content: flex-start; }

  /* Program page head (catalog): small cover beside a readable title. */
  .pg-head { grid-template-columns: 56px minmax(0, 1fr); gap: 12px 14px; align-items: start; }
  .pg-cover { width: 56px; height: 56px; border-radius: 14px; }
  .pg-title h1 { font-size: 22px; margin-bottom: 8px; }
  .pg-side { align-items: flex-start; }
  .pg-price { text-align: left; }

  /* Date tickets: date and price on top, the rest underneath, no perforation. */
  .ticket, .ticket-compact { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 12px 14px; }
  .ticket-date { grid-column: 1; grid-row: 1; padding: 0; border-right: 0; align-self: center; }
  .ticket-date::before, .ticket-date::after { display: none; }
  .ticket-price { grid-column: 2; grid-row: 1; padding-top: 0; align-items: flex-end; text-align: right; }
  .ticket-main, .ticket-seats, .ticket-act, .ticket-editor { grid-column: 1 / -1; }
  .ticket-act { justify-content: flex-start; flex-wrap: wrap; padding-top: 0; }
  .ticket-editor { padding: 8px 0 0; }

  /* Old-style sections: toolbars and forms full width. */
  .toolbar > select, .toolbar > input { flex: 1 1 100%; }

  /* People of a departure: number, person, what is still due — the rest is
     one tap away in the person's editor. */
  .pp-tr { grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; padding: 10px 12px; }
  .pp-tr > :nth-child(3), .pp-tr > :nth-child(4), .pp-tr > :nth-child(5) { display: none; }
  .pp-room-add { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .pp-spacer { display: none; }

}

/* Аня's seasonal moods (seasons.css) are laid out around the 236px rail. On a
   phone the rail is a drawer: decorations start at the screen edge, shrink, and
   the ones hung on the mood bar (garland, birthday flags) are clipped to it
   instead of pushing the page sideways. */
@media (max-width: 960px) {
  .anya-bar { overflow-x: clip; }
  .hw-fog, .xm-blanket { left: 0; }
  .hw-pumpkins:not(.hw-pumpkins-right), .xm-trees-left { left: 8px; }
  .hw-pumpkins-right, .xm-trees-right { right: 8px; }
  .pk-1 { width: 60px; } .pk-2 { width: 44px; } .pk-3 { width: 36px; } .pk-4 { width: 52px; }
  .xm-tree-1 { width: 64px; } .xm-tree-2 { width: 46px; } .xm-tree-3 { width: 44px; } .xm-tree-4 { width: 70px; }
  .xm-pillows { display: none; }   /* no room beside the title on a phone: they lay on the text */
  .hw-spider { width: 150px; right: -26px; }
  .bd-balloons { width: 150px; right: -16px; }
  .bd-cake { left: 8px; width: 110px; }
}

/* Chats on a phone work like the phone app: the list, or the open thread with a
   back arrow — never both squeezed side by side. */
@media (max-width: 960px) {
  .chats-layout { grid-template-columns: minmax(0, 1fr); height: calc(100dvh - 150px); min-height: 460px; }
  .chats-layout .chats-thread-panel { display: none; }
  .chats-layout.has-open .chats-list-panel { display: none; }
  .chats-layout.has-open .chats-thread-panel { display: flex; }
  .chat-back { display: grid; }
  #chat-thread .chat-head { padding: 10px 14px; }
  #chat-thread .msg-list { padding: 14px 12px; }
  #chat-thread .chat-composer { padding: 10px 12px 12px; }
  #chat-thread .pinbar { margin: 8px 12px 0; }
  .msg.wide { min-width: 0; }
}

@media (max-width: 960px) and (prefers-reduced-motion: reduce) {
  .sidebar, html.nav-open .sidebar, .nav-backdrop, html.nav-open .nav-backdrop { transition: none; }
}

@media print {
  .m-topbar, .nav-backdrop { display: none !important; }
}

/* ── Заявки v2 on a phone: either the list or the booking, like «Чаты» ── */
@media (max-width: 960px) {
  .bk-inbox { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 520px; scroll-margin-top: 64px; }
  .bk-inbox .bk-card-panel { display: none; padding: 14px 14px 18px; }
  .bk-inbox.has-open .bk-list-panel { display: none; }
  .bk-inbox.has-open .bk-card-panel { display: block; }
  .bk-list-panel { border-right: 0; }
  .bk-inbox .bk-back { display: grid; }
  .bk-board { grid-template-columns: repeat(4, minmax(250px, 82vw)); scroll-snap-type: x mandatory; }
  .bk-col { scroll-snap-align: start; }
  .bk-search { flex: 1 1 0; min-width: 0; }
  .bk-toolbar .seg { flex: 1 1 100%; }
  .bk-toolbar .seg button { flex: 1; }
  .bk-card-head .bk-av { display: none; }
  .bk-card-head { flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .bk-kpis { gap: 8px; }
  .bk-kpi { padding: 10px 12px; }
  .bk-kpi-value { font-size: 28px; }
  /* Only the tile that needs action keeps its explanation on a phone. */
  .bk-kpi:not(.is-hot) .bk-kpi-sub { display: none; }
  .bk-assignee { flex: 1 1 100%; }
  .bk-assignee select { flex: 1; min-width: 0; }
  .bk-contacted { margin-left: 0; }
}