/* KiDOPS360 – modern theme, mobile-first, light/dark */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&display=swap');

/* ----- Light theme (default) ----- */
:root {
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-accent: #f97316;
  --color-accent-hover: #ea580c;
  --color-surface: #ffffff;
  --color-surface-elevated: #f8fafc;
  --color-background: #eef2f7;
  --color-text: #1e293b;
  --color-text-muted: #64748b;
  --color-border: #e2e8f0;
  --color-success: #059669;
  --color-error: #dc2626;
  --color-success-bg: #ecfdf5;
  --color-error-bg: #fef2f2;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.05);
  --radius: 10px;
  --radius-sm: 6px;
  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-heading: var(--font-sans);
  --header-height: 64px;
  /* Viewport leftover below global header + page title + shell padding (left/right rails). */
  --app-shell-sidebar-chrome: calc(var(--header-height) + 5rem);
  --tap-min: 44px;
}

/* ----- Dark theme ----- */
[data-theme="dark"] {
  --color-primary: #60a5fa;
  --color-primary-hover: #93c5fd;
  --color-accent: #fb923c;
  --color-accent-hover: #fdba74;
  --color-surface: #1e293b;
  --color-surface-elevated: #334155;
  --color-background: #0f172a;
  --color-text: #f1f5f9;
  --color-text-muted: #94a3b8;
  --color-border: #334155;
  --color-success: #34d399;
  --color-error: #f87171;
  --color-success-bg: #064e3b;
  --color-error-bg: #450a0a;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow: 0 4px 6px -1px rgba(0,0,0,0.3), 0 2px 4px -2px rgba(0,0,0,0.2);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.4), 0 4px 6px -4px rgba(0,0,0,0.3);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
}

/* ----- Header ----- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: var(--header-height);
  padding: 0 1rem;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
/* Trial banner (below nav, above content) */
.trial-banner {
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  text-align: center;
  background: var(--color-surface-elevated);
  border-bottom: 1px solid var(--color-border);
}
.trial-banner p { margin: 0; }
.trial-banner a { color: var(--color-primary); font-weight: 600; text-decoration: underline; }
.trial-banner--soon { background: #fef3c7; border-bottom-color: #f59e0b; }
[data-theme="dark"] .trial-banner--soon { background: #451a03; border-bottom-color: #f59e0b; }
.trial-banner--expired { background: var(--color-error-bg); border-bottom-color: var(--color-error); }

.logo-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--color-text);
  font-weight: 700;
  font-size: 1.125rem;
}
.logo-link img {
  height: 40px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
}
@media (min-width: 480px) {
  .logo-link img { height: 44px; max-width: 200px; }
}

/* Nav: desktop */
.nav-main {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
}
.nav-main a {
  padding: 0.5rem 0.6rem;
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 0.9rem;
  border-radius: var(--radius-sm);
  min-height: var(--tap-min);
  display: inline-flex;
  align-items: center;
}
.nav-main a:hover {
  color: var(--color-primary);
  background: var(--color-surface-elevated);
}

/* Tasks menu dropdown (currentsite-style) */
.tasks-menu-wrap {
  position: relative;
  z-index: 210;
}
.tasks-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.75rem;
  min-height: var(--tap-min);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font-sans);
}
.tasks-menu-trigger:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.tasks-menu-trigger[aria-expanded="true"] {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-surface);
}
.tasks-menu-chevron {
  transition: transform 0.2s ease;
}
.tasks-menu-trigger[aria-expanded="true"] .tasks-menu-chevron {
  transform: rotate(180deg);
}
.tasks-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.25rem;
  min-width: 200px;
  padding: 0.35rem 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  z-index: 200;
}
.tasks-dropdown[hidden] { display: none !important; }
.tasks-dropdown:not([hidden]) { display: block; }
.tasks-dropdown a {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.9rem;
  border-radius: 0;
  min-height: auto;
}
.tasks-dropdown a:hover {
  background: var(--color-surface-elevated);
  color: var(--color-primary);
}
.tasks-dropdown-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: transparent;
}
.tasks-dropdown-backdrop.is-visible { display: block; }
.nav-user {
  margin: 0 0.25rem;
  padding: 0.35rem 0.5rem;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  border-radius: var(--radius-sm);
}
.location-dropdown-wrap {
  display: inline-flex;
  align-items: center;
}
.location-select {
  min-height: 36px;
  padding: 0.35rem 2rem 0.35rem 0.6rem;
  font-size: 0.9rem;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  appearance: auto;
}
.location-select:hover,
.location-select:focus {
  border-color: var(--color-primary);
  outline: none;
}
.nav-drawer .location-dropdown-wrap { margin: 0.5rem 0; width: 100%; }
.nav-drawer .location-select { width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.btn-link {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  padding: 0.5rem 0.6rem;
  text-decoration: none;
  border-radius: var(--radius-sm);
  min-height: var(--tap-min);
  display: inline-flex;
  align-items: center;
}
.btn-link:hover { color: var(--color-primary); background: var(--color-surface-elevated); }

/* Theme toggle */
.theme-toggle {
  flex-shrink: 0;
  width: var(--tap-min);
  height: var(--tap-min);
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.25rem;
}
.theme-toggle:hover { background: var(--color-surface-elevated); color: var(--color-text); }
.theme-toggle svg { width: 22px; height: 22px; }

/* Mobile menu button */
.menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  margin-left: auto;
}
.menu-toggle:hover { background: var(--color-surface-elevated); }
.menu-toggle svg { width: 24px; height: 24px; }
@media (min-width: 992px) {
  .menu-toggle { display: none; }
  .nav-main { display: flex; }
}

/* ----- Global header search ----------------------------------------------- */
.header-search {
  display: none;
  position: relative;
  flex: 1 1 auto;
  align-items: center;
  gap: 0.5rem;
  max-width: 520px;
  margin: 0 1rem;
  padding: 0 0.7rem;
  height: 2.4rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface-elevated);
}
.header-search:focus-within {
  border-color: var(--color-primary);
  background: var(--color-surface);
}
.header-search-icon { flex: 0 0 auto; color: var(--color-text-muted); }
.header-search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 0.9rem;
  color: var(--color-text);
  outline: none;
}
.header-search-input::placeholder { color: var(--color-text-muted); }
.header-search-kbd {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-family: inherit;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 5px;
  padding: 0.05rem 0.35rem;
}
@media (min-width: 768px) { .header-search { display: flex; } }

.header-search-results {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  z-index: 300;
  max-height: min(70vh, 460px);
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.16));
  padding: 0.35rem;
}
.gs-section + .gs-section { border-top: 1px solid var(--color-border); margin-top: 0.25rem; padding-top: 0.25rem; }
.gs-heading {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  padding: 0.4rem 0.6rem 0.25rem;
}
.gs-empty { padding: 0.9rem 0.7rem; margin: 0; text-align: center; }
.gs-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.6rem;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  color: var(--color-text);
}
.gs-row:hover { background: var(--color-surface-elevated); }
.gs-row--static { cursor: default; }
.gs-row--static:hover { background: transparent; }
.gs-avatar {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  background: rgba(37, 99, 235, 0.12);
  color: var(--color-primary);
}
.gs-avatar--adult { background: var(--color-surface-elevated); color: var(--color-text-muted); }
.gs-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.gs-row-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-row-meta { font-size: 0.8rem; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-pill {
  flex: 0 0 auto;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
}
.gs-pill--in { background: var(--color-success-bg); color: var(--color-success); }
.gs-pill--out { background: var(--color-surface-elevated); color: var(--color-text-muted); }

/* Header notification icons */
.header-icon-group { display: inline-flex; align-items: center; gap: 0.15rem; }
.header-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  border: none;
  background: transparent;
  border-radius: 50%;
  color: var(--color-text-muted);
  cursor: pointer;
  text-decoration: none;
}
.header-icon-btn:hover { background: var(--color-surface-elevated); color: var(--color-primary); }
.header-badge {
  position: absolute;
  top: 0.25rem;
  right: 0.2rem;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: var(--color-danger, #dc2626);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1rem;
  text-align: center;
}

/* Mobile nav drawer */
.nav-drawer {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  background: var(--color-surface);
  padding: 1rem;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 0.2s ease;
  border-right: 1px solid var(--color-border);
}
.nav-drawer.is-open { transform: translateX(0); }
.nav-drawer-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin: 1rem 0 0.5rem;
  padding: 0 1rem;
}
.nav-drawer-label:first-child { margin-top: 0; }
.nav-drawer-tasks { margin-bottom: 0.5rem; }
.nav-drawer a, .nav-drawer .btn-link {
  display: block;
  padding: 0.75rem 1rem;
  margin-bottom: 0.25rem;
  border-radius: var(--radius-sm);
  min-height: var(--tap-min);
  margin-left: 0;
}
.nav-drawer a:hover, .nav-drawer .btn-link:hover {
  background: var(--color-surface-elevated);
  color: var(--color-primary);
}
@media (min-width: 992px) {
  .nav-drawer { display: none !important; }
}

/* ----- Main content ----- */
.site-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.25rem 1rem;
  min-height: calc(100vh - var(--header-height) - 60px);
}
@media (min-width: 768px) {
  .site-main { padding: 1.5rem 1.5rem; }
}
.site-footer {
  text-align: center;
  padding: 1rem;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}

/* ----- Auth pages (signin, register, reset) ----- */
.page-signin {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem 3rem;
  /* Soft brand gradient that matches the email header treatment. */
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(37, 99, 235, 0.10) 0%, rgba(37, 99, 235, 0) 60%),
    linear-gradient(180deg, #f8fafc 0%, var(--color-background) 100%);
}
.signin-card {
  width: 100%;
  max-width: 420px;
  padding: 2.25rem 2rem;
  background: var(--color-surface);
  border-radius: 16px;
  box-shadow: 0 10px 30px -12px rgba(15, 23, 42, 0.22), 0 4px 10px -6px rgba(15, 23, 42, 0.12);
  border: 1px solid var(--color-border);
}
.signin-card h1 {
  margin: 0 0 0.35rem;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
}
.signin-card label { display: block; margin-bottom: 1rem; font-weight: 600; font-size: 0.85rem; color: var(--color-text); }
.signin-card input {
  width: 100%;
  padding: 0.8rem 1rem;
  margin-top: 0.4rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font-size: 1rem;
  font-family: inherit;
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.signin-card input::placeholder { color: var(--color-text-muted); }
.signin-card input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.signin-card button[type="submit"] {
  width: 100%;
  padding: 0.85rem 1rem;
  margin-top: 0.75rem;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-weight: 700;
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
  min-height: var(--tap-min);
  transition: background 0.15s, transform 0.05s;
}
.signin-card button[type="submit"]:hover { background: var(--color-primary-hover); }
.signin-card button[type="submit"]:active { transform: translateY(1px); }
.signin-card button[type="submit"]:disabled { opacity: 0.65; cursor: default; }
.signin-card .error { color: var(--color-error); margin-bottom: 1rem; font-size: 0.9rem; }
.signin-card .success { color: var(--color-success); margin-bottom: 1rem; font-size: 0.9rem; }
.signin-card a { color: var(--color-primary); text-decoration: none; font-weight: 600; }
.signin-card a:hover { text-decoration: underline; }
.signin-card > p { margin-top: 1.25rem; font-size: 0.875rem; color: var(--color-text-muted); }
.signin-card .muted { color: var(--color-text-muted); }
.signin-card .message { margin-bottom: 1rem; font-size: 0.9rem; }

/* ----- Buttons ----- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.25rem;
  min-height: var(--tap-min);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.btn-primary {
  background: var(--color-primary);
  color: #fff;
}
.btn-primary:hover { background: var(--color-primary-hover); color: #fff; }
.btn-accent {
  background: var(--color-accent);
  color: #fff;
}
.btn-accent:hover { background: var(--color-accent-hover); color: #fff; }
.btn-out {
  background: var(--color-surface-elevated);
  color: var(--color-text);
}
.btn-out:hover { background: var(--color-border); }
.btn-out:disabled, .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-sm { padding: 0.4rem 0.75rem; font-size: 0.875rem; min-height: 36px; }
.btn-block { width: 100%; display: flex; justify-content: center; }
.btn-secondary { background: var(--color-surface-elevated); color: var(--color-text); border: 1px solid var(--color-border); }
.btn-secondary:hover { background: var(--color-border); }
.btn-danger { background: var(--color-error); color: #fff; }
.btn-danger:hover { background: #b91c1c; color: #fff; }

/* ----- Dashboard (layout matches currentsite reference) ----- */
.dashboard-layout {
  padding: 0.75rem clamp(0.5rem, 1.2vw, 1.25rem);
  max-width: none;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}
.dashboard-layout.app-shell-root {
  background: #fff;
  padding-top: 0;
}
body:has(.app-shell-root) {
  background: #fff;
}
.dashboard-title { margin: 0 0 0.75rem; font-size: 1.5rem; font-weight: 700; }
/* App shell: page title lives in center column so left/right rails align with the top of the layout */
.app-shell-root .dashboard-center {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.app-shell-root .app-shell-page-heading {
  flex-shrink: 0;
  padding: 0 0.5rem;
  margin: 0 0 0.5rem;
  min-width: 0;
}
.app-shell-root .app-shell-page-heading .dashboard-title {
  margin: 0;
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
  text-align: left;
}
.dashboard-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  align-items: start;
}
.app-shell-root .dashboard-body {
  align-items: stretch;
  min-height: calc(100vh - var(--header-height) - 3.25rem);
  min-height: calc(100dvh - var(--header-height) - 3.25rem);
  padding-top: 0.75rem;
}
@media (min-width: 900px) {
  .dashboard-body {
    grid-template-columns: 240px minmax(0, 1fr) 300px;
  }
}
@media (min-width: 1200px) {
  .dashboard-body {
    grid-template-columns: 260px minmax(0, 1fr) 320px;
  }
}
/* Left Tasks / Quick Actions: never taller than viewport; cards stay in-column and scroll together. */
.app-shell-root .dashboard-left {
  position: sticky;
  top: 0.75rem;
  align-self: stretch;
  min-height: 0;
  max-height: min(
    calc(100vh - var(--app-shell-sidebar-chrome)),
    calc(100dvh - var(--app-shell-sidebar-chrome))
  );
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-sizing: border-box;
  background: transparent;
  border-right: none;
  padding-right: 0.5rem;
}
.app-shell-root .dashboard-left .dashboard-card {
  margin-bottom: 0;
  flex-shrink: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0.65rem 0.4rem;
}
.app-shell-root .dashboard-right .dashboard-card:not(.shell-right-panel) {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0.65rem 0.4rem;
}
.app-shell-root--dashboard .dashboard-right {
  position: sticky;
  top: 0.75rem;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: min(
    calc(100vh - var(--app-shell-sidebar-chrome)),
    calc(100dvh - var(--app-shell-sidebar-chrome))
  );
  overflow: hidden;
  scrollbar-gutter: stable;
  background: transparent;
  border-left: none;
  padding-left: 0.5rem;
}
.app-shell-root:not(.app-shell-root--dashboard) .dashboard-right {
  position: sticky;
  top: 0.75rem;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: min(
    calc(100vh - var(--app-shell-sidebar-chrome)),
    calc(100dvh - var(--app-shell-sidebar-chrome))
  );
  overflow: hidden;
  scrollbar-gutter: stable;
  background: transparent;
  border-left: none;
  padding-left: 0.5rem;
}
.app-shell-root:not(.app-shell-root--dashboard) .shell-right-column-inner {
  flex: 1 1 auto;
  min-height: 0;
}
.app-shell-root:not(.app-shell-root--dashboard) .shell-right-panels-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}
.app-shell-root--dashboard #shell-right-filters {
  flex-shrink: 0;
}
.app-shell-root--dashboard .shell-right-column-inner {
  flex: 1;
  min-height: 0;
}
.shell-right-column-inner {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 0;
}
.shell-right-icon-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.35rem;
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}
.shell-right-icon-toolbar--hidden { display: none; }
.shell-panel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.shell-panel-icon:hover { color: var(--color-primary); border-color: var(--color-primary); }
.shell-panel-icon.is-on {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: rgba(37, 99, 235, 0.1);
}
[data-theme="dark"] .shell-panel-icon.is-on {
  background: rgba(96, 165, 250, 0.12);
}
.shell-right-panels-scroll {
  min-height: 100px;
  max-height: min(65vh, 520px);
  overflow-y: auto;
  overflow-x: hidden;
  resize: vertical;
  padding-right: 0.2rem;
  border: 1px solid transparent;
  box-sizing: border-box;
}
.app-shell-root--dashboard .shell-right-panels-scroll {
  flex: 1 1 auto;
  min-height: 120px;
  max-height: none;
  resize: vertical;
}
.shell-right-panels-scroll:hover { border-color: var(--color-border); }
.app-shell-root .shell-right-icon-toolbar {
  border: none;
  box-shadow: none;
  background: transparent;
  border-radius: 8px;
}
.app-shell-root .shell-panel-icon {
  border: none;
  background: transparent;
  box-shadow: none;
}
.app-shell-root .shell-panel-icon:hover {
  color: var(--color-primary);
  background: rgba(37, 99, 235, 0.1);
  border: none;
}
.app-shell-root .shell-panel-icon.is-on {
  border: none;
  color: var(--color-primary);
  background: rgba(37, 99, 235, 0.16);
}
.app-shell-root .shell-right-panels-scroll {
  border: none;
  box-shadow: none;
  background: transparent;
  border-radius: 0;
}
.app-shell-root .shell-right-panels-scroll:hover {
  border-color: transparent;
}
.app-shell-root .shell-right-panel.dashboard-card {
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
  background: #fff;
  border-radius: 10px;
  padding: 0.85rem 0.75rem;
  margin-bottom: 0.65rem;
}
.app-shell-root .shell-right-panels-scroll .shell-right-panel + .shell-right-panel {
  position: relative;
}
[data-theme="dark"] .app-shell-root .shell-right-panel.dashboard-card {
  background: var(--color-surface);
}
.shell-right-panel--off { display: none !important; }
.dashboard-left .dashboard-card,
.dashboard-right .dashboard-card { margin-bottom: 0.75rem; }
.shell-right-panels-scroll .shell-right-panel:last-child { margin-bottom: 0; }

/* Dashboard right rail: fixed "set" boxes — long content scrolls inside each box
   instead of being toggled on/off with selectable widgets. */
.app-shell-root--dashboard #alerts-rail-body,
.app-shell-root--dashboard .shell-activity-list,
.app-shell-root--dashboard .shell-ratios-list,
.app-shell-root--dashboard .shell-bday-list {
  max-height: 232px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Upcoming Birthdays rows: name · short date · age */
.shell-bday-list { display: flex; flex-direction: column; }
.shell-bday-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--color-border);
}
.shell-bday-row:last-child { border-bottom: none; }
.shell-bday-name {
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shell-bday-date { color: var(--color-text-muted); font-size: 0.85rem; white-space: nowrap; }
.shell-bday-age {
  color: var(--color-text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  min-width: 3.2rem;
  text-align: right;
}
.dashboard-section h2 { margin: 0 0 0.5rem; font-size: 0.95rem; font-weight: 600; }
.checkbox-label { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; font-size: 0.9rem; cursor: pointer; }
.checkbox-label input { margin: 0; }
.list-compact li { padding: 0.25rem 0; font-size: 0.9rem; }
.small { font-size: 0.85rem; }
.quick-actions-buttons { display: flex; flex-direction: column; gap: 0.5rem; }
.quick-actions-buttons .btn-block { width: 100%; }
.tasks-nav { display: flex; flex-direction: column; gap: 0.5rem; }
.tasks-nav.shell-actions-nav a,
.tasks-nav.shell-actions-nav button.app-shell-nav-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  box-sizing: border-box;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  text-align: left;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text);
  border: none;
  box-shadow: none;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  cursor: pointer;
}
.tasks-nav.shell-actions-nav a:hover,
.tasks-nav.shell-actions-nav button.app-shell-nav-btn:hover {
  border: none;
  background: rgba(37, 99, 235, 0.07);
  color: var(--color-primary);
}
.tasks-nav.shell-actions-nav a.is-active,
.tasks-nav.shell-actions-nav button.app-shell-nav-btn.is-active {
  border: none;
  padding-left: 0.75rem;
  color: var(--color-primary);
  background: rgba(37, 99, 235, 0.12);
  box-shadow: none;
}
[data-theme="dark"] .tasks-nav.shell-actions-nav a.is-active,
[data-theme="dark"] .tasks-nav.shell-actions-nav button.app-shell-nav-btn.is-active {
  background: rgba(96, 165, 250, 0.14);
}
[data-theme="dark"] .tasks-nav.shell-actions-nav a:hover,
[data-theme="dark"] .tasks-nav.shell-actions-nav button.app-shell-nav-btn:hover {
  background: rgba(96, 165, 250, 0.08);
}
.shell-nav-section-title {
  margin: 0 0 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.shell-nav-item-inner {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  min-width: 0;
}
.shell-nav-label {
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}
.shell-nav-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
}
.shell-nav-badge[hidden] { display: none; }
.shell-nav-svg {
  flex-shrink: 0;
  display: block;
  width: 20px;
  height: 20px;
  opacity: 0.88;
}
.tasks-nav.shell-actions-nav button.app-shell-nav-btn.is-active .shell-nav-svg,
.tasks-nav.shell-actions-nav button.app-shell-nav-btn:hover .shell-nav-svg {
  opacity: 1;
}
.shell-quick-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.shell-quick-action {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text);
  border: none;
  box-shadow: none;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.shell-quick-action:hover {
  border: none;
  background: rgba(37, 99, 235, 0.07);
  color: var(--color-primary);
}
.shell-quick-action--primary {
  background: var(--color-primary);
  color: #fff;
  border: none;
  box-shadow: none;
}
.shell-quick-action--primary:hover {
  background: var(--color-primary-hover);
  color: #fff;
  border: none;
}
.shell-quick-action--primary .shell-nav-svg {
  opacity: 1;
  color: #fff;
}
[data-theme="dark"] .shell-quick-action:hover {
  background: rgba(96, 165, 250, 0.08);
}
.tasks-nav:not(.shell-actions-nav) a { font-size: 0.9rem; color: var(--color-text-muted); text-decoration: none; padding: 0.35rem 0; }
.tasks-nav:not(.shell-actions-nav) a:hover { color: var(--color-primary); }
.dashboard-main-content { min-height: 200px; min-width: 0; }
.dash-roster-root { min-width: 0; }
.dash-center-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
  padding: 0.6rem 0.75rem;
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.dash-toolbar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.dash-toolbar-label { font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); }

