/* base.css — typography, global layout, minimal functional styling */

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--text);
  background: var(--surface);
  overscroll-behavior-y: contain;
}

h1 { font-size: var(--fs-xl); font-weight: 700; }
h2 { font-size: var(--fs-lg); font-weight: 700; }
h3 { font-size: var(--fs-base); font-weight: 600; }
small, .muted { color: var(--text-muted); font-size: var(--fs-sm); }
/* Inline code (e.g. the cron curl command in Settings): long unbroken strings
   must wrap instead of forcing horizontal page scroll on phones. */
code {
  font-size: var(--fs-sm);
  background: var(--surface-2);
  padding: 0 var(--sp-1);
  border-radius: var(--radius-sm);
  overflow-wrap: anywhere;
  word-break: break-all;
}

/* App shell ---------------------------------------------------------------*/
#app {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--header-h);
  padding: var(--sp-2) var(--sp-4);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.app-header .title { flex: 1; min-width: 0; }
.app-header .title h1 { font-size: var(--fs-lg); line-height: 1.1; }
.app-header .title .sub { font-size: var(--fs-sm); color: var(--text-muted); }

.app-main {
  flex: 1;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--sp-4);
  padding-bottom: calc(var(--tabbar-h) + var(--sp-8));
}

/* Bottom tab bar (mobile) -------------------------------------------------*/
.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-tabbar);
  display: flex;
  height: var(--tabbar-h);
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
  /* 10 tabs never fit a phone: scroll horizontally instead of pushing the
     rightmost tabs (Documente, Setări) off-screen. */
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.tabbar::-webkit-scrollbar { display: none; }
.tabbar button {
  position: relative;
  flex: 1 0 auto;
  min-width: 64px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  min-height: var(--touch-min);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  white-space: nowrap;
}
.tabbar button .ico { font-size: 20px; line-height: 1; }
.tabbar button.active { color: var(--brand); font-weight: 600; }
.tabbar button .lock { position: absolute; top: var(--sp-1); right: var(--sp-2); font-size: var(--fs-sm); opacity: .65; }

/* Generic interactive elements -------------------------------------------*/
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--touch-min);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font-weight: 600;
  font-size: var(--fs-sm);
}
/* Primary block actions (full-width CTAs like "Salvează") stay a touch taller. */
.btn-block { min-height: var(--touch-primary); font-size: var(--fs-base); }
.btn-primary { background: var(--brand); color: var(--on-color); }
.btn-primary:active { background: var(--brand-dark); }
.btn-ok { background: var(--ok); color: var(--on-color); }
.btn-danger { background: var(--error); color: var(--on-color); }
.btn-block { width: 100%; }
.btn-ghost { background: transparent; }
/* Toggled state for buttons that act as filters/toggles (e.g. "Filtre" on Calendar). */
.btn.active { background: var(--brand-light); border-color: var(--brand); color: var(--brand-dark); }
.btn:disabled { opacity: 0.5; pointer-events: none; }
/* aria-disabled keeps hover (so explanatory tooltips still show); the click
   handler guards the action itself. */
.btn[aria-disabled="true"] { opacity: 0.5; cursor: default; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-min);
  height: var(--touch-min);
  border-radius: var(--radius-full);
  font-size: 16px;
}

.input, input[type="text"], input[type="number"], input[type="search"], input[type="date"],
input[type="time"], input[type="url"], input[type="email"], input[type="tel"], input[type="password"],
textarea, select {
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-size: var(--fs-base);
}
textarea { min-height: 80px; resize: vertical; }
/* .field works on <label> AND on <div> wrappers (e.g. the write-only key rows
   in Settings) — the caption/margin styling is the same either way. */
.field { display: block; margin-bottom: var(--sp-3); }
.field > span { display: block; margin-bottom: var(--sp-1); font-size: var(--fs-sm); color: var(--text-muted); }
/* Fields paired on one flex row must be allowed to shrink below their
   content width (default min-width:auto overflowed 360px screens). */
