/* HemOnline-Web — palette matched against the IMG_9475.JPG screenshot
   so the regenerated screens read as the same product family. The dark
   navy sidebar + cream menubar + light-blue donor strip are the
   colour anchors. */

:root {
  /* Core */
  --bg:           #f4f4f4;
  --rule:         #c0c0c0;

  /* Chrome bar (top) */
  --chrome-bg:    #1c3c70;
  --chrome-fg:    #ffffff;
  --chrome-tag:   #aabfd9;

  /* Menubar (XP-era cream) */
  --menu-bg:      #ECE9D8;
  --menu-bg-hi:   #F5F4EA;
  --menu-rule:    #a4a4a4;
  --menu-hover:   #316ac5;
  --menu-hover-fg:#ffffff;

  /* Sidebar (deep navy) */
  --side-bg:      #2c3680;
  --side-bg-hi:   #4a55a8;
  --side-fg:      #ffffff;
  --side-rule:    #1a2160;
  --side-hover:   #5b67c4;
  --side-active:  #f7c648;
  --side-user-bg: #fffbe6;
  --side-user-fg: #443300;

  /* Donor / info bars */
  --info-bg-top: #e7eef8;
  --info-bg-bot: #c9d8ea;
  --info-rule:   #95a8c1;
  --info-fg:     #1c2c44;

  /* Panel titles */
  --title-bg-top: #5279b0;
  --title-bg-bot: #3961a0;
  --title-fg:     #ffffff;

  /* Grid */
  --grid-head-bg-top: #d8e3f3;
  --grid-head-bg-bot: #b7c8df;
  --grid-row-active:  #fff3b8;
  --grid-row-hover:   #eff5fd;
  --grid-row-defer:   #fdecea;

  /* Status */
  --accent:      #1a73e8;
  --accent-fg:   #ffffff;
  --danger:      #c4302b;
  --ok:          #2e8b57;
  --warn:        #d18d00;

  /* Operator badge (yellow legacy) */
  --op-bg:       #f9d976;
  --op-fg:       #463006;
  --op-shadow:   #d9b14a;

  /* Semantic tokens (added for multi-theme; light defaults) */
  --ink:        #222222;
  --muted:      #6b7280;
  --panel:      #ffffff;
  --panel2:     #f7f8fa;
  --accent-dim: rgba(26,115,232,0.28);
  --side-title: #ffd76b;
  --btn-bg:       #e9ecef;
  --btn-bg-hover: #dde0e4;
}

* { box-sizing: border-box; }
body {
  margin: 0; padding: 0;
  font: 13px/1.4 -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
}

/* ─── Top chrome bar ───────────────────────────────────────────── */
header.chrome {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 14px;
  background: var(--chrome-bg);
  color: var(--chrome-fg);
}
header.chrome a.brand {
  display: inline-flex; align-items: baseline; gap: 6px;
  text-decoration: none; color: var(--chrome-fg);
}
header.chrome a.brand:hover { opacity: 0.85; }
header.chrome .brand strong { font-size: 1.05rem; letter-spacing: .2px; }
header.chrome .tagline      { color: var(--chrome-tag); font-size: 0.85rem; }
.lang-switch { display: flex; gap: 4px; }
.lang-switch .lang {
  background: rgba(255,255,255,0.08); color: var(--chrome-fg);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 2px 8px; border-radius: 3px; cursor: pointer;
  font-size: 0.78rem;
}
.lang-switch .lang.active {
  background: var(--accent); border-color: var(--accent);
}

footer.chrome {
  background: var(--chrome-bg); color: var(--chrome-fg);
  padding: 5px 14px; margin-top: 0;
  opacity: 0.85; font-size: 0.78rem;
}

/* ─── Cascading menubar ─────────────────────────────────────────── */
nav.topmenu {
  background: var(--menu-bg);
  border-bottom: 1px solid var(--menu-rule);
  border-top: 1px solid #fefefe;
  display: flex; align-items: stretch;
}
nav.topmenu .menubar {
  list-style: none; padding: 0; margin: 0;
  display: flex; align-items: stretch;
  font-size: 0.83rem; flex: 1;
}
nav.topmenu .m-item { position: relative; }
nav.topmenu .m-item.right { margin-left: auto; }
nav.topmenu .m-trigger {
  display: inline-block;
  padding: 4px 14px;
  background: transparent; border: 0;
  color: var(--ink); cursor: pointer; font: inherit;
  text-decoration: none;
}
nav.topmenu .m-trigger:hover,
nav.topmenu .m-item:hover > .m-trigger,
nav.topmenu .m-item:focus-within > .m-trigger {
  background: var(--menu-hover); color: var(--menu-hover-fg);
}
nav.topmenu .m-panel {
  position: absolute; left: 0; top: 100%;
  display: none;
  list-style: none; padding: 4px 0; margin: 0;
  background: var(--menu-bg-hi);
  border: 1px solid var(--rule);
  box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
  min-width: 220px; z-index: 50;
}
nav.topmenu .m-item:hover > .m-panel,
nav.topmenu .m-item:focus-within > .m-panel { display: block; }
nav.topmenu .m-panel li { padding: 0; }
nav.topmenu .m-panel a,
nav.topmenu .m-panel span {
  display: block; padding: 4px 18px;
  text-decoration: none; color: var(--ink);
}
nav.topmenu .m-panel a:hover {
  background: var(--menu-hover); color: var(--menu-hover-fg);
}
nav.topmenu .m-panel li.coming span {
  color: var(--muted); cursor: not-allowed;
  font-style: italic;
}
nav.topmenu .m-panel li.coming span:after {
  content: " (yakında)"; font-size: 0.8em; opacity: 0.7;
}

/* 2-level cascade — Modüller → <module> ▸ → <screen> */
nav.topmenu .m-sub {
  position: relative;
}
nav.topmenu .m-sub .m-sub-trigger {
  display: block; padding: 4px 18px;
  color: var(--ink); cursor: pointer;
}
nav.topmenu .m-sub:hover > .m-sub-trigger,
nav.topmenu .m-sub:focus-within > .m-sub-trigger {
  background: var(--menu-hover); color: var(--menu-hover-fg);
}
nav.topmenu .m-subpanel {
  position: absolute; left: 100%; top: -5px;
  display: none;
  list-style: none; padding: 4px 0; margin: 0;
  background: var(--menu-bg-hi);
  border: 1px solid var(--rule);
  box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
  min-width: 260px; z-index: 60;
}
nav.topmenu .m-sub:hover > .m-subpanel,
nav.topmenu .m-sub:focus-within > .m-subpanel {
  display: block;
}
nav.topmenu .m-subpanel li.divider {
  height: 1px; background: var(--menu-rule);
  margin: 4px 0; padding: 0;
}
nav.topmenu .m-subpanel li a {
  display: block; padding: 4px 18px;
  color: var(--ink); text-decoration: none;
}
nav.topmenu .m-subpanel li a:hover {
  background: var(--menu-hover); color: var(--menu-hover-fg);
}
/* Status dots beside cascaded screen items */
nav.topmenu .m-subpanel li.status-done a::before { content: "● "; color: var(--ok); }
nav.topmenu .m-subpanel li.status-stub a::before { content: "○ "; color: var(--warn); }
nav.topmenu .m-subpanel li.status-tbd  a::before { content: "○ "; color: var(--muted); }
nav.topmenu .m-subpanel li.status-tbd a { color: var(--muted); font-style: italic; }

/* Icon strip — right edge of menubar */
.icon-strip {
  list-style: none; padding: 0 6px; margin: 0;
  display: flex; gap: 2px; align-items: center;
  border-left: 1px solid var(--menu-rule);
}
.icon-strip .ico {
  background: transparent; border: 1px solid transparent;
  padding: 2px 6px; font-size: 1.05rem; cursor: pointer;
  border-radius: 3px; line-height: 1;
}
.icon-strip .ico:hover { background: var(--panel); border-color: var(--menu-rule); }

/* ─── Page wrap — sidebar + main ────────────────────────────────── */
.page-wrap {
  display: grid;
  grid-template-columns: 200px 1fr;
  align-items: stretch;
  min-height: calc(100vh - 86px);     /* chrome+menu+footer ~86px */
}
.page-wrap main {
  padding: 8px 12px 24px 12px;
  background: var(--bg);
  overflow-x: auto;
}