/* Admin / Support-staff view switcher (top-right of the dashboard toolbar) */
.dash-view-row { justify-content: flex-end; }
.dash-view-switch { display: inline-flex; align-items: center; gap: 0.45rem; }
.dash-view-switch-label {
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.dash-view-select { min-width: 12rem; }
/* Support-staff view: hide the top stat boxes so the roster fills the center. */
#dash-roster-root.dash-view--support .dash-top-boxes { display: none !important; }

/* Dashboard top stat boxes */
.dash-top-boxes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.dash-top-boxes:empty { display: none; }
.dash-box {
  display: flex;
  flex-direction: column;
  min-height: 9.5rem;
  padding: 0.85rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.dash-box-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; }
.dash-box-ico {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-elevated);
  color: var(--color-text-muted);
}
.dash-box-ico--att { background: rgba(22, 163, 74, 0.12); color: #15803d; }
.dash-box-ico--time { background: rgba(147, 51, 234, 0.12); color: #7e22ce; }
.dash-box-ico--bill { background: rgba(220, 38, 38, 0.12); color: #b91c1c; }
.dash-box-ico--imm { background: rgba(37, 99, 235, 0.12); color: #1d4ed8; }
.dash-box-title { font-weight: 700; font-size: 0.92rem; }
.dash-box-body { flex: 1 1 auto; min-height: 0; }
.dash-box-empty { margin: 0.4rem 0 0; }

.dash-att-stats { display: flex; gap: 0.5rem; }
.dash-att-stat { flex: 1 1 0; display: flex; flex-direction: column; align-items: flex-start; padding: 0.4rem 0; }
.dash-att-num { font-size: 1.6rem; font-weight: 800; line-height: 1; }
.dash-att-lbl { font-size: 0.74rem; color: var(--color-text-muted); margin-top: 0.2rem; }
.dash-att-stat--in .dash-att-num { color: #15803d; }
.dash-att-stat--out .dash-att-num { color: #b45309; }
.dash-att-stat--absent .dash-att-num { color: #b91c1c; }
.dash-att-stat { gap: 0; }
.dash-att-stat + .dash-att-stat { border-left: 1px solid var(--color-border); padding-left: 0.7rem; }
[data-theme="dark"] .dash-att-stat--in .dash-att-num { color: #4ade80; }
[data-theme="dark"] .dash-att-stat--out .dash-att-num { color: #fbbf24; }
[data-theme="dark"] .dash-att-stat--absent .dash-att-num { color: #f87171; }

.dash-box-summary { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: 0.8rem; color: var(--color-text-muted); margin-bottom: 0.5rem; }
.dash-box-summary strong { color: var(--color-text); font-size: 0.95rem; }

.dash-box-list { list-style: none; margin: 0; padding: 0; max-height: 9rem; overflow-y: auto; }
.dash-box-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0; font-size: 0.85rem; border-bottom: 1px solid var(--color-border); }
.dash-box-row:last-child { border-bottom: none; }
.dash-box-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
button.dash-box-name { background: none; border: none; padding: 0; font: inherit; color: var(--color-primary); cursor: pointer; font-weight: 600; }
button.dash-box-name:hover { text-decoration: underline; }
.dash-box-amt { flex: 0 0 auto; font-weight: 600; }
.dash-box-sub { flex: 0 0 auto; color: var(--color-text-muted); font-size: 0.78rem; }

/* Pending Time-Off box: header action + per-row approve/deny */
.dash-box-summary { align-items: center; justify-content: space-between; }
.dash-box-action {
  background: none; border: none; padding: 0; font: inherit; cursor: pointer;
  color: var(--color-primary); font-weight: 700; font-size: 0.78rem;
}
.dash-box-action:hover { text-decoration: underline; }
.dash-to-row { align-items: flex-start; }
.dash-to-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.dash-to-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-to-actions { flex: 0 0 auto; display: flex; gap: 0.3rem; }
.dash-to-btn {
  width: 1.5rem; height: 1.5rem; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; border: 1px solid var(--color-border); background: var(--color-surface);
  cursor: pointer; font-size: 0.78rem; line-height: 1; padding: 0;
}
.dash-to-btn:disabled { opacity: 0.5; cursor: default; }
.dash-to-btn--ok { color: #15803d; }
.dash-to-btn--ok:hover { background: var(--color-success-bg); border-color: #15803d; }
.dash-to-btn--no { color: #b91c1c; }
.dash-to-btn--no:hover { background: rgba(185, 28, 28, 0.1); border-color: #b91c1c; }

/* Request time-off form (inside dynamic panel) */
.dash-to-form { display: flex; flex-direction: column; gap: 0.85rem; }
.dash-to-fld { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; font-weight: 600; }
.dash-to-fld span { color: var(--color-text-muted); font-weight: 700; font-size: 0.78rem; }
.dash-to-fld input, .dash-to-fld select, .dash-to-fld textarea {
  width: 100%; padding: 0.5rem 0.6rem; border: 1px solid var(--color-border);
  border-radius: 8px; background: var(--color-surface); color: var(--color-text); font: inherit;
}
.dash-to-fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.dash-to-form-actions { display: flex; justify-content: flex-end; }
.dash-chip-group { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.dash-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.dash-chip input { margin: 0; }
.dash-columns-toolbar-row { align-items: flex-start; }
.dash-col-visibility-group { align-self: center; display: inline-flex; flex-wrap: wrap; gap: 1rem; }
.dash-col-visibility-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.dash-col-visibility-toggle input { margin: 0; }
.dash-col-strips-row { flex-direction: column; align-items: stretch; gap: 0.5rem; }
.dash-col-strips-row:not(:has(> :not([hidden]))) { display: none; }
.dash-col-fieldset--strip { margin: 0; min-width: 0; }
.dash-col-fieldset--strip .dash-col-toggle-grid { max-height: 6.5rem; overflow: auto; }
.dash-roster-search-wrap { display: flex; flex-direction: column; gap: 0.2rem; min-width: 10rem; flex: 1; }
.dash-roster-search-input { max-width: 22rem; }
.dash-name-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-primary);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.dash-name-link--photo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}
.dash-name-link--photo .dash-name-text { text-decoration: underline; }
.dash-roster-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  flex: 0 0 auto;
  object-fit: cover;
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}
.dash-child-summary-dl { display: grid; grid-template-columns: 10rem 1fr; gap: 0.25rem 0.75rem; margin: 0.5rem 0 0; }
.dash-child-summary-dl dt { font-weight: 600; margin: 0; color: var(--color-text-muted); }
.dash-child-summary-dl dd { margin: 0; }

.billing-ledger-tab-pane[hidden] { display: none !important; }
.billing-record-account-wrap { position: relative; }
.billing-record-suggest {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  max-height: 12rem;
  overflow: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.billing-record-suggest li { padding: 0.4rem 0.6rem; cursor: pointer; }
.billing-record-suggest li:hover { background: var(--color-surface-elevated); }
.billing-record-multi-row { margin-bottom: 0.75rem; }
.billing-record-paidby-actions { display: block; margin-top: 0.45rem; }
.billing-record-paidby-hint { display: block; margin-top: 0.35rem; line-height: 1.45; max-width: 36rem; }
.billing-nr-freq-group { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.5rem 0; padding: 0.5rem 0.65rem; border: 1px dashed var(--color-border); border-radius: var(--radius); }

.staff-roster-detail-dl {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 0.35rem 0.75rem;
  margin: 0;
}
.staff-roster-detail-dl dt { margin: 0; font-weight: 600; color: var(--color-text-muted); }
.staff-roster-detail-dl dd { margin: 0; }

.att-view-fieldset { margin: 0.75rem 0 0.25rem; border: none; padding: 0; }
.att-view-options { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.att-view-label { margin: 0; font-weight: 500; }
.dash-columns-panel[hidden] { display: none !important; }
.dash-columns-panel {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 0.5rem;
  padding: 0.65rem 0.75rem;
  max-height: min(50vh, 280px);
  overflow: auto;
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.dash-columns-panel-inner { min-width: 0; }
.dash-columns-trigger::after {
  content: '';
  display: inline-block;
  margin-left: 0.35rem;
  border: 0.22rem solid transparent;
  border-top-color: currentColor;
  vertical-align: middle;
  transform: translateY(0.1rem);
  transition: transform 0.15s ease;
}
.dash-columns-trigger[aria-expanded="true"]::after {
  transform: translateY(0.05rem) rotate(180deg);
}
.dash-columns-trigger { display: inline-flex; align-items: center; gap: 0.4rem; }
.dash-col-count {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
  white-space: nowrap;
}
.dash-col-count:empty { display: none; }
.dash-col-legend-count { font-weight: 500; font-size: 0.78rem; color: var(--color-text-muted); margin-left: 0.25rem; }
.dash-column-reset-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.65rem; }
.dash-col-fieldset {
  margin: 0.5rem 0 0.75rem;
  padding: 0.6rem 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}
.dash-col-fieldset legend { font-weight: 600; font-size: 0.88rem; padding: 0 0.25rem; }
.dash-col-toggle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.3rem 0.5rem;
  max-height: 200px;
  overflow-y: auto;
  margin-top: 0.35rem;
}
.dash-col-toggle-grid .dashboard-col-toggle { font-size: 0.8rem; }
.dash-table-scroll { max-width: 100%; }
.dash-data-table { min-width: 100%; }
/* Frozen header row: the table wrap scrolls internally so the header stays put. */
#child-info-table-wrap.dash-table-scroll {
  max-height: calc(100vh - 250px);
  min-height: 280px;
  overflow: auto;
}
#child-info-table-wrap .dash-data-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--color-surface-elevated);
}
/* Selectable rows: hover + click-to-select highlight (clicking blank space). */
#child-info-table-wrap .dash-data-table tbody tr { cursor: pointer; }
#child-info-table-wrap .dash-data-table tbody tr:hover > td {
  background: rgba(37, 99, 235, 0.06);
}
#child-info-table-wrap .dash-data-table tbody tr.is-row-selected > td {
  background: rgba(37, 99, 235, 0.13);
}
#child-info-table-wrap .dash-data-table tbody tr:hover > td.dash-sticky-col {
  background: rgba(37, 99, 235, 0.06);
}
#child-info-table-wrap .dash-data-table tbody tr.is-row-selected > td.dash-sticky-col {
  background: rgba(37, 99, 235, 0.13);
}
.dash-draft-form label { display: block; margin-bottom: 0.6rem; }
.dash-draft-form input, .dash-draft-form select, .dash-draft-form textarea { max-width: 100%; }
.dash-cell-text { margin-right: 0.25rem; }
.dash-paycell-btn { vertical-align: middle; }
.header-dropdown { position: relative; }
.header-dropdown-panel[hidden] { display: none !important; }
.header-dropdown-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.35rem);
  min-width: 12rem;
  max-width: min(20rem, calc(100vw - 1.5rem));
  padding: 0.5rem 0.65rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 200;
}
.header-dropdown--site .header-dropdown-panel { right: 0; left: auto; }
.header-dropdown-section { margin-bottom: 0.5rem; }
.header-dropdown-label { display: block; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 0.25rem; }
.header-dropdown-links { display: flex; flex-direction: column; gap: 0.25rem; }
.header-dropdown-links a { font-size: 0.9rem; text-decoration: none; color: var(--color-text); }
.header-dropdown-links a:hover { color: var(--color-primary); }
.header-dropdown-meta { display: block; margin-bottom: 0.35rem; word-break: break-all; }
.header-signout-link { display: block; font-weight: 600; margin-top: 0.25rem; }
.header-dropdown-trigger--user { display: inline-flex; align-items: center; gap: 0.25rem; }
.header-dropdown-caret {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.7;
}
.header-location-select { width: 100%; margin-top: 0.2rem; }

.dashboard-main h1 { margin-top: 0; font-size: 1.5rem; font-weight: 700; }
.quick-actions, .tasks-menu { margin-top: 1.5rem; }
.quick-actions .btn, .tasks-menu .btn { margin-right: 0.5rem; margin-bottom: 0.5rem; }

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1.25rem;
}
@media (min-width: 640px) {
  .dashboard-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .dashboard-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}
.dashboard-card {
  background: var(--color-surface);
  padding: 1.25rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--color-border);
}
.dashboard-card h2 { margin: 0 0 0.75rem; font-size: 1rem; font-weight: 600; }

.dashboard-column-picker-card .dashboard-column-toggles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.35rem 0.65rem;
  max-height: 340px;
  overflow-y: auto;
  margin-top: 0.5rem;
  padding-right: 0.25rem;
}
.dashboard-column-picker-card .dashboard-col-toggle {
  font-size: 0.82rem;
  line-height: 1.35;
  margin: 0;
}
.dashboard-column-picker-card .dashboard-col-toggle input {
  margin-top: 0.2rem;
}

/* Panels (shared dashboard / task pages / parent portal) — was only max-width on .task-page .card */
.card {
  background: var(--color-surface);
  padding: 1.25rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--color-border);
}
.card h2 { margin: 0 0 0.75rem; font-size: 1.125rem; font-weight: 600; }
.card > h3 { margin: 1rem 0 0.5rem; font-size: 1rem; font-weight: 600; }

/* Parent portal: tab strip + framing */
.parent-portal-intro { margin-bottom: 1rem; }
.parent-portal-intro h1 { margin: 0 0 0.35rem; font-size: 1.5rem; font-weight: 700; }

.parent-portal-tablist {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 0.2rem;
  margin: 0 0 1rem;
  list-style: none;
  border-radius: var(--radius);
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.parent-portal-tablist a {
  display: inline-block;
  padding: 0.55rem 1rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  border-radius: calc(var(--radius-sm) + 2px);
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.parent-portal-tablist a:hover { color: var(--color-primary); background: rgba(13, 148, 136, 0.08); }
[data-theme="dark"] .parent-portal-tablist a:hover { background: rgba(45, 212, 191, 0.1); }

.parent-portal-tablist a.is-active {
  color: var(--color-text);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  font-weight: 600;
}
.parent-portal-tablist li { margin: 0; padding: 0; }

.parent-messages-wrap { width: 100%; min-height: 420px; }

/* Parent portal: responsive framing (Phase 3) */
.parent-portal-body .site-main.parent-portal-main {
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
  padding-bottom: 2rem;
}
.parent-portal-header .nav-main {
  flex-wrap: wrap;
  gap: 0.25rem;
  justify-content: flex-end;
}
.parent-announcement-list { padding: 0; margin: 0; list-style: none; }
.parent-feed-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin-top: 0.35rem; }
.parent-feed-chip {
  font-size: 0.8125rem;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  background: var(--color-surface-elevated, #f4f6f9);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
[data-theme="dark"] .parent-feed-chip {
  background: rgba(255, 255, 255, 0.06);
}
.parent-feed-events { margin: 0.35rem 0 0 1rem; padding: 0; color: var(--color-text); }
.parent-feed-events li { margin-bottom: 0.35rem; }
.parent-child-detail-main label { margin-bottom: 0.65rem; display: block; max-width: 36rem; }

@media (max-width: 640px) {
  .parent-portal-tablist a { padding: 0.5rem 0.65rem; font-size: 0.875rem; }
  .parent-portal-intro h1 { font-size: 1.35rem; }
}

.hidden { display: none !important; }
/* Center column must allow shrinking so wide tables scroll instead of stretching the page */
.dashboard-center {
  min-width: 0;
  max-width: none;
  width: 100%;
  flex: 1 1 auto;
}
.app-shell-root .dashboard-center > .dashboard-main-content {
  flex: 1;
  min-height: 0;
  max-width: none;
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  border: none;
  box-shadow: none;
  padding: 0 0.5rem 1rem;
}

/* Child info table: horizontal scroll when many columns are selected */
#child-info-table-wrap {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  scrollbar-gutter: stable;
}
#child-info-table-wrap .data-table {
  width: max-content;
  min-width: 100%;
  max-width: none;
}
#child-info-table-wrap .data-table th,
#child-info-table-wrap .data-table td {
  white-space: nowrap;
  border-right: none;
}
#child-info-table-wrap .dash-data-table thead th.dash-sticky-col,
#child-info-table-wrap .dash-data-table tbody td.dash-sticky-col {
  position: sticky;
  background: var(--color-surface);
  box-shadow: 2px 0 3px -3px rgba(0, 0, 0, 0.08);
}
#child-info-table-wrap .dash-data-table thead th.dash-sticky-col {
  z-index: 4;
  background: var(--color-surface-elevated);
}
#child-info-table-wrap .dash-data-table tbody td.dash-sticky-col {
  z-index: 2;
}
#child-info-table-wrap .dash-data-table .dash-sticky-1 { left: 0; }
#child-info-table-wrap .dash-data-table .dash-sticky-2 {
  left: var(--dash-sticky-w1, 7.5rem);
}
[data-theme="dark"] #child-info-table-wrap .dash-data-table thead th.dash-sticky-col,
[data-theme="dark"] #child-info-table-wrap .dash-data-table tbody td.dash-sticky-col {
  background: var(--color-surface);
}
[data-theme="dark"] #child-info-table-wrap .dash-data-table thead th.dash-sticky-col {
  background: var(--color-surface-elevated);
}
#child-info-table-wrap .data-table th.sortable-th {
  vertical-align: bottom;
}
#child-info-table-wrap .sortable-th-btn {
  font: inherit;
  font-weight: 600;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
  width: 100%;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 0.2em;
}
#child-info-table-wrap .sortable-th-btn:hover {
  color: var(--color-primary);
  text-decoration-style: solid;
}
#child-info-table-wrap .sortable-th.sortable-th--active .sortable-th-btn {
  text-decoration-style: solid;
  color: var(--color-primary);
}

.child-info-toolbar { margin-bottom: 0.75rem; }

.reports-page {
  max-width: 72rem;
}
.reports-page-intro {
  margin-bottom: 0.75rem;
  line-height: 1.5;
}
.reports-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.25rem;
}
.reports-msg {
  min-height: 1.2em;
  margin: 0.35rem 0 0.75rem;
}
.reports-section-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 1.25rem 0 0.5rem;
}
.reports-section-title--card {
  margin-top: 0;
}
.reports-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
  margin-top: 0.35rem;
}
.reports-card h3.small {
  font-size: 0.85rem;
  margin: 0 0 0.35rem;
  font-weight: 600;
}
.reports-stat {
  font-size: 1.75rem;
  font-weight: 600;
  margin: 0.25rem 0;
}
.reports-export-card,
.reports-links-card {
  margin-top: 1.5rem;
  padding: 1rem 1.15rem;
}
.reports-export-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: flex-end;
  margin: 0.75rem 0;
}
.reports-export-label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
}
.reports-export-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.reports-export-msg {
  margin-top: 0.75rem;
}
.reports-related-list {
  margin: 0.35rem 0 0;
  padding-left: 1.15rem;
}
.reports-related-list li {
  margin-bottom: 0.35rem;
}

.att-report-export-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  margin: 0.75rem 0;
}
.att-report-date-label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
}
.att-report-export-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

