:root {
  --soft: #f3efe8;
  --bg: #f5f2ec; --card: #fff; --ink: #2b3836; --muted: #7a8582; --line: #e4ddd0;
  --brand: #4f6b69; --brand-d: #3b5452; --brand-l: #eaefed;
  --danger: #c9605f; --warn: #cc8a3c; --ok: #4a9d6f;
  --radius: 12px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "Segoe UI", Tahoma, "Noto Sans Arabic", system-ui, -apple-system, sans-serif;
  background: var(--bg); color: var(--ink); font-size: 15px; line-height: 1.5;
}
a { color: var(--brand-d); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 24px; margin: 0 0 4px; }
h2 { font-size: 17px; margin: 0 0 12px; }
.muted, small { color: var(--muted); }

/* layout */
#app { display: flex; min-height: 100vh; }
#sidebar {
  width: 230px; flex: none; background: #3f5553; color: #e4f1f1; padding: 18px 12px;
  display: flex; flex-direction: column; gap: 14px; position: sticky; top: 0; height: 100vh;
}
.brand { font-size: 19px; font-weight: 700; padding: 4px 10px 12px; border-bottom: 1px solid #5d7775; }
#sidebar nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
#sidebar nav a {
  color: #d3e8e9; padding: 10px 12px; border-radius: 8px; display: flex; gap: 10px; align-items: center;
}
#sidebar nav a:hover { background: #4f6b69; text-decoration: none; }
#sidebar nav a.active { background: #b8955f; color: #fff; }
.lang { background: transparent; border: 1px solid #6f8987; color: #d3e8e9; padding: 8px; border-radius: 8px; cursor: pointer; font: inherit; }
.lang:hover { background: #4f6b69; }
#content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#main { flex: 1; padding: 10px 30px 60px; min-width: 0; width: 100%; max-width: 1400px; }

/* cards, headings */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; }
.head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.head h1 { margin: 0; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid2 > .card { margin-bottom: 0; }
.grid2 { margin-bottom: 16px; }
.empty { color: var(--muted); text-align: center; padding: 18px 0; margin: 0; }
.error { color: var(--danger); }

/* stats */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 16px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.stat small { display: block; margin-bottom: 4px; }
.stat b { font-size: 22px; }
.stat.warn b { color: var(--warn); }
.stat.due b { color: var(--danger); }

/* buttons & inputs */
.btn {
  border: 1px solid var(--line); background: var(--card); color: var(--ink); padding: 8px 16px; border-radius: 8px;
  cursor: pointer; font: inherit;
}
.btn:hover { background: var(--soft); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: var(--brand-d); }
.btn.danger { color: var(--danger); border-color: #f1c4c4; }
.btn.danger:hover { background: #fdf0f0; }
.btn.sm { padding: 4px 10px; font-size: 13px; }
.btn:disabled { opacity: .6; cursor: default; }
.icon { border: 0; background: transparent; cursor: pointer; color: var(--danger); font-size: 15px; padding: 2px 6px; border-radius: 6px; }
.icon:hover { background: #fdf0f0; }
input, select, textarea {
  font: inherit; color: inherit; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 8px; background: var(--card); width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand-l); border-color: var(--brand); }
.search { max-width: 420px; margin-bottom: 14px; }
.inline-input { width: auto; }

/* tables */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: start; font-size: 13px; color: var(--muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 9px 10px; border-bottom: 1px solid #eef2f6; vertical-align: middle; }
.tbl tbody tr:hover { background: var(--soft); }
.tbl tr.click { cursor: pointer; }
.tbl td.num, .tbl th.num { text-align: end; white-space: nowrap; }
.tbl-wrap { overflow-x: auto; }
.due { color: var(--danger); font-weight: 600; }
.ok { color: var(--ok); }
.warn { color: var(--warn); font-weight: 600; }

/* badges */
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--c, #e2e8f0); color: #fff; white-space: nowrap; }
.st-scheduled { --c: #1f9bd7; } .st-confirmed { --c: #1d3f94; } .st-checked_in { --c: #22b8a6; }
.st-in_progress { --c: #6a2fa3; } .st-completed { --c: #1b6b3a; } .st-delayed { --c: #f28c1e; }
.st-cancelled { --c: #d6247a; } .st-no_show { --c: #7d1616; } .st-waiting_list { --c: #b9bc2c; }
.badge.low { --c: var(--warn); } .badge.out { --c: var(--danger); }

/* patient header & tabs */
.back { display: inline-block; margin-bottom: 10px; }
.phead { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.phead > div:first-child { flex: 1; min-width: 220px; }
.pbal { text-align: center; padding: 6px 18px; border-radius: 10px; background: var(--brand-l); }
.pbal b { display: block; font-size: 20px; }
.pbal.due { background: #fdecec; }
.pbal.due b { color: var(--danger); }
.alert-warn { margin-top: 8px; background: #fff4e0; color: #8a4b00; border: 1px solid #f5d9a6; padding: 6px 12px; border-radius: 8px; display: inline-block; }
.tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--line); margin-bottom: 16px; flex-wrap: wrap; }
.tabs a { padding: 10px 18px; color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.tabs a:hover { text-decoration: none; color: var(--ink); }
.tabs a.active { color: var(--brand-d); border-bottom-color: var(--brand); font-weight: 600; }
.dl { display: grid; grid-template-columns: 170px 1fr; gap: 10px 16px; margin: 0; }
.dl dt { color: var(--muted); }
.dl dd { margin: 0; white-space: pre-wrap; }

/* modal */
.overlay { position: fixed; inset: 0; background: rgba(15, 30, 40, .45); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; z-index: 50; }
.modal { background: var(--card); border-radius: 14px; padding: 22px; width: 100%; max-width: 620px; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field > span { font-size: 13px; color: var(--muted); }
.field.wide, .actions.wide { grid-column: 1 / -1; }
.field small { margin-top: 2px; }
.actions { display: flex; gap: 8px; justify-content: flex-end; }
.hist { margin-bottom: 14px; border: 1px solid var(--line); border-radius: 10px; max-height: 190px; overflow-y: auto; }
.hrow { display: flex; gap: 12px; align-items: center; padding: 8px 12px; border-bottom: 1px solid #eef2f6; }
.hrow:last-child { border-bottom: 0; }
.hrow span:nth-child(3) { flex: 1; }

/* toast */
#toast { position: fixed; bottom: 24px; inset-inline-start: 50%; transform: translateX(-50%) translateY(20px); background: #3f5553; color: #fff; padding: 10px 20px; border-radius: 10px; opacity: 0; pointer-events: none; transition: .25s; z-index: 100; }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.bad { background: var(--danger); }

/* dental chart */
.chart { direction: ltr; display: flex; flex-direction: column; gap: 0; align-items: center; padding: 8px 0 4px; overflow-x: auto; background: linear-gradient(#fff, #fff); }
.jaw-label { color: var(--muted); font-size: 13px; margin: 4px 0; }
.arch { display: flex; align-items: stretch; width: 100%; max-width: 1060px; box-sizing: border-box; background: linear-gradient(to bottom, rgba(253,236,238,.0), rgba(250,228,232,.5) 55%, rgba(253,236,238,.0)); padding: 0 6px; }
.arch.lower { margin-top: 0; }
.quad { display: flex; flex: 1 1 0; min-width: 0; }
.midline { width: 1px; background: #cfd6de; margin: 0 4px; }
.tooth { flex: 1 1 0; min-width: 0; max-width: 66px; border: 0; background: transparent; cursor: pointer; display: flex; flex-direction: column; align-items: center; padding: 0; font: inherit; color: var(--ink); position: relative; }
.tooth:hover { background: rgba(139, 92, 246, .10); }
.tooth svg { display: block; }
.tooth svg.side { width: 100%; height: auto; aspect-ratio: 60/136; filter: drop-shadow(0 1px 1.5px rgba(90,70,40,.25)); }
.tooth svg.occ { width: 90%; height: auto; aspect-ratio: 60/52; margin: 2px 0; filter: drop-shadow(0 1px 1px rgba(90,70,40,.22)); }
.tooth svg .shine { fill: url(#tg-shine); stroke: none; pointer-events: none; }
.tooth .tn { font-size: 12px; color: #6b7280; padding: 3px 0; min-width: 100%; text-align: center; }
.tooth svg .gum2 { fill: url(#tg-gum); stroke: none; }
.tooth svg .cshade, .tooth svg .rshade { fill: url(#tg-side); stroke: none; pointer-events: none; }
.tooth svg .neck { fill: url(#tg-neck); stroke: none; pointer-events: none; }
.tooth svg .oshade { fill: url(#tg-occ); stroke: none; pointer-events: none; }
.tooth svg .cusp { fill: #fff; opacity: .4; stroke: none; }
.tooth svg path { stroke: #9aa5ad; stroke-width: .8; stroke-linejoin: round; }
.tooth svg .root { fill: var(--rc, #f4edc2); stroke: #cfc48e; }
.tooth svg .pulp { fill: none; stroke: #dcc9a0; stroke-width: .9; }
.tooth svg .crown { fill: var(--cc, #fdf8ee); }
.tooth svg .fis { fill: none; stroke: rgba(80, 105, 130, .6); stroke-width: .9; stroke-linecap: round; }
.t-none { --c: #fdf8ee; } .t-planned { --c: #e89a9a; } .t-incomplete { --c: #efcb7d; } .t-completed { --c: #8fd0a6; } .t-existing { --c: #c1b8e8; }
.tooth.cs-none { --cc: #fffefa; } .tooth.cs-planned { --cc: #e89a9a; } .tooth.cs-incomplete { --cc: #efcb7d; } .tooth.cs-completed { --cc: #8fd0a6; } .tooth.cs-existing { --cc: #c1b8e8; }
.tooth.rs-none { --rc: #f4edc2; } .tooth.rs-planned { --rc: #e89a9a; } .tooth.rs-incomplete { --rc: #efcb7d; } .tooth.rs-completed { --rc: #8fd0a6; } .tooth.rs-existing { --rc: #c1b8e8; }
.tooth:not(.t-none) .tn { background: var(--c); color: #1b2733; font-weight: 700; border-radius: 4px; }
.tooth.c-extracted svg { opacity: .35; }
.tooth.c-extracted svg path { stroke-dasharray: 3 2; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center; margin-top: 12px; font-size: 13px; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--c); border: 1px solid #5b6b7c55; margin-inline-end: 5px; vertical-align: -1px; }
.c-healthy { --c: #86efac; } .c-caries { --c: #ef4444; } .c-filling { --c: #3b82f6; } .c-root_canal { --c: #a855f7; }
.c-crown { --c: #eab308; } .c-bridge { --c: #ec4899; } .c-implant { --c: #06b6d4; } .c-extracted { --c: #9ca3af; }
.c-fracture { --c: #b45309; } .c-other { --c: #f97316; } .c-none { --c: #fff; }
.badge.c-healthy, .badge.c-crown { color: #1b2733; }

.print-only { display: none; }

#menuBtn { display: none; }
@media (max-width: 860px) {
  #app { flex-direction: column; }
  /* phone: the side menu slides in from the start edge behind the ☰ button */
  #menuBtn { display: inline-flex; }
  #sidebar { position: fixed; top: 0; bottom: 0; inset-inline-start: 0; width: 250px; max-width: 80vw; height: 100vh; z-index: 60; overflow-y: auto; transform: translateX(var(--nav-x, -105%)); transition: transform .2s; flex-direction: column; flex-wrap: nowrap; align-items: stretch; box-shadow: 0 0 30px rgba(0,0,0,.35); }
  html[dir=rtl] #sidebar { --nav-x: 105%; }
  body.nav-open #sidebar { transform: none; }
  #sidebar nav { flex-direction: column; flex-wrap: nowrap; }
  #topbar { gap: 8px; padding: 8px 10px; flex-wrap: wrap; }
  .brand { border: 0; padding: 14px 16px; }
  #main { padding: 18px 14px 50px; }
  .grid2, .form-grid { grid-template-columns: 1fr; }
  .dl { grid-template-columns: 1fr; gap: 2px 0; }
  .dl dd { margin-bottom: 8px; }
}
@media print {
  body { background: var(--card); }
  #sidebar, #topbar, .no-print, .tabs, .back, #toast { display: none !important; }
  .print-only { display: block; }
  #main { padding: 0; max-width: none; }
  .card, .stat { border-color: #bbb; break-inside: avoid; }
}

/* top bar */
#topbar { display: flex; align-items: center; gap: 16px; padding: 10px 30px; background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.gsearch { position: relative; width: 320px; max-width: 40%; }
.gsearch input { background: var(--soft); border-color: transparent; }
.gres { position: absolute; top: 100%; inset-inline: 0; margin-top: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.12); overflow: hidden; z-index: 30; }
.gres[hidden] { display: none; }
.gres a { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; color: var(--ink); }
.gres a:hover { background: var(--brand-l); text-decoration: none; }
.tb-title { flex: 1; font-weight: 700; font-size: 17px; color: var(--brand-d); }

/* dashboard */
.dfilters { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; }
.dfilters label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.dnav { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--brand); border-radius: 10px; padding: 4px 8px; }
.dnav input { border: 0; width: auto; padding: 4px; }
.dnav .btn { border: 0; padding: 6px 10px; }
.clock { margin-inline-start: auto; font-size: 22px; font-weight: 700; color: var(--brand-d); background: var(--brand-l); padding: 8px 18px; border-radius: 10px; direction: ltr; }
.dgrid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; margin-bottom: 16px; align-items: start; }
.dgrid > .card { margin-bottom: 0; }
.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.card-head h2 { margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.chip { border: 0; background: var(--c); color: #fff; padding: 5px 12px; border-radius: 6px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; opacity: .95; }
.chip.dim { opacity: .35; }
.chip.on { outline: 3px solid var(--c); outline-offset: 2px; }
.acard { display: flex; justify-content: space-between; gap: 12px; background: var(--c); color: #fff; border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; }
.acard a { color: #fff; font-size: 17px; font-weight: 700; }
.a-body { min-width: 0; }
.a-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.tag { display: inline-block; background: rgba(255,255,255,.22); padding: 2px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; margin-inline-start: 8px; }
.a-tags .tag { margin: 0; }
.tag.b { background: rgba(255,255,255,.9); color: var(--c); margin: 0; }
.a-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: end; }
.a-top { display: flex; gap: 8px; align-items: center; }
.ib { border: 0; background: rgba(255,255,255,.2); color: #fff; width: 28px; height: 28px; border-radius: 6px; cursor: pointer; font-size: 15px; }
.ib:hover { background: rgba(255,255,255,.35); }
.a-time { font-weight: 700; font-size: 15px; }
.a-status { width: auto; padding: 3px 8px; font-size: 13px; background: rgba(255,255,255,.92); color: var(--ink); border-color: transparent; }
.chk { display: flex; gap: 8px; align-items: center; font-size: 13px; cursor: pointer; }
.chk input { width: auto; }
.inv { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid #eef2f6; }
.inv:last-child { border-bottom: 0; }
.ring { --p: 0; width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(var(--ok) calc(var(--p) * 1%), #e5e7eb 0); }
.ring span { background: var(--card); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.inv-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.inv-info a { font-weight: 700; }
.inv-amt { text-align: end; font-size: 14px; line-height: 1.7; white-space: nowrap; }
@media (max-width: 1000px) { .dgrid { grid-template-columns: 1fr; } .gsearch { max-width: none; flex: 1; } .tb-title { display: none; } }

/* logo */
.brand { display: flex; align-items: center; gap: 10px; }
.logo { background: var(--brand); color: #fff; font-weight: 800; letter-spacing: 1px; font-size: 15px; padding: 6px 9px; border-radius: 8px; direction: ltr; flex: none; }

/* segmented buttons */
.seg { display: inline-flex; border: 1px solid #cbd5e1; border-radius: 8px; overflow: hidden; background: var(--card); }
.seg button { border: 0; background: transparent; padding: 6px 16px; font: inherit; cursor: pointer; color: var(--ink); }
.seg button + button { border-inline-start: 1px solid #cbd5e1; }
.seg button.on { background: var(--brand); color: #fff; }
.seg button.on-yes { background: var(--danger); color: #fff; }
.seg button.on-no { background: var(--ok); color: #fff; }

/* medical history */
.qgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 36px; margin-bottom: 22px; }
.q { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid #eef2f6; }
.mchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mchip { background: #fde8e8; color: #9b1c1c; border: 1px solid #f5bcbc; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.mchip.al { background: #fff4e0; color: #8a4b00; border-color: #f5d9a6; }

/* chart category bar */
.catbar { display: flex; flex-wrap: wrap; gap: 6px; }
.catbtn { border: 1px solid var(--line); background: var(--card); padding: 6px 12px; border-radius: 8px; cursor: pointer; font: inherit; font-size: 13px; display: flex; gap: 6px; align-items: center; }
.catbtn:hover { background: var(--brand-l); }
.catbtn.on { background: var(--brand); color: #fff; border-color: var(--brand); }

/* calendar */
.calwrap { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: auto; max-height: calc(100vh - 250px); }
.calhead, .calbody { display: grid; min-width: max-content; }
.calhead { position: sticky; top: 0; background: var(--card); z-index: 3; border-bottom: 1px solid var(--line); }
.colhead { padding: 10px 8px; text-align: center; font-weight: 600; border-inline-start: 1px solid var(--line); }
.today-h { color: var(--brand-d); background: var(--brand-l); }
.gutter { position: relative; color: var(--muted); font-size: 11px; }
.gutter span { position: absolute; inset-inline-end: 6px; transform: translateY(-50%); white-space: nowrap; direction: ltr; }
.gutter span:first-child { transform: none; }
.col { position: relative; border-inline-start: 1px solid var(--line); cursor: pointer;
  background-image: repeating-linear-gradient(to bottom, #dfe5ec 0, #dfe5ec 1px, transparent 1px, transparent calc(var(--hr) / 2), #f0f3f7 calc(var(--hr) / 2), #f0f3f7 calc(var(--hr) / 2 + 1px), transparent calc(var(--hr) / 2 + 1px), transparent var(--hr)); }
.col:hover { background-color: #fafcff; }
.ev { position: absolute; background: var(--c); color: #fff; border-radius: 6px; padding: 3px 7px; font-size: 12px; overflow: hidden; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.3); line-height: 1.3; z-index: 1; }
.ev b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev span { display: block; opacity: .95; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev.dim { opacity: .45; }
.nowline { position: absolute; inset-inline: 0; height: 2px; background: #e11d48; z-index: 2; pointer-events: none; }
.legend i.st-scheduled, .legend i[class^="st-"] { background: var(--c); }

/* lab */
.sm-chip { font-size: 11px; padding: 1px 8px; margin-top: 4px; }
.chip.lab-chip.on { outline-offset: 2px; }
@media (max-width: 860px) { .qgrid { grid-template-columns: 1fr; } }

.ev .evt span { display: inline; }

/* settings hub */
.set-layout{display:grid;grid-template-columns:230px 1fr;gap:18px;align-items:start}
.set-nav{display:flex;flex-direction:column;gap:4px;background:var(--card,#fff);border:1px solid var(--line,#e3e8ee);border-radius:12px;padding:8px;position:sticky;top:12px}
.set-nav a{padding:10px 12px;border-radius:8px;color:inherit;text-decoration:none;font-weight:600}
.set-nav a:hover{background:rgba(0,0,0,.04)}
.set-nav a.active{background:#4f6b69;color:#fff}
.set-body{min-width:0}
.acts{white-space:nowrap;text-align:end}
.btn.danger{color:#c0392b;border-color:#e6b0aa}
@media(max-width:800px){.set-layout{grid-template-columns:1fr}.set-nav{flex-direction:row;flex-wrap:wrap;position:static}}
#sidebar .sub{display:none;margin:2px 14px 6px;padding-inline-start:12px;border-inline-start:2px solid rgba(255,255,255,.18)}
#sidebar .sub.open{display:block}
#sidebar .sub a{padding:6px 10px;font-size:13px;opacity:.8}
#sidebar .sub a.active{opacity:1;font-weight:700;background:rgba(255,255,255,.1)}
.tbl .ib{color:#475569;background: var(--soft);border:1px solid var(--line);border-radius:6px;cursor:pointer;padding:2px 7px;margin-inline-start:4px}
.tbl .ib:hover{background:#e2e8f0}
.fin-layout{display:block}.fin-layout .set-nav{display:none}
.chip-s{display:inline-flex;align-items:center;gap:6px;background: var(--soft);border:1px solid var(--line);border-radius:999px;padding:2px 4px 2px 10px;margin:2px;font-size:13px}
.chip-s.best{background:#e6f6f0;border-color:#9bd5bf}
.chip-s .x{border:0;background:none;cursor:pointer;color:#94a3b8;font-size:15px;line-height:1}
.invimg{max-width:420px;max-height:340px;border:1px solid var(--line);border-radius:10px;display:block}
.badge.st-scheduled{background:#3b82f6;color:#fff}.badge.st-completed{background:#16a34a;color:#fff}
.acts2{white-space:nowrap}

/* printable lab work order — A5 */
#printSheet{position:fixed;inset:0;background:rgba(15,30,40,.55);z-index:200;overflow:auto;padding:20px}
.ps-bar{display:flex;gap:10px;justify-content:center;margin-bottom:14px}
.ps-page{background: var(--card);color:#111;width:148mm;min-height:210mm;margin:0 auto;padding:10mm;border-radius:4px;box-shadow:0 8px 30px rgba(0,0,0,.3);box-sizing:border-box}
.ps-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid #4f6b69;padding-bottom:8px;margin-bottom:14px}
.ps-clinic{font-size:17px;font-weight:800;color:#3b5452}
.ps-title{font-size:22px;font-weight:800;margin-top:2px}
.ps-meta{font-size:12px;line-height:1.8;text-align:end}
.ps-tbl{width:100%;border-collapse:collapse}
.ps-tbl th{width:30%;text-align:start;background: var(--soft);padding:9px 10px;border:1px solid #cbd5e1;font-size:12px;color:#334155}
.ps-tbl td{padding:9px 10px;border:1px solid #cbd5e1;font-size:14px}
.ps-tbl td.big{font-size:18px;font-weight:800}
.ps-qty{font-size:13px;font-weight:600;color:#475569}
.ps-notes{border:1px solid #cbd5e1;margin-top:12px;padding:8px 10px;min-height:60mm;font-size:13px}
.ps-notes b{display:block;margin-bottom:4px;color:#334155;font-size:12px}
@media print{
  body.printing-sheet #app,body.printing-sheet #toast{display:none!important}
  body.printing-sheet #printSheet{position:static;background:none;padding:0;overflow:visible}
  body.printing-sheet .ps-page{box-shadow:none;width:auto;min-height:0;padding:0;border-radius:0}
  body.printing-sheet .ps-tbl th{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* prescriptions: only the typed fields are printed, on the clinic's own pre-printed A5 pad */
.rx-page{position:relative;width:148mm;height:209mm;background: var(--card);overflow:hidden;direction:ltr}
.rx-f{position:absolute;font-size:13pt;line-height:1.25;color:#111;white-space:nowrap;overflow:hidden;transform:translateY(-100%);padding-bottom:.6mm}
.rx-body{transform:none;white-space:pre-wrap;overflow:hidden;font-size:13pt;line-height:1.7;padding:0}
.rx-guide{position:absolute;height:0;border-top:.3mm dashed #e11}
.rx-guide-box{position:absolute;border:.3mm dashed #e11}
#printSheet.rx-print .rx-wrap{display:flex;justify-content:center}
#printSheet.rx-print .rx-page{box-shadow:0 8px 30px rgba(0,0,0,.3)}
@media print{
  body.printing-sheet #printSheet.rx-print{position:static;background:none;padding:0}
  body.printing-sheet .rx-print .rx-page{box-shadow:none;margin:0}
  body.printing-sheet .rx-guide,body.printing-sheet .rx-guide-box{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ---- login screen, user menu, audit lines ---- */
#authScreen { position: fixed; inset: 0; z-index: 100; background: linear-gradient(135deg, var(--brand-d), var(--brand)); display: flex; align-items: center; justify-content: center; padding: 16px; }
.auth-box { background: var(--card); border-radius: 16px; padding: 28px 30px; width: min(400px, 100%); display: flex; flex-direction: column; gap: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.auth-box h1 { font-size: 22px; margin: 0; text-align: center; }
.auth-box .btn.primary { padding: 10px; font-size: 16px; }
.auth-box .lang-sw { align-self: center; border: 0; background: none; color: var(--muted); }
.auth-box input { padding: 10px; font-size: 15px; }
.logo.big { width: 64px; height: 64px; font-size: 22px; align-self: center; display: flex; align-items: center; justify-content: center; border-radius: 16px; background: var(--brand); color: #fff; font-weight: 700; }
.auth-err { background: #fde8e8; color: var(--danger); padding: 8px 12px; border-radius: 8px; font-size: 14px; }
.usr { position: relative; }
.usr-menu { position: absolute; inset-inline-end: 0; top: 36px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.15); min-width: 190px; z-index: 50; padding: 6px; display: flex; flex-direction: column; }
.usr-menu small { padding: 6px 10px; }
.usr-menu button { border: 0; background: none; text-align: start; padding: 8px 10px; border-radius: 6px; cursor: pointer; font: inherit; }
.usr-menu button:hover { background: var(--brand-l); }
.acc-line { display: flex; gap: 28px; flex-wrap: wrap; }
.acc-line span { display: flex; flex-direction: column; }
.acc-line .ok { color: var(--ok); } .acc-line .due { color: var(--danger); }
.aud { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; font-weight: 400; white-space: nowrap; }
.aud:empty { display: none; }
.usr-menu[hidden], .auth-err[hidden] { display: none; }
.tag.ins { background: #fff3cd; color: #7a5b00; font-size: 12px; vertical-align: middle; }

/* ---- session timer ---- */
.sess { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; justify-content: flex-end; }
.sess .live { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 18px; color: var(--ok); }
.sess.run { background: #e8f7ee; border-radius: 8px; padding: 6px 8px; }
.sess.done small { color: var(--muted); }
.sess-banner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: #e8f7ee; border: 1px solid #b7e4c7; color: #14532d; border-radius: 12px; padding: 10px 16px; margin-bottom: 14px; }
.sess-banner .live.big { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sess-banner b { color: var(--ok); }
.sess-banner .btn { margin-inline-start: auto; }
@media print { .sess-banner, .sess { display: none; } }
.sess-banner { background: var(--soft); border-color: var(--line); color: var(--ink); padding: 6px 14px; font-size: 14px; }
.sess-card { margin-bottom: 12px; }
.sc-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.sc-time { text-align: end; display: flex; flex-direction: column; }
.sc-time b { font-size: 22px; color: var(--brand-d); }
.sc-body h4 { margin: 12px 0 6px; font-size: 14px; color: var(--muted); }
.sc-body ul { margin: 0 0 8px; padding-inline-start: 20px; }
.sc-notes { background: var(--soft); border-inline-start: 3px solid var(--brand); padding: 8px 12px; border-radius: 6px; margin: 8px 0; }
.tag.ok { background: #e8f7ee; color: var(--ok); }

/* ---- procedure menus on the chart ---- */
.catwrap { position: relative; display: inline-block; }
.catbtn.picked { box-shadow: inset 0 0 0 2px var(--ok); }
.catmenu { position: absolute; top: calc(100% + 4px); inset-inline-start: 0; z-index: 30; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.18); min-width: 250px; max-height: 320px; overflow: auto; padding: 4px; direction: rtl; }
html[dir=ltr] .catmenu { direction: ltr; }
.catmenu .mi { display: flex; justify-content: space-between; gap: 14px; width: 100%; border: 0; background: none; text-align: start; padding: 9px 10px; border-radius: 7px; cursor: pointer; font: inherit; }
.catmenu .mi:hover, .catmenu .mi.on { background: var(--brand-l); }
.catmenu .mi b { color: var(--brand-d); white-space: nowrap; }
.activeproc { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: #e8f7ee; border: 1px solid #b7e4c7; border-radius: 10px; padding: 8px 14px; margin-top: 10px; }

.mirow { display: flex; align-items: center; }
.mirow .mi { flex: 1; }
.mie { border: 0; background: none; cursor: pointer; padding: 6px 8px; border-radius: 6px; color: var(--muted); }
.mie:hover { background: var(--brand-l); color: var(--brand-d); }
.catmenu .mi .pr { visibility: hidden; }
.catmenu .mi:hover .pr, .catmenu .mi:focus-visible .pr { visibility: visible; }
.catmenu .mi.add { color: var(--brand-d); border-top: 1px solid var(--line); border-radius: 0 0 7px 7px; margin-top: 4px; font-weight: 600; }

/* ---- procedure status ---- */
.pstatus { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.pst { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--card); border-radius: 20px; padding: 4px 12px; cursor: pointer; font: inherit; font-size: 13px; }
.pst.on { border-color: var(--brand); background: var(--brand-l); font-weight: 600; }
.sdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #999; vertical-align: middle; }
.sdot.p-planned { background: #e07a7a; }
.sdot.p-incomplete { background: #e0a93f; }
.sdot.p-completed { background: #5fb87f; }
.sdot.p-existing { background: #a597dc; }
.tooth { position: relative; }
.badge.p-planned { background: #e8ecfb; color: #3b4fb0; } .badge.p-incomplete { background: #fff3d6; color: #9a5b00; }
.badge.p-completed { background: #e8f7ee; color: var(--ok); } .badge.p-existing { background: #efe7fd; color: #6d3fd1; }
.pst-sel { min-width: 120px; }

/* ---- accounts: statement, sub tabs, permissions ---- */
.subtabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.subtabs a { padding: 6px 14px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); color: var(--ink); }
.subtabs a.active { background: var(--brand); border-color: var(--brand); color: #fff; text-decoration: none; }
.stmt td { padding: 7px 10px; }
.stmt tr.sub td { border-top: 1px solid var(--line); font-weight: 700; background: var(--soft); }
.stmt tr.neg td:last-child { color: var(--danger); }
.stmt tr.final td { font-size: 20px; background: #e8f7ee; border-top: 2px solid var(--ok); }
.stmt tr.final.loss td { background: #fde8e8; border-top-color: var(--danger); }
tr.tot td { border-top: 2px solid var(--line); background: var(--soft); }
.perm-h { margin: 16px 0 4px; font-size: 15px; }
.perms { display: flex; flex-direction: column; gap: 6px; }

/* analytics */
.an-filters { align-items: end; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.an-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.an-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 120px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; transition: transform .12s, box-shadow .12s, border-color .12s; }
.an-tile:hover { transform: translateY(-2px); border-color: var(--brand); box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.an-tile .an-ic { font-size: 30px; }
.an-tile b { font-size: 15px; }
.an-chart { margin-bottom: 16px; }
.an-bars { display: flex; align-items: flex-end; gap: 6px; height: 190px; overflow-x: auto; padding-bottom: 4px; }
.an-bar { flex: 1 0 34px; max-width: 90px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.an-bar .col { width: 100%; flex: 1; display: flex; align-items: flex-end; }
.an-bar i { display: block; width: 100%; background: var(--brand); border-radius: 4px 4px 0 0; min-height: 3px; flex: none; }
.an-bar span { font-size: 10px; color: var(--muted); max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
tr.an-sub td, tr.an-final td { font-weight: 700; background: rgba(0,0,0,.035); }
tr.an-final td { font-size: 1.05em; border-top: 2px solid var(--line); }
tr.an-minus td.num { color: var(--danger); }

.an-sum { padding: 0; overflow: hidden; }
.an-row { display: grid; grid-template-columns: 200px 1fr; border-bottom: 1px solid var(--line); }
.an-row:last-child { border-bottom: 0; }
.an-k { padding: 18px; background: rgba(0,0,0,.025); color: var(--muted); font-weight: 600; }
.an-v { padding: 14px 18px; }
.an-big { font-size: 22px; font-weight: 700; color: #0a7bb0; }
.an-big.ok { color: var(--ok); } .an-big.bad { color: var(--danger); }
.an-subv { font-size: 15px; color: var(--warn); } .an-subv small { color: var(--muted); }
.an-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-top: 10px; }
.an-mini { background: #eef1f9; border-radius: 6px; padding: 8px 10px; text-align: center; }
.an-mini small { display: block; color: var(--muted); font-size: 12px; }
.an-mini b { font-size: 17px; }
.an-mini i { display: block; font-style: normal; font-size: 11px; color: var(--muted); }
.an-mini.ok { background: #edfcf2; } .an-mini.ok b { color: var(--ok); }
.an-mini.bad b { color: var(--danger); } .an-mini.warn b { color: var(--warn); }
@media (max-width: 700px) { .an-row { grid-template-columns: 1fr; } }
.att-link { display: block; margin-top: 16px; padding: 12px; background: var(--brand-l); border-radius: 10px; }
.att-link b, .att-link code, .att-link small { display: block; margin-bottom: 6px; }
.att-link code { font-size: 16px; user-select: all; }

.tlegend i.tl { width: 16px; height: 16px; border-radius: 50%; background: var(--c); border: 1px solid #6b7b8c; }
.badge.p-planned { background: #fde8e8; color: #b42323; }

.no-del [data-del], .no-del [data-delc], .no-del [data-delp], .no-del [data-delr], .no-del [data-delrec] { display: none !important; }
.presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.perm-grp { margin-bottom: 10px; } .perm-grp h4 { margin: 8px 0 6px; font-size: 14px; color: var(--muted); }

/* appointment details popup */
.acard[data-aid] { cursor: pointer; }
.modal.modal-wide { max-width: 760px; }
.ad { border-top: 6px solid var(--c, #999); margin: -22px -22px 0; padding: 18px 22px 20px; border-radius: 14px; }
.ad-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ad-head h2 { margin: 0; font-size: 20px; }
.ad-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.ad-lbl { min-width: 96px; font-size: 13px; color: var(--muted); font-weight: 600; }
.ad-grid { display: grid; grid-template-columns: 110px 1fr 110px 1fr; border: 1px solid var(--line); border-radius: 10px; margin: 12px 0; overflow: hidden; }
.ad-k { background: color-mix(in srgb, var(--c, #999) 14%, white); padding: 8px 12px; font-size: 13px; font-weight: 600; border-bottom: 1px solid var(--line); }
.ad-v { padding: 8px 12px; border-bottom: 1px solid var(--line); min-height: 38px; }
.ad-link { padding: 4px 10px; border: 1px solid var(--line); border-radius: 16px; font-size: 13px; background: var(--card); }
.ad-links { border-bottom: 0; }
.ad-status { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-top: 8px; border-top: 1px solid var(--line); }
.ad-status .chip { cursor: pointer; }
@media (max-width: 700px) { .ad-grid { grid-template-columns: 100px 1fr; } }

/* weekly working hours */
.wk { display: grid; gap: 6px; max-width: 520px; }
.wk-row { display: grid; grid-template-columns: 130px 110px 20px 110px 1fr; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--line, #e3e8ef); border-radius: 8px; }
.wk-row .wk-off { display: none; }
.wk-row.off { background: #f4f5f7; }
.wk-row.off input[type=time] { opacity: .35; pointer-events: none; }
.wk-row.off .wk-off { display: inline; }
.wk-on { display: flex; gap: 8px; align-items: center; font-weight: 600; }
.dayoff { background: #fff4e0; color: #8a5a00; border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; font-weight: 600; }
.colhead.off-h { background: #f0f1f3; color: #8a8f98; }
.colhead small { font-weight: 400; }

/* attendance pay + notices */
.pr-rules { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin: 10px 0 14px; }
.pr-rules.off { opacity: .45; }
.pr-net { margin: 12px 0; padding: 10px 14px; background: #eef6ff; border-radius: 8px; font-size: 15px; }
.pr-net b { font-size: 18px; }
tr.pr-abs td { background: #fff1f1; }
tr.pr-late td { background: #fff8e6; }
.tag.bad { background: #ffd9d9; color: #a11; } .tag.warn { background: #ffecb5; color: #8a5a00; } .tag.ok { background: #d8f3dc; color: #176b2c; }
.bell { position: relative; } .bell .bdg { position: absolute; top: -6px; inset-inline-end: -6px; background: #e53935; color: #fff; border-radius: 10px; font-size: 11px; padding: 1px 6px; }
.notices { display: grid; gap: 8px; max-height: 60vh; overflow: auto; margin: 10px 0; }
.notice { border: 1px solid #e3e8ef; border-radius: 8px; padding: 10px 12px; display: grid; gap: 3px; }
.notice.new { border-color: #f1b44c; background: #fdf8ee; }
.notice.deduction .amt { color: #c62828; font-weight: 700; } .notice.bonus .amt { color: #2e7d32; font-weight: 700; }

.hol-row { display: flex; gap: 8px; margin-bottom: 6px; max-width: 460px; } .hol-row .hol-n { flex: 1; }

/* new patient form (reference layout) */
.modal.pf-modal { max-width: 980px; width: 96vw; max-height: 94vh; overflow: auto; padding: 0; }
.pf-head { padding: 16px 24px; border-bottom: 1px solid #e3e8ef; position: sticky; top: 0; background: var(--card); z-index: 3; } .pf-head h2 { margin: 0; font-size: 18px; }
.pf { padding: 16px 24px 0; }
.pf-band { background: #e6f6f5; border-radius: 8px; padding: 10px 16px; font-weight: 700; margin-bottom: 14px; }
.pf-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px 18px; }
.pf .f { display: flex; flex-direction: column; gap: 6px; position: relative; font-size: 13px; }
.pf .s2 { grid-column: span 2; } .pf .s3 { grid-column: span 3; } .pf .s6 { grid-column: span 6; }
.pf input, .pf select, .pf textarea { border: 1px solid #d5dbe4; border-radius: 8px; padding: 9px 11px; font: inherit; background: var(--card); width: 100%; min-width: 0; }
.pf input:focus, .pf select:focus, .pf textarea:focus { outline: none; border-color: #2a9fc9; box-shadow: 0 0 0 2px rgba(42,159,201,.15); }
.pf .rq { color: #d32f2f; font-style: normal; }
.pf .pair { display: flex; gap: 0; align-items: stretch; } .pf .pair > * + * { margin-inline-start: -1px; }
.pf .pair input { border-radius: 0; } .pf .pair input:first-child { border-start-start-radius: 8px; border-end-start-radius: 8px; } .pf .pair input:last-child, .pf .pair select:last-child { border-start-end-radius: 8px; border-end-end-radius: 8px; }
.pf .ccb { width: 64px; flex: none; text-align: center; background: var(--soft); }
.pf .ro { background: #eef1f5; color: #8a93a0; text-align: center; width: 90px; flex: none; }
.pf .pair.pct .u { border: 1px solid #d5dbe4; padding: 9px 12px; background: var(--soft); border-start-start-radius: 8px; border-end-start-radius: 8px; }
.pf .sw { display: inline-flex; align-items: center; margin-inline-start: 8px; cursor: pointer; } .pf .sw input { display: none; }
.pf .sw i { width: 36px; height: 20px; background: #c9d6e3; border-radius: 10px; position: relative; transition: .2s; } .pf .sw i::after { content: ''; position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px; background: var(--card); border-radius: 50%; transition: .2s; }
.pf .sw input:checked + i { background: #2a9fc9; } .pf .sw input:checked + i::after { inset-inline-start: 18px; }
.pf .cnt { color: #8a93a0; } .pf .chk { flex-direction: row; align-items: center; gap: 8px; } .pf .chk input { width: auto; }
.tagbox { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border: 1px solid #d5dbe4; border-radius: 8px; padding: 6px 8px; min-height: 42px; }
.tagbox input { border: 0 !important; box-shadow: none !important; flex: 1; min-width: 120px; padding: 4px !important; }
.tagp { color: #fff; border-radius: 6px; padding: 3px 10px; font-size: 12px; font-weight: 600; display: inline-block; } .tagp.sm { padding: 1px 7px; font-size: 11px; } .tagp b { cursor: pointer; margin-inline-start: 4px; }
.tagpanel { position: absolute; top: 100%; inset-inline: 0; background: var(--card); border: 1px solid #d5dbe4; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.15); z-index: 5; margin-top: 4px; }
.tp-list { max-height: 220px; overflow: auto; padding: 6px; } .tp-row { padding: 6px 10px; border-radius: 6px; cursor: pointer; } .tp-row:hover, .tp-row.on { background: var(--soft); } .tp-none { padding: 10px; }
.tp-add { border-top: 1px solid #e3e8ef; padding: 10px; text-align: center; cursor: pointer; color: #1565c0; font-weight: 600; }
.pf-foot { display: flex; gap: 10px; padding: 14px 0 18px; position: sticky; bottom: 0; background: var(--card); border-top: 1px solid #e3e8ef; margin-top: 16px; }
@media (max-width: 720px) { .pf-grid { grid-template-columns: 1fr 1fr; } .pf .s2, .pf .s3 { grid-column: span 2; } .pf .s6 { grid-column: span 2; } }

/* quick "new" menu */
.qa { position: relative; }
.qa-menu { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; min-width: 260px; background: #0b3157; border-radius: 12px; padding: 8px 0; box-shadow: 0 18px 40px rgba(0,0,0,.3); z-index: 50; max-height: 80vh; overflow: auto; }
.qa-item { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 14px; background: none; border: 0; color: #dbe7f3; padding: 11px 18px; font: inherit; font-size: 14px; cursor: pointer; text-align: start; }
.qa-item:hover { background: rgba(255,255,255,.1); color: #fff; }
.qa-item i { font-style: normal; width: 24px; text-align: center; opacity: .9; }
.qa-sep { height: 1px; background: rgba(255,255,255,.14); margin: 6px 0; }

/* patient picker */
.pp-panel { position: absolute; top: 100%; inset-inline: 0; background: var(--card); border: 1px solid #d5dbe4; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.16); z-index: 30; max-height: 240px; overflow: auto; margin-top: 3px; }
.pp-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; cursor: pointer; }
.pp-row:hover, .pp-row.on { background: #eaf3fb; } .pp-row small { color: #8a93a0; } .pp-none { padding: 10px 12px; color: #8a93a0; }

@media (max-width: 860px) {
  #main { overflow-x: hidden; }
  .dfilters, .row { flex-wrap: wrap; }
  .dfilters input[type=date] { min-width: 0; max-width: 100%; }
  .card { overflow-x: auto; }
  .modal { max-width: 96vw; padding: 16px; }
  .calwrap { overflow-x: auto; }
  .tbl th, .tbl td { padding: 8px 8px; }
}
@media (max-width: 860px) { .gsearch { flex: 1 1 110px; min-width: 110px; } #topbar .row { flex: none; } }

/* phones settings */
.ph-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 14px 0; }
.ph-mode { border: 2px solid #d5dbe4; border-radius: 12px; padding: 14px; display: grid; gap: 4px; cursor: pointer; position: relative; }
.ph-mode.on { border-color: #4f6b69; background: #eef2f1; } .ph-mode input { position: absolute; opacity: 0; } .ph-ic { font-size: 26px; } .ph-mode small { color: #6b7684; }
.ph-open { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; margin-top: 10px; padding-top: 18px; border-top: 1px solid #e3e8ef; }
.ph-qr { text-align: center; display: grid; gap: 6px; } .ph-qr svg { border: 1px solid #d5dbe4; border-radius: 10px; padding: 6px; }
.ph-info { flex: 1; min-width: 260px; display: grid; gap: 10px; } .ph-label { font-weight: 700; }
.ph-url { font-size: 18px; font-weight: 700; background: var(--soft); border-radius: 8px; padding: 10px 14px; word-break: break-all; }
.ph-steps { margin: 4px 0; padding-inline-start: 20px; line-height: 1.9; }

.ckin{position:fixed;inset:0;z-index:9999;background:linear-gradient(135deg,#3a7479,#5aa3a7);display:flex;align-items:center;justify-content:center;padding:16px}
.ck-card{background:var(--card,#fff);color:var(--text,#1c2b33);border-radius:18px;padding:28px 24px;max-width:380px;width:100%;text-align:center;display:flex;flex-direction:column;gap:12px;box-shadow:0 20px 60px #0006}
.ck-card h2{margin:0}.ck-ic{font-size:44px}.ck-big{font-size:20px;padding:16px}

.exp-banner{margin-bottom:12px}
tr.row-exp td{background:#fdecea}tr.row-soon td{background:#fff6e5}
.bf{font-size:13px;margin-bottom:4px}.lnk{font-weight:600;text-decoration:none}
.nav-bdg{margin-inline-start:auto;background:#d9822b;color:#fff;border-radius:10px;padding:0 7px;font-size:12px;line-height:18px}
.exp-banner{display:block;width:100%;box-sizing:border-box}
td.dt{white-space:nowrap}
.usr-menu .usr-item{display:block;padding:8px 12px;color:inherit;text-decoration:none;border-radius:8px}.usr-menu .usr-item:hover{background:#0001}
.pf-head{display:flex;gap:16px;align-items:center}.pf-avatar{width:56px;height:56px;border-radius:50%;background:#4f6b69;color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;flex:none}

/* photo teeth */
.tooth .tbox { position: relative; display: block; width: 100%; aspect-ratio: 84/180; }
.tbox .timg { position: absolute; left: 50%; transform: translateX(-50%); display: block; }
.tbox .timg.u { bottom: 0; } .tbox .timg.l { top: 0; }
.tbox img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 1px 2px rgba(60,40,20,.3)); user-select: none; }
.tbox .ov { position: absolute; inset: 0; -webkit-mask: var(--m) center/100% 100% no-repeat; mask: var(--m) center/100% 100% no-repeat; mix-blend-mode: multiply; pointer-events: none; }
.tbox .ovc { background: var(--cc); } .tbox .ovr { background: var(--rc); }
.tooth.cs-none .ovc, .tooth.rs-none .ovr { display: none; }
.tbox .gm { position: absolute; left: -4%; right: -4%; height: 20%; pointer-events: none; border-radius: 40% 40% 0 0 / 30% 30% 0 0; }
.tooth.c-extracted .tbox { opacity: .3; filter: grayscale(1); }

/* flat textbook style (matches the reference chart) */
.tooth svg path { stroke: #c9b27c; stroke-width: .9; }
.tooth svg .root { fill: var(--rc, #f0e6cd); stroke: #c9b27c; }
.tooth svg .pulp { stroke: #c9b27c; stroke-width: .8; opacity: .9; }
.tooth svg .crown { fill: var(--cc, #fffdf8); }
.tooth svg .fos { fill: rgba(190, 160, 100, .22); stroke: #d3bf92; stroke-width: .6; }
.tooth svg .fis { stroke: #cdb98c; stroke-width: .8; }
.tooth svg .gum2 { opacity: .35; }
.tooth svg.side, .tooth svg.occ { filter: none; }

/* picture chart */
.pchart { position: relative; width: 100%; max-width: 640px; margin: 0 auto; aspect-ratio: 1577/826; direction: ltr; }
.pchart > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; }
.pchart .ptooth, .pchart .ptooth .ov { position: absolute; inset: 0; pointer-events: none; }
.pchart .ptooth .ov { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; mix-blend-mode: multiply; }
.pchart .ovc { background: var(--cc); -webkit-mask-image: url(/static/chart-crown.png); mask-image: url(/static/chart-crown.png); }
.pchart .ovr { background: var(--rc); -webkit-mask-image: url(/static/chart-canal.png); mask-image: url(/static/chart-canal.png); }
.pchart .ptooth.cs-none .ovc, .pchart .ptooth.rs-none .ovr { display: none; }
.pchart .ptooth.c-extracted { opacity: .35; }
.pchart .phit { position: absolute; border: 0; background: transparent; cursor: pointer; padding: 0; }
.pchart .phit:hover { background: rgba(59, 143, 148, .14); }
.ptooth.cs-planned { --cc: #ee8f8f; } .ptooth.cs-incomplete { --cc: #f2c35e; } .ptooth.cs-completed { --cc: #6fcb92; } .ptooth.cs-existing { --cc: #b7a9ee; }
.ptooth.rs-planned { --rc: #ee8f8f; } .ptooth.rs-incomplete { --rc: #f2c35e; } .ptooth.rs-completed { --rc: #6fcb92; } .ptooth.rs-existing { --rc: #b7a9ee; }

.pchart .ptooth.c-extracted { opacity: 1; }
.pchart .xcover { position: absolute; inset: 0; background: rgba(255, 250, 250, .8); }
.pchart .xmark { position: absolute; inset: 0; width: 100%; height: 100%; }
.pchart .xmark path { fill: none; stroke: #c0392b; stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pchart .ptooth.rs-planned { --rc: #e5484d; } .pchart .ptooth.rs-incomplete { --rc: #f0a020; } .pchart .ptooth.rs-completed { --rc: #2eae6b; } .pchart .ptooth.rs-existing { --rc: #8b6fe0; }
.pchart .ptooth.c-extracted .ov { display: none; }
.pchart .xcover { background: rgba(255, 250, 250, .88); }
.pchart .xmark path { stroke-width: 3.5; }
.pchart .xcover { background: var(--card); }

/* exam findings shown on the treatment chart */
.pchart .exov { opacity: .85; }
.pchart .exl { position: absolute; z-index: 2; text-align: center; font-size: clamp(8px, 1.05vw, 12px); line-height: 1.5; padding: 0 2px; background: var(--xc, #f2c35e); color: #3a2f12; border-radius: 6px; box-sizing: border-box; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.tooth .exl.sv { position: absolute; left: 50%; transform: translateX(-50%); z-index: 2; font-size: 10px; padding: 0 4px; border-radius: 6px; background: var(--xc); color: #3a2f12; white-space: nowrap; font-weight: 600; }
.tooth .exl.sv.up { bottom: 24px; } .tooth .exl.sv.low { top: 24px; }
.exnote { background: color-mix(in srgb, var(--xc, #f2c35e) 28%, #fff); border-inline-start: 4px solid var(--xc, #f2c35e); padding: 8px 12px; border-radius: 8px; margin-bottom: 10px; font-size: 14px; }
.pchart .ptooth .exov { display: block !important; }

/* dark appearance (user menu -> المظهر) */
:root[data-theme="dark"] {
  color-scheme: dark;
  --soft: #2f3d3b; --bg: #1c2423; --card: #263230; --ink: #e8eeec; --muted: #a3b3b0; --line: #3f4f4c;
  --brand: #8fb0ad; --brand-d: #b8d0cd; --brand-l: #2f4240;
}
:root[data-theme="dark"] #sidebar { background: #1f2b2a; }
:root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { background: #212d2b; color: var(--ink); border-color: var(--line); }
:root[data-theme="dark"] .btn { background: #2f3e3c; color: var(--ink); border-color: var(--line); }
:root[data-theme="dark"] .btn.primary { background: var(--brand); color: #fff; }
:root[data-theme="dark"] .tbl tr:hover td { background: #2f3e3c; }
:root[data-theme="dark"] .alert-warn, :root[data-theme="dark"] .exp-banner { background: #3b3220; color: #f1d9a3; border-color: #5a4a26; }
:root[data-theme="dark"] .pchart { background: transparent; }
.usr-theme { display: flex; gap: 4px; padding: 6px 10px; align-items: center; }
.usr-theme span { font-size: 13px; color: var(--muted); margin-inline-end: 6px; }
.usr-theme button { flex: 1; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 8px; padding: 4px 6px; font-size: 12px; cursor: pointer; }
.usr-theme button.on { background: var(--brand); color: #fff; border-color: var(--brand); }

/* note dot on examined teeth: hover the tooth to read what was written */
.pchart .exdot { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--xc); border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25); pointer-events: none; z-index: 3; }
.pchart .exdot::after { content: attr(data-tip); display: none; position: absolute; left: 50%; transform: translateX(-50%); min-width: 150px; max-width: 260px; white-space: pre-line; text-align: start; background: #25373a; color: #fff; font-size: 12px; line-height: 1.6; padding: 6px 10px; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.3); z-index: 9; }
.pchart .exdot.up::after { top: 18px; } .pchart .exdot.lo::after { bottom: 18px; }
.pchart .phit:hover + .exdot::after, .pchart .phit:focus + .exdot::after { display: block; }
.tooth .exdot.sv { position: absolute; left: 50%; margin-left: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--xc); border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25); z-index: 3; }
.tooth .exdot.sv.up { top: 0; } .tooth .exdot.sv.low { bottom: 0; }
.tooth:hover .exdot.sv::after { content: attr(data-tip); position: absolute; top: 16px; left: 50%; transform: translateX(-50%); min-width: 140px; white-space: pre-line; background: #25373a; color: #fff; font-size: 12px; padding: 6px 10px; border-radius: 8px; z-index: 9; }
.pchart .exdot::after, .tooth .exdot.sv::after { font-style: normal; font-weight: 400; }
.rc-act { white-space: nowrap; }
.rc-act .rc-snooze { width: 92px; padding: 3px 6px; font-size: 13px; display: inline-block; }

/* appointment cards on the dashboard: medium size, one under the other */
.alist { display: flex; flex-direction: column; gap: 8px; }
.alist .acard { gap: 10px; padding: 10px 14px; margin: 0; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.1); align-items: flex-start; }
.alist .acard a { font-size: 15.5px; }
.alist .a-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.alist .a-name .tag, .alist .a-tags .tag { margin: 0; font-size: 11.5px; padding: 1px 8px; }
.alist .a-tags { margin-top: 5px; gap: 5px; }
.alist .a-side { gap: 6px; }
.alist .a-top { gap: 5px; }
.alist .a-top .tag.b { font-size: 11.5px; padding: 1px 8px; }
.alist .ib { width: 25px; height: 25px; font-size: 13px; border-radius: 6px; }
.alist .a-time { font-size: 13.5px; }
.alist .a-status { font-size: 12.5px; padding: 2px 7px; }
.alist .sess { padding: 4px 8px; gap: 6px; }
.alist .sess .btn.sm { padding: 3px 9px; font-size: 12px; }
.alist .sess small { font-size: 11.5px; }
.medflag { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #fff; color: #c0392b; font-size: 13px; font-weight: 700; cursor: help; flex: none; }
.medflag::after { content: attr(data-tip); display: none; position: absolute; top: 24px; inset-inline-start: 0; min-width: 160px; max-width: 280px; white-space: pre-line; text-align: start; background: #25373a; color: #fff; font-size: 12.5px; font-weight: 400; line-height: 1.6; padding: 7px 11px; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.3); z-index: 20; }
.medflag:hover::after { display: block; }
.alist .acard { align-items: stretch; }
.alist .a-body { display: flex; flex-direction: column; }
.alist .a-time { margin-top: auto; padding-top: 6px; }
.alist .ib { width: 22px; height: 22px; font-size: 11.5px; border-radius: 5px; }
.alist .a-top { gap: 4px; }
.alist .a-room { margin-top: auto; padding-top: 6px; font-size: 13px; font-weight: 700; }
.alist .a-room + .a-time { margin-top: 0; padding-top: 1px; }
.alist .acard { flex-wrap: wrap; }
.alist .a-stats { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 2px 10px; padding-top: 6px; margin-top: 2px; border-top: 1px solid rgba(255,255,255,.25); }
.alist .ast { background: none; border: 0; color: rgba(255,255,255,.72); font: inherit; font-size: 11px; padding: 1px 6px; border-radius: 10px; cursor: pointer; }
.alist .ast:hover { color: #fff; background: rgba(255,255,255,.18); }
.alist .ast.on { background: rgba(255,255,255,.92); color: var(--c); font-weight: 700; cursor: default; }
@media (min-width: 1001px) { .dgrid { grid-template-columns: minmax(0, 450px) minmax(0, 1fr); } }
.alist .a-stats { gap: 2px 1px; justify-content: space-between; } .alist .ast { font-size: 10.5px; padding: 1px 4px; }
.sbtn { width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer; font-size: 15px; line-height: 1; display: inline-grid; place-items: center; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.sbtn.play { background: #fff; color: #2f8a6a; padding-inline-start: 3px; } .sbtn.stop { background: #fff; color: #c0392b; font-size: 14px; }
.sbtn:hover { transform: scale(1.08); }
.alist .acard { position: relative; }
.alist .a-side { min-width: 112px; }
.alist .sess, .alist .sess.run { position: absolute; left: 36px; top: calc((100% - 30px) / 2); transform: translateY(-50%); padding: 0; background: none; }
.sbtn { width: 30px; height: 30px; font-size: 12px; } .sbtn.stop { font-size: 11px; }
.alist .sess, .alist .sess.run { left: 14px; }

.trays { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.tray { font-size: 11.5px; padding: 1px 8px; border-radius: 10px; background: #fdecd2; color: #8a5a12; } .tray.ok { background: #d9f0e0; color: #1f6b3d; } .tray.out { background: #fbdcdc; color: #9b2c2c; }
.btn.warnb { border-color: #d29a4c; color: #8a5a12; background: #fdf3e2; }
.tray-row { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 8px; } .tray-row .tn { flex: 1; } .tray-row label { display: flex; flex-direction: column; font-size: 12px; gap: 2px; } .tray-row label input { width: 64px; }
.lab-act { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; min-width: 200px; max-width: 300px; }
.tray { white-space: nowrap; }

/* ===== phone layout: one compact top bar, tidy filters, scrolling tabs, patient cards ===== */
@media (max-width: 860px) {
  #topbar { flex-wrap: nowrap; gap: 6px; padding: 8px 10px; }
  #topbar .gsearch { flex: 1; min-width: 0; max-width: none; order: 2; }
  #topbar #menuBtn { order: 1; } #topbar > .row { order: 3; flex-wrap: nowrap; gap: 6px; }
  .usr-nm { display: inline-block; max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
  .qa-tx { display: inline; }
  #qaBtn, #usrBtn, #topbar .bell { padding: 7px 11px; font-size: 15px; }
  #main { padding: 14px 12px 60px; }
  .head h1 { font-size: 22px; }
  /* dashboard filters */
  .dfilters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .dfilters > label:first-child { grid-column: 1 / -1; }
  .dfilters .dnav { display: flex; gap: 4px; align-items: center; width: 100%; }
  .dfilters .dnav input[type=date] { flex: 1; min-width: 0; padding: 7px 6px; font-size: 13px; }
  .dfilters .dnav span { display: none; } .dfilters .dnav .btn { padding: 7px 10px; }
  .dfilters #todayD { align-self: end; height: 40px; }
  .clock { display: none; }
  /* appointment cards */
  .alist .a-stats { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; gap: 4px; scrollbar-width: none; }
  .alist .a-stats::-webkit-scrollbar { display: none; }
  .alist .ast { white-space: nowrap; flex: none; font-size: 12px; padding: 3px 8px; }
  .alist .acard { padding: 12px; }
  /* tabs: one swipeable row */
  .tabs { flex-wrap: nowrap; overflow-x: auto; gap: 0; scrollbar-width: none; margin-inline: -12px; padding-inline: 8px; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a { white-space: nowrap; padding: 10px 14px; font-size: 15px; flex: none; }
  /* patient info: hide empty rows */
  .dl .nil { display: none; }
  /* patients list as cards */
  .ptbl thead { display: none; }
  .ptbl, .ptbl tbody { display: block; }
  .ptbl tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .ptbl td { display: block; padding: 0; border: 0; text-align: start; }
  .ptbl td:nth-child(1) { grid-column: 2; grid-row: 1; font-size: 12px; text-align: end; }
  .ptbl td:nth-child(2) { grid-column: 1; grid-row: 1; font-weight: 700; font-size: 16px; }
  .ptbl td:nth-child(3) { grid-column: 1; grid-row: 2; color: var(--muted); direction: ltr; text-align: start; }
  .ptbl td:nth-child(4) { display: none; }
  .ptbl td:nth-child(5) { grid-column: 2; grid-row: 2; text-align: end; font-weight: 700; }
}

/* ===== phone: denser, so more fits on one screen ===== */
@media (max-width: 860px) {
  body { font-size: 14px; }
  #main { padding: 10px 10px 60px; }
  .card { padding: 12px; border-radius: 12px; }
  .head { margin-bottom: 8px; } .head h1 { font-size: 20px; }
  .dfilters { gap: 6px; margin-bottom: 10px; }
  .dfilters label { font-size: 11px; gap: 2px; }
  .dfilters select, .dfilters .btn { height: 36px; padding: 4px 8px; font-size: 13px; }
  .dfilters .dnav input[type=date] { padding: 5px 4px; font-size: 12px; height: 36px; }
  .dfilters #todayD { height: 36px; }
  /* status counters: one swipeable row */
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-bottom: 8px; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; padding: 4px 9px; font-size: 12px; }
  .card-head h2 { font-size: 16px; }
  /* appointment card: name, then reason / room / time on one line */
  .alist { gap: 6px; }
  .alist .acard { padding: 8px 10px; gap: 8px; }
  .alist .acard a { font-size: 15px; }
  .alist .a-body { flex: 1; min-width: 0; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 3px 8px; }
  .alist .a-name { width: 100%; }
  .alist .a-tags { margin: 0; } .alist .a-room { margin: 0; padding: 0; font-size: 12.5px; } .alist .a-time { margin: 0; padding: 0; font-size: 12.5px; }
  .alist .a-room:empty { display: none; }
  .alist .a-side { min-width: 0; flex-direction: row; align-items: center; gap: 8px; }
  .alist .a-top { flex-direction: column; gap: 3px; }
  .alist .sess, .alist .sess.run { position: static; transform: none; }
  .alist .a-stats { padding-top: 4px; margin-top: 0; }
  .alist .ast { padding: 2px 7px; font-size: 11.5px; }
  /* patient file header: compact */
  .phead { gap: 8px; } .phead h1, .phead h2 { font-size: 20px; }
  .tabs a { padding: 8px 12px; font-size: 14px; }
}

/* lab work types + Palmer notation */
.lt-ic { vertical-align: middle; color: var(--brand-d); margin-inline-end: 6px; flex: none; }
.lt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; grid-column: 1 / -1; }
.lt-tile { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--brand-d); font: inherit; font-size: 11px; line-height: 1.25; cursor: pointer; text-align: center; }
.lt-tile .lt-ic { margin: 0; } .lt-tile span { color: var(--ink); }
.lt-tile:hover { border-color: var(--brand); } .lt-tile.on { border-color: var(--brand); background: var(--brand-l); box-shadow: 0 0 0 1px var(--brand) inset; }
.pal { display: inline-block; min-width: 20px; padding: 0 6px; text-align: center; font-weight: 700; border: 0 solid currentColor; line-height: 1.4; }
.pal.q-UR { border-right-width: 2px; border-bottom-width: 2px; } .pal.q-UL { border-left-width: 2px; border-bottom-width: 2px; }
.pal.q-LR { border-right-width: 2px; border-top-width: 2px; } .pal.q-LL { border-left-width: 2px; border-top-width: 2px; }
.pal-pick { grid-column: 1 / -1; }
.pal-row { display: flex; } .pal-row.up { border-bottom: 2px solid var(--ink); } .pal-half { display: flex; flex: 1; min-width: 0; } .pal-half:first-child { border-inline-end: 2px solid var(--ink); }
.pal-b { flex: 1; min-width: 0; height: 32px; border: 1px solid var(--line); background: var(--card); font: inherit; cursor: pointer; padding: 0; border-radius: 6px; margin: 1px; }
.pal-b.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.pal-sel { margin-top: 8px; min-height: 26px; font-size: 17px; }
.ps-tbl .pal { font-size: 20px; margin-inline-end: 6px; }
@media (max-width: 860px) { .lt-grid { grid-template-columns: repeat(4, 1fr); } .lt-tile { font-size: 10px; } }

/* A5 lab work order */
.ps2 { display: flex; flex-direction: column; }
.ps2 small { display: block; font-size: 11px; color: #475569; margin-bottom: 2px; }
.ps2-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.ps2-c { border: 1px solid #cbd5e1; padding: 6px 9px; border-radius: 4px; } .ps2-c.wide { grid-column: 1 / -1; } .ps2-c div { font-size: 14px; } .ps2-c.big div { font-size: 16px; font-weight: 800; }
.ps2-case { display: grid; grid-template-columns: 1fr auto auto; border: 2px solid #4f6b69; border-radius: 6px; margin-bottom: 8px; }
.ps2-case > div { padding: 8px 10px; } .ps2-case > div + div { border-inline-start: 1px solid #cbd5e1; }
.ps2-item { display: flex; align-items: center; gap: 8px; } .ps2-item b { font-size: 18px; } .ps2-item .lt-ic { margin: 0; }
.ps2-teeth div, .ps2-shade div { font-size: 20px; font-weight: 800; min-width: 60px; } .ps2-teeth .pal { font-size: 24px; margin-inline-end: 6px; }
.ps2-box { border: 1px solid #cbd5e1; border-radius: 4px; padding: 6px 9px; margin-bottom: 8px; font-size: 13px; } .ps2-box > b { display: block; font-size: 11px; color: #334155; margin-bottom: 3px; }
.ps2-trays { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; }
.ps2-notes { min-height: 38mm; flex: 1; }
.ps2-due { margin: 4px 0 10px; font-size: 14px; }
.ps2-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 14mm; margin-top: auto; padding-top: 14mm; }
.ps2-sign div { border-top: 1px solid #111; text-align: center; padding-top: 3px; font-size: 12px; }

.bd3 { display: flex; gap: 6px; flex: 1; } .bd3[hidden] { display: none; }
.bd3 input, .bd3 select { min-width: 0; } .bd3 #bdD { width: 70px; flex: none; } .bd3 #bdM { flex: 1; } .bd3 #bdY { width: 90px; flex: none; }

.bd1 { flex: 1; min-width: 0; text-align: end; } .bd1[hidden] { display: none; } .bd1.bad { border-color: var(--danger); background: #fdf0f0; }


/* date-range picker: presets on one side, two months next to each other */
.rg-btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; font-weight: 600; direction: ltr; } .rg-ic { font-size: 15px; }
.rg-wrap { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); } .dnav .rg-btn { flex: 1; justify-content: center; }
.rg-pop { position: absolute; z-index: 300; display: flex; direction: ltr; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.28); max-width: calc(100vw - 16px); overflow: hidden; }
.rg-side { display: flex; flex-direction: column; padding: 8px 6px; border-inline-end: 1px solid var(--line); min-width: 130px; }
.rg-p { text-align: start; border: 0; background: none; padding: 7px 14px; border-radius: 8px; font: inherit; font-size: 15px; color: var(--ink); cursor: pointer; white-space: nowrap; }
.rg-p:hover { background: var(--brand-l); } .rg-p.on { background: var(--brand); color: #fff; }
.rg-cal { padding: 6px 14px 12px; }
.rg-nav { display: flex; justify-content: space-between; align-items: center; height: 38px; border-bottom: 1px solid var(--line); margin: 0 -14px 6px; padding: 0 12px; }
.rg-nav button { border: 0; background: none; font-size: 22px; line-height: 1; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; color: var(--muted); } .rg-nav button:hover { background: var(--brand-l); color: var(--ink); }
.rg-hint { font-size: 12px; color: var(--muted); }
.rg-months { display: flex; gap: 26px; } .rg-month { width: 266px; }
.rg-title { text-align: center; font-weight: 700; font-size: 15px; margin: -32px 0 12px; height: 20px; }
.rg-wd, .rg-grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; } .rg-wd span { font-size: 13px; font-weight: 600; padding: 4px 0 6px; }
.rg-d { border: 0; background: none; font: inherit; font-size: 15px; height: 34px; cursor: pointer; color: var(--ink); border-radius: 6px; margin: 1px 0; } .rg-d:hover { background: var(--brand-l); }
.rg-d.out { color: #b9c0c8; } .rg-d.mid { background: var(--brand-l); border-radius: 0; } .rg-d.on { background: var(--brand); color: #fff; } .rg-d.today:not(.on) { box-shadow: 0 0 0 1px var(--brand) inset; }
@media (max-width: 700px) { .rg-pop { flex-direction: column-reverse; left: 8px !important; right: 8px; } .rg-side { flex-direction: row; flex-wrap: wrap; border-inline-end: 0; border-top: 1px solid var(--line); padding: 6px; } .rg-p { padding: 4px 9px; font-size: 12px; } .rg-month.second { display: none; } .rg-month { width: 100%; } .rg-cal { padding-bottom: 6px; } }
.rg-p { padding: 5px 14px; font-size: 14px; } .rg-hint { text-align: center; margin-top: 4px; }
.rg-nav button { display: inline-grid; place-items: center; padding: 0; }

/* assistants picker */
.pickchips{display:flex;flex-wrap:wrap;gap:6px}
.pickchips .pk{border:1px solid var(--line);background:var(--soft);color:inherit;border-radius:999px;padding:5px 12px;font:inherit;font-size:13px;cursor:pointer}
.pickchips .pk small{opacity:.6;margin-inline-start:4px}
.pickchips .pk.on{background:var(--c1,#2bc4b8);border-color:transparent;color:#fff}
.pickchips .pk.on small{opacity:.85}

/* ===== dashboard v2: tabs, two equal columns, pager, invoice cards, charts ===== */
.dtabs { display: flex; gap: 4px; background: var(--soft); border-radius: 10px; padding: 3px; margin-bottom: 14px; }
.dtab { flex: 1; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 15px; padding: 9px 10px; border-radius: 8px; cursor: pointer; }
.dtab.on { background: var(--card); color: var(--text, inherit); box-shadow: 0 1px 3px rgba(0,0,0,.12); font-weight: 700; }
@media (min-width: 1001px) { .dgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.dfilters { align-items: flex-end; }
.dfilters .inline-input { min-width: 170px; }
.dcol .card-head h2 { display: flex; align-items: center; gap: 8px; font-size: 17px; }
.hic { color: var(--brand); font-size: 18px; }
.chips .chip { border-radius: 4px; padding: 4px 10px; }
.dover { margin-inline-start: auto; flex-direction: row !important; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.dbadge { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #fff; color: #c0392b; font-weight: 800; font-size: 12px; flex: none; }
.dpager { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line, #e5e7eb); font-size: 14px; }
.dref { width: 36px; height: 34px; border: 0; border-radius: 6px; background: var(--brand); color: #fff; font-size: 17px; cursor: pointer; margin-inline-end: auto; }
.dpb { border: 0; background: none; color: var(--muted); font-size: 20px; cursor: pointer; padding: 0 6px; }
.dpb:disabled { opacity: .35; cursor: default; }
.dpi { width: 46px; text-align: center; padding: 5px; }
.dps { width: auto; padding: 5px 8px; }
.dreq { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.ilist { display: flex; flex-direction: column; gap: 8px; }
.inv2 { display: flex; gap: 12px; align-items: flex-start; background: var(--soft); border-radius: 10px; padding: 12px 14px; }
.inv2 .ring { margin-top: 20px; }
.inv2 .inv-nm a { font-weight: 700; font-size: 15.5px; }
.inv-ph { color: var(--brand); font-size: 15px; }
.inv-btns { display: flex; gap: 6px; margin-top: 4px; }
.inv-amt { flex: none; text-align: end; line-height: 1.5; }
.inv-amt > div { font-size: 19px; font-weight: 700; } .inv-amt small { font-size: 11px; font-weight: 600; vertical-align: super; margin-inline-end: 3px; }
.ia-t { color: var(--text, #222); } .ia-p { color: #2f9e44; } .ia-r { color: #d6336c; }
.inv-amt .inv-when { font-size: 12.5px; font-weight: 400; color: var(--muted); margin-top: 6px; }
.dcharts { margin-top: 16px; padding: 0; }
.dcharts summary { padding: 16px 18px; cursor: pointer; font-weight: 700; list-style-position: inside; }
.dchart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; padding: 0 18px 18px; }
.dchart-grid h3 { margin: 0 0 8px; font-size: 14px; color: var(--muted); }
.hb { display: grid; grid-template-columns: 110px 1fr auto; gap: 10px; align-items: center; margin: 5px 0; font-size: 13px; }
.hb i { display: block; height: 14px; border-radius: 4px; background: var(--c, var(--brand)); min-width: 4px; }
.hb i.inc { background: #2f9e44; }
.sumgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 14px; }
@media (max-width: 860px) {
  .dtab { font-size: 13.5px; padding: 8px 4px; }
  .dfilters .inline-input { min-width: 0; width: 100%; }
  .dfilters .clock { grid-column: 1 / -1; font-size: 17px; text-align: center; }
  .inv2 { flex-wrap: wrap; } .inv-amt { width: 100%; display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline; text-align: start; }
  .inv-amt .inv-when { flex-basis: 100%; margin-top: 0; }
  .dover { margin-inline-start: 0; flex-basis: 100%; }
}

/* ===== dashboard v2: details taken from the reference screenshot ===== */
.dfilters label { font-size: 16px; color: var(--text, #222); font-weight: 500; }
.dnav { padding: 3px 6px; } .dnav .rg-btn { border: 0; background: none; font-size: 15px; }
.chips { gap: 5px 4px; align-items: center; }
.chips .chip { border-radius: 4px; padding: 4px 9px; font-size: 14px; opacity: 1; }
.dover { padding-inline-end: 4px; }
.alist { gap: 8px; }
.alist .acard { padding: 14px 18px 12px 18px; min-height: 150px; border-radius: 8px; box-shadow: none; gap: 6px 10px; }
.alist .acard a { font-size: 19px; }
.alist .a-name { gap: 8px; }
.cbadge { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; color: #fff; font-weight: 800; font-size: 14px; flex: none; }
.cbadge.ok { background: #1e9e4a; } .cbadge.bad { background: #e0393e; }
.alist .medflag { width: 26px; height: 26px; background: #e0393e; color: #fff; border: 2px solid #fff; font-size: 15px; font-weight: 800; }
.alist .a-tags { margin-top: 8px; } .alist .a-tags2 { margin-top: 8px; display: flex; gap: 6px; }
.alist .tag.dr { background: #6b6b6b; color: #fff; font-size: 15px; padding: 3px 12px; border-radius: 6px; font-weight: 700; }
.alist .tag.newp { background: #4cf0df; color: #0b6c63; font-size: 15px; padding: 3px 12px; border-radius: 6px; font-weight: 700; }
.alist .tag.proc { background: rgba(255,255,255,.28); color: #fff; font-size: 15px; padding: 3px 12px; border-radius: 6px; font-weight: 700; border: 1px solid rgba(255,255,255,.35); }
.alist .a-top { gap: 8px; align-items: center; }
.alist .ibe { width: 28px; height: 28px; background: none; border: 1.5px solid #fff; border-radius: 4px; font-size: 15px; }
.alist .a-more { display: none; gap: 4px; }
.alist .acard:hover .a-more { display: flex; }
.alist .a-time { font-size: 17px; font-weight: 500; margin-top: auto; }
.alist .a-room { font-size: 14px; }
.alist .a-side { align-items: flex-end; justify-content: space-between; min-width: 0; flex: 1; }
.alist .a-body { flex: 1; }
.alist .sess, .alist .sess.run { left: 14px; top: 50%; }
.sbtn { width: 22px; height: 22px; background: #fff; border: 0; font-size: 10px; box-shadow: none; }
.ring { background: conic-gradient(#2f9e44 calc(var(--p) * 1%), #e0393e 0); border: 0; }
.inv2 { position: relative; background: var(--soft); padding: 12px 14px; }
.invplus { position: absolute; top: 8px; inset-inline-start: 12px; border: 0; background: none; font-size: 18px; cursor: pointer; color: inherit; padding: 0; }
.inv2 .ring { margin-top: 26px; }
.inv2 .btn.primary { background: #0f6fb8; border-color: #0f6fb8; }
.inv-amt > div { font-size: 20px; }

.alist .acard { min-height: 128px; }
.alist .a-time { white-space: nowrap; margin-top: auto; padding-top: 6px; text-align: end; }
.alist .a-side { display: flex; flex-direction: column; align-items: flex-end; }
.alist .a-side .a-time { align-self: flex-end; }
.iso { unicode-bidi: isolate; display: inline-block; }
.alist .a-time { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.alist .a-time { flex-wrap: nowrap; font-size: 15.5px; gap: 8px; }
.alist .sess, .alist .sess.run { top: 42%; }
@media (max-width: 860px) {
  .dfilters .dnav .rg-btn span, .dfilters .dnav .rg-btn { display: inline; }
  .dfilters .dnav .rg-btn { flex: 1; min-width: 0; font-size: 13px; padding: 7px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .alist .acard { flex-wrap: wrap; align-items: flex-start; min-height: 0; }
  .alist .a-side { display: contents; }
  .alist .a-body { flex: 1 1 0; min-width: 0; }
  .alist .a-top { order: 1; }
  .alist .a-more { display: flex; order: 2; }
  .alist .a-time { order: 3; flex-basis: 100%; justify-content: flex-start; padding-top: 4px; margin: 0; font-size: 14.5px; }
  .alist .sess, .alist .sess.run { top: auto; bottom: 10px; left: auto; inset-inline-end: 12px; }
  .alist .a-more { display: none; }
}

/* English (LTR): the play button sits at the left edge, so make room for it */
html[dir="ltr"] .alist .acard { padding-left: 56px; }
html[dir="ltr"] .alist .sess, html[dir="ltr"] .alist .sess.run { left: 16px; }
@media (max-width: 860px) { html[dir="ltr"] .alist .acard { padding-left: 52px; } html[dir="ltr"] .alist .sess, html[dir="ltr"] .alist .sess.run { left: 14px; right: auto; inset-inline-end: auto; bottom: auto; top: 18px; } }

/* invoice details opened with the ＋ */
.invw { background: var(--soft); border-radius: 10px; }
.invw .inv2 { background: none; }
.invx { border-top: 1px solid var(--line, #e5e7eb); padding: 6px 14px 14px; background: var(--card); border-radius: 0 0 10px 10px; }
.ix-grid { display: flex; flex-direction: column; }
.ix-r { display: grid; grid-template-columns: 150px 1fr; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--line, #eef2f6); font-size: 14px; align-items: center; }
.ix-r > span { color: var(--muted); }
.ix-r .ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.tag.ixa { background: #1b6b3a; color: #fff; margin: 0; }
.ix-tabs { display: flex; gap: 18px; align-items: center; margin-top: 14px; border-bottom: 1px solid var(--line, #e5e7eb); }
.ix-tabs [data-ixt] { border: 0; background: none; font: inherit; padding: 8px 2px; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; }
.ix-tabs [data-ixt].on { color: var(--brand); border-bottom-color: var(--brand); font-weight: 700; }
.ix-add { margin-inline-start: auto; background: #1fae4b; border-color: #1fae4b; color: #fff; }
.ix-pane { padding-top: 6px; }
.ix-op { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--line, #eef2f6); }
.ix-op a { display: block; color: var(--brand); font-weight: 600; } .ix-op small { display: block; }
.ix-op .ghost { background: none; border: 1px solid #e0393e; color: #e0393e; }

/* permission groups */
.pg-n { background: var(--brand); color: #fff; border-radius: 999px; font-size: 12px; padding: 1px 9px; margin-inline-start: 6px; }
.pg-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-inline-end: 8px; }
.pg-badge { display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 8px; border-radius: 6px; color: #fff; font-weight: 700; font-size: 13px; }
.pg-head { display: grid; grid-template-columns: 1fr 2fr 90px; gap: 12px; margin-bottom: 14px; }
.pg-head input[type=color] { height: 40px; padding: 2px; }
.pg-body { display: grid; grid-template-columns: 190px 1fr; gap: 14px; }
.pg-nav { display: flex; flex-direction: column; border-inline-end: 1px solid var(--line, #e5e7eb); }
.pg-nav button { text-align: start; border: 0; background: none; font: inherit; padding: 11px 12px; cursor: pointer; border-inline-end: 3px solid transparent; }
.pg-nav button.on { color: var(--brand); background: var(--brand-l, #e6f4f4); border-inline-end-color: var(--brand); font-weight: 700; }
.pg-matwrap { overflow-x: auto; }
.pg-mat { width: 100%; border-collapse: collapse; font-size: 14px; }
.pg-mat th { text-align: center; font-weight: 600; padding: 8px 6px; border-bottom: 1px solid var(--line, #e5e7eb); font-size: 13px; }
.pg-mat th:first-child, .pg-mat td:first-child { text-align: start; }
.pg-mat td { padding: 13px 6px; text-align: center; border-bottom: 1px solid var(--line, #eef2f6); }
.pg-mat input[type=checkbox] { width: 17px; height: 17px; }
.pg-mat input:disabled { opacity: .3; }
.pg-mat th a { margin-inline-start: 10px; font-weight: 400; }
@media (max-width: 860px) { .pg-body { grid-template-columns: 1fr; } .pg-nav { flex-direction: row; overflow-x: auto; border: 0; } .pg-nav button { white-space: nowrap; border-inline-end: 0; border-bottom: 3px solid transparent; } .pg-nav button.on { border-bottom-color: var(--brand); } .pg-head { grid-template-columns: 1fr; } }

.acc-tabs { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--line, #e5e7eb); }
.acc-tabs button { border: 0; background: none; font: inherit; padding: 9px 16px; cursor: pointer; border-bottom: 3px solid transparent; }
.acc-tabs button.on { color: var(--brand); border-bottom-color: var(--brand); font-weight: 700; }

.mk{display:inline-flex;gap:6px;align-items:center;padding:4px 12px;border-radius:999px;border:1px solid var(--line);background:var(--soft);font-size:13px}
.mk.on{background:var(--brand);color:#fff;border-color:var(--brand)}.mk b{cursor:pointer;opacity:.8}
.wk-row .brks{display:inline-flex;gap:6px;flex-wrap:wrap}.wk-row{flex-wrap:wrap}
.unit{display:flex;align-items:center;gap:8px}.unit input{flex:1}.unit em{font-style:normal;color:var(--muted);white-space:nowrap}
.brkband{position:absolute;inset-inline:0;background:repeating-linear-gradient(45deg,#eef0f3,#eef0f3 6px,#e4e7ec 6px,#e4e7ec 12px);opacity:.85;pointer-events:none;z-index:0}
.wk-row input[type=time]{min-width:124px}.wk-row .wk-on{min-width:90px}#newRoom{width:190px!important}

.pr-grid{display:grid;grid-template-columns:1fr 300px;gap:20px;align-items:start}
.pr-prev{display:flex;flex-direction:column;align-items:center;gap:6px;background:#eef1f4;border-radius:10px;padding:14px}
.pr-page{background:#fff;box-shadow:0 1px 6px #0003;box-sizing:border-box;overflow:hidden}.pr-in{height:100%;box-sizing:border-box;padding:4px}
@media (max-width:860px){.pr-grid{grid-template-columns:1fr}}
.nf-list { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow: auto; margin: 8px 0; }
.nf { display: flex; gap: 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: inherit; align-items: flex-start; }
.nf.new { background: color-mix(in srgb, var(--brand) 10%, var(--card)); border-color: var(--brand); }
.nf-ic { font-size: 20px; line-height: 1.2; } .nf-bd { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .nf-bd span { overflow-wrap: anywhere; }
.nf-h { margin: 12px 0 6px; }
.nf-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px 14px; margin-top: 8px; }
.nf-pick label { display: flex; align-items: center; gap: 6px; }
.nf-pick label { justify-content: flex-start; flex-direction: row; cursor: pointer; }
.nf-pick input { width: auto; flex: none; margin: 0; }
.dals { display: flex; flex-direction: column; }
.dal { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.dal > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.dal-n { min-width: 34px; height: 34px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-weight: 700; }
.dal-n.red { background: #e53935; } .dal-n.purple { background: #6a1fc2; } .dal-n.gold { background: #f2a516; }
.dal-t { display: inline-block; color: #fff; border-radius: 4px; padding: 1px 8px; font-size: 13px; width: fit-content; }
.dal-t.red { background: #e53935; } .dal-t.purple { background: #6a1fc2; } .dal-t.gold { background: #f2a516; }
.bdl { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .bdl a { padding: 4px 10px; border: 1px solid var(--line); border-radius: 16px; text-decoration: none; }
.ring-box { text-align: center; } .ring-ic { font-size: 56px; animation: ringshake .6s infinite; } .ring-msg { font-size: 18px; margin: 8px 0 14px; }
@keyframes ringshake { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-18deg); } 75% { transform: rotate(18deg); } }
.ring-box .actions { justify-content: center; }
.ring-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow: auto; margin: 10px 0; } .ring-list .btn { justify-content: flex-start; text-align: start; }
.task { display: flex; gap: 10px; align-items: flex-start; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.task.done .tk-bd b { text-decoration: line-through; color: var(--muted); }
.tk-chk input { width: 20px; height: 20px; } .tk-bd { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; } .tk-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 13px; }
.plsel { display: inline-flex; align-items: center; gap: 4px; margin-inline-end: 10px; } .plsel select { width: auto; min-width: 150px; padding: 6px 8px; }
.multibar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 12px; margin: 8px 0; background: color-mix(in srgb, var(--brand) 10%, var(--card)); border: 1px dashed var(--brand); border-radius: 10px; }
.phit.msel { outline: 3px solid var(--brand); outline-offset: -2px; background: color-mix(in srgb, var(--brand) 25%, transparent); border-radius: 8px; }
.tooth.msel { outline: 3px solid var(--brand); border-radius: 8px; }
#toast { max-width: 92vw; white-space: normal; text-align: center; }
.palm { display: inline-block; min-width: 24px; padding: 1px 6px; font-weight: 700; text-align: center; border: 0 solid currentColor; line-height: 1.3; }
.palm.q-ur { border-bottom-width: 2px; border-right-width: 2px; } .palm.q-ul { border-bottom-width: 2px; border-left-width: 2px; }
.palm.q-ll { border-top-width: 2px; border-left-width: 2px; } .palm.q-lr { border-top-width: 2px; border-right-width: 2px; }
@media print { body.pdoc > *:not(#printDoc) { display: none !important; } body.pdoc #printDoc { display: block !important; padding: 20px; } }
.pdoc-box h1 { margin: 0 0 4px; } .pdoc-box h2 { margin: 0 0 12px; } .pdoc-box table { width: 100%; border-collapse: collapse; } .pdoc-box th, .pdoc-box td { border-bottom: 1px solid #999; padding: 6px 8px; text-align: start; } .pdoc-box .num { text-align: end; }
.pdoc-head { display: flex; align-items: center; gap: 12px; border-bottom: 2px solid #4f6b69; padding-bottom: 8px; margin-bottom: 10px; } .pdoc-head img { width: 56px; height: 56px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.pdoc-head h1 { font-size: 1.5em; margin: 0; } .pdoc-sub { font-size: 1.05em; color: #444; } .pdoc-box h2 { text-align: center; }
.logo.img { background: #fff; padding: 4px 6px; border-radius: 10px; display: flex; align-items: center; } .logo.img img { height: 30px; width: auto; display: block; }
.login-logo { width: 190px; max-width: 70%; align-self: center; margin-bottom: 4px; }
.pdoc-head img { width: auto !important; height: 64px !important; }
/* clinic palette (from the clinic's letterhead): slate-green + gold on warm paper */
:root { --gold: #b8955f; --gold-l: #f3ead9; }
:root[data-theme="dark"] { --gold: #cfae78; --gold-l: #3a3426; }
.tabs a.active { border-bottom-color: var(--gold); }
.subtabs a.active { background: var(--brand); }
#sidebar nav a.active { box-shadow: inset 3px 0 0 #fff4; }
.pdoc-head { border-bottom-color: #b8955f; } .pdoc-sub { color: #b8955f; font-weight: 700; } .pdoc-box h1 { color: #3b5452; } .pdoc-box th { background: #eaefed; }
.ps-head { border-bottom-color: #b8955f; }
.br-row { display: flex; gap: 8px; margin-bottom: 8px; } .br-row input[name=bn] { flex: 1; } .br-row input[name=bf] { width: 130px; }
.ibi { font-weight: 700; }
.br-row .ib { color: var(--danger); background: transparent; border: 1px solid var(--line); border-radius: 8px; width: 38px; flex: none; cursor: pointer; }
.ir .ir-d { width: 90px; } .ir-pct { display: flex; gap: 8px; align-items: center; margin: 8px 0; } .ir-pct input { width: 90px; } .ir tfoot th { border-top: 2px solid var(--line); }
#usrBreak { display: block; width: 100%; text-align: start; }
.bulkbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 10px; background: var(--brand-soft, #eef6f6); }
.wa-ic { text-decoration: none; margin-inline-start: 4px; }
.bs-list { max-height: 320px; overflow: auto; margin: 10px 0; }
.bs-row { display: flex; gap: 10px; align-items: center; padding: 7px 4px; border-bottom: 1px solid #eef2f6; }
.bs-row .bs-n { flex: 1; font-weight: 600; } .bs-row.done { opacity: .55; }
.xr-up { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; padding: 14px; margin-bottom: 14px; border: 2px dashed var(--line); } .xr-up.drag { border-color: var(--brand, #0e7c86); background: #eef6f6; }
.xr-fields { display: flex; gap: 10px; flex-wrap: wrap; } .xr-pick { cursor: pointer; }
.xr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.xr-card { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.xr-th { height: 150px; background: #111; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: zoom-in; } .xr-th img { max-width: 100%; max-height: 100%; object-fit: contain; }
.xr-pdf { color: #fff; font-weight: 700; font-size: 22px; } .xr-meta { font-size: 13px; } .xr-note { font-size: 12px; color: var(--muted); margin-top: 3px; white-space: pre-wrap; }
.xr-act { display: flex; gap: 6px; justify-content: flex-end; }
.modal.xr-modal { max-width: 92vw; width: 1000px; } .xr-vh { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 8px; }
.xr-vb { background: #000; border-radius: 8px; height: 72vh; display: flex; align-items: center; justify-content: center; overflow: auto; } .xr-vb img { max-width: 100%; max-height: 100%; } .xr-vb iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.xs-list { max-height: 55vh; overflow: auto; } .xs-row { display: flex; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid #eef2f6; }
.xs-th { width: 64px; height: 48px; background: #111; color: #fff; border-radius: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; font-weight: 700; } .xs-th img { max-width: 100%; max-height: 100%; }
.xs-n { flex: 1; font-size: 13px; word-break: break-all; }
.xs-row select { width: 190px; flex: none; } .xs-row input { flex: none; } .xs-n { min-width: 140px; }
#xsK { width: 220px; }
.pf-panel { padding: 12px; margin-bottom: 12px; } .pf-panel .pf-grid { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.pf-panel .pf-grid select, .pf-panel .pf-grid input:not([type=checkbox]) { height: 38px; } .pf-panel .pf-grid .search { margin: 0; flex: 1 1 220px; min-width: 200px; }
.pf-f { display: flex; flex-direction: column; font-size: 11px; color: var(--muted); gap: 2px; } .pf-age { display: flex; gap: 4px; } .pf-age input { width: 82px; }
.pf-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .pf-chips:empty { display: none; } .pf-chips b { cursor: pointer; }
.bulkbar[hidden] { display: none; }
.pf-panel .pf-grid select { width: auto; flex: 1 1 140px; max-width: 200px; min-width: 120px; }
.pf-panel .pf-grid .pf-f select { max-width: none; width: 130px; flex: none; }
.pf-age input { width: 104px; }

.dref.spin { animation: dspin .7s linear infinite; opacity: .7; }
@keyframes dspin { to { transform: rotate(360deg); } }
.dref-g { width: 30px; height: 28px; border: 1px solid var(--line, #e5e7eb); border-radius: 6px; background: transparent; color: inherit; font-size: 16px; cursor: pointer; margin-inline-start: 8px; }
.dref-g:hover, #tbRefresh:hover { background: var(--brand); color: #fff; }
.dref-g.spin, #tbRefresh.spin { animation: dspin .7s linear infinite; }
.tabn { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--brand); color: #fff; font-size: 12px; line-height: 18px; text-align: center; margin-inline-start: 4px; }
.rxp-item { border: 1px solid var(--line, #e5e7eb); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.rxp-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rxp-acts { display: flex; gap: 6px; }
.rxp-body { margin: 8px 0 0; white-space: pre-wrap; font-family: inherit; }

/* dashboard layout 2: calm columns */
.lay-sw { display: flex; background: var(--card, #fff); border: 1px solid var(--line, #e6e0d4); border-radius: 999px; padding: 3px; gap: 2px; }
.lay-b { border: 0; background: transparent; padding: 7px 16px; border-radius: 999px; font: inherit; font-size: 14px; cursor: pointer; color: var(--muted); }
.lay-b.on { background: var(--primary, #3e5350); color: #fff; }
.kgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; align-items: start; }
.kcol { background: #e9e4da; border-radius: 18px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.kcol-h { display: flex; align-items: center; gap: 8px; padding: 4px 6px; font-size: 17px; }
.kcol-h i { width: 12px; height: 12px; border-radius: 50%; flex: none; } .kcol-h b { flex-grow: 1; }
.kcol-h span { font-size: 15px; font-weight: 600; background: #fff; border-radius: 999px; padding: 2px 12px; }
.kc { background: #fff; color: #26302e; border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; }
.kc-t { display: flex; flex-direction: column; min-width: 0; } .kc-t a { font-size: 16px; font-weight: 800; color: #26302e; text-decoration: none; } .kc-t small { color: #5b6663; font-size: 13px; }
.kc-f { display: flex; align-items: center; gap: 8px; margin-top: 4px; justify-content: space-between; }
.kc-m { font-size: 14px; font-weight: 800; } .kc-m.due { color: #b3261e; } .kc-m.ok { color: #1f7a4d; }
.kc-btn { border: 0; background: #3e5350; color: #fff; font: inherit; font-size: 13px; font-weight: 600; border-radius: 9px; padding: 8px 12px; min-height: 44px; cursor: pointer; }
.kc-e { padding: 10px 6px; }

.up { margin-top: 18px; } .up-day { margin: 14px 4px 6px; font-size: 15px; }
.up-r { background: transparent; color: inherit; margin: 0; border-radius: 0; display: grid; grid-template-columns: 70px 1.4fr 1.4fr 1fr; gap: 10px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--line, #eee8de); cursor: pointer; }
.up-r a { font-weight: 800; color: inherit; text-decoration: none; } .up-t { font-weight: 600; }
@media (max-width: 700px) { .up-r { grid-template-columns: 60px 1fr; } .up-r .up-d, .up-r .muted { grid-column: 2; } }

.kc-eye { border: 0; background: #fff; border-radius: 999px; width: 36px; height: 36px; font-size: 17px; cursor: pointer; flex: none; }
.kcol.blur .kcol-b { filter: blur(9px); pointer-events: none; user-select: none; }

.up-box { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; padding: 14px; border: 2px dashed var(--line, #d9d2c3); border-radius: 14px; }

.kc-usd { width: 28px; height: 28px; border-radius: 50%; background: #b3261e; color: #fff; font-weight: 800; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; cursor: help; flex: none; }

.kgrid2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 14px; }
@media (max-width: 800px) { .kgrid2 { grid-template-columns: 1fr; } }
.kc-why { font-size: 14px; background: #f4f1ec; border-radius: 9px; padding: 6px 10px; }
.cr h2 { margin: 0 0 12px; font-size: 20px; }

.kc-n { display: flex; align-items: center; gap: 6px; } .kc-n .medflag { font-size: 17px; }


.gclock { margin: 0; font-size: 13px; padding: 0 5px; line-height: 1.25; border-radius: 6px; gap: 7px; direction: inherit; display: flex; align-items: center; white-space: nowrap; } .clk-d { font-weight: 800; font-size: 1.2em; } .clk-s { opacity: .5; }


@media (max-width: 700px) { #clockRow { padding: 6px 10px 0; } }

/* the clock: a thin row under the top bar, on the far end (left in Arabic), on every page and above the dashboard tabs */
#clockRow { display: flex; justify-content: flex-end; width: 100%; max-width: 1400px; padding: 8px 30px 0; box-sizing: border-box; } #clockRow:empty { display: none; }
@media print { #clockRow { display: none !important; } }

.dn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin: 6px 0 14px; }
.dn h3 { margin: 0 0 6px; font-size: 14px; }
.dn-b { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dn-l { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 160px; }
.dn-l li { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 14px; }
.dn-l li span { flex: 1; }
.dn-l li i { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.dn-l small { color: #6b7673; min-width: 34px; text-align: end; }

.tag.qrp { background: #fff4dc; color: #8a5a00; border: 1px solid #f0d49a; }
.qrban { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.qrcount { cursor: pointer; font: inherit; font-size: 13px; }
.qrcount.on { background: #8a5a00; color: #fff; border-color: #8a5a00; }

.qr-reqg { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 12px; margin: 6px 0 12px; }
.nav-qr { background: #8a5a00; }
input.ro { background: var(--soft); color: var(--muted); }

/* patient file: data tab as cards */
.pinfo { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.pcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.pcard h3 { margin: 0 0 10px; font-size: 15px; color: var(--brand-d); display: flex; align-items: center; gap: 8px; }
.pcard h3 span { width: 28px; height: 28px; border-radius: 8px; background: var(--brand-l); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.pgrid { display: grid; grid-template-columns: 1fr; gap: 2px; }
.pi { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.pi:last-child { border-bottom: 0; }
.pi > i { font-style: normal; width: 26px; text-align: center; color: var(--muted); flex: none; line-height: 1.6; }
.pi small { display: block; color: var(--muted); font-size: 12px; }
.pi b { font-weight: 600; }
.pi p { margin: 2px 0 0; white-space: pre-wrap; }
.pi-ph { display: inline-flex; gap: 8px; margin-inline-start: 10px; vertical-align: middle; }
.pi-acts { display: flex; gap: 10px; justify-content: flex-start; margin-top: 16px; }
.phead.mini { padding: 10px 16px; }
.phead.mini h1 { font-size: 20px; margin: 0; }

.pf-kind { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.pf-kind .pk { border: 1px solid var(--line, #ccc); border-radius: 999px; padding: 6px 14px; cursor: pointer; font-weight: 600; }
.pf-kind .pk input { display: none; }
.pf-kind .pk.on { background: var(--brand, #0e7c86); color: #fff; border-color: transparent; }
.pf-kind .pk-why { flex: 1 1 240px; min-width: 200px; }
.tmpcount.on { background: #8a5a00; color: #fff; border-color: #8a5a00; }
.tag.tmp { background: #fff3d6; color: #7a5200; }
.mkperm { padding: 1px 8px; font-size: 12px; }

.plan-tbl tr.pl-late td { background: rgba(200,40,40,.06); }
.plan-prev { margin: 12px 0; max-height: 260px; overflow: auto; }

.rx-qr { position: absolute; } .rx-qr svg { width: 100%; height: 100%; display: block; }
.shbtn { margin-inline-start: 4px; }
.inv-sum { display: grid; gap: 10px; margin-bottom: 14px; }
.inv-sum .is { border: 1px solid var(--line, #e5e7eb); border-radius: 12px; padding: 12px; background: var(--card); }
.inv-sum .is-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.inv-sum .is-bar { height: 8px; background: #e7ebf0; border-radius: 6px; overflow: hidden; margin: 8px 0; } .inv-sum .is-bar i { display: block; height: 100%; background: var(--ok, #4a9d6f); }
.inv-sum .is-nums { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; }

.sh-pick { max-height: 240px; overflow: auto; border: 1px solid var(--line, #e5e7eb); border-radius: 10px; padding: 4px 10px; margin-bottom: 8px; }
.sh-it { display: flex; gap: 8px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line, #eef2f6); cursor: pointer; } .sh-it:last-child { border: 0; }
.sh-it input { width: auto; margin-top: 4px; }

.kc-usd.pl-ok { background: #2c5d9e; font-size: 13px; }
.plhdr { margin: 6px 0; }

/* A5 sheet that looks like the prescription pad (every printed paper except the prescription) */
.pad-page { color: #111; }
.pad-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.pad-head { position: absolute; left: 12mm; right: 12mm; top: 9mm; height: 24mm; display: flex; align-items: center; justify-content: space-between; direction: ltr; }
.pad-hl { flex: 1; text-align: left; margin-right: 5mm; border-bottom: .35mm solid #8a8f94; padding-bottom: 3mm; margin-top: 4mm; }
.pad-head img { height: 22mm; display: block; }
.pad-h1 { font-family: Georgia, 'Times New Roman', serif; font-weight: 800; font-size: 15pt; letter-spacing: .6pt; color: #6b7076; line-height: 1.2; }
.pad-h2 { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-size: 11pt; color: #b39b73; margin-top: 1mm; }
.pad-lab { position: absolute; font-size: 9.5pt; line-height: 1.25; color: #444; text-align: right; direction: ltr; transform: translateY(-100%); padding-bottom: .6mm; white-space: nowrap; }
.pad-page.gen .rx-f { border-bottom: .2mm dotted #888; }
.pad-page .rx-f { position: absolute; }
.pad-body { position: absolute; overflow: hidden; font-size: 10pt; line-height: 1.5; }
.pad-title { font-weight: 800; font-size: 12.5pt; text-align: center; margin-bottom: 2.5mm; }
.pad-t { width: 100%; border-collapse: collapse; } .pad-t th, .pad-t td { border-bottom: .25mm solid #999; padding: 1mm 1.5mm; text-align: start; vertical-align: top; }
.pad-t th { font-size: 8.5pt; color: #333; border-bottom: .4mm solid #333; } .pad-t .n { text-align: end; white-space: nowrap; }
.pad-tot td { border-top: .4mm solid #333; font-size: 11pt; }
.pad-note { font-size: 8.5pt; color: #444; margin-top: 3mm; }
.pad-sum { display: flex; justify-content: space-between; gap: 4mm; margin-bottom: 2mm; font-size: 9.5pt; flex-wrap: wrap; }
.pad-sec { font-weight: 700; margin: 3mm 0 1mm; border-bottom: .3mm solid #333; }
.pad-kv { display: flex; justify-content: space-between; border-bottom: .2mm dotted #888; padding: 1mm 0; } .pad-kv span { color: #444; }
.pad-txt { white-space: pre-wrap; } .pad-due { margin-top: 4mm; font-size: 10.5pt; }

#printSheet.ps-auto { opacity: 0; pointer-events: none; }
@media print { #printSheet.ps-auto { opacity: 1; } }

.pad-mask { position: absolute; background: #fff; }

/* prescription text: clear, evenly spaced, wrapped lines hang under the first word */
.rx-body { font-family: "Segoe UI", Tahoma, Arial, sans-serif; font-weight: 500; line-height: 1.55; letter-spacing: .1px; }
.rx-l { padding-inline-start: 11mm; text-indent: -11mm; margin-bottom: 2.4mm; white-space: pre-wrap; }
.rx-l .rx-sym { display: inline-block; width: 11mm; text-indent: 0; font-weight: 800; }
.rx-l.rx-cont { padding-inline-start: 11mm; text-indent: 0; margin-bottom: 1mm; }
.rx-ghost { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .45; z-index: 0; }

.pad-head.classic { display: block; text-align: center; direction: ltr; height: 38mm; top: 7mm; border-bottom: .4mm solid #444; }
.pad-head.classic img { height: 16mm; margin: 0 auto 1mm; }
.pad-head.classic .pad-h1 { font-family: inherit; color: #111; font-size: 13pt; letter-spacing: 0; }
.pad-head.classic .pad-h2 { font-family: inherit; color: #333; font-size: 9pt; font-weight: 400; }
.pad-page.gen .pad-body.classic-b { }
.pad-due { font-size: 12pt; font-weight: 800; }
.pad-due b { font-weight: 800; }

.ps-ask { position: fixed; inset: 0; z-index: 99999; background: rgba(20,30,40,.72); display: flex; align-items: center; justify-content: center; }
.ps-ask-box { background: var(--card, #fff); color: inherit; border-radius: 16px; padding: 28px 34px; text-align: center; max-width: 460px; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.ps-ask-ic { font-size: 46px; } .ps-ask-box h2 { margin: 6px 0; } .ps-ask-from { margin: 0 0 12px; color: #667; }
.ps-ask-paper { font-size: 19px; font-weight: 800; padding: 14px 16px; border-radius: 12px; margin-bottom: 16px; }
.ps-ask-paper.rx { background: #fff3d6; color: #8a5a00; } .ps-ask-paper.plain { background: #e6f1ff; color: #1d4f8f; }
.ps-ask-box .row { display: flex; gap: 10px; justify-content: center; }

.rs-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 8px 0 12px; }
.rs-cell { border: 1px solid var(--line, #ddd); border-radius: 8px; padding: 6px; text-align: center; font-size: 12px; }
.rs-cell.morning, .rs-btn.morning { background: #fff3d6; color: #8a5a00; } .rs-cell.night, .rs-btn.night { background: #dfe6fb; color: #2b3f8f; } .rs-cell.off, .rs-btn.off { background: #f2f2f2; color: #888; }
.rs-btn { width: 100%; border: 1px solid transparent; border-radius: 8px; padding: 8px 4px; cursor: pointer; font: inherit; font-weight: 700; }
.rs-tbl td, .rs-tbl th { text-align: center; } .rs-sh { border: 1px solid var(--line, #ddd); border-radius: 8px; padding: 6px 10px; } .rs-who { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.rs-sh { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .rs-sh input { width: auto; display: inline-block; } .rs-sh input[type=time] { width: 135px; }

/* ===== dark appearance fixes: readable text on every background ===== */
:root[data-theme="dark"] { --brand: #4a7a76; --brand-d: #b8d0cd; --brand-l: #2f4240; }
:root[data-theme="dark"] #sidebar nav a.active { background: var(--gold); color: #1b1f1e; }
:root[data-theme="dark"] #sidebar nav a.active span { color: #1b1f1e; }
:root[data-theme="dark"] label, :root[data-theme="dark"] .field > span { color: var(--muted); }
:root[data-theme="dark"] .tbl .ib { color: var(--ink); background: #2f3e3c; border-color: var(--line); }
:root[data-theme="dark"] .dpb { color: var(--ink); }
:root[data-theme="dark"] .clk-s { color: var(--ink); }
:root[data-theme="dark"] .stmt tr.final td { background: #1f3a2d; color: #bdf0d0; }
:root[data-theme="dark"] .sess.run, :root[data-theme="dark"] .sess-banner, :root[data-theme="dark"] .activeproc { background: #1f3a2d; color: #cdeedb; border-color: #2f5a44; }
:root[data-theme="dark"] .ph-mode { border-color: var(--line); }
:root[data-theme="dark"] .ph-mode.on { background: var(--brand-l); border-color: var(--brand-d); }
:root[data-theme="dark"] .ph-mode small { color: var(--muted); }
:root[data-theme="dark"] .pr-prev { background: #2a3634; }
:root[data-theme="dark"] .pr-page { color: #111; }
:root[data-theme="dark"] .pr-prev small { color: var(--muted); }
:root[data-theme="dark"] .ia-t { color: var(--ink); } :root[data-theme="dark"] .ia-p { color: #6fd08c; } :root[data-theme="dark"] .ia-r { color: #ff7aa8; }
:root[data-theme="dark"] .inv-ph { color: var(--brand-d); }
:root[data-theme="dark"] .chip.st-waiting_list, :root[data-theme="dark"] .chip.st-delayed, :root[data-theme="dark"] .badge.st-delayed { color: #1b1f1e; }
:root[data-theme="dark"] .tag.proc { color: #10222a; }
:root[data-theme="dark"] .hic, :root[data-theme="dark"] .acc-tabs button.on { color: var(--brand-d); }
:root[data-theme="dark"] .nav-bdg { color: #fff; background: #8a5a00; }
:root[data-theme="dark"] #sidebar nav a.active .nav-bdg { background: #5a3a00; color: #fff; }
:root[data-theme="dark"] .muted .tag:not(.qrp):not(.ok):not(.warn):not(.bad):not(.tmp) { color: var(--ink); }
:root[data-theme="dark"] .tag.qrp, :root[data-theme="dark"] .tag.tmp { color: #7a4a00; }
:root[data-theme="dark"] .tbl td { border-bottom-color: var(--line); }
:root[data-theme="dark"] .tbl tr.tot td.due { color: #ff8f8e; }

.kc-meta { display: grid; gap: 2px; margin-top: 3px; font-size: 12.5px; color: #4a5654; }
.kc-meta span { display: flex; gap: 6px; align-items: baseline; min-width: 0; } .kc-meta i { font-style: normal; flex: none; width: 1.3em; }
.kc-meta .mt b { color: #26302e; }  .kc-meta .late { color: #b3261e; font-weight: 700; } .kc-meta .live-r b { color: #1f7a4d; }
.kc-btns { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .kc-btn.go { background: #1f7a4d; }

/* chart pages: smaller picture + side panel */
.chlay { display: grid; grid-template-columns: minmax(0, 640px) minmax(260px, 1fr); gap: 18px; align-items: start; direction: ltr; }
.chlay > * { direction: rtl; } html[lang="en"] .chlay > * { direction: ltr; }
.chmain { padding: 4px 0; }
.chmain .legend { margin-top: 6px; }
.chside { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 8px; }
.chsearch { width: 100%; border-radius: 999px; padding: 8px 14px; border: 1px solid var(--line); background: var(--card); }
.procres { display: flex; flex-direction: column; gap: 2px; } .procres .mi { display: flex; justify-content: space-between; gap: 8px; width: 100%; border: 0; background: var(--brand-l); border-radius: 8px; padding: 6px 10px; cursor: pointer; font: inherit; color: inherit; }
.recent { display: flex; flex-direction: column; gap: 4px; } .rchips { display: flex; flex-wrap: wrap; gap: 6px; }
.rchip { border: 1px solid var(--line); background: var(--card); color: inherit; border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 12.5px; cursor: pointer; } .rchip:hover, .rchip.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.chside .catbar { gap: 5px; } .chside .catbtn { border-radius: 999px; padding: 5px 11px; font-size: 12.5px; }
.chside .multibar { margin: 0; } .chside .multibar select { max-width: 100%; }
@media (max-width: 900px) { .chlay { grid-template-columns: 1fr; } .chside { position: static; } }

.pst-seg { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pst-seg .seg button { padding: 5px 14px; }

.pst3 { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--card); }
.pst3 .pb { border: 0; background: transparent; color: var(--muted, #6b7b8c); padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; border-inline-start: 1px solid var(--line); }
.pst3 .pb:first-child { border-inline-start: 0; }
.pst3 .pb:hover { background: var(--brand-l); }
.pst3 .pb.on { color: #fff; font-weight: 600; cursor: default; }
.pst3 .pb-planned.on { background: #e5484d; } .pst3 .pb-incomplete.on { background: #f0a020; } .pst3 .pb-completed.on { background: #2eae6b; } .pst3 .pb-existing.on { background: #8b6fe0; }

.nav-bdg.lab-late { background: #d64545; margin-inline-start: auto; } .nav-bdg.lab-late + .nav-bdg { margin-inline-start: 4px; }
.nav-bdg.ttl-bdg { margin-inline-start: 8px; vertical-align: middle; font-size: 13px; }
.nav-bdg.lab-out.ttl-bdg { margin-inline-start: 4px; }
:root[data-theme="dark"] .nav-bdg.lab-late { background: #b03030; }

.tray-sum { padding: 10px 14px; border-radius: 10px; background: var(--brand-l); font-weight: 600; }
.tray-types { gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.tray-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--line); }
.tray-row .tn { flex: 1 1 120px; font-weight: 600; }
.tray-row label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted, #6b7b8c); }
.stp { display: inline-flex; align-items: center; gap: 6px; } .stp b { min-width: 24px; text-align: center; font-size: 17px; color: var(--ink, inherit); }
.stp .sb { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); font-size: 18px; cursor: pointer; color: inherit; }
.stp .sb:hover { background: var(--brand-l); }
.tray-list { font-size: 12px; margin-top: 2px; }

/* finance hub toolbar */
.fh-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 14px; padding: 10px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.fh-bar .fh-q { flex: 1 1 180px; min-width: 150px; margin: 0; }
.fh-dates { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fh-dates label { display: flex; align-items: center; gap: 4px; font-size: 13px; }
.fh-noan .stats, .fh-noan .fh-an { display: none; }
.linkbtn { border: 0; background: transparent; color: var(--brand); font: inherit; cursor: pointer; padding: 6px 4px; }
.fh-owe { border-color: #d64545; color: #d64545; background: #fff5f5; } .fh-owe.on { background: #d64545; color: #fff; }
.fh-owe b { font-size: 15px; }
.fh-dates label[hidden] { display: none; }

.an-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); border-bottom: 1px solid var(--line); background: #f7f8fc; }
.an-hc { padding: 10px 14px; display: flex; gap: 10px; align-items: baseline; border-inline-end: 1px solid var(--line); }
.an-hc span { color: var(--muted); font-size: 13px; min-width: 56px; } .an-hc b { font-weight: 600; }
.an-red { display: block; text-decoration: none; color: var(--danger); font-size: 12px; font-weight: 600; }
.an-redv, .an-redv small { color: var(--danger) !important; }
.an-pctv { color: var(--muted); font-weight: 400; }
.an-note { padding: 8px 14px; margin: 0; }
.lg-pager { justify-content: center; align-items: center; gap: 14px; margin: 12px 0; }

/* ---- fixed side menu: it never moves with the page; if it is taller than the screen it scrolls by itself (no scroll bar shown) */
@media (min-width: 861px) {
  #sidebar { position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
  #sidebar::-webkit-scrollbar { display: none; }
  #sidebar .lang { flex: none; margin-top: auto; }
  /* settings menu: the column stretches the full height of the page, the menu inside sticks under the top bar while the page scrolls */
  .set-layout { align-items: stretch; }
  .set-nav { position: static; background: none; border: 0; padding: 0; display: block; }
  .set-nav-in { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 1px; background: var(--card,#fff); border: 1px solid var(--line,#e3e8ee); border-radius: 12px; padding: 8px; max-height: calc(100vh - 92px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .set-nav-in a { padding: clamp(2px, calc(1.2vh - 5px), 10px) 12px; font-size: clamp(13px, 1.7vh, 15px); line-height: 1.3; border-radius: 8px; color: inherit; text-decoration: none; font-weight: 600; }
  .set-nav-in a:hover { background: rgba(0,0,0,.04); }
  .set-nav-in a.active { background: #4f6b69; color: #fff; }
}
@media (min-width: 861px) {
  /* row sizes follow the screen height so the whole menu (even with a long group open) fits without scrolling */
  #sidebar { padding: clamp(6px, 1.2vh, 18px) 10px; gap: clamp(4px, 0.8vh, 14px); }
  #sidebar .brand { padding: 2px 8px clamp(4px, 1vh, 12px); font-size: clamp(16px, 2.2vh, 19px); }
  #sidebar nav { gap: 1px; }
  #sidebar nav a { padding: clamp(3px, calc(1.3vh - 5px), 10px) 10px; font-size: clamp(13px, 1.55vh, 15px); line-height: 1.25; }
  #sidebar .sub { margin: 0 12px 4px; }
  #sidebar .sub a { padding: clamp(1px, calc(.7vh - 4px), 5px) 9px; font-size: clamp(12px, 1.4vh, 13px); line-height: 1.25; }
  #sidebar .lang { padding: clamp(4px, 0.9vh, 8px); }
}
@media (max-width: 860px) { .set-nav-in { display: flex; flex-wrap: wrap; gap: 4px; background: var(--card,#fff); border: 1px solid var(--line,#e3e8ee); border-radius: 12px; padding: 8px; } }

/* ---- dark mode: dashboard columns, cards and the rest of the pale pieces (they had fixed light colours) */
:root[data-theme="dark"] .kcol { background: #2a3836; }
:root[data-theme="dark"] .kcol-h { color: var(--ink); }
:root[data-theme="dark"] .kcol-h span { background: #3b4c49; color: var(--ink); }
:root[data-theme="dark"] .kc { background: #35463f; background: #34443f; color: var(--ink); box-shadow: 0 1px 0 rgba(255,255,255,.04) inset; }
:root[data-theme="dark"] .kc-t a { color: var(--ink); }
:root[data-theme="dark"] .kc-t small { color: var(--muted); }
:root[data-theme="dark"] .kc-m.due { color: #ff8f86; }
:root[data-theme="dark"] .kc-m.ok { color: #7fd9a6; }
:root[data-theme="dark"] .kc-btn { background: #4f7a75; color: #fff; }
:root[data-theme="dark"] .kc-eye { background: #3b4c49; color: var(--ink); }
:root[data-theme="dark"] .kc-why { background: #3b4c49; color: var(--ink); }
:root[data-theme="dark"] .lay-sw { background: #263230; border-color: var(--line); }
:root[data-theme="dark"] .lay-b.on { background: #4f7a75; }
:root[data-theme="dark"] .up-r { border-top-color: var(--line); }
:root[data-theme="dark"] .up-box { border-color: var(--line); }
:root[data-theme="dark"] .kcol.blur .kcol-b { filter: blur(9px); }
:root[data-theme="dark"] .kc-meta { color: var(--muted); }
:root[data-theme="dark"] .kc-meta .mt b { color: var(--ink); }
:root[data-theme="dark"] .kc-meta .late { color: #ff8f86; }
:root[data-theme="dark"] .kc-meta .live-r b { color: #7fd9a6; }
:root[data-theme="dark"] .kc b { color: var(--ink); }

/* the doctor forgot to pick the status of the treatment: the three buttons shake red until one is chosen */
.pst-seg.need .seg { outline: 2px solid #d33; border-radius: 999px; animation: pstShake .35s; }
.pst-seg.need > small { color: #d33; font-weight: 700; }
@keyframes pstShake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
/* dark mode: the treatment colours must stay bright on the floating teeth (multiply would turn them black) */
:root[data-theme="dark"] .pchart .ptooth .ov { mix-blend-mode: normal; opacity: .6; }

.chside .fndlist { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .chside .fndlist > span { width: 100%; font-size: 13px; color: var(--muted); }

/* exam findings: every finding visible at once, big tap targets side by side */
.chside .fndgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:4px 0 10px}
.chside .fndb{display:flex;align-items:center;gap:8px;padding:12px 10px;border:1.5px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font-size:14px;font-weight:600;cursor:pointer;text-align:start}
.chside .fndb .sdot{width:16px;height:16px;border-radius:50%;flex:none}
.chside .fndb:hover{border-color:var(--primary)}
.chside .fndb.on{border-color:var(--primary);background:var(--primary);color:#fff;box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 25%,transparent)}

.ir .ir-p{width:110px;text-align:end}.ir tr.free td{background:color-mix(in srgb,var(--ok) 12%,transparent)}.ir .free-tag{color:var(--ok)}
.ir tr.free .ir-free{border-color:var(--ok);color:var(--ok)}

.free-tag{color:var(--ok);font-weight:700}

.oc-inv{margin-top:8px;display:flex;flex-direction:column;gap:6px}.oc-inv .invw{position:relative}
.oc-ih{display:flex;align-items:center;gap:8px;padding:8px 10px 8px 34px;flex-wrap:wrap}.oc-inv .oc-plus{top:6px;inset-inline-start:8px}
.oc-file{font-size:13px;text-decoration:none}.oc .kc-t a[data-oname]{cursor:pointer}.oc-arw{font-style:normal;font-size:12px;opacity:.6}.oc .kc-t a.open .oc-arw{transform:rotate(180deg);display:inline-block}

.print-only-inv{display:none}
@media print{
  body.printing-inv > *:not(#invPrint){display:none!important}
  body.printing-inv #invPrint{display:block!important}
  #invPrint .ip-sheet{page-break-after:always;color:#000;direction:inherit}#invPrint .ip-sheet:last-child{page-break-after:auto}
  #invPrint table{width:100%;border-collapse:collapse;margin:8px 0}#invPrint th,#invPrint td{border-bottom:1px solid #999;padding:5px 4px;text-align:start}
  #invPrint .n{text-align:end}#invPrint .ip-t{display:flex;justify-content:space-between;margin-top:10px}
  #invPrint h1{font-size:1.3em;margin:0}#invPrint h2{font-size:1.05em;margin:2px 0 8px}
}

.ir .ir-docrow{margin-top:4px;font-size:13px}.ir .ir-doc{padding:4px 6px;border-radius:8px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);max-width:190px}.ir .ir-doc.need{border-color:var(--danger);animation:pstShake .35s 2}

/* phones: the invoice-review table becomes one card per treatment (nothing cut off, dark mode included) */
@media (max-width:640px){
  .ir .tbl-wrap{overflow:visible}.ir .tbl,.ir .tbl tbody,.ir .tbl tfoot,.ir .tbl tr,.ir .tbl td,.ir .tbl th{display:block;width:auto}
  .ir .tbl thead{display:none}
  .ir .tbl tbody tr[data-lead]{border:1px solid var(--line);border-radius:12px;padding:8px 10px;margin-bottom:10px;background:var(--card)}
  .ir .tbl tbody tr[data-lead] td{border:0;padding:5px 0;display:flex;justify-content:space-between;align-items:center;gap:10px;text-align:start}
  .ir .tbl tbody tr[data-lead] td[data-l]::before{content:attr(data-l);color:var(--muted);font-size:13px;flex:none}
  .ir .tbl tbody tr[data-lead] td:first-child{display:block;font-weight:700}
  .ir .tbl tfoot tr{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 14px;padding:8px 2px;border-top:2px solid var(--line)}
  .ir .tbl tfoot th{border:0;padding:0}
  .ir .ir-p{width:120px}.ir .ir-d{width:110px}
  .ir .ir-doc{max-width:100%;width:100%}
  .ir .actions{display:flex;flex-direction:column;gap:8px}.ir .actions .btn{width:100%;text-align:center}
}

.ir .ir-incl{margin-inline-end:6px}.ir tr.off{opacity:.45}

@media (max-width:640px){
  .tbl.cardrows,.tbl.cardrows tbody{display:block;width:100%}.tbl.cardrows tr{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:10px 0;border-bottom:1px solid var(--line)}
  .tbl.cardrows td{display:block;border:0;padding:0;width:auto}.tbl.cardrows .doc-sel{max-width:170px}
  .ir .tbl tbody tr[data-lead],.ir .tbl tbody tr[data-lead]:nth-child(even),.ir .tbl tbody tr[data-lead]:nth-child(odd){background:var(--card)!important}
}
.ir .ir-inc{width:18px;height:18px;display:inline-block;margin:0 0 0 6px;vertical-align:middle;padding:0}
@media (max-width:640px){.ir .tbl tbody tr[data-lead] td{background:transparent!important}}

.pendbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px;padding:10px 14px;border-radius:12px;background:color-mix(in srgb,var(--warn) 18%,var(--card));border:1px solid var(--warn)}

/* primary-teeth picture: same behaviour as the permanent one, its own size and masks */
.pchart.pri{aspect-ratio:1474/804}
.pchart.pri .ovc{-webkit-mask-image:url(/static/chart-crown-pri.png?v=2);mask-image:url(/static/chart-crown-pri.png?v=2)}
.pchart.pri .ovr{-webkit-mask-image:url(/static/chart-canal-pri.png?v=2);mask-image:url(/static/chart-canal-pri.png?v=2)}
.pchart .plb{position:absolute;transform:translate(-50%,-50%);font-size:clamp(9px,1.5vw,15px);font-weight:600;color:var(--muted);pointer-events:none;line-height:1}
.pchart .plb.ghost{opacity:.35;font-weight:400}

.jawbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.pchart.hl-up .phit.ju,.pchart.hl-lo .phit.jl{background:rgba(59,143,148,.22);outline:1px dashed rgba(59,143,148,.55)}

.jawbar{gap:6px}
.jawbtn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:40px;border:1px solid var(--line,#d6dde0);border-radius:10px;background:var(--card);color:var(--pri,#3b8f94);cursor:pointer;transition:background .15s,border-color .15s,transform .1s}
.jawbtn:hover,.jawbtn:focus-visible{background:rgba(59,143,148,.14);border-color:var(--pri,#3b8f94)}
.jawbtn:active{transform:scale(.95)}

.dentbar{display:inline-flex;gap:6px}
.dentbtn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:36px;border:1px solid var(--line,#d6dde0);border-radius:10px;background:var(--card);color:var(--muted,#5a6b70);cursor:pointer;transition:background .15s,border-color .15s}
.dentbtn:hover{border-color:#0b78b5}
.dentbtn.on{background:#0b78b5;border-color:#0b78b5;color:#fff}

.pchart.hl-up .phit.ju.pm,.pchart.hl-lo .phit.jl.pm{background:none;outline:none}

.jawbtn.on{background:rgba(59,143,148,.16);border-color:var(--pri,#3b8f94)}
.jawbar #dentTog{color:var(--fg,var(--text,inherit));margin-inline-end:6px}

.plro{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--line,#d6dde0);border-radius:10px;background:var(--card);cursor:default}
.plro b{font-weight:600}

.pchart .rcover{position:absolute;inset:0;background:var(--card);pointer-events:none}

.task.tk-inv{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;cursor:pointer}
.task.tk-inv:hover{background:rgba(59,143,148,.08)}
.task.tk-inv .tk-go{margin-inline-start:auto;font-size:22px;opacity:.5}

.nd-form{display:flex;flex-direction:column;gap:12px;margin:10px 0}
.nd-row{display:flex;align-items:center;gap:10px}
.nd-row input[type=range]{flex:1;min-width:120px}
.nd-tones{display:flex;flex-wrap:wrap;gap:8px}
.nd-perm{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 12px;border:1px dashed var(--line,#d6dde0);border-radius:10px}
.nd-row input[type=checkbox]{flex:none;width:auto;margin:0}
.nd-row{justify-content:flex-start}

/* dark mode: rows that keep a light highlight (expired / soon, absent / late, loss) must show dark text, not white on cream */
:root[data-theme="dark"] tr.row-exp td, :root[data-theme="dark"] tr.row-soon td, :root[data-theme="dark"] tr.pr-abs td, :root[data-theme="dark"] tr.pr-late td, :root[data-theme="dark"] .stmt tr.final.loss td { color: #1b1b1b; }
:root[data-theme="dark"] tr.row-exp td .muted, :root[data-theme="dark"] tr.row-soon td .muted, :root[data-theme="dark"] tr.pr-abs td .muted, :root[data-theme="dark"] tr.pr-late td .muted,
:root[data-theme="dark"] tr.row-exp td small, :root[data-theme="dark"] tr.row-soon td small, :root[data-theme="dark"] tr.row-exp td .lnk, :root[data-theme="dark"] tr.row-soon td .lnk { color: #3a3a3a; }
:root[data-theme="dark"] tr.row-exp td .lnk, :root[data-theme="dark"] tr.row-soon td .lnk { font-weight: 600; }

/* money still owed (patients, invoices, labs) is always red */
td.bad, td.bad b, .ia-r { color: var(--danger); }
.ia-r, td.bad b { font-weight: 700; }
.badge.st-delayed.paid-no, .lab-unpaid { color: var(--danger); }
:root[data-theme="dark"] td.bad, :root[data-theme="dark"] td.bad b, :root[data-theme="dark"] .ia-r, :root[data-theme="dark"] .due, :root[data-theme="dark"] .stat.due b, :root[data-theme="dark"] .pbal.due b { color: #ff8f8e; }
.due, .stat.due b, .pbal.due b, td.bad, td.bad b, .ia-r, .kc-m.due, .acc-line .due { color: #d11a1a; }
.chip.sm-chip { color: #fff; }

/* inventory quick filters (tap to show only that kind; several can be on together) */
.invf { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.invf-b, .invf-x { border: 1px solid var(--line); background: var(--card, #fff); color: var(--ink, inherit); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.invf-b b { min-width: 20px; text-align: center; border-radius: 999px; padding: 0 6px; color: #fff; background: #8795a5; }
.invf-b.expired b, .invf-b.out b { background: #d11a1a; } .invf-b.soon b, .invf-b.reorder b { background: #cc8a3c; }
.invf-b.on { outline: 2px solid var(--brand, #1aa); background: var(--brand-l, #e6f6f4); }
.invf-b:disabled { opacity: .45; cursor: default; }
:root[data-theme="dark"] .invf-b, :root[data-theme="dark"] .invf-x { background: #26332f; color: #eef; border-color: #3b4b47; }
:root[data-theme="dark"] .invf-b.on { background: #2f4a45; }

/* "to buy" page: low items per supplier */
.ro-intro { margin: 0 0 12px; }
.ro-card { margin-bottom: 14px; }
.ro-tbl td { vertical-align: middle; } .ro-ck { width: 34px; } .ro-ck input { width: 18px; height: 18px; }
.ro-q { width: 78px; text-align: center; }
.ro-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line); margin-top: 8px; }
.ro-foot .grow { flex: 1; }
.ro-tbl .ro-q { width: 72px !important; flex: none; padding: 6px 8px; }
.ro-tbl td:nth-child(2) { width: 100%; } .ro-tbl td.num { white-space: nowrap; }
@media (max-width: 700px) { .ro-tbl td:nth-child(4) { display: none; } .ro-foot .btn { flex: 1 1 auto; justify-content: center; } }
input.amt-big { font-size: 22px; font-weight: 700; padding: 12px 14px; text-align: center; border: 2px solid var(--brand, #2a8); }

/* call someone (owner) */
.call-who { display: grid; gap: 8px; margin: 10px 0; max-height: 260px; overflow: auto; }
.call-u { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.call-u input { width: 18px; height: 18px; flex: none; }
.call-u span { display: flex; flex-direction: column; }
.call-u:has(input:checked) { border-color: var(--brand, #2a8); background: var(--brand-l, #e6f6f4); }
:root[data-theme="dark"] .call-u:has(input:checked) { background: #2f4a45; }
.call-q { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 12px; }
#tbCall { font-size: 16px; }

/* dark mode fixes: appointment details labels, and every piece of text inside the light highlighted rows */
:root[data-theme="dark"] .ad-k { background: color-mix(in srgb, var(--c, #999) 24%, #1f2b29); color: var(--ink, #e8efee); }
:root[data-theme="dark"] tr.row-exp td, :root[data-theme="dark"] tr.row-soon td, :root[data-theme="dark"] tr.pr-abs td, :root[data-theme="dark"] tr.pr-late td,
:root[data-theme="dark"] tr.row-exp td a, :root[data-theme="dark"] tr.row-soon td a, :root[data-theme="dark"] tr.row-exp td b, :root[data-theme="dark"] tr.row-soon td b,
:root[data-theme="dark"] tr.row-exp td span:not(.badge):not(.chip-s), :root[data-theme="dark"] tr.row-soon td span:not(.badge):not(.chip-s),
:root[data-theme="dark"] tr.row-exp td div, :root[data-theme="dark"] tr.row-soon td div, :root[data-theme="dark"] tr.row-exp td small, :root[data-theme="dark"] tr.row-soon td small,
:root[data-theme="dark"] tr.row-exp td .muted, :root[data-theme="dark"] tr.row-soon td .muted, :root[data-theme="dark"] tr.row-exp td .lnk, :root[data-theme="dark"] tr.row-soon td .lnk { color: #1b1b1b !important; }
:root[data-theme="dark"] tr.row-exp td .warn, :root[data-theme="dark"] tr.row-soon td .warn { color: #8a4b00 !important; }
:root[data-theme="dark"] tr.row-exp td .due, :root[data-theme="dark"] tr.row-soon td .due { color: #b3150f !important; }
/* hovering a highlighted row keeps its light colour (the normal dark hover would hide the dark text) */
:root[data-theme="dark"] .tbl tr.row-exp:hover td, :root[data-theme="dark"] tr.row-exp:hover td { background: #f7d3cf; }
:root[data-theme="dark"] .tbl tr.row-soon:hover td, :root[data-theme="dark"] tr.row-soon:hover td { background: #ffeec9; }
:root[data-theme="dark"] .tbl tr.pr-abs:hover td { background: #ffe0e0; } :root[data-theme="dark"] .tbl tr.pr-late:hover td { background: #fff0cc; }
:root[data-theme="dark"] tr.row-exp td .chip-s, :root[data-theme="dark"] tr.row-soon td .chip-s { background: #fff; border-color: #d9c9a8; }

/* appointment form: doctor drop-down (name + specialty on one line; red = not on duty at that time, still selectable) */
.doc-dd { position: relative; }
.doc-btn, .doc-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; border: 1px solid var(--line); background: var(--card, #fff); color: inherit; font: inherit; text-align: start; cursor: pointer; }
.doc-btn { border-radius: 10px; min-height: 42px; } .doc-btn i { margin-inline-start: auto; font-style: normal; opacity: .6; }
.doc-btn small, .doc-row small { color: var(--muted); font-size: 12.5px; } .doc-btn small::before, .doc-row small::before { content: "· "; }
.doc-btn em, .doc-row em { font-style: normal; font-size: 12px; color: #d11a1a; font-weight: 600; margin-inline-start: auto; }
.doc-btn i + em { margin: 0; }
.doc-list { position: absolute; z-index: 30; inset-inline: 0; top: calc(100% + 4px); max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--card, #fff); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.doc-row { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; } .doc-row:last-child { border-bottom: 0; }
.doc-row:hover, .doc-row.on { background: var(--brand-l, #e6f6f4); }
.doc-row.off b, .doc-btn.off b { color: #d11a1a; } .doc-btn.off { border-color: #d11a1a; }
:root[data-theme="dark"] .doc-btn, :root[data-theme="dark"] .doc-row, :root[data-theme="dark"] .doc-list { background: #26332f; }
:root[data-theme="dark"] .doc-row:hover, :root[data-theme="dark"] .doc-row.on { background: #2f4a45; }
:root[data-theme="dark"] .doc-row.off b, :root[data-theme="dark"] .doc-btn.off b, :root[data-theme="dark"] .doc-btn em, :root[data-theme="dark"] .doc-row em { color: #ff8f8e; }
:root[data-theme="dark"] .doc-btn.off { border-color: #e0605c; }
.nd-diag { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); display: grid; gap: 4px; font-size: 13.5px; }
.nd-dg.bad { color: #d11a1a; } :root[data-theme="dark"] .nd-dg.bad { color: #ff8f8e; }
.nf-bar { display: flex; gap: 8px; margin: 6px 0 10px; } .nf-sth { margin: 14px 0 2px; }

/* "also alert me about my own actions" switch */
.nf-self{display:flex;align-items:center;gap:8px;margin-top:12px;padding:10px 12px;border:1px solid var(--border,#d8dee6);border-radius:10px;font-weight:600}
:root[data-theme="dark"] .nf-self{border-color:#3a4654}
.nf-self{justify-content:flex-start}
.nf-self input{flex:0 0 auto;width:auto;min-width:0;margin:0}

.nd-log{white-space:pre-wrap;word-break:break-all;font-size:12px;background:rgba(127,127,127,.12);border-radius:8px;padding:8px;margin:6px 0;max-height:160px;overflow:auto}

.nd-cert{border:1px dashed var(--border,#c9a227);border-radius:10px;padding:10px 12px;margin:8px 0}

/* many tabs (clinic settings): the strip scrolls by itself instead of widening the whole page */
.acc-tabs { overflow-x: auto; max-width: 100%; scrollbar-width: thin; }
.acc-tabs button { white-space: nowrap; flex: 0 0 auto; }

/* refunds (withdrawals) + the patient wallet */
.tag.rf { background: rgba(200,60,60,.14); color: #b3362f; }
:root[data-theme="dark"] .tag.rf { background: rgba(255,120,110,.18); color: #ff9c92; }
.rf-row td { background: rgba(200,60,60,.05); }
:root[data-theme="dark"] .rf-row td { background: rgba(255,120,110,.07); }
.wallet .card-head { flex-wrap: wrap; gap: 8px; }
.wallet .card-head .row { display: flex; flex-wrap: wrap; gap: 6px; }
.sumgrid.sm { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.sumgrid.sm .stat b { font-size: 1.05rem; }

/* paid / owed line under the patient's name (only for accounts allowed to see billing) */
.pmoney { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 2px 0 6px; font-size: .92rem; }

/* patients table: wide, name column fixed while the rest scrolls sideways */
.pgrid-wrap { overflow: auto; max-height: calc(100vh - 230px); padding: 0; }
table.pgrid { display: table; gap: 0; grid-template-columns: none; border-collapse: separate; border-spacing: 0; min-width: max-content; width: 100%; }
.pgrid th, .pgrid td { padding: 10px 14px; white-space: nowrap; border-bottom: 1px solid var(--line); background: var(--card); text-align: start; }
.pgrid th.num, .pgrid td.num { text-align: end; }
.pgrid thead th { position: sticky; top: 0; z-index: 3; font-weight: 600; font-size: .85rem; color: var(--muted); }
.pgrid .sc { position: sticky; z-index: 2; }
.pgrid thead .sc { z-index: 4; }
.pgrid .sc1 { inset-inline-start: 0; width: 40px; min-width: 40px; max-width: 40px; padding-inline: 10px; }
.pgrid .sc2 { inset-inline-start: 40px; min-width: 150px; max-width: 230px; overflow: hidden; text-overflow: ellipsis; box-shadow: inset -1px 0 0 var(--line); }
:root[dir="rtl"] .pgrid .sc2 { box-shadow: inset 1px 0 0 var(--line); }
.pgrid tbody tr.click { cursor: pointer; }
.pgrid tbody tr.click:hover td { background: var(--hover, rgba(127,127,127,.08)); }
.pgrid .pg-note { display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 700px) { .pgrid .sc2 { min-width: 110px; max-width: 140px; } .pgrid th, .pgrid td { padding: 9px 10px; } }

/* patients: export / import sit at the bottom, on the end side (right in English, left in Arabic) */
.pfoot { display: flex; gap: 8px; justify-content: flex-end; margin: 14px 0 6px; flex-wrap: wrap; }
.pgrid th.srt { cursor: pointer; user-select: none; }
.pgrid th.srt:hover { color: var(--accent, #3d8f94); }
.srt-m { font-size: 10px; opacity: .8; }
/* lab orders: wide table, patient column frozen */
.lab-wrap { max-height: calc(100vh - 260px); }
.lab-item { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 190px; max-width: 320px; white-space: normal; }
.lab-item .lab-det, .lab-item .trays { flex-basis: 100%; white-space: normal; }
.pgrid td .lab-act { display: flex; gap: 6px; align-items: center; }
html { overflow-x: hidden; }  /* the closed side menu sits off-screen: it must not make phones scroll sideways (Arabic) */

.ev a.evp { color: inherit; text-decoration: none; } .ev a.evp:hover { text-decoration: underline; }

/* expenses form + table */
.exp-items { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: color-mix(in srgb, var(--accent, #3d8f94) 5%, var(--card)); }
.exp-items-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.exp-item { display: grid; grid-template-columns: 1fr 80px 110px 32px; gap: 6px; margin-bottom: 6px; }
.field.chk { flex-direction: row; align-items: center; gap: 8px; } .field.chk input { width: auto; }
.pill-amt, .pill-paid { display: inline-block; padding: 2px 8px; border-radius: 6px; font-weight: 600; background: color-mix(in srgb, var(--accent, #3d8f94) 14%, var(--card)); }
.pill-paid { background: color-mix(in srgb, var(--ok, #2e8b57) 16%, var(--card)); }
@media (max-width: 700px) { .exp-item { grid-template-columns: 1fr 60px 80px 30px; } }

/* phone boxes: red when incomplete / wrong, green when complete */
input.ph-ok { border-color: var(--ok, #2e8b57) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--ok, #2e8b57) 22%, transparent); }
input.ph-bad { border-color: var(--danger, #d64545) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger, #d64545) 22%, transparent); }
.ph-msg { display: block; min-height: 1em; font-size: 12px; } .ph-msg.ok { color: var(--ok, #2e8b57); } .ph-msg.bad { color: var(--danger, #d64545); }
.tag.diagfee { background: color-mix(in srgb, #2b7fd4 18%, var(--card)); color: #1f6bb8; font-weight: 600; }

/* internal chat */
#sidebar nav a .nbadge{margin-inline-start:auto;background:#d64545;color:#fff;border-radius:10px;font-style:normal;font-size:11px;padding:1px 6px;min-width:18px;text-align:center}
.chat{display:flex;padding:0;height:calc(100vh - 150px);min-height:360px;overflow:hidden}
.chat-side{width:240px;border-inline-end:1px solid var(--line);overflow:auto;flex:none}
.chat-room{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;color:inherit;padding:10px 12px;cursor:pointer;text-align:start;border-bottom:1px solid var(--line);font:inherit}
.chat-room.on{background:rgba(184,149,95,.18)}
.chat-room .cr-b{flex:1;min-width:0;display:flex;flex-direction:column}
.chat-room small{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-room .nbadge{background:#d64545;color:#fff;border-radius:10px;font-style:normal;font-size:11px;padding:1px 6px}
.chat-main{flex:1;display:flex;flex-direction:column;min-width:0}
.chat-title{padding:10px 14px;font-weight:700;border-bottom:1px solid var(--line)}
.chat-msgs{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:6px}
.chat-day{align-self:center;color:var(--muted);font-size:12px;margin:6px 0}
.chat-msg{display:flex}.chat-msg.mine{justify-content:flex-end}
.chat-msg .cm-b{max-width:75%;background:rgba(127,127,127,.14);border-radius:12px;padding:6px 10px}
.chat-msg.mine .cm-b{background:rgba(184,149,95,.30)}
.cm-n{display:block;font-weight:700;font-size:12px;color:var(--muted)}
.cm-t{word-break:break-word;white-space:normal}
.cm-ts{display:block;color:var(--muted);font-size:10px;text-align:end}
.chat-form{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line)}
.chat-form textarea{flex:1;resize:none;height:40px}
@media(max-width:700px){.chat{flex-direction:column;height:calc(100vh - 130px)}.chat-side{width:auto;display:flex;overflow-x:auto;border-inline-end:0;border-bottom:1px solid var(--line);max-height:64px}.chat-room{width:auto;white-space:nowrap;border-bottom:0}.chat-room small{display:none}}