:root {
  --paper: #FAFAF7;
  --sheet: #FFFFFF;
  --ink: #24272C;
  --ink-soft: #5B616B;
  --rule: #DCDFE4;
  --ballpoint: #2747A6;
  --ballpoint-wash: #E8ECF8;
  --lightbox: #2A2D31;
  --check: #A86A12;
  --check-wash: #FBF1DF;
  --wrong: #B3261E;
  --wrong-wash: #FBE7E5;
  --match: #1E7548;
  --match-wash: #E3F2E9;
  --radius: 6px;
  --font: "Segoe UI", "Nirmala UI", "Noto Sans Bengali", system-ui, sans-serif;
}

* { box-sizing: border-box; }
body {
  min-height: 100vh;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.45 var(--font);
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-direction: column;
}
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ballpoint); outline-offset: 1px; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- top bar */
.bar {
  display: flex; align-items: center; gap: 16px;
  padding: 8px 16px;
  background: var(--sheet);
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 5;
}
.home { display: flex; align-items: center; gap: 8px; flex: none; font-weight: 700; color: var(--ink); text-decoration: none; }
.home img { border-radius: 6px; }
.home:hover { color: var(--ballpoint); }
.where { color: var(--ink-soft); }
.grow { flex: 1; }
.who { display: flex; align-items: center; gap: 8px; color: var(--ink-soft); }
.who input { width: 170px; }
.actions { display: flex; gap: 8px; align-items: center; }
/* The review screen's bar (tabs, file name, who, the hint and Reject / Save draft / Approve) is wider than
   a 1280 px screen for an admin: it wraps, the buttons going to a second row at the right, instead of
   making the whole page scroll sideways. */
.bar { flex-wrap: wrap; }
.bar .actions { margin-left: auto; }

