@font-face{font-family:"Plex Brand";src:url("/fonts/IBMPlexSansArabic-Regular.ttf") format("truetype");font-weight:400}
@font-face{font-family:"Plex Brand";src:url("/fonts/IBMPlexSansArabic-Medium.ttf") format("truetype");font-weight:500}
@font-face{font-family:"Plex Brand";src:url("/fonts/IBMPlexSansArabic-SemiBold.ttf") format("truetype");font-weight:600}
@font-face{font-family:"Plex Brand";src:url("/fonts/IBMPlexSansArabic-Bold.ttf") format("truetype");font-weight:700 800}

:root{
  /* brand: two teals, nothing else */
  --teal:#264653; --teal2:#287170; --teal3:#5E9C9B; --ink:#22403D; --gray:#63736F;

  /* Surfaces. --line is the warm beige that edges cards and page furniture.
     Form controls use --field instead: the same lightness, a cooler hue, so a
     field reads crisp against white where the beige read muddy. */
  --line:#E3E1D9;
  --field:#D5DCDA; --field-hover:#A9B8B5;
  --zebra:#F7F6F1; --cream:#F2F2F2; --soft:#EAF1F0; --white:#fff;
  --wash:#F8FAF9;           /* the faintest teal-grey: table heads, row hover */
  --ph:#94A2A0;             /* placeholder, clearly lighter than typed text */
  --ring:rgba(40,113,112,.16);
  --good:#287170; --mid:#8A7A2E; --bad:#8C3B2E;
  --bad-line:#E4CEC8; --mid-line:#DED6B4;

  /* one spacing scale, used everywhere instead of ad-hoc margins */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --r-s:8px; --r-m:10px; --r-l:14px;
  --sh:0 1px 2px rgba(34,64,61,.05);
  --sh-pop:0 8px 24px rgba(34,64,61,.12);
  --t:120ms cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Plex Brand","Segoe UI",system-ui,sans-serif;color:var(--ink);background:var(--cream);font-size:15px;line-height:1.65}
a{color:var(--teal2);text-decoration:none}
a:hover{text-decoration:underline}
/* one visible focus ring for everything reachable by keyboard */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible,
input[type=checkbox]:focus-visible,input[type=file]:focus-visible,.seg input:focus-visible+label,.rate input:focus-visible+label{
  outline:2px solid var(--teal2);outline-offset:2px;border-radius:6px}
.side a:focus-visible,.topbar button:focus-visible,.topbar a:focus-visible{outline-color:#fff}

/* ---------- spacing utilities ---------- */
/* the 4/8/12/16/24/32 scale, named after it, so no page carries an inline margin */
.mt-1{margin-top:var(--s1)}.mt-2{margin-top:var(--s2)}.mt-3{margin-top:var(--s3)}
.mt-4{margin-top:var(--s4)}.mt-5{margin-top:var(--s5)}.mt-6{margin-top:var(--s6)}
.mb-1{margin-bottom:var(--s1)}.mb-2{margin-bottom:var(--s2)}.mb-3{margin-bottom:var(--s3)}
.mb-4{margin-bottom:var(--s4)}.mb-5{margin-bottom:var(--s5)}.mb-6{margin-bottom:var(--s6)}
.nowrap{white-space:nowrap}
.inline-form{display:inline}
.w-full{width:100%}
.t-center{text-align:center}
.rtl{direction:rtl}
/* an Arabic line that belongs directly under its English counterpart */
.ar-line{direction:rtl;text-align:right;color:var(--gray);font-size:13px;margin-top:1px}

/* ---------- shell ---------- */
.shell{display:flex;min-height:100vh}
/* top bar and scrim belong to the mobile drawer; both are hidden on desktop */
.topbar{display:none;align-items:center;gap:12px;padding:8px 12px;background:var(--teal);color:#fff;position:sticky;top:0;z-index:70}
.topbar .tb-logo{height:32px;background:#fff;border-radius:7px;padding:4px 7px}
.topbar .tb-title{font-weight:700;font-size:15px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.burger,.tb-out{background:none;border:none;color:#fff;padding:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;border-radius:9px}
.burger:hover,.tb-out:hover{background:rgba(255,255,255,.12)}
.burger svg,.tb-out svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.scrim{display:none}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:var(--s5)}
.table-wrap table.list{margin-bottom:0}

/* ---------- live updates ---------- */
/* a quiet dot, not a status banner: green when connected, amber while retrying */
.livedot{display:inline-block;width:7px;height:7px;border-radius:50%;flex:none;
  background:#7C8C88;margin-inline-end:7px;vertical-align:middle;transition:background .3s ease}
.livedot[data-state="live"]{background:#5E9C9B}
.livedot[data-state="reconnecting"]{background:#B9A227;animation:livepulse 1.4s ease-in-out infinite}
.topbar .livedot{margin:0;margin-inline-end:2px}
@keyframes livepulse{0%,100%{opacity:1}50%{opacity:.35}}
/* shown only when a swap would have interrupted someone */
.livepill{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;z-index:90;
  background:var(--teal);color:#fff;border:none;border-radius:99px;padding:11px 22px;
  font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;
  box-shadow:var(--sh-pop)}
.livepill:hover{background:#1b3540}
.upd{color:var(--teal2);font-weight:600;font-size:14px;letter-spacing:normal}
@media (prefers-reduced-motion: reduce){ .livedot{animation:none} }

/* ---------- sidebar ---------- */
.side{width:238px;background:var(--teal);color:#fff;padding:20px 0 18px;flex-shrink:0;display:flex;flex-direction:column}
.side .logo{padding:0 20px 16px;margin-bottom:14px;border-bottom:1px solid rgba(255,255,255,.14)}
.side .logo img{height:40px;display:block;background:#fff;border-radius:8px;padding:5px 9px}
.side .logo .sys{font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.7;margin-top:9px}
.side nav{display:flex;flex-direction:column;gap:2px;padding:0 12px}
.side nav a{position:relative;display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--r-m);
  color:#DCE7E5;font-weight:500;font-size:14.5px;transition:background var(--t),color var(--t)}
.side nav a svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;opacity:.8;transition:opacity var(--t)}
.side nav a:hover{background:rgba(255,255,255,.08);color:#fff;text-decoration:none}
.side nav a:hover svg{opacity:1}
.side nav a.on{background:rgba(255,255,255,.13);color:#fff;font-weight:700}
.side nav a.on svg{opacity:1}
/* the active marker sits flush against the sidebar edge, not inside the pill */
.side nav a.on::before{content:"";position:absolute;inset-inline-start:-12px;top:50%;transform:translateY(-50%);
  width:3px;height:22px;background:#fff;
  border-start-end-radius:3px;border-end-end-radius:3px}
.side .foot{margin:auto 0 0;padding:14px 20px 0;font-size:12px;line-height:1.6;color:#B9CBC8;border-top:1px solid rgba(255,255,255,.14)}
.side .foot a{color:#fff;font-weight:600}
.main{flex:1;padding:28px 34px 48px;max-width:1160px;min-width:0}

/* ---------- page headers ---------- */
/* every page reads the same: title, one quiet line under it, actions on the right */
h1.page-t{font-size:25px;color:var(--teal);font-weight:800;letter-spacing:-.01em;line-height:1.3;margin-bottom:3px}
.page-sub{color:var(--gray);margin-bottom:var(--s5);font-size:14px;max-width:80ch}
.row-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s5)}
.row-head .page-sub,.row-head h1.page-t{margin-bottom:0}
.row-head > form,.row-head > .actions{flex:none}
h2.sec{font-size:16px;color:var(--teal);font-weight:800;margin:var(--s6) 0 var(--s3);display:flex;align-items:center;gap:9px}
h2.sec::before{content:"";width:4px;height:18px;background:var(--teal2);border-radius:3px;flex:none}
h2.sec .muted{font-weight:500}

/* ---------- cards / tiles ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:20px 22px;margin-bottom:var(--s5);box-shadow:var(--sh)}
.card > :last-child{margin-bottom:0}
/* a table inside a card must not draw a second card around itself */
.card table.list{border:none;box-shadow:none;border-radius:0}
.card .table-wrap:last-child{margin-bottom:0}
.card.flush{padding:0;overflow:hidden}
.card.flush .table-wrap{margin-bottom:0}
.card.narrow{max-width:460px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--s3);margin-bottom:var(--s5)}
/* one hero KPI carries the brand; the rest stay quiet so the numbers rank */
.tile{border-radius:var(--r-l);padding:16px 18px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh)}
.tile .n{font-size:27px;font-weight:800;line-height:1.25;color:var(--teal2);font-variant-numeric:tabular-nums}
.tile .t{font-size:12.5px;color:var(--gray)}
.tile.t1{background:var(--teal);border-color:var(--teal)}
.tile.t1 .n{color:#fff}
.tile.t1 .t{color:rgba(255,255,255,.86)}

/* ---------- tables ---------- */
/* the data is the loud part: a quiet head, no zebra, a hover row instead */
table.list{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-l);overflow:hidden;font-size:14px;font-variant-numeric:tabular-nums;box-shadow:var(--sh)}
table.list th{background:var(--wash);color:var(--gray);font-weight:700;font-size:11px;letter-spacing:.07em;
  text-transform:uppercase;padding:10px 14px;text-align:start;white-space:nowrap;border-bottom:2px solid var(--line)}
table.list td{padding:11px 14px;border-top:1px solid var(--line);vertical-align:middle}
table.list tr:nth-child(2) td{border-top:none}
table.list td:first-child{font-weight:600;color:var(--teal)}
table.list .r{text-align:end}
table.list .c{text-align:center}
@media (hover:hover) and (min-width:861px){
  table.list tr:not(:first-child):hover td{background:var(--wash)}
}
/* Row actions repeated down a whole table shout louder than the rows themselves,
   so they rest as quiet text and firm up when the row is pointed at. */
table.list td .btn.small:not(.danger){
  background:transparent;color:var(--teal2);border:1px solid transparent;
  font-weight:600;padding:5px 10px;border-radius:var(--r-s)}
table.list td .btn.small:not(.danger):hover{background:var(--soft);border-color:transparent;color:var(--teal)}
@media (hover:hover) and (min-width:861px){
  table.list tr:hover .btn.small:not(.danger){border-color:var(--field);background:#fff}
  table.list tr:hover .btn.small:not(.danger):hover{background:var(--soft);border-color:var(--teal3)}
}
table.list td .actions{gap:var(--s1)}
/* the confirm button inside a disclosure panel is a real action, not a row action */
table.list td .pwform form .btn.small{background:var(--teal2);color:#fff;border-color:var(--teal2)}
table.list td .pwform form .btn.small:hover{background:#1f5a59;border-color:#1f5a59;color:#fff}

/* ---------- badges ---------- */
.badge{display:inline-block;border-radius:99px;padding:2px 10px;font-size:11.5px;font-weight:700;
  white-space:nowrap;line-height:1.7;letter-spacing:.01em}
.b-good{background:#E3EEED;color:var(--good)}
.b-mid{background:#F1EDDA;color:var(--mid)}
.b-bad{background:#F5E4E0;color:var(--bad)}
.b-gray{background:#ECEAE4;color:var(--gray)}
.b-teal{background:var(--teal2);color:#fff}
.b-dark{background:var(--teal);color:#fff}
.flag{color:var(--bad);font-weight:700;font-size:12.5px}

/* ---------- forms ---------- */
form .f{margin-bottom:var(--s4)}
label{display:block;font-weight:600;color:var(--teal);font-size:13px;margin-bottom:5px;letter-spacing:.005em}
label .req{color:var(--teal2);font-weight:700;margin-inline-start:1px}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],input[type=month],select,textarea{
  width:100%;padding:8px 12px;border:1px solid var(--field);border-radius:var(--r-m);
  font-family:inherit;font-size:14.5px;line-height:1.5;color:var(--ink);background:#fff;
  transition:border-color var(--t),box-shadow var(--t),background-color var(--t)}
input:hover:not(:disabled):not(:focus),select:hover:not(:disabled):not(:focus),textarea:hover:not(:disabled):not(:focus){border-color:var(--field-hover)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal2);box-shadow:0 0 0 3px var(--ring)}
input:disabled,select:disabled,textarea:disabled{background:var(--wash);color:var(--gray);cursor:not-allowed;border-color:var(--line)}
input:read-only:not([type=date]){background:var(--wash);color:var(--gray)}
::placeholder{color:var(--ph);opacity:1;font-weight:400}
textarea{min-height:88px;resize:vertical;padding:10px 12px}

/* Native selects render the OS double-chevron, which is the single loudest
   "unstyled HTML" tell in the app. The control stays native underneath, so the
   keyboard and the mobile wheel behave exactly as before; only the arrow is ours. */
select{-webkit-appearance:none;appearance:none;padding-inline-end:34px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6' stroke='%23287170' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:12px 8px}
select::-ms-expand{display:none}
select:disabled{cursor:not-allowed;opacity:.75}

/* Same idea for the date field: our calendar glyph replaces the OS one, and the
   indicator itself is untouched so the native picker still opens on click. */
input[type=date]::-webkit-calendar-picker-indicator{
  width:17px;height:17px;margin:0;margin-inline-start:8px;padding:0;cursor:pointer;opacity:.9;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23287170' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:17px 17px;
  transition:opacity var(--t)}
input[type=date]::-webkit-calendar-picker-indicator:hover{opacity:1}
input[type=date]{max-width:230px}

/* A three-digit field has no business being 400px wide. */
input[type=number]{max-width:130px}
input[name="office_no"],input[name="contact_phone"]{max-width:240px}
input[name="city"]{max-width:280px}
.filters input,.filters select{max-width:none}

/* checkbox: the last raw OS control in the app (PM assignment) */
input[type=checkbox]{-webkit-appearance:none;appearance:none;width:18px;height:18px;flex:none;
  border:1.5px solid var(--field-hover);border-radius:5px;background:#fff;cursor:pointer;
  transition:background var(--t),border-color var(--t),box-shadow var(--t)}
input[type=checkbox]:hover{border-color:var(--teal2)}
input[type=checkbox]:checked{background:var(--teal2) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.6 6.4 5.6 10.4 14.4 1.6'/%3E%3C/svg%3E") center/11px 8px no-repeat;
  border-color:var(--teal2)}
.checks{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin-bottom:var(--s3)}
.checks label{display:inline-flex;align-items:center;gap:9px;margin:0;font-weight:500;color:var(--ink);font-size:14.5px;cursor:pointer}

input[type=file]{width:100%;border:none;background:none;padding:0;font-size:14px;color:var(--gray)}
input[type=file]::file-selector-button{font-family:inherit;font-size:14px;font-weight:700;color:var(--teal2);
  background:#fff;border:1.5px solid var(--teal2);border-radius:var(--r-m);padding:8px 16px;margin-inline-end:12px;
  cursor:pointer;transition:background var(--t)}
input[type=file]::file-selector-button:hover{background:var(--soft)}

/* real row gaps, so the last row of a grid does not add a field margin on top of
   the card padding */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4) 18px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--s4) 18px}
/* New Visit: four fields on one row, so the date no longer orphans a 3-up grid */
.grid-visit{display:grid;grid-template-columns:1.1fr 1.1fr 1.25fr .85fr;gap:var(--s4) 18px}
.grid2 > .f,.grid3 > .f,.grid-visit > .f{margin-bottom:0}
form > .grid2,form > .grid3,form > .grid-visit{margin-bottom:var(--s4)}

/* ---------- buttons ---------- */
/* primary (filled teal2) · dark (filled teal, one per page) · ghost (outline)
   · quiet (table rows, above) · danger (never the loudest thing in its card) */
.btn{display:inline-block;background:var(--teal2);color:#fff;border:1px solid var(--teal2);border-radius:var(--r-m);
  padding:9px 20px;font-family:inherit;font-size:14.5px;font-weight:700;line-height:1.45;cursor:pointer;
  text-align:center;transition:background var(--t),border-color var(--t),color var(--t),box-shadow var(--t)}
.btn:hover{background:#1f5a59;border-color:#1f5a59;text-decoration:none}
.btn:active{background:#1b4e4d}
.btn.dark{background:var(--teal);border-color:var(--teal)}
.btn.dark:hover{background:#1b3540;border-color:#1b3540}
.btn.ghost{background:#fff;color:var(--teal2);border:1px solid var(--field-hover)}
.btn.ghost:hover{background:var(--soft);border-color:var(--teal2);color:var(--teal)}
.btn.small{padding:5px 13px;font-size:13px;border-radius:var(--r-s)}
.btn.busy,.btn:disabled{opacity:.55;cursor:default;pointer-events:none}
.btn.danger{background:#fff;color:var(--bad);border:1px solid var(--bad-line)}
.btn.danger:hover{background:#F7E9E5;border-color:#C9A197}
.actions{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}

/* ---------- filters, pager, month nav ---------- */
/* filters are scaffolding, so they sit back from the content they filter */
.filters{display:flex;gap:var(--s3) var(--s4);align-items:flex-end;flex-wrap:wrap;padding:16px 18px}
.filterbox{padding:0;background:#FAFAF7;border-color:#E9E7DE;box-shadow:none}
.filterbox summary{display:none}
.filterbox:not([open]) > form{display:flex}
.filters .f{margin-bottom:0;flex:1 1 165px;min-width:0}
.filters .fbtn{flex:0 0 auto;display:flex;gap:var(--s2);align-items:center}
/* a month picker does not need the whole row: it holds "September 2026" */
.filters .f-wide{flex:0 1 280px;margin-bottom:0;min-width:0}
.pager{display:flex;gap:var(--s4);align-items:center;justify-content:center;margin:var(--s4) 0 var(--s5)}
.monthnav{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
.monthnav select{width:auto;min-width:158px}
.monthnav .btn{line-height:1.45;padding:8px 14px}
/* inline password form: a native disclosure, so no prompt() and no name in a JS string */
.pwform{display:inline-block;text-align:start}
.pwform summary{list-style:none;cursor:pointer;display:inline-block}
.pwform summary::-webkit-details-marker{display:none}
.pwform[open] summary{margin-bottom:var(--s2)}
/* This panel opens inside a table cell whose actions are kept on one line with
   white-space:nowrap. Without resetting that here, the Save button is laid out
   on the input's line and pushed outside the panel, past the edge of the table. */
.pwform form{background:#fff;border:1px solid var(--line);border-radius:var(--r-m);padding:12px;width:224px;
  white-space:normal;box-shadow:var(--sh-pop)}
.pwform label{font-size:12.5px;white-space:normal}
.pwform input{margin-bottom:var(--s2);min-width:0}
/* section jump chips: sticky under the top bar, with scroll-margin so a target
   heading is never hidden behind them */
.chips{display:flex;gap:var(--s2);overflow-x:auto;position:sticky;top:0;z-index:40;
  background:var(--cream);padding:10px 0;margin-bottom:var(--s1);-webkit-overflow-scrolling:touch}
.chips a{flex:none;background:#fff;border:1px solid var(--line);border-radius:99px;
  padding:6px 15px;font-size:13.5px;font-weight:600;color:var(--teal);transition:background var(--t),border-color var(--t)}
.chips a:hover{background:var(--soft);border-color:var(--teal2);text-decoration:none}
h2.sec[id]{scroll-margin-top:74px}

/* ---------- visit checklist ---------- */
.q-item{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:16px 18px;margin-bottom:var(--s3);box-shadow:var(--sh)}
/* the measure keeps the Arabic line under its English question instead of
   letting it drift to the far right of a wide card */
.q-item .q-text{font-weight:600;color:var(--ink);margin-bottom:1px;max-width:56ch;font-size:15px}
.q-item .q-ar{direction:rtl;text-align:right;color:var(--gray);font-size:13.5px;margin-bottom:9px;max-width:56ch}
.q-meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.q-meta .chip-cat{display:inline-block;background:var(--soft);color:var(--teal2);border-radius:99px;
  padding:1px 9px;font-size:11px;font-weight:600;letter-spacing:.01em}
.q-meta .chip-no{display:inline-block;background:#F1EDDA;color:var(--mid);border-radius:99px;
  padding:1px 9px;font-size:11px;font-weight:700;letter-spacing:.01em}
.seg{display:flex;gap:var(--s2);margin-bottom:var(--s2)}
.seg input{position:absolute;opacity:0;pointer-events:none}
/* an unanswered pill has to look like an invitation, not a disabled control */
.seg label{flex:0 0 auto;margin:0;border:1.5px solid #C6D2D0;border-radius:99px;padding:6px 22px;cursor:pointer;
  font-weight:700;color:var(--teal);background:#fff;font-size:14px;transition:background var(--t),border-color var(--t),color var(--t)}
.seg label:hover{background:var(--soft);border-color:var(--teal3)}
.seg input:checked + label.yes{background:var(--teal2);border-color:var(--teal2);color:#fff}
.seg input:checked + label.no{background:var(--bad);border-color:var(--bad);color:#fff}
.seg input:checked + label.na{background:var(--gray);border-color:var(--gray);color:#fff}
/* the optional note is a footnote to the decision, not a peer of the question */
.q-note input{font-size:13.5px;padding:6px 11px;background:var(--wash);border-color:transparent;color:var(--ink)}
.q-note input::placeholder{color:var(--ph)}
.q-note input:hover:not(:focus){background:#fff;border-color:var(--field)}
.q-note input:focus{background:#fff}
.q-item.missing{border-color:var(--teal2);box-shadow:0 0 0 3px var(--ring)}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;margin-top:var(--s3)}
.thumbs figure{position:relative;border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;background:#fff}
.thumbs img{width:100%;height:88px;object-fit:cover;display:block}
.thumbs .rm{display:block;width:100%;border:none;border-top:1px solid var(--line);background:#fff;
  color:var(--bad);font-family:inherit;font-size:12.5px;font-weight:700;padding:7px 0;cursor:pointer}
.thumbs .rm:hover{background:#F7E9E5}
.submitbar{display:flex;align-items:center;gap:var(--s4);margin-top:var(--s5)}
.submitbar .prog{font-weight:700;color:var(--teal);font-size:14.5px;font-variant-numeric:tabular-nums}
.btn.submit{font-size:16px;padding:12px 34px}

/* ---------- charts ---------- */
.bars{display:flex;flex-direction:column;gap:var(--s2)}
.brow{display:grid;grid-template-columns:170px 1fr 52px;align-items:center;gap:var(--s3);font-size:13.5px}
.brow .lbl{font-weight:600;color:var(--teal);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brow .track{background:var(--wash);border:1px solid var(--line);border-radius:99px;height:14px;overflow:hidden}
.brow .fill{display:block;height:100%;border-radius:99px;background:var(--teal2)}
.brow .fill.alt{background:var(--teal)}
.brow .val{font-weight:800;color:var(--teal2);text-align:end;font-size:13px;font-variant-numeric:tabular-nums}
.spark{display:flex;align-items:flex-end;gap:3px;height:34px}
.spark i{display:block;width:9px;background:var(--teal3);border-radius:2px 2px 0 0;min-height:2px}
.spark i.hi{background:var(--teal2)}

/* ---------- photos ---------- */
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s3);margin-bottom:var(--s5)}
.photo-grid a{display:block;border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;background:#fff;transition:border-color var(--t)}
.photo-grid a:hover{border-color:var(--teal2)}
.photo-grid img{width:100%;height:120px;object-fit:cover;display:block}

/* ---------- stars ---------- */
.stars{color:var(--teal2);font-size:16px;letter-spacing:2px;white-space:nowrap}
.stars .off{color:#D8DDDB}

/* ---------- login & public feedback ---------- */
.center-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--cream)}
.auth-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:38px 36px;width:100%;max-width:420px;box-shadow:0 10px 34px rgba(34,64,61,.09)}
.auth-card.wide{max-width:520px}
.auth-card .page-t,.auth-card .page-sub{text-align:center}
.auth-card .actions{justify-content:center}
.auth-card .logo{text-align:center;margin-bottom:var(--s5)}
.auth-card .logo img{height:52px}
.auth-card h1{font-size:19px;color:var(--teal);text-align:center;margin-bottom:var(--s5);font-weight:800}
.fb-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:38px 36px;width:100%;max-width:600px;box-shadow:0 10px 34px rgba(34,64,61,.09)}
.fb-head{text-align:center;margin-bottom:var(--s2)}
.fb-head img{height:48px;margin-bottom:var(--s3)}
.fb-title{font-size:20px;font-weight:800;color:var(--teal);line-height:1.4}
.fb-title-ar{direction:rtl;font-size:17px;font-weight:700;color:var(--teal2);margin-top:2px}
.fb-sub{color:var(--gray);font-size:13.5px;text-align:center;margin-bottom:var(--s5)}
.rate{display:flex;gap:10px;justify-content:center;margin:var(--s3) 0 var(--s5);direction:ltr}
.rate input{position:absolute;opacity:0;pointer-events:none}
.rate label{width:54px;height:54px;border:1.5px solid var(--field);border-radius:var(--r-l);display:flex;align-items:center;
  justify-content:center;font-size:22px;font-weight:800;color:var(--teal);cursor:pointer;margin:0;background:#fff;
  transition:background var(--t),border-color var(--t),color var(--t)}
.rate label:hover{background:var(--soft);border-color:var(--teal3)}
.rate input:checked + label{background:var(--teal2);border-color:var(--teal2);color:#fff}
.pwwrap{position:relative}
.pwwrap input{padding-inline-end:64px}
.pweye{position:absolute;inset-inline-end:6px;top:50%;transform:translateY(-50%);background:none;border:none;
  color:var(--teal2);font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;padding:8px 10px;border-radius:7px}
.pweye:hover{background:var(--soft)}
.lbl-ar{direction:rtl;text-align:right;display:block;color:var(--teal2);font-weight:600;font-size:13.5px;margin-bottom:5px}
.lbl-2nd{color:var(--gray);font-weight:400}
.lbl-center{text-align:center}
.thanks{text-align:center;padding:30px 0}
.thanks .big{font-size:44px;margin-bottom:10px;color:var(--teal2);line-height:1}

/* ---------- misc ---------- */
.msg{background:var(--soft);border:1px solid #CBDBD9;border-radius:var(--r-m);padding:11px 16px;margin-bottom:var(--s5);color:var(--teal);font-weight:600}
.msg.err{background:#F5E4E0;border-color:var(--bad-line);color:var(--bad)}
.muted{color:var(--gray);font-size:13px}
/* A PM writing a note in the field puts each observation on its own line. The
   print CSS keeps them too, so the page and the client's PDF agree. */
.pre{white-space:pre-wrap}
.kv{display:grid;grid-template-columns:200px 1fr;gap:6px 16px;font-size:14.5px}
.kv dt{font-weight:700;color:var(--teal)}
.linkbox{background:var(--wash);border:1px solid var(--line);border-radius:var(--r-s);padding:8px 12px;font-size:13px;
  word-break:break-all;font-family:Consolas,monospace;color:var(--ink)}
.linkbox.tight{display:inline-block;padding:1px 8px}
td.linkrow{background:var(--wash)}
.loc-name{color:var(--teal);font-size:15.5px}
/* an empty state should say what is missing and offer the one thing that fixes it */
.empty{padding:38px 26px;text-align:center;color:var(--gray);background:#fff;border:1px solid var(--line);
  border-radius:var(--r-l);font-size:14.5px;margin-bottom:var(--s5);box-shadow:var(--sh)}
.empty::before{content:"";display:block;width:38px;height:38px;margin:0 auto var(--s3);border-radius:50%;
  background:var(--soft) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23287170' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/17px no-repeat}
.empty a{font-weight:700;border-bottom:1px solid rgba(40,113,112,.35)}
.empty a:hover{text-decoration:none;border-bottom-color:var(--teal2)}
.card > .empty,.card .empty{box-shadow:none;margin-bottom:0}

/* ---------- guide ---------- */
/* A reading page, not a data page. .main is 1160px because tables need it and
   prose does not, so the measure is capped here instead. Written with logical
   properties throughout, which is why the right-to-left section adds nothing. */
.guide{max-width:820px}
.guide p,.guide figcaption{max-width:72ch}

/* The step number is drawn by a counter rather than a list marker so it can be
   the brand circle. unicode-bidi:isolate does for the counter what <bdi> does
   for an interpolated value: without it the digit joins the Arabic bidi run and
   the circle lands on the wrong side of its own line. `decimal` is Western 0123
   in both languages, which is the house rule. */
.guide ol.steps{list-style:none;counter-reset:step;margin:0 0 var(--s5)}
.guide ol.steps > li{counter-increment:step;position:relative;margin-bottom:var(--s3);
  padding-inline-start:34px;max-width:72ch}
.guide ol.steps > li::before{content:counter(step);position:absolute;inset-inline-start:0;top:2px;
  width:23px;height:23px;border-radius:50%;background:var(--teal2);color:#fff;
  font-size:12.5px;font-weight:800;line-height:1;display:flex;align-items:center;
  justify-content:center;font-variant-numeric:tabular-nums;unicode-bidi:isolate}
.guide ol.steps > li b{color:var(--teal)}

/* Callouts. The same tokens as .msg, but a separate class because .msg is the
   flash slot and a guide aside is not a flash. */
.guide .note{background:var(--soft);border:1px solid #CBDBD9;border-radius:var(--r-m);
  padding:12px 16px;margin:0 0 var(--s5);max-width:72ch}
.guide .note b{display:block;color:var(--teal);font-size:11px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;margin-bottom:2px}
.guide .note.care{background:#F1EDDA;border-color:var(--mid-line)}
.guide .note.care b{color:var(--mid)}

/* A phone screenshot at full column width is a wall of glass, so it is capped
   at roughly its own device width. */
.guide figure{margin:0 0 var(--s5)}
.guide figure img{display:block;max-width:100%;height:auto;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--sh)}
.guide figure.phone img{max-width:300px}
.guide figcaption{color:var(--gray);font-size:12.5px;margin-top:7px}

/* ---------- right to left ---------- */
/* Everything above is written with logical properties, so most of the layout
   mirrors by itself. What is left here is the handful of things that cannot:
   a background image's side, a float, a transform, and the glyphs that point. */
[dir="rtl"] select{background-position:left 12px center}
[dir="rtl"] .filterbox summary::after{float:left}
[dir="rtl"] .list.cards td::before{text-align:start}
/* the sidebar's active marker is drawn on the outer edge in both directions */
[dir="rtl"] .side nav a.on::before{border-start-end-radius:0;border-end-end-radius:0;
  border-start-start-radius:3px;border-end-start-radius:3px}

/* Latin islands inside Arabic. Numbers, dates, scores, emails, links and tokens
   have to keep reading left to right, and must not drag neighbouring
   punctuation with them. <bdi> handles values inside sentences; these are the
   containers that hold nothing but such a value. */
.linkbox,.stars,.badge,.tile .n,.brow .val,.spark,.submitbar .prog,table.list .c,table.list .r{unicode-bidi:isolate}
[dir="rtl"] .linkbox{direction:ltr;text-align:left}
/* A comment, a note or a customer name is whatever language the person typed.
   plaintext gives each one its own direction, so an English sentence inside an
   Arabic table keeps its full stop at the end where it belongs. */
[dir="rtl"] table.list td,[dir="rtl"] .q-text,[dir="rtl"] .notes-body,[dir="rtl"] .linkbox{unicode-bidi:plaintext}
/* the rating boxes are always 1 to 5, left to right, in both languages */
.rate{direction:ltr}

/* Arabic reads best with a little more line height and no italic fallback */
[dir="rtl"] body{line-height:1.75}
[dir="rtl"] .page-sub,[dir="rtl"] .muted{line-height:1.7}
/* an English sub-line under an Arabic question is the mirror of .ar-line */
.en-line{direction:ltr;text-align:left;color:var(--gray);font-size:13px;margin-top:1px}
[dir="rtl"] .q-item .q-en{direction:ltr;text-align:left;color:var(--gray);font-size:13.5px;
  margin-bottom:9px;max-width:56ch}

/* ---------- language switcher ---------- */
.langform{display:inline-block;margin:0}
.langbtn{background:none;border:1px solid var(--field-hover);border-radius:99px;
  padding:3px 11px;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--teal2);
  cursor:pointer;line-height:1.6;transition:background var(--t),border-color var(--t),color var(--t)}
.langbtn:hover{background:var(--soft);border-color:var(--teal2);color:var(--teal)}
.side .foot .langform{display:block;margin-bottom:var(--s2)}
.side .foot .langbtn{border-color:rgba(255,255,255,.28);color:#fff}
.side .foot .langbtn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5);color:#fff}
.topbar .langform{flex:none}
.topbar .langbtn{border-color:rgba(255,255,255,.35);color:#fff;padding:5px 10px}
.topbar .langbtn:hover{background:rgba(255,255,255,.14);color:#fff}
.langrow{text-align:center;margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line)}

@media (max-width: 1080px){
  .grid-visit{grid-template-columns:1fr 1fr}
}
@media (max-width: 860px){
  .topbar{display:flex}
  .shell{flex-direction:column}

  /* sidebar becomes an off-canvas drawer */
  .side{position:fixed;top:0;bottom:0;inset-inline-start:0;width:274px;max-width:82vw;z-index:80;
    transform:translateX(-100%);transition:transform .22s ease;overflow-y:auto;padding:18px 0}
  body.nav-open{overflow:hidden}
  body.nav-open .side{transform:translateX(0)}
  /* the drawer comes in from the right when the page reads right to left */
  [dir="rtl"] .side{transform:translateX(100%)}
  [dir="rtl"] body.nav-open .side{transform:translateX(0)}
  .scrim{display:block;position:fixed;inset:0;background:rgba(34,64,61,.55);z-index:75;
    opacity:0;pointer-events:none;transition:opacity .22s ease}
  body.nav-open .scrim{opacity:1;pointer-events:auto}
  .side nav a{padding:12px 12px}
  .side .foot{display:block}

  .main{padding:18px 16px 40px}
  .grid2,.grid3,.grid-visit{grid-template-columns:1fr}
  .brow{grid-template-columns:110px 1fr 46px}
  h1.page-t{font-size:22px}

  /* 16px minimum stops iOS zooming in on focus */
  /* the type selectors are required: a bare `input` here loses to the
     `input[type=text],...` rule above and iOS goes back to zooming on focus */
  input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],
  input[type=month],input[type=file],input[type=checkbox],input[type=radio],select,textarea,.q-note input{font-size:16px}
  input[type=file]::file-selector-button{font-size:15px}
  .seg label{padding:9px 24px;font-size:15px}
  /* short-field caps are a desktop nicety; on a phone a field fills its row */
  input[type=date],input[type=number],input[name="office_no"],input[name="contact_phone"],input[name="city"]{max-width:none}

  /* A 44px floor on everything a thumb has to hit. Desktop sizes are unchanged:
     with a mouse these are comfortable, and .btn.small at 31px is not something
     a PM should have to aim at outdoors, one handed, which is exactly what
     Resume and Discard on the draft banner are. Centring comes from the flex
     box rather than from padding, so no button has to be measured by hand. */
  .btn,.langbtn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .langbtn{padding-inline:14px}
  input[type=text],input[type=email],input[type=password],input[type=date],
  input[type=number],input[type=month],select,input[type=file]{min-height:44px}
  input[type=file]::file-selector-button{min-height:44px}
  .chips a{min-height:44px;display:inline-flex;align-items:center}
  /* the box stays 18px because that is what a checkbox looks like; the label
     around it is the thing being tapped, so that is what gets the height */
  .checks label{min-height:44px}
  table.list td.r a,table.list td.c a{display:inline-block;min-height:44px;line-height:44px}
  table.list td{padding:4px 12px}
  table.list.cards tr:hover td{background:none}

  /* filters collapse behind a summary so the list is not pushed off the screen */
  .filterbox summary{display:block;cursor:pointer;list-style:none;padding:14px 18px;
    font-weight:700;color:var(--teal);font-size:15px}
  .filterbox summary::-webkit-details-marker{display:none}
  .filterbox summary::after{content:"";float:right;width:20px;height:20px;transform:rotate(0);
    transition:transform var(--t);
    background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6' stroke='%23287170' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px 8px no-repeat}
  .filterbox[open] summary::after{transform:rotate(180deg)}
  .filterbox[open] summary{border-bottom:1px solid var(--line)}
  .filterbox:not([open]) > form{display:none}
  .filters .f{flex:1 1 100%}

  /* chips sit under the sticky top bar rather than sliding beneath it */
  .chips{top:60px}
  h2.sec[id]{scroll-margin-top:126px}

  /* submit stays in reach, with the count, instead of living at the page foot */
  .submitbar{position:fixed;inset-inline:0;bottom:0;z-index:60;background:#fff;
    border-top:1px solid var(--line);box-shadow:0 -2px 14px rgba(34,64,61,.10);
    padding:10px 16px;padding-bottom:calc(10px + env(safe-area-inset-bottom));margin-top:0}
  .submitbar .prog{flex:1}
  .submitbar .btn{padding:12px 26px}
  #vform{padding-bottom:92px}
  .thumbs img{height:78px}

  /* lists that read better as cards than as a squeezed table */
  .list.cards{border:none;background:none;border-radius:0;overflow:visible;box-shadow:none}
  .list.cards tr:first-child{display:none}
  .list.cards tr{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r-l);
    margin-bottom:10px;padding:10px 14px;cursor:pointer;box-shadow:var(--sh)}
  .list.cards td,.list.cards tr:nth-child(even) td{display:flex;justify-content:space-between;
    align-items:center;gap:14px;border:none;background:none;padding:3px 0;text-align:start}
  .list.cards td::before{content:attr(data-l);color:var(--gray);font-size:12.5px;font-weight:600;flex:none}
  /* the `tr` is here to out-specify the nth-child(even) rule above, which was
     otherwise pushing every other card's date to the right edge */
  .list.cards tr td:first-child{font-size:16px;padding-bottom:6px;justify-content:flex-start}
  .list.cards td a,.list.cards td.c a{min-height:0;line-height:inherit}
  /* the whole card is tappable, but the link stays for keyboard and screen readers */
  .list.cards td:last-child{justify-content:flex-end;padding-top:6px}
  .list.cards td:last-child a{font-weight:700;min-height:44px;line-height:44px}
  /* a phone screenshot on a phone gets the whole column */
  .guide figure.phone img{max-width:100%}
  .guide ol.steps > li{padding-inline-start:31px}
}
@media (prefers-reduced-motion: reduce){
  .side,.scrim,.btn,input,select,textarea,.seg label,.rate label,.chips a,.side nav a,.filterbox summary::after{transition:none}
}

/* ---------- print ---------- */
/* The Guide is the one page anyone prints from the browser, so this block is
   written for it, but nothing in it is guide-specific: everything that is
   navigation on screen is furniture on paper and goes. print-color-adjust is
   what keeps the teal step circles and the callout fills, because Chrome's
   Background graphics box is off by default; lib/pdf.js sets it for the same
   reason. */
@media print{
  .topbar,.side,.scrim,.chips,.livedot,.livepill,.langform,.btn,.submitbar,.noprint{display:none !important}
  body{background:#fff;font-size:10.5pt;line-height:1.6;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .shell{display:block}
  .main{padding:0;max-width:none}
  .guide{max-width:none}
  a{color:var(--ink);text-decoration:none}
  h1.page-t{font-size:19pt}
  h2.sec{font-size:13pt;margin-top:9mm;break-after:avoid;page-break-after:avoid}
  .guide figure,.guide .note,.guide ol.steps > li,.card,.q-item,.tile{
    break-inside:avoid;page-break-inside:avoid}
  .guide figure img{max-width:150mm;box-shadow:none}
  .guide figure.phone img{max-width:62mm}
  table.list{box-shadow:none}
  @page{size:A4;margin:14mm}
}