/* Attendance trend viewer (ratio snapshot — charts + list) */
.att-trend-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin: 0.5rem 0 0.75rem;
}
.att-trend-view-toggle {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 0.65rem;
}
.att-trend-tab--active.btn,
.att-trend-tab--active {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: rgba(13, 148, 136, 0.1);
}
[data-theme='dark'] .att-trend-tab--active.btn,
[data-theme='dark'] .att-trend-tab--active {
  background: rgba(45, 212, 191, 0.12);
}
.att-trend-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.75rem;
}
.att-trend-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  border: 1px solid var(--color-border);
}
.att-trend-chip--ok {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.45);
  color: #059669;
}
[data-theme='dark'] .att-trend-chip--ok {
  color: #6ee7b7;
}
.att-trend-chip--warn {
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.45);
  color: #b45309;
}
[data-theme='dark'] .att-trend-chip--warn {
  color: #fcd34d;
}
.att-trend-chip--bad {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.45);
  color: #b91c1c;
}
[data-theme='dark'] .att-trend-chip--bad {
  color: #fca5a5;
}
.att-trend-dist-label {
  margin-bottom: 0.25rem;
}
.att-trend-dist-bar {
  display: flex;
  height: 0.65rem;
  border-radius: 6px;
  overflow: hidden;
  max-width: 32rem;
  border: 1px solid var(--color-border);
}
.att-trend-dist-seg {
  min-width: 2px;
  height: 100%;
}
.att-trend-dist-seg--ok {
  background: #10b981;
}
.att-trend-dist-seg--warn {
  background: #f59e0b;
}
.att-trend-dist-seg--bad {
  background: #ef4444;
}
.att-trend-legend {
  list-style: none;
  padding: 0;
  margin: 0.45rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
}
.att-trend-legend li {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.att-trend-swatch {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 2px;
  flex-shrink: 0;
}
.att-trend-swatch--ok {
  background: #10b981;
}
.att-trend-swatch--warn {
  background: #f59e0b;
}
.att-trend-swatch--bad {
  background: #ef4444;
}
.att-trend-subnote {
  margin: 0.5rem 0 0;
}
.att-trend-charts-scroll {
  max-height: min(52vh, 440px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0.25rem;
  margin-top: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.att-trend-room-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.65rem 0.85rem;
  background: var(--color-surface-elevated);
}
.att-trend-room-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
}
.att-trend-room-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}
.att-trend-room-meta {
  margin: 0.35rem 0 0.5rem;
  line-height: 1.45;
}
.att-trend-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.2rem 0.45rem;
  border-radius: var(--radius-sm);
}
.att-trend-badge--inline {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 600;
  font-size: 0.82rem;
}
.att-trend-badge--ok {
  background: rgba(16, 185, 129, 0.18);
  color: #047857;
}
[data-theme='dark'] .att-trend-badge--ok {
  color: #6ee7b7;
}
.att-trend-badge--warn {
  background: rgba(245, 158, 11, 0.2);
  color: #b45309;
}
[data-theme='dark'] .att-trend-badge--warn {
  color: #fcd34d;
}
.att-trend-badge--bad {
  background: rgba(239, 68, 68, 0.18);
  color: #b91c1c;
}
[data-theme='dark'] .att-trend-badge--bad {
  color: #fca5a5;
}
.att-trend-meter-block {
  margin-top: 0.5rem;
}
.att-trend-meter-caption {
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.2rem;
}
.att-trend-meter-track {
  height: 10px;
  background: var(--color-border);
  border-radius: 5px;
  overflow: hidden;
}
.att-trend-meter-fill {
  height: 100%;
  border-radius: 5px;
  max-width: 100%;
}
.att-trend-meter-fill--ok {
  background: #14b8a6;
}
.att-trend-meter-fill--warn {
  background: #f59e0b;
}
.att-trend-meter-fill--bad {
  background: #ef4444;
}
.att-trend-meter-fill--muted {
  background: var(--color-text-muted);
  opacity: 0.35;
}
.att-trend-meter-scale {
  margin-top: 0.2rem;
  font-size: 0.78rem;
}
.att-trend-list-wrap {
  margin-top: 0.5rem;
  max-height: min(52vh, 480px);
  overflow: auto;
}
.att-trend-list-table th {
  white-space: nowrap;
}
/* Attendance toolbar layout — visual styling comes from the shared .kd-tabs class. */
.att-track-page-actions.billing-settings-actions {
  margin: 0;
  min-width: 13.5rem;
}
.att-track-page-actions .billing-settings-actions-row {
  justify-content: flex-end;
}
.att-track-page-actions .btn {
  width: 100%;
  justify-content: center;
}
.att-track-toolbar.kd-tabs {
  margin-bottom: 1.15rem;
}
.att-track-controls-card .att-asof-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  margin-bottom: 0.35rem;
}
.att-asof-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  font-size: 0.93rem;
}
.att-asof-label input { min-width: 10.5rem; }
.att-asof-friendly { font-size: 0.9rem; }

/* ----- Absences tab ----- */
.att-abs-controls { gap: 0.65rem 1.25rem; }
.att-abs-range-lbl input { min-width: 0 !important; }
.att-abs-field {
  display: inline-flex;
  flex-direction: column;
  gap: 0.2rem;
  font-weight: 600;
  font-size: 0.85rem;
}
.att-abs-field input { min-width: 9.5rem; }
.att-abs-tools {
  margin-left: auto;
  display: inline-flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.att-abs-poppanel {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.1rem;
  padding: 0.75rem 0.85rem;
  margin: 0.25rem 0 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg-subtle, #f8fafc);
}
.att-abs-filters label {
  display: inline-flex;
  flex-direction: column;
  gap: 0.2rem;
  font-weight: 600;
  font-size: 0.82rem;
}
.att-abs-filters select,
.att-abs-filters input { min-width: 11rem; }

.att-abs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0.9rem 0 0.4rem;
}
.att-abs-title { margin: 0; font-size: 1.05rem; font-weight: 700; }
.att-abs-kebab-wrap { position: relative; }
.att-abs-kebab {
  border: none;
  background: transparent;
  font-size: 1.3rem;
  line-height: 1;
  padding: 0.15rem 0.5rem;
  border-radius: 8px;
  cursor: pointer;
  color: var(--color-text-muted, #64748b);
}
.att-abs-kebab:hover { background: var(--color-bg-subtle, #f1f5f9); }
.att-abs-kebab-menu {
  position: absolute;
  right: 0;
  top: 110%;
  z-index: 30;
  min-width: 11rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
  padding: 0.35rem;
}
.att-abs-kebab-menu button {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 0.5rem 0.65rem;
  border-radius: 7px;
  font-size: 0.9rem;
  cursor: pointer;
}
.att-abs-kebab-menu button:hover { background: var(--color-bg-subtle, #f1f5f9); }

.att-abs-add-form {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  margin-bottom: 0.85rem;
  background: var(--color-bg-subtle, #f8fafc);
}
.att-abs-add-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.7rem 1rem;
}
.att-abs-add-grid label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-weight: 600;
  font-size: 0.82rem;
}
.att-abs-add-grid .att-abs-add-full { grid-column: 1 / -1; }
.att-abs-add-grid select,
.att-abs-add-grid input { padding: 0.45rem 0.55rem; }
.att-abs-add-actions { margin-top: 0.8rem; display: flex; gap: 0.5rem; }

.att-doc-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  white-space: nowrap;
}

.att-abs-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-top: 0.85rem;
}
.att-abs-pager-right {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.85rem;
}
.att-abs-pagesize select { padding: 0.3rem 0.4rem; margin-right: 0.25rem; }
.att-abs-page-nav { display: inline-flex; gap: 0.25rem; }
.att-pg-btn {
  min-width: 2rem;
  height: 2rem;
  border: 1px solid var(--color-border);
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--color-text, #0f172a);
}
.att-pg-btn:hover:not(:disabled) { background: var(--color-bg-subtle, #f1f5f9); }
.att-pg-btn.is-active {
  background: var(--color-primary, #2563eb);
  border-color: var(--color-primary, #2563eb);
  color: #fff;
}
.att-pg-btn:disabled { opacity: 0.45; cursor: default; }
.att-col-fieldset {
  margin: 0.85rem 0;
  padding: 0.72rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-elevated);
}
.att-col-fieldset legend {
  font-weight: 600;
  padding: 0 0.3rem;
}
.att-col-toggles-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.05rem;
}
.att-col-label { margin: 0; }
.att-apply-filter-label { margin: 0 0 0.75rem; font-weight: 500; }
.att-track-summary { margin: 0.35rem 0 0.5rem; min-height: 1.35em; }
.att-modal-section { margin-top: 0.85rem; }
.att-anom-block { margin-top: 1rem; }
.att-anom-block h3 { margin: 0 0 0.45rem; font-size: 1rem; font-weight: 600; }
.att-anom-msg { margin: 0.5rem 0; }
.att-track-table-wrap { overflow-x: auto; max-width: 100%; }
.att-track-footnote { margin-top: 1rem; }

.att-track-foot-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-top: 1.25rem;
  padding-top: 0.5rem;
}
.att-track-foot-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}
.att-quick-co-trigger {
  font-weight: 600;
}
.att-regroup-modal-overlay {
  z-index: 212;
}
.att-regroup-modal-card {
  width: 100%;
  max-width: 680px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  max-height: min(92vh, 720px);
  overflow: auto;
}
.att-regroup-modal-header {
  padding: 1rem 1.15rem;
  margin: 1rem 1.15rem 0.75rem;
  border: 2px solid #334155;
  border-radius: 8px;
  background: var(--color-surface-elevated);
}
[data-theme='dark'] .att-regroup-modal-header {
  border-color: #94a3b8;
}
.att-regroup-modal-title {
  margin: 0 0 0.45rem;
  font-size: 1.22rem;
  font-weight: 700;
}
.att-regroup-modal-explainer {
  margin: 0;
  line-height: 1.45;
}
.att-regroup-modal-body {
  padding: 0 1.15rem 1.25rem;
}
.att-regroup-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: start;
  margin-bottom: 1rem;
}
@media (max-width: 700px) {
  .att-regroup-columns {
    grid-template-columns: 1fr;
  }
}
.att-regroup-scope-fieldset {
  border: none;
  margin: 0 0 0.85rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.att-regroup-radio-line {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  margin: 0;
  cursor: pointer;
}
.att-regroup-field-label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.3rem;
}
.att-regroup-transfer-label {
  display: block;
  font-weight: 700;
  font-size: 0.96rem;
  margin-bottom: 0.35rem;
  color: var(--color-text);
}
.att-regroup-select {
  width: 100%;
  min-height: 2.5rem;
}
.att-regroup-msg {
  margin: 0 0 0.85rem;
}
.att-regroup-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: stretch;
}
.att-regroup-actions .att-regroup-transfer-btn,
.att-regroup-actions .att-regroup-cancel-btn {
  flex: 1;
  min-width: 7.5rem;
}
.att-regroup-transfer-btn {
  font-weight: 600;
  min-height: 2.65rem;
}
.att-regroup-cancel-btn {
  min-height: 2.5rem;
}
.att-regroup-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-height: 1.75rem;
  margin-top: 0.25rem;
}
.att-regroup-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.2rem 0.35rem 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-elevated);
  font-size: 0.87rem;
}
.att-regroup-chip-remove {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 0.2rem;
  color: var(--color-text-muted);
}
.att-regroup-chip-remove:hover {
  color: var(--color-danger);
}
.att-quick-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.att-quick-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.att-quick-modal-card {
  width: 100%;
  max-width: 480px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  padding: 0;
  max-height: min(92vh, 640px);
  overflow: auto;
}
.att-quick-modal-header {
  padding: 1rem 1.15rem;
  border: 2px solid #334155;
  border-radius: 8px;
  margin: 1rem 1.15rem 0.75rem;
  background: var(--color-surface-elevated);
}
[data-theme='dark'] .att-quick-modal-header {
  border-color: #94a3b8;
}
.att-quick-modal-title {
  margin: 0 0 0.35rem;
  font-size: 1.2rem;
  font-weight: 700;
}
.att-quick-modal-subtitle {
  margin: 0;
  line-height: 1.35;
}
.att-quick-modal-body {
  padding: 0 1.15rem 1.15rem;
}
.att-quick-modal-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1rem;
  margin-bottom: 1rem;
}
.att-quick-modal-label-row {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
}
.att-quick-modal-label-text {
  font-weight: 600;
  font-size: 0.92rem;
}
.att-quick-search-wrap {
  position: relative;
}
.att-quick-child-input {
  width: 100%;
}
.att-quick-suggest-list {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin: 2px 0 0;
  padding: 0.25rem 0;
  list-style: none;
  max-height: 220px;
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 2;
}
.att-quick-suggest-item {
  padding: 0.45rem 0.65rem;
  cursor: pointer;
  font-size: 0.92rem;
}
.att-quick-suggest-item:hover,
.att-quick-suggest-item:focus {
  background: var(--color-surface-hover);
  outline: none;
}
.att-quick-radio-fieldset {
  border: none;
  margin: 0;
  padding: 0 0 0.15rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
  align-items: center;
}
.att-quick-radio-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 500;
  cursor: pointer;
  margin: 0;
}
.att-quick-datetime-row {
  margin-bottom: 1rem;
}
.att-quick-datetime-caption {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 600;
}
.att-quick-datetime-inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.att-quick-datetime-inputs input[type='date'] {
  flex: 1 1 160px;
  min-width: 10rem;
}
.att-quick-datetime-inputs input[type='time'] {
  width: 7.5rem;
}
.att-quick-msg {
  margin: 0 0 0.75rem;
}
.att-quick-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
}
.att-quick-primary {
  flex: 1 1 200px;
  min-height: 2.65rem;
  font-weight: 600;
}
.att-quick-cancel {
  flex: 0 0 auto;
  min-height: 2.65rem;
}

.staff-dash-page-toggle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  margin: 0.25rem auto 1.15rem;
  max-width: 44rem;
}
.staff-dash-page-toggle .staff-page-toggle-label {
  font-weight: 700;
  font-size: 0.95rem;
  margin-right: 0.2rem;
}
.staff-dash-page-toggle .staff-page-tab {
  flex: 1 1 auto;
  min-width: min(280px, 100%);
  border-radius: var(--radius-sm);
  padding: 0.55rem 1rem;
  font-weight: 700;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
}
.staff-dash-page-toggle .staff-page-tab:hover {
  background: var(--color-surface-hover);
}
.staff-dash-page-toggle .staff-page-tab--active {
  background: #fef9c3;
  border-color: #eab308;
  color: #422006;
  box-shadow: inset 0 0 0 1px rgba(234, 179, 8, 0.35);
}
[data-theme='dark'] .staff-dash-page-toggle .staff-page-tab--active {
  background: #422006;
  border-color: #ca8a04;
  color: #fef9c3;
}
/* Staffing action toolbar — left-aligned to match the billing-page-shell convention. */
.staff-actions-toolbar.billing-settings-actions { margin-bottom: 1.25rem; }
.staff-page-shell .billing-settings-actions-row { justify-content: flex-start; }
.staff-page-tabs.kd-tabs { margin-bottom: 1.25rem; }
.staff-dash-roster-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin: 0.25rem 0 0.75rem;
}
.staff-dash-col-fieldset {
  margin: 0.85rem 0;
  padding: 0.72rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-elevated);
}
.staff-dash-col-fieldset legend {
  font-weight: 600;
  padding: 0 0.3rem;
}
.staff-dash-col-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.48rem 1rem;
}

.registration-dashboard-card { margin-bottom: 1.25rem; }
.registration-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: flex-end;
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--color-border);
}
.registration-filter-fieldset {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.1rem;
  align-items: center;
}
.registration-filter-fieldset legend {
  font-weight: 600;
  font-size: 0.82rem;
  width: 100%;
  margin-bottom: 0.35rem;
  color: var(--color-text);
}
.registration-enroll-opt { margin: 0; }
.registration-search-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: min(100%, 280px);
  flex: 1;
}
.registration-search-label { font-size: 0.84rem; font-weight: 600; }
.registration-columns-heading { margin: 0.5rem 0 0.35rem; }
.registration-column-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.15rem;
  margin-bottom: 0.65rem;
}
.registration-reset-row { margin-bottom: 0.5rem; }
.registration-table-wrap { overflow-x: auto; max-width: 100%; margin-top: 0.5rem; }
.registration-dashboard-table thead th.registration-action-th {
  background: #dbeafe;
  color: #1e3a8a;
  font-weight: 600;
  font-size: 0.82rem;
  text-align: center;
  vertical-align: middle;
  border-bottom: 2px solid #93c5fd;
  white-space: normal;
}
[data-theme="dark"] .registration-dashboard-table thead th.registration-action-th {
  background: #1e3a5f;
  color: #e0f2fe;
  border-bottom-color: #3b82f6;
}
.registration-action-head {
  display: block;
  margin: 0 auto;
  max-width: 11rem;
  line-height: 1.35;
}
.registration-action-cell { text-align: center; vertical-align: middle; }
.registration-action-select {
  font-size: 0.868rem;
  min-width: 9rem;
  max-width: 14rem;
  margin: 0 auto;
}
.registration-enroll-note-th { text-align: left; font-weight: 600; }
#registration-table-wrap .data-table {
  width: max-content;
  min-width: 100%;
  max-width: none;
}
#registration-table-wrap .data-table th,
#registration-table-wrap .data-table td {
  white-space: nowrap;
}
#registration-table-wrap .data-table th.sortable-th {
  vertical-align: bottom;
}
#registration-table-wrap .sortable-th-btn {
  font: inherit;
  font-weight: 600;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
  width: 100%;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 0.2em;
}
#registration-table-wrap .sortable-th-btn:hover {
  color: var(--color-primary);
  text-decoration-style: solid;
}
#registration-table-wrap .sortable-th.sortable-th--active .sortable-th-btn {
  text-decoration-style: solid;
  color: var(--color-primary);
}
.registration-quick-add-summary { cursor: pointer; font-weight: 600; }
.registration-add-form { margin-top: 0.5rem; }

.new-accounts-page-shell { padding-top: 0; }
.na-toolbar-row { margin-bottom: 1rem; display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: center; justify-content: flex-end; }
.na-column-toggles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}
.na-toggle-fieldset {
  margin: 0;
  padding: 0.65rem 0.82rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-elevated);
}
.na-toggle-fieldset legend {
  font-weight: 600;
  font-size: 0.88rem;
  padding: 0 0.28rem;
  color: var(--color-text);
}
.na-checkbox { margin: 0 !important; }
.na-toolbar-msg { margin: 0.35rem 0 0.5rem; min-height: 1.35em; }
.na-table-wrap { overflow-x: auto; margin-top: 0.35rem; }
.na-requests-table { min-width: 100%; border-collapse: collapse; font-size: 0.892rem; }
.na-requests-table thead th {
  background: #eceff5;
  color: #0f172a;
  border-bottom: 2px solid #1e40af;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: bottom;
}
[data-theme='dark'] .na-requests-table thead th {
  background: #334155;
  color: #f8fafc;
  border-bottom-color: #38bdf8;
}
.na-requests-table tbody td.na-td-actions { white-space: nowrap; vertical-align: middle; }
.na-modal-overlay.dynamic-panel-overlay .na-modal-panel.billing-settings-modal-panel--xl {
  max-width: min(98vw, 960px);
  width: min(98vw, 960px);
}
.na-add-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.85rem;
  align-items: start;
}
.na-add-form-grid .na-fs {
  grid-column: span 1;
  margin: 0;
  padding: 0.65rem 0.72rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  display: grid;
  gap: 0.45rem;
}
.na-add-form-grid .na-fs legend { font-weight: 600; padding: 0 0.2rem; font-size: 0.9rem; }
.na-add-form-grid label { font-size: 0.862rem; display: flex; flex-direction: column; gap: 0.28rem; }
.na-add-form-grid input { width: 100%; box-sizing: border-box; padding: 0.4rem 0.45rem; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); }
.na-full-width { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 0.35rem; font-weight: 500; margin-top: 0.35rem; }
.na-full-width input { padding: 0.4rem 0.45rem; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); }
.na-form-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.85rem; }
.na-modal-hint { margin-top: 0; }

.data-set-link { color: var(--color-text); text-decoration: none; display: block; padding: 0.25rem 0; border-radius: var(--radius-sm); }
.data-set-link:hover { background: var(--color-surface-elevated); color: var(--color-primary); }
.data-set-link.is-active { font-weight: 600; color: var(--color-primary); }

