/* ===== TamirBMC StemCell — base RTL Hebrew styles =====
   Design goals (per spec section 5): full Hebrew RTL, process-oriented,
   clear separation of areas, accessible, responsive. */

:root {
  /* ===== #40 — single source of truth: Navy & Amber palette =====
     Rule: one color per semantic role. Each status has a solid tone + a light
     background + a dark on-light text tone. Do NOT hardcode hex below — use these. */

  /* Brand / neutrals */
  --c-bg: #f7f6f2;
  --c-surface: #ffffff;
  --c-surface-alt: #eef2f6;      /* table heads, chips, kanban columns */
  --c-hover: #f7fafc;            /* subtle row/summary hover */
  --c-primary: #1d4e89;          /* navy — links, buttons, titles */
  --c-primary-dark: #143a68;
  --c-accent: #e0900f;           /* amber — key actions / highlights */
  --c-accent-dark: #b06f00;
  --c-text: #24303f;
  --c-muted: #6b7480;
  --c-border: #e6e2da;

  /* Status: success (green) — was ~5 shades, now one */
  --c-ok: #1f8a4c;
  --c-ok-text: #1e7a3a;          /* dark green text on a light bg */
  --c-ok-bg: #e7f6ec;
  --c-ok-border: #cfe8d6;

  /* Status: danger / destructive (red) — was ~4 shades, now one */
  --c-down: #c0392b;
  --c-down-dark: #a5281c;        /* hover */
  --c-down-text: #b3261e;        /* dark red text on a light bg */
  --c-down-bg: #fde8ea;

  /* Status: warning (amber/khaki on light) */
  --c-warn-text: #6b4f00;/* SB-N2 B9 — darkened from #7a5b00 for WCAG-AA on the warn background */
  --c-warn-bg: #fff4d6;
  --c-warn-border: #f0d488;

  /* Info (blue tint) — allogeneic / processing / links-on-light */
  --c-info: #1557b0;
  --c-info-bg: #e3f0ff;

  /* Navy scale — sidebar & dark surfaces */
  --c-navy-900: #14233a;         /* sidebar + kanban count bg */
  --c-navy-700: #1f3a57;         /* dividers on navy */
  --c-navy-600: #274a72;         /* active nav item */
  --c-navy-500: #173a5c;         /* nav item hover */
  --c-navy-300: #7da3cc;         /* muted text on navy */
  --c-navy-100: #cfe0f3;         /* text on navy */

  /* Radius scale */
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --gap: 1rem;
  --shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: "Segoe UI", "Arial Hebrew", Arial, sans-serif;
  background: var(--c-bg);
  color: var(--c-text);
  min-height: 100vh;
}

body { display: flex; flex-direction: column; }

/* Accessibility: skip link */
.skip-link {
  position: absolute;
  inset-inline-start: -999px;
  top: 0;
  background: var(--c-primary);
  color: #fff;
  padding: .5rem 1rem;
  z-index: 100;
}
.skip-link:focus { inset-inline-start: 0; }

/* Header */
.app-header {
  background: var(--c-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .6rem 1.25rem;
  box-shadow: var(--shadow);
}
.app-header__brand { display: flex; align-items: baseline; gap: .6rem; }
.app-header__title { color: #fff; text-decoration: none; font-weight: 700; font-size: 1.15rem; }
.app-header__version { font-size: .8rem; opacity: .85; }
.app-nav a { color: #fff; text-decoration: none; padding: .35rem .75rem; border-radius: var(--radius); }
.app-nav { display: flex; align-items: center; gap: .4rem; }
.app-nav a:hover, .app-nav a:focus { background: rgba(255, 255, 255, .15); }
.app-nav__user { font-size: .8rem; opacity: .9; margin-inline-start: .5rem; }
.app-nav__logout { display: inline; margin: 0; }
.app-nav__logout button {
  background: rgba(255,255,255,.15); color: #fff; border: 0; border-radius: var(--radius);
  padding: .35rem .75rem; cursor: pointer; font-size: .85rem;
}
.app-nav__logout button:hover { background: rgba(255,255,255,.28); }

/* Login screen */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: linear-gradient(135deg, var(--c-primary), var(--c-primary-dark)); }
.login-card { background: #fff; padding: 2rem 2.25rem; border-radius: var(--radius-lg); box-shadow: 0 10px 30px rgba(0,0,0,.25); width: min(380px, 92vw); }
.login-title { margin: 0 0 .2rem; font-size: 1.25rem; color: var(--c-primary-dark); }
.login-sub { margin: 0 0 1.25rem; color: var(--c-muted); font-size: .9rem; }
.login-form { display: flex; flex-direction: column; gap: .35rem; }
.login-form label { font-size: .85rem; color: var(--c-muted); margin-top: .5rem; }
.login-form input { padding: .6rem .75rem; border: 1px solid var(--c-border); border-radius: var(--radius); font-size: 1rem; }
.login-btn { margin-top: 1.25rem; width: 100%; padding: .65rem; font-size: 1rem; }

/* Main */
.app-main { flex: 1; padding: 1.5rem; max-width: 1100px; width: 100%; margin-inline: auto; }

/* Footer */
.app-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .6rem 1.25rem;
  font-size: .85rem;
  color: var(--c-muted);
  border-top: 1px solid var(--c-border);
  background: var(--c-surface);
}
.db-status { font-weight: 600; }
.db-status--ok { color: var(--c-ok); }
.db-status--down { color: var(--c-down); }

/* Home */
.home__title { margin: 0 0 1.25rem; font-size: 1.4rem; }
.home__note { margin-top: 1.5rem; color: var(--c-muted); font-size: .9rem; }

/* Tiles */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--gap);
}
.tile {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 1.25rem;
  text-decoration: none;
  color: var(--c-text);
  box-shadow: var(--shadow);
  transition: transform .08s ease, border-color .08s ease;
}
.tile:hover, .tile:focus { transform: translateY(-2px); border-color: var(--c-primary); }
.tile--primary { border-top: 4px solid var(--c-primary); }
.tile__icon { font-size: 1.8rem; }
.tile__label { font-weight: 700; font-size: 1.1rem; }
.tile__sub { color: var(--c-muted); font-size: .85rem; }
.tile[aria-disabled="true"] { opacity: .6; cursor: not-allowed; }

/* Menu groups — separate "new case" actions from existing/other navigation */
.menu-group { margin-bottom: 1.75rem; }
.menu-group__title {
  display: flex; align-items: center; gap: .5rem;
  font-size: 1.05rem; margin: 0 0 .25rem;
  padding-bottom: .4rem; border-bottom: 2px solid var(--c-border);
}
.menu-group__hint { color: var(--c-muted); font-size: .85rem; margin: .35rem 0 .85rem; }
.menu-group__badge {
  background: var(--c-ok); color: #fff; font-size: .72rem; font-weight: 700;
  padding: .15rem .55rem; border-radius: var(--radius);
}
/* The "new case" group is visually distinct (light green panel) */
.menu-group--new {
  background: var(--c-ok-bg); border: 1px solid var(--c-ok-border);
  border-radius: var(--radius); padding: 1rem 1.1rem 1.25rem;
}
.menu-group--new .menu-group__title { border-bottom-color: var(--c-ok-border); }
/* "Create" action tiles get a green accent so they read as actions, not links */
.tile--action { border-top: 4px solid var(--c-ok); }
.tile--action:hover, .tile--action:focus { border-color: var(--c-ok); }

/* Accessibility helper */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Page title / breadcrumb */
.page-title { margin: 0 0 1rem; font-size: 1.4rem; }
.breadcrumb { color: var(--c-muted); font-size: .85rem; margin-bottom: .5rem; }
.breadcrumb a { color: var(--c-primary); text-decoration: none; }

/* Search bar */
.search-bar { display: flex; gap: .5rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; }
.search-bar input[type="search"] {
  flex: 1; min-width: 220px; padding: .55rem .75rem;
  border: 1px solid var(--c-border); border-radius: var(--radius); font-size: 1rem;
}
.search-bar button {
  padding: .55rem 1.25rem; background: var(--c-primary); color: #fff;
  border: 0; border-radius: var(--radius); font-size: 1rem; cursor: pointer;
}
.search-bar button:hover { background: var(--c-primary-dark); }
.btn-link { color: var(--c-muted); text-decoration: none; }
.result-count { color: var(--c-muted); font-size: .85rem; margin: 0 0 .75rem; }

