@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Light theme (readability-first) */
  --cv-bg: #F7F8FA;
  --cv-card-bg: #FFFFFF;
  --cv-border: #E5E7EB;

  /* Text (readability first) */
  --cv-text: #111827;
  --cv-muted: #475569;
  --cv-heading: #111827;

  /* Brand colors (from new logo) */
  --cv-primary: #2FA4A9;
  --cv-primary-contrast: #FFFFFF;
  --cv-accent: #2FA4A9;
  --cv-link: #2FA4A9;
  --cv-focus: #2FA4A9;

  /* Structural navy (NOT for body text) */
  --cv-surface-navy: #0F1C24;
  --cv-surface-navy-contrast: #F7F8FA;

  /* Accent gold (decorative only) */
  --cv-accent-gold: #D7B27A;

  /* Status colors */
  --cv-danger: #DC2626;
  --cv-danger-bg: #FEF2F2;
  --cv-success: #16A34A;
  --cv-success-bg: #F0FDF4;
  --cv-warning: #D97706;
  --cv-warning-bg: #FFFBEB;

  /* Derived / internal */
  --cv-surface: #FFFFFF;
  --cv-hover: rgba(17,24,39,0.04);
  --cv-accent-bg: rgba(47,164,169,0.08);
  --cv-shadow: rgba(0,0,0,0.08);

  /* Legacy mappings (for backward compatibility) */
  --color-primary: #0F1C24;
  --color-primary-hover: #1E2933;
  --color-secondary: #2FA4A9;
  --color-secondary-hover: #259295;
  --color-text: #111827;
  --color-bg: #F7F8FA;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--cv-bg);
  color: var(--cv-text);
  line-height: 1.6;
}

.shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 240px;
  padding: 20px;
  background: var(--cv-bg);
  color: var(--cv-text);
  flex-shrink: 0;
}

.sidebar h2 {
  margin: 0 0 24px 0;
  font-size: 18px;
  color: var(--cv-text);
}

.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar nav a {
  display: block;
  padding: 10px 12px;
  color: var(--cv-muted);
  text-decoration: none;
  border-radius: 6px;
  transition: background-color 0.2s, color 0.2s;
}

.sidebar nav a:hover {
  background: var(--cv-hover);
  color: var(--cv-text);
}

.sidebar nav a.active {
  background: var(--cv-accent-bg);
  color: var(--cv-text);
  font-weight: 600;
  border-left: 3px solid var(--cv-accent);
  margin-left: -3px;
}

.sidebar .status {
  margin-top: 24px;
  padding: 12px;
  background: var(--cv-surface);
  border-radius: 6px;
  font-size: 13px;
  color: var(--cv-muted);
}

.content {
  flex: 1;
  padding: 32px 40px;
  min-width: 0;
  max-width: 960px;
  margin: 0 auto;
}

@media (min-width: 1200px) {
  .content {
    padding: 40px 60px;
  }
}

.container {
  width: 100%;
  max-width: 520px;
  text-align: center;
}

.page-header {
  margin-bottom: 32px;
}

h1 {
  font-size: 32px;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 12px 0;
}

h2 {
  font-size: 26px;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 12px 0;
}

h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0 0 16px 0;
  text-align: left;
}

.tagline {
  font-size: 16px;
  color: #6c757d;
  margin: 0;
}

p {
  font-size: 16px;
  color: var(--cv-muted);
  margin: 0 0 28px 0;
}

.section {
  margin-bottom: 24px;
}

.card {
  background: var(--cv-surface);
  padding: 28px 32px;
  border-radius: 12px;
  border: 1px solid var(--cv-border);
  box-shadow: 0 10px 30px var(--cv-shadow);
  text-align: left;
  margin-bottom: 24px;
  color: var(--cv-text);
}

.card:last-child {
  margin-bottom: 0;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--cv-text);
  margin: 0 0 20px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--cv-border);
}

.status-indicator {
  font-size: 15px;
  padding: 14px 18px;
  border-radius: 8px;
  text-align: center;
}

.hint-text {
  font-size: 0.9rem;
  color: #6c757d;
  font-style: italic;
  margin-bottom: 1rem;
}

#current-trusted-contact {
  scroll-margin-top: 20px;
}

.status-warning {
  background-color: #fff8e6;
  color: #8a6d3b;
  border: 1px solid #f0d58c;
}

.status-success {
  background-color: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
}

.status-badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
}

.status-ok {
  background-color: #e1f7e7;
  color: #145c2e;
}

.status-warning-badge {
  background-color: #fff4d6;
  color: #8a5b00;
}

.status-alert {
  background-color: #fde2e1;
  color: #8a1f17;
}

.btn {
  display: block;
  width: 100%;
  padding: 16px 24px;
  font-size: 16px;
  font-weight: 600;
  background-color: var(--cv-accent);
  color: var(--cv-primary-contrast);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  margin-bottom: 12px;
  transition: background-color 0.2s, transform 0.1s, filter 0.2s;
}

.btn:hover {
  filter: brightness(0.92);
}

.btn:active {
  transform: scale(0.99);
}

.btn:last-child {
  margin-bottom: 0;
}

.actions {
  margin-top: 28px;
}

.back-link {
  display: inline-block;
  margin-top: 24px;
  padding: 12px 24px;
  font-size: 14px;
  color: var(--cv-accent);
  text-decoration: none;
  border: 2px solid var(--cv-accent);
  border-radius: 8px;
  transition: all 0.2s;
}

.back-link:hover {
  background-color: var(--cv-accent);
  color: var(--cv-primary-contrast);
}

label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cv-text);
}

input {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 20px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 0.2s;
}

input:focus,
select:focus {
  outline: none;
  border-color: #4CAF50;
}

select {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 20px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 16px;
  background-color: #fff;
  cursor: pointer;
}

.radio-group {
  margin-bottom: 20px;
}

.radio-option {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  margin-bottom: 10px;
  background-color: #f9f9f9;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
}

.radio-option:hover {
  background-color: #f0f7f0;
  border-color: #4CAF50;
}

.radio-option input[type="radio"] {
  width: 20px;
  height: 20px;
  margin: 0;
  margin-right: 12px;
  cursor: pointer;
}

.radio-option span {
  font-size: 16px;
  color: var(--cv-text);
}

.hint {
  font-size: 13px;
  color: var(--cv-muted);
  margin-top: -16px;
  margin-bottom: 20px;
}

.field {
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid #f0f0f0;
}

.field:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--cv-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.field-value {
  font-size: 18px;
  color: var(--cv-text);
  font-weight: 500;
}

.nav-wrapper {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 2px solid #e8ecf0;
}

.nav {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.nav-link {
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  color: #4CAF50;
  background-color: white;
  border: 1px solid #4CAF50;
  border-radius: 6px;
  transition: all 0.2s;
}

.nav-link:hover {
  background-color: #4CAF50;
  color: white;
}

.message-card {
  background: white;
  padding: 40px 32px;
  border-radius: 12px;
  border: 1px solid #e8ecf0;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  text-align: center;
}

.message-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.message-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0 0 12px 0;
}

.message-text {
  font-size: 16px;
  color: var(--cv-muted);
  margin: 0 0 24px 0;
}

.field-error {
  font-size: 14px;
  color: #c0392b;
  background-color: #fdf2f2;
  border: 1px solid #f5c6cb;
  padding: 10px 14px;
  border-radius: 6px;
  margin-top: -12px;
  margin-bottom: 16px;
}

/* Sidebar Layout */
body.with-sidebar {
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.sidebar {
  width: 240px;
  min-height: 100vh;
  background: var(--color-primary);
  color: white;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  padding: 24px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.sidebar-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: white;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  padding: 16px 0;
  flex: 1;
}

.sidebar-nav .nav-link {
  display: block;
  padding: 12px 24px;
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  font-size: 15px;
  border: none;
  border-radius: 0;
  background: transparent;
  transition: all 0.2s;
}

.sidebar-nav .nav-link:hover {
  background: rgba(255,255,255,0.1);
  color: white;
}

.sidebar-nav .nav-link.active {
  background: rgba(255,255,255,0.15);
  color: white;
  border-left: 3px solid #4CAF50;
  padding-left: 21px;
}

.main-content {
  flex: 1;
  padding: 32px 40px;
  min-height: 100vh;
  overflow-y: auto;
  max-width: 800px;
  color: var(--cv-text);
}

/* Dark theme text contrast fixes for logged-in app */
.main-content h1,
.main-content h2,
.main-content h3,
.main-content h4,
.main-content .card-title {
  color: var(--cv-heading);
}

.main-content p,
.main-content li,
.main-content .description,
.main-content .subtitle,
.main-content .hint,
.main-content .help-text,
.main-content .form-text {
  color: var(--cv-muted);
}

.main-content a:not(.btn):not(.button):not(.nav-link) {
  color: var(--cv-link);
}

.main-content a:not(.btn):not(.button):not(.nav-link):hover {
  filter: brightness(1.15);
}

.main-content label {
  color: var(--cv-text);
}

.main-content input::placeholder,
.main-content textarea::placeholder {
  color: rgba(148,163,184,0.7);
}

.main-content table,
.main-content th,
.main-content td {
  color: var(--cv-text);
}

.main-content table .muted,
.main-content table small {
  color: var(--cv-muted);
}

.main-content .container {
  max-width: 100%;
}

/* Permissions page: allow full-width content */
.permissions-page {
  width: 100%;
  max-width: 100%;
}

.main-content .permissions-page {
  width: 100%;
  max-width: 100%;
}

.permissions-page .card,
.permissions-page .panel,
.permissions-page .content-card {
  width: 100%;
  max-width: 100%;
}

.permissions-page .table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}

.permissions-page table.permissions-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.permissions-page .scope-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.permissions-page .scope-label {
  font-size: 12px;
  white-space: nowrap;
}

.permissions-page .permissions-table th:first-child,
.permissions-page .permissions-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #ffffff;
  box-shadow: 2px 0 4px rgba(0,0,0,0.05);
}

.permissions-page .permissions-table thead th:first-child {
  z-index: 4;
  background: #f9fafb;
}

@media (max-width: 640px) {
  .permissions-page .scope-label { display: none; }
  .permissions-page .scope-head { gap: 4px; }
  .permissions-page .permissions-table th,
  .permissions-page .permissions-table td {
    min-width: 44px;
    padding: 8px 6px;
  }
}

.page-footer {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid #e8ecf0;
  text-align: center;
}

.page-footer p {
  font-size: 13px;
  color: #999;
  margin: 4px 0;
}

.page-footer .build-info {
  font-size: 11px;
  color: #bbb;
}

/* Banners */
.banner {
  padding: 14px 20px;
  border-radius: 8px;
  margin-bottom: 24px;
  font-size: 14px;
}

.banner-warning {
  background: #fff8e6;
  color: #8a6d3b;
  border: 1px solid #f0d58c;
}

.banner-success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.banner-info {
  background: #d1ecf1;
  color: #0c5460;
  border: 1px solid #bee5eb;
}

/* Button group */
.button-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-secondary {
  background: transparent;
  border: 1px solid rgba(47,164,169,0.55);
  color: var(--cv-accent);
}