/* ----- Messenger (dashboard + panel) ----- */
.shell-messenger-rail {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-bottom: 0.35rem;
}
.shell-messenger-rail-title {
  margin: 0 0 0.65rem;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.02em;
}
.shell-messenger-rail-subrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.shell-messenger-rail-label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}
.shell-messenger-rail-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.shell-messenger-rail-icon svg {
  width: 16px;
  height: 16px;
}
.shell-messenger-rail-label-text {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-primary);
}
.shell-messenger-seg {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--color-surface-elevated);
}
.shell-messenger-seg-btn {
  border: none;
  background: transparent;
  padding: 0.28rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  font-family: inherit;
}
.shell-messenger-seg-btn.is-active {
  background: rgba(13, 148, 136, 0.15);
  color: var(--color-primary);
}
.shell-messenger-rail-divider {
  height: 1px;
  background: var(--color-border);
  margin: 0 0 0.65rem;
  border: none;
}
.messenger-shell-preview {
  flex: 1;
  min-height: 0;
  margin-bottom: 0.65rem;
}
.messenger-shell-cards {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 2px;
}
.messenger-shell-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  cursor: pointer;
  font: inherit;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.messenger-shell-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 1px 0 rgba(13, 148, 136, 0.12);
}
.messenger-shell-card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.messenger-shell-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
.messenger-shell-card-name {
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--color-primary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.messenger-shell-card-time {
  flex-shrink: 0;
  font-size: 0.72rem;
  color: var(--color-text-muted);
}
.messenger-shell-card-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.45rem;
}
.messenger-shell-card-preview {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  line-height: 1.35;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.messenger-shell-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}
.messenger-shell-unread-badge {
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.2rem;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.messenger-shell-chevron {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  opacity: 0.75;
  font-weight: 400;
}
.shell-messenger-rail-open {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.5rem 0.25rem;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
  text-align: center;
}
.shell-messenger-rail-open:hover {
  text-decoration: underline;
}
.shell-messenger-rail-chevron {
  font-weight: 400;
}

/* ----- Recent check-ins / outs (right rail) ----- */
.shell-activity-rail {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-bottom: 0.35rem;
}
.shell-activity-rail .shell-activity-title {
  margin: 0 0 0.5rem;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1a237e;
  letter-spacing: 0.02em;
}
.shell-activity-subrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-bottom: 0.5rem;
}
.shell-activity-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.shell-activity-icon svg {
  width: 15px;
  height: 15px;
}
.shell-activity-subtitle {
  font-weight: 600;
  font-size: 0.9rem;
  color: #1a237e;
}
.shell-activity-divider {
  height: 1px;
  background: var(--color-border);
  margin: 0 0 0.65rem;
}
.shell-activity-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}
.shell-activity-card {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
a.shell-activity-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 1px 0 rgba(37, 99, 235, 0.08);
}
.shell-activity-card.shell-activity-card--static:hover {
  border-color: var(--color-border);
  box-shadow: none;
}
.shell-activity-kind-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}
.shell-activity-kind-icon svg {
  display: block;
}
.shell-activity-card--in .shell-activity-kind-icon {
  color: #16a34a;
}
.shell-activity-card--out .shell-activity-kind-icon {
  color: #dc2626;
}
.shell-activity-card-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}
.shell-activity-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
.shell-activity-name {
  font-weight: 700;
  font-size: 0.88rem;
  color: #1a237e;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shell-activity-time {
  flex-shrink: 0;
  font-size: 0.72rem;
  color: #9ca3af;
}
.shell-activity-by {
  font-size: 0.8rem;
  font-weight: 500;
  color: #6b7280;
}
.shell-activity-chevron {
  flex-shrink: 0;
  font-size: 0.85rem;
  color: #9ca3af;
  font-weight: 400;
  line-height: 1;
}
.shell-activity-empty {
  margin: 0.25rem 0 0;
}
.shell-activity-footer {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.55rem 0.25rem 0;
  border-top: 1px solid var(--color-border);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  text-align: center;
  box-sizing: border-box;
}
.shell-activity-footer:hover {
  text-decoration: underline;
}
.shell-activity-footer--muted {
  border-top: 1px solid var(--color-border);
  padding-top: 0.55rem;
  text-align: center;
}
.shell-activity-footer-chevron {
  font-weight: 400;
}
[data-theme="dark"] .shell-activity-rail .shell-activity-title,
[data-theme="dark"] .shell-activity-subtitle,
[data-theme="dark"] .shell-activity-name {
  color: #e8eaf6;
}
[data-theme="dark"] .shell-activity-time,
[data-theme="dark"] .shell-activity-chevron {
  color: var(--color-text-muted);
}
[data-theme="dark"] .shell-activity-by {
  color: var(--color-text-muted);
}
[data-theme="dark"] .shell-activity-card {
  background: var(--color-surface-elevated);
}

/* ----- Classroom ratios (right rail) ----- */
.shell-ratios-rail {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-bottom: 0.35rem;
}
.shell-ratios-title {
  margin: 0 0 0.5rem;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1a237e;
  letter-spacing: 0.02em;
}
.shell-ratios-subrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-bottom: 0.5rem;
}
.shell-ratios-subicon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #b0bec5;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.shell-ratios-subicon svg {
  width: 15px;
  height: 15px;
  stroke: #fff;
}
.shell-ratios-subtitle {
  font-weight: 600;
  font-size: 0.9rem;
  color: #5c6bc0;
}
.shell-ratios-divider {
  height: 1px;
  background: var(--color-border);
  margin: 0 0 0.35rem;
}
.shell-ratios-list {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.5rem;
}
.shell-ratios-empty {
  margin: 0.35rem 0 0.5rem;
}
.shell-ratios-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(1.5rem, auto) minmax(2rem, auto) 0.85rem;
  align-items: center;
  column-gap: 0.45rem;
  padding: 0.5rem 0.15rem 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
  font-size: 0.88rem;
  box-sizing: border-box;
  transition: background 0.12s ease;
}
.shell-ratios-row:last-child {
  border-bottom: none;
}
a.shell-ratios-row:hover {
  background: rgba(37, 99, 235, 0.04);
}
.shell-ratios-row--static {
  cursor: default;
}
.shell-ratios-row--static:hover {
  background: transparent;
}
.shell-ratios-name {
  font-weight: 700;
  color: #0f172a;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.shell-ratios-row--alert .shell-ratios-name {
  color: #ef4444;
}
.shell-ratios-count {
  font-weight: 700;
  color: #0f172a;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.shell-ratios-slack {
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.shell-ratios-slack--pos {
  color: #15803d;
}
.shell-ratios-slack--neg {
  color: #ef4444;
}
.shell-ratios-slack--zero {
  color: #0f172a;
}
.shell-ratios-slack--na {
  color: #9ca3af;
  font-weight: 600;
}
.shell-ratios-chevron {
  color: #cbd5e1;
  font-size: 0.8rem;
  font-weight: 400;
  text-align: right;
  line-height: 1;
}
.shell-ratios-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  padding: 0.55rem 0.25rem 0;
  border-top: 1px solid var(--color-border);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  box-sizing: border-box;
}
.shell-ratios-footer:hover {
  text-decoration: underline;
}
.shell-ratios-footer-icon {
  display: inline-flex;
  color: var(--color-primary);
}
.shell-ratios-footer-icon svg {
  display: block;
}
.shell-ratios-footer-label {
  flex: 0 0 auto;
}
.shell-ratios-footer-chevron {
  font-weight: 400;
  color: var(--color-primary);
}
.shell-ratios-footer--muted {
  border-top: 1px solid var(--color-border);
  padding-top: 0.55rem;
  text-align: center;
}
[data-theme="dark"] .shell-ratios-title {
  color: #e8eaf6;
}
[data-theme="dark"] .shell-ratios-subtitle {
  color: #9fa8da;
}
[data-theme="dark"] .shell-ratios-subicon {
  background: #546e7a;
  color: #fff;
}
[data-theme="dark"] .shell-ratios-name,
[data-theme="dark"] .shell-ratios-count,
[data-theme="dark"] .shell-ratios-slack--zero {
  color: var(--color-text);
}
[data-theme="dark"] .shell-ratios-row--alert .shell-ratios-name {
  color: #f87171;
}
[data-theme="dark"] .shell-ratios-slack--pos {
  color: #4ade80;
}
[data-theme="dark"] .shell-ratios-slack--neg {
  color: #f87171;
}
[data-theme="dark"] .shell-ratios-slack--na {
  color: var(--color-text-muted);
}
[data-theme="dark"] .shell-ratios-chevron {
  color: var(--color-text-muted);
}

/* ----- Alerts & Notifications (right rail + modal) ----- */
.shell-alerts-rail {
  display: flex;
  flex-direction: column;
  padding-bottom: 0.35rem;
}
.shell-alerts-rail-title {
  margin: 0 0 0.65rem;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1a237e;
  letter-spacing: 0.02em;
}
.shell-alerts-rail-body {
  flex: 1;
  min-height: 0;
  margin-bottom: 0.55rem;
}
.shell-alerts-rail-divider {
  height: 1px;
  background: var(--color-border);
  margin: 0.55rem 0;
}
.shell-alerts-tier-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.45rem;
}
.shell-alerts-tier-label {
  font-weight: 700;
  font-size: 0.88rem;
  color: #1a237e;
}
.shell-alerts-tier-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.shell-alerts-tier-icon--critical {
  background: #e53935;
  color: #e53935;
}
.shell-alerts-tier-icon--attention {
  background: transparent;
  color: #ff9800;
  width: 22px;
  height: 22px;
}
.shell-alerts-tier-icon--info {
  background: #1e88e5;
  color: #1e88e5;
}
.shell-alerts-tier-rows {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.alerts-rail-block {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  overflow: hidden;
}
.alerts-rail-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.45rem 0.5rem;
  border: none;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: #1a237e;
  box-sizing: border-box;
}
.alerts-rail-row:hover {
  background: var(--color-surface-elevated);
}
.alerts-rail-row:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}
.shell-alerts-count {
  min-width: 1.5rem;
  height: 1.45rem;
  padding: 0 0.35rem;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 1px solid transparent;
}
.shell-alerts-count--critical {
  background: #ffebee;
  border-color: #e53935;
  color: #1a237e;
}
.shell-alerts-count--attention {
  background: #fff3e0;
  border-color: #ff9800;
  color: #1a237e;
}
.shell-alerts-count--info {
  background: #e3f2fd;
  border-color: #1e88e5;
  color: #1a237e;
}
.alerts-rail-label {
  font-weight: 600;
  font-size: 0.82rem;
  color: #1a237e;
}
.alerts-rail-chevron {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  opacity: 0.8;
}
.alerts-rail-detail {
  padding: 0 0.65rem 0.65rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-background);
}
.alerts-rail-detail-tag {
  margin: 0.4rem 0 0;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--color-text-muted);
}
.alerts-rail-cta {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  color: #1565c0;
  text-decoration: none;
  padding: 0.15rem 0;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}
.alerts-rail-cta:hover {
  text-decoration: underline;
}
.alerts-modal-body {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.alerts-modal-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem 1.25rem 1.25rem;
  box-sizing: border-box;
}
.shell-alerts-rail-footer {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.5rem 0.25rem;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: #1565c0;
  cursor: pointer;
  text-align: center;
}
.shell-alerts-rail-footer:hover {
  text-decoration: underline;
}
.shell-alerts-empty {
  text-align: center;
  padding: 0.35rem 0;
}

.messenger-preview { margin-bottom: 0.5rem; }
.messenger-preview-list { max-height: 140px; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.messenger-preview-item {
  padding: 0.4rem 0;
  font-size: 0.875rem;
  line-height: 1.35;
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
}
.messenger-preview-item:last-child { border-bottom: none; }
.messenger-preview-item .text-strong { font-weight: 600; color: var(--color-text); }
.messenger-preview-item .muted { font-size: 0.8rem; color: var(--color-text-muted); }

/* Messenger panel (modifier on #dynamic-panel-body — keep .dynamic-panel-body for flex chain) */
.messenger-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.dynamic-panel-body.messenger-panel {
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
}
.dynamic-panel-body.messenger-panel.messenger-panel--modal {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 0;
}
.messenger-modal-layout {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.messenger-modal-search-row {
  flex-shrink: 0;
  padding: 0.65rem 1rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}
.messenger-modal-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-family: inherit;
  background: var(--color-surface-elevated);
  color: var(--color-text);
}
.messenger-modal-search-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.18);
}
.messenger-modal-search-input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.messenger-modal-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.messenger-panel--modal .messenger-modal-body {
  flex-direction: row;
  align-items: stretch;
}
.messenger-panel--modal .messenger-modal-body > .messenger-conversations-wrap {
  flex: 0 0 clamp(288px, 26vw, 360px);
  max-width: 400px;
  border-right: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: 0.75rem 0.85rem 1rem;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  margin: 0.5rem 0 0.5rem 0.5rem;
  box-sizing: border-box;
}
.messenger-panel--modal .messenger-modal-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--color-surface-elevated);
  padding: 0.45rem 0.5rem 0.5rem 0.35rem;
  box-sizing: border-box;
}
.messenger-panel--modal .messenger-modal-main > .messenger-thread-placeholder,
.messenger-panel--modal .messenger-modal-main > .messenger-thread-wrap,
.messenger-panel--modal .messenger-modal-main > .messenger-compose-wrap {
  flex: 1;
  min-height: 0;
}
.messenger-thread-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 0;
  padding: 1.5rem 1.25rem;
  box-sizing: border-box;
}
.messenger-thread-placeholder-inner {
  text-align: center;
  max-width: 20rem;
}
.messenger-thread-placeholder-title {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.02em;
}
.messenger-modal-body .messenger-conversations-wrap,
.messenger-modal-body .messenger-thread-wrap,
.messenger-modal-body .messenger-compose-wrap {
  flex: 1;
  min-height: 0;
}
.messenger-panel--modal .messenger-conv-list {
  border: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0 2px 4px 0;
}
.messenger-panel--modal .messenger-conv-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  padding: 0.55rem 0.65rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.messenger-panel--modal .messenger-conv-item:hover {
  border-color: var(--color-primary);
  box-shadow: 0 1px 0 rgba(13, 148, 136, 0.12);
}
.messenger-panel--modal .messenger-conv-item.messenger-conv-item--active {
  border-color: var(--color-primary);
  background: rgba(13, 148, 136, 0.1);
  box-shadow: 0 1px 0 rgba(13, 148, 136, 0.12);
}
.messenger-panel--modal .messenger-conv-list .messenger-conv-item:last-child {
  border: 1px solid var(--color-border);
}
.messenger-panel--modal .messenger-conv-item .messenger-conv-name {
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--color-primary);
}
.messenger-panel--modal .messenger-conv-item .messenger-conv-preview {
  font-size: 0.78rem;
}
.messenger-panel--modal .messenger-modal-main .messenger-thread-wrap,
.messenger-panel--modal .messenger-modal-main .messenger-compose-wrap {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  padding: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.messenger-panel--modal .messenger-modal-main .messenger-thread-header--chat {
  flex-shrink: 0;
  padding: 0.5rem 0.65rem 0.6rem;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.messenger-panel--modal .messenger-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.65rem 0.85rem 0.85rem;
  margin: 0;
  background: var(--color-surface-elevated);
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}
.messenger-panel--modal .messenger-reply-form--bar {
  flex-shrink: 0;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}
.messenger-panel--modal .messenger-compose-wrap {
  padding: 0.85rem 1rem 1rem;
}
.messenger-panel--modal .messenger-thread-placeholder {
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  background: var(--color-surface);
}
.messenger-panel--modal .messenger-feed-bubble--me {
  background: rgba(13, 148, 136, 0.12);
  border: 1px solid rgba(13, 148, 136, 0.38);
  box-shadow: 0 1px 0 rgba(13, 148, 136, 0.1);
}
.messenger-panel--modal .messenger-feed-bubble--me .messenger-msg-content {
  color: var(--color-text);
}
.messenger-panel--modal .messenger-feed-bubble--me .messenger-bubble-foot--me {
  border-top-color: rgba(13, 148, 136, 0.28);
}
.messenger-panel--modal .messenger-feed-bubble--me .messenger-bubble-time {
  color: var(--color-text-muted);
}
.messenger-panel--modal .messenger-read--sent {
  color: rgba(13, 148, 136, 0.55);
}
@media (max-width: 720px) {
  .dynamic-panel-overlay--messenger-center .dynamic-panel.dynamic-panel--messenger-center {
    width: min(100%, calc(100vw - 1rem));
    max-width: none;
    height: min(92vh, calc(100vh - 1rem));
  }
  .messenger-panel--modal .messenger-modal-body {
    flex-direction: column;
  }
  .messenger-panel--modal .messenger-modal-body > .messenger-conversations-wrap {
    flex: 0 0 auto;
    max-width: none;
    width: 100%;
    max-height: 42vh;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }
}
.messenger-conv-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid var(--color-border);
  transition: background 0.15s ease;
}
.messenger-conv-item.hidden {
  display: none;
}
.messenger-conv-right {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  text-align: right;
}
.messenger-conv-chevron {
  line-height: 1;
  margin-top: 0.1rem;
}
.messenger-conv-unread {
  font-size: 0.62rem;
  min-width: 1.1rem;
  height: 1.1rem;
}
.messenger-feed-item.hidden {
  display: none !important;
}
.messenger-conversations-wrap,
.messenger-thread-wrap,
.messenger-compose-wrap {
  padding: 1rem 1.25rem 1.25rem;
  box-sizing: border-box;
}
.messenger-conversations-wrap { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.messenger-conversations-wrap .btn { margin-bottom: 1rem; flex-shrink: 0; }
.messenger-conv-list {
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-elevated);
}
.messenger-conv-item:last-child { border-bottom: none; }
.messenger-conv-item:hover { background: var(--color-background); }
.messenger-conv-item:focus-within { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.messenger-conv-main { flex: 1; min-width: 0; }
.messenger-conv-item .messenger-conv-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text);
  display: block;
  margin-bottom: 0.15rem;
}
.messenger-conv-meta {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  margin: 0.2rem 0 0.3rem;
}
.messenger-conv-group {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-text-muted);
}
.messenger-conv-children {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  line-height: 1.35;
}
.messenger-conv-preview {
  display: block;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.messenger-conv-time {
  flex-shrink: 0;
  text-align: right;
  white-space: nowrap;
  margin-top: 0.06rem;
  max-width: 5.75rem;
  font-size: 0.72rem;
  color: var(--color-text-muted);
}

/* Thread view (chat layout — modal + panel) */
.messenger-thread-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.messenger-thread-header--chat {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 0.15rem;
  margin: 0;
  padding: 0.35rem 0.25rem 0.65rem;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.messenger-back--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-primary);
  cursor: pointer;
}
.messenger-back--icon:hover {
  background: var(--color-surface-elevated);
  color: var(--color-primary-hover);
}
.messenger-back--icon svg {
  display: block;
}
.messenger-thread-title-block {
  flex: 1;
  min-width: 0;
  text-align: center;
  padding: 0 0.25rem;
}
.messenger-thread-peer-name,
#messenger-thread-name.messenger-thread-peer-name {
  display: block;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--color-primary);
  line-height: 1.25;
}
.messenger-thread-context {
  display: block;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--color-text-muted);
  margin-top: 0.15rem;
  line-height: 1.35;
}
.messenger-thread-context[hidden] {
  display: none !important;
}
.messenger-thread-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-primary);
  cursor: pointer;
}
.messenger-thread-more:hover {
  background: var(--color-surface-elevated);
  color: var(--color-primary-hover);
}
.messenger-thread-more svg {
  display: block;
}
.messenger-messages {
  flex: 1;
  min-height: 120px;
  overflow-y: auto;
  padding: 0.65rem 0.75rem 1rem;
  margin: 0;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  background: var(--color-background);
}
.messenger-thread-empty {
  padding: 1rem 0.5rem;
  text-align: center;
}
.messenger-feed-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.messenger-feed-item--sep {
  list-style: none;
  margin: 0.15rem 0;
}
.messenger-day-sep {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--color-text-muted);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.messenger-day-sep::before,
.messenger-day-sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}
.messenger-feed-item--them,
.messenger-feed-item--them-lead {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  max-width: 100%;
}
.messenger-feed-avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  margin-top: 0.1rem;
}
.messenger-feed-avatar--spacer {
  background: transparent;
  visibility: hidden;
}
.messenger-feed-them-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: flex-start;
}
.messenger-feed-them-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.65rem;
}
.messenger-feed-name {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--color-text);
}
.messenger-feed-meta {
  font-size: 0.72rem;
  color: var(--color-text-muted);
}
.messenger-feed-text-plain {
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--color-text);
  white-space: pre-wrap;
  word-break: break-word;
  max-width: 100%;
}
.messenger-feed-bubble {
  max-width: min(100%, 22rem);
  border-radius: 14px;
  word-wrap: break-word;
  word-break: break-word;
}
.messenger-feed-bubble--them {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.messenger-feed-bubble--me {
  background: #e3f2fd;
  border: 1px solid rgba(25, 118, 210, 0.28);
  margin-left: auto;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.messenger-feed-bubble-inner {
  padding: 0.55rem 0.75rem 0.45rem;
}
.messenger-feed-bubble--them .messenger-feed-bubble-inner {
  padding-bottom: 0.35rem;
}
.messenger-msg-content {
  display: block;
  white-space: pre-wrap;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--color-text);
}
.messenger-feed-bubble--me .messenger-msg-content {
  color: #0d47a1;
}
.messenger-bubble-foot {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.35rem;
  padding-top: 0.25rem;
}
.messenger-bubble-foot--them {
  justify-content: flex-start;
  border-top: 1px solid var(--color-border);
}
.messenger-bubble-foot--me {
  justify-content: flex-end;
  border-top: 1px solid rgba(25, 118, 210, 0.2);
}
.messenger-bubble-time {
  font-size: 0.65rem;
  color: var(--color-text-muted);
}
.messenger-feed-bubble--me .messenger-bubble-time {
  color: rgba(13, 71, 161, 0.75);
}
.messenger-read {
  font-size: 0.72rem;
  line-height: 1;
  letter-spacing: -0.12em;
}
.messenger-read--read {
  color: var(--color-primary);
}
.messenger-read--sent {
  color: rgba(13, 71, 161, 0.45);
}
.messenger-feed-item--me {
  display: flex;
  justify-content: flex-end;
}
.messenger-feed-me-col {
  max-width: min(100%, 24rem);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.45rem;
}
.messenger-attach-stack {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
  max-width: min(100%, 20rem);
}
.messenger-attach-stack--me {
  align-self: flex-end;
  max-width: min(100%, 22rem);
}
.messenger-attach-card {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.55rem;
  border-radius: 12px;
  border: 1px solid rgba(25, 118, 210, 0.35);
  background: #e8f4fc;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.messenger-attach-card:hover {
  background: #dceef9;
  border-color: var(--color-primary);
}
.messenger-attach-card--them {
  border-color: var(--color-border);
  background: var(--color-surface-elevated);
}
.messenger-attach-card--them:hover {
  background: var(--color-background);
  border-color: var(--color-primary);
}
.messenger-attach-card--them .messenger-attach-card-icon {
  background: var(--color-border);
  color: var(--color-text-muted);
}
.messenger-attach-card--them .messenger-attach-card-name {
  color: var(--color-text);
}
.messenger-attach-card-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(25, 118, 210, 0.12);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.messenger-attach-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}
.messenger-attach-card-name {
  font-weight: 700;
  font-size: 0.82rem;
  color: #0d47a1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.messenger-attach-card-meta {
  font-size: 0.68rem;
  color: var(--color-text-muted);
}
.messenger-attach-card-dl {
  flex-shrink: 0;
  color: var(--color-primary);
  display: flex;
  align-items: center;
}
.messenger-reply-form--bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.65rem 0.75rem 0.85rem;
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
  background: var(--color-surface);
}
.messenger-reply-clip {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  cursor: not-allowed;
  opacity: 0.65;
}
.messenger-reply-clip:not(:disabled) {
  cursor: pointer;
  opacity: 1;
}
.messenger-reply-field {
  flex: 1;
  min-height: 42px;
  max-height: 120px;
  resize: none;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.9rem;
  background: var(--color-surface);
  color: var(--color-text);
  box-sizing: border-box;
}
.messenger-reply-field:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.15);
}
.messenger-reply-send {
  flex-shrink: 0;
  padding: 0.35rem 0.25rem;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: #42a5f5;
  cursor: pointer;
}
.messenger-reply-send:hover {
  color: var(--color-primary);
  text-decoration: underline;
}
.messenger-reply-send:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Compose (new message) */
.messenger-compose-wrap { display: flex; flex-direction: column; flex: 1; min-height: 0; padding-top: 0.15rem; }
.messenger-compose-wrap .messenger-back {
  margin-bottom: 0.75rem;
  display: inline-block;
  padding: 0.35rem 0.5rem;
  font-size: 0.9rem;
  color: var(--color-primary);
  background: none;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.messenger-compose-wrap .messenger-back:hover { background: var(--color-surface-elevated); }
.messenger-compose-wrap label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text);
}
.messenger-compose-wrap select {
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  background: var(--color-surface);
  color: var(--color-text);
}
.messenger-compose-wrap textarea {
  width: 100%;
  margin: 0.75rem 0;
  min-height: 100px;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
  background: var(--color-surface);
  color: var(--color-text);
}
.messenger-compose-wrap textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}
.messenger-compose-wrap #messenger-send-btn { align-self: flex-start; }

