/* Riwaq House ERP — interface system.
   One control height, one type scale, one spacing scale. */

:root{
  /* colour */
  --primary:#0F766E; --primary-dark:#0C5F58; --accent:#059669; --accent-dark:#047857;
  --danger:#DC2626; --danger-soft:#FEF2F2; --warn:#B45309;
  --bg:#F6F9F8; --card:#FFFFFF; --fg:#0F1E1C; --fg-2:#48635E; --fg-3:#8AA5A0;
  --border:#DEE9E7; --border-strong:#C9DAD7; --muted:#EEF5F3; --ring:rgba(15,118,110,.16);

  /* spacing */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px;

  /* type */
  --t-xs:11px; --t-sm:12px; --t-md:13px; --t-lg:15px; --t-xl:20px; --t-2xl:26px;

  /* controls — every input, select and button lines up on these */
  --control-h:36px; --control-h-sm:30px; --radius:12px; --radius-lg:16px;
  --shadow:0 1px 2px rgba(15,30,28,.05), 0 1px 3px rgba(15,30,28,.04);
  --shadow-lg:0 12px 32px rgba(15,30,28,.14);
  --sidebar-w:238px; --topbar-h:60px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--bg); color:var(--fg);
  font-family:Inter,"Noto Sans Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:var(--t-md); line-height:1.5; -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
html[dir="rtl"] body{font-family:"Noto Sans Arabic",Inter,system-ui,sans-serif}
h1,h2,h3,h4{margin:0;line-height:1.25;font-weight:600}
h1{font-size:var(--t-xl)} h2{font-size:var(--t-lg)} h3{font-size:var(--t-md)}
p{margin:0 0 var(--s3)}
a{color:var(--primary);text-decoration:none}
svg{width:16px;height:16px;flex:0 0 auto;stroke-width:1.8}
::selection{background:#CFF3EE}

/* ---------- app shell ---------- */
#app{display:flex;min-height:100vh}
#sidebar{
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);background:#0B1F1D;color:#B6CFCA;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:hidden;
}
.nav-scroll{flex:1 1 auto;overflow-y:auto;min-height:0}
.brand{padding:var(--s6) var(--s4) var(--s4);display:flex;align-items:center;gap:10px}
.brand-mark{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,#0F766E,#10B981);
  display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px}
