/* ==========================================================================
   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;
}

.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);
}

/* --------------------------------------------------------------------------
   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;
}
.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; }
.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; }

/* --------------------------------------------------------------------------
   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; }

@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; }

/* 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.TableCellEmptyIcon, .DataTable th.TableCellEmptyIcon { font-size: 1.5rem; display: block; margin-bottom: .5rem; }
.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;
}

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

.ActivityItem {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.ActivityItem:last-child {
    border-bottom: none;
}

.ActivityIcon {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--color-light);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: .75rem;
}

.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.5rem 2rem;
  background: linear-gradient(135deg, #012d65 0%, #024993 55%, #0087c2 100%);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 24px rgba(1, 45, 101, .25);
  color: #fff;
}

.DashboardHeroAvatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: .04em;
  border: 2px solid rgba(255, 255, 255, .25);
}

.DashboardHeroBody {
  flex: 1;
}

.DashboardHeroGreeting {
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.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;
}

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

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

/* ==========================================================================
   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: flex;
  flex-direction: column;
}

.QuickActionItem {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .85rem 1.25rem;
  color: var(--color-text);
  text-decoration: none;
  transition: background var(--transition);
  border-bottom: 1px solid var(--color-border);
}

.QuickActionItem:last-child {
  border-bottom: none;
}

.QuickActionItem:hover {
  background: var(--color-light);
  color: var(--color-text);
}

.QuickActionIcon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  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 {
  flex: 1;
  font-weight: 600;
  font-size: .9rem;
}

.QuickActionChevron {
  font-size: .7rem;
  color: var(--color-muted);
}

/* ==========================================================================
   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; }