/* ─── Left sidebar (deep navy) ──────────────────────────────────── */
aside.sidebar {
  background: linear-gradient(180deg, var(--side-bg-hi) 0%, var(--side-bg) 60%);
  color: var(--side-fg);
  padding: 6px 0 0 0;
  border-right: 1px solid var(--side-rule);
  display: flex; flex-direction: column;
  position: relative;
}
.sidebar-toggle {
  display: none; /* mobile only */
  position: absolute; top: 4px; right: 4px;
  background: rgba(255,255,255,0.1); color: white;
  border: 1px solid rgba(255,255,255,0.2);
  padding: 1px 8px; border-radius: 3px; cursor: pointer;
  font-size: 1.1rem; line-height: 1;
}
.sidebar-title {
  font-size: 0.85rem; font-weight: 700;
  color: var(--side-title);
  padding: 4px 12px 6px 12px;
  margin: 0;
  border-bottom: 1px solid var(--side-rule);
  letter-spacing: .3px;
}
.sidebar-list {
  list-style: none; padding: 4px 0; margin: 0;
  flex: 1;
  overflow-y: auto;
}
.sidebar-list li {
  font-size: 0.78rem;
}
.sidebar-list a,
.sidebar-list span {
  display: block; padding: 3px 12px;
  color: var(--side-fg); text-decoration: none;
  line-height: 1.3;
}
.sidebar-list a:hover { background: var(--side-hover); }
.sidebar-list li.coming span {
  color: rgba(255,255,255,0.55); cursor: not-allowed;
  font-style: italic;
}

/* Active-user info card at the bottom of the sidebar */
.sidebar-user {
  background: var(--side-user-bg); color: var(--side-user-fg);
  margin: 6px; padding: 6px 8px;
  border: 1px solid var(--side-rule);
  border-radius: 3px;
  font-size: 0.75rem;
}
.sidebar-user .sidebar-user-title {
  font-weight: 700; margin-bottom: 4px;
  border-bottom: 1px dashed var(--side-rule);
  padding-bottom: 2px;
}
.sidebar-user .ids > div {
  display: flex; gap: 6px;
}
.sidebar-user .ids .k {
  font-weight: 700; width: 32px; flex: 0 0 32px;
}
/* Long usernames/roles truncate with an ellipsis instead of spilling out of the
   rail; the full value lives in the title= tooltip. min-width:0 lets the flex
   child actually shrink below its content width. */
