/* ============================================
   LuniCare Design System
   Mobile-first, soothing, and inviting
   ============================================ */

/* --------------------------------------------
   CSS Custom Properties (Design Tokens)
   -------------------------------------------- */
:root {
  /* Primary Color - Calm Blue */
  --color-primary: #4A90E2;
  --color-primary-light: #7FB3F0;
  --color-primary-lighter: #A8C9F0;
  --color-primary-lightest: #DCE9F7;
  --color-primary-dark: #3A7BC8;
  --color-primary-darker: #2B5A94;

  /* Secondary Color - Warm Amber */
  --color-secondary: #F5A623;
  --color-secondary-light: #FFBE4D;
  --color-secondary-lighter: #F5D08A;
  --color-secondary-lightest: #F5E8CC;
  --color-secondary-dark: #D9901A;
  --color-secondary-darker: #B87714;

  /* Success Color - Fresh Green */
  --color-success: #7ED321;
  --color-success-light: #A3E35A;
  --color-success-lighter: #B8DE8A;
  --color-success-lightest: #E0F0CC;
  --color-success-dark: #6AB81C;
  --color-success-darker: #4F8A14;

  /* Error Color - Soft Red */
  --color-error: #D0021B;
  --color-error-light: #E54359;
  --color-error-lighter: #E8929A;
  --color-error-lightest: #F5DDE0;
  --color-error-dark: #B30218;
  --color-error-darker: #8A0112;

  /* Warning Color - Derived from Secondary */
  --color-warning: #F5A623;
  --color-warning-light: #F5C66A;
  --color-warning-lightest: #F5E8CC;

  /* Info Color - Derived from Primary */
  --color-info: #4A90E2;
  --color-info-light: #7FB3F0;
  --color-info-lightest: #DCE9F7;

  /* Neutral Colors - Warm Grays (no pure white) */
  --color-neutral-50: #F5F6F7;
  --color-neutral-100: #ECEEF0;
  --color-neutral-200: #DFE2E6;
  --color-neutral-300: #CCD1D9;
  --color-neutral-400: #9BA5B3;
  --color-neutral-500: #6E7A8A;
  --color-neutral-600: #525E6D;
  --color-neutral-700: #3D4754;
  --color-neutral-800: #2A323D;
  --color-neutral-900: #1A2028;

  /* Background Colors - Softer, no pure white */
  --bg-primary: #F5F6F7;
  --bg-secondary: #EAECEF;
  --bg-tertiary: #DFE2E6;
  --bg-card: #F8F9FA;
  --bg-elevated: #FAFBFC;
  --bg-overlay: rgba(26, 32, 40, 0.6);

  /* Text Colors */
  --text-primary: var(--color-neutral-700);
  --text-secondary: var(--color-neutral-600);
  --text-tertiary: var(--color-neutral-500);
  --text-inverse: #F5F6F7;
  --text-link: var(--color-primary);
  --text-link-hover: var(--color-primary-dark);

  /* Border Colors */
  --border-light: var(--color-neutral-200);
  --border-default: var(--color-neutral-300);
  --border-focus: var(--color-primary);

  /* Shadows - Soft and subtle */
  --shadow-xs: 0 1px 2px rgba(26, 32, 40, 0.04);
  --shadow-sm: 0 1px 3px rgba(26, 32, 40, 0.06), 0 1px 2px rgba(26, 32, 40, 0.04);
  --shadow-md: 0 4px 6px rgba(26, 32, 40, 0.06), 0 2px 4px rgba(26, 32, 40, 0.04);
  --shadow-lg: 0 10px 15px rgba(26, 32, 40, 0.06), 0 4px 6px rgba(26, 32, 40, 0.04);
  --shadow-xl: 0 20px 25px rgba(26, 32, 40, 0.08), 0 8px 10px rgba(26, 32, 40, 0.04);
  --shadow-focus: 0 0 0 3px rgba(74, 144, 226, 0.25);
  --shadow-focus-error: 0 0 0 3px rgba(208, 2, 27, 0.25);

  /* Spacing Scale */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-10: 2.5rem;  /* 40px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */

  /* Border Radius */
  --radius-sm: 0.375rem;   /* 6px */
  --radius-md: 0.5rem;     /* 8px */
  --radius-lg: 0.75rem;    /* 12px */
  --radius-xl: 1rem;       /* 16px */
  --radius-2xl: 1.5rem;    /* 24px */
  --radius-full: 9999px;

  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-heading: var(--font-family);

  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */
  --font-size-4xl: 2.25rem;   /* 36px */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* Z-index Scale */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;

  /* ── Safe-area insets — ALWAYS go through these, never `env(safe-area-inset-*)` directly ──
     The four vars normally just forward the platform's own insets. The reason for the
     indirection is the native Android app: MainActivity.ApplySystemBarInsets pads the
     BlazorWebView's host view by the system-bar + display-cutout insets, so the WebView
     already sits entirely inside the safe area — but it does NOT consume the window insets,
     so Chromium keeps reporting env(safe-area-inset-bottom) = the navigation-bar height to
     the page. Every rule that added it a second time doubled up; on the bottom nav that was a
     full 48dp band of dead space under the labels.
     The MAUI host page stamps data-native-platform="android" on <html> (see the MAUI
     wwwroot/index.html), which zeroes them below: on Android the *native* layer owns insets.
     iOS is deliberately untouched — WKWebView gets no native padding and genuinely needs env(),
     and so does the browser/PWA on every platform, Android Chrome included. */
  --sai-top: env(safe-area-inset-top, 0px);
  --sai-right: env(safe-area-inset-right, 0px);
  --sai-bottom: env(safe-area-inset-bottom, 0px);
  --sai-left: env(safe-area-inset-left, 0px);

  /* Mobile Navigation Height */
  --nav-height-mobile: 4rem;
  /* Screen space the fixed bottom nav actually occupies. The nav is
     --nav-height-mobile tall PLUS the home-indicator inset it pads itself with
     (iOS standalone PWA: 34px; 0 elsewhere). Anything anchored above the bottom
     nav — FABs, toasts, content padding — must clear THIS, not the bare height,
     or it renders underneath the nav on iPhone. */
  --nav-height-mobile-total: calc(var(--nav-height-mobile) + var(--sai-bottom));
  --nav-height-desktop: 3.5rem;
  --sidebar-width: 260px;

  /* Height of the sticky mobile header (.mobile-header). Full-screen surfaces that
     sit below it as `position: fixed` overlays (Ask AI, chat, org chat, onboarding)
     must offset by THIS, never by a hard-coded 3.75rem: in the native app
     .mobile-header-native adds a status-bar inset on top of the base height, and the
     height also moves with the user's font scale. The real measured value is
     published on <html> by appLayout.observeHeaderHeight (js/layout.js) — the value
     here is only the pre-measurement fallback (content padding + 2.25rem brand icon). */
  --mobile-header-height: 3.75rem;

  /* Floating action button. --fab-height must match the .fab rule in
     FabButton.razor.css (which reads this var, so the two cannot drift).
     --fab-clearance is the vertical space the FAB steals from the bottom of the
     viewport: its own height plus the gap it is anchored above the bottom nav
     with. Content that would otherwise end underneath the FAB reserves it with
     the .has-fab utility below. */
  --fab-height: 3.5rem;
  --fab-clearance: calc(var(--fab-height) + var(--space-6));
}

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