.btn-secondary:hover {
  background: rgba(47,164,169,0.10);
}

/* PIN input row */
.pin-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.pin-input-row input {
  flex: 1;
  min-width: 0;
}

.pin-input-row .btn {
  display: inline-block;
  width: auto;
  flex-shrink: 0;
  white-space: nowrap;
  padding: 10px 16px;
}

.btn-large {
  padding: 16px 32px;
  font-size: 18px;
}

/* Info rows */
.info-row {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.info-row:last-child {
  border-bottom: none;
}

.info-label {
  color: var(--cv-muted);
  font-size: 14px;
}

.info-value {
  color: var(--cv-text);
  font-weight: 500;
  font-size: 14px;
}

/* Status indicators */
.status-ok {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.status-danger {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.status-info {
  background: #d1ecf1;
  color: #0c5460;
  border: 1px solid #bee5eb;
}

/* Settings form */
.settings-form .form-group {
  margin-bottom: 20px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 15px;
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

.form-help {
  font-size: 13px;
  color: var(--cv-muted);
  margin-top: 6px;
}

/* Legal page */
.legal-list {
  margin: 12px 0;
  padding-left: 24px;
}

.legal-list li {
  margin-bottom: 8px;
  font-size: 14px;
  color: #555;
}

.disclaimer-box {
  background: #fff8e6;
  border: 1px solid #f0d58c;
  border-radius: 8px;
  padding: 20px;
}

.disclaimer-box p {
  margin-bottom: 12px;
}

h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-primary);
  margin: 20px 0 10px 0;
}

/* Modal overlay and floating card */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9998;
  visibility: hidden;
  pointer-events: none;
  /* NO opacity on overlay - it dims via rgba background only */
  opacity: 1;
  filter: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.modal-overlay.active {
  visibility: visible;
  pointer-events: auto;
}

.modal-card,
.modal-overlay .modal-card,
[data-modal-card] {
  background: var(--cv-card-bg, #0f172a);
  color: var(--cv-text, #F1F5F9);
  border: 1px solid var(--cv-border, #334155);
  border-radius: 16px;
  box-shadow: 0 18px 70px rgba(0, 0, 0, 0.60);
  width: 90%;
  max-width: 600px;
  max-height: min(90vh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: scale(0.95) translateY(10px);
  transition: transform 0.2s ease;
  opacity: 1;
  filter: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 9999;
}

.modal-overlay.active .modal-card {
  transform: scale(1) translateY(0);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  padding-top: calc(20px + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--cv-border, #334155);
  background: var(--cv-surface, #1e293b);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 2;
}

.modal-header h2 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--cv-text, #F1F5F9);
}

.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--cv-text, #F1F5F9);
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  border-radius: 4px;
  transition: background 0.2s, color 0.2s;
  opacity: 0.8;
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--cv-text, #F1F5F9);
  opacity: 1;
}

.modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.modal-body label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cv-text, #F1F5F9);
}

.modal-body input,
.modal-body select,
.modal-body textarea {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 16px;
  border: 1px solid var(--cv-border, #334155);
  border-radius: 6px;
  font-size: 15px;
  transition: border-color 0.2s;
  background: var(--cv-bg, #0f172a);
  color: var(--cv-text, #F1F5F9);
}

.modal-body input:focus,
.modal-body select:focus,
.modal-body textarea:focus {
  outline: none;
  border-color: var(--cv-accent, #2FA4A9);
  box-shadow: 0 0 0 3px rgba(47, 164, 169, 0.25);
}

.modal-body textarea {
  resize: vertical;
  min-height: 80px;
}

.modal-body .form-hint {
  font-size: 13px;
  color: var(--cv-muted, #94a3b8);
  margin-top: -12px;
  margin-bottom: 16px;
}

.modal-body .form-section {
  margin-bottom: 20px;
  padding: 16px;
  background: var(--cv-surface, #1e293b);
  border: 1px solid var(--cv-border, #334155);
  border-radius: 8px;
  border-left: 4px solid #4CAF50;
}

.modal-body .form-section.emergency {
  border-left-color: #ffc107;
  background: #fffbf0;
}

.modal-body .form-section.medical {
  border-left-color: #dc3545;
  background: #fff5f5;
}

.modal-body .form-section-title {
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 12px;
  font-size: 0.95rem;
}

.modal-footer {
  padding: 16px 24px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--cv-border, #334155);
  background: var(--cv-surface, #1e293b);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  z-index: 2;
}

.modal-footer .btn {
  margin: 0;
  width: auto;
  padding: 10px 24px;
  border-radius: 10px;
  font-weight: 600;
}

.modal-footer .btn-primary {
  background: var(--cv-accent, #2FA4A9);
  color: #06121a;
  font-weight: 700;
}

.modal-footer .btn-primary:hover {
  filter: brightness(1.05);
}

.modal-footer .btn-cancel {
  background: rgba(255, 255, 255, 0.06);
  color: var(--cv-text, #F1F5F9);
  border: 1px solid var(--cv-border, #334155);
}

.modal-footer .btn-cancel:hover {
  background: rgba(255, 255, 255, 0.10);
}

.modal-loading {
  text-align: center;
  padding: 40px;
  color: var(--cv-muted, #94a3b8);
}

/* Mobile top bar and hamburger menu */
.mobile-topbar {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: var(--color-primary);
  color: white;
  z-index: 900;
  padding: 0 16px;
  align-items: center;
  justify-content: space-between;
}

.mobile-topbar h1 {
  font-size: 18px;
  margin: 0;
  color: white;
}

.hamburger-btn {
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  padding: 8px;
  line-height: 1;
}

.mobile-drawer {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 950;
}

.mobile-drawer.active {
  display: block;
}

.drawer-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.drawer-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 280px;
  height: 100%;
  background: var(--color-primary);
  padding: 20px 0;
  overflow-y: auto;
}

.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.drawer-header h2 {
  margin: 0;
  font-size: 18px;
  color: white;
}

.drawer-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.8);
  font-size: 28px;
  cursor: pointer;
  line-height: 1;
}

.drawer-nav {
  display: flex;
  flex-direction: column;
  padding: 16px 0;
}

.drawer-nav a {
  display: block;
  padding: 14px 24px;
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  font-size: 16px;
  transition: all 0.2s;
}

.drawer-nav a:hover,
.drawer-nav a.active {
  background: rgba(255,255,255,0.1);
  color: white;
}

.drawer-nav a.active {
  border-left: 3px solid #4CAF50;
  padding-left: 21px;
}

/* Responsive */
@media (max-width: 768px) {
  .mobile-topbar {
    display: flex;
  }
  
  .sidebar {
    display: none;
  }
  
  .shell {
    padding-top: 56px;
  }
  
  .content {
    padding: 20px 16px;
    max-width: 100%;
  }
  
  body.with-sidebar {
    flex-direction: column;
  }
  
  .main-content {
    padding: 20px;
  }
  
  .hub-grid {
    grid-template-columns: 1fr;
    padding: 0;
  }
  
  .hub-card {
    margin: 0;
    border-radius: 8px;
  }
  
  .card {
    margin-left: 0;
    margin-right: 0;
  }
  
  .modal-card {
    width: 95%;
    max-height: min(90vh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
    border-radius: 12px;
  }
}

/* Trusted portal desktop centering */
.trusted-portal-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
}

@media (min-width: 1200px) {
  .trusted-portal-content {
    max-width: 1000px;
  }
}

/* Remove buttons in list items */
.btn-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #111827;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  width: auto;
  min-width: 90px;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-remove:hover {
  background: #f3f4f6;
}

.list-item {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 6px;
  margin-bottom: 8px;
}

.list-item input,
.list-item textarea,
.list-item select {
  flex: 1;
  min-width: 120px;
}

/* Toast Notifications */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 360px;
}

.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  animation: slideIn 0.3s ease-out;
  font-size: 14px;
  font-weight: 500;
}

.toast-success {
  background: #d1fae5;
  color: #065f46;
  border-left: 4px solid #10b981;
}

.toast-error {
  background: #fee2e2;
  color: #991b1b;
  border-left: 4px solid #ef4444;
}

.toast-info {
  background: #dbeafe;
  color: #1e40af;
  border-left: 4px solid #3b82f6;
}

.toast-warning {
  background: #fef3c7;
  color: #92400e;
  border-left: 4px solid #f59e0b;
}

.toast-close {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  opacity: 0.6;
  padding: 0;
  line-height: 1;
}

.toast-close:hover {
  opacity: 1;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* ===== App Shell Readability Lock (GO-LIVE) ===== */
body.app-shell {
  color: var(--cv-text);
}

/* Catch alternate wrappers besides .main-content */
body.app-shell .main-content,
body.app-shell .content,
body.app-shell #content,
body.app-shell main,
body.app-shell .container,
body.app-shell .page,
body.app-shell .page-content {
  color: var(--cv-text);
}

/* Headings */
body.app-shell h1,
body.app-shell h2,
body.app-shell h3,
body.app-shell h4,
body.app-shell .card-title,
body.app-shell .section-title {
  color: var(--cv-heading) !important;
}

/* Body copy */
body.app-shell p,
body.app-shell li,
body.app-shell small,
body.app-shell .muted,
body.app-shell .subtitle,
body.app-shell .description,
body.app-shell .hint,
body.app-shell .help-text,
body.app-shell .form-text {
  color: var(--cv-muted) !important;
}

/* Common dark surfaces */
body.app-shell .card,
body.app-shell .panel,
body.app-shell .tile,
body.app-shell .box {
  color: var(--cv-text) !important;
}

/* Fix dimming from opacity/filter */
body.app-shell .card *,
body.app-shell .panel *,
body.app-shell .tile *,
body.app-shell .box * {
  opacity: 1;
  filter: none;
}

/* Tables */
body.app-shell table,
body.app-shell th,
body.app-shell td {
  color: var(--cv-text) !important;
}

/* Links */
body.app-shell a {
  color: var(--cv-link) !important;
}
body.app-shell a:hover {
  filter: brightness(1.12);
}

/* Labels + placeholders */
body.app-shell label {
  color: var(--cv-text) !important;
}
body.app-shell input::placeholder,
body.app-shell textarea::placeholder {
  color: rgba(148,163,184,0.9) !important;
}

/* IMPORTANT: do NOT affect light modals */
body.app-shell .modal,
body.app-shell .modal * {
  opacity: unset;
  filter: unset;
  color: unset;
}

/* === Fix: Documents page banner button contrast === */
.documents-page .info-banner .btn,
.documents-page .info-banner a.btn,
.documents-page .info-banner button,
.documents-page .info-banner .btn-primary,
.documents-page .info-banner a {
  color: #ffffff !important;
  font-weight: 600;
}

.documents-page .info-banner .btn:hover,
.documents-page .info-banner a.btn:hover,
.documents-page .info-banner button:hover {
  filter: brightness(1.05);
}

/* ------------------------------
   GLOBAL CONTRAST FIXES (dark UI)
--------------------------------- */

/* 1) Primary action buttons on dark surfaces (Dashboard "Check In Now", etc.) */
button, .btn, .btn-primary, .primary-btn, .checkin-btn, .checkin-button, .dashboard-checkin-btn {
  font-weight: 600;
}

/* If button background is accent/teal, force readable dark text */
.btn-primary, .checkin-btn, .checkin-button, .dashboard-checkin-btn,
button[style*="background: #2FA4A9"], button[style*="background:#2FA4A9"] {
  color: #0F1C24 !important;
}

/* Also cover cases where the button inherits low-contrast text */
.btn-primary *, .checkin-btn *, .checkin-button *, .dashboard-checkin-btn * {
  color: #0F1C24 !important;
}

/* 2) Trusted Contacts cards (mobile + desktop) */
.contact-card, .trusted-card, .trusted-contact-card {
  max-width: 100%;
  overflow: hidden;
}

.contact-card .contact-email,
.trusted-card .contact-email,
.trusted-contact-card .contact-email {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Let badges wrap instead of pushing content off-screen */
.contact-card .badges,
.trusted-card .badges,
.trusted-contact-card .badges,
.contact-card .channel-badges,
.trusted-card .channel-badges,
.trusted-contact-card .channel-badges,
.contact-card .contact-channels,
.trusted-card .contact-channels,
.trusted-contact-card .contact-channels {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Fix PIN text visibility on white cards */
.pin-display .pin-label {
  color: #0F172A !important;
  font-weight: 700;
  font-size: 0.85rem;
}

.pin-display .pin-masked {
  color: #0F172A !important;
  letter-spacing: 0.12em;
}

/* When revealed, make it unmistakable */
.pin-display .pin-masked.pin-revealed {
  font-weight: 800;
  letter-spacing: 0.06em;
}

/* 3) Emergency Info modal section headings/labels contrast */
.modal-body h1, .modal-body h2, .modal-body h3,
.modal-body label, .modal-body .field-label {
  color: #0F172A !important;
  font-weight: 600;
}

.modal-body p, .modal-body .hint, .modal-body .form-hint, .modal-body small {
  color: #334155 !important;
}

/* Any text inside tinted panels in the modal should be readable */
.modal-body [style*="background"] label,
.modal-body [style*="background"] p,
.modal-body [style*="background"] span {
  color: #0F172A !important;
}

/* 4) Mobile: prevent Trusted Contacts card cutoff / horizontal clipping */
@media (max-width: 768px) {
  .contact-card, .trusted-card, .trusted-contact-card {
    border-radius: 16px;
  }

  .contact-card .contact-actions,
  .trusted-card .contact-actions,
  .trusted-contact-card .contact-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
}

/* ----------------------------------------
   MODAL READABILITY (SAFE / NARROW)
   Only targets actual dialogs/overlays
----------------------------------------- */

/* Role-based (works even if class names differ) */
[role="dialog"], [role="dialog"] * {
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}

/* Ensure readable text inside dialogs */
[role="dialog"] {
  color: #0F172A !important;
}

[role="dialog"] h1,
[role="dialog"] h2,
[role="dialog"] h3,
[role="dialog"] label {
  color: #0F172A !important;
  font-weight: 600;
}

[role="dialog"] p,
[role="dialog"] small,
[role="dialog"] .hint,
[role="dialog"] .form-hint {
  color: #334155 !important;
}

[role="dialog"] input,
[role="dialog"] textarea,
[role="dialog"] select {
  color: #0F172A !important;
}

[role="dialog"] input::placeholder,
[role="dialog"] textarea::placeholder {
  color: #64748B !important;
  opacity: 1 !important;
}

/* ----------------------------------------
   PERMISSIONS PAGE CONTRAST FIX
----------------------------------------- */

/* Make the instruction text readable on dark cards */
.permissions-page,
.permissions-page .card {
  color: var(--cv-text) !important;
}

/* Any paragraph/help text inside permissions cards should not be faint */
.permissions-page .card p,
.permissions-page .card .hint,
.permissions-page .card .tip,
.permissions-page .card small,
.permissions-page .card li {
  color: var(--cv-muted) !important;
  opacity: 1 !important;
}

/* The "By default…" line and scroll hint specifically */
.permissions-page p,
.permissions-page .table-scroll-hint,
.permissions-page .permissions-hint {
  color: var(--cv-muted) !important;
  opacity: 1 !important;
}

/* Improve contrast for the section subtitle under the H1 */
.permissions-page > p,
.permissions-page .page-subtitle {
  color: var(--cv-muted) !important;
}

/* Force card header/lead text to cv-text */
.permissions-page .card h2,
.permissions-page .card h3,
.permissions-page .card .card-title {
  color: var(--cv-text) !important;
}

/* Dashboard Check In Now button: force readable text */
.btn-checkin-now {
  color: #0F1C24 !important;
  font-weight: 700;
}

.btn-checkin-now * {
  color: #0F1C24 !important;
}

/* ================================
   MODAL READABILITY (SCOPED)
   Applies ONLY inside dialogs/modals
================================== */

/* Common "tinted section panels" used inside modals */
.modal .section,
.modal .panel,
.modal .info-panel,
.modal .hint-panel,
.modal .tinted,
.modal .card-section,
[role="dialog"] .section,
[role="dialog"] .panel,
[role="dialog"] .info-panel,
[role="dialog"] .hint-panel,
[role="dialog"] .tinted,
[role="dialog"] .card-section {
  color: #0F172A !important;
}

/* Text elements inside those tinted panels */
.modal .section p,
.modal .section li,
.modal .section label,
.modal .section .hint,
.modal .section .form-help,
.modal .section .field-label,
.modal .section .message-text,
.modal .panel p,
.modal .panel li,
.modal .panel label,
.modal .panel .hint,
.modal .panel .form-help,
.modal .panel .field-label,
[role="dialog"] .section p,
[role="dialog"] .section li,
[role="dialog"] .section label,
[role="dialog"] .section .hint,
[role="dialog"] .section .form-help,
[role="dialog"] .section .field-label,
[role="dialog"] .panel p,
[role="dialog"] .panel li,
[role="dialog"] .panel label,
[role="dialog"] .panel .hint,
[role="dialog"] .panel .form-help,
[role="dialog"] .panel .field-label {
  color: #334155 !important;
}

/* Headings inside tinted panels */
.modal .section h1,
.modal .section h2,
.modal .section h3,
.modal .section strong,
.modal .panel h1,
.modal .panel h2,
.modal .panel h3,
.modal .panel strong,
[role="dialog"] .section h1,
[role="dialog"] .section h2,
[role="dialog"] .section h3,
[role="dialog"] .section strong,
[role="dialog"] .panel h1,
[role="dialog"] .panel h2,
[role="dialog"] .panel h3,
[role="dialog"] .panel strong {
  color: #0F172A !important;
}

/* Inputs inside modals should remain readable */
.modal input,
.modal textarea,
.modal select,
[role="dialog"] input,
[role="dialog"] textarea,
[role="dialog"] select {
  color: #0F172A !important;
}

/* Checkboxes/radios labels (common problem area) */
.modal .radio-option span,
.modal .checkbox-label,
[role="dialog"] .radio-option span,
[role="dialog"] .checkbox-label {
  color: #0F172A !important;
  font-weight: 500;
}

/****************************************************
  MODAL CARDS CONTRAST FIX (targeted)
  Goal: readable text inside tinted modal sections
  without affecting normal dark-theme pages.
****************************************************/

/* Make section titles readable inside modals */
.modal .form-section-title,
[role="dialog"] .form-section-title,
.dialog .form-section-title,
.modal-overlay .form-section-title,
.modal-content .form-section-title,
.modal-body .form-section-title {
  color: #0F172A !important;
  font-weight: 700 !important;
}

/* Make common text elements readable inside modal sections
   (avoid inputs/buttons which have their own styling) */
.modal .form-section,
.modal .form-section *:not(input):not(textarea):not(select):not(button),
[role="dialog"] .form-section,
[role="dialog"] .form-section *:not(input):not(textarea):not(select):not(button),
.dialog .form-section,
.dialog .form-section *:not(input):not(textarea):not(select):not(button),
.modal-overlay .form-section,
.modal-overlay .form-section *:not(input):not(textarea):not(select):not(button),
.modal-content .form-section,
.modal-content .form-section *:not(input):not(textarea):not(select):not(button),
.modal-body .form-section,
.modal-body .form-section *:not(input):not(textarea):not(select):not(button) {
  color: #0F172A;
}

/* Help/muted text inside modals should still be readable */
.modal .hint,
.modal .form-help,
.modal .form-hint,
.modal .help-text,
[role="dialog"] .hint,
[role="dialog"] .form-help,
[role="dialog"] .form-hint,
[role="dialog"] .help-text,
.dialog .hint,
.dialog .form-help,
.dialog .form-hint,
.dialog .help-text,
.modal-overlay .hint,
.modal-overlay .form-help,
.modal-overlay .form-hint,
.modal-overlay .help-text,
.modal-content .hint,
.modal-content .form-help,
.modal-content .form-hint,
.modal-content .help-text,
.modal-body .hint,
.modal-body .form-help,
.modal-body .form-hint,
.modal-body .help-text {
  color: #334155 !important;
}

/* Labels inside modals */
.modal label,
[role="dialog"] label,
.dialog label,
.modal-overlay label,
.modal-content label,
.modal-body label {
  color: #0F172A !important;
  font-weight: 600;
}

/* If a title has inline color style, override it inside modals */
.modal .form-section-title[style],
[role="dialog"] .form-section-title[style],
.dialog .form-section-title[style],
.modal-overlay .form-section-title[style],
.modal-content .form-section-title[style],
.modal-body .form-section-title[style] {
  color: #0F172A !important;
}

/* Optional: semantic "success" title variant (still readable) */
.modal .form-section-title--success,
[role="dialog"] .form-section-title--success,
.dialog .form-section-title--success,
.modal-overlay .form-section-title--success,
.modal-content .form-section-title--success,
.modal-body .form-section-title--success {
  color: #065F46 !important;
}

/****************************************************
  MODAL FORM SECTIONS = LIGHT SURFACE
****************************************************/

.modal .form-section,
[role="dialog"] .form-section,
.dialog .form-section,
.modal-body .form-section,
.modal-content .form-section {
  background-color: #F8FAFC !important;
  color: #0F172A !important;
}

/* Headings inside modal sections */
.modal .form-section .form-section-title,
[role="dialog"] .form-section .form-section-title,
.dialog .form-section .form-section-title,
.modal-body .form-section .form-section-title,
.modal-content .form-section .form-section-title {
  color: #0F172A !important;
  font-weight: 700 !important;
}

/* Paragraphs, helper text, descriptions */
.modal .form-section p,
.modal .form-section span,
.modal .form-section li,
.modal .form-section small,
[role="dialog"] .form-section p,
[role="dialog"] .form-section span,
[role="dialog"] .form-section li,
[role="dialog"] .form-section small {
  color: #334155 !important;
}

/* Labels inside modal cards */
.modal .form-section label,
[role="dialog"] .form-section label,
.dialog .form-section label {
  color: #0F172A !important;
  font-weight: 600;
}

/* Inputs remain untouched, but ensure placeholder contrast */
.modal .form-section ::placeholder,
[role="dialog"] .form-section ::placeholder {
  color: #64748B;
}

/* Force readable text inside light/tinted panels used inside modals */
.modal-light-panel,
.modal-light-panel * {
  color: #0F172A !important;
}

/* Keep helper text slightly muted but still readable */
.modal-light-panel .hint,
.modal-light-panel .form-hint,
.modal-light-panel .form-help,
.modal-light-panel small,
.modal-light-panel p {
  color: #334155 !important;
}

/* Titles stronger */
.modal-light-panel .form-section-title,
.modal-light-panel .card-title {
  color: #0F172A !important;
  font-weight: 700 !important;
}

/* Check In Now button */
.checkin-btn {
  color: #0F172A !important;
  font-weight: 700 !important;
}

/* =====================================================
   MODAL BODY: force readable text (uses actual DOM structure)
   Structure: .modal-overlay > .modal-card > .modal-body > .modal-form-content
===================================================== */

.modal-overlay .modal-body,
.modal-overlay .modal-body *,
.modal-overlay .modal-form-content,
.modal-overlay .modal-form-content * {
  color: #0F172A !important;
}

/* Soften helper text but keep readable */
.modal-overlay .modal-body .hint,
.modal-overlay .modal-body .form-hint,
.modal-overlay .modal-body .form-help,
.modal-overlay .modal-body small,
.modal-overlay .modal-body p,
.modal-overlay .modal-form-content .hint,
.modal-overlay .modal-form-content .form-hint,
.modal-overlay .modal-form-content .form-help,
.modal-overlay .modal-form-content small,
.modal-overlay .modal-form-content p {
  color: #334155 !important;
}

/* Section titles strong */
.modal-overlay .modal-body .form-section-title,
.modal-overlay .modal-body h1,
.modal-overlay .modal-body h2,
.modal-overlay .modal-body h3,
.modal-overlay .modal-form-content .form-section-title,
.modal-overlay .modal-form-content h1,
.modal-overlay .modal-form-content h2,
.modal-overlay .modal-form-content h3 {
  color: #0F172A !important;
  font-weight: 700 !important;
}

/* Labels */
.modal-overlay .modal-body label,
.modal-overlay .modal-form-content label {
  color: #0F172A !important;
}

/* Force fully opaque text (override any inline opacity) */
.modal-overlay .modal-body *,
.modal-overlay .modal-form-content * {
  opacity: 1 !important;
}

/* Dashboard Check In Now - target both button and anchor */
.btn-checkin-now,
button.btn-checkin-now,
a.btn-checkin-now,
a[href*="check-in"].btn-primary {
  color: #0F172A !important;
  font-weight: 800 !important;
}

.btn-checkin-now * {
  opacity: 1 !important;
}

/* Modal header title (e.g., "Emergency Info") */
.modal-overlay .modal-header,
.modal-overlay .modal-header h1,
.modal-overlay .modal-header h2,
.modal-overlay .modal-header .modal-title,
#modal-title {
  color: #0F172A !important;
  font-weight: 800 !important;
}

/* Trusted Contacts card name on white background */
.contact-card .contact-name,
.trusted-card .contact-name,
.contact-name {
  color: #0F172A !important;
  font-weight: 700 !important;
}

/* Dashboard section titles on light cards */
.card .card-title {
  color: #0F1C24 !important;
  font-weight: 700 !important;
}

/* =====================================================
   PANEL-LIGHT: Universal fix for light/tinted backgrounds
===================================================== */

.panel-light,
.panel-light * {
  color: #0F172A;
}

/* Softer body text inside light panels */
.panel-light p,
.panel-light .hint,
.panel-light .message-text,
.panel-light .subtext,
.panel-light li {
  color: #334155;
}

/* Headings inside light panels */
.panel-light h1,
.panel-light h2,
.panel-light h3,
.panel-light h4,
.panel-light .title,
.panel-light .card-title {
  color: #0F172A;
  font-weight: 800;
}

/* Links inside light panels */
.panel-light a {
  color: #0B6B66;
}

/* === FORCE: light/tinted panels MUST use dark readable text === */
.panel-light,
.panel-light * {
  color: #0F172A !important;
  opacity: 1 !important;
  text-shadow: none !important;
  filter: none !important;
}

/* Body text inside light panels */
.panel-light p,
.panel-light li,
.panel-light .hint,
.panel-light .subtext,
.panel-light .message-text {
  color: #334155 !important;
  opacity: 1 !important;
}

/* Headings inside light panels */
.panel-light h1,
.panel-light h2,
.panel-light h3,
.panel-light h4,
.panel-light .title,
.panel-light .card-title,
.panel-light .form-section-title {
  color: #0F172A !important;
  font-weight: 800 !important;
  opacity: 1 !important;
}

/* =========================================================
   GLOBAL CONTRAST FIXES – LIGHT PANELS, MODALS, DASHBOARD
   ========================================================= */

/* ---------- Light panel cards (Documents, Emergency banners, timelines) ---------- */
.panel-light .card-title,
.panel-light h1,
.panel-light h2,
.panel-light h3 {
  color: #0F172A !important;
  font-weight: 800 !important;
  opacity: 1 !important;
}

.panel-light p,
.panel-light li,
.panel-light .timeline-desc {
  color: #334155 !important;
  opacity: 1 !important;
}

/* Timeline titles inside light panels */
.panel-light .timeline-title {
  color: #0F172A !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

/* ---------- Modal dialogs ---------- */
[role="dialog"] .form-section-title,
[role="dialog"] .card-title,
[role="dialog"] h1,
[role="dialog"] h2,
[role="dialog"] h3 {
  color: #0F172A !important;
  font-weight: 800 !important;
  opacity: 1 !important;
}

[role="dialog"] p,
[role="dialog"] label,
[role="dialog"] .hint,
[role="dialog"] .subtext {
  color: #334155 !important;
  opacity: 1 !important;
}

/* ---------- Trusted Contacts (name + details) ---------- */
.contact-card .contact-name,
.trusted-contact-name,
.trusted-name {
  color: #0F172A !important;
  font-weight: 800 !important;
  opacity: 1 !important;
}

.contact-card p,
.contact-card span {
  color: #334155 !important;
  opacity: 1 !important;
}

/* ---------- Dashboard: Check-In Now button ---------- */
.btn-checkin-now,
.btn-checkin-now:link,
.btn-checkin-now:visited {
  color: #0F1C24 !important;
  font-weight: 700 !important;
}

/* Safety: prevent inherited opacity issues */
.panel-light *,
[role="dialog"] * {
  opacity: 1;
}

/* Critical: light-panel contrast fix — do not remove */
/* ===== FORCE LIGHT-CARD TEXT TO BE DARK (HIGH SPECIFICITY) ===== */
.card.panel-light,
.card.panel-light * {
  opacity: 1 !important;
  text-shadow: none !important;
  filter: none !important;
}

.card.panel-light .card-title,
.card.panel-light h1,
.card.panel-light h2,
.card.panel-light h3 {
  color: #0F172A !important;
  font-weight: 800 !important;
  opacity: 1 !important;
}

.card.panel-light p,
.card.panel-light li,
.card.panel-light span,
.card.panel-light div {
  color: #334155 !important;
  opacity: 1 !important;
}

/* ================================
   Checkbox row alignment (modals)
   ================================ */
.cv-checkbox-row,
.modal .checkbox-row,
.modal-overlay .checkbox-row,
[role="dialog"] .checkbox-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.6rem;
  margin: 0 0 0.5rem 0;
  text-align: left;
  cursor: pointer;
  padding: 8px 4px;
  border-radius: 6px;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}

.cv-checkbox-row:active,
.modal .checkbox-row:active,
.modal-overlay .checkbox-row:active {
  background: rgba(255, 255, 255, 0.04);
}

.cv-checkbox-row input[type="checkbox"],
.modal .checkbox-row input[type="checkbox"],
.modal-overlay .checkbox-row input[type="checkbox"],
[role="dialog"] .checkbox-row input[type="checkbox"] {
  margin: 0;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.cv-checkbox-row span,
.modal .checkbox-row label,
.modal-overlay .checkbox-row label,
[role="dialog"] .checkbox-row label {
  margin: 0;
  font-weight: 500;
  color: #0F172A !important;
  cursor: pointer;
}

.modal .checkbox-row .meta,
.modal-overlay .checkbox-row .meta,
[role="dialog"] .checkbox-row .meta {
  margin-left: 0.35rem;
  font-size: 0.85em;
  color: #64748B !important;
}

.modal .checkbox-list,
.modal-overlay .checkbox-list,
[role="dialog"] .checkbox-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 520px;
}

/* ===== Confidence Vault: Modal Theme Override (Scoped) ===== */
.modal-overlay,
.modal-overlay * {
  box-sizing: border-box;
}

.modal-overlay .modal-card {
  background: var(--cv-surface, #1e293b) !important;
  color: var(--cv-text, #F1F5F9) !important;
  border: 1px solid var(--cv-border, #334155) !important;
}

.modal-overlay .modal-header,
.modal-overlay .modal-body,
.modal-overlay .modal-footer {
  background: transparent !important;
  color: inherit !important;
  border-color: var(--cv-border, #334155) !important;
}

.modal-overlay .modal-header {
  border-bottom: 1px solid var(--cv-border, #334155) !important;
}

.modal-overlay .modal-footer {
  border-top: 1px solid var(--cv-border, #334155) !important;
}

.modal-overlay .modal-close,
.modal-overlay .close,
.modal-overlay .modal-header .close {
  color: var(--cv-text, #F1F5F9) !important;
  opacity: 0.8;
}

/* Form controls inside modals - comprehensive override */
.modal-overlay input[type="text"],
.modal-overlay input[type="email"],
.modal-overlay input[type="tel"],
.modal-overlay input[type="number"],
.modal-overlay input[type="password"],
.modal-overlay input[type="search"],
.modal-overlay input[type="url"],
.modal-overlay textarea,
.modal-overlay select {
  background: var(--cv-bg, #0f172a) !important;
  color: var(--cv-text, #F1F5F9) !important;
  border: 1px solid var(--cv-border, #334155) !important;
  box-shadow: none !important;
}

.modal-overlay input::placeholder,
.modal-overlay textarea::placeholder {
  color: var(--cv-muted, #94a3b8) !important;
  opacity: 1;
}

.modal-overlay select option {
  background: var(--cv-bg, #0f172a);
  color: var(--cv-text, #F1F5F9);
}

/* Focus ring (brand-safe, not light-theme) */
.modal-overlay input:focus,
.modal-overlay textarea:focus,
.modal-overlay select:focus {
  outline: none !important;
  border-color: var(--cv-accent, #2FA4A9) !important;
  box-shadow: 0 0 0 3px rgba(47, 164, 169, 0.25) !important;
}

/* Checkbox/radio alignment + visibility inside modals */
.modal-overlay input[type="checkbox"],
.modal-overlay input[type="radio"] {
  accent-color: var(--cv-accent, #2FA4A9);
  background: var(--cv-bg, #0f172a) !important;
}

.modal-overlay label,
.modal-overlay .form-label {
  color: var(--cv-text, #F1F5F9) !important;
}

/* Modal light panel override - used for form sections */
.modal-overlay .modal-light-panel,
.modal-overlay .form-section {
  background: var(--cv-surface, #1e293b) !important;
  border: 1px solid var(--cv-border, #334155) !important;
  color: var(--cv-text, #F1F5F9) !important;
}

/* ===== MODAL CONTRAST HARD FIX (PASTE AT VERY END OF public/styles.css) ===== */

/* Overlay dims page only */
.modal-overlay {
  background: rgba(0, 0, 0, 0.62) !important;
  backdrop-filter: none !important;
}

/* Modal card must be SOLID (no fog) */
.modal-overlay .modal-card {
  opacity: 1 !important;
  background: var(--cv-card-bg, #0f172a) !important;
  color: var(--cv-text, #F1F5F9) !important;
  border: 1px solid var(--cv-border, #334155) !important;
  filter: none !important;
  backdrop-filter: none !important;
  box-shadow: 0 16px 60px rgba(0,0,0,0.55) !important;
}

/* Prevent inherited opacity from any parent */
.modal-overlay .modal-card * {
  opacity: 1 !important;
}

/* Headings + labels */
.modal-overlay .modal-card h1,
.modal-overlay .modal-card h2,
.modal-overlay .modal-card h3,
.modal-overlay .modal-card .modal-title,
.modal-overlay .modal-card label,
.modal-overlay .modal-card .form-label {
  color: var(--cv-text, #F1F5F9) !important;
}

/* Helper / hint text */
.modal-overlay .modal-card .hint,
.modal-overlay .modal-card .form-hint,
.modal-overlay .modal-card small,
.modal-overlay .modal-card .muted {
  color: var(--cv-text-muted, #94a3b8) !important;
}

/* Section containers inside modals */
.modal-overlay .modal-card .form-section,
.modal-overlay .modal-card .modal-light-panel {
  background: var(--cv-surface, #1e293b) !important;
  border: 1px solid var(--cv-border, #334155) !important;
}

/* Inputs */
.modal-overlay .modal-card input,
.modal-overlay .modal-card textarea,
.modal-overlay .modal-card select {
  background: var(--cv-bg, #020617) !important;
  color: var(--cv-text, #F1F5F9) !important;
  border: 1px solid var(--cv-border, #334155) !important;
}

/* Close button visibility */
.modal-overlay .modal-card .btn-close,
.modal-overlay .modal-card .close {
  opacity: 0.9 !important;
  filter: invert(1) brightness(1.1);
}

/* ===== MODAL FOG ROOT FIX (PARENT OPACITY/FILTER OVERRIDE) =====
   Why: If ANY parent container is set to opacity/filter when a modal opens,
   the modal will be "foggy" forever because child opacity cannot override parent opacity.
   This block forces the app container back to normal and relies on the overlay to dim.
*/

/* 1) Kill any "dim the whole app" rules while a modal is open */
body.modal-open,
body:has(.modal-overlay),
body:has(#modal-overlay),
body:has(.modal) {
  /* no-op, just here for selector grouping */
}

/* Common app shells that devs dim/blur */
body.modal-open #app,
body.modal-open #root,
body.modal-open main,
body.modal-open .app,
body.modal-open .app-shell,
body.modal-open .app-content,
body.modal-open .dashboard,
body.modal-open .dashboard-container,
body.modal-open .page,
body.modal-open .content,
body.modal-open .container {
  opacity: 1 !important;
  filter: none !important;
  backdrop-filter: none !important;
  transform: none !important;
}

/* If your code uses a "dimmed/blurred" class, neutralize it */
.dimmed,
.blurred,
.is-dimmed,
.is-blurred,
.modal-dim,
.modal-blur {
  opacity: 1 !important;
  filter: none !important;
  backdrop-filter: none !important;
}

/* 2) Make the overlay do the dimming (this will still darken the background) */
.modal-overlay,
#modal-overlay,
.modal-backdrop,
#modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.62) !important;
  backdrop-filter: none !important;
  z-index: 9998 !important;
}

/* 3) Make sure the modal itself is above the overlay and fully opaque */
.modal,
.modal-card,
.modal-content,
#modal,
#modal .modal-card,
#modal .modal-content,
.modal-overlay .modal-card {
  position: relative !important;
  z-index: 9999 !important;
  opacity: 1 !important;
  filter: none !important;
  backdrop-filter: none !important;
  background: var(--cv-card-bg, #0f172a) !important;
  color: var(--cv-text, #F1F5F9) !important;
  border: 1px solid var(--cv-border, #334155) !important;
  box-shadow: 0 16px 60px rgba(0,0,0,0.55) !important;
}

/* 4) Safety: if modal lives INSIDE a container that was previously dimmed,
      force that container's opacity to 1 too (last-resort wide net) */
body.modal-open *:has(.modal-overlay),
body.modal-open *:has(.modal-card),
body.modal-open *:has(.modal-content) {
  opacity: 1 !important;
  filter: none !important;
  backdrop-filter: none !important;
}

/* ===========================
   MODAL THEME = DASHBOARD CARD
   BUTTONS = "CHECK-IN NOW"
   =========================== */

/* (A) Define reusable tokens by reading existing card/button tokens if present */
:root {
  /* If your app already defines these elsewhere, these will just inherit. */
  --cv-modal-bg: var(--cv-card-bg, #0f172a);
  --cv-modal-surface: var(--cv-surface, #1e293b);
  --cv-modal-text: var(--cv-text, #F1F5F9);
  --cv-modal-muted: var(--cv-text-muted, #94a3b8);
  --cv-modal-border: var(--cv-border, #334155);
  --cv-modal-shadow: 0 18px 70px rgba(0,0,0,0.60);
}

/* (B) HARD STOP: overlay dims, modal stays crisp */
.modal-overlay,
#modal-overlay,
.modal-backdrop,
#modal-backdrop {
  background: rgba(0, 0, 0, 0.62) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* (C) Force the modal shell fully opaque + dashboard-card surface */
.modal-card,
.modal-content,
#modal .modal-card,
#modal .modal-content,
.modal-overlay .modal-card {
  opacity: 1 !important;
  background: var(--cv-modal-bg) !important;
  color: var(--cv-modal-text) !important;
  border: 1px solid var(--cv-modal-border) !important;
  box-shadow: var(--cv-modal-shadow) !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* (D) Force section panels inside modal to match the dashboard info card "panel" look */
.modal-card .form-section,
.modal-card .form-panel,
.modal-card .panel,
.modal-card .card,
.modal-card .section,
.modal-card fieldset {
  background: var(--cv-modal-surface) !important;
  border: 1px solid var(--cv-modal-border) !important;
  color: var(--cv-modal-text) !important;
}

/* (E) Text + labels readable */
.modal-card label,
.modal-card .form-label,
.modal-card .label,
.modal-card .hint,
.modal-card .help-text,
.modal-card small {
  color: var(--cv-modal-text) !important;
}

.modal-card .hint,
.modal-card .help-text,
.modal-card small,
.modal-card .muted {
  color: var(--cv-modal-muted) !important;
}

/* (F) Inputs readable on dark */
.modal-card input,
.modal-card select,
.modal-card textarea {
  background: rgba(255,255,255,0.04) !important;
  color: var(--cv-modal-text) !important;
  border: 1px solid var(--cv-modal-border) !important;
}
.modal-card input::placeholder,
.modal-card textarea::placeholder {
  color: var(--cv-modal-muted) !important;
  opacity: 1 !important;
}

/* (G) Force SELECT dropdown options readable (important for Android/Chrome quirks) */
.modal-card select option {
  background: #0b1220 !important;
  color: #F1F5F9 !important;
}

/* (H) Buttons in the modal MUST look like "Check-in now"
   We do this in two ways:
   1) If the existing class for that button exists, we apply it to modal primary buttons (STEP 3).
   2) As a fallback, we hard-style common primary button selectors inside modal.
*/

/* fallback primary */
.modal-card .btn-primary,
.modal-card button.primary,
.modal-card .primary-btn,
.modal-card .cta,
.modal-card .cta-btn,
.modal-card .checkin-btn,
.modal-card .btn-save,
.modal-card button[type="submit"] {
  background: var(--cv-accent, #2FA4A9) !important;
  color: #06121a !important; /* readable on teal; matches your "Check-in now" vibe */
  border: 1px solid rgba(255,255,255,0.08) !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
}

.modal-card .btn-primary:hover,
.modal-card button.primary:hover,
.modal-card .primary-btn:hover,
.modal-card .cta:hover,
.modal-card .cta-btn:hover,
.modal-card .checkin-btn:hover,
.modal-card .btn-save:hover,
.modal-card button[type="submit"]:hover {
  filter: brightness(1.05) !important;
}

/* fallback secondary (Cancel) */
.modal-card .btn-secondary,
.modal-card button.secondary,
.modal-card .secondary-btn,
.modal-card .btn-cancel,
.modal-card button[type="button"] {
  background: rgba(255,255,255,0.06) !important;
  color: var(--cv-modal-text) !important;
  border: 1px solid var(--cv-modal-border) !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
}

.modal-card .btn-secondary:hover,
.modal-card button.secondary:hover,
.modal-card .secondary-btn:hover,
.modal-card .btn-cancel:hover,
.modal-card button[type="button"]:hover {
  background: rgba(255,255,255,0.10) !important;
}

/* (I) The "fog" is often caused by the app shell being dimmed via opacity/filter.
   Parent opacity cannot be overridden. Neutralize common dimming classes ONLY while modal is present.
*/
body:has(.modal-overlay) .app,
body:has(.modal-overlay) .app-shell,
body:has(.modal-overlay) .app-content,
body:has(.modal-overlay) main,
body:has(.modal-overlay) .dashboard,
body:has(.modal-overlay) .content,
body:has(.modal-overlay) .page,
body:has(.modal-overlay) #app,
body:has(.modal-overlay) #root {
  opacity: 1 !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.dimmed,
.blurred,
.is-dimmed,
.is-blurred,
.modal-dim,
.modal-blur {
  opacity: 1 !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* =========================================================
   NUCLEAR MODAL LIGHT CARD THEME
   Goal: inside modals looks like "What happens if you miss a check-in?"
   Paste at VERY END of public/styles.css (replace older modal blocks)
   ========================================================= */

/* Overlay stays dark */
#modal-overlay.modal-overlay,
.modal-overlay{
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 9998 !important;
  background: rgba(0,0,0,0.62) !important;
  opacity: 1 !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  visibility: hidden;
  pointer-events: none;
}
#modal-overlay.modal-overlay.active,
.modal-overlay.active{
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Modal frame = light */
.modal-card,
.modal-overlay .modal-card,
[data-modal-card]{
  width: min(780px, calc(100vw - 24px)) !important;
  max-height: calc(100vh - 24px) !important;
  overflow: hidden !important;

  background: #F8FAFC !important;     /* light page */
  color: #0F172A !important;          /* dark text */
  border: 1px solid #E2E8F0 !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45) !important;

  opacity: 1 !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  position: relative !important;
  z-index: 9999 !important;
}

/* Header/body/footer = light */
.modal-header,
.modal-body,
.modal-footer{
  background: #F8FAFC !important;
  color: #0F172A !important;
}
.modal-header{ border-bottom: 1px solid #E2E8F0 !important; }
.modal-footer{ border-top: 1px solid #E2E8F0 !important; }
.modal-body{
  overflow: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Close button visible on light */
.modal-close{
  color: #0F172A !important;
  opacity: 0.85 !important;
  border-radius: 10px !important;
}
.modal-close:hover{
  background: rgba(15,23,42,0.08) !important;
  opacity: 1 !important;
}

/* ---------------------------------------------------------
   FIX #1: Kill the dark inner "panels" in modals.
   Make inner sections look like the white info-card.
   --------------------------------------------------------- */

/* Treat *common section wrappers* as white cards */
.modal-card .modal-body .form-section,
.modal-card .modal-body .panel,
.modal-card .modal-body .panel-light,
.modal-card .modal-body .card,
.modal-card .modal-body .section,
.modal-card .modal-body fieldset,
.modal-card .modal-body .settings-section,
.modal-card .modal-body .settings-card,
.modal-card .modal-body .settings-group,
.modal-card .modal-body .verification,
.modal-card .modal-body .verification-box,
.modal-card .modal-body .sms-verification,
.modal-card .modal-body .phone-verify,
.modal-card .modal-body .phone-verify-box,
.modal-card .modal-body .box,
.modal-card .modal-body .well,
.modal-card .modal-body .callout,
.modal-card .modal-body .notice,
.modal-card .modal-body .alert,
.modal-card .modal-body .warning,
.modal-card .modal-body .success{
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important; /* same "outline" vibe */
  border-radius: 12px !important;
}

/* Catch-anything: if it LOOKS like a section wrapper, force it white.
   (This is what your current CSS is missing.) */
.modal-card .modal-body > div,
.modal-card .modal-body > section,
.modal-card .modal-body > fieldset{
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 12px !important;
}

/* ---------------------------------------------------------
   FIX #2: Remove the weird white highlight bars behind headings.
   --------------------------------------------------------- */
.modal-card .modal-body h1,
.modal-card .modal-body h2,
.modal-card .modal-body h3,
.modal-card .modal-body h4,
.modal-card .modal-body .title,
.modal-card .modal-body .section-title,
.modal-card .modal-body .form-title,
.modal-card .modal-body legend{
  background: transparent !important;
  color: #0F172A !important;
}

/* Subtext/hints */
.modal-card .modal-body label,
.modal-card .modal-body .form-label,
.modal-card .modal-body .hint,
.modal-card .modal-body small,
.modal-card .modal-body .text-muted{
  color: #334155 !important;
  background: transparent !important;
}

/* Inputs: white, dark text, subtle outline */
.modal-card input,
.modal-card select,
.modal-card textarea{
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 10px !important;
}
.modal-card input::placeholder,
.modal-card textarea::placeholder{
  color: #64748B !important;
}
.modal-card input:focus,
.modal-card select:focus,
.modal-card textarea:focus{
  outline: none !important;
  border-color: #2FA4A9 !important;
  box-shadow: 0 0 0 3px rgba(47,164,169,0.25) !important;
}
.modal-card input[type="checkbox"],
.modal-card input[type="radio"]{
  accent-color: #2FA4A9 !important;
}

/* Buttons: match your teal "Check-in now" vibe */
.modal-card .btn.btn-primary,
.modal-card .btn-primary,
.modal-footer .btn.btn-primary{
  background: #2FA4A9 !important;
  color: #071A1D !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
}
.modal-card .btn.btn-primary:hover,
.modal-card .btn-primary:hover{
  filter: brightness(1.03) !important;
}

/* Cancel: white button with outline */
.modal-card .btn.btn-cancel,
.modal-card .btn-cancel,
.modal-footer .btn.btn-cancel{
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
}
.modal-card .btn.btn-cancel:hover,
.modal-card .btn-cancel:hover{
  background: #F1F5F9 !important;
}

/* Safety net: prevent any inherited fog */
.modal-card *{
  opacity: 1 !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* =========================================================
   FINAL MODAL FORM CONTROL LIGHT OVERRIDE
   Fixes the "black bars" (inputs/selects) inside white modals.
   Paste at VERY END of public/styles.css
   ========================================================= */

/* Match the exact light surface feel of the "What happens if you miss a check-in?" card */
.modal-card,
.modal-overlay .modal-card,
[data-modal-card]{
  background: #F8FAFC !important; /* light gray-white */
  color: #0F172A !important;
}

/* Inner sections = true white cards */
.modal-card .modal-body .form-section,
.modal-card .modal-body .panel,
.modal-card .modal-body .panel-light,
.modal-card .modal-body .card,
.modal-card .modal-body .section,
.modal-card .modal-body fieldset,
.modal-card .modal-body > div,
.modal-card .modal-body > section,
.modal-card .modal-body > fieldset{
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 12px !important;
}

/* Kill any weird "label background bars" */
.modal-card .modal-body h1,
.modal-card .modal-body h2,
.modal-card .modal-body h3,
.modal-card .modal-body h4,
.modal-card .modal-body .title,
.modal-card .modal-body .section-title,
.modal-card .modal-body .form-title,
.modal-card .modal-body legend,
.modal-card .modal-body label,
.modal-card .modal-body .form-label{
  background: transparent !important;
  color: #0F172A !important;
}

/* ===== THE REAL FIX: force all form controls inside modals to be LIGHT ===== */

/* Cover common class names used across templates */
.modal-card input,
.modal-card select,
.modal-card textarea,
.modal-card .form-control,
.modal-card .input,
.modal-card .select,
.modal-card .textarea,
.modal-card [class*="input"],
.modal-card [class*="select"],
.modal-card [class*="control"]{
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 10px !important;

  /* Prevent "dark UI" rendering artifacts */
  box-shadow: none !important;
  filter: none !important;
  -webkit-text-fill-color: #0F172A !important; /* fixes Safari/Chrome autofill text */
}

/* Placeholder */
.modal-card input::placeholder,
.modal-card textarea::placeholder{
  color: #64748B !important;
}

/* Focus ring (teal) */
.modal-card input:focus,
.modal-card select:focus,
.modal-card textarea:focus,
.modal-card .form-control:focus{
  outline: none !important;
  border-color: #2FA4A9 !important;
  box-shadow: 0 0 0 3px rgba(47,164,169,0.25) !important;
}

/* Dropdown list itself (options) — fixes "black dropdown" + unreadable options */
.modal-card select{
  appearance: auto !important;
  -webkit-appearance: menulist !important;
}
.modal-card select option{
  background: #FFFFFF !important;
  color: #0F172A !important;
}

/* Checkboxes/radios */
.modal-card input[type="checkbox"],
.modal-card input[type="radio"]{
  accent-color: #2FA4A9 !important;
}

/* Buttons (keep your existing teal + outline cancel) */
.modal-card .btn.btn-primary,
.modal-card .btn-primary{
  background: #2FA4A9 !important;
  color: #071A1D !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
}
.modal-card .btn.btn-cancel,
.modal-card .btn-cancel{
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
}

/* Safety net: no fog */
.modal-card *{
  opacity: 1 !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* =========================================================
   ABSOLUTE LAST-LINE FIX: FORCE LIGHT FORMS INSIDE MODALS
   Paste at the VERY BOTTOM of public/styles.css (last line)
   ========================================================= */

/* Force browser-native controls to render as LIGHT inside modal */
html body .modal-overlay,
html body .modal-overlay * ,
html body .modal-card,
html body .modal-card *{
  color-scheme: light !important;
  -webkit-color-scheme: light !important;
}

/* Hard force modal surfaces to match your "What happens if you miss a check-in?" card */
html body .modal-overlay .modal-card{
  background: #F8FAFC !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
}

/* Inner panels inside modal = white cards */
html body .modal-overlay .modal-card .modal-body .form-section,
html body .modal-overlay .modal-card .modal-body .panel,
html body .modal-overlay .modal-card .modal-body .panel-light,
html body .modal-overlay .modal-card .modal-body .card,
html body .modal-overlay .modal-card .modal-body fieldset,
html body .modal-overlay .modal-card .modal-body > div,
html body .modal-overlay .modal-card .modal-body > section,
html body .modal-overlay .modal-card .modal-body > fieldset{
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 12px !important;
}

/* Kill any weird heading “bars” */
html body .modal-overlay .modal-card .modal-body h1,
html body .modal-overlay .modal-card .modal-body h2,
html body .modal-overlay .modal-card .modal-body h3,
html body .modal-overlay .modal-card .modal-body h4,
html body .modal-overlay .modal-card .modal-body legend,
html body .modal-overlay .modal-card .modal-body label,
html body .modal-overlay .modal-card .modal-body .title,
html body .modal-overlay .modal-card .modal-body .section-title,
html body .modal-overlay .modal-card .modal-body .form-title,
html body .modal-overlay .modal-card .modal-body .form-label{
  background: transparent !important;
  color: #0F172A !important;
}

/* THE MONEY: force ALL form controls (including ones with weird classes) */
html body .modal-overlay .modal-card input,
html body .modal-overlay .modal-card select,
html body .modal-overlay .modal-card textarea,
html body .modal-overlay .modal-card button,
html body .modal-overlay .modal-card .form-control,
html body .modal-overlay .modal-card [class*="input"],
html body .modal-overlay .modal-card [class*="select"],
html body .modal-overlay .modal-card [class*="control"]{
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  color: #0F172A !important;
  -webkit-text-fill-color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Placeholders */
html body .modal-overlay .modal-card input::placeholder,
html body .modal-overlay .modal-card textarea::placeholder{
  color: #64748B !important;
}

/* Select menus/options (prevents dark dropdowns) */
html body .modal-overlay .modal-card select{
  appearance: auto !important;
  -webkit-appearance: menulist !important;
}
html body .modal-overlay .modal-card select option{
  background: #FFFFFF !important;
  color: #0F172A !important;
}

/* Focus ring (teal) */
html body .modal-overlay .modal-card input:focus,
html body .modal-overlay .modal-card select:focus,
html body .modal-overlay .modal-card textarea:focus{
  outline: none !important;
  border-color: #2FA4A9 !important;
  box-shadow: 0 0 0 3px rgba(47,164,169,0.25) !important;
}

/* Checkbox/radio */
html body .modal-overlay .modal-card input[type="checkbox"],
html body .modal-overlay .modal-card input[type="radio"]{
  accent-color: #2FA4A9 !important;
}

/* Buttons: match your teal primary + light cancel */
html body .modal-overlay .modal-card .btn.btn-primary,
html body .modal-overlay .modal-card .btn-primary{
  background: #2FA4A9 !important;
  color: #071A1D !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
}
html body .modal-overlay .modal-card .btn.btn-cancel,
html body .modal-overlay .modal-card .btn-cancel{
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
}

/* =========================================================
   FINAL CLEANUP: KILL REMAINING DARK REPEAT/LIST BLOCKS IN MODALS
   Paste BELOW your existing modal light-theme block (still at file bottom)
   ========================================================= */

/* Catch common dark “repeat/list” containers inside modals (pets/doctors/meds blocks) */
html body .modal-overlay .modal-card .modal-body [class*="list"],
html body .modal-overlay .modal-card .modal-body [class*="repeat"],
html body .modal-overlay .modal-card .modal-body [class*="items"],
html body .modal-overlay .modal-card .modal-body [class*="stack"],
html body .modal-overlay .modal-card .modal-body [class*="group"],
html body .modal-overlay .modal-card .modal-body [class*="box"],
html body .modal-overlay .modal-card .modal-body [class*="container"]{
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
  box-shadow: none !important;
}

/* Specifically kill any “dark panel” wrappers that survive via inline styles or stronger classes */
html body .modal-overlay .modal-card .modal-body [style*="background"],
html body .modal-overlay .modal-card .modal-body [style*="background-color"]{
  background: #FFFFFF !important;
  color: #0F172A !important;
}

/* Inputs inside those repeat blocks (the ones still sitting on dark bars) */
html body .modal-overlay .modal-card .modal-body [class*="list"] input,
html body .modal-overlay .modal-card .modal-body [class*="list"] select,
html body .modal-overlay .modal-card .modal-body [class*="list"] textarea,
html body .modal-overlay .modal-card .modal-body [class*="repeat"] input,
html body .modal-overlay .modal-card .modal-body [class*="repeat"] select,
html body .modal-overlay .modal-card .modal-body [class*="repeat"] textarea,
html body .modal-overlay .modal-card .modal-body [class*="items"] input,
html body .modal-overlay .modal-card .modal-body [class*="items"] select,
html body .modal-overlay .modal-card .modal-body [class*="items"] textarea{
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  color: #0F172A !important;
  -webkit-text-fill-color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
  box-shadow: none !important;
}

/* “Remove” buttons inside those blocks (they’re currently inheriting dark styles) */
html body .modal-overlay .modal-card .modal-body .btn-remove,
html body .modal-overlay .modal-card .modal-body button[class*="remove"],
html body .modal-overlay .modal-card .modal-body button[aria-label*="Remove"],
html body .modal-overlay .modal-card .modal-body button[title*="Remove"]{
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
}
html body .modal-overlay .modal-card .modal-body .btn-remove:hover,
html body .modal-overlay .modal-card .modal-body button[class*="remove"]:hover,
html body .modal-overlay .modal-card .modal-body button[aria-label*="Remove"]:hover,
html body .modal-overlay .modal-card .modal-body button[title*="Remove"]:hover{
  background: #F1F5F9 !important;
}

/* The dark “footer note” bar in Emergency Info modals */
html body .modal-overlay .modal-card .modal-body .form-footer-note,
html body .modal-overlay .modal-card .modal-body [class*="footer-note"],
html body .modal-overlay .modal-card .modal-body [class*="note"],
html body .modal-overlay .modal-card .modal-body [class*="disclaimer"]{
  background: #F8FAFC !important;
  color: #334155 !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 10px !important;
}

/* If any “dark badge/pill” shows up inside the modal, keep it readable */
html body .modal-overlay .modal-card .modal-body [class*="badge"],
html body .modal-overlay .modal-card .modal-body [class*="pill"],
html body .modal-overlay .modal-card .modal-body [class*="chip"]{
  background: #E2E8F0 !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
}

/* =========================================================
   TRUSTED CONTACTS: MATCH PERMISSIONS LIGHT CARD THEME
   Scope: /trusted/manage page only (does not affect modals)
   Paste at VERY END of public/styles.css
   ========================================================= */

/* If your layout has body/page ids, include them. These are safe even if some don't exist. */
body[data-page="trusted_manage"],
body.trusted-manage,
body.page-trusted-manage,
#trusted-manage,
main.trusted-manage {
  /* no-op wrapper; selectors below do the work */
}

/* --- 1) Page-level light containers (match Permissions card white) --- */
body[data-page="trusted_manage"] .container,
body[data-page="trusted_manage"] .content,
body[data-page="trusted_manage"] .page-content,
body[data-page="trusted_manage"] .trusted-contacts,
body[data-page="trusted_manage"] .trusted-contacts-container,
body[data-page="trusted_manage"] .panel,
body[data-page="trusted_manage"] .card,
body[data-page="trusted_manage"] [class*="panel"],
body[data-page="trusted_manage"] [class*="card"]{
  background: transparent;
}

/* --- 2) The contact “cards” themselves (the dark blocks in your screenshot) --- */
body[data-page="trusted_manage"] .contact-card,
body[data-page="trusted_manage"] .trusted-contact-card,
body[data-page="trusted_manage"] .contact-item,
body[data-page="trusted_manage"] .trusted-contact,
body[data-page="trusted_manage"] [class*="contact-card"],
body[data-page="trusted_manage"] [class*="contact-item"]{
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18) !important;
}

/* Text inside cards */
body[data-page="trusted_manage"] .contact-card *,
body[data-page="trusted_manage"] .trusted-contact-card *,
body[data-page="trusted_manage"] [class*="contact-card"] *{
  color: #0F172A;
}

/* Muted text */
body[data-page="trusted_manage"] .muted,
body[data-page="trusted_manage"] .text-muted,
body[data-page="trusted_manage"] [class*="muted"]{
  color: #475569 !important;
}

/* --- 3) Badges/chips (Email/SMS/Verified/etc.) should be readable on white --- */
body[data-page="trusted_manage"] .channel-badge,
body[data-page="trusted_manage"] [class*="badge"],
body[data-page="trusted_manage"] [class*="pill"],
body[data-page="trusted_manage"] [class*="chip"]{
  background: #E2E8F0 !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
}

/* --- 4) “Show / Edit / Delete” buttons on Trusted Contacts page --- */
body[data-page="trusted_manage"] .btn,
body[data-page="trusted_manage"] button,
body[data-page="trusted_manage"] a.btn{
  border-radius: 10px;
}

/* Primary action (make it match the teal style you’re using elsewhere) */
body[data-page="trusted_manage"] .btn-primary,
body[data-page="trusted_manage"] button.btn-primary{
  background: #2FA4A9 !important;
  color: #0B1220 !important; /* dark text like your “Check In Now” button */
  border: 1px solid rgba(0,0,0,0.08) !important;
  font-weight: 700 !important;
}

/* Secondary buttons (Edit/Show/Cancel) */
body[data-page="trusted_manage"] .btn-secondary,
body[data-page="trusted_manage"] .btn-cancel,
body[data-page="trusted_manage"] button.btn-cancel,
body[data-page="trusted_manage"] button.btn-secondary{
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
  font-weight: 600 !important;
}

/* Delete should still look like a destructive action but readable */
body[data-page="trusted_manage"] .btn-danger,
body[data-page="trusted_manage"] button.btn-danger,
body[data-page="trusted_manage"] .btn-delete,
body[data-page="trusted_manage"] button.btn-delete{
  background: #FFFFFF !important;
  color: #B91C1C !important;
  border: 1px solid #FCA5A5 !important;
  font-weight: 700 !important;
}

/* --- 5) If any inner wrapper is still dark (common culprit) --- */
body[data-page="trusted_manage"] .contact-card [class*="panel"],
body[data-page="trusted_manage"] .contact-card [class*="section"],
body[data-page="trusted_manage"] .contact-card [class*="container"],
body[data-page="trusted_manage"] [class*="contact-card"] [class*="panel"],
body[data-page="trusted_manage"] [class*="contact-card"] [class*="section"]{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* =========================================================
   CV-CARD-LIGHT: Reusable light card class
   Matches "How Permissions Work" card on /permissions
   ========================================================= */

.cv-card-light {
  background: #f0f7ff !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
  border-left: 4px solid #4a90a4 !important;
  border-radius: 8px !important;
  padding: 16px !important;
}

.cv-card-light h1,
.cv-card-light h2,
.cv-card-light h3,
.cv-card-light h4,
.cv-card-light .card-title,
.cv-card-light strong {
  color: #0F172A !important;
}

.cv-card-light p,
.cv-card-light li,
.cv-card-light label,
.cv-card-light .hint,
.cv-card-light .text-muted,
.cv-card-light small {
  color: #334155 !important;
}

.cv-card-light a {
  color: #0B5C66 !important;
  text-decoration: underline;
}

/* =========================================================
   TRUSTED CONTACTS PAGE: Scoped to #trusted-manage-page
   Does NOT affect modals
   ========================================================= */

/* Contact cards - white background like permissions explainer */
#trusted-manage-page .contact-card {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}

/* All text inside contact cards */
#trusted-manage-page .contact-card .contact-name {
  color: #0F172A !important;
}

#trusted-manage-page .contact-card .contact-email {
  color: #475569 !important;
}

/* Channel badges */
#trusted-manage-page .contact-card .channel-badge {
  background: #E2E8F0 !important;
  color: #334155 !important;
  border: 1px solid #CBD5E1 !important;
}

#trusted-manage-page .contact-card .channel-badge.active {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #059669 !important;
  border-color: #10b981 !important;
}

#trusted-manage-page .contact-card .channel-badge--lang {
  background: #E0F2FE !important;
  color: #0369A1 !important;
  border: 1px solid #7DD3FC !important;
}

/* Icon buttons (Edit/Delete) */
#trusted-manage-page .contact-card .btn-icon {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
}

#trusted-manage-page .contact-card .btn-icon:hover {
  background: #F1F5F9 !important;
}

#trusted-manage-page .contact-card .btn-icon.danger:hover {
  background: #FEF2F2 !important;
  border-color: #FECACA !important;
  color: #B91C1C !important;
}

/* Reorder buttons */
#trusted-manage-page .contact-card .reorder-btn {
  background: #E2E8F0 !important;
  color: #334155 !important;
}

#trusted-manage-page .contact-card .reorder-btn:hover {
  background: #CBD5E1 !important;
}

/* Edit form section inside cards */
#trusted-manage-page .contact-card .edit-form {
  border-top-color: #CBD5E1 !important;
}

/* Form labels */
#trusted-manage-page .contact-card .form-group label {
  color: #0F172A !important;
}

/* Form inputs inside contact cards */
#trusted-manage-page .contact-card input,
#trusted-manage-page .contact-card select,
#trusted-manage-page .contact-card textarea {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 8px !important;
}

#trusted-manage-page .contact-card input::placeholder,
#trusted-manage-page .contact-card textarea::placeholder {
  color: #64748B !important;
}

#trusted-manage-page .contact-card input:focus,
#trusted-manage-page .contact-card select:focus,
#trusted-manage-page .contact-card textarea:focus {
  outline: none !important;
  border-color: #2FA4A9 !important;
  box-shadow: 0 0 0 3px rgba(47,164,169,0.25) !important;
}

#trusted-manage-page .contact-card select {
  appearance: auto !important;
  -webkit-appearance: menulist !important;
}

/* Phone verify section inside cards */
#trusted-manage-page .contact-card .phone-verify-section {
  background: #F8FAFC !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
}

#trusted-manage-page .contact-card .phone-verify-section strong {
  color: #0F172A !important;
}

/* Checkbox items */
#trusted-manage-page .contact-card .checkbox-item {
  color: #0F172A !important;
}

#trusted-manage-page .contact-card .checkbox-item input[type="checkbox"] {
  accent-color: #2FA4A9 !important;
}

/* Buttons */
#trusted-manage-page .contact-card .btn-primary {
  background: #2FA4A9 !important;
  color: #071A1D !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  font-weight: 700 !important;
}

#trusted-manage-page .contact-card .btn-secondary {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
  font-weight: 600 !important;
}

/* Empty state */
#trusted-manage-page .empty-state {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 2px dashed #CBD5E1 !important;
}

#trusted-manage-page .empty-state p {
  color: #475569 !important;
}

/* Add contact button */
#trusted-manage-page .add-contact-btn {
  background: #FFFFFF !important;
  color: #475569 !important;
  border: 2px dashed #CBD5E1 !important;
}

#trusted-manage-page .add-contact-btn:hover {
  background: #F8FAFC !important;
  border-color: #2FA4A9 !important;
  color: #2FA4A9 !important;
}

/* Info card at top */
#trusted-manage-page .cv-card-light {
  background: #f0f7ff !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
  border-left: 4px solid #4a90a4 !important;
}

#trusted-manage-page .cv-card-light p {
  color: #334155 !important;
}

#trusted-manage-page .cv-card-light strong {
  color: #0F172A !important;
}

#trusted-manage-page .cv-card-light a {
  color: #0B5C66 !important;
}

/* =========================================================
   ADD CONTACT MODAL: Scoped to #add-form-modal
   (uses different structure than .modal-overlay/.modal-card)
   ========================================================= */

/* Force light color scheme */
#add-form-modal,
#add-form-modal * {
  color-scheme: light !important;
  -webkit-color-scheme: light !important;
}

/* Modal card (inner div) */
#add-form-modal > div {
  background: #F8FAFC !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
}

/* Headings */
#add-form-modal h2,
#add-form-modal h3,
#add-form-modal .form-group label {
  color: #0F172A !important;
}

/* All form inputs/selects/textarea */
#add-form-modal input,
#add-form-modal select,
#add-form-modal textarea {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  color: #0F172A !important;
  -webkit-text-fill-color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Placeholders */
#add-form-modal input::placeholder,
#add-form-modal textarea::placeholder {
  color: #64748B !important;
  -webkit-text-fill-color: #64748B !important;
}

/* Select dropdown */
#add-form-modal select {
  appearance: auto !important;
  -webkit-appearance: menulist !important;
}

#add-form-modal select option {
  background: #FFFFFF !important;
  color: #0F172A !important;
}

/* Focus ring */
#add-form-modal input:focus,
#add-form-modal select:focus,
#add-form-modal textarea:focus {
  outline: none !important;
  border-color: #2FA4A9 !important;
  box-shadow: 0 0 0 3px rgba(47,164,169,0.25) !important;
}

/* Checkbox/radio */
#add-form-modal input[type="checkbox"],
#add-form-modal input[type="radio"] {
  accent-color: #2FA4A9 !important;
}

/* Checkbox labels */
#add-form-modal .checkbox-item,
#add-form-modal .checkbox-item span {
  color: #0F172A !important;
}

/* Primary button */
#add-form-modal .btn-primary {
  background: #2FA4A9 !important;
  color: #071A1D !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  font-weight: 700 !important;
}

/* Secondary/Cancel button */
#add-form-modal .btn-secondary {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
  font-weight: 600 !important;
}

/* ================================
   TRUSTED PORTAL LIGHT THEME
   Match the Permissions page styling
================================== */

.trusted-portal-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
  color: var(--cv-text);
}

/* Override card styling for trusted portal */
.trusted-portal-content .card {
  background: var(--cv-surface) !important;
  border: 1px solid var(--cv-border) !important;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}

.trusted-portal-content .card-title {
  color: var(--cv-heading) !important;
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--cv-border) !important;
}

.trusted-portal-content .card p,
.trusted-portal-content .card li {
  color: var(--cv-muted) !important;
}

.trusted-portal-content .card strong {
  color: var(--cv-text) !important;
}

/* Success card styling (vault unlocked, all OK) */
.trusted-portal-content .card[style*="background: #d4edda"],
.trusted-portal-content .card[style*="background:#d4edda"] {
  background: rgba(16, 185, 129, 0.15) !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
}

.trusted-portal-content .card[style*="background: #d4edda"] .card-title,
.trusted-portal-content .card[style*="background:#d4edda"] .card-title {
  color: #10B981 !important;
  border-bottom-color: rgba(16, 185, 129, 0.3) !important;
}

.trusted-portal-content .card[style*="background: #d4edda"] p,
.trusted-portal-content .card[style*="background:#d4edda"] p {
  color: #6EE7B7 !important;
}

/* Warning card styling (escalation active) */
.trusted-portal-content .card[style*="background: #f8d7da"],
.trusted-portal-content .card[style*="background:#f8d7da"] {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}

.trusted-portal-content .card[style*="background: #f8d7da"] .card-title,
.trusted-portal-content .card[style*="background:#f8d7da"] .card-title {
  color: #F87171 !important;
  border-bottom-color: rgba(239, 68, 68, 0.3) !important;
}

.trusted-portal-content .card[style*="background: #f8d7da"] p,
.trusted-portal-content .card[style*="background:#f8d7da"] p {
  color: #FCA5A5 !important;
}

/* Info/contact card styling (green contact card) */
.trusted-portal-content .card[style*="background: #e2f0e8"],
.trusted-portal-content .card[style*="background:#e2f0e8"] {
  background: rgba(16, 185, 129, 0.12) !important;
  border-color: rgba(16, 185, 129, 0.25) !important;
}

.trusted-portal-content .card[style*="background: #e2f0e8"] .card-title,
.trusted-portal-content .card[style*="background:#e2f0e8"] .card-title {
  color: #10B981 !important;
  border-bottom-color: rgba(16, 185, 129, 0.25) !important;
}

.trusted-portal-content .card[style*="background: #e2f0e8"] p,
.trusted-portal-content .card[style*="background:#e2f0e8"] p {
  color: #6EE7B7 !important;
}

/* Yellow/warning card styling (immediate instructions) */
.trusted-portal-content .card[style*="background: #fff3cd"],
.trusted-portal-content .card[style*="background:#fff3cd"] {
  background: rgba(251, 191, 36, 0.15) !important;
  border-color: rgba(251, 191, 36, 0.3) !important;
}

.trusted-portal-content .card[style*="background: #fff3cd"] .card-title,
.trusted-portal-content .card[style*="background:#fff3cd"] .card-title {
  color: #FBBF24 !important;
  border-bottom-color: rgba(251, 191, 36, 0.3) !important;
}

.trusted-portal-content .card[style*="background: #fff3cd"] p,
.trusted-portal-content .card[style*="background:#fff3cd"] p {
  color: #FCD34D !important;
}

/* Contact buttons in trusted portal */
.trusted-portal-content .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s;
}

.trusted-portal-content .btn:hover {
  opacity: 0.9;
}

.trusted-portal-content .btn-primary {
  background: var(--cv-accent) !important;
  color: #071A1D !important;
}

/* Form elements in trusted portal */
.trusted-portal-content input[type="password"],
.trusted-portal-content input[type="text"] {
  background: var(--cv-bg) !important;
  border: 1px solid var(--cv-border) !important;
  color: var(--cv-text) !important;
  border-radius: 8px;
  padding: 12px;
}

.trusted-portal-content input::placeholder {
  color: var(--cv-muted) !important;
}

.trusted-portal-content label {
  color: var(--cv-text) !important;
}

/* Status indicators */
.trusted-portal-content .status-indicator {
  padding: 12px 16px;
  border-radius: 8px;
  font-weight: 500;
}

.trusted-portal-content .status-indicator.status-ok {
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
}

.trusted-portal-content .status-indicator.status-danger {
  background: rgba(239, 68, 68, 0.15);
  color: #F87171;
}

.trusted-portal-content .status-indicator.status-info {
  background: rgba(59, 130, 246, 0.15);
  color: #60A5FA;
}

/* Legal list styling */
.trusted-portal-content .legal-list {
  color: var(--cv-muted) !important;
  padding-left: 20px;
}

.trusted-portal-content .legal-list li {
  margin-bottom: 8px;
}

/* Page title */
.trusted-portal-content h1 {
  color: var(--cv-heading) !important;
  margin-bottom: 8px;
}

.trusted-portal-content > p {
  color: var(--cv-muted) !important;
  margin-bottom: 24px;
}

.sms-inline-warning {
  margin: 4px 0 8px 28px;
  padding: 8px 12px;
  background: var(--cv-warning-bg, #FFFBEB);
  border: 1px solid var(--cv-warning, #D97706);
  border-left: 3px solid var(--cv-warning, #D97706);
  border-radius: 6px;
  font-size: 13px;
  color: #92400e;
  line-height: 1.4;
}

.sms-inline-error {
  margin: 4px 0 8px 28px;
  padding: 8px 12px;
  background: var(--cv-danger-bg, #FEF2F2);
  border: 1px solid #fca5a5;
  border-left: 3px solid var(--cv-danger, #DC2626);
  border-radius: 6px;
  font-size: 13px;
  color: #991b1b;
  font-weight: 500;
  line-height: 1.4;
}

@keyframes cv-verify-highlight {
  0% { box-shadow: 0 0 0 3px rgba(47,164,169,0.5); }
  100% { box-shadow: 0 0 0 0 rgba(47,164,169,0); }
}

.cv-verify-highlight {
  animation: cv-verify-highlight 1.2s ease-out;
}

.save-btn-disabled-hint {
  font-size: 12px;
  color: var(--cv-warning, #D97706);
  margin-top: 4px;
  text-align: center;
}

.tc-sms-inline-warning {
  margin: 4px 0 8px 28px;
  padding: 8px 12px;
  background: var(--cv-warning-bg, #FFFBEB);
  border: 1px solid var(--cv-warning, #D97706);
  border-left: 3px solid var(--cv-warning, #D97706);
  border-radius: 6px;
  font-size: 13px;
  color: #92400e;
  line-height: 1.4;
}
.tc-sms-inline-warning a {
  color: #2FA4A9;
  font-weight: 600;
  text-decoration: underline;
}

.tc-sms-save-error {
  margin: 8px 0;
  padding: 8px 12px;
  background: var(--cv-danger-bg, #FEF2F2);
  border: 1px solid #fca5a5;
  border-left: 3px solid var(--cv-danger, #DC2626);
  border-radius: 6px;
  font-size: 13px;
  color: #991b1b;
  font-weight: 500;
  line-height: 1.4;
}

.tc-pending-badge {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 12px;
  background: rgba(245, 158, 11, 0.15);
  color: #d97706;
  font-weight: 600;
  white-space: nowrap;
}

@media (max-height: 500px), (orientation: landscape) and (max-height: 600px) {
  .modal-overlay .modal-card {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  .modal-overlay {
    align-items: stretch !important;
  }

  .modal-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    flex-shrink: 0 !important;
  }

  .modal-footer {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 10 !important;
    flex-shrink: 0 !important;
  }

  .modal-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    min-height: 0 !important;
  }
}