/* FloorTalk PREVIEW UX layer (2026-09-28). Every block is scoped to a feature class on <html>
   (set by ux.js from /api/features), so each item can be promoted or switched off on its own.
   Tokens follow /workspace/company/PREMIUM_DARK_UI.md. Nothing here hides SOS or emergency UI. */

:root {
  --surface: #18181b; --surface-raised: #1f1f23; --surface-inset: #111113;
  --text-subtle: #d4d4d8; --text-on-accent: #042f2e; --border-strong: #3f3f46; --focus-ring: #2dd4bf;
  --status-green: #22c55e; --status-red: #ef4444; --status-amber: #f59e0b;
  --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px;
  --shadow-popover: 0 16px 40px rgb(0 0 0 / 35%);
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px;
  --font-sans: Inter, system-ui, sans-serif; /* short stack: long fallback lists cost ~150 ms of first layout on some Linux/Android font setups; system-ui already resolves to SF / Roboto / Segoe UI */
  --rail-w: 232px;
}

/* ---------- UX-40..45 polish (flag ux_polish) ---------- */
.ftf-ux_polish body { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; line-height: 1.5; }
.ftf-ux_polish .hub-greet h2 { font-size: 24px; line-height: 1.25; font-weight: 650; letter-spacing: -0.02em; margin: 0 0 2px; }
.ftf-ux_polish .card h2 { font-size: 18px; line-height: 1.35; }
.ftf-ux_polish .card h3 { font-size: 14px; }
.ftf-ux_polish .muted { line-height: 1.4; }
.ftf-ux_polish .stat .n, .ftf-ux_polish .ux-kpi .n, .ftf-ux_polish time, .ftf-ux_polish .tnum { font-variant-numeric: tabular-nums; }
.ftf-ux_polish .card { border-radius: var(--radius-lg); background: var(--surface); }
.ftf-ux_polish .screen { padding: var(--space-4); }
.ftf-ux_polish .hub-section { margin-bottom: var(--space-6); }
.ftf-ux_polish .btn { min-height: 44px; }
.ftf-ux_polish .chip { min-height: 36px; }
.ftf-ux_polish input, .ftf-ux_polish select, .ftf-ux_polish textarea { min-height: 44px; }
.ftf-ux_polish textarea { min-height: 64px; }
/* flat surfaces (guide: no persistent gradients / colored shadows) - state still shown by border + label */
.ftf-ux_polish .hub-card.accent { background: var(--surface); border-color: rgba(45,212,191,.45); }
.ftf-ux_polish .hub-card.danger { background: var(--surface); border-color: rgba(239,68,68,.5); }
.ftf-ux_polish .hub-card:hover { border-color: var(--border-strong); }
.ftf-ux_polish :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 10px; }
.ftf-ux_polish .bottom-nav { background: rgba(24,24,27,.96); }
.ftf-ux_polish .nav-item { font-size: 12px; min-height: 52px; }
/* motion: quiet fade/raise; disabled for reduced motion */
@keyframes uxFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes uxSheet { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes uxPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
.ftf-ux_polish .screen.active { animation: uxFade .18s ease-out both; }
.ftf-ux_polish .modal:not(.hidden) .modal-card, .ftf-ux_polish .ux-sheet:not(.hidden) .ux-sheet-card { animation: uxSheet .2s ease-out both; }
.ftf-ux_polish .hub-card, .ftf-ux_polish .btn, .ftf-ux_polish .nav-item, .ftf-ux_polish .ux-q { transition: background .15s, border-color .15s, transform .1s, color .15s; }
.ftf-ux_polish .btn:active, .ftf-ux_polish .ux-q:active { transform: scale(.98); }
@media (prefers-reduced-motion: reduce) {
  .ftf-ux_polish *, .ftf-ux_polish *::before, .ftf-ux_polish *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* skeleton + empty states */
.ux-skel { display: grid; gap: var(--space-2); }
.ux-skel i { display: block; height: 44px; border-radius: var(--radius-md); background: var(--surface-raised); animation: uxPulse 1.2s ease-in-out infinite; }
.ux-skel i:nth-child(2) { width: 86%; } .ux-skel i:nth-child(3) { width: 64%; }
.ftf-ux_polish .ux-empty { text-align: center; padding: var(--space-5) var(--space-3); color: var(--muted); border: 1px dashed var(--border); border-radius: var(--radius-md); margin: var(--space-2) 0; font-size: 14px; }
.ftf-ux_polish .ux-empty::before { content: "✓"; display: block; font-size: 18px; margin-bottom: 2px; color: var(--text-subtle); }

/* ---------- UX-04..07 navigation (flag ux_nav) ---------- */
.ux-backbar { display: none; }
.ftf-ux_nav .ux-backbar { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); min-height: 44px; position: sticky; top: 0; z-index: 5; background: var(--bg); padding: 2px 0; }
.ux-backbar button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px 0 6px; border-radius: 10px; color: var(--accent); font-weight: 600; font-size: 15px; }
.ux-backbar button:hover { background: rgba(45,212,191,.08); }
.ux-backbar .ux-title { font-size: 18px; font-weight: 650; letter-spacing: -.01em; flex: 1; }
.ux-more-search { display: none; }
.ftf-ux_nav .ux-more-search { display: block; width: 100%; margin: 0 0 var(--space-3); padding: 10px 14px; border-radius: var(--radius-md); background: var(--surface-inset); border: 1px solid var(--border); min-height: 44px; }
.ftf-ux_nav .more-row.ux-hide { display: none; }
/* primary action on the right of modal/sheet action rows, secondary (Cancel) on the left */
.ftf-ux_nav .modal-card .row > .btn-primary, .ftf-ux_nav .modal-card .row > .btn-danger { order: 2; }
.ftf-ux_nav .modal-card .row > .btn:not(.btn-primary):not(.btn-danger) { order: 1; }

