/* ui.css — loaded last. Self-hosted fonts, type scale, contrast, touch targets,
   mobile containment and RTL/logical-property fixes. See DESIGN.md. */

/* ── Fonts: self-hosted (CSP font-src 'self'); OFL licences in fonts/ ── */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/dm-sans-latin-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500 600;font-display:swap;src:url(fonts/dm-sans-latin-600.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700 800;font-display:swap;src:url(fonts/dm-sans-latin-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-400.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500 600;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-600.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700 800;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-700.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}

/* ── Tokens ── */
:root{--muted:#526168;--amber-text:#8a5a00;--green:#15784f;--red:#bf3a42;--muted-strong:#3f4d54;--text-sm:14px;--text-xs:12px;--fab-space:84px;--focus:0 0 0 3px #fff,0 0 0 5px #176b87}
html{-webkit-text-size-adjust:100%}
body{font-family:'DM Sans','IBM Plex Sans Arabic',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;font-size:16px;line-height:1.45}
.rtl,[dir=rtl] body{font-family:'IBM Plex Sans Arabic','DM Sans',system-ui,'Segoe UI',Tahoma,Arial,sans-serif}
button,input,select,textarea{font-family:inherit}
.num,time,.stat-large,.metric .num,.deal-value,.visit-timer{font-variant-numeric:tabular-nums}

/* ── Type scale: body 16, secondary ≥14, labels/badges ≥12 ── */
small,.sub,.appointment small,.deal small,.metric small,.mini-stat small,.event p,.event small,.visit-list p,.modal p,.contact-card small,.search-result-item small,.notif-item small,.follow-up-row small,.report-breakdown small,.sync-error,.queue-row small{font-size:var(--text-sm)}
.card h2{font-size:18px}.card h3{font-size:16px}
.field label{font-size:14px;color:var(--muted-strong)}
.table{font-size:14px}.table th{font-size:12px;color:var(--muted-strong)}
.appointment b,.visit-list b,.event strong,.deal-title{font-size:16px}
.quick b,.filter,.time,.target,.stage-header,.follow-up-due,.offline,.sync-status,.location-tracking-status,.success,.toast,.search-empty,.notif-item b{font-size:14px}
.tag,.badge,.count,.temp,.sync-chip,.eyebrow,.notif-section-label,.search-section-label{font-size:var(--text-xs)}
.eyebrow{color:var(--muted);letter-spacing:.06em}
.rtl .eyebrow,.rtl .search-section-label,.rtl .notif-section-label{letter-spacing:0;text-transform:none}
.secondary{background:#e8eef0;color:#34454d}
.filter{color:#3f4d54}
.count{color:#34454d}
.auth-trigger{font-size:13px}

/* ── Focus: always visible, never colour-only ── */
:where(button,a[href],input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid #176b87;outline-offset:2px}
.card-button{display:block;width:100%;font:inherit;color:inherit;text-align:start;cursor:pointer}
.card-button:focus-visible{outline:3px solid #176b87;outline-offset:3px}

/* ── Touch targets ≥44px ── */
.primary,.secondary,.danger,.filter,.text-button,.next,.tab,.language,.bell,.shift-pill,.quick,.choice-chip,.tap-chip,.back-button,.auth-trigger{min-height:44px}
.language,.bell{min-width:44px}
.text-button,.back-button{display:inline-flex;align-items:center;gap:6px}

/* ── Containment: nothing may widen the page ── */
main,#view,.card,.grid>*,.row>*,.two-col>*,.home-grid>*{min-width:0}
#view{overflow-wrap:anywhere}
.row{flex-wrap:wrap}
.row>div:first-child{flex:1 1 220px}
.table-scroll,.report-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;overscroll-behavior-x:contain;background:linear-gradient(to right,#fff 30%,rgba(255,255,255,0)) left/24px 100% no-repeat local,linear-gradient(to left,#fff 30%,rgba(255,255,255,0)) right/24px 100% no-repeat local,radial-gradient(farthest-side at 0 50%,rgba(16,43,63,.18),transparent) left/10px 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,rgba(16,43,63,.18),transparent) right/10px 100% no-repeat scroll}
.scroll-hint{display:none;font-size:var(--text-xs);color:var(--muted);margin:6px 0 0}

/* ── Header ── */
header{gap:12px}
header>div:first-child{min-width:0;flex:1}
#page-title{overflow-wrap:anywhere}
.header-actions{flex-shrink:0}

/* ── FAB + bottom nav never cover content; logical positioning ── */
#global-fab-root{right:auto;left:auto;inset-inline-end:18px;bottom:24px}
.fab-sheet{right:auto;inset-inline-end:0}
#view{padding-bottom:var(--fab-space)}
@media(max-width:960px){
  #global-fab-root{bottom:calc(76px + env(safe-area-inset-bottom));inset-inline-end:14px}
  main{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  .mobile-nav .nav-item{font-size:12px;min-height:52px;padding:6px 1px}
  .rtl .menu-toggle{left:auto}
}

/* ── Chips (stage-2 tap chips / choice buttons) ── */
.choice-chip,.tap-chip{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border:1px solid #c9d6da;border-radius:999px;background:#fff;color:var(--ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.choice-chip[aria-pressed=true],.tap-chip[aria-pressed=true],.choice-chip.active,.tap-chip.active{background:var(--navy);border-color:var(--navy);color:#fff}

/* ── Consistent empty / loading / error states ── */
.empty-state{padding:20px 16px;text-align:center;color:var(--muted);font-size:var(--text-sm);border:1px dashed #cfdade;border-radius:12px;background:#fafcfc}
.empty-state b{display:block;color:var(--ink);font-size:16px;margin-bottom:4px}

/* ── Separators between run-together inline values ── */
.sep{color:var(--muted);padding-inline:.35em}
.meta-line{display:flex;flex-wrap:wrap;column-gap:.5em;row-gap:2px;color:var(--muted);font-size:var(--text-sm)}

/* ── RTL: logical fixes for legacy physical rules ── */
.rtl .nav-item,.rtl .quick,.rtl .contact-card,.rtl .appointment-button,.rtl .search-result-item,.rtl .contact-open,.rtl .add-contact-inline{text-align:right}
.rtl .sync-status span,.rtl .location-tracking-status span{margin-right:0;margin-left:auto}
.rtl .setup-checklist{border-left:0;border-right:4px solid var(--amber)}
.rtl #toast-root{right:auto;left:18px}
.rtl .search-results{left:auto;right:0}
.rtl .notification-panel{right:auto;left:0}
.rtl .modal-close{right:auto;left:10px}
.rtl .follow-up-due{text-align:left}
.rtl .dir-arrow{display:inline-block;transform:scaleX(-1)}
bdi{unicode-bidi:isolate}

@media(max-width:520px){
  main{padding-inline:14px}
  .table{min-width:0;max-width:100%}
  .scroll-hint{display:block}
  .report-filters{grid-template-columns:1fr}
  .row{align-items:stretch}
  .header-actions{gap:6px}
  h1{font-size:21px}
}
@media(max-width:380px){
  main{padding-inline:10px}
  .header-actions{max-width:none}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* Filter chip rows wrap instead of hiding options off-screen (esp. RTL). */
.contact-type-filters,.controls{flex-wrap:wrap;overflow:visible}
.tag,.badge{max-width:100%;white-space:normal;display:inline-block;line-height:1.3}
/* Off-canvas drawer: hidden (not focusable) while closed; animate opening only,
   so switching language never slides the drawer across the screen. */
@media(max-width:960px){.side,.rtl .side{transition:none;visibility:hidden}.side.open,.rtl .side.open{visibility:visible;transition:left .2s ease,right .2s ease}}
/* Visit step connectors follow reading direction. */
.vstep+.vstep::before{left:auto;inset-inline-start:-50%}

/* Clickable rows/chips are real <button>s: reset native button styling so they look as before. */
button.notif-item{width:100%;margin:0;background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;text-align:start;font:inherit;color:inherit;cursor:pointer;min-height:44px}
button.notif-item:hover{background:#f4f8fa}
button.chip-button{border:0;font-family:inherit;line-height:inherit;cursor:pointer;min-height:24px}
[role="button"]:focus-visible{outline:3px solid #176b87;outline-offset:3px}
/* Row text (name / detail lines) stacks instead of running together; long emails wrap. */
.contact-row>div>b,.contact-row>div>small{display:block;overflow-wrap:anywhere}
.contact-row>div>small{margin-top:2px}
/* Deal card: temperature, doctor, product/facility each on their own line. */
.deal .deal-title{display:block;text-align:start;max-width:100%;overflow-wrap:anywhere}
.deal>small{display:block}
/* Date/time column of appointment rows: compact date, never broken mid-value. */
.appointment{grid-template-columns:minmax(52px,max-content) minmax(0,1fr) auto}
.appointment .time{white-space:nowrap;font-variant-numeric:tabular-nums}
@media(max-width:520px){.appointment{grid-template-columns:minmax(48px,max-content) minmax(0,1fr)}.appointment-row .appointment{grid-template-columns:minmax(48px,max-content) minmax(0,1fr) auto}}
/* main{margin:auto} in the 100vh grid centred short pages vertically, pushing the header down. */
main{margin-block:0}
/* Stacked Reports heading: column flex sized the intro taller than its text (blank gap on phones). */
@media(max-width:760px){.report-heading{display:block}.report-heading .report-actions{margin-top:12px}}
/* Radio chips (visit outcome, next action): the radio inherited the text-field rules
   (.field input: full width, 44px tall), so each chip held a 44px circle and the label
   broke mid-word. Chips wrap as a row of pills; the pill itself is the 44px target. */
fieldset.field{border:0;padding:0;margin:0 0 14px;min-width:0}
fieldset.field>legend{padding:0;margin-bottom:8px;font-size:14px;font-weight:700;color:var(--muted-strong)}
.choice-chips{display:flex;flex-wrap:wrap;gap:8px}
.field .choice-chip{margin:0;max-width:100%;font-size:15px;font-weight:600;color:var(--ink);gap:8px;line-height:1.25}
.field .choice-chip input[type=radio]{width:18px;height:18px;min-height:0;padding:0;margin:0;flex:none;border:0;accent-color:var(--navy)}
.choice-chip:has(input:checked){background:#e8f6f7;border-color:var(--blue);color:var(--navy)}
.choice-chip:has(input:focus-visible){outline:3px solid #176b87;outline-offset:2px}
.choice-chip:has(input:disabled){opacity:.6;cursor:default}
/* Badges keep their own height inside stretched rows (was a tall block on phones). */
.row>.tag,.row>.temp{align-self:flex-start}
/* Sidebar user card: avatar never squashes; sign-out gets its own row so name/role/status don't wrap word-by-word. */
.user-card{flex-wrap:wrap}
.avatar{flex:none}
.user-card .auth-trigger{flex:1 0 100%}
.user-card-copy b{display:block;overflow-wrap:anywhere}
/* A stretched .field (report filter grid) spread its label and input apart; keep them together. */
.field{align-content:start}
.report-filters{align-items:start}
/* "9+" count read "+9" in RTL: keep numbers with symbols left-to-right. */
.notif-count{direction:ltr;unicode-bidi:isolate}