/* Command palette + page fade. Loaded after ui.css. Logical properties only; transform/opacity animations. */
:root{--pal-bg:#fff;--pal-ink:#1c1917;--pal-muted:#57534e;--pal-line:#e7e5e4;--pal-sel:#ecf6f8;--pal-accent:#0e7490;--pal-kbd:#f5f5f4;--pal-scrim:rgba(12,10,9,.48);--pal-shadow:0 24px 70px rgba(12,10,9,.28),0 2px 8px rgba(12,10,9,.12)}
html.dark{--pal-bg:#1a1a1a;--pal-ink:#fafafa;--pal-muted:#a8a8a8;--pal-line:#2e2e2e;--pal-sel:#262626;--pal-accent:#34d399;--pal-kbd:#262626;--pal-scrim:rgba(0,0,0,.62);--pal-shadow:0 24px 70px rgba(0,0,0,.6),0 0 0 1px #2e2e2e}
.pal-back{position:fixed;inset:0;z-index:9500;display:flex;justify-content:center;align-items:flex-start;padding:12vh 16px 16px;background:var(--pal-scrim);opacity:0;transition:opacity 160ms ease}
.pal-back[hidden]{display:none}
.pal-back.pal-in{opacity:1}
.pal{width:min(640px,100%);max-height:min(560px,76vh);display:flex;flex-direction:column;background:var(--pal-bg);color:var(--pal-ink);border:1px solid var(--pal-line);border-radius:16px;box-shadow:var(--pal-shadow);overflow:hidden;transform:scale(.98);opacity:0;transition:transform 160ms cubic-bezier(.16,1,.3,1),opacity 160ms ease;font-family:inherit}
.pal-in .pal{transform:none;opacity:1}
.pal-title,.pal-status{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0;padding:0}
.pal-head{display:flex;align-items:center;gap:12px;padding-inline:18px;border-block-end:1px solid var(--pal-line);flex:none}
.pal-search-ico{color:var(--pal-muted);display:flex;flex:none}
.pal-input{flex:1;min-inline-size:0;block-size:52px;border:0;outline:0;background:transparent;color:var(--pal-ink);font:inherit;font-size:17px;padding:0;box-shadow:none;border-radius:0;inline-size:auto}
.pal-input,.pal-input:focus,.pal-input:focus-visible{outline:0!important;box-shadow:none!important;border:0!important;background:transparent!important}
.pal-input::placeholder{color:var(--pal-muted);opacity:1}
.pal-head:focus-within{box-shadow:inset 0 -2px 0 var(--pal-accent)}
.pal-close{display:none;border:0;background:transparent;color:var(--pal-accent);font:inherit;font-weight:700;font-size:15px;min-block-size:44px;padding-inline:6px;cursor:pointer;border-radius:8px}
.pal-close:focus-visible{outline:2px solid var(--pal-accent);outline-offset:2px}
.pal-list{overflow-y:auto;overscroll-behavior:contain;padding:6px 8px 8px;flex:1;min-block-size:0}
.pal-group{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--pal-muted);padding:12px 10px 6px}
.pal[dir=rtl] .pal-group{letter-spacing:0;text-transform:none;font-size:12.5px}
.pal-opt{display:flex;align-items:center;gap:12px;padding:9px 10px;min-block-size:48px;border-radius:10px;cursor:pointer;color:var(--pal-ink)}
.pal-opt[aria-selected=true]{background:var(--pal-sel);box-shadow:inset 3px 0 0 var(--pal-accent)}
.pal[dir=rtl] .pal-opt[aria-selected=true]{box-shadow:inset -3px 0 0 var(--pal-accent)}
.pal-ico{inline-size:32px;block-size:32px;border-radius:9px;display:grid;place-items:center;flex:none;background:var(--pal-kbd);color:var(--pal-muted)}
.pal-opt[aria-selected=true] .pal-ico{color:var(--pal-accent)}
.pal-ico svg{inline-size:17px;block-size:17px}
.pal-txt{display:flex;flex-direction:column;min-inline-size:0;flex:1;gap:1px}
.pal-label{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pal-sub{font-size:12.5px;color:var(--pal-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pal-hit{color:var(--pal-accent);font-weight:800;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.pal-badge{flex:none;min-width:20px;padding:0 6px;border-radius:999px;background:var(--red,#dc2626);color:#fff;font-size:12px;font-weight:700;line-height:20px;text-align:center}
.pal-kind{font-size:11.5px;color:var(--pal-muted);flex:none}
.pal-enter{font-size:14px;color:var(--pal-muted);inline-size:18px;text-align:center;visibility:hidden;flex:none}
.pal-opt[aria-selected=true] .pal-enter{visibility:visible}
.pal[dir=rtl] .pal-enter{transform:scaleX(-1)}
.pal-empty{padding:34px 16px;text-align:center;color:var(--pal-muted);font-size:14px}
.pal-foot{display:flex;gap:18px;padding:10px 16px;border-block-start:1px solid var(--pal-line);color:var(--pal-muted);font-size:12px;flex:none;flex-wrap:wrap}
.pal-foot span{display:inline-flex;align-items:center;gap:4px}
.pal-foot kbd{font:inherit;font-size:11px;min-inline-size:20px;text-align:center;padding:2px 5px;border-radius:5px;background:var(--pal-kbd);border:1px solid var(--pal-line);color:var(--pal-ink)}
html.pal-open{overflow:hidden}
/* header search button: phones only (the inline search field is hidden there) */
.palette-btn{display:none}
@media(max-width:760px){
  .header-actions .palette-btn{display:inline-flex;align-items:center;justify-content:center}
  .pal-back{padding:0}
  .pal{width:100%;max-height:82vh;max-height:82dvh;border-radius:0 0 16px 16px;border-block-start:0;border-inline:0;transform:translateY(-12px)}
  .pal-in .pal{transform:none}
  .pal-close{display:inline-flex;align-items:center}
  .pal-foot{display:none}
  .pal-input{font-size:16px}
}
/* Page transition: 160ms opacity cross-fade replaces the slide (opacity only) */
@keyframes pal-page-fade{from{opacity:0}to{opacity:1}}
main.view-enter,main.view-enter-back{animation:pal-page-fade 160ms ease-out}
@media(prefers-reduced-motion:reduce){
  .pal-back,.pal{transition:none;transform:none}
  main.view-enter,main.view-enter-back{animation:none}
}

/* ── UI polish (2026-10-06 QA): toasts, sheet footers, mobile header, tap targets, bell, clamps ── */
html:root{--fab-space:96px}
/* Toasts clear the FAB (desktop) and bottom nav (mobile); with a dialog open they move to the top so they never hide its action footer. */
@media(min-width:961px){html:root #toast-root{bottom:96px}}
@media(max-width:960px){html:root #toast-root{bottom:calc(88px + env(safe-area-inset-bottom))}html:root body:has(#modal-root .modal-back) #toast-root{top:calc(12px + env(safe-area-inset-top));bottom:auto}}
/* Bottom-sheet dialogs keep their action buttons visible while the form scrolls. */
@media(max-width:760px){
  html:root .modal .modal-actions:not(.facility-dupe-warn *){position:sticky;bottom:calc(-20px - env(safe-area-inset-bottom));z-index:4;margin:16px -20px calc(-20px - env(safe-area-inset-bottom));padding:12px 20px calc(12px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line)}
  html.crazy:root .modal .modal-actions:not(.facility-dupe-warn *){background:#1a1a26}
  html:root .modal-actions button{min-width:min(max-content,100%);flex:1 1 auto;min-height:44px;padding-block:8px;white-space:normal;line-height:1.2;overflow-wrap:normal;word-break:normal}
}
/* Footer buttons wrap as WHOLE buttons onto a second row; a word is never split mid-word ("Retur n"). */
html:root .modal-actions{flex-wrap:wrap}
html:root .modal-actions button{overflow-wrap:normal;word-break:normal;hyphens:none}
/* Mobile top bar: solid so scrolled content never shows behind the fixed menu button; drawer header clears the button. */
@media(max-width:960px){
  html:root header{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
  html.crazy:root header{background:#0f0f16}
  html:root .side .brand{padding-inline-start:52px}
}
/* Phones: two-row bar. Row 1 = menu button (fixed, left) + actions; row 2 = full-width page title, so the greeting never wraps to 3-4 lines. */
@media(max-width:960px){html:root main{padding-top:0}html:root header{margin-top:0;margin-inline:-17px;padding-inline:17px}}
/* Up to 960px the menu button floats (no sidebar), so every width up to there gets the two-row bar. */
@media(max-width:960px){
  html:root header,html:root .rtl header{margin-inline:-14px;padding:13px 14px 10px;flex-wrap:wrap;row-gap:6px;align-items:center}
  html:root header>div:first-child{order:2;flex:1 1 100%}
  html:root header .header-actions{order:1;margin-inline-start:auto;max-width:none}
  html:root .rtl header>div:first-child{direction:rtl;text-align:start}
}
@media(max-width:380px){html:root header,html:root .rtl header{margin-inline:-10px;padding-inline:10px}}
/* Desktop: the top bar starts at the very top edge (no gap above it that reads as a dark band in the crazy theme). */
@media(min-width:961px){html:root main{padding-top:0}html:root header{margin-top:0;padding-top:40px;margin-inline:-24px;padding-inline:24px}}
@media(min-width:1181px){html:root header{margin-inline:-38px;padding-inline:38px}}
/* Notification bell: icon + corner badge (phones keep it in the Home overdue list / notification panel only: no room in the top bar). */
@media(max-width:520px){html:root .header-actions .bell{display:none}}
html:root .bell{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:0}
.bell .bell-ic{display:inline-flex}.bell .bell-ic svg{width:18px;height:18px}
html:root .bell #notif-dot{position:absolute;top:7px;inset-inline-end:8px;width:10px;height:10px;border-radius:50%;background:var(--warning,#f59e0b);border:2px solid var(--surface);font-size:0;line-height:0;overflow:hidden}
html:root .bell .notif-count{position:absolute;top:-7px;inset-inline-end:-7px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;border:2px solid var(--surface);font-size:12px;line-height:16px;font-weight:700;box-sizing:border-box;text-align:center}
/* Start work: icon plus a short visible label on phones; the pulsing dot detached from the pill is gone (the pill itself turns green). */
.active-shift::before{display:none}
@media(max-width:960px){html:root .shift-pill span{display:inline}}
@media(max-width:520px){
  html:root .shift-pill{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:44px;padding:4px 10px;font-size:12px;line-height:1.1;white-space:nowrap}
  html:root .shift-pill span{font-size:12px}
}
/* Phones / touch: every control is at least 44px. */
@media(max-width:760px),(pointer:coarse){
  html:root .view-toggle button,html:root .view-toggle button.primary,html:root .view-toggle button.secondary{min-height:44px}
  html:root .lead-card .next{min-height:44px}
  html:root .lead-card .deal-title{display:flex;align-items:center;min-height:44px;margin-top:0}
  html:root .lc-meta .text-link,html:root .lr-main .text-link{display:inline-flex;align-items:center;min-height:44px}
  html:root .shift-pill{min-width:44px;min-height:44px}
}
/* Empty pipeline stages stay compact. */
html:root .stage.stage-is-empty{min-height:160px}
html:root .stage-is-empty .stage-empty{min-height:0;padding:12px 8px;font-size:13px}
/* Long (esp. Arabic) names wrap to two lines at most. */
.appointment-button>div>b,.pl-body>b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
/* Friendly date shown under native date inputs (which follow the device locale). */
.date-hint{display:block;margin-top:4px;font-size:12px;color:var(--muted)}.date-hint:empty{display:none}
.previsit-overdue{margin-inline-start:6px}

/* Sticky page header is opaque in every theme and width: scrolled content (Settings sections, tables) never shows through it. */
html:root header{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
html.crazy:root:root header{background:#0f0f16;-webkit-backdrop-filter:none;backdrop-filter:none}
.wf-nav-group{margin:0 0 14px}.wf-nav-group-title{margin:10px 0 6px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.wf-nav-fixed .tag{white-space:normal;margin-inline-start:auto}