/* ---------- UX-03/07/08 quick actions (flag quick_actions) ---------- */
#ft-quick { display: none; }
.ftf-quick_actions #ft-quick { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); margin: 0 0 var(--space-4); }
.ux-q { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 68px; padding: 8px 4px;
  border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--text-subtle); position: relative; }
.ux-q .i { font-size: 20px; line-height: 1; }
.ux-q.sos { border-color: rgba(239,68,68,.7); color: #fecaca; background: #2a1215; }
.ux-q.primary { border-color: rgba(45,212,191,.5); color: var(--text); }
.ux-q .ux-badge { position: absolute; top: 4px; right: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--status-red); color: #fff; font-size: 11px; line-height: 18px; }
.ux-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-4); }
.ux-panel h3 { margin: 0 0 var(--space-2); font-size: 14px; font-weight: 600; color: var(--text-subtle); display: flex; align-items: center; gap: 8px; }
.ux-panel h3 .grow { flex: 1; }
.ux-panel h3 a, .ux-panel h3 button.link { font-size: 13px; color: var(--accent); font-weight: 600; }
.ux-ack-row { display: flex; align-items: center; gap: var(--space-3); padding: 10px 0; border-top: 1px solid var(--border); }
.ux-ack-row:first-of-type { border-top: 0; }
.ux-ack-row .grow { flex: 1; min-width: 0; }
.ux-ack-row .ux-msg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.ux-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 2px 8px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); color: var(--text-subtle); text-transform: uppercase; }
.ux-tag.red { border-color: rgba(239,68,68,.6); color: #fecaca; } .ux-tag.amber { border-color: rgba(245,158,11,.6); color: #fde68a; }
.ux-tag.green { border-color: rgba(34,197,94,.55); color: #bbf7d0; } .ux-tag.gray { color: var(--muted); }
.ux-sheet { position: fixed; inset: 0; z-index: 120; background: rgba(0,0,0,.6); display: flex; align-items: flex-end; justify-content: center; }
.ux-sheet.hidden { display: none; }
.ux-sheet-card { width: 100%; max-width: 560px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: var(--space-4) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom)); box-shadow: var(--shadow-popover); }
.ux-sheet-card h2 { margin: 0 0 var(--space-3); font-size: 18px; }
.ux-chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); margin-bottom: var(--space-3); }
.ux-chip { min-height: 52px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); font-weight: 600; text-align: left; padding: 8px 12px; }
.ux-chip small { display: block; color: var(--muted); font-weight: 450; font-size: 12px; }
.ux-chip.sel { border-color: var(--accent); background: rgba(45,212,191,.1); }
.ux-sheet-actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.ux-sheet-actions .btn { flex: 1; }
.ux-sheet-actions .btn-primary, .ux-sheet-actions .btn-danger { flex: 2; order: 2; }

/* ---------- UX-10/11 dashboard at a glance (flag dashboard_v2) ---------- */
.ux-glance { display: none; }
.ftf-dashboard_v2 .ux-glance { display: block; }
.ux-kpis { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-2); margin-bottom: var(--space-3); }
.ux-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3); text-align: left; min-height: 84px; }
.ux-kpi .n { font-size: 28px; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; }
.ux-kpi .l { font-size: 12px; color: var(--muted); margin-top: 4px; }
.ux-kpi .s { font-size: 12px; color: var(--text-subtle); margin-top: 2px; }
.ux-kpi.red { border-color: rgba(239,68,68,.55); } .ux-kpi.amber { border-color: rgba(245,158,11,.5); } .ux-kpi.green { border-color: rgba(34,197,94,.45); }
button.ux-kpi { width: 100%; }
.ux-lines { display: grid; gap: var(--space-2); }
.ux-line { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-inset); }
.ux-line .nm { font-weight: 600; font-size: 14px; }
.ux-line .meta { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
.ux-bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--surface-raised); overflow: hidden; }
.ux-bar > i { display: block; height: 100%; background: var(--accent); }
.ux-note { font-size: 12px; color: var(--muted); margin-top: var(--space-2); }
.ux-banner { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid rgba(45,212,191,.45); background: var(--surface); margin: 0 0 var(--space-4); }
.ux-banner .grow { flex: 1; } .ux-banner strong { display: block; }
.ux-banner.red { border-color: rgba(239,68,68,.6); }