/* ----- Dynamic slide-over panel (no page load) ----- */
.dynamic-panel-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.dynamic-panel-overlay.is-open {
  opacity: 1;
  visibility: visible;
}
.dynamic-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 420px;
  background: var(--color-surface);
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s ease;
}
.dynamic-panel-overlay.dynamic-panel-overlay--messenger-center {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
}
.dynamic-panel-overlay--messenger-center .dynamic-panel.dynamic-panel--messenger-center {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  width: min(1400px, calc(100vw - 1.25rem));
  max-width: none;
  height: min(820px, calc(100vh - 2rem));
  max-height: calc(100vh - 2rem);
  margin: 0;
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
  transform: scale(0.97) translateY(10px);
  opacity: 0;
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.dynamic-panel-overlay.is-open.dynamic-panel-overlay--messenger-center .dynamic-panel.dynamic-panel--messenger-center {
  transform: scale(1) translateY(0);
  opacity: 1;
}
.dynamic-panel-overlay--messenger-center .dynamic-panel-body {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
/* Messenger modal: message list must shrink inside flex column (min-height:0) — fixed min-height breaks layout */
.dynamic-panel-overlay--messenger-center .messenger-panel--modal .messenger-messages {
  min-height: 0;
}
.dynamic-panel-overlay.is-open .dynamic-panel:not(.dynamic-panel--messenger-center) {
  transform: translateX(0);
}
.dynamic-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.dynamic-panel-title { margin: 0; font-size: 1.125rem; font-weight: 600; }
.dynamic-panel-close {
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.dynamic-panel-close:hover { background: var(--color-surface-elevated); color: var(--color-text); }

/* ============================================================
 * Person Look-up modal (opens via Quick Actions → Person Look-up).
 * Same wide messenger-center variant — search bar at the top, then
 * sectioned result rows. Clicking a child hands off to the
 * full child-hub modal (defined in dashboard_child_modal.js).
 * ============================================================ */
.dynamic-panel--messenger-center .person-lookup-body {
  padding: 0;
  display: flex;
  flex-direction: column;
}
.person-lookup-form {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  position: sticky;
  top: 0;
  z-index: 1;
}
.person-lookup-search-wrap { flex: 1; }
.person-lookup-search-wrap input[type='search'] {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
}
.person-lookup-notice {
  margin: 0 1rem;
  margin-top: 0.5rem;
}
.person-lookup-results { padding: 0.6rem 1rem 1rem; overflow-y: auto; }
.person-lookup-hint { padding: 0.5rem 0.25rem; }

.person-lookup-section { margin-bottom: 1rem; }
.person-lookup-section:last-child { margin-bottom: 0.25rem; }
.person-lookup-heading {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 0.4rem;
}
.person-lookup-rows { display: flex; flex-direction: column; gap: 0.35rem; }

.person-lookup-row {
  display: grid;
  grid-template-columns: 36px 1fr auto 18px;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.person-lookup-row:hover {
  background: var(--color-surface-elevated);
  border-color: var(--color-primary);
}
.person-lookup-row:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.person-lookup-row-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--color-text-muted);
}
.person-lookup-row-name { font-weight: 600; color: var(--color-text); }
.person-lookup-row-meta { color: var(--color-text-muted); font-size: 0.85rem; }
.person-lookup-row-chevron {
  color: var(--color-text-muted);
  font-size: 1.2rem;
  line-height: 1;
}
.person-lookup-status {
  display: inline-block;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
}
.person-lookup-status--in  { background: var(--color-success-bg); color: var(--color-success); }
.person-lookup-status--out { background: var(--color-surface-elevated); color: var(--color-text-muted); }

/* Kiosk picker popup (Quick Actions → Kiosks) */
.kiosk-picker-hint { margin: 0 0 0.85rem; }
.kiosk-picker-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
}
.kiosk-picker-card {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  font-weight: 600;
  transition: border-color 0.15s, background 0.15s, transform 0.05s;
}
.kiosk-picker-card:hover {
  border-color: var(--color-primary);
  background: rgba(37, 99, 235, 0.06);
}
.kiosk-picker-card:active { transform: translateY(1px); }
.kiosk-picker-ico {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(37, 99, 235, 0.1);
  color: var(--color-primary);
}
.kiosk-picker-label { flex: 1 1 auto; }
.kiosk-picker-chevron { color: var(--color-text-muted); font-size: 1.3rem; line-height: 1; }
[data-theme="dark"] .kiosk-picker-card:hover { background: rgba(96, 165, 250, 0.1); }

@media (max-width: 600px) {
  .person-lookup-row { grid-template-columns: 32px 1fr auto; }
  .person-lookup-row-chevron { display: none; }
  .person-lookup-row-avatar { width: 32px; height: 32px; }
}

/* ============================================================
 * Check-In / Out modal (opens via Quick Actions → Check In/Out).
 * Uses the same .messenger-center variant of the dynamic panel
 * (large centered modal), so it lives next to those styles.
 * Each row shows: child + status pill, check-in event,
 * check-out event, and Check In / Check Out buttons.
 * ============================================================ */
.dynamic-panel--messenger-center .checkin-modal-toolbar {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}
.checkin-search-wrap { display: flex; flex-direction: column; gap: 0.15rem; flex: 1 1 240px; max-width: 320px; }
.checkin-search-input {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
}
.checkin-filter-wrap { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.checkin-filter {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  padding: 0.35rem 0.75rem;
  font-weight: 600;
  font-size: 0.85rem;
  border-radius: 999px;
  cursor: pointer;
}
.checkin-filter:hover { background: var(--color-surface-elevated); }
.checkin-filter.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.checkin-modal-status { margin-left: auto; min-height: 1.2em; }

.checkin-list { padding: 0.5rem 1rem 1rem; margin: 0; }
.checkin-list .checkin-empty { padding: 1rem; text-align: center; }
.checkin-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) auto minmax(180px, 1fr) minmax(180px, 1fr) auto;
  gap: 0.75rem 1.1rem;
  align-items: center;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: 10px;
  margin-bottom: 0.5rem;
}
.checkin-row:hover { background: var(--color-surface-elevated); }
.checkin-row-identity { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.checkin-row-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--color-text-muted);
}
.checkin-row-avatar--initials { font-size: 0.95rem; }
.checkin-row-name-block { display: flex; flex-direction: column; min-width: 0; }
.checkin-row-name { font-weight: 600; color: var(--color-text); }
.checkin-row-classroom { font-size: 0.8rem; color: var(--color-text-muted); }

.checkin-status-pill {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.78rem;
  white-space: nowrap;
}
.checkin-status-pill--in  { background: var(--color-success-bg); color: var(--color-success); }
.checkin-status-pill--out { background: var(--color-surface-elevated); color: var(--color-text-muted); }

