/* ==========================================================================
   Phone layer: makes the dashboard feel like a native app on phones (≤ 860 px).
   Loaded last; desktop is untouched. Principles: no duplicate navigation, less
   chrome (borders, labels in capitals, big gaps), soft surfaces instead of boxes,
   one clear primary action per screen.
   ========================================================================== */
@media (max-width: 860px) {
  body { font-size: 15px; background: var(--bg); }

  /* ---------------------------------------------------------------- top bar
     The bottom bar has Menu, so no hamburger here; a back arrow only on detail pages
     (shell.js). The bar blends into the page and gets a hairline once scrolled. */
  #sidebar-toggle { display: none !important; }
  .topbar {
    background: var(--bg); border-bottom: 1px solid transparent; box-shadow: none;
    padding-left: 16px; gap: 4px;
    transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
  }
  .topbar.is-scrolled { background: var(--surface); border-bottom-color: var(--border-light); }
  #topbar-back:not(.hidden) { margin-left: -10px; }
  .topbar__title { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }
  .topbar .topbar__btn { border-radius: 50%; }

  .content { padding-top: 4px; }
  .page-head { margin-bottom: 10px; gap: 8px; }
  /* the title moved to the top bar and the subtitle is hidden: drop the empty block it leaves */
  .page-head > div:first-child:not(:has(> :not(h1):not(.muted))) { display: none; }
  /* incident facts: a light list instead of a ruled grid */
  .inc-fact { padding: 12px 16px; border-left: 0 !important; }
  .inc-fact dd { font-size: 15.5px; }
  .table-cards .cardify-toggle__btn { justify-content: center; }
  /* the top bar already has the back arrow */
  .page-head a[href="/incidents/"].small { display: none !important; }

  /* ---------------------------------------------------------------- surfaces
     Soft cards: no hard outline, a faint shadow, rounder corners (iOS / Material 3). */
  .card, .card-item, .table-cards tr, .list-row, .dc, .u-stat {
    border-color: transparent !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 2px rgba(24, 33, 47, 0.04), 0 2px 10px rgba(24, 33, 47, 0.04) !important;
  }
  .card { padding: 16px; }
  html[data-theme="dark"] .card, html[data-theme="dark"] .card-item, html[data-theme="dark"] .table-cards tr,
  html[data-theme="dark"] .list-row, html[data-theme="dark"] .dc, html[data-theme="dark"] .u-stat {
    box-shadow: none !important; border-color: var(--border-light) !important;
  }

  /* Labels in capitals shout on a small screen: quiet sentence case instead. */
  .table-cards td.is-primary::before,
  .table-cards td.cardify-panel td::before,
  .inc-fact dt, .kv dt, .stat .label {
    text-transform: none !important; letter-spacing: 0 !important;
    font-size: 13px !important; font-weight: 500 !important; color: var(--text-3) !important;
  }
  /* "Details" toggle: a quiet full-width row instead of a floating pill */
  .table-cards td.cardify-toggle { padding-top: 10px; margin-top: 8px; border-top: 1px solid var(--border-light); }
  .table-cards .cardify-toggle__btn {
    width: 100%; min-height: 36px; border: 0; background: transparent; color: var(--primary); font-size: 13.5px;
  }

  /* ---------------------------------------------------------------- incident list
     Compact rows with a severity stripe on the left, like a mail inbox. */
  .card-item { position: relative; overflow: hidden; }
  .card-item::before {
    content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0;
    background: var(--text-3);
  }
  .card-item[data-rail="high"]::before { background: var(--danger); }
  .card-item[data-rail="medium"]::before { background: var(--warning); }
  .card-item[data-rail="low"]::before { background: var(--primary); }
  .card-item__body { padding: 12px 14px 12px 16px; }
  .card-item__sev { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 600; }
  .card-item__sev i { display: none; }
  .card-item__title { font-size: 15.5px; }
  .card-item__meta { margin-top: 8px; }
  .chip { height: 34px; border-radius: 999px; }

  /* ---------------------------------------------------------------- incident detail
     Acknowledge and Resolve side by side; Delete is a quiet text action below. */
  .incident-actions:has(.btn-ghost) .btn:not(.btn-ghost) { grid-column: auto !important; }
  .incident-actions .btn-ghost {
    order: 3; grid-column: 1 / -1; min-height: 34px !important; color: var(--danger-text); font-weight: 500;
  }
  .incident-actions .btn { border-radius: 12px; }

  /* ---------------------------------------------------------------- devices summary
     Four small figures in one row instead of four big boxes. */
  .u-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 0 !important; padding: 4px 0;
    background: var(--surface); border-radius: 16px;
    box-shadow: 0 1px 2px rgba(24, 33, 47, 0.04), 0 2px 10px rgba(24, 33, 47, 0.04);
  }
  .u-stat {
    flex-direction: column; align-items: center !important; text-align: center; gap: 2px !important;
    padding: 10px 4px !important; background: transparent !important; box-shadow: none !important;
  }
  .u-stat + .u-stat { border-left: 1px solid var(--border-light) !important; border-radius: 0 !important; }
  .u-stat .u-tile, .u-stat > .icon { display: none !important; }
  .u-stat__num { font-size: 20px; }
  .u-stat__label { font-size: 11.5px; line-height: 1.25; }

  /* ---------------------------------------------------------------- forms & buttons */
  .btn { border-radius: 12px; }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { border-radius: 12px; font-size: 16px; }
  .tabs { border-bottom-color: var(--border-light); }
}