.brand-name{font-weight:600;color:#fff;font-size:13px;letter-spacing:.06em}
.brand-sub{font-size:var(--t-xs);color:#5E7B76;margin-top:1px}
.nav-group{padding:var(--s2)}
.nav-label{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#5E7B76;
  padding:var(--s3) var(--s3) var(--s1)}
.nav-item{display:flex;align-items:center;gap:10px;width:100%;height:34px;padding:0 var(--s3);
  border:0;border-radius:8px;background:none;color:#B6CFCA;font-size:var(--t-md);cursor:pointer;
  text-align:start;transition:background .16s,color .16s}
.nav-item:hover{background:#16302C;color:#fff}
.nav-item.active{background:var(--primary);color:#fff;font-weight:500}
.nav-item svg{width:17px;height:17px}
.nav-item .badge{margin-inline-start:auto;min-width:20px;height:18px;padding:0 6px;border-radius:9px;
  background:#16302C;color:#6EE7B7;font-size:var(--t-xs);font-weight:600;display:grid;place-items:center}
.nav-item.active .badge{background:rgba(255,255,255,.22);color:#fff}
.nav-foot{flex:0 0 auto;padding:var(--s4);border-top:1px solid #16302C;background:#0B1F1D}
.nav-foot .who{font-size:var(--t-sm);color:#fff;font-weight:500}
.nav-foot .role{font-size:var(--t-xs);color:#5E7B76;margin-bottom:var(--s3)}

#main{flex:1;min-width:0;display:flex;flex-direction:column}
#topbar{position:sticky;top:0;z-index:30;height:var(--topbar-h);background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--border);
  padding:0 var(--s6);display:flex;align-items:center;gap:var(--s4)}
.crumb{font-size:var(--t-sm);color:var(--fg-3);line-height:1.2}
.crumb b{display:block;color:var(--fg);font-size:var(--t-lg);font-weight:600}
.crumb .back{cursor:pointer}
.top-actions{margin-inline-start:auto;display:flex;align-items:center;gap:var(--s2)}
#view{padding:var(--s6);max-width:1560px;width:100%}

/* ---------- layout ---------- */
.grid{display:grid;gap:var(--s4)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-main{grid-template-columns:minmax(0,1fr) minmax(300px,340px)}
.row{display:flex;gap:var(--s4);flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:var(--s4)}
.mt4{margin-top:var(--s4)}

/* ---------- card ---------- */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);overflow:hidden}
.card-h{min-height:52px;padding:var(--s3) var(--s4);display:flex;align-items:center;gap:var(--s3);
  border-bottom:1px solid var(--border);flex-wrap:wrap}
.card-h h3{font-size:var(--t-md)}
.card-h .sub{font-size:var(--t-sm);color:var(--fg-3)}
.card-h .right{margin-inline-start:auto;display:flex;gap:var(--s2);align-items:center}
.card-b{padding:var(--s4)}
.card-b.flush{padding:0}
.card-b.scroll{overflow-x:auto}

/* ---------- kpi ---------- */
.kpi{padding:var(--s4);display:flex;flex-direction:column;justify-content:center;min-height:92px;gap:2px}
.kpi .label{font-size:var(--t-sm);color:var(--fg-2)}
.kpi .val{font-size:var(--t-2xl);font-weight:700;letter-spacing:-.6px;line-height:1.15}
.kpi .sub{font-size:var(--t-xs);color:var(--accent);font-weight:600}
.kpi .sub.down{color:var(--danger)}
.kpi .sub.flat{color:var(--fg-3)}

/* ---------- table ---------- */
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:var(--t-md)}
th{text-align:start;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--fg-3);
  font-weight:600;padding:10px var(--s4);border-bottom:1px solid var(--border);white-space:nowrap;
  background:#FBFDFC;position:sticky;top:0}
td{padding:11px var(--s4);border-bottom:1px solid var(--border);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr.clickable{cursor:pointer;transition:background .14s}
tbody tr.clickable:hover{background:var(--muted)}
td.num,th.num{text-align:end;white-space:nowrap}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--t-sm)}
.ltr{direction:ltr;unicode-bidi:isolate}
/* a number or phone stays left-to-right, but sits on the same side as the rest of the form */
html[dir="rtl"] input.ltr,html[dir="rtl"] textarea.ltr{text-align:right}
.cellsub{font-size:var(--t-xs);color:var(--fg-3);margin-top:2px}
.good{color:var(--accent);font-weight:600}
.bad{color:var(--danger);font-weight:600}

/* ---------- pill ---------- */
.pill{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:11px;
  font-size:var(--t-xs);font-weight:600;white-space:nowrap;border:1px solid transparent;
  vertical-align:middle;margin-inline-end:4px}
.pill:last-child{margin-inline-end:0}
.pill.teal{background:#EFFBF8;color:#0F766E;border-color:#CCEDE8}
.pill.blue{background:#EFF6FF;color:#1D4ED8;border-color:#DBEAFE}
.pill.green{background:#ECFDF5;color:#047857;border-color:#D1FAE5}
.pill.amber{background:#FFFBEB;color:#B45309;border-color:#FDE68A}
.pill.red{background:#FEF2F2;color:#B91C1C;border-color:#FECACA}
.pill.gray{background:#F2F6F5;color:#48635E;border-color:#E3ECEA}
.pill.purple{background:#F5F3FF;color:#6D28D9;border-color:#DDD6FE}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto}

/* ---------- controls: one height for everything ---------- */
/* a button, box or list never falls back to the browser font: it takes the page font, Arabic or English */
button,input,select,textarea,label{font-family:inherit}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:var(--control-h);
  padding:0 var(--s4);border-radius:var(--radius);border:1px solid var(--border-strong);
  background:#fff;color:var(--fg);font-size:var(--t-md);font-weight:500;cursor:pointer;
  white-space:nowrap;transition:background .16s,border-color .16s,box-shadow .16s}
.btn:hover{background:var(--muted)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring)}
.btn[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn.primary:hover{background:var(--primary-dark)}
.btn.go{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.go:hover{background:var(--accent-dark)}
.btn.warn{background:#F59E0B;border-color:#F59E0B;color:#fff;font-weight:600}
.btn.warn:hover{background:#D97706;border-color:#D97706}
.btn.danger{color:var(--danger);border-color:#F3C9C9;background:#fff}
.btn.danger:hover{background:var(--danger-soft)}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--muted)}
.btn.sm{height:var(--control-h-sm);padding:0 var(--s3);font-size:var(--t-sm);gap:5px}
.btn.sm svg{width:14px;height:14px}
.btn.block{width:100%}
/* buttons sitting side by side in a cell or a line share one baseline and one gap */
.btn{vertical-align:middle}
td .btn{margin:2px 0}
.btn-row{display:flex;gap:var(--s2);flex-wrap:wrap}
.btn-row.end{justify-content:flex-end}

input[type=text],input[type=password],input[type=number],input[type=date],input[type=time],
input[type=tel],select,textarea{
  width:100%;height:var(--control-h);padding:0 var(--s3);border:1px solid var(--border-strong);
  border-radius:var(--radius);background:#fff;font-size:var(--t-md);color:var(--fg);outline:none;
  transition:border-color .16s,box-shadow .16s}
textarea{height:auto;min-height:76px;padding:9px var(--s3);resize:vertical;line-height:1.5}
select{appearance:none;padding-inline-end:30px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2348635E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:16px;background-position:right 9px center}
html[dir="rtl"] select{background-position:left 9px center}
input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--ring)}
input::placeholder,textarea::placeholder{color:var(--fg-3)}
input[readonly]{background:var(--muted);color:var(--fg-2)}
label{font-size:var(--t-sm);font-weight:500;color:var(--fg-2)}

.field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--s4)}
.field:last-child{margin-bottom:0}
.field .hint{font-size:var(--t-xs);color:var(--fg-3);min-height:14px}
.field .hint.warn{color:var(--warn);font-weight:600}
.field .hint.bad{color:var(--danger);font-weight:600}
.field .hint.ok{color:var(--accent);font-weight:600}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s4)}
.fields .full{grid-column:1 / -1}
.check{display:flex;align-items:center;gap:8px;font-size:var(--t-md);cursor:pointer}
.check input{width:16px;height:16px;accent-color:var(--primary)}

/* ---------- progress ---------- */
.track{display:flex;gap:3px}
.track i{flex:1 1 0;min-width:5px;height:6px;border-radius:3px;background:#E1EBE9;display:block}
.track i.done{background:var(--accent)}
.track i.now{background:var(--primary)}
.track.alt i.done{background:#7C3AED}
.track.alt i.now{background:#A78BFA}
.track-label{font-size:var(--t-xs);color:var(--fg-2);margin-top:5px;white-space:nowrap}
.bar{height:8px;border-radius:4px;background:#E1EBE9;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent)}
.bar i.part{background:#FBBF24}

/* ---------- key/value ---------- */
.kv{display:flex;justify-content:space-between;gap:var(--s4);padding:8px 0;
  border-bottom:1px dashed var(--border);font-size:var(--t-md)}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--fg-2)}
.kv .v{font-weight:600;text-align:end}

/* ---------- notes ---------- */
.note{border-radius:var(--radius);padding:10px var(--s3);font-size:var(--t-sm);
  border:1px solid #FDE68A;background:#FFFBEB;color:#92400E}
.note.info{border-color:#CCEDE8;background:#F0FBF9;color:#115E59}
.note.ok{border-color:#D1FAE5;background:#ECFDF5;color:#065F46}
.note.bad{border-color:#FECACA;background:var(--danger-soft);color:#B91C1C}
.note + .note{margin-top:var(--s2)}

/* ---------- timeline ---------- */
.tl-item{display:flex;gap:var(--s3);padding:var(--s3) 0;border-bottom:1px dashed var(--border)}
.tl-item:last-child{border-bottom:0}
.tl-ico{width:28px;height:28px;border-radius:50%;background:var(--muted);color:var(--primary);
  display:grid;place-items:center;flex:0 0 auto}
.tl-ico svg{width:14px;height:14px}
.tl-ico.amber{background:#FFFBEB;color:var(--warn)}
.tl-ico.red{background:var(--danger-soft);color:var(--danger)}
.tl-ico.blue{background:#EFF6FF;color:#1D4ED8}
.tl-t{font-size:var(--t-md);font-weight:500}
.tl-m{font-size:var(--t-xs);color:var(--fg-3);margin-top:2px}
.tl-right{margin-inline-start:auto;display:flex;align-items:center;gap:var(--s2)}

/* ---------- files ---------- */
.file{display:flex;align-items:center;gap:var(--s3);padding:9px var(--s3);border:1px solid var(--border);
  border-radius:var(--radius);background:#fff;margin-bottom:var(--s2)}
.file:last-child{margin-bottom:0}
.file .ico{width:32px;height:30px;border-radius:6px;background:var(--muted);color:var(--fg-2);
  display:grid;place-items:center;font-size:9px;font-weight:700;letter-spacing:.04em}
.file .nm{font-size:var(--t-sm);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file .mt{font-size:var(--t-xs);color:var(--fg-3);margin-top:1px}
.file .right{margin-inline-start:auto;display:flex;gap:6px}
.dropzone{border:1.5px dashed var(--border-strong);border-radius:var(--radius);padding:var(--s6);
  text-align:center;color:var(--fg-3);font-size:var(--t-sm);cursor:pointer;background:#fff;
  transition:border-color .16s,background .16s}
.dropzone:hover{border-color:var(--primary);background:#F4FBFA}
.dropzone svg{width:18px;height:18px;margin-inline-end:6px;vertical-align:-4px}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);padding:0 var(--s4);overflow-x:auto}
.tab{border:0;background:none;height:42px;padding:0 var(--s3);font-size:var(--t-md);color:var(--fg-2);
  cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;transition:color .16s}
.tab:hover{color:var(--fg)}
.tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:600}

/* ---------- modal ---------- */
.overlay{position:fixed;inset:0;background:rgba(11,31,29,.45);display:grid;place-items:center;
  z-index:80;padding:var(--s4);animation:fade .16s ease}
/* a pop-out takes its room (his order 2026-09-20: comfortable, never compact): 760 wide, 1080 when it holds a table or a list */
.modal{background:#fff;border-radius:14px;width:min(760px,100%);max-height:90vh;display:flex;
  flex-direction:column;box-shadow:var(--shadow-lg);animation:pop .2s cubic-bezier(.2,.8,.3,1)}
.modal.wide{width:min(1080px,100%)}
.modal-h{padding:var(--s4) var(--s5);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:var(--s3)}
.modal-h h3{font-size:var(--t-lg)}
.modal-h .x{margin-inline-start:auto;width:30px;height:30px;border:0;background:none;cursor:pointer;
  color:var(--fg-3);font-size:22px;line-height:1;border-radius:8px}
.modal-h .x:hover{background:var(--muted)}
.modal-h .back{margin-inline-start:0;margin-inline-end:var(--s2);display:inline-flex;align-items:center;justify-content:center}
.modal-h .back svg{width:20px;height:20px}
html[dir="rtl"] .modal-h .back svg{transform:scaleX(-1)}
.modal-b{padding:var(--s6);overflow-y:auto}
.modal-f{padding:var(--s3) var(--s6) var(--s6);display:flex;gap:var(--s2);justify-content:flex-end}
/* a form laid out as a table inside a pop-out: every box gets a real width */
.modal-b table th,.modal-b table td{padding-inline:var(--s2)}
.modal-b table th:first-child,.modal-b table td:first-child{padding-inline-start:0}
.modal-b table th:last-child,.modal-b table td:last-child{padding-inline-end:0}
.modal-b td select{min-width:200px}
.modal-b td input[type=text]{min-width:160px}
.modal-b td input[type=number]{min-width:72px}
.modal-b td input.amt{min-width:130px}
.modal-b .fields{gap:0 var(--s5)}
.modal-b .scroll{overflow-x:auto}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}

/* ---------- toast ---------- */
#toasts{position:fixed;bottom:20px;inset-inline-end:20px;z-index:100;display:flex;
  flex-direction:column;gap:8px;align-items:flex-end}
.toast{background:#0B1F1D;color:#fff;padding:11px var(--s4);border-radius:var(--radius);
  font-size:var(--t-md);box-shadow:var(--shadow-lg);max-width:420px;animation:pop .18s}
.toast.bad{background:#B91C1C}
.toast.ok{background:#047857}

/* ---------- login ---------- */
.login{min-height:100vh;display:grid;place-items:center;padding:var(--s4);
  background:radial-gradient(1200px 600px at 50% -10%, #E6F4F1 0%, var(--bg) 60%)}
.login-card{width:min(400px,100%);background:#fff;border:1px solid var(--border);
  border-radius:16px;box-shadow:var(--shadow-lg);padding:var(--s7)}
.login-brand{display:flex;align-items:center;gap:10px;margin-bottom:var(--s6)}
.login-brand .brand-mark{width:38px;height:38px;font-size:15px}
.login-brand .n{font-weight:700;letter-spacing:.06em}
.login-brand .s{font-size:var(--t-xs);color:var(--fg-3)}
.login-hint{margin-top:var(--s4);font-size:var(--t-xs);color:var(--fg-3);line-height:1.6}

/* ---------- phone frame ---------- */
.phone{width:352px;border:10px solid #0B1F1D;border-radius:34px;overflow:hidden;background:#fff;
  box-shadow:var(--shadow-lg);flex:0 0 auto}
.phone-top{background:#0B1F1D;height:24px}
.phone-b{padding:var(--s4);min-height:560px;background:var(--bg)}
.gpsline{display:flex;align-items:center;gap:6px;font-size:var(--t-xs);color:var(--accent);font-weight:600}
.gpsline svg{width:13px;height:13px}

/* ---------- documents ---------- */
.paper{border:1px solid var(--border);border-radius:var(--radius);padding:var(--s6);background:#fff}
.paper h4{font-size:var(--t-lg);margin-bottom:2px}
.paper .head{display:flex;justify-content:space-between;align-items:flex-start;
  border-bottom:2px solid var(--fg);padding-bottom:var(--s3);margin-bottom:var(--s4)}
.qr{width:88px;height:88px;border:1px solid var(--border);border-radius:8px;margin-top:var(--s4);
  background:repeating-conic-gradient(#0F1E1C 0% 25%, #fff 0% 50%) 50%/13px 13px}
.signrow{display:flex;gap:var(--s5);margin-top:var(--s6)}
.signbox{flex:1;font-size:var(--t-xs);color:var(--fg-3)}
.sig{height:38px;border-bottom:1px solid var(--fg);display:flex;align-items:flex-end;color:var(--primary)}
.sig svg{width:44px;height:28px}

/* ---------- calendar ---------- */
.calbar{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s4)}
.calrange{font-size:var(--t-md);font-weight:600;color:var(--fg-2);margin-inline-start:var(--s2)}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--s2)}
.calcol{background:var(--muted);border-radius:var(--radius);min-height:132px;padding:var(--s2);
  border:1px solid transparent}
.calcol.off{background:var(--bg)}
.calcol.today{border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px var(--ring)}
.calh{display:flex;align-items:baseline;justify-content:space-between;gap:4px;
  font-size:var(--t-xs);color:var(--fg-3);font-weight:600;margin-bottom:var(--s2)}
.calh b{font-size:var(--t-lg);color:var(--fg-2);font-weight:600}
.calcol.today .calh,.calcol.today .calh b{color:var(--primary)}
.calev{display:block;width:100%;text-align:start;border:0;font:inherit;
  background:var(--primary);color:#fff;border-radius:7px;padding:7px var(--s2);
  margin-bottom:var(--s1);min-height:38px;transition:filter .16s}
.calev .nm{display:block;font-size:var(--t-xs);font-weight:600;line-height:1.35}
.calev .sb{display:block;font-size:var(--t-xs);opacity:.82;line-height:1.35}
button.calev{cursor:pointer}
button.calev:hover{filter:brightness(1.08)}
button.calev:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.calev.a{background:#0F766E}
.calev.v{background:#2563EB}
.calev.i{background:var(--primary)}
.calev.w{background:#7C3AED}
.calev.bad{background:var(--danger)}
.calev.mut{background:#fff;color:var(--fg-2);border:1px solid var(--border-strong)}
.calnone{font-size:var(--t-xs);color:var(--fg-3);padding:var(--s1) 2px}
.callegend{display:flex;flex-wrap:wrap;gap:var(--s4);margin-top:var(--s4);
  font-size:var(--t-xs);color:var(--fg-3)}
.callegend span{display:flex;align-items:center;gap:6px}
.callegend i{width:10px;height:10px;border-radius:3px;background:var(--primary)}
.callegend i.a{background:#0F766E} .callegend i.v{background:#2563EB} .callegend i.i{background:var(--primary)}
.callegend i.w{background:#7C3AED} .callegend i.bad{background:var(--danger)}
.callegend i.mut{background:#fff;border:1px solid var(--border-strong)}

/* ---------- charts ---------- */
.hbar{display:flex;flex-direction:column;gap:9px}
.hbar-row{display:flex;align-items:center;gap:var(--s3)}
.hbar-l{width:132px;flex:0 0 132px;font-size:var(--t-sm);color:var(--fg-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbar-t{flex:1;height:16px;background:var(--muted);border-radius:5px;overflow:hidden}
.hbar-t i{display:block;height:100%;border-radius:5px;transition:width .3s}
.hbar-v{width:96px;flex:0 0 96px;text-align:end;font-size:var(--t-sm);font-weight:600}

.chart{margin-top:var(--s1)}
.chart-x{display:flex;justify-content:space-between;margin-top:6px;
  font-size:var(--t-xs);color:var(--fg-3)}
.chart-note{margin-top:var(--s2);font-size:var(--t-xs);color:var(--fg-3)}
.chart-legend{display:flex;flex-wrap:wrap;gap:var(--s4);margin-top:var(--s3);
  font-size:var(--t-xs);color:var(--fg-3)}
.chart-legend span{display:flex;align-items:center;gap:6px}
.chart-legend i{width:10px;height:10px;border-radius:3px}

.vbars{display:flex;align-items:flex-end;gap:var(--s2);height:176px}
.vbar-g{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;min-width:0}
.vbar-set{display:flex;align-items:flex-end;gap:3px;height:150px}
.vbar-set i{flex:1;min-height:2px;border-radius:4px 4px 0 0;transition:height .3s}
.vbar-x{margin-top:6px;text-align:center;font-size:var(--t-xs);color:var(--fg-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.donut-wrap{display:flex;align-items:center;gap:var(--s6);flex-wrap:wrap}
/* the global 16px svg rule must not shrink a chart */
.donut-wrap>svg{width:140px;height:140px;flex:0 0 auto}
.chart svg{width:100%;height:190px;flex:1 1 auto}
.donut-n{font-size:19px;font-weight:600;fill:var(--fg)}
.donut-s{font-size:9px;fill:var(--fg-3)}
.donut-legend{flex:1;min-width:190px;display:flex;flex-direction:column;gap:7px}
.dl{display:flex;align-items:center;gap:var(--s2);font-size:var(--t-sm)}
.dl i{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
.dl-n{flex:1;color:var(--fg-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-v{font-weight:600}
.dl-p{color:var(--fg-3);width:44px;text-align:end}

.stats{display:flex;flex-wrap:wrap;gap:var(--s6)}
.stat{min-width:96px}
.stat-v{font-size:var(--t-xl);font-weight:600;line-height:1.2}
.stat-v.down{color:var(--danger)} .stat-v.good{color:var(--accent)}
.stat-l{font-size:var(--t-xs);color:var(--fg-3);margin-top:2px}
.stat-s{font-size:var(--t-xs);color:var(--fg-2);margin-top:3px}

/* ---------- dashboard editing ---------- */
.dash-bar{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s4)}
.dash-hint{font-size:var(--t-sm);color:var(--fg-3)}
.editing .card{position:relative}
.editing .dash-card{outline:1px dashed var(--border-strong);outline-offset:3px}
.card-tools{display:flex;gap:4px;align-items:center}
.card-tools .btn{height:var(--control-h-sm);padding:0 8px}
.dash-hidden{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chip{display:inline-flex;align-items:center;gap:6px;height:var(--control-h-sm);
  padding:0 10px;border:1px solid var(--border);border-radius:99px;background:var(--card);
  font-size:var(--t-sm);color:var(--fg-2);cursor:pointer}
.chip:hover{border-color:var(--primary);color:var(--primary)}
.chip svg{width:13px;height:13px}
.dash-group{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--fg-3);
  font-weight:600;margin:var(--s6) 0 var(--s3)}

/* ---------- misc ---------- */
.muted{color:var(--fg-3)}
.small{font-size:var(--t-sm)}
.tiny{font-size:var(--t-xs)}
.b{font-weight:600}
.end{text-align:end}
.empty{padding:var(--s7);text-align:center;color:var(--fg-3);font-size:var(--t-md)}
.empty svg{width:22px;height:22px;margin-bottom:var(--s2);opacity:.5}
.section-title{font-size:var(--t-xs);font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  color:var(--fg-3);margin:0 0 var(--s3)}
.split{display:flex;justify-content:space-between;align-items:center;gap:var(--s3)}
.spinner{width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--primary);
  border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--primary);color:#fff;
  display:grid;place-items:center;font-size:var(--t-sm);font-weight:600;flex:0 0 auto}
.stars{letter-spacing:1px;color:#F59E0B}

@media(max-width:1280px){ .g4{grid-template-columns:repeat(2,minmax(0,1fr))} .g-main,.g3{grid-template-columns:1fr} }
/* a phone gets the week as a list of days, never a squeezed 7-column grid */
@media(max-width:1100px){
  .cal{grid-template-columns:1fr;gap:var(--s1)}
  .calcol{min-height:0;display:flex;align-items:flex-start;flex-wrap:wrap;gap:var(--s2)}
  .calh{flex:0 0 62px;flex-direction:column;align-items:flex-start;gap:0;margin-bottom:0}
  .calev{flex:1 1 220px;width:auto;min-height:44px;margin-bottom:0}
  .calnone{flex:1;padding:var(--s2) 0}
}
@media(max-width:940px){
  #app{flex-direction:column}
  #sidebar{width:100%;flex:none;height:auto;position:relative}
  .nav-group{display:flex;flex-wrap:wrap;gap:4px}
  .nav-label{width:100%}
  .nav-item{width:auto}
  .nav-scroll{overflow:visible}
  .nav-foot{margin-top:0}
  #view{padding:var(--s4)}
  .g2,.g4,.fields{grid-template-columns:1fr}
  .phone{width:100%}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* dates are typed as YYYY-MM-DD everywhere */
input.date { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
input.date.bad { border-color: #c0392b; background: #fff5f4; }

/* the date picker */
.datewrap{position:relative;display:flex;align-items:center;width:100%}
.datewrap input.date{width:100%;padding-inline-end:34px}
.dp-open{position:absolute;inset-inline-end:6px;top:50%;transform:translateY(-50%);border:0;background:transparent;
  color:var(--fg-3);cursor:pointer;padding:4px;border-radius:6px;display:flex}
.dp-open:hover{color:var(--primary);background:var(--muted)}
.dp-open svg{width:16px;height:16px}
#dp{position:fixed;z-index:120;width:292px;background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:10px;animation:fade .12s ease;
  font-variant-numeric:tabular-nums}
.dp-head{display:flex;gap:6px;align-items:center;margin-bottom:8px}
.dp-head select{height:30px;flex:1;min-width:0;font-size:var(--t-sm);padding-inline:8px 22px;background-size:12px;background-position:right 6px center}
.dp-head select:first-of-type{flex:1.4}
.dp-nav{width:30px;height:30px;border:1px solid var(--border);background:var(--card);border-radius:8px;
  cursor:pointer;font-size:18px;line-height:1;color:var(--fg-2)}
.dp-nav:hover{background:var(--muted);color:var(--primary)}
/* seven equal columns whatever sits inside them — a wide cell must never push the others out of the box */
.dp-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;direction:ltr;width:100%}
.dp-dow{display:block;min-width:0;text-align:center;font-size:var(--t-xs);color:var(--fg-3);padding:4px 0 6px;text-transform:uppercase;letter-spacing:.04em}
.dp-cell{display:block;width:100%;min-width:0;height:34px;padding:0;margin:0;border:0;background:transparent;border-radius:8px;cursor:pointer;
  font-size:var(--t-md);font-family:inherit;color:var(--fg);text-align:center;line-height:34px}
.dp-cell:hover{background:var(--muted);color:var(--primary)}
.dp-cell.today{box-shadow:inset 0 0 0 1px var(--primary)}
.dp-cell.sel,.dp-cell.sel:hover{background:var(--primary);color:#fff;font-weight:600}
.dp-cell.empty{pointer-events:none}
.dp-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}
.dp-value{font-size:var(--t-sm);color:var(--fg-2);direction:ltr}

/* ---------- money boxes and place boxes ---------- */
input.amt{text-align:end;font-variant-numeric:tabular-nums}
input.amt.bad,input.place.bad{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-soft)}
.placewrap{display:flex;width:100%}
.placewrap input.place{width:100%}
#pp{position:fixed;z-index:120;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:0 12px 32px rgba(0,0,0,.12);padding:4px;max-height:300px;overflow:auto;corner-shape:squircle}
.pp-item{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;border:0;background:transparent;
  padding:8px 10px;border-radius:8px;cursor:pointer;font-size:var(--t-md);color:var(--fg);text-align:start}
.pp-item:hover{background:var(--muted);color:var(--primary)}
.pp-sub{font-size:var(--t-xs);color:var(--fg-3);white-space:nowrap}
.pp-empty{padding:10px;font-size:var(--t-sm);color:var(--fg-3)}

/* ---------- quick filters above a list ---------- */
.qf{display:flex;flex-wrap:wrap;gap:6px;padding:10px 16px;border-bottom:1px solid var(--border);background:var(--muted)}
.qf-chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border:1px solid var(--border);border-radius:999px;
  background:var(--card);font-size:var(--t-sm);color:var(--fg-2);cursor:pointer;corner-shape:squircle}
.qf-chip:hover{border-color:var(--primary);color:var(--primary)}
.qf-chip.on{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:600}
.qf-n{font-size:var(--t-xs);opacity:.75}

/* ---------- choice chips: radios and checkboxes that look like buttons ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 6px}
.chip{position:relative;cursor:pointer;display:inline-flex;border:0;padding:0;margin:0;background:transparent;height:auto;box-shadow:none}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{display:inline-flex;align-items:center;height:34px;padding:0 14px;border:1px solid var(--border);border-radius:999px;
  background:var(--card);font-size:var(--t-md);color:var(--fg);transition:all .12s}
.chip:hover span{border-color:var(--primary);color:var(--primary)}
.chip input:checked + span{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:600}
.chip input:disabled + span{opacity:.4;cursor:not-allowed}
.chip.nc input:checked + span{background:var(--fg-2);border-color:var(--fg-2)}

/* time boxes: hour : minute a.m./p.m. */
.timewrap{display:inline-flex;align-items:center;gap:4px;direction:ltr}
.timewrap select{height:var(--control-h);min-width:0;padding-inline:8px}
.timewrap .tp-h,.timewrap .tp-m{width:64px}
.timewrap .tp-ap{width:74px}
.tp-colon{color:var(--fg-3);font-weight:600}

/* the brand logo */
.brand{flex-direction:column;align-items:flex-start;gap:6px}
.brand-logo{height:34px;width:auto;max-width:100%;display:block}
.brand-logo.lg{height:52px}
.login-brand{flex-direction:column;align-items:center;gap:8px;text-align:center}
.brand-logo{background:#FFF8E8;padding:6px 10px;border-radius:8px;box-sizing:content-box}

/* iOS-style corners: continuous curves, larger radii. Safari 26 draws the squircle; others fall back to round. */
.card,.btn,input,select,textarea,.modal,.note,.kpi,.stat,#dp,.dp-cell,.dp-nav,.tab,.pill,.tl-ico,.avatar,.brand-logo,.login-card,.file,.toast{corner-shape:squircle}
.modal,.login-card{border-radius:20px}
.btn,input,select,textarea{border-radius:var(--radius)}
.pill{border-radius:999px}

/* drag and drop onto any upload button, and the drop area on the request form — his order 2026-09-13 */
.drop-ok{outline:2px dashed var(--primary);outline-offset:2px}
.drop-over{background:var(--ring)!important;outline:2px solid var(--primary)}
.dropzone{border:2px dashed var(--border);border-radius:var(--radius);padding:18px;text-align:center;cursor:pointer;
  font-size:var(--t-sm);color:var(--fg-2);background:var(--muted);display:flex;align-items:center;justify-content:center;gap:8px}
.dropzone:hover{border-color:var(--primary);color:var(--primary)}
.calh .calbook{border:0;background:transparent;color:var(--primary);cursor:pointer;font:inherit;font-size:var(--t-xs);padding:0 4px;opacity:.75}
.calh .calbook:hover{opacity:1;text-decoration:underline}

/* ---------- Catalogue → Factory prices (the kitchen builder's price back end, 2026-09-19) ---------- */
.fp-head{display:grid;grid-template-columns:2fr 1.6fr 1.6fr;gap:var(--s3);align-items:end}
.fp-markup-card{margin-bottom:var(--s4)}
.fp-row{display:flex;gap:6px;align-items:center}
.fp-row input{width:90px}
.fp-table td{vertical-align:middle}
.fp-table tr.fp-group td{background:var(--muted);font-weight:600;font-size:var(--t-sm);text-transform:uppercase;letter-spacing:.04em;color:var(--fg-2)}
.fp-table input.fp-price{width:120px;text-align:end}
.fp-table input.fp-note{width:100%}
@media (max-width:900px){.fp-head{grid-template-columns:1fr 1fr}}
.fp-markup{max-width:560px;margin-bottom:var(--s3)}
.fp-markup .fp-row input{width:110px}
/* the kitchen's cabinets on the quotation paper */
table.kq td{vertical-align:middle}
.kq-d{width:92px;padding-inline:6px;text-align:center}
.kq-d svg{display:inline-block}
.kq-m{width:150px}
.kq-f{display:flex;align-items:center;gap:8px;padding:2px 0;font-size:var(--t-sm)}
.kq-f i{flex:none;width:26px;height:26px;border-radius:8px;corner-shape:squircle;border:1px solid var(--border);background-size:cover;background-position:center}
.kq-f small{display:block;color:var(--fg-3);font-size:10px;text-transform:uppercase;letter-spacing:.05em}
/* a finished kitchen opened to look at: nothing to add, remove or change */
.kb.readonly #add,.kb.readonly .rm,.kb.readonly .dup{display:none}
.kb.readonly input.cabno{pointer-events:none;background:transparent;border-color:transparent}

/* ---------- the Requests pop-out: one line per item — tick · note · file (his order 2026-09-20) ---------- */
.req-row{padding:var(--s3) 0;border-top:1px solid var(--border)}
.req-pick{border:1px solid var(--border);border-radius:var(--radius);corner-shape:squircle;overflow:hidden;margin-top:var(--s2);background:var(--card)}
.req-group{border-top:1px solid var(--border)}
.req-group:first-child{border-top:0}
.req-cat{display:flex;width:100%;justify-content:flex-start;align-items:center;gap:var(--s3);padding:12px var(--s4);border:0;background:var(--muted);font-size:var(--t-xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--fg-2);cursor:pointer;user-select:none;text-align:start;transition:background .18s}
.req-cat:hover{background:#E9EFEE}
.req-cat:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.req-cat::before{content:'';width:7px;height:7px;border-right:1.5px solid var(--fg-3);border-bottom:1.5px solid var(--fg-3);transform:rotate(-45deg);margin-inline-end:8px;flex:none;transition:transform .22s cubic-bezier(.2,.8,.3,1)}
html[dir="rtl"] .req-cat::before{transform:rotate(135deg)}
.req-group.open .req-cat::before,html[dir="rtl"] .req-group.open .req-cat::before{transform:rotate(45deg)}
/* the fold slides: a grid row from 0fr to 1fr, so the height animates without measuring it */
.req-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .24s cubic-bezier(.2,.8,.3,1)}
.req-group.open .req-body{grid-template-rows:1fr}
.req-lines{min-height:0;overflow:hidden}
.req-group:not(.open) .req-lines{visibility:hidden;transition:visibility 0s .24s}
.req-group.open .req-lines{visibility:visible;transition:none}
.req-cat>span:first-child{display:flex;align-items:center}
.req-sum{display:flex;gap:var(--s2);align-items:center;text-transform:none;letter-spacing:0;font-weight:500;margin-inline-start:auto}
.req-sum-n{color:var(--primary);font-weight:700}
.req-group.picked .req-cat{background:#E3F0ED;color:var(--primary-dark)}
.req-line{display:grid;grid-template-columns:18px minmax(150px,220px) 72px 1fr 52px;align-items:center;gap:var(--s3);padding:8px var(--s4);border-top:1px solid var(--border);margin:0;font-weight:400}
.req-line .req-name{cursor:pointer}
.req-line .it-qty{height:var(--control-h-sm);font-size:var(--t-sm);text-align:center;padding:0 4px;min-width:0}
.req-line .req-files{grid-column:2 / -1;gap:6px}
.req-line .req-files:empty{display:none}
.req-line:hover{background:var(--bg)}
.req-line.have .req-name{color:var(--fg-2)}
.req-line input[type=checkbox]{width:16px;height:16px;margin:0;accent-color:var(--primary)}
.req-line .req-name{font-size:var(--t-md);color:var(--fg)}
.req-line .it-note{height:var(--control-h-sm);font-size:var(--t-sm);min-width:0}
.req-line .it-file{height:var(--control-h-sm);padding:0 var(--s2);justify-content:center;gap:4px}
.req-line .it-file.has{background:#ECFDF5;border-color:var(--accent-dark);color:var(--accent-dark)}
@media (max-width:640px){.req-line{grid-template-columns:18px 1fr 72px 52px}.req-line .it-note{grid-column:2 / span 3}}

/* the kitchen's two tabs in the builder bar — Room and layout · Cabinets (his order 2026-09-24) */
.kb-tabs{display:inline-flex;background:#DEEAE8;border-radius:12px;padding:2px;gap:2px;flex:none;corner-shape:squircle}
.kb-tabs button{height:30px;padding:0 16px;border:0;border-radius:10px;background:transparent;color:#36534E;font:inherit;font-size:13px;cursor:pointer;white-space:nowrap;corner-shape:squircle}
.kb-tabs button[aria-selected=true]{background:#fff;color:#08201D;font-weight:600;box-shadow:0 1px 2px rgba(8,32,29,.08)}
.kb-tabs button[hidden]{display:none}
.kl-pane{display:block;overflow:hidden}
.kl-pane[hidden],.kb-body[hidden]{display:none!important}