/* ==========================================================================
   Admin Portal — Custom CSS
   Brand palette: #009fe3 (blue) | #024993 (dark blue) | #e52322 (red) | #fff
   ========================================================================== */

:root {
  --color-primary:      #009fe3;
  --color-primary-dark: #024993;
  --color-primary-hover:#0087c2;
  --color-light:   #e8f4fc;
  --color-danger:          #e52322;
  --color-white:        #FFFFFF;
  --color-bg:           #f0f5fa;
  --color-text:         #1a2d4e;
  --color-muted:        #6C757D;
  --color-border:       #d0dce8;
  --color-danger:       #e52322;
  --color-warning:      #f59e0b;
  --sidebar-width:    260px;
  --topbar-height:     64px;
  --border-radius:       10px;
  --shadow:       0 2px 16px rgba(2,73,147,.08);
  --transition:   .2s ease;
}

/* --------------------------------------------------------------------------
   Global
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Inter', sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  margin: 0;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-dark); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.CustomButton {
  background: var(--color-primary-dark);
  color: #fff;
  border: 2px solid transparent;
  border-radius: var(--border-radius);
  padding: .52rem 1.3rem;
  font-weight: 600;
  font-size: .875rem;
  letter-spacing: .02em;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
.CustomButton:hover {
  background: var(--color-primary);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,159,227,.35);
}
.CustomButton:active { transform: translateY(0); }

.CustomButton:disabled,
.CustomButton[disabled] {
  background: var(--color-border);
  color: var(--color-muted);
  border-color: transparent;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  opacity: 1;
}
.CustomButton:disabled:hover,
.CustomButton[disabled]:hover {
  background: var(--color-border);
  color: var(--color-muted);
  transform: none;
  box-shadow: none;
}

.CustomButtonOutline {
  background: transparent;
  color: var(--color-primary-dark);
  border: 2px solid var(--color-primary-dark);
  border-radius: var(--border-radius);
  padding: .52rem 1.3rem;
  font-weight: 600;
  font-size: .875rem;
  transition: all var(--transition);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
.CustomButtonOutline:hover {
  background: var(--color-primary-dark);
  color: #fff;
}

.CustomButtonDanger {
  background: transparent;
  color: var(--color-danger);
  border: 2px solid var(--color-danger);
  border-radius: var(--border-radius);
  padding: .52rem 1.3rem;
  font-weight: 600;
  font-size: .875rem;
  transition: all var(--transition);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
.CustomButtonDanger:hover {
  background: var(--color-danger);
  color: #fff;
}

.CustomButtonSecondary {
  background: transparent;
  color: var(--color-muted);
  border: 2px solid var(--color-muted);
  border-radius: var(--border-radius);
  padding: .52rem 1.3rem;
  font-weight: 600;
  font-size: .875rem;
  transition: all var(--transition);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
.CustomButtonSecondary:hover {
  background: var(--color-muted);
  color: #fff;
}
/* --------------------------------------------------------------------------
   Form fields
   -------------------------------------------------------------------------- */
.FormField { margin-bottom: 1.25rem; position: relative; }

.FieldLabel {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--color-primary-dark);
  margin-bottom: .35rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* Required-field marker appended to a .FieldLabel (report-builder.js/report-panel-builder.js's
   dynamically-rendered param fields) - bigger and red so a required-but-empty field reads as
   an actual warning, not just a subtle asterisk easy to miss next to an uppercase label. */
.FieldRequiredMark {
  color: var(--color-danger);
  font-size: 1.15em;
  font-weight: 800;
}

.FieldInput {
  width: 100%;
  padding: .72rem 1rem .72rem 2.6rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--border-radius);
  font-size: .95rem;
  font-family: inherit;
  color: var(--color-text);
  background: #fff;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}
.FieldInput.FieldTextarea { padding: .72rem 1rem; }
.FieldInput:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0,159,227,.18);
}
.FieldInput.is-invalid { border-color: var(--color-danger); }
.FieldInputStatic {
  display: flex;
  align-items: center;
  background: var(--color-bg, #f8f9fa);
  border-color: var(--color-border);
  border-style: dashed;
  color: var(--color-text-muted, #6c757d);
  cursor: default;
  user-select: text;
  font-style: italic;
}

/* Input wrapper — clean positioning context for icon + eye toggle */
.FieldInputWrap {
  position: relative;
}
.FieldInputWrap .FieldInput { padding-right: 2.6rem; }

.FieldIcon {
  position: absolute;
  left: .85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-primary);
  font-size: .9rem;
  pointer-events: none;
}
/* For textarea fields — pin icon to top instead of vertical-center */
.FieldIconTop {
  top: .78rem;
  transform: none;
}

.FieldAction {
  position: absolute;
  right: .85rem;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: var(--color-muted);
  background: none;
  border: none;
  padding: 0;
  font-size: .88rem;
  line-height: 1;
  display: flex;
  align-items: center;
  transition: color var(--transition);
}
.FieldAction:hover { color: var(--color-primary-dark); }

.FieldError {
  color: var(--color-danger);
  font-size: .8rem;
  margin-top: .3rem;
  display: block;
}

/* Remember me row */
.FieldRememberRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.2rem;
}
.FieldRememberLabel {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .84rem;
  color: var(--color-muted);
  cursor: pointer;
  user-select: none;
}
.FieldRememberLabel input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--color-primary);
  cursor: pointer;
  flex-shrink: 0;
}

/* Checkbox */
.FieldCheckboxGroup {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.25rem;
}
.FieldCheckboxGroup input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--color-primary);
  cursor: pointer;
}
.FieldCheckboxGroup label {
  font-size: .88rem;
  color: var(--color-muted);
  cursor: pointer;
  margin: 0;
}

/* --------------------------------------------------------------------------
   AUTH PAGES — single centered card (form only, no left panel)
   -------------------------------------------------------------------------- */
body.AuthPage {
  background: var(--color-bg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.AuthForm {
  width: 100%;
  max-width: 460px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 48px rgba(2,73,147,.14);
  overflow: hidden;
  /* top accent bar in Medlife blue */
  border-top: 4px solid var(--color-primary);
}

/* Logo header inside the card */
.AuthLogo {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 2rem 0;
}
.AuthLogoImage {
  height: 74px;
  width: auto;
  margin-bottom: .6rem;
}
.AuthLogoText {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
  opacity: .7;
}

/* Divider line below logo */
.AuthDivider {
  height: 1px;
  background: var(--color-border);
  margin: 1.25rem 2rem 0;
  opacity: .6;
}

/* Form area */
.AuthFields {
  padding: 1.75rem 2rem 2rem;
  display: flex;
  flex-direction: column;
}
.AuthTitle {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: .25rem;
}
.AuthText {
  font-size: .85rem;
  color: var(--color-muted);
  margin-bottom: 1.6rem;
}
.AuthFooter {
  font-size: .85rem;
  color: var(--color-muted);
  margin-top: 1.1rem;
  text-align: center;
}
.AuthFooter a { color: var(--color-primary); font-weight: 600; }

/* Wider card for register (has more fields) */
.AuthForm.AuthFormWide { max-width: 500px; }

/* Alerts */
.CustomAlert {
  background: #fff0f0;
  border: 1px solid #f5c0c0;
  border-left: 4px solid var(--color-danger);
  border-radius: 8px;
  padding: .7rem 1rem;
  font-size: .88rem;
  color: #b71c1c;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.CustomAlertSuccess {
  background: var(--color-light);
  border: 1px solid #b3d9f0;
  border-left: 4px solid var(--color-primary);
  color: var(--color-primary-dark);
}

/* --------------------------------------------------------------------------
   DEPARTMENT PORTAL — full-width page for department-type Account logins
   (no staff sidebar/topbar: self-contained header + .Card list of patients
   per assigned department). See templates/department/dashboard.html.twig.
   Same dark radial-gradient + glass-card language as the public board (see
   "Hospital Board" section below), and now the same fixed-viewport/kiosk
   treatment too: this runs unattended on a department screen like the board
   does, and the card grid is sized to fit one screen with no real scrolling,
   so the invisible scroll-heartbeat trick (see .DepartmentPortalWrap below
   and the dashboard.html.twig javascripts block) is safe to use here.
   -------------------------------------------------------------------------- */
body.DepartmentPortalPage {
  background: radial-gradient(circle at 15% 0%, #0a3d7a 0%, #051d3d 45%, #030f22 100%);
  background-attachment: fixed;
  min-height: 100vh;
  color: #eaf2fb;
  --dept-stable: #2ecc71;
  --dept-attention: #f5b83d;
  --dept-critical: #e5484d;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* old Edge */
}
body.DepartmentPortalPage::-webkit-scrollbar {
  display: none;              /* Chromium-based kiosk browsers */
}

/* Pins all real content over the .BoardScrollSpacer (shared with the board,
   see "Hospital Board" section) so the document-level auto-scroll heartbeat
   never visibly moves anything - same technique as .BoardWrap--kiosk. */
.DepartmentPortalWrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 2;
}

/* ---- Header: brand, live indicator, clock, logout ---- */

.DepartmentPortalHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  background: rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
  position: sticky;
  top: 0;
  z-index: 10;
}
.DepartmentPortalHeaderBrand { display: flex; align-items: center; gap: .6rem; }
.DepartmentPortalHeaderLogo { height: 36px; width: auto; }
.DepartmentPortalHeaderTitle {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  max-width: 40vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Same 4 counts the old in-page stats strip showed, moved into the header - see
   dashboard.html.twig for why (frees vertical space for the card grid). */
.DepartmentPortalHeaderStats { display: flex; align-items: center; gap: .6rem; }
.DeptHeaderStat {
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  padding: .3rem .75rem;
  border-radius: 20px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: #eaf2fb;
}
.DeptHeaderStat i { font-size: .78rem; opacity: .85; align-self: center; }
.DeptHeaderStatValue { font-size: .95rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.DeptHeaderStatLabel { font-size: .68rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; opacity: .65; }
.DeptHeaderStat--total i { color: var(--color-primary); }
.DeptHeaderStat--stable i { color: var(--dept-stable); }
.DeptHeaderStat--attention i { color: var(--dept-attention); }
.DeptHeaderStat--critical i { color: var(--dept-critical); }

/* Burger toggle - hidden on desktop, only shown <=1024px (see media block below). Toggled by
   the plain data-menu-toggle click handler in _dashboard_scripts.html.twig, which keeps
   aria-expanded in sync on this button - that's all the bars<->xmark icon swap needs. */
.DepartmentPortalHeaderBurger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  font-size: 1rem;
}
.DepartmentPortalHeaderBurger:hover { background: rgba(255,255,255,.14); }
.DepartmentPortalHeaderBurger .fa-xmark { display: none; }
.DepartmentPortalHeaderBurger[aria-expanded="true"] .fa-bars { display: none; }
.DepartmentPortalHeaderBurger[aria-expanded="true"] .fa-xmark { display: inline; }

/* Groups Stats + Right together so both can turn into one full-screen toggled overlay <=1024px
   (see media block below) - on desktop this is just a plain flex row filling the space right of
   the brand, equivalent to the old 3-column space-between header. */
.DepartmentPortalHeaderMenu { display: flex; align-items: center; justify-content: flex-end; flex: 1; gap: 1.5rem; min-width: 0; }

/* Close button inside the menu - only meaningful (and only visible) <=1024px, see media block. */
.DepartmentPortalHeaderMenuClose { display: none; }

.DepartmentPortalHeaderRight { display: flex; align-items: center; gap: 1.75rem; }

.DepartmentPortalHeaderLive {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #6be675;
}
.DeptLiveDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dept-stable);
  animation: DeptLivePulse 2s ease-in-out infinite;
}
@keyframes DeptLivePulse {
  0%   { box-shadow: 0 0 0 0 rgba(46,204,113,.55); }
  70%  { box-shadow: 0 0 0 7px rgba(46,204,113,0); }
  100% { box-shadow: 0 0 0 0 rgba(46,204,113,0); }
}

.DepartmentPortalHeaderClock { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.DepartmentPortalHeaderClock #deptClock { font-size: 1rem; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.DepartmentPortalHeaderClockDate { font-size: .7rem; color: rgba(234,242,251,.55); text-transform: capitalize; }

.DepartmentPortalHeaderLogout {
  font-size: .85rem;
  font-weight: 600;
  color: rgba(234,242,251,.75);
  display: flex;
  align-items: center;
  gap: .4rem;
}
.DepartmentPortalHeaderLogout:hover { color: #ff6b6b; }

.DepartmentPortalContent { max-width: none; margin: 0; padding: 2rem; }

/* ---- Board-style glass cards on the dark page background, overriding the light
   admin-dashboard .Card look (shared with many other pages) only within this
   page's scope, same technique the board uses for .BoardRoomCard. ---- */

body.DepartmentPortalPage .Card { background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(6px); }
body.DepartmentPortalPage .AuthText { color: rgba(234,242,251,.75); }
body.DepartmentPortalPage .EmptyState { color: rgba(234,242,251,.5); }
body.DepartmentPortalPage .EmptyState--compact { padding: 1.25rem; font-size: .85rem; }

/* ---- Patient board card (department/_dashboard_content.html.twig) ---- */

.DeptBoardCard {
  position: relative;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-left: 3px solid rgba(255,255,255,.2);
  border-radius: 14px;
  padding: .65rem .75rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  /* Grid items default to min-width:auto, which refuses to shrink below the widest unwrapped
     (white-space:nowrap) text inside - e.g. DeptBoardCardName/DeptBoardCardLine - so at a fixed
     narrow track (mobile's repeat(2, 1fr), no minmax floor) the card blows out past its column
     instead of the ellipsis ever engaging. min-width:0 lets the grid track's width win. */
  min-width: 0;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.DeptBoardCard:hover,
.DeptBoardCard:focus-visible {
  background: rgba(255,255,255,.1);
  border-color: var(--color-primary);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  transform: translateY(-2px);
  outline: none;
}
.DeptBoardCard--stabil { border-left-color: var(--dept-stable); }
.DeptBoardCard--atentie { border-left-color: var(--dept-attention); }
.DeptBoardCard--critic {
  border-left-color: var(--dept-critical);
  background: linear-gradient(155deg, color-mix(in srgb, var(--dept-critical) 16%, transparent) 0%, rgba(255,255,255,.06) 60%);
}
.DeptBoardCard--pulse { animation: DeptCardCriticalGlow 2s ease-in-out infinite; }
@keyframes DeptCardCriticalGlow {
  0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--dept-critical) 30%, transparent), 0 4px 14px rgba(0,0,0,.3); }
  50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--dept-critical) 45%, transparent), 0 14px 36px rgba(229,72,77,.4); }
}

/* Small pulsing dot dropped inside a StatusBadgeRed wherever a critical patient needs to
   catch the eye - patient cards, the department header's critical-count badge, and the
   detail modal's identity badge. Same expanding-ring technique as the public board's
   BoardPulseDot, red instead of green. */
.DeptCriticalPulseDot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-danger);
  flex-shrink: 0;
  animation: DeptCriticalPulseDot 1.6s infinite;
}
@keyframes DeptCriticalPulseDot {
  0%   { box-shadow: 0 0 0 0 rgba(229,35,34,.6); }
  70%  { box-shadow: 0 0 0 7px rgba(229,35,34,0); }
  100% { box-shadow: 0 0 0 0 rgba(229,35,34,0); }
}

/* Severity badge on the patient card ("Critic"/"Atentie"/"Stabil") - a small icon-only circle
   instead of the shared .StatusBadge* text pill (too wide for this card's tight layout; the
   full text badge is still used in the patient detail modal, which has room for it). */
.DeptBoardCardSeverityIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  font-size: 1rem;
}
.DeptBoardCardSeverityIcon--critic {
  background: var(--dept-critical);
  color: #fff;
  animation: DeptCriticalAvatarPulse 2s ease-in-out infinite;
}
.DeptBoardCardSeverityIcon--atentie { background: var(--dept-attention); color: #4a2f00; }
.DeptBoardCardSeverityIcon--stabil { background: var(--dept-stable); color: #06371c; }

.DeptBoardCardTop { display: flex; align-items: center; gap: .6rem; }
.DeptBoardCardAvatar {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(140deg, var(--color-primary), var(--color-primary-dark));
}
.DeptBoardCardIdentity { display: flex; flex-direction: column; gap: .1rem; min-width: 0; flex: 1; }
.DeptBoardCardName { font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.DeptBoardCardMeta { font-size: .8rem; color: rgba(234,242,251,.6); }
.DeptBoardCardLine { display: flex; align-items: center; gap: .4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.DeptBoardCardLine i { flex-shrink: 0; opacity: .8; width: 1em; text-align: center; }

.DeptBoardCardLocationBox {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .6rem;
  border-radius: 8px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  font-size: .82rem;
  font-weight: 600;
  color: #fff;
}
.DeptBoardCardLocationBox i { color: var(--color-primary); flex-shrink: 0; }

/* Quick vitals boxes (puls/spo2/tensiune/temperatura) - value text is patched every 5s by the
   live vitals poll (see dashboard.html.twig's javascripts block), the level color is not (a
   patient's off-normal vital doesn't change which vital is off, only its exact reading -
   see DemoDepartmentPatientProvider::vitalValue()'s tick-based jitter). */
.DeptBoardCardVitals { display: grid; grid-template-columns: repeat(var(--dept-vitals-per-row, 4), 1fr); gap: .4rem; }
.DeptBoardCardVital {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  min-height: 3.5rem;
  padding: .5rem .35rem;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}
.DeptBoardCardVitalLabel { font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: rgba(234,242,251,.55); }
.DeptBoardCardVitalValue {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: .88rem;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.DeptBoardCardVital--atentie { border-color: color-mix(in srgb, var(--dept-attention) 45%, transparent); }
.DeptBoardCardVital--atentie .DeptBoardCardVitalValue { color: var(--dept-attention); }
.DeptBoardCardVital--critic { border-color: color-mix(in srgb, var(--dept-critical) 45%, transparent); }
.DeptBoardCardVital--critic .DeptBoardCardVitalValue { color: var(--dept-critical); }
.DeptBoardCardVitalUnit { font-size: .6rem; font-weight: 500; opacity: .7; margin-left: 0; }

.DeptBoardCardProcedureRow {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: auto;
  padding: .4rem .6rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
}
.DeptBoardCardProcedureRow i { color: var(--color-primary); flex-shrink: 0; }
.DeptBoardCardProcedureName { flex: 1; min-width: 0; font-size: .78rem; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.DeptBoardCardProcedureBadge { flex-shrink: 0; font-size: .68rem; font-weight: 800; letter-spacing: .03em; padding: .15rem .5rem; border-radius: 999px; background: rgba(255,255,255,.14); color: rgba(234,242,251,.9); }
.DeptBoardCardProcedureBadge--now { background: var(--color-primary); color: #fff; }

.DepartmentPatientList { display: flex; flex-direction: column; gap: .1rem; }
.DepartmentPatientRow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: .9rem 0;
  border-bottom: 1px solid var(--color-border);
}
.DepartmentPatientRow:last-child { border-bottom: none; }
.DepartmentPatientMain { display: flex; flex-direction: column; gap: .15rem; }
.DepartmentPatientName { font-weight: 700; color: var(--color-text); }
.DepartmentPatientMeta { font-size: .82rem; color: var(--color-muted); }
.DepartmentPatientSide {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .3rem;
  flex-shrink: 0;
  text-align: right;
}

/* Tablet + mobile: below this width only the brand and the burger toggle stay on the header
   row - Stats/Live/Clock/Logout (.DepartmentPortalHeaderMenu) become a full-screen overlay,
   toggled by the plain data-menu-toggle handler in _dashboard_scripts.html.twig. Deliberately
   plain show/hide (display:none <-> flex) - no slide/fade animation, per explicit request. */
@media (max-width: 1024px) {
  .DepartmentPortalHeader { padding: .9rem 1.5rem; flex-wrap: wrap; gap: .6rem; }
  .DepartmentPortalHeaderTitle { max-width: 60vw; }
  .DepartmentPortalHeaderBurger { display: inline-flex; }
  /* .DepartmentPortalHeaderMenu (position:fixed, below) is a DOM child of this header, and
     backdrop-filter on an ancestor creates a new containing block for fixed-position
     descendants (same rule as transform/filter/perspective) - so inset:0 was sizing the overlay
     against this header's own small box instead of the viewport, which is why it rendered as a
     shrunk band instead of covering the screen. Dropping the blur only <=1024px removes that
     containing block so the overlay correctly fills the viewport again. */
  .DepartmentPortalHeader { backdrop-filter: none; }

  .DepartmentPortalHeaderMenu {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(3,12,24,.94);
    flex: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.75rem;
    padding: 2rem;
    text-align: center;
  }
  .DepartmentPortalHeaderMenu.is-open { display: flex; }

  .DepartmentPortalHeaderStats { justify-content: center; flex-wrap: wrap; }
  .DepartmentPortalHeaderRight { flex-direction: column; gap: 1.25rem; }
  .DepartmentPortalHeaderClock { align-items: center; }

  .DepartmentPortalHeaderMenuClose {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: .5rem;
    padding: .55rem 1.4rem;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.2);
    color: #fff;
    font-size: .9rem;
    font-weight: 600;
  }
  .DepartmentPortalHeaderMenuClose:hover { background: rgba(255,255,255,.16); }

  .DepartmentPortalContent { padding: 1.5rem; }
}

@media (max-width: 640px) {
  .DepartmentPortalHeader { padding: .85rem 1.25rem; gap: .75rem; }
  .DepartmentPortalHeaderTitle { max-width: 100%; white-space: normal; }
  .DepartmentPortalContent { padding: 1.25rem; }
  .DepartmentPatientRow { flex-direction: column; }
  .DepartmentPatientSide { align-items: flex-start; text-align: left; }
}

/* --------------------------------------------------------------------------
   PASSWORD REQUIREMENTS INDICATOR
   -------------------------------------------------------------------------- */
.PwdRequirements {
  background: #f5faff;
  border: 1.5px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: .85rem 1rem;
  margin-top: .6rem;
  display: none;
}
.PwdRequirements.Show { display: block; animation: reqFadeIn .2s ease both; }
@keyframes reqFadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}
.PwdRequirementsTitle {
  font-size: .72rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .55rem;
}
.PwdReqList {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .3rem .5rem;
}
.PwdReqItem {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .82rem;
  color: var(--color-muted);
  transition: color var(--transition);
}
.PwdReqItem .PwdReqIcon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #dde5ee;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--transition), transform .25s cubic-bezier(.34,1.56,.64,1);
}
.PwdReqItem .PwdReqIcon i { font-size: .55rem; color: transparent; transition: color var(--transition); }

.PwdReqItem.Met { color: var(--color-primary-dark); }
.PwdReqItem.Met .PwdReqIcon {
  background: var(--color-primary);
  transform: scale(1.15);
}
.PwdReqItem.Met .PwdReqIcon i { color: #fff; }

.PwdReqItem.Disabled { color: var(--color-muted); opacity: .5; }
.PwdReqItem.Disabled .PwdReqIcon { background: #dde5ee; transform: none; }

.PwdWeakToggle {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .82rem;
  color: var(--color-muted);
  margin-bottom: .7rem;
  padding-bottom: .7rem;
  border-bottom: 1px dashed var(--color-border);
  cursor: pointer;
  user-select: none;
}
.PwdWeakToggle input[type="checkbox"] {
  position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0;
}
.PwdWeakToggleBox {
  width: 18px; height: 18px; border-radius: 5px; flex-shrink: 0;
  border: 1.5px solid var(--color-border); background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .2s cubic-bezier(.34,1.56,.64,1);
}
.PwdWeakToggleBox i { font-size: .6rem; color: transparent; transition: color .15s; }
.PwdWeakToggle:hover .PwdWeakToggleBox { border-color: var(--color-primary); }
.PwdWeakToggle input:checked + .PwdWeakToggleBox {
  background: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 159, 227, .15);
  transform: scale(1.05);
}
.PwdWeakToggle input:checked + .PwdWeakToggleBox i { color: #fff; }
.PwdWeakToggle input:focus-visible + .PwdWeakToggleBox { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.PwdStrengthBar {
  height: 4px;
  background: #dde5ee;
  border-radius: 2px;
  margin-top: .75rem;
  overflow: hidden;
}
.PwdStrengthFill {
  height: 100%;
  border-radius: 2px;
  width: 0%;
  transition: width .4s ease, background .4s ease;
}

/* Animated strength label text */
.PwdStrengthLabel {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .03em;
  min-height: 1.1em;
  margin-top: .35rem;
  transition: color .3s ease;
}
.PwdStrengthLabel .PwdStrengthText {
  display: inline-block;
  animation: strengthPop .28s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes strengthPop {
  from { opacity: 0; transform: translateY(5px) scale(.92); }
  to { opacity: 1; transform: translateY(0)   scale(1); }
}



.FieldMatchFeedback {
  font-size: .8rem;
  font-weight: 600;
  margin-top: .35rem;
  display: block;
  min-height: 1.1em;
  transition: color .25s ease;
}
.FieldMatchFeedback.MatchOk { color: var(--color-primary-dark); }
.FieldMatchFeedback.MatchFail { color: var(--color-danger); }

/* --------------------------------------------------------------------------
   DASHBOARD LAYOUT
   -------------------------------------------------------------------------- */
body.DashboardPage {
  background: var(--color-bg);
  min-height: 100vh;
  display: flex;
}

/* Sidebar — dark blue gradient */
.Sidebar {
  position: fixed;
  top: 0; left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  background: linear-gradient(180deg, #013575 0%, var(--color-primary-dark) 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  z-index: 200;
  overflow-y: auto;
}
.SidebarBrand {
  padding: 1.5rem 1.4rem 1rem;
  display: flex;
  align-items: center;
  gap: .8rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
  flex-shrink: 0;
}
.SidebarBrandLogo {
  height: 46px;
  width: auto;
}
.SidebarBrandSep {
  width: 1px;
  height: 28px;
  background: rgba(255,255,255,.25);
}
.SidebarBrandText { font-size: .82rem; font-weight: 600; line-height: 1.3; opacity: .85; }
.SidebarBrandText span { display: block; font-size: .65rem; font-weight: 400; opacity: .65; }

.SidebarSectionLabel {
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  padding: 1.2rem 1.4rem .4rem;
}
.SidebarNav { flex: 1; padding: .5rem 0; }
.SidebarNav a {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem 1.4rem;
  color: rgba(255,255,255,.72);
  font-size: .875rem;
  font-weight: 500;
  transition: background var(--transition), color var(--transition), padding-left var(--transition);
  text-decoration: none;
  position: relative;
}
.SidebarNav a:hover {
  background: rgba(255,255,255,.08);
  color: #fff;
  padding-left: 1.7rem;
}
.SidebarNav .SidebarSubmenu a:hover {
  padding-left: 3rem;
}
.SidebarNav a.active {
  background: rgba(0,159,227,.18);
  color: #fff;
  font-weight: 600;
}
.SidebarNav a.active::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--color-primary);
  border-radius: 0 2px 2px 0;
}
.SidebarNav a i { width: 18px; text-align: center; font-size: .88rem; }
.SidebarNav a .NavBadge {
  margin-left: auto;
  background: rgba(0,159,227,.25);
  color: #a8dcf5;
  font-size: .67rem;
  font-weight: 700;
  padding: .1rem .45rem;
  border-radius: 10px;
}

.SidebarFooter {
  padding: 1rem 1.4rem;
  border-top: 1px solid rgba(255,255,255,.1);
  flex-shrink: 0;
}
.SidebarFooter a {
  display: flex;
  align-items: center;
  gap: .65rem;
  color: rgba(255,255,255,.55);
  font-size: .85rem;
  padding: .5rem .6rem;
  border-radius: 8px;
  transition: all var(--transition);
  text-decoration: none;
}
.SidebarFooter a:hover { background: rgba(229,35,34,.15); color: #ff8a88; }

/* Main content */
.MainContent {
  margin-left: var(--sidebar-width);
  flex: 1;
  min-width: 0; /* prevent flex item from expanding beyond viewport when content is wide */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: clip; /* clip (not hidden) preserves position:sticky on descendants */
}

.SidebarToggleBtn {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  cursor: pointer;
  padding: .45rem .75rem;
  color: var(--color-text);
  font-size: 1rem;
  line-height: 1;
  margin-right: .75rem;
  transition: background var(--transition);
}
.SidebarToggleBtn:hover { background: var(--color-bg); }

/* Topbar */
.Topbar {
  height: var(--topbar-height);
  background: #fff;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 6px rgba(2,73,147,.06);
  flex-shrink: 0;
}
.TopbarLeft { display: flex; flex-direction: column; }
.TopbarTitle { font-size: 1rem; font-weight: 700; color: var(--color-primary-dark); line-height: 1.2; }
.TopbarBreadcrumb { font-size: .73rem; color: var(--color-muted); }

.TopbarRight { display: flex; align-items: center; gap: 1rem; }

.TopbarProfile { display: flex; align-items: center; gap: .65rem; cursor: pointer; }
.TopbarAvatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--color-light);
  border: 2px solid var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  text-transform: uppercase;
}
.TopbarUserInfo { line-height: 1.2; }
.TopbarUserEmail { font-size: .82rem; font-weight: 600; color: var(--color-text); }
.TopbarUserRole { font-size: .7rem; color: var(--color-primary); font-weight: 600; }

/* Page body */
.PageContent { flex: 1; padding: 2rem; }
.PageTitle { font-size: 1.35rem; font-weight: 700; color: var(--color-primary-dark); margin-bottom: .25rem; }
.PageSubtitle { font-size: .88rem; color: var(--color-muted); margin-bottom: 1.75rem; }

/* --------------------------------------------------------------------------
   STAT CARDS
   -------------------------------------------------------------------------- */
.StatsGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-bottom: 2rem;
}
@media (max-width: 1200px) { .StatsGrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .StatsGrid { grid-template-columns: 1fr; } }

.StatCard {
  background: #fff;
  border-radius: 14px;
  padding: 1.4rem 1.5rem;
  box-shadow: var(--shadow);
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  transition: transform var(--transition), box-shadow var(--transition);
  position: relative;
  overflow: hidden;
}
.StatCard:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 24px rgba(2,73,147,.13);
}
.StatCard::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 4px;
  height: 100%;
  background: var(--color-primary);
  border-radius: 0 14px 14px 0;
  opacity: .7;
}
/* Per-category accent bar, paired with the matching StatIcon variant below so each tile's
   left icon and right accent bar agree on color - purely a ::after background override. */
.StatCard.StatCard--dark::after   { background: var(--color-primary-dark); }
.StatCard.StatCard--red::after    { background: var(--color-danger); }
.StatCard.StatCard--teal::after   { background: #00838f; }
.StatCard.StatCard--purple::after { background: #6a1b9a; }
.StatCard.StatCard--orange::after { background: #b7610a; }
.StatCard.StatCard--green::after  { background: #2e7d32; }
.StatIcon {
  width: 52px; height: 52px;
  border-radius: 13px;
  background: var(--color-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--color-primary);
  flex-shrink: 0;
}
.StatIcon.StatIconDark { background: rgba(2,73,147,.1); color: var(--color-primary-dark); }
.StatIcon.StatIconRed { background: #fff0f0; color: var(--color-danger); }
.StatIcon.StatIconTeal { background: #e0f7fa; color: #00838f; }
.StatIcon.StatIconPurple { background: #f3e5f5; color: #6a1b9a; }
.StatIcon.StatIconOrange { background: #fff3e0; color: #b7610a; }
.StatIcon.StatIconGreen { background: #e8f5e9; color: #2e7d32; }
.StatBody { flex: 1; }
.StatValue { font-size: 1.75rem; font-weight: 700; color: var(--color-text); line-height: 1.1; }
.StatLabel { font-size: .8rem; color: var(--color-muted); font-weight: 500; margin-top: .2rem; }

/* --------------------------------------------------------------------------
   DASHBOARD CARDS / PANELS
   -------------------------------------------------------------------------- */
.Card {
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.CardHeader {
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.CardTitle { font-size: 1rem; font-weight: 700; color: var(--color-primary-dark); margin: 0; }
.CardSubtitle { font-size: .82rem; color: var(--color-muted); margin: 0; }
.CardBody { padding: 1.5rem; }

/* Simpler one-line alternative to CardHeaderInner+CardTitle for headers that
   don't need a separate count badge/action slot - just an optional leading
   icon plus text, both used throughout (docs pages, report builder). */
.CardHeaderTitle {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
}
.CardHeaderTitle i:first-child { color: var(--color-primary); }

/* --------------------------------------------------------------------------
   SETTINGS TABS — settings page groups, restyled Bootstrap nav-tabs/nav-pills
   + tab-content/tab-pane to match the app palette. Top-level .SettingsTopTabs
   mirrors the 2 settings scopes actually persisted by separate controller
   actions/forms (SettingsController::index() vs ::updateDepartmentBoard());
   .SettingsSubTabs is a second, nested tab level (nav-pills) used only inside
   the "Bord Live" pane to split Demo/Timing/Behavior while keeping them in
   that one <form> (the controller reads all 3 groups' fields from a single
   POST, so they cannot be split into separate forms).
   -------------------------------------------------------------------------- */
.SettingsTopTabs.nav-tabs {
  border-bottom: 2px solid var(--color-border);
  gap: .25rem;
  margin-bottom: 1.5rem;
}
.SettingsTopTabs.nav-tabs .nav-link {
  display: flex;
  align-items: center;
  gap: .5rem;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  color: var(--color-muted);
  font-weight: 600;
  font-size: .92rem;
  padding: .75rem 1.1rem;
}
.SettingsTopTabs.nav-tabs .nav-link:hover { color: var(--color-primary-dark); }
.SettingsTopTabs.nav-tabs .nav-link.active {
  color: var(--color-primary-dark);
  background: transparent;
  border-bottom-color: var(--color-primary);
}

.SettingsSubTabs.nav-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.25rem;
}
.SettingsSubTabs.nav-pills .nav-link {
  color: var(--color-primary-dark);
  background: var(--color-light);
  font-weight: 600;
  font-size: .85rem;
  padding: .5rem 1rem;
  border-radius: 999px;
}
.SettingsSubTabs.nav-pills .nav-link.active { color: #fff; background: var(--color-primary); }

/* Field labels inside a settings sub-tab - Bootstrap's default .form-label reads as flat,
   low-contrast gray next to this page's bold CardTitle/SectionDivider text, so restyle it to
   match: small caps, bold, brand-dark, same voice as everything else on the page. */
.SettingsSubTabContent .form-label {
  font-size: .78rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: .5rem;
}

/* Per-item enable/disable chip toggles (settings "Detalii Pacient" sub-tab - each vital sign /
   device gets its own chip rather than one blanket section toggle). Same :has(input:checked)
   selected-card idiom as .AccountTypeOption/.DepartmentCheckItem, just pill-shaped and denser
   so 5 items sit comfortably on one row. */
.SettingsToggleChips { display: flex; flex-wrap: wrap; gap: .55rem; }
.SettingsToggleChip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .95rem;
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  background: #fff;
  color: var(--color-muted);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: border-color .15s, background .15s, color .15s;
}
.SettingsToggleChip:hover { border-color: var(--color-primary); color: var(--color-primary-dark); }
.SettingsToggleChip input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.SettingsToggleChipIcon { font-size: .8rem; color: var(--color-muted); transition: color .15s; }
.SettingsToggleChipCheck { display: none; font-size: .85rem; color: var(--color-primary); }
.SettingsToggleChip:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-light);
  color: var(--color-primary-dark);
}
.SettingsToggleChip:has(input:checked) .SettingsToggleChipIcon { color: var(--color-primary); }
.SettingsToggleChip:has(input:checked) .SettingsToggleChipCheck { display: inline-flex; }
.SettingsToggleChip:has(input:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   ROOM TILE — Unit dashboard room status box (identity / status / one hero
   number, plus an optional "what's in the room" line and upcoming-case
   queue). Sits inside a plain .Card, above the room's .TableWrap.
   -------------------------------------------------------------------------- */
.RoomTile {
  padding: 1.1rem 1.6rem;
  border-left: 4px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.RoomTileMain { display: flex; align-items: flex-start; gap: 1.5rem; }

.RoomTileIdentity { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.RoomTileName { font-size: 1.05rem; font-weight: 800; color: var(--color-primary-dark); }
.RoomTileName .fa-door-open { color: var(--color-primary); margin-right: .3rem; }
.RoomTileSub { font-size: .76rem; color: var(--color-muted); font-weight: 500; }

/* What's in the room right now, for occupied states */
.CurrentCase { margin-top: .3rem; }
.CurrentCaseLabel {
  display: block; font-size: .62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--color-muted); margin-bottom: .15rem;
}
.CurrentPatient { font-size: .87rem; font-weight: 700; color: var(--color-text); }
.CurrentMeta { font-size: .76rem; color: var(--color-muted); margin-left: .35rem; }

.RoomTileNameRow { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.StatusWord {
  display: flex; align-items: center; gap: .4rem;
  font-size: .8rem; font-weight: 800; letter-spacing: .01em;
}
.StatusDot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--color-muted); }
.StatusDot--pulse { animation: RoomStatusPulse 1.6s ease-in-out infinite; }
.StatusDelta { font-size: .7rem; font-weight: 700; padding: .1rem .5rem; border-radius: 20px; }

/* Device "last seen" freshness indicator (dashboard/devices/index.html.twig) - a broadcast-
   tower icon that pulses green while a device has checked in within the last 24h, and sits
   static/muted red once it's gone quiet past that. */
.DeviceLiveIcon { margin-right: .45rem; font-size: .82rem; vertical-align: -1px; }
.DeviceLiveIcon--live { color: #2e7d32; animation: DeviceLivePulse 1.6s ease-in-out infinite; }
.DeviceLiveIcon--stale { color: var(--color-danger); opacity: .55; }

/* Device identifiers cell (dashboard/devices/index.html.twig) - ip/clientId/hostname/mac
   grouped under one "Identificator" column instead of a column each, since a device is now
   recognized by clientId rather than ip (see App\Service\DeviceIdentityService) and the old
   one-column-per-field layout implied ip was still the primary key. */
.DeviceIdentifiers { display: flex; flex-direction: column; gap: .15rem; }
.DeviceIdentifierRow { display: flex; gap: .4rem; align-items: baseline; font-size: .82rem; }
.DeviceIdentifierLabel { color: var(--color-muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; min-width: 2.2rem; }

@keyframes DeviceLivePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.85); }
}

.RoomTileHero { text-align: right; min-width: 128px; flex-shrink: 0; margin-top: .1rem; }
.HeroNumber { font-size: 1.85rem; font-weight: 800; line-height: 1; }
.HeroLabel { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-muted); margin-top: .3rem; }

@media (max-width: 560px) {
  .RoomTileMain { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .RoomTileHero { text-align: left; }
}

/* Five room states - left rail + tint on the tile, status word / hero number color */
.RoomTile--ontime { border-left-color: #2e7d32; }
.RoomTile--ontime .StatusWord { color: #2e7d32; }
.RoomTile--ontime .StatusDot { background: #2e7d32; }
.RoomTile--ontime .HeroNumber { color: #2e7d32; }

.RoomTile--late {
  border-left-color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 5%, #fff);
}
.RoomTile--late .StatusDot { background: #2e7d32; }
.RoomTile--late .HeroNumber { color: var(--color-danger); }
.RoomTile--late .StatusDelta { background: color-mix(in srgb, var(--color-danger) 12%, #fff); color: var(--color-danger); }

.RoomTile--early {
  border-left-color: #3f51b5;
  background: color-mix(in srgb, #3f51b5 5%, #fff);
}
.RoomTile--early .StatusDot { background: #2e7d32; }
.RoomTile--early .HeroNumber { color: #3f51b5; }
.RoomTile--early .StatusDelta { background: color-mix(in srgb, #3f51b5 12%, #fff); color: #3f51b5; }

.RoomTile--free { border-left-color: var(--color-primary); }
.RoomTile--free .StatusWord { color: var(--color-muted); }
.RoomTile--free .StatusDot { background: var(--color-primary); }
.RoomTile--free .HeroNumber { color: var(--color-primary); }

.RoomTile--empty {
  border-left-style: dashed;
  border-left-color: #97a3b5;
  background: color-mix(in srgb, #97a3b5 4%, #fff);
}
.RoomTile--empty .RoomTileName { color: var(--color-muted); }
.RoomTile--empty .StatusWord { color: var(--color-muted); }
.RoomTile--empty .StatusDot { background: #97a3b5; }
.RoomTile--empty .HeroNumber { color: #97a3b5; font-weight: 400; }

/* --------------------------------------------------------------------------
   CASE CARDS — unit dashboard's per-room case list (replaces the old
   DataTable/thead). Each case is a self-contained card with its own field
   labels; phases sit under Specialitate as small boxes instead of a
   dot-timeline; completed cases get a muted background to recede.
   -------------------------------------------------------------------------- */
.CaseCardList { display: flex; flex-direction: column; gap: .85rem; padding: 1.25rem 1.5rem; }

.CaseCard {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1rem 1.25rem;
}
.CaseCard--done { background: color-mix(in srgb, var(--color-muted) 6%, #fff); }
.CaseCard--done .CasePatient,
.CaseCard--done .FieldValue,
.CaseCard--done .IntervalChip { color: var(--color-muted); }

/* The case actually happening in the room right now - same green language as
   .StatusPill--active, so the card carrying it is unmistakable at a glance. */
.CaseCard--active {
  background: color-mix(in srgb, #2e7d32 5%, #fff);
  border-color: color-mix(in srgb, #2e7d32 30%, var(--color-border));
}

.CaseTop { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; flex-wrap: wrap; }
.CaseTopLeft { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.StatusPill { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .65rem; border-radius: 20px; font-size: .78rem; font-weight: 700; }
.StatusPill--active { background: #e8f5e9; color: #2e7d32; }
.StatusPill--upcoming { background: var(--color-light); color: var(--color-primary-dark); }
.StatusPill--done { background: #eceff1; color: var(--color-muted); }

.CaseDoc { font-size: .76rem; color: var(--color-muted); }

.CaseFields { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem 1.5rem; }
@media (max-width: 900px) { .CaseFields { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .CaseFields { grid-template-columns: 1fr; } }

.Field { min-width: 0; }
.FieldLabel { display: block; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-muted); margin-bottom: .2rem; }
.FieldValue { font-size: .87rem; font-weight: 600; color: var(--color-text); }
.CasePatient { font-weight: 700; color: var(--color-primary-dark); }
.FieldDate { font-size: .74rem; color: var(--color-muted); margin-bottom: .35rem; }

.IntervalChip {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .82rem; font-weight: 700; color: var(--color-text);
  background: #f5f9fd; border: 1px solid var(--color-border); border-radius: 8px;
  padding: .3rem .6rem;
}
.IntervalChip i { font-size: .78rem; color: var(--color-muted); }
.IntervalChip--relocated { background: #fff7ea; border-color: #f6dfae; color: #92650c; }
.IntervalChip--relocated i { color: var(--color-warning); }

.IntervalPushed {
  display: flex; align-items: center; gap: .35em;
  font-size: .74rem; font-weight: 600; color: var(--color-danger);
  margin-top: .4rem;
}
.IntervalOriginal {
  display: flex; align-items: center; gap: .35em;
  font-size: .74rem; color: var(--color-muted);
  margin-top: .4rem;
}

.PhaseBoxes { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }
.PhaseBox {
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  min-width: 64px;
  font-size: .66rem; font-weight: 600; color: var(--color-muted);
  background: #f5f9fd; border: 1px solid var(--color-border); border-radius: 7px;
  padding: .3rem .4rem;
}
.PhaseBox--done { background: #e8f5e9; border-color: #cfe9d1; color: #2e7d32; }
.PhaseBox--late { background: #fdecec; border-color: #f6c9c8; color: var(--color-danger); }
.PhaseBox--early { background: #ecedfb; border-color: #c9cdf6; color: #3f51b5; }
.PhaseBox--pending { background: transparent; border-style: dashed; color: var(--color-border); }
.PhaseBoxTime { font-weight: 700; font-size: .68rem; }
.PhaseBoxTime--pending { color: var(--color-border); }

.CaseCardEmpty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .75rem;
  padding: 2.5rem 1.5rem;
  border: 1px dashed var(--color-border);
  border-radius: 12px;
  color: var(--color-muted);
  font-size: .88rem;
}
.CaseCardEmptyIconWrap {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #f5f9fd; color: var(--color-muted); font-size: 1.1rem;
}

/* Per-room collapse/expand toggle, sits at the end of .RoomTileMain */
.RoomToggleBtn {
  background: none; border: none; cursor: pointer;
  color: var(--color-muted); font-size: 1rem;
  padding: .4rem; margin: -.4rem 0 0;
  flex-shrink: 0;
}
.RoomToggleBtn:hover { color: var(--color-primary); }
.RoomToggleBtn i { display: inline-block; transition: transform .2s ease; }
.RoomToggleBtn.is-collapsed i { transform: rotate(180deg); }

/* --------------------------------------------------------------------------
   EMAIL PREVIEW CARDS
   -------------------------------------------------------------------------- */
.EmailPreviewCard { transition: box-shadow .15s, border-color .15s; border: 2px solid transparent; }
.EmailPreviewCard:hover { box-shadow: 0 4px 18px rgba(0,0,0,.12); }
.EmailPreviewCard.is-active { border-color: var(--color-primary); box-shadow: 0 4px 18px rgba(0,0,0,.12); }

/* --------------------------------------------------------------------------
   USER MANAGEMENT TABLE
   -------------------------------------------------------------------------- */
.DataTable { width: 100%; border-collapse: collapse; }
.DataTable th {
  font-size: .73rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-primary-dark);
  padding: .75rem 1rem;
  border-bottom: 2px solid var(--color-border);
  text-align: left;
  background: #f5f9fd;
}
.DataTable th.ThNowrap { white-space: nowrap }
.DataTable td {
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--color-border);
  font-size: .88rem;
  color: var(--color-text);
  vertical-align: middle;
}
.DataTable tr:last-child td { border-bottom: none; }
.DataTable tr:hover td { background: #f5f9fd; }

.StatusBadge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .25rem .65rem;
  border-radius: 20px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.StatusBadgeBlue { background: var(--color-light); color: var(--color-primary-dark); }
.StatusBadgeDark { background: rgba(2,73,147,.1); color: var(--color-primary-dark); }
.StatusBadgeOrange { background: #FFF3E0; color: #B7610A; }
.StatusBadgePurple { background: #F3E5F5; color: #6A1B9A; }
.StatusBadgeGray { background: #F5F5F5; color: #555; }
.StatusBadgeRed { background: #fff0f0; color: var(--color-danger); }
.StatusBadgeGreen { background: #e8f5e9; color: #2e7d32; }
.StatusBadgeYellow { background: #fff9c4; color: #89590d; }


.TableActions { display: flex; gap: .5rem; }
.TableActionBtn {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
}
.TableActionBtnEdit { background: var(--color-light); color: var(--color-primary-dark); border-color: #b3d9f0; }
.TableActionBtnEdit:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.TableActionBtnResend { background: #f0fff4; color: #166534; border-color: #bbf7d0; }
.TableActionBtnResend:hover { background: #16a34a; color: #fff; border-color: #16a34a; }
.TableActionBtnDelete { background: #fff0f0; color: var(--color-danger); border-color: #f5c0c0; }
.TableActionBtnDelete:hover { background: var(--color-danger); color: #fff; }
.TableActionBtnAuto { width: auto !important; padding: 0 1rem 0 0.5rem; }
.TableActionBtnAuto i { margin-right: 0.5rem; }

/* --------------------------------------------------------------------------
   MODALS (Bootstrap override + Medlife branding)
   -------------------------------------------------------------------------- */
.Modal .modal-content {
  border: none;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 48px rgba(2,73,147,.18);
}
.Modal .modal-header {
  background: var(--color-light);
  border-bottom: 1px solid var(--color-border);
  padding: 1rem 1.4rem;
}
.Modal .modal-title {
  color: var(--color-primary-dark);
  font-weight: 700;
  font-size: .98rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.Modal .btn-close { opacity: .5; }
.Modal .btn-close:hover { opacity: 1; }
.Modal .modal-body { padding: 1.4rem; }
.Modal .modal-footer {
  border-top: 1px solid var(--color-border);
  padding: .9rem 1.4rem;
  background: #fafcff;
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .AuthForm { max-width: 95vw; border-radius: 12px; }
  .Sidebar { transform: translateX(-100%); transition: transform .3s ease; }
  .Sidebar.Open { transform: translateX(0); }
  .MainContent { margin-left: 0; }
  .PageContent { padding: 1rem; }
  .StatsGrid { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------------------------------------
   TABLE SKELETON LOADER
   -------------------------------------------------------------------------- */
.SkeletonRow td { padding: .7rem 1rem; }
.SkeletonCell {
  height: 14px; border-radius: 4px;
  background: linear-gradient(90deg, #e8edf3 25%, #f4f7fa 50%, #e8edf3 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.4s infinite;
  display: inline-block; vertical-align: middle;
}
@keyframes skeletonShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --------------------------------------------------------------------------
   FLASH MESSAGE BADGES
   -------------------------------------------------------------------------- */
.CustomAlertGroup {
  display: flex; flex-direction: column; gap: .55rem; margin-bottom: 1.25rem;
}
.CustomAlert {
  display: flex; align-items: center; gap: .65rem;
  padding: .65rem 1rem; border-radius: 8px;
  font-size: .85rem; font-weight: 500; line-height: 1.4;
  border: 1px solid transparent; position: relative;
  animation: flashSlideIn .2s ease;
}
@keyframes flashSlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.CustomAlertIcon { font-size: .95rem; flex-shrink: 0; }
.CustomAlert span { flex: 1; }
.CustomAlertClose {
  background: none; border: none; cursor: pointer; padding: .1rem .2rem;
  opacity: .5; font-size: .8rem; line-height: 1; flex-shrink: 0;
  transition: opacity .15s;
}
.CustomAlertClose:hover { opacity: 1; }

.CustomAlertSuccess { background: rgba(40,167,69,.09); border-color: rgba(40,167,69,.25); color: #1a6e30; }
.CustomAlertSuccess .CustomAlertIcon { color: #28a745; }

.CustomAlertDanger { background: rgba(229,35,34,.08); border-color: rgba(229,35,34,.22); color: #9b1010; }
.CustomAlertDanger   .CustomAlertIcon { color: var(--color-danger); }

.CustomAlertWarning { background: rgba(255,152,0,.1); border-color: rgba(255,152,0,.3); color: #7a4800; }
.CustomAlertWarning .CustomAlertIcon { color: #e65100; }

.CustomAlertInfo { background: rgba(0,159,227,.09); border-color: rgba(0,159,227,.25); color: #024993; }
.CustomAlertInfo    .CustomAlertIcon { color: var(--color-primary); }

/* --------------------------------------------------------------------------
   TOPBAR PROFILE DROPDOWN
   -------------------------------------------------------------------------- */
.TopbarProfileWrap { position: relative; }

.TopbarProfile {
  display: flex; align-items: center; gap: .65rem; cursor: pointer;
  background: none; border: none; padding: .3rem .5rem; border-radius: 8px;
  transition: background .15s;
}
.TopbarProfile:hover { background: var(--color-light); }

.TopbarChevron {
  font-size: .65rem; color: var(--color-muted); margin-left: .1rem;
  transition: transform .2s;
}
.ProfileDropdown.Open ~ * .TopbarChevron, .TopbarProfile[aria-expanded="true"] .TopbarChevron {
  transform: rotate(180deg);
}

.ProfileDropdown {
  display: none; position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 220px; background: #fff;
  border: 1px solid var(--color-border); border-radius: 12px;
  box-shadow: 0 8px 32px rgba(2,73,147,.13);
  z-index: 1050; overflow: hidden;
  animation: dropdownIn .15s ease;
}
.ProfileDropdown.Open { display: block; }

@keyframes dropdownIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.ProfileDropdownHeader {
  padding: .85rem 1rem .7rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-light);
}

.ProfileDropdownBody { padding: .35rem 0; }
.ProfileDropdownFooter {
  border-top: 1px solid var(--color-border); padding: .35rem 0;
}

.ProfileDropdownItem {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem 1rem; font-size: .84rem; font-weight: 500;
  color: var(--color-text); text-decoration: none;
  transition: background .12s, color .12s;
}
.ProfileDropdownItem:hover { background: var(--color-light); color: var(--color-primary-dark); }
.ProfileDropdownItem i { width: 16px; text-align: center; color: var(--color-muted); }
.ProfileDropdownItem:hover i { color: var(--color-primary); }

.ProfileDropdownLogout { color: var(--color-danger); }
.ProfileDropdownLogout i { color: var(--color-danger); }
.ProfileDropdownLogout:hover { background: rgba(229,35,34,.07); color: var(--color-danger); }

/* Layout */
.ProfileLayout { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
.ProfileLeftCol { display: flex; flex-direction: column; gap: 1.25rem; }

/* Card header inner row (icon + title) */
.ProfileCardHeaderInner { display: flex; align-items: center; gap: .6rem; }
.ProfileIconPrimary { color: var(--color-primary); }

/* Account info — user row + avatar */
.ProfileUserRow { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1.25rem; }
.ProfileAvatar { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; font-size: 1.2rem; flex-shrink: 0; }
.ProfileUserName { font-weight: 700; color: var(--color-primary-dark); font-size: .95rem; }
.ProfileUserRole { font-size: .78rem; color: var(--color-primary); font-weight: 600; margin-top: .1rem; }

/* Info grid rows */
.ProfileInfoGrid { display: grid; gap: .6rem; }
.ProfileInfoRow, .ProfileInfoRowLast { display: flex; justify-content: space-between; font-size: .83rem; padding: .5rem 0; }
.ProfileInfoRow { border-bottom: 1px solid var(--color-border); }
.ProfileInfoLabel { color: var(--color-muted); }
.ProfileInfoValue { font-weight: 600; color: var(--color-primary-dark); }

/* Password form footer */
.ProfileFormFooter { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--color-border); }
.ProfileFormGroupLast { margin-bottom: 0; }

/* Password special rule spans both grid columns */
.PwdReqItem[data-rule="special"] { grid-column: 1 / -1; }

/* Card header inner (icon + title row) */
.CardHeaderInner { display: flex; align-items: center; gap: .6rem; }

/* Primary-color icon */
.IconPrimary { color: var(--color-primary); }

/* Small count text in card header right */
.CardCount { font-size: .8rem; color: var(--color-muted); }

/* Card body with zero padding (flush list/table) */
.CardBodyFlush { padding: 0; }

/* Centered empty state block */
.EmptyState { text-align: center; padding: 2.5rem; color: var(--color-muted); }
.EmptyStateIcon { font-size: 1.8rem; display: block; margin-bottom: .6rem; }
.EmptyStateTitle { font-weight: 600; font-size: .95rem; color: var(--color-text); margin: 0 0 .3rem; }
.EmptyStateText { font-size: .875rem; margin: 0; }

/* Table horizontal scroll wrapper */
.TableWrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.TableWrap .DataTable,
.table-responsive .DataTable { min-width: 600px; }

/* Table cell style helpers */
.DataTable td.TableCellIndex, .DataTable th.TableCellIndex { color: var(--color-muted); font-size: .8rem; }
.DataTable td.TableCellMedium, .DataTable th.TableCellMedium { font-weight: 500; }
.DataTable .TableCellName { font-weight: 700; color: var(--color-primary-dark); }
/* Ad-hoc relocated case - pulses to flag itself as a special/unusual state, distinct from
   the plain "Sala ocupata" green badge a normal occupied case gets. */
.RelocatedBadge {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  font-size: .78rem;
  font-weight: 700;
  color: #fff;
  background: var(--color-warning);
  border-radius: 20px;
  padding: .15rem .55rem;
  animation: RelocatedBadgePulse 1.6s ease-in-out infinite;
}

@keyframes RelocatedBadgePulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .6; }
}
.DataTable td.TableCellValue, .DataTable th.TableCellValue { font-weight: 600; color: var(--color-primary-dark); }
.DataTable td.TableCellAmount, .DataTable th.TableCellAmount { font-weight: 700; color: var(--color-primary); }
.DataTable td.TableCellMuted, .DataTable th.TableCellMuted { color: var(--color-muted); font-size: .88rem; }
.DataTable td.TableCellSm, .DataTable th.TableCellSm { font-size: .88rem; }
.DataTable td.TableCellDate, .DataTable th.TableCellDate { font-size: .82rem; color: var(--color-muted); white-space: nowrap; }
.DataTable td.TableCellEmpty, .DataTable th.TableCellEmpty { text-align: center; color: var(--color-muted); padding: 2rem; }
.DataTable td.TableCellEmpty .TableCellEmptyIcon, .DataTable th.TableCellEmpty .TableCellEmptyIcon { font-size: 1.5rem; display: block; margin-bottom: .5rem; opacity: .55; }
.DataTable td.CellError { text-decoration: underline; }

/* Inline delete form */
.FormInline { display: inline; }

.Modal .modal-footer .CustomButton:disabled { opacity: .55; cursor: not-allowed; }

.CustomButton:disabled .AddConsSubmitIconDisabled { display: inline; }
.CustomButton:disabled .AddConsSubmitIconEnabled { display: none; }


/* Breadcrumb row */
.Breadcrumb { margin-bottom: 1.5rem; }
.BreadcrumbLink { color: var(--color-primary); text-decoration: none; font-size: .85rem; }
.BreadcrumbLink i { margin-right: .35rem; }

/* Muted placeholder text in card body */
.PlaceholderText { color: var(--color-muted); font-size: .88rem; margin: 0; }
/* Skeleton cell width variants */
.SkeletonXS { width: 20px; }
.SkeletonSM { width: 60px; }
.SkeletonMD { width: 80px; }

.SkeletonLG { width: 100px; }
.SkeletonXL { width: 110px; }
.Skeleton2XL { width: 140px; }

/* --------------------------------------------------------------------------
   USERS PAGE — TREE VIEW
   -------------------------------------------------------------------------- */
.users-email-row { display: flex; align-items: center; gap: .6rem; }
.users-avatar-sm { width: 30px; height: 30px; font-size: .65rem; flex-shrink: 0; }

/* Admin group row */
.TreeAdminRow > td { background: var(--color-light); }
.TreeAdminRow > td:first-child { border-left: 3px solid var(--color-primary-dark); }
.TreeAdminAvatar { width: 36px; height: 36px; font-size: .75rem; flex-shrink: 0; }
.TreeAdminName { font-weight: 700; font-size: .88rem; color: var(--color-primary-dark); display: flex; align-items: center; gap: .4rem; }
.TreeAdminEmail { font-size: .76rem; color: var(--color-muted); margin-top: .1rem; display: flex; align-items: center; gap: .4rem; }

/* User rows */
.TreeUserRow > td { background: #fff; }
.TreeUserCell { display: flex; align-items: center; gap: .5rem; }

/* Tree connector lines (└ / ├) */
.TreeConnector { flex-shrink: 0; width: 24px; height: 38px; position: relative; }
.TreeConnector::before { content: ''; position: absolute; left: 10px; top: 0; width: 1.5px; background: var(--color-border); }
.TreeConnector::after  { content: ''; position: absolute; left: 10px; top: 50%; width: 14px; height: 1.5px; background: var(--color-border); transform: translateY(-50%); }
.TreeConnector--mid::before  { top: 0; bottom: 0; }
.TreeConnector--last::before { top: 0; bottom: 50%; }

/* Orphan group (users with no admin) */
.TreeOrphanRow > td { background: #f5f5f5; border-left: 3px solid var(--color-border); padding: .55rem 1rem; }
.TreeOrphanHeader { display: flex; align-items: center; gap: .45rem; }
.TreeOrphanHeader i { color: var(--color-muted); font-size: .78rem; }
.TreeOrphanLabel { font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--color-muted); }

/* Empty group placeholder */
.TreeEmptyRow > td { background: var(--color-bg); }
.TreeEmptyCell { display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem; font-size: .8rem; color: var(--color-muted); font-style: italic; }

/* --------------------------------------------------------------------------
   TOPBAR DROPDOWN HEADER
   -------------------------------------------------------------------------- */
.DropdownHeaderName { font-weight: 700; font-size: .85rem; color: var(--color-primary-dark); }
.DropdownHeaderRole { font-size: .72rem; color: var(--color-muted); margin-top: .1rem; }

/* --------------------------------------------------------------------------
   SIDEBAR
   -------------------------------------------------------------------------- */
.SidebarAdminSep { margin-top: .5rem; }

.CimpSubmitRow { display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; }

/* Step indicator */
.CimpSteps {
    display: flex; align-items: center; justify-content: center;
    gap: 0; margin-bottom: 1.5rem; flex-wrap: wrap;
}
.CimpStep {
    display: flex; align-items: center; gap: .5rem; padding: .4rem .8rem;
    font-size: .84rem; color: var(--color-muted); font-weight: 500;
}
.CimpStepNum {
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .78rem; font-weight: 700;
    background: var(--color-border); color: var(--color-muted);
    transition: all .2s;
}
.CimpStepActive .CimpStepNum {
    background: var(--color-primary); color: #fff;
}
.CimpStepActive { color: var(--color-primary-dark); }
.CimpStepDone .CimpStepNum {
    background: #16a34a; color: #fff;
}
.CimpStepDone { color: #16a34a; }
.CimpStepLine {
    width: 40px; height: 2px; background: var(--color-border); margin: 0 .25rem;
}
.CimpStepLineDone { background: #16a34a; }
.CimpStepsDone {
    display: flex; align-items: center; justify-content: center; gap: .55rem;
    padding: .35rem 0; font-weight: 600; font-size: .88rem;
}
.CimpStepsDoneIcon { font-size: 1.15rem; }
.CimpStepsSuccess { color: #16a34a; }
.CimpStepsWarning { color: #d97706; }
.CimpStepsDanger  { color: #dc2626; }

/* Upload drop zone */
.CimpUploadZone {
    border: 2px dashed var(--color-border); border-radius: var(--border-radius);
    padding: 2.5rem 1.5rem 1.5rem; text-align: center;
    transition: all .2s; cursor: pointer; position: relative;
}
.CimpUploadZone:hover, .CimpDropActive {
    border-color: var(--color-primary); background: rgba(0, 123, 255, .03);
}
.CimpUploadIcon {
    font-size: 2.5rem; color: var(--color-primary); margin-bottom: .75rem;
    opacity: .7;
}
.CimpUploadText {
    font-size: .95rem; font-weight: 600; color: var(--color-text);
    margin-bottom: .25rem;
}
.CimpUploadSubtext {
    font-size: .8rem; color: var(--color-muted);
}
.CimpFileHidden {
    position: absolute; left: -9999px; opacity: 0;
}
.CimpFilePreview {
    display: flex; align-items: center; gap: .75rem;
    background: var(--color-light); border-radius: var(--border-radius);
    padding: .75rem 1rem; margin: 1rem auto 0; max-width: 340px;
}
.CimpFileIcon {
    font-size: 1.5rem; color: var(--color-primary);
}
.CimpFileName {
    font-size: .88rem; font-weight: 600; color: var(--color-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1;
}
.CimpFileRemove {
    background: none; border: none; cursor: pointer; color: var(--color-muted);
    font-size: 1rem; padding: .2rem; border-radius: 4px;
    transition: color .15s, background .15s;
}
.CimpFileRemove:hover {
    color: var(--color-danger); background: rgba(220, 53, 69, .08);
}

/* Preset row & submit row */
.CimpSubmitRow a { text-decoration: none; }

/* Preview table */
.DataTablePreview th { white-space: nowrap; }
.DataTablePreview td { white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }

.CimpPreviewCardBody { overflow-x: auto; }
.CimpPreview-table {
    font-size: .82rem;
}
.CimpPreview-table th {
    background: var(--color-light); font-weight: 600;
    white-space: nowrap; font-size: .78rem; text-transform: uppercase;
    letter-spacing: .3px;
}
.CimpPreview-table td {
    white-space: nowrap; max-width: 200px; overflow: hidden;
    text-overflow: ellipsis;
}

/* Flash highlight when a pending row transitions to its final state */
@keyframes cimpFlash {
    0% { background-color: #eff6ff; }
    100% { background-color: transparent; }
}

/* Responsive */
@media (max-width: 640px) {
    .CimpSteps { gap: .25rem; }
    .CimpStepLine { width: 20px; }
}

/* --------------------------------------------------------------------------
   SHARED PAGINATION — users, history, patients pages
   -------------------------------------------------------------------------- */
.Pagination {
    display: flex; align-items: center; justify-content: space-between;
    padding: .9rem 1.5rem 1.1rem; border-top: 1px solid var(--color-border);
    flex-wrap: wrap; gap: .75rem;
}
.PaginationNav { display: flex; align-items: center; gap: .6rem; }
.PaginationBtn { padding: .32rem .7rem; font-size: .85rem; line-height: 1.4; }
.PaginationBtn[disabled], .PaginationBtn:disabled { opacity: .35; cursor: not-allowed; pointer-events: none; }
.PaginationInfo { font-size: .84rem; color: var(--color-muted); min-width: 9rem; text-align: center; }
.PaginationPerPageWrap { display: flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--color-muted); }
.PaginationPerPageSelect {
    padding: .22rem .5rem; font-size: .82rem;
    border: 1px solid var(--color-border); border-radius: var(--border-radius);
    background: #fff; color: var(--color-text); cursor: pointer;
}
.PaginationPerPageSelect:focus { outline: none; border-color: var(--color-primary); }

/* --------------------------------------------------------------------------
   ERROR PAGES (404, 403, 500, generic)
   -------------------------------------------------------------------------- */
.ErrorCode {
  font-size: 5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-primary-dark);
  margin-bottom: .35rem;
  letter-spacing: -.04em;
}

/* View button in user table */
.TableActionBtnView {
  color: var(--color-primary-dark);
  background: var(--color-light);
  border: 1px solid var(--color-border);
  border-radius: 7px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  transition: background var(--transition), color var(--transition);
}
.TableActionBtnView:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   Permission Groups List (redesigned permissions page)
   -------------------------------------------------------------------------- */
.PermList {
  list-style: none;
  padding: 0;
  margin: 0;
}
.PermItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition);
}
.PermItem:last-child { border-bottom: none; }
.PermItem:hover { background: var(--color-bg); }
.PermItemLabel {
  flex: 1;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.PermItemText {
  font-size: .9rem;
  font-weight: 500;
  color: var(--color-text);
}
.PermItemKey {
  font-size: .73rem;
  color: var(--color-muted);
  font-family: monospace;
  letter-spacing: .01em;
}
.PermSwitch {
  flex-shrink: 0;
  cursor: pointer;
  width: 2.6em !important;
  height: 1.4em !important;
}
.PermGroup + .PermGroup { border-top: 2px solid var(--color-bg); }

/* Select-all pill button on permission group header */
.PermSelectAllPill {
  cursor: pointer;
  user-select: none;
  margin: 0;
}
.PermSelectAllPill input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.PermSelectAllPillInner {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .38rem 1rem;
  border-radius: 999px;
  border: 1.5px solid var(--color-border);
  background: #fff;
  color: var(--color-muted);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .01em;
  transition: border-color .2s ease, color .2s ease, background .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}
.PermSelectAllPill:hover .PermSelectAllPillInner {
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 159, 227, .14);
}
.PermSelectAllPill input:checked ~ .PermSelectAllPillInner {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 3px 10px rgba(0, 80, 160, .28);
}
.PermSelectAllPill input:checked ~ .PermSelectAllPillInner i {
  animation: permCheckPop .22s ease;
}
@keyframes permCheckPop {
  0%   { transform: scale(.7); }
  60%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* Inline permission row: text + switch in one cell */
.PermItemRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  gap: 1.5rem;
}
.PermItemRow .PermItemRowInfo {
  flex: 1;
  gap: .25rem;
}

/* Import config run-import CTA banner */
.ImportRunBanner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
  color: #fff;
  border-radius: var(--border-radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}
.ImportRunBannerIcon {
  font-size: 2rem;
  opacity: .9;
  flex-shrink: 0;
}
.ImportRunBannerBody { flex: 1; }
.ImportRunBannerTitle {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: .2rem;
}
.ImportRunBannerSub {
  font-size: .85rem;
  opacity: .85;
}
.ImportRunBannerBtn {
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
  border-radius: var(--border-radius);
  padding: .65rem 1.5rem;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.ImportRunBannerBtn:hover { background: rgba(255,255,255,.3); color: #fff; }

/* --------------------------------------------------------------------------
   Import Module — config selection boxes (run/index)
   -------------------------------------------------------------------------- */
.ImportConfigBoxGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1rem;
}
.ImportConfigBox {
  border: 2px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 1.4rem 1rem 1.1rem;
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition), background var(--transition);
  background: #fff;
  text-align: center;
  user-select: none;
  position: relative;
}
.ImportConfigBox:hover {
  border-color: var(--color-primary);
  box-shadow: 0 2px 14px rgba(0,159,227,.14);
  transform: translateY(-2px);
}
.ImportConfigBoxSelected {
  border-color: var(--color-primary-dark) !important;
  background: var(--color-light) !important;
  box-shadow: 0 3px 18px rgba(2,73,147,.16) !important;
  transform: translateY(-2px);
}

.ImportConfigBoxIcon {
  font-size: 2.1rem;
  margin-bottom: .45rem;
  line-height: 1;
}
.ImportConfigBoxType {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--color-muted);
  margin-bottom: .3rem;
  text-transform: uppercase;
}
.ImportConfigBoxName {
  font-size: .9rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: .25rem;
  word-break: break-word;
}
.ImportConfigBoxDesc {
  font-size: .75rem;
  color: var(--color-muted);
  margin-bottom: .4rem;
  line-height: 1.4;
}
.ImportConfigBoxScore {
  font-size: .75rem;
  font-weight: 600;
  margin-top: .35rem;
}
.ImportConfigBoxScoreGreen { color: #16a34a; }
.ImportConfigBoxScoreRed   { color: #dc2626; }

.ImportConfigBoxGreen {
  border-color: #16a34a;
  background: linear-gradient(135deg, #f0fdf4 0%, #fff 100%);
}
.ImportConfigBoxGreen:hover {
  border-color: #15803d;
  box-shadow: 0 2px 14px rgba(22,163,74,.18);
}
.ImportConfigBoxRed {
  border-color: #dc2626;
  background: linear-gradient(135deg, #fff5f5 0%, #fff 100%);
}
.ImportConfigBoxRed:hover {
  border-color: #b91c1c;
  box-shadow: 0 2px 14px rgba(220,38,38,.15);
}
.ImportConfigBoxDisabled {
  opacity: .46;
  pointer-events: none;
  filter: grayscale(35%);
}
.ImportConfigBoxManual {
  border: 2px dashed var(--color-primary);
  background: linear-gradient(135deg, #f0f7ff 0%, #fff 100%);
}
.ImportConfigBoxManual:hover {
  border-color: var(--color-primary-dark);
  box-shadow: 0 2px 14px rgba(0,159,227,.22);
  transform: translateY(-2px);
}
.ImportConfigBoxPriority {
  position: absolute;
  top: .35rem;
  right: .4rem;
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  font-size: .62rem;
  font-weight: 700;
  color: var(--color-muted);
  background: var(--bg-secondary, #f3f4f6);
  border: 1px solid var(--color-border);
  border-radius: 99px;
  padding: .15rem .45rem;
  line-height: 1.2;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  white-space: nowrap;
}
.ImportConfigBoxSelected .ImportConfigBoxPriority {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary-dark);
}
/* Execution queue */
.ImportRunQueue {
  border-radius: var(--border-radius);
  border: 1.5px solid var(--color-border);
  background: #f8fafc;
  overflow: hidden;
}
.ImportRunQueueHeader {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .85rem;
  border-bottom: 1px solid var(--color-border);
  background: #fff;
  font-size: .78rem;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.ImportRunQueueItems {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0;
}
.ImportRunQueueItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .6rem .9rem;
  gap: .15rem;
  position: relative;
}
.ImportRunQueueItem:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: var(--color-border);
}
.ImportRunQueueNum {
  background: var(--color-primary);
  color: #fff;
  border-radius: 99px;
  width: 1.4rem;
  height: 1.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .68rem;
  font-weight: 800;
  flex-shrink: 0;
  margin-bottom: .1rem;
}
.ImportRunQueueItemName {
  font-size: .78rem;
  font-weight: 600;
  color: var(--color-text);
  max-width: 130px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ImportRunQueueItemPrio {
  font-size: .65rem;
  color: var(--color-muted);
  font-weight: 500;
}
.ImportRunQueueArrow {
  display: none;
}

/* --- Multi-config mode selector ------------------------------------------ */
.ImportModeSelectorCard {
  border: 1.5px solid var(--color-primary);
  border-radius: var(--border-radius);
  overflow: hidden;
  background: linear-gradient(135deg, #f0f7ff 0%, #fff 100%);
}
.ImportModeSelectorHeader {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1rem;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-primary);
  background: rgba(0,159,227,.07);
  border-bottom: 1px solid rgba(0,159,227,.18);
}
.ImportModeSelectorOptions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.ImportModeOption {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .85rem 1rem;
  background: transparent;
  border: none;
  border-right: 1px solid var(--color-border);
  cursor: pointer;
  text-align: left;
  transition: background .15s;
}
.ImportModeOption:last-child { border-right: none; }
.ImportModeOption:hover { background: rgba(0,159,227,.06); }
.ImportModeOptionActive { background: rgba(0,159,227,.12) !important; }
.ImportModeOptionIcon {
  font-size: 1.5rem;
  color: var(--color-muted);
  padding-top: .1rem;
  flex-shrink: 0;
}
.ImportModeOptionActive .ImportModeOptionIcon { color: var(--color-primary); }
.ImportModeOptionBody { flex: 1; }
.ImportModeOptionTitle {
  font-size: .88rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: .15rem;
}
.ImportModeOptionActive .ImportModeOptionTitle { color: var(--color-primary); }
.ImportModeOptionDesc {
  font-size: .76rem;
  color: var(--color-muted);
  line-height: 1.4;
}
.ImportModeOptionCheck {
  font-size: 1.1rem;
  color: var(--color-primary);
  flex-shrink: 0;
  padding-top: .1rem;
}
@media (max-width: 576px) {
  .ImportModeSelectorOptions { grid-template-columns: 1fr; }
  .ImportModeOption { border-right: none; border-bottom: 1px solid var(--color-border); }
  .ImportModeOption:last-child { border-bottom: none; }
}

/* --- Progress step list -------------------------------------------------- */
.ImportProgressSteps { margin-top: .6rem; display: flex; flex-direction: column; gap: .3rem; }
.ImportProgressStep  { display: flex; align-items: center; gap: .5rem; font-size: .82rem; transition: opacity .2s, color .2s; }
.ImportProgressStep .IpsIcon { width: 1rem; text-align: center; flex-shrink: 0; }
.ImportProgressStepPending { opacity: .4; }
.ImportProgressStepRunning { opacity: 1; font-weight: 600; color: var(--color-primary); }
.ImportProgressStepDone    { opacity: .55; }
.ImportProgressStepError   { opacity: 1; color: #dc2626; }
.ImportProgressStepRunning .IpsIcon { animation: spin .8s linear infinite; }
.ImportProgressStepDone    .IpsIcon { color: #16a34a; }
.ImportProgressStepError   .IpsIcon { color: #dc2626; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Post-execution summary banner --------------------------------------- */
.ImportExecSummary        { border-radius: var(--border-radius); overflow: hidden; margin-bottom: 1.25rem; }
.ImportExecSummarySuccess { border: 1.5px solid #16a34a; background: linear-gradient(135deg, #f0fdf4 0%, #fff 100%); }
.ImportExecSummaryWarning { border: 1.5px solid #d97706; background: linear-gradient(135deg, #fffbeb 0%, #fff 100%); }
.ImportExecSummaryDanger  { border: 1.5px solid #dc2626; background: linear-gradient(135deg, #fff5f5 0%, #fff 100%); }
.ImportExecSummaryHeader  { display: flex; align-items: center; gap: .5rem; padding: .65rem 1rem; font-size: .85rem; font-weight: 700; }
.ImportExecSummarySuccess .ImportExecSummaryHeader { color: #15803d; background: rgba(22,163,74,.08); }
.ImportExecSummaryWarning .ImportExecSummaryHeader { color: #b45309; background: rgba(217,119,6,.08); }
.ImportExecSummaryDanger  .ImportExecSummaryHeader { color: #b91c1c; background: rgba(220,38,38,.08); }
.ImportExecSummaryRows    { padding: .5rem .75rem .65rem; display: flex; flex-direction: column; gap: .4rem; }
.ImportExecSummaryRow     { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.ImportExecSummaryConfigName { font-size: .8rem; font-weight: 600; min-width: 120px; color: var(--color-text); }

/* Batch result animation */
.ImportBatchResult {
  animation: importBatchFadeIn .35s ease both;
}
@keyframes importBatchFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Result table collapse */
.ImportResultTableWrap {
  position: relative;
}
.ImportResultCollapsed {
  max-height: 260px;
  overflow: hidden;
}
.ImportResultCollapsed::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.97) 100%);
  pointer-events: none;
}
.ImportResultExpandBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  width: 100%;
  margin-top: .5rem;
  padding: .45rem 1rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--color-primary);
  background: transparent;
  border: 1.5px dashed var(--color-border);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.ImportResultExpandBtn:hover {
  border-color: var(--color-primary);
  background: var(--color-light, #e8f4fd);
}
.ImportManualPanel {
  padding: 1rem 1.1rem;
  background: var(--color-light);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
}
.ImportManualPanelTitle {
  font-size: .88rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: .75rem;
}
.ImportManualProcedureInfo {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .8rem;
  font-family: 'Courier New', monospace;
  color: var(--color-muted);
  background: #f4f6f8;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: .35rem .7rem;
}
.CfgFieldHint {
  display: block;
  margin-top: .3rem;
  font-size: .76rem;
  color: var(--color-muted);
}
.ImportHeaderMapPanel {
  padding: .9rem 1rem;
  background: #f8fafc;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
}
.ImportHeaderMapTable {
  width: 100%;
  margin-bottom: 0;
}
.ImportHeaderMapTable td {
  vertical-align: middle;
}
.ImportHeaderMapColName {
  font-size: .82rem;
  padding: .15rem .4rem;
  background: #e9ecef;
  border-radius: 3px;
  color: var(--color-text);
}
.ImportHeaderMapReq {
  color: var(--color-danger, #dc3545);
  font-weight: 700;
}
.ImportHeaderMapBadge {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  font-size: .68rem;
  padding: .1rem .35rem;
  border-radius: 3px;
  font-weight: 500;
  vertical-align: middle;
  line-height: 1.4;
  margin-left: .25rem;
}
.ImportHeaderMapBadgeValid {
  background: #ede9fe;
  color: #5b21b6;
}
.ImportHeaderMapBadgeLookup {
  background: #e0f2fe;
  color: #0369a1;
}
.ImportHeaderMapWarning {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .8rem;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 4px;
  padding: .4rem .75rem;
}
/* Config mappings — circle-check toggle */
.MappingToggle {
  display: inline-flex; align-items: center; cursor: pointer; line-height: 1;
}
.MappingToggle input[type="checkbox"] {
  position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0;
}
.MappingToggleIcon {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--color-border); background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .65rem; color: transparent;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.MappingToggle:hover .MappingToggleIcon { border-color: var(--color-primary); }
.MappingToggle input:checked + .MappingToggleIcon {
  background: var(--color-primary); border-color: var(--color-primary); color: #fff;
  box-shadow: 0 0 0 3px rgba(0,159,227,.15);
}
/* Run page — field override table */
.ImportHeaderMapTable td {
  vertical-align: middle;
  padding: .5rem .6rem;
}
.ImportHeaderMapTable .FieldInputWrap {
  margin-bottom: 0;
}

/* Match / no-match banners */
.ImportMatchBanner {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 1px solid #86efac;
  border-radius: var(--border-radius);
  padding: .9rem 1.1rem;
  color: #15803d;
  font-size: .88rem;
}
.ImportMatchBanner > i { font-size: 1.1rem; margin-top: .1rem; flex-shrink: 0; color: #16a34a; }
.ImportNoMatchNotice {
  display: flex;
  align-items: center;
  gap: .65rem;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: var(--border-radius);
  padding: .75rem 1rem;
  color: #1d4ed8;
  font-size: .88rem;
}
.ImportNoMatchNotice > i { flex-shrink: 0; }

/* --------------------------------------------------------------------------
   Import Module — visual file-type selector (configs/form & modals)
   -------------------------------------------------------------------------- */
.ImportFileTypeGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  margin-top: .4rem;
}
.ImportFileTypeBox {
  position: relative;
  display: block;
}
.ImportFileTypeBox input[type="radio"] {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  margin: 0;
}
.ImportFileTypeLabel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  border: 2px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 1.1rem .5rem .9rem;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
  background: #fff;
  text-align: center;
  user-select: none;
}
.ImportFileTypeLabel:hover {
  border-color: var(--color-primary);
  box-shadow: 0 2px 10px rgba(0,159,227,.1);
}
.ImportFileTypeBox input[type="radio"]:checked + .ImportFileTypeLabel {
  border-color: var(--color-primary-dark);
  background: var(--color-light);
  box-shadow: 0 2px 12px rgba(2,73,147,.12);
}
.ImportFileTypeIcon {
  font-size: 1.7rem;
  line-height: 1;
}
.ImportFileTypeName {
  font-weight: 700;
  font-size: .88rem;
  color: var(--color-text);
}
.ImportFileTypeDesc {
  font-size: .72rem;
  color: var(--color-muted);
  line-height: 1.3;
}

/* Delimiter quick-pick buttons */
.CfgDelimBtn {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: .3rem .7rem;
  font-size: .78rem;
  cursor: pointer;
  color: var(--color-text);
  transition: all var(--transition);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.CfgDelimBtn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.CfgDelimBtnActive {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: #fff;
}
.CfgDelimBtnActive:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

@media (max-width: 576px) {
  .ImportConfigBoxGrid { grid-template-columns: 1fr 1fr; }
  .ImportFileTypeGrid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Table extras
   -------------------------------------------------------------------------- */
.TableCellCode {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .8rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--color-text);
}

/* DASHBOARD HOME */

.StatSub {
    font-size: .75rem;
    color: var(--color-text-secondary, #64748b);
    margin-top: .2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.StatSub--alert {
    color: var(--color-danger);
    font-weight: 600;
}

.ActivityList {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ActivityItem {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: .75rem .5rem;
    border-radius: 10px;
    transition: background var(--transition);
}

.ActivityItem:hover {
    background: var(--color-bg);
}

.ActivityIcon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--color-light);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: .8rem;
    position: relative;
    z-index: 1;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px var(--color-border);
}

/* Timeline connector - a short vertical line bridging one row's icon down to the next,
   giving the activity feed a real timeline look instead of a plain divided list. */
.ActivityItem:not(:last-child) .ActivityIcon::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    width: 2px;
    height: 1.5rem;
    background: var(--color-border);
    transform: translateX(-50%);
    z-index: -1;
}

.ActivityBody {
    flex: 1;
    min-width: 0;
}

.ActivityLabel {
    font-size: .875rem;
    font-weight: 500;
    color: #1e293b;
}

.ActivityMeta {
    font-size: .75rem;
    color: #64748b;
    margin-top: .1rem;
}

.CardFooter {
    padding: .75rem 1.25rem;
    border-top: 1px solid var(--color-border, #e2e8f0);
}

.LinkSm {
    font-size: .8rem;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
}

.LinkSm:hover {
    color: var(--color-primary-dark);
}

.QuickLinks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .75rem;
}

.QuickLinkItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    padding: .9rem .5rem;
    border-radius: .5rem;
    background: var(--color-light);
    color: var(--color-primary-dark);
    text-decoration: none;
    font-size: .8rem;
    font-weight: 500;
    text-align: center;
    transition: background .15s, transform .1s;
}

.QuickLinkItem i {
    font-size: 1.4rem;
    color: var(--color-primary);
}

.QuickLinkItem:hover {
    background: var(--color-primary);
    color: #fff;
    transform: translateY(-2px);
}

.QuickLinkItem:hover i {
    color: #fff;
}

/* --------------------------------------------------------------------------
   Page loader & slow-response message
   -------------------------------------------------------------------------- */
#pageLoader {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(2, 73, 147, 0.35);
  backdrop-filter: blur(1px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#pageLoader.active { display: flex; }

.pageLoaderRing {
  width: 52px;
  height: 52px;
  border: 5px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: pageLoaderSpin 0.8s linear infinite;
}
@keyframes pageLoaderSpin {
  to { transform: rotate(360deg); }
}

.pageLoaderSlowMsg {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 2.25rem;
  padding: 1rem 1.5rem 1rem 1.15rem;
  max-width: min(400px, calc(100vw - 2.5rem));
  overflow: hidden;
  min-height: 0;
  text-align: left;

  background: #ffffff;
  border: 1px solid rgba(1, 53, 117, 0.12);
  border-left: 3px solid #024993;
  border-radius: 16px;

  color: #013575;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.01em;

  box-shadow:
    0 8px 40px rgba(1, 53, 117, 0.25),
    0 2px 12px rgba(1, 53, 117, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);

  animation: pageLoaderMsgIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.pageLoaderSlowMsg::before {
  content: '\f017';
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 1.15rem;
  flex-shrink: 0;
  color: #024993;
  animation: pageLoaderIconPulse 2.5s ease-in-out infinite;
}
.pageLoaderSlowMsg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(1, 53, 117, 0.04) 50%,
    transparent 70%
  );
  background-size: 200% 100%;
  animation: pageLoaderCardShimmer 2.5s ease-in-out infinite;
  pointer-events: none;
}
.pageLoaderSlowMsg:empty { display: none; }

@keyframes pageLoaderMsgIn {
  from { opacity: 0; transform: translateY(20px) scale(0.92); }
  to { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes pageLoaderIconPulse {
  0%, 100% { transform: scale(1)    rotate(0deg);  opacity: 0.8; }
  50% { transform: scale(1.2)  rotate(-8deg); opacity: 1;   }
}
@keyframes pageLoaderCardShimmer {
  0% { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* --------------------------------------------------------------------------
   Download loader overlay
   -------------------------------------------------------------------------- */
#download-loader {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

@keyframes downloadLoaderSpin {
  to { transform: rotate(360deg); }
}

.BtnLoading {
  position: relative;
  pointer-events: none;
  opacity: 0.7;
}

/* --------------------------------------------------------------------------
   ACTIVITY ICON VARIANTS + ACTION LABEL
   -------------------------------------------------------------------------- */
.ActivityIconEdit { background: var(--color-light); color: var(--color-primary-dark); }
.ActivityIconCreate { background: #e8f5e9; color: #2e7d32; }
.ActivityIconDelete { background: #fff0f0; color: var(--color-danger); }
.ActivityIconImport { background: #f3e5f5; color: #6a1b9a; }
.ActivityIconLogin { background: #e0f7fa; color: #00838f; }
.ActivityAction { font-weight: 700; color: var(--color-primary-dark); }
.ActivityTime {
  font-size: .73rem;
  color: var(--color-muted);
  margin-top: .1rem;
  display: flex;
  align-items: center;
  gap: .3rem;
}

/* --------------------------------------------------------------------------
   UI SHOWCASE / COMPONENT LIBRARY PAGE
   -------------------------------------------------------------------------- */
.DocHero {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
  border-radius: 16px;
  padding: 1.75rem 2rem;
  margin-bottom: 1.75rem;
  color: #fff;
  flex-wrap: wrap;
}
.DocHeroIcon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  flex-shrink: 0;
}
.DocHeroTitle {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 .2rem;
  letter-spacing: -.01em;
}
.DocHeroSub {
  font-size: .9rem;
  color: rgba(255,255,255,.8);
  margin: 0;
}
.DocHeroBadges {
  margin-left: auto;
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
  flex-shrink: 0;
}
.DocHeroBadges .StatusBadge {
  background: rgba(255,255,255,.18);
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
}

/* Two-column layout for the UI library page: sections | right nav */
.DocLayout {
  display: grid;
  grid-template-columns: 1fr 210px;
  gap: 2rem;
  align-items: start;
}
.DocMain { min-width: 0; }

/* Right sticky navigation sidebar */
.DocRightNav {
  position: sticky;
  top: calc(var(--topbar-height) + 1rem);
  max-height: calc(100vh - var(--topbar-height) - 2rem);
  overflow-y: auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: .85rem .65rem;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}
.DocRightNav::-webkit-scrollbar       { width: 4px; }
.DocRightNav::-webkit-scrollbar-track { background: transparent; }
.DocRightNav::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; }

.DocRightNavTitle {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--color-muted);
  padding: .3rem .55rem .2rem;
  margin-top: .25rem;
}
.DocRightNavItem {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .28rem .55rem;
  border-radius: 7px;
  font-size: .78rem;
  font-weight: 500;
  color: var(--color-muted);
  text-decoration: none;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.DocRightNavItem i { width: 14px; text-align: center; font-size: .72rem; flex-shrink: 0; }
.DocRightNavItem:hover {
  background: var(--color-light);
  color: var(--color-primary-dark);
}
.DocRightNavItem.active {
  background: var(--color-light);
  color: var(--color-primary);
  font-weight: 700;
}
.DocRightNavSep { height: 1px; background: var(--color-border); margin: .5rem .4rem; }

@media (max-width: 1200px) { .DocLayout { grid-template-columns: 1fr 185px; } }
@media (max-width: 1024px) {
  .DocLayout { grid-template-columns: 1fr; }
  .DocRightNav { display: none; }
}

.DocSection {
  margin-bottom: 3rem;
  scroll-margin-top: calc(var(--topbar-height) + 1.5rem);
}
.DocSectionHeader {
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--color-border);
}
.DocSectionTitle {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--color-primary-dark);
  margin: 0 0 .25rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.DocSectionTitle i { color: var(--color-primary); font-size: 1rem; }
.DocSectionDesc {
  font-size: .875rem;
  color: var(--color-muted);
  margin: 0;
}
.DocSubtitle {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-primary-dark);
  margin-bottom: .75rem;
  opacity: .65;
}

.DocPreview {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1rem;
}
.DocPreview.DocPreviewGap {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: flex-start;
}
.DocPreview.p-0 { padding: 0; overflow: hidden; }

.DocTable {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  font-size: .82rem;
}
.DocTableRow {
  display: grid;
  grid-template-columns: minmax(200px, auto) 1fr;
  gap: 1rem;
  padding: .55rem 1rem;
  align-items: start;
  border-bottom: 1px solid var(--color-border);
  background: #fff;
  transition: background .1s;
}
.DocTableRow:last-child { border-bottom: none; }
.DocTableRow:hover { background: #f8fafb; }
.DocTableRow code {
  font-size: .78rem;
  background: var(--color-light);
  border: 1px solid rgba(0,159,227,.2);
  border-radius: 5px;
  padding: .15rem .5rem;
  color: var(--color-primary-dark);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: nowrap;
  display: inline-block;
  align-self: start;
}
.DocTableRow > span { color: var(--color-muted); padding-top: .15rem; line-height: 1.5; }

.DocColorGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .75rem;
}
.DocColorSwatch {
  border-radius: 10px;
  padding: 1rem;
  color: #fff;
  min-height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.DocColorName {
  font-size: .78rem;
  font-weight: 700;
  opacity: .9;
}
.DocColorValue {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .72rem;
  opacity: .75;
}
.DocColorVar {
  font-size: .65rem;
  opacity: .6;
  font-style: italic;
}
/* Badge component */
.Badge {display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .65rem;border-radius:20px;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.Badge--blue {background:#e8f4fc;color:#024993}
.Badge--green {background:#e6f9f0;color:#1a7a4a}
.Badge--red {background:#fde8e8;color:#c0392b}
.Badge--gray {background:#f0f5fa;color:#5a6782}
.Badge--orange {background:#fff3e0;color:#b45309}

/* Spinner */
@keyframes spin { to { transform: rotate(360deg); } }
.Spinner {
  width: 20px; height: 20px;
  border: 2.5px solid var(--color-light);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: inline-block;
  vertical-align: middle;
}
.SpinnerSm { width: 14px; height: 14px; border-width: 2px; }
.SpinnerLg { width: 32px; height: 32px; border-width: 3px; }
.SpinnerMuted { border-color: var(--color-border); border-top-color: var(--color-muted); }
.SpinnerWhite { border-color: rgba(255,255,255,.3); border-top-color: #fff; }

/* Progress Bar */
.ProgressBar {
  height: 8px; border-radius: 99px; overflow: hidden;
  background: var(--color-border); width: 100%;
}
.ProgressBarSm { height: 4px; }
.ProgressBarLg { height: 14px; }
.ProgressBarFill { height: 100%; border-radius: 99px; transition: width .4s ease; }
.ProgressBarPrimary { background: var(--color-primary); }
.ProgressBarSuccess { background: #22c55e; }
.ProgressBarDanger { background: var(--color-danger); }
.ProgressBarWarning { background: #f97316; }

/* Toast Notifications */
@keyframes toastIn {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
.ToastStack {
  position: fixed; top: 1.25rem; right: 1.25rem; z-index: 9999;
  display: flex; flex-direction: column; gap: .5rem; width: 320px;
  pointer-events: none;
}
.ToastStack .Toast { pointer-events: auto; }
.Toast {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .85rem 1rem; border-radius: 10px; background: #fff;
  box-shadow: 0 4px 20px rgba(2,73,147,.15);
  border-left: 4px solid var(--color-border);
  animation: toastIn .25s ease;
}
.ToastSuccess { border-left-color: #22c55e; }
.ToastDanger { border-left-color: var(--color-danger); }
.ToastWarning { border-left-color: #f97316; }
.ToastInfo { border-left-color: var(--color-primary); }
.ToastIcon { font-size: 1rem; flex-shrink: 0; margin-top: .1rem; }
.ToastSuccess .ToastIcon { color: #22c55e; }
.ToastDanger  .ToastIcon { color: var(--color-danger); }
.ToastWarning .ToastIcon { color: #f97316; }
.ToastInfo    .ToastIcon { color: var(--color-primary); }
.ToastBody { flex: 1; min-width: 0; }
.ToastTitle { font-size: .84rem; font-weight: 600; color: var(--color-text); margin-bottom: .15rem; }
.ToastMsg { font-size: .78rem; color: var(--color-muted); }
.ToastClose {
  background: none; border: none; color: var(--color-muted);
  cursor: pointer; padding: .1rem .2rem; line-height: 1; font-size: .8rem; flex-shrink: 0;
}
.ToastClose:hover { color: var(--color-text); }

/* Tabs */
.TabNav {
  display: flex; gap: 0;
  border-bottom: 2px solid var(--color-border);
  margin-bottom: 1.25rem;
}
.TabNavItem {
  padding: .55rem 1.1rem; font-size: .85rem; font-weight: 500;
  color: var(--color-muted); border: none; background: none; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: color .15s, border-color .15s;
  display: inline-flex; align-items: center; gap: .35rem;
}
.TabNavItem:hover { color: var(--color-primary-dark); }
.TabNavItem.active, .TabNavItemActive {
  color: var(--color-primary-dark);
  border-bottom-color: var(--color-primary);
  font-weight: 600;
}
.TabPane { display: none; }
.TabPane.active, .TabPaneActive { display: block; }

/* Accordion */
.Accordion {
  border-radius: var(--border-radius); overflow: hidden;
  border: 1px solid var(--color-border);
}
.AccordionItem { border-bottom: 1px solid var(--color-border); }
.AccordionItem:last-child { border-bottom: none; }
.AccordionBtn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 1.25rem; background: #fff; border: none; cursor: pointer;
  font-size: .88rem; font-weight: 500; color: var(--color-text); text-align: left;
  transition: background .15s;
}
.AccordionBtn:hover { background: var(--color-bg); }
.AccordionBtn.open { color: var(--color-primary-dark); background: var(--color-light); }
.AccordionChevron { font-size: .75rem; color: var(--color-muted); transition: transform .2s; flex-shrink: 0; }
.AccordionBtn.open .AccordionChevron { transform: rotate(180deg); }
.AccordionBody {
  display: none; padding: .85rem 1.25rem;
  font-size: .85rem; color: var(--color-muted);
  border-top: 1px solid var(--color-border); background: #fafbfc;
}
.AccordionBody.open { display: block; }

/* Timeline */
.Timeline { display: flex; flex-direction: column; position: relative; }
.Timeline::before {
  content: ''; position: absolute; left: 15px; top: 0; bottom: 0;
  width: 2px; background: var(--color-border);
}
.TimelineItem { display: flex; gap: 1rem; padding-bottom: 1.5rem; position: relative; }
.TimelineItem:last-child { padding-bottom: 0; }
.TimelineDot {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; position: relative; z-index: 1;
}
.TimelineDotPrimary { background: var(--color-light); color: var(--color-primary); }
.TimelineDotSuccess { background: #e6f9f0; color: #1a7a4a; }
.TimelineDotDanger { background: #fde8e8; color: var(--color-danger); }
.TimelineDotMuted { background: var(--color-bg); color: var(--color-muted); border: 1px solid var(--color-border); }
.TimelineContent { flex: 1; padding-top: .3rem; }
.TimelineTitle { font-size: .88rem; font-weight: 500; color: var(--color-text); }
.TimelineDate { font-size: .76rem; color: var(--color-muted); margin-top: .2rem; }
.TimelineDesc { font-size: .82rem; color: var(--color-muted); margin-top: .3rem; }

/* List Group */
.ListGroup {
  list-style: none; padding: 0; margin: 0;
  border-radius: var(--border-radius);
  border: 1px solid var(--color-border); overflow: hidden;
}
.ListGroupItem {
  padding: .7rem 1.1rem; font-size: .88rem; color: var(--color-text);
  border-bottom: 1px solid var(--color-border); background: #fff;
  display: flex; align-items: center; gap: .65rem;
}
.ListGroupItem:last-child { border-bottom: none; }
a.ListGroupItem, button.ListGroupItem { cursor: pointer; text-decoration: none; transition: background .15s, color .15s; }
a.ListGroupItem:hover, button.ListGroupItem:hover { background: var(--color-light); color: var(--color-primary-dark); }
.ListGroupItemActive { background: var(--color-primary) !important; color: #fff !important; font-weight: 500; }

/* Avatar / Initials */
.Avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; font-weight: 600;
  background: var(--color-light); color: var(--color-primary-dark);
  flex-shrink: 0; font-size: .8rem; width: 36px; height: 36px;
  user-select: none;
}
.AvatarXs { width: 24px; height: 24px; font-size: .65rem; }
.AvatarSm { width: 30px; height: 30px; font-size: .72rem; }
.AvatarLg { width: 48px; height: 48px; font-size: 1rem; }
.AvatarXl { width: 64px; height: 64px; font-size: 1.2rem; }

.AvatarGreen { background: #e6f9f0; color: #1a7a4a; }
.AvatarOrange { background: #fff3e0; color: #b45309; }
.AvatarPurple { background: #f3e8ff; color: #7c3aed; }
.AvatarRed { background: #fde8e8; color: var(--color-danger); }

/* Icon color utilities */
.IconDanger { color: var(--color-danger); }

/* Error pages */
body.ErrorPage {
  background: var(--color-bg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.ErrorCard {
  width: 100%;
  max-width: 500px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 48px rgba(2,73,147,.14);
  overflow: hidden;
  border-top: 4px solid var(--color-primary);
  text-align: center;
}
.ErrorLogo {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.75rem 2rem 0;
}
.ErrorLogoImage {
  height: 60px;
  width: auto;
  margin-bottom: .5rem;
}
.ErrorLogoText {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
  opacity: .7;
}
.ErrorDivider {
  height: 1px;
  background: var(--color-border);
  margin: 1rem 2rem 0;
  opacity: .6;
}
.ErrorBody { padding: 2.25rem 2rem 2.5rem; }
.ErrorCode {
  font-size: 5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-primary-dark);
  margin-bottom: .35rem;
  letter-spacing: -.04em;
}
.ErrorCodeRed { color: var(--color-danger); }
.ErrorTitle {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: .6rem;
}
.ErrorDesc {
  font-size: .88rem;
  color: var(--color-muted);
  line-height: 1.65;
  margin-bottom: 2rem;
}
.ErrorActions {
  display: flex;
  gap: .75rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Auth icon block (check_email) */
.AuthIconWrap { text-align: center; margin-bottom: 1.5rem; }
.AuthIconLg { font-size: 3rem; color: var(--color-primary); }

/* Text utilities */
.TextDanger { color: var(--color-danger); }
.TextXs { font-size: .8rem; }

/* Table utilities */
.TableCellEmptyLg { padding: 2rem; text-align: center; }

/* Form utilities */
.FormFieldNarrow { max-width: 400px; }
.ResizeV { resize: vertical; }

/* Modal size */
.ModalDialogLg { max-width: 560px; }

/* Import run */
.CardBodyCompact { padding: .9rem 1.5rem; }
.ImportAnalyzing { text-align: center; padding: 1.5rem 1rem; }
.ImportSpinnerIcon { color: var(--color-primary); font-size: 1.6rem; }
.ImportAnalyzingText { margin: .6rem 0 0; color: var(--color-muted); font-size: .88rem; }
.ImportPreviewMeta { font-size: .82rem; color: var(--color-muted); }
.ImportMatchTitle { font-weight: 700; }
.ImportMatchSub { font-size: .82rem; font-weight: 400; opacity: .85; }
.CimpEmptyNotice { padding: 2rem; text-align: center; color: var(--color-muted); }
.CimpEmptyNoticeIcon { font-size: 1.4rem; display: block; margin-bottom: .4rem; opacity: .5; }
.CimpConfigEmpty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--color-muted);
}
.CimpConfigEmptyIcon {
  font-size: 2rem;
  opacity: .4;
  display: block;
  margin-bottom: .65rem;
}
.CimpConfigEmptyTitle {
  font-weight: 600;
  font-size: .95rem;
  color: var(--color-text);
  margin-bottom: .35rem;
}
.CimpConfigEmptyText {
  font-size: .85rem;
  line-height: 1.5;
}
/* No-configs page-level state */
.CimpNoConfigsState {
  text-align: center;
  padding: 3rem 1rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  color: var(--color-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.CimpNoConfigsIcon {
  font-size: 2.5rem;
  opacity: .35;
  margin-bottom: .75rem;
  color: var(--color-primary);
}
.CimpNoConfigsTitle {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-text);
  margin-bottom: .4rem;
}
.CimpNoConfigsText {
  font-size: .88rem;
  max-width: 420px;
  line-height: 1.55;
}

/* Import config form */
.ImportFileTypeIconXlsx { color: #16a34a; }
.ImportFileTypeIconJson { color: #d97706; }
.CfgDelimRow { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.CfgDelimInputWrap { max-width: 120px; }
.CfgDelimInput { font-family: monospace; font-size: 1rem; }
.CfgDelimBtns { display: flex; gap: .4rem; flex-wrap: wrap; }

/* Field mapping (import/configs/mappings) */
.MappingCard {
    display: flex; flex-direction: column;
    border: 1px solid var(--color-border); border-radius: 10px;
    background: #fff; margin-bottom: .75rem; overflow: hidden;
    transition: box-shadow .15s, border-color .15s;
}
.MappingCard:hover { border-color: var(--color-primary); box-shadow: 0 2px 8px rgba(0,159,227,.08); }
.MappingCard.MappingCardNew { animation: mappingSlideIn .25s ease; }
.MappingCard.MappingCardRemoving { animation: mappingSlideOut .2s ease forwards; }
@keyframes mappingSlideIn  { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
@keyframes mappingSlideOut { from { opacity:1; transform:scaleY(1); } to { opacity:0; transform:scaleY(0); transform-origin:top; } }

/* Primary row: number + fields + delete */
.MappingCardPrimary {
    display: flex; align-items: flex-end; gap: .875rem;
    padding: .875rem 1rem .875rem 1.25rem;
}
.MappingCardNum {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
    background: var(--color-primary); color: #fff;
    font-size: .75rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: .45rem;
}
.MappingCardMain {
    flex: 1; display: flex; align-items: flex-end; gap: .875rem; flex-wrap: wrap;
}
.MappingFieldGroup {
    display: flex; flex-direction: column; gap: .25rem; flex: 1; min-width: 130px;
}
.MappingFieldGroup.MappingFieldGroupValue { flex: 1.5; }
.MappingFieldLabel {
    font-size: .72rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; color: var(--color-muted); margin: 0;
}
.MappingArrowCol {
    flex-shrink: 0; color: var(--color-muted); font-size: .8rem; padding-bottom: .9rem;
}
.MappingDeleteBtn {
    flex-shrink: 0; width: 32px; height: 32px; border-radius: 6px;
    border: 1px solid #fca5a5; background: #fff1f2; color: #ef4444;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: .8rem;
    transition: background .15s, border-color .15s;
    margin-bottom: .15rem;
}
.MappingDeleteBtn:hover { background: #fee2e2; border-color: #ef4444; }

/* Options bar: required · validation · lookup */
.MappingCardOptions {
    display: flex; align-items: center; flex-wrap: wrap; gap: .25rem 0;
    padding: .35rem 1rem .4rem calc(1.25rem + 26px + .875rem);
    background: var(--color-bg); border-top: 1px solid var(--color-border);
    min-height: 40px;
}
.MappingOption {
    display: flex; align-items: center; gap: .4rem;
    padding: .1rem .875rem .1rem 0;
}
.MappingOption + .MappingOption {
    padding-left: .875rem;
    border-left: 1px solid var(--color-border);
}
.MappingOptionLabel {
    font-size: .72rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; color: var(--color-muted); white-space: nowrap;
}
/* Compact select for the options strip */
.MappingOptionSelect {
    height: 28px; padding: 0 1.6rem 0 .5rem; font-size: .8rem;
    border: 1px solid var(--color-border); border-radius: 6px;
    background: #fff; color: var(--color-text); cursor: pointer;
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236C757D'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .45rem center;
    min-width: 110px;
}
.MappingOptionSelect:focus { outline: none; border-color: var(--color-primary); }
/* Lookup procedure input in options strip */
.MappingLookupWrap {
    display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
}
.MappingLookupProcedureWrap {
    display: flex; align-items: center; gap: .35rem;
}
.MappingLookupInput {
    height: 28px; padding: 0 .6rem; font-size: .8rem;
    border: 1px solid var(--color-border); border-radius: 6px;
    background: #fff; color: var(--color-text); min-width: 190px;
}
.MappingLookupInput:focus { outline: none; border-color: var(--color-primary); }
.MappingLookupHint {
    font-size: .7rem; color: var(--color-muted); white-space: nowrap;
}

.MappingEmptyState { text-align: center; padding: 3rem 1rem; color: var(--color-muted); }
.MappingEmptyIcon { font-size: 2.5rem; opacity: .3; display: block; margin-bottom: .75rem; }
.MappingEmptyTitle { font-weight: 600; font-size: 1rem; margin-bottom: .3rem; color: var(--color-text); }
.MappingEmptyText { font-size: .875rem; }

.MappingCount {
    font-size: .75rem; font-weight: 600; background: var(--color-primary);
    color: #fff; border-radius: 20px; padding: .3rem .65rem; vertical-align: middle;
}
.MappingSaveNote {
    font-size: .8rem; color: var(--color-muted);
    display: flex; align-items: center; gap: .35rem;
}

/* Lookup check prompt (before batch runs) */
.LookupCheckPrompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1.5rem;
  gap: .9rem;
}
.LookupCheckPromptIcon {
  font-size: 2rem;
  color: var(--color-primary);
  opacity: .5;
}
.LookupCheckPromptText {
  font-size: .85rem;
  color: var(--color-muted);
  line-height: 1.6;
}

/* Lookup disambiguation table */
.LookupTableWrap { overflow: hidden; }
.LookupTableScroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.LookupTable {
    width: 100%; border-collapse: collapse; font-size: .85rem;
    border-top: 1px solid var(--color-border);
}
.LookupTable th, .LookupTable td {
    padding: .4rem .75rem; vertical-align: middle; white-space: nowrap;
    border-bottom: 1px solid var(--color-border);
}
.LookupTable thead th {
    background: var(--color-bg); font-size: .75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .03em; color: var(--color-text);
}
.LookupTable tbody tr:last-child td { border-bottom: none; }
.LookupTable tbody tr:hover td { background: #f8fbfd; }
.LookupColHeader { min-width: 200px; }
.LookupColContext { color: var(--color-muted); }
.LookupColBadgeOk {
    display: inline-flex; align-items: center; justify-content: center;
    width: 15px; height: 15px; border-radius: 50%;
    background: #dcfce7; color: #16a34a; font-size: .58rem;
    margin-left: .3rem; vertical-align: middle;
}
.LookupColBadgeWarn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 17px; height: 17px; border-radius: 9px;
    background: #fef2f2; color: #dc2626; font-size: .7rem; font-weight: 700;
    padding: 0 .3rem; margin-left: .3rem; vertical-align: middle;
}
.LookupContextCell { color: var(--color-muted); font-size: .82rem; }
.LookupCell { white-space: nowrap; }
.LookupCellRaw { font-family: monospace; font-size: .78rem; color: var(--color-muted); }
.LookupCellArrow { color: var(--color-border); margin: 0 .3rem; font-size: .72rem; }

/* Chips */
.LookupChip {
    display: inline-flex; align-items: center; gap: .28rem;
    padding: .18rem .5rem; border-radius: 11px;
    font-size: .76rem; font-weight: 500; line-height: 1.4;
    border: 1px solid transparent; cursor: pointer; white-space: nowrap;
    transition: filter .13s, box-shadow .13s;
}
.LookupChip:hover { filter: brightness(.93); box-shadow: 0 1px 4px rgba(0,0,0,.1); }
.LookupChipExact    { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
.LookupChipSuggested { background: #fef9c3; color: #92400e; border-color: #fde68a; }
.LookupChipNone     { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
.LookupChipResolved { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; }

/* Shared search popover */
.LookupPopover {
    display: none; position: absolute; z-index: 9999;
    background: #fff; border: 1px solid var(--color-border);
    border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.13);
    padding: .5rem;
}
.LookupPopoverInput {
    display: block; width: 100%; height: 32px;
    border: 1px solid var(--color-border); border-radius: 6px;
    padding: 0 .65rem; font-size: .85rem; color: var(--color-text); outline: none;
}
.LookupPopoverInput:focus { border-color: var(--color-primary); }
.LookupPopoverDropdown { margin-top: .35rem; max-height: 200px; overflow-y: auto; }
.LookupDropdownItem {
    display: flex; justify-content: space-between; align-items: center;
    padding: .4rem .55rem; cursor: pointer; font-size: .84rem; border-radius: 4px;
}
.LookupDropdownItem:hover { background: #f5f7fb; }
.LookupDropdownScore { font-size: .72rem; color: var(--color-muted); }

/* Show-more footer */
.LookupShowMore {
    padding: .55rem 1rem; font-size: .82rem; color: var(--color-muted);
    background: var(--color-bg); border-top: 1px solid var(--color-border);
    text-align: center;
}

/* Meta badge colours */
.LookupMetaExact     { color: #16a34a; font-weight: 600; }
.LookupMetaSuggested { color: #92400e; font-weight: 600; }
.LookupMetaNone      { color: #dc2626; font-weight: 600; }
.AvatarDark { background: var(--color-primary-dark); color: #fff; }
.AvatarGroup { display: flex; align-items: center; }
.AvatarGroup .Avatar { border: 2px solid #fff; margin-left: -8px; }
.AvatarGroup .Avatar:first-child { margin-left: 0; }

/* File Upload Zone */
.FileUploadZone {
  border: 2px dashed var(--color-border);
  border-radius: var(--border-radius);
  padding: 2rem 1.5rem; text-align: center;
  cursor: pointer; transition: all .2s; background: #fafbfc;
}
.FileUploadZone:hover, .FileUploadZone.dragover {
  border-color: var(--color-primary); background: var(--color-light);
}
.FileUploadIcon { font-size: 2rem; color: var(--color-muted); display: block; margin-bottom: .65rem; }
.FileUploadTitle { font-size: .88rem; font-weight: 600; color: var(--color-text); margin-bottom: .25rem; }
.FileUploadSub { font-size: .78rem; color: var(--color-muted); }
.FileUploadLink { color: var(--color-primary); font-weight: 600; cursor: pointer; }
.FileUploadInput { display: none; }

/* Search / Filter Bar */
.SearchBar { display: flex; gap: .5rem; align-items: center; }
.SearchWrap { position: relative; flex: 1; }
.SearchIcon {
  position: absolute; left: .85rem; top: 50%; transform: translateY(-50%);
  color: var(--color-muted); font-size: .82rem; pointer-events: none;
}
.SearchInput {
  width: 100%; padding: .6rem 1rem .6rem 2.4rem; font-size: .875rem;
  border: 1px solid var(--color-border); border-radius: var(--border-radius);
  background: #fff; color: var(--color-text); transition: border-color .15s;
}
.SearchInput:focus { outline: none; border-color: var(--color-primary); }
.SearchInput::placeholder { color: var(--color-muted); }
.SearchBtn { flex-shrink: 0; }

/* Tag / Chip Input */
.TagInputWrap {
  display: flex; flex-wrap: wrap; gap: .35rem;
  padding: .4rem .6rem; border: 1px solid var(--color-border);
  border-radius: var(--border-radius); background: #fff;
  min-height: 42px; align-items: center; cursor: text;
}
.TagInputWrap:focus-within { border-color: var(--color-primary); }
.Tag {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .55rem; background: var(--color-light);
  color: var(--color-primary-dark); border-radius: 99px;
  font-size: .78rem; font-weight: 500; white-space: nowrap;
}
.TagClose {
  background: none; border: none; cursor: pointer;
  color: var(--color-muted); padding: 0; line-height: 1; font-size: .7rem;
}
.TagClose:hover { color: var(--color-danger); }
.TagInlineInput {
  border: none; outline: none; font-size: .82rem;
  color: var(--color-text); min-width: 80px; padding: .1rem;
  background: transparent;
}

/* Section header: title on the left, action buttons on the right */
.DocSectionHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
}
.DocSectionHeaderInner { flex: 1; }
.DocSectionActions { display: flex; gap: .35rem; flex-shrink: 0; margin-top: .2rem; }

/* Action button (Code / Docs toggles inside each doc section) */
.DocActionBtn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .25rem .6rem;
  font-size: .72rem;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid var(--color-border, #d0dce8);
  background: #fff;
  color: var(--color-muted, #6c757d);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.DocActionBtn:hover {
  background: var(--color-light, #e8f4fc);
  border-color: var(--color-primary, #009fe3);
  color: var(--color-primary, #009fe3);
}
/* Active state for the "Docs" toggle — stays highlighted while docs are visible */
.DocActionBtnDocsActive {
  background: var(--color-light, #e8f4fc);
  border-color: var(--color-primary, #009fe3);
  color: var(--color-primary, #009fe3);
}

/* Subsection block spacing */
.DocSubSection { margin-bottom: 2rem; }

/* Subtitle row inside a subsection: label left, action buttons right */
.DocSubtitleRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .5rem;
}
.DocSubtitleRow .DocSubtitle { margin: 0; }

/* Code block wrapper — relative so the copy button can be positioned inside */
.DocCodeWrap { position: relative; }

/* Dark-theme syntax-highlight preformatted block */
.DocCodePre {
  background: #0f172a;
  color: #cbd5e1;
  font-family: 'Consolas', 'Fira Code', monospace;
  font-size: .73rem;
  line-height: 1.7;
  padding: 1rem 4.5rem 1rem 1.25rem; /* right padding leaves room for copy button */
  border-radius: 8px;
  overflow: auto;
  max-height: 55vh;
  white-space: pre;
  tab-size: 2;
  margin: 0;
}

/* Floating copy-to-clipboard button overlaid on code block */
.DocCodeCopyBtn {
  position: absolute;
  top: .5rem;
  right: .5rem;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .22rem .55rem;
  font-size: .72rem;
  font-weight: 600;
  border-radius: 5px;
  border: 1px solid #334155;
  background: #1e293b;
  color: #94a3b8;
  cursor: pointer;
  transition: all .15s;
}
.DocCodeCopyBtn:hover { background: #334155; color: #e2e8f0; }
/* Green confirmation state after a successful copy */
.DocCodeCopyBtn.copied { border-color: #22c55e; color: #4ade80; }

/* Dark slate background replaces the default white modal surface */
#codeModal .modal-content {
  background: #0f172a;
  border: none;
  border-radius: 14px;
  overflow: hidden;
}

/* Subtle divider between modal header and body */
#codeModal .modal-header {
  border-bottom: 1px solid #1e293b;
  padding: .85rem 1.25rem;
}

/* Modal title in the dark header */
#codeModal .modal-title {
  color: #e2e8f0;
  font-size: .9rem;
  font-weight: 600;
}

/* Inner body padding */
#codeModal .modal-body { padding: 1.25rem; }

/* Wrapper that holds the toggle button and the hidden submenu */
.SidebarNavGroup { position: relative; }

/* Toggle button — visually identical to SidebarNav a but is a <button> */
.SidebarNavGroupBtn {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem 1.4rem;
  color: rgba(255, 255, 255, .72);
  font-size: .875rem;
  font-weight: 500;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background var(--transition), color var(--transition);
  position: relative;
}
.SidebarNavGroupBtn:hover {
  background: rgba(255, 255, 255, .08);
  color: #fff;
}
/* Active when any UI route is current */
.SidebarNavGroupBtn.active {
  background: rgba(0, 159, 227, .18);
  color: #fff;
  font-weight: 600;
}
/* Left accent bar on active parent (matches .SidebarNav a.active::before) */
.SidebarNavGroupBtn.active::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--color-primary);
  border-radius: 0 2px 2px 0;
}
.SidebarNavGroupBtn i { width: 18px; text-align: center; font-size: .88rem; }

/* Chevron icon — rotates 90° when the group is open */
.SidebarGroupArrow {
  margin-left: auto;
  font-size: .7rem !important;
  width: auto !important;
  transition: transform .2s ease;
}
.SidebarNavGroup.is-open .SidebarGroupArrow { transform: rotate(90deg); }

/* Submenu panel — collapses to zero height by default */
.SidebarNav .SidebarSubmenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
  background: rgba(0, 0, 0, .12);
}
/* Expanded state — max-height large enough to reveal all children */
.SidebarNavGroup.is-open .SidebarSubmenu { max-height: 1400px; }

/* Individual submenu link — indented more than top-level items */
.SidebarNav .SidebarSubmenuItem {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem 1.4rem .5rem 3rem;
  color: rgba(255, 255, 255, .55);
  font-size: .8rem;
  font-weight: 400;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.SidebarNav .SidebarSubmenuItem:hover {
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .9);
}
/* Active submenu item highlighted in primary colour */
.SidebarNav .SidebarSubmenuItem.active {
  color: var(--color-primary);
  font-weight: 600;
}
.SidebarNav .SidebarSubmenuItem i { width: 14px; text-align: center; font-size: .76rem; }

/* --------------------------------------------------------------------------
   STATS WITH TRENDS
   -------------------------------------------------------------------------- */
.TrendGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-bottom: 2rem;
}
@media (max-width: 1200px) { .TrendGrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .TrendGrid { grid-template-columns: 1fr; } }

.TrendCard {
  background: #fff;
  border-radius: 14px;
  padding: 1.4rem 1.5rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: .6rem;
  transition: transform var(--transition), box-shadow var(--transition);
}
.TrendCard:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(2,73,147,.12); }
.TrendCardHeader { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.TrendCardLabel {
  font-size: .75rem;
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.TrendBadge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .2rem .5rem;
  border-radius: 6px;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.TrendBadge.TrendUp      { background: #dcfce7; color: #16a34a; }
.TrendBadge.TrendDown    { background: #fee2e2; color: #dc2626; }
.TrendBadge.TrendNeutral { background: var(--color-light); color: var(--color-muted); }
.TrendCardValue {
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--color-text);
  line-height: 1;
}
.TrendCardChart {
  height: 48px;
  background: var(--color-light);
  border-radius: 8px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  padding: .4rem .5rem;
  overflow: hidden;
}
.TrendBar {
  flex: 1;
  background: var(--color-primary);
  border-radius: 3px 3px 0 0;
  opacity: .3;
  transition: opacity var(--transition);
}
.TrendBar.active      { opacity: 1; }
.TrendBar.TrendBarDown { background: var(--color-danger); }
.TrendCardMeta { font-size: .75rem; color: var(--color-muted); line-height: 1.4; }

/* --------------------------------------------------------------------------
   BANNERS
   -------------------------------------------------------------------------- */
.Banner {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: .9rem 1.25rem;
  border-radius: 12px;
  background: var(--color-light);
  border: 1px solid rgba(0,159,227,.2);
}
.Banner.BannerWarning { background: #fffbeb; border-color: rgba(245,158,11,.3); }
.Banner.BannerDanger  { background: #fff0f0; border-color: rgba(229,35,34,.2); }
.Banner.BannerSuccess { background: #f0fdf4; border-color: rgba(22,163,74,.25); }
.Banner.BannerDark    { background: var(--color-text); border-color: transparent; }
.BannerIcon { font-size: 1.05rem; color: var(--color-primary); flex-shrink: 0; margin-top: .1rem; }
.Banner.BannerWarning .BannerIcon { color: #d97706; }
.Banner.BannerDanger  .BannerIcon { color: var(--color-danger); }
.Banner.BannerSuccess .BannerIcon { color: #16a34a; }
.Banner.BannerDark    .BannerIcon { color: rgba(255,255,255,.8); }
.BannerBody  { flex: 1; min-width: 0; }
.BannerTitle { font-size: .855rem; font-weight: 700; color: var(--color-text); margin: 0 0 .15rem; }
.BannerText  { font-size: .8rem; color: var(--color-muted); margin: 0; line-height: 1.5; }
.Banner.BannerDark .BannerTitle { color: #fff; }
.Banner.BannerDark .BannerText  { color: rgba(255,255,255,.65); }
.BannerActions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; margin-top: .05rem; }
.BannerClose {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-muted);
  font-size: .8rem;
  padding: .15rem;
  flex-shrink: 0;
  transition: color var(--transition);
  line-height: 1;
}
.BannerClose:hover              { color: var(--color-text); }
.Banner.BannerDark .BannerClose { color: rgba(255,255,255,.4); }
.Banner.BannerDark .BannerClose:hover { color: #fff; }

/* Inline link style used inside banners */
.BannerLink {
  font-size: .8rem;
  font-weight: 600;
  color: var(--color-primary-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--transition);
}
.BannerLink:hover { color: var(--color-primary); }
.Banner.BannerDark .BannerLink { color: rgba(255,255,255,.9); }
.Banner.BannerDark .BannerLink:hover { color: #fff; }

/* --------------------------------------------------------------------------
   CTA BLOCKS
   -------------------------------------------------------------------------- */
.CtaBlock {
  border-radius: 16px;
  padding: 2.5rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  position: relative;
  overflow: hidden;
}
.CtaBlock.CtaBlockPrimary {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
}
.CtaBlock.CtaBlockDark  { background: var(--color-text); }
.CtaBlock.CtaBlockLight { background: var(--color-light); border: 1px solid var(--color-border); }
.CtaBlockBody  { flex: 1; min-width: 0; }
.CtaBlockEyebrow {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 .4rem;
}
.CtaBlock.CtaBlockPrimary .CtaBlockEyebrow,
.CtaBlock.CtaBlockDark    .CtaBlockEyebrow { color: rgba(255,255,255,.7); }
.CtaBlock.CtaBlockLight   .CtaBlockEyebrow { color: var(--color-primary); }
.CtaBlockTitle { font-size: 1.35rem; font-weight: 800; line-height: 1.25; margin: 0 0 .5rem; }
.CtaBlock.CtaBlockPrimary .CtaBlockTitle,
.CtaBlock.CtaBlockDark    .CtaBlockTitle { color: #fff; }
.CtaBlock.CtaBlockLight   .CtaBlockTitle { color: var(--color-text); }
.CtaBlockText { font-size: .875rem; line-height: 1.6; margin: 0; }
.CtaBlock.CtaBlockPrimary .CtaBlockText,
.CtaBlock.CtaBlockDark    .CtaBlockText { color: rgba(255,255,255,.78); }
.CtaBlock.CtaBlockLight   .CtaBlockText { color: var(--color-muted); }
.CtaBlockActions { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   DEPARTMENT CHECKBOX PICKER (department accounts)
   -------------------------------------------------------------------------- */
.DepartmentCheckList { display: flex; flex-direction: column; gap: .5rem; max-height: 340px; overflow-y: auto; }
.DepartmentCheckItem {
  display: flex; align-items: center; gap: .65rem;
  padding: .6rem .85rem; border: 1.5px solid var(--color-border); border-radius: 8px;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.DepartmentCheckItem:hover { border-color: var(--color-primary); background: var(--color-light); }
.DepartmentCheckItem input[type="checkbox"] { accent-color: var(--color-primary); width: 16px; height: 16px; flex-shrink: 0; }
.DepartmentCheckItem input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  width: 17px; height: 17px; margin: 0; flex-shrink: 0;
  border: 1.5px solid var(--color-border); border-radius: 50%;
  cursor: pointer; position: relative;
  transition: border-color var(--transition);
}
.DepartmentCheckItem input[type="radio"]::after {
  content: ''; position: absolute; inset: 3px; border-radius: 50%;
  background: var(--color-primary); transform: scale(0);
  transition: transform var(--transition);
}
.DepartmentCheckItem input[type="radio"]:checked { border-color: var(--color-primary); }
.DepartmentCheckItem input[type="radio"]:checked::after { transform: scale(1); }
.DepartmentCheckItem:has(input:checked) { border-color: var(--color-primary); background: var(--color-light); box-shadow: 0 0 0 1px var(--color-primary) inset; }
.DepartmentCheckItem span { font-weight: 600; color: var(--color-primary-dark); font-size: .9rem; }

.DepartmentPickerSummary { display: flex; flex-wrap: wrap; gap: .4rem; }
.DepartmentPickerEmpty {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .4rem .85rem; border-radius: 20px;
  border: 1.5px dashed var(--color-border); background: var(--color-light);
  color: var(--color-muted); font-size: .82rem; font-style: italic;
}
.DepartmentPickerEmpty i { font-size: .78rem; }

/* --------------------------------------------------------------------------
   ACCOUNT TYPE CHOICE (unified accounts page)
   -------------------------------------------------------------------------- */
.AccountTypeChoice { display: flex; gap: .75rem; flex-wrap: wrap; }
.AccountTypeOption {
  display: flex; align-items: center; gap: .55rem;
  padding: .65rem 1.1rem; border: 1.5px solid var(--color-border); border-radius: 10px;
  cursor: pointer; font-weight: 600; color: var(--color-primary-dark); font-size: .9rem;
  transition: border-color .15s, background .15s;
}
.AccountTypeOption:hover { border-color: var(--color-primary); background: var(--color-light); }
.AccountTypeOption span { display: inline-flex; align-items: center; gap: .4rem; }
.AccountTypeOption input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  width: 2.35em; height: 1.3em; margin: 0; flex-shrink: 0;
  border: none; border-radius: 999px; background: var(--color-border);
  cursor: pointer; position: relative;
  transition: background var(--transition);
}
.AccountTypeOption input[type="radio"]::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: calc(1.3em - 4px); height: calc(1.3em - 4px); border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform var(--transition);
}
.AccountTypeOption input[type="radio"]:checked { background: var(--color-primary); }
.AccountTypeOption input[type="radio"]:checked::after { transform: translateX(calc(2.35em - 1.3em)); }
.AccountTypeOption:has(input:checked) { border-color: var(--color-primary); background: var(--color-light); box-shadow: 0 0 0 1px var(--color-primary) inset; }

/* --------------------------------------------------------------------------
   BOOTSTRAP FORM-CHECK BRAND OVERRIDE (settings toggles, permission switches,
   any plain .form-check checkbox/radio) - retints Bootstrap's own checked/focus
   colors to the app's brand blue via its 5.3 CSS variable hooks, instead of
   the stock Bootstrap primary blue.
   -------------------------------------------------------------------------- */
.form-check-input { cursor: pointer; }
.form-check-input:checked { background-color: var(--color-primary); border-color: var(--color-primary); }
.form-check-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 .25rem rgba(0, 159, 227, .25); }
.form-check-label { cursor: pointer; }

/* Clickable field that opens a picker modal - looks like a normal form input/select
   rather than a plain button, so it reads as "this is a field" not "this is an action". */
.PickerField {
  display: flex; align-items: center; gap: .65rem; width: 100%;
  padding: .72rem 1rem; border: 1.5px solid var(--color-border); border-radius: var(--border-radius);
  background: #fff; cursor: pointer; text-align: left; font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.PickerField:hover { border-color: var(--color-primary); }
.PickerField:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(0,159,227,.15); }
.PickerFieldIcon { color: var(--color-primary); font-size: .95rem; flex-shrink: 0; }
.PickerFieldValue { flex: 1; font-size: .95rem; font-weight: 600; color: var(--color-primary-dark); }
.PickerFieldValue.is-placeholder { font-weight: 400; color: var(--color-muted); }
.PickerFieldChevron { color: var(--color-muted); font-size: .8rem; flex-shrink: 0; }

/* Ghost button for use on dark/primary CTA blocks */
.CtaBlockBtnGhost {
  background: rgba(255,255,255,.15);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.35);
  border-radius: var(--border-radius);
  padding: .52rem 1.3rem;
  font-weight: 600;
  font-size: .875rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  transition: background var(--transition), border-color var(--transition);
  text-decoration: none;
}
.CtaBlockBtnGhost:hover { background: rgba(255,255,255,.25); border-color: rgba(255,255,255,.55); color: #fff; }

/* Decorative background icon */
.CtaBlockDecor {
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 5rem;
  opacity: .07;
  pointer-events: none;
  user-select: none;
}
@media (max-width: 768px) {
  .CtaBlock { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .CtaBlockDecor { display: none; }
}

/* --------------------------------------------------------------------------
   MEMBER / TEAM CARDS
   -------------------------------------------------------------------------- */
.MemberGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
@media (max-width: 1024px) { .MemberGrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .MemberGrid { grid-template-columns: 1fr; } }

.MemberCard {
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.75rem 1.5rem 1.25rem;
  gap: .35rem;
  transition: transform var(--transition), box-shadow var(--transition);
}
.MemberCard:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(2,73,147,.12); }

.MemberAvatarInitial {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--color-light);
  color: var(--color-primary-dark);
  font-size: 1.4rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: .6rem;
}
/* Avatar colour variants */
.MemberAvatarInitial.AvatarGreen  { background: #dcfce7; color: #15803d; }
.MemberAvatarInitial.AvatarPurple { background: #ede9fe; color: #7c3aed; }
.MemberAvatarInitial.AvatarOrange { background: #ffedd5; color: #c2410c; }
.MemberAvatarInitial.AvatarTeal   { background: #ccfbf1; color: #0f766e; }

.MemberName { font-size: .95rem; font-weight: 700; color: var(--color-text); margin: 0; }
.MemberRole { font-size: .8rem; color: var(--color-primary); font-weight: 600; margin: 0; }
.MemberMeta { font-size: .77rem; color: var(--color-muted); margin: 0; }
.MemberDivider { width: 100%; height: 1px; background: var(--color-border); margin: .65rem 0 .3rem; }
.MemberActions { display: flex; gap: .5rem; width: 100%; justify-content: center; }

/* Horizontal list variant */
.MemberCardHorizontal {
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  transition: transform var(--transition), box-shadow var(--transition);
}
.MemberCardHorizontal:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(2,73,147,.12); }
.MemberCardHorizontal .MemberAvatarInitial { width: 46px; height: 46px; font-size: 1rem; margin-bottom: 0; }
.MemberCardHorizontalBody { flex: 1; min-width: 0; text-align: left; }
.MemberCardHorizontalBody .MemberName { font-size: .875rem; }
.MemberCardHorizontalBody .MemberRole { font-size: .76rem; }
.MemberCardHorizontalBody .MemberMeta { font-size: .73rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.MemberCardHorizontal .MemberActions  { width: auto; flex-shrink: 0; }

/* --------------------------------------------------------------------------
   GRIDS
   -------------------------------------------------------------------------- */
.Grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.Grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.Grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
@media (max-width: 1024px) {
  .Grid3 { grid-template-columns: repeat(2, 1fr); }
  .Grid4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .Grid2, .Grid3, .Grid4 { grid-template-columns: 1fr; }
}

/* Asymmetric: 2/3+1/3 and 1/3+2/3 */
.GridAsym        { display: grid; grid-template-columns: 2fr 1fr; gap: 1.25rem; }
.GridAsymReverse { display: grid; grid-template-columns: 1fr 2fr; gap: 1.25rem; }
@media (max-width: 768px) {
  .GridAsym, .GridAsymReverse { grid-template-columns: 1fr; }
}

/* Bento Grid — marketing-style mixed-area layout */
.BentoGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(140px, auto);
  gap: 1.25rem;
}
@media (max-width: 1024px) { .BentoGrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .BentoGrid { grid-template-columns: 1fr; } }

.BentoCell {
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  transition: transform var(--transition), box-shadow var(--transition);
  overflow: hidden;
}
.BentoCell:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(2,73,147,.12);
}
.BentoCell.BentoCellPrimary {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
  color: #fff;
}
.BentoCell.BentoCellDark  { background: var(--color-text); color: #fff; }
.BentoCell.BentoCellLight { background: var(--color-light); }

/* Span / row modifiers */
.BentoCell.span2    { grid-column: span 2; }
.BentoCell.span3    { grid-column: span 3; }
.BentoCell.spanFull { grid-column: 1 / -1; }
.BentoCell.row2     { grid-row: span 2; }
@media (max-width: 1024px) {
  .BentoCell.span2,
  .BentoCell.span3,
  .BentoCell.spanFull { grid-column: 1 / -1; }
  .BentoCell.row2     { grid-row: auto; }
}

/* BentoCell internals */
.BentoCellIcon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(0,159,227,.12);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
}
.BentoCell.BentoCellPrimary .BentoCellIcon,
.BentoCell.BentoCellDark    .BentoCellIcon { background: rgba(255,255,255,.15); color: #fff; }
.BentoCellTitle { font-size: .95rem; font-weight: 700; color: var(--color-text); }
.BentoCellText  { font-size: .82rem; color: var(--color-muted); line-height: 1.6; flex: 1; }
.BentoCellValue { font-size: 2rem; font-weight: 800; color: var(--color-text); line-height: 1; }
.BentoCellSub   { font-size: .75rem; color: var(--color-muted); font-weight: 500; }
.BentoCell.BentoCellPrimary .BentoCellTitle,
.BentoCell.BentoCellDark    .BentoCellTitle { color: #fff; }
.BentoCell.BentoCellPrimary .BentoCellText,
.BentoCell.BentoCellDark    .BentoCellText  { color: rgba(255,255,255,.75); }
.BentoCell.BentoCellPrimary .BentoCellValue,
.BentoCell.BentoCellDark    .BentoCellValue { color: #fff; }
.BentoCell.BentoCellPrimary .BentoCellSub,
.BentoCell.BentoCellDark    .BentoCellSub   { color: rgba(255,255,255,.65); }
.BentoCellFooter {
  margin-top: auto;
  padding-top: .75rem;
  border-top: 1px solid var(--color-border);
  font-size: .78rem;
  color: var(--color-muted);
}
.BentoCell.BentoCellPrimary .BentoCellFooter,
.BentoCell.BentoCellDark    .BentoCellFooter { border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.7); }

/* --------------------------------------------------------------------------
   LAYOUTS
   -------------------------------------------------------------------------- */

/* Page section header — title + subtitle + action bar */
.PageSectionHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
}
.PageSectionHeaderMeta { flex: 1; min-width: 0; }
.PageSectionTitle {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 .3rem;
  line-height: 1.3;
}
.PageSectionSub   { font-size: .83rem; color: var(--color-muted); margin: 0; line-height: 1.5; }
.PageSectionActions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }

/* Multi-level path breadcrumb */
.NavPath {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
  color: var(--color-muted);
  margin-bottom: .45rem;
  flex-wrap: wrap;
}
.NavPath a { color: var(--color-muted); text-decoration: none; transition: color var(--transition); }
.NavPath a:hover  { color: var(--color-primary); }
.NavPathSep       { opacity: .5; font-size: .65rem; }
.NavPathCurrent   { color: var(--color-text); font-weight: 500; }

/* Content + sidebar two-column layouts */
.ContentWithSidebar         { display: grid; grid-template-columns: 1fr 300px; gap: 1.5rem; align-items: start; }
.ContentWithSidebar.reverse { grid-template-columns: 300px 1fr; }
@media (max-width: 1024px) {
  .ContentWithSidebar,
  .ContentWithSidebar.reverse { grid-template-columns: 1fr; }
}

/* 50/50 split */
.SplitLayout { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 768px) { .SplitLayout { grid-template-columns: 1fr; } }

/* Section divider with optional centred label */
.SectionDivider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 2rem 0;
  color: var(--color-muted);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.SectionDivider::before,
.SectionDivider::after { content: ''; flex: 1; height: 1px; background: var(--color-border); }

/* Coloured info / warning / danger panels */
.InfoPanel {
  background: var(--color-light);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 10px 10px 0;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}
.InfoPanel.InfoPanelWarning { background: #fffbeb; border-color: var(--color-warning); }
.InfoPanel.InfoPanelDanger  { background: #fff0f0; border-color: var(--color-danger); }
.InfoPanelIcon { color: var(--color-primary); font-size: 1rem; margin-top: .1rem; flex-shrink: 0; }
.InfoPanel.InfoPanelWarning .InfoPanelIcon { color: var(--color-warning); }
.InfoPanel.InfoPanelDanger  .InfoPanelIcon { color: var(--color-danger); }
.InfoPanelBody  { flex: 1; min-width: 0; }
.InfoPanelTitle { font-size: .85rem; font-weight: 700; color: var(--color-text); margin: 0 0 .25rem; }
.InfoPanelText  { font-size: .8rem; color: var(--color-muted); margin: 0; line-height: 1.6; }

/* Feature list — icon check + label + optional subtitle */
.FeatureList     { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .65rem; }
.FeatureListItem { display: flex; align-items: flex-start; gap: .65rem; font-size: .855rem; color: var(--color-text); }
.FeatureListIcon {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(0,159,227,.12);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: .6rem; flex-shrink: 0; margin-top: .15rem;
}
.FeatureListText { line-height: 1.5; }
.FeatureListSub  { display: block; font-size: .75rem; color: var(--color-muted); margin-top: .1rem; }

/* Base link: primary colour, flex-inline for icon alignment */
.AppLink {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  transition: color var(--transition);
}
.AppLink:hover { color: var(--color-primary-dark); }

/* Muted variant — secondary/less-emphasis links */
.AppLinkMuted {
  color: var(--color-muted);
  text-decoration: none;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  transition: color var(--transition);
}
.AppLinkMuted:hover { color: var(--color-text); }

/* Danger variant — destructive or warning links */
.AppLinkDanger {
  color: var(--color-danger);
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  transition: color var(--transition);
}
.AppLinkDanger:hover { color: #b91c1c; }

/* External link: the arrow icon is smaller and slightly transparent */
.AppLinkExternalIcon {
  font-size: .65rem;
  opacity: .65;
}

/* ==========================================================================
   Landing Page
   ========================================================================== */

body.LandingPage {
  background: linear-gradient(180deg, #013575 0%, var(--color-primary-dark) 100%);
  overflow: hidden;
}

.LandingWrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 2rem 1.5rem;
  text-align: center;
}

/* Brand row */
.LandingBrand { display: flex; align-items: center; }
.LandingLogo { height: 52px; width: auto; }

/* Headline */
.LandingTitle {
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -.03em;
  line-height: 1.15;
  margin: 0;
}
.LandingTitleAccent { color: var(--color-primary); }

.LandingSubtitle {
  font-size: .95rem;
  color: rgba(255,255,255,.6);
  line-height: 1.65;
  max-width: 480px;
  margin: 0;
}

/* Button override — bright blue so it pops on the dark gradient */
.LandingPage .CustomButton {
  background: var(--color-primary);
}
.LandingPage .CustomButton:hover {
  background: var(--color-primary-hover);
  box-shadow: 0 8px 24px rgba(0,159,227,.4);
}

/* Feature boxes */
.LandingBoxes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  width: 100%;
  max-width: 820px;
}
.LandingBox {
  background: var(--color-white);
  border: 1.5px solid var(--color-border);
  border-top: 3px solid var(--color-primary);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  padding: 1.25rem 1.25rem 1.1rem;
  text-align: left;
}
.LandingBoxIcon {
  color: var(--color-primary);
  font-size: 1.3rem;
  margin-bottom: .6rem;
}
.LandingBoxTitle {
  font-size: .9rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: .35rem;
}
.LandingBoxText {
  font-size: .8rem;
  color: var(--color-muted);
  line-height: 1.55;
}

/* Copyright */
.LandingCopyright {
  font-size: .75rem;
  color: rgba(255,255,255,.3);
  margin: 0;
}

/* Responsive */
@media (max-width: 640px) {
  body.LandingPage { overflow: auto; }
  .LandingBoxes { grid-template-columns: 1fr; max-width: 400px; }
  .LandingTitle { font-size: 1.75rem; }
}

/* Impersonation Chip (topbar inline) */
.ImpersonateChip {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem .35rem .3rem .7rem;
  background: rgba(217, 119, 6, .1);
  border: 1px solid rgba(217, 119, 6, .3);
  border-radius: 10px;
  max-width: 520px;
}
.ImpersonateChipIcon {
  color: #b45309;
  font-size: .9rem;
  flex-shrink: 0;
}
.ImpersonateChipText {
  font-size: .78rem;
  font-weight: 500;
  color: #7c4a00;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ImpersonateChipText strong { font-weight: 700; }

.DepartmentImpersonateExit {
  position: absolute; top: 1.25rem; right: 1.25rem;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .8rem; border-radius: 7px;
  background: #dc2626; color: #fff; font-size: .8rem; font-weight: 600;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 1px 3px rgba(220,38,38,.3);
  transition: background .15s;
}
.DepartmentImpersonateExit:hover { background: #b91c1c; color: #fff; }
.DepartmentImpersonateExit i { font-size: .75rem; }

.MedicImpersonateExit {
  position: absolute; top: 1.25rem; right: 1.25rem;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .8rem; border-radius: 7px;
  background: #dc2626; color: #fff; font-size: .8rem; font-weight: 600;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 1px 3px rgba(220,38,38,.3);
  transition: background .15s;
}
.MedicImpersonateExit:hover { background: #b91c1c; color: #fff; }
.MedicImpersonateExit i { font-size: .75rem; }

.ImpersonateExitBtn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .28rem .65rem;
  background: #dc2626;
  color: #fff;
  border-radius: 7px;
  font-size: .75rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, box-shadow .15s;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(220, 38, 38, .25);
}
.ImpersonateExitBtn i { font-size: .72rem; }
.ImpersonateExitBtn:hover {
  background: #b91c1c;
  color: #fff;
  box-shadow: 0 2px 6px rgba(220, 38, 38, .35);
}

/* ==========================================================================
   Dashboard Hero
   ========================================================================== */
.DashboardHero {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.75rem 2rem;
  background: linear-gradient(135deg, #012d65 0%, #024993 45%, #0087c2 85%, #00c2e3 130%);
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(1, 45, 101, .3);
  color: #fff;
  position: relative;
  overflow: hidden;
}

/* Soft decorative glow layer - two overlapping radial gradients for a subtle "mesh
   gradient" premium feel, purely cosmetic and behind every other hero child. */
.DashboardHeroGlow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 88% -10%, rgba(255,255,255,.22) 0%, transparent 45%),
    radial-gradient(circle at 15% 130%, rgba(0,194,227,.35) 0%, transparent 50%);
  pointer-events: none;
}

.DashboardHeroAvatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: .04em;
  border: 2px solid rgba(255, 255, 255, .3);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .08);
  position: relative;
  z-index: 1;
}

.DashboardHeroBody {
  flex: 1;
  position: relative;
  z-index: 1;
}

.DashboardHeroGreeting {
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: .55rem;
}

.DashboardHeroGreetingIcon {
  color: #ffd166;
  font-size: 1.15rem;
}

.DashboardHeroSub {
  font-size: .9rem;
  color: rgba(255, 255, 255, .75);
  margin-top: .3rem;
}

.DashboardHeroMeta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .5rem;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.DashboardHeroDate {
  font-size: .8rem;
  color: rgba(255, 255, 255, .6);
}

.DashboardHeroLive {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .12);
  padding: .25rem .6rem;
  border-radius: 999px;
}

.DashboardHeroLiveDot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, .25);
  flex-shrink: 0;
  animation: RoomStatusPulse 1.6s ease-in-out infinite;
}

@media (max-width: 640px) {
  .DashboardHero {
    flex-wrap: wrap;
    padding: 1.25rem;
  }
  .DashboardHeroMeta {
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    gap: .5rem;
  }
}

/* ==========================================================================
   Dashboard Section Label
   ========================================================================== */
.DashboardSectionLabel {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-muted);
  margin-bottom: .85rem;
}

.DashboardSectionLabel i {
  color: var(--color-primary);
}

/* ==========================================================================
   Stats Grid Variants
   ========================================================================== */
.StatsGrid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.StatsGrid--2 {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 640px) {
  .StatsGrid--3,
  .StatsGrid--2 {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
}

/* ==========================================================================
   Activity Icon Color Variants
   ========================================================================== */
.ActivityItem--create .ActivityIcon {
  background: #e8f5e9;
  color: #2e7d32;
}

.ActivityItem--edit .ActivityIcon {
  background: var(--color-light);
  color: var(--color-primary-dark);
}

.ActivityItem--delete .ActivityIcon {
  background: #fff0f0;
  color: #e52322;
}

.ActivityItem--login .ActivityIcon {
  background: #f3e5f5;
  color: #6a1b9a;
}

.ActivityItem--password .ActivityIcon {
  background: #fff9c4;
  color: #89590d;
}

/* ==========================================================================
   Quick Action List
   ========================================================================== */
.QuickActionList {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
  padding: 1.1rem;
}

.QuickActionItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .55rem;
  padding: 1.1rem .5rem;
  color: var(--color-text);
  text-decoration: none;
  background: #fff;
  border: 1.5px solid var(--color-border);
  border-radius: 12px;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.QuickActionItem:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(2,73,147,.12);
  border-color: var(--color-primary);
  color: var(--color-text);
}

.QuickActionIcon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.QuickActionIcon--blue   { background: var(--color-light); color: var(--color-primary-dark); }
.QuickActionIcon--teal   { background: #e0f7fa; color: #00838f; }
.QuickActionIcon--purple { background: #f3e5f5; color: #6a1b9a; }
.QuickActionIcon--orange { background: #fff3e0; color: #b7610a; }
.QuickActionIcon--green  { background: #e8f5e9; color: #2e7d32; }

.QuickActionLabel {
  font-weight: 600;
  font-size: .8rem;
  line-height: 1.25;
}

@media (max-width: 420px) {
  .QuickActionList { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Account Panel
   ========================================================================== */
.AccountPanel {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
}

.AccountPanelAvatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #024993 0%, #009fe3 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: .04em;
}

.AccountPanelBody {
  flex: 1;
  min-width: 0;
}

.AccountPanelEmail {
  font-size: .85rem;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
   Hospital Units — Home Page Cards
   ========================================================================== */
.LandingUnits {
  width: 100%;
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(255,255,255,.15);
  text-align: center;
}

.LandingUnitsTitle {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 .5rem;
}

.LandingUnitsSubtitle {
  color: rgba(255,255,255,.75);
  font-size: .95rem;
  margin: 0 0 1.75rem;
}

.LandingUnitsGrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
  text-align: left;
}
@media (max-width: 1400px) { .LandingUnitsGrid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1100px) { .LandingUnitsGrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .LandingUnitsGrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .LandingUnitsGrid { grid-template-columns: 1fr; } }

.LandingUnitCard {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--border-radius);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  transition: transform var(--transition), background var(--transition), border-color var(--transition);
  color: #fff;
}

.LandingUnitCard:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,.1);
  border-color: var(--color-primary);
  color: #fff;
}

.LandingUnitCardIcon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #fff;
}

.LandingUnitCardName { font-size: 1.1rem; font-weight: 700; }

.LandingUnitCardMeta {
  font-size: .82rem;
  color: rgba(255,255,255,.65);
  display: flex;
  align-items: center;
  gap: .4rem;
}

.LandingUnitCardCta {
  margin-top: .5rem;
  font-size: .82rem;
  font-weight: 600;
  color: #7fd4f6;
  display: flex;
  align-items: center;
  gap: .4rem;
}

/* ==========================================================================
   Hospital Units — Dashboard
   ========================================================================== */
.UnitsGrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
}
@media (max-width: 1400px) { .UnitsGrid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1100px) { .UnitsGrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .UnitsGrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .UnitsGrid { grid-template-columns: 1fr; } }

.UnitCard {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.UnitCard:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 24px rgba(2,73,147,.13);
  border-color: var(--color-primary);
}

.UnitCardIcon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--color-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  color: var(--color-primary);
}

.UnitCardName { font-size: 1.05rem; font-weight: 700; color: var(--color-text); }

.UnitCardMeta {
  font-size: .8rem;
  color: var(--color-muted);
  display: flex;
  align-items: center;
  gap: .4rem;
}

.UnitCardActions {
  margin-top: auto;
  padding-top: .75rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  gap: .5rem;
}

.UnitsGridEmpty {
  text-align: center;
  color: var(--color-muted);
  padding: 2.5rem 1rem;
  font-size: .95rem;
}
.UnitsGridEmpty i {
  display: block;
  font-size: 1.6rem;
  margin-bottom: .6rem;
}

.PhaseTimeline {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.PhaseTimelineItem {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .72rem;
  color: var(--color-muted);
  background: #f5f5f5;
  border-radius: 20px;
  padding: .15rem .55rem .15rem .4rem;
  white-space: nowrap;
}

.PhaseTimelineDot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-border);
  flex-shrink: 0;
}

.PhaseTimelineLabel {
  font-weight: 500;
}

.PhaseTimelineTime {
  color: inherit;
  opacity: .75;
}

.PhaseTimelineTime--unknown { opacity: 1; }

/* ==========================================================================
   Time Pending — "no signal" flatline
   Stand-in for a missing plannedAt/actualAt timestamp. Instead of silently
   falling back to the current time (Twig's date filter treats null as
   "now") or a flat "--:--", this draws like a heart-monitor trace picking
   up no signal yet — on-theme for an operating-room display, and it reads
   as "waiting for data" rather than "broken".
   ========================================================================== */
.TimePendingDash {
  display: inline-flex;
  align-items: center;
  color: var(--color-muted);
}

.TimePendingDashSvg {
  width: 24px;
  height: 9px;
  overflow: visible;
}

.TimePendingDashSvg polyline {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  animation: TimePendingSweep 2.4s ease-in-out infinite;
}

@keyframes TimePendingSweep {
  0%   { stroke-dashoffset: 100; opacity: 0; }
  15%  { opacity: 1; }
  50%  { stroke-dashoffset: 0; opacity: 1; }
  85%  { opacity: 0; }
  100% { stroke-dashoffset: 100; opacity: 0; }
}

/* On the board's phase box specifically (not the small fixed size used in the dashboard's
   compact pill): the SVG element itself fills the box (not the effective/rendered
   width) - the ~60% trace width is baked into the viewBox as trailing empty padding
   after the drawn polyline in the template, so the trace starts flush at the left edge
   instead of being centered. Overflow stays visible so the taller middle beat isn't clipped. */
.BoardPhaseStep .TimePendingDash { display: flex; width: 100%; color: rgba(234,242,251,.45); }
.BoardPhaseStep .TimePendingDashSvg { width: 100%; height: 16px; overflow: visible; }

.PhaseTimelineItem--done {
  color: #2e7d32;
  background: #e8f5e9;
}

.PhaseTimelineItem--done .PhaseTimelineDot { background: #2e7d32; }

.PhaseTimelineItem--late {
  color: var(--color-danger);
  background: #fff0f0;
}

.PhaseTimelineItem--late .PhaseTimelineDot { background: var(--color-danger); }

.PhaseTimelineItem--early {
  color: #6A1B9A;
  background: #F3E5F5;
}

.PhaseTimelineItem--early .PhaseTimelineDot { background: #6A1B9A; }

.CaseDurations {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .6rem;
  margin-top: .4rem;
  font-size: .7rem;
  color: var(--color-muted);
}

.CaseDurations span::before {
  content: '\2022';
  margin-right: .35rem;
  color: var(--color-border);
}

.CaseDurations span:first-child::before { content: ''; margin-right: 0; }

/* Room occupancy pill in a room card header (Ocupata / Libera) */
.RoomStatusPill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .72rem;
  font-weight: 600;
  border-radius: 20px;
  padding: .25rem .7rem;
  white-space: nowrap;
}

.RoomStatusPill--active { background: #e8f5e9; color: #2e7d32; }
.RoomStatusPill--idle { background: #F5F5F5; color: var(--color-muted); }

.RoomStatusPulseDot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2e7d32;
  flex-shrink: 0;
  animation: RoomStatusPulse 1.6s ease-in-out infinite;
}

@keyframes RoomStatusPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

.RoomCardMeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: .5rem;
}

/*
 * Delay/estimate indicator — replaces the old solid-pastel StatusBadge
 * usage for delay information (which read as loud, mismatched pills when
 * stacked). Neutral background, colored left border + icon/text instead.
 */
.DelayChip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .72rem;
  font-weight: 600;
  background: #fff;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border);
  border-radius: 8px;
  padding: .25rem .6rem;
  white-space: nowrap;
  color: var(--color-muted);
}

.DelayChip--late { border-left-color: var(--color-danger); color: var(--color-danger); }
.DelayChip--early { border-left-color: #3f51b5; color: #3f51b5; }
.DelayChip--free { border-left-color: #2e7d32; color: #2e7d32; }

/* ==========================================================================
   Hospital Board — Public Live Display
   ========================================================================== */
body.BoardPage {
  background: radial-gradient(circle at 15% 0%, #0a3d7a 0%, #051d3d 45%, #030f22 100%);
  height: 100vh;
  overflow: hidden;
  --board-late: #e52322;
  --board-early: #6366f1;
  --board-ontime: #2ecc71;
  /* Orange, used for the room card's own late mood wash (background/border/glow) and the
     late mood badge icon; delay badges and the upcoming estimate stay red via --board-late. */
  --board-late-room: #e8720c;
}

.BoardWrap {
  height: 100vh;
  width: 100%;
  padding: 20px;
  color: #eaf2fb;
  font-family: 'Inter', sans-serif;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}

/* Kiosk-only overrides: keep the BoardPage/BoardWrap fixed-viewport look above, but make
   the document itself scrollable behind it so a JS heartbeat can produce real scroll
   activity for kiosk software that keys its screensaver off touch/scroll events instead of
   (or in addition to) the Wake Lock API. Must stay below body.BoardPage/.BoardWrap in source
   order since both selector pairs share the same specificity. */
body.BoardPage--kiosk {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* old Edge */
}
body.BoardPage--kiosk::-webkit-scrollbar {
  display: none;              /* Chromium-based kiosk browsers */
}

.BoardWrap--kiosk {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  background: radial-gradient(circle at 15% 0%, #0a3d7a 0%, #051d3d 45%, #030f22 100%);
}

.BoardScrollSpacer {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 200vh;
  visibility: hidden;
  pointer-events: none;
}

.BoardHeader {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
  flex-shrink: 0;
}

/* Current page / total pages, only when the board actually rotates between more than
   one page (populated by JS - stays empty and hidden for a single-page board). */
.BoardPageIndicator {
  position: absolute;
  left: 50%;
  bottom: .85rem;
  transform: translateX(-50%);
  font-size: clamp(.7rem, 1.1vw, 1.05rem);
  font-weight: 700;
  letter-spacing: .04em;
  color: rgba(234,242,251,.7);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 20px;
  padding: .3rem .9rem;
  white-space: nowrap;
}

.BoardPageIndicator:empty { display: none; }

.BoardUnitTitleRow {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.BoardUnitLogo {
  height: clamp(1.6rem, 2.4vw, 3.2rem);
  width: auto;
  flex-shrink: 0;
}

.BoardDemoBadge {
  flex-shrink: 0;
  font-size: clamp(.62rem, 1vw, .95rem);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #3a2405;
  background: linear-gradient(135deg, #f5b83d, #e6a11a);
  border-radius: 20px;
  padding: .25rem .7rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}

.BoardUnitTitle {
  font-size: clamp(1.4rem, 2.2vw, 3.6rem);
  font-weight: 800;
  color: #fff;
  margin: 0;
  letter-spacing: -.01em;
}

.BoardHeaderRight { display: flex; align-items: center; gap: 1rem; text-align: right; }

.BoardImpersonateExit {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .75rem; border-radius: 7px;
  background: #dc2626; color: #fff; font-size: .78rem; font-weight: 600;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 1px 3px rgba(220,38,38,.3);
  transition: background .15s;
}
.BoardImpersonateExit:hover { background: #b91c1c; color: #fff; }
.BoardImpersonateExit i { font-size: .72rem; }

.BoardClock {
  font-size: clamp(1.2rem, 1.8vw, 2.8rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #fff;
  line-height: 1;
}

.BoardClockDate {
  font-size: clamp(.78rem, .9vw, 1.2rem);
  color: rgba(234,242,251,.65);
  text-transform: capitalize;
  margin-top: .25rem;
}

/* AJAX-refresh wrapper (see boardContent polling in unit_show.html.twig's javascripts
   block) - without its own flex:1 here, it stays a plain auto-height block, breaking the
   height chain from .BoardWrap down to .BoardGrid: .BoardGrid's height:100% then resolves
   against a non-definite-height ancestor and is ignored (per the CSS spec, a percentage
   height needs a definite-height parent), so the grid just sizes to its rooms' natural
   content height instead of filling the page, leaving blank space below the last row. */
#boardContent {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Pages of up to 12 rooms; only the active page is shown, JS rotates between them */
.BoardPager {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: visible;
}

.BoardGrid {
  display: none;
  grid-template-columns: repeat(var(--board-cols, 4), 1fr);
  grid-template-rows: repeat(var(--board-rows, 3), 1fr);
  gap: 1.2rem;
  height: 100%;
  overflow: visible;
}

.BoardGrid.is-active { display: grid; }

/* Column/row split per room count so fewer rooms render as bigger cards,
   scaling up to a 4x3 grid at the 12-room page cap. */
.BoardGrid[data-room-count="1"]  { --board-cols: 1; --board-rows: 1; }
.BoardGrid[data-room-count="2"]  { --board-cols: 2; --board-rows: 1; }
.BoardGrid[data-room-count="3"]  { --board-cols: 3; --board-rows: 1; }
.BoardGrid[data-room-count="4"]  { --board-cols: 2; --board-rows: 2; }
.BoardGrid[data-room-count="5"]  { --board-cols: 3; --board-rows: 2; }
.BoardGrid[data-room-count="6"]  { --board-cols: 3; --board-rows: 2; }
.BoardGrid[data-room-count="7"]  { --board-cols: 4; --board-rows: 2; }
.BoardGrid[data-room-count="8"]  { --board-cols: 4; --board-rows: 2; }
.BoardGrid[data-room-count="9"]  { --board-cols: 3; --board-rows: 3; }
.BoardGrid[data-room-count="10"] { --board-cols: 5; --board-rows: 2; }
.BoardGrid[data-room-count="11"] { --board-cols: 4; --board-rows: 3; }
.BoardGrid[data-room-count="12"] { --board-cols: 4; --board-rows: 3; }

.BoardGrid--empty {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  place-items: center;
}

.BoardRoomCard {
  position: relative;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: clamp(.35rem, .9vh, .85rem);
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  gap: clamp(.2rem, .5vh, .35rem);
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
  min-width: 0;
  min-height: 0;
  overflow: visible;
}

/* Empty grid slots when a unit has fewer rooms than the configured rooms-per-page:
   keeps every page at the same card size/layout instead of stretching fewer cards
   to fill the grid, so a room count under the board's active setting still gets a
   plain empty slot rather than a mismatched, oversized card. */
.BoardRoomCard--placeholder {
  background: rgba(255,255,255,.02);
  border: 1px dashed rgba(255,255,255,.08);
  backdrop-filter: none;
}

@media (max-width: 1024px) {
  .BoardGrid { grid-template-columns: repeat(min(var(--board-cols, 4), 2), 1fr) !important; }
}

@media (max-width: 640px) {
  .BoardGrid { grid-template-columns: 1fr !important; }
}

.BoardRoomCard--active {
  border-color: rgba(0,159,227,.55);
  box-shadow: 0 0 0 1px rgba(0,159,227,.15), 0 12px 32px rgba(0,0,0,.35);
}

/* Mood wash — a room running late or ahead of schedule gets a full-card
   tinted background (not just a corner accent), so it reads instantly from
   across the room. A soft light sweeps through it on a loop — a scanning
   klaxon wash for late, a slow aurora drift for early — contained by the
   card's own overflow:hidden. Real content stacks above it via z-index. */
.BoardRoomCard--late,
.BoardRoomCard--early {
  isolation: isolate;
}

.BoardRoomHeader,
.BoardNowBlock,
.BoardUpcomingList {
  position: relative;
  z-index: 1;
}

.BoardRoomCard--late {
  border-color: color-mix(in srgb, var(--board-late-room) 55%, transparent);
  background: linear-gradient(165deg,
    color-mix(in srgb, var(--board-late-room) 30%, transparent) 0%,
    color-mix(in srgb, var(--board-late-room) 14%, transparent) 55%,
    rgba(255,255,255,.055) 100%);
  animation: BoardRoomLateGlow 2.6s ease-in-out infinite;
}

.BoardRoomCard--early {
  border-color: color-mix(in srgb, var(--board-early) 50%, transparent);
  background: linear-gradient(155deg,
    color-mix(in srgb, var(--board-early) 26%, transparent) 0%,
    color-mix(in srgb, var(--board-early) 12%, transparent) 55%,
    rgba(255,255,255,.055) 100%);
  animation: BoardRoomEarlyGlow 4.5s ease-in-out infinite;
}

.BoardRoomCard--late::before,
.BoardRoomCard--early::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-size: 260% 260%;
}

.BoardRoomCard--late::before {
  background-image: linear-gradient(110deg, transparent 42%, color-mix(in srgb, var(--board-late-room) 45%, transparent) 50%, transparent 58%);
  animation: BoardRoomLateScan 3.4s linear infinite;
}

.BoardRoomCard--early::before {
  background-image: radial-gradient(circle, color-mix(in srgb, var(--board-early) 30%, transparent) 0%, transparent 65%);
  animation: BoardRoomEarlyDrift 7s ease-in-out infinite;
}

@keyframes BoardRoomLateGlow {
  0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--board-late-room) 25%, transparent), 0 12px 32px rgba(0,0,0,.35); }
  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--board-late-room) 45%, transparent), 0 12px 40px rgba(232,114,12,.3); }
}

@keyframes BoardRoomEarlyGlow {
  0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--board-early) 25%, transparent), 0 12px 32px rgba(0,0,0,.35); }
  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--board-early) 40%, transparent), 0 12px 40px rgba(99,102,241,.28); }
}

@keyframes BoardRoomLateScan {
  0%   { background-position: 130% 50%; }
  100% { background-position: -30% 50%; }
}

@keyframes BoardRoomEarlyDrift {
  0%, 100% { background-position: 20% 20%; }
  50%      { background-position: 80% 80%; }
}

.BoardRoomHeaderRight {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-shrink: 0;
}

.BoardRoomMoodBadge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: .64rem;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
  flex-shrink: 0;
}

.BoardRoomMoodBadge--late {
  background: linear-gradient(135deg, var(--board-late-room), #7a3d0a);
  animation: BoardMoodBounce 1.4s ease-in-out infinite;
}

.BoardRoomMoodBadge--early {
  background: linear-gradient(135deg, var(--board-early), #312e81);
  animation: BoardMoodFloat 3s ease-in-out infinite;
}

@keyframes BoardMoodBounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-3px) rotate(-6deg); }
  75%      { transform: translateY(-3px) rotate(6deg); }
}

@keyframes BoardMoodFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-5px) rotate(8deg); }
}

.BoardRoomHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  flex-shrink: 0;
}

.BoardRoomName {
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: .4rem;
}

.BoardRoomName i { color: #5bb8ee; }

.BoardStatusPill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: .12rem .5rem;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}

.BoardStatusPill--active { background: rgba(46,204,113,.15); color: #4ee08a; }
.BoardStatusPill--idle    { background: rgba(255,255,255,.08); color: rgba(234,242,251,.6); }

.BoardPulseDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ee08a;
  box-shadow: 0 0 0 rgba(78,224,138,.6);
  animation: BoardPulse 1.8s infinite;
}

@keyframes BoardPulse {
  0%   { box-shadow: 0 0 0 0 rgba(78,224,138,.55); }
  70%  { box-shadow: 0 0 0 8px rgba(78,224,138,0); }
  100% { box-shadow: 0 0 0 0 rgba(78,224,138,0); }
}

/* min-height accounts for the specialty always sitting on its own line under the doctor
   name (see .BoardNowMetaDoctor's forced line-break below) - there's no single-line state
   to size for any more. */
.BoardNowBlock {
  background: rgba(0,0,0,.18);
  border-radius: 10px;
  padding: clamp(.3rem, .9vh, .55rem) clamp(.45rem, 1.1vh, .7rem);
  flex: 1.25 1 0;
  min-height: 160px;
  overflow: hidden;
}

/* Unlike the normal (occupied) .BoardNowBlock, this doesn't need to compete for an
   equal share of the card's vertical space - it's one line of text, so it shrinks to
   fit and hands the freed space to the upcoming-appointments list below it instead. */
.BoardNowBlock--empty {
  flex: 0 0 auto;
  min-height: 70px;
  padding: clamp(.3rem, .8vh, .5rem) clamp(.5rem, 1.3vh, .8rem);
  display: flex;
  align-items: center;
  gap: .5rem;
  color: rgba(234,242,251,.55);
  font-size: .88rem;
  justify-content: center;
}

.BoardNowTop {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: clamp(.05rem, .15vh, .1rem);
}

/* The label and (for a relocated case) the original-room notice sit adjacent on the left;
   the late/early delay badge, when present, is the only thing pushed to the right edge. */
.BoardNowTop > .BoardDelayBadge { margin-left: auto; }

.BoardNowLabel {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #5bb8ee;
  padding-top: 3px;
  padding-bottom: 3px;
}

.BoardNowPatient {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.01em;
  margin-bottom: clamp(.04rem, .12vh, .08rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1;
}

.BoardDelayBadge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: .12rem .45rem;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}

.BoardDelayBadge--late {
  background: linear-gradient(135deg, color-mix(in srgb, var(--board-late) 30%, transparent), color-mix(in srgb, var(--board-late) 10%, transparent));
  color: #ffb3b1;
  border: 1px solid color-mix(in srgb, var(--board-late) 45%, transparent);
  animation: BoardLatePulse 2.4s ease-in-out infinite;
}

.BoardDelayBadge--early {
  background: linear-gradient(120deg, color-mix(in srgb, var(--board-early) 32%, transparent), color-mix(in srgb, var(--board-early) 10%, transparent) 60%, color-mix(in srgb, var(--board-early) 32%, transparent));
  background-size: 220% 100%;
  color: #c7c9ff;
  border: 1px solid color-mix(in srgb, var(--board-early) 45%, transparent);
  animation: BoardEarlyShimmer 5s ease-in-out infinite;
}

/* Stalled = booked slot already passed with zero recorded activity - a calm neutral
   gray, not the pulsing red/blue late/early badges, since nothing is actively "wrong",
   the appointment simply never started. */
.BoardDelayBadge--stalled {
  background: rgba(255,255,255,.08);
  color: rgba(234,242,251,.55);
  border: 1px solid rgba(255,255,255,.18);
}

/* Sits inside the fixed-width BoardUpcomingTimeSlot next to the time, so it needs to be
   noticeably smaller than the other delay badges or it forces the slot to wrap/widen and
   knocks the patient-name column out of alignment with the non-stalled rows above/below it. */
.BoardDelayBadge--sm {
  font-size: .68rem;
  padding: .06rem .32rem;
}

@keyframes BoardLatePulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--board-late) 45%, transparent); }
  50%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--board-late) 0%, transparent); }
}

@keyframes BoardEarlyShimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* The specialty always sits on its own line under the doctor name (never inline next to
   it) - BoardNowMetaDoctor's flex-basis:100% below forces a wrap line-break after it
   unconditionally, rather than only when the row runs out of horizontal space. The
   interval badge still shares the specialty's line, pinned to the right via margin-left:auto. */
.BoardNowMeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: .5rem;
  row-gap: .1rem;
  font-size: .82rem;
  color: rgba(234,242,251,.8);
  margin-bottom: clamp(.15rem, .5vh, .3rem);
}

.BoardNowMeta span {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  min-width: 0;
}

.BoardNowMetaDoctor {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.BoardNowMeta i { color: #5bb8ee; flex-shrink: 0; }

/* flex-basis:100% claims the entire line width, which - combined with the container's
   flex-wrap - pushes every span after it onto a new line, always. */
.BoardNowMetaDoctor { flex: 1 0 100%; max-width: 100%; }

.BoardNowMetaSpecialty { flex: 1 1 auto; min-width: 8em; max-width: 100%; overflow: hidden; }

/* .BoardMarquee's own width:100% only resolves against a definite parent width - without an
   explicit flex-basis here it instead sizes from its nowrap text content, refusing to shrink
   below that and overflowing on top of the interval badge next to it. flex:1 1 0% forces it
   to actually fill (and shrink within) whatever width BoardNowMetaSpecialty above has left it. */
.BoardNowMetaSpecialty .BoardMarquee { flex: 1 1 0%; }

.BoardNowMetaInterval {
  margin-left: auto;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  font-size: .88em;
  color: rgba(234,242,251,.6);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  padding: .1rem .55rem;
}

/* Ad-hoc relocated case - pulses in the same amber used for a room's own late-mood wash,
   so it visually flags itself as a special/unusual state rather than reading as a normal
   "on time" interval badge. */
.BoardNowMetaInterval--relocated {
  color: #fff;
  background: var(--board-late-room);
  border-color: var(--board-late-room);
  font-weight: 800;
  animation: BoardRelocatedPulse 1.6s ease-in-out infinite;
}

@keyframes BoardRelocatedPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}

/* Tells staff where the patient was actually supposed to be, since the ad-hoc relocation
   makes the room card's own booked time meaningless for this case - sits in .BoardNowTop
   right next to the "Acum in sala" label. */
.BoardRelocatedNotice {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  flex-shrink: 0;
  font-size: .72rem;
  font-weight: 600;
  color: var(--board-late-room);
  background: color-mix(in srgb, var(--board-late-room) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--board-late-room) 40%, transparent);
  border-radius: 20px;
  padding: .15rem .55rem;
  white-space: nowrap;
}

/* Phase timeline — a left-to-right run of status chips, each colored by its own
   accent bar rather than a filled background, so a room with many checkpoints
   still reads calmly instead of turning into a wall of colored bubbles. The
   current checkpoint gets a small pulsing corner dot (its only "bubble" left)
   so the live one stands out at a glance from across the room. */
.BoardPhaseStepper {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .3rem;
  flex-shrink: 0;
}

.BoardPhaseStep {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .05rem;
  font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.07);
  border-left: 3px solid rgba(255,255,255,.18);
  border-radius: 4px 8px 8px 4px;
  padding: .16rem .35rem .2rem .4rem;
  transition: box-shadow var(--transition), border-color var(--transition), background var(--transition);
}

.BoardPhaseLabel {
  font-size: .56rem;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(234,242,251,.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.BoardPhaseTime {
  font-size: .82rem;
  font-weight: 800;
  line-height: 1.2;
  color: rgba(234,242,251,.85);
}

/* Current phase — the single checkpoint the case is actually in right now (the last one
   reached, per ScheduledCaseDTO::currentPhase()). Earlier reached phases and this one share
   the same flow color, so a plain border alone doesn't separate "done" from "happening now";
   a small pulsing corner dot plus a lifted glow are the only extra chrome, kept subtle so a
   full-card border (which read as noisy clutter) isn't needed to make it stand out. */
.BoardPhaseStep.is-current {
  background: rgba(255,255,255,.07);
  box-shadow: 0 0 0 1px currentColor, 0 4px 14px rgba(0,0,0,.3);
}

.BoardPhaseStep.is-current::after {
  content: '';
  position: absolute;
  top: .3rem;
  right: .3rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: BoardPhaseCurrentPulse 1.6s ease-in-out infinite;
}

@keyframes BoardPhaseCurrentPulse {
  0%, 100% { opacity: .5; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.3); }
}

/* Phase colors track which of the 3 fixed pairs the checkpoint belongs to, not timing
   performance: entering_room/room_exit = blue, anesthesia/wake_up = yellow,
   incision/bandage = red. A checkpoint with nothing recorded yet is always gray,
   regardless of pair. */
.BoardPhaseStep.is-empty {
  border-left-color: rgba(255,255,255,.18);
}

.BoardPhaseStep.is-empty .BoardPhaseTime { color: rgba(234,242,251,.4); }

.BoardPhaseStep.is-flow-blue {
  color: #7fd4ff;
  border-left-color: #009fe3;
  background: rgba(0,159,227,.1);
}

.BoardPhaseStep.is-flow-blue .BoardPhaseLabel { color: rgba(127,212,255,.75); }
.BoardPhaseStep.is-flow-blue .BoardPhaseTime { color: #7fd4ff; }

.BoardPhaseStep.is-flow-yellow {
  color: #ffd68a;
  border-left-color: #f5b83d;
  background: rgba(245,184,61,.1);
}

.BoardPhaseStep.is-flow-yellow .BoardPhaseLabel { color: rgba(255,214,138,.75); }
.BoardPhaseStep.is-flow-yellow .BoardPhaseTime { color: #ffd68a; }

.BoardPhaseStep.is-flow-red {
  color: #ffb3b1;
  border-left-color: var(--board-late);
  background: color-mix(in srgb, var(--board-late) 10%, transparent);
}

.BoardPhaseStep.is-flow-red .BoardPhaseLabel { color: rgba(255,179,177,.75); }
.BoardPhaseStep.is-flow-red .BoardPhaseTime { color: #ffb3b1; }

/* Weighted heavier than .BoardNowBlock's flex-grow (1) so the upcoming-appointments
   list claims more of a room card's leftover vertical space even when there's a full
   "Acum in sala" panel above it - otherwise an occupied room's queue gets squeezed
   into a much smaller area than a free room's, and the JS fit-to-scale shrinks its
   text noticeably more to compensate, making the same-length list read as two
   different sizes depending on whether the room happens to be occupied.

   min-height:70px (not 0) guards against .BoardNowBlock's own min-height:135px floor
   (below) starving this sibling entirely: flexbox stops shrinking an item once it hits
   its min-height, then dumps the whole remaining shortage onto whichever sibling still
   has room to shrink - with no floor of its own, this list could get squeezed all the
   way to 0 and vanish completely (clipped by overflow:hidden) on a short enough room
   card, even though its items were rendered into the DOM correctly.

   Carries data-rooms-per-page (same value as .BoardGrid's data-room-count) so a rule can
   target a specific density, e.g. .BoardUpcomingList[data-rooms-per-page="12"] { ... }. */
.BoardUpcomingList {
  flex: 2 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}

.BoardUpcomingLabel {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(234,242,251,.5);
  margin-bottom: clamp(.12rem, .35vh, .2rem);
  flex-shrink: 0;
}

.BoardUpcomingScroll {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Idle room with more upcoming cases than fit in the configured visible-row count (see the
   "Programari urmatoare vizibile" settings) - the track holds the full list twice back to
   back and slides continuously from 0 to -50%, which lands it exactly back on the first
   copy for a seamless loop. Same duplicate-content technique as BoardMarqueeTrack's
   horizontal scroll (setupMarquee), just vertical and driven by CSS instead of JS since the
   item count - and therefore a sensible duration - is already known at render time. */
.BoardUpcomingTrack {
  animation: BoardUpcomingSlide var(--upcoming-rotate-duration, 12s) linear infinite;
}

@keyframes BoardUpcomingSlide {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

/* Marks the seam where the rotating queue wraps back to its earliest time, so that jump
   reads as "the list repeats" instead of "a new (earlier) day started" - see the loop
   divider comment in _board_content.html.twig. Styled like a divider rather than an item:
   centered, muted, no fit-scale sizing since it's not appointment data. */
.BoardUpcomingLoopMarker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .3rem 0;
  border-top: 1px dashed rgba(255,255,255,.15);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(234,242,251,.4);
}

/* Column, not row: BoardUpcomingTopRow (time + patient name + doctor) stacks above the
   specialty line, which spans the item's full width so it starts flush under the time
   instead of being indented under the patient name. */
.BoardUpcomingItem {
  display: flex;
  flex-direction: column;
  row-gap: calc(.05rem * var(--fit-scale, 1));
  padding: calc(clamp(.14rem, .4vh, .22rem) * var(--fit-scale, 1)) 0;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: calc(.85rem * var(--fit-scale, 1));
}

.BoardUpcomingItem:first-child { border-top: none; }

/* Stalled appointment (both its start and end time have passed with no activity recorded) -
   dim the whole line so it visually recedes behind cases that are still genuinely upcoming,
   while staying readable. */
.BoardUpcomingItem--stalled { opacity: .55; filter: grayscale(1); }

/* Pending appointment (its start time has passed but not yet its end, with no activity
   recorded) - a lighter warning than the fully-stalled treatment above: only the time tints
   orange, patient/doctor/specialty stay exactly as any other upcoming case, since the case
   may still genuinely be about to start. */
.BoardUpcomingItem--pending .BoardUpcomingBaseTime {
  color: var(--board-late-room);
}

/* Sits directly under the time on a pending item - signals "this was due in the room but
   nothing has been recorded yet", distinct from the (later, definitive) Amanat badge. Same
   dot+label language as BoardPulseDot/BoardStatusPill elsewhere on the board. */
.BoardUpcomingPendingTag {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  margin-top: .1em;
  font-size: .62em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--board-late-room);
  white-space: nowrap;
}

.BoardUpcomingPendingDot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--board-late-room);
  animation: BoardUpcomingPendingPulse 1.6s ease-in-out infinite;
}

@keyframes BoardUpcomingPendingPulse {
  0%, 100% { opacity: .4; transform: scale(.8); }
  50%      { opacity: 1; transform: scale(1); }
}

/* Time (fixed basis, never shrinks/wraps - see BoardUpcomingTimeSlot), patient name (grows
   into whatever's left) and doctor (pushed to the far right via margin-left:auto) share
   this row - only the specialty line, below, is excluded from it. */
.BoardUpcomingTopRow {
  display: flex;
  align-items: baseline;
  gap: .35rem;
}

/* Time + delay/badge as one unit, always on one line. Tight by default (just enough for a
   bare HH:MM) so plain rows don't leave a dead gap before the patient name - rows that
   actually carry a delay/estimate/badge grow past that minimum and push their own name
   over, rather than wrapping the badge onto its own line under the time (flex-shrink:0
   guarantees this slot keeps its full natural width instead of being squeezed by the
   patient name/specialty's own flex-grow). */
.BoardUpcomingTimeSlot {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  column-gap: .35em;
  min-width: 3.4em;
}

.BoardUpcomingBaseTime {
  font-weight: 700;
  color: #5bb8ee;
  font-variant-numeric: tabular-nums;
}

/* Stacks the pending icon directly under the time instead of alongside it - the only case
   where BoardUpcomingTimeSlot's children break its usual single-line rule (see its comment). */
.BoardUpcomingTimeCol {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}

/* Shifted estimate — reads as "pushed to" instead of a bare stacked "~HH:MM", so a
   delayed queue is obvious at a glance even from across the room. Defaults to the late
   (red) styling, since a per-case queue projection is never earlier than its own booked
   slot; the --early modifier below is used only for the one early-entry recommendation
   shown on the very next upcoming case when the room itself is running ahead. */
.BoardUpcomingEstimate {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  font-weight: 700;
  color: color-mix(in srgb, var(--board-late) 80%, #eaf2fb);
}

.BoardUpcomingShiftIcon {
  font-size: 1.05em;
  color: var(--board-late);
  animation: BoardUpcomingNudge 1.4s ease-in-out infinite;
}

.BoardUpcomingEstimate--early {
  color: color-mix(in srgb, var(--board-early) 80%, #eaf2fb);
}

.BoardUpcomingEstimate--early .BoardUpcomingShiftIcon {
  color: var(--board-early);
  animation: none;
}

@keyframes BoardUpcomingNudge {
  0%, 100% { transform: translateX(0); opacity: .55; }
  50%      { transform: translateX(3px); opacity: 1; }
}

.BoardUpcomingFieldIcon {
  color: #5bb8ee;
  flex-shrink: 0;
  font-size: .85em;
}

/* Grows to fill whatever BoardUpcomingTopRow has left after the time slot and the doctor -
   the only other item in that row with flex-grow, so it naturally claims all the leftover
   space (which is also what keeps the doctor pinned flush right without needing its own
   flex-grow hack). */
.BoardUpcomingPatient {
  min-width: 0;
  flex: 1 1 auto;
  color: #fff;
  font-weight: 600;
}

.BoardMarquee {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.BoardMarqueeTrack {
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
}

.BoardMarqueeTrack.is-scrolling {
  animation-name: BoardMarqueeScroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.BoardMarqueeCopy { padding-right: 3em; }

@keyframes BoardMarqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Pushed to the far right by margin-left:auto - reliable now that the patient name (the only
   other flex-grow item in BoardUpcomingTopRow) always absorbs the leftover space itself, so
   the doctor's own box naturally sits at its full natural content width (no need for its own
   flex-grow hack) whenever the row actually has room for it. */
.BoardUpcomingDoctor {
  display: flex;
  align-items: center;
  gap: .35em;
  min-width: 0;
  flex: 0 1 auto;
  margin-left: auto;
  color: rgba(234,242,251,.7);
}

.BoardUpcomingDoctor > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Same nested-flex fix as BoardNowMetaSpecialty's marquee: BoardUpcomingDoctor is itself
   display:flex, so .BoardMarquee (a direct child span, also matched by the ">span" rule
   above) is a flex item whose width:100% doesn't reliably resolve on its own - without this
   it stayed sized to its un-shrunk text content and kept sliding even once BoardUpcomingDoctor
   had plenty of room to give it. */
.BoardUpcomingDoctor .BoardMarquee { flex: 1 1 0%; }

/* An invisible twin of the time column (JS sets --upcoming-time-width to match
   BoardUpcomingTimeSlot's actual rendered width, which varies row to row depending on
   whether a delay/AMANAT badge is present - see markUpcomingSpecialtyIndent() in the inline
   script). Its only job is to occupy that same width on this row so BoardUpcomingSpecialty,
   right after it, starts flush under the patient name whenever it fits there. */
.BoardUpcomingSpecialtyRow {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.BoardUpcomingSpecialtySpacer {
  flex: 0 0 var(--upcoming-time-width, 3.4em);
  visibility: hidden;
}

/* flex-wrap on the row above does the actual work: when the specialty text doesn't fit next
   to the spacer (indented, under the patient name), it wraps onto its own fresh line - where,
   alone, it spans the item's full width and starts flush under the time instead. Still slides
   via .BoardMarquee if even that full line is too narrow for it. */
.BoardUpcomingSpecialty {
  flex: 1 1 auto;
  min-width: 6em;
  color: rgba(234,242,251,.55);
  overflow: hidden;
}

/* Styled to match .BoardNowBlock--empty (the "Sala libera" message) - same rounded dark
   panel, centered icon + muted text - so both "nothing to show" states on the card read
   as one consistent pattern. */
.BoardUpcomingEmpty {
  background: rgba(0,0,0,.18);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 100%;
  min-height: 50px;
  padding: clamp(.3rem, .8vh, .5rem) clamp(.5rem, 1.3vh, .8rem);
  color: rgba(234,242,251,.55);
  font-size: .88rem;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Logo-heart watermark behind the "no upcoming case" message - reuses the existing logo
   asset rather than a new one, in its original brand colors. isolation:isolate on the
   parent + z-index:-1 here keeps it below the icon/text without depending on paint order
   from a shared ancestor stacking context. */
.BoardUpcomingEmpty::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: -1;
  width: clamp(56px, 12vh, 96px);
  height: clamp(56px, 12vh, 96px);
  background-image: url(../images/logo-light.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .15;
  pointer-events: none;
}

.BoardEmptyState {
  width: 100%;
  text-align: center;
  padding: 3rem;
  color: rgba(234,242,251,.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  font-size: clamp(1rem, 1.4vw, 1.6rem);
}

.BoardEmptyState i { font-size: clamp(2rem, 2.8vw, 3.2rem); }

/* Kiosk device waiting/denied screen (board/kiosk.html.twig) - connecting/pending/denied
   states share one layout, only the accent color + ring animation change per data-state. */
.KioskState {
  --kiosk-accent: #4ea1ff;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.15rem;
  padding: 3rem 2rem;
}

.KioskState[data-state="pending"] { --kiosk-accent: #f5b83d; }
.KioskState[data-state="denied"]  { --kiosk-accent: #e5484d; }
.KioskState[data-state="error"]   { --kiosk-accent: #94a3b8; }

.KioskStateIconWrap {
  position: relative;
  width: clamp(84px, 9vw, 120px);
  height: clamp(84px, 9vw, 120px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.KioskStateIconWrap::before {
  content: '';
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--kiosk-accent) 35%, transparent) 0%, transparent 70%);
}

.KioskStateRing {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--kiosk-accent) 45%, transparent);
  animation: KioskRingPulse 2.4s ease-out infinite;
}

/* A denied device isn't "live" or awaiting anything - a static ring reads calmer/more final
   than a pulsing one, which otherwise implies something is actively in progress. */
.KioskState[data-state="denied"] .KioskStateRing {
  animation: none;
  opacity: .5;
}

.KioskStateIcon {
  position: relative;
  font-size: clamp(1.9rem, 2.8vw, 2.6rem);
  color: var(--kiosk-accent);
}

@keyframes KioskRingPulse {
  0%   { transform: scale(.85); opacity: .9; }
  70%  { transform: scale(1.4); opacity: 0; }
  100% { transform: scale(1.4); opacity: 0; }
}

.KioskStateTitle {
  font-size: clamp(1.25rem, 1.7vw, 1.8rem);
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.KioskStateText {
  font-size: clamp(.88rem, 1.05vw, 1.05rem);
  color: rgba(234,242,251,.65);
  margin: 0;
  max-width: 42ch;
  line-height: 1.5;
}

.KioskStateMeta {
  font-family: 'SFMono-Regular', Consolas, 'Courier New', monospace;
  font-size: .78rem;
  color: rgba(234,242,251,.4);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: .3rem .9rem;
}

.BoardFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: clamp(.82rem, .95vw, 1.25rem);
  color: rgba(234,242,251,.5);
}

.BoardFooter a { color: #5bb8ee; font-weight: 600; }
.BoardFooter a:hover { color: #fff; }

/* ==========================================================================
   Department Board — Patient Card Grid & Detail Modal
   (card color/severity styling lives with the rest of the dark theme in the
   DEPARTMENT PORTAL section above; this section is grid structure plus the
   patient detail modal, which gets its own dark "glass" chrome so it reads
   as part of the same board rather than a bootstrap-default popup.)
   ========================================================================== */

/* gap matches .DeptBoardGrid's own row gap below - without it, the seam between two stacked
   .DeptBoardGrid pages (tablet/mobile "show every page at once" mode) has no spacing while
   every other row does, since each page's internal gap doesn't apply between separate pages. */
.DeptBoardPager { display: flex; flex-direction: column; gap: 1rem; }
.DeptBoardGrid {
  display: none;
  grid-template-columns: repeat(var(--dept-cards-per-row, auto-fill), minmax(260px, 1fr));
  gap: 1rem;
}
.DeptBoardGrid.is-active { display: grid; }

/* ---- Modal chrome ---- */

.DeptPatientModal .modal-content {
  background: linear-gradient(165deg, #0d2e57 0%, #071c38 60%, #04101f 100%);
  border: 1px solid rgba(255,255,255,.14);
  color: #eaf2fb;
}
.DeptPatientModal .modal-header,
.DeptPatientModal .modal-footer {
  background: transparent;
  border-color: rgba(255,255,255,.12);
}
.DeptPatientModal .modal-title { color: #fff; font-weight: 700; }
.DeptPatientModal .modal-footer .CustomButtonSecondary {
  color: rgba(234,242,251,.85);
  border-color: rgba(255,255,255,.3);
}
.DeptPatientModal .modal-footer .CustomButtonSecondary:hover {
  background: rgba(255,255,255,.12);
  color: #fff;
  border-color: rgba(255,255,255,.5);
}

.DeptPatientModalLoading { text-align: center; padding: 3rem; color: rgba(234,242,251,.55); }

/* ---- Identity header + next-event banner ---- */

.DeptPatientDetail { display: flex; flex-direction: column; gap: 1.5rem; }

.DeptPatientDetailIdentity { display: flex; align-items: flex-start; gap: 1.1rem; }
.DeptPatientDetailAvatar {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(140deg, var(--color-primary), var(--color-primary-dark));
  border: 3px solid rgba(255,255,255,.15);
}
.DeptPatientDetailAvatar--atentie { background: linear-gradient(140deg, var(--dept-attention), #92650c); }
.DeptPatientDetailAvatar--critic {
  background: linear-gradient(140deg, var(--dept-critical), #7a1216);
  animation: DeptCriticalAvatarPulse 2s ease-in-out infinite;
}
@keyframes DeptCriticalAvatarPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dept-critical) 45%, transparent); }
  50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--dept-critical) 25%, transparent); }
}

.DeptPatientDetailIdentityMain { flex: 1; min-width: 0; }
.DeptPatientDetailNameRow { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .45rem; }
/* Severity badge in the modal identity row - solid status-color background with white text,
   instead of the shared .StatusBadge* light-pill style (which stays as-is everywhere else it's
   used, e.g. the users/devices/units admin lists). Scoped to this modal only. */
.DeptPatientDetailNameRow .StatusBadgeRed { background: var(--dept-critical); color: #fff; }
.DeptPatientDetailNameRow .StatusBadgeRed .DeptCriticalPulseDot { background: #fff; }
.DeptPatientDetailNameRow .StatusBadgeOrange { background: var(--dept-attention); color: #fff; }
.DeptPatientDetailNameRow .StatusBadgeGreen { background: var(--dept-stable); color: #fff; }
/* Same expanding-ring pulse as the critical avatar, applied to the "Critic" badge pill itself
   (not just the small dot already inside it) - scoped to this modal so it doesn't affect
   .StatusBadgeRed anywhere else in the app (users/devices/units lists, etc). */
.DeptPatientDetailNameRow .StatusBadgeRed { animation: DeptCriticalAvatarPulse 2s ease-in-out infinite; }
.DeptPatientDetailName { font-size: 1.3rem; font-weight: 800; color: #fff; }
.DeptPatientDetailMeta { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; font-size: .85rem; color: rgba(234,242,251,.7); }
.DeptPatientDetailMeta span { display: flex; align-items: center; gap: .4rem; }
.DeptPatientDetailMeta i { opacity: .75; width: 1em; text-align: center; }

.DeptNextEventBanner {
  display: flex;
  align-items: center;
  gap: .85rem;
  background: rgba(0,159,227,.12);
  border: 1px solid rgba(0,159,227,.3);
  border-radius: 12px;
  padding: .75rem 1rem;
}
.DeptNextEventBanner > i { font-size: 1.2rem; color: #5bb8ee; flex-shrink: 0; }
.DeptNextEventBannerBody { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.DeptNextEventBannerLabel { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: rgba(234,242,251,.55); }
.DeptNextEventBannerName { font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.DeptNextEventBannerTime { font-weight: 800; color: #5bb8ee; font-variant-numeric: tabular-nums; flex-shrink: 0; }

/* ---- Bottom row: procedures | medication | lab results (vitals and devices are full-width
   sections above this, not part of this grid - see DeptVitalsGrid/DeptDeviceGrid) ---- */

.DeptPatientDetailGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }

.DeptPatientDetailSection { display: flex; flex-direction: column; gap: .65rem; }
.DeptPatientDetailSectionTitle {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(234,242,251,.55);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.DeptPatientDetailSectionTitle i { color: #5bb8ee; }

/* All cards in a single row spanning the full modal width (Semne vitale now sits above the
   two-column grid, not inside its left column) - same card look as before (icon+label header,
   big value, history bars), just laid out side by side instead of a multi-column grid. */
.DeptVitalsGrid { display: flex; flex-wrap: wrap; gap: .65rem; }
.DeptVitalCard {
  flex: 1 1 0;
  min-width: 140px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-top: 3px solid rgba(255,255,255,.2);
  border-radius: 10px;
  padding: .7rem .8rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.DeptVitalCard--normal { border-top-color: var(--dept-stable); }
.DeptVitalCard--atentie { border-top-color: var(--dept-attention); }
.DeptVitalCard--critic { border-top-color: var(--dept-critical); }
.DeptVitalCardTop { display: flex; align-items: center; gap: .4rem; }
.DeptVitalCardTop i { font-size: .8rem; color: rgba(234,242,251,.55); }
.DeptVitalLabel { font-size: .72rem; color: rgba(234,242,251,.6); }
.DeptVitalValue { font-size: 1.2rem; font-weight: 800; color: #fff; }
.DeptVitalUnit { font-size: .68rem; font-weight: 600; color: rgba(234,242,251,.5); margin-left: .25rem; }
.DeptVitalHistory { display: flex; align-items: flex-end; gap: 2px; height: 24px; }
.DeptVitalHistoryBar { flex: 1; background: rgba(255,255,255,.18); border-radius: 2px; min-height: 2px; }
.DeptVitalCard--critic .DeptVitalHistoryBar { background: color-mix(in srgb, var(--dept-critical) 55%, rgba(255,255,255,.18)); }
.DeptVitalCard--atentie .DeptVitalHistoryBar { background: color-mix(in srgb, var(--dept-attention) 55%, rgba(255,255,255,.18)); }
.DeptVitalRange { color: rgba(234,242,251,.45); font-size: .7rem; }
.DeptVitalDirection { font-size: .68rem; margin-left: .2rem; vertical-align: .05em; }
.DeptVitalDirection--atentie { color: var(--dept-attention); }
.DeptVitalDirection--critic { color: var(--dept-critical); }

/* Vertical connecting line + status dot per row - procedures and medication both use this. */
.DeptTimelineList {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  margin-left: .3rem;
  padding-left: 1.1rem;
  border-left: 2px solid rgba(255,255,255,.12);
}
.DeptTimelineItem { position: relative; display: flex; align-items: center; gap: .6rem; font-size: .85rem; flex-wrap: wrap; }
.DeptTimelineItem::before {
  content: '';
  position: absolute;
  left: -1.44rem;
  top: .3rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(234,242,251,.35);
  border: 2px solid #071c38;
}
.DeptTimelineItem--in-desfasurare::before { background: var(--dept-attention); }
.DeptTimelineItem--finalizata::before { background: var(--dept-stable); }
.DeptTimelineItemName { color: #eaf2fb; flex: 1; min-width: 120px; }
.DeptTimelineItemTime { color: rgba(234,242,251,.55); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.DeptTimelineItemStatus {
  flex-shrink: 0;
  padding: .15rem .6rem;
  border-radius: 20px;
  font-size: .7rem;
  font-weight: 700;
  background: rgba(255,255,255,.1);
  color: rgba(234,242,251,.8);
}
.DeptTimelineItemStatus--in-desfasurare { background: rgba(245,184,61,.18); color: #f5b83d; }
.DeptTimelineItemStatus--finalizata { background: rgba(46,204,113,.18); color: #6be675; }

.DeptLabList { display: flex; flex-direction: column; gap: .1rem; }
.DeptLabRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .55rem 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
  font-size: .85rem;
}
.DeptLabRow:last-child { border-bottom: none; }
.DeptLabRow--out-of-range .DeptLabName,
.DeptLabRow--out-of-range .DeptLabValue { color: #ff8a8f; font-weight: 600; }
.DeptLabName { color: #eaf2fb; }
.DeptLabValue { font-variant-numeric: tabular-nums; }
.DeptLabRange { color: rgba(234,242,251,.5); font-size: .76rem; }

/* Compact inline pill chips, not boxed cards - the tall bordered rectangles of DeptVitalsGrid
   right above still read as "the same kind of tile" even with different internal content, so
   devices get a lower-weight, differently-shaped, content-sized (not stretched) treatment:
   wraps naturally like tags rather than forcing 5 equal-width boxes in a row. Only the abnormal
   case (alerta) gets an explicit text callout, same "don't shout the normal case" instinct as
   the compact patient card's severity icon. */
.DeptDeviceGrid { display: flex; flex-wrap: wrap; gap: .5rem; }
.DeptDeviceChip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .85rem .45rem .7rem;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  font-size: .82rem;
  color: #eaf2fb;
}
.DeptDeviceChip i { font-size: .78rem; color: rgba(234,242,251,.5); }
.DeptDeviceChip--alerta {
  background: color-mix(in srgb, var(--dept-critical) 16%, transparent);
  border-color: color-mix(in srgb, var(--dept-critical) 50%, transparent);
}
.DeptDeviceChip--alerta i { color: var(--dept-critical); }
.DeptDeviceChipDot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.DeptDeviceChipDot--conectat { background: var(--dept-stable); }
.DeptDeviceChipDot--deconectat { background: rgba(234,242,251,.3); }
.DeptDeviceChipDot--alerta { background: var(--dept-critical); animation: DeptCriticalPulseDot 1.6s infinite; }
.DeptDeviceChipAlert { color: var(--dept-critical); font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; }

/* ---- Printing a patient's chart: the Print button in the modal footer calls the browser's
   native window.print() (no server round-trip, no data written) - these rules hide everything
   except the modal content and flip it to a printer-friendly light palette. ---- */
@media print {
  body.DepartmentPortalPage > *:not(.modal) { display: none !important; }
  .modal-backdrop { display: none !important; }
  .DeptPatientModal { position: static !important; display: block !important; }
  .DeptPatientModal .modal-dialog { max-width: 100% !important; margin: 0 !important; }
  .DeptPatientModal .modal-content { background: #fff !important; color: #111 !important; border: none !important; box-shadow: none !important; }
  .DeptPatientModal .modal-header .btn-close,
  .DeptPatientModal .modal-footer { display: none !important; }
  .DeptPatientDetailName,
  .DeptPatientDetailSectionTitle,
  .DeptVitalValue,
  .DeptNextEventBannerName,
  .DeptTimelineItemName,
  .DeptLabName,
  .modal-title { color: #111 !important; }
}

/* Patient detail modal - tablet + mobile. Bootstrap's own .modal-dialog width caps kick in as
   low as the "sm" breakpoint (fixed ~500px), well before modal-xl's full 1140px cap applies
   (>=1200px viewport) - so on an actual tablet the dialog was rendering far narrower than the
   screen, which is why vitals/devices were wrapping despite there being real room. Widening the
   dialog to 90% of the viewport fixes that at the source; the vitals/devices "stay in one row"
   rules below only make sense once there's this much width to work with. */
@media (max-width: 1024px) {
  .DeptPatientModal .modal-dialog { max-width: 90vw; width: 90vw; }

  /* Vitals + connected devices: one inline row instead of wrapping, now that the dialog is
     wide enough - DeptVitalCard's normal 140px floor is dropped so all 5 can shrink to fit. */
  .DeptVitalsGrid { flex-wrap: nowrap; }
  .DeptVitalCard { min-width: 0; }
  .DeptDeviceGrid { flex-wrap: nowrap; overflow-x: auto; }

  /* Proceduri + Medicatie side by side, Analize on its own full-width row below - instead of
     all three stacked one-per-row. Analize is reliably the grid's 3rd/last section (see
     _patient_detail_fragment.html.twig). */
  .DeptPatientDetailGrid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .DeptPatientDetailSection:last-child { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  /* Phones: full-screen modal (no margins/rounded corners), matching Bootstrap's own
     .modal-fullscreen pattern - .modal-dialog-centered's flex-centering is neutralized
     (display:block) since a full-screen dialog fills the viewport rather than centering in it.
     Specificity bumped (body.DepartmentPortalPage prefix) to reliably beat Bootstrap's own
     .modal-dialog-centered.modal-dialog-scrollable combined rule, which ties on class count. */
  body.DepartmentPortalPage .DeptPatientModal .modal-dialog {
    max-width: 100vw;
    width: 100vw;
    height: 100%;
    height: 100dvh;
    margin: 0;
    display: block;
  }
  body.DepartmentPortalPage .DeptPatientModal .modal-content {
    height: 100%;
    max-height: 100%;
    border: 0;
    border-radius: 0;
  }

  /* Vitals + devices: one per row - flex-direction:column is more reliable here than
     wrap+shrink tricks, guarantees exactly one per row regardless of content width. Device
     chips keep their natural compact pill width (not stretched) - only "one per row" was
     asked for those, not "full width" like Proceduri/Medicatie below. */
  .DeptVitalsGrid { flex-direction: column; flex-wrap: nowrap; }
  /* flex:1 1 0 is a row-layout leftover - in a column container that flex-basis applies to
     height, not width, so it's pinned back to a normal content-sized block here. */
  .DeptVitalCard { flex: 0 0 auto; width: 100%; }
  .DeptDeviceGrid { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; overflow-x: visible; }

  /* Proceduri/Medicatie/Analize: full-width single column on phones, not the 2-col+full-row
     layout set <=1024px above (that was fine on tablet's extra width, too cramped on a phone). */
  .DeptPatientDetailGrid { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
  /* cardsPerRow setting doesn't apply below tablet width - always auto-fit as many
     260px-minimum cards as the viewport allows ("however many fits per row"). */
  .DeptBoardGrid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important; }

  /* Handheld mode: drop the kiosk fixed/no-scroll wrapper so a full unpaginated patient
     list can scroll normally (see dashboard.html.twig for the matching wake-lock/heartbeat
     JS gate - this class isn't present on the medic dashboard, so this is a no-op there). */
  .DepartmentPortalWrap { position: static; height: auto; overflow: visible; }
  .BoardScrollSpacer { display: none; }
}

@media (max-width: 640px) {
  /* Fixed 1 card/row on mobile, per explicit request (was 2/row). At full card width there's
     no reason to still cap DeptBoardCardVitals at 2 columns either - that cap only existed
     because a ~170px-wide (2-per-row) card couldn't fit 4 vital boxes; a full-width card can,
     so vitalsPerRow just falls back to the admin setting again, same as tablet/desktop. */
  .DeptBoardGrid { grid-template-columns: repeat(1, 1fr) !important; }
}