html {
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--text-primary);
  background-color: var(--bg-secondary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--text-primary);
  margin-top: 0;
  margin-bottom: var(--space-3);
}

h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }
h5 { font-size: var(--font-size-base); }
h6 { font-size: var(--font-size-sm); }

@media (min-width: 768px) {
  h1 { font-size: var(--font-size-4xl); }
  h2 { font-size: var(--font-size-3xl); }
  h3 { font-size: var(--font-size-2xl); }
}

p {
  margin-top: 0;
  margin-bottom: var(--space-4);
}

a {
  color: var(--text-link);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--text-link-hover);
  text-decoration: underline;
}

h1:focus, h2:focus, h3:focus {
  outline: none;
}

/* Focus States */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* --------------------------------------------
   Bootstrap Overrides
   -------------------------------------------- */

/* Buttons */
.btn {
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  transition: all var(--transition-base);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  line-height: 1.5;
}

.btn:focus, .btn:active:focus {
  box-shadow: var(--shadow-focus);
}

.btn-primary {
  color: var(--text-inverse);
  background-color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.btn-primary:hover, .btn-primary:focus {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--text-inverse);
}

.btn-primary:active {
  background-color: var(--color-primary-darker);
  border-color: var(--color-primary-darker);
}

.btn-secondary {
  color: var(--text-inverse);
  background-color: var(--color-secondary);
  border: 1px solid var(--color-secondary);
}

.btn-secondary:hover, .btn-secondary:focus {
  background-color: var(--color-secondary-dark);
  border-color: var(--color-secondary-dark);
  color: var(--text-inverse);
}

.btn-success {
  color: var(--text-inverse);
  background-color: var(--color-success-dark);
  border: 1px solid var(--color-success-dark);
}

.btn-success:hover, .btn-success:focus {
  background-color: var(--color-success-dark);
  border-color: var(--color-success-dark);
  color: var(--text-inverse);
}

.btn-danger {
  color: var(--text-inverse);
  background-color: var(--color-error);
  border: 1px solid var(--color-error);
}

.btn-danger:hover, .btn-danger:focus {
  background-color: var(--color-error-dark);
  border-color: var(--color-error-dark);
  color: var(--text-inverse);
}

.btn-info {
  color: var(--text-inverse);
  background-color: var(--color-info);
  border: 1px solid var(--color-info);
}

.btn-info:hover, .btn-info:focus {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--text-inverse);
}

.btn-warning {
  color: var(--text-primary);
  background-color: var(--color-warning);
  border: 1px solid var(--color-warning);
}

.btn-warning:hover, .btn-warning:focus {
  background-color: var(--color-secondary-dark);
  border-color: var(--color-secondary-dark);
}

.btn-outline-primary {
  color: var(--color-primary);
  background-color: transparent;
  border: 1px solid var(--color-primary);
}

.btn-outline-primary:hover, .btn-outline-primary:focus {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--text-inverse);
}

.btn-outline-secondary {
  color: var(--color-secondary-dark);
  background-color: transparent;
  border: 1px solid var(--color-secondary);
}

.btn-outline-secondary:hover, .btn-outline-secondary:focus {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--text-inverse);
}

.btn-outline-success {
  color: var(--color-success-dark);
  background-color: transparent;
  border: 1px solid var(--color-success);
}

.btn-outline-success:hover, .btn-outline-success:focus {
  background-color: var(--color-success);
  border-color: var(--color-success);
  color: var(--text-inverse);
}

.btn-outline-danger {
  color: var(--color-error);
  background-color: transparent;
  border: 1px solid var(--color-error);
}

.btn-outline-danger:hover, .btn-outline-danger:focus {
  background-color: var(--color-error);
  border-color: var(--color-error);
  color: var(--text-inverse);
}

.btn-outline-info {
  color: var(--color-info);
  background-color: transparent;
  border: 1px solid var(--color-info);
}

.btn-outline-info:hover, .btn-outline-info:focus {
  background-color: var(--color-info);
  border-color: var(--color-info);
  color: var(--text-inverse);
}

.btn-link {
  color: var(--text-link);
  background: none;
  border: none;
  padding: 0;
  font-weight: var(--font-weight-medium);
}

.btn-link:hover {
  color: var(--text-link-hover);
  text-decoration: underline;
}

