/* SClinica app. Teal carried over from the desktop app and the website, so doctors recognise it.
   Noto Sans / Nirmala UI also cover Marathi and Hindi. */

:root {
  --teal: #0f6e6e;
  --teal-deep: #0a4f4f;
  --teal-wash: #e3efed;
  --paper: #f1f5f4;
  --surface: #ffffff;
  --ink: #1b2927;
  --muted: #5b6b69;
  --line: #d2dedc;
  --danger: #b3261e;
  --warn-bg: #fff4dc;
  --warn: #7a4f00;
  --ok: #1d6b3c;
  --info-bg: #e8f1fb;
  --radius: 6px;
  --font: "Noto Sans", "Nirmala UI", "Segoe UI", system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); line-height: 1.5; color: var(--ink); background: var(--paper); }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; font-weight: 600; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.2rem; margin-top: 1.25rem; }
h3 { font-size: 1rem; margin-top: .75rem; }
p { margin: 0 0 .8rem; }
a { color: var(--teal); }
a:hover { color: var(--teal-deep); }
:focus-visible { outline: 3px solid #f2b705; outline-offset: 2px; }
code, .mono { font-family: ui-monospace, Consolas, monospace; font-size: .92em; }

/* ---------- top bar */
.topbar { background: var(--teal); color: #fff; position: sticky; top: 0; z-index: 10; }
.topbar-inner { max-width: 1100px; margin: 0 auto; padding: .6rem 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.25rem; }
.brand { color: #fff; text-decoration: none; font-weight: 700; font-size: 1.1rem; }
.brand:hover { color: #fff; }
.clinic-name { font-weight: 400; font-size: .9rem; color: #d8ecea; margin-left: .4rem; }
.nav { display: flex; flex-wrap: wrap; gap: .25rem 1rem; flex: 1; }
.nav a { color: #d8ecea; text-decoration: none; padding: .15rem 0; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a.current { color: #fff; border-bottom-color: #fff; }
.save-status { font-size: .85rem; color: #d8ecea; }
.save-status.ok { color: #c9f2d9; }
.save-status.bad { color: #fff; background: var(--danger); padding: .1rem .5rem; border-radius: var(--radius); font-weight: 700; }
.lock-button { background: transparent; color: #fff; border: 1px solid #9fd0cb; border-radius: var(--radius); padding: .3rem .8rem; font: inherit; cursor: pointer; }
.lock-button:hover { background: var(--teal-deep); }

/* ---------- layout */
.main { max-width: 1100px; margin: 0 auto; padding: 1.25rem 1rem 4rem; }
.banner { max-width: 1100px; margin: 0 auto; padding: 0 1rem; }
.banner:not(:empty) { padding-top: 1rem; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 1.25rem; margin-bottom: 1rem; }
.card.narrow { max-width: 560px; margin: 2rem auto; }
.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: .75rem; margin-bottom: .75rem; }
.page-head h1 { margin: 0; }
.subtle { color: var(--muted); margin: .2rem 0 0; }
.help { color: var(--muted); font-size: .9rem; }
.back { margin: 0 0 .5rem; font-size: .92rem; }
.back a { text-decoration: none; }

/* ---------- buttons */
.button { display: inline-block; background: var(--teal); color: #fff; border: 1px solid var(--teal); border-radius: var(--radius);
  padding: .55rem 1.1rem; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; line-height: 1.2; }
.button:hover { background: var(--teal-deep); color: #fff; }
.button:disabled { opacity: .55; cursor: not-allowed; }
.button.secondary { background: var(--surface); color: var(--teal); }
.button.secondary:hover { background: var(--teal-wash); color: var(--teal-deep); }
.button.danger { background: var(--surface); color: var(--danger); border-color: var(--danger); }
.button.danger:hover { background: #fbeaea; }
.button.small { padding: .35rem .75rem; font-size: .9rem; }
.icon-button { background: none; border: 0; font-size: 1.3rem; line-height: 1; color: var(--muted); cursor: pointer; padding: .2rem .4rem; }
.icon-button:hover { color: var(--danger); }
.actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: .5rem 0; }
.sticky-actions { position: sticky; bottom: 0; background: var(--surface); padding: .75rem 0; border-top: 1px solid var(--line); margin-bottom: 0; }

/* ---------- forms */
.stack > * + * { margin-top: .75rem; }
.field { display: block; min-width: 0; }
.field label, .field > .label { display: block; }
.label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .25rem; }
input, select, textarea { font: inherit; color: inherit; width: 100%; padding: .5rem .6rem; border: 1px solid #b7c7c4;
  border-radius: var(--radius); background: #fff; }
textarea { resize: vertical; }
input[type=checkbox], input[type=radio] { width: auto; margin: 0; }
input:focus, select:focus, textarea:focus { border-color: var(--teal); outline: 2px solid var(--teal-wash); }
.short { max-width: 12rem; }
.tiny { max-width: 6rem; }
.row { display: flex; flex-wrap: wrap; gap: .75rem 1rem; }
.row > .field { flex: 1 1 12rem; }
.radio-row { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; padding: .35rem 0; }
.radio-row label { display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; }
.check { display: flex; gap: .5rem; align-items: flex-start; cursor: pointer; margin: .35rem 0; }
.check input { margin-top: .3rem; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem 1rem; }
legend { font-weight: 600; padding: 0 .3rem; }
.form-error { color: var(--danger); font-weight: 600; }
.form-error:empty, .form-ok:empty { display: none; }
.form-ok { color: var(--ok); font-weight: 600; }
.search { font-size: 1.1rem; padding: .7rem .9rem; margin: .25rem 0 1rem; }

/* ---------- visit form */
.qsection { border: 1px solid var(--line); border-radius: var(--radius); margin: .75rem 0; background: #fbfdfc; }
.qsection > summary { cursor: pointer; padding: .6rem .9rem; font-weight: 600; background: var(--teal-wash); border-radius: var(--radius); }
.qsection[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.qsection > :not(summary) { margin: .75rem .9rem; }
.qgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .75rem 1rem; }
.qgrid .q-longtext { grid-column: 1 / -1; }
.dot { color: var(--teal); }
.vitals { display: flex; flex-wrap: wrap; gap: .6rem 1rem; }
.vitals .field { flex: 0 0 auto; }
.table-wrap { overflow-x: auto; }
.meds input { min-width: 7rem; }
.meds td:first-child input { min-width: 12rem; }

/* ---------- tables and facts */
.table { width: 100%; border-collapse: collapse; background: var(--surface); }
.table th, .table td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font-size: .85rem; color: var(--muted); font-weight: 600; background: #f7faf9; }
.table.clickable tbody tr { cursor: pointer; }
.table.clickable tbody tr:hover, .table.clickable tbody tr:focus { background: var(--teal-wash); outline: none; }
.table .clip { max-width: 28rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.25rem; margin: 0; }
.facts dt { color: var(--muted); font-size: .9rem; }
.facts dd { margin: 0; }
.pre { white-space: pre-wrap; }
.vitals-line { font-weight: 600; }
.answer-block + .answer-block { margin-top: .5rem; }

/* ---------- notices */
.notice { border-radius: var(--radius); padding: .7rem .9rem; margin: .6rem 0; background: var(--info-bg); }
.notice-warn { background: var(--warn-bg); color: var(--warn); }
.notice-error { background: #fdecea; color: var(--danger); border: 1px solid #f3b8b3; }
.notice-error .button { margin: 0 .3rem; }
.steps li { margin-bottom: .35rem; }

/* ---------- recovery key */
.recovery-code { font-family: ui-monospace, Consolas, monospace; font-size: 1.35rem; font-weight: 700; letter-spacing: .06em;
  background: var(--teal-wash); border: 2px dashed var(--teal); padding: 1rem; text-align: center; border-radius: var(--radius); word-break: break-all; }

/* ---------- E2: today, follow-ups, prescriptions, reports */
.tiles { display: flex; flex-wrap: wrap; gap: .75rem; margin: .25rem 0 1rem; }
.tile { flex: 1 1 12rem; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: .8rem 1rem;
  color: var(--ink); text-decoration: none; }
.tile strong { font-size: 1.6rem; color: var(--teal); margin-right: .25rem; }
a.tile:hover { border-color: var(--teal); }
.tile-warn strong { color: var(--danger); }
.tabs { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 2px solid var(--line); margin: .5rem 0 1rem; }
.tabs a { padding: .45rem .9rem; text-decoration: none; color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.tabs a.current { color: var(--teal); border-bottom-color: var(--teal); font-weight: 600; }
.state-bad { color: var(--danger); font-weight: 600; font-size: .85rem; }
.actions-cell { white-space: nowrap; }
.actions-cell .button + .button { margin-left: .3rem; }
.rx-previews { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .75rem; }
.rx-preview { width: 260px; max-width: 100%; border: 1px solid var(--line); box-shadow: 0 2px 8px rgba(0,0,0,.08); background: #fff; }
.image-row { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.image-box { flex: 1 1 16rem; }
.preview { display: block; max-width: 220px; max-height: 140px; border: 1px solid var(--line); margin: .4rem 0; background: #fff; }
.preview-tall { max-height: 280px; }
.file-button { position: relative; overflow: hidden; }
.file-button input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.attach-row { align-items: flex-end; }
.attach-row .field { flex: 1 1 14rem; }
.danger-zone { margin-top: 2rem; font-size: .9rem; }
.danger-zone a { color: var(--danger); }
.link-list { margin: 0 0 1rem; padding-left: 1.2rem; }
.link-list li { margin: .3rem 0; }
.narrow-left { max-width: 640px; }
progress { width: 100%; height: 1rem; }
.print-only, .print-area { display: none; }

@media (max-width: 640px) {
  .facts { grid-template-columns: 1fr; }
  .table .clip { max-width: 12rem; }
}

@media print {
  @page { size: A4; margin: 12mm; }
  .topbar, .banner, .no-print, .actions, .back, .danger-zone { display: none !important; }
  body { background: #fff; }
  .main { padding: 0; max-width: none; }
  .card { border: 0; padding: 0; }
  .print-only { display: block; }
  .print-head { border-bottom: 2px solid var(--teal); padding-bottom: .4rem; margin-bottom: .8rem; }
  /* Prescription: only the A4 page images are printed. */
  body.printing-rx > *:not(#print-area) { display: none !important; }
  body.printing-rx #print-area { display: block; }
  body.printing-rx #print-area img { display: block; width: 210mm; height: 297mm; page: rx; break-after: page; }
}
@page rx { size: A4; margin: 0; }
.card > h2:first-child, .card > h1:first-child { margin-top: 0; }