/* Color-coded roster pills (class, check-in status, enrollment) */
.dash-pill {
  display: inline-block;
  max-width: 100%;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.dash-pill--in  { background: var(--color-success-bg); color: var(--color-success); }
.dash-pill--out { background: var(--color-surface-elevated); color: var(--color-text-muted); }
.dash-pill--ok  { background: var(--color-success-bg); color: var(--color-success); }
.dash-pill--info { background: rgba(37, 99, 235, 0.12); color: #1d4ed8; }
.dash-pill--warn { background: rgba(217, 119, 6, 0.15); color: #b45309; }
.dash-pill--muted { background: var(--color-surface-elevated); color: var(--color-text-muted); }
.dash-pill--neutral { background: var(--color-surface-elevated); color: var(--color-text); }

.dash-pill--c1 { background: rgba(37, 99, 235, 0.12);  color: #1d4ed8; }
.dash-pill--c2 { background: rgba(22, 163, 74, 0.14);  color: #15803d; }
.dash-pill--c3 { background: rgba(147, 51, 234, 0.13); color: #7e22ce; }
.dash-pill--c4 { background: rgba(217, 119, 6, 0.15);  color: #b45309; }
.dash-pill--c5 { background: rgba(219, 39, 119, 0.12); color: #be185d; }
.dash-pill--c6 { background: rgba(13, 148, 136, 0.14); color: #0f766e; }
.dash-pill--c7 { background: rgba(79, 70, 229, 0.13);  color: #4338ca; }
.dash-pill--c8 { background: rgba(234, 88, 12, 0.14);  color: #c2410c; }

[data-theme="dark"] .dash-pill--info { background: rgba(96, 165, 250, 0.18); color: #93c5fd; }
[data-theme="dark"] .dash-pill--warn { background: rgba(251, 191, 36, 0.18); color: #fcd34d; }
[data-theme="dark"] .dash-pill--c1 { background: rgba(96, 165, 250, 0.18); color: #93c5fd; }
[data-theme="dark"] .dash-pill--c2 { background: rgba(74, 222, 128, 0.16); color: #86efac; }
[data-theme="dark"] .dash-pill--c3 { background: rgba(192, 132, 252, 0.18); color: #d8b4fe; }
[data-theme="dark"] .dash-pill--c4 { background: rgba(251, 191, 36, 0.18); color: #fcd34d; }
[data-theme="dark"] .dash-pill--c5 { background: rgba(244, 114, 182, 0.18); color: #f9a8d4; }
[data-theme="dark"] .dash-pill--c6 { background: rgba(45, 212, 191, 0.18); color: #5eead4; }
[data-theme="dark"] .dash-pill--c7 { background: rgba(129, 140, 248, 0.18); color: #c7d2fe; }
[data-theme="dark"] .dash-pill--c8 { background: rgba(251, 146, 60, 0.18); color: #fdba74; }

.checkin-row-event {
  display: grid;
  grid-template-columns: auto;
  row-gap: 0.1rem;
  min-width: 0;
  font-size: 0.85rem;
}
.checkin-row-event-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); }
.checkin-row-event-when { font-weight: 600; color: var(--color-text); }
.checkin-row-event-who  { color: var(--color-text-muted); }
.checkin-row-event-pickup { color: var(--color-text-muted); font-style: italic; font-size: 0.78rem; }

.checkin-row-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; }
.checkin-row-actions .btn { min-width: 0; }

@media (max-width: 900px) {
  .checkin-row {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .checkin-row-actions { justify-content: flex-start; }
}

/* Messenger center modal: match right-rail title treatment (centered teal headline + absolute close) */
.dynamic-panel--messenger-center .dynamic-panel-header {
  position: relative;
  justify-content: center;
  padding: 0.85rem 2.75rem 0.85rem 1rem;
  background: var(--color-surface);
}
.dynamic-panel--messenger-center .dynamic-panel-title {
  flex: 1;
  margin: 0;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.02em;
}
.dynamic-panel--messenger-center .dynamic-panel-close {
  position: absolute;
  right: 0.45rem;
  top: 50%;
  transform: translateY(-50%);
}

.dynamic-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
}
.panel-results { margin-top: 1rem; }
.panel-results-heading { font-size: 0.95rem; margin: 0.75rem 0 0.35rem; }
.panel-kiosk-list { margin: 0; }
.panel-kiosk-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--color-border);
}
.panel-kiosk-name { flex: 1; min-width: 100px; }
@media (max-width: 480px) {
  .dynamic-panel { max-width: 100%; }
}
.list-plain { list-style: none; padding: 0; margin: 0; }
.list-plain li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
}
.list-plain li:last-child { border-bottom: none; }
.muted { color: var(--color-text-muted); font-size: 0.9rem; }
.error { color: var(--color-error); }

.tasks-menu .nav-main { margin-top: 0.5rem; }

/* ----- Kiosk ----- */
.kiosk-list { max-width: 520px; }
.kiosk-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-border);
}
.kiosk-name { flex: 1; min-width: 120px; }
.kiosk-status {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
}
.kiosk-status.status-in { background: var(--color-success-bg); color: var(--color-success); }
.kiosk-status.status-out { background: #fef3c7; color: #92400e; }
[data-theme="dark"] .kiosk-status.status-out { background: #422006; color: #fcd34d; }

/* ----- Search / forms ----- */
.search-form label { display: block; margin-bottom: 0.75rem; font-weight: 500; }
.search-form input[type="search"] {
  width: 100%;
  max-width: 320px;
  padding: 0.65rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  background: var(--color-surface);
  color: var(--color-text);
}

/* ----- Placeholder / 404 ----- */
.page-404 { text-align: center; padding: 3rem 1rem; }
.page-404 h1 { font-size: 3rem; margin: 0; font-weight: 700; color: var(--color-text-muted); }
@media (min-width: 480px) {
  .page-404 h1 { font-size: 4rem; }
}
.forbidden-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 1.5rem; }

/* Admin settings hub (task shell) */
.admin-settings-hub { max-width: 40rem; }
.admin-settings-heading .admin-settings-lead {
  margin: 0 0 0.75rem;
}
.admin-settings-links { list-style: none; padding: 0; margin: 1.25rem 0 0; display: flex; flex-direction: column; gap: 0.75rem; }
.admin-settings-links li { margin: 0; }
.admin-settings-footnote { margin-top: 2rem; }

/* ----- Modal ----- */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}
.modal-overlay.is-open { display: flex; }
.modal-card {
  background: var(--color-surface);
  padding: 1.5rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  max-width: 400px;
  width: 100%;
  border: 1px solid var(--color-border);
}
.modal-title { margin-top: 0; }
.modal-actions { margin-top: 1rem; display: flex; gap: 0.5rem; justify-content: flex-end; }
.offline-banner { display: none; background: var(--color-error); color: #fff; padding: 0.5rem 1rem; text-align: center; }
.offline-banner.is-visible { display: block; }

/* ----- Admin: users & locations ----- */
.admin-page .page-head { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 0.5rem; }
.admin-page .page-head h1 { margin: 0; }
.master-kiosk-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.form-grid { display: grid; gap: 0.75rem 1rem; grid-template-columns: 1fr; max-width: 480px; }
@media (min-width: 480px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.form-grid label { display: flex; flex-direction: column; gap: 0.25rem; font-weight: 500; }
.form-grid label input, .form-grid label select { padding: 0.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); }
.form-actions { grid-column: 1 / -1; }
.form-hint { font-size: 0.8rem; color: var(--color-text-muted); }
.table-wrap { overflow-x: auto; margin: 0.5rem 0; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.data-table th, .data-table td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
}
.data-table th:last-child, .data-table td:last-child { border-right: none; }
.data-table th { font-weight: 600; background: var(--color-surface-elevated); }

/* Sortable column header — reusable across any .data-table (dashboard, attendance,
 * staffing, etc.) so headers look the same everywhere. Page-scoped versions
 * (#child-info-table-wrap, #registration-table-wrap) override this with the same
 * shape; they're kept for backward compat but are functionally equivalent. */
.data-table .sortable-th-btn {
  font: inherit;
  font-weight: 600;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
  width: 100%;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 0.2em;
}
.data-table .sortable-th-btn:hover {
  color: var(--color-primary);
  text-decoration-style: solid;
}
.data-table .sortable-th.sortable-th--active .sortable-th-btn {
  text-decoration-style: solid;
  color: var(--color-primary);
}
.data-table select { padding: 0.35rem; font-size: 0.85rem; min-width: 90px; }
.data-table .locations-select { min-width: 120px; }
.data-table .user-locations-select { min-width: 140px; }
.data-table form.form-inline { display: inline; margin: 0; }
.data-table .form-inline button { margin: 0; }

/* ============================================================
 * Shared tab strip — used by the announcements page and any other
 * settings-style screen that wants underlined "page tabs". Pages
 * supply their own click behavior; the styling just makes them all
 * look consistent and on-theme.
 * ============================================================ */
.kd-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  border-bottom: 2px solid var(--color-border);
  margin-bottom: 1.25rem;
}
.kd-tab {
  background: transparent;
  border: none;
  padding: 0.65rem 1rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--color-text-muted);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  font-size: 0.95rem;
  line-height: 1.2;
}
.kd-tab:hover { color: var(--color-text); }
.kd-tab:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}
.kd-tab.is-active,
.kd-tab--active {
  color: var(--color-text);
  border-bottom-color: var(--color-primary);
}

/* ----- Attendance Dashboard (records / tracker) ----- */
.att-tab-panel { margin-top: 0.25rem; }
.att-stat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  margin: 0;
}
.att-chip {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 6.5rem;
  padding: 0;
  background: transparent;
}
.att-chip-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
}
.att-chip-text { display: flex; flex-direction: column; line-height: 1.15; }
.att-chip-num { font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.att-chip-lbl { font-size: 0.76rem; color: var(--color-text-muted); font-weight: 600; }
.att-chip--enrolled .att-chip-ic { color: #2563eb; }
.att-chip--in .att-chip-ic { color: #16a34a; }
.att-chip--in .att-chip-num { color: #15803d; }
.att-chip--out .att-chip-ic { color: #9333ea; }
.att-chip--out .att-chip-num { color: #7e22ce; }
.att-chip--absent .att-chip-ic { color: #dc2626; }
.att-chip--absent .att-chip-num { color: #b91c1c; }

/* ----- Attendance Records: top controls + toolbar ----- */
.att-rec-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  padding-bottom: 1rem;
  margin-bottom: 0.85rem;
  border-bottom: 1px solid var(--color-border);
}
.att-rec-controls {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.85rem 1.25rem;
}
.att-rec-field {
  display: inline-flex;
  flex-direction: column;
  gap: 0.25rem;
  font-weight: 600;
  font-size: 0.82rem;
}
.att-rec-field-label { color: var(--color-text-muted); }
.att-rec-field .billing-filter-input { min-width: 11rem; }
.att-rec-controls .att-asof-friendly { align-self: center; font-size: 0.85rem; }

.att-rec-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.att-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: 9px;
  background: var(--color-surface, #fff);
  color: var(--color-primary, #2563eb);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.att-tool-btn:hover { background: var(--color-bg-subtle, #f1f5f9); }
.att-tool-btn--active {
  background: var(--color-primary, #2563eb);
  border-color: var(--color-primary, #2563eb);
  color: #fff;
}
.att-tool-ic { font-size: 0.95rem; line-height: 1; }

.att-rec-poppanel {
  padding: 0.85rem 1rem;
  margin: 0 0 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg-subtle, #f8fafc);
}
.att-rec-poppanel-title { font-weight: 700; font-size: 0.9rem; margin-bottom: 0.6rem; }
.att-rec-filters-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.7rem 1.1rem;
}
.att-rec-filters-grid .billing-filter-input { min-width: 11rem; }
.att-rec-applyfilter { align-self: center; }

.att-rec-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0.4rem 0 0.5rem;
}
.att-rec-title { margin: 0; font-size: 1.05rem; font-weight: 700; }

.att-track-table--condensed th,
.att-track-table--condensed td { padding-top: 0.3rem; padding-bottom: 0.3rem; font-size: 0.82rem; }
.att-track-table--condensed .att-avatar { width: 1.4rem; height: 1.4rem; font-size: 0.62rem; }

/* ----- Billing: Payments and Credits ----- */
.billing-pc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin-bottom: 0.85rem;
}
.billing-pc-title { margin: 0; font-size: 1.15rem; font-weight: 700; }
.billing-pc-head-tools {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.billing-pc-search { position: relative; }
.billing-pc-search-ic {
  position: absolute;
  left: 0.6rem; top: 50%;
  transform: translateY(-50%);
  font-size: 0.85rem;
  opacity: 0.5;
  pointer-events: none;
}
.billing-pc-search .billing-filter-input {
  min-width: 16rem;
  padding-left: 1.9rem;
}

.billing-pc-type {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  font-size: 0.86rem;
}
.billing-pc-type--payment { color: #15803d; }
.billing-pc-type--credit { color: #7e22ce; }

.billing-pc-method {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}
.billing-pc-method-ic { opacity: 0.75; }

.billing-pc-amount { font-weight: 700; }
.billing-pc-amount--neg { color: #b91c1c; }

.billing-pc-status {
  display: inline-block;
  padding: 0.16rem 0.6rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.4;
}
.billing-pc-status--applied { background: #dcfce7; color: #15803d; }
.billing-pc-status--posted { background: #dbeafe; color: #1d4ed8; }
.billing-pc-status--unapplied { background: #fef3c7; color: #b45309; }
.billing-pc-status--refunded { background: #f1f5f9; color: #475569; }
.billing-pc-status--overdue { background: #fee2e2; color: #b91c1c; }

.billing-pc-row-kebab {
  font-size: 1.15rem;
  padding: 0.1rem 0.4rem;
  border-radius: 6px;
}

.billing-pc-pager {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.billing-pc-pager #pc-page-info { flex: 1 1 0; }
.billing-pc-pager .att-abs-page-nav { flex: 0 0 auto; justify-content: center; }
.billing-pc-pager .att-abs-pager-right { flex: 1 1 0; justify-content: flex-end; }

/* ----- Billing: Tuition & plans ----- */
.tu-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: stretch;
  margin-bottom: 1.1rem;
}
@media (max-width: 1100px) { .tu-top { grid-template-columns: 1fr; } }
.tu-find-card { margin: 0; }
.tu-find-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}
.tu-find-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.7rem 1rem;
}
.tu-find-grid .att-rec-field { font-size: 0.8rem; }
.tu-find-grid .billing-filter-input,
.tu-find-grid select { width: 100%; }
.tu-advanced {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--color-border);
}
.tu-advanced-head { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.6rem; }
.tu-adv-check { align-self: end; white-space: nowrap; }

.tu-stats {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 0.85rem 1rem;
  min-width: 13rem;
}
@media (max-width: 1100px) { .tu-stats { flex-direction: row; flex-wrap: wrap; } }
.tu-stat { display: flex; align-items: center; gap: 0.6rem; }
.tu-stat-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem; height: 1.9rem;
  border-radius: 9px;
  font-size: 0.95rem;
  background: #eff6ff;
}
.tu-stat-ic--a { background: #eff6ff; }
.tu-stat-ic--b { background: #dcfce7; }
.tu-stat-ic--c { background: #fef9c3; }
.tu-stat-ic--d { background: #ede9fe; }
.tu-stat-ic--e { background: #ffe4e6; }
.tu-stat-text { display: flex; flex-direction: column; line-height: 1.1; }
.tu-stat-num { font-size: 1.15rem; font-weight: 800; }
.tu-stat-lbl { font-size: 0.74rem; color: var(--color-text-muted, #64748b); }

.tu-table-card { margin: 0; }
.tu-table-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  margin-bottom: 0.75rem;
}
.tu-table-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.tu-email-toggle { font-size: 0.82rem; white-space: nowrap; }
.billing-tu-table th, .billing-tu-table td { white-space: nowrap; }
.billing-tu-table td:last-child { white-space: normal; min-width: 9rem; }

/* ----- Billing: Accounts ----- */
.billing-acct-method { display: flex; flex-direction: column; gap: 0.1rem; }
.billing-acct-stack { display: flex; flex-direction: column; gap: 0.1rem; }
.billing-acct-money { font-weight: 600; }
.billing-acct-sub {
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--color-text-muted, #64748b);
  text-transform: uppercase;
}
.billing-acct-table th,
.billing-acct-table td { vertical-align: top; }

.att-name-td { white-space: nowrap; }
.att-name-link {
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: none; border: none; padding: 0; font: inherit; cursor: pointer;
  color: var(--color-text); text-align: left;
}
.att-name-cell { display: inline-flex; align-items: center; gap: 0.55rem; }
.att-name-link:hover .att-name-text { color: var(--color-primary); text-decoration: underline; }
.att-avatar {
  flex: 0 0 auto;
  width: 1.9rem; height: 1.9rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; font-size: 0.72rem; font-weight: 700; color: #fff;
}
.att-avatar--c0 { background: #2563eb; }
.att-avatar--c1 { background: #16a34a; }
.att-avatar--c2 { background: #d97706; }
.att-avatar--c3 { background: #9333ea; }
.att-avatar--c4 { background: #db2777; }
.att-avatar--c5 { background: #0891b2; }

.att-pill {
  display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px;
  font-size: 0.76rem; font-weight: 600; line-height: 1.5; white-space: nowrap;
}
.att-pill--in { background: var(--color-success-bg); color: #15803d; }
.att-pill--out { background: rgba(147, 51, 234, 0.12); color: #7e22ce; }
.att-pill--absent { background: rgba(220, 38, 38, 0.12); color: #b91c1c; }
.att-pill--class { background: var(--color-surface-elevated); color: var(--color-text); }
.att-pill--class.att-pill--c0 { background: rgba(37, 99, 235, 0.12); color: #1d4ed8; }
.att-pill--class.att-pill--c1 { background: rgba(22, 163, 74, 0.12); color: #15803d; }
.att-pill--class.att-pill--c2 { background: rgba(217, 119, 6, 0.15); color: #b45309; }
.att-pill--class.att-pill--c3 { background: rgba(147, 51, 234, 0.12); color: #7e22ce; }
.att-pill--class.att-pill--c4 { background: rgba(219, 39, 119, 0.12); color: #be185d; }
.att-pill--class.att-pill--c5 { background: rgba(8, 145, 178, 0.12); color: #0e7490; }

.att-records-tools { margin-top: 0.85rem; }

.att-tracker-title { margin: 1.25rem 0 0.6rem; }
.att-tracker-chart { width: 100%; overflow-x: auto; }
.att-chart-svg { width: 100%; height: auto; max-width: 100%; }
.att-chart-grid { stroke: var(--color-border); stroke-width: 1; }
.att-chart-axis { fill: var(--color-text-muted); font-size: 10px; }
.att-chart-total { stroke: var(--color-text-muted); stroke-width: 2; stroke-dasharray: 4 3; }
.att-chart-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin-top: 0.5rem; }
.att-chart-leg { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--color-text-muted); }
.att-chart-dot { width: 0.7rem; height: 0.7rem; border-radius: 999px; display: inline-block; }
.att-chart-dot--total { background: var(--color-text-muted); }

.text-strong { font-weight: 600; }
.list-card { list-style: none; padding: 0; margin: 0; }
.list-card-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-border); }
.list-card-item:last-child { border-bottom: none; }
.list-card-content { flex: 1; }
.list-card-actions { flex-shrink: 0; }
.message { padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); font-size: 0.9rem; margin-top: 0.5rem; }
.message.success { background: var(--color-success-bg); color: var(--color-success); }
.message.error { background: var(--color-error-bg); color: var(--color-error); }
.permission-group-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1rem;
  background: var(--color-surface-elevated);
}
.permission-group-header { margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.permission-group-body { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; }
.permission-category { display: flex; flex-direction: column; gap: 0.25rem; min-width: 160px; }
.permission-category-name { font-size: 0.75rem; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; margin-bottom: 0.25rem; }
.permission-group-actions { margin-top: 0.75rem; }
.badge { display: inline-block; padding: 0.2rem 0.5rem; font-size: 0.75rem; border-radius: 999px; font-weight: 500; }
.badge-pending { background: #fef3c7; color: #92400e; }
[data-theme="dark"] .badge-pending { background: #422006; color: #fcd34d; }
.badge-open { background: #fee2e2; color: #b91c1c; }
[data-theme="dark"] .badge-open { background: #450a0a; color: #fca5a5; }
.badge-muted { background: var(--color-surface-elevated); color: var(--color-text-muted); }
.badge-in { background: var(--color-success-bg); color: var(--color-success); margin-left: 0.5rem; }
.task-page .card { max-width: 900px; }
.attendance-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.attendance-toolbar label { display: flex; align-items: center; gap: 0.5rem; }
.attendance-toolbar input[type="date"] { padding: 0.4rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); }

.billing-quick-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0; }
.billing-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--color-border); }
.billing-nav a { color: var(--color-primary); text-decoration: none; font-weight: 500; padding: 0.25rem 0.5rem; border-radius: var(--radius-sm); }
.billing-nav a:hover { background: var(--color-surface-elevated); }
.billing-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; }
.billing-toolbar .billing-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; }
.billing-toolbar .filter-invoices { display: flex; flex-direction: column; gap: 0.25rem; }
.billing-toolbar .filter-date { display: flex; flex-direction: column; gap: 0.25rem; }
.billing-toolbar .filter-date input { padding: 0.35rem 0.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font-size: 0.9rem; }
.billing-toolbar select { padding: 0.4rem 0.6rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font-size: 0.9rem; }
.billing-record-form label { display: block; margin-bottom: 0.75rem; }
.billing-record-form select, .billing-record-form input, .billing-record-form textarea { width: 100%; padding: 0.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font-size: 0.9rem; margin-top: 0.25rem; }
.billing-record-form .form-actions { display: flex; gap: 0.5rem; margin-top: 1rem; }
.billing-pos-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.52);
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.billing-pos-modal-overlay.is-open { display: flex; }
.billing-pos-modal-card {
  width: min(920px, 98vw);
  min-height: min(86vh, 680px);
  max-height: 92vh;
  overflow: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.billing-pos-modal-card--pos {
  width: min(460px, 96vw);
  min-height: 0;
  border-radius: 12px;
  border-color: color-mix(in srgb, var(--color-primary) 25%, var(--color-border));
}
.billing-pos-modal-head .dynamic-panel-title { margin-bottom: 0; }
.billing-pos-modal-title-wire {
  font-size: 1.35rem;
  color: var(--color-primary);
  font-weight: 800;
}
.billing-pos-modal-body { padding-top: 0.85rem; }
.billing-pos-intro { line-height: 1.5; margin-top: 0; }
.billing-pos-msg.message { margin: 0.5rem 0 0; }
.billing-pos-action-fieldset {
  border: 2px solid color-mix(in srgb, var(--color-primary) 50%, var(--color-border));
  padding: 0.85rem 0.95rem;
  margin: 0.75rem 0 1rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
}
.billing-pos-action-legend,
.billing-pos-action-fieldset legend.billing-pos-action-legend {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0 0.35rem;
  font-size: 0.95rem;
}
.billing-pos-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1rem;
}
.billing-pos-action-grid label { display: flex; align-items: center; gap: 0.45rem; margin: 0; }
.billing-pos-pane { margin-top: 0.5rem; }
.billing-pos-pane-body {
  padding: 0.75rem 0.15rem;
  min-height: 5rem;
}
.billing-pos-radio-row { cursor: pointer; font-size: 0.92rem; }
.billing-pos-mini-form .form-actions { margin-top: 0.35rem; }
.billing-pos-stripe-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
  align-items: center;
}
.billing-pos-stripe-mount {
  min-height: 0;
  margin: 0.75rem 0;
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-elevated);
}
.billing-pos-stripe-mount--setup {
  margin-top: 0.5rem;
}
.billing-pos-saved-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: flex-end;
  margin: 0.35rem 0;
}
.billing-pos-ach-manage {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border);
}
.billing-pos-manage-title {
  margin: 0 0 0.35rem;
  font-size: 0.88rem;
  font-weight: 600;
}
.billing-pos-pm-list {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
}
.billing-pos-pm-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  margin-bottom: 0.35rem;
  font-size: 0.85rem;
}
.billing-pos-pm-row span {
  flex: 1 1 12rem;
  min-width: 0;
}
.billing-pos-pm-row span.billing-pos-pm-default {
  flex: 0 0 auto;
  background: #dcfce7;
  color: #166534;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.72rem;
}
@media (max-width: 760px) {
  .billing-pos-action-grid { grid-template-columns: 1fr; }
}

/* Billing & Financial Settings (assigned tuition plans workspace) */
.billing-settings-actions { display: flex; flex-direction: column; gap: 0.65rem; margin-bottom: 1.25rem; }
.billing-settings-actions-row { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.billing-page-shell .billing-settings-actions-row { justify-content: flex-start; }
.billing-section-title { font-size: 1.05rem; margin: 0 0 0.5rem; }
.billing-filters-card { margin-bottom: 1rem; }
.billing-filters-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem 1.25rem;
  margin-top: 0.75rem;
}
@media (max-width: 1100px) {
  .billing-filters-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .billing-filters-grid { grid-template-columns: 1fr; }
}
.billing-filters-col { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.billing-filter-pair { display: flex; align-items: flex-start; gap: 0.35rem; font-size: 0.88rem; cursor: pointer; }
.billing-filter-pair input { margin-top: 0.2rem; flex-shrink: 0; }
.billing-filter-input, .billing-filter-select { width: 100%; padding: 0.45rem 0.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font-size: 0.9rem; min-height: 2.25rem; box-sizing: border-box; }
.billing-filter-range { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.billing-filter-range--narrow input { width: 4.5rem; }
.billing-filters-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.25rem;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.88rem;
}
.billing-column-presets-card { margin-bottom: 1rem; }
.billing-presets-help { margin: 0 0 0.5rem; }
.billing-column-presets { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin-bottom: 0.65rem; align-items: center; }
.billing-col-preset-label { font-size: 0.88rem; white-space: nowrap; }
.billing-assigned-plans-card { margin-bottom: 1rem; }
.billing-assigned-plans-wrap { overflow-x: auto; max-width: 100%; }
.billing-assigned-plans-table thead th {
  background: #374151;
  color: #f9fafb;
  border-bottom: 1px solid #1f2937;
  font-weight: 600;
  white-space: nowrap;
}
[data-theme="dark"] .billing-assigned-plans-table thead th {
  background: #1f2937;
  color: #f3f4f6;
}
.billing-assigned-plans-table .sortable-th--active .billing-assigned-sort-btn { color: #a7f3d0; }
.billing-assigned-plans-table .billing-assigned-sort-btn {
  font: inherit;
  font-weight: 600;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 0.15em;
  text-align: left;
}
.billing-assigned-plans-table .billing-assigned-sort-btn:hover {
  color: #fff;
  text-decoration-style: solid;
}
.billing-settings-modal-panel { max-width: 520px; }
.billing-settings-modal-panel--wide { max-width: min(96vw, 640px); width: min(96vw, 640px); }
.billing-settings-modal-panel--xl { max-width: min(98vw, 1180px); width: min(98vw, 1180px); }
@media (max-width: 600px) {
  .billing-settings-modal-panel--xl { width: 100%; max-width: 100%; }
}
.billing-view-edit-plans-inner .billing-modal-table-wrap { max-height: min(52vh, 420px); overflow: auto; }
.billing-ve-warning {
  margin: 0 0 0.85rem;
  padding: 0.55rem 0.65rem;
  font-size: 0.85rem;
  line-height: 1.45;
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: var(--radius-sm);
  color: #78350f;
}
[data-theme="dark"] .billing-ve-warning {
  background: #422006;
  border-color: #d97706;
  color: #fde68a;
}
.billing-expand-toggle.billing-toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  cursor: pointer;
  user-select: none;
  font-weight: 600;
  font-size: 0.92rem;
  margin: 0 0 1rem;
  color: var(--color-text);
}
.billing-expand-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}
.billing-toggle-switch-ui {
  flex-shrink: 0;
  position: relative;
  width: 2.75rem;
  height: 1.42rem;
  border-radius: 999px;
  background: var(--color-border);
  transition: background 0.2s ease;
}
.billing-toggle-switch-ui::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(1.42rem - 4px);
  height: calc(1.42rem - 4px);
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease;
}
.billing-expand-toggle input:checked + .billing-toggle-switch-ui {
  background: #2563eb;
}
.billing-expand-toggle input:checked + .billing-toggle-switch-ui::after {
  transform: translateX(1.28rem);
}
[data-theme="dark"] .billing-expand-toggle input:checked + .billing-toggle-switch-ui {
  background: #3b82f6;
}
.billing-manage-filter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.5rem;
  margin-bottom: 0.5rem;
}
@media (max-width: 740px) {
  .billing-manage-filter-grid { grid-template-columns: 1fr; }
}
.billing-manage-filter-col { display: flex; flex-direction: column; gap: 0.7rem; min-width: 0; }
.billing-manage-filter-pair {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  font-size: 0.88rem;
  cursor: pointer;
  font-weight: 500;
}
.billing-manage-filter-pair input { margin-top: 0.2rem; flex-shrink: 0; cursor: pointer; }
.billing-ve-toolbar { margin: 0.35rem 0 0.5rem; min-height: 1.35em; }
.billing-fee-types-subtitle { margin: 0 0 0.75rem; font-size: 0.93rem; line-height: 1.45; }
.billing-ft-help {
  margin: 0 0 1rem;
  padding: 0.65rem 0.78rem;
  font-size: 0.868rem;
  line-height: 1.48;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-elevated);
}
.billing-ft-table-wrap { margin-top: 0.35rem; }
.billing-ft-table th,
.billing-ft-table td {
  vertical-align: middle;
  font-size: 0.878rem;
}
.billing-ft-input.billing-ft-name-input { min-width: 7rem; max-width: 14rem; }
.billing-ft-input.billing-ft-amt-input { min-width: 5.5rem; max-width: 8rem; }
.billing-ft-confirm-label {
  font-size: 0.84rem;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.billing-ft-footer-actions { margin-top: 1rem; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 0.5rem; }
.billing-disc-subtitle { margin: 0 0 0.75rem; font-size: 0.93rem; line-height: 1.45; }
.billing-disc-help {
  margin: 0 0 0.85rem;
  padding: 0.6rem 0.75rem;
  font-size: 0.86rem;
  line-height: 1.46;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-elevated);
}
.billing-disc-table-wrap { margin-top: 0.35rem; }
.billing-disc-table th,
.billing-disc-table td {
  vertical-align: middle;
  font-size: 0.872rem;
}
.billing-disc-th-nowrap { white-space: nowrap; }
.billing-disc-kind-ro-cell { text-align: center; }
.billing-disc-kind-ro,
.billing-disc-change-kind {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}
.billing-disc-change-kind { justify-content: flex-start; gap: 0.75rem; margin-top: 0.4rem; }
.billing-disc-radio {
  font-size: 0.858rem;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  cursor: pointer;
  user-select: none;
}
.billing-disc-kind-ro .billing-disc-radio input,
.billing-disc-change-kind .billing-disc-radio input {
  margin: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}
.billing-disc-kind-ro .billing-disc-radio { cursor: default; opacity: 0.9; }
.billing-disc-amt-input { min-width: 5rem; max-width: 8rem; }
.billing-disc-name-input { min-width: 6rem; max-width: 12rem; }
.billing-disc-save {
  font-size: 1.15rem;
  line-height: 1;
  width: var(--tap-min);
  min-width: var(--tap-min);
  height: var(--tap-min);
  padding: 0;
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
  color: #fff;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.billing-disc-save:hover { filter: brightness(1.06); }
.billing-disc-save:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.billing-disc-check { font-weight: 700; }
.billing-disc-delete {
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  min-width: var(--tap-min);
  height: var(--tap-min);
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #991b1b;
  cursor: pointer;
}
.billing-disc-delete:hover { background: var(--color-error-bg); }
.billing-disc-delete:focus-visible { outline: 2px solid var(--color-error); outline-offset: 2px; }
.billing-disc-delete-x {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 2px solid #dc2626;
  background: #fef2f2;
  font-size: 0.95rem;
  line-height: 1;
  font-weight: 700;
}
[data-theme="dark"] .billing-disc-delete-x {
  background: #450a0a;
  border-color: #f87171;
  color: #fecaca;
}
.billing-disc-footer { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.billing-disc-footer-row { display: flex; flex-wrap: wrap; align-items: center; }
.billing-disc-footer-row--center { justify-content: center; }
.billing-disc-loss-warning {
  margin: 0;
  text-align: center;
  font-size: 0.88rem;
  color: var(--color-error);
}
.billing-disc-close-btn {
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #6ee7b7;
  font-weight: 600;
}
.billing-disc-close-btn:hover { background: #a7f3d0; }
[data-theme="dark"] .billing-disc-close-btn {
  background: #064e3b;
  color: #d1fae5;
  border-color: #34d399;
}
[data-theme="dark"] .billing-disc-close-btn:hover { background: #047857; }
.billing-new-recurring-modal-inner { padding: 0 0 0.25rem; }
.billing-modal-hint { margin: 0 0 0.75rem; }
.billing-recurring-form { display: flex; flex-direction: column; gap: 0.85rem; }
.billing-recurring-form .billing-field-label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.92rem;
  cursor: default;
}
.billing-recurring-form .billing-field-title { font-weight: 600; }
.billing-recurring-form .billing-checkbox-row {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}
.billing-recurring-form .billing-checkbox-row input { width: auto; margin: 0; cursor: pointer; }
.billing-recurring-form input[type="text"],
.billing-recurring-form input[type="number"],
.billing-recurring-form input[type="date"],
.billing-recurring-form select,
.billing-recurring-form textarea {
  width: 100%;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  box-sizing: border-box;
}
.billing-recurring-form-actions { flex-wrap: wrap; margin-top: 0.5rem; }
.billing-legacy-details { margin-top: 2rem; }
.billing-legacy-summary { cursor: pointer; font-weight: 600; padding: 0.25rem 0; }
.billing-legacy-details .billing-section { padding-left: 0.25rem; }

/* Standalone auth header (signin/user_create without full nav) */
.auth-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--header-height);
  padding: 0 1rem;
  background: transparent;
  border-bottom: none;
}
.auth-header .logo-link { display: inline-flex; align-items: center; }
.auth-header .logo-link img { height: 40px; width: auto; }

/* Full messaging experience */
.messages-layout { display: grid; grid-template-columns: 320px 1fr; gap: 1rem; min-height: 560px; }
.messages-sidebar, .messages-main { border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); }
.messages-sidebar { overflow: hidden; }
.messages-sidebar-head { padding: 0.75rem; border-bottom: 1px solid var(--color-border); }
.messages-conversations { list-style: none; margin: 0; padding: 0; max-height: 520px; overflow-y: auto; }
.messages-conv-item {
  padding: 0.75rem;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.65rem;
}
.messages-conv-item:hover, .messages-conv-item.is-active { background: var(--color-surface-elevated); }
.messages-conv-main { flex: 1; min-width: 0; }
.messages-conv-meta {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  margin: 0.2rem 0 0.25rem;
}
.messages-conv-group {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-text-muted);
}
.messages-conv-children {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  line-height: 1.35;
}
.messages-conv-preview {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.messages-conv-time {
  flex-shrink: 0;
  text-align: right;
  white-space: nowrap;
  max-width: 5.75rem;
  font-size: 0.72rem;
}
.messages-main { display: flex; flex-direction: column; }
.messages-empty { padding: 1.25rem; color: var(--color-text-muted); }
.messages-thread-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  border-bottom: 1px solid var(--color-border);
  padding: 0.75rem 1rem;
}
.messages-thread-title-block { flex: 1; min-width: 0; }
.messages-thread-title-block h2 { margin: 0; font-size: 1rem; }
.messages-thread-context {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-text-muted);
  margin-top: 0.22rem;
  line-height: 1.35;
}
.messages-thread-context[hidden] { display: none !important; }
.messages-list { flex: 1; overflow-y: auto; padding: 1rem; min-height: 260px; max-height: 420px; }
.messages-list-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.messages-item { display: flex; }
.messages-item.is-me { justify-content: flex-end; }
.messages-bubble { max-width: min(78%, 560px); background: var(--color-surface-elevated); border: 1px solid var(--color-border); border-radius: 12px; padding: 0.55rem 0.7rem; }
.messages-item .messages-meta {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.65rem;
  line-height: 1.35;
  color: var(--color-text-muted);
}
.messages-item.is-me .messages-meta { opacity: 0.88; }
.messages-thread-head .messages-thread-status {
  font-size: 0.72rem;
  color: var(--color-text-muted);
}
.parent-msg-ts {
  font-size: 0.65rem;
  line-height: 1.35;
  color: var(--color-text-muted);
}
.messages-item.is-me .messages-bubble { background: color-mix(in srgb, var(--color-primary) 14%, var(--color-surface)); }
.messages-attach-links { list-style: none; padding: 0.35rem 0 0; margin: 0; }
.messages-form, .messages-compose { border-top: 1px solid var(--color-border); padding: 0.75rem; display: grid; gap: 0.55rem; }
.messages-form textarea, .messages-compose textarea, .messages-compose select { width: 100%; padding: 0.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font: inherit; }
.messages-form-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.messages-attachments { min-height: 1.1em; }
@media (max-width: 980px) {
  .messages-layout { grid-template-columns: 1fr; }
  .messages-sidebar { max-height: 260px; }
}

/* ----- Diaper change kiosk ----- */
.diaper-kiosk-page { max-width: 1200px; margin: 0 auto; padding: 1rem 1rem 2rem; }
.diaper-kiosk-frame {
  border: 2px solid var(--color-primary, #2563eb);
  border-radius: var(--radius, 8px);
  background: var(--color-surface);
  padding: 1.25rem 1.25rem 1.5rem;
}
.diaper-kiosk-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px dashed var(--color-border);
}
.diaper-kiosk-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}
.diaper-kiosk-logo { display: block; }
.diaper-kiosk-site-name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-text);
}
.diaper-kiosk-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.25rem;
}
.diaper-kiosk-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 11rem;
}
.diaper-kiosk-field label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
}
.diaper-kiosk-select {
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  min-width: 12rem;
}
.diaper-kiosk-title {
  margin: 1rem 0 0.5rem;
  font-size: 1.35rem;
  font-weight: 700;
}
.diaper-kiosk-msg { min-height: 1.25em; margin: 0 0 0.75rem; font-size: 0.95rem; }
.diaper-kiosk-grid-wrap { margin-top: 0.5rem; }
.diaper-kiosk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
@media (max-width: 900px) {
  .diaper-kiosk-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .diaper-kiosk-grid { grid-template-columns: 1fr; }
}
.diaper-kiosk-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1rem 0.75rem;
  margin: 0;
  border: none;
  border-right: 1px dashed var(--color-border);
  border-bottom: 1px dashed var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  font: inherit;
  border-radius: 0;
  transition: background 0.12s ease;
}
.diaper-kiosk-card:nth-child(3n) { border-right: none; }
@media (max-width: 900px) {
  .diaper-kiosk-card:nth-child(3n) { border-right: 1px dashed var(--color-border); }
  .diaper-kiosk-card:nth-child(2n) { border-right: none; }
}
@media (max-width: 520px) {
  .diaper-kiosk-card { border-right: none; }
}
.diaper-kiosk-card:hover,
.diaper-kiosk-card:focus-visible {
  background: var(--color-surface-elevated);
  outline: none;
}
.diaper-kiosk-card-photo {
  width: 88px;
  height: 88px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-surface-elevated);
  margin-bottom: 0.5rem;
  flex-shrink: 0;
}
.diaper-kiosk-card-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.diaper-kiosk-card-photo-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text-muted);
}
.diaper-kiosk-card-name {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-bottom: 0.35rem;
  line-height: 1.25;
  word-break: break-word;
}
.diaper-kiosk-card-log {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  font-size: 0.8rem;
  text-align: left;
}
.diaper-kiosk-card-log li {
  padding: 0.2rem 0;
  border-bottom: 1px dotted var(--color-border);
}
.diaper-kiosk-card-log li:last-child { border-bottom: none; }
.diaper-kiosk-log-time { font-variant-numeric: tabular-nums; }
.diaper-kiosk-empty { padding: 2rem 1rem; text-align: center; grid-column: 1 / -1; }
.diaper-kiosk-footer {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}
.diaper-kiosk-search-btn {
  padding: 0.65rem 2rem;
  border-radius: 999px;
  font-size: 1rem;
}
.diaper-kiosk-log-details {
  margin-top: 1.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}
.diaper-kiosk-log-details summary {
  cursor: pointer;
  font-weight: 600;
}
.diaper-kiosk-dialog {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0;
  max-width: min(28rem, 94vw);
  background: var(--color-surface);
  color: var(--color-text);
}
.diaper-kiosk-dialog::backdrop {
  background: rgba(15, 23, 42, 0.45);
}
.diaper-kiosk-dialog-inner { padding: 1.25rem; }
.diaper-kiosk-dialog-title { margin: 0 0 0.75rem; font-size: 1.1rem; }
.diaper-kiosk-search-input {
  width: 100%;
  padding: 0.55rem 0.75rem;
  margin: 0.5rem 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font: inherit;
  background: var(--color-surface);
  color: var(--color-text);
  box-sizing: border-box;
}
.diaper-kiosk-search-results { max-height: 240px; overflow-y: auto; margin: 0.5rem 0 0; }
.diaper-kiosk-search-results li { margin: 0; padding: 0; border: none; }
.diaper-kiosk-search-hit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.35rem;
  border: none;
  border-bottom: 1px solid var(--color-border);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.diaper-kiosk-search-hit:hover { background: var(--color-surface-elevated); }
.diaper-kiosk-search-hit-name { font-weight: 600; }
.diaper-kiosk-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 1rem;
}
.diaper-kiosk-log-form label {
  display: block;
  margin: 0.65rem 0;
  font-weight: 500;
}
.diaper-kiosk-log-form select,
.diaper-kiosk-log-form input[type="text"] {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.45rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font: inherit;
  background: var(--color-surface);
  color: var(--color-text);
  box-sizing: border-box;
}
.diaper-kiosk-log-child { font-weight: 600; margin: 0 0 0.5rem; }

/* ----- Medication kiosk (distinct clinical/teal motif) ----- */
.medication-kiosk-page {
  --med-k-accent: #0d9488;
  --med-k-accent-soft: color-mix(in srgb, #0d9488 12%, var(--color-surface));
  --med-k-warn-bg: color-mix(in srgb, #f59e0b 18%, var(--color-surface));
  max-width: 1180px;
  margin: 0 auto;
  padding: 0.85rem 1rem 2.5rem;
}
.med-kiosk-shell {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--med-k-accent) 42%, var(--color-border));
  border-radius: 14px;
  background: linear-gradient(165deg, var(--med-k-accent-soft) 0%, var(--color-surface) 38%);
  padding: 0 1.15rem 1.5rem;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--med-k-accent) 25%, transparent);
}
.med-kiosk-accent-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(90deg, var(--med-k-accent), #059669 55%, var(--med-k-accent));
  opacity: 0.92;
}
.med-kiosk-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding: 1.35rem 0 1rem;
  border-bottom: 1px dashed color-mix(in srgb, var(--med-k-accent) 35%, var(--color-border));
}
.med-kiosk-brand {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.med-kiosk-cross {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  margin-top: 0.15rem;
  border-radius: 10px;
  background:
    linear-gradient(var(--med-k-accent), var(--med-k-accent)) center/3px 60% no-repeat,
    linear-gradient(var(--med-k-accent), var(--med-k-accent)) center/60% 3px no-repeat;
  background-color: color-mix(in srgb, var(--med-k-accent) 15%, transparent);
}
.med-kiosk-brand-copy { display: flex; flex-direction: column; gap: 0.2rem; }
.med-kiosk-logo { display: block; }
.med-kiosk-site {
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 0.92rem;
  color: color-mix(in srgb, var(--med-k-accent) 55%, var(--color-text));
}
.med-kiosk-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1.15rem;
}
.med-kiosk-field {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  min-width: 10.5rem;
}
.med-kiosk-field label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.med-kiosk-select {
  padding: 0.45rem 0.65rem;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  min-width: 12rem;
}
.med-kiosk-stat-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 5.75rem;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--med-k-accent) 18%, var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--med-k-accent) 42%, transparent);
}
.med-kiosk-stat-num {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--med-k-accent);
}
.med-kiosk-stat-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.med-kiosk-manifesto { padding: 1rem 0 0; }
.med-kiosk-title {
  margin: 0;
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: color-mix(in srgb, var(--color-text) 72%, var(--med-k-accent));
}
.med-kiosk-sub {
  margin: 0.5rem 0 0.75rem;
  max-width: 52rem;
  line-height: 1.55;
}
.med-kiosk-pillars {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.med-kiosk-pillars li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.med-kiosk-p-dot {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  background: color-mix(in srgb, var(--med-k-accent) 25%, transparent);
  color: var(--med-k-accent);
}
.med-kiosk-msg { min-height: 1.2em; margin: 0.35rem 0 0.6rem; }
.med-kiosk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.65rem;
  margin-top: 0.85rem;
}
@media (max-width: 900px) {
  .med-kiosk-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .med-kiosk-grid { grid-template-columns: 1fr; }
}
.med-kiosk-card {
  border: 1px solid color-mix(in srgb, var(--med-k-accent) 22%, var(--color-border));
  border-radius: 12px;
  padding: 0.85rem 0.7rem;
  background: color-mix(in srgb, var(--color-surface) 94%, transparent);
  text-align: center;
  cursor: pointer;
  font: inherit;
  color: var(--color-text);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s ease;
}
.med-kiosk-card:hover,
.med-kiosk-card:focus-visible {
  outline: none;
  border-color: var(--med-k-accent);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--med-k-accent) 18%, transparent);
  transform: translateY(-2px);
}
.med-kiosk-photo {
  width: 86px;
  height: 86px;
  margin: 0 auto 0.4rem;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-surface-elevated);
  border: 2px solid color-mix(in srgb, var(--med-k-accent) 25%, transparent);
}
.med-kiosk-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.med-kiosk-photo-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--med-k-accent);
}
.med-kiosk-allergy {
  margin: -0.1rem auto 0.45rem;
  max-width: 100%;
  font-size: 0.72rem;
  line-height: 1.35;
  text-align: left;
  padding: 0.35rem 0.45rem;
  border-radius: 8px;
  background: var(--med-k-warn-bg);
  color: #92400e;
  border: 1px dashed color-mix(in srgb, #f59e0b 50%, transparent);
}
[data-theme="dark"] .med-kiosk-allergy {
  background: color-mix(in srgb, #f59e0b 22%, var(--color-surface));
  color: #fcd34d;
}
.med-kiosk-card-name {
  display: block;
  font-weight: 800;
  font-size: 0.92rem;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--med-k-accent) 50%, transparent);
  word-break: break-word;
}
.med-kiosk-card-log {
  list-style: none;
  padding: 0.35rem 0 0;
  margin: 0.35rem 0 0;
  border-top: 1px dotted var(--color-border);
  text-align: left;
  font-size: 0.75rem;
}
.med-kiosk-card-log li + li { margin-top: 0.2rem; }
.med-kiosk-card-time { font-variant-numeric: tabular-nums; font-weight: 600; margin-right: 0.35rem; }
.med-kiosk-empty { padding: 2rem 1rem; text-align: center; grid-column: 1 / -1; }
.med-kiosk-actions { display: flex; justify-content: center; margin: 1.35rem 0 0; }
.med-kiosk-btn-search {
  border-radius: 999px;
  padding: 0.65rem 1.85rem;
  font-weight: 700;
}
.med-kiosk-log-details {
  margin-top: 1.75rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--color-border);
}
.med-kiosk-log-details summary { cursor: pointer; font-weight: 700; }
.med-kiosk-dialog {
  border: 1px solid color-mix(in srgb, var(--med-k-accent) 35%, var(--color-border));
  border-radius: 14px;
  padding: 0;
  max-width: min(26rem, 94vw);
  background: var(--color-surface);
  color: var(--color-text);
}
.med-kiosk-dialog--wide { max-width: min(38rem, 96vw); }
.med-kiosk-dialog::backdrop {
  background: rgba(15, 23, 42, 0.48);
}
.med-kiosk-dlg-inner { padding: 1.2rem 1.25rem 1.35rem; }
.med-kiosk-dlg-h { margin: 0 0 0.5rem; font-size: 1.05rem; }
.med-kiosk-dlg-h--sm { font-size: 1rem; margin: 0; }
.med-kiosk-dlg-search {
  width: 100%;
  box-sizing: border-box;
  margin: 0.5rem 0;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  font: inherit;
  background: var(--color-surface);
  color: var(--color-text);
}
.med-kiosk-hit-list { max-height: 220px; overflow-y: auto; margin: 0.35rem 0 0; }
.med-kiosk-hit-list li { margin: 0; padding: 0; border: none; }
.med-kiosk-hit {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  padding: 0.5rem 0.35rem;
  margin: 0;
  border: none;
  border-bottom: 1px solid var(--color-border);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.med-kiosk-hit:hover { background: var(--color-surface-elevated); border-radius: 8px; }
.med-kiosk-hit-name { font-weight: 700; }
.med-kiosk-strip {
  padding: 0.75rem 1rem;
  margin: -1.15rem -1.25rem 1rem -1.25rem;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(120deg, color-mix(in srgb, var(--med-k-accent) 26%, transparent), transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--med-k-accent) 28%, transparent);
}
.med-kiosk-strip-name { margin: 0.35rem 0 0; font-weight: 800; font-size: 1.15rem; }
.med-kiosk-fs {
  margin: 0 0 1rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
}
.med-kiosk-fs legend {
  padding: 0 0.35rem;
  font-weight: 800;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.med-kiosk-legend-note { margin: -0.1rem 0 0.5rem; }
.med-kiosk-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.med-kiosk-chip {
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.med-kiosk-chip:hover { border-color: var(--med-k-accent); }
.med-kiosk-chip.is-selected {
  border-color: var(--med-k-accent);
  background: color-mix(in srgb, var(--med-k-accent) 22%, var(--color-surface));
}
.med-kiosk-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.65rem;
}
.med-kiosk-label-full {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  margin-top: 0.5rem;
}
.med-kiosk-label-full input {
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  font: inherit;
  box-sizing: border-box;
  background: var(--color-surface);
  color: var(--color-text);
}
.med-kiosk-mar {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  font-size: 0.88rem;
  line-height: 1.45;
  padding: 0.75rem 0.85rem;
  margin: 0 0 0.85rem;
  border-radius: 10px;
  border: 1px dashed color-mix(in srgb, var(--med-k-accent) 45%, transparent);
  background: var(--med-k-accent-soft);
  cursor: pointer;
}
.med-kiosk-mar input { margin-top: 0.35rem; flex-shrink: 0; accent-color: var(--med-k-accent); }
.med-kiosk-dlg-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: flex-end;
}