button {
  border: 1px solid var(--rule); background: var(--sheet);
  padding: 7px 14px; border-radius: var(--radius); cursor: pointer;
}
button:hover:not(:disabled) { border-color: var(--ink-soft); }
button:disabled { cursor: not-allowed; opacity: .5; }
button.primary { background: var(--ballpoint); border-color: var(--ballpoint); color: #fff; font-weight: 600; }
button.primary:hover:not(:disabled) { background: #1E3A8C; }
button.danger { background: var(--wrong); border-color: var(--wrong); color: #fff; }
button.link { border: 0; background: none; padding: 0; color: var(--ballpoint); text-decoration: underline; }

input, select, textarea {
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 6px 8px; background: var(--sheet); width: 100%;
}
input:hover, select:hover, textarea:hover { border-color: #B9BEC6; }
textarea { resize: vertical; min-height: 64px; }

/* ---------------------------------------------------------------- queue */
.queue { max-width: 980px; width: 100%; margin: 32px auto; padding: 0 16px; }
.queue h1 { font-size: 24px; font-weight: 600; margin: 0 0 4px; }
.queue .lead { color: var(--ink-soft); margin: 0 0 24px; }
.queue table { width: 100%; border-collapse: collapse; background: var(--sheet); border: 1px solid var(--rule); }
.queue th { text-align: left; font-weight: 600; color: var(--ink-soft); font-size: 13px; padding: 10px 12px; border-bottom: 1px solid var(--rule); }
.queue td { padding: 10px 12px; border-bottom: 1px solid var(--rule); }
.queue tr.row { cursor: pointer; }
.queue tr.row:hover td { background: var(--ballpoint-wash); }
.queue .num { text-align: right; }
.state { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: 13px; }
.state.new { background: var(--ballpoint-wash); color: var(--ballpoint); }
.state.draft { background: var(--check-wash); color: var(--check); }
.state.approved { background: var(--match-wash); color: var(--match); }
.problems-critical { color: var(--wrong); font-weight: 600; }
.empty { background: var(--sheet); border: 1px dashed var(--rule); padding: 40px; text-align: center; color: var(--ink-soft); }
.empty code { background: var(--paper); padding: 1px 6px; border-radius: 4px; }

/* ---------------------------------------------------------------- review layout */
.review { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 0; }
.viewer { position: relative; background: var(--lightbox); overflow: hidden; height: calc(100vh - var(--bar-h, 53px)); position: sticky; top: var(--bar-h, 53px); touch-action: none; cursor: grab; }
.viewer.dragging { cursor: grabbing; }
.stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.stage img { display: block; user-select: none; -webkit-user-drag: none; }
/* Where each medicine line is on the photo (invisible; inside the zoomed photo). */
.box { position: absolute; pointer-events: none; }
/* The mark around the selected line: drawn over the photo in screen pixels (positionMarks), just
   outside the line's area, so it is thin at every zoom and nothing lies on the handwriting; no tint,
   no darkening. Orange: visible on white paper and on blue or black ink. */
.mark { position: absolute; pointer-events: none; z-index: 1; border: 2px solid #E8590C; border-radius: 4px; }
.mark.hover { border: 1px dashed rgba(232, 89, 12, .55); }
.mark span { position: absolute; right: 100%; top: -1px; margin-right: 6px; padding: 1px 6px; border-radius: 3px;
  background: #E8590C; color: #fff; font: 600 12px/1.4 var(--font); }
.viewer.no-boxes .mark { display: none; }
.viewer-tools { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 6px; align-items: center; z-index: 2; }
.viewer-tools button { background: rgba(255,255,255,.92); border: 0; min-width: 36px; white-space: nowrap; }
.viewer-hint { color: #C9CDD3; font-size: 13px; margin-left: 6px; }
.viewer-error { color: #E9ECEF; padding: 24px; }

.form { padding: 20px 24px 120px; overflow: visible; }
.form section { margin-bottom: 28px; }
.form h2 { font-size: 17px; font-weight: 600; margin: 0 0 10px; }
.form h2 .count { color: var(--ink-soft); font-weight: 400; }
.hint { color: var(--ink-soft); font-size: 13px; }

/* problems */
.issues { list-style: none; margin: 0; padding: 0; border-left: 3px solid var(--check); background: var(--sheet); }
.issue { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 10px 14px; border-bottom: 1px solid var(--rule); }
.issue.critical { border-left: 3px solid var(--wrong); margin-left: -3px; }
.issue.done .issue-title { color: var(--ink-soft); text-decoration: line-through; }
.issue-title { font-weight: 600; }
.issue-detail { grid-column: 1 / -1; color: var(--ink-soft); font-size: 13px; }
.issue-todo { grid-column: 1 / -1; font-size: 14px; }
.issue-act { align-self: start; white-space: nowrap; }
.all-clear { color: var(--match); }

/* medicine lines */
.med { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); margin-bottom: 10px; }
.med.active { border-color: var(--ballpoint); box-shadow: 0 0 0 1px var(--ballpoint); }
.med.needs { border-left: 4px solid var(--check); }
.med.needs.checked { border-left-color: var(--match); }
/* wraps when the form column is narrow (about 1000 px screens: number, section, "Checked with the photo"
   and Delete line do not fit on one row of a half-width column) */
.med-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 12px; border-bottom: 1px solid var(--rule); }
.med-no { font-weight: 700; color: var(--ballpoint); min-width: 1.5em; cursor: pointer; }
.med-head select { width: auto; padding: 3px 6px; }
.med-head .grow { flex: 1; }
.med-check { display: flex; align-items: center; gap: 6px; font-size: 14px; white-space: nowrap; }
.med-check input { width: auto; }
.med-fields { display: grid; grid-template-columns: 150px minmax(0, 2fr) minmax(0, 1fr); gap: 8px; padding: 10px 12px 4px; }
.med-fields input[data-form] { width: 100%; }
.med-fields.second { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1.4fr); padding-top: 4px; }
.field { display: flex; flex-direction: column; gap: 2px; position: relative; }
.field > span { font-size: 12px; color: var(--ink-soft); }
.med-info { padding: 4px 12px 10px; font-size: 13px; display: flex; flex-direction: column; gap: 3px; }
.match { display: inline-flex; gap: 6px; align-items: baseline; }
.tag { font-size: 12px; padding: 0 7px; border-radius: 99px; white-space: nowrap; }
.tag.ok { background: var(--match-wash); color: var(--match); }
.tag.check { background: var(--check-wash); color: var(--check); }
.tag.bad { background: var(--wrong-wash); color: var(--wrong); }
.means { color: var(--ink-soft); }
.variants button, .candidates button { border: 1px dashed var(--ballpoint); color: var(--ballpoint); background: var(--sheet); padding: 0 8px; margin: 0 4px 2px 0; border-radius: 99px; font-size: 13px; }
.live-issue { color: var(--wrong); }
.live-issue.warning { color: var(--check); }
.add-line { margin-top: 4px; }

/* suggestions under the name field */
.suggest { position: absolute; top: 100%; left: 0; right: 0; z-index: 10; background: var(--sheet); border: 1px solid var(--ink-soft); border-radius: var(--radius); margin-top: 2px; max-height: 320px; overflow: auto; box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.suggest div { padding: 6px 10px; cursor: pointer; }
.med-fields .suggest { min-width: 280px; right: auto; }     /* the narrow Form box: a list wide enough to read */
.suggest div[aria-selected="true"], .suggest div:hover { background: var(--ballpoint-wash); }
.suggest b { display: block; }
.suggest small { color: var(--ink-soft); }
.suggest b .product { font-weight: 400; color: var(--ballpoint); margin-left: 4px; }

/* other sections */
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.grid4 { display: grid; grid-template-columns: minmax(0, 2fr) 100px 120px 100px; gap: 10px; }
.grid4 .wide { grid-column: span 1; }
details { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); padding: 10px 14px; }
details summary { cursor: pointer; font-weight: 600; }
details .summary-text { font-weight: 400; color: var(--ink-soft); margin-left: 6px; }
details h3 { font-size: 14px; margin: 16px 0 6px; color: var(--ink-soft); font-weight: 600; }
/* Doctor / Institute / Chamber inside the doctor box: each opens and closes on its own */
details.sub { border: 0; border-top: 1px solid var(--rule); border-radius: 0; padding: 10px 0 4px; margin-top: 10px; background: none; }
details.sub > summary { font-size: 14px; color: var(--ink-soft); }
details.sub .sub-ids { font-weight: 400; margin-left: 8px; }
details.sub .sub-ids b { color: var(--match); }
details.sub .sub-ids .new-id { color: var(--check); font-weight: 600; }
details.sub > .grid2 { margin-top: 8px; }

/* dialog and toast */
dialog { border: 1px solid var(--rule); border-radius: 8px; padding: 0; max-width: 440px; }
dialog::backdrop { background: rgba(0, 0, 0, .35); }
.reject-form { padding: 20px 24px; display: flex; flex-direction: column; gap: 8px; }
.reject-form h2 { margin: 0; font-size: 18px; }
.reject-form p { margin: 0 0 8px; color: var(--ink-soft); }
.reject-form label { display: flex; gap: 8px; align-items: center; }
.reject-form input[type=radio] { width: auto; }
.dialog-buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.toast { position: fixed; bottom: 20px; right: 20px; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--radius); max-width: 420px; z-index: 20; }
.toast.error { background: var(--wrong); }
.approve-hint { color: var(--ink-soft); font-size: 13px; white-space: nowrap; }

@media (max-width: 900px) {
  .review { grid-template-columns: minmax(0, 1fr); }
  .viewer { height: 45vh; position: relative; top: 0; }
  .who input { width: 120px; }
  .med-fields, .med-fields.second, .grid2, .grid4 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .box { transition: none; }
}

/* ---------------------------------------------------------------- pages: tabs, job, read, tools, result */
.tabs { display: flex; gap: 4px; }
.tabs a { color: var(--ink-soft); text-decoration: none; padding: 6px 12px; border-radius: var(--radius); }
.tabs a:hover { color: var(--ink); background: var(--paper); }
.tabs a.active { color: var(--ballpoint); background: var(--ballpoint-wash); font-weight: 600; }
.badge { display: inline-block; min-width: 1.6em; padding: 0 6px; border-radius: 99px; background: var(--check); color: #fff; font-size: 12px; text-align: center; font-weight: 600; }

.jobbar { display: flex; align-items: center; gap: 12px; padding: 6px 16px; background: var(--ballpoint-wash); color: var(--ballpoint); text-decoration: none; border-bottom: 1px solid var(--rule); font-size: 14px; position: sticky; top: 53px; z-index: 4; }
.jobbar-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.progress { display: inline-block; width: 160px; height: 6px; background: var(--sheet); border-radius: 99px; overflow: hidden; flex: none; }
.progress span { display: block; height: 100%; background: var(--ballpoint); transition: width .3s; }
.progress.big { width: 100%; height: 8px; background: var(--paper); margin: 8px 0 4px; }

.page { max-width: 1040px; width: 100%; margin: 28px auto 80px; padding: 0 16px; }
.page h1 { font-size: 24px; font-weight: 600; margin: 0 0 4px; }
.page .lead { color: var(--ink-soft); margin: 0 0 20px; }
.card { background: var(--sheet); border: 1px solid var(--rule); border-radius: 8px; padding: 16px 20px; margin-bottom: 16px; }
.card h2 { font-size: 17px; font-weight: 600; margin: 0 0 8px; }
.card-head { display: flex; align-items: center; gap: 12px; }
/* admin dashboard */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat { background: var(--sheet); border: 1px solid var(--rule); border-radius: 8px; padding: 12px 16px; }
.stat-value { font-size: 28px; font-weight: 700; color: var(--ballpoint); line-height: 1.2; }
.stat-label { font-weight: 600; }
table.list .num { text-align: right; white-space: nowrap; }
table.list tr.total td { border-top: 2px solid var(--rule); font-weight: 600; }
/* review: the saved doctor / institute / chamber ids */
.profile-ids { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; margin: 8px 0 4px; }
.profile-ids .pid b { color: var(--match); }
.profile-ids .new-id { color: var(--check); font-weight: 600; }
.form-note:empty { display: none; }
.form-note { display: block; font-size: 12px; margin-top: 2px; }
.card-head h2 { margin: 0; }
details.card > summary { font-weight: 600; cursor: pointer; }
.options { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; max-width: 640px; }
.inline { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.inline input { width: auto; }
.stage-now { color: var(--ink-soft); font-size: 14px; margin-top: 2px; }

.drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 28px 16px; border: 2px dashed var(--rule); border-radius: 8px; text-align: center; cursor: pointer; background: var(--paper); }
.drop:hover, .drop.over { border-color: var(--ballpoint); background: var(--ballpoint-wash); }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop:focus-within { outline: 3px solid var(--ballpoint); outline-offset: 1px; }
.like-link { color: var(--ballpoint); text-decoration: underline; }
.uploads, .results { list-style: none; margin: 10px 0 0; padding: 0; }
.uploads li { padding: 5px 0; border-bottom: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.results li { padding: 6px 0; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 2px 10px; align-items: baseline; }
.results li .tag { justify-self: start; }
.results li .why { grid-column: 2 / 4; }
.uploads li:last-child, .results li:last-child { border-bottom: 0; }
.file { font-weight: 600; overflow-wrap: anywhere; }
.tag.muted, .state.muted { background: var(--paper); color: var(--ink-soft); }
.state.bad { background: var(--wrong-wash); color: var(--wrong); }
.log pre { max-height: 260px; overflow: auto; background: var(--paper); padding: 8px 10px; font-size: 12px; white-space: pre-wrap; margin: 6px 0 0; }
.log summary { color: var(--ink-soft); cursor: pointer; font-size: 13px; margin-top: 8px; }

.filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.chip { border-radius: 99px; padding: 3px 12px; font-size: 13px; }
.chip.on { background: var(--ballpoint); border-color: var(--ballpoint); color: #fff; }
table.list { width: 100%; border-collapse: collapse; }
table.list th { text-align: left; font-weight: 600; color: var(--ink-soft); font-size: 13px; padding: 8px 10px; border-bottom: 1px solid var(--rule); }
table.list td { padding: 8px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.list .num { text-align: right; }
table.list.raw { table-layout: fixed; }
table.list.raw col.c-photo { width: 34%; }
table.list.raw col.c-conf { width: 100px; }
table.list.raw col.c-act { width: 190px; }
.row-actions { white-space: nowrap; text-align: right; }
.row-actions > * + * { margin-left: 8px; }
a.button { display: inline-block; border: 1px solid var(--rule); background: var(--sheet); padding: 7px 14px; border-radius: var(--radius); color: var(--ink); text-decoration: none; }
a.button:hover { border-color: var(--ink-soft); }
a.button.primary { background: var(--ballpoint); border-color: var(--ballpoint); color: #fff; font-weight: 600; }

.tool { display: flex; gap: 20px; align-items: center; justify-content: space-between; }
.tool p { margin: 0; color: var(--ink-soft); max-width: 720px; }
.tool > button, .tool > a.button { flex: none; }
code { background: var(--paper); padding: 1px 5px; border-radius: 4px; font-size: 13px; }

.result section { margin-top: 20px; }
.result .meds tr { cursor: pointer; }
.result .meds tr:hover td, .result .meds tr.active td { background: var(--ballpoint-wash); }
.facts p { margin: 4px 0; }
.label { color: var(--ink-soft); font-size: 13px; margin-right: 6px; }

@media (max-width: 900px) {
  .bar { flex-wrap: wrap; }
  .tool { flex-direction: column; align-items: flex-start; }
  .jobbar { top: 0; }
}

.report { background: #f6f7f9; border: 1px solid var(--rule); padding: 10px 12px; font-size: 12.5px; overflow-x: auto; white-space: pre; }

.folder-pick { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 14px 0 0; text-align: center; }
.folder-button { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; font-size: 16px; font-weight: 600;
  color: var(--ballpoint); border: 2px solid var(--ballpoint); background: var(--sheet); }
.folder-button:hover:not(:disabled) { background: var(--ballpoint-wash); border-color: var(--ballpoint); }
.chosen { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper);
  display: flex; flex-direction: column; gap: 8px; }
.chosen-head { display: flex; align-items: center; gap: 10px; }
.chosen-list { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.chosen-list li { padding: 2px 0; }
.chosen .big-button { align-self: center; min-width: 220px; }
#raw { overflow-x: auto; }
@media (max-width: 600px) {
  .bar .grow { display: none; }
  .queue { overflow-x: auto; }
  table.list.raw col.c-photo { width: auto; }
  table.list.raw col.c-act { width: 120px; }
}

/* ---------------------------------------------------------------- sign in, roles (update 26) */
.login { max-width: 380px; margin: 60px auto; display: flex; flex-direction: column; gap: 12px; padding: 22px 24px; }
.login h1 { font-size: 22px; margin: 0; }
.login button { margin-top: 6px; }
.who { display: flex; align-items: center; gap: 10px; color: var(--ink-soft); white-space: nowrap; }
.big-button { font-size: 17px; padding: 12px 22px; }
.scroll { overflow-x: auto; }
tr.shown td { background: var(--paper); }
a.chip.button { padding: 3px 12px; border-radius: 99px; font-size: 13px; }
a.chip.button.on { background: var(--ballpoint); border-color: var(--ballpoint); color: #fff; }

/* ---------------------------------------------------------------- phones (staff pages) */
.role-pick { min-width: 120px; }
@media (max-width: 700px) {
  .bar { gap: 6px 10px; padding: 8px 12px; }
  .bar .home { gap: 6px; }
  .bar .home img { width: 24px; height: 24px; }
  .bar .home span { font-size: 14px; }   /* name, sign-in and Sign out fit on one row of a phone */
  .tabs { order: -1; flex: 1 1 100%; overflow-x: auto; scrollbar-width: none; }
  .tabs a { white-space: nowrap; padding: 6px 10px; }
  .where { flex: 1 1 auto; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .who { font-size: 14px; }
  .actions { flex: 1 1 100%; flex-wrap: wrap; }
  .actions .approve-hint { flex: 1 1 100%; white-space: normal; }
  .actions button { flex: 1 1 auto; }
  .viewer { height: 50vh; }
  .issue-title, .issue-detail, .issue-todo { overflow-wrap: anywhere; min-width: 0; }
  .med-head { flex-wrap: wrap; }
  .med-head .grow { display: none; }
  .med-head .med-check { flex: 1 1 100%; white-space: normal; }
  .viewer-hint { display: none; }
  .form { padding: 16px 12px 120px; }
  .queue { margin: 20px auto; padding: 0 12px; }
  .card { padding-left: 14px; padding-right: 14px; }
  .toast { left: 12px; right: 12px; bottom: 12px; max-width: none; }
  table.list th, table.list td { padding: 6px 8px; }
}