/* Large Buttons */
.btn-lg {
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-lg);
  border-radius: var(--radius-lg);
}

/* Small Buttons */
.btn-sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-sm);
}

/* Cards */
.card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
  overflow: hidden;
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.card-body {
  padding: var(--space-5);
}

@media (min-width: 768px) {
  .card-body {
    padding: var(--space-6);
  }
}

.card-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-2);
  color: var(--text-primary);
}

.card-text {
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

/* Card Variants */
.card.border-primary {
  border-color: var(--color-primary-light);
  border-left-width: 4px;
}

.card.border-success {
  border-color: var(--color-success-light);
  border-left-width: 4px;
}

.card.border-info {
  border-color: var(--color-info-light);
  border-left-width: 4px;
}

.card.border-warning {
  border-color: var(--color-warning-light);
  border-left-width: 4px;
}

.card.border-danger {
  border-color: var(--color-error-light);
  border-left-width: 4px;
}

/* Interactive Card */
.card-interactive {
  cursor: pointer;
}

.card-interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.card-interactive:active {
  transform: translateY(0);
}

/* Forms */
.form-control, .form-select {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  width: 100%;
}

.form-control:focus, .form-select:focus {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
  outline: none;
}

.form-control::placeholder {
  color: var(--text-tertiary);
}

.form-control:disabled, .form-select:disabled {
  background-color: var(--bg-tertiary);
  color: var(--text-tertiary);
  cursor: not-allowed;
}

.form-label {
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
  display: block;
}

.form-text {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  margin-top: var(--space-1);
}

/* Floating Labels */
.form-floating > .form-control,
.form-floating > .form-select {
  height: calc(3.5rem + 2px);
  padding: 1rem var(--space-4);
}

.form-floating > label {
  color: var(--text-tertiary);
  padding: 1rem var(--space-4);
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
  color: var(--color-primary);
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
  color: transparent;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
  color: var(--text-tertiary);
}

/* Checkbox & Radio */
.form-check-input {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--border-default);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.form-check-input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.form-check-input:focus {
  box-shadow: var(--shadow-focus);
  border-color: var(--color-primary);
}

.form-check-input[type="radio"] {
  border-radius: var(--radius-full);
}

.form-check-label {
  color: var(--text-primary);
  cursor: pointer;
}

/* Validation States */
.is-valid, .valid.modified:not([type=checkbox]) {
  border-color: var(--color-success) !important;
  outline: none;
}

.is-valid:focus, .valid.modified:not([type=checkbox]):focus {
  box-shadow: 0 0 0 3px rgba(126, 211, 33, 0.25) !important;
}

.is-invalid, .invalid {
  border-color: var(--color-error) !important;
  outline: none;
}

.is-invalid:focus, .invalid:focus {
  box-shadow: var(--shadow-focus-error) !important;
}

.valid-feedback {
  color: var(--color-success-dark);
  font-size: var(--font-size-sm);
}

.invalid-feedback, .validation-message {
  color: var(--color-error);
  font-size: var(--font-size-sm);
  margin-top: var(--space-1);
}

/* Alerts */
.alert {
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  border: none;
  font-size: var(--font-size-sm);
}

.alert-primary {
  background-color: var(--color-primary-lightest);
  color: var(--color-primary-darker);
}

.alert-secondary {
  background-color: var(--color-secondary-lightest);
  color: var(--color-secondary-darker);
}

.alert-success {
  background-color: var(--color-success-lightest);
  color: var(--color-success-darker);
}

.alert-danger {
  background-color: var(--color-error-lightest);
  color: var(--color-error-darker);
}

.alert-warning {
  background-color: var(--color-warning-lightest);
  color: var(--color-secondary-darker);
}

.alert-info {
  background-color: var(--color-info-lightest);
  color: var(--color-primary-darker);
}

.alert-link {
  font-weight: var(--font-weight-semibold);
  color: inherit;
  text-decoration: underline;
}

/* Badges */
.badge {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-xs);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
}

.bg-primary {
  background-color: var(--color-primary) !important;
}

.bg-secondary {
  background-color: var(--color-secondary) !important;
}

.bg-success {
  background-color: var(--color-success) !important;
}

.bg-danger {
  background-color: var(--color-error) !important;
}

.bg-warning {
  background-color: var(--color-warning) !important;
  color: var(--text-primary) !important;
}

.bg-info {
  background-color: var(--color-info) !important;
}

/* Text Colors */
.text-primary {
  color: var(--color-primary) !important;
}

.text-secondary {
  color: var(--color-secondary) !important;
}

.text-success {
  color: var(--color-success) !important;
}

.text-danger {
  color: var(--color-error) !important;
}

.text-warning {
  color: var(--color-warning) !important;
}

.text-info {
  color: var(--color-info) !important;
}

.text-muted {
  color: var(--text-secondary) !important;
}

/* Spinner */
.spinner-border {
  color: var(--color-primary);
}

.spinner-border-sm {
  width: 1rem;
  height: 1rem;
}

/* Tables */
.table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: var(--bg-tertiary);
  --bs-table-hover-bg: var(--color-primary-lightest);
  border-color: var(--border-light);
}

.table > thead {
  background-color: var(--bg-tertiary);
}

.table > thead > tr > th {
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  border-bottom-width: 1px;
}

.table > tbody > tr > td {
  vertical-align: middle;
  padding: var(--space-3) var(--space-4);
}

/* Modals */
.modal-content {
  border: none;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
}

.modal-header {
  border-bottom: 1px solid var(--border-light);
  padding: var(--space-5) var(--space-6);
}

.modal-title {
  font-weight: var(--font-weight-semibold);
}

.modal-body {
  padding: var(--space-6);
}

.modal-footer {
  border-top: 1px solid var(--border-light);
  padding: var(--space-4) var(--space-6);
  gap: var(--space-2);
}