/* Data tables */
.data-table { width: 100%; border-collapse: collapse; background: var(--c-surface); }
.data-table th, .data-table td {
  text-align: start; padding: .6rem .75rem; border-bottom: 1px solid var(--c-border);
}
.data-table thead th { background: var(--c-surface-alt); font-size: .85rem; color: var(--c-muted); }
.data-table tbody tr:hover { background: var(--c-hover); }
.data-table a { color: var(--c-primary); text-decoration: none; font-weight: 600; }
/* Filled buttons inside tables must keep white text (else navy-on-navy) */
/* Filled buttons inside tables must keep white text (navy bg) — but NOT ghost buttons:
   QA#88 — a transparent .btn--ghost ('צפה בתיק ▸') was turned white-on-white (invisible) by this
   rule; exclude it so it keeps its readable color:var(--c-text). */
.data-table a.btn:not(.btn--ghost) { color: #fff; }
.data-table .empty { text-align: center; color: var(--c-muted); padding: 1.25rem; }
/* QA#158 — any element that OPENS/NAVIGATES on click is obviously interactive: pointer cursor + a clear
   hover/focus state, from ONE place (not per-page). Covers clickable list ROWS (tr[data-href]), the generic
   [data-href]/[data-edit-href] cards, and the .is-clickable utility. The clickable list row was inert
   (no cursor, no hover) — the exact affordance gap the user kept hitting. */
tr[data-href], [data-href], [data-edit-href], .is-clickable { cursor: pointer; }
.data-table tbody tr[data-href] { transition: background .12s ease; }
.data-table tbody tr[data-href]:hover, .data-table tbody tr[data-href]:focus-within { background: var(--c-hover); }
.data-table tbody tr[data-href]:focus-visible { outline: 2px solid var(--c-primary); outline-offset: -2px; }
/* ⭐ sortable list headers (2026-07-12) — click/keyboard to sort, ▲/▼ indicator */
.data-table thead th.th-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.data-table thead th.th-sortable:hover { color: var(--c-text); background: var(--c-hover); }
.data-table thead th.th-sortable:focus-visible { outline: 2px solid var(--c-primary); outline-offset: -2px; }
.data-table thead th[aria-sort="ascending"], .data-table thead th[aria-sort="descending"] { color: var(--c-text); }
/* neutral ⇅ at rest (discoverable) → filled ▲/▼ in primary when that column is active */
.th-sort-ind { font-size: .8em; color: #565e68; }/* SB-N2 B3 — darker + no opacity, was var(--c-muted) opacity:.7 (~3.8:1) */
.data-table thead th[aria-sort="ascending"] .th-sort-ind,
.data-table thead th[aria-sort="descending"] .th-sort-ind { color: var(--c-primary); opacity: 1; }

/* Cards */
.card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: 1.1rem 1.25rem; margin-bottom: 1rem; box-shadow: var(--shadow);
}
.card__title { margin: 0 0 .85rem; font-size: 1.05rem; color: var(--c-primary-dark);
  border-bottom: 1px solid var(--c-border); padding-bottom: .5rem; }

/* Field grid (label/value) */
.field-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem; margin: 0; }
.field-grid dt { font-size: .75rem; color: var(--c-muted); margin-bottom: .15rem; }
.field-grid dd { margin: 0; font-weight: 600; }
/* Q7 sub-step 1 — the case-identity lists adopt the form.html look (form-grid spacing +
   large fields) WITHOUT changing the DOM, so inline autosave / #103 combobox / נמ"ר stay
   intact. Purely a visual modifier on the existing <dl class="field-grid">. */
.field-grid--lg { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .9rem 1.1rem; }
.field-grid--lg dt { font-size: .8rem; margin-bottom: .25rem; }
.field-grid--lg .form-control--sm { padding: .5rem .65rem; font-size: .95rem; height: auto; }  /* = full .form-control size */

/* Case head */
.case-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.case-head .page-title { margin: 0; }

/* Badges */
.badge {
  display: inline-block; padding: .15rem .6rem; border-radius: 999px;
  font-size: .8rem; font-weight: 600; background: #e2e8f0; color: #334155;
}
/* #41 — one color semantic for the transplant route everywhere: autologous =
   GREEN, allogeneic = BLUE (matches .tag--auto/.tag--allo on the boards/worklists).
   Previously badge--auto was blue and badge--allo pink, contradicting the spec. */
.badge--auto { background: var(--c-ok-bg); color: var(--c-ok-text); }
.badge--allo { background: var(--c-info-bg); color: var(--c-info); }