@media (max-width: 860px) {
  /* Overview figures: the title is the row's main text, not a quiet label */
  .ov-kpi .label { color: var(--text) !important; font-size: 14px !important; font-weight: 600 !important; }
}

/* ---------------------------------------------------------------- list cards (tables on phones)
   One app-style row per item, like Google Home or a banking app:
     [icon] Name                          [● Status]
            Microphone Working · Sound −97 dB    ⌄
   Tap anywhere to open the details; actions live inside them. */
@media (max-width: 860px) {
  .table-cards tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "lead status" "meta toggle" "panel panel";
    align-items: center; column-gap: 10px;
    padding: 12px 12px 12px 14px !important; cursor: pointer;
  }
  .table-cards tr > td { width: auto !important; }
  .table-cards td.is-lead { grid-area: lead; padding: 0 !important; text-align: left !important; display: block !important; }
  .table-cards td.is-lead::before, .table-cards td.is-status::before { content: none !important; }
  .table-cards td.is-lead > .cell-value { text-align: left !important; }
  .table-cards td.is-status { grid-area: status; padding: 0 !important; display: block !important; justify-self: end; }
  .table-cards td.is-status > .cell-value { text-align: right; }

  /* the other key facts: one wrapping line of "Label value" pairs under the name */
  .table-cards td.cardify-meta { grid-area: meta; display: block !important; padding: 0 !important; border: 0; min-width: 0; }
  .table-cards tr:has(td.is-lead .u-lead) td.cardify-meta { padding-left: 46px !important; }  /* line up with the name */
  .cardify-meta__inner { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 6px; }
  .table-cards td.is-meta {
    display: inline-flex !important; align-items: center; gap: 5px; width: auto !important;
    padding: 0 !important; border: 0 !important; text-align: left !important; font-size: 12.5px !important;
    color: var(--text-2); min-width: 0;
  }
  .table-cards td.is-meta::before {
    content: attr(data-label) !important; text-transform: none !important; letter-spacing: 0 !important;
    font-size: 12.5px !important; font-weight: 400 !important; color: var(--text-3) !important;
  }
  .table-cards td.is-meta > .cell-value { text-align: left !important; display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
  .table-cards td.is-meta > .cell-value .muted { display: inline !important; }
  .table-cards td.is-meta .u-pill { height: 20px; padding: 0 7px 0 6px; font-size: 11.5px; }
  .table-cards td.is-meta .monitoring-off { margin-top: 0; font-size: 11.5px; padding: 2px 7px; }

  /* details: a small round chevron instead of a "Details" button */
  .table-cards td.cardify-toggle {
    grid-area: toggle; display: block !important; padding: 0 !important; margin: 0 !important; border: 0 !important;
    align-self: end; width: auto !important;
  }
  .table-cards .cardify-toggle__btn {
    width: 30px !important; height: 30px; min-height: 30px !important; padding: 0 !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    border: 0 !important; border-radius: 50% !important; background: var(--surface-3) !important; color: var(--text-2) !important;
    font-size: 0 !important;
  }
  .table-cards .cardify-toggle__btn::after { margin-top: -3px; }
  .table-cards td.cardify-panel { grid-area: panel; }
  .table-cards tr.is-open td.cardify-panel > .cardify-panel__inner { padding-top: 6px; margin-top: 10px; border-top: 1px solid var(--border-light); }
  .table-cards td.cardify-panel td { border-top-style: solid !important; border-top-color: var(--border-light) !important; }
  .table-cards tr:active { background: var(--surface-2); }
}