/* Pages that supply their own H1 hero — hide the shell's auto-generated title row. */
body:has(.billing-page-shell) .app-shell-page-heading,
body:has(.waitlist-page-shell) .app-shell-page-heading,
body:has(.staff-page-shell) .app-shell-page-heading,
body:has(.att-track-page-shell) .app-shell-page-heading,
body:has(.new-accounts-page-shell) .app-shell-page-heading,
body:has(.help-page-shell) .app-shell-page-heading {
  display: none;
}

[data-theme='dark'] body:has(.app-shell-root) {
  background: var(--color-background);
}
[data-theme='dark'] .dashboard-layout.app-shell-root {
  background: var(--color-background);
}
[data-theme='dark'] .app-shell-root .dashboard-center > .dashboard-main-content {
  background: transparent;
}
[data-theme='dark'] .app-shell-root .dashboard-left,
[data-theme='dark'] .app-shell-root .dashboard-right {
  background: transparent;
}

.shell-help-card {
  border: none;
  box-shadow: none;
  background: rgba(15, 23, 42, 0.04);
}
[data-theme='dark'] .shell-help-card {
  border: none;
  background: rgba(255, 255, 255, 0.04);
}
.shell-help-card-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.35rem;
}
.shell-help-card-ico {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: #94a3b8;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-style: normal;
  line-height: 1;
}
.shell-help-card .shell-help-card-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
}
.shell-help-card-copy {
  margin: 0 0 0.35rem;
}
.shell-help-card-linkwrap {
  margin: 0;
}
.shell-help-card-link {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.9rem;
}
.shell-help-card-link:hover {
  text-decoration: underline;
}
.shell-help-card a:not(.shell-help-card-link) {
  color: var(--color-primary);
  font-weight: 600;
}