.btn-close:focus {
  box-shadow: var(--shadow-focus);
}

/* Dropdowns */
.dropdown-menu {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
}

.dropdown-item {
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  color: var(--text-primary);
  transition: background-color var(--transition-fast);
}

.dropdown-item:hover, .dropdown-item:focus {
  background-color: var(--color-primary-lightest);
  color: var(--color-primary-dark);
}

.dropdown-item.active, .dropdown-item:active {
  background-color: var(--color-primary);
  color: var(--text-inverse);
}

/* Tooltips */
.tooltip-inner {
  background-color: var(--color-neutral-800);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
}

/* Progress */
.progress {
  height: 0.5rem;
  border-radius: var(--radius-full);
  background-color: var(--bg-tertiary);
}

.progress-bar {
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
}

/* --------------------------------------------
   Layout Components
   -------------------------------------------- */

/* Content Area */
.content {
  padding: var(--space-4);
  padding-bottom: calc(var(--nav-height-mobile-total) + var(--space-4));
}

@media (min-width: 769px) {
  .content {
    padding: var(--space-6);
    padding-bottom: var(--space-6);
  }
}

/* Container - extend Bootstrap's container with consistent padding */
.container,
.container-fluid {
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

@media (min-width: 768px) {
  .container,
  .container-fluid {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}

/* Page Container */
.page-container {
  width: 100%;
}

/* Pages that render a <FabButton> add .has-fab so their last row of content —
   pagination, a "Load more" button, the final card — scrolls clear of the fixed
   FAB instead of ending underneath it. .content already pads for the bottom nav;
   this reserves the FAB that sits above it. */
.has-fab {
  padding-bottom: var(--fab-clearance);
}

@media (min-width: 769px) {
  /* The default FAB (MobileOnly) is hidden at this width, so nothing overlaps and
     the reservation goes away. A page whose FAB stays visible on desktop
     (MobileOnly="false") must keep the padding rather than use this class. */
  .has-fab {
    padding-bottom: 0;
  }
}

/* Page Header */
.page-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.page-header h1,
.page-header h2 {
  margin: 0;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.page-header p {
  margin: 0;
  color: var(--text-secondary);
}

.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.page-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

@media (min-width: 640px) {
  .page-header {
    justify-content: space-between;
    align-items: center;
  }
}

@media (max-width: 480px) {
  .page-actions .btn-text {
    display: none;
  }
}

/* Section */
.section {
  margin-bottom: var(--space-8);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
  gap: var(--space-3);
}

.section-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: var(--space-10) var(--space-4);
  background-color: var(--bg-primary);
  border-radius: var(--radius-xl);
  border: 2px dashed var(--border-light);
}

.empty-state-icon {
  font-size: 3rem;
  color: var(--text-tertiary);
  margin-bottom: var(--space-4);
}

.empty-state-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.empty-state-text {
  color: var(--text-secondary);
  margin-bottom: var(--space-6);
  max-width: 24rem;
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------
   Utility Classes
   -------------------------------------------- */

/* Spacing */
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }

/* Border Radius */
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-full { border-radius: var(--radius-full); }

/* Shadows */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* --------------------------------------------
   Loading & Error States
   -------------------------------------------- */

/* The fatal-error screen. Blazor reveals #blazor-error-ui by setting an inline
   `display: block` — that inline style always wins, so this element can never be the flex
   container. Centring happens on .lc-fatal inside it. The contents are built by
   js/fatal-error.js; see that file for the capture points. */
#blazor-error-ui {
  color-scheme: light only;
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-tooltip);
  overflow-y: auto;
  box-sizing: border-box;
  background: var(--bg-secondary);
  color: var(--text-primary);
}

/* The app underneath is dead; stop it scrolling behind the screen. */
html.lc-fatal-open,
html.lc-fatal-open body {
  overflow: hidden;
}

.lc-fatal {
  box-sizing: border-box;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--space-6) + var(--sai-top)) calc(var(--space-4) + var(--sai-right))
           calc(var(--space-6) + var(--sai-bottom)) calc(var(--space-4) + var(--sai-left));
}

.lc-fatal-card {
  box-sizing: border-box;
  width: 100%;
  max-width: 26rem;
  min-width: 0;
  text-align: center;
  background: var(--bg-primary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-8) var(--space-5);
}

.lc-fatal-icon {
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto var(--space-5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-warning-lightest);
  color: var(--color-secondary-dark);
}

.lc-fatal-icon svg {
  width: 1.75rem;
  height: 1.75rem;
}

.lc-fatal-title {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.lc-fatal-body {
  margin: 0 0 var(--space-6);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--text-secondary);
}

/* Full-width and 48px tall: the primary (often only) action on a screen the user reaches
   while already frustrated, and a comfortable thumb target on the smallest phone. */
.lc-fatal-action {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-height: 3rem;
  padding: var(--space-3) var(--space-5);
  border: none;
  border-radius: var(--radius-lg);
  background: var(--color-primary);
  color: var(--text-inverse);
  font-family: inherit;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.lc-fatal-action:hover,
.lc-fatal-action:focus {
  background: var(--color-primary-dark);
  color: var(--text-inverse);
  text-decoration: none;
}

.lc-fatal-hint {
  margin: var(--space-4) 0 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--text-secondary);
}

/* Deliberately not the exception text: a .NET message can carry a child's name or other
   Article 9 data. The reference correlates with the App Insights entry instead, so support
   can find the real error without it ever being rendered on a shared screen. */
.lc-fatal-reference {
  margin: var(--space-5) 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-neutral-500);
}

/* Overrides the global amber <code> chip: this is a support reference, not a highlight, and
   the amber belongs to the warning icon alone. */