.flex > .field { min-width: 0; }
/* Helper text glued under the field above it (replaces ad-hoc negative margins). */
.field-hint { font-size: var(--fs-sm); color: var(--text-muted); margin: calc(-1 * var(--sp-1)) 0 var(--sp-2); }
/* Soft section separator inside cards. */
.hr-soft { border: none; border-top: 1px solid var(--border); margin: var(--sp-2) 0 var(--sp-3); }

/* Inline checkbox label (checkbox + text on one row) */
label.check { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; }
label.check input[type="checkbox"] { width: 18px; height: 18px; flex: none; }
/* Block variant: one toggle per row with a full-width touch target
   (settings toggles, option lists in editors). */
label.check.check-row { display: flex; min-height: var(--touch-min); }

/* Cards & lists -----------------------------------------------------------*/
.card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
  box-shadow: var(--shadow-sm);
}
.list { display: flex; flex-direction: column; gap: var(--sp-2); }
/* Auto-fill card grid: 1 column on a phone, as many as fit on tablet/desktop.
 * Defined after .list so `class="list grid-cards"` resolves to display:grid. */
.grid-cards {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  align-items: start;
}
.grid-cards > .empty { grid-column: 1 / -1; }
.row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.row .grow { flex: 1; min-width: 0; }

/* Chips -------------------------------------------------------------------*/
.chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: var(--touch-min);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--bg);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.chip.active { background: var(--brand); color: var(--on-color); border-color: var(--brand); }

/* Progress ring -----------------------------------------------------------*/
.ring { display: inline-grid; place-items: center; position: relative; }
.ring svg { transform: rotate(-90deg); }
.ring .ring-label {
  position: absolute;
  font-weight: 700;
  font-size: var(--fs-base);
}
.bar { height: 8px; border-radius: var(--radius-full); background: var(--surface-2); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--accent); border-radius: inherit; transition: width .2s; }

/* Status badges -----------------------------------------------------------*/
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.badge.s-pending { background: var(--info-light); color: var(--info); }
.badge.s-done { background: var(--ok-light); color: var(--ok-text); }
.badge.s-alert { background: var(--error-light); color: var(--error-text); }
.badge.s-missed { background: var(--warn-light); color: var(--warn-text); }
.badge.s-await { background: var(--ok-light); color: var(--ok-text); }

/* Toast -------------------------------------------------------------------*/
.toast {
  position: fixed;
  left: 50%;
  top: calc(var(--header-h) + var(--sp-3));
  transform: translateX(-50%);
  z-index: var(--z-toast);
  background: var(--text);
  color: var(--on-color);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-sm);
}

/* Bottom sheet ------------------------------------------------------------*/
.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-sheet);
  background: var(--overlay);
  display: flex;
  align-items: flex-end;
}
.sheet {
  width: 100%;
  max-height: 90dvh;
  overflow-y: auto;
  background: var(--bg);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: var(--sp-4);
  padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom));
  box-shadow: var(--shadow-lg);
}
.sheet-handle { width: var(--sp-10); height: var(--sp-1); border-radius: var(--radius-full); background: var(--border); margin: 0 auto var(--sp-4); }

/* Numeric pad -------------------------------------------------------------*/
.numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin: var(--sp-4) 0; }
.numpad button {
  min-height: var(--touch-lg);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: var(--fs-xl);
  font-weight: 600;
}
.numpad button:active { background: var(--surface-2); }