/* ---------- Shifts / schedule screen ---------- */
.ux-tabs { display: flex; gap: 6px; overflow-x: auto; margin: 0 0 var(--space-3); padding-bottom: 2px; scrollbar-width: none; }
.ux-tabs button { flex: 0 0 auto; min-height: 40px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid var(--border); color: var(--muted); font-weight: 600; font-size: 14px; }
.ux-tabs button.on { color: var(--text-on-accent); background: var(--accent); border-color: var(--accent); }
.sch-day { margin-bottom: var(--space-3); }
.sch-day h4 { margin: 0 0 6px; font-size: 13px; color: var(--muted); font-weight: 600; text-transform: none; }
.sch-shift { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 12px; margin-bottom: 8px; background: var(--surface); }
.sch-shift .hd { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.sch-shift .hd strong { flex: 1; }
.sch-people { display: flex; flex-wrap: wrap; gap: 6px; }
.sch-p { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--surface-inset); border: 1px solid var(--border); font-size: 13px; }
.sch-p.me { border-color: var(--accent); }
.sch-p.open { border-style: dashed; color: var(--muted); }
.sch-p button { color: var(--muted); font-size: 14px; min-width: 24px; min-height: 24px; }
.sch-grid { overflow-x: auto; }
.sch-grid table { border-collapse: separate; border-spacing: 4px; min-width: 640px; width: 100%; }
.sch-grid th { font-size: 12px; color: var(--muted); font-weight: 600; text-align: left; padding: 4px; }
.sch-grid td { vertical-align: top; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 6px; font-size: 12px; min-width: 84px; }
.sch-grid td.today { border-color: rgba(45,212,191,.5); }
.sch-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; }
.sch-row .field { flex: 1; min-width: 130px; margin: 0; }
.tl-row { display: grid; grid-template-columns: 110px 1fr; gap: 8px; align-items: center; margin-bottom: 6px; }
.tl-track { position: relative; height: 34px; background: var(--surface-inset); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.tl-seg { position: absolute; top: 3px; bottom: 3px; border-radius: 6px; font-size: 11px; padding: 2px 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background: var(--surface-raised); border: 1px solid var(--border-strong); }
.tl-seg.plan { border-color: rgba(45,212,191,.6); } .tl-seg.chg { border-color: rgba(245,158,11,.7); } .tl-seg.down { border-color: rgba(239,68,68,.7); }
.tl-hours { display: grid; grid-template-columns: 110px 1fr; font-size: 11px; color: var(--muted); }

/* ---------- Onboarding ---------- */
.ob-steps { display: flex; gap: 6px; margin: 0 0 var(--space-4); }
.ob-steps span { flex: 1; height: 4px; border-radius: 2px; background: var(--surface-raised); }
.ob-steps span.done { background: var(--accent); } .ob-steps span.cur { background: rgba(45,212,191,.5); }
.ob-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); }
.ob-card h2 { font-size: 24px; margin: 0 0 4px; } .ob-card .lead { color: var(--muted); margin: 0 0 var(--space-4); }
.ob-list { display: grid; gap: 8px; margin: 0 0 var(--space-3); }
.ob-item { display: flex; gap: 6px; align-items: center; min-width: 0; }
.ob-item > input, .ob-item > select { flex: 1 1 0; min-width: 0; width: auto; }
.ob-item > select { flex: 0 0 84px; }
.ob-item > input + select + select + select { flex: 0 0 64px; }
.ob-item > .btn { flex: 0 0 44px; padding: 0; }
@media (max-width: 480px) { .ob-card { padding: var(--space-4); } }
.ob-pin { font-family: var(--font-mono, monospace); font-size: 20px; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.ob-actions { display: flex; gap: 8px; margin-top: var(--space-4); }
.ob-actions .btn-primary { flex: 2; order: 2; } .ob-actions .btn { flex: 1; }

/* ---------- UX-30..33 wide layout (flag ipad_layout) ---------- */
@media (min-width: 768px) and (max-width: 899px) {
  .ftf-ipad_layout .screen { max-width: 820px; padding: var(--space-5) var(--space-6); }
  .ftf-ipad_layout .hub-grid { grid-template-columns: repeat(3, 1fr); }
  .ftf-ipad_layout .ux-kpis { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (min-width: 900px) {
  .ftf-ipad_layout body:has(#bottom-nav:not(.hidden)) { padding-left: var(--rail-w); padding-bottom: 24px; }
  .ftf-ipad_layout body:has(#bottom-nav:not(.hidden)) .app-header { padding-left: 24px; }
  .ftf-ipad_layout .bottom-nav { top: 0; bottom: 0; right: auto; width: var(--rail-w); flex-direction: column; justify-content: flex-start; gap: 4px;
    padding: 84px 12px 24px; border-top: 0; border-right: 1px solid var(--border); background: var(--surface); }
  .ftf-ipad_layout .nav-item { flex: 0 0 auto; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 12px 14px; font-size: 15px; min-height: 48px; position: relative; }
  .ftf-ipad_layout .nav-item .ico { font-size: 18px; width: 22px; text-align: center; }
  .ftf-ipad_layout .nav-item .nav-badge { position: static; margin-left: auto; }
  .ftf-ipad_layout .screen { max-width: 1200px; padding: var(--space-6) var(--space-8); }
  .ftf-ipad_layout #screen-login { max-width: 520px; }
  .ftf-ipad_layout .hub-grid { grid-template-columns: repeat(4, 1fr); }
  .ftf-ipad_layout .hub-grid.one-col { grid-template-columns: repeat(2, 1fr); }
  .ftf-ipad_layout .ux-kpis { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .ftf-ipad_layout .ux-home-cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-4); align-items: start; }
  .ftf-ipad_layout .ux-glance-cols { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-4); align-items: start; }
  .ftf-ipad_layout #screen-dashboard > .card, .ftf-ipad_layout #screen-dashboard > .stat-grid { break-inside: avoid; }
  .ftf-ipad_layout #screen-alerts.active { display: grid; grid-template-columns: minmax(320px, 1fr) 1.4fr; gap: var(--space-4); align-items: start; }
  .ftf-ipad_layout #screen-alerts.active > .ux-backbar { grid-column: 1 / -1; }
  .ftf-ipad_layout #screen-alerts .card { margin: 0; }
  .ftf-ipad_layout .more-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .ftf-ipad_layout #ft-quick { grid-template-columns: repeat(5, minmax(0, 160px)); }
  /* two-pane channels: list stays visible beside the open thread */
  .ftf-ipad_layout #screen-channels.active:has(#chat-thread:not(.hidden)) { display: grid; grid-template-columns: 320px 1fr; gap: var(--space-4); }
  .ftf-ipad_layout #screen-channels.active:has(#chat-thread:not(.hidden)) #ai-monitor-banner { grid-column: 1 / -1; }
  .ftf-ipad_layout #screen-channels.active:has(#chat-thread:not(.hidden)) #chat-home { display: block !important; }
  .ftf-ipad_layout #screen-channels.active:has(#chat-thread:not(.hidden)) #chat-back { display: none; }
  .ftf-ipad_layout .ux-sheet { align-items: center; }
  .ftf-ipad_layout .ux-sheet-card { border-radius: var(--radius-lg); }
  /* SOS stays bottom-right and above everything; mini emergency banners stay full width */
  .ftf-ipad_layout .emergency-fab { right: 28px; bottom: 28px; }
  .ftf-ipad_layout .toast { left: calc(50% + var(--rail-w) / 2); }
}

/* ---------- UX-14 [FIX] top banners (not flagged: bug fix) ----------
   The live-alert banner, announcement and emergency mini-banners were all sticky at top:57px, so they
   stacked on top of each other and hid the alert's Acknowledge button (see before shots). They now sit in
   normal order at the top; the emergency banner (highest z) is the one that stays pinned while scrolling. */
.alert-banner { top: 0; position: relative; }
.announcement-mini-banner, .emergency-mini-banner { top: 0; }
.alert-banner .msg { background: none; border: 0; padding: 0; border-radius: 0; box-shadow: none; }
/* UX-15 (ux_nav): on Alerts, the list you acknowledge comes first; composing moved below (and to the Home quick sheet) */
.ftf-ux_nav #screen-alerts.active { display: flex; flex-direction: column; }
.ftf-ux_nav #screen-alerts > .ux-backbar { order: 0; }
.ftf-ux_nav #screen-alerts > #alert-compose { order: 2; }
.ftf-ux_nav #screen-alerts > .card:not(#alert-compose) { order: 1; }
@media (min-width: 900px) { .ftf-ipad_layout.ftf-ux_nav #screen-alerts.active { display: grid; } }
.ftf-dashboard_v2 #dash-stats { display: none; } /* replaced by the at-a-glance KPIs */