.lc-fatal-reference-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: inherit;
  color: var(--color-neutral-600);
  background-color: var(--color-neutral-100);
  word-break: break-all;
}

@media (min-width: 480px) {
  .lc-fatal-card {
    padding: var(--space-8) var(--space-8);
  }

  .lc-fatal-action {
    display: inline-block;
    width: auto;
    min-width: 12rem;
  }
}

.blazor-error-boundary {
  background: var(--color-error);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-lg);
  color: var(--text-inverse);
}

.blazor-error-boundary::after {
  content: "An error has occurred.";
}

/* NOTE: the boot screen's .loading-progress / .loading-progress-text styles used to live
   here as well (leftovers from the Blazor template). They fought the inline critical CSS in
   LuniCare.Web/wwwroot/index.html — that block never resets `inset`, so the stale
   `inset: 30vh 0 auto 0` survived and pushed the progress ring 30vh below the rest of the
   splash while the percentage text drifted to the middle of the viewport. The boot screen
   owns those styles now; don't reintroduce them here. */

/* Loading Skeleton */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-neutral-200) 25%,
    var(--color-neutral-100) 50%,
    var(--color-neutral-200) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-text {
  height: 1rem;
  margin-bottom: var(--space-2);
}

.skeleton-title {
  height: 1.5rem;
  width: 60%;
  margin-bottom: var(--space-3);
}

.skeleton-avatar {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-full);
}

.skeleton-card {
  height: 8rem;
}

/* --------------------------------------------
   Icons (Bootstrap Icons support)
   -------------------------------------------- */

.bi {
  display: inline-block;
  vertical-align: -0.125em;
}

/* Icon Colors */
.bi.text-primary { color: var(--color-primary); }
.bi.text-secondary { color: var(--color-secondary); }
.bi.text-success { color: var(--color-success); }
.bi.text-danger { color: var(--color-error); }
.bi.text-warning { color: var(--color-warning); }
.bi.text-info { color: var(--color-info); }

/* Icon Sizes */
.icon-sm { font-size: 1rem; }
.icon-md { font-size: 1.5rem; }
.icon-lg { font-size: 2rem; }
.icon-xl { font-size: 3rem; }

/* --------------------------------------------
   Responsive Utilities
   -------------------------------------------- */

/* Hide on mobile */
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
}

/* Hide on desktop */
@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
}

/* Safe area padding for iOS */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .safe-area-bottom {
    padding-bottom: var(--sai-bottom);
  }
}

/* --------------------------------------------
   Code Styling
   -------------------------------------------- */

code {
  color: var(--color-secondary-dark);
  background-color: var(--color-secondary-lightest);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: 0.875em;
}

pre {
  background-color: var(--color-neutral-800);
  color: var(--color-neutral-100);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  overflow-x: auto;
}

pre code {
  background: none;
  color: inherit;
  padding: 0;
}

/* --------------------------------------------
   Animation Utilities
   -------------------------------------------- */

.fade-in {
  animation: fadeIn var(--transition-slow) ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.slide-up {
  animation: slideUp var(--transition-slow) ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Smooth transitions for interactive elements */
.transition-all {
  transition: all var(--transition-base);
}

.transition-colors {
  transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base);
}

/* Hover lift effect */
.hover-lift {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* ─── Modal ────────────────────────────────────────────────────────────────── */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

/* Custom confirm/alert dialog — scoped to .modal-overlay only.
   Bootstrap modals use .modal > .modal-dialog and are NOT affected. */
.modal-overlay .modal-dialog {
  pointer-events: auto;
  background: var(--bg-primary);
  border-radius: var(--radius-xl, 1rem);
  box-shadow: var(--shadow-xl);
  width: min(360px, calc(100vw - 2rem));
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}

.modal-overlay .modal-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6) var(--space-4);
  border-bottom: 1px solid var(--border-light);
}

.modal-icon {
  color: var(--color-primary);
  flex-shrink: 0;
}

.modal-overlay .modal-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0;
}

.modal-overlay .modal-body {
  padding: var(--space-5) var(--space-6);
}

.modal-overlay .modal-body p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.modal-overlay .modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6) var(--space-5);
  border-top: 1px solid var(--border-light);
}