.sidebar-user .ids .v {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  flex: 1 1 auto; min-width: 0; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Recent-screens shortcuts (last 3 visited), above the active-user block */
.sidebar-recent { margin-bottom: 6px; }
.sidebar-recent .recent-list {
  list-style: none; margin: 0; padding: 0;
}
.sidebar-recent .recent-list li { margin: 1px 0; }
.sidebar-recent .recent-list a {
  display: block; color: var(--side-user-fg); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  opacity: .85;
}
.sidebar-recent .recent-list a:hover { opacity: 1; text-decoration: underline; }

/* ─── Generic page chrome (list / form / table / btn / badge) ──── */
/* Owner ruling (05.09, tester #87): every screen sits left-aligned at full
   width, the Donörler station layout. The old centred 1100px column is gone. */
.page { max-width: none; margin: 0; }
.page-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.page-head h1 { font-size: 1.2rem; margin: 0; color: var(--info-fg); }

table.grid {
  width: 100%; border-collapse: collapse;
  background: var(--panel);
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
table.grid th, table.grid td {
  text-align: left;
  padding: 5px 8px;
  border-bottom: 1px solid var(--rule);
}
table.grid thead th {
  background: linear-gradient(to bottom, var(--grid-head-bg-top), var(--grid-head-bg-bot));
  font-weight: 600; color: var(--info-fg);
}
table.grid tbody tr:hover { background: var(--grid-row-hover); }

form.form {
  background: var(--panel);
  border: 1px solid var(--rule);
  padding: 12px; border-radius: 4px;
}
form.form fieldset { border: 1px solid var(--rule); margin-bottom: 12px; padding: 8px 12px; }
form.form legend { font-weight: 600; padding: 0 6px; color: var(--ink); }
form.form label {
  display: inline-block; width: calc(33.3% - 12px); margin: 4px 6px; vertical-align: top;
}
form.form label.wide     { width: calc(100% - 12px); }
form.form label.checkbox { width: auto; display: flex; align-items: center;
  flex-direction: row; gap: 8px; }
form.form label.checkbox > span { display: inline; margin: 0; }
form.form label.checkbox > input[type="checkbox"] {
  width: auto; flex: 0 0 auto; }
form.form label > span {
  display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 2px;
}
form.form input, form.form select, form.form textarea {
  width: 100%; padding: 5px 7px;
  border: 1px solid var(--rule); border-radius: 3px;
  font: inherit; background: var(--panel2);
}
form.form input:focus, form.form select:focus, form.form textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(26,115,232,0.18);
}
form.form .form-actions { margin-top: 12px; }

/* Generic card panel — base (light) styling so every theme has real cards.
   The dark theme overrides this with its own surface. */
.card {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 14px;
  box-shadow: 0 1px 2px rgba(16,24,40,0.05);
}

.btn {
  display: inline-block; padding: 5px 12px; border-radius: 3px;
  background: var(--btn-bg); color: var(--ink); border: 1px solid var(--rule);
  text-decoration: none; cursor: pointer; font: inherit;
}
.btn:hover { background: var(--btn-bg-hover); }
.btn.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.btn.primary:hover { background: #155cc7; }

.error-box {
  background: #fdecea; border: 1px solid #f5c6c2;
  border-radius: 3px; padding: 8px 12px; margin-bottom: 10px;
  color: var(--danger);
}
.error-box ul { margin: 0; padding-left: 18px; }

/* Duplicate-TCKN warning: a calm, actionable info banner (amber, not red). It
   tells the operator a record already exists and offers to open it. */
.dc-warn {
  display: flex; align-items: center; gap: 12px;
  background: #fff6e6; border: 1px solid #f0c873; border-left: 4px solid #e0a528;
  border-radius: 8px; padding: 12px 14px; margin-bottom: 12px; color: #6b4d12;
}
.dc-warn-ic { font-size: 20px; line-height: 1; }
.dc-warn-body { flex: 1; }
.dc-warn-who { margin-top: 4px; font-size: 13px; }
.dc-warn-act { white-space: nowrap; }
html[data-theme="d"] .dc-warn {
  background: linear-gradient(180deg, #2c2410, #211c0c);
  border-color: #6b521c; border-left-color: #e0a528; color: #f0d79a;
}

.empty {
  background: var(--panel); padding: 16px;
  border: 1px dashed var(--rule);
  text-align: center; color: #777;
}

.badge {
  display: inline-block; padding: 2px 8px; border-radius: 12px;
  font-size: 0.8rem; font-weight: 600;
}
.badge.result-1 { background: #e6f4ea; color: var(--ok); }
.badge.result-2 { background: #fff7e0; color: var(--warn); }
.badge.result-3 { background: #fdecea; color: var(--danger); }

.tag {
  display: inline-block; font-size: 0.75rem; font-weight: 600;
  padding: 2px 8px; border-radius: 10px;
}
.tag.absolute { background: #fdecea; color: var(--danger); }
.tag.temp     { background: #fff7e0; color: var(--warn); }
.tag.info     { background: #e8eaef; color: #555; }

/* ─── Survey screen ─────────────────────────────────────────────── */
form.survey-screen { padding: 0; margin: 0; }

/* Donor-gated state — visible until a donor is picked from the
   dropdown. Grays out the main question panel + the 43-row grid so
   the operator can't answer questions without a donor context. */
.no-donor-banner {
  display: none;
  background: #fff9d2;
  border: 1px solid #d9b14a;
  color: #463006;
  padding: 8px 14px;
  margin: 4px 0 8px 0;
  font-weight: 600;
  border-radius: 3px;
}
form.survey-screen.no-donor .no-donor-banner { display: block; }
form.survey-screen.no-donor .anket-panel,
form.survey-screen.no-donor .defer-panel,
form.survey-screen.no-donor .survey-grid-wrap {
  opacity: 0.45;
  pointer-events: none;
  filter: grayscale(40%);
  transition: opacity 0.2s, filter 0.2s;
}
form.survey-screen.no-donor .form-actions .btn.primary {
  opacity: 0.5; pointer-events: none;
}
.no-donor-banner.pulse {
  animation: nudge 0.35s ease-in-out 2;
  background: #ffeec2;
}

/* ── History (Tarihçe) donor card + sections ──────────────────── */
.card.donor-card {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 2fr;
  gap: 16px;
  background: var(--panel);
  border: 1px solid var(--info-rule);
  padding: 14px 18px;
  margin-bottom: 12px;
  border-radius: 4px;
}
.donor-card .big-name {
  font-size: 1.25rem; font-weight: 700; color: var(--info-fg);
  margin-bottom: 4px;
}
.donor-card .muted { font-size: 0.85rem; }
.donor-card .tag {
  display: inline-block; background: var(--panel2);
  padding: 2px 8px; border-radius: 3px; font-size: 0.78rem;
  margin-right: 4px;
}
.donor-card .tag.bloodgroup { background: #fdecea; color: var(--danger); font-weight: 700; }
.donor-card-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  align-items: end;
}
.donor-card-stats > div { display: flex; flex-direction: column; }
.donor-card-stats .lbl { font-size: 0.72rem; color: #555; text-transform: uppercase; }
.donor-card-stats .val { font-weight: 600; font-size: 1.05rem; color: var(--info-fg); }

.section-heading {
  font-size: 1.0rem; margin: 22px 0 8px 0;
  color: var(--info-fg); border-bottom: 1px solid var(--info-rule);
  padding-bottom: 4px;
  display: flex; justify-content: space-between; align-items: center;
}
.section-heading .chip {
  background: #e8eef7; color: var(--info-fg);
  padding: 1px 10px; border-radius: 10px;
  font-size: 0.78rem; font-weight: 600;
}

/* Repeat-eligible: overdue rows visually flagged green */
table.grid tr.row-overdue td { background: #e6f4ea; }
table.grid .days .muted { color: #555; font-size: 0.85rem; }
.badge.bloodgroup { background: #fdecea; color: var(--danger); font-weight: 700; }

/* Reports hub — card grid */
.report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px; margin-top: 12px;
}
.report-card {
  background: var(--panel);
  border: 1px solid var(--info-rule);
  border-left: 4px solid var(--rule);
  border-radius: 4px;
  padding: 14px 16px;
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
  transition: box-shadow 0.12s, transform 0.12s;
}
.report-card:hover {
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}
.report-card.status-done { border-left-color: var(--ok); }
.report-card.status-stub { border-left-color: var(--warn); }
.report-card.status-tbd  { border-left-color: var(--muted); }
.report-card-title { font-weight: 700; font-size: 1.0rem; color: var(--info-fg); margin-bottom: 4px; }
.report-card-blurb { color: #555; font-size: 0.85rem; flex: 1; margin: 6px 0 10px 0; line-height: 1.4; }
.report-card-meta {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid #f0f0f0; padding-top: 6px;
}
.report-card .slug { font-size: 0.72rem; color: var(--muted); background: var(--panel2); padding: 1px 6px; border-radius: 2px; }

/* ── Live field validation (validate.js) ───────────────────────── */
form.form input.field-invalid,
form.form select.field-invalid,
form.form textarea.field-invalid {
  border-color: var(--danger);
  box-shadow: 0 0 0 2px rgba(196,48,43,0.15);
}
form.form input.field-checked,
form.form select.field-checked,
form.form textarea.field-checked {
  border-color: var(--ok);
  box-shadow: 0 0 0 2px rgba(46,139,87,0.12);
}
.field-error {
  color: var(--danger); font-size: 0.78rem;
  margin: 2px 0 0 0; padding: 2px 0;
  font-weight: 500;
}
.field-error::before { content: "⚠ "; }
.field-info {
  color: #555; font-size: 0.78rem;
  margin: 2px 0 0 0; padding: 2px 0;
  font-style: italic;
}
.field-info::before { content: "✓ "; color: var(--ok); }

.donor-bar {
  background: linear-gradient(to bottom, var(--info-bg-top) 0%, var(--info-bg-bot) 100%);
  border: 1px solid var(--info-rule);
  margin: 4px 0 6px 0;
  padding: 4px 10px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.8rem; color: var(--info-fg);
  gap: 10px; flex-wrap: wrap;
}
.donor-bar-left { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.donor-pick { display: flex; align-items: center; gap: 6px; }
.donor-pick .lbl { font-weight: 700; }
.donor-pick select { padding: 2px 6px; border: 1px solid var(--info-rule); font: inherit; }
.donor-fields { display: flex; gap: 14px; flex-wrap: wrap; }
.donor-fields > div { display: flex; flex-direction: column; min-width: 80px; }
.donor-fields .lbl  { font-weight: 600; font-size: 0.7rem; opacity: 0.85; text-transform: uppercase; }
.donor-fields .val  { font-weight: 600; }

.operator-pill {
  background: var(--op-bg); color: var(--op-fg);
  padding: 3px 12px; border-radius: 3px;
  font-weight: 600; font-size: 0.8rem;
  box-shadow: inset 0 -1px 0 var(--op-shadow);
}

.survey-main {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 6px;
  margin: 0 0 6px 0;
}
.anket-panel, .defer-panel {
  background: var(--panel);
  border: 1px solid var(--info-rule);
}
.panel-title {
  margin: 0; padding: 4px 12px;
  font-size: 0.9rem; font-weight: 700;
  color: var(--title-fg);
  background: linear-gradient(to bottom, var(--title-bg-top), var(--title-bg-bot));
  border-bottom: 1px solid var(--side-rule);
}
.anket-panel .question-display {
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 1fr 180px;
  grid-template-rows: 1fr auto;
  gap: 12px;
  min-height: 110px;
}
.qd-text {
  font-size: 1.0rem; line-height: 1.4;
  padding: 14px 12px;
  background: var(--panel);
  border: 1px dashed var(--info-rule);
  border-radius: 3px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  grid-column: 1 / 2;
}
.qd-controls {
  grid-column: 2 / 3;
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
}
.qd-controls .ans-radio {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--rule); border-radius: 3px;
  cursor: pointer; background: var(--panel2);
  font-size: 0.95rem;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.qd-controls .ans-radio.yes:has(input:checked) {
  background: #e6f4ea; border-color: var(--ok); color: var(--ok); font-weight: 700;
}
.qd-controls .ans-radio.no:has(input:checked) {
  background: #fdecea; border-color: var(--danger); color: var(--danger); font-weight: 700;
}
.qd-meta {
  grid-column: 1 / 3; display: flex; justify-content: flex-end;
}
.defer-input {
  display: flex; align-items: center; gap: 6px; font-size: 0.8rem;
}
.defer-input input {
  width: 60px; padding: 3px 6px;
  border: 1px solid var(--rule); text-align: center;
  background: var(--panel2);
}

.defer-panel .defer-list {
  list-style: none; padding: 0; margin: 0;
  max-height: 110px; overflow-y: auto;
}
.defer-panel .defer-list li {
  padding: 3px 8px; border-bottom: 1px solid #f0f0f0;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.8rem;
}
.defer-panel .defer-list li.empty {
  color: #999; font-style: italic; text-align: center;
  border-bottom: none; padding: 14px 6px;
}
.defer-panel .qno { font-weight: 700; color: var(--title-bg-bot); }
.defer-panel .tag { color: var(--danger); font-weight: 600; }

.survey-grid-wrap {
  background: var(--panel);
  border: 1px solid var(--info-rule);
  max-height: 340px; overflow-y: auto;
}
.survey-grid {
  width: 100%; border-collapse: collapse; font-size: 0.83rem;
}
.survey-grid thead {
  position: sticky; top: 0; z-index: 2;
  background: linear-gradient(to bottom, var(--grid-head-bg-top), var(--grid-head-bg-bot));
}
.survey-grid th {
  padding: 4px 8px; text-align: left; color: var(--info-fg);
  border-bottom: 1px solid var(--info-rule);
  border-right: 1px solid var(--info-rule);
  font-weight: 700;
}
.survey-grid td {
  padding: 3px 8px;
  border-bottom: 1px solid #eee;
  border-right: 1px solid #eee;
}
.survey-grid .col-no    { width: 40px;  text-align: center; color: #555; }
.survey-grid .col-exp   { width: 80px;  text-align: center; color: #555; }
.survey-grid .col-given { width: 80px;  text-align: center; font-weight: 600; }
.survey-grid .col-q     { line-height: 1.3; }
.survey-grid tr.qrow            { cursor: pointer; }
.survey-grid tr.qrow:hover      { background: var(--grid-row-hover); }
.survey-grid tr.qrow.active     { background: var(--grid-row-active); }
.survey-grid tr.qrow.triggered  { background: var(--grid-row-defer); }
.survey-grid tr.qrow.triggered.active { background: #fbcdc8; }
.survey-grid tr.qrow.informational .col-q::after {
  content: " ⓘ"; color: #999;
}

form.survey-screen > .form-actions {
  display: flex; gap: 8px; padding: 8px 0;
}
form.survey-screen > .form-actions.all-answered .btn.primary {
  animation: nudge 0.6s ease-in-out 2;
}
@keyframes nudge {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.06); box-shadow: 0 0 0 4px rgba(46,139,87,0.25); }
  100% { transform: scale(1); }
}

/* ── Placeholder + module-status pages ─────────────────────────── */
.placeholder-card {
  background: var(--panel);
  border: 1px solid var(--info-rule);
  border-left: 5px solid var(--rule);
  border-radius: 4px;
  padding: 18px 22px;
  max-width: 720px;
  position: relative;
}
.placeholder-card.status-stub { border-left-color: var(--warn); }
.placeholder-card.status-tbd  { border-left-color: var(--muted); }
.placeholder-card.status-done { border-left-color: var(--ok); }
.placeholder-card h2 { margin: 0 0 8px 0; color: var(--info-fg); font-size: 1.1rem; }
.placeholder-card p { margin: 4px 0 10px 0; line-height: 1.5; }
.placeholder-card .muted { color: var(--muted); font-size: 0.85rem; font-style: italic; }
.placeholder-links {
  list-style: none; padding: 8px 0; margin: 12px 0 0 0;
  border-top: 1px dashed var(--rule);
  font-size: 0.88rem;
}
.placeholder-links li { padding: 4px 0; }
.placeholder-links code {
  background: var(--panel2); padding: 2px 6px; border-radius: 2px;
  font: 0.85rem ui-monospace, SFMono-Regular, Menlo, monospace;
}
.placeholder-links .hint { color: var(--muted); margin-left: 4px; }
.placeholder-card .status-pill {
  position: absolute; top: 14px; right: 18px;
  background: var(--warn); color: white;
  font-size: 0.72rem; font-weight: 700;
  padding: 3px 10px; border-radius: 12px;
  text-transform: uppercase; letter-spacing: 0.4px;
}
.placeholder-card.status-tbd  .status-pill { background: #888; }
.placeholder-card.status-done .status-pill { background: var(--ok); }

.status-summary { display: flex; gap: 12px; margin-bottom: 16px; }
.status-card {
  flex: 1; background: var(--panel); border: 1px solid var(--info-rule);
  border-top: 4px solid var(--rule); border-radius: 4px;
  padding: 14px 16px; text-align: center;
}
.status-card.done { border-top-color: var(--ok); }
.status-card.stub { border-top-color: var(--warn); }
.status-card.tbd  { border-top-color: var(--muted); }
.status-card .num { font-size: 2.2rem; font-weight: 700; color: var(--info-fg); }
.status-card .lbl { font-size: 0.85rem; color: #555; text-transform: uppercase; }

.module-status-grid .status-pill {
  display: inline-block; font-size: 0.72rem; font-weight: 700;
  padding: 2px 8px; border-radius: 10px;
  text-transform: uppercase; letter-spacing: 0.3px; color: white;
}
.module-status-grid .status-pill.status-done { background: var(--ok); }
.module-status-grid .status-pill.status-stub { background: var(--warn); }
.module-status-grid .status-pill.status-tbd  { background: #888; }
.module-status-grid .row-status-tbd  a:not(:hover) { color: var(--muted); }

/* Donor-tests filter bar + reactive-row highlight */
.filter-bar { display: flex; gap: 12px; align-items: end; padding: 8px 12px; margin-bottom: 8px; }
.filter-bar label.inline { width: auto; }
table.grid tr.row-reactive td { background: #fdecea; }

/* Sidebar list status dots */
.sidebar-list li.status-done a::before { content: "● "; color: #6f6; }
.sidebar-list li.status-stub a::before { content: "○ "; color: #fc6; }
.sidebar-list li.status-tbd  a::before { content: "○ "; color: rgba(255,255,255,0.4); }
.sidebar-list li.status-tbd a { opacity: 0.8; }
.sidebar-title a { color: var(--side-title); text-decoration: none; }
.sidebar-title a:hover { text-decoration: underline; }

/* ─── Responsive: tablet & mobile ───────────────────────────────── */
@media (max-width: 1100px) {
  /* Tablet: collapse the sidebar to a slim icon rail. */
  .page-wrap { grid-template-columns: 38px 1fr; }
  aside.sidebar { padding-top: 28px; }
  .sidebar-toggle { display: inline-block; }
  .sidebar-title, .sidebar-user { display: none; }
  .sidebar-list a, .sidebar-list span {
    text-indent: -9999px; padding: 7px 4px; position: relative;
  }
  .sidebar-list li:before {
    content: ""; display: block; width: 8px; height: 8px;
    background: rgba(255,255,255,0.4); border-radius: 50%;
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  }
  aside.sidebar.open {
    position: absolute; left: 0; top: 86px;
    width: 240px; height: calc(100vh - 86px);
    z-index: 40;
    box-shadow: 3px 0 8px rgba(0,0,0,0.2);
  }
  aside.sidebar.open .sidebar-title,
  aside.sidebar.open .sidebar-user { display: block; }
  aside.sidebar.open .sidebar-list a,
  aside.sidebar.open .sidebar-list span {
    text-indent: 0; padding: 3px 12px;
  }
  aside.sidebar.open .sidebar-list li:before { display: none; }

  /* Survey main: drop the side defer panel below the main panel */
  .survey-main { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  /* Mobile: hide the sidebar entirely until toggled */
  .page-wrap { grid-template-columns: 0 1fr; }
  aside.sidebar { width: 0; overflow: hidden; padding: 0; }
  aside.sidebar.open { width: 86%; padding-top: 30px; }
  .sidebar-toggle {
    display: inline-block; position: fixed;
    top: 56px; left: 6px; z-index: 60;
    background: var(--side-bg); color: white;
    border: 1px solid var(--side-rule);
    font-size: 1.3rem; padding: 4px 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  }
  /* Stack the donor info bar */
  .donor-fields > div { min-width: auto; }
  /* Make the main question display vertical */
  .anket-panel .question-display {
    grid-template-columns: 1fr; grid-template-rows: auto auto auto;
  }
  .qd-controls { grid-column: 1 / 2; flex-direction: row; }
  .qd-controls .ans-radio { flex: 1; justify-content: center; }
  /* Hide the Cevap (expected) column on small screens to save width */
  .survey-grid .col-exp { display: none; }
  /* Shrink icons */
  .icon-strip { display: none; }
  /* Cascading menu — tap to open */
  nav.topmenu .m-panel { position: static; box-shadow: none; }
  nav.topmenu .m-item:not(:hover):not(:focus-within) > .m-panel { display: none; }

  header.chrome { flex-wrap: wrap; gap: 6px; padding: 5px 8px; }
  header.chrome .brand strong { font-size: 0.95rem; }
}

/* ══════════════════════════════════════════════════════════════════════
   THEME PALETTES — switch via <html data-theme="a|b|c|d"> (cookie-driven).
   Default (no attribute) = classic light below in :root (= theme B).
   Every screen re-skins automatically because the UI is variable-driven.
   ══════════════════════════════════════════════════════════════════════ */

/* A — Soft modern: neutral cards, royal-blue accent, white sidebar */
html[data-theme="a"] {
  --bg:#f4f5f7; --rule:#d8dbe0; --ink:#16191e; --muted:#69707a;
  --panel:#ffffff; --panel2:#f6f7f9; --accent-dim:rgba(29,78,216,.22);
  --chrome-bg:#1f2a44; --chrome-fg:#ffffff; --chrome-tag:#aab6cf;
  --menu-bg:#fbfcfd; --menu-bg-hi:#ffffff; --menu-rule:#e6e8eb; --menu-hover:#eef3fe; --menu-hover-fg:#1d4ed8;
  --side-bg:#ffffff; --side-bg-hi:#ffffff; --side-fg:#5b636e; --side-rule:#e6e8eb; --side-hover:#f1f3f7;
  --side-active:#1d4ed8; --side-title:#1d4ed8; --side-user-bg:#eef3fe; --side-user-fg:#1d4ed8;
  --info-bg-top:#ffffff; --info-bg-bot:#eef1f5; --info-rule:#e3e6ea; --info-fg:#10141a;
  --title-bg-top:#1d4ed8; --title-bg-bot:#1746c4; --title-fg:#ffffff;
  --grid-head-bg-top:#f3f5f8; --grid-head-bg-bot:#e7ebf1; --grid-row-active:#eef3fe; --grid-row-hover:#f6f8fc; --grid-row-defer:#fef3f2;
  --accent:#1d4ed8; --accent-fg:#ffffff; --danger:#b42318; --ok:#067647; --warn:#b54708;
  --op-bg:#eef3fe; --op-fg:#1d4ed8; --op-shadow:#cfe0fd; --btn-bg:#eef0f3; --btn-bg-hover:#e3e6ea;
}

/* B — Classic blue: navy sidebar, cream menubar (≈ the original screen) */
html[data-theme="b"] {
  --bg:#f4f4f4; --rule:#c0c0c0; --ink:#222222; --muted:#6b7280;
  --panel:#ffffff; --panel2:#f7f8fa; --accent-dim:rgba(26,115,232,.28);
  --chrome-bg:#1c3c70; --chrome-fg:#ffffff; --chrome-tag:#aabfd9;
  --menu-bg:#ECE9D8; --menu-bg-hi:#F5F4EA; --menu-rule:#a4a4a4; --menu-hover:#316ac5; --menu-hover-fg:#ffffff;
  --side-bg:#2c3680; --side-bg-hi:#4a55a8; --side-fg:#ffffff; --side-rule:#1a2160; --side-hover:#5b67c4;
  --side-active:#f7c648; --side-title:#ffd76b; --side-user-bg:#fffbe6; --side-user-fg:#443300;
  --info-bg-top:#e7eef8; --info-bg-bot:#c9d8ea; --info-rule:#95a8c1; --info-fg:#1c2c44;
  --title-bg-top:#5279b0; --title-bg-bot:#3961a0; --title-fg:#ffffff;
  --grid-head-bg-top:#d8e3f3; --grid-head-bg-bot:#b7c8df; --grid-row-active:#fff3b8; --grid-row-hover:#eff5fd; --grid-row-defer:#fdecea;
  --accent:#1a73e8; --accent-fg:#ffffff; --danger:#c4302b; --ok:#2e8b57; --warn:#d18d00;
  --op-bg:#f9d976; --op-fg:#463006; --op-shadow:#d9b14a; --btn-bg:#e9ecef; --btn-bg-hover:#dde0e4;
}

/* C — Blood-centre pink: airy light-red, crimson accent */
html[data-theme="c"] {
  --bg:#fdeef0; --rule:#f1d6db; --ink:#2a1f22; --muted:#9a7b80;
  --panel:#ffffff; --panel2:#fff7f8; --accent-dim:rgba(225,29,72,.2);
  --chrome-bg:#be123c; --chrome-fg:#ffffff; --chrome-tag:#f6c9d2;
  --menu-bg:#fff7f8; --menu-bg-hi:#ffffff; --menu-rule:#f3dde1; --menu-hover:#fee2e6; --menu-hover-fg:#be123c;
  --side-bg:#fffafb; --side-bg-hi:#fff5f6; --side-fg:#9a7b80; --side-rule:#f3dde1; --side-hover:#fdf3f4;
  --side-active:#e11d48; --side-title:#be123c; --side-user-bg:#fee2e6; --side-user-fg:#be123c;
  --info-bg-top:#ffffff; --info-bg-bot:#fdf3f4; --info-rule:#f3dde1; --info-fg:#3f1f27;
  --title-bg-top:#e11d48; --title-bg-bot:#be123c; --title-fg:#ffffff;
  --grid-head-bg-top:#fdf3f4; --grid-head-bg-bot:#fbe7ea; --grid-row-active:#fee2e6; --grid-row-hover:#fdf7f8; --grid-row-defer:#fde8e8;
  --accent:#e11d48; --accent-fg:#ffffff; --danger:#be123c; --ok:#0f7a44; --warn:#b54708;
  --op-bg:#fee2e6; --op-fg:#be123c; --op-shadow:#f6b9c2; --btn-bg:#fdf0f2; --btn-bg-hover:#f9e2e6;
}

/* D — Dark (HLA Nexus refresh): navy + cyan, night-shift friendly */
html[data-theme="d"] {
  --bg: #0a1628; --rule: #1e3a5f;
  --ink: #e0e7ff; --muted: #8da2c0; --panel: #112240; --panel2: #16294a;
  --accent-dim: rgba(0,212,255,0.28);

  --chrome-bg: #0a1628; --chrome-fg: #e0e7ff; --chrome-tag: #8da2c0;
  --menu-bg: #0d1c33; --menu-bg-hi: #16294a; --menu-rule: #1e3a5f;
  --menu-hover: #00d4ff; --menu-hover-fg: #042033;
  --side-bg: #0d1c33; --side-bg-hi: #16294a; --side-fg: #e0e7ff;
  --side-rule: #1e3a5f; --side-hover: #16294a; --side-active: #00d4ff;
  --side-user-bg: #112240; --side-user-fg: #e0e7ff;
  --info-bg-top: #16294a; --info-bg-bot: #112240; --info-rule: #1e3a5f; --info-fg: #e0e7ff;
  --title-bg-top: #16294a; --title-bg-bot: #112240; --title-fg: #e0e7ff;
  --grid-head-bg-top: #16294a; --grid-head-bg-bot: #112240;
  --grid-row-active: #16294a; --grid-row-hover: #13243f; --grid-row-defer: #2a1620;
  --accent: #00d4ff; --accent-fg: #042033;
  --danger: #ef4444; --ok: #22c55e; --warn: #f59e0b;
  --op-bg: #112240; --op-fg: #e0e7ff; --op-shadow: #1e3a5f;
  --side-title: #00d4ff; --btn-bg: #16294a; --btn-bg-hover: #1e3a5f;
}

/* D — component relighting (scoped) */

html[data-theme="d"] body { color: var(--ink);
  background: radial-gradient(1200px 600px at 80% -10%, #14365a 0%, var(--bg) 55%) fixed; }
html[data-theme="d"] header.chrome { border-bottom: 1px solid var(--accent-dim); }
html[data-theme="d"] header.chrome .brand strong { color: var(--accent); }
html[data-theme="d"] a { color: var(--accent); }
html[data-theme="d"] h1,
html[data-theme="d"] h2,
html[data-theme="d"] h3,
html[data-theme="d"] .panel-title,
html[data-theme="d"] .page-head h1 { color: var(--accent); }
html[data-theme="d"] main,
html[data-theme="d"] .page { color: var(--ink); }
html[data-theme="d"] .muted,
html[data-theme="d"] small.muted,
html[data-theme="d"] .qd-meta,
html[data-theme="d"] td .muted { color: var(--muted) !important; }/* Cards / panels → dark surface, accent-dim border, rounded */
html[data-theme="d"] .card,
html[data-theme="d"] .donor-card,
html[data-theme="d"] .panel,
html[data-theme="d"] .placeholder-card,
html[data-theme="d"] .anket-panel,
html[data-theme="d"] .defer-panel,
html[data-theme="d"] .survey-main,
html[data-theme="d"] .donor-fields,
html[data-theme="d"] .filter-bar,
html[data-theme="d"] .error-box,
html[data-theme="d"] .no-donor-banner,
html[data-theme="d"] .module-status-grid > *,
html[data-theme="d"] .qd-controls {
  background: linear-gradient(180deg, var(--panel), var(--panel2)) !important;
  border: 1px solid var(--accent-dim) !important;
  border-radius: 12px; color: var(--ink);
}/* Forms */
html[data-theme="d"] input,
html[data-theme="d"] select,
html[data-theme="d"] textarea,
html[data-theme="d"] form.form input,
html[data-theme="d"] form.form select,
html[data-theme="d"] form.form textarea,
html[data-theme="d"] .defer-input {
  background: var(--panel2) !important; color: var(--ink) !important;
  border: 1px solid var(--accent-dim) !important; border-radius: 8px;
}
html[data-theme="d"] input::placeholder,
html[data-theme="d"] textarea::placeholder { color: var(--muted); }
html[data-theme="d"] .btn,
html[data-theme="d"] button.btn,
html[data-theme="d"] form.form button,
html[data-theme="d"] button[type=submit] {
  background: var(--accent); color: var(--accent-fg);
  border: none; border-radius: 9px; font-weight: 700;
}
html[data-theme="d"] .btn:hover,
html[data-theme="d"] button.btn:hover { filter: brightness(1.08); }/* Tables */
html[data-theme="d"] table.grid { color: var(--ink); }
html[data-theme="d"] table.grid th,
html[data-theme="d"] table.grid td { border-color: var(--rule); }
html[data-theme="d"] table.grid thead th { color: var(--muted); }
html[data-theme="d"] table.grid tbody tr:hover { background: var(--grid-row-hover); }
html[data-theme="d"] table.grid tr.row-overdue td { background: #16294a !important; }
html[data-theme="d"] table.grid tr.row-defer td,
html[data-theme="d"] table.grid .days .muted { color: var(--muted); }
html[data-theme="d"] table.grid .days .muted { color: var(--muted) !important; }/* Badges / pills keep their semantic tints but on dark */
html[data-theme="d"] .badge { border-radius: 10px; }
html[data-theme="d"] .operator-pill { background: var(--panel2); color: var(--ink); box-shadow: none;
  border: 1px solid var(--accent-dim); }/* Brand mark (red crescent + blood drop) */
html[data-theme="d"] header.chrome a.brand { gap: 9px; }
html[data-theme="d"] .brand-mark { filter: drop-shadow(0 0 6px rgba(0,212,255,0.55)); flex: 0 0 auto; }
html[data-theme="d"] .brand-text { display: inline-flex; align-items: baseline; gap: 6px; }
html[data-theme="d"] header.chrome .brand strong { color: var(--accent); }/* Language dropdown (chrome bar) */
html[data-theme="d"] .lang-switch .lang-select {
  background: var(--menu-bg-hi); color: var(--ink);
  border: 1px solid var(--accent-dim); border-radius: 6px;
  padding: 4px 8px; font-size: 12px; cursor: pointer;
}
html[data-theme="d"] .lang-switch .lang-select option { background: var(--panel); color: var(--ink); }/* Menubar + dropdowns: the classic palette hardcodes color:#222 on the triggers
   and panels — invisible on the dark menubar. Relight them for the dark theme. */
html[data-theme="d"] /* Menubar + dropdowns: the classic palette hardcodes color:#222 on the triggers
   and panels — invisible on the dark menubar. Relight them for the dark theme. */
nav.topmenu .m-trigger,
html[data-theme="d"] nav.topmenu .m-panel a,
html[data-theme="d"] nav.topmenu .m-panel span,
html[data-theme="d"] nav.topmenu .m-sub .m-sub-trigger,
html[data-theme="d"] nav.topmenu .m-subpanel li a { color: var(--ink); }
html[data-theme="d"] nav.topmenu .m-panel,
html[data-theme="d"] nav.topmenu .m-subpanel {
  background: var(--menu-bg-hi); border-color: var(--menu-rule);
}
html[data-theme="d"] nav.topmenu .m-trigger:hover,
html[data-theme="d"] nav.topmenu .m-item:hover > .m-trigger,
html[data-theme="d"] nav.topmenu .m-panel a:hover,
html[data-theme="d"] nav.topmenu .m-subpanel li a:hover {
  background: var(--menu-hover); color: var(--menu-hover-fg);
}
html[data-theme="d"] nav.topmenu .m-panel li.coming span,
html[data-theme="d"] nav.topmenu .m-subpanel li.status-tbd a { color: var(--muted); }
html[data-theme="d"] .icon-strip .ico { color: var(--ink); }
html[data-theme="d"] .icon-strip .ico:hover { background: var(--panel2); border-color: var(--accent-dim); }


/* ── Pagination nav (templates/_pagination.html) ─────────────────── */
.pager { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
         margin: 12px 0; font-size: .92em; }
.pager .btn.sm { padding: 3px 10px; font-size: .9em; line-height: 1.4; }
.pager .btn.sm.disabled { opacity: .4; pointer-events: none; cursor: default; }
.pager-info { color: var(--muted); margin-right: auto; }
.pager-page { color: var(--ink); font-weight: 600; padding: 0 6px; }

/* ── Report charts (Chart.js canvas container) ───────────────────── */
.chart-box { position: relative; height: 280px; width: 100%; max-width: 720px; }

/* ── In-place table enhancer (sort + filter, static/lib/table-enhance.js) ── */
table.js-enhance th.sortable { cursor: pointer; user-select: none; position: relative; }
table.js-enhance th.sortable:hover { color: var(--accent); }
table.js-enhance th.sortable::after { content: "↕"; opacity: .35; margin-left: 5px; font-size: .85em; }
table.js-enhance th.sorted-asc::after  { content: "↑"; opacity: 1; }
table.js-enhance th.sorted-desc::after { content: "↓"; opacity: 1; }
.table-search {
  display: block; margin: 8px 0; padding: 6px 10px; width: 100%; max-width: 320px;
  background: var(--panel2); border: 1px solid var(--rule); border-radius: 6px; color: var(--ink);
}
.table-search::placeholder { color: var(--muted); }

/* ── Server-side list: total pill, filter bar, bulk toolbar, sort headers ── */
.total-pill { background:var(--panel2); border:1px solid var(--rule); border-radius:14px;
  padding:2px 12px; font-size:.9em; color:var(--ink); margin:0 10px; }
.total-pill strong { color:var(--accent); }
.filter-bar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:10px 12px; margin:10px 0; }
.filter-bar .input, .filter-bar select, .filter-bar input[type=date] {
  background:var(--panel2); border:1px solid var(--rule); border-radius:6px; color:var(--ink); padding:5px 8px; }
.bulk-bar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:8px 0; }
.bulk-bar .spacer { flex:1 1 auto; }
.bulk-bar select { background:var(--panel2); border:1px solid var(--rule); border-radius:6px; color:var(--ink); padding:5px 8px; }
.bulk-count { color:var(--muted); font-size:.9em; }
td.col-check, th.col-check { width:28px; text-align:center; }
.th-sort a { color:inherit; text-decoration:none; }
.th-sort a:hover { color:var(--accent); }
.th-sort.is-sorted { color:var(--accent); }
.sort-ar { margin-left:3px; color:var(--accent); }

/* ══════════════════════════════════════════════════════════════════════
   "DC" SCREEN VOCABULARY — the Donor-terminal layout language (from the
   Claude Design "Donor Screen"). Reusable across screens; fully theme-
   driven (every colour is a token, so it re-skins under all 4 themes).
   color-mix() derives the verified/blood/empty cell tints from --ok/--danger.
   ══════════════════════════════════════════════════════════════════════ */
.dc-screen { display:flex; flex-direction:column; gap:13px; max-width:1460px; }
.dc-grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(400px,1fr)); gap:13px; }

/* Entity header strip (donor identity bar) */
.dc-strip { display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background:var(--panel); border:1px solid var(--rule); border-radius:12px; padding:11px 16px; }
.dc-avatar { width:42px; height:42px; border-radius:11px; flex:0 0 auto;
  background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#ffffff));
  display:flex; align-items:center; justify-content:center; color:var(--accent-fg); font-size:15px; font-weight:700; }
.dc-id .nm { font-size:16px; font-weight:700; color:var(--info-fg); line-height:1.15; }
.dc-id .no { font-size:11px; color:var(--muted); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.dc-sep { width:1px; height:34px; background:var(--rule); }
.dc-stat { display:flex; flex-direction:column; padding:3px 13px; border-left:1px solid var(--rule); }
.dc-stat .k { font-size:9px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.dc-stat .v { font-size:15px; font-weight:700; color:var(--info-fg); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
/* Deferral state on the donor card (test #16). Temp-active: yellow name, red
   border. Permanent (Kesin Red): red name, yellow border + label. Expired temp:
   a red "!" before the name linking to the deferrals screen. */
.dc-defer-temp_active { border:1px solid #c4302b; border-radius:12px; padding:6px 10px; }
.dc-defer-temp_active .dc-id .nm { color:#e0b400; }
.dc-defer-permanent { border:1px solid #e0b400; border-radius:12px; padding:6px 10px; }
.dc-defer-permanent .dc-id .nm { color:#e23b2e; }
.dc-defer-perm-label { font-size:11px; font-weight:800; color:#e23b2e; margin-top:2px; }
.dc-defer-bang { color:#e23b2e; font-weight:900; text-decoration:none; margin-right:5px; }
.dc-defer-bang:hover { text-decoration:underline; }
.dc-grow { flex:1; min-width:8px; }
.dc-chip-blood { display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:9px;
  font-weight:700; font-size:14px; background:var(--danger); color:#fff; }
.dc-pill { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:20px; font-size:12px; font-weight:600;
  background:color-mix(in srgb,var(--warn) 16%,var(--panel)); border:1px solid color-mix(in srgb,var(--warn) 45%,var(--panel)); color:var(--warn); }
.dc-pill.ok { background:color-mix(in srgb,var(--ok) 14%,var(--panel)); border-color:color-mix(in srgb,var(--ok) 40%,var(--panel)); color:var(--ok); }
.dc-pill .dot { width:7px; height:7px; border-radius:50%; background:currentColor; }

/* Panel */
.dc-panel { background:var(--panel); border:1px solid var(--rule); border-radius:12px; overflow:hidden;
  display:flex; flex-direction:column; box-shadow:0 1px 2px rgba(16,24,40,.05); }
.dc-panel-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:9px 13px;
  border-bottom:1px solid var(--rule); background:linear-gradient(180deg,var(--panel),var(--panel2)); }
.dc-panel-head .t { font-size:14px; font-weight:700; color:var(--info-fg); }
.dc-count { font-size:10.5px; font-weight:600; color:var(--muted); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.dc-panel-body { padding:13px 14px; flex:1; }

/* Toolbar icon buttons */
.dc-tools { display:flex; gap:4px; align-items:center; }
.dc-tool { display:inline-flex; align-items:center; justify-content:center; width:27px; height:24px; border-radius:7px;
  border:1px solid var(--rule); background:var(--panel); color:var(--muted); cursor:pointer; padding:0; text-decoration:none; }
.dc-tool:hover { background:var(--panel2); }
.dc-tool svg { width:14px; height:14px; }
.dc-tool.add  { border-color:color-mix(in srgb,var(--accent) 45%,var(--panel)); background:color-mix(in srgb,var(--accent) 12%,var(--panel)); color:var(--accent); }
.dc-tool.save { border-color:color-mix(in srgb,var(--ok) 45%,var(--panel)); background:color-mix(in srgb,var(--ok) 12%,var(--panel)); color:var(--ok); }
.dc-tool.del  { border-color:color-mix(in srgb,var(--danger) 40%,var(--panel)); background:color-mix(in srgb,var(--danger) 10%,var(--panel)); color:var(--danger); }
.dc-tool-sep { width:1px; height:18px; background:var(--rule); margin:0 2px; }

/* Tabs */
.dc-tabs { display:flex; gap:2px; border-bottom:1px solid var(--rule); background:var(--panel2); flex-wrap:wrap; padding:0 8px; }
.dc-tab { padding:9px 14px; cursor:pointer; font-size:12.5px; font-weight:600; color:var(--muted);
  border:0; border-bottom:2px solid transparent; background:none; font-family:inherit; }
.dc-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.dc-pane { display:none; }
.dc-pane.active { display:block; }

/* Field rows */
.dc-fields { display:flex; flex-direction:column; gap:5px; }
.dc-cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:0 24px; }
.dc-field { display:grid; grid-template-columns:148px 1fr; align-items:center; gap:10px; min-height:28px; }
.dc-field > .lbl { font-size:12px; font-weight:600; color:var(--info-fg); }
.dc-field .dc-req { color:#c0392b; margin-left:3px; font-style:normal; }
.dc-field-wide { grid-template-columns:1fr; align-items:start; }
.dc-field-wide > .lbl { margin-bottom:2px; }
.dc-cell { min-height:25px; display:flex; align-items:center; gap:6px; padding:0 9px; border-radius:6px;
  font-size:12.5px; font-weight:500; background:var(--panel); color:var(--ink); border:1px solid var(--rule); min-width:0; }
.dc-cell .tx { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dc-cell.mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.dc-cell .ck { margin-left:auto; color:var(--ok); flex:0 0 auto; }
.dc-cell.verified { background:color-mix(in srgb,var(--ok) 10%,var(--panel)); color:color-mix(in srgb,var(--ok) 80%,var(--ink));
  border-color:color-mix(in srgb,var(--ok) 35%,var(--panel)); }
.dc-cell.blood { background:color-mix(in srgb,var(--danger) 10%,var(--panel)); color:var(--danger);
  border-color:color-mix(in srgb,var(--danger) 35%,var(--panel)); font-weight:700; }
.dc-cell.empty { background:var(--panel2); color:var(--muted); border:1px dashed var(--rule); }
.dc-cell.ro { background:var(--panel2); color:var(--muted); }

/* Segmented Evet/Hayır (display) */
.dc-seg { display:inline-flex; border:1px solid var(--rule); border-radius:6px; overflow:hidden; }
.dc-seg .opt { padding:4px 16px; font-size:11.5px; font-weight:600; background:var(--panel); color:var(--muted); }
.dc-seg .opt + .opt { border-left:1px solid var(--rule); }
.dc-seg .opt.yes.on { background:var(--accent); color:var(--accent-fg); }
.dc-seg .opt.no.on  { background:var(--danger); color:#fff; }

/* Address chips */
.dc-chips { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:12px; }
.dc-chip { display:flex; align-items:center; gap:9px; padding:7px 12px; border-radius:9px; cursor:pointer;
  border:1px solid var(--rule); background:var(--panel); font-size:12px; font-weight:600; color:var(--ink); }
.dc-chip.on { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,var(--panel)); color:var(--accent); }
.dc-chip .pri { font-size:8px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ok);
  background:color-mix(in srgb,var(--ok) 12%,var(--panel)); border:1px solid color-mix(in srgb,var(--ok) 35%,var(--panel)); padding:2px 6px; border-radius:5px; }

/* Barcode strip */
.dc-barcode-wrap { margin-top:6px; padding:9px 11px; border:1px solid var(--rule); border-radius:9px; background:var(--panel2); }
.dc-barcode-wrap .lbl { font-size:8.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-bottom:5px; }
.dc-barcode { height:30px; width:100%;
  background:repeating-linear-gradient(90deg,var(--ink) 0 1px,var(--panel) 1px 3px,var(--ink) 3px 4px,var(--panel) 4px 7px,var(--ink) 7px 9px,var(--panel) 9px 11px); }
.dc-barcode-no { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; color:var(--muted); letter-spacing:.18em; margin-top:4px; }

/* Matching-records / history mini table */
.dc-rows-head, .dc-row { display:grid; align-items:center; padding:6px 13px; }
.dc-rows-head { background:var(--panel2); border-bottom:1px solid var(--rule);
  font-size:9.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.dc-row { border-bottom:1px solid var(--rule); cursor:pointer; font-size:12px; height:30px; text-decoration:none; color:var(--ink); }
.dc-row:hover { background:var(--grid-row-hover); }
.dc-row.on { background:var(--accent); color:var(--accent-fg); }
.dc-row .id { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; color:var(--accent); }
.dc-row.on .id { color:var(--accent-fg); }

/* DC title bar (module header inside the donor terminal) */
.dc-titlebar { display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  background:linear-gradient(180deg,var(--title-bg-top),var(--title-bg-bot)); color:var(--title-fg);
  border:1px solid var(--rule); border-radius:10px; padding:8px 14px; }
.dc-tb-icon { width:26px; height:26px; border-radius:7px; background:var(--danger);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.dc-tb-title { font-size:13.5px; font-weight:700; color:var(--title-fg); }
.dc-tb-sub { font-size:9px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--title-fg); opacity:.72; }
.dc-tb-rec { font-size:11px; font-weight:600; color:var(--title-fg); opacity:.85;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }

/* Standard title bar (rendered once from base.html on every screen) + the
   « Geri | İleri » donor-flow arrows that ride on its right edge. The arrows
   keep the legacy yellow-on-bar look from the old grey flow strip. */
.std-titlebar { margin:0 0 12px; }
.dc-tb-flow { display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.dc-tb-flow a, .dc-tb-flow span.dis { font-weight:700; text-decoration:none;
  font-size:13px; letter-spacing:.3px; }
.dc-tb-flow a { color:#d9d943; }
.dc-tb-flow a:hover { color:#fff; }
.dc-tb-flow span.dis { color:rgba(255,255,255,.45); cursor:default; }
.dc-tb-flow .sep { color:rgba(255,255,255,.45); }

/* "not stored in DB yet" inline tag */
.dc-gap { margin-left:auto; flex:0 0 auto; font-size:8px; font-weight:700; letter-spacing:.03em;
  text-transform:uppercase; color:var(--warn); background:color-mix(in srgb,var(--warn) 14%,var(--panel));
  border:1px solid color-mix(in srgb,var(--warn) 40%,var(--panel)); padding:1px 5px; border-radius:4px; }

/* DC editable inputs */
.dc-in { width:100%; min-height:26px; padding:3px 9px; border-radius:6px; border:1px solid var(--rule);
  background:var(--panel); color:var(--ink); font:inherit; font-size:12.5px; }
.dc-in:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-dim); }
textarea.dc-in { resize:vertical; line-height:1.35; }
.dc-seg-edit .opt { cursor:pointer; user-select:none; }
.dc-seg-edit .opt input { position:absolute; opacity:0; width:0; height:0; }
.dc-seg-edit .opt:has(input:checked).yes { background:var(--accent); color:var(--accent-fg); }
.dc-seg-edit .opt:has(input:checked).no  { background:var(--danger); color:#fff; }
.dc-toast { position:fixed; left:50%; bottom:28px; transform:translateX(-50%);
  background:var(--ok); color:#fff; padding:10px 20px; border-radius:10px; font-weight:600;
  font-size:13px; box-shadow:0 12px 30px -8px rgba(0,0,0,.4); transition:opacity .4s; z-index:60; }

/* Multiple-address editor */
.addr-form { display:none; }
.addr-form.active { display:block; max-width:560px; }
.addr-chip { font:inherit; }
.addr-del { font-size:11px; padding:4px 10px; color:var(--danger); border-color:var(--rule); }

/* Real barcode image */
.dc-barcode-img { display:block; width:100%; max-width:280px; height:auto; image-rendering:crisp-edges; }
.dc-barcode-sym { float:right; font-size:8px; font-weight:700; letter-spacing:.05em; color:var(--muted); }

@media print {
  header.chrome, footer.chrome, nav.topmenu, aside.sidebar,
  aside#accordion, .acc-nav, #sr-open, #sidebar-toggle,
  .dc-tools, .dc-tabs, .dc-titlebar .dc-tb-rec { display:none !important; }
  .page-wrap, .page-wrap.layout-accordion { grid-template-columns:1fr !important; }
  main { width:100% !important; margin:0 !important; padding:0 !important; }
  .dc-pane { display:block !important; }   /* print all tabs */
}

/* Table-enhance pager (client pagination on .js-enhance reports/lists) */
.te-pager { display:flex; align-items:center; gap:8px; margin:8px 0; }
.te-pager .btn.sm { padding:2px 11px; font-size:1em; line-height:1.3; }
.te-pager .btn.sm:disabled { opacity:.4; pointer-events:none; }
.te-pager-info { font-size:.85em; color:var(--muted); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }

/* Print / Save-as-PDF: isolate the report content, show every row */
@media print {
  header.chrome, footer.chrome, nav.topmenu, aside.sidebar,
  aside#accordion, .acc-nav, #sr-open, #sidebar-toggle,
  .table-search, .te-pager, .filter-bar, .bulk-bar, .page-head .btn,
  .report-actions { display:none !important; }
  .page-wrap, .page-wrap.layout-accordion { grid-template-columns:1fr !important; }
  main { width:100% !important; margin:0 !important; }
  table.js-enhance tbody tr { display:table-row !important; }
  body { background:#fff !important; }
}

/* Centre context indicator in the top chrome (the home facility / "Merkez Seç") */
.centre-context { display:inline-flex; align-items:center; gap:6px; margin-left:14px;
  padding:3px 10px; border-radius:7px; background:rgba(255,255,255,.12);
  color:var(--chrome-fg); font-size:.82rem; font-weight:600; white-space:nowrap; }
@media print { .centre-context { display:none !important; } }

/* ── Filter-chip bar (report engine search) ───────────────────────────── */
.rf-bar { display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  padding:8px; margin-bottom:12px; border:1px solid var(--rule);
  border-radius:9px; background:var(--panel); position:relative; }
.rf-chips { display:flex; flex-wrap:wrap; gap:6px; }
.rf-chip { display:inline-flex; align-items:center; gap:5px; cursor:pointer;
  padding:4px 6px 4px 10px; border-radius:14px; font-size:.84rem;
  background:var(--accent-dim); color:var(--ink);
  border:1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.rf-chip b { font-weight:600; }
.rf-chip i { font-style:normal; color:var(--muted); font-size:.78rem; }
.rf-chip .rf-val { font-weight:600; }
.rf-x { border:0; background:transparent; cursor:pointer; font-size:1rem;
  line-height:1; color:var(--muted); padding:0 2px; border-radius:50%; }
.rf-x:hover { color:var(--danger); background:rgba(0,0,0,.06); }
.rf-add { border:1px dashed var(--rule); background:transparent; cursor:pointer;
  border-radius:14px; padding:4px 12px; font-size:.84rem; color:var(--accent);
  font-weight:600; }
.rf-add:hover { background:var(--accent-dim); }
.rf-pop { position:absolute; top:100%; left:0; z-index:40; margin-top:4px;
  min-width:230px; max-width:320px; background:var(--bg); border:1px solid var(--rule);
  border-radius:10px; box-shadow:0 8px 28px rgba(0,0,0,.18); padding:10px; }
.rf-pop-h { font-weight:700; font-size:.86rem; margin-bottom:8px; }
.rf-search { width:100%; box-sizing:border-box; margin-bottom:6px; padding:6px 8px;
  border:1px solid var(--rule); border-radius:7px; }
.rf-menu { display:flex; flex-direction:column; max-height:240px; overflow:auto; }
.rf-mi { text-align:left; border:0; background:transparent; cursor:pointer;
  padding:6px 8px; border-radius:6px; font-size:.86rem; color:var(--ink); }
.rf-mi:hover { background:var(--accent-dim); }
.rf-opts { display:flex; flex-direction:column; gap:3px; max-height:240px;
  overflow:auto; margin-bottom:8px; }
.rf-opts label { font-size:.86rem; display:flex; align-items:center; gap:6px; }
.rf-row { display:flex; gap:8px; margin-bottom:8px; }
.rf-cell { display:flex; flex-direction:column; gap:3px; font-size:.78rem;
  color:var(--muted); flex:1; }
.rf-cell input, .rf-ti { padding:6px 8px; border:1px solid var(--rule);
  border-radius:7px; width:100%; box-sizing:border-box; }
.rf-ti { margin-bottom:8px; }
.rf-apply { width:100%; }
@media print { .rf-bar, .report-config { display:none !important; } }

/* ── Donor typeahead picker (replaces the old all-donor <select>) ──────── */
.donor-picker { position:relative; }
.donor-picker-box { display:flex; align-items:center; gap:6px; }
.donor-picker-input { flex:1; padding:6px 8px; border:1px solid var(--rule);
  border-radius:7px; box-sizing:border-box; }
.donor-picker-input[readonly] { background:var(--accent-dim); font-weight:600; }
.donor-picker-clear { border:1px solid var(--rule); background:var(--bg);
  cursor:pointer; border-radius:7px; width:30px; height:30px; line-height:1;
  font-size:1.1rem; color:var(--muted); }
.donor-picker-clear:hover { background:var(--accent-dim); color:var(--ink); }
.donor-picker-results { position:absolute; z-index:30; left:0; right:0; margin:2px 0 0;
  padding:4px; list-style:none; background:var(--bg); border:1px solid var(--rule);
  border-radius:8px; box-shadow:0 8px 28px rgba(0,0,0,.18); max-height:260px;
  overflow:auto; }
.donor-picker-item { padding:6px 8px; border-radius:6px; cursor:pointer;
  display:flex; justify-content:space-between; gap:10px; font-size:.88rem; }
.donor-picker-item:hover, .donor-picker-item.active { background:var(--accent-dim); }
.donor-picker-item .dp-meta { color:var(--muted); font-size:.8rem; white-space:nowrap; }

/* ── Alternative left-accordion navigation (report #25) ─────────────────── */
.page-wrap.layout-accordion { grid-template-columns: 232px 1fr; }
.acc-nav { align-self: stretch;
  background: var(--side-bg, #2c3680); color: var(--side-fg, #fff);
  padding: 8px 0; overflow-y: auto; }
.acc-brand { padding: 6px 16px 10px; font-weight: 700; font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.acc-group { border-top: 1px solid rgba(255,255,255,.08); }
.acc-group > summary { list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 8px; padding: 8px 16px;
  font-weight: 600; font-size: 13.5px; line-height: 1.15; }
.acc-group > summary::-webkit-details-marker { display: none; }
.acc-group > summary::after { content: "▸"; margin-left: auto; opacity: .55;
  font-size: 11px; transition: transform .12s ease; }
.acc-group[open] > summary::after { transform: rotate(90deg); }
.acc-group > summary:hover { background: rgba(255,255,255,.07); }
.acc-nav .acc-ico { font-size: 15px; }
.acc-items { display: block; padding: 0 0 4px; }
.acc-items a { display: block; padding: 4px 16px 4px 39px; color: var(--side-fg, #fff);
  text-decoration: none; font-size: 12.5px; line-height: 1.25; opacity: .88; }
.acc-items a:hover { background: var(--side-bg-hi, #4a55a8); opacity: 1; }

/* The required marker on hand-written labels (the examination form writes its
   own labels rather than using the _form.html macro). Same red asterisk the
   macro shows, so 'mandatory' looks the same everywhere. */
.dc-req { color:#c0392b; margin-left:3px; font-style:normal; font-weight:700; }