@media (max-width: 860px) {
  .table-cards td.is-lead { border: 0 !important; }
  .table-cards td.is-lead .u-lead__title { font-size: 15px; }
  /* warnings and multi-part values (e.g. "Speech on · AI on") take a full line, laid out in a row */
  .cardify-note { flex-basis: 100%; }
  .cardify-note .monitoring-off { display: inline-flex !important; margin: 0 !important; font-size: 12px; padding: 3px 8px; border-radius: 8px; }
  .table-cards td.is-meta:has(.thr, .row) { flex-basis: 100%; }
  .table-cards td.is-meta .thr { flex-direction: row !important; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
  .table-cards td.is-meta .row { justify-content: flex-start !important; gap: 4px !important; }
}

/* ---------------------------------------------------------------- forms and sheets
   Field text in proportion to its label, like native forms (iOS zoom-on-focus is turned off in the
   viewport tag, so fields no longer need 16 px text; pinch zoom still works). */
@media (max-width: 860px) {
  input:not([type="checkbox"]):not([type="radio"]), select, textarea {
    font-size: 14.5px !important; height: 42px; padding-inline: 12px; border-radius: 10px;
  }
  textarea { height: auto !important; padding-block: 9px; }
  input::placeholder, textarea::placeholder { color: var(--text-3); opacity: 1; }
  .field { gap: 5px; margin-top: 12px; }
  .field > label, .field > span:first-child, .field .label, label.field { font-size: 13px; font-weight: 500; color: var(--text-2); }
  .field .hint, .modal .muted.small, .modal p.muted { font-size: 12px; line-height: 1.45; }
  .modal h2, .modal h3, .modal-head__title, .sheet__title { font-size: 17px !important; }
  .modal h3, .modal h4 { font-size: 14.5px !important; }
  .modal table { font-size: 13px; }
  .modal table th { font-size: 11.5px; font-weight: 500; color: var(--text-3); text-transform: none; letter-spacing: 0; }
  .modal table td, .modal table th { padding: 9px 8px; }
  .modal .btn { height: 44px; font-size: 14.5px; }

  /* Settings devices: "Speech off · AI off" chips in one row, no extra "Monitoring" label */
  .table-cards td.is-meta:has(.thr) { width: 100% !important; }
  .table-cards td.is-meta:has(.thr)::before { content: none !important; }
  .table-cards td.is-meta:has(.thr) > .cell-value { flex: 1; min-width: 0; }
  .table-cards td.is-meta .thr > .row, .table-cards td.is-meta .thr > span { flex-wrap: nowrap; }
}

/* ---------------------------------------------------------------- one surface per card
   The desktop "row hover" shading stuck on tapped cards (touch keeps :hover), greying some cells.
   Every part of a card now shares the card's own background; a tap gives a brief press tint only. */
@media (max-width: 860px) {
  .table-cards tr, .table-cards tr:hover, .table-cards tr:active { background: var(--surface) !important; }
  .table-cards td, .table-cards tr:hover td, .table-cards td td, .table-cards tr:hover td td { background: transparent !important; }
  .table-cards tr { transition: box-shadow var(--dur-fast) var(--ease-out); }
  .table-cards tr:active { box-shadow: 0 0 0 2px var(--primary-soft) !important; }

  /* expanded details: a light, evenly spaced list; actions on the right */
  .table-cards tr.is-open td.cardify-panel > .cardify-panel__inner { padding-top: 2px; margin-top: 12px; }
  .table-cards td.cardify-panel td {
    align-items: center !important; padding: 10px 0 !important; margin-top: 0 !important; font-size: 13.5px !important;
  }
  .table-cards td.cardify-panel td:last-child { padding-bottom: 0 !important; }
  .table-cards td.cardify-panel td::before { font-size: 13px !important; }
  .table-cards td.cardify-panel .act-chip { font-size: 13px; padding: 3px 8px; border-radius: 8px; }
  .table-cards td.cardify-panel .btn { height: 36px; min-height: 36px; padding-inline: 14px; border-radius: 10px; font-size: 13.5px; }
  .table-cards tr.is-open .cardify-toggle__btn { background: var(--primary-soft) !important; color: var(--primary) !important; }
}
@media (max-width: 860px) {
  .table-cards td.cardify-panel td:first-child { border-top: 0 !important; }
}

/* the details chevron sits in the header next to the status, so the info line below gets the full width */
@media (max-width: 860px) {
  .table-cards tr {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    grid-template-areas: "lead status toggle" "meta meta meta" "panel panel panel" !important;
  }
  .table-cards td.cardify-toggle { align-self: center !important; }
  .table-cards .cardify-toggle__btn { width: 28px !important; height: 28px; min-height: 28px !important; }
  .table-cards td.cardify-meta { padding-right: 0 !important; }
}

/* ---------------------------------------------------------------- incident cards, premium
     [icon]  Escalating complaint                     4d ago
             New Device · Luxe by Lotels
             The customer is complaining about unclean…
             ● Open   Medium priority                   ⌄
   The tinted icon carries the priority colour, so the stripe is not needed. */
@media (max-width: 860px) {
  .card-item::before { display: none; }
  .card-item { --ci-c: var(--primary); --ci-soft: var(--primary-soft); }
  .card-item[data-rail="high"] { --ci-c: var(--danger); --ci-soft: var(--danger-soft); }
  .card-item[data-rail="medium"] { --ci-c: var(--warning); --ci-soft: var(--warning-soft); }
  .card-item__body--rich { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 14px 14px 12px !important; }
  .card-item__icon {
    width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--ci-soft); color: var(--ci-c);
  }
  .card-item__main { min-width: 0; }
  .card-item__body--rich .card-item__top { margin: 0; align-items: baseline; }
  .card-item__body--rich .card-item__title {
    font-size: 15.5px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.3;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .card-item__body--rich .card-item__time { font-size: 12px; color: var(--text-3); flex: none; }
  .card-item__body--rich .card-item__sub { margin-top: 1px; font-size: 13px; color: var(--text-3); }
  .card-item__body--rich .card-item__summary { margin-top: 8px; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
  .card-item__body--rich .card-item__meta {
    margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-light); gap: 6px;
  }
  .card-item__prio { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px;
    font-size: 12px; font-weight: 600; background: var(--surface-3); color: var(--text-2); }
  .card-item__prio--high { color: var(--danger-text); }
  .card-item__prio--medium { color: var(--warning-text); }
  .card-item__body--rich .card-item__handled { font-size: 12px; }
  .card-item__body--rich .card-item__chev { width: 8px; height: 8px; margin-right: 4px; }
  .card-item.is-open { box-shadow: 0 0 0 1.5px var(--ci-soft), 0 6px 18px rgba(24, 33, 47, 0.08) !important; }
}

/* ---------------------------------------------------------------- live listening (Devices page)
   Phones: a centred dialog over a blurred, dimmed page that does not scroll behind it. */
.listen-backdrop { display: none; }
@media (max-width: 860px) {
  html.listen-modal, html.listen-modal body { overflow: hidden !important; overscroll-behavior: none; }
  html.listen-modal .listen-backdrop {
    display: block; position: fixed; inset: 0; z-index: 67;
    background: rgba(24, 33, 47, 0.35);
    -webkit-backdrop-filter: blur(6px) saturate(120%); backdrop-filter: blur(6px) saturate(120%);
    touch-action: none; animation: listen-fade var(--dur-base, 180ms) ease-out;
  }
  html.listen-modal .listen-dock {
    top: 50% !important; bottom: auto !important; left: 50% !important; right: auto !important;
    transform: translate(-50%, -50%) !important; margin: 0 !important;
    width: min(400px, calc(100vw - 32px)) !important;
    max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain;
    border-radius: 20px; animation: listen-pop var(--dur-slow, 260ms) var(--ease-out, ease-out);
  }
  html.listen-modal .listen-dock .lpx { border-radius: 20px; box-shadow: 0 20px 50px rgba(24, 33, 47, 0.25); }
  html.listen-modal .bottom-nav { pointer-events: none; }
}
@keyframes listen-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes listen-pop { from { opacity: 0; transform: translate(-50%, -46%) scale(.97); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  html.listen-modal .listen-backdrop, html.listen-modal .listen-dock { animation: none; }
}

/* Reports: the small breakdown tables fit the screen (no sideways scroll); long names wrap */
@media (max-width: 860px) {
  .table-scroll.table-fit { overflow-x: visible; }
  .table-fit th:first-child, .table-fit td:first-child { position: static; box-shadow: none; overflow-wrap: anywhere; }
  .table-fit th, .table-fit td { padding: 10px 8px; font-size: 13.5px; }
  .table-fit th { font-size: 12px; font-weight: 500; color: var(--text-3); text-transform: none; letter-spacing: 0; white-space: nowrap; }
  .table-fit th:first-child, .table-fit td:first-child { padding-left: 0; }
  .table-fit th:last-child, .table-fit td:last-child { padding-right: 0; }
  .table-fit + .swipe-hint, .card:has(.table-fit) .swipe-hint { display: none !important; }
}
@media (max-width: 860px) {
  .table-fit thead th { background: transparent !important; }
}

/* Incident actions: the main buttons always share the full width (Acknowledge | Resolve, or Resolve alone
   once acknowledged, or Reopen once closed); Delete stays a quiet text action on its own line. */
@media (max-width: 860px) {
  .incident-actions { display: flex !important; flex-wrap: wrap; gap: 8px; }
  .incident-actions .btn:not(.btn-ghost) { flex: 1 1 0; min-width: 0; grid-column: auto !important; }
  .incident-actions .btn-ghost { flex: 1 0 100%; order: 3; }
}

/* ---------------------------------------------------------------- toasts on phones (≤860)
   Like a phone's own notifications: at the top, under the top bar, sliding down; swipe away. */
@media (max-width: 860px) {
  .toasts {
    top: calc(var(--safe-top) + var(--topbar-h-sm) + 8px); bottom: auto;
    left: 50%; right: auto; transform: translateX(-50%);
    width: min(480px, calc(100vw - 24px));
  }
  .toast {
    padding: 12px 36px 12px 14px; font-size: 14px;
    animation: toast-drop .26s cubic-bezier(.16, 1, .3, 1) both;
    touch-action: pan-y; user-select: none;
  }
  .toast .toast-close { top: 6px; right: 6px; padding: 8px; }  /* a finger-sized target */
  .toast.is-leaving { transform: translateY(-8px); }
  .toast.is-swiping { animation: none; transition: none; }
}
@keyframes toast-drop {
  from { transform: translateY(-14px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ---------------------------------------------------------------- notifications panel on phones
   Drops down from the bell under the top bar, which stays visible; pushed back up (or the bell,
   the dimmed page, Esc) closes it. */
.sheet-root--top { top: calc(var(--safe-top) + var(--topbar-h-sm)); }
.sheet.sheet--top {
  top: 0; bottom: auto; left: 0; right: 0;
  height: auto; max-height: calc(100dvh - var(--safe-top) - var(--topbar-h-sm) - 48px);
  border: none; border-bottom: 1px solid var(--border);
  border-radius: 0 0 var(--sheet-radius) var(--sheet-radius);
  padding-bottom: 0;
  transform: translateY(-105%); opacity: 0;
  transition: transform .26s cubic-bezier(.16, 1, .3, 1), opacity .18s ease;
}
.sheet.sheet--top.is-open { transform: translateY(0); opacity: 1; }
.sheet.sheet--top.is-dragging { transition: none; }
.sheet--top .sheet__head { justify-content: flex-start; padding: 14px 16px 10px; border-bottom: 1px solid var(--border); }
.sheet--top .sheet__title { font-size: 17px; }
.sheet--top .sheet__count { margin-left: 8px; padding-top: 2px; font-size: 12.5px; color: var(--text-3); }
.sheet--top .sheet__close { margin-left: auto; }  /* at the right edge, with or without a count */
.sheet--top .sheet__body { padding: 0 16px; }
.sheet--top .sheet__foot {
  flex-shrink: 0; display: block; padding: 13px 16px; text-align: center;
  font-size: 14px; font-weight: 600; color: var(--primary); border-top: 1px solid var(--border);
}
.sheet--top .sheet__foot:active { background: var(--surface-2); text-decoration: none; }
.sheet--top .sheet__handle { margin: 2px auto 8px; }
@media (min-width: 861px) {  /* desktop has its own dropdown; if this shows, keep it by the bell */
  .sheet.sheet--top { left: auto; right: 16px; width: 400px; border-radius: var(--sheet-radius); transform: translateY(-12px); }
}

/* Filters panel from the top: some room under the fields, and a full-width Done button */
.sheet--top .sheet__body > form.filters { padding: 12px 0 4px; }
.sheet--top .sheet__foot--actions { padding: 10px 16px 12px; text-align: initial; }
.sheet--top .sheet__done { width: 100%; height: 44px; justify-content: center; font-size: 15px; }