.modal-btn {
  padding: var(--space-2) var(--space-5);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.modal-btn-cancel {
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

.modal-btn-cancel:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.modal-btn-confirm {
  background: var(--color-error, #dc2626);
  color: #ffffff;
}

.modal-btn-confirm:hover {
  background: var(--color-error-dark, #b91c1c);
}

/* ─── PWA Install Modal ─────────────────────────────────────────────────────── */

/* Override overlay: clicks on the backdrop do NOT close this modal */
.pwa-install-modal-overlay {
  cursor: default;
  /* Explicitly pin centering in case any inherited flex context shifts alignment */
  align-items: center;
  justify-content: center;
}

.pwa-install-modal {
  pointer-events: auto;
  background: var(--bg-primary);
  border-radius: var(--radius-xl, 1rem);
  box-shadow: var(--shadow-xl);
  width: min(420px, calc(100vw - 2rem));
  /* Cap height so the modal never overflows the viewport and loses its centering */
  max-height: calc(100dvh - 2rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: fixed;
  top: 0.5rem;
}

/* Hero banner */
.pwa-install-modal__hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  padding: var(--space-8) var(--space-6) var(--space-7);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: var(--space-4);
  margin: -1rem;
}

.pwa-install-modal__hero-ring {
  width: 70px;
  height: 70px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.18);
  border: 2.5px solid rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  margin: 0.5rem
}

.pwa-install-modal__hero-icon {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  display: block;
}

/* Body */
.pwa-install-modal__body {
  padding: var(--space-6) var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow-y: auto; /* scroll body content on very small screens */
}

.pwa-install-modal__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: #fff;
  margin: 0;
  text-align: center;
}

.pwa-install-modal__tagline {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0 0 var(--space-5);
}

/* Benefits list */
.pwa-install-modal__benefits {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  text-align: left;
}

.pwa-install-modal__benefits li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

.pwa-install-modal__benefit-icon {
  font-size: 1.15rem;
  flex-shrink: 0;
  margin-top: 0.05rem;
}

/* Install button */
.pwa-install-modal__install-btn {
  width: 100%;
  padding: var(--space-3) var(--space-5);
  font-size: var(--font-size-base);
  border-radius: var(--radius-md);
  gap: var(--space-2);
}

/* "Not now" ghost link */
.pwa-install-modal__not-now {
  margin-top: var(--space-3);
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast);
}

.pwa-install-modal__not-now:hover {
  color: var(--text-secondary);
}

.pwa-install-modal__not-now:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Skip confirm button (in confirm-skip phase) */
.pwa-install-modal__skip-confirm-btn {
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

.pwa-install-modal__skip-confirm-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

/* Install spinner */
.pwa-install-modal__spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: pwa-spin 0.7s linear infinite;
  flex-shrink: 0;
}

@keyframes pwa-spin {
  to { transform: rotate(360deg); }
}

/* When the guide is shown, left-align its content */
.pwa-install-modal__body .install-guide {
  width: 100%;
  text-align: left;
}

.auth-img-loading,
.auth-img-error {
  display: inline-block;
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

/* =============================================================================
   Safe-area insets — iOS notch / Dynamic Island and Android nav bar
   Required when the host sets viewport-fit=cover (both WASM and MAUI)
   ============================================================================= */
html, body {
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
}

/* Native Android: the host Activity already inset the WebView (MainActivity.ApplySystemBarInsets),
   so the page must not inset itself as well. Zeroing the --sai-* vars here is the single switch
   that turns off every safe-area rule in the app at once — see the definitions in :root.
   Stamped by the MAUI host page, so a browser/PWA on Android is unaffected. */
:root[data-native-platform="android"] {
    --sai-top: 0px;
    --sai-right: 0px;
    --sai-bottom: 0px;
    --sai-left: 0px;
}

/* Mobile header: push below status bar on notched devices */
.mobile-header-native {
    padding-top: max(var(--space-3, 0.75rem), var(--sai-top));
    padding-left: max(var(--space-4, 1rem), var(--sai-left));
    padding-right: max(var(--space-4, 1rem), var(--sai-right));
}

/* Bottom nav: the home-indicator inset is applied ONCE, on the fixed .bottom-nav
   wrapper in MainLayout.razor.css (which also carries .safe-area-bottom). Do NOT
   re-apply it to the inner .mobile-nav — the two paddings stack and push the nav
   ~34px taller than --nav-height-mobile-total on iPhone, which buries every FAB
   anchored above it. */

/* Main content: respect side insets in landscape */
.main-content {
    padding-left: max(0px, var(--sai-left));
    padding-right: max(0px, var(--sai-right));
}

/* =============================================================================
   Community post card — global (unscoped) because CommunityPostCard is a child
   component of OrganizationCommunityPage and CSS isolation does not pierce
   across component boundaries.
   ============================================================================= */
.comm-post__header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.comm-post__meta { flex: 1; min-width: 0; }
.comm-post__meta-top { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.comm-post__author-name { font-weight: 600; font-size: 0.95rem; }
.comm-post__author-family { color: var(--text-secondary, #6b7280); font-size: 0.85rem; }
.comm-post__time { font-size: 0.78rem; color: var(--text-tertiary, #9ca3af); display: block; margin-top: 1px; }
.comm-post__edited { font-size: 0.72rem; color: var(--text-tertiary, #9ca3af); font-style: italic; margin-left: 4px; }
.comm-post__actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.comm-post__content { line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.comm-post__content--collapsed { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; }
.comm-post__expand-btn { background: none; border: none; padding: 2px 0; margin-top: 2px; font-size: 0.82rem; color: var(--color-primary, #2563eb); cursor: pointer; font-weight: 500; }
.comm-post__images { margin-top: 8px; display: grid; gap: 4px; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); max-width: 480px; border-radius: 8px; overflow: hidden; }
.comm-post__images img { width: 100%; height: 110px; object-fit: cover; cursor: zoom-in; display: block; }
.comm-post__footer { margin-top: 10px; display: flex; gap: 12px; align-items: center; }
.comm-att-img { max-width: 100%; border-radius: 6px; margin-top: 4px; }
.community-post__attachments { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.community-attachment { font-size: 0.82rem; color: var(--color-primary, #2563eb); text-decoration: none; padding: 2px 8px; border: 1px solid var(--border-default, #d1d5db); border-radius: 4px; }
.community-attachment:hover { background: var(--bg-secondary, #f3f4f6); }
.community-footer-btn { background: none; border: none; color: var(--text-secondary, #6b7280); font-size: 0.82rem; cursor: pointer; padding: 4px 8px; border-radius: 6px; touch-action: none; user-select: none; }
.community-footer-btn:hover { background: var(--bg-secondary, #f3f4f6); color: var(--text-primary, #111827); }
.community-footer-btn--liked { color: #e11d48; font-weight: 600; }
.community-action-btn { background: none; border: none; cursor: pointer; padding: 2px 4px; font-size: 0.8rem; opacity: 0.6; }
.community-action-btn:hover { opacity: 1; }
.community-action-btn--danger:hover { color: #b91c1c; }

/* Three-dot actions menu on community posts */
.comm-post__actions { position: relative; }
.comm-post__menu-btn { font-size: 1.25rem; line-height: 1; padding: 4px 8px; opacity: 0.7; border-radius: 6px; min-width: 32px; min-height: 32px; }
.comm-post__menu-btn:hover { opacity: 1; background: var(--bg-secondary, #f3f4f6); }
.comm-post-menu__backdrop { position: fixed; inset: 0; background: transparent; z-index: 40; }
.comm-post-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 50;
    min-width: 220px;
    background: var(--bg-primary, #ffffff);
    border: 1px solid var(--border-default, #d1d5db);
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.08);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.comm-post-menu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px 12px;
    border-radius: 8px;
    text-align: left;
    color: var(--text-primary, #111827);
    font-size: 0.9rem;
    line-height: 1.2;
}
.comm-post-menu__item:hover { background: var(--bg-secondary, #f3f4f6); }
.comm-post-menu__item:disabled { opacity: 0.5; cursor: not-allowed; }
.comm-post-menu__item--danger { color: #b91c1c; }
.comm-post-menu__item--danger:hover { background: #fee2e2; }
.comm-post-menu__icon { font-size: 1.05rem; width: 22px; display: inline-flex; justify-content: center; flex-shrink: 0; }
.comm-post-menu__label { flex: 1; }

@media (max-width: 480px) {
    .comm-post-menu { min-width: 240px; }
    .comm-post-menu__item { padding: 12px 12px; font-size: 0.95rem; }
}

/* Appointment participant picker — shared by AppointmentEditor and ScheduleCreateDialog. */
.appt-participants {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.appt-participant-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    background: var(--bs-body-bg, #fff);
    cursor: pointer;
    text-align: left;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.appt-participant-row:hover {
    background: var(--bs-tertiary-bg, #f8f9fa);
}

.appt-participant-row--selected {
    border-color: var(--bs-primary, #0d6efd);
    background: color-mix(in srgb, var(--bs-primary, #0d6efd) 8%, transparent);
}

.appt-participant-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bs-secondary-bg, #e9ecef);
    font-weight: 600;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.appt-participant-name {
    flex: 1;
    font-size: 0.9375rem;
}

.appt-participant-check {
    color: var(--bs-primary, #0d6efd);
    flex-shrink: 0;
}
/* ───────────────────────── User-created social groups ───────────────────────── */
.groups-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.groups-tabs { display: flex; gap: 0.5rem; border-bottom: 1px solid var(--border-color, #e2e8f0); margin-bottom: 1rem; }
.groups-tab { background: none; border: none; padding: 0.5rem 1rem; cursor: pointer; color: var(--text-muted, #64748b); border-bottom: 2px solid transparent; }
.groups-tab--active { color: var(--primary, #2563eb); border-bottom-color: var(--primary, #2563eb); font-weight: 600; }
.groups-search { margin-bottom: 1rem; }
.groups-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.group-card { border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.75rem; padding: 1rem; cursor: pointer; transition: box-shadow 0.15s ease; background: var(--surface, #fff); text-align: left; }
.group-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }
.group-card__top { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.group-card__name { font-weight: 600; }
.group-card__desc { color: var(--text-muted, #64748b); font-size: 0.875rem; margin: 0.5rem 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.group-card__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 0.5rem; }
.group-card__members { font-size: 0.8rem; color: var(--text-muted, #64748b); }
.group-card__joined { font-size: 0.8rem; color: var(--success, #16a34a); font-weight: 600; }
.group-badge { font-size: 0.7rem; padding: 0.1rem 0.5rem; border-radius: 1rem; font-weight: 600; }
.group-badge--public { background: #dbeafe; color: #1d4ed8; }
.group-badge--private { background: #f1f5f9; color: #475569; }
.groups-empty, .groups-more { text-align: center; color: var(--text-muted, #64748b); padding: 2rem 0; }
.groups-empty__action { margin-top: 1rem; }
.group-card__new { font-size: 0.7rem; padding: 0.1rem 0.5rem; border-radius: 1rem; font-weight: 600; background: var(--primary, #2563eb); color: #fff; }

/* Cross-group activity digest */
.activity-list { display: flex; flex-direction: column; gap: 0.5rem; }
.activity-item { display: flex; gap: 0.75rem; align-items: flex-start; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.75rem; padding: 0.75rem 1rem; cursor: pointer; background: var(--surface, #fff); transition: box-shadow 0.15s ease; text-align: left; }
.activity-item:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }
.activity-item--new { border-left: 3px solid var(--primary, #2563eb); }
.activity-item__avatar { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: var(--border-color, #e2e8f0); display: flex; align-items: center; justify-content: center; }
.activity-item__avatar img { width: 100%; height: 100%; object-fit: cover; }
.activity-item__initial { font-weight: 600; color: var(--text-muted, #64748b); }
.activity-item__body { flex: 1; min-width: 0; }
.activity-item__line { font-size: 0.875rem; color: var(--text-muted, #64748b); display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; }
.activity-item__author { font-weight: 600; color: var(--text, #0f172a); }
.activity-item__group { font-weight: 600; color: var(--primary, #2563eb); }
.activity-new-pill { font-size: 0.65rem; padding: 0.05rem 0.4rem; border-radius: 1rem; font-weight: 700; background: var(--primary, #2563eb); color: #fff; text-transform: uppercase; letter-spacing: 0.03em; }
.activity-item__preview { margin: 0.25rem 0; font-size: 0.9rem; color: var(--text, #334155); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.activity-item__meta { font-size: 0.78rem; color: var(--text-muted, #94a3b8); display: flex; gap: 0.4rem; }
.group-detail__header { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; text-align: left; }
.group-detail__meta { display: flex; gap: 0.75rem; align-items: center; color: var(--text-muted, #64748b); font-size: 0.85rem; margin: 0.25rem 0; }
.group-detail__desc { color: var(--text-muted, #64748b); }
.group-composer { display: flex; gap: 0.5rem; margin-bottom: 1rem; align-items: flex-start; }
.group-composer textarea { flex: 1; }
.group-post { border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.75rem; padding: 1rem; margin-bottom: 0.75rem; background: var(--surface, #fff); }
.group-post--hidden { opacity: 0.6; }
.group-post__head { display: flex; gap: 0.5rem; align-items: center; }
.group-post__time { font-size: 0.75rem; color: var(--text-muted, #64748b); }
.group-post__body { margin: 0.5rem 0; white-space: pre-wrap; }
.group-post__actions { display: flex; gap: 1rem; }
.group-pill { font-size: 0.7rem; background: #fef3c7; color: #92400e; padding: 0.05rem 0.45rem; border-radius: 1rem; }
.link-btn { background: none; border: none; color: var(--primary, #2563eb); cursor: pointer; padding: 0; font-size: 0.85rem; }
.link-btn--danger { color: var(--danger, #dc2626); }
.group-comments { margin-top: 0.75rem; border-top: 1px solid var(--border-color, #e2e8f0); padding-top: 0.5rem; text-align: left; }
.group-comment { font-size: 0.875rem; margin-bottom: 0.35rem; }
.group-comment__row strong { margin-right: 0.4rem; }
.group-comment__action { margin-left: 0.5rem; font-size: 0.75rem; opacity: 0.6; }
.group-comment__row:hover .group-comment__action { opacity: 1; }
.group-comment__hidden { margin-left: 0.5rem; font-size: 0.75rem; color: var(--text-muted, #64748b); font-style: italic; }
.group-comment--reply { margin-left: 1.25rem; padding-left: 0.6rem; border-left: 2px solid var(--border-color, #e2e8f0); }
.group-comment__replies { margin-top: 0.35rem; }
.group-comment-add { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.group-comment-add--reply { margin-left: 1.25rem; margin-bottom: 0.5rem; }
.group-comment-add input { flex: 1; }
.group-chat { display: flex; flex-direction: column; height: 60vh; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.75rem; overflow: hidden; }
.group-chat__messages { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.group-chat__msg { max-width: 70%; padding: 0.5rem 0.75rem; border-radius: 0.75rem; background: #f1f5f9; align-self: flex-start; }
.group-chat__msg--mine { align-self: flex-end; background: #dbeafe; }
.group-chat__sender { display: block; font-size: 0.7rem; color: var(--text-muted, #64748b); }
.group-chat__compose { display: flex; gap: 0.5rem; padding: 0.75rem; border-top: 1px solid var(--border-color, #e2e8f0); }
.group-chat__compose input { flex: 1; }
.group-members__actions { display: flex; gap: 0.75rem; }
.group-settings h3 { margin-top: 1.5rem; }
.group-invite { display: flex; gap: 0.5rem; max-width: 480px; }
.group-invite input { flex: 1; }
.group-invite__link { font-size: 0.85rem; word-break: break-all; }
.group-bans { list-style: none; padding: 0; }
.group-bans li { display: flex; justify-content: space-between; padding: 0.35rem 0; border-bottom: 1px solid var(--border-color, #e2e8f0); }
.group-field { display: block; margin-bottom: 1rem; }
.group-field > span { display: block; font-weight: 600; margin-bottom: 0.35rem; }
.group-radio { display: flex; gap: 0.5rem; align-items: center; font-weight: 400; margin: 0.25rem 0; }
.group-modal__actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }
.group-invite-card { max-width: 480px; margin: 2rem auto; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.75rem; padding: 1.5rem; background: var(--surface, #fff); }
.group-invite-card__desc { color: var(--text-muted, #64748b); }
.group-invite__sent { color: var(--success, #16a34a); font-size: 0.875rem; }
.group-composer--rich { flex-direction: column; align-items: stretch; }
.group-composer__actions { display: flex; justify-content: flex-end; gap: 0.5rem; }

/* Association landing-page member-discount callout (/foreninger/*) — shown only when an
   AssociationOffers promo is active. */
.perk-promo {
    display: inline-block;
    margin: var(--space-4, 1rem) 0 var(--space-2, 0.5rem);
    padding: var(--space-3, 0.75rem) var(--space-5, 1.5rem);
    background-color: var(--color-primary-lightest, #DCE9F7);
    color: var(--color-primary-dark, #1f4f86);
    border-radius: var(--radius-lg, 0.75rem);
    font-weight: var(--font-weight-semibold, 600);
}

/* Member-discount offer badge in the association hero (/foreninger/*) — a high-contrast amber
   pill that pops against the pale hero gradient, putting the discount at the decision point
   right above the sign-up button. Paired with a "Save X%" button label and a code sub-note. */
.offer-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  margin: 0 auto var(--space-5, 1.25rem);
  padding: var(--space-2, 0.5rem) var(--space-5, 1.5rem);
  background-color: var(--color-success-lightest);
  color: var(--color-success-dark);
  border-radius: var(--radius-full, 9999px);
  font-size: var(--font-size-base, 1rem);
  font-weight: var(--font-weight-bold, 700);
  line-height: 1.3;
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.18));
}

.offer-badge svg { flex-shrink: 0; }

/* When the badge is a link (hero → plans jump on the /foreninger/* pages),
   keep the badge look and add a gentle interactive affordance. */
a.offer-badge {
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

a.offer-badge:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg, 0 8px 18px rgba(0, 0, 0, 0.22));
}

/* Locked (non-standard) event type in the logging picker — e.g. Starter after the trial ends. */
.event-type-option.locked { opacity: 0.6; }
.option-lock-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-top: 0.25rem;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--color-primary, #4A90E2);
}

/* Banner: custom/imported event types will lock when the trial ends (Starter), or are locked now. */
.event-type-lock-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--color-primary-lightest, #DCE9F7);
    background: var(--color-primary-lightest, #DCE9F7);
    color: var(--color-primary-dark, #1f4f86);
    border-radius: var(--radius-lg, 0.75rem);
    font-size: 0.9rem;
}
.event-type-lock-banner button { white-space: nowrap; }