/* PIN entry modal -------------------------------------------------------*/
.pin-sheet { max-width: 360px; }
.pin-dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  font-size: 22px;
  line-height: 1;
  color: var(--brand);
  min-height: 26px;
}
.pin-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
  margin: var(--sp-4) 0 var(--sp-2);
}
.pin-pad button {
  min-height: var(--touch-lg);
  border-radius: var(--radius);
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: var(--fs-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: background-color .1s ease, transform .06s ease;
}
.pin-pad button:active { background: var(--surface-2); transform: scale(.95); }
.pin-pad .pin-del { color: var(--error); font-weight: 600; }
.pin-pad .pin-ok { background: var(--brand); color: var(--on-color); border-color: var(--brand); }
.pin-pad .pin-ok:disabled { opacity: .5; }

.temp-display {
  text-align: center;
  font-size: var(--fs-value);
  font-weight: 800;
  padding: var(--sp-5);
  border-radius: var(--radius);
  background: var(--surface);
}
.temp-display.ok { background: var(--ok-light); color: var(--ok); }
.temp-display.bad { background: var(--error-light); color: var(--error); }

/* Inline SVG icons (monochrome, inherit color via currentColor) ------------*/
.icn {
  width: 1.15em; height: 1.15em; flex: none;
  display: inline-block; vertical-align: -0.18em;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.tabbar button .icn { width: 24px; height: 24px; vertical-align: middle; }
.user-chip .icn { width: 17px; height: 17px; }
/* Long operator names must not crush the location title or wrap inside the chip
   (below 400px the name is hidden entirely — see responsive.css). */
.user-chip span:last-child { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loading .icn { width: 38px; height: 38px; stroke-width: 1.6; }
.empty .icn { width: 40px; height: 40px; stroke-width: 1.6; }
.lock-ico .icn { width: 44px; height: 44px; stroke-width: 1.6; }
.icon-btn .icn { width: 16px; height: 16px; }
.btn .icn { width: 14px; height: 14px; }
.badge .icn { width: 13px; height: 13px; vertical-align: -0.1em; }
/* Works both as a container class and directly on the svg (both appear in markup). */
.quick-card .icn, .icn.quick-card { width: 20px; height: 20px; vertical-align: -0.22em; }

/* Utility -----------------------------------------------------------------*/
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
/* Action-button clusters: always wrap + spaced so they never glue together or
   overflow their row (was previously only defined inside .data-table). */
.row-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.grow { flex: 1; }
.flex-wrap { flex-wrap: wrap; }
.mt-1 { margin-top: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mb-1 { margin-bottom: var(--sp-1); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.text-center { text-align: center; }
.hidden { display: none !important; }

.disclaimer {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  background: var(--warn-light);
  border: 1px solid var(--warn);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-4);
}
/* Status-colored disclaimers (used as inline success/error banners — e.g. AI/SMS
   test result, wrong-PIN). Without these they always rendered in the warn color. */
.disclaimer.s-done { background: var(--ok-light); border-color: var(--ok); color: var(--ok-text); }
.disclaimer.s-done::before { content: "✓ "; }
.disclaimer.s-alert { background: var(--error-light); border-color: var(--error); color: var(--error-text); }

.empty {
  text-align: center;
  color: var(--text-muted);
  padding: var(--sp-8) var(--sp-4);
}
.empty .ico { font-size: 40px; }
/* Compact variant for filter/search results and small panes. */
.empty.empty-compact { padding: var(--sp-3) var(--sp-2); }
/* Hide an element on phones (e.g. the text label of an icon button). */
@media (max-width: 559px) { .hide-mobile { display: none !important; } }

.breadcrumb { display: flex; gap: var(--sp-1); align-items: center; font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--sp-3); flex-wrap: wrap; }
.breadcrumb button { color: var(--brand-dark); font-weight: 600; }

.loading { text-align: center; padding: var(--sp-8); color: var(--text-muted); }

/* Lock screen (general access password) -----------------------------------*/
.lock-screen {
  position: fixed;
  inset: 0;
  z-index: var(--z-sheet);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  background: var(--surface);
}
.lock-box {
  width: 100%;
  max-width: 360px;
  text-align: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-8) var(--sp-6);
  box-shadow: var(--shadow-lg);
}
.lock-box .lock-ico { font-size: 44px; margin-bottom: var(--sp-2); }
/* Operator gate: the same lock chrome, with a scrollable operator list. */
.lock-box .op-gate-list { max-height: 46vh; overflow: auto; text-align: left; }
/* Lab logo on the lock/login screen (falls back to the lock glyph if no logo). */
.lock-box .lock-logo { width: 88px; height: 88px; margin: 0 auto var(--sp-3); border-radius: var(--radius-full); object-fit: cover; box-shadow: var(--shadow-sm); }
.lock-box h1 { font-size: var(--fs-xl); margin-bottom: var(--sp-1); }
.lock-box input { text-align: center; }