/* Buttons / hints */
.btn {
  display: inline-block; padding: .5rem 1rem; background: var(--c-primary); color: #fff;
  border: 0; border-radius: var(--radius); font-size: .95rem; cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--c-primary-dark); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn--label { background: #0f766e; }
.btn--label:hover { background: #0b574f; }
.btn--sm { padding: .3rem .65rem; font-size: .82rem; font-weight: 600; }
/* #45 — reusable <fieldset> reset (was a repeated inline style in ~13 forms):
   strips the native fieldset chrome so it can wrap a form for the #34 disabled-lock
   without affecting layout. The --contents variant keeps inline row-form grids intact. */
.fieldset-reset { border: 0; padding: 0; margin: 0; min-inline-size: auto; }
.fieldset-reset--contents { display: contents; }
/* #58 (Option 1) — נמ"ר update button: compact amber-outline pill + big tiger.
   Disabled (via [disabled]) when there is no ת"ז to look up. */
.btn--namar {
  display: inline-flex; align-items: center; gap: .2rem; white-space: nowrap;
  /* #89 — compact & subtle: no border, minimal padding; the tiger face carries it. */
  background: transparent; border: 0; color: var(--c-accent-dark);
  border-radius: var(--radius-pill); padding: .1rem .35rem; font-size: .78rem; font-weight: 600;
  font-family: inherit; cursor: pointer; text-decoration: none;
}
.btn--namar:hover { background: #fff8ec; }
.btn--namar:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.5); }
.btn--namar__ico { font-size: 1.05rem; line-height: 1; }   /* #89 — smaller tiger face (was 1.5rem) */
/* #43 — destructive actions (irreversible / medical-record safety): consistent RED. */
.btn--danger { background: var(--c-down); }
.btn--danger:hover { background: var(--c-down-dark); }
.card__title .btn--sm { float: inline-end; }
/* GET→POST — an inline "add" affordance is now a CSRF-protected POST form (creation must be a
   deliberate action, never a prefetch/F5 side-effect). display:contents makes the form generate no
   box, so its <button> participates in the parent's layout exactly as the old <a> did (incl. the
   .card__title float above and table-cell / toolbar flow). */
.inline-form { display: contents; }
.cell-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.form-field--check { justify-content: center; }
.check-label { display: flex; align-items: center; gap: .4rem; font-size: .9rem; color: var(--c-text); }
.form-check { width: 18px; height: 18px; }
.hint, .muted { color: var(--c-muted); font-size: .85rem; }
.toolbar { display: flex; gap: .75rem; align-items: center; margin: 1rem 0; }

/* Sticky save bar — keeps the save/create button visible on long forms,
   so users never miss it at the bottom. Settles at its natural position
   once the page is scrolled to the end. */
.save-bar {
  position: sticky;
  bottom: 0;
  margin: 1.25rem 0 0;
  padding: .75rem;
  background: var(--c-surface);
  border-top: 2px solid var(--c-primary);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 -3px 10px rgba(0, 0, 0, .07);
  z-index: 30;
  /* QA#41 — uniform layout: the primary "המשך" always sits at the bottom-LEFT (RTL). */
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.save-bar .btn { font-size: 1.05rem; }
.save-bar__hint { color: var(--c-muted); font-size: .82rem; margin-inline-start: auto; }
/* QA#41 — the forward button is pushed to the inline-end (physical left in RTL) so its
   position + look are identical on every stage screen (case · Pre · collection · products
   · processing · storage · transplant). */
.save-bar .btn--continue { margin-inline-start: auto; }
.btn--continue { font-weight: 700; }

/* Alerts */
.alert { padding: .7rem 1rem; border-radius: var(--radius); margin: .75rem 0; font-size: .95rem; }
.alert--block { background: var(--c-down-bg); color: var(--c-down-text); border: 1px solid var(--c-down-bg); }
.alert--ok { background: var(--c-ok-bg); color: var(--c-ok-text); border: 1px solid var(--c-ok-border); }

/* ===== ISBT label preview ===== */
.isbt-label {
  background: #fff; border: 2px solid #111; border-radius: 6px; padding: 1rem 1.25rem;
  max-width: 760px; margin: 0 auto; color: #111;
}
.isbt-label__top {
  display: flex; justify-content: space-between; align-items: flex-start;
  border-bottom: 2px solid #111; padding-bottom: .6rem; margin-bottom: .8rem; gap: 1rem;
}
.isbt-label__cap { display: block; font-size: .7rem; text-transform: uppercase; color: #555; letter-spacing: .04em; }
.isbt-label__din-val { font-size: 1.6rem; font-weight: 800; font-family: "Consolas", monospace; }
.isbt-label__grid { text-align: start; font-family: "Consolas", monospace; }
.isbt-label__grid-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .8rem 1.25rem; }
.isbt-block h3 { margin: 0 0 .4rem; font-size: .8rem; color: var(--c-primary-dark); border-bottom: 1px solid #ddd; padding-bottom: .2rem; }
.isbt-block > div { display: flex; justify-content: space-between; gap: .5rem; font-size: .85rem; padding: .1rem 0; }
.isbt-block > div > span { color: #555; }
.isbt-block > div > b { font-weight: 700; text-align: end; }
.isbt-bloodtype { font-size: 1.05rem; font-weight: 800; padding: .15rem 0 .35rem; }
.mono { font-family: "Consolas", monospace; }
.isbt-label__bottom { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; border-top: 2px solid #111; margin-top: .8rem; padding-top: .6rem; }
.isbt-flag { background: var(--c-surface-alt); padding: .15rem .55rem; border-radius: var(--radius-sm); font-size: .8rem; font-weight: 600; }
.isbt-flag--warn { background: var(--c-warn-bg); color: var(--c-warn-text); }
.isbt-meta { margin-inline-start: auto; color: #666; font-size: .75rem; }

/* Two-person verification */
.verify-section { border: 1px solid var(--c-border); border-radius: var(--radius); padding: .8rem 1rem; margin-bottom: .75rem; }
.verify-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.verify-label { font-weight: 700; }
.verify-status--verified { background: var(--c-ok-bg); color: var(--c-ok-text); }
.verify-status--partial { background: var(--c-warn-bg); color: var(--c-warn-text); }
.verify-status--pending { background: #e2e8f0; color: #334155; }
.verify-locked { background: var(--c-down-bg); color: var(--c-down-text); }
.verify-slots { display: flex; gap: .75rem; flex-wrap: wrap; margin: .6rem 0; }
.verify-slot { flex: 1; min-width: 180px; border: 1px dashed var(--c-border); border-radius: var(--radius); padding: .5rem .7rem; display: flex; align-items: center; gap: .5rem; justify-content: space-between; }
.verify-slot__role { font-weight: 700; font-size: .85rem; color: var(--c-primary-dark); }
.verify-slot__sig { font-size: .85rem; }
.verify-slot form { margin: 0; }
.verify-signers { list-style: none; margin: .6rem 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; font-size: .9rem; }
.verify-actions { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.verify-actions form { margin: 0; }

/* Forms */
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .9rem 1.1rem; }
.form-grid--wide { grid-template-columns: 1fr; }
.form-field--span { grid-column: span 2; }   /* QA#53 — long-value fields (e.g. product code) get 2 tracks */
.form-field { display: flex; flex-direction: column; gap: .25rem; }
.form-field label { font-size: .8rem; color: var(--c-muted); }
.form-control {
  padding: .5rem .65rem; border: 1px solid var(--c-border); border-radius: var(--radius);
  font-size: .95rem; font-family: inherit; background: #fff; width: 100%;
}
.form-control:focus { outline: 2px solid var(--c-primary); outline-offset: 0; border-color: var(--c-primary); }
select.form-control { text-overflow: ellipsis; }   /* QA#53 — long option text shows … instead of a hard clip */
/* QA#93 — ONE shared size for every notes/comment/diagnosis textarea system-wide: tall enough to
   hold ≥200 characters comfortably without scrolling (~5 lines), fluid width, vertically resizable.
   This min-height overrides any hard-coded rows="2" on individual textareas. */
textarea.form-control { min-height: 110px; resize: vertical; line-height: 1.4; }
.form-error { color: var(--c-down); font-size: .78rem; }
/* #73(א) — required-field indicator on labels */
.req-star { color: var(--c-down); font-weight: 700; }
/* QA#14 — a "lead" card (the primary action for the screen) gets an accent edge */
.card--lead{border-inline-start:4px solid var(--c-accent)}
/* QA#20/#80 — floating auto-dismissing toasts for global events */
/* CD#11m — system/error messages are centralized in ONE clear fixed region at the
   top-center of the viewport (was a start-corner stack that was easy to miss). The
   anchored toasts (raised next to a specific control) are unaffected — see below. */
.toast-stack{position:fixed;top:64px;left:50%;transform:translateX(-50%);z-index:1200;
  display:flex;flex-direction:column;align-items:stretch;gap:8px;width:min(440px,92vw)}
.toast{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:var(--radius);background:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.18);font-size:14px;border-inline-start:4px solid;animation:toastin .2s ease}
.toast--ok{border-color:var(--c-ok,#1e7e34)}
.toast--warn{border-color:var(--c-accent,#e0900f);background:#fff9ef}
/* CD#11m — an error must be unmistakable: red bar + light-red wash + bold text. */
.toast--err{border-color:var(--c-down,#d33);background:#fdecec;font-weight:600}
.toast__msg{flex:1;line-height:1.4}
.toast__close{border:0;background:none;font-size:19px;cursor:pointer;color:var(--c-muted);line-height:1;padding:0 2px}
.toast__close:hover{color:var(--c-text)}
.toast.is-hiding{opacity:0;transform:translateY(-6px);transition:opacity .3s,transform .3s}
@keyframes toastin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
/* #80♻️ — anchored toast: floats next to the control that triggered it, with an arrow
   pointing at it (in the user's gaze), instead of a fixed corner. JS sets top/left/--arrow-x. */
.toast--anchored{position:fixed;z-index:1300;max-width:320px;margin:0}
.toast--anchored::after{content:"";position:absolute;left:var(--arrow-x,50%);
  transform:translateX(-50%);border:7px solid transparent}
.toast--anchored:not(.toast--below)::after{top:100%;border-top-color:#fff}
.toast--anchored.toast--below::after{bottom:100%;border-bottom-color:#fff}
/* #79 — archived case status shown consistently (card · lists · search) */
.status-archived{color:#5f6368;font-weight:600}
/* #90 — subtle empty-state hint (replaces oversized amber alert boxes) */
.empty-hint{font-size:.85rem;margin:.4rem 0}
/* QA#39 — a conditionally-disabled field (e.g. division when not "מנה מחולקת") reads as inactive */
.form-field.is-disabled{opacity:.5}
/* QA#48 — inline "invalid ת"ז" resolver (clear value / set as passport) shown under the field */
.id-check-dialog{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-top:.4rem;
  padding:.5rem .6rem;background:#fdf3e3;border:1px solid var(--c-accent,#e0900f);border-radius:var(--radius);font-size:.82rem}
.id-check-dialog__msg{color:var(--c-warn-text,#7a4d00);font-weight:600;margin-inline-end:auto}
/* QA#32 — point the user at the exact missing required fields on a blocked "המשך". */
.field-missing input,.field-missing select,.field-missing textarea{
  border:1.5px solid var(--c-down,#d33) !important;background:#fff6f6}
.field-missing dt{color:var(--c-down,#d33)}
/* QA#133 — a required field flagged as missing on the "create case" click (class on the field itself). */
input.field-missing,select.field-missing,textarea.field-missing{border:1.5px solid var(--c-down,#d33) !important;background:#fff6f6}
/* QA#133 — subtle "incomplete" hint on the create button while required fields are still empty. */
.btn--incomplete{opacity:.55}
.missing-banner{background:#fdecec;border:1px solid var(--c-down,#d33);border-radius:var(--radius);
  padding:9px 13px;margin-bottom:14px;font-size:.88rem;line-height:1.7}
.missing-banner__link{color:var(--c-down,#d33);text-decoration:underline;font-weight:600}
.missing-banner__link:hover{text-decoration:none}
/* #92 (approach A) — processing screen: persistent summary bar + collapsible sections. */
.proc-summary{display:flex;flex-wrap:wrap;gap:16px;background:var(--c-navy,#1e293b);color:#fff;
  border-radius:var(--radius);padding:8px 14px;margin-bottom:14px;font-size:.85rem}
.proc-summary b{color:var(--c-accent,#e0900f)}
/* QA#90 (re-flagged 2026-07-13) — the "⊟ קפל הכל / ⊞ פתח הכל" toggle is a global .btn--ghost
   (dark text + dark border) sitting ON the navy .proc-summary bar → unreadable. Scoped light
   override ONLY here (global .btn--ghost untouched): white text, translucent light border/fill. */
.proc-summary .btn--ghost{color:#fff;border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.10)}
.proc-summary .btn--ghost:hover{background:rgba(255,255,255,.22);border-color:#fff}
.proc-summary .btn--ghost:focus-visible{outline:2px solid #fff;outline-offset:1px}
.accordion{background:var(--c-surface,#fff);border:1px solid var(--c-border,#e2e0d8);
  border-radius:var(--radius);margin-bottom:10px;box-shadow:0 1px 4px rgba(0,0,0,.04);overflow:hidden}
/* QA#90 — the open/close toggle was unclear/low-contrast (thin gold chevron on white). Make the
   header read as a real clickable bar (tinted background + readable text) with an obvious chevron
   and clear hover/focus states (WCAG AA). */
.accordion__hd{cursor:pointer;padding:11px 14px;font-weight:600;display:flex;align-items:center;gap:10px;
  list-style:none;user-select:none;background:var(--c-surface-alt,#eef2f7);color:var(--c-text,#12294a)}
.accordion__hd::-webkit-details-marker{display:none}
.accordion__hd::before{content:"▸";color:var(--c-primary,#1f6feb);font-weight:800;font-size:1.05em;
  line-height:1;transition:transform .15s}
.accordion[open] > .accordion__hd::before{transform:rotate(90deg)}
.accordion[open] > .accordion__hd{border-bottom:1px solid var(--c-border,#e2e0d8)}
.accordion__hd:hover{background:var(--c-hover,#e2e8f0)}
.accordion__hd:focus-visible{outline:2px solid var(--c-primary,#1f6feb);outline-offset:-2px}
/* QA#69 — complementary sub-section (e.g. scanned documents): indented + lighter,
   reads as nested under its parent step rather than a numbered step of its own. */
.accordion--sub{margin-inline-start:22px;border-style:dashed;box-shadow:none}
.accordion--sub > .accordion__hd{font-weight:500}
.accordion__chip{margin-inline-start:auto;font-size:.72rem;font-weight:600;background:#eef;color:#334155;
  border-radius:var(--radius-pill);padding:2px 9px;white-space:nowrap}
.accordion__chip--ok{background:var(--c-ok-bg,#e6f4ea);color:var(--c-ok,#1e7e34)}
.accordion__chip--warn{background:var(--c-warn-bg,#fdf3e3);color:var(--c-warn-text,#7a4d00)}
.accordion__body{padding:14px}
/* #87 — verify/sign actions read DIFFERENTLY from the solid "המשך" nav button: a subtle
   green outline pill with a small ✓/🖊 glyph, so a signature isn't mistaken for navigation. */
.btn--verify{background:transparent;border:1px solid var(--c-ok,#1e7e34);color:var(--c-ok,#1e7e34);
  font-weight:600;box-shadow:none}
.btn--verify:hover{background:var(--c-ok-bg,#e6f4ea)}
.btn--verify .btn__ico{font-size:.95em;margin-inline-end:.15rem}
/* QA#19 — compact verification status chip (integrated in a card header) */
.verify-chip{font-size:.72rem;font-weight:600;padding:2px 9px;border-radius:var(--radius-pill);white-space:nowrap}
.verify-chip--ok{background:var(--c-ok-bg,#e6f4ea);color:var(--c-ok-text,#1e7e34)}
.verify-chip--warn{background:var(--c-warn-bg,#fff7e6);color:var(--c-warn-text,#7a4d00)}
.verify-chip a{color:inherit;text-decoration:underline}
/* QA#16 — a clickable card opens its edit screen on click (replaces the edit button) */
.card--clickable{cursor:pointer;transition:box-shadow .15s,border-color .15s}
.card--clickable:hover{box-shadow:0 3px 14px rgba(0,0,0,.11);border-color:var(--c-primary)}
.card__edithint{float:inline-end;font-size:.72rem;font-weight:600;color:var(--c-muted)}
.card--clickable:hover .card__edithint{color:var(--c-primary)}
/* CD#11o — the archived-case reason on its own line, clearly a note (not a name). */
.archive-reason{margin-top:4px;font-size:.9em}
.archive-reason .muted{font-weight:600}
/* #66 — uniform list total summary */
.list-total{margin:4px 0 10px;font-size:.9rem;color:var(--c-muted)}
.list-total b{color:var(--c-primary-dark);font-size:1rem}
/* #61 — search "not found" hint */
.notfound__hint{margin-top:6px;font-size:.85rem;color:var(--c-muted)}
.notfound__hint a{color:var(--c-primary)}
/* #64 — anticoagulant type+volume pairs grouped in a labeled box */
.ac-group { border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: 8px 12px 12px; margin-bottom: 10px; }
.ac-group__lbl { font-weight: 700; font-size: .82rem; color: var(--c-primary-dark); margin-bottom: 4px; }
/* #68 — clickable lock-status control (replaces the plain edit button) */
.lock-status { display: inline-block; position: relative; }
.lock-status > summary { list-style: none; cursor: pointer; font-size: .8rem; font-weight: 600;
  padding: 3px 9px; border-radius: var(--radius-sm); color: var(--c-warn-text, #7a4d00);
  background: var(--c-warn-bg, #fff7e6); border: 1px solid var(--c-warn, #e0900f); white-space: nowrap; }
.lock-status > summary::-webkit-details-marker { display: none; }
.lock-status__pop { position: absolute; z-index: 30; inset-inline-end: 0; margin-top: 6px; width: 280px; max-width: 90vw;/* SB-N2 B5 — never overflow narrow phones */
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0,0,0,.16); padding: 12px; font-size: .82rem; line-height: 1.55;
  text-align: start; font-weight: 400; color: var(--c-text); white-space: normal; }

/* QA#55/QA#137 — print ONLY the label, at on-screen fidelity. Robust isolation: hide the whole page,
   then reveal just the .isbt-label subtree (no class allowlist, so nothing leaks).
   QA#137 (print/PDF looked worse than screen): the app SHELL/SIDEBAR were only `visibility:hidden`, so
   they still RESERVED their full-height column and pushed the label into a cramped corner on paper.
   Now the scaffolding is display:none (reserves no space), the label prints full-width with EXACT colors
   (crisp navy headings/borders + the DIN/barcode mono text stay sharp — no rasterization), a stable
   2-column block layout (not the screen's auto-fit reflow), and blocks never split across pages. */
@media print {
  body * { visibility: hidden; }
  .isbt-label, .isbt-label * { visibility: visible; }
  /* collapse ALL app scaffolding so it reserves NO space on the page (was the cramped-print cause) */
  .app-header, .app-footer, .app-nav, .no-print, .skip-link, .sidebar, .sidebar__me { display: none !important; }
  .shell { display: block !important; }
  html, body { margin: 0 !important; padding: 0 !important; background: #fff !important; }
  .isbt-label {
    position: absolute; inset: 0 auto auto 0; margin: 0; width: 100%; max-width: none;
    border: 1px solid #111; box-shadow: none;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;   /* keep headings/borders crisp */
  }
  /* stable, screen-like 2-column layout on paper (not the auto-fit reflow) + no mid-block page splits */
  .isbt-label__grid-cols { grid-template-columns: 1fr 1fr !important; gap: .6rem 1rem !important; }
  .isbt-label, .isbt-block, .isbt-label__top, .isbt-label__bottom { break-inside: avoid; page-break-inside: avoid; }
  @page { margin: 8mm; }
}

/* Wide tables scroll horizontally inside their card on small screens */
.card { overflow-x: auto; }

/* Responsive — tablet */
@media (max-width: 820px) {
  .app-header { flex-wrap: wrap; gap: .4rem .6rem; }
  .app-nav { flex-wrap: wrap; }
  .form-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

/* Responsive — phone */
@media (max-width: 600px) {
  .app-main { padding: .85rem; }
  .app-header { padding: .55rem .85rem; }
  .app-header__title { font-size: 1rem; }
  .app-nav { width: 100%; justify-content: flex-start; }
  .app-nav a, .app-nav__logout button { padding: .5rem .7rem; }  /* larger touch targets */
  .app-nav__user { width: 100%; margin: 0; }
  .tiles { grid-template-columns: 1fr; }
  .tile { padding: 1rem; }
  .form-grid { grid-template-columns: 1fr; }
  /* QA#95 — wide LIST tables (worklists/cases list, 7-9 cols) become stacked "label: value" cards
     on phones (opt-in .stack-mobile) instead of forcing horizontal scroll. Each row = a card; each
     cell shows its column header via data-label; 44px min touch target. */
  .data-table.stack-mobile thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .data-table.stack-mobile, .data-table.stack-mobile tbody, .data-table.stack-mobile tr, .data-table.stack-mobile td { display: block; width: 100%; }
  .data-table.stack-mobile tr { border: 1px solid var(--c-border); border-radius: var(--radius); margin-bottom: .6rem; background: var(--c-surface); overflow: hidden; }
  .data-table.stack-mobile td { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 44px; border: 0; border-bottom: 1px solid var(--c-border); padding: .55rem .8rem; white-space: normal; text-align: start; }
  .data-table.stack-mobile tr td:last-child { border-bottom: 0; }
  .data-table.stack-mobile td::before { content: attr(data-label); font-weight: 600; color: var(--c-muted); flex: 0 0 auto; }
  .data-table.stack-mobile td.empty { justify-content: center; }
  .data-table.stack-mobile td.empty::before { content: ""; }
  .data-table { font-size: .85rem; white-space: nowrap; }   /* keep cells legible; card scrolls */
  .data-table th, .data-table td { padding: .5rem .55rem; }
  .form-control, .search-bar input[type="search"] { font-size: 16px; min-height: 44px; }  /* 16px avoids iOS zoom; 44px touch target */
  .btn, .search-bar button { min-height: 44px; }
  .case-head { gap: .4rem; }
  .page-title { font-size: 1.2rem; }
  .toolbar { flex-wrap: wrap; }
  .isbt-label__grid-cols { grid-template-columns: 1fr; }
  .isbt-label__din-val { font-size: 1.3rem; }
  .card__title .btn--sm { float: none; display: inline-block; margin-top: .4rem; }
  /* SB-N2 A4/A5/B7 — comfortable mobile touch targets (WCAG 2.5.5). Desktop sizing unchanged. */
  .btn--sm { min-height: 44px; padding-block: .5rem; }          /* A4 (belt-and-suspenders over .btn) */
  .form-check { width: 24px; height: 24px; }                    /* A5 — was 18px, easier to tap */
  .smap-cell { min-width: 30px; }                               /* B7 — was 24px; box grid scrolls in its card */
}

/* ============================================================
   v1.11.0 — Sidebar shell + dashboard
   ============================================================ */
.shell{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.sidebar{background:var(--c-navy-900);color:var(--c-navy-100);display:flex;flex-direction:column;padding:14px 12px;position:sticky;top:0;height:100vh}
.sidebar__brand{display:flex;align-items:center;gap:10px;padding:4px 6px 14px;border-bottom:1px solid var(--c-navy-700);margin-bottom:12px}
.sidebar__logo{width:34px;height:34px;border-radius:var(--radius-sm);background:linear-gradient(135deg,var(--c-down),var(--c-down-dark));display:flex;align-items:center;justify-content:center;font-size:18px;text-decoration:none}
.sidebar__name{font-weight:700;font-size:14px;color:#fff;text-decoration:none;display:block;line-height:1.2}
.sidebar__ver{font-size:10px;color:#b3cdec}/* SB-N2 B1 — lightened from --c-navy-300 (#7da3cc) for AA on the navy sidebar */
.sidebar__new{display:block;text-align:center;background:var(--c-accent);color:#fff;font-weight:700;border-radius:var(--radius-sm);padding:11px;text-decoration:none;margin-bottom:14px}
.sidebar__new:hover{filter:brightness(1.08)}
/* QA#101 — the nav scrolls INTERNALLY (min-height:0 lets the flex child shrink below its content;
   overflow-y:auto keeps the list inside the 100vh column) so the last item (⚙️ הגדרות) is never
   clipped by the viewport nor covered by the fixed .sidebar__me block, even with a case pinned
   (more items). padding-bottom keeps that last item off the scroll edge. */
.sidebar__nav{display:flex;flex-direction:column;gap:3px;flex:1;min-height:0;overflow-y:auto;padding-bottom:6px}

/* QA#110 — the case-number is the single deep-link on cleaned-up list/worklist screens; make it
   unmistakably a link (weight + underline + pointer) now that the actions column is gone. */
.link-strong{font-weight:600;text-decoration:underline;cursor:pointer}
.data-table td .link-strong:hover{text-decoration:none}

/* QA#108 — system-wide storage occupancy dashboard */
.occ-full{background:#c0392b;color:#fff}
.occ-high{background:#e67e22;color:#fff}
.occ-mid{background:#e0a800;color:#3a2f00}
.occ-low{background:#1e7e34;color:#fff}
.occ-total{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.occ-total__kpi{font-size:2.2rem;font-weight:800;border-radius:var(--radius);padding:10px 18px;min-width:110px;text-align:center}
.occ-total__meta{font-size:.95rem;line-height:1.5}
/* OCC-STATUS-LABELS (Option B) — minimal inline status labels: small square dot + short word, each on
   ONE line (no mid-item wrap); the row still wraps cleanly between items on very narrow screens. ~11.5px. */
.occ-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:11.5px;color:var(--c-text-muted,#6b7280);margin-top:10px}
.occ-legend>span{display:inline-flex;align-items:center;white-space:nowrap}
.occ-dot{display:inline-block;width:9px;height:9px;border-radius:2px;vertical-align:middle;margin-inline-end:3px}
.occ-bar{display:inline-block;width:120px;max-width:32vw;height:12px;border-radius:6px;background:#e9edf2;overflow:hidden;vertical-align:middle;margin-inline:8px}
.occ-bar__fill{display:block;height:100%;border-radius:6px}
.occ-num{font-size:12.5px;color:var(--c-text-muted,#6b7280);white-space:nowrap}
.occ-node{margin:6px 0}
.occ-summary{cursor:pointer;display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:6px 4px;font-size:14px}
.occ-summary__lbl{font-weight:600;min-width:130px}
.occ-body{padding-inline-start:16px;border-inline-start:2px solid var(--c-border);margin-inline-start:6px}
.occ-node--2 .occ-summary__lbl{min-width:120px}.occ-node--3 .occ-summary__lbl,.occ-node--4 .occ-summary__lbl{min-width:110px;font-weight:500}
.occ-boxes{display:flex;flex-wrap:wrap;gap:8px;padding:8px 4px}
.occ-box{width:74px;border-radius:8px;padding:6px 4px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.occ-box__no{font-size:11px;font-weight:600;opacity:.9}
.occ-box__pct{font-size:16px;font-weight:800;line-height:1.1}
.occ-box__meta{font-size:10.5px;opacity:.85}
@media (max-width:600px){.occ-summary__lbl{min-width:0}.occ-body{padding-inline-start:8px}.occ-box{width:64px}}

/* QA#115 — system occupancy visual heatmap (whole physical structure at a glance) */
.occ-mfz{margin:10px 0 4px}
.occ-mfz__hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-weight:700;font-size:15px;margin-bottom:4px}
.occ-mtank{margin:4px 0 10px;padding-inline-start:8px;border-inline-start:2px solid var(--c-border)}
.occ-mtank__hd{font-weight:600;font-size:13px;margin:6px 0 4px;display:flex;align-items:center;gap:8px}
.occ-mgrid{display:flex;flex-wrap:wrap;gap:5px}
.occ-mcell{width:52px;min-height:40px;border-radius:6px;padding:3px 2px;text-decoration:none;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 1px 2px rgba(0,0,0,.14);transition:transform .08s ease,box-shadow .08s ease}
.occ-mcell:hover{transform:translateY(-1px) scale(1.05);box-shadow:0 3px 8px rgba(0,0,0,.28)}
.occ-mcell__pct{font-size:13px;font-weight:800;line-height:1.05}
.occ-mcell__loc{font-size:9.5px;opacity:.85;line-height:1.1}
.occ-flash{outline:3px solid var(--c-primary,#2563eb);outline-offset:2px;border-radius:8px}
@media (max-width:600px){.occ-mcell{width:44px;min-height:36px}.occ-mcell__pct{font-size:13px}}/* SB-N2 C1 — heatmap % more legible on phones */

/* QA#119 — position-level grid: expand a box in the tree to see its individual slots (empty/full) */
.occ-boxwrap{display:inline-block;vertical-align:top}
.occ-boxwrap > summary.occ-box{list-style:none;cursor:pointer;width:74px}
.occ-boxwrap > summary.occ-box::-webkit-details-marker{display:none}
.occ-boxwrap[open] > summary.occ-box{outline:2px solid var(--c-primary,#2563eb);outline-offset:1px}
.occ-posgrid{display:grid;gap:2px;justify-content:start;margin:6px 2px 2px;max-width:320px}
.occ-poscell{width:14px;height:14px;border-radius:3px;border:1px solid var(--c-border,#cbd5e1);display:inline-block;vertical-align:middle}
.occ-poscell--empty{background:#eaf5ea;border-color:#bfe0bf}   /* QA#123 — green = פנוי, matches the item box-map */
.occ-poscell--full{background:#2340a0;border-color:#1b3080}    /* blue = תפוס, matches the item box-map */
.occ-posgrid__cap{font-size:11px;color:var(--c-text-muted,#6b7280);margin:2px}
/* CD#10 — coordinate-labelled box grid (col letters + row numbers). LTR so A1 = top-left.
   Keeps the QA#123 colours: green = פנוי (free), blue = תפוס (occupied). */
.occ-grid{border-collapse:collapse;direction:ltr;margin:6px 2px}
.occ-grid th{font-size:10px;color:#374151;background:#eef2f7;font-weight:700;min-width:20px;height:18px;text-align:center;border:1px solid #dbe2ec;padding:0 2px}
.occ-grid__corner{background:var(--c-navy,#1f3a5f);min-width:20px}
.occ-gcell{width:24px;height:24px;text-align:center;border:1px solid #e5e9f0;vertical-align:middle;padding:0}
.occ-gcell--empty{background:#eaf5ea;border-color:#bfe0bf}
.occ-gcell--full{background:#2340a0;border-color:#1b3080}
.occ-gcell__coord{font-size:8.5px;line-height:1;display:block;color:#9aa6b8}
.occ-gcell--full .occ-gcell__coord{color:#dbe4ff}
@media (max-width:600px){.occ-gcell{width:20px;height:20px}.occ-grid th{min-width:16px}}
/* QA#123 — the position grids surfaced prominently (a box per card, no deep drilling) */
.occ-posmap{display:flex;flex-wrap:wrap;gap:14px}
.occ-posbox{border:1px solid var(--c-border);border-radius:var(--radius-sm);padding:8px 10px;background:var(--c-surface,#fff)}
.occ-posbox__hd{font-size:12.5px;font-weight:600;margin-bottom:4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* #109 sub-D — storage visual capacity map (click-to-place occupancy grid) */
.storage-map{display:grid;gap:4px;justify-content:start;margin:8px 0}
/* CD#10 — coordinate headers on the single-item box-map: LTR grid so A1 = top-left. */
.storage-map--labelled{direction:ltr}
.smap-hd{display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#374151;background:#eef2f7;border:1px solid #dbe2ec;border-radius:4px;min-width:18px}
.smap-corner{background:var(--c-navy,#1f3a5f)}
.smap-cell{aspect-ratio:1;min-width:24px;border-radius:6px;border:1px solid var(--c-border);font-size:11px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.smap-cell:disabled{cursor:not-allowed}
.smap-free{background:#eaf5ea;border-color:#bfe0bf;color:#789}
.smap-free:hover{background:#d6ecd6;box-shadow:0 0 0 2px #bfe0bf}
.smap-occ{background:#2340a0;border-color:#1b3080;color:#fff}
.smap-self{background:var(--c-accent,#b8860b);border-color:#8a6508;color:#fff;box-shadow:0 0 0 2px rgba(184,134,11,.35)}
/* QA#120 — a REMOVED item's last-known position: hatched gray so it reads as "was here, now gone",
   never a silent blank. */
.smap-removed{color:#fff;border-color:#6b7280;background:repeating-linear-gradient(45deg,#9aa1ab,#9aa1ab 4px,#7b828d 4px,#7b828d 8px)}
.storage-map-legend{font-size:12px;color:var(--c-text-muted,#6b7280);display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.smap-dot{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-1px;margin-inline-end:4px}
.storage-map-legend .smap-free{border:1px solid #bfe0bf}
.sidebar__item{display:flex;align-items:center;gap:11px;padding:10px 12px;color:var(--c-navy-100);text-decoration:none;border-radius:var(--radius-sm);font-size:14px}
.sidebar__item .ic{width:20px;text-align:center}
.sidebar__item:hover{background:var(--c-navy-500);color:#fff}
.sidebar__item.is-active{background:var(--c-navy-600);color:#fff;font-weight:600}
.sidebar__badge{margin-inline-start:auto;background:var(--c-down);color:#fff;font-size:11px;border-radius:var(--radius);padding:1px 7px;font-weight:700}
.sidebar__sep{height:1px;background:var(--c-navy-700);margin:8px 4px}
.sidebar__me{display:flex;align-items:center;gap:9px;padding:10px 6px 4px;border-top:1px solid var(--c-navy-700);margin-top:8px;font-size:12.5px}
.sidebar__av{width:30px;height:30px;border-radius:50%;background:var(--c-primary);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
.sidebar__menm{color:#fff;font-size:13px}
.sidebar__logout{background:none;border:none;color:#b3cdec;cursor:pointer;text-decoration:underline;padding:0;font:inherit}/* SB-N2 B2 — lightened for AA on navy */
.shell__main{display:flex;flex-direction:column;min-width:0}
/* QA#113 — keep the active-case banner (+ its ✕ unpin) always visible: sticky topbar,
   so the case context and unpin action are reachable without scrolling back to the top. */
.topbar{display:flex;align-items:center;gap:14px;padding:10px 20px;background:#fff;border-bottom:1px solid var(--c-border);flex-wrap:wrap;position:sticky;top:0;z-index:5}
.topbar__back{background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--radius-sm);padding:7px 13px;cursor:pointer;font-size:13px;color:var(--c-text)}
.topbar__back:hover{background:var(--c-surface-alt)}
.topbar__search{flex:1 1 240px;max-width:400px;display:flex;align-items:center;gap:8px;background:var(--c-surface-alt);border:1px solid var(--c-border);border-radius:var(--radius-sm);padding:7px 12px}
.topbar__search input{border:none;background:none;outline:none;flex:1;font-size:14px}
.topbar__search-btn{border:0;background:none;cursor:pointer;font-size:15px;padding:0 2px;color:inherit;line-height:1}   /* QA#15 — clickable search submit */
.topbar__search-btn:hover{opacity:.7}
/* #72 — active-case picker chip sits on the same row as the search */
.topbar__case{display:flex;align-items:center;gap:8px;font-size:13px;padding:5px 12px;
  background:var(--c-info-bg);border:1px solid var(--c-border);border-radius:var(--radius-pill)}
.topbar__case--empty{color:var(--c-muted);background:var(--c-surface-alt);font-style:italic}
.topbar__db{font-size:12px;margin-inline-start:auto;color:var(--c-muted)}
.db-status--ok{color:var(--c-ok-text)} .db-status--down{color:var(--c-down)}

/* #51 — pinned active-case banner + case-scoped sidebar items */
.casebanner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 20px;
  background:var(--c-info-bg);border-bottom:1px solid var(--c-border);font-size:13px}
.casebanner__pin{font-size:15px}
.casebanner__lbl{color:var(--c-muted)}
.casebanner__num{font-weight:800;color:var(--c-primary);text-decoration:none}
.casebanner__name{font-weight:600}
.casebanner__clear{margin-inline-start:auto;color:var(--c-down);text-decoration:none;
  border:1px solid var(--c-border);border-radius:var(--radius-pill);padding:2px 11px;background:var(--c-surface)}
.casebanner__clear:hover{background:var(--c-down-bg)}
.topbar__case .casebanner__clear{margin-inline-start:2px;padding:1px 8px}   /* #72 — no auto-push inside the chip */
.sidebar__item--scoped{border-inline-start:3px solid var(--c-accent)}

/* #60 — settings tabs */
.settings-tabs{display:flex;gap:2px;flex-wrap:wrap;border-bottom:2px solid var(--c-border);margin-bottom:16px}
.settings-tabs .tab{background:none;border:0;border-bottom:3px solid transparent;padding:9px 15px;
  cursor:pointer;font-size:14px;font-family:inherit;color:var(--c-muted);font-weight:600;margin-bottom:-2px}
.settings-tabs .tab:hover{color:var(--c-text)}
.settings-tabs .tab.is-active{color:var(--c-primary);border-bottom-color:var(--c-primary)}
.tabpanel{display:none}
.tabpanel.is-active{display:block}
/* #59 — per-stage required-fields groups */
.reqstage{border:1px solid var(--c-border);border-radius:var(--radius-sm);padding:6px 14px 10px;margin-bottom:12px}
.reqstage>legend{font-weight:700;font-size:.9rem;color:var(--c-primary-dark);padding:0 6px}
/* #32/#75 — code-table editor: one consistent flex grid; each row is its own
   <form>. #75 polish: compact rows, sticky header, internal scroll (less page
   scroll), zebra striping, and uniform fixed-width action buttons. */
.form-control--sm{padding:3px 6px;font-size:13px;height:auto}
.code-grid{display:flex;flex-direction:column;border:1px solid var(--c-border);border-radius:var(--radius-sm);
  max-height:62vh;overflow:auto}
.code-row{display:flex;align-items:center;gap:8px;padding:3px 10px;border-bottom:1px solid var(--c-border);margin:0}
.code-row:last-child{border-bottom:0}
.code-row:nth-of-type(even):not(.code-row--head):not(.code-row--add){background:var(--c-surface-alt)}
.code-row--head{background:var(--c-navy-050,#f2f5fa);font-weight:700;font-size:.82rem;color:var(--c-primary-dark);
  position:sticky;top:0;z-index:2;box-shadow:0 1px 0 var(--c-border)}
.code-row--off{opacity:.5}
.code-row--add{background:#fbfaf5;position:sticky;bottom:0;z-index:1;border-top:2px solid var(--c-border)}
.code-cell{flex:1 1 0;min-width:0;text-align:center}
.code-cell--code{flex:0 0 130px;text-align:start}
.code-cell--name{flex:2 1 0;text-align:start}
.code-cell--active{flex:0 0 44px}
.code-cell--act{flex:0 0 92px;display:flex;gap:4px;justify-content:flex-end}
.code-cell--act--wide{flex:0 0 150px}   /* #76 — room for ↑/↓ reorder buttons */
.code-cell .form-control{width:100%}
.code-cell--act .btn{padding:2px 7px;min-width:30px;text-align:center}
.app-main{padding:22px;flex:1}

/* KPIs */
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin-bottom:20px}
.kpi{background:#fff;border:1px solid var(--c-border);border-radius:var(--radius);padding:16px;box-shadow:0 1px 3px rgba(0,0,0,.05);text-decoration:none;color:var(--c-text)}
.kpi__n{font-size:30px;font-weight:800;line-height:1}
.kpi__l{color:var(--c-muted);font-size:13px;margin-top:6px}
.kpi--amber{border-top:4px solid var(--c-accent)} .kpi--amber .kpi__n{color:var(--c-accent-dark)}
.kpi--blue{border-top:4px solid var(--c-primary)} .kpi--blue .kpi__n{color:var(--c-primary)}
.kpi--green{border-top:4px solid var(--c-ok)} .kpi--green .kpi__n{color:var(--c-ok)}
.kpi--gray{border-top:4px solid #9aa0a6} .kpi--gray .kpi__n{color:var(--c-muted)}
.kpi--ice{border-top:4px solid #2340a0} .kpi--ice .kpi__n{color:#2340a0}   /* QA#122 — storage occupancy */
a.kpi:hover{box-shadow:0 3px 10px rgba(0,0,0,.1)}

/* Tags */
.tag{font-size:11px;font-weight:700;padding:2px 9px;border-radius:20px}
.tag--allo{background:var(--c-info-bg);color:var(--c-info)} .tag--auto{background:var(--c-ok-bg);color:var(--c-ok-text)}

/* #36 — process-stage badge + worklist filter bar. Stages are a CATEGORICAL scale;
   where a category matches a status role it reuses that token (collect=danger,
   process=info, transplant=ok); pre/storage keep distinct category hues. */
.stage-badge{font-size:11px;font-weight:700;padding:2px 9px;border-radius:20px;white-space:nowrap;
  background:var(--c-surface-alt);color:var(--c-muted)}
.stage-badge--intake{background:#f1f3f4;color:var(--c-muted)}
.stage-badge--pre{background:#fff4e5;color:#6d3f00}/* SB-N2 a11y — darkened from #a15c00 for WCAG-AA contrast on the light-cream badge */
.stage-badge--collect{background:var(--c-down-bg);color:var(--c-down-text)}
.stage-badge--process{background:var(--c-info-bg);color:var(--c-info)}
.stage-badge--storage{background:#ede7f6;color:#5e35b1}
.stage-badge--transplant{background:var(--c-ok-bg);color:var(--c-ok-text)}
.worklist-filter{margin-bottom:12px;flex-wrap:wrap;align-items:center;gap:8px}
.btn--ghost{background:transparent;border:1px solid var(--c-navy-300);color:var(--c-text)}/* QA#59 — readable at rest (was --c-muted, below WCAG on transparent bg) */

/* Kanban */
.kanban{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px}
.kcol{min-width:200px;flex:1;background:var(--c-surface-alt);border-radius:var(--radius);padding:8px}
.kcol h3{font-size:13px;margin:4px 6px 10px;display:flex;justify-content:space-between;align-items:center}
.kcol__c{background:var(--c-navy-900);color:#fff;border-radius:var(--radius);padding:0 8px;font-size:11px}
.kcol__empty{color:var(--c-muted);text-align:center;padding:10px;font-size:13px}
.kcard{display:block;background:#fff;border:1px solid var(--c-border);border-radius:var(--radius-sm);padding:10px;margin-bottom:8px;box-shadow:0 1px 2px rgba(0,0,0,.06);text-decoration:none;color:var(--c-text);font-size:13px}
.kcard:hover{border-color:var(--c-primary)}
.kcard b{display:block;margin-bottom:4px}
.kcard__st{color:var(--c-muted);font-size:11px;margin-top:5px}

/* Responsive: collapse sidebar on small screens */
@media (max-width:820px){
  .shell{grid-template-columns:1fr}
  .sidebar{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center}
  .sidebar__nav{flex-direction:row;flex-wrap:wrap;flex-basis:100%}
  .sidebar__me{flex-basis:100%}
}

/* ============================================================
   v1.11.0 — Collapsible verifications box (#12, combo A+C)
   ============================================================ */
.verify-box{padding:0;overflow:hidden}
.verify-box>summary{list-style:none;cursor:pointer;padding:.9rem 1.25rem;display:flex;
  align-items:center;justify-content:space-between;gap:12px;font-weight:700;color:var(--c-primary-dark)}
.verify-box>summary::-webkit-details-marker{display:none}
.verify-box>summary::after{content:"▾";color:var(--c-muted);transition:transform .15s}
.verify-box[open]>summary::after{transform:rotate(180deg)}
.verify-box>summary:hover{background:var(--c-hover)}
.verify-progress{display:flex;align-items:center;gap:10px;font-size:.85rem;color:var(--c-muted);font-weight:400}
.verify-bar{display:inline-block;width:120px;height:8px;border-radius:var(--radius-sm);background:#e4e9ef;overflow:hidden}
.verify-bar>span{display:block;height:100%;background:var(--c-ok)}
.verify-pending-pill{background:var(--c-down-bg);color:var(--c-down-text);font-weight:700;border-radius:20px;padding:1px 9px;font-size:.78rem}
.verify-body{padding:.5rem 1.25rem 1.1rem;border-top:1px solid var(--c-border)}
.verify-hint{color:var(--c-muted);font-size:.85rem;margin:.5rem 0}
.verify-allok{color:var(--c-ok-text);font-weight:600;padding:.5rem 0}
.verif-toggle{display:none}
.verif-toggle-lbl{display:inline-block;margin-top:.75rem;color:var(--c-primary);cursor:pointer;font-size:.9rem;text-decoration:underline}
.verif-verified-list{display:none;margin-top:.5rem}
.verif-toggle:checked ~ .verif-verified-list{display:block}
.verif-toggle:checked ~ .verif-toggle-lbl{opacity:.7}
.verify-missing{background:var(--c-warn-bg);border:1px solid var(--c-warn-border);color:var(--c-warn-text);font-size:.85rem;border-radius:var(--radius-sm);padding:7px 11px;margin:.4rem 0}
/* QA#165 — informational "why you can't sign" note (subtle, not an error/warning) */
.verify-missing--info{background:var(--c-hover);border-color:var(--c-border);color:var(--c-muted)}

/* v1.11.0 — sidebar "new case" accordion */
.sidebar__newwrap{margin-bottom:14px}
.sidebar__new{width:100%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--c-accent);color:#fff;font-weight:700;border-radius:var(--radius-sm);padding:11px;font-size:14px;margin-bottom:6px;font-family:inherit}
.sidebar__new:hover{filter:brightness(1.08)}
.sidebar__chev{transition:transform .2s ease;font-size:12px}
.sidebar__new[aria-expanded="true"] .sidebar__chev{transform:rotate(180deg)}
.sidebar__newsub{max-height:0;overflow:hidden;transition:max-height .2s ease;display:flex;flex-direction:column;gap:3px}
.sidebar__newsub.open{max-height:120px}
.sidebar__subitem{display:flex;align-items:center;gap:9px;padding:9px 12px 9px 22px;border-radius:var(--radius-sm);
  color:var(--c-navy-100);text-decoration:none;font-size:13.5px}
.sidebar__subitem:hover{background:var(--c-navy-500);color:#fff}
.alert--warn{background:var(--c-warn-bg);border:1px solid var(--c-warn-border);color:var(--c-warn-text)}

/* v1.11.0 — #14 contextual inline verification widget */
.verify-inline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding:9px 11px;
  background:var(--c-hover);border:1px solid var(--c-border);border-radius:var(--radius-sm);font-size:.85rem}
.verify-inline__lbl{font-weight:600}
.verify-inline__sig{color:var(--c-muted)}
.verify-inline__warn{color:var(--c-warn-text);background:var(--c-warn-bg);border-radius:var(--radius-sm);padding:2px 8px}
/* QA#99c — microbiology culture signature block styled like verify_inline (cosmetic): two signature
   rows (בודק/מאשר) each = a role label + its employee picker, sharing the verify_inline card look. */
.verify-inline--micro{align-items:center}
.verify-inline__row{display:flex;align-items:center;gap:6px}
.verify-inline__row .form-control--sm{min-width:150px;padding:4px 8px;font-size:.85rem}

/* #6 — auto-save indicator */
.autosave-status{font-size:.85rem;color:var(--c-muted);margin-inline-end:auto}
.autosave-status.is-saving{color:var(--c-accent-dark)}
.autosave-status.is-saved{color:var(--c-ok-text)}
.autosave-status.is-error{color:var(--c-down);font-weight:700}
.sidebar__grouplabel{font-size:10.5px;color:var(--c-navy-300);text-transform:uppercase;letter-spacing:.5px;padding:10px 12px 4px;font-weight:700}
/* CD#11l — collapsible nav groups: the header is a full-width button; the chevron flips
   and the body collapses when aria-expanded="false". */
.sidebar__grouptoggle{width:100%;display:flex;align-items:center;justify-content:space-between;
  background:none;border:none;cursor:pointer;text-align:right;padding:0;color:inherit;font:inherit}
.sidebar__grouptoggle .sidebar__grouplabel{padding-inline-end:12px}
.sidebar__grouptoggle .sidebar__chev{transition:transform .2s ease;font-size:11px;color:var(--c-navy-300);padding:10px 12px 4px 12px}
.sidebar__grouptoggle[aria-expanded="false"] .sidebar__chev{transform:rotate(-90deg)}
.sidebar__grouptoggle:hover .sidebar__grouplabel,.sidebar__grouptoggle:hover .sidebar__chev{color:#fff}
.sidebar__groupbody{overflow:hidden;transition:max-height .22s ease;max-height:1200px}
.sidebar__groupbody.collapsed{max-height:0}
/* QA#136 — ⚙️ הגדרות always-visible block (outside the collapsible groups); subtle top divider. */
.sidebar__settings{border-top:1px solid rgba(255,255,255,.08);margin-top:4px;padding-top:4px}
/* SET-5 — session login date+time under the user name in the sidebar footer. */
.sidebar__loginat{font-size:11px;color:var(--c-navy-300,#9fb6d6);margin:1px 0 2px}

/* Stage 4b — inline auto-saving child rows (DLI units, bag timings) */
.row-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
  padding: 10px 12px; border: 1px solid var(--c-border); border-radius: var(--radius);
  margin-bottom: 8px; background: var(--c-surface); }
.row-form__id { align-self: center; color: var(--c-muted); font-size: .85em; min-width: 42px; }
.row-form .form-field { margin: 0; }
/* QA#141 — a notes/comment field in an inline row spans the FULL row width (wraps to its own line)
   so there is room to write, instead of being squeezed into a narrow track next to the time fields. */
.row-form .form-field--full { flex: 1 1 100%; }

/* Double-clickable worklist rows open the case (view) */
tr[data-href] { cursor: pointer; }
/* CD#11n — uniform clickable affordance: every element that OPENS a screen/action
   (clickable rows + clickable cards) shares the same hover accent and keyboard
   focus ring, so "this is clickable" always looks and behaves the same. Subtle,
   in line with the clean-UI rule — the accent only appears on hover/focus. */
tr[data-href]:hover { background: rgba(29, 78, 137, .07); box-shadow: inset 3px 0 0 var(--c-primary); }
tr[data-href]:focus-visible,
.card--clickable:focus-visible { outline: 2px solid var(--c-primary); outline-offset: -2px; }

/* #103 pilot — searchable, list-locked combobox (product_code). Progressive
   enhancement: .combobox__native is the real <select> (hidden but submitted);
   the input + list sit on top. No-wrap options also address QA#53 (long codes). */
.combobox { position: relative; }
.combobox__native { display: none; }
.combobox__list {
  position: absolute; z-index: 60; inset-inline: 0; top: 100%;
  margin: 3px 0 0; padding: 4px 0; list-style: none; max-height: 260px; overflow: auto;
  background: var(--c-surface); border: 1px solid var(--c-navy-300, #b9c4d2);
  border-radius: var(--radius); box-shadow: 0 6px 18px rgba(20, 35, 58, .14);
}
.combobox__opt { padding: 6px 12px; cursor: pointer; white-space: nowrap; }
.combobox__opt:hover, .combobox__opt.is-active { background: var(--c-surface-alt); }
.combobox__opt[aria-selected="true"] { font-weight: 600; }