/* Billing page hero + tabs */
.billing-page-hero {
  margin-bottom: 1rem;
}
.billing-page-hero-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.billing-page-title {
  margin: 0 0 0.35rem;
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
}
.billing-page-subtitle {
  margin: 0;
  max-width: 42rem;
  line-height: 1.5;
  font-size: 0.95rem;
}
.billing-page-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.billing-page-tabs {
  margin-bottom: 1rem;
  justify-content: flex-start;
  gap: 0.35rem;
  padding: 0.35rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.billing-page-tabs .staff-page-tab {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.5rem 1rem;
  font-weight: 600;
}
.billing-page-tabs .staff-page-tab--active {
  background: rgba(37, 99, 235, 0.1);
  border-color: rgba(37, 99, 235, 0.35);
  color: var(--color-primary);
  box-shadow: none;
}
[data-theme='dark'] .billing-page-tabs .staff-page-tab--active {
  background: rgba(96, 165, 250, 0.15);
  border-color: rgba(96, 165, 250, 0.4);
}
body:has(.billing-page-shell) .billing-page-tabs {
  border: none;
  box-shadow: none;
  background: #f3f4f6;
}

/* Financial settings accordion */
.billing-fs-page {
  max-width: none;
}
.billing-fs-content {
  min-width: 0;
}
.billing-fs-intro {
  margin: 0 0 1rem;
  max-width: 52rem;
}
.billing-fs-item {
  scroll-margin-top: 5rem;
}
.billing-fs-subhead {
  margin: 1rem 0 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.billing-fs-panel > .billing-fs-subhead:first-child {
  margin-top: 0;
}
.billing-fs-note {
  margin: 0 0 0.85rem;
  max-width: 52rem;
  line-height: 1.45;
}
.billing-fs-guard,
.billing-fs-locked {
  margin: 0.75rem 0;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  font-size: 0.88rem;
  line-height: 1.45;
  max-width: 52rem;
}
.billing-fs-guard {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #78350f;
}
.billing-fs-locked {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e3a5f;
}
[data-theme='dark'] .billing-fs-guard {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.35);
  color: var(--color-text);
}
[data-theme='dark'] .billing-fs-locked {
  background: rgba(37, 99, 235, 0.15);
  border-color: rgba(96, 165, 250, 0.35);
  color: var(--color-text);
}
.billing-fs-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
}
.billing-fs-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.55rem;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.billing-fs-chip input {
  margin: 0;
}
.billing-fs-table-wrap {
  overflow-x: auto;
  margin: 0.5rem 0 1rem;
  -webkit-overflow-scrolling: touch;
}
.billing-fs-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  min-width: 36rem;
}
.billing-fs-matrix th,
.billing-fs-matrix td {
  border: 1px solid var(--color-border);
  padding: 0.35rem 0.4rem;
  text-align: left;
  vertical-align: middle;
}
.billing-fs-matrix th {
  background: var(--color-surface-elevated);
  font-weight: 700;
  white-space: nowrap;
}
.billing-fs-matrix-cell {
  text-align: center;
}
.billing-fs-mx-label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  cursor: pointer;
}
.billing-fs-field--full {
  grid-column: 1 / -1;
}
.billing-fs-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.75rem;
}
.billing-fs-banner-link {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}
.billing-fs-banner-link:hover {
  text-decoration: underline;
}
[data-theme='dark'] .billing-fs-banner--info .billing-fs-banner-link {
  color: var(--color-primary-hover);
}
.billing-fs-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  margin-bottom: 1rem;
  font-size: 0.92rem;
  line-height: 1.45;
}
.billing-fs-banner--info {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e3a5f;
}
[data-theme='dark'] .billing-fs-banner--info {
  background: rgba(37, 99, 235, 0.2);
  border-color: rgba(96, 165, 250, 0.35);
  color: var(--color-text);
}
.billing-fs-banner--warn {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #78350f;
  margin-top: 1.25rem;
}
[data-theme='dark'] .billing-fs-banner--warn {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.35);
  color: var(--color-text);
}
.billing-fs-banner-icon {
  flex-shrink: 0;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: #2563eb;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 800;
  font-style: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.billing-fs-banner-icon--lock {
  background: #ca8a04;
  font-size: 0.7rem;
}

.billing-fs-accordion {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.billing-fs-details {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.billing-fs-summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
}
.billing-fs-summary::-webkit-details-marker { display: none; }
.billing-fs-summary::marker { display: none; }
.billing-fs-summary:hover {
  background: var(--color-surface-elevated);
}
.billing-fs-mark {
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.billing-fs-mark-svg {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.billing-fs-summary-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.billing-fs-summary-title {
  font-size: 0.98rem;
  color: var(--color-text);
}
.billing-fs-summary-desc {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-text-muted);
}
.billing-fs-chevron {
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  transform: rotate(45deg);
  margin-top: -0.25rem;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
.billing-fs-details[open] .billing-fs-chevron {
  transform: rotate(-135deg);
  margin-top: 0.15rem;
}
.billing-fs-panel {
  padding: 0 1rem 1rem 1rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-elevated);
}
.billing-fs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.85rem 1rem;
  padding-top: 1rem;
}
.billing-fs-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0;
}
.billing-fs-field--inline .billing-fs-inline-num {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.billing-fs-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.billing-fs-input {
  width: 100%;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  font: inherit;
  font-size: 0.9rem;
  background: var(--color-surface);
  color: var(--color-text);
}
.billing-fs-input--narrow {
  width: 4.5rem;
}
.billing-fs-toggles {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--color-border);
}
.billing-fs-toggle {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
}
.billing-fs-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.billing-fs-toggle-ui {
  width: 2.5rem;
  height: 1.35rem;
  border-radius: 999px;
  background: #cbd5e1;
  flex-shrink: 0;
  position: relative;
  transition: background 0.15s ease;
}
.billing-fs-toggle-ui::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(1.35rem - 4px);
  height: calc(1.35rem - 4px);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  transition: transform 0.15s ease;
}
.billing-fs-toggle input:checked + .billing-fs-toggle-ui {
  background: var(--color-primary);
}
.billing-fs-toggle input:checked + .billing-fs-toggle-ui::after {
  transform: translateX(1.15rem);
}
.billing-fs-placeholder {
  margin: 0.75rem 0 0;
}

.billing-tab-pane-financial {
  padding-bottom: 1rem;
}

/* Dashboard child hub modal */
.dash-child-modal-body {
  min-height: 0;
  padding: 1.5rem;
  background: #fff;
}
/* Buttons & form controls inside the child modal match the rest of the site:
   full-size tap targets and typography rather than cramped small variants. */
.dash-child-modal-body .btn { font-size: 0.95rem; min-height: var(--tap-min); padding: 0.6rem 1.25rem; }
.dash-child-modal-body .btn-sm { font-size: 0.9rem; min-height: 40px; padding: 0.5rem 1.05rem; }
.dash-child-modal-body select,
.dash-child-modal-body input[type="text"],
.dash-child-modal-body input[type="search"],
.dash-child-modal-body input[type="email"],
.dash-child-modal-body input[type="number"],
.dash-child-modal-body input[type="date"],
.dash-child-modal-body input[type="datetime-local"],
.dash-child-modal-body input[type="file"] {
  min-height: var(--tap-min);
  font-size: 0.95rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
}
.dash-child-shell {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 0;
}
.dash-child-shell--mini {
  max-width: 560px;
  margin: 0 auto;
}
.dash-child-headbox {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 12px);
  padding: 0.9rem 1.1rem;
  background: var(--color-surface-elevated);
}
.dash-child-headbox-title {
  margin: 0 0 0.25rem;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-text);
}
.dash-child-headbox-subtitle {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 1rem;
}
.dash-child-top-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}
.dash-child-tab-btn {
  border-radius: var(--radius-sm);
  min-width: 148px;
  min-height: var(--tap-min);
  padding: 0.6rem 1.1rem;
  font-size: 0.95rem;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  font-weight: 600;
}
.dash-child-tab-btn:hover {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.35);
  color: var(--color-primary);
}
.dash-child-tab-btn.is-active {
  background: rgba(37, 99, 235, 0.1);
  border-color: rgba(37, 99, 235, 0.35);
  color: var(--color-primary);
}
.dash-child-print-btn {
  margin-left: auto;
  min-width: 88px;
  min-height: var(--tap-min, 44px);
  padding: 0.6rem 1.1rem;
  font-size: 0.95rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface-elevated);
  color: var(--color-text);
  font-weight: 600;
  cursor: pointer;
}
.dash-child-print-btn:hover {
  background: var(--color-border);
}
.dash-child-facts-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem;
}
.dash-child-facts {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.45rem 1rem;
}
.dash-child-facts dt {
  font-weight: 700;
  color: var(--color-text);
}
.dash-child-facts dd {
  margin: 0;
  color: var(--color-text-muted);
}
.dash-child-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.25rem;
}
.dash-child-summary-card,
.dash-child-large-card {
  border-radius: var(--radius-md, 12px);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(15, 23, 42, 0.06));
  background: var(--color-surface);
  padding: 1rem;
}
.dash-child-summary-card h4,
.dash-child-large-card h4,
.dash-child-contact-grid h4 {
  margin: 0 0 0.7rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text);
}
.dash-child-summary-card p,
.dash-child-large-card p {
  margin: 0;
}
.dash-child-summary-card--accent {
  border-left: 3px solid var(--color-primary);
}
.dash-child-summary-card--success {
  border-left: 3px solid var(--color-success);
}
.dash-child-summary-card--warn {
  border-left: 3px solid var(--color-accent);
}
.dash-child-summary-card-head {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: center;
}
.dash-child-inline-edit {
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-primary);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.3rem 0.5rem;
  border-radius: var(--radius-sm);
}
.dash-child-inline-edit:hover {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.25);
}
.dash-child-inline-meta {
  margin: 0;
  text-align: center;
  font-size: 1rem;
}
.dash-child-contact-grid,
.dash-child-two-col,
.dash-child-docs-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem 1.25rem;
}
.dash-child-two-col--narrow {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.dash-child-large-card--single {
  grid-column: 1 / -1;
}
.dash-child-contact-list,
.dash-child-detail-list,
.dash-child-mini-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.dash-child-contact-card,
.dash-child-detail-list li {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.85rem;
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}
.dash-child-subline {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.92rem;
}
.dash-child-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}
.dash-child-action-grid .btn {
  justify-content: center;
}
.dash-child-docs-layout {
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: start;
}
.dash-child-docs-nav {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.dash-child-doc-tab {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  padding: 0.8rem 1.1rem;
  font-size: 0.95rem;
  min-height: var(--tap-min);
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.dash-child-doc-tab:hover {
  background: var(--color-surface-elevated);
}
.dash-child-doc-tab--active {
  background: rgba(37, 99, 235, 0.1);
  border-color: rgba(37, 99, 235, 0.35);
  color: var(--color-primary);
}
.dash-child-empty {
  margin: 0;
  color: var(--color-text-muted);
}
.dash-child-footer-actions {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
}
.dash-child-footer-actions--spread {
  justify-content: space-between;
  flex-wrap: wrap;
}
.dash-child-attendance-state {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.dash-child-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  font-weight: 700;
  font-size: 0.95rem;
}
.dash-child-badge--success {
  background: #dcfce7;
  color: #166534;
}
.dash-child-badge--neutral {
  background: #e2e8f0;
  color: #334155;
}
.dash-child-badge--warn {
  background: #fef3c7;
  color: #92400e;
}
.dash-child-field-label {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-weight: 700;
  font-size: 0.98rem;
}
.dash-child-select {
  width: 100%;
}
.dash-child-tag-current {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.dash-child-tag-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #e0f2fe;
  color: #075985;
  padding: 0.35rem 0.7rem;
  font-weight: 700;
  font-size: 0.88rem;
}
.dash-child-media-upload {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}
.dash-child-media-upload input[type="text"] {
  flex: 1 1 200px;
  min-width: 160px;
}
.dash-child-att-time-field {
  max-width: 320px;
  margin: 0 auto;
}
.dash-child-media-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}
.dash-child-media-card {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.8rem;
}
.dash-child-media-thumb {
  width: 108px;
  height: 108px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--color-surface-elevated);
  display: block;
}
.dash-child-media-thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-weight: 600;
}
[data-theme='dark'] .dash-child-modal-body,
[data-theme='dark'] .dash-child-summary-card,
[data-theme='dark'] .dash-child-large-card,
[data-theme='dark'] .dash-child-contact-card,
[data-theme='dark'] .dash-child-detail-list li,
[data-theme='dark'] .dash-child-media-card,
[data-theme='dark'] .dash-child-print-btn {
  background: var(--color-surface);
}
[data-theme='dark'] .dash-child-tag-pill {
  background: rgba(14, 165, 233, 0.18);
  color: #bae6fd;
}
[data-theme='dark'] .dash-child-headbox,
[data-theme='dark'] .dash-child-print-btn {
  border-color: #94a3b8;
}
[data-theme='dark'] .dash-child-headbox-title,
[data-theme='dark'] .dash-child-headbox-subtitle,
[data-theme='dark'] .dash-child-facts dt,
[data-theme='dark'] .dash-child-facts dd,
[data-theme='dark'] .dash-child-summary-card h4,
[data-theme='dark'] .dash-child-large-card h4 {
  color: var(--color-text);
}
@media (max-width: 900px) {
  .dash-child-facts-grid,
  .dash-child-summary-grid,
  .dash-child-contact-grid,
  .dash-child-two-col,
  .dash-child-docs-layout,
  .dash-child-media-grid,
  .dash-child-action-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .dash-child-print-btn {
    margin-left: 0;
  }
}

/* ----- Billing page: action bar, dropdowns, ledger sub-tabs ----- */
.billing-actions-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}
.billing-dropdown { position: relative; }
.billing-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.1rem;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  color: var(--color-text, #0f172a);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.billing-dropdown-toggle:hover {
  background: var(--color-bg-subtle, #f8fafc);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
}
.billing-dropdown-toggle[aria-expanded="true"] {
  border-color: var(--color-primary, #2563eb);
}
.billing-dd-ic { color: var(--color-text-muted, #475569); flex: 0 0 auto; }
.billing-dd-label { line-height: 1; }
.billing-dropdown-caret {
  font-size: 0.7em;
  margin-left: 0.4rem;
  color: var(--color-text-muted, #64748b);
  transition: transform 0.12s ease;
}
.billing-dropdown-toggle[aria-expanded="true"] .billing-dropdown-caret { transform: rotate(180deg); }
.billing-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 40;
  min-width: 16rem;
  padding: 0.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.16);
}
.billing-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  text-align: left;
  padding: 0.7rem 0.8rem;
  border: none;
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
}
.billing-dd-item-ic { color: var(--color-text-muted, #475569); flex: 0 0 auto; }
.billing-dropdown-item:hover,
.billing-dropdown-item:focus-visible {
  background: var(--color-surface-muted, rgba(37, 99, 235, 0.08));
  outline: none;
}
.billing-dropdown-item:hover .billing-dd-item-ic { color: var(--color-primary, #2563eb); }
.billing-ledger-subtabs { margin-bottom: 1rem; }
.billing-subpanel { margin-top: 0.25rem; }

/* ----- Registration admin card (staff /registration page) ----- */
.reg-admin-card { margin-bottom: 1.25rem; }
.reg-admin-head { display: flex; align-items: flex-start; gap: 1rem; justify-content: space-between; flex-wrap: wrap; }
.reg-admin-switch { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.reg-admin-switch input { width: 1.1rem; height: 1.1rem; }
.reg-admin-open { margin-top: 1rem; border-top: 1px solid var(--color-border); padding-top: 1rem; }
.reg-admin-card .reg-label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted); margin-bottom: 0.3rem; }
.reg-admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 760px) { .reg-admin-grid { grid-template-columns: 1fr; } }
.reg-link-row { display: flex; gap: 0.5rem; }
.reg-link-row input { flex: 1; }
.reg-admin-actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 1rem; }
.reg-admin-seasons { margin-top: 1.5rem; border-top: 1px solid var(--color-border); padding-top: 1rem; }
.reg-season-form-wrap { margin-top: 0.75rem; }
.reg-season-form { margin-top: 0.75rem; border: 1px solid var(--color-border); border-radius: 10px; padding: 1rem; }
.reg-season-form label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--color-text-muted); }
.reg-season-form .reg-admin-grid label input,
.reg-season-form .reg-admin-grid label select { margin-top: 0.3rem; }
.reg-admin-incoming { margin-top: 1.5rem; border-top: 1px solid var(--color-border); padding-top: 1rem; }

/* New Accounts: clickable rows + registration detail modal */
tr.na-row { cursor: pointer; }
tr.na-row:hover { background: var(--color-surface-muted, #f6f8fb); }
.na-reg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.na-reg-chip { display: inline-flex; align-items: center; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.72rem; font-weight: 800; background: #e5e7eb; color: #374151; }
.na-reg-chip--paid { background: #dcfce7; color: #166534; }
.na-reg-chip--converted { background: #dbeafe; color: #1e40af; }
.na-reg-chip--draft { background: #fef9c3; color: #854d0e; }
.na-reg-h { font-size: 1rem; font-weight: 800; margin: 1.25rem 0 0.5rem; color: var(--color-text, #1f2a37); }
.na-reg-card { border: 1px solid var(--color-border, #e5e7eb); border-radius: 10px; padding: 0.85rem 1rem; margin-bottom: 0.75rem; background: var(--color-surface, #fff); }
.na-reg-card-title { font-weight: 700; margin-bottom: 0.5rem; }
.na-reg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.5rem 1rem; }
.na-reg-grid > div { font-size: 0.88rem; }
.na-reg-k { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-muted, #6b7280); font-weight: 700; }
.na-reg-sigs { display: flex; flex-wrap: wrap; gap: 1rem; }
.na-reg-sig { margin: 0; }
.na-reg-sig img { width: 220px; height: 90px; object-fit: contain; border: 1px solid var(--color-border, #e5e7eb); border-radius: 6px; background: #fff; }
.na-reg-sig figcaption { font-size: 0.75rem; color: var(--color-text-muted, #6b7280); text-transform: capitalize; text-align: center; margin-top: 0.25rem; }

/* ===== Multi-payer billing: account detail drill-down ===== */
.acct-row-clickable { cursor: pointer; }
.acct-row-clickable:hover { background: var(--color-surface-elevated, #f3f4f6); }
.acct-detail-panel { max-width: 640px; }
.acct-detail-summary { display: flex; flex-wrap: wrap; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--color-border, #e5e7eb); margin-bottom: 0.5rem; font-size: 0.95rem; }
.acct-detail-section { margin-top: 1.25rem; }
.acct-detail-section-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.acct-detail-section h4 { margin: 0 0 0.5rem; font-size: 1rem; }
.acct-detail-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.acct-detail-table th, .acct-detail-table td { text-align: left; padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--color-border, #eee); vertical-align: top; }
.acct-detail-table th { font-weight: 600; color: var(--color-text-muted, #6b7280); }
.acct-detail-row-actions { white-space: nowrap; text-align: right; }
.acct-detail-visibility { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--color-border, #eee); font-size: 0.9rem; }
.acct-detail-visibility select { max-width: 260px; }
.acct-detail-payer-form { margin-top: 0.75rem; padding: 0.9rem; border: 1px solid var(--color-border, #e5e7eb); border-radius: 8px; background: var(--color-surface-elevated, #f9fafb); display: flex; flex-direction: column; gap: 0.55rem; }
.acct-detail-payer-form h5 { margin: 0; font-size: 0.95rem; }
.acct-detail-payer-form label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; }
.acct-detail-payer-form input, .acct-detail-payer-form select { padding: 0.4rem 0.5rem; border: 1px solid var(--color-border, #d1d5db); border-radius: 6px; }
.btn-xs { padding: 0.15rem 0.4rem; font-size: 0.78rem; min-height: 0; line-height: 1.2; }
.btn-link.danger { color: var(--color-danger, #dc2626); }
.acct-detail-payonly { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; flex-direction: row !important; }
.acct-detail-payonly input { width: auto; }
.badge-soft { display: inline-block; padding: 0.05rem 0.4rem; font-size: 0.7rem; font-weight: 600; border-radius: 999px; background: var(--color-surface-elevated, #eef2ff); color: var(--color-primary, #4f46e5); vertical-align: middle; }

/* Restricted pay-only parent portal */
.pw-payonly-top { border-bottom: 1px solid var(--pw-border, #e5e7eb); background: var(--pw-card, #fff); }
.pw-payonly-top-inner { max-width: 720px; margin: 0 auto; padding: 0.9rem 1rem; display: flex; align-items: center; justify-content: space-between; }
.pw-payonly-brand { font-weight: 800; font-size: 1.05rem; }
.pw-payonly-main { max-width: 720px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }