.core-cal-overlap-box {
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: 8px;
  padding: 0.5rem 0.625rem;
  background: var(--surface-soft, #f8fafc);
}

.core-cal-overlap-empty {
  color: var(--slate-600, #475569);
  font-size: 0.875rem;
}

.core-cal-overlap-group + .core-cal-overlap-group {
  margin-top: 0.5rem;
}

.core-cal-overlap-group-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--slate-700, #334155);
  margin-bottom: 0.25rem;
}

.core-cal-overlap-list {
  margin: 0;
  padding-left: 1rem;
}

.core-cal-overlap-list li {
  margin: 0.15rem 0;
  color: var(--slate-700, #334155);
  font-size: 0.875rem;
}

.core-cal-overlap-item-time {
  color: var(--slate-600, #475569);
}
/* YWAM Base – gentle blue theme, modern sections */

@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;1,9..40,400&display=swap');
@import url('theme-modules.css');

:root {
  /* Gentle blue palette */
  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;
  --blue-900: #1e3a8a;
  /* Complementary */
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --white: #ffffff;
  --cream: #fafbfc;
  --accent-teal: #0d9488;
  --accent-teal-light: #ccfbf1;
  --success-green: #059669;
  --success-bg: #d1fae5;
  --error-red: #dc2626;
  --error-bg: #fee2e2;
  --warm-amber: #d97706;
  --warm-amber-bg: #fef3c7;
  /* App tokens */
  --color-bg: var(--slate-50);
  --color-surface: var(--white);
  --color-surface-elevated: var(--white);
  --color-primary: var(--blue-600);
  --color-primary-hover: var(--blue-700);
  --color-primary-light: var(--blue-100);
  --color-primary-pale: var(--blue-50);
  --color-text: var(--slate-800);
  --color-text-muted: var(--slate-500);
  --color-border: var(--slate-300);
  --color-border-light: var(--slate-200);
  /* Inputs / text fields: stronger edge than general UI borders */
  --form-input-border: var(--slate-400);
  --form-input-border-hover: var(--slate-500);
  --form-input-shadow: 0 1px 2px rgba(15, 23, 42, 0.07);
  /* Higher-contrast border for calendar day cells (each theme can override) */
  --color-calendar-day-border: var(--slate-300);
  /* Stacking order: subnav < menu dropdowns (header) < modals. See .cursor/rules/menu-modal-stacking.mdc */
  --z-subnav: 1200;
  --z-subnav-dropdown: 1300;
  --z-menu-dropdowns: 1400;
  --z-modal: 3000;
  --modal-fx-duration: 360ms;
  --modal-fx-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --modal-fx-offset-y: 8px;
  /* In-page push toasts/modals: above chat overlay (.chat-conversation-modal uses 1e4–1.2e4) */
  --z-push-inpage: 13000;
  --color-error: var(--error-red);
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --shadow-sm: 0 1px 2px rgba(30, 41, 59, 0.05);
  --shadow: 0 4px 6px -1px rgba(30, 41, 59, 0.07), 0 2px 4px -2px rgba(30, 41, 59, 0.05);
  --shadow-md: 0 10px 15px -3px rgba(30, 41, 59, 0.08), 0 4px 6px -4px rgba(30, 41, 59, 0.05);
  --transition: 0.2s ease;
  /* Header gradient (site themes override these) */
  --header-from: var(--blue-600);
  --header-to: var(--blue-700);
  /* Sub-header and content area (module themes override these on content only) */
  --subheader-bg: var(--blue-100);
  --subheader-border: var(--blue-200);
  --subheader-link: var(--blue-800);
  --subheader-link-hover-bg: var(--blue-200);
  --subheader-link-hover: var(--blue-900);
  --subheader-link-active-bg: var(--blue-200);
  --subheader-link-active: var(--blue-900);
  --subheader-dropdown-hover-bg: var(--blue-50);
  --subheader-dropdown-hover-text: var(--blue-700);
  --subheader-dropdown-active-bg: var(--blue-100);
  --subheader-dropdown-active-text: var(--blue-800);
  /* Core page tabs (in-content): current page uses same concept as subheader active link */
  --core-page-tabs-current-bg: var(--subheader-link-active-bg);
  --core-page-tabs-current-color: var(--subheader-link-active);
  --focus-border: var(--blue-400);
  --focus-ring: rgba(59, 130, 246, 0.25);
  --btn-shadow: rgba(37, 99, 235, 0.3);
  /* Super Form: high contrast so input cells stand out on all devices */
  --super-form-view-bg: var(--slate-50);
  --super-form-input-bg: var(--color-surface);
  --super-form-input-border: var(--slate-500);
  --super-form-input-border-width: 2px;
  --super-form-input-text: var(--slate-900);
  --super-form-input-focus-border: var(--blue-500);
  --super-form-label-text: var(--slate-800);
  /* Modal / dense forms: tinted canvas vs filled controls (site + module themes override) */
  --form-field-area-bg: var(--slate-100);
  --form-field-area-border: color-mix(in srgb, var(--form-input-border, var(--slate-400)) 28%, var(--color-border, var(--slate-300)));
  --form-field-bg: var(--super-form-input-bg);
  --form-field-modal-input-border-width: 2px;
  /* Form builder + form_fill (light): canvas behind white inputs — stronger than slate-50 */
  --form-dynamic-canvas-bg: var(--slate-100);
  --form-dynamic-surface-bg: var(--color-surface);
  --form-dynamic-input-bg: var(--super-form-input-bg);
  --form-dynamic-input-border: var(--form-input-border);
  --form-dynamic-input-shadow: var(--form-input-shadow);
}

* { box-sizing: border-box; }

html {
  overflow-x: hidden;
  max-width: 100%;
}
body {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  margin: 0;
  min-height: 100vh;
  line-height: 1.5;
  overflow-x: hidden;
  max-width: 100%;
}

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

/* ---- Header ---- */
.site-header {
  background: linear-gradient(135deg, var(--header-from) 0%, var(--header-to) 100%);
  padding: 0.28rem 0.85rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.2rem 0.85rem;
  position: relative;
  overflow: hidden;
}
.site-header::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 60%;
  height: 200%;
  background: radial-gradient(ellipse, rgba(255,255,255,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.site-header-brand {
  text-decoration: none;
  color: inherit;
}
.site-header-brand:hover {
  text-decoration: none;
  color: var(--white);
}
.site-header-logo {
  display: block;
  max-height: 2rem;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}
.site-header h1 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.02em;
}
/* Active module: full-height box (top to bottom of header) */
.site-header-wrapper {
  position: relative;
  z-index: var(--z-menu-dropdowns, 1400);
  max-width: 100%;
  overflow: visible;
}
/* Site Admin badge in the top utility row. */
.site-admin-badge {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  margin: 0;
  padding: 0 0.24rem;
  line-height: 1.05;
  font-size: 0.58rem;
  font-weight: 600;
  color: var(--white, #fff);
  background: rgba(0, 0, 0, 0.45);
  border-radius: 0 0 0 4px;
  white-space: nowrap;
}
.site-header {
  min-width: 0;
  overflow: visible;
  margin-bottom: 0;
}
/* Single row when everything fits: brand | module links (flex) | language/me/logout | menu btn — utils stay far right. When nav wraps, brand stays top-left. */
.site-header-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.2rem 0.55rem;
  min-width: 0;
  flex: 1 1 auto;
  width: 100%;
}
.site-header-mobile-utils {
  display: none;
}
.site-header-row .site-header-brand {
  flex-shrink: 0;
  align-self: flex-start;
}
.site-header-row .site-header-nav-utils {
  margin-left: auto;
}
.site-header-row .site-header-nav-utils + .site-header-menu-btn {
  margin-left: 0;
}
/* When nav wraps, align menu btn with the utils row (bottom of nav area) */
.site-header-row .site-header-menu-btn {
  flex-shrink: 0;
  align-self: flex-end;
}
.site-header-nav-wrap {
  position: relative;
  z-index: 20;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem 0.5rem;
  min-width: 0;
  flex: 1 1 auto;
  overflow: visible;
  min-height: 2.1rem;
}
.site-header nav {
  height: auto;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 0.1rem 0.5rem;
  position: relative;
  z-index: 1;
  min-width: 0;
  width: 100%;
  overflow: visible;
  min-height: 2.1rem;
  padding-right: calc(clamp(11.25rem, 19vw, 14rem) + 0.65rem);
}
/* Module links: full width on top, wrap to multiple lines */
.site-header-nav-modules {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.1rem 0.25rem;
  min-width: 0;
  flex: 0 1 auto;
  order: 1;
  width: 100%;
  align-self: flex-start;
}
/* Per-user menu groups (dropdown) */
.site-header-nav-modules .header-nav-group {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.site-header-nav-modules .header-nav-group-label {
  color: rgba(255,255,255,0.95);
  font-weight: 500;
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
  user-select: none;
}
.site-header-nav-modules .header-nav-group-label:hover {
  background: rgba(255,255,255,0.15);
  color: var(--white);
}
.site-header-nav-modules .header-nav-group-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 10rem;
  margin-top: -2px;
  padding: 0.25rem 0;
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 2000;
  display: none;
}
.site-header-nav-modules .header-nav-group:hover .header-nav-group-dropdown,
.site-header-nav-modules .header-nav-group:focus-within .header-nav-group-dropdown {
  display: block;
}
.site-header-nav-modules .header-nav-group-dropdown a {
  display: flex;
  align-items: center;
  padding: 0.7rem 1rem;
  color: var(--color-text, #1e293b);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
  font-size: 0.82rem;
}
.site-header-nav-modules .header-nav-group-dropdown a:hover {
  background: var(--color-primary-light, #dbeafe);
  color: var(--color-primary, #2563eb);
}
.site-header-nav-modules .header-nav-group-dropdown a.current-module {
  background: rgba(37, 99, 235, 0.15);
  color: var(--color-primary);
}
.site-header-nav-utils {
  position: absolute;
  top: -0.28rem;
  right: 0;
  bottom: -0.28rem;
  margin: 0;
  width: clamp(11.25rem, 19vw, 14rem);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  gap: 0;
  flex-shrink: 0;
  order: 0;
  z-index: 2200;
  background: linear-gradient(135deg, var(--header-from) 0%, var(--header-to) 100%);
  padding: 0 0.25rem 0 0.35rem;
  box-sizing: border-box;
}
.site-header-row .site-header-nav-utils {
  margin-left: auto;
}
.site-header-nav-utils-top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.08rem;
  flex: 0 0 50%;
  min-height: 0;
  margin: 0;
  padding: 0;
}
.site-header-nav-languages {
  display: flex;
  align-items: stretch;
  gap: 0.08rem;
  min-width: 0;
  margin: 0;
  padding: 0;
}
.site-admin-badge-slot {
  min-width: 5.2rem;
  display: inline-flex;
  justify-content: flex-end;
  align-items: stretch;
  margin: 0;
  padding: 0;
}
.site-admin-badge-placeholder {
  visibility: hidden;
}
/* Site Admin: sensitive access failure count (next to Site Admin badge) */
a.header-sensitive-access-alert {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  min-height: 1.35rem;
  margin: 0 0.2rem 0 0;
  padding: 0 0.28rem;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  color: var(--white, #fff);
  background: #b45309;
  border-radius: 4px;
  text-decoration: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
  z-index: 1;
}
a.header-sensitive-access-alert:hover {
  color: var(--white, #fff);
  background: #c2410c;
  text-decoration: none;
}
/* Site Admin: intrusion shield — probe events after a block, pending confirmation */
a.header-intrusion-shield-alert {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  min-height: 1.35rem;
  margin: 0 0.2rem 0 0;
  padding: 0 0.28rem;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  color: var(--white, #fff);
  background: #991b1b;
  border-radius: 4px;
  text-decoration: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
  z-index: 1;
}
a.header-intrusion-shield-alert:hover {
  color: var(--white, #fff);
  background: #b91c1c;
  text-decoration: none;
}
/* Admin: sensitive page access rule builder */
.sa-rule-row-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.35rem;
}
.sa-rule-row-inner .form-input,
.sa-rule-row-inner .btn {
  min-height: 44px;
}
.sa-rule-row-inner .sa-rule-value-text {
  flex: 1 1 10rem;
  min-width: 8rem;
}
.sa-rule-row-inner .sa-rule-test-url {
  flex: 1 1 12rem;
  min-width: 10rem;
}
.sensitive-access-failures-table .sensitive-failure-row--unreviewed td {
  background: rgba(251, 191, 36, 0.12);
}
.sensitive-access-failures-table .sensitive-failure-row--new-visit td {
  box-shadow: inset 3px 0 0 0 #b45309;
}
.site-header-nav-utils-bottom {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-evenly;
  gap: 0.25rem;
  flex: 0 0 50%;
  min-height: 0;
  margin: 0;
  padding: 0;
}
.site-header-nav-utils .header-lang-form {
  margin: 0;
  padding: 0;
}
.site-header-nav-utils .header-lang-form select {
  margin: 0;
  min-height: 1.08rem;
  height: 1.08rem;
  padding: 0 0.12rem;
  font-size: 0.72rem;
  line-height: 1.1;
}
.site-header-nav-utils .header-translation-toggle {
  margin: 0;
  min-height: 1.08rem;
  height: 1.08rem;
  padding: 0 0.08rem;
  line-height: 1;
  font-size: 0.68rem;
  gap: 0.06rem;
  border-width: 1px;
}
.site-header-nav-utils .header-translation-toggle .header-translation-toggle-icon {
  font-size: 0.7rem;
  opacity: 0.95;
}
.site-header-nav-utils a {
  color: rgba(255,255,255,0.95);
  font-weight: 500;
  padding: 0 0.18rem;
  min-height: 1.08rem;
  height: 1.08rem;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  font-size: 0.74rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.site-header-nav-utils a:hover {
  background: rgba(255,255,255,0.15);
  color: var(--white);
  text-decoration: none;
}
/* Desktop only: Me name hover dropdown (quick links to Me pages) */
.site-header-nav-utils-bottom .header-me-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.site-header-nav-utils-bottom .header-me-dropdown-trigger {
  color: rgba(255,255,255,0.95);
  font-weight: 500;
  padding: 0 0.18rem;
  min-height: 1.08rem;
  height: 1.08rem;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.site-header-nav-utils-bottom .header-me-dropdown:hover .header-me-dropdown-trigger,
.site-header-nav-utils-bottom .header-me-dropdown-trigger:hover {
  background: rgba(255,255,255,0.15);
  color: var(--white);
}
.site-header-nav-utils-bottom .header-me-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 10rem;
  margin-top: -2px;
  padding: 0.25rem 0;
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 2000;
  display: none;
}
.site-header-nav-utils-bottom .header-me-dropdown:hover .header-me-dropdown-menu,
.site-header-nav-utils-bottom .header-me-dropdown:focus-within .header-me-dropdown-menu {
  display: block;
}
.site-header-nav-utils-bottom .header-me-dropdown-link {
  display: flex;
  align-items: center;
  padding: 0.7rem 1rem;
  color: var(--color-text, #1e293b);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
  font-size: 0.82rem;
}
.site-header-nav-utils-bottom .header-me-dropdown-link:hover {
  background: var(--color-primary-light, #dbeafe);
  color: var(--color-primary, #2563eb);
}
.site-header-nav-utils-bottom .site-header-me-name-link {
  color: rgba(255,255,255,0.95);
  font-weight: 500;
  padding: 0 0.18rem;
  min-height: 1.08rem;
  height: 1.08rem;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.site-header-nav-utils-bottom .site-header-me-name-link:hover {
  background: rgba(255,255,255,0.15);
  color: var(--white);
}
.site-header-nav-utils .header-help-btn,
.site-header-nav-utils .header-help-stop-impersonate {
  background: none;
  border: none;
  color: rgba(255,255,255,0.95);
  font-weight: 500;
  padding: 0 0.18rem;
  min-height: 1.08rem;
  height: 1.08rem;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  font-size: 0.74rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.site-header-nav-utils .header-help-btn:hover,
.site-header-nav-utils .header-help-stop-impersonate:hover {
  background: rgba(255,255,255,0.15);
  color: var(--white);
}
.header-help-stop-impersonate {
  color: var(--amber-400, #fbbf24);
}
.site-header-nav-utils .header-help-stop-impersonate:hover {
  color: var(--amber-300, #fcd34d);
}
/* Help: Get Help + Report a problem (click-to-open menu) */
.site-header-nav-utils-bottom .header-help-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.site-header-nav-utils-bottom .header-help-dropdown-trigger {
  background: none;
  border: none;
  color: rgba(255,255,255,0.95);
  font-weight: 500;
  padding: 0 0.18rem;
  min-height: 1.08rem;
  height: 1.08rem;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  font-size: 0.74rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.site-header-nav-utils-bottom .header-help-dropdown-trigger:hover {
  background: rgba(255,255,255,0.15);
  color: var(--white);
}
.site-header-nav-utils-bottom .header-help-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 2px;
  min-width: 11rem;
  padding: 0.25rem 0;
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: var(--z-menu-dropdowns, 1400);
  display: none;
}
.site-header-nav-utils-bottom .header-help-dropdown-menu.header-help-dropdown-menu--open {
  display: block;
}
.site-header-nav-utils-bottom .header-help-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.65rem 1rem;
  border: none;
  background: none;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text, #1e293b);
  cursor: pointer;
  min-height: 44px;
}
.site-header-nav-utils-bottom .header-help-dropdown-item:hover {
  background: var(--color-primary-light, #dbeafe);
  color: var(--color-primary, #2563eb);
}
/* Site admin: pending help request — flag on Help trigger (matches tab favicon corner) */
.site-header-nav-utils-bottom .header-help-dropdown-trigger--pending,
.site-header-mobile-utils .header-help-dropdown-trigger--pending {
  position: relative;
  padding-right: 0.42rem;
}
.site-header-nav-utils-bottom .header-help-dropdown-trigger--pending::after,
.site-header-mobile-utils .header-help-dropdown-trigger--pending::after {
  content: '';
  position: absolute;
  top: 1px;
  right: 1px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 6px 6px 0;
  border-color: transparent #dc2626 transparent transparent;
  pointer-events: none;
}
.site-header-nav-utils-bottom .header-help-dropdown-item--row,
.site-header-mobile-utils .header-help-dropdown-item--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.site-header-nav-utils-bottom .header-help-item-badge,
.site-header-mobile-utils .header-help-item-badge {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 7px 7px 0;
  border-color: transparent #dc2626 transparent transparent;
  flex-shrink: 0;
}
.site-header-mobile-utils .header-help-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.site-header-mobile-utils .header-help-dropdown-trigger {
  background: none;
  border: none;
  font-size: 0.78rem;
  min-height: 1.7rem;
  padding: 0 0.35rem;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,0.96);
  cursor: pointer;
  font-weight: 500;
}
.site-header-mobile-utils .header-help-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 2px;
  min-width: 10.5rem;
  padding: 0.2rem 0;
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  z-index: var(--z-menu-dropdowns, 1400);
  display: none;
}
.site-header-mobile-utils .header-help-dropdown-menu.header-help-dropdown-menu--open {
  display: block;
}
.site-header-mobile-utils .header-help-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.6rem 0.85rem;
  border: none;
  background: none;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-text, #1e293b);
  cursor: pointer;
  min-height: 44px;
}
.site-header-mobile-utils .header-help-dropdown-item:hover {
  background: var(--color-primary-light, #dbeafe);
  color: var(--color-primary, #2563eb);
}
/* Current module: only change is the highlight (::before background). Keep padding, margin, display, border-radius identical to default link. */
.site-header nav a.current-module,
.site-header nav .header-preview-disabled.current-module {
  position: relative;
  background: transparent;
  color: var(--white);
  border-radius: var(--radius-sm);
  margin: 0;
  padding: 0.4rem 0.7rem;
}
.site-header nav a.current-module::before,
.site-header nav .header-preview-disabled.current-module::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -0.7rem;
  bottom: -0.7rem;
  background: rgba(255,255,255,0.25);
  z-index: -1;
}
.site-header nav a.current-module:hover::before {
  background: rgba(255,255,255,0.3);
}
.site-header nav a.current-module:hover {
  background: transparent;
  color: var(--white);
}
.site-header nav .header-preview-disabled.current-module {
  padding: 0.4rem 0.7rem;
}
.site-header nav a {
  color: rgba(255,255,255,0.95);
  font-weight: 500;
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.site-header nav a:hover {
  background: rgba(255,255,255,0.15);
  color: var(--white);
  text-decoration: none;
}
.site-header nav .header-preview-disabled {
  color: rgba(255,255,255,0.95);
  font-weight: 500;
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  cursor: default;
  display: inline-block;
}
.site-header nav .header-preview-disabled.menu-pending {
  background: var(--warm-amber-bg);
  color: var(--slate-800);
}

/* Downward triangle under active module (positioned by JS); uses --header-module-arrow per theme */
.site-header-wrapper.has-active-module {
  z-index: var(--z-menu-dropdowns, 1400);
}
.site-header-wrapper.has-active-module + .sub-header {
  position: relative;
  z-index: var(--z-subnav, 1200);
  padding-top: 3px;
}
.header-active-triangle {
  display: none;
  position: absolute;
  bottom: 0;
  left: var(--active-link-center, 50%);
  transform: translate(-50%, 100%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--header-module-arrow, rgba(255,255,255,0.4));
  pointer-events: none;
  z-index: 2;
}
.site-header-wrapper.has-active-module .header-active-triangle {
  display: block;
}
.site-header nav .header-preview-disabled.menu-pending {
  background: var(--warm-amber-bg);
  color: var(--slate-800);
}

/* Hamburger button: hidden on desktop, shown on mobile */
.site-header-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  background: rgba(255,255,255,0.15);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--white);
  position: relative;
  z-index: 2;
  transition: background var(--transition);
}
.site-header-menu-btn:hover {
  background: rgba(255,255,255,0.25);
}
.site-header-menu-icon {
  display: block;
  position: relative;
  width: 22px;
  height: 2px;
  background: currentColor;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
  border-radius: 1px;
}
.site-header-menu-btn[aria-expanded="true"] .site-header-menu-icon {
  box-shadow: none;
  transform: rotate(45deg);
}
.site-header-menu-btn[aria-expanded="true"] .site-header-menu-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 2px;
  margin-left: -11px;
  margin-top: -1px;
  background: currentColor;
  transform: rotate(-90deg);
  border-radius: 1px;
}

/* Sub-header menu button: hidden on desktop */
.sub-header-menu-btn {
  display: none;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  padding: 0 1rem;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--subheader-border);
  color: var(--subheader-link);
  font-weight: 600;
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background var(--transition);
}
.sub-header-menu-btn:hover {
  background: var(--subheader-link-hover-bg);
}
.sub-header-menu-btn-icon {
  display: block;
  width: 12px;
  height: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-right: 0.25rem;
  transition: transform var(--transition);
}
.sub-header.open .sub-header-menu-btn-icon {
  transform: rotate(-135deg);
}
.sub-header-menu-btn-text {
  flex: 1;
}

/* ---- Login page ---- */
.page-login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(160deg, var(--color-primary-pale) 0%, var(--slate-100) 50%, var(--color-primary-light) 100%);
  padding: 1.5rem;
}
.page-login::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 40vh;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  border-radius: 0 0 50% 50% / 0 0 30% 30%;
  z-index: 0;
}
.login-box {
  background: var(--color-surface);
  padding: 2.25rem;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  width: 100%;
  max-width: 400px;
  position: relative;
  z-index: 1;
  border: 1px solid var(--color-border-light);
}
.login-box h1 {
  margin: 0 0 1.5rem;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--slate-800);
  letter-spacing: -0.02em;
}
.login-box label {
  display: block;
  margin-top: 1rem;
  font-weight: 500;
  color: var(--slate-700);
  font-size: 0.9375rem;
}
.login-box label:first-of-type { margin-top: 0; }
.login-box input {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 1rem;
  margin-top: 0.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 16px;
  font-family: inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
  box-sizing: border-box;
}
.login-box input:focus {
  outline: none;
  border-color: var(--focus-border);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.login-box .pwd-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.login-box .pwd-field input {
  flex: 1 1 auto;
  min-width: 0;
}
.login-box button {
  width: 100%;
  min-height: 48px;
  margin-top: 1.5rem;
  padding: 0.75rem 1rem;
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  font-family: inherit;
  transition: filter var(--transition), box-shadow var(--transition);
}
.login-box button:hover {
  filter: brightness(1.05);
  box-shadow: 0 4px 12px var(--btn-shadow);
}
.login-box .error {
  color: var(--color-error);
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: var(--error-bg);
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--color-error);
  font-size: 0.9375rem;
}
.form-error {
  color: var(--color-error);
  margin-bottom: 1rem;
  padding: 0.5rem 1rem;
  background: var(--error-bg);
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--color-error);
  font-size: 0.9375rem;
}

/* ---- Main content areas ---- */
.dashboard,
.admin-content {
  --page-content-max: 1200px;
  --page-content-width: 100%;
  --page-content-padding-x: 1.5rem;
  --page-content-padding-y: 1.5rem;
  --page-content-margin-x: auto;
  width: var(--page-content-width);
  padding: var(--page-content-padding-y) var(--page-content-padding-x);
  max-width: var(--page-content-max);
  margin-left: var(--page-content-margin-x);
  margin-right: var(--page-content-margin-x);
}
.admin-layout--readable .admin-content,
.admin-content.admin-content-readable,
.page-layout--readable .dashboard {
  --page-content-max: 64rem;
}
.admin-layout--standard .admin-content,
.page-layout--standard .dashboard {
  --page-content-max: 1200px;
  --page-content-width: 100%;
  --page-content-padding-x: 1.5rem;
  --page-content-padding-y: 1.5rem;
  --page-content-margin-x: auto;
}
.admin-layout--fluid .admin-content,
.page-layout--fluid .dashboard {
  --page-content-max: none;
  --page-content-width: 99%;
  --page-content-padding-x: 1rem;
  --page-content-padding-y: 1rem;
  --page-content-margin-x: auto;
}
.admin-layout--edge .admin-content,
.page-layout--edge .dashboard {
  --page-content-max: none;
  --page-content-width: 100%;
  --page-content-padding-x: 0;
  --page-content-padding-y: 0;
  --page-content-margin-x: 0;
}

.core-page-content {
  --page-content-max: 1200px;
  --page-content-width: 100%;
  --page-content-padding-x: 1.5rem;
  --page-content-padding-y: 1.5rem;
  --page-content-margin-x: auto;
  width: var(--page-content-width);
  max-width: var(--page-content-max);
  margin-left: var(--page-content-margin-x);
  margin-right: var(--page-content-margin-x);
  padding: var(--page-content-padding-y) var(--page-content-padding-x);
}
.core-page-content--readable {
  --page-content-max: 64rem;
}
.core-page-content--fluid {
  --page-content-max: none;
  --page-content-width: 100%;
  --page-content-padding-x: 1rem;
  --page-content-padding-y: 1rem;
}
.core-page-content--edge {
  --page-content-max: none;
  --page-content-width: 100%;
  --page-content-padding-x: 0;
  --page-content-padding-y: 0;
  --page-content-margin-x: 0;
}

/* Reusable two-pane splitter. Set --core-split-left or use core-resizable-split.js. */
.core-resizable-split {
  --core-split-left: 60%;
  --core-split-handle-width: 0.75rem;
  --core-split-gap: 0.75rem;
  display: grid;
  grid-template-columns: minmax(0, var(--core-split-left)) var(--core-split-handle-width) minmax(0, 1fr);
  column-gap: var(--core-split-gap);
  align-items: start;
}
.core-resizable-split-pane {
  min-width: 0;
}
.core-resizable-split-handle {
  align-self: stretch;
  min-height: 8rem;
  width: var(--core-split-handle-width);
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  cursor: col-resize;
  position: relative;
  touch-action: none;
}
.core-resizable-split-handle::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: var(--color-border, #cbd5e1);
}
.core-resizable-split-handle:hover::before,
.core-resizable-split-handle:focus-visible::before,
.core-resizable-split.is-resizing .core-resizable-split-handle::before {
  background: var(--color-primary, #2563eb);
}
.core-resizable-split-handle:focus-visible {
  outline: 2px solid var(--focus-border, #60a5fa);
  outline-offset: 2px;
}
@media (max-width: 768px) {
  .core-page-content {
    --page-content-padding-x: 1rem;
    --page-content-padding-y: 1rem;
  }
  .core-resizable-split {
    grid-template-columns: 1fr;
    row-gap: 1rem;
  }
  .core-resizable-split-handle {
    display: none;
  }
}
/* Card-style sections */
.section-card,
section.section-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  border: 1px solid var(--color-border-light);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}
.section-card h2,
.section-card h3 {
  margin: 0 0 1rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--slate-800);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border-light);
}
.section-card h3 { font-size: 1rem; margin-bottom: 0.75rem; border-bottom: none; padding-bottom: 0; }

/* Admin Updates: collapsible panels and AJAX status */
.admin-updates-collapsible > summary.admin-updates-collapsible-summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  padding: 0.15rem 0;
}
.admin-updates-collapsible > summary.admin-updates-collapsible-summary::-webkit-details-marker {
  display: none;
}
.admin-updates-collapsible-nested {
  margin-top: 0.75rem;
  padding: 1rem;
}
.admin-updates-status {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-lg, 8px);
  border: 1px solid var(--color-border-light, #e2e8f0);
}
.admin-updates-status-success {
  background: var(--green-50, #f0fdf4);
  border-color: var(--green-300, #86efac);
  color: var(--green-800, #166534);
}
.admin-updates-status-error {
  background: #fef2f2;
  border-color: var(--red-300, #fca5a5);
  color: #991b1b;
}
.admin-updates-status-success a.link {
  word-break: break-all;
}
.admin-updates-status-success .btn {
  margin-top: 0.25rem;
}

/* Admin: notification toast buttons – two columns (positive | negative) */
.toast-buttons-two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 2rem;
  align-items: start;
}
@media (max-width: 640px) {
  .toast-buttons-two-cols {
    grid-template-columns: 1fr;
  }
}
.toast-buttons-col {
  min-width: 0;
}
.toast-buttons-list li {
  padding: 0.35rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.toast-btn-label {
  cursor: pointer;
  text-decoration: underline;
}
.toast-btn-label:hover {
  text-decoration: none;
}

/* Reception settings: reply options use same two-column layout */
.reception-reply-options-section .toast-buttons-two-cols {
  margin-bottom: 0.5rem;
}
.reception-reply-options-section .reception-reply-options-col-heading {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  font-weight: 600;
}
.reception-reply-options-section .reception-reply-options-site-wrap {
  margin-bottom: 0.75rem;
}
.reception-reply-options-section .reception-reply-options-site-wrap .reception-reply-options-kind-label {
  display: block;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: 0.35rem;
}
.reception-reply-options-section .reception-reply-module-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.75rem 0;
}
.reception-reply-options-section .reception-reply-module-list .reception-reply-module-row {
  padding: 0.35rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Reception dashboard: quadrants fill window, theme styling.
   Height accounts for: site header (~56px), sub-header/subnav (~48–60px), main padding (1rem top + 1rem bottom = 32px), buffer; reduced by 10% so content does not extend past viewport. */
.reception-dashboard-fill {
  display: flex;
  flex-direction: column;
  min-height: calc((100vh - 180px) * 0.9);
  max-height: calc((100vh - 180px) * 0.9);
  width: 100%;
  overflow: hidden;
}
.reception-dashboard-fill .reception-dashboard-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  max-width: none;
  width: 100%;
  overflow: hidden;
}
.reception-dashboard-content .reception-quadrants {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-height: 95%;
}
.reception-quadrants {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.reception-quadrant {
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0.75rem 1rem;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}
.reception-quadrant:first-child .reception-users-table-wrap {
  flex: 1;
  min-height: 0;
}
.reception-quadrant:nth-child(2) .reception-day-calendar-wrap {
  flex: 1;
  min-height: 0;
}
.reception-quadrant:nth-child(2n) { border-right: none; }
.reception-quadrant:nth-child(n+3) { border-bottom: none; }

.reception-focused-user {
  text-align: center;
  padding: 0.4rem 0.75rem;
  margin-bottom: 0.5rem;
  border: 2px solid var(--color-primary, #2563eb);
  border-radius: var(--radius-lg, 0.75rem);
  background: var(--color-primary-pale, #eff6ff);
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
  flex-shrink: 0;
}
.reception-focused-line {
  display: block;
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--color-text, var(--slate-800));
  font-weight: 700;
}
.reception-focused-line:empty {
  display: none;
}
.reception-user-row {
  cursor: pointer;
}
.reception-user-row:hover {
  background: var(--slate-200, #e2e8f0) !important;
}
.reception-user-row-selected {
  background: var(--color-primary-pale, #eff6ff) !important;
}
.reception-users-table-wrap {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}
.reception-users-search-label {
  display: block;
  font-weight: 500;
  color: var(--color-text, var(--slate-800));
  margin-bottom: 0.25rem;
  font-size: 0.8125rem;
}
.reception-search-filters {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.reception-filter-group {
  flex: 1;
  min-width: 120px;
}
.reception-filter-group.reception-filter-clear {
  flex: 0 0 auto;
  min-width: 0;
}
.reception-filter-group.reception-filter-clear .reception-btn-clear {
  width: auto;
}
.reception-filter-group .reception-users-search-label {
  margin-bottom: 0.25rem;
}
.reception-filter-group:not(.reception-filter-clear) .reception-users-search-label {
  text-align: center;
}
.reception-filter-group .reception-module-select,
.reception-filter-group .reception-role-select {
  width: 100%;
}
.reception-module-select,
.reception-role-select {
  width: 100%;
  min-height: 36px;
  padding: 0.35rem 0.5rem;
  background: var(--color-surface, #fff);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-family: inherit;
  box-sizing: border-box;
}
.reception-module-select:focus,
.reception-role-select:focus {
  outline: none;
  border-color: var(--focus-border);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.reception-users-table-wrap input {
  width: 100%;
  min-height: 36px;
  padding: 0.35rem 0.5rem;
  background: var(--color-surface, #fff);
  color: var(--color-text, #1e293b);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-family: inherit;
  line-height: 1.35;
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  margin-bottom: 0.5rem;
}
.reception-search-with-mic {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
  max-width: 100%;
}
#reception-user-search {
  flex: 1;
  min-width: 0;
  width: 50%;
  max-width: 100%;
  margin-bottom: 0;
  border-width: 2px;
  border-color: var(--slate-500, #64748b);
}
.reception-search-mic-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 2px solid var(--slate-400, #94a3b8);
  border-radius: var(--radius, 6px);
  background: var(--color-surface, #fff);
  color: var(--color-text, #1e293b);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.reception-search-mic-btn:hover {
  border-color: var(--slate-500, #64748b);
  background: var(--color-border-light, #f1f5f9);
}
.reception-search-mic-btn:focus {
  outline: none;
  border-color: var(--focus-border);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.reception-search-mic-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
.reception-search-mic-btn.reception-search-mic-active {
  border-color: var(--color-primary, #2563eb);
  background: var(--color-primary-pale, #eff6ff);
  color: var(--color-primary, #2563eb);
}
.reception-search-mic-icon {
  width: 20px;
  height: 20px;
}
#reception-user-search:focus {
  border-color: var(--focus-border);
}
.reception-users-table-wrap input::placeholder {
  color: var(--slate-400);
}
.reception-users-table-wrap input:focus {
  outline: none;
  border-color: var(--focus-border);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.reception-users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  flex: 1;
  min-height: 0;
}
.reception-users-table th,
.reception-users-table td {
  padding: 0.25rem 0.5rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border-light);
  line-height: 1.35;
}
.reception-users-table th {
  font-weight: 600;
  color: var(--slate-700);
  background: var(--slate-50);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.reception-users-table tbody tr:hover {
  background: var(--slate-100, #f1f5f9);
}
.reception-users-table-wrap .reception-users-tbody-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.reception-users-table-wrap .reception-users-empty {
  color: var(--color-text-muted);
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
}

.schools-applicant-search-widget .schools-applicant-search-scroll {
  max-height: min(50vh, 28rem);
  overflow: auto;
  margin-top: 0.5rem;
}
.schools-applicant-search-widget .schools-applicant-search-table {
  margin-bottom: 0;
}

/* Reception top-right: day calendar for focused user */
.reception-day-calendar-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 2px solid var(--slate-400, #94a3b8);
  border-radius: var(--radius-md, 6px);
}
.reception-day-calendar-placeholder {
  display: none; /* hidden in reception view; list appears in day-calendar-scroll when user selected */
  flex: 1;
  min-height: 0;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  padding: 1rem;
}
.reception-day-calendar-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: 0;
}
.reception-day-calendar {
  position: relative;
  min-height: 100%;
  padding-bottom: 0;
  padding-top: 0;
}
.reception-day-calendar-inner {
  position: relative;
  height: 1152px;
}
.reception-day-calendar-day-title {
  text-align: center;
  font-weight: 600;
  color: var(--color-text);
  padding: 0.5rem 0;
  font-size: 0.9375rem;
  flex-shrink: 0;
}
.reception-day-hour {
  display: flex;
  align-items: stretch;
  min-height: 48px;
  border-bottom: 1px solid var(--color-border-light);
}
.reception-day-hour-label {
  flex: 0 0 3.5rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-align: right;
}
.reception-day-hour-slot {
  flex: 1;
  position: relative;
  min-height: 48px;
  height: 48px;
}
.reception-day-events-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1152px;
  pointer-events: none;
}
.reception-day-event {
  position: absolute;
  left: 3.5rem;
  right: 4px;
  padding: 2px 6px;
  font-size: 0.75rem;
  line-height: 1.3;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-primary-pale, #eff6ff);
  color: var(--color-text);
  border-left: 3px solid var(--color-primary);
  pointer-events: none;
  cursor: default;
  box-sizing: border-box;
}
.reception-day-event.reception-day-event-allday {
  position: relative;
  left: 0;
  right: 0;
  margin-bottom: 4px;
  height: auto;
}
.reception-day-now-line {
  position: absolute;
  left: 3.5rem;
  right: 0;
  height: 2px;
  background: var(--color-primary, #2563eb);
  z-index: 2;
  pointer-events: none;
}
.reception-day-now-line::before {
  content: '';
  position: absolute;
  left: 0;
  top: -4px;
  width: 8px;
  height: 10px;
  background: var(--color-primary);
  border-radius: 0 2px 2px 0;
}

/* Reception top-right: two columns (user day calendar | base calendar) */
.reception-topright-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 0.75rem;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}
.reception-topright-columns > .reception-day-calendar-wrap,
.reception-topright-columns > .reception-base-calendar-wrap {
  min-height: 0;
  height: 100%;
}
@media (max-width: 900px) {
  .reception-topright-columns {
    grid-template-columns: 1fr;
  }
}

/* Reception dashboard: mobile single-column (right sections fold under left) */
@media (max-width: 900px) {
  .reception-dashboard-fill {
    min-height: auto;
    max-height: none;
    overflow: visible;
  }
  .reception-dashboard-content {
    overflow: visible;
  }
  .reception-dashboard-content .reception-quadrants {
    max-height: none;
    overflow: visible;
  }
  .reception-quadrants {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    overflow: visible;
  }
  .reception-quadrant {
    border-right: none;
    min-height: 200px;
    border-bottom: 1px solid var(--color-border);
  }
  .reception-quadrant:nth-child(n+3) {
    border-bottom: 1px solid var(--color-border);
  }
  .reception-quadrant:last-child {
    border-bottom: none;
  }
  /* Calendar quadrant: day + month stack, ensure usable height */
  .reception-quadrant:nth-child(2) {
    min-height: 280px;
  }
  .reception-quadrant:nth-child(2) .reception-topright-columns {
    grid-template-rows: 1fr 1fr;
    min-height: 240px;
  }
  .reception-quadrant:nth-child(3) {
    min-height: 180px;
  }
  .reception-quadrant:nth-child(4) {
    min-height: 160px;
  }
}

/* Reception mobile: constrain width to viewport, allow internal horizontal scroll */
@media (max-width: 900px) {
  .admin-layout.reception-dashboard-fill {
    max-width: 100%;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .reception-dashboard-fill .reception-dashboard-content,
  .admin-content.reception-dashboard-content {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .reception-quadrants {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .reception-quadrant {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  /* Search/focus: table can scroll horizontally inside section */
  .reception-quadrant:first-child .reception-users-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    min-width: 0;
  }
  .reception-quadrant:first-child .reception-search-filters {
    flex-wrap: wrap;
    max-width: 100%;
  }
  .reception-quadrant:first-child .reception-filter-group {
    min-width: 0;
    flex: 1 1 120px;
  }
  /* Calendars: constrain and allow scroll inside */
  .reception-quadrant:nth-child(2) .reception-topright-columns {
    min-width: 0;
    max-width: 100%;
  }
  .reception-quadrant:nth-child(2) .reception-day-calendar-wrap {
    min-width: 0;
    max-width: 100%;
  }
  .reception-quadrant:nth-child(2) .reception-base-calendar-wrap {
    min-width: 0;
    max-width: 100%;
  }
  .reception-quadrant:nth-child(2) .reception-base-cal-week-view {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .reception-quadrant:nth-child(2) .reception-base-cal-days {
    min-width: 0;
  }
  .reception-quadrant:nth-child(2) .reception-base-cal-span-row {
    min-width: 0;
  }
  /* Message section */
  .reception-quadrant:nth-child(3) .reception-actions-wrap {
    max-width: 100%;
    min-width: 0;
  }
  .reception-quadrant:nth-child(3) .reception-actions-two-cols {
    min-width: 0;
  }
  /* History section */
  .reception-quadrant:nth-child(4) .reception-history-wrap {
    max-width: 100%;
    min-width: 0;
  }
}

/* Reception base calendar (small community style) */
.reception-base-calendar-wrap {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid var(--slate-300, #cbd5e1);
  border-radius: 8px;
  padding: 0.5rem;
  background: var(--color-bg, #f8fafc);
}
.reception-base-calendar-wrap:focus {
  outline: 2px solid var(--focus-border, #60a5fa);
  outline-offset: 2px;
}
.reception-base-cal-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}
.reception-base-cal-nav button {
  padding: 0.35rem 0.65rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--color-text, #1e293b);
  background: var(--color-surface, #fff);
  border: 1px solid var(--slate-400, #94a3b8);
  border-radius: 6px;
}
.reception-base-cal-nav button:hover {
  background: var(--color-border-light, #f1f5f9);
  border-color: var(--slate-500, #64748b);
}
.reception-base-cal-range {
  font-size: 0.9rem;
  font-weight: 700;
  min-width: 100px;
  text-align: center;
  color: var(--color-text, #1e293b);
}
.reception-base-cal-meal-lines-label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.7rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.reception-base-cal-meal-lines-label input { margin: 0; }
.reception-base-cal-week-view {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.reception-base-cal-week {
  min-height: 140px;
  display: flex;
  flex-direction: column;
  background: var(--color-surface, #fff);
  border: 2px solid var(--slate-400, #94a3b8);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
.reception-base-cal-span-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 1px 0;
  min-height: 0;
}
.reception-base-cal-span-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
  height: 14px;
  padding: 0 1px;
  box-sizing: border-box;
}
.reception-base-cal-bar {
  border-radius: 3px;
  padding: 0.04rem 0.15rem;
  font-size: 0.62rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  background: var(--color-primary, #2563eb);
}
.reception-base-cal-bar.task { background: var(--slate-600, #475569); }
.reception-base-cal-bar.important { box-shadow: 0 0 0 1px rgba(0,0,0,0.2); }
.reception-base-cal-bar.very_important { font-weight: 600; box-shadow: 0 0 0 1px rgba(0,0,0,0.3); }
.reception-base-cal-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
  padding: 2px;
  flex: 1;
  min-height: 0;
  box-sizing: border-box;
  align-items: stretch;
}
.reception-base-cal-day {
  min-height: 1.5rem;
  padding: 0.15rem;
  border: 2px solid var(--slate-400, #94a3b8);
  border-radius: 4px;
  background: var(--color-bg, #f8fafc);
  font-size: 0.7rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.reception-base-cal-day.today {
  background: var(--color-primary-pale, #eff6ff);
  border-color: var(--color-primary, #2563eb);
  box-shadow: 0 0 0 1px var(--color-primary, #2563eb);
}
.reception-base-cal-day-dow {
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--slate-500, #64748b);
  margin-bottom: 0.05rem;
  flex-shrink: 0;
}
.reception-base-cal-day-num {
  font-weight: 700;
  color: var(--color-text, #1e293b);
  margin-bottom: 0.1rem;
  font-size: 0.8rem;
  flex-shrink: 0;
}
.reception-base-cal-day.outside { opacity: 0.65; border-color: var(--slate-300, #cbd5e1); }
.reception-base-cal-day-allday {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex-shrink: 0;
  min-height: 0;
}
.reception-base-cal-day-timeline {
  position: relative;
  flex: 1;
  min-height: 3.5rem;
  margin-top: 0.1rem;
}
.reception-base-cal-day-timeline .reception-base-cal-meal-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1px dashed var(--color-text-muted, #64748b);
  opacity: 0.5;
  pointer-events: none;
}
.reception-base-cal-day-timeline-empty { flex: 0 0 auto; min-height: 0; margin-top: 0; }
.reception-base-cal-day-chip {
  padding: 0.1rem 0.15rem;
  border-radius: 3px;
  font-size: 0.6rem;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--color-primary-pale, #dbeafe);
  color: var(--color-text, #1e293b);
  border: 1px solid var(--color-primary, #2563eb);
  word-break: break-word;
  white-space: normal;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.reception-base-cal-day-chip.task { background: var(--slate-100, #f1f5f9); border-color: var(--slate-400, #94a3b8); }
.reception-base-cal-day-timed {
  position: absolute;
  left: 1px;
  right: 1px;
  overflow: hidden;
  border-radius: 2px;
  padding: 0.06rem 0.15rem;
  font-size: 0.55rem;
  line-height: 1.15;
  box-sizing: border-box;
  word-break: break-word;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  background: var(--color-primary, #2563eb);
  color: #fff;
  border: 1px solid rgba(0,0,0,0.1);
}
.reception-base-cal-hint {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  color: var(--slate-500, #64748b);
  text-align: center;
  flex-shrink: 0;
}
.reception-base-cal-error {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--color-text-muted, #64748b);
}

/* Reception full calendar modal */
.reception-full-calendar-modal .reception-modal-content {
  max-width: 96vw;
  width: 96vw;
  height: 90vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.reception-full-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
  flex-shrink: 0;
}
.reception-full-calendar-header h3 { margin: 0; font-size: 1.1rem; }
.reception-full-calendar-iframe {
  flex: 1;
  width: 100%;
  min-height: 0;
  border: none;
}

/* Reception settings: common messages section */
.reception-common-messages-section { margin-top: 1.5rem; }
.reception-common-messages-desc {
  color: var(--color-text-muted, #64748b);
  font-size: 0.9375rem;
  margin: 0 0 1rem 0;
}
.reception-common-messages-actions { margin-bottom: 1rem; }
.reception-common-messages-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.reception-common-messages-table th,
.reception-common-messages-table td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
}
.reception-common-messages-table th {
  font-weight: 600;
  color: var(--color-text, #1e293b);
}
.reception-common-messages-empty { color: var(--color-text-muted); }
.reception-common-messages-form-wrap {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border, #e2e8f0);
}
.reception-common-messages-form-wrap[hidden] {
  display: none !important;
}
.reception-common-messages-form-title { margin: 0 0 1rem 0; font-size: 1.1rem; }
/* messages_settings.php: wider main + form so Email / Notification columns are ~2× default */
.admin-layout .admin-content.messages-settings-page {
  max-width: 2400px;
}
.admin-content.messages-settings-page .section-card.form-compact {
  max-width: 1920px;
}

.reception-settings-two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 768px) {
  .reception-settings-two-cols { grid-template-columns: 1fr; }
}
.reception-settings-col {
  padding: 1rem;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius, 8px);
  background: var(--color-bg, #f8fafc);
}
.reception-settings-col-heading {
  margin: 0 0 0.75rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text, #1e293b);
}
.reception-cm-two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 768px) {
  .reception-cm-two-cols { grid-template-columns: 1fr; }
}
.reception-cm-col {
  padding: 1rem;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius, 8px);
  background: var(--color-bg, #f8fafc);
}
.reception-cm-col-heading {
  margin: 0 0 0.75rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text, #1e293b);
}
.reception-cm-form-footer { margin-top: 1rem; }
.reception-cm-row-clickable { cursor: pointer; }
.reception-cm-row-clickable:hover { background: var(--slate-50, #f8fafc); }
.reception-cm-actions-cell { cursor: default; }
.reception-cm-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  pointer-events: none;
}
.reception-cm-modal:not([hidden]) { pointer-events: auto; }
.reception-cm-modal[hidden] { display: none; }
.reception-cm-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
}
.reception-cm-modal-content {
  position: relative;
  background: var(--color-surface, #fff);
  border-radius: 12px;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.15);
  padding: 1.25rem;
  max-width: 480px;
  width: 100%;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.reception-cm-modal-content h3 { margin: 0 0 1rem 0; font-size: 1.1rem; }
.reception-cm-translations-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin-bottom: 1rem;
}
.reception-cm-translation-item {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
  font-size: 0.9375rem;
}
.reception-cm-translation-item:last-child { border-bottom: none; }
.reception-cm-translation-title {
  font-weight: 600;
  color: var(--color-text, #1e293b);
  margin: 0.25rem 0 0.15rem 0;
}
.reception-cm-translation-body {
  color: var(--color-text-muted, #64748b);
  font-size: 0.875rem;
  white-space: pre-wrap;
  word-break: break-word;
}
.reception-cm-translations-empty { margin: 0.5rem 0; color: var(--color-text-muted); }
.reception-cm-modal-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.reception-common-messages-lang-block {
  margin: 0 0 1.25rem 0;
  padding: 1rem;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius, 8px);
  background: var(--color-bg, #f8fafc);
}
.reception-common-messages-lang-block legend {
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0 0.35rem;
  margin-bottom: 0.5rem;
}

/* Reception bottom-left: two columns — left = common message titles (scrollable), right = message field and send methods */
.reception-actions-wrap {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}
.reception-actions-two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}
@media (max-width: 640px) {
  .reception-actions-two-cols {
    grid-template-columns: 1fr;
  }
}
.reception-actions-col-titles {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.reception-actions-col-compose {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.reception-actions-col-compose .reception-message-textarea {
  flex: 1;
  min-height: 80px;
}
.reception-common-messages-list-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius);
  background: var(--color-bg, #f8fafc);
}
.reception-common-messages-list {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
}
.reception-common-message-item {
  cursor: pointer;
  padding: 0.5rem 1rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--color-text, #1e293b);
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  transition: background 0.12s ease;
}
.reception-common-message-item:hover,
.reception-common-message-item:focus {
  background: var(--slate-100, #f1f5f9);
  outline: none;
}
.reception-common-messages-empty,
.reception-common-messages-loading {
  padding: 0.75rem 1rem;
  color: var(--color-text-muted, #64748b);
  font-size: 0.9375rem;
}
.reception-message-label {
  font-weight: 500;
  color: var(--color-text, var(--slate-800));
  font-size: 0.9375rem;
  margin: 0 0 0.25rem 0;
}
.reception-message-textarea {
  width: 100%;
  min-height: 140px;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  font-family: inherit;
  border: 2px solid var(--slate-400, #94a3b8);
  border-radius: var(--radius);
  background: var(--color-surface, #fff);
  color: var(--color-text);
  box-sizing: border-box;
  resize: vertical;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.reception-message-textarea::placeholder {
  color: var(--color-text-muted, var(--slate-400));
}
.reception-message-textarea:focus {
  outline: none;
  border-color: var(--focus-border);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.reception-send-via-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-muted);
  margin: 0 0 0.25rem 0;
}
.reception-common-message-select {
  width: 100%;
  max-width: 100%;
  margin-bottom: 0.25rem;
}
.reception-send-methods {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.reception-send-methods .btn {
  min-height: 44px;
  padding: 0.5rem 1rem;
  font-size: 0.9375rem;
}

/* Reception modals: larger inputs, theme styling */
.reception-form-input,
.reception-form-textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  font-family: inherit;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface, #fff);
  color: var(--color-text);
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.reception-form-input:focus,
.reception-form-textarea:focus {
  outline: none;
  border-color: var(--focus-border);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.reception-form-textarea {
  min-height: 100px;
  resize: vertical;
  line-height: 1.5;
}

/* Reception modals */
.reception-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.reception-modal[hidden] {
  display: none;
}
.reception-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}
.reception-modal-content {
  position: relative;
  background: var(--color-surface, #fff);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 1.25rem;
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}
.reception-modal-content h3 {
  margin: 0 0 1rem 0;
  font-size: 1.125rem;
}
.reception-preview-body {
  white-space: pre-wrap;
  padding: 0.75rem;
  background: var(--slate-50);
  border-radius: var(--radius);
  font-size: 0.875rem;
  max-height: 200px;
  overflow-y: auto;
}
.reception-preview-modal-content {
  max-width: 32rem;
}
.reception-preview-layout {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.reception-preview-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
}
.reception-preview-subject {
  width: 100%;
  box-sizing: border-box;
}
.reception-preview-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 0.25rem;
}

/* Reception notification modal: reply buttons */
.reception-notif-recipient-row .reception-notif-recipient-names {
  font-weight: 500;
  color: var(--color-text);
}
.reception-notif-reply-section .reception-notif-reply-buttons-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.reception-notif-button-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.reception-notif-button-label {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  min-width: 4.5rem;
}
.reception-notif-reply-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.reception-notif-reply-btn {
  font-size: 0.875rem;
  padding: 0.35rem 0.65rem;
  background: var(--slate-100);
  border-color: var(--slate-300);
  color: var(--color-text);
}
.reception-notif-reply-btn:hover {
  background: var(--slate-200);
}
.reception-notif-reply-btn.reception-notif-reply-btn-selected.reception-notif-reply-positive {
  background: var(--green-600, #16a34a);
  border-color: var(--green-700, #15803d);
  color: #fff;
}
.reception-notif-reply-btn.reception-notif-reply-btn-selected.reception-notif-reply-negative {
  background: var(--red-600, #dc2626);
  border-color: var(--red-700, #b91c1c);
  color: #fff;
}

/* Reception notification modal: title above message, message full width */
.reception-notification-modal-content {
  max-width: 32rem;
}
.reception-notification-modal-body .form-row {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: 0.5rem 1rem;
  align-items: start;
}
.reception-notification-modal-body .reception-notif-message-row {
  grid-column: 1 / -1;
}
.reception-notification-modal-body .reception-notif-body-fullwidth {
  width: 100%;
  box-sizing: border-box;
}
.reception-notification-modal-body .reception-notif-reply-section {
  grid-column: 1 / -1;
}
.reception-notification-modal-body .form-actions,
.reception-notification-modal-body .reception-notif-actions-under-message {
  grid-column: 1 / -1;
}
.reception-notification-modal-body .form-actions.reception-notif-actions-under-message,
.reception-notification-modal-body .form-actions.reception-notif-actions-row {
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.reception-notification-modal-body .reception-notif-actions-buttons {
  display: flex;
  gap: 0.5rem;
}
.reception-notification-modal-body .reception-notif-actions-checkbox {
  display: flex;
  align-items: center;
}

/* Reception settings: reply options (site defaults + module-specific) */
.reception-reply-options-section .reception-reply-options-subheading {
  font-size: 1rem;
  margin: 1rem 0 0.35rem 0;
}
.reception-reply-options-section .reception-reply-options-subheading:first-of-type {
  margin-top: 0;
}
.reception-reply-options-section .reception-reply-options-main {
  margin-top: 0.5rem;
}
.reception-reply-options-hint {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 0 0 0.75rem 0;
}
.reception-reply-options-kind-label {
  display: block;
  font-weight: 500;
  margin-bottom: 0.25rem;
}
.reception-reply-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}
.reception-reply-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: normal;
  cursor: pointer;
}
.reception-reply-module-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}
.reception-reply-module-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.reception-reply-module-row-label {
  flex: 1;
  min-width: 0;
}
.reception-reply-module-add {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.reception-reply-module-key {
  width: 10rem;
}
.reception-reply-module-label {
  width: 12rem;
}

/* Reception Messages settings: expandable textareas */
.reception-settings-textarea {
  width: 100%;
  min-height: 6rem;
  resize: vertical;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  font-family: inherit;
  line-height: 1.5;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface, #fff);
  color: var(--color-text);
  box-sizing: border-box;
}
.reception-settings-textarea:focus {
  outline: none;
  border-color: var(--focus-border);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Reception bottom-right: communication history */
.reception-history-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.reception-history-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 0.25rem 0;
  flex-shrink: 0;
}
.reception-history-placeholder {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  padding: 1rem;
  text-align: center;
}
.reception-history-list-wrap {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.reception-history-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.reception-history-item {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border-light);
  font-size: 0.8125rem;
}
.reception-history-item:last-child {
  border-bottom: none;
}
.reception-history-meta {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  margin-bottom: 0.2rem;
}
.reception-history-subject {
  font-weight: 500;
  color: var(--color-text);
}
.reception-history-preview {
  display: block;
  color: var(--color-text-muted);
  margin-top: 0.2rem;
  line-height: 1.35;
}
.reception-history-loading,
.reception-history-empty {
  color: var(--color-text-muted);
  padding: 1rem;
  font-size: 0.875rem;
}

/* Reply status: row background and reply line after title */
.reception-history-reply-line {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
}
.reception-history-reply-pending-text {
  color: var(--color-text-muted);
  font-style: italic;
}
.reception-history-item.reception-history-reply-positive {
  background: rgba(34, 197, 94, 0.12);
  border-left: 3px solid rgba(34, 197, 94, 0.6);
}
.reception-history-item.reception-history-reply-negative {
  background: rgba(239, 68, 68, 0.1);
  border-left: 3px solid rgba(239, 68, 68, 0.5);
}
.reception-history-item.reception-history-reply-pending {
  background: rgba(234, 179, 8, 0.12);
  border-left: 3px solid rgba(234, 179, 8, 0.5);
}

/* Lists as cards */
ul.section-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
ul.section-list li {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border-light);
  transition: background var(--transition);
}
ul.section-list li:last-child { border-bottom: none; }
ul.section-list li:hover { background: var(--color-primary-light); }
ul.section-list li a {
  font-weight: 500;
  color: var(--color-primary-hover);
}

/* Update database list: key + status on line 1, details on line 2 */
.update-db-list .update-db-line1 { overflow-wrap: break-word; }
.update-db-list .update-db-details { overflow-wrap: break-word; }

/* ---- Sub-header (second-level nav under main header; uses theme variables) ---- */
/* Sub-header must not clip the dropdown: overflow: visible so Settings (and other dropdowns) expand down over content.
 * Using overflow-x: hidden would force overflow-y to become auto (CSS spec), causing a scrollbar inside the bar.
 * position: relative + z-index so dropdown expansion menus stack above schedule/content (e.g. planning assignee dropdown at 1100). */
.sub-header {
  position: relative;
  z-index: var(--z-subnav, 1200);
  background: var(--subheader-bg);
  border-bottom: 1px solid var(--subheader-border);
  padding: 0 0 0 1.5rem;
  box-shadow: 0 1px 2px rgba(30, 41, 59, 0.05);
  max-width: 100%;
  overflow: visible;
}
/* Keep bar height consistent when empty (fallback message) so layout does not jump */
.sub-header.sub-header-always-visible {
  min-height: 40px;
  display: flex;
  align-items: center;
}
.sub-header-inner {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
  min-height: 40px;
  min-width: 0;
}
/* Non-interactive scope label (module / category / type) at start of subnav — not a link or menu control */
.sub-header-context {
  padding: 0.35rem 0.65rem 0.35rem 0;
  margin-right: 0.25rem;
  color: var(--slate-600);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(42vw, 18rem);
  flex-shrink: 1;
  border-right: 1px solid var(--subheader-border);
  user-select: none;
  pointer-events: none;
  cursor: default;
}
.sub-header-fallback-msg {
  color: var(--subheader-link);
  padding: 0.4rem 0.75rem;
  font-weight: 500;
  font-size: inherit;
}
.sub-header-inner > a {
  padding: 0.4rem 0.8rem;
  color: var(--subheader-link);
  font-weight: 500;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.sub-header-inner > a:hover {
  background: var(--subheader-link-hover-bg);
  color: var(--subheader-link-hover);
  text-decoration: none;
}
.sub-header-inner > a.active {
  background: var(--subheader-link-active-bg);
  color: var(--subheader-link-active);
  font-weight: 600;
}
.sub-header-dropdown {
  position: relative;
}
.sub-header-dropdown-trigger {
  padding: 0.4rem 0.8rem;
  color: var(--subheader-link);
  font-weight: 500;
  font-size: inherit;
  font-family: inherit;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: background var(--transition), color var(--transition);
}
.sub-header-dropdown-trigger:hover {
  background: var(--subheader-link-hover-bg);
  color: var(--subheader-link-hover);
}
.sub-header-dropdown-trigger.active {
  background: var(--subheader-link-active-bg);
  color: var(--subheader-link-active);
  font-weight: 600;
}
.sub-header-dropdown-trigger::after {
  content: '\25BE';
  margin-left: 0.25rem;
  font-size: 0.85em;
}
/* Gear icon for core Settings trigger (key=settings) in subnav and subsubnav */
.sub-header-gear-icon,
.sub-header-inner .sub-header-gear-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}
.core-subsubnav .sub-header-gear-icon {
  display: inline-block;
  vertical-align: middle;
}
/* Sub-menu dropdowns overlay page content; full height so no scrollbar inside dropdown.
   z-index above planning schedule (1100) so they always appear on top. */
.sub-header-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  max-height: min(90vh, 800px);
  overflow-y: visible;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 0.25rem 0;
  /* Above subnav (--z-subnav); below menu dropdowns (--z-menu-dropdowns) */
  z-index: var(--z-subnav-dropdown, 1300);
  display: none;
  margin-top: -4px;
}
.sub-header-dropdown:hover .sub-header-dropdown-menu,
.sub-header-dropdown:focus-within .sub-header-dropdown-menu {
  display: block;
}
/* Close button only shown in mobile subnav dropdown; desktop uses hover so no close needed */
.sub-header-dropdown-close {
  display: none;
}
.sub-header-dropdown-menu a {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--slate-700);
  font-weight: 500;
  text-decoration: none;
  transition: background var(--transition);
}
.sub-header-dropdown-menu a:hover {
  background: var(--subheader-dropdown-hover-bg);
  color: var(--subheader-dropdown-hover-text);
  text-decoration: none;
}
.sub-header-dropdown-menu a.active {
  background: var(--subheader-dropdown-active-bg);
  color: var(--subheader-dropdown-active-text);
  font-weight: 600;
}
.sub-header-dropdown-heading {
  display: block;
  padding: 0.35rem 0.75rem 0.15rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--slate-500);
  border-top: 1px solid var(--slate-200);
  margin-top: 0.25rem;
}
.sub-header-dropdown-heading:first-of-type {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}
.sub-header-inner > a.menu-pending,
.sub-header-dropdown-menu a.menu-pending,
.sub-header-dropdown-trigger.menu-pending {
  background: var(--warm-amber-bg);
  color: var(--warm-amber);
  font-weight: 600;
}
.sub-header-inner > a.menu-pending:hover,
.sub-header-dropdown-menu a.menu-pending:hover,
.sub-header-dropdown-trigger.menu-pending:hover {
  background: #fde68a;
  color: #b45309;
  text-decoration: none;
}

/* Trip slips: highlight when there are reservations to print (draw attention to go there) */
.site-header nav a.trip-slips-pending,
.site-header nav a.trip-slips-pending.current-module,
.site-header-nav-modules a.trip-slips-pending,
.site-header-nav-modules a.trip-slips-pending.current-module {
  background: var(--warm-amber-bg, #fef3c7);
  color: var(--warm-amber);
  font-weight: 600;
}
.site-header nav a.trip-slips-pending:hover,
.site-header nav a.trip-slips-pending.current-module:hover,
.site-header-nav-modules a.trip-slips-pending:hover,
.site-header-nav-modules a.trip-slips-pending.current-module:hover {
  background: #fde68a;
  color: #b45309;
}
.sub-header-inner > a.trip-slips-pending {
  background: var(--warm-amber-bg, #fef3c7);
  color: var(--warm-amber);
  font-weight: 600;
}
.sub-header-inner > a.trip-slips-pending:hover {
  background: #fde68a;
  color: #b45309;
}

/* Flagged subnav item: same style as Admin "Update database" / "Languages" (menu-pending) */
.sub-header-inner > a.subnav-flagged,
.sub-header-dropdown-trigger.subnav-flagged,
.sub-header-dropdown-menu a.subnav-flagged {
  background: var(--warm-amber-bg);
  color: var(--warm-amber);
  font-weight: 600;
}
.sub-header-inner > a.subnav-flagged:hover,
.sub-header-dropdown-trigger.subnav-flagged:hover,
.sub-header-dropdown-menu a.subnav-flagged:hover {
  background: #fde68a;
  color: #b45309;
  text-decoration: none;
}

/* ---- Admin layout (no sidebar; content full width under sub-header) ---- */
.admin-layout {
  min-height: calc(100vh - 56px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* When no sub-header is present (e.g. some go pages), keep content area visible */
.site-header-wrapper + .admin-layout {
  min-height: calc(100vh - 56px);
}
.sub-header + .admin-layout {
  min-height: calc(100vh - 100px);
}

/* ---- Subsubnav: third-level bar below subnav (page-determined; not menu order) ---- */
.core-subsubnav {
  position: relative;
  /* Slightly below sub-header (1200) so subnav dropdowns render above this bar, but still above main content */
  z-index: 1100;
  background: var(--subsubnav-bg, var(--slate-100));
  border-bottom: 1px solid var(--subsubnav-border, var(--slate-200));
  padding: 0.12rem 0.75rem;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 34px;
  flex-shrink: 0;
}
.core-subsubnav-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.12rem 0.45rem;
  width: 100%;
  margin: 0;
}
.core-subsubnav-inner.core-subsubnav-has-title {
  justify-content: flex-start;
}
.core-subsubnav-title {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--slate-800);
  margin-right: 1.5rem;
  flex-shrink: 0;
}
.core-subsubnav-link {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.65rem;
  min-height: 38px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--subsubnav-link, var(--slate-600));
  text-decoration: none;
  border-radius: var(--radius, 6px);
  transition: background 0.15s ease, color 0.15s ease;
}
a.core-subsubnav-link:hover {
  background: var(--subsubnav-link-hover-bg, var(--slate-200));
  color: var(--subsubnav-link-hover, var(--slate-800));
  text-decoration: none;
}
.core-subsubnav-link.core-subsubnav-current {
  background: var(--subsubnav-current-bg, var(--slate-300));
  color: var(--subsubnav-current, var(--slate-900));
  font-weight: 600;
  cursor: default;
}
/* Subsubnav dropdown (e.g. Registration Settings) */
.core-subsubnav-dropdown {
  position: relative;
}
.core-subsubnav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.65rem;
  min-height: 38px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--subsubnav-link, var(--slate-600));
  background: none;
  border: none;
  border-radius: var(--radius, 6px);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  font-family: inherit;
}
.core-subsubnav-dropdown-trigger::after {
  content: '\25BE';
  font-size: 0.75em;
  margin-left: 0.35rem;
  opacity: 0.85;
}
.core-subsubnav-dropdown-trigger:hover {
  background: var(--subsubnav-link-hover-bg, var(--slate-200));
  color: var(--subsubnav-link-hover, var(--slate-800));
}
.core-subsubnav-dropdown-trigger.core-subsubnav-current {
  background: var(--subsubnav-current-bg, var(--slate-300));
  color: var(--subsubnav-current, var(--slate-900));
  font-weight: 600;
}
.core-subsubnav-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 12rem;
  margin-top: -4px;
  padding: 0.25rem 0;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius, 6px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  /* Above planning schedule (1100) and subsubnav bar (1200) so dropdown menus stay on top */
  z-index: 1300;
  display: none;
}
.core-subsubnav-dropdown:hover .core-subsubnav-dropdown-menu,
.core-subsubnav-dropdown:focus-within .core-subsubnav-dropdown-menu {
  display: block;
}
.core-subsubnav-dropdown-menu a {
  display: block;
  padding: 0.5rem 1rem;
  font-size: 0.9375rem;
  color: var(--slate-700);
  text-decoration: none;
  white-space: nowrap;
}
.core-subsubnav-dropdown-menu a:hover {
  background: var(--slate-100);
  color: var(--slate-900);
}
.core-subsubnav-dropdown-menu a.active {
  background: var(--slate-200);
  color: var(--slate-900);
  font-weight: 500;
}
.sub-header + .core-subsubnav + .admin-layout {
  min-height: calc(100vh - 144px);
}
/* Minimal top/bottom padding when subsubnav is present so more dashboard/content space is available */
.admin-content.admin-content--with-subsubnav {
  padding-top: 0.15rem;
  padding-bottom: 0.2rem;
}
.sub-header + .core-subsubnav + .admin-layout.module-list-page {
  min-height: calc(100vh - 144px);
}

.admin-content {
  max-width: var(--page-content-max, 1200px);
  width: var(--page-content-width, 100%);
  margin-left: var(--page-content-margin-x, auto);
  margin-right: var(--page-content-margin-x, auto);
  min-width: 0;
}

/* Invite user: two columns (email/role left, module access right) */
/* Invite user + module access: one framed card */
.invite-form-frame {
  margin-bottom: 1.5rem;
}
.invite-form-frame .invite-form-two-col {
  margin-bottom: 0;
}
.invite-form-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
  margin-bottom: 1.5rem;
}
.invite-form-block {
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.invite-form-frame .invite-form-right.invite-form-block {
  padding-left: 1.5rem;
  border-left: 1px solid var(--slate-200, #e2e8f0);
}
@media (max-width: 640px) {
  .invite-form-two-col {
    grid-template-columns: 1fr;
  }
  .invite-form-frame .invite-form-right.invite-form-block {
    padding-left: 0;
    border-left: none;
    padding-top: 1rem;
    border-top: 1px solid var(--slate-200, #e2e8f0);
  }
}

/* List pages: fill viewport height/width like transport dashboard (maximized use) */
.admin-layout.module-list-page {
  --page-content-max: none;
  --page-content-width: 99%;
  --page-content-padding-x: 1rem;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 56px);
}
.sub-header + .admin-layout.module-list-page {
  min-height: calc(100vh - 100px);
}
.admin-layout.module-list-page .admin-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: var(--page-content-max, none);
  width: var(--page-content-width, 99%);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--page-content-padding-x, 1rem);
  padding-right: var(--page-content-padding-x, 1rem);
  min-height: 0;
}
.admin-layout.module-list-page .admin-content.module-list-content {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.module-list-viewport {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding-bottom: 0.75rem;
  -webkit-overflow-scrolling: touch;
}
.admin-sidebar {
  width: 240px;
  background: var(--color-surface);
  padding: 1.25rem 1rem;
  border-right: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.admin-sidebar a {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  margin-bottom: 0.25rem;
  color: var(--slate-700);
  font-weight: 500;
  transition: background var(--transition), color var(--transition);
}
.admin-sidebar a:hover {
  background: var(--color-primary-pale);
  color: var(--color-primary-hover);
  text-decoration: none;
}

/* Highlight pending/flagged menu items. Keep this more specific than active-module and grouped-menu rules. */
.site-header nav a.menu-pending,
.site-header nav a.menu-pending.current-module,
.site-header-nav-modules a.menu-pending,
.site-header-nav-modules a.menu-pending.current-module,
.site-header-nav-modules .header-nav-group-dropdown a.menu-pending,
.site-header-nav-modules .header-nav-group-dropdown a.menu-pending.current-module,
.site-header nav .header-preview-disabled.menu-pending,
.admin-sidebar a.menu-pending {
  background: var(--warm-amber-bg);
  color: var(--warm-amber);
  font-weight: 600;
}
.site-header nav a.menu-pending:hover,
.site-header nav a.menu-pending.current-module:hover,
.site-header-nav-modules a.menu-pending:hover,
.site-header-nav-modules a.menu-pending.current-module:hover,
.site-header-nav-modules .header-nav-group-dropdown a.menu-pending:hover,
.site-header-nav-modules .header-nav-group-dropdown a.menu-pending.current-module:hover,
.admin-sidebar a.menu-pending:hover {
  background: #fde68a;
  color: #b45309;
  text-decoration: none;
}
.admin-sidebar a.menu-pending {
  color: var(--warm-amber);
}

/* ---- Buttons ---- */
.btn {
  display: inline-block;
  min-height: 44px;
  padding: 0.625rem 1.25rem;
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  font-family: inherit;
  transition: filter var(--transition), box-shadow var(--transition);
  box-sizing: border-box;
  line-height: 1.25;
}
.btn:hover {
  filter: brightness(1.05);
  box-shadow: 0 2px 8px var(--btn-shadow);
  text-decoration: none;
  color: var(--white);
}
.btn-secondary {
  background: var(--slate-200);
  color: var(--slate-700);
}
.btn-secondary:hover {
  background: var(--slate-300);
  color: var(--slate-800);
  box-shadow: var(--shadow-sm);
}
.btn.btn-busy {
  cursor: progress;
}
.btn .btn-inline-spinner {
  display: inline-block;
  width: 0.95rem;
  height: 0.95rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  margin-right: 0.45rem;
  vertical-align: -0.12rem;
  animation: btn-inline-spin 0.7s linear infinite;
}
@keyframes btn-inline-spin {
  to { transform: rotate(360deg); }
}
.btn-sm {
  min-height: 36px;
  padding: 0.4rem 0.75rem;
  font-size: 0.875rem;
}

/* Alias for registration and other pages that use btn-small */
.btn-small {
  min-height: 36px;
  padding: 0.4rem 0.75rem;
  font-size: 0.875rem;
}

/* Core page tabs: in-content switcher for core modules with multiple pages (e.g. Planning: Plans | Schedule).
   Current page is not a link/button so it’s clear you’re already there. */
.core-page-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-border-light, #e2e8f0);
  align-items: center;
}
.core-page-tabs .btn {
  min-height: 40px;
}
.core-page-tabs-current {
  font-weight: 600;
  padding: 0.5rem 0.875rem;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  cursor: default;
  border: none;
  font-size: 1rem;
  font-family: inherit;
  border-radius: var(--radius-sm, 4px);
  background: var(--core-page-tabs-current-bg);
  color: var(--core-page-tabs-current-color);
}

/* Remove / delete buttons: muted text style, hover to error red. Use theme vars. */
.btn-remove,
.btn-remove-type,
.btn-danger,
.reg-list .reg-list-actions .reg-del-cat,
.reg-list .reg-list-actions .reg-del-wf,
.reg-list .reg-list-actions .reg-del-phase,
.reg-list .reg-list-actions .reg-ct-del,
.remove-item {
  background: transparent;
  color: var(--slate-600);
  border: 1px solid transparent;
  min-height: 36px;
  padding: 0.35rem 0.6rem;
  font-size: 0.875rem;
  cursor: pointer;
  border-radius: var(--radius);
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn-remove:hover,
.btn-remove-type:hover,
.btn-danger:hover,
.reg-list .reg-list-actions .reg-del-cat:hover,
.reg-list .reg-list-actions .reg-del-wf:hover,
.reg-list .reg-list-actions .reg-del-phase:hover,
.reg-list .reg-list-actions .reg-ct-del:hover,
.remove-item:hover {
  color: var(--error-red, #b91c1c);
  background: var(--error-bg, #fef2f2);
  border-color: var(--slate-200);
}

/* Modal overlay (e.g. new field settings) */
/* Page modals must sit above sub-header, subnav dropdowns, and menu dropdowns (header). Use --z-modal (3000) or higher. */
.element-edit-modal {
  z-index: var(--z-modal, 3000);
}
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 3000);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.4);
  overflow-y: auto;
}
.modal-overlay.modal-fx-enabled,
.super-dash-modal-overlay.modal-fx-enabled,
.translation-edit-modal-overlay.modal-fx-enabled,
.super-form-modal-overlay.modal-fx-enabled,
.chat-conversation-modal.modal-fx-enabled {
  opacity: 0;
  transition: opacity var(--modal-fx-duration, 150ms) var(--modal-fx-ease, cubic-bezier(0.2, 0.7, 0.2, 1));
}
.modal-overlay.modal-fx-enabled.modal-fx-open,
.super-dash-modal-overlay.modal-fx-enabled.modal-fx-open,
.translation-edit-modal-overlay.modal-fx-enabled.modal-fx-open,
.super-form-modal-overlay.modal-fx-enabled.modal-fx-open,
.chat-conversation-modal.modal-fx-enabled.modal-fx-open {
  opacity: 1;
}
.modal-overlay.modal-fx-enabled .modal-card,
.super-dash-modal-overlay.modal-fx-enabled .super-dash-modal,
.translation-edit-modal-overlay.modal-fx-enabled .translation-edit-modal,
.super-form-modal-overlay.modal-fx-enabled .super-form-modal,
.chat-conversation-modal.modal-fx-enabled .chat-conversation-modal-content {
  opacity: 0;
  transform: translateY(var(--modal-fx-offset-y, 8px));
  transition:
    opacity var(--modal-fx-duration, 150ms) var(--modal-fx-ease, cubic-bezier(0.2, 0.7, 0.2, 1)),
    transform var(--modal-fx-duration, 150ms) var(--modal-fx-ease, cubic-bezier(0.2, 0.7, 0.2, 1));
}
.modal-overlay.modal-fx-enabled.modal-fx-open .modal-card,
.super-dash-modal-overlay.modal-fx-enabled.modal-fx-open .super-dash-modal,
.translation-edit-modal-overlay.modal-fx-enabled.modal-fx-open .translation-edit-modal,
.super-form-modal-overlay.modal-fx-enabled.modal-fx-open .super-form-modal,
.chat-conversation-modal.modal-fx-enabled.modal-fx-open .chat-conversation-modal-content {
  opacity: 1;
  transform: translateY(0);
}
.modal-overlay[hidden],
.contact-followup-modal[hidden],
.maintenance-assign-modal[hidden],
.community-current-announcement-edit-modal[hidden],
.communication-moderate-modal[hidden],
.meeting-scheduling-overlay[hidden],
.meeting-room-pick-overlay[hidden],
.reg-phase-settings-modal[hidden],
.contact-inbox-sr-email-editor-overlay[hidden],
.module-email-defaults-modal[hidden],
.lang-email-translate-modal-overlay[hidden],
.community-meeting-invite-modal[hidden],
.internal-contact-inbox-modal[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .modal-overlay.modal-fx-enabled,
  .super-dash-modal-overlay.modal-fx-enabled,
  .translation-edit-modal-overlay.modal-fx-enabled,
  .super-form-modal-overlay.modal-fx-enabled,
  .chat-conversation-modal.modal-fx-enabled,
  .modal-overlay.modal-fx-enabled .modal-card,
  .super-dash-modal-overlay.modal-fx-enabled .super-dash-modal,
  .translation-edit-modal-overlay.modal-fx-enabled .translation-edit-modal,
  .super-form-modal-overlay.modal-fx-enabled .super-form-modal,
  .chat-conversation-modal.modal-fx-enabled .chat-conversation-modal-content {
    transition-duration: 1ms !important;
    transform: none !important;
  }
}

/* Super Dash: internal contact inbox — near full-width modal + detail grid */
.internal-contact-inbox-modal.modal-overlay {
  align-items: flex-start;
  justify-content: center;
  padding: 0.35rem 0.5rem;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
}
.internal-contact-inbox-modal .internal-contact-inbox-modal-card {
  width: calc(100vw - 1rem);
  max-width: none;
  height: auto;
  max-height: none;
  margin: 0.35rem auto 1rem;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: visible;
  background: var(--color-surface, #fff);
  border-radius: var(--radius-lg, 14px);
  border: 1px solid var(--slate-200, #e2e8f0);
  box-shadow: var(--shadow-md, 0 10px 15px rgba(0, 0, 0, 0.1));
}
.internal-contact-inbox-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--slate-200);
  flex-shrink: 0;
}
.internal-contact-inbox-modal-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--slate-900);
  flex: 1;
  line-height: 1.35;
}
.internal-contact-inbox-modal-body {
  flex: 0 1 auto;
  min-height: 0;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(200px, min(32vw, 380px)) minmax(0, 1fr);
  gap: 0;
  align-items: start;
}
@media (max-width: 900px) {
  .internal-contact-inbox-modal-body {
    grid-template-columns: 1fr;
  }
}
.internal-contact-inbox-detail-scroll {
  min-height: 0;
  min-width: 0;
  overflow: visible;
  overflow-x: hidden;
  padding: 1rem 1rem 1rem 1.25rem;
  border-right: 1px solid var(--slate-100);
  background: var(--slate-50, #f8fafc);
}
@media (max-width: 900px) {
  .internal-contact-inbox-detail-scroll {
    border-right: none;
    border-bottom: 1px solid var(--slate-100);
    max-height: none;
    overflow: visible;
  }
}
.internal-contact-inbox-detail-heading {
  margin: 0 0 0.75rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--slate-500);
}
.internal-contact-inbox-detail-rows {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.internal-contact-inbox-detail-row {
  display: grid;
  grid-template-columns: minmax(140px, 38%) 1fr;
  gap: 0.5rem 0.75rem;
  align-items: baseline;
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius, 8px);
  background: var(--color-surface, #fff);
  border: 1px solid var(--slate-200);
}
.internal-contact-inbox-detail-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--slate-600);
}
.internal-contact-inbox-detail-value {
  font-size: 0.875rem;
  color: var(--slate-900);
  word-break: break-word;
  overflow-wrap: anywhere;
}
.internal-contact-inbox-compose {
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 0.75rem 1rem 1rem;
  overflow: visible;
  overflow-x: hidden;
}
/* Same compose row pattern as Contact inbox (inline label + flex field) */
.internal-contact-inbox-modal .contact-inbox-compose-dialog .contact-compose-field-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  margin-bottom: 0.35rem;
  min-width: 0;
  max-width: 100%;
}
.internal-contact-inbox-modal .contact-inbox-compose-dialog .contact-compose-field-row.contact-compose-subject-row {
  align-items: center;
}
.internal-contact-inbox-modal .contact-inbox-compose-dialog .contact-compose-inline-label {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.42rem 0 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--slate-600, #64748b);
  white-space: nowrap;
}
.internal-contact-inbox-modal .contact-inbox-compose-dialog .contact-compose-subject-row .contact-compose-inline-label,
.internal-contact-inbox-modal .contact-inbox-compose-dialog .contact-compose-body-row .contact-compose-inline-label {
  padding-top: 0.5rem;
}
.internal-contact-inbox-modal .contact-inbox-compose-dialog .contact-compose-subject-row .contact-compose-subject-input {
  flex: 1 1 200px;
  min-width: 0;
  font-size: 1rem;
  min-height: 44px;
}
.internal-contact-inbox-modal .contact-inbox-compose-dialog .contact-compose-editor-stack {
  flex: none;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  overflow: visible;
  min-height: 0;
}
.internal-contact-inbox-modal .contact-inbox-compose-dialog .contact-compose-body-row {
  align-items: flex-start;
  flex: none;
  min-height: 0;
  min-width: 0;
}
.internal-contact-inbox-modal .contact-inbox-compose-dialog .internal-contact-inbox-insert-row select.internal-contact-inbox-insert {
  flex: 1 1 200px;
  min-width: 0;
  max-width: 100%;
  font-size: 1rem;
  min-height: 44px;
}
.internal-contact-inbox-insert-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  align-items: center;
  margin: 0.35rem 0 0.15rem;
  flex-shrink: 0;
  min-width: 0;
}
.internal-contact-inbox-compose-form {
  flex: 0 1 auto;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: visible;
  gap: 0.25rem;
}
.internal-contact-inbox-modal .contact-program-email-editor {
  max-width: none !important;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: hidden;
  flex: none;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.internal-contact-inbox-modal .contact-pe-toolbar {
  max-width: 100%;
  box-sizing: border-box;
}
.internal-contact-inbox-compose-footer {
  flex-shrink: 0;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--slate-200, #e2e8f0);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}
.internal-contact-inbox-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.internal-contact-inbox-list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 320px;
  overflow-y: auto;
}
.internal-contact-inbox-li {
  margin-bottom: 0.35rem;
}
.internal-contact-inbox-status {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
}
.internal-contact-inbox-detail-error,
.internal-contact-inbox-detail-empty {
  font-size: 0.875rem;
  color: var(--slate-600);
  margin: 0;
}

/* Meeting room list debug (core-meeting-form.js): must paint above --z-modal; docks inside open meeting modal / detail panel when anchored */
#meeting-room-list-debug-panel.meeting-room-list-debug-panel {
  box-sizing: border-box;
}
#meeting-room-list-debug-panel:not(.meeting-room-list-debug-panel--anchored) {
  z-index: calc(var(--z-modal, 3000) + 200);
  pointer-events: auto;
}
#meeting-room-list-debug-panel.meeting-room-list-debug-panel--anchored:not(.meeting-room-list-debug-panel--anchored-detail) {
  z-index: 50;
  width: 100%;
  align-self: stretch;
}
#meeting-room-list-debug-panel.meeting-room-list-debug-panel--anchored-detail {
  z-index: 40;
}

/* Community: meeting invite rows (pending RSVP) */
.community-meeting-invites-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.community-meeting-invites-list li {
  margin: 0.35rem 0;
}
.community-meeting-invite-open {
  box-sizing: border-box;
}
.community-meeting-invite-modal .modal-card {
  max-width: 440px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
}
.community-meeting-invite-detail-row {
  margin: 0.35rem 0;
  font-size: 0.9rem;
}
.community-meeting-invite-detail-label {
  font-weight: 600;
  color: var(--slate-600, #475569);
  margin-right: 0.35rem;
}
.community-meeting-invite-status.error {
  color: var(--red-600, #dc2626);
}
.community-meeting-invite-status.success {
  color: var(--green-700, #15803d);
}

/* Module email editor: in-body translation progress (contenteditable off while running) */
.lang-email-translate-status {
  padding: 0.75rem 1rem;
  max-width: 100%;
}
.lang-email-translate-status-title {
  font-weight: 600;
  margin: 0 0 0.5rem;
  color: var(--slate-800, #1e293b);
}
.lang-email-translate-status-log {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--slate-700, #334155);
  font-size: 0.9rem;
  line-height: 1.45;
}
.lang-email-translate-status-log li {
  margin: 0.25rem 0;
}

/* Contact detail: two-column layout (main form + sidebar) */
.contact-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16.5rem, 21rem);
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 960px) {
  .contact-detail-layout {
    grid-template-columns: 1fr;
  }
  .contact-detail-side {
    position: static;
  }
}
.contact-detail-main {
  min-width: 0;
}
.contact-detail-side {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  align-self: start;
}
@media (min-width: 961px) {
  .contact-detail-side {
    position: sticky;
    top: 0.75rem;
  }
}
.contact-side-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.contact-side-actions .btn {
  flex: 1 1 auto;
  min-width: 7.5rem;
  justify-content: center;
}
.contact-detail-side .section-card {
  margin-bottom: 0;
}
.contact-touch-section--sidebar {
  padding: 0.6rem 0.7rem;
}
.contact-touch-expand-btn {
  width: 100%;
  margin: 0;
  min-height: 2.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 2px 10px rgba(15, 23, 42, 0.1);
}
.contact-touch-form-panel {
  margin: 0.65rem 0 0;
}
.contact-touch-history {
  margin-top: 0.5rem;
  max-height: 11rem;
}
.contact-detail-side .contact-touch-section-form.form-compact {
  max-width: none;
  grid-template-columns: 1fr;
  gap: 0.45rem;
}
@media (min-width: 720px) {
  .contact-detail-side .contact-touch-section-form.form-compact {
    grid-template-columns: 1fr;
  }
  .contact-detail-side .contact-touch-section-form .form-row-touch-wide,
  .contact-detail-side .contact-touch-section-form .form-row-touch-submit {
    grid-column: 1;
  }
}
.contact-program-email-log {
  max-height: 18rem;
}
.contact-detail-program-card h3 {
  font-size: 1.05rem;
}

/* Contact module: Follow-ups due dashboard widget */
.contact-followups-due-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.contact-followups-due-item {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 0.35rem;
  padding: 0.5rem 0.65rem;
  text-align: left;
  font: inherit;
  line-height: 1.35;
  color: inherit;
  background: var(--surface, #fff);
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: 6px;
  cursor: pointer;
}
.contact-followups-due-item:hover {
  border-color: var(--slate-300, #cbd5e1);
  background: var(--slate-50, #f8fafc);
}
.contact-followups-due-item-name {
  font-weight: 600;
}
.contact-followups-due-item-meta {
  font-weight: 400;
  color: var(--slate-600, #475569);
  font-size: 0.875rem;
}

/* Registration process settings: phase canvas (vertical flow + cards) */
.reg-phase-canvas-wrap {
  position: relative;
  max-width: 42rem;
  margin-top: 0.5rem;
}
.reg-phase-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.reg-phase-between {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.15rem 0;
  flex-shrink: 0;
}
.reg-phase-between-shaft {
  width: 2px;
  height: 1.25rem;
  background: var(--slate-300, #cbd5e1);
}
.reg-phase-between-head {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid var(--slate-400, #94a3b8);
  margin-top: -1px;
}
.reg-phase-card {
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: var(--radius, 8px);
  background: var(--color-surface, #fff);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.reg-phase-card[draggable="true"] {
  cursor: grab;
}
.reg-phase-card[draggable="true"]:active {
  cursor: grabbing;
}
.reg-phase-card[draggable="true"] .reg-phase-card-inner {
  cursor: auto;
}
.reg-phase-card[draggable="true"] .reg-phase-title-inp-summary {
  cursor: text;
}
.reg-phase-card[draggable="true"] .reg-phase-summary-bar .btn {
  cursor: pointer;
}
.reg-phase-card > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.85rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--slate-800, #1e293b);
}
.reg-phase-card > summary.reg-phase-summary-bar {
  cursor: default;
  flex-wrap: nowrap;
  align-items: stretch;
}
.reg-phase-title-inp-summary {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: var(--radius-sm, 6px);
  font-size: 1rem;
  font-weight: 600;
  color: var(--slate-800, #1e293b);
  background: var(--color-surface, #fff);
}
.reg-phase-title-inp-summary:focus {
  outline: none;
  border-color: var(--focus-border, var(--slate-400));
  box-shadow: var(--focus-ring, 0 0 0 2px rgba(59, 130, 246, 0.25));
}
.reg-phase-summary-bar .reg-phase-drag {
  align-self: center;
}
.reg-phase-summary-bar .reg-phase-del-phase-icon {
  flex-shrink: 0;
  align-self: center;
}
.reg-phase-card > summary::-webkit-details-marker {
  display: none;
}
.reg-phase-card > summary::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--slate-500);
  border-bottom: 2px solid var(--slate-500);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
  margin-right: 0.15rem;
}
.reg-phase-card[open] > summary::before {
  transform: rotate(45deg);
}
.reg-phase-drag {
  cursor: grab;
  color: var(--slate-400);
  user-select: none;
  padding: 0 0.15rem;
}
.reg-phase-drag:active {
  cursor: grabbing;
}
.reg-phase-card-inner {
  padding: 0 0.85rem 0.85rem;
  border-top: 1px solid var(--slate-100, #f1f5f9);
}
.reg-phase-subsection {
  margin-top: 1rem;
}
.reg-phase-subsection h4 {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--slate-500, #64748b);
}
.reg-phase-slot-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: var(--radius-sm, 6px);
  background: #fff;
  min-height: 2.5rem;
}
.reg-phase-slot-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.65rem;
  border-bottom: 1px solid var(--slate-200, #e2e8f0);
  font-size: 0.875rem;
}
.reg-phase-slot-list li:last-child {
  border-bottom: none;
}
.reg-phase-slot-list li .reg-phase-slot-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.5rem;
  min-width: 0;
}
.reg-phase-slot-list li .reg-phase-slot-label {
  color: var(--slate-900, #0f172a);
  font-weight: 600;
}
.reg-phase-slot-list li .reg-phase-slot-meta {
  color: var(--slate-600, #475569);
  font-weight: 400;
  font-size: 0.8125rem;
}
.reg-phase-approval-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}
.reg-phase-approval-value {
  margin: 0;
  flex: 1;
  min-width: 10rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--slate-900, #0f172a);
  padding: 0.5rem 0.75rem;
  background: var(--slate-100, #f1f5f9);
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: var(--radius-sm, 6px);
}
/* Schools: category/type/school phases — compact rows, icon buttons */
.schools-tier-phases-section .schools-tier-phases-canvas {
  max-width: 36rem;
}
.schools-tier-phases-section .schools-phases-add-tier {
  margin-top: 0.35rem;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.35rem;
  align-items: stretch;
  max-width: 36rem;
}
.schools-tier-phases-section .schools-phase-new-input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--slate-300, #cbd5e1);
  border-radius: var(--radius-sm, 6px);
  font-size: 1rem;
}
.schools-tier-phases-section details.schools-tier-phase-row {
  display: block;
}
.schools-tier-phases-section details.schools-tier-phase-row > .reg-phase-summary-bar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.5rem;
}
.schools-tier-phases-section details.schools-tier-phase-row > .reg-phase-summary-bar > .reg-phase-drag {
  flex-shrink: 0;
}
.schools-tier-phases-section .schools-phase-title-input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0.35rem 0.45rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  font-size: 1rem;
  font-weight: 600;
  color: var(--slate-800, #1e293b);
}
.schools-tier-phases-section .schools-phase-title-input:hover {
  border-color: var(--slate-200, #e2e8f0);
  background: var(--slate-50, #f8fafc);
}
.schools-tier-phases-section .schools-phase-title-input:focus {
  outline: none;
  border-color: var(--focus-border, var(--slate-400));
  box-shadow: var(--focus-ring, 0 0 0 2px rgba(59, 130, 246, 0.25));
  background: var(--color-surface, #fff);
}
.schools-tier-phases-section .schools-phase-icon-btn {
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.5rem;
  font-size: 1.25rem;
  line-height: 1;
  font-weight: 600;
}
.schools-tier-phases-section .schools-phase-add-btn {
  font-weight: 700;
}
.schools-school-phases-compact .schools-phase-add-select {
  flex: 1;
  min-width: 0;
  min-height: 44px;
}
.schools-school-phases-compact .schools-school-phase-add {
  max-width: 36rem;
  margin-top: 0.35rem;
}

.reg-phase-email-wrap-hint,
.reg-phase-email-sig-hint {
  margin: 0.5rem 0;
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-sm, 6px);
  font-size: 0.8125rem;
  color: var(--slate-600, #475569);
  background: rgba(59, 130, 246, 0.08);
  border: 1px dashed rgba(59, 130, 246, 0.35);
}
.reg-phase-email-preview-frame {
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-sm, 6px);
  padding: 1rem;
  background: #fff;
  max-height: min(70vh, 28rem);
  overflow: auto;
  font-size: 0.875rem;
}
.reg-phase-canvas-status {
  font-size: 0.875rem;
  color: var(--slate-500);
  margin-top: 0.5rem;
  min-height: 1.25rem;
}
.reg-phase-settings-modal .modal-card {
  max-width: min(100%, 36rem);
  width: 100%;
  max-height: min(90vh, 720px);
  overflow-y: auto;
}
.reg-phase-settings-modal--wide .modal-card {
  max-width: min(100%, 48rem);
}

/* Meetings: multi-user scheduling grid */
.meeting-scheduling-overlay.modal-overlay {
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  box-sizing: border-box;
  max-height: 100vh;
  overflow: hidden;
}
.meeting-scheduling-card.modal-card {
  display: flex;
  flex-direction: column;
  max-width: min(100%, 96rem);
  width: min(100%, calc(100vw - 1.5rem));
  max-height: calc(100vh - 1.5rem);
  margin: 0;
  padding: 1rem 1.25rem;
  overflow: hidden;
  box-sizing: border-box;
}
.meeting-scheduling-title {
  flex-shrink: 0;
  margin: 0 0 0.75rem 0;
  font-size: 1.125rem;
}
.meeting-scheduling-sticky {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-surface, #fff);
  padding-bottom: 0.65rem;
  margin: 0 0 0.5rem;
  border-bottom: 1px solid var(--slate-200, #e2e8f0);
}
.meeting-sched-invite-top-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem;
}
@media (min-width: 640px) {
  .meeting-sched-invite-top-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }
}
.meeting-sched-proposed-slots-list {
  margin: 0.5rem 0;
}
.meeting-sched-proposed-slots-ul {
  list-style: none;
  padding: 0;
  margin: 0.25rem 0 0;
}
.meeting-sched-proposed-slots-ul li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  margin: 0.25rem 0;
  font-size: 0.875rem;
}
.meeting-scheduling-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 0;
}
.meeting-scheduling-grid {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.8125rem;
}
.meeting-scheduling-grid th,
.meeting-scheduling-grid td {
  border: 1px solid var(--slate-200, #e2e8f0);
  padding: 0.25rem 0.35rem;
  text-align: center;
  min-width: 3.25rem;
}
.meeting-scheduling-grid th.meeting-scheduling-time-col {
  text-align: right;
  white-space: nowrap;
  background: var(--slate-50, #f8fafc);
}
.meeting-scheduling-grid td.meeting-scheduling-busy {
  background: var(--slate-200, #e2e8f0);
  color: var(--slate-500, #64748b);
}
.meeting-scheduling-grid tr.meeting-scheduling-row-all-free td:not(.meeting-scheduling-time-col) {
  background: rgba(34, 197, 94, 0.18);
  cursor: pointer;
}
.meeting-scheduling-grid tr.meeting-scheduling-row-all-free .meeting-scheduling-time-col {
  font-weight: 600;
}
.meeting-scheduling-actions {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.25rem;
}
.meeting-scheduling-free-cell {
  white-space: nowrap;
  vertical-align: middle;
}
.meeting-sched-free-mark {
  margin-right: 0.15rem;
}
.meeting-sched-row-rooms-btn {
  display: none;
  margin-left: 0.25rem;
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  min-height: 36px;
  align-items: center;
}
.meeting-sched-row-rooms-btn.is-visible {
  display: inline-flex;
}
.meeting-room-pick-overlay.modal-overlay {
  align-items: flex-start;
  padding: 1rem;
  overflow: auto;
}
.meeting-room-pick-card.modal-card {
  max-width: min(100%, 28rem);
  width: 100%;
  margin: 2vh auto;
  padding: 1rem 1.25rem;
}
.meeting-room-pick-title {
  margin: 0 0 0.75rem 0;
  font-size: 1.125rem;
}
.meeting-room-pick-body {
  max-height: min(60vh, 22rem);
  overflow-y: auto;
  margin-bottom: 1rem;
}
.meeting-room-pick-item {
  display: block;
  width: 100%;
  margin-bottom: 0.35rem;
  text-align: left;
}
.meeting-room-pick-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
.core-cal-tags-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}
.core-cal-meeting-room-chip-host:empty {
  display: none;
}

/* Room type + room selects: one row; width follows longest option (field-sizing where supported) */
.form-row-full.core-cal-meeting-room-filters-row {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 1rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-bottom: 0.35rem;
}
.facility-room-lookup-wrap .form-row-full.core-cal-meeting-room-filters-row {
  grid-column: 1 / -1;
}
.core-cal-meeting-room-filter-cell {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
}
.core-cal-meeting-room-filter-cell > label {
  margin: 0;
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--slate-700, #334155);
  line-height: 1.25;
}
.core-cal-meeting-room-filters-row select.form-input.core-cal-meeting-room-select-fit {
  width: max-content;
  max-width: 100%;
  min-width: 0;
}
@supports (field-sizing: content) {
  .core-cal-meeting-room-filters-row select.form-input.core-cal-meeting-room-select-fit {
    field-sizing: content;
    width: auto;
    max-width: 100%;
  }
}

/* Beat calendar.php / meetings.php inline `.core-cal-event-form-body .form-row-full { display: block }` */
.core-cal-event-form-body .form-row-full.core-cal-meeting-room-filters-row {
  display: flex !important;
}

.meeting-scheduling-avail-row {
  margin: 0.5rem 0 0.75rem 0;
}

/* Core calendar meeting form: date, start, end, duration — flex so fields stay adjacent (no 1fr gap) */
.core-cal-meeting-datetime-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 0.5rem 0.65rem;
  margin-bottom: 0.65rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
@media (max-width: 36rem) {
  .core-cal-meeting-dt-cell--date {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
  }
  .core-cal-meeting-dt-cell--duration {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
  }
  .core-cal-meeting-dt-cell--start,
  .core-cal-meeting-dt-cell--end {
    flex: 1 1 calc(50% - 0.35rem);
    min-width: 0;
    max-width: 100%;
  }
  .core-cal-meeting-dt-cell--date .core-cal-meeting-dt-input,
  .core-cal-meeting-dt-cell--date input[type="date"] {
    width: 100%;
    max-width: 11.5rem;
    field-sizing: fixed;
  }
  .core-cal-meeting-dt-cell--start select.form-input,
  .core-cal-meeting-dt-cell--end select.form-input {
    width: 100%;
    max-width: 11.5rem;
    field-sizing: fixed;
  }
}
.core-cal-meeting-dt-cell {
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
/* Date + duration: intrinsic width; start/end sized by selects */
.core-cal-meeting-dt-cell--date,
.core-cal-meeting-dt-cell--duration {
  width: max-content;
  max-width: 100%;
}
.core-cal-meeting-dt-cell--start,
.core-cal-meeting-dt-cell--end {
  min-width: 0;
}
.core-cal-meeting-dt-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--slate-700, #334155);
  line-height: 1.25;
  max-width: 6.75rem;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  margin-bottom: 0.3rem;
}
.core-cal-meeting-dt-input {
  min-height: 44px;
  min-width: 0;
  width: 100%;
  max-width: 9.25rem;
  font-size: 1rem;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
  box-sizing: border-box;
}
.core-cal-meeting-dt-cell--date .core-cal-meeting-dt-input,
.core-cal-meeting-dt-cell--date input[type="date"].core-cal-meeting-dt-input {
  width: auto;
  max-width: 100%;
  min-width: 0;
  field-sizing: content;
}
.core-cal-meeting-dt-cell--duration select.form-input.core-cal-meeting-dt-input {
  width: auto;
  max-width: 100%;
  min-width: 0;
  field-sizing: content;
}
.core-cal-meeting-dt-cell--end select.form-input {
  min-width: 7.25rem;
  max-width: none;
  width: 100%;
}

/* Meeting modal: title + core color picker button on one row */
.core-cal-meeting-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.4rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.core-cal-meeting-title-field {
  flex: 1 1 12rem;
  min-width: 0;
}
.core-cal-meeting-title-field label {
  display: block;
  margin-bottom: 0.2rem;
  font-weight: 500;
  color: var(--slate-700, #334155);
  font-size: 0.875rem;
}
.core-cal-meeting-title-field .form-input {
  width: 100%;
  box-sizing: border-box;
}
.core-cal-meeting-color-cell {
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
}
.core-cal-meeting-color-cell .core-cal-ev-color-btn {
  min-width: 44px;
  min-height: 44px;
  padding: 0.35rem 0.6rem;
  box-sizing: border-box;
}

/* Task/event modal: modal title + meeting color (Meetings / calendar “Add meeting”) */
.core-cal-task-form-header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 0 0 0.65rem 0;
}
.core-cal-task-form-header-row #core-cal-task-form-title {
  margin: 0;
  flex: 1 1 auto;
  font-size: 1.125rem;
  line-height: 1.3;
}
.core-cal-meeting-modal-color-slot {
  flex-shrink: 0;
  align-items: center;
  margin-left: auto;
}
.core-cal-meeting-modal-color-slot .core-cal-ev-color-btn {
  min-width: 44px;
  min-height: 44px;
  padding: 0.35rem 0.6rem;
  box-sizing: border-box;
}

/* Core: large circular color trigger (calendar / meetings / tasks / community) */
button.core-cal-color-trigger {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  min-width: 3rem;
  min-height: 3rem;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  box-sizing: border-box;
  cursor: pointer;
  vertical-align: middle;
  flex-shrink: 0;
  background-color: transparent;
  background-image: repeating-conic-gradient(#f1f5f9 0% 25%, #e2e8f0 0% 50%);
  background-size: 10px 10px;
  background-origin: border-box;
  border: 3px solid var(--slate-700, #334155);
  box-shadow: none;
}
button.core-cal-color-trigger.core-cal-color-trigger--filled {
  background-image: none;
}
button.core-cal-color-trigger:focus-visible {
  outline: 2px solid var(--color-primary, #2563eb);
  outline-offset: 2px;
}

/* Calendar detail modal (#core-cal-modal): title + color chip in header (same row as add meeting / task form) */
.core-cal-modal-content > .core-cal-task-form-header-row.core-cal-detail-modal-header-row #core-cal-modal-title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.125rem;
  line-height: 1.3;
}
#core-cal-modal-color-slot {
  display: flex;
  align-items: center;
}
#core-cal-modal-color-slot .core-cal-detail-color-btn {
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  min-height: 3rem;
}

/* Edit user event modal: title + color in header */
.core-cal-event-form-content > .core-cal-task-form-header-row.core-cal-detail-modal-header-row #core-cal-event-form-modal-title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.125rem;
  line-height: 1.3;
}
#core-cal-event-form-color-slot {
  display: flex;
  align-items: center;
}

/* Meeting form: internal users | external guests */
/* Must win over .core-cal-event-form-body .form-row-full { display: block } on meetings/calendar modals */
.core-cal-event-form-body .form-compact > .form-row-full.core-cal-attendees-two-col {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.25rem;
  align-items: start;
  margin-bottom: 0.5rem;
}
.core-cal-attendees-two-col {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.25rem;
  align-items: start;
  margin-bottom: 0.5rem;
}
.core-cal-attendees-col {
  min-width: 0;
}
@media (max-width: 28rem) {
  .core-cal-event-form-body .form-compact > .form-row-full.core-cal-attendees-two-col,
  .core-cal-attendees-two-col {
    grid-template-columns: 1fr;
  }
}
.core-cal-attendees-col-heading {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--slate-700, #334155);
  margin: 0 0 0.45rem 0;
}
.core-cal-attendees-internal .core-cal-tags-wrap .core-cal-members-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
  min-height: 1.5rem;
}
.core-cal-attendees-internal .core-cal-members-select {
  width: 100%;
  max-width: 100%;
}

/* Internal attendee: type-to-filter list (add / edit meeting) */
.core-cal-member-combobox {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-top: 0.15rem;
}
.core-cal-member-combobox-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--slate-700, #334155);
  margin-bottom: 0.25rem;
}
.core-cal-member-combobox .core-cal-member-combobox-input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-size: 1rem;
  min-height: 44px;
}
.core-cal-member-suggestions {
  margin-top: 0.35rem;
  max-height: 11rem;
  overflow-y: auto;
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: var(--radius, 6px);
  background: var(--color-surface, #fff);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}
.core-cal-member-suggestions[hidden] {
  display: none !important;
}
.core-cal-member-suggestions-list {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
}
.core-cal-member-suggestion-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.75rem;
  border: none;
  background: transparent;
  font-size: 0.9375rem;
  cursor: pointer;
  min-height: 44px;
  box-sizing: border-box;
  color: var(--slate-800, #1e293b);
}
.core-cal-member-suggestion-item:hover,
.core-cal-member-suggestion-item.core-cal-member-suggestion-item--active {
  background: var(--slate-100, #f1f5f9);
}

.core-cal-attendees-external-name-row .form-input,
.core-cal-attendees-external-email-row .form-input,
.core-cal-attendees-external-email-row .core-cal-external-email-input {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

/* Add meeting / add task shell: wider than default calendar event modal */
#core-cal-task-form-modal .core-cal-modal-content.core-cal-event-form-content {
  max-width: min(54rem, 96vw);
  width: 94%;
}
.core-cal-members-list .core-cal-member-avail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1em;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
}
.core-cal-members-list .core-cal-member-avail--ok {
  color: var(--green-600, #16a34a);
}
.core-cal-members-list .core-cal-member-avail--busy {
  color: var(--red-600, #dc2626);
}
.core-cal-members-list .core-cal-member-avail--loading {
  color: var(--slate-400, #94a3b8);
  font-weight: 400;
}
/* Guest fields: single column inside external cell (avoid 10em+1fr fighting narrow column) */
.core-cal-attendees-external .form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.25rem 0;
  margin-bottom: 0.35rem;
  align-items: stretch;
}
.core-cal-attendees-external .form-row label {
  margin-bottom: 0.15rem;
}

.meeting-scheduling-toolbar {
  margin-bottom: 0.75rem;
}
.meeting-scheduling-toolbar-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem 1rem;
}
@media (min-width: 640px) {
  .meeting-scheduling-toolbar-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.meeting-scheduling-field-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--slate-700, #334155);
  margin-bottom: 0.35rem;
}
.meeting-scheduling-range-inputs,
.meeting-scheduling-wh-inputs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
}
.meeting-scheduling-range-inputs .form-input[type="date"],
.meeting-scheduling-wh-inputs .form-input.core-time-input {
  min-height: 44px;
  font-size: 1rem;
}
.meeting-scheduling-range-sep {
  color: var(--slate-500, #64748b);
  user-select: none;
}
.meeting-scheduling-status.is-err {
  color: var(--error-red, #b91c1c);
}
.meeting-scheduling-day-nav {
  display: flex;
  align-items: stretch;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}
.meeting-scheduling-day-nav .meeting-sched-day-prev,
.meeting-scheduling-day-nav .meeting-sched-day-next {
  flex-shrink: 0;
  min-width: 2.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-size: 1.25rem;
  line-height: 1;
}
.meeting-scheduling-day-strip-wrap {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: var(--radius, 6px);
  background: var(--slate-50, #f8fafc);
}
.meeting-scheduling-day-strip {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.25rem;
  padding: 0.35rem;
  min-height: calc(44px + 0.7rem);
  align-items: center;
}
.meeting-scheduling-day-chip {
  flex-shrink: 0;
  border: 1px solid var(--slate-200, #e2e8f0);
  background: #fff;
  border-radius: var(--radius-sm, 4px);
  padding: 0.4rem 0.55rem;
  font-size: 0.8125rem;
  cursor: pointer;
  color: var(--slate-800, #1e293b);
  min-height: 44px;
}
.meeting-scheduling-day-chip:hover {
  border-color: var(--slate-300, #cbd5e1);
  background: var(--slate-50, #f8fafc);
}
.meeting-scheduling-day-chip.is-active {
  border-color: var(--color-primary, #2563eb);
  background: rgba(37, 99, 235, 0.08);
  font-weight: 600;
}
.meeting-scheduling-grid-host {
  margin-bottom: 0.25rem;
}

/* Communication → Moderate feed: modal + date filters */
.communication-moderate-modal.modal-overlay {
  z-index: var(--z-modal, 3000);
}
.communication-moderate-modal .modal-card {
  max-width: 36rem;
  width: min(100%, 36rem);
  max-height: min(92vh, 840px);
  overflow-y: auto;
  position: relative;
}
.communication-moderate-modal .communication-moderate-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 1;
}
.feed-list-filters.form-compact input[type="date"] {
  min-height: 44px;
  font-size: 1rem;
}
.feed-list-pinned-tag {
  display: inline-block;
  margin-right: 0.35rem;
  padding: 0.12rem 0.45rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 0.25rem;
  background: var(--slate-200, #e2e8f0);
  color: var(--slate-800, #1e293b);
  vertical-align: middle;
}

/* Current announcements widget: compact rows (title, then date; full text in modal) */
.community-current-announcements-widget .community-announcements-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.community-current-announcements-list > li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  margin: 0.35rem 0 0;
  padding: 0.5rem 0.65rem;
  background: var(--slate-50, #f8fafc);
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: 0.375rem;
  font-size: 0.9rem;
}
.community-current-announcements-list > li:first-child {
  margin-top: 0;
}
.community-current-announcements-list > li.announcement-urgent {
  border-left: 4px solid var(--red-600, #dc2626);
}
.community-current-announcements-list > li.announcement-high {
  border-left: 4px solid var(--amber-500, #f59e0b);
}
.community-current-announcements-widget .community-announcement-title {
  display: block;
  font-weight: 600;
  line-height: 1.3;
  color: var(--slate-900, #0f172a);
}
.community-current-announcements-widget .community-announcement-meta {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--slate-600, #475569);
  white-space: normal;
}
.community-current-announcements-widget .community-announcement-row--editable {
  cursor: pointer;
}
.community-current-announcements-widget .community-announcement-row--editable:focus {
  outline: 2px solid var(--focus-ring, #3b82f6);
  outline-offset: 2px;
}
.community-current-announcement-edit-modal .modal-card {
  max-width: 32rem;
  width: min(100%, 32rem);
  max-height: min(90vh, 720px);
  overflow-y: auto;
}

/* Accounting: account-code autocomplete dropdown (widgets/forms) */
.accounting-ac-dropdown[hidden] { display: none !important; }
.accounting-ac-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 1500; /* above inputs, below modals */
  border: 1px solid var(--slate-200, #e5e7eb);
  background: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
  overflow: hidden;
  max-height: 240px;
  overflow-y: auto;
}
.accounting-ac-item {
  width: 100%;
  display: flex;
  gap: 0.5rem;
  justify-content: flex-start;
  align-items: baseline;
  padding: 0.45rem 0.55rem;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.accounting-ac-item:hover,
.accounting-ac-item.is-active {
  background: var(--slate-50, #f8fafc);
}
.accounting-ac-code {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--slate-900, #0f172a);
  min-width: 4.2rem;
}
.accounting-ac-name {
  color: var(--slate-700, #334155);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.accounting-ac-loading,
.accounting-ac-empty {
  padding: 0.55rem;
  color: var(--slate-500, #64748b);
  font-size: 0.9rem;
}
.modal-card {
  background: var(--color-surface);
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 1.25rem 1.5rem;
  width: 100%;
  color: var(--slate-800, #1e293b);
  font-family: inherit;
}
/* Facilities settings: confirm delete / bulk booking — centered dialog, not full viewport width */
.facilities-settings-confirm-modal .modal-card {
  max-width: 28rem;
  width: min(100%, 28rem);
}
.community-post-edit-overlay .modal-card {
  max-width: 36rem;
  width: min(100%, 36rem);
}
.hospitality-room-edit-modal .hospitality-room-edit-card {
  max-width: 32rem;
  width: min(100%, 32rem);
}
.community-post-edit-editor {
  min-height: 6rem;
}
.modal-card h3 { margin: 0 0 0.75rem; font-size: 1.125rem; }
.modal-intro { margin: 0 0 1rem; color: var(--slate-600); font-size: 0.9375rem; }
.form-new-field-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.form-new-field-row input { flex: 1; min-width: 10rem; }
.form-help { font-size: 0.8125rem; color: var(--slate-500); margin-bottom: 0.5rem; }

/* Admin users list */
.admin-users-content .table-wrap {
  overflow-x: auto;
  margin-top: 1rem;
}
.admin-users-table .admin-users-actions {
  white-space: nowrap;
}
.admin-users-table th .admin-users-th-sort {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  padding: 0.1em 0;
}
.admin-users-table th .admin-users-th-sort:hover {
  text-decoration: underline;
}
.admin-users-table th .admin-users-th-empty {
  cursor: default;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.admin-users-filter-row th {
  padding: 0.5rem 0.75rem;
  vertical-align: middle;
  background: var(--slate-100);
  font-weight: normal;
}
.admin-users-filter-row .admin-users-filter-input.form-input,
.admin-users-filter-row .admin-users-filter-select.form-input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.admin-users-filter-form .admin-users-actions button {
  white-space: nowrap;
}
.admin-users-reset-form {
  display: inline-block;
  margin-left: 0.5rem;
}
/* Admin → Connecting API: text/url fields use global .form-input; full width in grid rows */
#connecting-api-form .connecting-api-form-control {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
#connecting-api-form .connecting-api-key-field {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
.admin-user-edit-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.4);
  z-index: 3000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem 1rem;
  overflow-y: auto;
}
.admin-user-edit-panel {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 1.5rem;
  max-width: 56rem;
  width: 100%;
  margin: auto;
}
.admin-user-edit-inline-header {
  margin-bottom: 1rem;
}
.admin-user-edit-inline-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
}
.admin-user-edit-inline .admin-user-edit-form {
  margin-top: 0;
}
.admin-users-row-clickable:hover {
  background: var(--slate-100);
}
.data tbody tr.module-row-clickable {
  cursor: pointer;
}
.data tbody tr.module-row-clickable:hover {
  background: var(--slate-50, #f8fafc);
}
/* Admin users list: core-style thead (sort + filter per column) */
.admin-users-table.data-table thead th {
  background: var(--slate-100, #f1f5f9);
  vertical-align: top;
  padding: 0.5rem 0.5rem;
  font-weight: 600;
}
.admin-users-th-stack {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: flex-start;
  min-width: 0;
}
.admin-users-th-sort {
  font-size: 0.8125rem;
  line-height: 1.35;
  font-weight: 600;
}
.admin-users-th-sort-pair {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.65rem;
  align-items: center;
}
.admin-users-th-sort .admin-users-th-sort {
  font-weight: 600;
}
.admin-users-th-filter .form-input,
.admin-users-th-filter .admin-users-filter-select {
  width: 100%;
  max-width: 12rem;
  min-width: 0;
  padding: 0.35rem 0.5rem;
  font-size: 0.875rem;
}
.admin-users-th-name .admin-users-th-filter .form-input {
  max-width: 100%;
}
.admin-users-th-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--slate-700);
}
.admin-users-th-actions {
  text-align: center;
}
.admin-users-th-empty {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--slate-500);
}
/* Lock out / Unlock: Unlock button in red so it stands out */
.admin-user-unlock-btn {
  background: var(--error-red, #dc2626);
  color: #fff;
  border: 1px solid var(--error-red, #dc2626);
}
.admin-user-unlock-btn:hover {
  background: var(--error-red, #b91c1c);
  color: #fff;
  border-color: var(--error-red, #b91c1c);
}
.admin-users-departments,
.admin-users-module-access {
  max-width: 280px;
  font-size: 0.9rem;
  color: var(--slate-600);
}
.admin-users-dept-line,
.admin-users-module-line {
  display: block;
  margin-bottom: 0.25rem;
}
.admin-users-dept-line:last-child,
.admin-users-module-line:last-child {
  margin-bottom: 0;
}

/* Admin user edit */
.admin-user-edit-content {
  padding: 1.5rem;
  max-width: 56rem;
}
.admin-user-edit-title {
  margin-bottom: 0.5rem;
}
.admin-user-edit-content .back-link {
  display: inline-block;
  margin-bottom: 1.25rem;
  color: var(--slate-600);
  font-size: 0.9rem;
}
.admin-user-edit-content .back-link:hover {
  color: var(--color-primary);
}
.admin-user-edit-form .form-section {
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-border-light);
}
.admin-user-edit-form .form-section:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}
.admin-user-edit-form .form-section-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--slate-700);
  margin: 0 0 0.75rem;
}
/* Inverted surface so text stays readable in all site themes (dark theme remaps --slate-800 to a light color). */
.admin-user-edit-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.75rem 1.25rem;
  max-width: min(90vw, 28rem);
  text-align: center;
  background: var(--color-text);
  color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  font-size: 0.9375rem;
  font-weight: 500;
  z-index: calc(var(--z-modal, 3000) + 50);
  transition: opacity 0.2s ease;
}
.admin-user-edit-toast.admin-user-edit-toast--error {
  background: var(--error-bg, #fee2e2);
  color: var(--error-red, #b91c1c);
  border-color: var(--error-red, #dc2626);
}
.admin-user-edit-toast[hidden] {
  display: none;
}
/* Module access: use two columns on wide modals / full page */
.admin-user-edit-form #module-access-section .admin-user-edit-module-help {
  grid-column: 1 / -1;
}
.admin-user-edit-form #module-access-section .admin-user-edit-module-matrix {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  width: 100%;
  grid-column: 1 / -1;
}
@media (min-width: 768px) {
  .admin-user-edit-form #module-access-section .admin-user-edit-module-matrix {
    grid-template-columns: 1fr 1fr;
  }
}
.admin-user-edit-form #module-access-section .admin-user-edit-module-fieldset {
  min-width: 0;
}
.form-row-inline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.form-row-inline input,
.form-row-inline select {
  min-width: 0;
}
/* Departments: financial responsibility; single line per row: name | date | remove */
.form-section-departments {
  width: 100%;
  grid-column: 1 / -1;
}
.form-section-departments .form-row-coord-dept {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-bottom: 0.75rem;
  min-height: 44px;
}
.form-section-departments .form-label-dept-name {
  margin: 0;
  font-weight: 500;
  color: var(--slate-700);
  font-size: 0.9375rem;
  min-width: 8rem;
  flex-shrink: 0;
}
.form-section-departments .form-dept-date.form-input {
  width: 10rem;
  min-width: 8.5rem;
  max-width: 10rem;
}
.form-section-departments .btn-remove-dept {
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .form-section-departments .form-row-coord-dept {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .form-section-departments .form-label-dept-name {
    min-width: 0;
  }
  .form-section-departments .form-dept-date.form-input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
}
/* Add department row: modern style, same as rest of site */
.form-add-dept-wrap {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border-light);
}
.form-add-dept-modern .form-add-dept-row {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) auto auto;
  gap: 1rem 1.25rem;
  align-items: end;
}
.form-add-dept-modern .form-add-dept-group .form-label {
  display: block;
  margin-bottom: 0.375rem;
  font-weight: 500;
  color: var(--slate-700);
  font-size: 0.9375rem;
}
.form-add-dept-modern .form-add-dept-group.form-add-dept-actions .form-label-invisible {
  margin-bottom: 0.375rem;
  display: block;
  font-size: 0.9375rem;
  visibility: hidden;
}
.form-add-dept-modern .form-add-dept-select {
  width: 100%;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: inherit;
  box-sizing: border-box;
  background: #fff;
  color: var(--color-text);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-add-dept-modern .form-add-dept-date {
  width: 10rem;
  min-width: 8.5rem;
  max-width: 10rem;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: inherit;
  box-sizing: border-box;
  background: #fff;
  color: var(--color-text);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-add-dept-modern .form-add-dept-select:focus,
.form-add-dept-modern .form-add-dept-date:focus {
  outline: none;
  border-color: var(--focus-border);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.form-add-dept-modern .form-add-dept-select:hover,
.form-add-dept-modern .form-add-dept-date:hover {
  border-color: var(--slate-400);
}
@media (max-width: 640px) {
  .form-add-dept-modern .form-add-dept-row {
    grid-template-columns: 1fr;
  }
}
.form-dept-add-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}
.form-dept-add-field .form-label-above {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--slate-700);
  margin: 0;
}
.form-dept-add-field select,
.form-dept-add-field .input-select,
.form-dept-add-field input[type="date"],
.form-dept-add-field .input-date {
  width: 100%;
  min-width: 0;
}

/* Admin user edit: Add department – modern card style */
.form-add-dept-wrap {
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  background: var(--slate-50, #f8fafc);
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: var(--radius, 6px);
}
.form-add-dept-modern .form-add-dept-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.5rem;
  align-items: end;
}
@media (max-width: 640px) {
  .form-add-dept-modern .form-add-dept-row {
    grid-template-columns: 1fr;
  }
}
.form-add-dept-modern .form-cell {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}
.form-add-dept-modern .form-cell .form-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--slate-700);
  margin: 0;
}
.form-add-dept-modern .form-input {
  width: 100%;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: inherit;
  box-sizing: border-box;
  background: #fff;
  color: var(--color-text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-add-dept-modern .form-input:focus {
  outline: none;
  border-color: var(--focus-border, #3b82f6);
  box-shadow: 0 0 0 3px var(--focus-ring, rgba(59, 130, 246, 0.2));
}
.form-add-dept-modern .form-input:hover {
  border-color: var(--slate-400);
}

.btn-google {
  background: #fff;
  color: #3c4043;
  border: 1px solid #dadce0;
}
.btn-google:hover {
  background: #f8f9fa;
  border-color: #dadce0;
  color: #202124;
}

/* ---- Forms: theme colors and strong contrast so inputs stand out ---- */
/* Form containers: stronger tinted background so white input fields pop */
form.section-card,
.section-card:has(form) {
  background: var(--form-field-area-bg, var(--slate-100));
  border-color: var(--form-field-area-border, var(--color-border, #cbd5e1));
}
@supports not (border-color: color-mix(in srgb, red, blue)) {
  form.section-card,
  .section-card:has(form) {
    border-color: var(--color-border, #cbd5e1);
  }
}
/* Form canvases: keep a tinted container behind bright input cells across pages, modules, and modals. */
.form-compact,
.modal-card form,
.cal-modal-content form,
.super-list-options-modal-body form {
  background: var(--form-field-area-bg, var(--slate-100));
  border: 1px solid var(--form-field-area-border, var(--color-border, #cbd5e1));
  border-radius: var(--radius, 10px);
}
.form-compact,
.modal-card form,
.cal-modal-content form,
.super-list-options-modal-body form {
  padding: 0.7rem 0.85rem;
}
@supports not (border-color: color-mix(in srgb, red, blue)) {
  .form-compact,
  .modal-card form,
  .cal-modal-content form,
  .super-list-options-modal-body form {
    border-color: var(--color-border, #cbd5e1);
  }
}
/* All form inputs: theme surface background, visible border */
form input[type="text"],
form input[type="email"],
form input[type="tel"],
form input[type="number"],
form input[type="date"],
form input[type="datetime-local"],
form input[type="password"],
form input[type="url"],
form select,
form textarea {
  background: var(--form-field-bg, var(--color-surface, #fff));
  color: var(--color-text, #1e293b);
  border: 1px solid var(--form-input-border, var(--color-border, #94a3b8));
  box-shadow: var(--form-input-shadow, 0 1px 2px rgba(15, 23, 42, 0.07));
}

/* .form-input and .form-control: same modern control look (tables, modals, AJAX rows, .form-compact). Use .form-input in new markup; .form-control is styled for legacy/core parity. */
input.form-input,
select.form-input,
textarea.form-input,
input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
select.form-control,
textarea.form-control {
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--form-input-border, var(--slate-400));
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: inherit;
  color: var(--color-text, #1e293b);
  background: var(--form-field-bg, var(--color-surface, #fff));
  transition: border-color var(--transition), box-shadow var(--transition);
  box-sizing: border-box;
  box-shadow: var(--form-input-shadow, 0 1px 2px rgba(15, 23, 42, 0.07));
}
textarea.form-input,
textarea.form-control {
  min-height: 72px;
  resize: vertical;
}
input.form-input:focus,
select.form-input:focus,
textarea.form-input:focus,
input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):focus,
select.form-control:focus,
textarea.form-control:focus {
  outline: none;
  border-color: var(--focus-border);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
input.form-input:hover,
select.form-input:hover,
textarea.form-input:hover,
input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):hover,
select.form-control:hover,
textarea.form-control:hover {
  border-color: var(--form-input-border-hover, var(--slate-500));
}

/* Meeting detail drawer + add-meeting modal: use theme form-field tokens (tinted body, bright fields). */
.meeting-detail-panel .meeting-detail-body {
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--color-primary-pale, #eff6ff) 65%, var(--form-field-area-bg, var(--color-bg))) 0%,
    var(--form-field-area-bg, var(--color-bg)) 42%,
    color-mix(in srgb, var(--color-primary-pale, #eff6ff) 35%, var(--form-field-area-bg, var(--color-bg))) 100%
  );
}
@supports not (background: color-mix(in srgb, red, blue)) {
  .meeting-detail-panel .meeting-detail-body {
    background: var(--form-field-area-bg, var(--color-bg));
  }
}
.meeting-detail-panel .meeting-detail-header {
  /* Header surface is set in meetings.php (gradient + left accent); keep bottom border only if no inline override */
  background: transparent;
  border-bottom: none;
}
.meeting-detail-panel .meeting-detail-tasks-column {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-primary-pale, #eff6ff) 40%, var(--form-field-area-bg, var(--slate-100))) 0%,
    var(--form-field-area-bg, var(--slate-100)) 100%
  );
  border: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--form-input-border, var(--slate-300)));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-primary) 10%, transparent);
}
@supports not (border-color: color-mix(in srgb, red, blue)) {
  .meeting-detail-panel .meeting-detail-tasks-column {
    background: var(--form-field-area-bg, var(--slate-100));
    border: 1px solid var(--color-primary-light, var(--slate-300));
    box-shadow: none;
  }
}
.meeting-detail-panel input.form-input,
.meeting-detail-panel select.form-input,
.meeting-detail-panel textarea.form-input,
.meeting-detail-panel input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
.meeting-detail-panel select.form-control,
.meeting-detail-panel textarea.form-control {
  background: var(--form-field-bg, #fff);
  border-width: var(--form-field-modal-input-border-width, 2px);
  border-style: solid;
  border-color: var(--form-input-border);
}
.meeting-detail-panel input.form-input:hover,
.meeting-detail-panel select.form-input:hover,
.meeting-detail-panel textarea.form-input:hover,
.meeting-detail-panel input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):hover,
.meeting-detail-panel select.form-control:hover,
.meeting-detail-panel textarea.form-control:hover {
  border-width: var(--form-field-modal-input-border-width, 2px);
  border-color: var(--form-input-border-hover);
}
.meeting-detail-panel input.form-input:focus,
.meeting-detail-panel select.form-input:focus,
.meeting-detail-panel textarea.form-input:focus,
.meeting-detail-panel input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):focus,
.meeting-detail-panel select.form-control:focus,
.meeting-detail-panel textarea.form-control:focus {
  border-width: var(--form-field-modal-input-border-width, 2px);
}

#core-cal-task-form-modal .core-cal-event-form-body,
#core-cal-event-form-modal .core-cal-event-form-body {
  background: var(--form-field-area-bg, var(--color-bg));
  border-radius: var(--radius-sm, 6px);
  padding: 0.65rem 0.5rem;
  box-sizing: border-box;
}
#core-cal-task-form-modal .core-cal-event-form-body input.form-input,
#core-cal-task-form-modal .core-cal-event-form-body select.form-input,
#core-cal-task-form-modal .core-cal-event-form-body textarea.form-input,
#core-cal-task-form-modal .core-cal-event-form-body input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
#core-cal-task-form-modal .core-cal-event-form-body select.form-control,
#core-cal-task-form-modal .core-cal-event-form-body textarea.form-control,
#core-cal-event-form-modal .core-cal-event-form-body input.form-input,
#core-cal-event-form-modal .core-cal-event-form-body select.form-input,
#core-cal-event-form-modal .core-cal-event-form-body textarea.form-input,
#core-cal-event-form-modal .core-cal-event-form-body input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
#core-cal-event-form-modal .core-cal-event-form-body select.form-control,
#core-cal-event-form-modal .core-cal-event-form-body textarea.form-control {
  background: var(--form-field-bg, #fff);
  border-width: var(--form-field-modal-input-border-width, 2px);
  border-style: solid;
  border-color: var(--form-input-border);
}
#core-cal-task-form-modal .core-cal-event-form-body input.form-input:hover,
#core-cal-task-form-modal .core-cal-event-form-body select.form-input:hover,
#core-cal-task-form-modal .core-cal-event-form-body textarea.form-input:hover,
#core-cal-task-form-modal .core-cal-event-form-body input.form-control:hover,
#core-cal-task-form-modal .core-cal-event-form-body select.form-control:hover,
#core-cal-task-form-modal .core-cal-event-form-body textarea.form-control:hover,
#core-cal-event-form-modal .core-cal-event-form-body input.form-input:hover,
#core-cal-event-form-modal .core-cal-event-form-body select.form-input:hover,
#core-cal-event-form-modal .core-cal-event-form-body textarea.form-input:hover,
#core-cal-event-form-modal .core-cal-event-form-body input.form-control:hover,
#core-cal-event-form-modal .core-cal-event-form-body select.form-control:hover,
#core-cal-event-form-modal .core-cal-event-form-body textarea.form-control:hover {
  border-width: var(--form-field-modal-input-border-width, 2px);
  border-color: var(--form-input-border-hover);
}
#core-cal-task-form-modal .core-cal-event-form-body input.form-input:focus,
#core-cal-task-form-modal .core-cal-event-form-body select.form-input:focus,
#core-cal-task-form-modal .core-cal-event-form-body textarea.form-input:focus,
#core-cal-task-form-modal .core-cal-event-form-body input.form-control:focus,
#core-cal-task-form-modal .core-cal-event-form-body select.form-control:focus,
#core-cal-task-form-modal .core-cal-event-form-body textarea.form-control:focus,
#core-cal-event-form-modal .core-cal-event-form-body input.form-input:focus,
#core-cal-event-form-modal .core-cal-event-form-body select.form-input:focus,
#core-cal-event-form-modal .core-cal-event-form-body textarea.form-input:focus,
#core-cal-event-form-modal .core-cal-event-form-body input.form-control:focus,
#core-cal-event-form-modal .core-cal-event-form-body select.form-control:focus,
#core-cal-event-form-modal .core-cal-event-form-body textarea.form-control:focus {
  border-width: var(--form-field-modal-input-border-width, 2px);
}

/* Admin → Import translations: monospace JSON/CSV blocks */
.language-import-code.form-input {
  width: 100%;
  max-width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
.language-import-site-lang {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.language-import-site-lang select.form-input {
  min-width: 10rem;
  max-width: 24rem;
}

/* Admin → Site settings (admin/settings.php) */
#settings-form .admin-settings-control.form-input {
  max-width: 20rem;
  width: 100%;
  box-sizing: border-box;
}
#settings-form textarea.admin-settings-textarea.form-input {
  width: 100%;
  max-width: 32rem;
  min-height: 88px;
  box-sizing: border-box;
}

/* Admin → Language cleanup */
.lang-cleanup-filter-form {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}
.lang-cleanup-search.form-input {
  min-width: 16rem;
  max-width: 100%;
  box-sizing: border-box;
}
.lang-cleanup-control.form-input {
  min-width: 8rem;
  box-sizing: border-box;
}
.lang-cleanup-confirm-input.form-input {
  min-width: 12rem;
  max-width: 20rem;
  box-sizing: border-box;
}

/* Admin → Languages: paste JSON from AI (monospace, full width; chrome from .form-input) */
textarea.form-input.lang-ai-json-textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.875rem;
  min-height: 8rem;
}

/* Database export table picker (distribution clean install) */
.database-export-modal-card {
  max-width: 42rem;
  width: min(96vw, 42rem);
}
.database-export-group {
  font-weight: 600;
  margin: 0.85rem 0 0.35rem;
  font-size: 0.95rem;
  color: var(--slate-700, #334155);
}
.database-export-table-row {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin: 0.35rem 0;
  padding: 0.35rem 0.25rem;
  border-radius: 6px;
  cursor: pointer;
}
.database-export-table-row:hover {
  background: var(--slate-50, #f8fafc);
}
.database-export-table-row input[type="checkbox"] {
  margin-top: 0.35rem;
  flex-shrink: 0;
}
.database-export-table-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.database-export-table-title {
  font-weight: 500;
  line-height: 1.35;
}
.database-export-table-name {
  font-size: 0.8rem;
  color: var(--slate-500, #64748b);
  word-break: break-all;
}
.database-export-table-desc {
  font-size: 0.85rem;
  line-height: 1.35;
}
.database-export-badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  margin-left: 0.25rem;
  vertical-align: middle;
}
.database-export-badge-site {
  color: var(--red-700, #b91c1c);
  background: var(--red-50, #fef2f2);
}
.database-export-badge-helpful {
  color: var(--green-800, #166534);
  background: var(--green-50, #f0fdf4);
}

/* Admin: reusable control widths (backup, GPS, notifications, toasts, etc.) */
.admin-form-control-medium.form-input {
  max-width: 20rem;
  width: 100%;
  box-sizing: border-box;
}
.admin-form-control-narrow.form-input {
  max-width: 13.75rem;
  width: 100%;
  box-sizing: border-box;
}
.admin-form-control-xs.form-input {
  max-width: 7.5rem;
  box-sizing: border-box;
}
.admin-form-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}
.features-coalesce-seconds.form-input {
  max-width: 4.5rem;
  box-sizing: border-box;
}
.admin-api-key-readonly.form-input {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
}
.theme-var-value-wrap .theme-editor-var-text.form-input {
  min-width: 6rem;
  max-width: 100%;
  box-sizing: border-box;
}

/* Admin → Redirect rules: JSON config cell */
.redirect-rules-table input.config-json.form-input {
  width: 100%;
  max-width: 20rem;
  box-sizing: border-box;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.875rem;
}

/* Admin → Notification toasts: add-button row inputs */
.toast-buttons-add .toast-button-lang-input.form-input {
  width: 100%;
  max-width: 12rem;
  box-sizing: border-box;
}
.toast-buttons-add .toast-button-key-input.form-input {
  width: 10rem;
  max-width: 100%;
  box-sizing: border-box;
}
.toast-translation-lang-input.form-input {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Super Dash widget settings (core/super_dash_widgets.php): controls in table cells */
#sdw-widget-table td {
  vertical-align: top;
}
#sdw-widget-table td .form-input {
  width: 100%;
  max-width: 14rem;
}
#sdw-widget-table .sdw-sort-order.form-input {
  max-width: 6rem;
  min-width: 4.5rem;
}
#sdw-widget-table .sdw-module-checks:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-bottom: 0.35rem;
  align-items: center;
}
#sdw-widget-table .sdw-module-checks[hidden] {
  display: none !important;
}
#sdw-widget-table .sdw-allowed-hint:not([hidden]) {
  display: block;
  font-size: 0.8125rem;
  color: var(--slate-500);
  margin-top: 0.25rem;
}
#sdw-widget-table .sdw-allowed-hint[hidden] {
  display: none !important;
}
#sdw-widget-table .form-checkbox {
  margin: 0;
  white-space: nowrap;
}
#sdw-widget-table .sdw-allow-all-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.5rem 0;
  font-weight: 500;
  color: var(--slate-700);
  font-size: 0.875rem;
}
#sdw-widget-table .sdw-picker-db-hint-cell {
  vertical-align: middle;
  color: var(--slate-500);
  font-size: 0.875rem;
  line-height: 1.4;
}
/* Actions column: keep Save + Remove on one row; column grows with content */
#sdw-widget-table th.sdw-widget-settings-actions-col,
#sdw-widget-table td.sdw-widget-settings-actions-cell {
  width: 1%;
  min-width: 12rem;
  white-space: nowrap;
  vertical-align: middle;
}
#sdw-widget-table .sdw-widget-settings-actions-inline {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
}
#sdw-widget-table .sdw-widget-settings-actions-inline .btn {
  flex-shrink: 0;
}

.form-group {
  margin-bottom: 1.25rem;
}
.form-group label {
  display: block;
  margin-bottom: 0.375rem;
  font-weight: 500;
  color: var(--color-text, #334155);
  font-size: 0.9375rem;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  max-width: 400px;
  min-height: 44px;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--color-border, #cbd5e1);
  border-radius: var(--radius);
  font-size: 16px;
  font-family: inherit;
  color: var(--color-text, #1e293b);
  background: var(--color-surface, #fff);
  transition: border-color var(--transition), box-shadow var(--transition);
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.form-group textarea {
  min-height: 100px;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--focus-border, #60a5fa);
  box-shadow: 0 0 0 3px var(--focus-ring, rgba(59, 130, 246, 0.25));
}
.form-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.form-inline label { margin-right: 0.25rem; }

/* Moderate feed (Communications): reason input – modern, touch-friendly */
.moderate-feed-form .form-group {
  margin-bottom: 0.75rem;
}
.moderate-feed-form .moderate-reason-input {
  width: 100%;
  max-width: 24rem;
  min-height: 44px;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--color-border, #cbd5e1);
  border-radius: var(--radius, 0.375rem);
  font-size: 16px;
  font-family: inherit;
  color: var(--color-text, #1e293b);
  background: var(--color-surface, #fff);
  box-sizing: border-box;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.moderate-feed-form .moderate-reason-input::placeholder {
  color: var(--slate-400, #94a3b8);
}
.moderate-feed-form .moderate-reason-input:hover {
  border-color: var(--slate-400, #94a3b8);
}
.moderate-feed-form .moderate-reason-input:focus {
  outline: none;
  border-color: var(--focus-border, #60a5fa);
  box-shadow: 0 0 0 3px var(--focus-ring, rgba(59, 130, 246, 0.25));
}

/* Coordinators page: modern inputs, add-department row with labels above */
.coordinators-add-form .form-group label,
.coordinators-add-form .coord-add-dept-label {
  display: block;
  margin-bottom: 0.375rem;
  font-weight: 500;
  color: var(--slate-700);
  font-size: 0.9375rem;
}
.coordinators-add-form .form-group select,
.coordinators-add-form .coord-dept-select,
.coordinators-add-form .coord-dept-date-input {
  min-height: 44px;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--form-input-border, var(--slate-300));
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: inherit;
  box-sizing: border-box;
  background: var(--form-field-bg, var(--color-surface, #fff));
  transition: border-color var(--transition), box-shadow var(--transition);
  width: 100%;
  max-width: 100%;
}
.coordinators-add-form .form-group select:focus,
.coordinators-add-form .coord-dept-select:focus,
.coordinators-add-form .coord-dept-date-input:focus {
  outline: none;
  border-color: var(--focus-border);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.coordinators-add-form .coord-add-dept-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 1.25rem 1.5rem;
  align-items: end;
  margin-top: 0.5rem;
}
.coordinators-add-form .coord-add-dept-remove-wrap {
  display: flex;
  align-items: flex-end;
  margin-bottom: 0;
}
.coordinators-add-form .coord-add-dept-row .coord-add-dept-remove {
  margin-bottom: 0;
  align-self: end;
}
.coordinators-add-form .coord-add-dept-cell {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.coordinators-add-form .coord-add-dept-cell label {
  margin: 0;
  font-weight: 500;
  color: var(--slate-700);
  font-size: 0.9375rem;
}
.coordinators-add-form #coord-dept-rows .coord-add-dept-row {
  margin-top: 0.75rem;
}
@media (max-width: 640px) {
  .coordinators-add-form .coord-add-dept-row {
    grid-template-columns: 1fr;
  }
  .coordinators-add-form .coord-add-dept-row .coord-add-dept-remove {
    align-self: start;
  }
}

/* Coordinator edit: label-above layout + modern inputs (no default browser styling).
   Site-wide: new form fields should use the same pattern: border, padding, focus ring, hover, appearance: none for selects. */
.coord-edit-form .coord-dept-assign-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 1rem 1.25rem;
  align-items: end;
  margin-bottom: 0.75rem;
}
.coord-edit-form .coord-new-dept-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem 1.25rem;
  align-items: end;
  margin-bottom: 0.75rem;
}
.coord-edit-form .coord-dept-cell {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.coord-edit-form .coord-dept-cell label {
  margin: 0;
  font-weight: 500;
  color: var(--slate-700);
  font-size: 0.9375rem;
}
/* Modern feel: all coordinator selects and date inputs – no default browser styling */
.coord-edit-form .coord-dept-date,
.coord-edit-form .coord-dept-select,
.coord-edit-form .coord-new-dept-select {
  min-height: 44px;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--form-input-border, var(--slate-300));
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: inherit;
  box-sizing: border-box;
  background: var(--form-field-bg, var(--color-surface, #fff));
  transition: border-color var(--transition), box-shadow var(--transition);
  width: 100%;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23475569' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.25rem;
}
.coord-edit-form .coord-dept-date {
  background-image: none;
  padding-right: 0.875rem;
}
.coord-edit-form .coord-dept-date:focus,
.coord-edit-form .coord-dept-select:focus,
.coord-edit-form .coord-new-dept-select:focus {
  outline: none;
  border-color: var(--focus-border);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.coord-edit-form .coord-dept-date:hover,
.coord-edit-form .coord-dept-select:hover,
.coord-edit-form .coord-new-dept-select:hover {
  border-color: var(--form-input-border-hover, var(--slate-400));
}
.coord-edit-form .coord-dept-remove {
  align-self: end;
  margin-bottom: 0;
  flex-shrink: 0;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius);
  background: var(--slate-100);
  color: var(--slate-700);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.coord-edit-form .coord-dept-remove:hover {
  background: var(--slate-200);
  border-color: var(--slate-400);
}
@media (max-width: 640px) {
  .coord-edit-form .coord-dept-assign-row,
  .coord-edit-form .coord-new-dept-row {
    grid-template-columns: 1fr;
  }
  .coord-edit-form .coord-dept-remove {
    align-self: start;
  }
}

/* Coordinator inline edit (expand in list): compressed form, date min-width, container holds all content */
.coord-edit-form-compact .coord-dept-assign-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
}
.coord-edit-form-compact .coord-dept-assign-row,
.coord-edit-form-compact .coord-new-dept-row {
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
}
.coord-edit-form-compact .coord-dept-cell label.coord-term-label {
  font-size: 0.875rem;
}
.coord-edit-form .coord-date-min {
  min-width: 8.5rem;
  width: auto;
  max-width: 100%;
}
.coord-inline-edit-wrap {
  padding: 0.75rem 1rem;
  max-width: 36rem;
  overflow: visible;
}
.coord-inline-edit-wrap .coord-assignments-list {
  overflow: visible;
  margin-bottom: 0.5rem;
}
/* Close button at bottom of edit form – prominent */
.coord-edit-form-actions {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: flex-end;
}
.coord-edit-form .coord-edit-close-btn {
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  font-size: 1rem;
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  box-shadow: 0 2px 6px var(--btn-shadow);
  transition: filter var(--transition), box-shadow var(--transition);
}
.coord-edit-form .coord-edit-close-btn:hover {
  filter: brightness(1.08);
  box-shadow: 0 4px 12px var(--btn-shadow);
  color: #fff;
}

/* Vehicle inline edit: actions bar and status message */
.vehicle-inline-edit-wrap .vehicle-inline-edit-actions {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: flex-end;
}
/* Vehicle edit form: two columns – labels left, inputs right */
.vehicle-edit-form {
  display: block;
  max-width: 42rem;
}
.vehicle-edit-form .form-row,
.vehicle-edit-form .form-row-full {
  display: grid;
  grid-template-columns: minmax(8rem, 10rem) 1fr;
  gap: 0.5rem 1rem;
  align-items: center;
  margin-bottom: 0.75rem;
}
.vehicle-edit-form .form-row label:first-child,
.vehicle-edit-form .form-row .form-label {
  margin: 0;
  font-weight: 500;
  color: var(--slate-700);
  font-size: 0.9375rem;
  text-align: right;
}
.vehicle-edit-form .vehicle-edit-input,
.vehicle-edit-form .vehicle-edit-select,
.vehicle-edit-form input:not([type="checkbox"]),
.vehicle-edit-form select {
  width: 100%;
  min-width: 14rem;
  max-width: 100%;
  min-height: 44px;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--form-input-border, var(--slate-300));
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: inherit;
  box-sizing: border-box;
  background: var(--form-field-bg, var(--color-surface, #fff));
  transition: border-color var(--transition), box-shadow var(--transition);
}
.vehicle-edit-form .vehicle-edit-date,
.vehicle-edit-form input[type="date"] {
  min-width: 10rem;
  width: auto;
  max-width: 20rem;
}
.vehicle-edit-form input:focus,
.vehicle-edit-form select:focus {
  outline: none;
  border-color: var(--focus-border);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.vehicle-edit-form input:hover,
.vehicle-edit-form select:hover {
  border-color: var(--form-input-border-hover, var(--slate-400));
}
.vehicle-edit-form .vehicle-edit-select,
.vehicle-edit-form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23475569' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.25rem;
}
.vehicle-edit-form .form-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  min-width: 0;
}
.vehicle-edit-form .form-checkbox input[type="checkbox"] {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--color-primary);
  border-radius: 4px;
  border: 1px solid var(--slate-400);
  appearance: none;
  -webkit-appearance: none;
  background: var(--form-field-bg, var(--color-surface, #fff));
  transition: border-color var(--transition), background-color var(--transition), box-shadow var(--transition);
}
.vehicle-edit-form .form-checkbox input[type="checkbox"]:hover {
  border-color: var(--slate-500);
}
.vehicle-edit-form .form-checkbox input[type="checkbox"]:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.vehicle-edit-form .form-checkbox input[type="checkbox"]:checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8l3 3 7-7'/%3E%3C/svg%3E");
  background-size: 100% 100%;
}
.vehicle-edit-form .form-checkbox span {
  flex: 1;
  min-width: 0;
  font-size: 1rem;
  color: var(--slate-700);
  line-height: 1.4;
}
/* Checkbox row: full width in second column so label text expands */
.vehicle-edit-form .form-row:has(.form-checkbox) {
  align-items: center;
}
.vehicle-edit-form .form-row .form-checkbox {
  grid-column: 2;
  justify-self: stretch;
  width: 100%;
}
.vehicle-inline-edit-wrap {
  max-width: 44rem;
}
.vehicle-inline-edit-wrap .vehicle-edit-form .form-row,
.vehicle-inline-edit-wrap .vehicle-edit-form .form-row-full {
  margin-bottom: 0.5rem;
}
.coordinators-list .coord-inline-edit-row td {
  padding: 0;
  vertical-align: top;
  border-bottom: 2px solid var(--color-border);
}
.coordinators-list .coord-inline-edit-row .coord-inline-edit-wrap {
  border: none;
  box-shadow: none;
}

/* Community / feed: Visible to — label left, dropdown inline and minimal width */
.visible-to-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}
.visible-to-row label {
  display: inline;
  margin-bottom: 0;
  margin-right: 0;
}
.visible-to-row .visible-to-select {
  width: auto;
  max-width: none;
  min-width: 0;
}

/* TSV import (dynamic): sample table first (full width), then paste area (full width) */
.form-compact > .tsv-import-form {
  grid-column: 1 / -1;
  width: 100%;
  max-width: none;
}
.tsv-import-form {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.tsv-import-row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
  width: 100%;
  min-width: 0;
}
.tsv-sample-first {
  width: 100%;
  min-width: 0;
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  padding: 1rem;
  font-size: 0.8125rem;
  overflow-x: auto;
  box-sizing: border-box;
}
.tsv-sample-first table {
  width: 100%;
  min-width: 100%;
  border-collapse: collapse;
}
.tsv-sample-first th, .tsv-sample-first td {
  border: 1px solid var(--slate-300);
  padding: 6px 10px;
  text-align: left;
  white-space: pre-wrap;
}
.tsv-sample-first th { background: var(--slate-200); font-weight: 600; }
.tsv-import-row .tsv-paste-group {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.tsv-import-row .tsv-paste-group textarea {
  width: 100%;
  max-width: 100%;
  font-size: 16px;
  min-height: 12rem;
  box-sizing: border-box;
}
@media (min-width: 641px) {
  .tsv-import-row .tsv-paste-group textarea { font-size: 0.875rem; }
}

/* Transport settings: add destination / purpose – modern input */
.transport-settings-add-form {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.transport-settings-add-form input[type="text"] {
  min-height: 44px;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: inherit;
  box-sizing: border-box;
  background: #fff;
  color: var(--color-text);
  max-width: 20rem;
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.transport-settings-add-form input[type="text"]:focus {
  outline: none;
  border-color: var(--focus-border);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.transport-settings-add-form input[type="text"]::placeholder {
  color: var(--slate-400);
}

/* TSV import: Copy sample table – confirmation toast */
.tsv-copy-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(1rem);
  padding: 0.625rem 1.25rem;
  background: var(--slate-800);
  color: #fff;
  border-radius: var(--radius);
  font-size: 0.9375rem;
  font-weight: 500;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}
.tsv-copy-toast.tsv-copy-toast-visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Super Dash: toast when notify triggers (dashboard refreshing widgets) */
.super-dash-notify-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(1rem);
  max-width: min(90vw, 32rem);
  padding: 0.625rem 1.25rem;
  background: var(--slate-800);
  color: #fff;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.super-dash-notify-toast.super-dash-notify-toast-visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Push notification: full modal when user is on the site (SW posts to open clients) */
.push-inpage-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-push-inpage, 13000);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.push-inpage-modal.push-inpage-modal-visible {
  opacity: 1;
  visibility: visible;
}
.push-inpage-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.push-inpage-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 24rem;
  padding: 1.25rem 1.5rem;
  background: var(--slate-800);
  color: #fff;
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  cursor: default;
}
.push-inpage-modal-title {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
}
.push-inpage-modal-body {
  font-size: 0.9375rem;
  color: var(--slate-200);
  line-height: 1.4;
  margin-bottom: 1.25rem;
}
.push-inpage-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.push-inpage-modal-btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.push-inpage-modal-btn-primary {
  background: var(--amber-500);
  color: #fff;
}
.push-inpage-modal-btn-primary:hover {
  background: var(--amber-400);
}
.push-inpage-modal-btn-secondary {
  background: var(--slate-600);
  color: #fff;
}
.push-inpage-modal-btn-secondary:hover {
  background: var(--slate-500);
}

/* Push in-page modal: chat reply area (reply box + mic + send) */
.push-inpage-chat-reply {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--slate-600);
}
.push-inpage-chat-reply-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--slate-300);
  margin-bottom: 0.35rem;
}
.push-inpage-chat-reply-wrap {
  display: flex;
  gap: 0.35rem;
  align-items: flex-end;
}
.push-inpage-chat-reply-wrap textarea.form-input {
  flex: 1;
  min-height: 44px;
  min-width: 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--slate-500);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: inherit;
  background: var(--slate-100);
  color: var(--slate-900);
  resize: none;
}
.push-inpage-chat-reply-wrap textarea.form-input::placeholder {
  color: var(--slate-500);
}
.push-inpage-chat-reply-wrap textarea.form-input:focus {
  outline: none;
  border-color: var(--amber-400);
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.35);
}
.push-inpage-chat-speak-btn {
  flex-shrink: 0;
  min-height: 44px;
  padding: 0.4rem 0.75rem;
  font-size: 0.9rem;
  background: var(--slate-600);
  border: 1px solid var(--slate-500);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--slate-200);
}
.push-inpage-chat-speak-btn:hover {
  background: var(--slate-500);
  color: #fff;
}
.push-inpage-chat-speak-btn.push-inpage-chat-speak-active {
  background: var(--red-600);
  border-color: var(--red-500);
  color: #fff;
}
.push-inpage-chat-speak-btn.push-inpage-chat-speak-active:hover {
  background: var(--red-600);
  border-color: var(--red-500);
  color: #fff;
}
.push-inpage-chat-send-btn {
  flex-shrink: 0;
  min-height: 44px;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  background: var(--amber-500);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.push-inpage-chat-send-btn:hover {
  background: var(--amber-400);
}
.push-inpage-chat-send-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Push toast stack (header or body); must paint above chat modals */
#push-toast-stack.push-toast-stack {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: var(--z-push-inpage, 13000);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: min(22rem, calc(100vw - 2rem));
  pointer-events: none;
}

/* Toast variant: small corner notification (when push_inpage_display = toast) */
.push-inpage-toast {
  position: fixed;
  top: 1rem;
  right: 1rem;
  max-width: min(22rem, calc(100vw - 2rem));
  padding: 0.875rem 1rem;
  background: var(--slate-800);
  color: #fff;
  border-radius: var(--radius);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  z-index: var(--z-push-inpage, 13000);
  opacity: 0;
  visibility: hidden;
  transform: translateX(1rem);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}
.push-toast-stack .push-toast-item.push-inpage-toast {
  position: relative;
  top: auto;
  right: auto;
  transform: none;
}
.push-toast-stack .push-toast-item.push-inpage-toast.push-inpage-toast-visible {
  transform: none;
}
.push-inpage-toast.push-inpage-toast-visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
.push-toast-reply-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.push-toast-reply-btn {
  min-height: 44px;
  padding: 0.35rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--slate-700);
  color: #fff;
}
.push-toast-reply-btn:hover:not(:disabled) {
  background: var(--slate-600);
}
.push-toast-reply-btn:disabled {
  opacity: 0.7;
  cursor: default;
}
.push-toast-reply-positive {
  background: var(--green-600, #16a34a);
  border-color: var(--green-700, #15803d);
  color: #fff;
}
.push-toast-reply-positive:hover:not(:disabled) {
  background: var(--green-500, #22c55e);
  filter: brightness(1.1);
}
.push-toast-reply-negative {
  background: var(--red-600, #dc2626);
  border-color: var(--red-700, #b91c1c);
  color: #fff;
}
.push-toast-reply-negative:hover:not(:disabled) {
  background: var(--red-500, #ef4444);
  filter: brightness(1.1);
}
.push-inpage-toast-title {
  font-weight: 600;
  font-size: 0.9375rem;
  margin-bottom: 0.25rem;
}
.push-inpage-toast-body {
  font-size: 0.875rem;
  color: var(--slate-200);
  line-height: 1.35;
}
.push-inpage-toast-link {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--amber-300);
  text-decoration: none;
}
.push-inpage-toast-link:hover {
  text-decoration: underline;
  color: var(--amber-200);
}

/* Me → Notifications: history list and modal */
.me-notification-history-item:hover {
  background: var(--slate-100);
}
.me-notification-history-item.me-notification-history-item--mine {
  background: var(--focus-ring, rgba(59, 130, 246, 0.18));
  border-left: 4px solid var(--color-primary, var(--blue-600));
}
.me-notifications-history-table tbody tr.me-notification-history-item:hover {
  background: var(--slate-100);
}
.me-notifications-history-table tbody tr.me-notification-history-item.me-notification-history-item--mine:hover {
  background: rgba(59, 130, 246, 0.2);
}
.me-notification-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.me-notification-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}
.me-notification-modal-content {
  position: relative;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  max-width: 28rem;
  width: 100%;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.me-notification-modal-title {
  margin: 0;
  padding: 1rem 1.25rem 0.5rem;
  font-size: 1.1rem;
  font-weight: 600;
}
.me-notification-modal-body {
  padding: 0.5rem 1.25rem 1rem;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--slate-700);
  flex: 1;
  min-height: 0;
}
.me-notification-modal-actions {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--slate-200);
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.me-notification-modal-actions .me-notification-modal-close {
  margin-left: auto;
}

/* Me → Notifications: gear opens settings (preferences + this browser) */
.me-notifications-gear-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0.35rem;
}
.me-notifications-gear-btn .sub-header-gear-icon {
  display: block;
}

.me-notifications-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.me-staff-send-overlay .me-staff-send-card {
  width: min(100%, 28rem);
  max-height: 90vh;
  overflow: auto;
  padding: 1.25rem;
  box-sizing: border-box;
}
.me-staff-send-suggest {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-sm);
  max-height: 10rem;
  overflow: auto;
  background: #fff;
}
.me-staff-send-suggest li {
  padding: 0.4rem 0.65rem;
  cursor: pointer;
}
.me-staff-send-suggest li:hover {
  background: var(--slate-100);
}
.me-staff-send-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.5rem;
}
.me-staff-send-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.5rem;
  background: var(--slate-100);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}
.me-staff-send-chip button {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0 0.15rem;
  line-height: 1;
  font-size: 1.1rem;
  color: var(--slate-600);
}

/* Me → Notifications: Settings modal (wider for form + push) */
.me-notifications-settings-modal .me-notifications-settings-modal-content {
  max-width: 40rem;
  width: 100%;
  position: relative;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Me → Notifications: this-browser push status */
.me-push-this-device-card {
  border: 1px solid var(--slate-200);
  background: var(--slate-50);
}
.me-push-this-device-card--page-top {
  border-left: 4px solid var(--blue-600);
  background: #fff;
}
.me-push-this-device-card--page-top.me-push-this-device-card--ok {
  border-color: var(--color-primary, var(--blue-600));
  box-shadow: 0 0 0 3px var(--focus-ring, rgba(59, 130, 246, 0.2));
}
.me-push-device-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  margin-top: 0.35rem;
}
.me-push-device-badge__dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--slate-400);
}
.me-push-device-badge--ok {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}
.me-push-device-badge--ok .me-push-device-badge__dot {
  background: #059669;
}
.me-push-device-badge--warn {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}
.me-push-device-badge--warn .me-push-device-badge__dot {
  background: #d97706;
}
.me-push-device-badge--bad {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}
.me-push-device-badge--bad .me-push-device-badge__dot {
  background: #dc2626;
}
.me-push-device-badge--neutral {
  background: var(--slate-100);
  color: var(--slate-700);
  border: 1px solid var(--slate-200);
}
.me-push-device-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.85rem;
  align-items: center;
}

.me-push-device-card--busy .me-push-device-actions .btn {
  opacity: 0.65;
  cursor: wait;
}
.me-push-device-card--busy .me-push-device-actions .btn.me-push-btn--pending {
  opacity: 1;
}
.me-push-btn--pending {
  position: relative;
}
.me-push-btn--pending::after {
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-left: 0.4em;
  vertical-align: -0.12em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: me-push-spin 0.65s linear infinite;
}
@keyframes me-push-spin {
  to {
    transform: rotate(360deg);
  }
}
.me-push-device-actions-status.me-push-action-status--loading {
  color: var(--slate-700);
  font-weight: 500;
}
.me-push-device-actions-status.me-push-action-status--success {
  color: #047857;
  font-weight: 500;
}
.me-push-device-actions-status.me-push-action-status--error {
  color: var(--error-red, #b91c1c);
  font-weight: 500;
}

/* Core notification details modal (shared) */
.core-notification-detail-modal .core-notification-detail-modal-card {
  width: min(100%, 42rem);
  max-height: 90vh;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.core-notification-detail-modal-heading {
  margin: 0;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--slate-200);
  font-size: 1.1rem;
}
.core-notification-detail-modal-content {
  padding: 1rem 1.25rem;
  overflow: auto;
}
.core-notification-detail-modal-grid {
  display: grid;
  grid-template-columns: minmax(8rem, 11rem) 1fr;
  gap: 0.65rem 0.9rem;
  align-items: start;
}
.core-notification-detail-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(8rem, 11rem) 1fr;
  gap: 0.65rem 0.9rem;
  align-items: start;
}
.core-notification-detail-label {
  font-weight: 600;
  color: var(--slate-700);
}
.core-notification-detail-value {
  color: var(--slate-700);
  word-break: break-word;
}
.core-notification-detail-value--message {
  white-space: pre-wrap;
}
.core-notification-detail-audio-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.core-notification-detail-audio-icon {
  border: 1px solid var(--slate-300);
  border-radius: 999px;
  background: var(--slate-100);
  color: var(--slate-700);
  min-width: 2rem;
  min-height: 2rem;
  line-height: 1;
  cursor: default;
}
.core-notification-detail-audio-wrap audio {
  width: min(100%, 22rem);
  min-height: 38px;
}
.core-notification-detail-modal-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--slate-200);
}
.core-notification-detail-modal-actions .core-notification-detail-modal-close {
  margin-left: auto;
}
@media (max-width: 640px) {
  .core-notification-detail-modal-grid,
  .core-notification-detail-row {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }
}

/* Me → Chat: conversation modal and message bubbles (non-blocking: no backdrop, page stays interactive) */
.chat-conversation-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 1rem 0.5rem 1rem 1rem;
  pointer-events: none;
}
.chat-conversation-modal .chat-conversation-modal-content,
.chat-conversation-modal .chat-modal-minimized-bar {
  opacity: 0;
  transform: translateX(calc(100% + 2rem));
  transition: transform 0.26s ease, opacity 0.26s ease;
  will-change: transform, opacity;
}
.chat-conversation-modal.chat-modal-visible .chat-conversation-modal-content,
.chat-conversation-modal.chat-modal-visible .chat-modal-minimized-bar {
  opacity: 1;
  transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
  .chat-conversation-modal .chat-conversation-modal-content,
  .chat-conversation-modal .chat-modal-minimized-bar {
    transition: none;
  }
}
.chat-conversation-modal-backdrop {
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: none;
}
.chat-conversation-modal-content {
  position: relative;
  background: var(--color-bg, #fff);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  max-width: 18rem;
  width: 100%;
  height: 66.67vh;
  max-height: 66.67vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  pointer-events: auto;
}
.chat-conversation-modal.chat-modal-minimized {
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0 0.75rem 0.75rem;
}
.chat-conversation-modal.chat-modal-minimized .chat-conversation-modal-content {
  display: none;
}
.chat-modal-minimized-bar {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: min(18rem, calc(100vw - 1.5rem));
  min-height: 44px;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--slate-300, #cbd5e1);
  border-radius: var(--radius, 8px) var(--radius, 8px) 0 0;
  background: var(--color-surface, #fff);
  color: var(--color-text, #1e293b);
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.22);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  text-align: left;
}
.chat-modal-minimized-bar:hover,
.chat-modal-minimized-bar:focus {
  outline: none;
  border-color: var(--color-primary, #2563eb);
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.22), 0 0 0 3px var(--focus-ring, rgba(37, 99, 235, 0.18));
}
.chat-modal-minimized-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-modal-minimized-badge {
  flex: 0 0 auto;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--color-primary, #2563eb);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  line-height: 1;
  font-weight: 700;
}

/* Calendar timed reminders: non-blocking stack top-left (page stays interactive) */
.calendar-reminder-popup-stack {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 10001;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: min(22rem, calc(100vw - 1.5rem));
  pointer-events: none;
}
.calendar-reminder-popup-card {
  pointer-events: auto;
  background: var(--color-surface, #fff);
  border-radius: var(--radius, 8px);
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.18);
  border: 1px solid var(--color-border, #e2e8f0);
}
.calendar-reminder-popup-card-inner {
  padding: 0.75rem 0.85rem;
}
.calendar-reminder-popup-type {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted, #64748b);
  margin-bottom: 0.2rem;
}
.calendar-reminder-popup-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text, #1e293b);
  line-height: 1.3;
  margin-bottom: 0.35rem;
}
.calendar-reminder-popup-when {
  font-size: 0.82rem;
  color: var(--color-text-muted, #64748b);
  margin-bottom: 0.55rem;
}
.calendar-reminder-popup-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.calendar-reminder-popup-actions .calendar-reminder-snooze-select {
  min-height: 36px;
  flex: 1 1 7rem;
  max-width: 100%;
}

/* Left edge: resize width (right edge stays fixed) */
.chat-modal-resize-left {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: ew-resize;
  z-index: 10;
  touch-action: none;
  pointer-events: auto;
}
.chat-modal-resize-left::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 2px;
  background: var(--slate-400);
  border-radius: 1px;
  box-shadow: 0 4px 0 var(--slate-400), 0 8px 0 var(--slate-400);
}
.chat-modal-resize-left:hover,
.chat-modal-resize-left:active {
  background: rgba(59, 130, 246, 0.12);
}
.chat-modal-resize-left:hover::after,
.chat-modal-resize-left:active::after {
  background: var(--slate-600);
  box-shadow: 0 4px 0 var(--slate-600), 0 8px 0 var(--slate-600);
}
@media (max-width: 1023px) {
  .chat-conversation-modal-content {
    min-width: 12.5rem;
  }
  .chat-modal-resize-left {
    width: 18px;
  }
  .chat-modal-resize-left::after {
    width: 5px;
    height: 3px;
    box-shadow: 0 6px 0 var(--slate-400), 0 12px 0 var(--slate-400);
  }
  .chat-modal-resize-left:hover::after,
  .chat-modal-resize-left:active::after {
    box-shadow: 0 6px 0 var(--slate-600), 0 12px 0 var(--slate-600);
  }
}
/* Bottom edge: resize height (top stays fixed) */
.chat-modal-resize-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  cursor: ns-resize;
  z-index: 10;
  touch-action: none;
  pointer-events: auto;
}
.chat-modal-resize-bottom::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 4px;
  background: var(--slate-400);
  border-radius: 1px;
  box-shadow: 4px 0 0 var(--slate-400), 8px 0 0 var(--slate-400);
}
.chat-modal-resize-bottom:hover,
.chat-modal-resize-bottom:active {
  background: rgba(59, 130, 246, 0.12);
}
.chat-modal-resize-bottom:hover::after,
.chat-modal-resize-bottom:active::after {
  background: var(--slate-600);
  box-shadow: 4px 0 0 var(--slate-600), 8px 0 0 var(--slate-600);
}

/* Sticky notes: floating boxes (Me → Notes), persist in localStorage – yellow theme */
.sticky-notes-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9990;
}

/* Chat image camera modal (shared helper) */
.chat-image-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.6);
}
.chat-image-modal-overlay .chat-image-modal {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 1.25rem;
  width: 100%;
  max-width: 480px;
}
.chat-image-modal-actions {
  margin-top: 0.75rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* Full-window viewer for chat thread images (pan / zoom / pinch) */
.chat-image-viewer-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  flex-direction: column;
  background: rgba(15, 23, 42, 0.92);
  box-sizing: border-box;
}
.chat-image-viewer-toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: rgba(15, 23, 42, 0.95);
  border-bottom: 1px solid var(--slate-700, #334155);
}
.chat-image-viewer-zoom-controls {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.chat-image-viewer-zoom-label {
  min-width: 3rem;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--slate-200, #e2e8f0);
}
.chat-image-viewer-close {
  min-height: 44px;
}
.chat-image-viewer-stage {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  cursor: grab;
}
.chat-image-viewer-stage:active {
  cursor: grabbing;
}
.chat-image-viewer-mover {
  transform-origin: center center;
  will-change: transform;
}
.chat-image-viewer-img {
  display: block;
  vertical-align: top;
  user-select: none;
  -webkit-user-drag: none;
  max-width: none;
  max-height: none;
}

/* Core image crop modal (chat, profile, favicon, etc.) */
#image-crop-modal[hidden] {
  display: none !important;
}
#image-crop-modal.profile-photo-crop-modal,
#image-crop-modal.image-crop-modal {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.6);
}
#image-crop-modal .profile-photo-crop-modal-inner,
#image-crop-modal .image-crop-modal-inner {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 1.5rem;
  width: 100%;
  max-width: 420px;
}
#image-crop-modal .profile-photo-crop-drop,
#image-crop-modal .image-crop-drop {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius);
  background: var(--slate-50);
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: default;
}
#image-crop-modal .profile-photo-crop-area,
#image-crop-modal .image-crop-area {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}
#image-crop-modal .profile-photo-crop-area canvas,
#image-crop-modal .image-crop-area canvas {
  max-width: 100%;
  max-height: 260px;
  display: block;
  background: transparent;
}

.chat-image-crop-box {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 180px;
  height: 180px;
  margin-left: -90px;
  margin-top: -90px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px var(--color-primary);
  border-radius: 4px;
  background: transparent;
  pointer-events: none;
}
.chat-image-handle {
  position: absolute;
  background: rgba(15, 23, 42, 0.9);
  border-radius: 999px;
  pointer-events: auto;
}
.chat-image-handle-left,
.chat-image-handle-right {
  width: 14px;
  height: 48px;
  top: 50%;
  margin-top: -24px;
  cursor: ew-resize;
}
.chat-image-handle-left {
  left: -7px;
}
.chat-image-handle-right {
  right: -7px;
}
.chat-image-handle-top,
.chat-image-handle-bottom {
  height: 14px;
  width: 48px;
  left: 50%;
  margin-left: -24px;
  cursor: ns-resize;
}
.chat-image-handle-top {
  top: -7px;
}
.chat-image-handle-bottom {
  bottom: -7px;
}

.sticky-notes-container .sticky-note-box {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  background: #fef08a;
  border: 1px solid #fde047;
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
  min-width: 0;
  min-height: 120px;
  overflow: hidden;
}
.sticky-note-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0.5rem 0.35rem 0.6rem;
  background: #facc15;
  color: #713f12;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: move;
  user-select: none;
  flex-shrink: 0;
  min-width: 0;
}
.sticky-note-title {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: text;
}
.sticky-note-title:hover {
  text-decoration: underline;
  cursor: text;
}
.sticky-note-title-edit {
  flex: 1 1 0%;
  min-width: 0;
  width: 0;
  max-width: 100%;
  padding: 0 0.25rem;
  border: 1px solid #a16207;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 600;
  background: #fef9c3;
  color: #713f12;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sticky-note-title-edit:focus {
  outline: none;
  border-color: #ca8a04;
  box-shadow: 0 0 0 2px rgba(202, 138, 4, 0.3);
}
.sticky-note-header-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}
.sticky-note-mic {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  color: #713f12;
  border-radius: 4px;
  min-width: 0;
  width: 28px;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sticky-note-mic:hover:not(:disabled) {
  background: #eab308;
  color: #713f12;
}
.sticky-note-mic:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.sticky-note-mic.lang-tb-speak-active,
.sticky-note-mic-listening {
  background: #dc2626;
  color: #fff;
  animation: sticky-note-mic-pulse 1.2s ease-in-out infinite;
}
.sticky-note-mic.lang-tb-speak-active:hover,
.sticky-note-mic.sticky-note-mic-listening:hover {
  background: #dc2626;
  color: #fff;
}
.sticky-note-mic.lang-tb-speak-warming {
  background: var(--amber-100, #fef3c7);
  color: var(--amber-800, #92400e);
}
@keyframes sticky-note-mic-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}
.sticky-note-close {
  background: none;
  border: none;
  font-size: 1.25rem;
  line-height: 1;
  padding: 0 0.25rem;
  cursor: pointer;
  color: #a16207;
  border-radius: 4px;
  min-width: 0;
  width: 28px;
  min-height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sticky-note-close:hover {
  background: #eab308;
  color: #713f12;
}
.sticky-note-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0.6rem;
  min-height: 0;
  min-width: 0;
}
.sticky-note-textarea {
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: 80px;
  padding: 0.4rem 0.5rem;
  border: 1px solid #fde047;
  border-radius: 6px;
  font-size: 0.9375rem;
  font-family: inherit;
  resize: none;
  background: #fef9c3;
  color: var(--slate-800);
  box-sizing: border-box;
}
.sticky-note-textarea:focus {
  outline: none;
  border-color: var(--focus-border);
  box-shadow: 0 0 0 2px var(--focus-ring);
}
.sticky-note-resize-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 14px;
  height: 14px;
  cursor: se-resize;
  background: linear-gradient(135deg, transparent 50%, #eab308 50%);
  border-radius: 0 0 4px 0;
  flex-shrink: 0;
}
.sticky-note-resize-handle:hover {
  background: linear-gradient(135deg, transparent 50%, #ca8a04 50%);
}

/* Bug report: draggable panel (no full-page backdrop) */
.bug-report-panel {
  position: fixed;
  top: 5rem;
  right: 0.75rem;
  width: min(22rem, calc(100vw - 1.5rem));
  max-height: min(88vh, 40rem);
  z-index: 3100;
  flex-direction: column;
  background: var(--color-bg, #fff);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}
.bug-report-panel.bug-report-panel--capture-hide {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
.bug-report-panel-drag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.65rem 0.75rem;
  background: var(--slate-100);
  border-bottom: 1px solid var(--slate-200);
  cursor: grab;
  user-select: none;
}
.bug-report-panel-drag:active {
  cursor: grabbing;
}
.bug-report-panel-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--slate-800);
  flex: 1;
  min-width: 0;
}
.bug-report-panel-close {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--slate-600);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bug-report-panel-close:hover {
  background: var(--slate-200);
  color: var(--slate-900);
}
.bug-report-panel-body {
  padding: 0.75rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-height: 0;
}
.bug-report-fields {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  margin-top: 0.65rem;
  box-sizing: border-box;
}
.bug-report-problem-block {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
  margin-top: 0;
  box-sizing: border-box;
}
.bug-report-problem-label {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--slate-800);
}
.bug-report-detail-textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 3.25rem;
  max-height: min(32vh, 14rem);
  resize: vertical;
  font-size: 1rem;
  line-height: 1.45;
}
.bug-report-panel .bug-report-actions {
  margin-top: 0.85rem;
  width: 100%;
}
.bug-report-panel .bug-report-actions .btn {
  width: 100%;
}
.bug-report-capture-row {
  margin-bottom: 0.75rem;
}
.bug-report-capture-toolbar {
  width: 100%;
}
.bug-report-capture-label {
  display: block;
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 0.35rem;
  color: var(--slate-800);
}
.bug-report-capture-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.bug-report-capture-buttons--mobile {
  display: none;
  flex-direction: column;
}
/* Narrow viewports / phones: one capture control (viewport screenshot via html2canvas), larger tap target */
@media (max-width: 639px) {
  .bug-report-capture-label--desktop-only {
    display: none;
  }
  .bug-report-capture-buttons--desktop {
    display: none !important;
  }
  .bug-report-capture-buttons--mobile {
    display: flex;
  }
  .bug-report-capture-mobile-btn {
    width: 100%;
    min-height: 44px;
    font-size: 1rem;
    justify-content: center;
    box-sizing: border-box;
  }
  .bug-report-panel {
    width: min(22rem, calc(100vw - 1rem));
    max-height: min(88vh, calc(100vh - 5rem));
    top: 4.25rem;
    right: 0.5rem;
  }
  .bug-report-panel .bug-report-detail-textarea {
    font-size: 16px;
  }
}
.bug-report-preview-wrap {
  margin-bottom: 0.75rem;
}
.bug-report-panel.bug-report-panel--region-select {
  opacity: 0.22;
  background: rgba(255, 255, 255, 0.42);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}
/* One fixed-height strip: 1–4 thumbnails share this footprint (same overall space as a single preview). */
.bug-report-captures-grid {
  display: grid;
  gap: 0.45rem;
  width: 100%;
  height: 5.25rem;
  box-sizing: border-box;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
.bug-report-captures-grid.bug-report-captures-grid--2 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}
.bug-report-captures-grid.bug-report-captures-grid--3,
.bug-report-captures-grid.bug-report-captures-grid--4 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.bug-report-capture-cell {
  position: relative;
  border-radius: var(--radius-sm);
  border: 1px solid var(--slate-200);
  background: var(--slate-50);
  min-height: 0;
  min-width: 0;
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.bug-report-capture-thumb {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: pointer;
  border-radius: calc(var(--radius-sm) - 1px);
}
.bug-report-capture-thumb:focus {
  outline: 2px solid var(--focus-border, var(--blue-500, #2563eb));
  outline-offset: 2px;
}
/* Desktop / fine pointer: show thumbnails are clickable (skip touch primary devices). */
@media (hover: hover) and (pointer: fine) {
  .bug-report-capture-cell:has(.bug-report-capture-thumb:hover) {
    border-color: var(--blue-400, #60a5fa);
    background: var(--blue-50, #eff6ff);
  }
  .bug-report-capture-thumb:hover {
    outline: 2px solid var(--blue-500, #2563eb);
    outline-offset: 2px;
  }
}
.bug-report-capture-remove {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  z-index: 2;
  width: 1.65rem;
  height: 1.65rem;
  min-width: 1.65rem;
  padding: 0;
  margin: 0;
  line-height: 1;
  border-radius: 999px;
  border: 1px solid var(--slate-300);
  background: rgba(255, 255, 255, 0.95);
  color: var(--slate-800);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
  cursor: pointer;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bug-report-capture-remove:hover {
  background: #fff;
  border-color: var(--slate-400);
}
.bug-report-remove-modal.bug-report-modal-overlay {
  z-index: 5050;
}
.bug-report-remove-modal-title {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
}
.bug-report-remove-modal-body {
  margin: 0 0 1rem;
  color: var(--slate-700);
}
.bug-report-modal-overlay[hidden],
.bug-report-remove-modal[hidden] {
  display: none !important;
}
.bug-report-edit-stage-slot .bug-report-live-thumb {
  margin-bottom: 0.5rem;
}
.bug-report-live-thumb {
  display: none;
  max-width: 100%;
  max-height: 8rem;
  width: auto;
  height: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--slate-200);
  object-fit: contain;
  background: var(--slate-50);
  vertical-align: top;
}
.bug-report-live-thumb:not([hidden]) {
  display: block;
}
.bug-report-icon-btn {
  min-width: 2.25rem;
  font-size: 1.15rem;
  line-height: 1;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.bug-report-annotate-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.bug-report-annotate-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}
.bug-report-annotate-toolbar .bug-report-tool-btn.is-active {
  border-color: var(--blue-500, #2563eb);
  background: var(--blue-50, #eff6ff);
  color: var(--blue-800, #1e40af);
}
.bug-report-edit-modal.bug-report-modal-overlay {
  z-index: 5000;
}
.bug-report-modal-overlay {
  z-index: 3400;
}
.bug-report-color-modal.bug-report-modal-overlay {
  z-index: 5100;
}
.bug-report-edit-modal-title {
  margin: 0 0 0.75rem;
  font-size: 1.1rem;
}
.bug-report-edit-modal-card {
  max-width: min(96vw, 1200px);
  width: 100%;
  max-height: 92vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.bug-report-edit-stage-slot {
  flex: 1;
  min-height: 0;
  overflow: auto;
  text-align: center;
  background: var(--slate-50);
  border-radius: var(--radius-sm);
  padding: 0.5rem;
  border: 1px solid var(--slate-200);
}
.bug-report-edit-stage-slot .bug-report-annotate-stage {
  margin-left: auto;
  margin-right: auto;
}
.bug-report-annotate-stage {
  position: relative;
  display: inline-block;
  max-width: 100%;
  line-height: 0;
  vertical-align: top;
}
.bug-report-edit-stage-slot .bug-report-preview-img,
.bug-report-edit-stage-slot .bug-report-annotate-stage .bug-report-preview-img {
  display: block;
  max-width: 100%;
  max-height: min(78vh, 880px);
  width: auto;
  height: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--slate-200);
  object-fit: contain;
  background: var(--slate-50);
  position: relative;
  z-index: 0;
}
/* Arrows below pencil/highlight canvas so stems stay under markup; callout cards sit above both. */
.bug-report-draw-canvas {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: var(--radius-sm);
}
.bug-report-arrow-svg {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
  border-radius: var(--radius-sm);
}
.bug-report-arrow-svg .bug-callout-line {
  pointer-events: none;
}
.bug-report-arrow-svg .bug-callout-arrow {
  pointer-events: auto;
}
.bug-callout--selected {
  outline: 2px solid var(--blue-500, #2563eb);
  outline-offset: 1px;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.35);
}
.bug-report-text-layer {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}
.bug-callout {
  position: absolute;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  min-width: 80px;
  background: #fff;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
  box-sizing: border-box;
}
.bug-callout-bar {
  flex: 0 0 auto;
  min-height: 1.25rem;
  padding: 0.2rem 0.35rem;
  background: var(--slate-100);
  border-bottom: 1px solid var(--slate-200);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  cursor: grab;
}
.bug-callout-bar:active {
  cursor: grabbing;
}
.bug-callout-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: none;
  margin: 0;
  padding: 0.35rem 0.45rem;
  font-size: 0.8125rem;
  line-height: 1.35;
  resize: none;
  flex-shrink: 0;
  min-height: 2.5rem;
  background: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--slate-900);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  overflow: hidden;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.bug-callout-input::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.bug-callout-input:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--focus-ring, rgba(37, 99, 235, 0.35));
}
.bug-callout-resize {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 14px;
  height: 14px;
  cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 50%, var(--slate-400) 50%);
  border-radius: 0 0 var(--radius-sm) 0;
  opacity: 0.85;
}
.bug-report-remove-capture {
  margin-top: 0;
}
.bug-report-status {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: var(--slate-700);
}
.bug-report-region-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  cursor: crosshair;
  background: rgba(15, 23, 42, 0.2);
}
.bug-report-region-hint {
  position: fixed;
  top: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.35rem 0.75rem;
  background: var(--slate-900);
  color: #f8fafc;
  font-size: 0.875rem;
  border-radius: var(--radius-sm);
  pointer-events: none;
  z-index: 1;
}
.bug-report-region-box {
  position: fixed;
  border: 2px solid var(--blue-500, #2563eb);
  background: rgba(37, 99, 235, 0.12);
  pointer-events: none;
}
/* Help from Site Admin modal */
.help-from-site-admin-modal {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.help-from-site-admin-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  cursor: pointer;
}
.help-from-site-admin-content {
  position: relative;
  background: var(--color-bg, #fff);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  max-width: 28rem;
  width: 100%;
  padding: 1.25rem;
}
.help-from-site-admin-title {
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
}
.help-from-site-admin-confirm {
  margin: 0 0 0.75rem;
  color: var(--slate-600);
}
.help-from-site-admin-label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
}
.help-from-site-admin-textarea {
  width: 100%;
  min-height: 4rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius);
  font-size: 1rem;
}
.help-from-site-admin-invite-section {
  margin-bottom: 1rem;
}
.help-from-site-admin-choose {
  margin: 0.5rem 0 0.25rem;
  font-size: 0.9rem;
  color: var(--slate-600);
}
.help-from-site-admin-admin-list {
  list-style: none;
  padding: 0;
  margin: 0.25rem 0 0;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  max-height: 12rem;
  overflow-y: auto;
}
.help-from-site-admin-admin-list .help-admin-item {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--slate-100);
  cursor: pointer;
  font-size: 0.95rem;
  min-height: 44px;
}
.help-from-site-admin-admin-list .help-admin-item:last-child {
  border-bottom: none;
}
.help-from-site-admin-admin-list .help-admin-item:hover {
  background: var(--slate-50);
}
.help-from-site-admin-admin-list .help-admin-loading,
.help-from-site-admin-admin-list .help-admin-none {
  padding: 0.75rem 1rem;
  color: var(--slate-500);
  font-size: 0.9rem;
}
.help-from-site-admin-status {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
}
.help-from-site-admin-status.help-invite-error {
  color: var(--red-600, #dc2626);
}
.help-from-site-admin-actions {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--slate-200);
}
.help-initiator-active-section {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--slate-200);
  background: var(--amber-50, #fffbeb);
  padding: 0.75rem;
  border-radius: var(--radius);
  border: 1px solid var(--amber-200, #fde68a);
}
.help-initiator-active-message {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  color: var(--slate-800);
}
.help-initiator-active-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.help-initiator-active-actions .btn {
  margin: 0;
}
/* Desktop: multiple conversation panes side by side */
@media (min-width: 1024px) {
  .chat-conversation-modal-content.chat-modal-multi-panes {
    width: auto;
    max-width: min(90vw, 56rem);
    min-height: 66.67vh;
    height: 66.67vh;
  }
}
.chat-modal-panes {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}
/* Mobile: staggered tile picker when multiple chats open */
@media (max-width: 1023px) {
  .chat-modal-panes {
    flex-direction: column;
    min-width: 0;
  }
  /* Single pane (no tiles, no pane-selected): let the one pane fill the modal */
  .chat-conversation-modal-content:not(.chat-mobile-showing-tiles):not(.chat-mobile-pane-selected) .chat-modal-panes .chat-pane {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
  }
  .chat-modal-mobile-tiles {
    position: absolute;
    inset: 0;
    overflow: auto;
    padding: 1rem;
    padding-bottom: 2rem;
    background: var(--color-bg, #fff);
    z-index: 1;
    -webkit-overflow-scrolling: touch;
  }
  .chat-modal-mobile-tiles[aria-hidden="true"] {
    display: none !important;
  }
  .chat-modal-mobile-tile {
    position: absolute;
    min-height: 3.25rem;
    min-width: 12rem;
    max-width: calc(100% - 5rem);
    padding: 0.75rem 1rem;
    background: var(--color-surface, #fff);
    border-radius: var(--radius);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 0 0 1px var(--slate-200);
    cursor: pointer;
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--slate-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
    box-sizing: border-box;
  }
  .chat-modal-mobile-tile:hover,
  .chat-modal-mobile-tile:focus {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 2px var(--color-primary, #2563eb);
    outline: none;
  }
  .chat-modal-mobile-tile:active {
    transform: scale(0.98);
  }
  /* Tile view visible: hide panes so only tiles show */
  .chat-conversation-modal-content.chat-mobile-showing-tiles .chat-modal-panes {
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    left: -9999px;
  }
  /* Single-pane view: show only selected pane */
  .chat-conversation-modal-content.chat-mobile-pane-selected .chat-modal-panes .chat-pane {
    display: none !important;
  }
  .chat-conversation-modal-content.chat-mobile-pane-selected .chat-modal-panes .chat-pane.chat-pane-mobile-selected {
    display: flex !important;
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
  }
  .chat-pane-back {
    margin-right: 0.5rem;
    padding: 0.25rem 0.5rem;
    min-height: 44px;
    min-width: 44px;
    border: 0;
    background: transparent;
    color: var(--color-primary, #2563eb);
    font-size: 1.25rem;
    cursor: pointer;
    border-radius: var(--radius);
    flex-shrink: 0;
  }
  .chat-pane-back:hover,
  .chat-pane-back:focus {
    background: var(--slate-100);
    outline: none;
  }
}
@media (min-width: 1024px) {
  .chat-modal-panes {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 0.75rem;
    padding: 0 0.5rem;
    min-width: 0;
  }
  .chat-modal-panes .chat-pane {
    flex: 1 0 0;
    min-width: 10rem;
    width: 0;
    border-radius: var(--radius);
    box-shadow: 0 0 0 1px var(--slate-200);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    overflow-x: hidden;
    background: var(--color-surface, #fff);
  }
  .chat-modal-panes .chat-pane .chat-pane-input-wrap textarea,
  .chat-modal-panes .chat-pane .chat-pane-input-wrap .chat-conversation-input,
  .chat-modal-panes .chat-pane .chat-pane-input-wrap .chat-input-expand,
  .chat-modal-panes .chat-pane .chat-pane-input-wrap .chat-pane-body {
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
}
.chat-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  overflow-x: hidden;
  container-type: inline-size;
  container-name: chat-pane;
  opacity: 1;
  transform: translateX(0);
  transition: transform 0.22s ease, opacity 0.22s ease;
  will-change: transform, opacity;
}
.chat-pane.chat-pane-enter {
  opacity: 0;
  transform: translateX(2.5rem);
}
.chat-pane.chat-pane-enter.chat-pane-enter-active {
  opacity: 1;
  transform: translateX(0);
}
.chat-pane.chat-pane-exit {
  opacity: 1;
  transform: translateX(0);
}
.chat-pane.chat-pane-exit.chat-pane-exit-active {
  opacity: 0;
  transform: translateX(2.5rem);
}
@media (prefers-reduced-motion: reduce) {
  .chat-pane {
    transition: none;
  }
}
.chat-pane-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  border-bottom: 1px solid var(--slate-200);
  flex-shrink: 0;
  background: var(--slate-50);
  cursor: move;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.chat-pane-module-badge {
  padding: 0.3rem 0.75rem;
  background: var(--color-primary, #2563eb);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  display: none;
}
.chat-pane-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  min-width: 0;
}
.chat-pane-header .chat-pane-title {
  flex: 1;
  min-width: 0;
}
.chat-pane-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-pane-minimize,
.chat-pane-close {
  background: none;
  border: none;
  font-size: 1.25rem;
  line-height: 1;
  padding: 0.2rem 0.4rem;
  cursor: pointer;
  color: var(--slate-500);
  flex-shrink: 0;
}
.chat-pane-minimize {
  font-weight: 700;
  transform: translateY(-0.15rem);
}
.chat-pane-minimize:hover,
.chat-pane-close:hover {
  color: var(--slate-700);
}
@media (max-width: 1023px) {
  .chat-pane-minimize,
  .chat-pane-close {
    min-width: 48px;
    min-height: 48px;
    padding: 0.45rem 0.7rem;
    font-size: 1.55rem;
    border-radius: var(--radius, 8px);
  }
  .chat-pane-minimize {
    transform: translateY(-0.2rem);
  }
  .chat-pane-minimize:active,
  .chat-pane-close:active {
    background: var(--slate-100, #f1f5f9);
  }
}
.chat-pane.chat-pane-focused {
  outline: 2px solid var(--color-primary, #2563eb);
  outline-offset: -2px;
}
.chat-pane-messages {
  flex: 1 1 0;
  min-height: 10rem;
  padding: 0.65rem 0.1rem 0.65rem 0.45rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow-y: auto;
  background: var(--color-surface, #fff);
}
/* Older-than-today messages: full-width tinted band in the scroll area */
.chat-bubble-wrap-prior-day {
  background: var(--chat-messages-prior-bg, var(--slate-100, #f1f5f9));
  margin-left: -0.45rem;
  margin-right: -0.45rem;
  padding: 0.4rem 0.45rem;
  border-radius: var(--radius, 8px);
}
.chat-bubble-wrap-prior-day + .chat-bubble-wrap-prior-day {
  margin-top: -0.5rem;
  padding-top: 0.2rem;
  border-radius: 0;
}
.chat-messages-day-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.25rem 0 0.35rem;
  color: var(--slate-500);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.chat-messages-day-divider::before,
.chat-messages-day-divider::after {
  content: '';
  flex: 1;
  min-width: 0;
  height: 1px;
  background: var(--slate-200, #e2e8f0);
}
.chat-messages-day-divider-label {
  flex-shrink: 0;
}
.chat-pane-input-box {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-surface, #fff);
  border-top: 1px solid var(--slate-200);
  max-height: 50vh;
  min-height: 6rem;
}
.chat-pane-input-grab {
  display: block;
  width: 100%;
  padding: 0.35rem 0;
  border: none;
  background: var(--slate-100);
  cursor: ns-resize;
  color: var(--slate-500);
  font-size: 0.75rem;
  user-select: none;
  touch-action: none;
  flex-shrink: 0;
}
.chat-pane-input-grab:hover {
  background: var(--slate-200);
  color: var(--slate-700);
}
.chat-pane-input-grab:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--focus-ring);
}
.chat-pane-input-grab-bar {
  display: block;
  width: 2rem;
  height: 3px;
  margin: 0 auto;
  background: var(--slate-400);
  border-radius: 2px;
  pointer-events: none;
}
.chat-pane-input-box .chat-pane-input-wrap {
  flex: 1;
  min-height: 0;
  border-top: none;
  overflow: visible;
  display: flex;
  flex-direction: column;
}
/* Only the textarea grows/shrinks when the input box is resized; actions stay fixed at bottom */
.chat-pane-input-box .chat-pane-input-wrap .chat-pane-body,
.chat-pane-input-box .chat-pane-input-wrap textarea.chat-pane-body {
  flex: 1;
  min-height: 2.5rem;
}
.chat-pane-input-box .chat-pane-input-wrap .chat-conversation-modal-actions {
  flex-shrink: 0;
}
.chat-pane-seen-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: var(--radius);
  background: var(--slate-100);
  color: var(--slate-600);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  margin-left: auto;
}
.chat-pane-seen-btn:hover {
  background: var(--slate-200);
  color: var(--slate-800);
}
.chat-pane-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.5rem 0.75rem;
  border-top: 1px solid var(--slate-200);
  flex-shrink: 0;
}
@container chat-pane (max-width: 220px) {
  :scope .chat-pane-input-wrap {
    padding: 0.4rem 0.5rem;
    gap: 0.25rem;
  }
  :scope .chat-conversation-modal-actions {
    gap: 0.25rem;
  }
  :scope .chat-conversation-modal-actions .btn {
    padding: 0.5rem 0.75rem;
    min-height: 38px;
    font-size: 0.875rem;
  }
  :scope .chat-pane-seen-btn {
    width: 1.75rem;
    min-width: 1.75rem;
    height: 1.75rem;
    font-size: 1rem;
  }
}
@container chat-pane (max-width: 180px) {
  :scope .chat-pane-input-wrap {
    padding: 0.3rem 0.4rem;
    gap: 0.2rem;
  }
  :scope .chat-conversation-modal-actions {
    gap: 0.2rem;
  }
  :scope .chat-conversation-modal-actions .btn {
    padding: 0.35rem 0.5rem;
    min-height: 32px;
    font-size: 0.8125rem;
  }
  :scope .chat-pane-seen-btn {
    width: 1.5rem;
    min-width: 1.5rem;
    height: 1.5rem;
    font-size: 0.9rem;
  }
}
@container chat-pane (max-width: 140px) {
  :scope .chat-pane-input-wrap {
    padding: 0.25rem 0.35rem;
    gap: 0.15rem;
  }
  :scope .chat-conversation-modal-actions {
    gap: 0.15rem;
  }
  :scope .chat-conversation-modal-actions .btn {
    padding: 0.25rem 0.4rem;
    min-height: 28px;
    font-size: 0.75rem;
  }
  :scope .chat-pane-seen-btn {
    width: 1.25rem;
    min-width: 1.25rem;
    height: 1.25rem;
    font-size: 0.8rem;
  }
}
.chat-pane-input-wrap .chat-conversation-input,
.chat-pane-input-wrap .chat-pane-body,
.chat-pane-input-wrap .chat-input-expand {
  min-height: 2.5rem;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  resize: none;
  box-sizing: border-box;
}
/* overflow-y:auto (not hidden): Chromium hides native spellcheck underlines when overflow is hidden */
.chat-pane .chat-pane-input-wrap textarea,
.chat-pane .chat-pane-input-wrap .chat-conversation-input,
.chat-pane .chat-pane-input-wrap .chat-input-expand,
.chat-pane .chat-pane-input-wrap .chat-pane-body {
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
.chat-conversation-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--slate-200);
  flex-shrink: 0;
}
.chat-conversation-modal-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}
.chat-conversation-modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  color: var(--slate-500);
}
.chat-conversation-modal-close:hover {
  color: var(--slate-700);
}
.chat-conversation-modal-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 12rem;
}
.chat-bubble-wrap {
  display: flex;
  width: 100%;
  max-width: 100%;
}
.chat-bubble-wrap.chat-bubble-left {
  justify-content: flex-start;
  padding-right: 0;
}
.chat-bubble-wrap.chat-bubble-right {
  justify-content: flex-end;
  padding-left: 0;
}
.chat-bubble {
  width: fit-content;
  max-width: 96%;
  padding: 0.5rem 0.75rem;
  border-radius: 1rem;
  word-wrap: break-word;
  word-break: break-word;
}
.chat-bubble-left .chat-bubble {
  background: var(--slate-200);
  color: var(--slate-800);
  border-bottom-left-radius: 0.25rem;
}
.chat-bubble-right .chat-bubble {
  background: var(--color-primary, #2563eb);
  color: #fff;
  border-bottom-right-radius: 0.25rem;
}
.chat-bubble-wrap-unread .chat-bubble {
  box-shadow: 0 0 0 2px var(--color-primary, #2563eb);
}
.chat-bubble-sender {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--slate-600);
  margin-bottom: 0.2rem;
}
.chat-bubble-body {
  font-size: 0.9375rem;
  line-height: 1.4;
  white-space: pre-wrap;
}
.chat-bubble-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin-top: 0.25rem;
}
.chat-bubble-right .chat-bubble-meta {
  justify-content: flex-end;
}
.chat-bubble-time {
  display: inline-flex;
  align-items: center;
  font-size: 0.65rem;
  opacity: 0.85;
  white-space: nowrap;
}
.chat-bubble-right .chat-bubble-time {
  text-align: right;
}

/* Chat reactions under each bubble – no box/frame, just emoji + count */
.chat-bubble-reactions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0;
  font-size: 0.8rem;
}

/* For incoming messages on hover-capable devices: only show reaction buttons on hover unless there are existing reactions */
@media (hover: hover) {
  .chat-bubble-wrap.chat-bubble-left .chat-bubble-reactions {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
  }
  .chat-bubble-wrap.chat-bubble-left .chat-bubble-reactions.chat-bubble-reactions-visible {
    opacity: 1;
    pointer-events: auto;
  }
  .chat-bubble-wrap.chat-bubble-left:hover .chat-bubble-reactions {
    opacity: 1;
    pointer-events: auto;
  }
}
.chat-reaction-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  font-size: 0.8rem;
  line-height: 1.1;
}
.chat-reaction-btn:hover {
  opacity: 0.85;
}
.chat-reaction-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.1rem 0.35rem;
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: inherit;
}
.chat-reaction-pill-active {
  border-color: var(--focus-border, #60a5fa);
  background: var(--color-primary-pale, #eff6ff);
}
.chat-react-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.75rem;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--slate-300, #cbd5e1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--slate-700, #334155);
  font-size: 0.72rem;
  cursor: pointer;
}
.chat-react-trigger:hover {
  border-color: var(--focus-border, #60a5fa);
  background: var(--color-primary-pale, #eff6ff);
}
.chat-reaction-emoji {
  font-size: 0.9rem;
}
.chat-reaction-count {
  font-size: 0.75rem;
}

/* Mobile reaction picker overlay (shown when tapping a message on touch devices) */
.chat-reaction-picker-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.4);
  z-index: 5;
}
.chat-reaction-picker {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--color-surface, #fff);
  border-radius: var(--radius, 0.375rem);
  box-shadow: var(--shadow-md, 0 10px 15px -3px rgba(15,23,42,0.1), 0 4px 6px -2px rgba(15,23,42,0.05));
}
.chat-reaction-picker-btn {
  border: none;
  background: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
@media (max-width: 1023px) {
  .chat-bubble-meta {
    gap: 0.4rem 0.7rem;
  }
  .chat-bubble-reactions {
    gap: 0.65rem;
  }
  .chat-reaction-pill { padding: 0.15rem 0.45rem; }
  .chat-react-trigger { min-height: 2rem; padding: 0.15rem 0.6rem; font-size: 0.78rem; }
  .chat-reaction-emoji {
    font-size: 1.05rem;
  }
  .chat-reaction-picker {
    gap: 0.85rem;
  }
  .chat-reaction-picker-btn {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }
}

/* Chat pending photo thumbnails (up to 3 per message) */
.chat-pane-photo-preview-wrap,
#chat-new-photo-preview-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

/* Chat camera button: larger camera icon, keep normal button size */
.chat-pane-photo-btn {
  display: inline-flex;
  /*align-items: center;*/
  /*justify-content: center;*/
  /* Force larger icon size only for this small button, without affecting other small buttons */
  font-size: 1.8rem !important;
  padding: 0 .3rem;
  line-height: 1;
}
.chat-pane-audio-btn {
  display: inline-flex;
  font-size: 1.35rem !important;
  padding: 0 0.45rem;
  line-height: 1;
}
.chat-audio-preview {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius-sm, 0.25rem);
  padding: 0.2rem 0.35rem;
  background: var(--slate-50);
}
.chat-audio-preview audio {
  width: 170px;
  max-width: 100%;
  min-height: 36px;
}
.chat-audio-preview-remove {
  border: none;
  background: transparent;
  color: var(--slate-600);
  font-size: 1rem;
  cursor: pointer;
}
.chat-bubble-audio {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.3rem;
}
.chat-bubble-audio audio {
  width: 210px;
  max-width: 100%;
}
.chat-bubble-audio-icon {
  border: 1px solid var(--slate-300);
  border-radius: 999px;
  background: var(--slate-100);
  color: var(--slate-700);
  min-width: 2rem;
  min-height: 2rem;
  font-size: 0.95rem;
  line-height: 1;
  cursor: default;
}

/* Inline chat images: no outer frame or button chrome */
.chat-bubble-image-btn {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

/* Privacy blur: when chat is auto-opened, blur message bodies and inline images until user taps to reveal */
.chat-conversation-modal.chat-modal-privacy-blur .chat-bubble-body,
.chat-conversation-modal.chat-modal-privacy-blur .chat-bubble-classification,
.chat-conversation-modal.chat-modal-privacy-blur .chat-bubble-attachments,
.chat-conversation-modal.chat-modal-privacy-blur .chat-bubble-attachments img {
  filter: blur(6px);
  user-select: none;
  pointer-events: auto;
  transition: filter 0.25s ease;
}
.chat-conversation-modal.chat-modal-privacy-blur .chat-bubble-body {
  cursor: pointer;
}
.chat-conversation-modal.chat-modal-privacy-blur .chat-bubble-sender,
.chat-conversation-modal.chat-modal-privacy-blur .chat-bubble-time {
  /* Sender and time stay visible and unblurred */
}
.chat-pane.chat-modal-privacy-blur .chat-bubble-body,
.chat-pane.chat-modal-privacy-blur .chat-bubble-classification,
.chat-pane.chat-modal-privacy-blur .chat-bubble-attachments,
.chat-pane.chat-modal-privacy-blur .chat-bubble-attachments img {
  filter: blur(6px);
  user-select: none;
  pointer-events: auto;
  transition: filter 0.25s ease;
}
.chat-pane.chat-modal-privacy-blur .chat-bubble-body {
  cursor: pointer;
}
.chat-privacy-hint {
  font-size: 0.8rem;
  color: var(--slate-500);
  margin: 0 0 0.5rem 0;
  padding: 0.25rem 0;
}

.chat-conversation-modal-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--slate-200);
  flex-shrink: 0;
}
.chat-conversation-modal-input-wrap .chat-conversation-input {
  width: 100%;
  min-height: 44px;
  max-height: 12rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  resize: none;
  overflow-y: auto;
  box-sizing: border-box;
  display: block;
}
.chat-conversation-modal-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}
.chat-conversation-input {
  flex: none;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  resize: none;
}
.chat-conversation-input:focus {
  outline: none;
  border-color: var(--focus-border);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.chat-conversation-input:hover {
  border-color: var(--slate-400);
}
.chat-modal-send {
  flex-shrink: 0;
}

/* Chat page: two-column layout – left = new message form, right = threads */
.chat-page-layout {
  display: grid;
  grid-template-columns: minmax(260px, 320px) 1fr;
  gap: 1.5rem;
  align-items: start;
}
@media (min-width: 1024px) {
  .chat-page-layout {
    align-items: stretch;
    min-height: 0;
  }
  .chat-new-message-left {
    min-height: 60vh;
    max-height: calc(100vh - 6rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .chat-new-message-panel.chat-new-message-left {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .chat-new-message-panel .form-row:not(.chat-new-message-row) {
    flex-shrink: 0;
  }
  .chat-new-message-panel .form-row.chat-new-message-row {
    flex: 1;
    min-height: 0;
    margin-bottom: 0.5rem;
  }
  .chat-new-message-panel #chat-new-speak-bar,
  .chat-new-message-panel .form-actions.chat-new-form-actions {
    flex-shrink: 0;
  }
  .chat-new-message-panel .chat-new-message-row .chat-new-body-wrap {
    flex: 1;
    min-height: 4rem;
    display: flex;
    flex-direction: column;
  }
  .chat-new-message-panel .chat-new-body-wrap .chat-input-expand,
  .chat-new-message-panel .chat-new-body-wrap .chat-input-textarea {
    flex: 1;
    min-height: 2.5rem;
    max-height: none;
    resize: none;
  }
  /* Desktop: start with a larger textbox (min-height for the new-message textarea) */
  .chat-new-message-panel.chat-new-message-left .chat-new-body-wrap .chat-input-expand,
  .chat-new-message-panel.chat-new-message-left .chat-new-body-wrap .chat-input-textarea {
    min-height: 6rem;
  }
}
@media (max-width: 768px) {
  .chat-page-layout {
    grid-template-columns: 1fr;
  }
}
.chat-new-message-left {
  position: sticky;
  top: 1rem;
  min-width: 0;
  overflow: visible;
}
/* Single-column form so Type, Department, To, and message stack; no overflow */
.chat-new-message-panel.form-compact {
  display: flex;
  flex-direction: column;
  max-width: none;
  gap: 0;
}
.chat-new-message-panel .form-row {
  grid-column: unset;
  display: grid;
  grid-template-columns: minmax(0, 7em) 1fr;
  gap: 0 0.75rem;
  align-items: center;
  margin-bottom: 0.75rem;
  min-width: 0;
}
.chat-new-message-panel .form-row label:first-child {
  margin: 0;
  font-weight: 500;
  color: var(--slate-700);
  font-size: 0.875rem;
  white-space: nowrap;
  min-width: 0;
}
.chat-new-message-panel .form-row > select,
.chat-new-message-panel .form-row .form-input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.chat-new-message-panel .form-row.chat-new-message-row {
  /* Force full width: as a flex child we need width:100% and min-width:0 so we
     don't get sized by content (grid-template-columns is unset but the row can
     still be constrained by default flex min-width:auto). */
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  grid-template-columns: unset;
}
.chat-new-message-panel .form-actions.chat-new-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-top: 0.5rem;
}
.chat-new-message-panel .form-actions.chat-new-form-actions .chat-speak-icon-only {
  margin-right: 0.25rem;
}
.chat-new-message-panel .chat-new-message-row .chat-new-body-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.chat-new-body-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.chat-new-body-wrap .chat-input-expand,
.chat-new-body-wrap .chat-input-textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.chat-new-body-wrap .chat-input-expand {
  resize: none;
  min-height: 2.5rem;
  max-height: 12rem;
  overflow-y: auto;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  background: var(--color-surface, #fff);
}
.chat-new-body-wrap .chat-input-expand:focus {
  outline: none;
  border-color: var(--focus-border);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.chat-new-message-panel .chat-compose-mode-fieldset {
  border: none;
  margin: 0 0 0.75rem 0;
  padding: 0;
  min-width: 0;
}
.chat-new-message-panel .chat-compose-mode-legend {
  font-weight: 500;
  color: var(--slate-700);
  font-size: 0.875rem;
  padding: 0;
  margin: 0 0 0.35rem 0;
}
.chat-new-message-panel .chat-compose-mode-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: center;
}
.chat-new-message-panel .chat-compose-mode-option {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.875rem;
  cursor: pointer;
  margin: 0;
  font-weight: normal;
  color: var(--slate-700);
}
.chat-new-message-panel .chat-group-members-form-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  grid-template-columns: unset;
}
.chat-new-message-panel .chat-group-members-label {
  font-weight: 500;
  color: var(--slate-700);
  font-size: 0.875rem;
}
.chat-new-message-panel .chat-group-members-list {
  max-height: 14rem;
  overflow-y: auto;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius);
  padding: 0.35rem 0.5rem;
  background: var(--color-surface, #fff);
  min-height: 2.5rem;
}
.chat-new-message-panel .chat-group-member-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.25rem;
  cursor: pointer;
  font-size: 0.875rem;
  margin: 0;
  border-radius: var(--radius);
}
.chat-new-message-panel .chat-group-member-row:hover {
  background: var(--slate-50);
}
.chat-speak-icon-only {
  flex-shrink: 0;
}
.chat-speak-icon-only .lang-tb-speak-label {
  display: none;
}
.chat-speak-icon-only .lang-tb-speak-icon {
  margin-right: 0;
}
.chat-conversation-modal-input-wrap .chat-input-expand {
  resize: none;
  min-height: 2.5rem;
  max-height: 12rem;
  overflow-y: auto;
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
}
.chat-conversation-modal-actions .chat-speak-icon-only .lang-tb-speak-label {
  display: none;
}
.chat-type-select,
.chat-module-select {
  min-height: 44px;
  width: 100%;
  min-width: 0;
}
.chat-thread-item:hover {
  background: var(--slate-50);
}
.chat-thread-item-role {
  font-size: 0.8125rem;
  color: var(--slate-500);
  font-weight: normal;
  margin-left: 0.2rem;
}
.chat-thread-item-time {
  font-size: 0.8125rem;
  color: var(--slate-500);
  font-weight: normal;
  margin-left: 0.35rem;
}
.chat-thread-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 0.5rem;
}
.chat-thread-search-open {
  min-height: 44px;
}
.chat-thread-active-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 0.45rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-primary, #2563eb);
  background: var(--color-primary-pale, #eff6ff);
  border: 1px solid var(--color-primary, #2563eb);
}
.chat-thread-item-unread {
  background: var(--slate-100);
  border-left: 3px solid var(--color-primary, #2563eb);
}
.chat-thread-item-active {
  background: var(--color-primary-pale, #eff6ff);
}

/* Chat page: thread columns by module */
.chat-threads-columns {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem 1.5rem;
  align-items: start;
}
.chat-thread-column {
  min-width: 0;
  background: var(--slate-50, #f8fafc);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  overflow: hidden;
}
.chat-thread-column-header {
  margin: 0;
  padding: 0.6rem 1rem;
  font-size: 0.9375rem;
  font-weight: 600;
  background: var(--slate-200, #e2e8f0);
  color: var(--slate-800);
  border-bottom: 1px solid var(--slate-200);
}
.chat-thread-column .chat-thread-list {
  max-height: 20rem;
  overflow-y: auto;
}
.chat-search-modal-card {
  width: min(920px, 95vw);
  max-height: min(88vh, 900px);
  overflow: auto;
}
.chat-search-modal-header {
  margin-bottom: 0.5rem;
}
.chat-search-modal-title {
  margin: 0;
  font-size: 1.15rem;
}
.chat-search-form {
  display: grid;
  gap: 0.5rem;
}
.chat-search-form .form-row {
  min-height: 44px;
}
.chat-search-attachments-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.65rem;
}
.chat-search-actions {
  margin-top: 0.5rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
.chat-search-results-status {
  margin-top: 0.75rem;
  min-height: 1.5rem;
  font-size: 0.92rem;
  color: var(--slate-600);
}
.chat-search-results {
  margin-top: 0.25rem;
}
.chat-search-results-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  overflow: hidden;
}
.chat-search-result-item {
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid var(--slate-200);
  background: var(--color-surface, #fff);
  cursor: pointer;
}
.chat-search-result-item:last-child {
  border-bottom: none;
}
.chat-search-result-item:hover {
  background: var(--slate-50);
}
.chat-search-result-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}
.chat-search-result-thread {
  font-weight: 600;
  color: var(--slate-800);
}
.chat-search-result-time {
  font-size: 0.8rem;
  color: var(--slate-500);
}
.chat-search-result-meta {
  margin-top: 0.2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--slate-600);
  font-size: 0.84rem;
}
.chat-search-result-attachment {
  color: var(--color-primary, #2563eb);
}
.chat-search-result-preview {
  margin-top: 0.35rem;
  color: var(--slate-700);
  font-size: 0.9rem;
}
.chat-search-empty {
  border: 1px dashed var(--slate-300);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  color: var(--slate-600);
}
.chat-bubble-wrap-search-hit .chat-bubble {
  box-shadow: 0 0 0 2px var(--color-primary, #2563eb), 0 6px 20px rgba(37, 99, 235, 0.25);
}

/* Chat speak (microphone) button – same pattern as email editor */
.chat-speak-btn.lang-tb-speak {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.4rem 0.75rem;
  font-size: 0.9rem;
  background: var(--slate-100);
  border: 1px solid var(--slate-300);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--slate-700);
}
.chat-speak-btn.lang-tb-speak:hover {
  background: var(--slate-200);
  border-color: var(--slate-400);
}
.chat-speak-btn .lang-tb-speak-icon {
  font-style: normal;
  margin-right: 0.25rem;
}
/* Warming up: mic is starting, not ready yet – amber pulse */
.chat-speak-btn.lang-tb-speak-warming {
  background: var(--amber-100, #fef3c7);
  border-color: var(--amber-400, #fbbf24);
  color: var(--amber-800, #92400e);
  animation: chat-speak-warming-pulse 1.2s ease-in-out infinite;
}
@keyframes chat-speak-warming-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.35); }
  50%  { opacity: 0.92; box-shadow: 0 0 0 6px rgba(251, 191, 36, 0); }
}
.chat-speak-btn.lang-tb-speak-active {
  background: var(--red-100, #fee2e2);
  border-color: var(--red-400, #f87171);
  color: var(--red-700, #b91c1c);
}
.chat-speak-btn.lang-tb-speak-active:hover {
  background: var(--red-100, #fee2e2);
  border-color: var(--red-400, #f87171);
  color: var(--red-700, #b91c1c);
}
/* Keep red when listening on any speak button (email editor, etc.) */
.lang-tb-speak.lang-tb-speak-active:hover {
  background: var(--red-100, #fee2e2);
  border-color: var(--red-400, #f87171);
  color: var(--red-700, #b91c1c);
}
.lang-tb-speak .lang-tb-speak-icon {
  position: relative;
}
.lang-tb-speak .lang-tb-speak-eq {
  position: absolute;
  left: 50%;
  top: -0.82rem;
  transform: translateX(-50%);
  display: none;
  align-items: flex-end;
  gap: 3px;
  width: 18px;
  height: 14px;
  opacity: 1;
  pointer-events: none;
  z-index: 3;
  padding: 2px 3px;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.88);
  box-shadow: 0 3px 10px rgba(2, 6, 23, 0.35);
}
.lang-tb-speak.lang-tb-speak-hearing .lang-tb-speak-eq {
  display: inline-flex;
}
.lang-tb-speak .lang-tb-speak-eq i {
  display: block;
  width: 3px;
  min-height: 3px;
  height: 3px;
  border-radius: 2px;
  background: #22c55e;
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.2);
}
.lang-tb-speak.lang-tb-speak-hearing .lang-tb-speak-eq i:nth-child(1) { height: calc(3px + (var(--lang-speak-eq1, 0.08) * 10px)); }
.lang-tb-speak.lang-tb-speak-hearing .lang-tb-speak-eq i:nth-child(2) { height: calc(3px + (var(--lang-speak-eq2, 0.08) * 10px)); }
.lang-tb-speak.lang-tb-speak-hearing .lang-tb-speak-eq i:nth-child(3) { height: calc(3px + (var(--lang-speak-eq3, 0.08) * 10px)); }
.lang-tb-speak.lang-tb-speak-hearing .lang-tb-speak-eq i:nth-child(4) { height: calc(3px + (var(--lang-speak-eq4, 0.08) * 10px)); }
.lang-email-speak-input-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
}
.lang-email-speak-input-title {
  font-size: 0.8rem;
  color: var(--slate-600, #475569);
  white-space: nowrap;
}
.lang-email-speak-input-select.form-input {
  min-height: 32px;
  height: 32px;
  padding: 0 0.4rem;
  font-size: 0.8rem;
  min-width: 12rem;
  max-width: 16rem;
}
@media (max-width: 640px) {
  .lang-email-speak-input-wrap {
    width: 100%;
    margin-left: 0;
  }
  .lang-email-speak-input-select.form-input {
    min-width: 0;
    max-width: none;
    width: 100%;
  }
}
.community-speech-btn .lang-tb-speak-icon {
  position: relative;
  display: inline-block;
  line-height: 1;
}
.community-speech-inline {
  display: inline-flex !important;
  align-items: center;
  margin-left: 0.35rem;
  flex: 0 0 auto;
  white-space: nowrap;
  max-width: 100%;
}
.community-speech-cluster {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex: 0 0 auto;
  white-space: nowrap;
}
.composer-toolbar .community-speech-cluster {
  margin-left: 0.15rem;
}
.community-speech-inline .lang-email-speak-bar-inner {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: nowrap;
}
.community-speech-inline .lang-email-speak-bar-label {
  font-size: 0.8rem;
  color: var(--slate-600, #475569);
  white-space: nowrap;
}
.composer-toolbar .community-speech-inline .lang-email-speak-input-wrap {
  margin-left: 0.2rem;
  width: auto;
  max-width: none;
}
.composer-toolbar .community-speech-inline .lang-email-speak-input-select.form-input {
  min-width: 9rem;
  max-width: 12rem;
}
.community-reply-speech-host .community-speech-inline {
  margin-left: 0;
}
.community-reply-speech-host .community-speech-cluster {
  flex-direction: row-reverse;
}
.community-reply-speech-host .community-speech-inline {
  margin-left: 0;
  margin-right: 0.35rem;
}
.community-speech-btn.lang-tb-speak-warming {
  background: var(--amber-100, #fef3c7);
  border-color: var(--amber-400, #fbbf24);
  color: var(--amber-800, #92400e);
  animation: chat-speak-warming-pulse 1.2s ease-in-out infinite;
}
.community-speech-btn.lang-tb-speak-active,
.community-speech-btn.lang-tb-speak-active:hover {
  background: var(--red-100, #fee2e2);
  border-color: var(--red-500, #ef4444);
  color: var(--red-700, #b91c1c);
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.14);
}
.community-speech-btn.lang-tb-speak-active .lang-tb-speak-icon::after {
  content: '';
  position: absolute;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  top: -0.12rem;
  right: -0.18rem;
  background: #dc2626;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95);
  animation: community-speech-rec-dot 1s ease-in-out infinite;
}
@keyframes community-speech-rec-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.82); }
}

.tsv-import-anyway-bar {
  margin-bottom: 1rem;
  border: 1px solid var(--color-primary);
  background: var(--color-primary-pale, #eff6ff);
  padding: 1rem 1.25rem;
}
.tsv-import-anyway-bar-heading {
  margin: 0 0 0.25rem;
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-text);
}
.tsv-import-anyway-bar-hint {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  color: var(--color-text-muted, var(--slate-600));
}
.tsv-import-anyway-bar .tsv-import-anyway-form {
  margin: 0;
}
.tsv-import-anyway-btn {
  min-height: 44px;
  padding: 0.5rem 1.25rem;
  font-size: 1rem;
  font-weight: 500;
  background: var(--color-primary);
  color: #fff;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  cursor: pointer;
  display: inline-block;
}
.tsv-import-anyway-btn:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: #fff;
}
.tsv-import-anyway-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring, rgba(59, 130, 246, 0.4));
}
/* TSV error report: layout and inline button */
.tsv-error-report {
  border: 1px solid var(--error-red);
  background: var(--error-bg);
  margin-bottom: 1rem;
}
.tsv-error-report-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1rem;
}
.tsv-error-list-wrap {
  flex: 1;
  min-width: 200px;
  max-height: 20rem;
  overflow-y: auto;
}
.tsv-error-report-title,
.tsv-error-report-intro {
  margin: 0 0 0.75rem;
  color: var(--error-red);
}
.tsv-error-report-intro { color: var(--color-text); }
.tsv-error-list {
  margin: 0;
  padding-left: 1.25rem;
}
.tsv-import-anyway-wrap {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.5rem;
}
.tsv-import-anyway-wrap .tsv-import-anyway-heading { margin: 0; font-weight: 600; font-size: 0.9375rem; }
.tsv-import-anyway-wrap .tsv-import-anyway-hint { margin: 0; font-size: 0.875rem; color: var(--color-text-muted, var(--slate-600)); }
.tsv-import-anyway-wrap .tsv-import-anyway-form { margin: 0; }

/* Admin compliance configuration: one table per section, section title fixed in left column */
.compliance-config-page .compliance-page-lead {
  line-height: 1.6;
  color: var(--color-text, var(--slate-700));
}
.compliance-config-page .compliance-page-disclaimer {
  margin-top: 0.75rem;
}
.compliance-config-page .compliance-page-links {
  margin: 1rem 0;
}
.compliance-config-form {
  max-width: 960px;
}
.compliance-config-form .form-input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.compliance-config-form .compliance-form-actions {
  margin-top: 0.25rem;
}
.compliance-retention-hints .compliance-retention-hint-line {
  margin: 0 0 0.5rem;
}
.compliance-retention-hints .compliance-retention-hint-line:last-child {
  margin-bottom: 0;
}

/* Admin → Data protection: GDPR anonymisation / retention callout */
.data-protection-anonym-callout {
  margin-top: 1.75rem;
  padding: 1rem 1.15rem 1.15rem;
  background: var(--slate-50, #f8fafc);
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: var(--radius, 8px);
  border-left: 4px solid var(--blue-500, #3b82f6);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.data-protection-anonym-callout h3 {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  color: var(--slate-900, #0f172a);
}
.data-protection-anonym-callout__intro {
  margin: 0 0 0.75rem;
  line-height: 1.6;
  color: var(--slate-700, #334155);
  font-size: 0.9375rem;
}
.data-protection-anonym-callout__sub {
  margin: 1rem 0 0.35rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--slate-800, #1e293b);
}
.data-protection-anonym-callout__sub:first-of-type {
  margin-top: 0.25rem;
}
.data-protection-anonym-callout__list {
  margin: 0.25rem 0 0;
  padding-left: 1.25rem;
  line-height: 1.65;
  color: var(--slate-700, #334155);
  font-size: 0.9375rem;
}
.data-protection-anonym-callout__list li + li {
  margin-top: 0.35rem;
}
.compliance-section-table-wrap {
  overflow-x: auto;
  margin-bottom: 1.5rem;
  -webkit-overflow-scrolling: touch;
}
.compliance-section-table {
  width: 100%;
  min-width: min(100%, 36rem);
  border-collapse: collapse;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius, 8px);
  overflow: hidden;
  background: #fff;
  box-sizing: border-box;
}
.compliance-section-table th,
.compliance-section-table td {
  padding: 0.65rem 0.75rem;
  vertical-align: top;
  border-bottom: 1px solid var(--slate-100);
  box-sizing: border-box;
}
.compliance-section-table tbody tr:last-child th,
.compliance-section-table tbody tr:last-child td {
  border-bottom: none;
}
.compliance-section-sidebar {
  width: 11.5rem;
  min-width: 9rem;
  max-width: 30%;
  background: var(--slate-50);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--slate-800);
  text-align: left;
  line-height: 1.35;
  border-right: 1px solid var(--slate-200);
}
.compliance-field-label {
  width: 12rem;
  min-width: 8rem;
  max-width: 28%;
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--slate-700);
  text-align: left;
}
.compliance-field-label label {
  font-weight: inherit;
  color: inherit;
  margin: 0;
  cursor: pointer;
}
.compliance-field-cell {
  min-width: 0;
}
.compliance-section-help {
  font-size: 0.9rem;
  color: var(--color-text-muted, var(--slate-600));
  line-height: 1.5;
}
.compliance-field-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1.25rem;
  align-items: start;
}
.compliance-field-group label {
  display: block;
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--slate-700);
  margin: 0 0 0.25rem;
}
.compliance-section-table .compliance-field-cell label.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--slate-700);
  min-height: 44px;
}
.compliance-section-table .compliance-field-cell label.form-checkbox input {
  margin-top: 0.2rem;
  flex-shrink: 0;
  width: auto;
  min-height: 0;
}
@media (max-width: 640px) {
  .compliance-field-split {
    grid-template-columns: 1fr;
  }
}

/* Compact form: label left of input, spreadsheet-like, optional 2-column layout */
.form-compact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem 2rem;
  align-items: start;
  max-width: 960px;
}

/* Contact module → Program email page: one field per row (full width) */
.contact-email-send-form.form-compact {
  grid-template-columns: 1fr;
  max-width: 42rem;
}
.contact-email-send-form.form-compact .form-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  min-height: 0;
}
.contact-email-send-form.form-compact .form-row label:first-child {
  padding-right: 0;
}

/* Widgets and modals: stack fields in a single column so labels and inputs wrap naturally when the widget column is narrow. */
.modal-card .form-compact {
  grid-template-columns: 1fr;
  max-width: none;
  width: 100%;
}
/* Module email in modal: label above field, full-width themed controls */
.modal-card .module-email-modal-form.form-compact .form-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  min-height: 0;
  margin-bottom: 0.5rem;
}
.modal-card .module-email-modal-form.form-compact .form-row label:first-child,
.modal-card .module-email-modal-form.form-compact .form-row > .form-label {
  padding-right: 0;
}
.modal-card .module-email-modal-form.form-compact .form-row > input,
.modal-card .module-email-modal-form.form-compact .form-row > select,
.modal-card .module-email-modal-form.form-compact .form-row > textarea {
  background: var(--form-field-bg, var(--color-surface, #fff));
  color: inherit;
}

/* Super Dash widgets: responsive form grid (2 columns when wide, 1 when narrow). */
.super-dash-widget .form-compact,
.super-dash-widget-body .form-compact {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* Maintenance request widget: adapt columns to widget width (stack on narrow, two columns when wide enough). */
.maintenance-request-widget .form-compact {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.form-compact .form-row {
	/* Didn't look right */
  /*display: grid;
  grid-template-columns: 11em 1fr;*/
  gap: 0 0.6rem;
  align-items: center;
  margin-bottom: 0.35rem;
  min-height: 2.25rem;
}
.form-compact .form-row label:first-child,
.form-compact .form-row .form-label {
  margin: 0;
  font-weight: 500;
  color: var(--slate-700);
  font-size: 0.875rem;
  padding-right: 0.25rem;
}
.form-compact .form-row > input,
.form-compact .form-row > select,
.form-compact .form-row > textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--form-input-border, var(--slate-300));
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
  box-sizing: border-box;
  background: var(--form-field-bg, var(--color-surface, #fff));
}
.form-compact .form-row > textarea {
  min-height: 72px;
  resize: vertical;
}
.form-compact .form-row .form-readonly {
  color: var(--slate-600);
  font-size: 0.9375rem;
}
.form-compact .form-row > input:focus,
.form-compact .form-row > select:focus,
.form-compact .form-row > textarea:focus {
  outline: none;
  border-color: var(--focus-border);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.form-compact .form-row > input:hover,
.form-compact .form-row > select:hover,
.form-compact .form-row > textarea:hover {
  border-color: var(--form-input-border-hover, var(--slate-400));
}

/* Accounting widget: keep date labels above inputs, but keep both fields on one row */
.accounting-recent-widget .accounting-recent-range.form-compact {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.accounting-recent-widget .accounting-recent-range .form-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.25rem;
  margin-bottom: 0.35rem;
}
.accounting-recent-widget .accounting-recent-range .form-row label {
  margin: 0;
  padding-right: 0;
  font-weight: 500;
  color: var(--slate-700);
  font-size: 0.875rem;
}
/* Fieldset with legend above stacked radio options (e.g. Add widget Availability) */
.form-fieldset-label-above {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem 0;
  border: none;
  padding: 0;
  margin: 0;
}
.form-fieldset-label-above legend {
  font-weight: 500;
  color: var(--slate-700);
  font-size: 0.875rem;
  margin: 0 0 0.15rem 0;
  padding: 0;
}
.form-fieldset-label-above label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
/* Form inputs inside form-row wrappers (e.g. chat new message textarea in flex wrap) */
.form-compact .form-row .form-input,
.form-compact .form-row select.form-control,
.form-compact .form-row textarea.form-control,
.form-compact .form-row input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
.form-compact .form-row .chat-input-textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--form-input-border, var(--slate-300));
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
  box-sizing: border-box;
  background: var(--form-field-bg, var(--color-surface, #fff));
}
.form-compact .form-row .chat-input-textarea {
  min-height: 80px;
  resize: vertical;
  flex: 1;
  min-width: 200px;
}
.form-compact .form-row .form-input:focus,
.form-compact .form-row select.form-control:focus,
.form-compact .form-row textarea.form-control:focus,
.form-compact .form-row input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):focus,
.form-compact .form-row .chat-input-textarea:focus {
  outline: none;
  border-color: var(--focus-border);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.form-compact .form-row .form-input:hover,
.form-compact .form-row select.form-control:hover,
.form-compact .form-row textarea.form-control:hover,
.form-compact .form-row input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):hover,
.form-compact .form-row .chat-input-textarea:hover {
  border-color: var(--form-input-border-hover, var(--slate-400));
}
.form-compact .form-row-full {
  grid-column: 1 / -1;
}
.form-compact .form-row-full > input,
.form-compact .form-row-full > textarea {
  max-width: 100%;
}

/* Community new announcement widget: priority + expires on one row */
.community-widget-new-announcement .community-widget-new-announcement-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem 1.25rem;
  align-items: start;
  margin-bottom: 0.35rem;
}
.community-widget-new-announcement .community-widget-new-announcement-meta-cell {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.community-widget-new-announcement .community-widget-new-announcement-meta-cell label {
  margin: 0;
  font-weight: 500;
  color: var(--slate-700);
  font-size: 0.875rem;
  padding-right: 0.25rem;
}
.community-widget-new-announcement .community-widget-new-announcement-meta-cell select,
.community-widget-new-announcement .community-widget-new-announcement-meta-cell input[type="date"] {
  width: 100%;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--form-input-border, var(--slate-300));
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
  box-sizing: border-box;
  background: var(--form-field-bg, var(--color-surface, #fff));
}
.community-widget-new-announcement .community-widget-new-announcement-meta-cell select:focus,
.community-widget-new-announcement .community-widget-new-announcement-meta-cell input[type="date"]:focus {
  outline: none;
  border-color: var(--focus-border);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.community-widget-new-announcement .community-widget-new-announcement-meta-cell select:hover,
.community-widget-new-announcement .community-widget-new-announcement-meta-cell input[type="date"]:hover {
  border-color: var(--form-input-border-hover, var(--slate-400));
}
@media (max-width: 640px) {
  .community-widget-new-announcement .community-widget-new-announcement-meta {
    grid-template-columns: 1fr;
  }
}

/* Facilities reservation add/edit: date pair & time pair rows inside 2-col form-compact */
.facilities-reservation-form.form-compact {
  max-width: 36rem;
}
.facilities-reservation-form .facilities-reservation-pair-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem 1.25rem;
  align-items: start;
  margin-bottom: 0.35rem;
}
.facilities-reservation-form .facilities-reservation-pair-cell {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.facilities-reservation-form .facilities-reservation-pair-cell label {
  margin: 0;
  font-weight: 500;
  color: var(--slate-700);
  font-size: 0.875rem;
}
.facilities-reservation-form .facilities-reservation-pair-cell .form-input,
.facilities-reservation-form .facilities-reservation-pair-cell select.form-input {
  width: 100%;
  min-width: 0;
}
@media (max-width: 640px) {
  .facilities-reservation-form .facilities-reservation-pair-row {
    grid-template-columns: 1fr;
  }
}
.form-compact .form-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  font-weight: normal;
  margin: 0;
}
.form-compact .form-checkbox input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin: 0;
  cursor: pointer;
}
/* Form rows: buttons in second column stay normal size (not 100% width) */
.form-row .btn,
.form-builder-add .form-row .btn,
.form-compact .form-row .btn {
  width: auto;
  min-width: 0;
}
/* Small normal checkboxes for all forms (labels, required, etc.) */
.form-checkbox input[type="checkbox"],
.form-group input[type="checkbox"],
label input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin: 0 0.35rem 0 0;
  cursor: pointer;
  vertical-align: middle;
}
/* Scrolling listbox: same width as other form inputs */
.form-tables-listbox,
.form-fields-listbox {
  max-width: 24rem;
  width: 100%;
}
.form-compact .form-actions {
  grid-column: 1 / -1;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border-light);
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
/* Meetings time rows: label then inputs on same line (no flex/column) */
.form-compact .form-row-two.meetings-time-row {
  display: block;
  margin-bottom: 0.5rem;
}
.form-compact .form-row-two.meetings-time-row .form-cell-label {
  display: inline-block;
  margin: 0 0.5rem 0 0;
  font-weight: 500;
  color: var(--slate-700);
  font-size: 0.875rem;
  vertical-align: middle;
}
.form-compact .form-row-two.meetings-time-row .form-cell.meetings-time-cell {
  display: inline-block;
  vertical-align: middle;
}
.form-compact .form-row-two.meetings-time-row .form-cell.meetings-time-cell select {
  display: inline-block;
  width: auto;
  min-width: 4rem;
  min-height: 44px;
  margin: 0 0.1rem;
  vertical-align: middle;
}
.form-compact .form-row-two.meetings-time-row .form-cell.meetings-time-cell span {
  display: inline;
  margin: 0 0.1rem;
  vertical-align: middle;
}

/* Meetings create/edit form: no grid/flex, label on top, full-width inputs, narrower form */
.meetings-form {
  max-width: 24rem;
  display: block;
}
/* Remove all grid from meetings forms (override form-compact and reserve-grid) */
.meetings-form.form-compact,
.meetings-form.reserve-grid,
.meeting-detail-edit-form.meetings-form.form-compact {
  display: block;
  grid-template-columns: none;
  grid-template-rows: none;
  gap: 0;
}
/* Override reserve-grid's two-column row so label and field are not far apart */
.meetings-form.reserve-grid .form-row-two,
.meeting-detail-edit-form.meetings-form .form-row-two {
  display: block;
  margin-bottom: 0.75rem;
}
.meetings-form.reserve-grid .form-row-two .form-cell-label,
.meeting-detail-edit-form.meetings-form .form-row-two .form-cell-label {
  display: block;
  margin: 0 0 0.35rem 0;
  font-weight: 500;
  color: var(--slate-700);
  font-size: 0.875rem;
}
.meetings-form.reserve-grid .form-row-two .form-cell,
.meeting-detail-edit-form.meetings-form .form-row-two .form-cell {
  display: block;
  width: 100%;
}
.meetings-form.reserve-grid .form-row-two .form-cell input.form-control,
.meetings-form.reserve-grid .form-row-two .form-cell textarea.form-control,
.meeting-detail-edit-form.meetings-form .form-row-two .form-cell input.form-control,
.meeting-detail-edit-form.meetings-form .form-row-two .form-cell textarea.form-control {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
}
.meetings-form.reserve-grid .form-row-two .form-cell textarea.form-control,
.meeting-detail-edit-form.meetings-form .form-row-two .form-cell textarea.form-control {
  min-height: 4.5rem;
  resize: vertical;
}
/* Time rows: label then inputs inline (override block layout above) */
.meetings-form .form-row-two.meetings-time-row .form-cell-label,
.meeting-detail-edit-form.meetings-form .form-row-two.meetings-time-row .form-cell-label {
  display: inline-block;
  margin: 0 0.5rem 0 0;
  margin-bottom: 0;
  vertical-align: middle;
}
.meetings-form .form-row-two.meetings-time-row .form-cell,
.meeting-detail-edit-form.meetings-form .form-row-two.meetings-time-row .form-cell {
  display: inline-block;
  width: auto;
}
/* Submit row: no label spacing */
.meetings-form .form-row-two .form-cell-label:empty,
.meeting-detail-edit-form.meetings-form .form-row-two .form-cell-label:empty {
  display: none;
}

/* Reservation forms (coordinator add, leader add/edit): single column + two-item rows, modern inputs */

.reserve-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 42rem;
}
.reserve-grid .form-actions {
  grid-column: 1 / -1;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border-light);
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.reserve-grid .form-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* Single field per row: label to the left */
.reserve-grid > .form-cell {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.reserve-grid > .form-cell .form-cell-label {
  margin-bottom: 0;
  min-width: 0;
  flex-shrink: 0;
}
.reserve-grid > .form-cell input,
.reserve-grid > .form-cell select,
.reserve-grid > .form-cell textarea {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 16rem;
}
.reserve-grid > .form-cell textarea {
  flex: 1 1 auto;
  max-width: 24rem;
}
/* Full-width cells (e.g. coordinator, department): label above, input/select full width */
.reserve-grid > .form-cell.form-cell-full {
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}
.reserve-grid > .form-cell.form-cell-full .form-cell-label {
  margin-bottom: 0.5rem;
  text-align: left;
}
.reserve-grid > .form-cell.form-cell-full input,
.reserve-grid > .form-cell.form-cell-full select,
.reserve-grid > .form-cell.form-cell-full textarea {
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  min-width: 0;
  text-align: left;
}
/* Two or more fields per row: label above */
.reserve-grid .form-row-two .form-cell {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.reserve-grid .form-row-two .form-cell .form-cell-label {
  margin-bottom: 0.5rem;
  min-width: 0;
  text-align: center;
}
.reserve-grid .form-row-two .form-cell input,
.reserve-grid .form-row-two .form-cell select,
.reserve-grid .form-row-two .form-cell textarea {
  flex: none;
  min-width: 0;
}
.reserve-grid .form-row-two .form-cell textarea {
  width: 100%;
  max-width: 24rem;
}
.reserve-grid .form-cell-label {
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--slate-700);
  font-size: 0.9375rem;
  line-height: 1.3;
}
.reserve-grid .form-cell input,
.reserve-grid .form-cell select,
.reserve-grid .form-cell textarea {
  width: auto;
  max-width: 16rem;
  min-width: 0;
  min-height: 44px;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--form-input-border, var(--slate-300));
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: inherit;
  line-height: 1.4;
  color: var(--color-text);
  background: var(--form-field-bg, var(--color-surface, #fff));
  transition: border-color var(--transition), box-shadow var(--transition);
  box-sizing: border-box;
  text-align: center;
}
.reserve-grid .form-cell textarea {
  width: 100%;
  min-width: 0;
  max-width: 24rem;
  text-align: left;
}
.reserve-grid .form-cell select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.25rem;
}
.reserve-grid .form-cell textarea {
  padding: 0.625rem 0.875rem;
  min-height: 5rem;
  resize: vertical;
}
.reserve-grid .form-cell input:focus,
.reserve-grid .form-cell select:focus,
.reserve-grid .form-cell textarea:focus {
  outline: none;
  border-color: var(--focus-border);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.reserve-grid .form-cell input[readonly] {
  background: var(--slate-100);
  color: var(--slate-600);
  cursor: default;
}
.reserve-grid .form-cell .input-narrow {
  max-width: 8rem;
}
.reserve-grid .form-cell .input-medium {
  max-width: 12rem;
}
.reserve-grid .form-row-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 2rem;
}
.reserve-grid .form-row-two .form-cell input,
.reserve-grid .form-row-two .form-cell select,
.reserve-grid .form-row-two .form-cell textarea {
  width: auto;
  max-width: 16rem;
  min-width: 0;
}
.reserve-grid .form-row-two .form-cell textarea {
  width: 100%;
  max-width: 24rem;
}
@media (max-width: 640px) {
  .reserve-grid {
    gap: 1.25rem;
  }
  /* On narrow screens, single-cell rows stack (label above) for readability */
  .reserve-grid > .form-cell {
    flex-direction: column;
    align-items: stretch;
  }
  .reserve-grid > .form-cell .form-cell-label {
    margin-bottom: 0.5rem;
    min-width: 0;
    text-align: center;
  }
  .reserve-grid > .form-cell input,
  .reserve-grid > .form-cell select,
  .reserve-grid > .form-cell textarea {
    min-width: 0;
    max-width: none;
  }
  .reserve-grid .form-cell input,
  .reserve-grid .form-cell select,
  .reserve-grid .form-cell textarea {
    max-width: none;
    min-width: 0;
    min-height: 48px;
    font-size: 16px;
    padding: 0.75rem 1rem;
  }
  .reserve-grid .form-cell select {
    padding: 0.75rem 2.5rem 0.75rem 1rem;
  }
  .reserve-grid .form-cell textarea {
    min-height: 5.5rem;
  }
  /* Same layout as desktop: keep two columns on form-row-two for mobile */
  .reserve-grid .form-row-two {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1.25rem;
  }
  .reserve-grid .form-row-two .form-cell {
    min-width: 0;
  }
  .reserve-grid .form-row-two .form-cell input,
  .reserve-grid .form-row-two .form-cell select,
  .reserve-grid .form-row-two .form-cell textarea {
    min-width: 0;
  }
  .reserve-grid .form-actions .btn {
    min-height: 48px;
    padding: 0.75rem 1.25rem;
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* Leader reservation form: all elements min-width 10px */
#leader-reservation-form .form-cell,
#leader-reservation-form .form-cell-label,
#leader-reservation-form input,
#leader-reservation-form select,
#leader-reservation-form textarea,
#leader-reservation-form .form-row-two,
#leader-reservation-form .form-row-two .form-cell,
#leader-reservation-form .form-actions,
#leader-reservation-form .form-actions .btn {
  min-width: 10px;
}

/* Inline reservation form: keep form on the left, table stays visible (form does not expand full width) */
.reservation-inline-edit-row .reservation-inline-edit-cell {
  display: flex;
  align-items: flex-start;
  gap: 0;
}
.reservation-inline-edit-row .reservation-inline-edit-wrap {
  max-width: 32rem;
  flex: 0 0 auto;
  min-width: 0;
}

/* Inline reservation form (opened from dashboard / reservations list): compressed, less space between rows */
.reservation-inline-edit-wrap .reserve-grid {
  gap: 0.5rem;
  max-width: none;
}
.reservation-inline-edit-wrap .reserve-grid .form-cell-label {
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
}
.reservation-inline-edit-wrap .reserve-grid > .form-cell .form-cell-label {
  margin-bottom: 0;
}
.reservation-inline-edit-wrap .reserve-grid .form-cell input,
.reservation-inline-edit-wrap .reserve-grid .form-cell select,
.reservation-inline-edit-wrap .reserve-grid .form-cell textarea {
  min-height: 36px;
  padding: 0.35rem 0.5rem;
  font-size: 0.9375rem;
}
.reservation-inline-edit-wrap .reserve-grid .form-cell textarea {
  min-height: 3.5rem;
}
.reservation-inline-edit-wrap .reserve-grid .form-row-two {
  gap: 0.5rem 0.75rem;
}
.reservation-inline-edit-wrap .reserve-grid .form-actions {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top-width: 1px;
}
.reservation-inline-edit-wrap.section-card {
  padding: 0.75rem;
}

/* Coordinator department rows: same look as other form inputs */
.coord-dept-row select,
.coord-dept-row input[type="date"],
.coord-dept-row input[type="text"] {
  width: 100%;
  min-height: 36px;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--form-input-border, var(--slate-300));
  border-radius: var(--radius);
  font-size: 0.9375rem;
  font-family: inherit;
  transition: border-color var(--transition);
  box-sizing: border-box;
  background: var(--form-field-bg, var(--color-surface, #fff));
}
.coord-dept-row select:focus,
.coord-dept-row input:focus {
  outline: none;
  border-color: var(--focus-border);
}
.coord-dept-row select {
  min-width: 0;
}
@media (max-width: 720px) {
  .form-compact {
    grid-template-columns: 1fr;
  }
}

/* Community reply form: clean, spacious, works on mobile */
.community-reply-form {
  margin-top: 0.75rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--color-border-light);
}
.community-reply-form textarea {
  width: 100%;
  min-height: 80px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--form-input-border, var(--slate-300));
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
  box-sizing: border-box;
  transition: border-color var(--transition), box-shadow var(--transition);
  display: block;
  background: var(--form-field-bg, var(--color-surface, #fff));
}
.community-reply-form textarea:focus {
  outline: none;
  border-color: var(--focus-border);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
.community-reply-form textarea::placeholder {
  color: var(--slate-500);
}
.community-reply-actions {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.community-reply-actions .btn {
  min-height: 40px;
  padding: 0.5rem 1rem;
}

/* Notification preference row: two columns — narrow checkbox column, then text */
.notification-pref-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0.4rem 0;
  min-height: 2rem;
}
.notification-pref-row input[type="checkbox"] {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  cursor: pointer;
  grid-column: 1;
}
.notification-pref-row .notification-pref-label {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--slate-700);
  grid-column: 2;
}

/* ---- Tables ---- */
table.data {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border-light);
}
table.data th,
table.data td {
  padding: 0.75rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border-light);
}
table.data th {
  background: var(--color-primary-pale);
  font-weight: 600;
  color: var(--slate-800);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
table.data tr:last-child td { border-bottom: none; }
table.data tbody tr {
  transition: background var(--transition);
}
table.data tbody tr:hover {
  background: var(--slate-100, #f1f5f9);
}
table.data td select.form-input,
table.data td select.form-control,
table.data td input.form-input,
table.data td input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
table.data td textarea.form-input,
table.data td textarea.form-control {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
/* Schools settings_level: school definition fields — full admin content width */
.schools-settings-definition-fields {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.schools-settings-definition-fields .schools-settings-def-fields-list-wrap {
  width: 100%;
  max-width: none;
  margin-bottom: 1.25rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.schools-settings-definition-fields .form-compact.schools-definition-fields-controls {
  max-width: none;
  width: 100%;
  box-sizing: border-box;
}
.schools-settings-definition-fields .schools-definition-fields-hint {
  grid-column: 1 / -1;
}
.schools-settings-definition-fields > .tsv-import-form {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
/* Legacy: list wrap if used outside .schools-settings-definition-fields */
.schools-settings-def-fields-list-wrap {
  width: 100%;
  max-width: 100%;
  margin-bottom: 1.25rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.schools-settings-def-fields-list-wrap table.data,
.schools-settings-definition-fields .schools-settings-def-fields-list-wrap table.data {
  width: 100%;
}

/* Schools → Field definitions: compact remove (×) in definition table */
button.schools-def-field-remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  min-height: 2.25rem;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 1.375rem;
  line-height: 1;
  font-weight: 500;
  color: var(--slate-600);
  background: var(--color-surface, #fff);
  border: 1px solid var(--slate-300);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
button.schools-def-field-remove-btn:hover {
  color: var(--red-600);
  border-color: var(--slate-400);
  background: var(--slate-50);
}
button.schools-def-field-remove-btn:focus {
  outline: none;
  border-color: var(--focus-border);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
table.data th.schools-def-field-actions-th {
  width: 3.5rem;
  text-align: center;
}
table.data td.schools-def-field-actions-cell {
  width: 3.5rem;
  vertical-align: middle;
  text-align: center;
}
/* Clickable rows: stronger hover contrast across site and themes */
tr[data-href]:hover,
table.data tbody tr[data-href]:hover,
.data-table tbody tr[data-href]:hover,
.data-table tbody tr.super-dash-table-row-clickable:hover {
  background: var(--slate-200, #e2e8f0) !important;
}
.data-table tbody tr:hover {
  background: var(--slate-100, #f1f5f9);
}
tr[data-href] {
  cursor: pointer;
}

/* ---- Messages ---- */
.success,
p.success {
  padding: 0.875rem 1rem;
  background: var(--success-bg);
  color: var(--success-green);
  border-radius: var(--radius);
  border-left: 4px solid var(--success-green);
  margin-bottom: 1rem;
  font-weight: 500;
}
.error,
p.error {
  padding: 0.875rem 1rem;
  background: var(--error-bg);
  color: var(--color-error);
  border-radius: var(--radius);
  border-left: 4px solid var(--color-error);
  margin-bottom: 1rem;
}
.success-box {
  background: var(--success-bg) !important;
  border: 1px solid rgba(5, 150, 105, 0.3) !important;
  border-radius: var(--radius-lg) !important;
  padding: 1.25rem !important;
  margin: 1rem 0 !important;
}

/* ---- Dashboard welcome ---- */
.dashboard > p {
  background: var(--color-surface);
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  border: 1px solid var(--color-border-light);
  color: var(--slate-700);
  margin: 0;
}

/* ---- Code / misc ---- */
code {
  background: var(--slate-100);
  padding: 0.2em 0.4em;
  border-radius: var(--radius-sm);
  font-size: 0.9em;
}
hr {
  border: none;
  height: 1px;
  background: var(--color-border);
  margin: 1.5rem 0;
}

/* ---- Mobile: user-facing pages adapt well to small screens ---- */
/* Header mobile menu: also at 769–900px so tablets/narrow desktop get hamburger instead of cramped desktop nav */
@media (max-width: 900px) {
  .site-header {
    flex-wrap: wrap;
    padding: 0.28rem 0.65rem;
    gap: 0.15rem;
  }
  .site-header-row {
    width: 100%;
    order: 1;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.15rem 0.55rem;
  }
  .site-header.open .site-header-row {
    flex-wrap: wrap;
  }
  .site-header-row .site-header-brand {
    order: 1;
  }
  .site-header-row .site-header-menu-btn {
    order: 2;
    margin-left: auto;
    align-self: center;
  }
  .site-header-row .site-header-mobile-utils {
    order: 3;
    width: 100%;
  }
  .site-header-row .site-header-nav-wrap {
    order: 4;
    width: 100%;
    flex: 0 0 auto;
  }
  .site-header-menu-btn {
    display: flex;
    position: relative;
    z-index: 100;
  }
  .site-header-mobile-utils {
    display: none;
    width: 100%;
    order: 2;
    justify-content: flex-end;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: nowrap;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    margin: 0;
    padding: 0;
    transition: max-height 0.25s ease, opacity 0.2s ease, visibility 0s linear 0.25s;
  }
  .site-header.open .site-header-mobile-utils {
    display: flex;
    max-height: 4rem;
    opacity: 1;
    visibility: visible;
    transition: max-height 0.25s ease, opacity 0.2s ease, visibility 0s;
  }
  .site-header-mobile-utils-left,
  .site-header-mobile-utils-right {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: nowrap;
  }
  .site-header-mobile-utils-left {
    margin-right: auto;
  }
  .site-header-mobile-utils .header-lang-form select {
    margin: 0;
    min-height: 1.7rem;
    height: 1.7rem;
    padding: 0 0.25rem;
    font-size: 0.78rem;
    line-height: 1.1;
  }
  .site-header-mobile-utils a,
  .site-header-mobile-utils .site-admin-badge {
    font-size: 0.78rem;
    min-height: 1.7rem;
    padding: 0 0.35rem;
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-sm);
    color: rgba(255,255,255,0.96);
    text-decoration: none;
  }
  .site-header-mobile-utils a.site-header-mobile-me-link {
    font-size: 1.05rem;
    font-weight: 600;
    min-height: 2.25rem;
    padding: 0 0.6rem;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.3);
  }
  .site-header-mobile-utils a:hover {
    background: rgba(255,255,255,0.16);
    color: var(--white);
  }
  /* In mobile view do not show the edit (translation) pencil for site admin */
  .site-header-mobile-utils .header-translation-toggle {
    display: none !important;
  }
  .site-header h1 {
    font-size: 1rem;
  }
  .site-header-logo {
    max-height: 1.5rem;
  }
  .site-header-nav-wrap {
    order: 2;
    width: 100%;
    flex: 0 0 auto;
    min-height: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    margin: 0;
    padding: 0;
    transition: max-height 0.3s ease, opacity 0.25s ease, visibility 0s linear 0.3s;
    display: none;
  }
  .site-header.open .site-header-nav-wrap {
    display: block;
    max-height: 85vh;
    opacity: 1;
    visibility: visible;
    transition: max-height 0.3s ease, opacity 0.25s ease, visibility 0s;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: rgba(30, 58, 138, 0.98);
    border-radius: var(--radius-sm);
    margin-top: 0.5rem;
    box-shadow: var(--shadow-md);
  }
  .site-header-wrapper .site-header.open ~ .header-active-triangle {
    display: none !important;
  }
  .site-header nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-right: 0;
    padding: 0.5rem 0;
    background: transparent;
    border-radius: 0;
    margin-top: 0;
    box-shadow: none;
    min-height: 0;
  }
  .site-header-nav-modules {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    width: 100%;
    order: 0;
    flex: 0 0 auto;
    padding: 0.5rem;
  }
  .site-header-nav-modules .header-nav-group {
    display: contents;
  }
  .site-header-nav-modules .header-nav-group-label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.5rem 0.6rem;
    font-size: 1.05rem;
    font-weight: 600;
    border-radius: var(--radius-sm, 6px);
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.98);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .site-header-nav-modules .header-nav-group-label:hover {
    background: rgba(255,255,255,0.25);
  }
  .site-header-nav-modules .header-nav-group-dropdown {
    display: contents;
  }
  .site-header-nav-modules .header-nav-group-dropdown a {
    border: none;
    border-bottom: none;
  }
  .site-header-nav-modules a,
  .site-header-nav-modules .header-nav-group-dropdown a {
    padding: 0.5rem 0.6rem;
    font-size: 1.05rem;
    font-weight: 600;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: var(--radius-sm, 6px);
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.98);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .site-header-nav-modules a:hover,
  .site-header-nav-modules .header-nav-group-dropdown a:hover {
    background: rgba(255,255,255,0.22);
    color: var(--white);
  }
  .site-header-nav-modules a.current-module,
  .site-header-nav-modules .header-nav-group-dropdown a.current-module {
    background: rgba(255,255,255,0.28);
    border-color: rgba(255,255,255,0.4);
    font-weight: 600;
  }
  .site-header-nav-modules a:last-child,
  .site-header-nav-modules .header-nav-group-dropdown a:last-child {
    border-bottom: 1px solid rgba(255,255,255,0.25);
  }
  /* Hide desktop utilities block inside the mobile dropdown; mobile utilities row is used instead */
  .site-header nav .site-header-nav-utils {
    display: none !important;
  }
  .sub-header {
    padding: 0;
    position: relative;
    overflow: visible;
  }
  .sub-header-menu-btn {
    display: flex;
    min-height: 48px;
  }
  .sub-header-inner {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
    gap: 0;
    border-top: 1px solid var(--subheader-border);
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 200;
    background: var(--subheader-bg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.28s ease, opacity 0.2s ease, visibility 0s linear 0.28s;
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
  }
  .sub-header.open .sub-header-inner {
    max-height: min(85vh, 600px);
    opacity: 1;
    visibility: visible;
    transition: max-height 0.28s ease, opacity 0.2s ease, visibility 0s;
    overflow-y: auto;
  }
  .sub-header-inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    padding: 0.5rem;
  }
  .sub-header-inner .sub-header-context {
    grid-column: 1 / -1;
    max-width: none;
    border-right: none;
    margin: 0 0 0.15rem 0;
    padding: 0.2rem 0.25rem 0.45rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--slate-500);
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    pointer-events: none;
    border-bottom: 1px solid var(--subheader-border);
  }
  .sub-header-inner > a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.5rem 0.6rem;
    font-size: 1.05rem;
    font-weight: 600;
    min-height: 44px;
    border-radius: var(--radius-sm, 6px);
    border: 1px solid var(--subheader-border);
    background: var(--subheader-link-hover-bg, var(--slate-100));
    color: var(--subheader-link);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .sub-header-inner > a:hover {
    background: var(--subheader-link-hover-bg);
  }
  .sub-header-inner > a.active {
    background: var(--subheader-link-active-bg);
    font-weight: 600;
  }
  /* Subnav dropdown: one grid cell (trigger); when open, spans full width and shows menu as frame with close button */
  .sub-header-dropdown {
    display: block;
  }
  .sub-header-dropdown.open {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .sub-header-dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.5rem 0.6rem;
    font-size: 1.05rem;
    font-weight: 600;
    border-radius: var(--radius-sm, 6px);
    border: 1px solid var(--subheader-border);
    background: var(--subheader-link-hover-bg, var(--slate-100));
    color: var(--subheader-link);
    -webkit-tap-highlight-color: transparent;
  }
  .sub-header-dropdown-trigger:hover {
    background: var(--subheader-link-hover-bg);
  }
  .sub-header-dropdown-trigger.active {
    background: var(--subheader-link-active-bg);
    color: var(--subheader-link-active);
    font-weight: 700;
  }
  .sub-header-dropdown-trigger::after {
    display: none;
  }
  .sub-header-dropdown.open .sub-header-dropdown-trigger::after {
    transform: none;
  }
  .sub-header-dropdown-menu {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.25s ease, opacity 0.2s ease, visibility 0s linear 0.25s;
    background: var(--color-primary-pale);
    border-radius: var(--radius-sm, 6px);
    margin-top: 0.25rem;
    border: 1px solid var(--subheader-border);
  }
  .sub-header-dropdown.open .sub-header-dropdown-menu {
    max-height: min(70vh, 400px);
    opacity: 1;
    visibility: visible;
    overflow-y: auto;
    padding: 0.5rem;
  }
  .sub-header-dropdown:hover .sub-header-dropdown-menu,
  .sub-header-dropdown:focus-within .sub-header-dropdown-menu {
    display: none;
  }
  .sub-header-dropdown.open:hover .sub-header-dropdown-menu,
  .sub-header-dropdown.open:focus-within .sub-header-dropdown-menu {
    display: flex;
  }
  .sub-header-dropdown-close {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 0.6rem 0.75rem;
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1;
    margin: 0 0 0.5rem 0;
    border-radius: var(--radius-sm, 6px);
    border: 1px solid var(--subheader-border);
    background: var(--subheader-bg);
    color: var(--subheader-link);
    cursor: pointer;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
  }
  .sub-header-dropdown-close span {
    display: block;
    text-align: center;
  }
  .sub-header-dropdown-close:hover {
    background: var(--subheader-link-hover-bg);
  }
  .sub-header-dropdown-menu a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.5rem 0.6rem;
    min-height: 44px;
    font-size: 1.05rem;
    font-weight: 600;
    border-radius: var(--radius-sm, 6px);
    border: 1px solid var(--subheader-border);
    background: var(--color-primary-pale);
    color: var(--subheader-link);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .sub-header-dropdown-menu a:hover {
    background: var(--subheader-dropdown-hover-bg);
  }
  .sub-header-dropdown-menu a.active {
    background: var(--subheader-dropdown-active-bg);
    font-weight: 600;
  }
  .sub-header-dropdown-menu a:last-child {
    border-bottom: none;
  }
  /* Subsubnav: grid of condensed buttons on mobile */
  .core-subsubnav {
    padding: 0.25rem 0.75rem;
    overflow: visible;
  }
  .core-subsubnav-inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    flex-wrap: wrap;
    overflow: visible;
    padding: 0.25rem 0;
    margin: 0;
    max-width: 100%;
  }
  .core-subsubnav-inner.core-subsubnav-has-title {
    grid-template-columns: auto repeat(2, 1fr);
  }
  .core-subsubnav-title {
    grid-column: 1 / -1;
  }
  .core-subsubnav-link,
  a.core-subsubnav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.5rem 0.6rem;
    font-size: 1.05rem;
    font-weight: 600;
    min-height: 44px;
    border-radius: var(--radius-sm, 6px);
    border: 1px solid var(--slate-300);
    background: var(--slate-100);
    color: var(--subsubnav-link, var(--slate-600));
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  a.core-subsubnav-link:hover {
    background: var(--subsubnav-link-hover-bg, var(--slate-200));
    color: var(--subsubnav-link-hover, var(--slate-800));
  }
  .core-subsubnav-link.core-subsubnav-current {
    background: var(--subsubnav-current-bg, var(--slate-300));
    color: var(--subsubnav-current, var(--slate-900));
    font-weight: 600;
    border-color: var(--slate-400);
  }
  .core-subsubnav-dropdown {
    display: contents;
  }
  .core-subsubnav-dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.6rem;
    font-size: 1.05rem;
    font-weight: 600;
    min-height: 44px;
    border-radius: var(--radius-sm, 6px);
    border: 1px solid var(--slate-300);
    background: var(--slate-100);
    color: var(--subsubnav-link, var(--slate-600));
    -webkit-tap-highlight-color: transparent;
  }
  .core-subsubnav-dropdown-trigger::after {
    display: none;
  }
  .core-subsubnav-dropdown-menu {
    display: contents;
  }
  .core-subsubnav-dropdown.open .core-subsubnav-dropdown-menu {
    max-height: none;
  }
  .core-subsubnav-dropdown:hover .core-subsubnav-dropdown-menu,
  .core-subsubnav-dropdown:focus-within .core-subsubnav-dropdown-menu {
    display: contents;
  }
  .core-subsubnav-dropdown.open:hover .core-subsubnav-dropdown-menu,
  .core-subsubnav-dropdown.open:focus-within .core-subsubnav-dropdown-menu {
    display: contents;
  }
  .core-subsubnav-dropdown.open .core-subsubnav-dropdown-trigger::after {
    transform: none;
  }
  .core-subsubnav-dropdown-menu a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.5rem 0.6rem;
    min-height: 44px;
    font-size: 1.05rem;
    font-weight: 600;
    border-radius: var(--radius-sm, 6px);
    border: 1px solid var(--slate-300);
    background: var(--slate-100);
    color: var(--slate-700);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .core-subsubnav-dropdown-menu a:hover {
    background: var(--slate-200);
    color: var(--slate-900);
  }
  .core-subsubnav-dropdown-menu a.active {
    background: var(--slate-200);
    color: var(--slate-900);
    font-weight: 500;
  }
  .core-subsubnav-dropdown-menu a:last-child {
    border-bottom: none;
  }
}
@media (max-width: 768px) {
  .page-login {
    padding: 1rem;
    align-items: flex-start;
    padding-top: 2rem;
  }
  .login-box {
    max-width: none;
    padding: 1.5rem 1.25rem;
    margin: 0;
  }
  .login-box h1 {
    font-size: 1.35rem;
  }
  .login-box .pwd-field {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .login-box .pwd-field input {
    width: 100%;
    min-width: 0;
  }
  .login-box .pwd-field label {
    margin-top: 0;
  }
  .site-header {
    flex-wrap: wrap;
    padding: 0.28rem 0.65rem;
    gap: 0.15rem;
  }
  .site-header-row {
    width: 100%;
    order: 1;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.15rem 0.55rem;
  }
  .site-header.open .site-header-row {
    flex-wrap: wrap;
  }
  .site-header-row .site-header-menu-btn {
    margin-left: auto;
    align-self: center;
  }
  .site-header-menu-btn {
    display: flex;
  }
  .site-header h1 {
    font-size: 1rem;
  }
  .site-header-logo {
    max-height: 1.5rem;
  }
  .site-header-nav-wrap {
    order: 2;
    width: 100%;
    flex: 0 0 auto;
    min-height: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    margin: 0;
    padding: 0;
    transition: max-height 0.3s ease, opacity 0.25s ease, visibility 0s linear 0.3s;
    display: none;
  }
  .site-header.open .site-header-nav-wrap {
    display: block;
    max-height: 85vh;
    opacity: 1;
    visibility: visible;
    transition: max-height 0.3s ease, opacity 0.25s ease, visibility 0s;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .site-header-wrapper .site-header.open ~ .header-active-triangle {
    display: none !important;
  }
  .site-header nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-right: 0;
    padding: 0.5rem 0;
    background: rgba(30, 58, 138, 0.98);
    border-radius: var(--radius-sm);
    margin-top: 0.5rem;
    box-shadow: var(--shadow-md);
    min-height: 0;
  }
  .site-header-nav-modules {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    width: 100%;
    order: 0;
    flex: 0 0 auto;
    padding: 0.5rem;
  }
  .site-header-nav-modules .header-nav-group {
    display: contents;
  }
  .site-header-nav-modules .header-nav-group-label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.5rem 0.6rem;
    font-size: 1.05rem;
    font-weight: 600;
    border-radius: var(--radius-sm, 6px);
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.98);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .site-header-nav-modules .header-nav-group-label:hover {
    background: rgba(255,255,255,0.25);
  }
  .site-header-nav-modules .header-nav-group-dropdown {
    display: contents;
  }
  .site-header-nav-modules .header-nav-group-dropdown a {
    border: none;
    border-bottom: none;
  }
  .site-header-nav-modules a,
  .site-header-nav-modules .header-nav-group-dropdown a {
    padding: 0.5rem 0.6rem;
    font-size: 1.05rem;
    font-weight: 600;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: var(--radius-sm, 6px);
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.98);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .site-header-nav-modules a:hover,
  .site-header-nav-modules .header-nav-group-dropdown a:hover {
    background: rgba(255,255,255,0.22);
    color: var(--white);
  }
  .site-header-nav-modules a.current-module,
  .site-header-nav-modules .header-nav-group-dropdown a.current-module {
    background: rgba(255,255,255,0.28);
    border-color: rgba(255,255,255,0.4);
    font-weight: 600;
  }
  .site-header-nav-modules a:last-child,
  .site-header-nav-modules .header-nav-group-dropdown a:last-child {
    border-bottom: 1px solid rgba(255,255,255,0.25);
  }
  /* Utils (language, Me, Logout) as list rows at bottom of menu — no separate box */
  .site-header nav .site-header-nav-utils {
    order: 1;
    flex: 0 0 auto;
    position: static;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin: 0;
    padding: 0.75rem 1rem;
    min-height: 44px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    box-sizing: border-box;
  }
  .site-header nav .site-header-nav-utils-top {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
  }
  .site-header nav .site-header-nav-utils-bottom {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
  }
  .site-header nav .site-header-nav-languages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
  }
  .site-header nav .site-header-nav-utils-bottom a {
    padding: 0.35rem 0.5rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-sm);
    color: rgba(255,255,255,0.96);
    text-decoration: none;
  }
  .site-header nav .site-header-nav-utils-bottom a:hover {
    background: rgba(255,255,255,0.16);
    color: var(--white);
  }
  .site-header nav .site-admin-badge-slot {
    min-width: 0;
  }
  .site-header nav .site-admin-badge-placeholder {
    display: none;
  }
  .site-header nav .site-header-nav-utils .header-translation-toggle {
    min-width: 44px;
    min-height: 44px;
    padding: 0 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
  .site-header nav .site-header-nav-utils .header-translation-toggle .header-translation-toggle-icon {
    font-size: 1rem;
  }
  .site-header nav .site-header-nav-utils .header-lang-form,
  .site-header nav .site-header-nav-utils .header-lang-form select {
    min-height: 44px;
    font-size: 16px;
  }
  .site-header nav .site-header-nav-utils .header-lang-form {
    display: inline-flex;
    align-items: center;
  }
  .site-header nav .header-lang-form select {
    min-width: 6rem;
    max-width: 100%;
  }
  .sub-header {
    padding: 0;
    position: relative;
    overflow: visible;
  }
  .sub-header-menu-btn {
    display: flex;
    min-height: 48px;
  }
  .sub-header-inner {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
    gap: 0;
    border-top: 1px solid var(--subheader-border);
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 200;
    background: var(--subheader-bg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.28s ease, opacity 0.2s ease, visibility 0s linear 0.28s;
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
  }
  .sub-header.open .sub-header-inner {
    max-height: min(85vh, 600px);
    opacity: 1;
    visibility: visible;
    transition: max-height 0.28s ease, opacity 0.2s ease, visibility 0s;
    overflow-y: auto;
  }
  .sub-header-inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    padding: 0.5rem;
  }
  .sub-header-inner .sub-header-context {
    grid-column: 1 / -1;
    max-width: none;
    border-right: none;
    margin: 0 0 0.15rem 0;
    padding: 0.2rem 0.25rem 0.45rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--slate-500);
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    pointer-events: none;
    border-bottom: 1px solid var(--subheader-border);
  }
  .sub-header-inner > a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.5rem 0.6rem;
    font-size: 1.05rem;
    font-weight: 600;
    min-height: 44px;
    border-radius: var(--radius-sm, 6px);
    border: 1px solid var(--subheader-border);
    background: var(--subheader-link-hover-bg, var(--slate-100));
    color: var(--subheader-link);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .sub-header-inner > a:hover {
    background: var(--subheader-link-hover-bg);
  }
  .sub-header-inner > a.active {
    background: var(--subheader-link-active-bg);
    font-weight: 600;
  }
  /* Subnav dropdown: one grid cell (trigger); when open, spans full width and shows menu as frame with close button */
  .sub-header-dropdown {
    display: block;
  }
  .sub-header-dropdown.open {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .sub-header-dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.5rem 0.6rem;
    font-size: 1.05rem;
    font-weight: 600;
    border-radius: var(--radius-sm, 6px);
    border: 1px solid var(--subheader-border);
    background: var(--subheader-link-hover-bg, var(--slate-100));
    color: var(--subheader-link);
    -webkit-tap-highlight-color: transparent;
  }
  .sub-header-dropdown-trigger:hover {
    background: var(--subheader-link-hover-bg);
  }
  .sub-header-dropdown-trigger.active {
    background: var(--subheader-link-active-bg);
    color: var(--subheader-link-active);
    font-weight: 700;
  }
  .sub-header-dropdown-trigger::after {
    display: none;
  }
  .sub-header-dropdown.open .sub-header-dropdown-trigger::after {
    transform: none;
  }
  .sub-header-dropdown-menu {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.25s ease, opacity 0.2s ease, visibility 0s linear 0.25s;
    background: var(--color-primary-pale);
    border-radius: var(--radius-sm, 6px);
    margin-top: 0.25rem;
    border: 1px solid var(--subheader-border);
  }
  .sub-header-dropdown.open .sub-header-dropdown-menu {
    max-height: min(70vh, 400px);
    opacity: 1;
    visibility: visible;
    overflow-y: auto;
    padding: 0.5rem;
  }
  .sub-header-dropdown:hover .sub-header-dropdown-menu,
  .sub-header-dropdown:focus-within .sub-header-dropdown-menu {
    display: none;
  }
  .sub-header-dropdown.open:hover .sub-header-dropdown-menu,
  .sub-header-dropdown.open:focus-within .sub-header-dropdown-menu {
    display: flex;
  }
  .sub-header-dropdown-close {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 0.6rem 0.75rem;
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1;
    margin: 0 0 0.5rem 0;
    border-radius: var(--radius-sm, 6px);
    border: 1px solid var(--subheader-border);
    background: var(--subheader-bg);
    color: var(--subheader-link);
    cursor: pointer;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
  }
  .sub-header-dropdown-close span {
    display: block;
    text-align: center;
  }
  .sub-header-dropdown-close:hover {
    background: var(--subheader-link-hover-bg);
  }
  .sub-header-dropdown-menu a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.5rem 0.6rem;
    min-height: 44px;
    font-size: 1.05rem;
    font-weight: 600;
    border-radius: var(--radius-sm, 6px);
    border: 1px solid var(--subheader-border);
    background: var(--color-primary-pale);
    color: var(--subheader-link);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .sub-header-dropdown-menu a:hover {
    background: var(--subheader-dropdown-hover-bg);
  }
  .sub-header-dropdown-menu a.active {
    background: var(--subheader-dropdown-active-bg);
    font-weight: 600;
  }
  .sub-header-dropdown-menu a:last-child {
    border-bottom: none;
  }
  .dashboard,
  .admin-content {
    --page-content-padding-x: 1rem;
    --page-content-padding-y: 1rem;
  }
  .section-card,
  section.section-card {
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
  }
  .form-group input,
  .form-group select,
  .form-group textarea {
    max-width: none;
  }
  .admin-layout {
    min-height: auto;
  }
  .community-reply-form textarea {
    min-height: 100px;
    font-size: 16px;
  }
  .community-reply-actions .btn {
    min-height: 44px;
    padding: 0.625rem 1.25rem;
  }
}

@media (max-width: 480px) {
  .page-login {
    padding: 0.75rem;
    padding-top: 1.5rem;
  }
  .login-box {
    padding: 1.25rem 1rem;
  }
  .login-box input,
  .login-box button {
    min-height: 48px;
  }
  .site-header nav form.header-lang-form select {
    min-height: 44px;
    font-size: 16px;
  }
  table.data th,
  table.data td {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
  }
}

/* Registration core (shared by any module that enables it) */
.admin-content .reg-dashboard-section,
.admin-content .reg-settings-section,
.admin-content .reg-email-editor,
.admin-content .reg-sender-contact,
.admin-content .reg-sender-editor {
  --reg-radius: var(--radius, 10px);
  --reg-border: var(--color-border, var(--slate-200));
  --reg-surface: var(--color-surface, var(--white));
}
.admin-content .reg-form-row input[type="text"],
.admin-content .reg-form-row select,
.admin-content .reg-emails-create input,
.admin-content .reg-email-editor input,
.admin-content .reg-email-editor textarea,
.admin-content .reg-sender-editor input,
.admin-content .reg-sender-editor textarea {
  border-radius: var(--radius-sm);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.admin-content .reg-form-row input:focus,
.admin-content .reg-form-row select:focus,
.admin-content .reg-email-editor input:focus,
.admin-content .reg-email-editor textarea:focus {
  outline: none;
  border-color: var(--focus-border);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Registration: unsubscribe reasons editor (settings / process) */
.reg-unsub-editor-list {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-sm);
  background: var(--color-surface, #fff);
  max-width: 36rem;
}
.reg-unsub-editor-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.65rem;
  border-bottom: 1px solid var(--slate-100);
  min-height: 48px;
}
.reg-unsub-editor-row:last-child {
  border-bottom: none;
}
.reg-unsub-editor-row[draggable='true'] {
  cursor: grab;
}
.reg-unsub-editor-row:active {
  cursor: grabbing;
}
.reg-unsub-drag {
  cursor: grab;
  user-select: none;
  color: var(--slate-400);
  font-size: 0.85rem;
  line-height: 1;
  letter-spacing: -0.1em;
}
.reg-unsub-detail-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.875rem;
  color: var(--slate-700);
  margin: 0;
  cursor: pointer;
}
.reg-unsub-detail-wrap input {
  width: 1.1rem;
  height: 1.1rem;
}
.reg-unsub-label-hit {
  flex: 1;
  min-width: 8rem;
}
.reg-unsub-label-pending {
  font-size: 0.9375rem;
  color: var(--slate-600);
}
.reg-unsub-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.35rem;
}
.reg-unsub-editor-status.muted {
  font-size: 0.875rem;
  color: var(--slate-500);
  margin: 0;
}

/* In-place translation editing: obvious highlight and clickable in any theme (fixed colors for visibility) */
/* Force dark text on light highlight so white/light source text (e.g. header, colored bars) is always readable */
.lang-editable,
.lang-editable *,
.site-header .lang-editable,
.site-header-wrapper .lang-editable,
header .lang-editable {
  color: #1e293b !important;
}
.lang-editable {
  background: #fef3c7;
  border: 2px solid #d97706;
  border-radius: 3px;
  padding: 1px 4px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.lang-editable:hover,
.lang-editable:hover * {
  color: #0f172a !important;
}
.lang-editable:hover {
  background: #fde68a;
  border-color: #b45309;
  box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.35);
}
.lang-editable:focus,
.lang-editable:focus * {
  color: #0f172a !important;
}
.lang-editable:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.5);
}
.lang-editable.lang-missing,
.lang-editable.lang-missing * {
  color: #1e293b !important;
}
.lang-editable.lang-missing {
  background: #ffedd5;
  border-color: #ea580c;
  border-style: dashed;
}
.lang-editable.lang-missing:hover,
.lang-editable.lang-missing:hover * {
  color: #0f172a !important;
}
.lang-editable.lang-missing:hover {
  background: #fed7aa;
  border-color: #c2410c;
}
/* On-demand translation: temporary placeholder until API fills from English */
.lang-gather-pending {
  font-style: italic;
  opacity: 0.92;
}
.lang-gather-pending .lang-gather-placeholder {
  color: var(--slate-600, #475569);
}
.lang-editable-btn,
.lang-editable-btn * {
  color: #1e293b !important;
}
.lang-editable-btn {
  outline: 2px solid #d97706;
  outline-offset: 2px;
  cursor: pointer;
  background: transparent;
}
.lang-editable-btn:hover,
.lang-editable-btn:focus,
.lang-editable-btn:hover *,
.lang-editable-btn:focus * {
  color: #0f172a !important;
}
.lang-editable-btn:hover {
  outline-width: 3px;
  outline-color: #b45309;
}
.lang-editable-btn:focus {
  outline-width: 3px;
}
.lang-editable-btn.lang-missing,
.lang-editable-btn[data-lang-missing="1"] {
  outline-color: #dc2626;
  outline-style: dashed;
}
.lang-editable-btn.lang-missing:hover,
.lang-editable-btn[data-lang-missing="1"]:hover {
  outline-color: #b91c1c;
}

/* Hardcoded-text scan (site admin, translation edit mode) */
body.i18n-scan-active {
  cursor: crosshair;
}
body.i18n-scan-active a {
  cursor: crosshair;
}
.i18n-scan-target {
  outline: 2px dashed #ca8a04;
  outline-offset: 1px;
  background: rgba(250, 204, 21, 0.15);
  cursor: pointer;
  border-radius: 2px;
}
.i18n-scan-target:hover {
  background: rgba(250, 204, 21, 0.28);
}
.i18n-hardcoded-toolbar {
  position: fixed;
  z-index: 12040;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  max-width: min(96vw, 42rem);
  background: var(--surface-elevated, #fff);
  border: 1px solid var(--slate-300, #cbd5e1);
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}
.i18n-hardcoded-toolbar-hint {
  font-size: 0.8125rem;
  color: var(--slate-600, #475569);
  max-width: 28rem;
  line-height: 1.35;
}
.i18n-hardcoded-panel {
  position: fixed;
  z-index: 12050;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(100vw, 24rem);
  overflow: auto;
  padding: 1rem;
  padding-bottom: max(1rem, env(safe-area-inset-bottom, 0));
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  background: var(--surface-elevated, #fff);
  border-left: 2px solid var(--amber-500, #f59e0b);
  box-shadow: -6px 0 32px rgba(15, 23, 42, 0.18);
}
.i18n-hardcoded-panel[hidden] {
  display: none !important;
}
.i18n-hardcoded-panel-title {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
}
.i18n-hardcoded-panel-steps {
  margin: 0 0 0.65rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--slate-600, #475569);
}
.i18n-hardcoded-open-tools {
  flex-shrink: 0;
}
.i18n-hardcoded-replace-btn {
  font-weight: 600;
}
.i18n-hardcoded-text-preview {
  margin: 0 0 1rem;
  padding: 0.5rem 0.65rem;
  background: var(--slate-50, #f8fafc);
  border-radius: var(--radius-sm, 4px);
  font-size: 0.9rem;
  white-space: pre-wrap;
  word-break: break-word;
}
textarea.i18n-hardcoded-preview-textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 5rem;
  resize: vertical;
  font-family: inherit;
  border: 1px solid var(--slate-300, #cbd5e1);
}
.i18n-hardcoded-search-note,
.i18n-hardcoded-replace-note,
.i18n-hardcoded-create-key-help {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--slate-600, #475569);
}
.i18n-hardcoded-create-key-help {
  margin-top: 0.35rem;
  margin-bottom: 0.75rem;
}
.i18n-hardcoded-label {
  display: block;
  margin: 0.75rem 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--slate-700, #334155);
}
.i18n-hardcoded-input,
.i18n-hardcoded-textarea {
  width: 100%;
  box-sizing: border-box;
  font-size: 0.875rem;
}
.i18n-hardcoded-textarea {
  font-family: ui-monospace, monospace;
  min-height: 4rem;
}
.i18n-hardcoded-btn {
  margin-top: 0.5rem;
}
.i18n-hardcoded-hr {
  border: none;
  border-top: 1px solid var(--slate-200, #e2e8f0);
  margin: 1rem 0;
}
.i18n-hardcoded-matches {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 11rem;
  overflow: auto;
  margin: 0.5rem 0 0.75rem;
}
.i18n-hardcoded-match-row {
  text-align: left;
  font-size: 0.75rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: var(--radius-sm, 4px);
  background: var(--slate-50, #f8fafc);
  cursor: pointer;
  font-family: ui-monospace, monospace;
}
.i18n-hardcoded-match-row:hover {
  background: var(--slate-100, #f1f5f9);
}
.i18n-hardcoded-match-row-active {
  border-color: var(--focus-border, #3b82f6);
  background: rgba(59, 130, 246, 0.08);
}
.i18n-hardcoded-confirm-section {
  margin-top: 1rem;
  padding: 0.75rem;
  border-radius: var(--radius-md, 8px);
  border: 1px solid var(--slate-200, #e2e8f0);
  background: var(--slate-50, #f8fafc);
}
.i18n-hardcoded-confirm-body {
  margin-bottom: 0.75rem;
}
.i18n-hardcoded-existing-key {
  font-size: 0.8125rem;
  color: var(--slate-700, #334155);
  margin: 0.35rem 0;
}
.i18n-hardcoded-confirm-intro {
  margin: 0 0 0.35rem;
  font-size: 0.875rem;
}
.i18n-hardcoded-confirm-loc {
  margin: 0.35rem 0 0;
  font-size: 0.8125rem;
  color: var(--slate-700, #334155);
  font-weight: 500;
}
.i18n-hardcoded-confirm-pre {
  margin: 0.5rem 0 0;
  padding: 0.65rem;
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.75rem;
  background: #fff;
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: var(--radius-sm, 4px);
}
.i18n-hardcoded-translation-section {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--slate-200, #e2e8f0);
}
.i18n-hardcoded-subhead {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
}
.i18n-hardcoded-html-rendered {
  min-height: 2rem;
  padding: 0.65rem;
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: var(--radius-sm, 4px);
  background: #fff;
  font-size: 0.9375rem;
  line-height: 1.45;
}
.i18n-hardcoded-raw-html-wrap {
  margin-top: 0.5rem;
}
.i18n-hardcoded-apply-hint {
  margin: 0.75rem 0 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--slate-600, #475569);
}
.i18n-hardcoded-status {
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.4;
}
.i18n-hardcoded-close {
  margin-top: 1rem;
  width: 100%;
}

/* Header toggle for edit translations (same color as language highlight) */
.header-translation-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.1rem 0.175rem;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.2);
  color: inherit;
  text-decoration: none;
  font-size: 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.header-translation-toggle:hover {
  background: rgba(255, 255, 255, 0.35);
  border-color: rgba(255, 255, 255, 0.5);
  color: inherit;
}
.header-translation-toggle-icon {
  font-size: 1rem;
  opacity: 0.95;
}
@media (max-width: 640px) {
  .header-translation-toggle-label { display: none; }
}

/* Header notes (notepad) button: yellow, next to language pencil; available to all logged-in users */
.header-notes-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
/* When notes dropdown is open, header stays above subnav (wrapper uses --z-menu-dropdowns) */
.site-header-wrapper.header-notes-dropdown-open {
  z-index: var(--z-menu-dropdowns, 1400);
}
.header-notes-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-height: 1.08rem;
  height: 1.08rem;
  padding: 0 0.2rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-sm);
  background: #fde047;
  color: #713f12;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.15s ease, border-color 0.15s ease, filter 0.15s ease;
}
.header-notes-toggle:hover {
  background: #facc15;
  filter: brightness(1.05);
  color: #713f12;
}
.header-notes-toggle:focus {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 1px;
}
.header-notes-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.header-notes-toggle-icon svg {
  display: block;
}
.site-header-nav-utils .header-notes-toggle {
  margin: 0;
  line-height: 1;
}

/* Header notes dropdown: list of notes; close only via X or click outside; above all content, expand down; yellow theme to match notepad */
.header-notes-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.25rem;
  min-width: 12rem;
  max-width: 20rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  background: #fef08a;
  color: #713f12;
  border: 1px solid #fde047;
  border-radius: var(--radius-md, 6px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
  z-index: var(--z-menu-dropdowns, 1400);
  padding: 0;
}
/* When opened, dropdown is moved to body and positioned fixed; below modals (--z-modal) so modals stay on top */
.header-notes-dropdown.header-notes-dropdown-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
  margin-top: 0;
  z-index: 2500;
}
.header-notes-dropdown[hidden] {
  display: none !important;
}
.header-notes-dropdown-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  padding: 0.35rem 0.4rem 0.4rem 0.5rem;
  border-bottom: 1px solid #fde047;
}
.header-notes-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  min-height: 1.75rem;
  margin: 0;
  padding: 0 0.35rem;
  border: 1px solid rgba(113, 63, 18, 0.35);
  border-radius: var(--radius-sm);
  background: #fef9c3;
  color: #713f12;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.header-notes-add:hover {
  background: #facc15;
  border-color: rgba(113, 63, 18, 0.5);
  color: #451a03;
}
.header-notes-add:focus {
  outline: 2px solid rgba(113, 63, 18, 0.45);
  outline-offset: 1px;
}
.header-notes-dropdown-close {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  background: transparent;
  color: #a16207;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.header-notes-dropdown-close:hover {
  background: #facc15;
  color: #713f12;
}
.header-notes-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.header-notes-list .header-notes-item {
  display: block;
  width: 100%;
  padding: 0.4rem 0.75rem;
  text-align: left;
  border: none;
  background: none;
  color: inherit;
  font-size: 0.875rem;
  cursor: pointer;
  text-decoration: none;
  border-radius: 0;
  transition: background 0.1s ease;
}
.header-notes-list .header-notes-item:hover {
  background: #fef9c3;
}
.header-notes-list .header-notes-item.is-open {
  background: #facc15;
  font-weight: 500;
}
.header-notes-empty {
  margin: 0;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  color: #713f12;
  opacity: 0.85;
}
.header-notes-link-me {
  display: block;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  color: #92400e;
  text-decoration: none;
  border-top: 1px solid #fde047;
  margin-top: 0.25rem;
}
.header-notes-link-me:hover {
  text-decoration: underline;
  color: #713f12;
  background: #fef9c3;
}

/* Translation edit modal: theme colors and strong contrast for form area */
.translation-edit-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 3000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.translation-edit-modal-overlay.is-open {
  display: flex;
}
/* In-place edit highlights must not apply to modal chrome; only .translation-edit-modal-fields textareas are the edit surface. */
.translation-edit-modal-overlay .lang-editable,
.translation-edit-modal-overlay .lang-editable-btn {
  cursor: inherit !important;
  outline: none !important;
  box-shadow: none !important;
  border-bottom: none !important;
  text-decoration: none !important;
}
.translation-edit-modal-overlay .lang-editable:hover,
.translation-edit-modal-overlay .lang-editable:focus,
.translation-edit-modal-overlay .lang-editable-btn:hover,
.translation-edit-modal-overlay .lang-editable-btn:focus {
  outline: none !important;
  box-shadow: none !important;
  border-bottom: none !important;
}
.translation-edit-modal {
  background: var(--color-surface, #fff);
  color: var(--color-text, #1e293b);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.translation-edit-modal-title {
  margin: 0;
  padding: 1rem 1.25rem;
  font-size: 1.15rem;
  color: var(--color-text, #1e293b);
  border-bottom: 1px solid var(--color-border, #e2e8f0);
}
.translation-edit-modal-key {
  margin: 0;
  padding: 0.5rem 1.25rem;
  font-size: 0.85rem;
  font-family: monospace;
  color: var(--color-text-muted, #64748b);
  word-break: break-all;
}
.translation-edit-modal-fields {
  padding: 0.75rem 1.25rem;
  overflow-y: auto;
  flex: 1;
  min-height: 120px;
  background: var(--color-bg, #f8fafc);
  border-top: 1px solid var(--color-border-light, #f1f5f9);
  border-bottom: 1px solid var(--color-border-light, #f1f5f9);
}
.translation-edit-row {
  margin-bottom: 0.75rem;
}
.translation-edit-row:last-child { margin-bottom: 0; }
.translation-edit-row label {
  display: block;
  font-weight: 500;
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
  color: var(--color-text, #1e293b);
}
.translation-edit-row textarea {
  width: 100%;
  min-height: 2.5rem;
  padding: 0.35rem 0.5rem;
  font-size: 1rem;
  color: var(--color-text, #1e293b);
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-sm);
  resize: vertical;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.translation-edit-row textarea:focus {
  border-color: var(--focus-border, #60a5fa);
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring, rgba(59, 130, 246, 0.25));
}
.translation-edit-modal-actions {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--color-border, #e2e8f0);
  background: var(--color-surface, #fff);
}
.translation-edit-modal-actions-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}
.translation-edit-modal-actions-bar .btn {
  width: auto;
}
.translation-edit-loading,
.translation-edit-error {
  margin: 0;
  color: var(--color-text-muted, #64748b);
  font-size: 0.9rem;
}
.translation-edit-error { color: var(--color-error, var(--error-red, #dc2626)); }
.translation-edit-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.5rem 1rem;
  background: var(--slate-800);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  z-index: 3001;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.translation-edit-toast.is-visible {
  opacity: 1;
}
.reception-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.5rem 1rem;
  background: var(--slate-800);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  z-index: 3001;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.reception-toast.is-visible {
  opacity: 1;
}

/* ---- Super Dash: flexible module dashboard ---- */
/* Super Dash tabs bar (above dashboard when layout has tabs) */
.super-dash-tabs {
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border, var(--slate-300));
}
.super-dash-tabs-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  align-items: center;
}
.super-dash-tab-link {
  display: inline-block;
  padding: 0.5rem 0.75rem;
  font-size: 0.9375rem;
  color: var(--slate-600);
  text-decoration: none;
  border-radius: var(--radius, 6px);
  border: 1px solid transparent;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.super-dash-tab-link:hover {
  color: var(--slate-800);
  background: var(--slate-100);
}
.super-dash-tab-link.super-dash-tab-current {
  font-weight: 600;
  color: var(--color-primary, var(--slate-800));
  background: var(--slate-100);
  border-color: var(--color-border, var(--slate-300));
}
.super-dash-tab-link:focus {
  outline: 2px solid var(--focus-ring, var(--slate-400));
  outline-offset: 2px;
}

.super-dash {
  width: 100%;
  padding: 0;
}
.super-dash-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-bottom: 0.5rem;
}
.super-dash-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}
.super-dash-row {
  display: grid;
  grid-template-columns: repeat(var(--super-dash-cols, 1), minmax(0, 1fr));
  gap: 0 1rem;
  width: 100%;
  align-items: stretch;
}
.super-dash-cell {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius, 10px);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
  overflow: hidden;
}
.super-dash-cell--auto {
  flex: 0 0 auto;
}
.super-dash-cell--empty {
  min-height: 4rem;
  background: var(--slate-50, #f8fafc);
  border-style: dashed;
}
.super-dash-cell--empty .super-dash-cell-inner {
  padding: 0.5rem;
  min-height: 2rem;
}
.super-dash-cell--fixed {
  flex: 0 0 auto;
  min-height: 120px;
}
.super-dash-cell--fixed .super-dash-cell-inner {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}
.super-dash-cell-inner {
  padding: 1rem 1.25rem;
  flex: 1 1 auto;
}
.super-dash-cell-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--slate-50, #f8fafc);
  border-bottom: 1px solid var(--color-border-light, #f1f5f9);
  min-height: 44px;
}
.super-dash-cell-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text, #1e293b);
}
.super-dash-cell-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.super-dash-resize-handle {
  height: 6px;
  cursor: ns-resize;
  background: var(--color-border-light, #f1f5f9);
  flex-shrink: 0;
  position: relative;
  transition: background 0.15s ease;
}
.super-dash-resize-handle:hover,
.super-dash-resize-handle:active {
  background: var(--color-primary-light, #dbeafe);
}
.super-dash-resize-handle::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 3px;
  background: var(--slate-400, #94a3b8);
  border-radius: 2px;
}
.super-dash-resize-handle[aria-hidden="true"] {
  display: none;
}
.super-dash-btn-option {
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
}
.super-dash-btn-option:hover {
  color: var(--color-text);
  border-color: var(--slate-400);
}

.super-dash-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
  z-index: var(--z-modal, 3000);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.super-dash-modal-overlay[aria-hidden="false"] {
  display: flex;
}
.super-dash-modal-overlay.is-open {
  display: flex;
}
.super-dash-settings-pencil {
  padding: 0.4rem 0.6rem;
  background: var(--color-primary-pale, #dbeafe);
  color: var(--color-primary, #2563eb);
  border-color: var(--color-primary-light);
}
.super-dash-settings-pencil:hover {
  background: var(--color-primary-light);
  color: var(--color-primary-hover);
}
.super-dash-pencil-btn {
  padding: 0.25rem 0.4rem;
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid transparent;
}
.super-dash-pencil-btn:hover {
  color: var(--color-text);
  background: var(--slate-100);
}
.super-dash-gear-btn {
  padding: 0.25rem 0.4rem;
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid transparent;
}
.super-dash-gear-btn:hover {
  color: var(--color-text);
  background: var(--slate-100);
}
.super-dash-modal {
  background: var(--color-surface, #fff);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
  padding: 1.5rem;
  max-height: 90vh;
  overflow-y: auto;
}
.super-dash-modal.super-dash-modal--wide {
  max-width: 42rem;
  width: 100%;
}
.super-dash-modal-actions {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
.super-dash-widget-settings-modal-actions {
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.super-dash-widget-settings-form .form-row.super-dash-settings-boolean {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
}
.super-dash-widget-settings-form .form-row.super-dash-settings-boolean label {
  margin: 0;
  font-weight: normal;
  order: 2;
}
.super-dash-widget-settings-form .form-row.super-dash-settings-boolean .super-dash-settings-checkbox-wrap {
  order: 1;
  flex: 0 0 auto;
}
.super-dash-widget-settings-form .form-row.super-dash-settings-boolean input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin: 0;
}
.super-dash-widget-settings-modal-actions-start {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.super-dash-settings-multiselect {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.35rem;
  max-width: 100%;
}
.super-dash-settings-multiselect .super-dash-settings-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--slate-300, #cbd5e1);
  border-radius: 999px;
  font-size: 0.875rem;
  cursor: pointer;
  background: var(--color-surface, #fff);
  user-select: none;
}
.super-dash-settings-multiselect .super-dash-settings-chip.is-selected {
  background: var(--slate-800, #1e293b);
  border-color: var(--slate-800, #1e293b);
  color: #fff;
}
.super-dash-settings-multiselect .super-dash-settings-chip input {
  margin: 0;
}
.super-dash-modal .super-dash-height-opt.selected {
  background: var(--color-primary, #0f172a);
  color: #fff;
}
.super-dash-modal-fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
}
.super-dash-modal-fieldset legend {
  padding: 0 0.25rem;
  font-weight: 600;
}
.super-dash-available-table-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-bottom: 0.5rem;
  background: var(--color-surface);
}
.super-dash-table-widget {
  min-height: 2rem;
}
.super-dash-cell-edit-btn {
  padding: 0.25rem 0.5rem;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.super-dash-cell-edit-btn:hover {
  color: var(--color-primary);
  background: var(--slate-100);
}
.super-dash-component-modal-section {
  margin-bottom: 1rem;
}
.super-dash-component-modal-section h4 {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
}
.super-dash-component-modal-actions-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.super-dash-component-modal-actions-row label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
}

/* Super Dash Freestyle: full-width page (match header/menu), responsive whiteboard and widgets */
.admin-content:has(.super-dash-freestyle) {
  --page-content-max: 100%;
  --page-content-width: 100%;
  --page-content-padding-x: 1.5rem;
  --page-content-margin-x: auto;
  max-width: var(--page-content-max);
  width: var(--page-content-width);
  min-width: 0;
  padding-left: var(--page-content-padding-x);
  padding-right: var(--page-content-padding-x);
  padding-top: 0.5rem;
  padding-bottom: 0.75rem;
}
.admin-content.admin-content--with-subsubnav:has(.super-dash-freestyle) {
  padding-top: 0.35rem;
  padding-bottom: 0.5rem;
}
/* Legacy fixed-grid super dash (not freestyle): less padding above tabs/grid */
.admin-content:has(> .super-dash) {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.admin-content.admin-content--with-subsubnav:has(> .super-dash) {
  padding-top: 0.35rem;
  padding-bottom: 0.5rem;
}

/* Super Dash Freestyle: whiteboard layout, draggable widgets */
.super-dash-freestyle {
  --super-dash-widget-bg: var(--color-surface);
  --super-dash-widget-border: var(--slate-200);
  --super-dash-widget-shadow: var(--shadow);
  min-height: 100vh;
  width: 100%;
}
/* Title row: title left, tabs center, gear right (same row). Sticky when scrolling so it stays at top of viewport. */
.super-dash-freestyle-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
  position: sticky;
  z-index: 1000;
  top: 0;
  z-index: 10;
  background: var(--color-surface, #fff);
  border-bottom: 1px solid var(--slate-200);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  padding-top: 0.05rem;
  padding-bottom: 0.15rem;
}
.super-dash-freestyle-page-title {
  margin: 0;
  font-size: 1.25rem;
  flex: 0 1 auto;
  min-width: 0;
}
/* Tabs between title and gear (inline in same row) */
.super-dash-freestyle-tabs-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.super-dash-freestyle-title-row .super-dash-tabs {
  margin-bottom: 0;
  border-bottom: none;
}
.super-dash-freestyle-title-row-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  flex-shrink: 0;
}
.super-dash-freestyle-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}
.super-dash-freestyle-toolbar-actions {
  position: relative;
}
/* Add widget modal as primary dashboard gear view */
.super-dash-add-widget-modal {
  max-width: 44rem;
  width: 100%;
  padding: 1.25rem 1.5rem 1.25rem;
}
.super-dash-add-widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.super-dash-add-widget-header-primary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  flex: 1 1 auto;
  min-width: 0;
}
.super-dash-add-widget-header h3 {
  margin: 0;
  font-size: 1.1rem;
}
.super-dash-widget-picker-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 1 12rem;
  min-width: 7rem;
  max-width: 100%;
}
.super-dash-widget-picker-search-icon {
  position: absolute;
  left: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  color: var(--slate-500);
  pointer-events: none;
}
.super-dash-widget-picker-search-input {
  width: 100%;
  min-height: 44px;
  padding: 0.35rem 0.5rem 0.35rem 2.35rem;
  font-size: 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--slate-300);
  background: var(--color-surface, #fff);
  box-sizing: border-box;
}
.super-dash-widget-picker-search-input:focus {
  outline: none;
  border-color: var(--focus-border, var(--slate-400));
  box-shadow: 0 0 0 3px var(--focus-ring, rgba(37, 99, 235, 0.2));
}
.super-dash-add-widget-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.super-dash-add-widget-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.super-dash-freestyle-widget-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.super-dash-freestyle-widget-list li + li {
  margin-top: 0.35rem;
}
.super-dash-freestyle-widget-list button {
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--slate-200);
  background: var(--slate-50);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.super-dash-freestyle-widget-list button:hover {
  background: var(--slate-100);
  border-color: var(--slate-300);
}
.super-dash-add-remove-list {
  border-top: 1px solid var(--slate-200);
  padding-top: 0.5rem;
  margin-top: 0.25rem;
  font-size: 0.85rem;
  color: var(--slate-600);
}
.super-dash-add-remove-list-header {
  font-weight: 600;
  margin: 0 0 0.35rem;
}
.super-dash-add-remove-list button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  font-size: 0.82rem;
  cursor: pointer;
  color: var(--slate-700);
}
.super-dash-add-remove-list button:hover {
  background: var(--slate-100);
}
/* Centered modal overlay for layout options (gear menu) */
.super-dash-freestyle-layout-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 3000);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.35);
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.15s ease, opacity 0.15s ease;
}
.super-dash-freestyle-layout-modal[hidden] {
  display: none;
}
.super-dash-freestyle-layout-modal.is-open {
  visibility: visible;
  opacity: 1;
}
.super-dash-freestyle-layout-modal-panel {
  position: relative;
  min-width: 14rem;
  max-width: min(22rem, 90vw);
  background: var(--color-surface, #fff);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 0.5rem 0;
  max-height: 85vh;
  overflow-y: auto;
}
.super-dash-freestyle-layout-modal .super-dash-freestyle-dropdown {
  position: relative;
  left: auto;
  top: auto;
  margin-top: 0;
}
.super-dash-freestyle-layout-modal-title {
  margin: 0 0 0.25rem;
  padding: 0.5rem 0.75rem 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--slate-600);
  border-bottom: 1px solid var(--slate-200);
}
.super-dash-freestyle-gear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.5rem;
  min-width: 36px;
}
.super-dash-freestyle-gear svg {
  display: block;
}
.super-dash-freestyle-dropdown {
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 0.25rem;
  min-width: 12rem;
  background: var(--color-surface, #fff);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  z-index: 50;
  padding: 0.25rem 0;
}
.super-dash-freestyle-dropdown[hidden] {
  display: none;
}
.super-dash-freestyle-dropdown.is-open {
  display: block;
}
.super-dash-freestyle-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.4rem 0.75rem;
  border: none;
  background: transparent;
  color: var(--slate-800);
  font-size: 0.875rem;
  cursor: pointer;
}
.super-dash-freestyle-dropdown-item:hover {
  background: var(--slate-100);
}
.super-dash-freestyle-dropdown-remove-list {
  border-top: 1px solid var(--slate-200);
  padding-top: 0.25rem;
  margin-top: 0.25rem;
}
.super-dash-freestyle-dropdown-remove-list .super-dash-freestyle-dropdown-item {
  font-size: 0.8125rem;
  color: var(--slate-600);
}
.super-dash-freestyle-save-status {
  font-size: clamp(0.8125rem, 1.5vw, 0.875rem);
  color: var(--slate-500);
}
/* Configure tabs modal (in-page) */
.super-dash-configure-tabs-modal .super-dash-modal {
  max-width: 420px;
}
.super-dash-configure-tabs-desc {
  font-size: 0.875rem;
  color: var(--slate-600);
  margin: 0 0 1rem;
}
.super-dash-configure-tabs-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  max-height: 240px;
  overflow-y: auto;
}
.super-dash-configure-tabs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--slate-100);
}
.super-dash-configure-tabs-row:last-child {
  border-bottom: none;
}
.super-dash-configure-tabs-label {
  flex: 1;
  min-width: 0;
  font-weight: 500;
}
.super-dash-configure-tabs-row-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}
.super-dash-configure-tabs-move {
  min-width: 2rem;
  padding: 0.25rem;
  font-size: 0.875rem;
}
.super-dash-configure-tabs-hide.form-checkbox {
  font-size: 0.8125rem;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  font-weight: normal;
  margin: 0;
}
.super-dash-configure-tabs-remove {
  font-size: 0.8125rem;
}
/* Edit list modal (iframe, large scrollable) */
.super-dash-edit-list-modal-overlay .super-dash-edit-list-modal {
  display: flex;
  flex-direction: column;
  width: 92vw;
  max-width: 1200px;
  height: 88vh;
  max-height: 88vh;
  padding: 0;
  overflow: hidden;
}
.super-dash-edit-list-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--slate-200);
  flex-shrink: 0;
}
.super-dash-edit-list-modal-header h3 {
  margin: 0;
  font-size: 1rem;
}
.super-dash-edit-list-modal-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: var(--slate-50);
}
.super-dash-edit-list-modal-body iframe {
  display: block;
  width: 100%;
  min-height: 720px;
  height: 100%;
  border: none;
}
.super-dash-configure-tabs-row--main .super-dash-configure-tabs-main-hint {
  font-size: 0.8125rem;
  color: var(--slate-500);
  margin-left: 0.25rem;
}
.super-dash-configure-tabs-label-inline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
}
.super-dash-configure-tabs-label-inline .super-dash-configure-tabs-main-label {
  flex: 1;
  min-width: 0;
  max-width: 200px;
}
.super-dash-configure-tabs-add {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1rem;
}
.super-dash-configure-tabs-add.form-compact {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.5rem;
}
.super-dash-configure-tabs-new-name.form-input {
  flex: 1;
  min-width: 0;
}
.super-dash-freestyle-whiteboard {
  position: relative;
  width: 100%;
  min-height: calc(100vh - 10rem);
  background: var(--slate-50);
  border: 1px dashed var(--slate-300);
  border-radius: var(--radius);
  container-type: inline-size;
  container-name: super-dash-wb;
}
.super-dash-widget {
  position: absolute;
  display: flex;
  flex-direction: column;
  background: var(--super-dash-widget-bg);
  border: 1px solid var(--super-dash-widget-border);
  border-radius: var(--radius);
  box-shadow: var(--super-dash-widget-shadow);
  overflow: hidden;
  min-width: 200px;
  min-height: 120px;
}
.super-dash-widget-load-error {
  margin: 0.5rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid #fecaca;
  border-radius: var(--radius);
  background: #fff1f2;
  color: #7f1d1d;
  font-size: 0.8125rem;
  line-height: 1.45;
  max-height: min(70vh, 28rem);
  overflow: auto;
  box-sizing: border-box;
}
.super-dash-widget-load-error-title {
  font-weight: 600;
  color: #991b1b;
  margin: 0 0 0.35rem;
  font-size: 0.9rem;
}
.super-dash-widget-load-error-meta,
.super-dash-widget-load-error-location {
  margin: 0.2rem 0;
  font-size: 0.8rem;
  word-break: break-word;
}
.super-dash-widget-load-error-message {
  margin: 0.35rem 0;
  font-size: 0.875rem;
  font-weight: 500;
  word-break: break-word;
}
.super-dash-widget-load-error-list {
  margin: 0.35rem 0 0.35rem 1rem;
  padding: 0;
}
.super-dash-widget-load-error-list li {
  margin: 0.25rem 0;
}
.super-dash-widget-load-error-path-label {
  font-weight: 600;
}
.super-dash-widget-load-error-path {
  display: inline-block;
  margin-top: 0.15rem;
  font-size: 0.75rem;
  word-break: break-all;
}
.super-dash-widget-load-error-hint {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  color: var(--slate-600);
}
.super-dash-widget-load-error-details {
  margin: 0.5rem 0 0;
}
.super-dash-widget-load-error-details summary {
  cursor: pointer;
  font-weight: 600;
  color: #991b1b;
}
.super-dash-widget-load-error-pre {
  margin: 0.35rem 0 0;
  padding: 0.5rem;
  font-size: 0.7rem;
  line-height: 1.35;
  background: #fff;
  border: 1px solid #fecaca;
  border-radius: 4px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 12rem;
  overflow: auto;
}
.super-dash-widget-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.2rem;
  padding: clamp(0.25rem, 1vw, 0.35rem) clamp(0.4rem, 1.2vw, 0.5rem);
  background: var(--slate-100);
  border-bottom: 1px solid var(--super-dash-widget-border);
  /* Grab: inherited by drag surfaces (padding, description). Title/actions override below. */
  cursor: grab;
  flex-shrink: 0;
  /* Touch drag on header chrome; exclude title/actions so contenteditable title stays tappable */
  touch-action: none;
}
.super-dash-widget-header .super-dash-widget-title,
.super-dash-widget-header .super-dash-widget-title-prefix,
.super-dash-widget-header .super-dash-widget-actions,
.super-dash-widget-header .super-dash-widget-description,
.super-dash-widget-header .super-dash-widget-header-row--description {
  touch-action: auto;
}
.super-dash-widget-header-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  width: 100%;
  min-width: 0;
}
.super-dash-widget-header-main .super-dash-widget-header-row--title {
  flex: 1 1 10rem;
  min-width: 0;
  width: auto;
}
.super-dash-widget-header-main .super-dash-widget-header-row--actions {
  display: flex;
  justify-content: flex-end;
  flex: 0 0 auto;
  width: auto;
  margin-left: auto;
}
.super-dash-widget-header-row--title {
  width: 100%;
  min-width: 0;
}
.super-dash-widget-title-cluster {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.15em 0.35em;
  min-width: 0;
  max-width: 100%;
}
.super-dash-widget-title-prefix {
  flex-shrink: 0;
  font-size: clamp(0.68rem, 1.05vw, 0.75rem);
  font-weight: 600;
  color: var(--slate-500);
}
.super-dash-widget-title-cluster .super-dash-widget-title {
  display: inline;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}
.super-dash-widget-header-row--description {
  width: 100%;
  min-width: 0;
}
.super-dash-widget-header-row--actions {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  flex-shrink: 0;
}
.super-dash-widget[data-expanded="0"] .super-dash-widget-body {
  display: none !important;
}
.super-dash-widget-description {
  display: block;
  width: 100%;
  font-size: clamp(0.65rem, 1vw, 0.75rem);
  font-weight: 400;
  color: var(--slate-500);
  line-height: 1.35;
}
.super-dash-widget-focus-bar {
  display: none;
  padding: 0.2rem 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--slate-800);
  background: var(--color-primary-pale, #eff6ff);
  border-bottom: 1px solid var(--super-dash-widget-border);
}
.super-dash-widget-focus-bar.is-visible {
  display: block;
}
.super-dash-widget-title,
.super-dash-widget-title .lang-editable {
  cursor: text;
}
.super-dash-widget-header-row--actions {
  cursor: default;
}
body.super-dash-freestyle-dragging {
  cursor: grabbing !important;
}
.super-dash-widget-title {
  display: block;
  width: auto;
  max-width: 100%;
  font-size: clamp(0.75rem, 1.2vw, 0.8125rem);
  font-weight: 600;
  color: var(--slate-700);
  word-break: break-word;
}
.super-dash-widget-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  cursor: default;
}
.super-dash-widget-btn {
  padding: 0.2rem 0.4rem;
  font-size: clamp(0.7rem, 1vw, 0.75rem);
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--slate-600);
  cursor: pointer;
  line-height: 1.2;
  min-height: 28px;
}
.super-dash-widget-btn:hover {
  background: var(--slate-200);
  color: var(--slate-800);
}
.super-dash-widget-fullscreen,
.super-dash-widget-expand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.super-dash-widget-expand-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.super-dash-widget-chevron-svg,
.super-dash-widget-frame-expand-svg,
.super-dash-widget-fullscreen > svg {
  display: block;
}
.super-dash-widget-body {
  flex: 1;
  min-height: 0;
  padding: clamp(0.4rem, 1vw, 0.5rem);
  overflow: auto;
  font-size: clamp(0.8125rem, 1.2vw, 1rem);
  display: flex;
  flex-direction: column;
}
.super-dash-widget--meal_signup .super-dash-widget-body {
  padding: 0;
}
.super-dash-widget--donor_contact_workspace .super-dash-widget-body {
  overflow: hidden;
  min-height: 0;
}
.super-dash-widget--donor_contact_workspace .donor-contact-workspace {
  min-height: 0;
  height: 100%;
}
.super-dash-widget-body > .super-dash-notes-widget {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.super-dash-lists-widget-embed {
  overflow: auto;
  max-height: 100%;
  min-height: 4rem;
}
.super-dash-lists-widget-table {
  font-size: 0.8125rem;
  width: 100%;
}
.super-dash-lists-widget-table th,
.super-dash-lists-widget-table td {
  padding: 0.35rem 0.5rem;
  white-space: nowrap;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.super-dash-lists-widget-loading {
  color: var(--slate-500);
  font-size: 0.875rem;
}
.super-dash-lists-widget-select.form-input {
  width: 100%;
  max-width: 15rem;
}
.super-dash-lists-widget-help {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  color: var(--slate-500);
  line-height: 1.4;
}
.super-dash-lists-config-gear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: inherit;
}
.super-dash-lists-config-gear:hover {
  text-decoration: none;
}
.super-dash-widget-resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 16px;
  height: 16px;
  cursor: se-resize;
  background: linear-gradient(135deg, transparent 50%, var(--slate-300) 50%);
  touch-action: none;
}
.super-dash-widget-resize-handle:hover {
  background: linear-gradient(135deg, transparent 50%, var(--slate-500) 50%);
}
.super-dash-widget-color-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.15rem 0.4rem;
}
.super-dash-widget-color-dot {
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.8);
  background: #f5f5f5;
}
.super-dash-widget-color-modal .super-dash-modal {
  max-width: 22rem;
}
.super-dash-widget-color-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}
.super-dash-widget-color-swatch-none {
  grid-column: 1 / -1;
}
.super-dash-widget-color-swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.7);
  cursor: pointer;
  background-clip: padding-box;
  font-size: 0.8rem;
  padding-inline: 0.75rem;
  white-space: nowrap;
}
.super-dash-widget-color-swatch:focus-visible {
  outline: 2px solid var(--focus-border, #0f766e);
  outline-offset: 2px;
}
.super-dash-widget-color-swatch-none {
  background: #fff;
}
/* Scale widget chrome when whiteboard is narrow (container query) */
@container super-dash-wb (max-width: 520px) {
  .super-dash-widget {
    min-width: 160px;
    min-height: 100px;
  }
  .super-dash-widget-title {
    font-size: 0.75rem;
  }
  .super-dash-widget-btn {
    font-size: 0.7rem;
    min-height: 24px;
  }
}
/* New widget placed in center, ready to drag; highlight until first drop */
.super-dash-widget--just-added {
  box-shadow: 0 0 0 3px var(--color-primary), var(--shadow-md);
}
.super-dash-widget--just-added .super-dash-widget-header {
  background: var(--color-primary-pale);
}
.super-dash-notes-widget {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  min-height: 0;
}
.super-dash-notes-widget .super-dash-notes-content {
  flex: 1;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
  resize: none;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.5rem;
  font-family: inherit;
  font-size: clamp(0.8125rem, 1.2vw, 1rem);
}
.super-dash-notes-widget .super-dash-notes-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}
.super-dash-notes-widget .super-dash-notes-mic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-sm);
  background: var(--slate-50);
  color: var(--slate-700);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.super-dash-notes-widget .super-dash-notes-mic:hover:not(:disabled) {
  background: var(--slate-100);
  border-color: var(--slate-300);
}
.super-dash-notes-widget .super-dash-notes-mic:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.super-dash-notes-widget .super-dash-notes-mic.lang-tb-speak-active,
.super-dash-notes-widget .super-dash-notes-mic.lang-tb-speak-warming {
  background: var(--red-100);
  border-color: var(--red-300);
  color: var(--red-700);
}
.super-dash-notes-widget .super-dash-notes-mic .super-dash-notes-mic-icon {
  flex-shrink: 0;
}
.super-dash-freestyle-widget-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}
.super-dash-freestyle-widget-list li {
  margin: 0;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--slate-200);
}
.super-dash-freestyle-widget-list li:last-child {
  border-bottom: none;
}
.super-dash-freestyle-widget-list button {
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.75rem;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--slate-100);
  color: var(--slate-800);
  cursor: pointer;
  font-size: 1rem;
}
.super-dash-freestyle-widget-list button:hover {
  background: var(--slate-200);
}
/* Add-widget modal: department → type accordions */
.super-dash-widget-picker-root {
  max-height: min(60vh, 28rem);
  overflow-y: auto;
  margin: 0 0 1rem;
  padding-right: 0.25rem;
}
.super-dash-widget-picker-dept {
  border-bottom: 1px solid var(--slate-200);
  margin-bottom: 0.35rem;
}
.super-dash-widget-picker-dept:last-child {
  border-bottom: none;
  margin-bottom: 0;
}
.super-dash-widget-picker-dept-toggle,
.super-dash-widget-picker-type-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.35rem;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--slate-800);
  cursor: pointer;
}
.super-dash-widget-picker-type-toggle {
  font-weight: 500;
  font-size: 0.875rem;
  padding-left: 1.25rem;
  color: var(--slate-700);
}
.super-dash-widget-picker-chevron {
  display: inline-block;
  transition: transform 0.15s ease;
  color: var(--slate-500);
  font-size: 0.65rem;
  width: 1rem;
  flex-shrink: 0;
}
.super-dash-widget-picker-dept-toggle[aria-expanded="false"] .super-dash-widget-picker-chevron,
.super-dash-widget-picker-type-toggle[aria-expanded="false"] .super-dash-widget-picker-chevron {
  transform: rotate(-90deg);
}
.super-dash-widget-picker-dept-body {
  padding: 0 0 0.5rem 0.25rem;
}
.super-dash-widget-picker-type {
  margin-bottom: 0.35rem;
}
.super-dash-widget-picker-type-body {
  padding: 0.25rem 0 0.25rem 0.5rem;
}
.super-dash-widget-picker-widget-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0.35rem;
}
.super-dash-widget-picker-widget-list li {
  margin: 0;
  padding: 0;
  border: none;
  width: 100%;
  max-width: 100%;
}
.super-dash-widget-picker-widget-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  width: 100% !important;
  max-width: 100%;
  text-align: left;
  font-size: 0.875rem !important;
}
.super-dash-widget-picker-widget-title {
  display: block;
  width: 100%;
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.3;
}
.super-dash-widget-picker-widget-desc {
  display: block;
  width: 100%;
  font-weight: 400;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--slate-500);
}
.super-dash-freestyle-add-modal-back {
  background: transparent !important;
  color: var(--slate-600);
  font-size: 0.875rem;
}
.super-dash-freestyle-add-modal-back:hover {
  background: var(--slate-100) !important;
  color: var(--slate-800);
}
/* Mobile: stack widgets in desktop order, full width; scale gracefully */
@media (max-width: 768px) {
  .super-dash-freestyle-whiteboard {
    min-height: min(400px, calc(100vh - 10rem));
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .super-dash-widget {
    position: static !important;
    width: 100% !important;
    min-width: 0;
    left: auto !important;
    top: auto !important;
    margin-bottom: 0.75rem;
    min-height: 100px;
    font-size: clamp(90%, 2.5vw, 100%) !important;
  }
  .super-dash-widget:last-child {
    margin-bottom: 0;
  }
  .super-dash-widget-title {
    font-size: clamp(0.8125rem, 2.2vw, 0.9375rem);
  }
  .super-dash-widget-body {
    font-size: clamp(0.8125rem, 2vw, 1rem);
  }
  .super-dash-widget-resize-handle {
    width: 24px;
    height: 24px;
  }
}

/* Database viewer: canvas, table cards, relationship lines */
.admin-content--db-viewer {
  --page-content-max: 100%;
  --page-content-width: 100%;
  --page-content-padding-x: 0.75rem;
  --page-content-padding-y: 0.5rem;
  max-width: var(--page-content-max);
  width: var(--page-content-width);
  padding: var(--page-content-padding-y) var(--page-content-padding-x);
  min-width: 0;
}
.db-viewer-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}
.db-viewer-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}
.db-viewer-status {
  font-size: 0.8125rem;
  color: var(--slate-500);
}
.db-viewer-show-label {
  font-size: 0.875rem;
  margin: 0;
}
.db-viewer-show-select.form-input {
  min-width: 10rem;
  max-width: 20rem;
  font-size: 0.875rem;
}
.db-viewer-rearrange-btn {
  flex-shrink: 0;
}
.db-viewer-undo-btn,
.db-viewer-redo-btn {
  flex-shrink: 0;
  min-width: 2.25rem;
  padding: 0.25rem 0.5rem;
}
.db-viewer-canvas-wrap {
  overflow: auto;
  width: 100%;
  min-height: min(500px, 65vh);
  background: var(--slate-50, #f8fafc);
  border: 1px dashed var(--slate-300);
  border-radius: var(--radius, 6px);
}
.db-viewer-stage {
  position: relative;
  width: 3000px;
  min-width: 3000px;
  height: 2400px;
  min-height: 2400px;
  padding: 0;
}
.db-viewer-stage--read-only {
  cursor: default;
}
.db-viewer-stage--read-only .db-viewer-card {
  cursor: default;
}
.db-viewer-selection-rect {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 5;
  border: 2px dashed var(--slate-400);
  background: rgba(148, 163, 184, 0.08);
  box-sizing: border-box;
}
.db-viewer-selection-rect.db-viewer-selection-rect--visible {
  visibility: visible;
}
.db-viewer-svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.db-viewer-svg--dragging {
  z-index: 2;
}
.db-viewer-svg-highlight {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.db-viewer-svg-highlight.db-viewer-svg--dragging {
  z-index: 2;
}
.db-viewer-cards {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.db-viewer-card {
  pointer-events: auto;
  position: absolute;
  display: flex;
  flex-direction: column;
  background: var(--color-surface, #fff);
  border: 1px solid var(--slate-300);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  touch-action: none;
  min-width: 60px;
  min-height: 60px;
}
.db-viewer-card-primary-parent {
  border-width: 3px;
  border-color: var(--slate-400);
}
.db-viewer-card-dragging {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-color: var(--slate-400);
  outline: 2px solid var(--slate-400);
  outline-offset: 1px;
}
.db-viewer-card-connected {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  border-color: var(--slate-300);
  background: var(--slate-50, #f8fafc);
}
.db-viewer-card-just-shown {
  box-shadow: 0 0 0 2px var(--slate-400);
  border-color: var(--slate-400);
  background: var(--slate-50, #f8fafc);
}
.db-viewer-card-selected {
  box-shadow: 0 0 0 2px var(--slate-400);
  border-color: var(--slate-400);
}
.db-viewer-card-header {
  padding: 8px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--slate-700);
  background: var(--slate-100);
  border-bottom: 1px solid var(--slate-300);
  cursor: grab;
  flex-shrink: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4px;
}
.db-viewer-card-header-label {
  flex: 1;
  min-width: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.2;
}
.db-viewer-card--condensed .db-viewer-card-header-label {
  overflow-wrap: normal;
  word-break: normal;
  white-space: normal;
}
.db-viewer-card-close {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 2px;
  background: transparent;
  color: var(--slate-500);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.db-viewer-card-close:hover {
  background: var(--slate-200);
  color: var(--slate-800);
}
.db-viewer-card-header:active {
  cursor: grabbing;
}
.db-viewer-card-body {
  flex: 1;
  padding: 6px 8px;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 60px;
  max-height: 180px;
  font-size: 0.6875rem;
}
.db-viewer-field-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 4px 4px 6px;
  min-height: 18px;
  position: relative;
}
.db-viewer-field-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Invisible marker used only to measure key row Y; stubs and lines are drawn on canvas (SVG) */
.db-viewer-key-anchor {
  flex-shrink: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.db-viewer-resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 14px;
  height: 14px;
  cursor: se-resize;
  background: linear-gradient(135deg, transparent 50%, var(--slate-300) 50%);
  pointer-events: auto;
}
.db-viewer-resize-handle:hover {
  background: linear-gradient(135deg, transparent 50%, var(--slate-500) 50%);
}

/* Access explorer (Site Admin): same canvas pattern as database viewer */
.admin-content--access-explorer {
  --page-content-max: 100%;
  --page-content-width: 100%;
  --page-content-padding-x: 0.75rem;
  --page-content-padding-y: 0.5rem;
  max-width: var(--page-content-max);
  width: var(--page-content-width);
  padding: var(--page-content-padding-y) var(--page-content-padding-x);
  min-width: 0;
}
.access-explorer-toolbar {
  align-items: flex-end;
}
.access-explorer-label {
  font-size: 0.875rem;
  margin: 0;
  align-self: center;
}
.access-explorer-inline {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.access-explorer-select.form-input {
  min-width: 11rem;
  max-width: 22rem;
  font-size: 0.875rem;
}
.access-explorer-search.form-input {
  min-width: 10rem;
  max-width: 18rem;
  font-size: 0.875rem;
}
.access-explorer-user-combo {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  min-width: 14rem;
  max-width: 22rem;
}
.access-explorer-user-combo .access-explorer-search.form-input {
  width: 100%;
  max-width: none;
}
.access-explorer-user-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 2px);
  z-index: var(--z-menu-dropdowns, 1400);
  max-height: 16rem;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--color-surface, #fff);
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: 0.375rem;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
}
.access-explorer-user-dropdown-hint {
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  color: var(--slate-600, #475569);
}
.access-explorer-user-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.45rem 0.65rem;
  border: none;
  border-bottom: 1px solid var(--slate-100, #f1f5f9);
  background: var(--color-surface, #fff);
  cursor: pointer;
  font-size: 0.875rem;
  color: inherit;
}
.access-explorer-user-dropdown-item:last-child {
  border-bottom: none;
}
.access-explorer-user-dropdown-item:hover,
.access-explorer-user-dropdown-item:focus-visible,
.access-explorer-user-dropdown-item--active {
  background: var(--slate-100, #f1f5f9);
  outline: none;
}
.access-explorer-canvas-wrap {
  margin-top: 0.25rem;
}
.access-explorer-line .db-viewer-field-label {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  line-height: 1.35;
}
.admin-content--access-explorer .db-viewer-card-body {
  max-height: 280px;
}
.access-explorer-card--user {
  border-left: 3px solid var(--focus-border, var(--slate-400));
}
.access-explorer-card--school_program {
  border-left: 3px solid var(--slate-500, #64748b);
}
.access-explorer-card--contact_policy {
  border-left: 3px solid #7c3aed;
}
.access-explorer-card--contact_pool_access {
  border-left: 3px solid #0d9488;
}

/* Page help: faint ? icon next to title; nearly full-screen modal with help image; site admin upload/remove */
.page-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.page-title-row h1,
.page-title-row h2 {
  margin: 0;
}
.page-help-icon-wrap {
  flex-shrink: 0;
  margin-left: auto;
}
.page-help-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 1px solid var(--slate-300);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--slate-500);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.page-help-icon-btn:hover {
  color: var(--slate-700);
  border-color: var(--slate-400);
  background: var(--slate-100);
}
.page-help-icon {
  line-height: 1;
}
.page-help-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 3000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
}
.page-help-modal[aria-hidden="false"] {
  display: flex;
}
body.page-help-modal-open {
  overflow: hidden;
}
.page-help-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
}
.page-help-modal-content {
  position: relative;
  width: 100%;
  max-width: 92vw;
  max-height: 92vh;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.page-help-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.page-help-modal-title {
  margin: 0;
  font-size: 1.125rem;
}
.page-help-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
}
.page-help-modal-close:hover {
  color: var(--color-text);
  background: var(--slate-100);
}
.page-help-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.page-help-image-container {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--slate-50);
  border-radius: var(--radius-sm);
  padding: 0.5rem;
}
.page-help-image {
  max-width: 100%;
  max-height: 75vh;
  height: auto;
  object-fit: contain;
}
.page-help-no-image {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}
.page-help-admin-zone {
  border-top: 1px solid var(--color-border);
  padding-top: 1rem;
}
.page-help-upload-zone {
  position: relative;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--slate-50);
  transition: border-color var(--transition), background var(--transition);
}
.page-help-upload-zone[data-drag-over="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary-pale);
}
.page-help-upload-label {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  pointer-events: none;
}
.page-help-remove-btn {
  margin-top: 0.5rem;
}
.page-help-upload-status {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}
.page-help-upload-status-error {
  color: var(--color-error);
}

/* Help from Site Admin: when initiator is on mobile, admin sees same layout (viewport set in head; body constrained as fallback). */
body.help-initiator-mobile {
  max-width: 768px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 0 0 1px var(--color-border-light, rgba(0,0,0,0.06));
}

/* Help watch viewer overlay: fake cursor arrow and click ripple (initiator following along). Does not move the user's real cursor. */
.help-watch-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
}
/* Embedded live view: overlay and cursor live inside the container, positioned relative to it */
.help-watch-live-section {
  margin: 0 0 0.5rem;
}
.help-watch-live-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 320px;
  max-height: 90vh;
  aspect-ratio: 16 / 9;
  background: var(--slate-100);
  border-radius: var(--radius, 6px);
  overflow: hidden;
  border: 1px solid var(--slate-200);
}
.help-watch-meta {
  font-size: 0.9375rem;
}
.help-watch-live-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.help-watch-live-container .help-watch-overlay-embedded {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.help-watch-live-container .help-watch-overlay-embedded .help-watch-cursor {
  position: absolute;
}
.help-watch-live-container .help-watch-overlay-embedded .help-watch-click-ripple {
  position: absolute;
}
/* Fake cursor arrow: SVG pointer so initiator sees where the admin is pointing. */
.help-watch-cursor {
  position: fixed;
  width: 22px;
  height: 22px;
  margin-left: 0;
  margin-top: 0;
  left: 0;
  top: 0;
  pointer-events: none;
  transition: left 0.05s ease-out, top 0.05s ease-out;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232563eb' stroke='%23fff' stroke-width='1' d='M4 2l16 10-7 1 2 7-4-2-2-6z'/%3E%3C/svg%3E");
  background-size: 22px 22px;
  background-repeat: no-repeat;
  background-position: 0 0;
}
.help-watch-click-ripple {
  position: fixed;
  width: 24px;
  height: 24px;
  border: 2px solid var(--blue-600, #2563eb);
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.25);
  animation: help-watch-ripple 0.5s ease-out forwards;
  pointer-events: none;
}
@keyframes help-watch-ripple {
  to {
    transform: scale(1.5);
    opacity: 0;
  }
}
.help-watch-session-ended {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.75rem 1.25rem;
  background: var(--slate-800);
  color: var(--slate-100);
  border-radius: var(--radius, 6px);
  font-size: 0.9rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Initiator banner: shown when a site admin is logged in as this user */
.initiator-help-active-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0.5rem 1rem;
  background: var(--amber-100, #fef3c7);
  border-bottom: 1px solid var(--amber-200, #fde68a);
  font-size: 0.9rem;
  color: var(--slate-800);
}
.initiator-help-active-banner-text {
  flex: 1;
  min-width: 0;
}
.initiator-help-active-banner-link {
  font-weight: 600;
  color: var(--slate-800);
  text-decoration: underline;
}
.initiator-help-active-banner-link:hover {
  text-decoration: none;
}

/* Site Admin: Contact IMAP traffic poll failure (replies may not be imported) */
.contact-imap-poll-alert-banner {
  padding: 0.85rem 1rem;
  background: var(--orange-50, #fff7ed);
  color: var(--orange-950, #431407);
  border-bottom: 4px solid var(--orange-600, #ea580c);
  box-shadow: 0 3px 14px rgba(234, 88, 12, 0.22);
  font-size: 0.9375rem;
  line-height: 1.45;
  position: relative;
  z-index: 1;
}
.contact-imap-poll-alert-banner strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--orange-900, #7c2d12);
}
.contact-imap-poll-alert-banner .btn-primary {
  background: var(--orange-600, #ea580c);
  border-color: var(--orange-700, #c2410c);
  color: #fff;
}
.contact-imap-poll-alert-banner .btn-primary:hover {
  filter: brightness(0.95);
}

/* Contact CRM policies: manual “Poll all mailboxes now” reads as a primary control */
#contact-imap-poll-alert .contact-imap-poll-manual-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
  padding: 1rem;
  background: var(--white, #fff);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.06));
}
#contact-imap-poll-alert .contact-imap-poll-manual-actions .btn {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
}
#contact-imap-poll-alert .contact-imap-poll-manual-status {
  font-size: 0.875rem;
  color: var(--slate-600);
  line-height: 1.4;
  flex: 1 1 12rem;
  min-width: 0;
}

#contact-imap-poll-alert .contact-imap-poll-interval-row .contact-imap-poll-interval-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
#contact-imap-poll-alert .contact-imap-poll-interval-row select {
  min-height: 44px;
}
#contact-imap-poll-alert .contact-imap-poll-interval-status {
  font-size: 0.875rem;
  color: var(--slate-600);
  line-height: 1.4;
  min-height: 1.25rem;
}

/* Real-time help watch debug (testing): viewer = received data; sender = sent data */
.help-watch-viewer-debug {
  display: inline-block;
  margin-left: 0.5rem;
  font-family: ui-monospace, monospace;
  font-size: 0.75rem;
  color: var(--slate-600);
}
.help-watch-sender-debug-toast {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  z-index: 9998;
  max-width: 22rem;
  padding: 0.5rem 0.75rem;
  background: var(--slate-800);
  color: #e2e8f0;
  font-family: ui-monospace, monospace;
  font-size: 0.75rem;
  border-radius: 4px;
  pointer-events: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Help watch paths panels (admin + initiator) – show file locations and test fetch */
.help-watch-paths-panel {
  position: fixed;
  left: 1rem;
  z-index: 9997;
  max-width: min(90vw, 42rem);
  padding: 0.75rem 1rem;
  background: var(--slate-100);
  border: 1px solid var(--slate-300);
  border-radius: 6px;
  font-size: 0.8125rem;
  color: var(--slate-800);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.help-watch-paths-panel.help-watch-viewer-paths {
  top: 5rem;
}
.help-watch-sender-paths.help-watch-paths-panel {
  bottom: 4rem;
}
.help-watch-paths-details summary {
  cursor: pointer;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.help-watch-paths-dl {
  margin: 0.5rem 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 1rem;
}
.help-watch-paths-dl dt {
  font-weight: 500;
  color: var(--slate-600);
}
.help-watch-paths-dl dd {
  margin: 0;
  word-break: break-all;
}
.help-watch-paths-dl code {
  font-size: 0.75rem;
  background: var(--slate-200);
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
}
.help-watch-paths-note {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  color: var(--slate-600);
}
.help-watch-test-result {
  margin: 0.5rem 0 0;
  padding: 0.5rem;
  background: var(--slate-800);
  color: #e2e8f0;
  font-size: 0.7rem;
  max-height: 12rem;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
  border-radius: 4px;
}

/* Initial contact conversation (staging messages + reply) */
.core-initial-contact-conversation {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--slate-200);
}
.core-initial-contact-conversation-title {
  font-size: 1.125rem;
  margin: 0 0 0.75rem;
  color: var(--slate-800);
}
.core-initial-contact-messages {
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: var(--slate-50);
  border-radius: 6px;
  border: 1px solid var(--slate-200);
  min-height: 2rem;
}
.core-initial-contact-messages-loading,
.core-initial-contact-messages-empty,
.core-initial-contact-messages-error {
  margin: 0;
  color: var(--slate-600);
  font-size: 0.9375rem;
}
.core-initial-contact-message {
  margin-bottom: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  border-left: 3px solid var(--slate-300);
}
.core-initial-contact-message:last-child {
  margin-bottom: 0;
}
.core-initial-contact-message-out {
  background: var(--blue-50);
  border-left-color: var(--blue-500);
}
.core-initial-contact-message-in {
  background: var(--white);
  border-left-color: var(--slate-500);
}
.core-initial-contact-message-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--slate-600);
  margin-right: 0.5rem;
}
.core-initial-contact-message-subject {
  display: block;
  margin: 0.25rem 0 0;
  font-size: 0.9375rem;
}
.core-initial-contact-message-body {
  margin: 0.35rem 0 0;
  font-size: 0.9375rem;
  white-space: pre-wrap;
  word-break: break-word;
}
.core-initial-contact-message-date {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  color: var(--slate-500);
}
.core-initial-contact-message-meta {
  margin-left: 0.5rem;
}
.core-initial-contact-summary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 1.5rem;
  margin: 0.5rem 0 0;
}
.core-initial-contact-summary dt {
  font-weight: 500;
  color: var(--slate-600);
  margin: 0;
}
.core-initial-contact-summary dd {
  margin: 0;
}

/* Tasks widget (Super Dash) */
.tasks-widget {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.tasks-widget-header {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
.tasks-widget-footer {
  display: flex;
  justify-content: flex-start;
  margin-top: 0.5rem;
}
.tasks-widget-list-wrap {
  max-height: 360px;
  overflow-y: auto;
}
.tasks-widget-list,
.tasks-widget-archives-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Core polling/realtime item pulse. Applied only to changed rows/cards/blocks, not whole widgets. */
.core-change-highlight-pulse {
  animation: core-change-highlight-pulse 1s ease-in-out 3;
}
@keyframes core-change-highlight-pulse {
  0%, 100% {
    box-shadow: 0 0 0 2px var(--color-primary, #2563eb);
  }
  50% {
    box-shadow: 0 0 0 6px var(--color-primary-light, #bfdbfe);
  }
}
@media (prefers-reduced-motion: reduce) {
  .core-change-highlight-pulse {
    animation: none;
    box-shadow: 0 0 0 3px var(--color-primary, #2563eb);
  }
}
.tasks-widget-item,
.tasks-widget-archives-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  cursor: pointer;
  font-size: 0.9rem;
}
.tasks-widget-title {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tasks-widget-complete {
  margin: 0;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  cursor: pointer;
}
.tasks-widget-complete-hit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  margin: 0 0.25rem 0 0;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: var(--radius-sm, 6px);
}
.tasks-widget-complete-hit:has(.tasks-widget-complete:disabled) {
  cursor: default;
  opacity: 0.55;
}
.tasks-widget-completed-block {
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
}
.tasks-widget-completed-heading {
  margin: 0 0 0.4rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--slate-600);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.tasks-widget-list-completed .tasks-widget-item-completed {
  opacity: 0.92;
}
.tasks-widget-item-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  align-items: flex-start;
}
.tasks-widget-item-main .tasks-widget-title {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}
.tasks-widget-assignee-line {
  font-size: 0.78rem;
  color: var(--slate-600);
  line-height: 1.25;
  max-width: 100%;
}
.tasks-widget-assignee-line-empty {
  color: var(--slate-400);
}
.tasks-widget-edit-receipt-total {
  display: flex;
  align-items: center;
  min-height: 44px;
  background: var(--slate-50, #f8fafc);
  cursor: default;
}
.tasks-widget-shared-assign {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--slate-200);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.tasks-widget-assignee-field-label {
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--slate-700);
  display: block;
  margin-bottom: 0.05rem;
}
.tasks-widget-assignee-ms {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.tasks-widget-assignee-lookup {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  position: relative;
  z-index: 1;
  isolation: isolate;
}
.tasks-widget-assignee-dropdown {
  margin-top: 0.15rem;
}
.tasks-widget-assignee-dropdown[hidden] {
  display: none !important;
}
.tasks-widget-assignee-list-wrap {
  max-height: 12rem;
  overflow-y: auto;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-sm);
  background: var(--color-surface, #fff);
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}
.tasks-widget-assignee-dropdown .tasks-widget-assignee-empty-msg {
  margin: 0.35rem 0 0;
  padding: 0 0.15rem;
}
.tasks-widget-assignee-picklist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tasks-widget-assignee-pick-row-btn {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  gap: 0.5rem;
  padding: 0.45rem 0.55rem;
  margin: 0;
  border: none;
  border-bottom: 1px solid var(--slate-100);
  border-radius: 0;
  background: var(--color-surface, #fff);
  cursor: pointer;
  min-height: 44px;
  font-size: 0.875rem;
  color: inherit;
  font-family: inherit;
}
.tasks-widget-assignee-picklist li:last-child .tasks-widget-assignee-pick-row-btn {
  border-bottom: none;
}
.tasks-widget-assignee-pick-row-btn:hover {
  background: var(--slate-50);
}
.tasks-widget-assignee-pick-name {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}
.tasks-widget-dates-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 0.65rem 1rem;
  width: 100%;
  box-sizing: border-box;
}
.tasks-widget .tasks-widget-add-form.form-compact .tasks-widget-dates-row,
.tasks-widget .tasks-widget-edit-body.form-compact .tasks-widget-dates-row {
  flex-direction: row;
  align-items: flex-end;
}
.tasks-widget-dates-row .tasks-widget-date-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 0 1 auto;
  min-width: 0;
}
.tasks-widget-dates-row .tasks-widget-date-field > label {
  margin: 0;
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--slate-700);
}
.tasks-widget-dates-row .tasks-widget-input-date {
  width: auto;
  min-width: 9.5rem;
  max-width: 100%;
}
.tasks-widget-dates-row select.tasks-widget-input-time,
.tasks-widget-dates-row select.form-input.tasks-widget-input-time {
  width: auto;
  min-width: 6.5rem;
  max-width: 100%;
}
.tasks-widget-assignee-empty-msg {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--slate-500);
}
.tasks-widget-assignee-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  min-height: 0;
}
.tasks-widget-assignee-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.35rem 0.2rem 0.5rem;
  border-radius: 999px;
  background: var(--slate-100);
  font-size: 0.8rem;
  max-width: 100%;
}
.tasks-widget-assignee-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 12rem;
}
.tasks-widget-assignee-chip-remove {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0 0.15rem;
  line-height: 1;
  color: var(--slate-600);
  font-size: 1rem;
}
.tasks-widget-add-assign-debug {
  margin-top: 0.65rem;
  padding: 0.5rem 0.65rem;
  border: 1px dashed var(--slate-400);
  border-radius: var(--radius-sm);
  background: var(--slate-50);
  max-height: 16rem;
  overflow: auto;
}
.tasks-widget-add-assign-debug-title {
  font-weight: 600;
  font-size: 0.8rem;
  margin: 0 0 0.35rem;
  color: var(--slate-800);
}
.tasks-widget-add-assign-debug-hint {
  margin: 0 0 0.45rem;
  font-size: 0.72rem;
  color: var(--slate-600);
  line-height: 1.35;
}
.tasks-widget-add-assign-debug-body {
  margin: 0;
  padding: 0;
  font-size: 0.68rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--slate-900);
}

.tasks-widget-shared-assign--top {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  border-bottom: 1px solid var(--slate-200);
  margin-bottom: 0.4rem;
  padding-bottom: 0.4rem;
}
.tasks-widget .tasks-widget-edit-body.form-compact > .tasks-widget-shared-assign--top:first-of-type {
  margin-top: 0;
}

/* Add/edit: wider modal, cap height, scroll form body */
.tasks-widget .super-dash-modal.tasks-widget-modal-panel {
  display: flex;
  flex-direction: column;
  max-height: min(92vh, 44rem);
  overflow: hidden;
  max-width: min(44rem, calc(100vw - 2rem));
  width: 100%;
}
.tasks-widget .super-dash-modal.tasks-widget-modal-panel > .tasks-widget-modal-header-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  flex-shrink: 0;
  width: 100%;
  min-height: 0;
}
.tasks-widget .tasks-widget-modal-header-bar .tasks-widget-edit-modal-title {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 1.05rem;
  line-height: 1.35;
}
.tasks-widget .tasks-widget-edit-header-actions {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
}
.tasks-widget .tasks-widget-edit-header-actions[hidden] {
  display: none !important;
}
.tasks-widget .super-dash-modal.tasks-widget-modal-panel > .tasks-widget-add-form,
.tasks-widget .super-dash-modal.tasks-widget-modal-panel > .tasks-widget-edit-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-right: 0.35rem;
}

/* Modal forms: flex column only — avoids Super Dash .form-compact multi-column grid
   placing rows side-by-side (overlap) and keeps one vertical flow. */
.tasks-widget .tasks-widget-add-form.form-compact,
.tasks-widget .tasks-widget-edit-body.form-compact {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.65rem;
  max-width: none;
  width: 100%;
}
.tasks-widget .tasks-widget-add-form.form-compact .form-row,
.tasks-widget .tasks-widget-edit-body.form-compact .form-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  min-height: 0;
  margin-bottom: 0;
}
.tasks-widget .tasks-widget-add-form.form-compact .form-row label:first-child,
.tasks-widget .tasks-widget-edit-body.form-compact .form-row label:first-child {
  padding-right: 0;
}
.tasks-widget .tasks-widget-add-form.form-compact .form-row-two,
.tasks-widget .tasks-widget-edit-body.form-compact .form-row-two {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.75rem 1.25rem;
  align-items: start;
  margin-bottom: 0;
  min-height: 0;
}
.tasks-widget .tasks-widget-add-form.form-compact .form-row-two .form-cell,
.tasks-widget .tasks-widget-edit-body.form-compact .form-row-two .form-cell {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.tasks-widget .tasks-widget-add-form.form-compact .form-row-two .form-cell label,
.tasks-widget .tasks-widget-edit-body.form-compact .form-row-two .form-cell label {
  margin: 0;
  padding-right: 0;
  font-weight: 500;
  color: var(--slate-700);
  font-size: 0.875rem;
}
.tasks-widget .tasks-widget-add-form.form-compact .tasks-widget-modal-actions-row,
.tasks-widget .tasks-widget-edit-body.form-compact .tasks-widget-edit-actions-row {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.tasks-widget .tasks-widget-edit-body.form-compact .tasks-widget-edit-actions-row .form-cell {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  min-height: 0;
}
.tasks-widget .tasks-widget-edit-body.form-compact .tasks-widget-edit-actions-row .tasks-widget-edit-actions-finished-cell {
  justify-content: flex-end;
  margin-left: auto;
  text-align: right;
}
@media (max-width: 520px) {
  .tasks-widget .tasks-widget-dates-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: 0.2rem;
    -webkit-overflow-scrolling: touch;
    gap: 0.5rem;
  }
  .tasks-widget .tasks-widget-dates-row .tasks-widget-date-field {
    flex: 0 0 auto;
  }
}

/* Freestyle / widget shell overflow can clip fixed modals and picklists */
.super-dash-widget:has(.tasks-widget .super-dash-modal-overlay.is-open) {
  overflow: visible;
  z-index: 3500;
}
.super-dash-widget:has(.tasks-widget .super-dash-modal-overlay.is-open) .super-dash-widget-body {
  overflow: visible;
}

/* Full-width rows in add/edit (legacy grid hint; parent is flex column). */
.tasks-widget-add-form .form-row-full,
.tasks-widget-edit-body .form-row-full {
  width: 100%;
  min-width: 0;
}
.tasks-widget-item:hover {
  background: var(--slate-50);
}
.tasks-widget-item.dragging {
  opacity: 0.7;
  background: var(--blue-50);
}
.tasks-widget-archives-item {
  cursor: default;
}
.tasks-widget-archives-item .btn {
  padding: 0.2rem 0.4rem;
  font-size: 0.75rem;
}

/* Public form fill: language selector (external forms with multiple site languages) */
.form-fill-lang-row {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem 0.75rem;
}
.form-fill-lang-label {
  font-weight: 500;
  color: var(--slate-700);
}
.form-fill-lang-select {
  min-height: 44px;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--form-dynamic-input-border, var(--form-input-border));
  border-radius: var(--radius);
  background: var(--form-dynamic-input-bg, #fff);
  font-size: 1rem;
  box-shadow: var(--form-dynamic-input-shadow, var(--form-input-shadow));
}
.form-fill-lang-select:focus {
  outline: none;
  border-color: var(--focus-border);
  box-shadow: 0 0 0 2px var(--focus-ring);
}

/* Site admin: gear link on module scheduling calendars → reservation task settings */
.core-cal-admin-gear-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-md, 8px);
  color: var(--color-text-muted, #64748b);
  border: 1px solid var(--color-border, #e2e8f0);
  background: var(--color-surface, #fff);
  flex-shrink: 0;
  text-decoration: none;
}
.core-cal-admin-gear-link:hover {
  color: var(--color-primary, #2563eb);
  border-color: var(--color-primary-light, #bfdbfe);
}
button.core-cal-admin-gear-link {
  cursor: pointer;
  font: inherit;
}
.modal-overlay.cal-res-task-modal[hidden],
.cal-res-task-modal[hidden] {
  display: none !important;
}

/* Theme overrides: theme-modules.css is @imported at top; rules below still override it in cascade. */

/* Desktop only: force chat conversation pane textarea to expand (no scrollbar). Mobile unchanged. */
@media (min-width: 1024px) {
  #chat-conversation-modal .chat-pane .chat-pane-input-wrap textarea,
  #chat-conversation-modal .chat-pane .chat-pane-input-wrap .chat-conversation-input,
  #chat-conversation-modal .chat-pane .chat-pane-input-wrap .chat-input-expand,
  #chat-conversation-modal .chat-pane .chat-pane-input-wrap .chat-pane-body,
  #chat-conversation-modal .chat-modal-panes .chat-pane .chat-pane-input-wrap textarea,
  #chat-conversation-modal .chat-modal-panes .chat-pane .chat-pane-input-wrap .chat-conversation-input,
  #chat-conversation-modal .chat-modal-panes .chat-pane .chat-pane-input-wrap .chat-input-expand,
  #chat-conversation-modal .chat-modal-panes .chat-pane .chat-pane-input-wrap .chat-pane-body {
    min-height: 6rem !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    resize: none !important;
  }
}

/* Community: assigned tasks panel (today / upcoming) */
.community-tasks-wrap #community-tasks-mount {
  display: flex;
  flex-direction: column;
  gap: 0;
}
@media (max-width: 768px) {
  .community-tasks-wrap.section-card {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
  }
}
.community-tasks-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0 0 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--slate-200, #e2e8f0);
  color: var(--slate-900, #0f172a);
}
.community-tasks-settings-btn {
  min-height: 36px;
  min-width: 36px;
  padding: 0.2rem 0.5rem;
  line-height: 1;
  font-size: 1.05rem;
}
.community-tasks-heading-link {
  color: inherit;
  text-decoration: none;
}
.community-tasks-heading-link:hover {
  color: var(--color-primary, #2563eb);
}
.community-tasks-heading-link:focus-visible {
  outline: 2px solid var(--focus-ring, #93c5fd);
  outline-offset: 3px;
  border-radius: 4px;
}
.community-tasks-subsection {
  background: var(--slate-50, #f8fafc);
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: var(--radius-md, 10px);
  padding: 0.85rem 1rem 1rem;
  margin-bottom: 0.85rem;
}
.community-tasks-subsection:last-child {
  margin-bottom: 0;
}
.community-tasks-subheading {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  margin: 0 0 0.65rem;
  color: var(--slate-700, #334155);
}
.community-tasks-upcoming-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}
.community-tasks-upcoming-head .community-tasks-subheading {
  margin: 0;
}
.community-tasks-upcoming-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.community-tasks-upcoming-step {
  min-width: 2rem;
  min-height: 2rem;
  padding: 0 0.45rem;
  line-height: 1;
  font-size: 1rem;
}
.community-tasks-upcoming-days {
  min-width: 7.5rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--slate-600, #475569);
}
@media (max-width: 640px) {
  .community-tasks-upcoming-head {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
  }
  .community-tasks-upcoming-head .community-tasks-subheading {
    margin: 0;
    flex-shrink: 0;
  }
  .community-tasks-upcoming-controls {
    align-self: center;
    justify-content: flex-end;
    width: auto;
    flex: 1;
    min-width: 0;
    gap: 0.25rem;
  }
  .community-tasks-upcoming-step {
    min-width: 38px;
    min-height: 38px;
  }
  .community-tasks-upcoming-days {
    min-width: 0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.78rem;
  }
}
.community-tasks-subhint {
  font-size: 0.875rem;
  color: var(--slate-600, #475569);
  margin: -0.1rem 0 0.65rem;
  line-height: 1.4;
}
.community-tasks-empty {
  margin: 0;
  font-size: 0.9rem;
  color: var(--slate-500, #64748b);
}
.community-tasks-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.community-tasks-item {
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: var(--radius-md, 8px);
  margin-bottom: 0.45rem;
  background: var(--color-surface, #fff);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(30, 41, 59, 0.05));
}
.community-tasks-item:last-child {
  margin-bottom: 0;
}
.community-tasks-item-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  text-align: left;
  cursor: pointer;
  min-height: 44px;
  color: var(--color-text, #1e293b);
  font-size: 0.95rem;
  padding: 0.55rem 0.65rem;
}
button.community-tasks-item-btn {
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: 8px;
}
li.community-tasks-item-btn {
  outline: none;
}
.community-tasks-item-btn:hover {
  background: var(--slate-50, #f8fafc);
}
.community-tasks-item-btn:focus-visible {
  outline: 2px solid var(--focus-ring, #93c5fd);
  outline-offset: 2px;
}
.community-tasks-item-title {
  font-weight: 600;
}
.community-tasks-item-meta {
  font-size: 0.82rem;
  color: var(--slate-500, #64748b);
}
.community-task-date-focus {
  font-weight: 700;
  color: var(--slate-700, #334155);
}
.community-task-modal-overlay .community-task-modal-card {
  max-width: 26rem;
  width: min(100%, 26rem);
  position: relative;
  z-index: 1;
}
.community-task-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.community-task-modal-title {
  margin: 0;
  font-size: 1.1rem;
  flex: 1;
  min-width: 0;
}
.community-task-modal-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.community-task-modal-color-trigger {
  order: -1;
}
.community-task-modal-body {
  font-size: 0.95rem;
  color: var(--slate-700, #334155);
}
.community-task-modal-body .community-tasks-loading {
  margin: 0;
  color: var(--slate-500, #64748b);
}
.community-task-detail-dates,
.community-task-detail-source,
.community-task-detail-line,
.community-task-detail-actions {
  margin: 0 0 0.5rem;
}
.community-task-modal-status {
  margin: 0 0 0.6rem;
  font-size: 0.9rem;
}
.community-task-detail-desc {
  margin: 0 0 0.75rem;
  white-space: normal;
}
.community-task-edit-block {
  display: grid;
  gap: 0.4rem;
  margin: 0 0 0.75rem;
}
.community-task-edit-label {
  font-size: 0.85rem;
  color: var(--slate-600, #475569);
}
.community-task-edit-input,
.community-task-edit-textarea {
  min-height: 44px;
}
.community-task-detail-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

/* Core calendar color modal: expanded palette (Me → Colors–style solid + softer grids) */
.core-cal-color-modal.core-cal-color-modal--expanded .core-cal-modal-content {
  max-width: min(42rem, 98vw);
  width: max-content;
  max-height: none;
  overflow: visible;
  overflow-y: visible;
  padding-top: 2.25rem;
}
.core-cal-color-modal--expanded .core-cal-color-modal-section {
  margin-bottom: 0.5rem;
}
.core-cal-color-modal--expanded .core-cal-color-section-title {
  margin: 0 0 0.35rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--slate-600, #475569);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.core-cal-color-modal--expanded .core-cal-color-palette-grid--expanded {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
  margin-bottom: 0.65rem;
}
.core-cal-color-modal--expanded .core-cal-color-palette-grid--expanded .core-cal-color-swatch {
  width: 100%;
  aspect-ratio: 1;
  min-width: 1.125rem;
  min-height: 1.125rem;
  max-width: 1.5rem;
  max-height: 1.5rem;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

/* Standalone #core-cal-color-modal (Super Dash, Community, Me tasks): shell + above in-page modals */
#core-cal-color-modal.core-cal-modal {
  display: none;
  position: fixed;
  inset: 0;
  align-items: center;
  justify-content: center;
  z-index: calc(var(--z-modal, 3000) + 60);
}
#core-cal-color-modal.core-cal-modal.is-open {
  display: flex;
}
#core-cal-color-modal .core-cal-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}
#core-cal-color-modal .core-cal-modal-content {
  position: relative;
  z-index: 1;
  background: var(--color-surface, #fff);
  border-radius: var(--radius-lg, 8px);
  padding: 1.25rem;
  max-width: min(40rem, 94vw);
  width: 92%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
#core-cal-color-modal.core-cal-color-modal .core-cal-modal-content {
  max-width: 320px;
}
#core-cal-color-modal.core-cal-color-modal--expanded .core-cal-modal-content {
  max-width: min(42rem, 98vw);
  width: max-content;
  max-height: none;
  overflow-y: visible;
}
#core-cal-color-modal.core-cal-color-modal--expanded #core-cal-color-palette {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
#core-cal-color-modal.core-cal-color-modal--expanded .core-cal-color-modal-section {
  margin-bottom: 0;
}
#core-cal-color-modal.core-cal-color-modal:not(.core-cal-color-modal--expanded) .core-cal-color-palette {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin-bottom: 1rem;
}
#core-cal-color-modal.core-cal-color-modal:not(.core-cal-color-modal--expanded) .core-cal-color-swatch {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-sm, 6px);
  border: 2px solid var(--slate-300, #cbd5e1);
  cursor: pointer;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  box-sizing: border-box;
}
#core-cal-color-modal.core-cal-color-modal:not(.core-cal-color-modal--expanded) .core-cal-color-swatch:hover {
  border-color: var(--color-primary, #2563eb);
}
#core-cal-color-modal.core-cal-color-modal:not(.core-cal-color-modal--expanded) .core-cal-color-swatch.selected {
  border-color: var(--color-primary, #2563eb);
  box-shadow: 0 0 0 2px var(--focus-ring, rgba(37, 99, 235, 0.2));
}
#core-cal-color-modal .core-cal-color-font-btn {
  width: 100%;
  min-height: 44px;
  margin-top: 0.5rem;
  border-radius: var(--radius, 6px);
  border: 1px solid var(--slate-200, #e2e8f0);
  font-weight: 600;
  cursor: pointer;
}
#core-cal-color-modal .core-cal-color-modal-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: transparent;
  border: none;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  color: var(--slate-500, #64748b);
  padding: 0.25rem;
}
#core-cal-color-modal .core-cal-color-modal-close:hover {
  color: var(--slate-800, #1e293b);
}
@media (max-width: 768px) {
  #core-cal-color-modal .core-cal-color-swatch {
    min-width: 44px;
    min-height: 44px;
  }
  #core-cal-color-modal.core-cal-color-modal--expanded .core-cal-modal-content {
    width: 98vw;
    max-width: 98vw;
    max-height: 94vh;
    max-height: 94dvh;
    overflow-y: auto;
    padding: 2.5rem 0.8rem 0.9rem;
  }
  #core-cal-color-modal.core-cal-color-modal--expanded #core-cal-color-palette {
    gap: 0.7rem;
  }
  #core-cal-color-modal.core-cal-color-modal--expanded .core-cal-color-palette-grid--expanded {
    grid-template-columns: repeat(auto-fit, minmax(clamp(2.75rem, 14vw, 3.5rem), 1fr));
    gap: clamp(0.4rem, 1.8vw, 0.65rem);
    margin-bottom: 0.45rem;
  }
  #core-cal-color-modal.core-cal-color-modal--expanded .core-cal-color-palette-grid--expanded .core-cal-color-swatch {
    min-width: clamp(2.75rem, 14vw, 3.5rem);
    min-height: clamp(2.75rem, 14vw, 3.5rem);
    max-width: none;
    max-height: none;
  }
  #core-cal-color-modal .core-cal-color-modal-close {
    top: 0.3rem;
    right: 0.3rem;
    min-width: 48px;
    min-height: 48px;
    padding: 0.35rem;
    border-radius: 999px;
    font-size: 1.75rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--color-surface, #fff) 75%, var(--slate-200, #e2e8f0) 25%);
  }
}

/* Core calendar color modal: native color input + label */
.core-cal-color-custom-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.core-cal-color-custom-row .core-cal-color-custom-label {
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--color-text, #1e293b);
  flex: 0 0 auto;
}
.core-cal-color-native-input {
  width: 3rem;
  height: 2.75rem;
  min-height: 44px;
  min-width: 3rem;
  padding: 0.125rem;
  border: 1px solid var(--slate-300, #cbd5e1);
  border-radius: var(--radius-sm, 6px);
  background: var(--color-surface, #fff);
  cursor: pointer;
  box-sizing: border-box;
}

/* Freestyle diagram: core color picker trigger + preview swatch */
.freestyle-diagram-root .fd-color-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.freestyle-diagram-root .fd-color-pick-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0.35rem;
  width: auto;
}
.freestyle-diagram-root .fd-color-swatch-preview {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--slate-300, #cbd5e1);
  box-sizing: border-box;
}
.freestyle-diagram-root .fd-textfmt-toolbar .fd-tf-color-btn {
  min-width: 44px;
  padding: 0.35rem 0.5rem;
}

/* Scheduling calendars: heading + gear / actions on one row */
.ywam-schedule-title-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  width: 100%;
}
.ywam-schedule-title-row .ywam-schedule-page-heading {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ywam-schedule-title-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  margin-left: auto;
}
.ywam-schedule-page-filter {
  display: flex;
}
.admin-content.scheduling-grid-full-width {
  --page-content-max: 100%;
  --page-content-width: 100%;
  max-width: var(--page-content-max);
  width: var(--page-content-width);
}
.admin-content.scheduling-grid-expand-vertical .calendar-wrap,
.admin-content.scheduling-grid-expand-vertical .transport-calendar-wrap {
  max-height: none !important;
  height: auto !important;
  overflow-x: auto;
  overflow-y: visible;
}
.admin-content.scheduling-grid-expand-vertical .transport-calendar-outer {
  height: auto !important;
  max-height: none !important;
  min-height: 0;
}
.admin-content.scheduling-grid-expand-vertical .transport-calendar-resize-handle {
  display: none;
}
.scheduling-grid-fullscreen-btn {
  flex-shrink: 0;
}
.scheduling-grid-fs-layer {
  position: fixed;
  inset: 0;
  z-index: 6000;
  display: none;
  flex-direction: column;
  background: var(--slate-100, #f1f5f9);
  box-sizing: border-box;
}
.scheduling-grid-fs-layer:not([hidden]) {
  display: flex;
}
.scheduling-grid-fs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
  background: var(--color-surface, #fff);
}
.scheduling-grid-fs-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.scheduling-grid-fs-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
  box-sizing: border-box;
}
.scheduling-grid--in-fullscreen {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  flex: 1;
  min-height: 0;
  box-sizing: border-box;
}
.scheduling-grid--in-fullscreen.calendar-wrap,
.scheduling-grid--in-fullscreen .calendar-wrap,
.scheduling-grid--in-fullscreen.transport-calendar-wrap,
.scheduling-grid--in-fullscreen .transport-calendar-wrap {
  max-height: none !important;
  height: 100% !important;
}
.scheduling-grid--in-fullscreen .transport-calendar-resize-handle {
  display: none !important;
}

/* Contact program email (rich editor) */
.contact-program-email-editor {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 42rem;
}
.contact-pe-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.4rem;
  background: var(--slate-50, #f8fafc);
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: var(--radius, 10px);
}
.contact-pe-toolbar .contact-pe-toolbar-btn {
  padding: 0.15rem 0.45rem;
  font-size: 0.8125rem;
  min-height: 32px;
  line-height: 1.2;
}
.contact-pe-toolbar .contact-pe-toolbar-btn.contact-pe-toolbar-icon-only,
.contact-pe-toolbar label.contact-pe-toolbar-btn.contact-pe-toolbar-icon-only {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.2rem 0.35rem;
  min-width: 32px;
  min-height: 32px;
  line-height: 1;
  box-sizing: border-box;
}
.contact-pe-toolbar label.contact-pe-toolbar-btn.contact-pe-toolbar-icon-only {
  cursor: pointer;
}
.contact-pe-toolbar .contact-pe-toolbar-icon-only .contact-pe-toolbar-svg {
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
  display: block;
}
.contact-pe-branded-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-top: 0;
  padding: 0.45rem 0.5rem;
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: var(--radius, 10px);
  background: var(--slate-50, #f8fafc);
  max-width: 42rem;
  box-sizing: border-box;
}
.contact-pe-branded-main-label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.4;
  margin: 0;
  cursor: pointer;
}
.contact-pe-branded-main-label input[type='checkbox'] {
  margin-top: 0.2rem;
  flex-shrink: 0;
}
.contact-pe-branded-scope-wrap {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  width: 100%;
  padding-left: 0.15rem;
}
.contact-pe-branded-scope-opt {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 500;
  font-size: 0.875rem;
  margin: 0;
  cursor: pointer;
}
.contact-pe-editor-body {
  min-height: 10rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--slate-300, #cbd5e1);
  border-radius: var(--radius, 10px);
  background: var(--super-form-input-bg, #fff);
  font-size: 1rem;
  line-height: 1.5;
  outline: none;
}
.contact-pe-editor-body:focus {
  border-color: var(--focus-border, var(--blue-400));
  box-shadow: 0 0 0 3px var(--focus-ring, rgba(59, 130, 246, 0.25));
}
/* Inbox reply/compose: paper-white message field + stronger frame in light themes */
body:not(.theme-site-dark):not(.theme-module-dark) .contact-inbox-compose-dialog .contact-pe-editor-body {
  background: #fff;
  color: var(--color-text, #1e293b);
  border-color: var(--slate-400, #94a3b8);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
body:not(.theme-site-dark):not(.theme-module-dark) .contact-inbox-compose-dialog .contact-pe-editor-body:focus {
  border-color: var(--focus-border, var(--blue-500, #3b82f6));
  box-shadow: 0 0 0 3px var(--focus-ring, rgba(59, 130, 246, 0.25));
}
.contact-pe-editor-body img {
  max-width: 100%;
  height: auto;
}
.contact-pe-append-sig-row {
  margin-top: 0.4rem;
  margin-bottom: 0;
}
.contact-pe-append-sig-label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-weight: 500;
  margin: 0;
  cursor: pointer;
}
.contact-pe-attachments-row {
  margin-top: 0.5rem;
}
/* Program email editor: full width in modals / compose surfaces (not the legacy 42rem cap). */
.modal-card .contact-program-email-editor {
  max-width: none;
  width: 100%;
}
/* Stack attachment + signature utility rows so file input is not squeezed beside labels in modals. */
.contact-inbox-compose-dialog .contact-program-email-editor > .form-row:not(.contact-pe-branded-row),
.modal-card .contact-program-email-editor > .form-row:not(.contact-pe-branded-row) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  min-width: 0;
  max-width: 100%;
  margin-top: 0.35rem;
  margin-bottom: 0;
  box-sizing: border-box;
}
.contact-inbox-compose-dialog .contact-program-email-editor > .form-row:not(.contact-pe-branded-row) label,
.modal-card .contact-program-email-editor > .form-row:not(.contact-pe-branded-row) label {
  margin: 0;
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--slate-700, #334155);
}
.contact-inbox-compose-dialog .contact-program-email-editor > .form-row:not(.contact-pe-branded-row) input[type='file'],
.modal-card .contact-program-email-editor > .form-row:not(.contact-pe-branded-row) input[type='file'] {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
/* Message body grows with content; avoid a fixed inner max-height (outer pane/modal scrolls). */
.contact-inbox-compose-dialog .contact-program-email-editor .contact-pe-editor-body,
.modal-card .contact-program-email-editor .contact-pe-editor-body {
  max-height: none;
  overflow-y: visible;
  overflow-x: hidden;
}
.contact-pe-toolbar .contact-pe-speak-btn.lang-tb-speak {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 32px;
  min-height: 32px;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}
.contact-pe-toolbar .contact-pe-speak-btn .lang-tb-speak-icon {
  font-size: 1.1rem;
  line-height: 1;
}
.contact-pe-speak-btn.lang-tb-speak {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.contact-pe-speak-btn .lang-tb-speak-icon {
  font-size: 1.05rem;
  line-height: 1;
}
.contact-pe-speak-btn.lang-tb-speak-warming {
  opacity: 0.85;
}
.contact-pe-speak-btn.lang-tb-speak-active,
.contact-pe-speak-btn.lang-tb-speak-active:hover {
  background: var(--red-100, #fee2e2);
  border-color: var(--red-400, #f87171);
  color: var(--red-700, #b91c1c);
}
.contact-pe-speak-bar.lang-email-speak-bar {
  margin-top: 0.35rem;
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: var(--radius, 8px);
  background: var(--slate-50, #f8fafc);
}
.contact-pe-speak-bar .lang-email-speak-bar-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--slate-600, #475569);
}
.contact-pe-signature-textarea {
  min-height: 5.5rem;
  font-size: 1rem;
  line-height: 1.45;
  resize: vertical;
}
.contact-pe-signature-status {
  min-height: 1.25rem;
}
.contact-pe-attachments-preview {
  margin-top: 0.5rem;
  min-height: 0;
}
.contact-pe-attachments-preview-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: flex-start;
}
.contact-pe-attachments-preview-item {
  flex: 0 0 auto;
  border-radius: var(--radius, 8px);
  overflow: hidden;
  border: 1px solid var(--slate-200, #e2e8f0);
  background: var(--slate-50, #f8fafc);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.contact-pe-attachments-preview-thumb {
  display: block;
  width: 5.5rem;
  height: 5.5rem;
  object-fit: cover;
  vertical-align: middle;
}
.contact-pe-preview-modal {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-modal, 3000) + 100);
  background: rgba(15, 23, 42, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.contact-pe-preview-modal .contact-pe-preview-dialog {
  background: var(--color-surface, #fff);
  border-radius: var(--radius-lg, 14px);
  max-width: 720px;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow-md, 0 10px 15px rgba(0, 0, 0, 0.1));
}
.contact-msg-body-html {
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0.35rem 0 0;
  padding: 0.5rem;
  border: 1px solid var(--slate-100);
  border-radius: 6px;
  background: var(--slate-50);
  max-height: 14rem;
  overflow: auto;
}
.contact-msg-body-html img {
  max-width: 100%;
  height: auto;
}

/* Contact inbox: full-width split pane (.admin-content direct child must not use default 1200px cap / padding). */
.admin-layout.contact-inbox-page {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 56px);
  max-width: 100%;
  width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}
.sub-header + .admin-layout.contact-inbox-page {
  min-height: calc(100vh - 100px);
}
.admin-layout.contact-inbox-page > .admin-content {
  --page-content-max: 100%;
  --page-content-width: 100%;
  --page-content-margin-x: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}

/* Registration module inbox: full viewport width (same as contact inbox main). */
.admin-layout.registration-inbox-page .admin-content {
  --page-content-max: 100%;
  --page-content-width: 100%;
  --page-content-margin-x: 0;
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}
.contact-inbox-shell {
  --contact-inbox-list-width: min(380px, 38vw);
  display: flex;
  flex: 1 1 0;
  flex-direction: row;
  align-items: stretch;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  border-top: 1px solid var(--slate-200, #e2e8f0);
}
.contact-inbox-list-col {
  flex: 0 0 var(--contact-inbox-list-width);
  width: var(--contact-inbox-list-width);
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--color-surface, #fff);
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}
.contact-inbox-resizer {
  flex: 0 0 8px;
  width: 8px;
  min-width: 8px;
  align-self: stretch;
  cursor: col-resize;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  background: transparent;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}
.contact-inbox-resizer::after {
  content: '';
  width: 3px;
  flex-shrink: 0;
  background: var(--slate-200, #e2e8f0);
  border-radius: 2px;
  margin: 0 auto;
}
.contact-inbox-resizer:hover::after,
.contact-inbox-resizer:focus-visible::after {
  background: var(--slate-400, #94a3b8);
}
.contact-inbox-resizer.is-dragging::after {
  background: var(--slate-500, #64748b);
}
.contact-inbox-resizer:focus-visible {
  outline: 2px solid var(--focus-border, var(--slate-400));
  outline-offset: 2px;
}
.contact-inbox-resizer:focus:not(:focus-visible) {
  outline: none;
}
body.contact-inbox-resize-active {
  cursor: col-resize !important;
  user-select: none !important;
}
.contact-inbox-list-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--slate-200, #e2e8f0);
  flex-shrink: 0;
}
.contact-inbox-list-toolbar .contact-inbox-toolbar-title {
  margin: 0;
  font-size: 1.125rem;
  flex: 1;
  min-width: 0;
}
.contact-inbox-view-settings-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0.35rem;
}
.contact-inbox-view-settings-btn .sub-header-gear-icon {
  display: block;
}
.contact-inbox-view-settings-overlay[hidden],
.contact-inbox-view-settings-overlay[aria-hidden="true"] {
  display: none !important;
}
.contact-inbox-view-settings-overlay .contact-inbox-view-settings-card.modal-card {
  width: min(100%, 22rem);
  box-sizing: border-box;
}
/* Radio + label: avoid .form-compact .form-row > input { min-height: 44px } on radios */
.contact-inbox-view-settings-card .contact-inbox-view-mode-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
  min-height: 0;
  cursor: pointer;
  font-weight: 400;
  color: var(--slate-800, #1e293b);
}
.contact-inbox-view-settings-card .contact-inbox-view-mode-row input[type="radio"] {
  width: 1rem;
  height: 1rem;
  min-width: 1rem;
  min-height: 1rem;
  margin: 0.2em 0 0 0;
  flex-shrink: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  vertical-align: top;
  accent-color: var(--blue-600, #2563eb);
}
.contact-inbox-view-settings-card .contact-inbox-view-mode-row input[type="radio"]:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--focus-ring, rgba(59, 130, 246, 0.35));
  border-radius: 50%;
}
.contact-inbox-view-settings-card .contact-inbox-view-mode-row > span {
  flex: 1;
  min-width: 0;
  line-height: 1.45;
  font-size: 0.875rem;
  padding: 0;
  margin: 0;
  font-weight: 400;
  color: inherit;
}
.contact-inbox-list-scroll {
  flex: 1 1 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
  overscroll-behavior: contain;
  container-type: inline-size;
  container-name: inboxlist;
}
.contact-inbox-row {
  display: grid;
  align-items: start;
  column-gap: 0.5rem;
  row-gap: 0.2rem;
  width: 100%;
  max-width: 100%;
  text-align: left;
  padding: 0.55rem 0.75rem;
  border: none;
  border-bottom: 1px solid var(--slate-100, #f1f5f9);
  background: var(--color-surface, #fff);
  cursor: pointer;
  font: inherit;
  color: inherit;
  box-sizing: border-box;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}
.contact-inbox-row:has(.ib-actions--empty) {
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr) max-content;
}
.contact-inbox-row:not(:has(.ib-actions--empty)) {
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr) auto max-content;
}
.contact-inbox-row .ib-from {
  grid-column: 1;
  grid-row: 1;
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-top: 0.15rem;
}
.contact-inbox-row .ib-line-subject {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}
.contact-inbox-row:not(:has(.ib-actions--empty)) .ib-actions {
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  padding-top: 0.1rem;
}
.contact-inbox-row:not(:has(.ib-actions--empty)) .ib-date {
  grid-column: 4;
  grid-row: 1;
  align-self: start;
  padding-top: 0.2rem;
}
.contact-inbox-row:has(.ib-actions--empty) .ib-date {
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  padding-top: 0.2rem;
}
.contact-inbox-row:hover {
  background: var(--slate-100, #f1f5f9);
  box-shadow: inset 3px 0 0 var(--focus-border, #60a5fa);
}
.contact-inbox-row.is-selected {
  background: var(--slate-100, #f1f5f9);
  box-shadow: inset 3px 0 0 var(--slate-400, #94a3b8);
}
.contact-inbox-row.is-selected:hover {
  background: var(--slate-200, #e2e8f0);
  box-shadow: inset 3px 0 0 var(--focus-border, #60a5fa);
}
.contact-inbox-row:focus-visible {
  outline: none;
  background: var(--slate-100, #f1f5f9);
  box-shadow: inset 3px 0 0 var(--focus-border, #60a5fa), 0 0 0 2px var(--focus-ring, rgba(59, 130, 246, 0.35));
}
.contact-inbox-row.is-unread .ib-from,
.contact-inbox-row.is-unread .ib-subj {
  font-weight: 700;
}
.contact-inbox-row--draft .ib-draft-to {
  color: var(--slate-600, #475569);
  font-weight: 400;
}
.ib-from {
  font-size: 0.875rem;
  color: var(--slate-800, #1e293b);
  min-width: 0;
}
.ib-date {
  font-size: 0.75rem;
  color: var(--slate-600, #475569);
  white-space: nowrap;
  flex-shrink: 0;
}
.ib-line-subject {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.1rem;
  overflow: hidden;
  font-size: 0.875rem;
  color: var(--slate-800, #1e293b);
}
.ib-line-subject-top {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;
  min-width: 0;
  width: 100%;
  overflow: hidden;
}
.ib-subj {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ib-label-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.35rem;
  max-width: 100%;
  min-width: 0;
  font-size: 0.6875rem;
  line-height: 1.2;
  max-height: 2.45em;
  overflow: hidden;
  color: var(--slate-600, #475569);
}
.contact-inbox-spam-pill {
  display: inline-block;
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  margin-right: 0.35rem;
  line-height: 1.2;
  vertical-align: baseline;
}
.contact-inbox-spam--low.contact-inbox-spam-pill {
  background: var(--amber-100, #fef3c7);
  color: var(--amber-900, #78350f);
  border: 1px solid var(--amber-200, #fde68a);
}
.contact-inbox-spam--medium.contact-inbox-spam-pill {
  background: var(--orange-100, #ffedd5);
  color: var(--orange-900, #7c2d12);
  border: 1px solid var(--orange-200, #fed7aa);
}
.contact-inbox-spam--high.contact-inbox-spam-pill,
.contact-inbox-spam--unsafe.contact-inbox-spam-pill {
  background: var(--red-100, #fee2e2);
  color: var(--red-900, #7f1d1d);
  border: 1px solid var(--red-200, #fecaca);
}
.contact-inbox-msg-spam-banner {
  margin: 0 0 0.65rem;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--slate-200, #e2e8f0);
}
.contact-inbox-msg-spam-banner-text {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--slate-800, #1e293b);
}
.contact-inbox-msg-spam-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.contact-inbox-msg-spam--low {
  background: var(--amber-50, #fffbeb);
  border-color: var(--amber-200, #fde68a);
}
.contact-inbox-msg-spam--medium {
  background: var(--orange-50, #fff7ed);
  border-color: var(--orange-200, #fed7aa);
}
.contact-inbox-msg-spam--high,
.contact-inbox-msg-spam--unsafe {
  background: var(--red-50, #fef2f2);
  border-color: var(--red-200, #fecaca);
}
.ib-snippet-break {
  display: none;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--slate-600, #475569);
  font-weight: 400;
}
.ib-sep {
  font-weight: 400;
}
.ib-snip {
  font-weight: 400;
}
.ib-actions--empty {
  display: none !important;
}
.contact-inbox-row-actions {
  display: flex;
  flex-shrink: 0;
  gap: 0.15rem;
}
.contact-inbox-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--slate-600, #475569);
  cursor: pointer;
}
.contact-inbox-icon-btn:hover {
  background: var(--slate-200, #e2e8f0);
  color: var(--slate-800, #1e293b);
}
.contact-inbox-icon-btn svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* Inbox: archive/delete undo toast (below modals) */
.contact-inbox-undo-toast {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2900;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  max-width: min(92vw, 36rem);
  padding: 0.65rem 1rem;
  background: var(--slate-800, #1e293b);
  color: #fff;
  border-radius: var(--radius, 8px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25);
  font-size: 0.9375rem;
  line-height: 1.35;
  box-sizing: border-box;
}
.contact-inbox-undo-toast[hidden] {
  display: none !important;
}
.contact-inbox-undo-toast-msg {
  flex: 1 1 12rem;
  min-width: 0;
}
.contact-inbox-undo-toast .contact-inbox-undo-toast-btn {
  flex-shrink: 0;
  background: var(--color-surface, #fff);
  color: var(--slate-800, #1e293b);
  border-color: transparent;
}
.contact-inbox-undo-toast .contact-inbox-undo-toast-btn:hover {
  background: var(--slate-100, #f1f5f9);
}

/* Inbox: autosaved draft confirmation (above compose modal) */
.contact-inbox-draft-save-toast {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3100;
  max-width: min(92vw, 36rem);
  padding: 0.65rem 1.15rem;
  background: var(--slate-800, #1e293b);
  color: #fff;
  border-radius: var(--radius, 8px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25);
  font-size: 0.9375rem;
  line-height: 1.35;
  box-sizing: border-box;
  text-align: center;
}
.contact-inbox-draft-save-toast[hidden] {
  display: none !important;
}

/* Stacked row when the list column itself is narrow (split-pane resize). */
@container inboxlist (max-width: 420px) {
  .contact-inbox-row {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    align-items: start;
  }
  .contact-inbox-row .ib-from {
    grid-column: 1;
    grid-row: 1;
    max-width: none;
    padding-right: 0.25rem;
    padding-top: 0.1rem;
  }
  .contact-inbox-row:has(.ib-actions--empty) .ib-date,
  .contact-inbox-row:not(:has(.ib-actions--empty)) .ib-date {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: start;
  }
  .contact-inbox-row .ib-line-subject {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
  }
  .contact-inbox-row .ib-line-subject-top {
    display: flex;
    flex-flow: row wrap;
    align-items: baseline;
    gap: 0.25rem;
    min-width: 0;
  }
  .contact-inbox-row .ib-subj {
    min-width: 0;
    flex: 1 1 8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .contact-inbox-row .ib-snippet-break {
    flex: 1 1 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    min-width: 0;
    font-size: 0.8125rem;
    line-height: 1.35;
  }
  .contact-inbox-row:not(:has(.ib-actions--empty)) .ib-actions {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: end;
    padding-top: 0;
  }
}
.contact-inbox-detail-col {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  /* Slightly darker than message cards so thread frames stand out while scrolling */
  background: var(--slate-100, #f1f5f9);
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}
/* Light themes: clearer edge vs thread list + slightly deeper pane behind white message cards */
body:not(.theme-site-dark):not(.theme-module-dark) .contact-inbox-detail-col {
  background: var(--slate-200, #e2e8f0);
  border-left: 1px solid var(--slate-400, #94a3b8);
  box-shadow: inset 1px 0 0 rgba(15, 23, 42, 0.04);
}
body:not(.theme-site-dark):not(.theme-module-dark) .contact-inbox-compose-pane {
  background: var(--slate-200, #e2e8f0);
}
body:not(.theme-site-dark):not(.theme-module-dark) .contact-inbox-resizer::after {
  background: var(--slate-400, #94a3b8);
}
body:not(.theme-site-dark):not(.theme-module-dark) .contact-inbox-resizer:hover::after,
body:not(.theme-site-dark):not(.theme-module-dark) .contact-inbox-resizer:focus-visible::after {
  background: var(--slate-500, #64748b);
}
body:not(.theme-site-dark):not(.theme-module-dark) .contact-inbox-detail-body .contact-inbox-thread-msg {
  border-color: var(--slate-400, #94a3b8);
  box-shadow:
    0 1px 3px rgba(15, 23, 42, 0.07),
    0 2px 8px rgba(15, 23, 42, 0.06);
}
.contact-inbox-detail-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--slate-500, #64748b);
  padding: 1.5rem;
  font-size: 0.9375rem;
}
.contact-inbox-detail-inner {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  padding: 0;
  overflow: hidden;
}
.contact-inbox-detail-inner[hidden] {
  display: none !important;
}
.contact-inbox-reading-pane {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.contact-inbox-reading-pane[hidden] {
  display: none !important;
}
.contact-inbox-compose-pane {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--slate-100, #f1f5f9);
}
.contact-inbox-compose-pane[hidden] {
  display: none !important;
}
.contact-inbox-compose-pane-slot {
  flex: 1 1 0;
  min-height: 0;
  overflow: auto;
  padding: 0.5rem 0.75rem 1rem;
  box-sizing: border-box;
}
.contact-inbox-compose-dialog-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.35rem 0.5rem;
  margin-bottom: 0.45rem;
}
.contact-inbox-compose-dialog-title {
  margin: 0;
  font-size: 1.05rem;
  flex: 1 1 12rem;
}
.contact-inbox-compose-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  flex-shrink: 0;
  align-items: center;
}
.contact-inbox-compose-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 0.25rem;
  box-sizing: border-box;
}
.contact-inbox-compose-icon-btn svg {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  display: block;
}
.modal-overlay.contact-inbox-standard-replies-overlay[hidden],
.contact-inbox-standard-replies-overlay[hidden] {
  display: none !important;
}
.contact-inbox-standard-replies-card {
  max-width: 28rem;
  width: 100%;
  max-height: min(85vh, 36rem);
  overflow: auto;
  margin: 1rem;
  box-sizing: border-box;
}
.contact-inbox-standard-replies-list {
  min-height: 2rem;
}
.contact-inbox-sr-status {
  margin: 0;
  font-size: 0.875rem;
  color: var(--slate-600, #475569);
}
.contact-inbox-sr-group {
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: var(--radius-sm, 6px);
  margin-bottom: 0.5rem;
  background: var(--color-surface, #fff);
}
.contact-inbox-sr-group-summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.55rem 0.75rem;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.contact-inbox-sr-group-summary::-webkit-details-marker {
  display: none;
}
.contact-inbox-sr-group-body {
  padding: 0 0.5rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.contact-inbox-sr-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: var(--radius-sm, 6px);
  background: var(--slate-50, #f8fafc);
  font-size: 0.875rem;
  cursor: pointer;
  color: var(--slate-800, #1e293b);
}
.contact-inbox-sr-item:hover {
  background: var(--blue-50, #eff6ff);
  border-color: var(--blue-200, #bfdbfe);
}
.contact-inbox-sr-modal-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.contact-inbox-sr-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.contact-inbox-sr-status-bar {
  margin: 0 0 0.5rem;
}
.contact-inbox-sr-hint {
  margin: 0 0 0.65rem;
  font-size: 0.8125rem;
  color: var(--slate-500, #64748b);
}
.contact-inbox-sr-pool {
  margin-bottom: 0.75rem;
}
.contact-inbox-sr-section-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--slate-600, #475569);
  margin-bottom: 0.35rem;
}
.contact-inbox-sr-row {
  display: flex;
  align-items: stretch;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}
.contact-inbox-sr-row-inner {
  display: flex;
  align-items: stretch;
  flex: 1;
  min-width: 0;
  gap: 0.35rem;
}
.contact-inbox-sr-row-tools {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.contact-inbox-sr-row .contact-inbox-sr-item-apply {
  flex: 1;
  min-width: 0;
  text-align: left;
}
.contact-inbox-sr-handle {
  flex-shrink: 0;
  width: 1.75rem;
  min-height: 2.75rem;
  cursor: grab;
  border-radius: var(--radius-sm, 6px);
  background: var(--slate-100, #f1f5f9);
  border: 1px solid var(--slate-200, #e2e8f0);
  position: relative;
  box-sizing: border-box;
}
.contact-inbox-sr-handle:active {
  cursor: grabbing;
}
.contact-inbox-sr-handle::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 14px;
  background: repeating-linear-gradient(
    to bottom,
    var(--slate-400, #94a3b8) 0 2px,
    transparent 2px 4px
  );
  opacity: 0.75;
}
.contact-inbox-sr-dragging {
  opacity: 0.65;
}
.contact-inbox-sr-drop-body:empty {
  border: 1px dashed var(--slate-200, #e2e8f0);
  min-height: 2.25rem;
  border-radius: var(--radius-sm, 6px);
}
.contact-inbox-sr-manage-actions {
  margin-top: 0.75rem;
}
/* Contact inbox: module email template editor — near full viewport so the iframe needs less nested scroll */
.contact-inbox-sr-email-editor-overlay.modal-overlay {
  align-items: center;
  justify-content: center;
  padding: 0.35rem;
  box-sizing: border-box;
  max-height: 100vh;
  overflow: hidden;
}
.contact-inbox-sr-email-editor-card.modal-card,
.contact-inbox-sr-email-editor-card {
  max-width: min(calc(100vw - 0.75rem), 120rem);
  width: min(100%, calc(100vw - 0.75rem));
  height: calc(100vh - 0.75rem);
  max-height: calc(100vh - 0.75rem);
  margin: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 0.65rem 0.85rem 0.75rem;
  overflow: hidden;
}
@supports (height: 100dvh) {
  .contact-inbox-sr-email-editor-card.modal-card,
  .contact-inbox-sr-email-editor-card {
    height: calc(100dvh - 0.75rem);
    max-height: calc(100dvh - 0.75rem);
  }
}
.contact-inbox-sr-email-editor-card .contact-inbox-sr-modal-head {
  flex-shrink: 0;
  margin-bottom: 0.5rem;
}
.contact-inbox-sr-email-editor-iframe {
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: var(--radius-sm, 6px);
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--slate-50, #f8fafc);
}
.contact-inbox-sr-group-title-text {
  flex: 1;
  min-width: 0;
}
.contact-inbox-detail-head {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--slate-200, #e2e8f0);
  background: var(--color-surface, #fff);
  flex-shrink: 0;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.contact-inbox-detail-subject {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 0.5rem;
  word-break: break-word;
}
.contact-inbox-detail-meta {
  font-size: 0.875rem;
  color: var(--slate-600, #475569);
  line-height: 1.45;
}
.contact-inbox-detail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.65rem;
}
.contact-inbox-detail-body {
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem 1.25rem 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}
.contact-inbox-detail-body:has(> .contact-inbox-thread-msg) {
  gap: 0;
}
.contact-inbox-detail-body img {
  max-width: 100%;
  height: auto;
}
.contact-inbox-thread-msg {
  margin: 0;
  padding: 0.85rem 1rem 1rem;
  border: 1px solid var(--slate-300, #cbd5e1);
  border-radius: 10px;
  /* Elevated surface: white in light themes, raised panel in dark */
  background: var(--color-surface-elevated, var(--color-surface, #fff));
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.06);
  box-sizing: border-box;
}
.contact-inbox-detail-body > .contact-inbox-thread-msg + .contact-inbox-thread-msg {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--slate-300, #cbd5e1);
}
.contact-inbox-thread-msg-h {
  font-size: 0.8125rem;
  color: var(--slate-600, #475569);
  margin: 0 0 0.65rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--slate-200, #e2e8f0);
}
.contact-inbox-thread-msg-h strong {
  color: var(--slate-800, #1e293b);
  font-weight: 600;
}
.contact-inbox-thread-msg-t {
  font-variant-numeric: tabular-nums;
}
.contact-inbox-thread-msg-body {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--slate-800, #1e293b);
  background: var(--color-surface, #fff);
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: 0.5rem;
  padding: 0.85rem 1rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  margin-top: 0;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
}
.contact-inbox-thread-msg-plain {
  white-space: pre-wrap;
}
.contact-inbox-thread-msg-html {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.contact-inbox-thread-msg-html img {
  max-width: 100%;
  height: auto;
}
.contact-inbox-thread-msg-html > :first-child {
  margin-top: 0;
}
.contact-inbox-thread-msg-html > :last-child {
  margin-bottom: 0;
}
.contact-inbox-thread-msg-footer {
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--slate-200, #e2e8f0);
}
.contact-inbox-thread-msg-footer-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.contact-inbox-compose-overlay[hidden],
.contact-inbox-snooze-overlay[hidden],
.contact-workspace-password-overlay[hidden] {
  display: none !important;
}
.contact-inbox-compose-overlay,
.contact-inbox-snooze-overlay,
.contact-workspace-password-overlay {
  display: flex;
  z-index: var(--z-modal, 3000);
}
.contact-inbox-compose-overlay {
  overflow-x: hidden;
  overflow-y: auto;
  align-items: flex-start;
  justify-content: center;
  box-sizing: border-box;
}
.contact-workspace-password-dialog {
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
}
.workspace-app-pwd-intro {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  color: var(--slate-700);
  line-height: 1.45;
}
.workspace-app-pwd-steps {
  margin: 0 0 0.75rem;
  padding-left: 1.25rem;
  font-size: 0.875rem;
  color: var(--slate-600);
  line-height: 1.5;
}
.workspace-app-pwd-steps li {
  margin-bottom: 0.35rem;
}
.workspace-app-pwd-help-link {
  margin: 0 0 1rem;
  font-size: 0.875rem;
}
.workspace-app-pwd-help-link a {
  font-weight: 500;
}
.contact-inbox-compose-dialog {
  max-width: 640px;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
}
.contact-inbox-compose-pane .contact-inbox-compose-dialog {
  max-width: 100%;
  width: 100%;
  max-height: none;
  overflow: visible;
}
.contact-inbox-compose-overlay .contact-inbox-compose-dialog {
  max-height: none;
  overflow: visible;
  margin-bottom: 1rem;
}
/* Inbox compose (light themes): form shell vs white inputs */
body:not(.theme-site-dark):not(.theme-module-dark) .contact-inbox-compose-dialog.modal-card {
  background: var(--slate-100, #f1f5f9);
  border-color: var(--slate-300, #cbd5e1);
  box-shadow:
    0 1px 3px rgba(15, 23, 42, 0.08),
    0 4px 14px rgba(15, 23, 42, 0.06);
}
body:not(.theme-site-dark):not(.theme-module-dark) .contact-inbox-compose-dialog .contact-compose-address-panel {
  background: var(--slate-200, #e2e8f0);
  border-color: var(--slate-400, #94a3b8);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.05);
}
body:not(.theme-site-dark):not(.theme-module-dark) .contact-inbox-compose-dialog input.form-control:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='button']):not([type='submit']):not([type='reset']) {
  background: var(--form-field-bg, var(--color-surface, #fff));
  border-color: var(--slate-400, #94a3b8);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  color: var(--color-text, #1e293b);
}
body:not(.theme-site-dark):not(.theme-module-dark) .contact-inbox-compose-dialog input.form-control:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='button']):not([type='submit']):not([type='reset']):hover {
  border-color: var(--slate-500, #64748b);
}
body:not(.theme-site-dark):not(.theme-module-dark) .contact-inbox-compose-dialog input.form-control:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='button']):not([type='submit']):not([type='reset']):focus {
  background: var(--form-field-bg, var(--color-surface, #fff));
  border-color: var(--focus-border, var(--blue-500, #3b82f6));
  box-shadow: 0 0 0 3px var(--focus-ring, rgba(59, 130, 246, 0.25));
}
body:not(.theme-site-dark):not(.theme-module-dark) .contact-inbox-compose-dialog .contact-pe-branded-row {
  background: var(--slate-200, #e2e8f0);
  border-color: var(--slate-400, #94a3b8);
}
body:not(.theme-site-dark):not(.theme-module-dark) .contact-inbox-compose-dialog .contact-pe-toolbar {
  background: var(--form-field-bg, var(--color-surface, #fff));
  border-color: var(--slate-400, #94a3b8);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
body:not(.theme-site-dark):not(.theme-module-dark) .contact-inbox-compose-dialog .contact-pe-speak-bar.lang-email-speak-bar {
  background: var(--form-field-bg, var(--color-surface, #fff));
  border-color: var(--slate-400, #94a3b8);
}
.contact-inbox-compose-modal-slot {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  min-height: 100%;
  padding: 1rem;
  box-sizing: border-box;
}
.contact-inbox-snooze-dialog {
  max-width: 400px;
  width: 100%;
}
.contact-inbox-compose-dialog .contact-compose-field-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  margin-bottom: 0.35rem;
}
.contact-inbox-compose-dialog .contact-compose-recipient-cluster-row {
  margin-bottom: 0.35rem;
}
.contact-inbox-compose-dialog .contact-compose-field-row.contact-compose-subject-row {
  align-items: center;
}
.contact-inbox-compose-dialog .contact-compose-inline-label {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.42rem 0 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--slate-600, #64748b);
  white-space: nowrap;
}
.contact-inbox-compose-dialog .contact-compose-subject-row .contact-compose-inline-label,
.contact-inbox-compose-dialog .contact-compose-body-row .contact-compose-inline-label {
  padding-top: 0.5rem;
}
.contact-inbox-compose-dialog .contact-compose-subject-row .contact-compose-subject-input {
  flex: 1 1 200px;
  min-width: 0;
  font-size: 1rem;
  min-height: 44px;
}
.contact-inbox-compose-dialog .contact-compose-editor-stack {
  flex: 1 1 280px;
  min-width: 0;
}
.contact-inbox-compose-dialog .contact-compose-body-row {
  align-items: flex-start;
}
/* Compose dialog as a <form> inside a modal overlay (e.g. internal contact reply): no inner height cage */
.modal-overlay form.contact-inbox-compose-dialog .contact-compose-editor-stack,
.modal-overlay form.contact-inbox-compose-dialog .contact-compose-body-row {
  flex: none;
  overflow: visible;
  min-height: 0;
}
.modal-overlay form.contact-inbox-compose-dialog {
  overflow: visible;
  max-height: none;
}
.contact-inbox-compose-dialog .contact-compose-address-panel {
  flex: 1 1 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0.35rem 0.5rem;
  margin: 0;
  border: 1px solid var(--form-input-border, var(--slate-400));
  border-radius: var(--radius);
  background: var(--form-field-area-bg, var(--color-surface, #fff));
  box-shadow: var(--form-input-shadow, 0 1px 2px rgba(15, 23, 42, 0.07));
  box-sizing: border-box;
}
.contact-inbox-compose-dialog .contact-compose-address-line[hidden] {
  display: none !important;
}
.contact-inbox-compose-dialog .contact-compose-address-line {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.4rem;
  margin: 0;
  padding: 0;
  min-height: 0;
}
.contact-inbox-compose-dialog .contact-compose-address-line-label {
  flex: 0 0 2.25rem;
  width: 2.25rem;
  margin: 0;
  padding: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--slate-600, #64748b);
  line-height: 1.2;
  align-self: center;
}
.contact-inbox-compose-dialog .contact-compose-address-line .contact-compose-recipient-editor {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.35rem;
  flex: 1 1 120px;
  min-width: 0;
}
.contact-inbox-compose-dialog .contact-compose-address-line--to .contact-compose-recipient-editor {
  flex: 1 1 160px;
}
.contact-inbox-compose-dialog .contact-compose-chips-stack {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}
.contact-compose-chips--row {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
}
.contact-inbox-compose-dialog .contact-compose-to-input-wrap--compact {
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  max-width: 100%;
}
.contact-inbox-compose-dialog .contact-compose-to-input--compact {
  width: 22ch;
  max-width: min(100%, 26rem);
  min-width: 14ch;
  min-height: 44px;
  box-sizing: border-box;
  font-size: 1rem;
}
.contact-inbox-compose-dialog .contact-compose-to-input-wrap--compact .contact-compose-suggest {
  left: 0;
  right: auto;
  min-width: max(100%, 12rem);
  max-width: min(calc(100vw - 2rem), 22rem);
}
.contact-inbox-compose-dialog .contact-compose-address-line--to {
  flex-wrap: nowrap;
}
.contact-inbox-compose-dialog .contact-compose-address-line--to .contact-compose-ccbcc-toggle {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex: 0 0 auto;
  margin-left: auto;
  align-self: center;
}
.contact-inbox-compose-dialog .contact-compose-ccbcc-link {
  background: none;
  border: none;
  padding: 0.15rem 0.3rem;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--slate-600, #64748b);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  border-radius: 4px;
  min-height: 32px;
  box-sizing: border-box;
}
.contact-inbox-compose-dialog .contact-compose-ccbcc-link:hover {
  color: var(--slate-900, #0f172a);
  background: var(--slate-100, #f1f5f9);
}
@media (max-width: 520px) {
  .contact-inbox-compose-dialog .contact-compose-address-line--to {
    flex-wrap: wrap;
  }
  .contact-inbox-compose-dialog .contact-compose-address-line--to .contact-compose-ccbcc-toggle {
    margin-left: 0;
    width: 100%;
    justify-content: flex-end;
  }
}
.contact-compose-chips-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  width: 100%;
}
.contact-compose-primary-row {
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  width: 100%;
}
.contact-inbox-compose-dialog .contact-compose-primary-row {
  flex-direction: row;
  flex-wrap: wrap;
  width: auto;
  align-items: center;
}
.contact-compose-chips {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 0.35rem;
  width: 100%;
}
.contact-compose-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  max-width: 100%;
  padding: 0.25rem 0.45rem;
  border-radius: 0.375rem;
  font-size: 0.9375rem;
  box-sizing: border-box;
}
.contact-compose-chip--primary {
  border: 1px solid var(--slate-200, #e2e8f0);
  background: var(--slate-50, #f8fafc);
  color: var(--slate-800, #1e293b);
}
.contact-compose-chip--valid {
  border: 1px solid var(--slate-300, #cbd5e1);
  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.22);
  background: var(--color-surface, #fff);
}
.contact-compose-chip-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 14rem;
}
.contact-compose-chip-remove {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0 0.15rem;
  margin: 0;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--slate-500, #64748b);
  min-width: 28px;
  min-height: 28px;
  border-radius: 0.25rem;
}
.contact-compose-chip-remove:hover {
  color: var(--slate-800, #1e293b);
  background: var(--slate-100, #f1f5f9);
}
.contact-compose-to-input-wrap {
  position: relative;
  width: 100%;
  flex: 0 0 auto;
  align-self: stretch;
}
.contact-compose-to-input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  min-height: 44px;
  font-size: 1rem;
  box-sizing: border-box;
}
.contact-compose-to-input:focus {
  outline: none;
}
.contact-compose-to-field:focus-within {
  border-color: var(--focus-border, var(--slate-400, #94a3b8));
  box-shadow: 0 0 0 3px var(--focus-ring, rgba(59, 130, 246, 0.2));
}
.contact-inbox-compose-dialog .contact-compose-suggest {
  z-index: 20;
}
.contact-compose-suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 2px;
  z-index: 5;
  max-height: 220px;
  overflow-y: auto;
  list-style: none;
  padding: 0.25rem 0;
  margin: 0;
  background: var(--color-surface, #fff);
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: 0.375rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.contact-compose-suggest-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.65rem;
  cursor: pointer;
  font-size: 0.875rem;
}
.contact-compose-suggest-item:hover,
.contact-compose-suggest-item.is-active {
  background: var(--slate-100, #f1f5f9);
}
.contact-compose-suggest-kind {
  font-size: 0.75rem;
  color: var(--slate-500, #64748b);
  flex-shrink: 0;
}

.contact-inbox-nav-toggle {
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1;
}
.contact-inbox-nav-toggle-icon {
  display: inline-block;
}

.contact-inbox-nav-col {
  flex: 0 0 0;
  width: 0;
  min-width: 0;
  max-width: 0;
  overflow: hidden;
  align-self: stretch;
  min-height: 0;
  border-right: 1px solid var(--slate-200, #e2e8f0);
  background: var(--slate-800, #1e293b);
  color: var(--slate-100, #f1f5f9);
  transition: flex-basis 0.2s ease, width 0.2s ease, max-width 0.2s ease;
}
.contact-inbox-shell.contact-inbox-nav-expanded .contact-inbox-nav-col {
  flex: 0 0 min(168px, 22vw);
  width: min(168px, 22vw);
  max-width: min(168px, 22vw);
  overflow: hidden;
}
.contact-inbox-nav-scroll {
  height: 100%;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.35rem 0.35rem 0.5rem;
  box-sizing: border-box;
}
.contact-inbox-nav-folders {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-bottom: 0.75rem;
}
.contact-inbox-folder-btn,
.contact-inbox-label-filter-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  width: 100%;
  text-align: left;
  padding: 0.35rem 0.4rem;
  border: none;
  border-radius: 0.25rem;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
  min-height: 40px;
  box-sizing: border-box;
}
.contact-inbox-folder-btn:hover,
.contact-inbox-label-filter-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}
.contact-inbox-folder-btn.is-active,
.contact-inbox-label-filter-btn.is-active {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 3px 0 0 rgba(96, 165, 250, 0.95);
  font-weight: 600;
}
.contact-inbox-folder-count {
  font-size: 0.75rem;
  opacity: 0.85;
  flex-shrink: 0;
}
.contact-inbox-folder-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contact-inbox-nav-labels-block {
  border-top: 1px solid var(--slate-600, #475569);
  padding-top: 0.4rem;
}
.contact-inbox-nav-labels-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  margin-bottom: 0.3rem;
}
.contact-inbox-nav-labels-head {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.85;
  flex: 1;
  min-width: 0;
}
.contact-inbox-nav-add-label-btn {
  flex-shrink: 0;
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0.25rem;
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-inbox-nav-add-label-btn:hover {
  background: rgba(255, 255, 255, 0.14);
}
.contact-inbox-nav-add-label-btn:focus-visible {
  outline: 2px solid var(--focus-border, #60a5fa);
  outline-offset: 1px;
}

.contact-inbox-new-label-overlay {
  z-index: var(--z-modal, 3000);
}
.contact-inbox-new-label-overlay[hidden],
.contact-inbox-new-label-overlay[hidden] .modal-card {
  display: none !important;
}
.contact-inbox-new-label-card {
  max-width: 22rem;
  width: calc(100vw - 2rem);
}
.contact-inbox-nav-label-tree {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.contact-inbox-nav-label-sub {
  list-style: none;
  margin: 0.15rem 0 0 0;
  padding: 0 0 0 0.5rem;
  border-left: 1px solid var(--slate-600, #475569);
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.contact-inbox-nav-label-li {
  margin: 0;
  padding: 0;
}
.contact-inbox-nav-label-li.is-dragging {
  opacity: 0.65;
}
.contact-inbox-nav-label-row {
  display: flex;
  align-items: stretch;
  gap: 0.2rem;
  min-height: 40px;
}
.contact-inbox-nav-label-drag {
  flex: 0 0 1.75rem;
  width: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  color: var(--slate-400, #94a3b8);
  font-size: 0.875rem;
  line-height: 1;
  user-select: none;
  border-radius: 0.25rem;
}
.contact-inbox-nav-label-drag:active {
  cursor: grabbing;
}
.contact-inbox-nav-label-name-btn {
  flex: 1;
  min-width: 0;
}

.contact-inbox-email-settings-overlay {
  z-index: 3100;
}
.contact-inbox-email-settings-card.modal-card {
  max-width: min(56rem, calc(100vw - 2rem));
  width: min(56rem, calc(100vw - 2rem));
  max-height: min(92vh, 52rem);
  overflow-y: auto;
  box-sizing: border-box;
}
.contact-inbox-email-settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--slate-200, #e2e8f0);
}
.module-email-oauth-block {
  margin-bottom: 1rem;
}
.modal-card .module-email-oauth-block p {
  color: var(--slate-600, #475569);
}
.contact-inbox-email-settings-overlay[hidden],
.contact-inbox-email-settings-overlay[hidden] .modal-card {
  display: none !important;
}

/* Module email settings when embedded in a modal (inbox, etc.): wide flow, two-column port/encryption on wide viewports */
.modal-card .module-email-modal-form.form-compact {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}
.modal-card .module-email-modal-form .form-row-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1.25rem;
  width: 100%;
  margin-bottom: 0.75rem;
  align-items: start;
}
.modal-card .module-email-modal-form .form-row-two > div {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}
.modal-card .module-email-modal-form .form-row-two > div > label {
  margin: 0;
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--slate-700);
}
.modal-card .module-email-modal-form .form-row-two > div > input,
.modal-card .module-email-modal-form .form-row-two > div > select {
  width: 100%;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: inherit;
  box-sizing: border-box;
  background: var(--color-surface, #fff);
  color: inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.modal-card .module-email-modal-form .form-row-two > div > input:focus,
.modal-card .module-email-modal-form .form-row-two > div > select:focus {
  outline: none;
  border-color: var(--focus-border);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.modal-card .module-email-modal-form .form-row-two > div > input:hover,
.modal-card .module-email-modal-form .form-row-two > div > select:hover {
  border-color: var(--slate-400);
}
@media (max-width: 640px) {
  .modal-card .module-email-modal-form .form-row-two {
    grid-template-columns: 1fr;
  }
}
.modal-card .module-email-modal-form .module-email-test-email-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.modal-card .module-email-modal-form .module-email-test-email-actions .form-input,
.modal-card .module-email-modal-form .module-email-test-email-actions input[type='email'] {
  flex: 1 1 16rem;
  min-width: 0;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: inherit;
  box-sizing: border-box;
  background: var(--color-surface, #fff);
  color: inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.modal-card .module-email-modal-form .module-email-test-email-actions .form-input:focus,
.modal-card .module-email-modal-form .module-email-test-email-actions input[type='email']:focus {
  outline: none;
  border-color: var(--focus-border);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.modal-card .module-email-modal-form .module-email-form-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 1rem;
}
.modal-card .module-email-modal-form .module-email-form-actions-row--after-imap {
  margin-top: 0.5rem;
}
.modal-card .module-email-modal-form .module-email-inline-test-result {
  flex: 1 1 12rem;
  min-width: 0;
  margin: 0;
}
.modal-card .module-email-modal-form .smtp-fail-instructions {
  background: var(--slate-50, #f8fafc);
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: var(--radius);
}
.modal-card .module-email-modal-form .test-result.ok {
  color: var(--green-600, #16a34a);
}
.modal-card .module-email-modal-form .test-result.fail {
  color: var(--color-error, #b91c1c);
}
.contact-inbox-row-label {
  display: inline-block;
  font-size: inherit;
  padding: 0.04rem 0.3rem;
  border-radius: 0.2rem;
  background: var(--slate-200, #e2e8f0);
  color: var(--slate-700, #334155);
  vertical-align: baseline;
  max-width: 7.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contact-inbox-icon-btn.contact-inbox-star-btn {
  padding: 0.25rem;
}
.contact-inbox-star-btn.is-starred {
  color: var(--amber-500, #f59e0b);
}
.contact-inbox-star-svg {
  width: 1.125rem;
  height: 1.125rem;
  display: block;
}
.contact-inbox-detail-labels-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.5rem;
  margin-top: 0.65rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--slate-200, #e2e8f0);
}
.contact-inbox-detail-labels-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  flex: 1;
  min-width: 0;
  align-items: center;
}
.contact-inbox-detail-actions .contact-inbox-row-actions {
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  row-gap: 0.35rem;
}
.contact-inbox-header-labels-btn {
  flex-shrink: 0;
}
.contact-inbox-detail-labels-dropdown {
  position: fixed;
  z-index: var(--z-menu-dropdowns, 1400);
  box-sizing: border-box;
  min-width: 220px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-surface, #fff);
  border: 1px solid var(--slate-300, #cbd5e1);
  border-radius: var(--radius, 10px);
  box-shadow: var(--shadow-md, 0 10px 15px -3px rgba(30, 41, 59, 0.08));
  padding: 0.25rem 0;
}
.contact-inbox-detail-labels-dropdown[hidden] {
  display: none !important;
}
.contact-inbox-detail-labels-dropdown-inner {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  margin: 0;
}
.contact-inbox-detail-labels-dd-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.65rem;
  margin: 0;
  font-size: 0.875rem;
  cursor: pointer;
  color: var(--color-text, #1e293b);
}
.contact-inbox-detail-labels-dd-row:hover {
  background: var(--slate-100, #f1f5f9);
}
.contact-inbox-detail-labels-dd-row input[type='checkbox'] {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin: 0;
}
.contact-inbox-detail-labels-dd-text {
  flex: 1;
  min-width: 0;
  line-height: 1.35;
}
.contact-inbox-label-chip {
  font-size: 0.8125rem;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--slate-300, #cbd5e1);
  background: var(--slate-50, #f8fafc);
  cursor: pointer;
  min-height: 36px;
  box-sizing: border-box;
}
.contact-inbox-label-chip:hover {
  background: var(--slate-100, #f1f5f9);
}

@media (max-width: 768px) {
  .contact-inbox-shell {
    flex-direction: column;
    min-height: auto;
  }
  .contact-inbox-resizer {
    display: none !important;
  }
  .contact-inbox-list-col {
    flex: 0 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    max-height: 42vh;
    border-bottom: 1px solid var(--slate-200, #e2e8f0);
  }
  .contact-inbox-detail-col {
    flex: 1 1 auto;
    min-height: 50vh;
    max-width: 100%;
  }
  .contact-inbox-nav-col {
    order: 0;
    border-right: none;
    border-bottom: 1px solid var(--slate-200, #e2e8f0);
    max-height: 40vh;
  }
  .contact-inbox-shell.contact-inbox-nav-expanded .contact-inbox-nav-col {
    flex: 0 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 12rem;
  }
}

/* Applicant portal: phase roadmap (horizontal on wide, wraps on narrow) */
.applicant-phase-roadmap {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: stretch;
}
.applicant-phase-roadmap__step {
  flex: 1 1 8rem;
  min-width: 6rem;
  max-width: 14rem;
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-md, 8px);
  border: 1px solid var(--slate-200, #e2e8f0);
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.applicant-phase-roadmap__step--done {
  border-color: var(--green-200, #bbf7d0);
  background: var(--green-50, #f0fdf4);
}
.applicant-phase-roadmap__step--current {
  border-color: var(--amber-300, #fcd34d);
  background: var(--amber-50, #fffbeb);
  box-shadow: 0 0 0 1px var(--amber-200, #fde68a);
}
.applicant-phase-roadmap__step--upcoming {
  opacity: 0.85;
  background: var(--slate-100, #f1f5f9);
}
.applicant-phase-roadmap__title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--slate-800, #1e293b);
  line-height: 1.3;
}
.applicant-phase-roadmap__badge {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--slate-500, #64748b);
}
.applicant-phase-roadmap__step--done .applicant-phase-roadmap__badge {
  color: var(--green-700, #15803d);
}
.applicant-phase-roadmap__step--current .applicant-phase-roadmap__badge {
  color: var(--amber-800, #92400e);
}

/* Native browser spellcheck: wavy underline where ::spelling-error is supported (Chromium, Safari).
   Note: overflow:hidden on textarea prevents misspelling marks in many Chromium builds. */
textarea.form-input::spelling-error,
textarea.form-control::spelling-error,
textarea.chat-input-expand::spelling-error,
textarea.chat-input-textarea::spelling-error,
textarea.chat-conversation-input::spelling-error,
textarea.chat-pane-body::spelling-error,
.lang-email-editor::spelling-error,
#post-editor.composer-editor::spelling-error {
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-decoration-style: wavy;
  text-decoration-color: var(--red-500, #ef4444);
  text-decoration-thickness: from-font;
}

/* LanguageTool suggestion panel (messaging_spellcheck.js); below modals, above most content */
.ywam-lt-panel {
  position: fixed;
  left: 0.75rem;
  bottom: 0.75rem;
  z-index: 2800;
  max-width: min(22rem, calc(100vw - 1.5rem));
  max-height: min(40vh, 18rem);
  overflow: auto;
  padding: 0.65rem 0.85rem;
  background: var(--color-surface, #fff);
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.14);
  font-size: 0.875rem;
  line-height: 1.4;
}
.ywam-lt-panel-inner .ywam-lt-panel-title {
  margin: 0 0 0.4rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--slate-800, #1e293b);
}
.ywam-lt-panel .ywam-lt-list {
  margin: 0;
  padding: 0 0 0 1.1rem;
}
.ywam-lt-panel .ywam-lt-item {
  margin: 0.35rem 0;
}
.ywam-lt-panel .ywam-lt-msg {
  display: inline;
  color: var(--slate-700, #334155);
}
.ywam-lt-panel .ywam-lt-apply {
  margin-left: 0.35rem;
  vertical-align: baseline;
}
.ywam-lt-panel .ywam-lt-muted {
  margin: 0;
  color: var(--slate-500, #64748b);
}
.ywam-lt-panel .ywam-lt-error {
  margin: 0;
  color: var(--red-600, #dc2626);
}
.ywam-lt-panel .ywam-lt-rich-hint {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  color: var(--slate-600, #475569);
}
.ywam-lt-panel .ywam-lt-rich-apply-note {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  color: var(--amber-800, #92400e);
}
.ywam-lt-panel .ywam-lt-lang-review-hint {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  color: var(--slate-600, #475569);
  line-height: 1.35;
}

/* Messaging: language globe — position fixed; top/left from JS (anchored above focused field, top-right) */
.ywam-compose-lang-fab {
  position: fixed;
  z-index: 2850;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: var(--radius-sm, 4px);
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  font-size: 0.5rem;
  font-weight: 600;
  line-height: 1;
  color: var(--slate-600, #475569);
}
.ywam-compose-lang-fab:hover {
  color: var(--blue-700, #1d4ed8);
}
.ywam-compose-lang-fab:focus-visible {
  outline: 2px solid var(--focus-border, var(--blue-500, #3b82f6));
  outline-offset: 2px;
}
.ywam-compose-lang-fab-icon {
  font-size: 0.625rem;
  line-height: 1;
}
.ywam-compose-lang-fab-code {
  max-width: 0.95rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-size: 0.5rem;
  line-height: 1;
  text-align: center;
}

.ywam-compose-lang-modal.modal-overlay {
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.ywam-compose-lang-modal-card.modal-card {
  max-width: min(22rem, calc(100vw - 2rem));
  max-height: min(70vh, 26rem);
  display: flex;
  flex-direction: column;
  margin: 0;
}
.ywam-compose-lang-modal-title {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 600;
}
.ywam-compose-lang-modal-hint {
  margin: 0 0 0.65rem;
  font-size: 0.8125rem;
  color: var(--slate-600, #475569);
}
.ywam-compose-lang-modal .ywam-compose-lang-search {
  width: 100%;
  margin-bottom: 0.5rem;
  font-size: 16px;
}
.ywam-compose-lang-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: var(--radius-sm, 6px);
}
.ywam-compose-lang-option {
  padding: 0.5rem 0.65rem;
  cursor: pointer;
  font-size: 0.9375rem;
  border-bottom: 1px solid var(--slate-100, #f1f5f9);
}
.ywam-compose-lang-option:last-child {
  border-bottom: none;
}
.ywam-compose-lang-option:hover,
.ywam-compose-lang-option:focus {
  background: var(--slate-50, #f8fafc);
  outline: none;
}
.ywam-compose-lang-modal-actions {
  margin-top: 0.75rem;
  display: flex;
  justify-content: flex-end;
}

/* Freestyle diagram widget (Super Dash) */
.freestyle-diagram-root {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 200px;
}
.freestyle-diagram-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}
.freestyle-diagram-toolbar .fd-toolbar-btn.is-active {
  background: var(--slate-200, #e2e8f0);
  border-color: var(--slate-400, #94a3b8);
}
.freestyle-diagram-toolbar .fd-toolbar-sep {
  display: inline-block;
  width: 1px;
  height: 1.25rem;
  background: var(--slate-300, #cbd5e1);
  margin: 0 0.15rem;
  vertical-align: middle;
}
.freestyle-diagram-toolbar .fd-toolbar-settings-btn .fd-toolbar-gear-svg {
  display: block;
  vertical-align: middle;
}
.fd-zoom-wrap {
  position: relative;
  display: inline-block;
}
.freestyle-diagram-toolbar .fd-zoom-trigger {
  min-width: 2.75rem;
  padding-left: 0.45rem;
  padding-right: 0.45rem;
  font-size: 0.8125rem;
  font-weight: 600;
}
.fd-zoom-trigger-label {
  display: inline-block;
  min-width: 2.25rem;
  text-align: center;
}
.fd-zoom-popover {
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 2px;
  z-index: 8;
  min-width: min(9rem, 88vw);
  max-width: min(11rem, 92vw);
  padding: 0.3rem 0.4rem;
  background: var(--color-surface, #fff);
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1);
  font-size: 0.75rem;
}
.fd-zoom-popover[hidden] {
  display: none !important;
}
.fd-zoom-popover-inner.form-compact {
  gap: 0.22rem;
}
.fd-zoom-popover-inner .form-row-two {
  gap: 0.25rem 0.35rem;
  min-height: 0;
}
.fd-zoom-popover-inner .form-label {
  font-size: 0.7rem;
  margin: 0;
  line-height: 1.2;
}
.fd-zoom-popover-inner .form-input.fd-zoom-num {
  min-height: 28px;
  padding: 0.15rem 0.35rem;
  font-size: 0.8125rem;
}
.fd-zoom-popover-inner .fd-zoom-range-row {
  margin-bottom: 0;
}
.fd-zoom-popover-inner .fd-zoom-range-pop {
  width: 100%;
  min-height: 24px;
  box-sizing: border-box;
}
.fd-zoom-popover-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
  margin-top: 0.18rem;
  padding-top: 0.18rem;
  border-top: 1px solid var(--slate-100, #f1f5f9);
}
.fd-zoom-popover-actions .btn-small {
  padding: 0.12rem 0.35rem;
  font-size: 0.7rem;
  min-height: 26px;
  line-height: 1.2;
}
.fd-zoom-popover-actions .fd-zoom-fit {
  margin-right: auto;
}
.fd-zoom-popover-actions .fd-zoom-done,
.fd-zoom-popover-actions .fd-zoom-fit {
  width: auto;
}
.fd-zoom-wrapper {
  position: relative;
  flex-shrink: 0;
}
.freestyle-diagram-modal .fd-stack-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.freestyle-diagram-modal .fd-stack-btns .btn-small {
  width: auto;
}
.fd-textfmt-toolbar {
  position: fixed;
  z-index: 2600;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 4px 6px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
}
.fd-textfmt-toolbar[hidden] {
  display: none !important;
}
.fd-textfmt-toolbar .fd-tf-size {
  width: auto;
  min-width: 3.75rem;
  min-height: 36px;
}
.fd-textfmt-toolbar .fd-tf-color {
  width: 42px;
  min-height: 36px;
  padding: 2px;
  border-radius: 6px;
}
.freestyle-diagram-svg .fd-edge-handle-group {
  cursor: grab;
}
.freestyle-diagram-svg .fd-edge-handle-group:active {
  cursor: grabbing;
}
.freestyle-diagram-svg .fd-edge-snap-hint-ring {
  stroke: var(--focus-border, #2563eb);
  stroke-width: 2;
  opacity: 0.9;
}
.freestyle-diagram-svg .fd-edge-snap-hint-dot {
  fill: var(--focus-border, #2563eb);
  stroke: #fff;
  stroke-width: 1.5;
}
.freestyle-diagram-svg .fd-edge-route-handle {
  cursor: grab;
}
.freestyle-diagram-svg .fd-edge-route-handle:active {
  cursor: grabbing;
}
.freestyle-diagram-scroll {
  flex: 1;
  min-height: 220px;
  max-height: min(55vh, 480px);
  overflow: auto;
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: var(--radius-sm, 6px);
  background: var(--slate-50, #f8fafc);
}
.freestyle-diagram-scroll:has(.tasks-widget .super-dash-modal-overlay.is-open) {
  overflow: visible;
}
.freestyle-diagram-scroll.fd-scroll-can-pan {
  cursor: grab;
}
.freestyle-diagram-scroll.fd-scroll-panning {
  cursor: grabbing;
  user-select: none;
}

/* Freestyle drawing widget (Super Dash, Konva) */
.freestyle-draw-root {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 200px;
}
.fdraw-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
}
.fdraw-toolbar .fdraw-tb-btn.is-active {
  background: var(--slate-200, #e2e8f0);
  border-color: var(--slate-400, #94a3b8);
}
.fdraw-toolbar .btn-small {
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0.25rem 0.35rem;
}
.fdraw-zoom-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}
.fdraw-zoom-label {
  font-size: 0.75rem;
  font-weight: 600;
  min-width: 2.5rem;
  text-align: center;
  color: var(--slate-600, #475569);
}
.fdraw-swatch-mini {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 4px;
  border: 1px solid var(--slate-300, #cbd5e1);
  vertical-align: middle;
}
.fdraw-status {
  font-size: 0.75rem;
  color: var(--red-600, #dc2626);
  min-height: 1rem;
}
.fdraw-scroll {
  flex: 1;
  min-height: 220px;
  max-height: min(52vh, 520px);
  overflow: hidden;
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: var(--radius-sm, 6px);
  background: var(--slate-50, #f8fafc);
  outline: none;
}
.fdraw-scroll:focus-visible {
  box-shadow: 0 0 0 2px var(--focus-ring, rgba(37, 99, 235, 0.35));
}
.fdraw-stage-host {
  width: 100%;
  height: 100%;
  min-height: 220px;
  touch-action: none;
}
.fdraw-dropdown-wrap {
  position: relative;
  display: inline-block;
}
.fdraw-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 2px;
  z-index: 20;
  display: flex;
  gap: 0.2rem;
  padding: 0.25rem;
  background: var(--color-surface, #fff);
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
}
.fdraw-dropdown[hidden] {
  display: none !important;
}
.fdraw-dd-item {
  min-width: 2.5rem;
  min-height: 2.5rem;
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: 6px;
  background: var(--color-surface, #fff);
  cursor: pointer;
  font-size: 1.1rem;
}
.fdraw-dd-item:hover {
  background: var(--slate-50, #f8fafc);
}
.modal-overlay.fdraw-modal {
  z-index: var(--z-modal, 3000);
}
.modal-overlay.fdraw-modal[hidden] {
  display: none !important;
}
.fdraw-modal-card {
  max-width: min(28rem, 94vw);
}
.fdraw-shape-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}
.fdraw-shape-pick {
  min-height: 2.75rem;
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: 8px;
  background: var(--color-surface, #fff);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
}
.fdraw-shape-pick:hover {
  border-color: var(--slate-400, #94a3b8);
}
.fdraw-sp {
  display: block;
  width: 1.5rem;
  height: 1.25rem;
  border: 2px solid currentColor;
  box-sizing: border-box;
}
.fdraw-sp.rect {
  border-radius: 2px;
}
.fdraw-sp.rrect {
  border-radius: 6px;
}
.fdraw-sp.ellipse {
  border-radius: 50%;
}
.fdraw-sp.line {
  border: none;
  border-top: 3px solid currentColor;
  height: 0;
  margin-top: 0.6rem;
}
.fdraw-sp.arrow {
  border: none;
  background: linear-gradient(currentColor, currentColor) left center/70% 3px no-repeat;
  position: relative;
}
.fdraw-sp.tri {
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  border: none;
  background: var(--slate-700, #334155);
}
.fdraw-sp.hex {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  border: none;
  background: var(--slate-700, #334155);
}
.fdraw-sp.star {
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  border: none;
  background: var(--slate-700, #334155);
}
.fdraw-sp.diamond {
  transform: rotate(45deg);
  width: 1rem;
  height: 1rem;
  margin: 0.1rem;
}
.fdraw-sp.poly {
  border-style: dashed;
}
.fdraw-fill-tabs {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}
.fdraw-tab-fill {
  min-width: 2.5rem;
  min-height: 2.5rem;
  border-radius: 6px;
  border: 1px solid var(--slate-200, #e2e8f0);
  background: var(--color-surface, #fff);
  cursor: pointer;
  font-size: 1.1rem;
}
.fdraw-tab-fill.active {
  border-color: var(--blue-500, #3b82f6);
  background: var(--slate-50, #f8fafc);
}
.fdraw-swatch-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}
.fdraw-swatch-btn {
  width: 2rem;
  height: 2rem;
  border-radius: 6px;
  border: 1px solid var(--slate-300, #cbd5e1);
  cursor: pointer;
  padding: 0;
}
.fdraw-swatch-none {
  background: repeating-linear-gradient(45deg, #fee2e2, #fee2e2 4px, #fff 4px, #fff 8px) !important;
}
.fdraw-gradient-presets,
.fdraw-radial-presets,
.fdraw-pattern-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}
.fdraw-grad-btn,
.fdraw-pattern-btn {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 6px;
  border: 1px solid var(--slate-200, #e2e8f0);
  cursor: pointer;
  padding: 0;
}
.fdraw-dash-row {
  display: flex;
  gap: 0.35rem;
  margin: 0.5rem 0;
}
.fdraw-dash-pick {
  padding: 0.2rem 0.35rem;
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: 6px;
  background: var(--color-surface, #fff);
  cursor: pointer;
  color: var(--slate-700, #334155);
}
.fdraw-dash-pick.is-active {
  border-color: var(--blue-500, #3b82f6);
}
.fdraw-export-preview-wrap {
  margin: 0.5rem 0;
  text-align: center;
  background: var(--slate-100, #f1f5f9);
  border-radius: 8px;
  padding: 0.5rem;
}
.fdraw-export-preview {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}
.fdraw-settings-symbols {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin: 0.5rem 0;
}
.fdraw-set-toggle {
  width: 3rem;
  height: 3rem;
  border-radius: 10px;
  border: 2px solid var(--slate-200, #e2e8f0);
  background: var(--color-surface, #fff);
  cursor: pointer;
  padding: 0;
}
.fdraw-set-toggle[aria-pressed='true'] {
  border-color: var(--blue-500, #3b82f6);
  background: var(--slate-50, #f8fafc);
}
.fdraw-set-icon {
  display: block;
  width: 100%;
  height: 100%;
}
.fdraw-set-icon.grid-ico {
  background: linear-gradient(currentColor, currentColor) 0 0/100% 1px,
    linear-gradient(currentColor, currentColor) 0 0/1px 100%;
  background-color: transparent;
  opacity: 0.55;
}
.fdraw-set-icon.snap-ico {
  background: radial-gradient(circle at 30% 30%, currentColor 2px, transparent 2px),
    radial-gradient(circle at 70% 70%, currentColor 2px, transparent 2px);
  opacity: 0.55;
}
.super-dash-widget--in-fullscreen .fdraw-scroll {
  max-height: none;
  flex: 1;
  min-height: 0;
}
.super-dash-widget--in-fullscreen .freestyle-draw-root {
  flex: 1;
  min-height: 0;
}

/* Super Dash: widget nearly full-screen layer (above site header) */
.super-dash-widget-fs-layer {
  position: fixed;
  inset: 0;
  z-index: 6000;
  display: none;
  flex-direction: column;
  background: var(--slate-100, #f1f5f9);
  box-sizing: border-box;
}
.super-dash-widget-fs-layer:not([hidden]) {
  display: flex;
}
.super-dash-widget-fs-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
  box-sizing: border-box;
}
.super-dash-widget--in-fullscreen {
  position: relative !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  flex: 1;
  min-height: 0;
  box-sizing: border-box;
}
.super-dash-widget--in-fullscreen .super-dash-widget-resize-handle {
  display: none !important;
}
.super-dash-widget--in-fullscreen .freestyle-diagram-scroll {
  max-height: none;
  flex: 1;
  min-height: 0;
}
.super-dash-widget--in-fullscreen .freestyle-diagram-root {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.super-dash-widget--in-fullscreen .super-dash-widget-body {
  flex: 1;
  min-height: 0;
}
.freestyle-diagram-canvas {
  position: relative;
  background: #fff;
}
/* Edges and marker arrowheads must paint above node HTML so heads are not hidden under fills. */
.freestyle-diagram-svg {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 5;
}
.freestyle-diagram-edge-labels {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 6;
}
.freestyle-diagram-nodes {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 3;
}
/* Trip-slip–style alignment guides while dragging nodes (above shapes, below connectors and edge labels). */
.freestyle-diagram-node-guides {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 4;
  overflow: visible;
}
.freestyle-diagram-node-guides .fd-node-align-line-v {
  position: absolute;
  top: 0;
  width: 0;
  border-left: 2px dashed #dc2626;
  opacity: 1;
  box-sizing: border-box;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85), 0 0 6px rgba(220, 38, 38, 0.55);
  z-index: 1;
}
.freestyle-diagram-node-guides .fd-node-align-line-h {
  position: absolute;
  left: 0;
  height: 0;
  border-top: 2px dashed #dc2626;
  opacity: 1;
  box-sizing: border-box;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85), 0 0 6px rgba(220, 38, 38, 0.55);
  z-index: 1;
}
.fd-toolbar-icon {
  display: block;
  vertical-align: middle;
}
.fd-shape-picker-wrap {
  position: relative;
  display: inline-block;
}
.fd-shape-popover {
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 4px;
  z-index: 6;
  min-width: 220px;
  padding: 8px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: var(--radius-sm, 8px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}
.fd-shape-popover[hidden] {
  display: none !important;
}
.fd-shape-popover-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.fd-shape-choice {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 6px;
  margin: 0;
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: var(--radius-sm, 6px);
  background: var(--slate-50, #f8fafc);
  cursor: pointer;
}
.fd-shape-choice:hover,
.fd-shape-choice:focus-visible {
  border-color: var(--focus-border, #2563eb);
  background: #fff;
  outline: none;
}
.fd-shape-preview {
  display: block;
  width: 32px;
  height: 24px;
  box-sizing: border-box;
  background: var(--slate-200, #e2e8f0);
  border: 1.5px solid var(--slate-600, #475569);
}
.fd-sp-ellipse {
  border-radius: 50%;
}
.fd-sp-rect {
  border-radius: 3px;
}
.fd-sp-roundrect {
  border-radius: 8px;
}
.fd-sp-stadium {
  border-radius: 999px;
}
.fd-sp-diamond {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.fd-sp-parallelogram {
  clip-path: polygon(22% 0%, 100% 0%, 78% 100%, 0% 100%);
}
.fd-sp-hexagon {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.fd-sp-trapezoid {
  clip-path: polygon(12% 0%, 88% 0%, 100% 100%, 0% 100%);
}
.fd-sp-triangle {
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
.fd-sp-cylinder {
  border-radius: 6px 6px 45% 45% / 6px 6px 22% 22%;
}
.fd-sp-document {
  clip-path: polygon(0% 0%, 100% 0%, 100% 82%, 50% 100%, 0% 82%);
}
.fd-sp-queue {
  clip-path: polygon(18% 0%, 100% 0%, 82% 100%, 0% 100%);
}
.fd-sp-cross {
  border-radius: 50%;
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
  background-size: 38% 2px, 2px 38%;
  background-position: center, center;
  background-repeat: no-repeat;
  color: var(--slate-600, #475569);
}
.fd-edge-label-box {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 1;
  min-width: 48px;
  max-width: 180px;
  padding: 2px 6px;
  pointer-events: auto;
  cursor: text;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
.fd-edge-label-box--selected {
  border-color: var(--focus-border, #2563eb);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}
.fd-edge-label-text {
  min-height: 1.25em;
  max-height: 4.5em;
  overflow: auto;
  outline: none;
  font-size: 11px;
  line-height: 1.25;
  text-align: center;
  word-break: break-word;
  color: var(--slate-800, #1e293b);
}
/* Placeholder only when the connector is selected; empty labels stay hidden otherwise (see JS). */
.fd-edge-label-box--selected .fd-edge-label-text:empty::before {
  content: attr(data-placeholder);
  color: var(--slate-400, #94a3b8);
  pointer-events: none;
}
.fd-node {
  position: absolute;
  box-sizing: border-box;
  border-style: solid;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  pointer-events: auto;
  cursor: grab;
  overflow: visible;
}
.fd-node:active {
  cursor: grabbing;
}
.fd-node--ellipse {
  border-radius: 50%;
}
.fd-node--textonly {
  border-color: transparent !important;
  background: transparent !important;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 2px;
}
.fd-node--selected {
  outline: 2px solid var(--focus-border, #2563eb);
  outline-offset: 1px;
}
.fd-node--connect-src {
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35);
}
.fd-node-body {
  position: relative;
  z-index: 2;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  display: inline-block;
  vertical-align: middle;
  min-width: 2ch;
  min-height: 1.25em;
  overflow: hidden;
  text-align: center;
  outline: none;
  word-break: break-word;
  font-size: inherit;
  line-height: 1.25;
  cursor: text;
}
.freestyle-diagram-root[data-read-only="1"] .fd-node-body {
  cursor: default;
}
.fd-node-body:empty::before {
  content: attr(data-placeholder);
  color: var(--slate-400, #94a3b8);
  pointer-events: none;
}
.fd-node-back {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  pointer-events: auto;
  z-index: 0;
}
.fd-node--kind-rect .fd-node-back {
  border-radius: 6px;
}
.fd-node--kind-roundrect .fd-node-back {
  border-radius: 14px;
}
.fd-node--kind-stadium .fd-node-back {
  border-radius: 999px;
}
.fd-node--kind-diamond .fd-node-back {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.fd-node--kind-parallelogram .fd-node-back {
  clip-path: polygon(18% 0%, 100% 0%, 82% 100%, 0% 100%);
}
.fd-node--kind-queue .fd-node-back {
  clip-path: polygon(12% 0%, 100% 0%, 88% 100%, 0% 100%);
}
.fd-node--kind-hexagon .fd-node-back {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.fd-node--kind-trapezoid .fd-node-back {
  clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
}
.fd-node--kind-triangle .fd-node-back {
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
.fd-node--kind-cylinder .fd-node-back {
  border-radius: 8px 8px 45% 45% / 8px 8px 18% 18%;
}
.fd-node--kind-document .fd-node-back {
  clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 50% 100%, 0% 88%);
}
.fd-node--kind-cross .fd-node-back {
  border-radius: 50%;
}
.fd-node--kind-cross .fd-node-back::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42%;
  height: 42%;
  transform: translate(-50%, -50%);
  background: linear-gradient(currentColor, currentColor), linear-gradient(90deg, currentColor, currentColor);
  background-size: 100% 2px, 2px 100%;
  background-position: center, center;
  background-repeat: no-repeat;
  opacity: 0.5;
  pointer-events: none;
}
.fd-node--kind-diamond .fd-node-body,
.fd-node--kind-hexagon .fd-node-body {
  max-width: 72%;
}
.fd-node--kind-triangle .fd-node-body {
  margin-top: 14%;
  max-height: 58%;
}
.fd-node--kind-document .fd-node-body {
  max-height: 78%;
}
.fd-node--textonly .fd-node-body {
  width: 100%;
  display: block;
  text-align: left;
}
.fd-node-resize {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 12px;
  height: 12px;
  cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 50%, var(--slate-400, #94a3b8) 50%);
  border-radius: 0 0 4px 0;
  pointer-events: auto;
}
.freestyle-diagram-root .freestyle-diagram-modal.modal-overlay {
  z-index: var(--z-modal, 3000);
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.freestyle-diagram-root .freestyle-diagram-modal--element-shapes.modal-overlay,
.freestyle-diagram-root .freestyle-diagram-modal--place-shape.modal-overlay {
  z-index: 3101;
}
.freestyle-diagram-modal--place-shape .fd-place-shape-card {
  max-width: min(22rem, calc(100vw - 2rem));
}
.freestyle-diagram-modal--place-shape .fd-place-shape-grid {
  margin-top: 0;
}
.freestyle-diagram-modal--place-shape .fd-place-shape-actions {
  margin-top: 0.75rem;
}
.freestyle-diagram-root .freestyle-diagram-modal .modal-card {
  max-width: min(32rem, calc(100vw - 2rem));
  max-height: min(90vh, 720px);
  overflow: auto;
}
.freestyle-diagram-modal .fd-diag-modal-form.form-compact {
  grid-template-columns: 1fr;
  max-width: none;
  gap: 0.35rem;
}
.freestyle-diagram-modal--element .fd-el-text-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
  margin-bottom: 0.35rem;
}
.freestyle-diagram-modal--element .fd-el-text-row .form-label {
  margin: 0;
}
/* Shape | Fill | Border | Width — one row, labels above */
.freestyle-diagram-modal--element .fd-el-shape-fill-border-row {
  display: grid;
  grid-template-columns: auto auto auto auto;
  gap: 0.5rem 0.65rem;
  align-items: end;
  margin-bottom: 0.35rem;
}
.freestyle-diagram-modal--element .fd-el-sfb-cell .form-label,
.freestyle-diagram-modal--element .fd-el-sfb-cell > .form-label {
  display: block;
  margin: 0 0 0.25rem;
}
.freestyle-diagram-modal--element .fd-el-sfb-shape {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}
.freestyle-diagram-modal--element .fd-el-sfb-shape > .form-label {
  margin: 0;
}
.freestyle-diagram-modal--element .fd-el-shape-trigger {
  padding: 0.35rem 0.6rem;
  min-height: 44px;
}
.freestyle-diagram-modal--element .fd-el-sfb-width .fd-el-strokew {
  width: 2.25rem;
  min-width: 2.25rem;
  max-width: 2.75rem;
  text-align: center;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
  box-sizing: border-box;
}
/* Font (fit) | text Color | Size */
.freestyle-diagram-modal--element .fd-el-font-color-size-row {
  display: grid;
  grid-template-columns: max-content auto minmax(0, max-content);
  gap: 0.5rem 0.75rem;
  align-items: end;
  margin-bottom: 0.35rem;
}
.freestyle-diagram-modal--element .fd-el-fcs-cell .form-label {
  display: block;
  margin: 0 0 0.25rem;
}
.freestyle-diagram-modal--element .fd-el-fcs-font .fd-el-font-key {
  width: auto;
  max-width: min(12rem, 100%);
  min-width: 0;
  field-sizing: content;
}
@supports not (field-sizing: content) {
  .freestyle-diagram-modal--element .fd-el-fcs-font .fd-el-font-key {
    width: max-content;
    max-width: 100%;
  }
}
.freestyle-diagram-modal--element .fd-el-fcs-size .fd-el-fontsize {
  width: 4rem;
  min-width: 4rem;
  max-width: 5rem;
}
.freestyle-diagram-modal--element .fd-el-layer-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  margin-bottom: 0.15rem;
}
.freestyle-diagram-modal--element .fd-el-layer-row > .form-label {
  margin: 0;
}
.freestyle-diagram-modal--element .fd-stack-btns--modal,
.freestyle-diagram-modal--edge .fd-stack-btns--modal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}
.freestyle-diagram-modal--element .fd-stack-btns--modal .btn-small,
.freestyle-diagram-modal--edge .fd-stack-btns--modal .btn-small {
  width: auto;
  padding: 0.2rem 0.4rem;
  font-size: 0.7rem;
}
.freestyle-diagram-modal--element .fd-el-modal-actions {
  margin-top: 0.75rem;
  justify-content: flex-end;
}
/* Connector modal — visual editor */
.freestyle-diagram-modal--edge .fd-edge-modal-form {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.freestyle-diagram-modal--edge .fd-edge-modal-route-row {
  justify-content: center;
}
.freestyle-diagram-modal--edge .fd-edge-modal-preview-wrap {
  border-radius: var(--radius-sm, 8px);
  background: var(--slate-50, #f8fafc);
  border: 1px solid var(--slate-200, #e2e8f0);
  padding: 0.5rem;
  min-height: 132px;
  overflow: visible;
}
.freestyle-diagram-modal--edge .fd-edge-modal-preview-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 200px;
  overflow: visible;
}
.freestyle-diagram-modal--edge .fd-edge-modal-stroke-row .fd-edge-stroke-range {
  width: 100%;
  min-height: 32px;
  accent-color: var(--focus-border, #2563eb);
}
.freestyle-diagram-modal--edge .fd-edge-modal-arrow-bar-inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-width: 0;
}
.freestyle-diagram-modal--edge .fd-edge-modal-head-inline {
  display: flex;
  flex-shrink: 0;
  gap: 6px;
  align-items: center;
}
.freestyle-diagram-modal--edge .fd-edge-modal-size-scroll {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1;
  min-width: 0;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.freestyle-diagram-modal--edge .fd-edge-size-pick {
  flex-shrink: 0;
  scroll-snap-align: center;
}
.freestyle-diagram-modal--edge .fd-edge-modal-arrow-sep {
  width: 1px;
  align-self: stretch;
  min-height: 36px;
  background: var(--slate-200, #e2e8f0);
  flex-shrink: 0;
}
.freestyle-diagram-modal--edge .fd-edge-modal-preview-path {
  stroke-linecap: butt;
  stroke-linejoin: miter;
}
.freestyle-diagram-modal--edge .fd-edge-modal-preview-arrows {
  pointer-events: auto;
}
.freestyle-diagram-modal--edge .fd-head-preview-svg {
  display: block;
  width: 36px;
  height: 22px;
}
.freestyle-diagram-modal--edge .fd-size-preview-svg {
  display: block;
  width: 36px;
  height: 22px;
}
.freestyle-diagram-modal--edge .fd-edge-modal-bottom-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.freestyle-diagram-modal--edge .fd-edge-modal-bottom-row .fd-edge-label-input {
  flex: 1;
  min-width: 120px;
}
.freestyle-diagram-modal--edge .fd-edge-layer-row--icons .fd-stack-btns--modal {
  justify-content: center;
}
.freestyle-diagram-modal--edge .fd-edge-stack-icon {
  min-width: 40px;
  font-size: 1rem;
  line-height: 1;
  padding: 0.35rem 0.45rem;
}
.freestyle-diagram-modal--settings .fd-settings-arrow-bar-inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-width: 0;
  margin-top: 4px;
}
.freestyle-diagram-modal--settings .fd-settings-head-inline {
  display: flex;
  flex-shrink: 0;
  gap: 6px;
  align-items: center;
}
.freestyle-diagram-modal--settings .fd-settings-size-scroll {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1;
  min-width: 0;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.freestyle-diagram-modal--settings .fd-settings-size-pick {
  flex-shrink: 0;
  scroll-snap-align: center;
}
.freestyle-diagram-modal--settings .fd-settings-arrow-sep {
  min-height: 32px;
}
.freestyle-diagram-modal--settings .fd-settings-def-arrow-combo {
  min-width: 0;
}
.freestyle-diagram-modal--settings .fd-head-preview-svg,
.freestyle-diagram-modal--settings .fd-size-preview-svg {
  display: block;
  width: 32px;
  height: 20px;
}
.fd-route-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.freestyle-diagram-modal--settings .fd-settings-def-route .fd-route-picker {
  margin-top: 2px;
}
.fd-route-choice {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 4px 8px;
  margin: 0;
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: var(--radius-sm, 6px);
  background: var(--slate-50, #f8fafc);
  cursor: pointer;
  color: var(--slate-600, #475569);
}
.fd-route-choice:hover,
.fd-route-choice:focus-visible {
  border-color: var(--focus-border, #2563eb);
  background: #fff;
  outline: none;
}
.fd-route-choice--selected {
  border-color: var(--focus-border, #2563eb);
  background: #fff;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18);
  color: var(--focus-border, #2563eb);
}
.fd-route-preview-svg {
  display: block;
  width: 44px;
  height: 28px;
}
.freestyle-diagram-modal--edge .fd-edge-layer-row--icons {
  margin: 0;
}
/* Diagram defaults modal */
.freestyle-diagram-modal--settings .fd-settings-dims-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.35rem;
}
.freestyle-diagram-modal--settings .fd-settings-dims-cell .form-label {
  display: block;
  margin: 0 0 0.25rem;
}
.freestyle-diagram-modal--settings .fd-settings-defaults-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) max-content minmax(0, max-content);
  gap: 0.5rem 0.65rem;
  align-items: end;
  margin-bottom: 0.35rem;
}
.freestyle-diagram-modal--settings .fd-settings-def-cell .form-label {
  display: block;
  margin: 0 0 0.25rem;
}
.freestyle-diagram-modal--settings .fd-settings-def-font .fd-settings-font-key {
  width: auto;
  max-width: min(12rem, 100%);
  min-width: 0;
  field-sizing: content;
}
@supports not (field-sizing: content) {
  .freestyle-diagram-modal--settings .fd-settings-def-font .fd-settings-font-key {
    width: max-content;
    max-width: 100%;
  }
}
.freestyle-diagram-modal--settings .fd-settings-def-fsz .fd-settings-font-size {
  width: 4rem;
  min-width: 4rem;
  max-width: 5rem;
}
.freestyle-diagram-modal--settings .fd-settings-connector-row {
  display: grid;
  grid-template-columns: minmax(0, 5.5rem) minmax(0, 1fr);
  gap: 0.5rem 0.65rem;
  align-items: end;
  margin-bottom: 0.35rem;
}
.freestyle-diagram-modal--settings .fd-settings-def-conn-width .fd-settings-edge-strokew {
  width: 4rem;
  min-width: 4rem;
  max-width: 5rem;
}
.freestyle-diagram-modal--settings .fd-settings-shape-row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.freestyle-diagram-modal--settings .fd-settings-shape-row .form-label {
  margin: 0;
}
@media (max-width: 520px) {
  .freestyle-diagram-modal--element .fd-el-shape-fill-border-row {
    grid-template-columns: 1fr 1fr;
  }
  .freestyle-diagram-modal--element .fd-el-font-color-size-row {
    grid-template-columns: 1fr;
  }
  .freestyle-diagram-modal--settings .fd-settings-defaults-row {
    grid-template-columns: 1fr;
  }
  .freestyle-diagram-modal--settings .fd-settings-connector-row {
    grid-template-columns: 1fr;
  }
}
.freestyle-diagram-modal--element-shapes .fd-el-shapes-card {
  max-width: min(22rem, calc(100vw - 2rem));
}
.freestyle-diagram-modal--element-shapes .fd-el-shape-modal-grid {
  margin-top: 0;
}
.fd-print-preview-wrap {
  margin: 0.75rem 0;
  max-height: 42vh;
  overflow: auto;
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: var(--radius-sm, 6px);
  padding: 0.5rem;
  background: #fff;
}
.fd-print-hint {
  margin: 0;
  font-size: 0.875rem;
  color: var(--slate-600, #475569);
}
.fd-print-actions {
  flex-wrap: wrap;
  gap: 0.35rem;
}
.fd-modal-title {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 600;
}

/* Super Dash: user field panel widget */
.user-field-panel-root {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 0;
  flex: 1 1 auto;
  align-self: stretch;
}
.user-field-panel-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.user-field-panel-status {
  font-size: 0.875rem;
  color: var(--slate-600, #475569);
}
.user-field-panel-empty {
  font-size: 0.875rem;
  color: var(--slate-600, #475569);
}
.user-field-panel-fields {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.user-field-panel-fields[hidden],
.user-field-panel-add-row[hidden] {
  display: none !important;
}
.super-dash-widget[data-widget-key="user_field_panel"] .super-dash-widget-body {
  overflow: hidden;
  min-height: 0;
}
.user-field-panel-row {
  display: grid;
  grid-template-columns: minmax(5rem, 7.5rem) 1fr;
  gap: 0.35rem 0.5rem;
  align-items: center;
}
.user-field-panel-row--arrange {
  grid-template-columns: auto minmax(5rem, 7.5rem) 1fr minmax(5.5rem, 7rem);
}
.user-field-panel-drag-handle {
  cursor: grab;
  user-select: none;
  color: var(--slate-400, #94a3b8);
  font-size: 1rem;
  line-height: 1;
}
.user-field-panel-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--slate-700, #334155);
}
.user-field-panel-control .form-input,
.user-field-panel-mode-cell .form-input {
  width: 100%;
  max-width: 100%;
}
.user-field-panel-readonly {
  font-size: 0.875rem;
  padding: 0.35rem 0;
  word-break: break-word;
}
.user-field-panel-add-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
}
.user-field-panel-add-label {
  font-size: 0.875rem;
  font-weight: 500;
}
.user-field-panel-add-select {
  min-width: 10rem;
  flex: 1 1 12rem;
}
@media (max-width: 640px) {
  .user-field-panel-row,
  .user-field-panel-row--arrange {
    grid-template-columns: 1fr;
  }
  .user-field-panel-drag-handle {
    justify-self: start;
  }
}

/* Initial setup checklist (Admin → Site settings) */
.initial-setup-banner {
  background: #fef2f2;
  border-bottom: 1px solid #fecaca;
  color: #991b1b;
  padding: 0.65rem 1rem;
  font-size: 0.875rem;
}
.initial-setup-banner-link {
  color: #b91c1c;
  font-weight: 700;
}
.initial-setup-banner-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  max-width: 72rem;
  margin: 0 auto;
}
.initial-setup-banner-text {
  margin: 0;
  line-height: 1.45;
}
.initial-setup-banner-dismiss-form {
  margin: 0;
  flex-shrink: 0;
}
.initial-setup-still-required {
  border: 2px solid #fca5a5;
  background: #fef2f2;
}
.initial-setup-still-required-heading {
  margin: 0 0 0.65rem;
  font-size: 1.0625rem;
  color: #b91c1c;
}
.initial-setup-still-required-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.initial-setup-still-required-item {
  margin: 0;
  border-top: 1px solid #fecaca;
}
.initial-setup-still-required-item:first-child {
  border-top: none;
}
.initial-setup-still-required-link {
  display: block;
  padding: 0.65rem 0.5rem;
  text-decoration: none;
  color: inherit;
}
.initial-setup-still-required-link:hover {
  background: #fee2e2;
}
.initial-setup-still-required-name {
  display: block;
  font-weight: 700;
  color: #991b1b;
}
.initial-setup-still-required-detail {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.875rem;
  color: #7f1d1d;
}
.initial-setup-progress-label {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
}
.initial-setup-progress-bar {
  height: 0.5rem;
  background: var(--slate-200, #e2e8f0);
  border-radius: 999px;
  overflow: hidden;
}
.initial-setup-progress-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width 0.25s ease;
}
.initial-setup-progress-bar-fill--required {
  background: #dc2626;
}
.initial-setup-progress-bar-fill--done {
  background: #16a34a;
}
.initial-setup-next--required {
  border-left: 4px solid #dc2626;
  background: #fef2f2;
}
.initial-setup-next-title {
  margin: 0.35rem 0 0.25rem;
  font-size: 1.0625rem;
  font-weight: 700;
  color: #991b1b;
}
.initial-setup-next-detail {
  margin: 0 0 0.75rem;
  color: #7f1d1d;
  font-size: 0.9375rem;
}
.initial-setup-phase h3 {
  margin: 0 0 0.75rem;
  font-size: 1.0625rem;
}
.initial-setup-phase--required h3 {
  color: #b91c1c;
}
.initial-setup-phase--suggested h3 {
  color: #b45309;
}
.initial-setup-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}
.initial-setup-step {
  margin: 0 0 0.5rem;
  padding: 0.75rem 0.85rem;
  border-radius: 8px;
  border: 1px solid transparent;
}
.initial-setup-step:last-child {
  margin-bottom: 0;
}
.initial-setup-step--done {
  background: #f0fdf4;
  border-color: #86efac;
}
.initial-setup-step--required {
  background: #fef2f2;
  border-color: #fca5a5;
}
.initial-setup-step--suggested {
  background: #fffbeb;
  border-color: #fcd34d;
}
.initial-setup-step-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}
.initial-setup-step-status {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
}
.initial-setup-step--done .initial-setup-step-status {
  background: #16a34a;
  color: #fff;
}
.initial-setup-step--required .initial-setup-step-status {
  background: #dc2626;
  color: #fff;
}
.initial-setup-step--suggested .initial-setup-step-status {
  background: #d97706;
  color: #fff;
}
.initial-setup-step--done .initial-setup-step-title {
  color: #166534;
}
.initial-setup-step--required .initial-setup-step-title {
  color: #991b1b;
  font-weight: 700;
}
.initial-setup-step--suggested .initial-setup-step-title {
  color: #92400e;
  font-weight: 600;
}
.initial-setup-step-title {
  flex: 1 1 12rem;
}
.initial-setup-step-detail {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  line-height: 1.45;
}
.initial-setup-step--done .initial-setup-step-detail {
  color: #15803d;
}
.initial-setup-step--required .initial-setup-step-detail {
  color: #b91c1c;
  font-weight: 500;
}
.initial-setup-step--suggested .initial-setup-step-detail {
  color: #a16207;
}
@media (max-width: 640px) {
  .initial-setup-step-open {
    width: 100%;
    margin-top: 0.25rem;
  }
}