.app-toast {
  position: fixed;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(360px, calc(100vw - 2rem));
  padding: 0.85rem 1.1rem;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  z-index: 12000;
  animation: app-toast-in 0.25s ease;
}

@keyframes app-toast-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.app-toast--success {
  background: #0d9488;
  color: #fff;
  border: 1px solid #0f766e;
}

.app-toast--error {
  background: #dc2626;
  color: #fff;
  border: 1px solid #b91c1c;
}

.app-toast-icon {
  flex-shrink: 0;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
}

.app-toast-message {
  font-size: 0.9rem;
  line-height: 1.35;
}
/* Calming Blue & Light Color System for Student-Friendly Dashboard */

:root {
  /* MindAlgle brand (wordmark / accents) */
  --brand-blue-primary: #649ce4;
  --brand-blue-deep: #2e74b5;
  --brand-blue-bg-start: #e8f4fc;
  --brand-blue-bg-mid: #f0f7ff;
  --brand-blue-soft-tint: rgba(100, 156, 228, 0.12);

  /* Primary Blue Palette - Calming and Soothing */
  --primary-blue: #4A90E2;        /* Soft, calming blue */
  --primary-blue-light: #6BA3E8;  /* Lighter blue for hover states */
  --primary-blue-dark: #357ABD;   /* Darker blue for emphasis */
  --primary-blue-soft: #E8F2FC;   /* Very light blue for backgrounds */
  
  /* Secondary Blues */
  --sky-blue: #87CEEB;            /* Light sky blue */
  --powder-blue: #B0D4E8;         /* Powder blue */
  --ice-blue: #E0F4FF;            /* Ice blue for subtle backgrounds */
  
  /* White & Light Neutrals */
  --white: #FFFFFF;
  --off-white: #FAFBFC;
  --light-gray: #F5F7FA;
  --soft-gray: #E8ECF1;
  --warm-white: #FEFEFE;
  
  /* Text Colors */
  --text-primary: #2C3E50;        /* Dark blue-gray for readability */
  --text-secondary: #5A6C7D;      /* Medium gray-blue */
  --text-light: #8B9BAD;          /* Light gray-blue */
  --text-muted: #B0BEC5;          /* Muted text */
  
  /* Accent Colors - Calming Pastels */
  --mint-green: #A8E6CF;          /* Soft mint for success states */
  --lavender: #D4C5E8;            /* Soft lavender */
  --peach: #FFD3B6;               /* Warm peach */
  --soft-yellow: #FFEAA7;         /* Soft yellow for highlights */
  
  /* Semantic Colors - Soft & Calming */
  --success: #52C9A2;             /* Calming green */
  --success-light: #E8F8F3;       /* Light success background */
  --warning: #F5A623;             /* Soft orange */
  --warning-light: #FFF8E8;       /* Light warning background */
  --info: #4A90E2;                /* Info blue */
  --info-light: #E8F2FC;          /* Light info background */
  --error: #E74C3C;               /* Soft red */
  --error-light: #FFEBEE;         /* Light error background */
  
  /* Borders & Dividers */
  --border-light: #E1E8ED;        /* Very light border */
  --border-medium: #C8D6E0;       /* Medium border */
  --border-soft: #F0F4F8;         /* Soft border */
  
  /* Shadows - Soft & Subtle */
  --shadow-xs: 0 1px 2px rgba(74, 144, 226, 0.05);
  --shadow-sm: 0 2px 4px rgba(74, 144, 226, 0.08);
  --shadow-md: 0 4px 12px rgba(74, 144, 226, 0.12);
  --shadow-lg: var(--shadow-md);
  --shadow-xl: 0 12px 32px rgba(74, 144, 226, 0.18);
  
  /* Gradients - Calming & Soft */
  --gradient-primary: linear-gradient(135deg, #4A90E2 0%, #6BA3E8 100%);
  --gradient-soft: linear-gradient(135deg, #E8F2FC 0%, #F5F7FA 100%);
  --gradient-sky: linear-gradient(135deg, #87CEEB 0%, #B0D4E8 100%);
  --gradient-light: linear-gradient(135deg, #FFFFFF 0%, #F5F7FA 100%);
  --gradient-card: linear-gradient(135deg, #FFFFFF 0%, #FAFBFC 100%);
  
  /* Backgrounds */
  --bg-primary: #F5F7FA;          /* Main background */
  --bg-secondary: #FFFFFF;        /* Card backgrounds */
  --bg-tertiary: #FAFBFC;         /* Alternative background */
  --bg-hover: #F0F4F8;            /* Hover state */
  --bg-active: #E8F2FC;           /* Active state */
  
  /* Interactive States */
  --hover-overlay: rgba(74, 144, 226, 0.08);
  --focus-ring: var(--focus-ring);
  --active-overlay: rgba(74, 144, 226, 0.12);
  
  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.4s ease;
}

.app-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(4px);
}

.app-modal-card {
  width: 100%;
  max-width: min(440px, 100%);
  border-radius: 14px;
  padding: 1.25rem 1.35rem;
  background: linear-gradient(160deg, #1e293b 0%, #0f172a 100%);
  border: 1px solid rgba(100, 156, 228, 0.28);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
}

.app-modal-title {
  margin: 0 0 0.65rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: #e2e8f0;
}

.app-modal-body {
  margin: 0 0 1.15rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #cbd5e1;
  white-space: pre-line;
}

.app-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: flex-end;
}

.app-modal-btn {
  cursor: pointer;
  border-radius: 10px;
  padding: 0.45rem 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.app-modal-btn--primary {
  background: var(--brand-blue-deep);
  color: #f8fafc;
  border-color: rgba(100, 156, 228, 0.45);
}

.app-modal-btn--primary:hover {
  background: var(--brand-blue-primary);
}

.app-modal-btn--ghost {
  background: rgba(148, 163, 184, 0.12);
  color: #e2e8f0;
  border-color: rgba(148, 163, 184, 0.35);
}

.app-modal-btn--ghost:hover {
  background: rgba(148, 163, 184, 0.2);
}

.app-modal-btn--danger {
  background: rgba(220, 38, 38, 0.85);
  color: #fff;
  border-color: rgba(248, 113, 113, 0.5);
}

.app-modal-btn--danger:hover {
  background: rgba(185, 28, 28, 0.95);
}
.landing {
  min-height: 100vh;
  background: linear-gradient(135deg, #FEFEFE 0%, #FAF8F5 50%, #F5F7FA 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.landing-container {
  max-width: 1200px;
  width: 100%;
  text-align: center;
  color: var(--text-primary);
}

.landing-header {
  margin-bottom: 4rem;
  animation: fadeInDown 1s ease-out;
}

.logo-large {
  width: 200px;
  height: 200px;
  margin: 0 auto 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-hero {
  width: 200px;
  height: 200px;
  border-radius: 20px;
  object-fit: cover;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  animation: logoBounce 2s ease-in-out infinite, fadeInScale 1s ease-out;
  transition: transform 0.3s ease;
}

.logo-hero:hover {
  transform: scale(1.05) rotate(5deg);
}

.landing-title {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  letter-spacing: 2px;
  color: var(--text-primary);
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: fadeInUp 1s ease-out 0.3s backwards;
}

.landing-subtitle {
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--text-secondary);
  animation: fadeInUp 1s ease-out 0.5s backwards;
}

.landing-content {
  margin-bottom: 4rem;
}

.landing-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.feature-card {
  background: var(--white);
  padding: 2rem;
  border-radius: 15px;
  border: 2px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
  animation: fadeInUp 0.8s ease-out backwards;
  color: var(--text-primary);
}

.feature-card:nth-child(1) {
  animation-delay: 0.7s;
}

.feature-card:nth-child(2) {
  animation-delay: 0.9s;
}

.feature-card:nth-child(3) {
  animation-delay: 1.1s;
}

.feature-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: var(--shadow-md);
  border-color: var(--primary-blue);
  background: var(--bg-hover);
}

.feature-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.feature-card h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--text-primary);
}

.feature-card p {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.landing-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}

.btn-primary,
.btn-secondary {
  padding: 1rem 2.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Inter', sans-serif;
}

.btn-primary {
  background: var(--gradient-primary);
  color: white;
  min-width: 200px;
  padding: 1.25rem 3rem;
  font-size: 1.2rem;
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  background: var(--gradient-primary);
  transform: scale(1.05);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background-color: transparent;
  color: var(--primary-blue);
  border: 2px solid var(--primary-blue);
}

.btn-secondary:hover {
  background-color: var(--primary-blue-soft);
  transform: scale(1.05);
  box-shadow: var(--shadow-sm);
}

.landing-actions {
  animation: fadeInUp 1s ease-out 1.3s backwards;
}

.landing-footer {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border-light);
  color: var(--text-secondary);
  animation: fadeIn 1s ease-out 1.5s backwards;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes logoBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

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

.login {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(
    145deg,
    var(--brand-blue-bg-start, #e8f4fc) 0%,
    var(--brand-blue-bg-mid, #f5f7fa) 45%,
    #ffffff 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.login-theme-toggle {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 5;
}

.login--refined .login-container {
  max-width: 520px;
}

/* Minimal login (all roles) — roomier layout */
.login--minimal {
  padding: 2rem 1.75rem;
}

.login--minimal .login-container--minimal {
  max-width: 500px;
  padding: 2.5rem 2.5rem 2.75rem;
  border-radius: 22px;
}

.login--minimal .login-header {
  margin-bottom: 1.75rem;
}

.login--minimal .logo-medium,
.login--minimal .logo-auth {
  width: 100px;
  height: 100px;
}

.login--minimal .logo-medium {
  margin-bottom: 1.15rem;
}

.login--minimal .login-header h1 {
  font-size: 1.9rem;
}

.login--minimal .login-tagline {
  font-size: 1rem;
}

.login--minimal .login-intro {
  margin-bottom: 1.65rem;
}

.login--minimal .login-intro-title {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.login--minimal .login-intro-text {
  margin-bottom: 0.5rem;
}

.login-portal-banner {
  margin: 0 0 1.25rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  background: rgba(74, 144, 226, 0.08);
  border: 1px solid rgba(74, 144, 226, 0.18);
}

.login-portal-label {
  margin: 0;
  font-size: 0.95rem;
  color: #334155;
}

.login-portal-picker select {
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  font-size: 1rem;
  background: #fff;
}

.login-portal-hint {
  margin: 0.5rem 0 0;
  font-size: 0.82rem;
  color: #64748b;
  line-height: 1.4;
}

.login--minimal .login-intro-text {
  font-size: 0.98rem;
  line-height: 1.55;
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
}

.login--minimal .login-form {
  gap: 1.5rem;
}

.login--minimal .form-group {
  gap: 0.55rem;
}

.login--minimal .form-group label {
  font-size: 0.92rem;
}

.login--minimal .form-group input {
  padding: 1rem 1.05rem;
  font-size: 1.02rem;
  border-radius: 12px;
}

.login--minimal .login-form-lead {
  margin-bottom: 0.85rem;
  font-size: 0.82rem;
  letter-spacing: 0.07em;
}

.login--minimal .login-button {
  padding: 1.05rem 1.15rem;
  font-size: 1.08rem;
  border-radius: 14px;
  margin-top: 0.35rem;
}

.login--minimal .login-create-below {
  margin-top: 1rem;
  margin-bottom: 0.25rem;
}

.login--minimal .login-cta-outline {
  padding: 1rem 1.15rem;
  font-size: 1.05rem;
  border-radius: 14px;
}

.login--minimal .login-footer {
  margin-top: 2rem;
  padding-top: 1.6rem;
  font-size: 0.92rem;
}

.login--minimal .login-footer-muted {
  margin: 0.85rem 0 0;
  font-size: 0.82rem;
  line-height: 1.6;
}

.login-create-below {
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
}

.login-cta-outline {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 2px solid var(--brand-blue-primary, #649ce4);
  background: #fff;
  color: var(--brand-blue-deep, #2e74b5);
  font-size: 1rem;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  text-decoration: none;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.login-cta-outline:hover {
  background: var(--brand-blue-soft-tint, rgba(100, 156, 228, 0.12));
  border-color: var(--brand-blue-deep, #2e74b5);
  box-shadow: 0 4px 14px rgba(46, 116, 181, 0.15);
}

.login-form-lead {
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin: 0 0 0.5rem;
  text-align: center;
}

.login-container {
  background: white;
  border-radius: 20px;
  padding: 2rem 2.25rem 2.5rem;
  width: 100%;
  box-shadow: 0 24px 64px rgba(46, 116, 181, 0.12);
  border: 1px solid var(--border-light, #e1e8ed);
}

.login-header {
  text-align: center;
  margin-bottom: 1.25rem;
}

.logo-medium {
  width: 88px;
  height: 88px;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-auth {
  width: 88px;
  height: 88px;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 8px 24px rgba(46, 116, 181, 0.2);
}

.login-header h1 {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--brand-blue-deep, #2e74b5);
  margin-bottom: 0.25rem;
  letter-spacing: -0.02em;
}

.login-tagline {
  color: var(--text-secondary);
  font-size: 0.95rem;
  font-weight: 600;
}

/* Audience tabs */
.login-audience {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.login-audience-btn {
  border: 1px solid var(--border-light, #e1e8ed);
  background: var(--off-white, #fafbfc);
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.login-audience-btn:hover {
  border-color: var(--brand-blue-primary, #649ce4);
  color: var(--brand-blue-deep, #2e74b5);
}

.login-audience-btn.is-active {
  background: var(--brand-blue-soft-tint, rgba(100, 156, 228, 0.15));
  border-color: var(--brand-blue-primary, #649ce4);
  color: var(--brand-blue-deep, #2e74b5);
}

.login-intro {
  margin-bottom: 1.25rem;
  text-align: center;
}

.login-intro-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.35rem;
}

.login-intro-text {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.login-schools {
  background: var(--brand-blue-soft-tint, rgba(100, 156, 228, 0.08));
  border: 1px solid rgba(100, 156, 228, 0.25);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  margin-bottom: 1.1rem;
}

.login-schools-title {
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand-blue-deep, #2e74b5);
  margin-bottom: 0.35rem;
}

.login-schools-hint {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin-bottom: 0.65rem;
}

.login-schools-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 9.5rem;
  overflow-y: auto;
}

.login-schools-item {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.45rem 0.55rem;
  background: #fff;
  border-radius: 8px;
  border: 1px solid var(--border-soft, #f0f4f8);
}

.login-schools-name {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text-primary);
}

.login-schools-meta {
  font-size: 0.75rem;
  color: var(--text-light, #8b9bad);
}

.login-checklist {
  margin-bottom: 1.25rem;
}

.login-checklist-title {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.45rem;
}

.login-checklist-ul {
  margin: 0;
  padding-left: 1.15rem;
  color: var(--text-secondary);
  font-size: 0.82rem;
  line-height: 1.5;
}

.login-checklist-ul li {
  margin-bottom: 0.35rem;
}

.login-success {
  background-color: var(--success-light, #e8f8f3) !important;
  color: #155724 !important;
  border: 1px solid #c3e6cb !important;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.form-group label {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.88rem;
}

.form-group input {
  padding: 0.85rem 0.95rem;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  font-size: 1rem;
  font-family: 'Inter', sans-serif;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.form-group input:focus {
  outline: none;
  border-color: var(--brand-blue-primary, #649ce4);
  box-shadow: 0 0 0 3px var(--brand-blue-soft-tint, rgba(100, 156, 228, 0.2));
}

.form-options {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.82rem;
  flex-wrap: wrap;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  color: var(--text-secondary);
}

.checkbox-label input[type='checkbox'] {
  cursor: pointer;
  width: 1rem;
  height: 1rem;
}

.login-button {
  padding: 0.95rem 1rem;
  background: linear-gradient(135deg, var(--brand-blue-primary, #649ce4), var(--brand-blue-deep, #2e74b5));
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition:
    transform 0.15s ease,
    box-shadow 0.2s ease;
  margin-top: 0.25rem;
  box-shadow: 0 8px 20px rgba(46, 116, 181, 0.25);
}

.login-button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(46, 116, 181, 0.3);
}

.login-button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.login-footer {
  margin-top: 1.75rem;
  text-align: center;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-light, #e1e8ed);
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.55;
}

.login-footer-muted {
  font-size: 0.78rem;
  color: var(--text-light, #8b9bad);
  margin: 0.75rem 0;
}

.login-footer a {
  color: var(--brand-blue-deep, #2e74b5);
  text-decoration: none;
  font-weight: 600;
}

.login-footer a:hover {
  text-decoration: underline;
}

.error-message {
  background: var(--error-light, #ffebee);
  color: var(--error, #c0392b);
  padding: 0.85rem 1rem;
  border-radius: 10px;
  margin-bottom: 1rem;
  border: 1px solid #fcc;
  font-size: 0.88rem;
}

@media (max-width: 480px) {
  .login-container {
    padding: 1.5rem 1.25rem;
  }

  .login--minimal {
    padding: 1.25rem 1rem;
  }

  .login--minimal .login-container--minimal {
    padding: 1.85rem 1.35rem 2.1rem;
  }

  .login-audience-btn {
    font-size: 0.72rem;
    padding: 0.4rem 0.55rem;
  }
}

/* Night mode — full login page + card (readable light text on dark) */
[data-theme='dark'] .login,
[data-theme='dark'] .login.login--refined,
[data-theme='dark'] .login.login--minimal {
  background: linear-gradient(145deg, #0f1622 0%, #121a26 45%, #1a2332 100%) !important;
  color: #e8edf4 !important;
}

[data-theme='dark'] .login .login-container,
[data-theme='dark'] .login .login-container--minimal,
[data-theme='dark'] .login.login--minimal .login-container--minimal {
  background: #1a2332 !important;
  background-color: #1a2332 !important;
  background-image: none !important;
  border-color: #3d4f66 !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5) !important;
  color: #e8edf4 !important;
}

[data-theme='dark'] .login h1,
[data-theme='dark'] .login h2,
[data-theme='dark'] .login .login-header h1,
[data-theme='dark'] .login .login-intro-title {
  color: #9ec5f0 !important;
  -webkit-text-fill-color: #9ec5f0 !important;
  background: none !important;
}

[data-theme='dark'] .login p,
[data-theme='dark'] .login label,
[data-theme='dark'] .login span,
[data-theme='dark'] .login .login-tagline,
[data-theme='dark'] .login .login-intro-text,
[data-theme='dark'] .login .login-form-lead,
[data-theme='dark'] .login .login-portal-label,
[data-theme='dark'] .login .login-portal-hint,
[data-theme='dark'] .login .login-footer,
[data-theme='dark'] .login .login-footer-muted,
[data-theme='dark'] .login .form-group label {
  color: #d0dae8 !important;
  -webkit-text-fill-color: #d0dae8 !important;
}

[data-theme='dark'] .login .login-portal-banner {
  background: #243044 !important;
  border-color: #3d4f66 !important;
}

[data-theme='dark'] .login .form-group input,
[data-theme='dark'] .login .login-portal-picker select,
[data-theme='dark'] .login input,
[data-theme='dark'] .login select {
  background: #121a26 !important;
  color: #e8edf4 !important;
  border-color: #4a5f78 !important;
}

[data-theme='dark'] .login .form-group input::placeholder {
  color: #7d8fa6 !important;
}

[data-theme='dark'] .login .login-audience-btn,
[data-theme='dark'] .login .login-audience-btn.is-active,
[data-theme='dark'] .login .login-audience-btn[aria-pressed='true'],
[data-theme='dark'] .login .login-cta-outline {
  background: #243044 !important;
  color: #d0dae8 !important;
  border-color: #4a5f78 !important;
}

[data-theme='dark'] .login .login-cta-outline:hover {
  background: #2a3850 !important;
  color: #9ec5f0 !important;
}

[data-theme='dark'] .login .error-message,
[data-theme='dark'] .login .login-error {
  background: #3d2020 !important;
  color: #fca5a5 !important;
  border-color: #7f1d1d !important;
}

[data-theme='dark'] .login .success-message,
[data-theme='dark'] .login .login-success {
  background: #1a3d32 !important;
  color: #86efac !important;
  border-color: #2d6b5a !important;
}
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--border-medium);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.theme-toggle:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--primary-blue);
}

.theme-toggle__icon {
  font-size: 1rem;
  line-height: 1;
}

.theme-toggle--compact {
  padding: 0.4rem 0.55rem;
}

.theme-toggle--compact .theme-toggle__label {
  display: none;
}

[data-theme='dark'] .theme-toggle {
  background: var(--bg-tertiary);
  border-color: var(--border-light);
}
.create-account {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.create-account-container {
  background: white;
  border-radius: 20px;
  padding: 3rem;
  max-width: 550px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-height: 90vh;
  overflow-y: auto;
}

.create-account-container--cbo {
  max-width: 640px;
}

.form-hint-block {
  margin: 0;
  line-height: 1.45;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.form-group textarea {
  padding: 0.9rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 1rem;
  font-family: 'Inter', sans-serif;
  transition: border-color 0.3s ease;
  resize: vertical;
  min-height: 5rem;
}

.form-group textarea:focus {
  outline: none;
  border-color: var(--primary-blue);
}

.create-account-header {
  text-align: center;
  margin-bottom: 2rem;
}

.logo-medium {
  width: 100px;
  height: 100px;
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-auth {
  width: 100px;
  height: 100px;
  border-radius: 15px;
  object-fit: cover;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

.create-account-header h1 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary-blue);
  margin-bottom: 0.5rem;
}

.create-account-header p {
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.error-message {
  background: #fee;
  color: #c33;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  border: 1px solid #fcc;
  font-size: 0.9rem;
}

.create-account-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  font-weight: 500;
  color: var(--text-primary);
  font-size: 0.9rem;
}

.form-group input,
.form-group select {
  padding: 0.9rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 1rem;
  font-family: 'Inter', sans-serif;
  transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--primary-blue);
}

.form-hint {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: -0.5rem;
}

.create-account-button {
  padding: 1rem;
  background-color: var(--primary-blue);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: background-color 0.3s ease;
  margin-top: 0.5rem;
}

.create-account-button:hover:not(:disabled) {
  background-color: var(--primary-blue);
}

.create-account-button:disabled {
  background-color: var(--text-muted);
  cursor: not-allowed;
}

.create-account-footer {
  margin-top: 2rem;
  text-align: center;
  padding-top: 1.5rem;
  border-top: 1px solid #e0e0e0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.create-account-footer a {
  color: var(--primary-blue);
  text-decoration: none;
  font-weight: 500;
}

.create-account-footer a:hover {
  text-decoration: underline;
}

@media (max-width: 600px) {
  .form-row {
    grid-template-columns: 1fr;
  }
  
  .create-account-container {
    padding: 2rem 1.5rem;
  }
}
.settings-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 2rem;
}

.settings-container {
  max-width: 800px;
  margin: 0 auto;
  background: white;
  border-radius: 12px;
  padding: 2.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.settings-header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid #e0e0e0;
}

.settings-header h1 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary-blue);
  margin-bottom: 0.5rem;
}

.settings-header p {
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.error-message {
  background: #fee;
  color: #c33;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  border: 1px solid #fcc;
  font-size: 0.9rem;
}

.success-message {
  background: #efe;
  color: #3c3;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  border: 1px solid #cfc;
  font-size: 0.9rem;
}

.settings-form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.settings-section {
  padding: 1.5rem;
  background: #f8f9fa;
  border-radius: 8px;
}

.settings-section h2 {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--primary-blue);
  margin-bottom: 1rem;
}

.section-note {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
  font-style: italic;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.form-group label {
  font-weight: 500;
  color: var(--text-primary);
  font-size: 0.9rem;
}

.form-group input {
  padding: 0.9rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 1rem;
  font-family: 'Inter', sans-serif;
  transition: border-color 0.3s ease;
}

.form-group input:focus {
  outline: none;
  border-color: var(--primary-blue);
}

.settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 2px solid #e0e0e0;
}

.btn-primary {
  padding: 0.75rem 2rem;
  background-color: var(--primary-blue);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-primary:hover:not(:disabled) {
  background-color: var(--primary-blue);
}

.btn-primary:disabled {
  background-color: var(--text-muted);
  cursor: not-allowed;
}

.btn-secondary {
  padding: 0.75rem 2rem;
  background-color: #e0e0e0;
  color: var(--text-primary);
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-secondary:hover {
  background-color: #d0d0d0;
}

.settings-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-size: 1.2rem;
  color: var(--text-secondary);
}

/* Profile Image Section */
.profile-image-section {
  background: white;
  border: 2px solid #e0e0e0;
}

.profile-image-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem;
}

.profile-image-preview-large {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--primary-blue);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  background: linear-gradient(135deg, var(--primary-blue), var(--primary-blue));
}

.profile-image-preview-large img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profile-image-placeholder-large {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-blue), var(--primary-blue));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  font-weight: 600;
  border: 4px solid var(--primary-blue);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.profile-image-edit {
  width: 100%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.profile-image-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--primary-blue);
  cursor: pointer;
  padding: 0.75rem 1rem;
  background: #f0f7ff;
  border-radius: 8px;
  border: 2px dashed var(--primary-blue);
  transition: all 0.2s;
  justify-content: center;
}

.profile-image-label:hover {
  background: #e0f0ff;
  border-color: var(--primary-blue);
}

.edit-icon {
  font-size: 1.2rem;
}

.profile-image-input {
  padding: 0.9rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 1rem;
  font-family: 'Inter', sans-serif;
  transition: border-color 0.3s ease;
  width: 100%;
}

.profile-image-input:focus {
  outline: none;
  border-color: var(--primary-blue);
}

.profile-image-hint {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

.profile-image-hint code {
  background: #f0f0f0;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
  color: var(--primary-blue);
}

.upload-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.btn-upload {
  padding: 0.75rem 1.5rem;
  background: var(--primary-blue);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.9rem;
}

.btn-upload:hover:not(:disabled) {
  background: #4a3428;
  transform: translateY(-2px);
}

.btn-upload:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
}

.btn-cancel-upload {
  padding: 0.75rem 1.5rem;
  background: #e0e0e0;
  color: var(--text-primary);
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.9rem;
}

.btn-cancel-upload:hover {
  background: #d0d0d0;
}

.profile-image-url-section {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #e0e0e0;
}

.url-label {
  display: block;
  font-weight: 500;
  color: var(--text-primary);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.profile-preview {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
}

.profile-preview img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--primary-blue);
}

.settings-google-calendar input {
  font-family: inherit;
}

.settings-field-hint {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-secondary, #555);
}

@media (max-width: 600px) {
  .form-row {
    grid-template-columns: 1fr;
  }
  
  .settings-container {
    padding: 1.5rem;
  }

  .profile-image-preview-large,
  .profile-image-placeholder-large {
    width: 120px;
    height: 120px;
    font-size: 2.5rem;
  }
}

.dashboard-selector {
  min-height: 100vh;
  background: var(--gradient-primary);
  padding: 3rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: fadeIn 0.5s ease-in;
}

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

.selector-header {
  text-align: center;
  margin-bottom: 3rem;
  color: white;
  animation: fadeInDown 0.6s ease-out;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.logo-small {
  width: 80px;
  height: 80px;
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-selector {
  width: 80px;
  height: 80px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

.selector-header h1 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.selector-header p {
  font-size: 1.1rem;
  opacity: 0.9;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  width: 100%;
  margin-bottom: 3rem;
}

.dashboard-card {
  background: white;
  border-radius: 15px;
  padding: 2.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  animation: fadeInUp 0.6s ease-out backwards;
}

.dashboard-card:nth-child(1) {
  animation-delay: 0.1s;
}

.dashboard-card:nth-child(2) {
  animation-delay: 0.2s;
}

.dashboard-card:nth-child(3) {
  animation-delay: 0.3s;
}

.dashboard-card:nth-child(4) {
  animation-delay: 0.4s;
}

.dashboard-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dashboard-image-wrapper {
  width: 100%;
  height: 200px;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.dashboard-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.dashboard-card:hover .dashboard-image {
  transform: scale(1.05);
}

.dashboard-card h2 {
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--primary-blue);
  margin-bottom: 1rem;
}

.dashboard-card p {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.dashboard-arrow {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  font-size: 1.5rem;
  color: var(--primary-blue);
  font-weight: bold;
}

.selector-footer {
  margin-top: auto;
}

.back-button {
  padding: 0.8rem 1.5rem;
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all 0.3s ease;
}

.back-button:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
}

.notifications-container {
  position: relative;
}

.notifications-bell {
  position: relative;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notifications-bell:hover {
  background: rgba(0, 0, 0, 0.05);
}

.notification-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: #ef4444;
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.15rem 0.4rem;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
  line-height: 1.2;
}

.notifications-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  width: 420px;
  max-height: 600px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e5e7eb;
}

.notifications-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
}

.notifications-header h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #111827;
}

.mark-all-read-btn {
  background: none;
  border: none;
  color: #3b82f6;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.mark-all-read-btn:hover {
  background: #eff6ff;
}

.mark-all-read-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.notifications-list {
  overflow-y: auto;
  max-height: 400px;
}

.notification-item {
  border-bottom: 1px solid #f3f4f6;
  transition: all 0.3s ease;
  position: relative;
  background: white;
}

.notification-item:last-child {
  border-bottom: none;
}

.notification-item.unread {
  background: #f8fafc;
  border-left: 4px solid #3b82f6;
}

.notification-item.unread:hover {
  background: #f1f5f9;
}

.notification-item.expanded {
  background: #fafbfc;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.notification-main {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  align-items: flex-start;
}

.notification-icon {
  font-size: 1.75rem;
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  padding-top: 0.15rem;
  width: 40px;
  height: 40px;
  background: #f3f4f6;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
}

.notification-item.unread .notification-icon {
  background: #dbeafe;
}

.notification-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.notification-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.notification-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
}

.notification-title {
  font-weight: 600;
  color: #111827;
  font-size: 0.95rem;
  line-height: 1.4;
}

.unread-dot {
  width: 8px;
  height: 8px;
  background: #3b82f6;
  border-radius: 50%;
  flex-shrink: 0;
}

.notification-time {
  color: #9ca3af;
  font-size: 0.75rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.notification-message {
  color: #6b7280;
  font-size: 0.875rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: all 0.3s ease;
}

.notification-message.expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

.notification-actions {
  display: flex;
  gap: 0.25rem;
  align-items: flex-start;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.notification-item:hover .notification-actions {
  opacity: 1;
}

.notification-expand,
.notification-delete {
  background: none;
  border: none;
  color: #9ca3af;
  font-size: 0.875rem;
  cursor: pointer;
  padding: 0.375rem;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.notification-expand {
  font-size: 0.75rem;
  color: #6b7280;
}

.notification-expand:hover {
  background: #f3f4f6;
  color: #3b82f6;
}

.notification-delete:hover {
  background: #fee2e2;
  color: #dc2626;
}

.notification-details {
  padding: 0 1.25rem 1rem 1.25rem;
  margin-left: 3.5rem;
  border-top: 1px solid #e5e7eb;
  padding-top: 1rem;
  margin-top: 0.5rem;
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    max-height: 500px;
    transform: translateY(0);
  }
}

.notification-detail-row {
  display: flex;
  gap: 0.75rem;
  padding: 0.5rem 0;
  font-size: 0.875rem;
}

.detail-label {
  color: #6b7280;
  font-weight: 500;
  min-width: 100px;
  flex-shrink: 0;
}

.detail-value {
  color: #111827;
  font-weight: 400;
}

.no-notifications {
  padding: 3rem 1.5rem;
  text-align: center;
  color: #9ca3af;
}

.no-notifications p {
  margin: 0;
  font-size: 0.9rem;
}

/* Scrollbar styling */
.notifications-list::-webkit-scrollbar {
  width: 6px;
}

.notifications-list::-webkit-scrollbar-track {
  background: #f3f4f6;
}

.notifications-list::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

.notifications-list::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

.postlogin-checkin-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10040;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  overflow-y: auto;
  animation: postlogin-fade-in 0.3s ease;
}

@keyframes postlogin-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.postlogin-checkin-card {
  width: 100%;
  max-width: 420px;
  background: linear-gradient(165deg, #ffffff 0%, #f0fdfa 40%, #fffbeb 100%);
  border-radius: 20px;
  padding: 1.75rem 1.5rem 1.4rem;
  box-shadow:
    0 24px 64px rgba(15, 23, 42, 0.16),
    0 0 0 1px rgba(255, 255, 255, 0.85) inset;
  text-align: center;
  animation: postlogin-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes postlogin-pop {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.postlogin-checkin-emoji {
  font-size: 2.5rem;
  line-height: 1;
  margin-bottom: 0.35rem;
}

.postlogin-checkin-title {
  margin: 0 0 0.65rem;
  font-size: 1.35rem;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.postlogin-checkin-body {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #475569;
  font-weight: 600;
}

.postlogin-checkin-sub {
  margin: 0 0 1.25rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: #64748b;
  font-weight: 650;
}

.postlogin-checkin-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.postlogin-checkin-primary {
  width: 100%;
  border: none;
  border-radius: 12px;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  font-weight: 900;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, #0d9488, #0ea5e9 50%, #7c3aed);
  box-shadow: 0 8px 24px rgba(13, 148, 136, 0.35);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.postlogin-checkin-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(124, 58, 237, 0.3);
}

.postlogin-checkin-primary:active {
  transform: scale(0.99);
}

.postlogin-checkin-secondary {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 0.6rem 1rem;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  color: #64748b;
  background: #fff;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.postlogin-checkin-secondary:hover {
  background: #f8fafc;
  color: #334155;
}
.student-dashboard-header {
  background: white;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid var(--border-light);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  min-height: 70px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-left-section {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.header-logo {
  width: 40px;
  height: 40px;
  border-radius: 8px;
}

.logo-text {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.5px;
}

.header-navigation {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.nav-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.nav-button:hover {
  background: #f5f5f5;
  color: var(--text-primary);
}

.nav-button.active {
  background: var(--gradient-primary);
  color: white;
  box-shadow: var(--shadow-sm);
}

.nav-button.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--primary-blue);
  border-radius: 3px 3px 0 0;
}

.nav-icon {
  font-size: 1.1rem;
}

.nav-label {
  font-weight: 500;
}

.header-right-section {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.user-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}

.user-avatar-container {
  position: relative;
}

.user-avatar {
  cursor: pointer;
  transition: transform 0.2s ease;
}

.user-avatar:hover {
  transform: scale(1.05);
}

.student-dashboard-header .avatar-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-blue), var(--primary-blue));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.student-dashboard-header .avatar-image {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--primary-blue);
  display: block;
}

.student-dashboard-header .user-avatar:hover .avatar-circle,
.student-dashboard-header .user-avatar:hover .avatar-image {
  box-shadow: 0 4px 12px var(--border-light);
}

/* Dropdown Menu */
.user-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  min-width: 250px;
  z-index: 1000;
  animation: slideDownDropdown 0.2s ease;
  overflow: hidden;
  border: 1px solid #e0e0e0;
}

@keyframes slideDownDropdown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dropdown-header {
  padding: 1rem;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
}

.dropdown-user-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.dropdown-avatar {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-blue), var(--primary-blue));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1rem;
  flex-shrink: 0;
}

.dropdown-avatar-image {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--primary-blue);
  display: block;
  flex-shrink: 0;
}

.dropdown-user-details {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.dropdown-name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown-email {
  font-size: 0.85rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown-divider {
  height: 1px;
  background: #e0e0e0;
  margin: 0;
}

.dropdown-item {
  width: 100%;
  padding: 0.875rem 1rem;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--text-primary);
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.dropdown-item:hover {
  background-color: #f5f5f5;
}

.dropdown-item:active {
  background-color: #e8e8e8;
}

.dropdown-icon {
  font-size: 1.1rem;
  width: 20px;
  text-align: center;
}

/* Responsive */
@media (max-width: 968px) {
  .header-navigation {
    gap: 0.25rem;
  }
  
  .nav-button {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
  }
  
  .nav-label {
    display: none;
  }
  
  .user-name {
    display: none;
  }
}
.welcome-message-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.welcome-header {
  animation: fadeInDown 0.6s ease-out;
}

.welcome-header--with-mascot {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.welcome-mascot {
  flex-shrink: 0;
  width: 112px;
  height: 112px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(145deg, #e0f2fe 0%, #f0fdf4 50%, #fef3c7 100%);
  border: 2px solid rgba(74, 144, 226, 0.25);
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

.welcome-mascot--static {
  padding: 0;
  overflow: hidden;
}

.welcome-mascot-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  transform-origin: 55% 85%;
  animation: welcome-mascot-bob 2.8s ease-in-out infinite;
}

@keyframes welcome-mascot-bob {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  20% {
    transform: translateY(-5px) rotate(2.5deg);
  }
  40% {
    transform: translateY(-7px) rotate(-1.5deg);
  }
  60% {
    transform: translateY(-5px) rotate(2deg);
  }
  80% {
    transform: translateY(-2px) rotate(-1deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .welcome-mascot-img {
    animation: none;
  }
}

.welcome-mascot--lottie {
  padding: 2px;
  background: linear-gradient(145deg, #fdf2f8 0%, #e0f2fe 50%, #fef3c7 100%);
}

.welcome-mascot-lottie-canvas {
  display: block;
  width: 112px !important;
  height: 112px !important;
  object-fit: contain;
}

.welcome-mascot-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.welcome-mascot--fallback {
  font-size: 3rem;
  line-height: 1;
}

.welcome-mascot-emoji {
  animation: wave-hand 1.2s ease-in-out infinite;
  display: block;
  transform-origin: 70% 70%;
}

@keyframes wave-hand {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(16deg);
  }
  75% {
    transform: rotate(-10deg);
  }
}

.welcome-header-copy {
  flex: 1;
  min-width: 200px;
}

.welcome-hi {
  margin: 0 0 0.2rem 0;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--primary-blue);
  letter-spacing: -0.02em;
  animation: fadeIn 0.7s ease-out 0.05s backwards;
}

.welcome-title {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--primary-blue);
  margin: 0 0 0.5rem 0;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue) 50%, var(--primary-blue) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% 200%;
  animation: gradientShift 3s ease-in-out infinite;
}

@keyframes gradientShift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.welcome-subtitle {
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin: 0;
  font-weight: 500;
  animation: fadeIn 0.8s ease-out 0.2s backwards;
}

.motivational-tip-card {
  background: linear-gradient(135deg, #faf8f5 0%, #f5f3f0 100%);
  border-radius: 16px;
  padding: 1.5rem;
  border-left: 4px solid var(--primary-blue);
  box-shadow: 0 4px 12px var(--border-light);
  display: flex;
  align-items: center;
  gap: 1.25rem;
  position: relative;
  overflow: hidden;
  animation: slideInUp 0.8s ease-out 0.3s backwards;
  transition: all 0.3s ease;
}

.motivational-tip-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(135deg, rgba(74, 144, 226, 0.02) 0%, var(--calm-blue-50) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.motivational-tip-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--shadow-medium);
}

.motivational-tip-card:hover::before {
  opacity: 1;
}

.tip-icon-wrapper {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.tip-icon {
  font-size: 2rem;
}

.tip-content {
  flex: 1;
}

.tip-message {
  font-size: 1rem;
  color: var(--primary-blue);
  margin: 0;
  font-weight: 500;
  line-height: 1.6;
  animation: fadeIn 0.5s ease-out;
}

.tip-indicators {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}

.tip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transition: all 0.3s ease;
  cursor: pointer;
}

.tip-dot.active {
  width: 10px;
  height: 10px;
  box-shadow: 0 0 8px currentColor;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .welcome-header--with-mascot {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .welcome-mascot {
    width: 96px;
    height: 96px;
  }

  .welcome-hi {
    font-size: 1.2rem;
  }

  .welcome-title {
    font-size: 1.75rem;
  }

  .welcome-subtitle {
    font-size: 1rem;
  }

  .motivational-tip-card {
    flex-direction: column;
    text-align: center;
  }

  .tip-indicators {
    flex-direction: row;
  }
}

.wellness-score-container {
  text-align: center;
  background: var(--white);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 12px var(--border-light);
  border: 1px solid var(--border-light);
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
}

.wellness-score-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}

.wellness-score-container:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px var(--shadow-medium);
}

.wellness-score-container:hover::before {
  transform: scaleX(1);
}

.wellness-score-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary-blue);
  margin-bottom: 1.5rem;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.wellness-score-display {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.5rem;
}

.wellness-score-value {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.score-number {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
}

.score-total {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.wellness-score-message {
  font-size: 0.95rem;
  color: var(--text-secondary);
  font-style: italic;
  padding: 0 1rem;
}

.dashboard-grid-container {
  width: 100%;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.dashboard-card {
  background: var(--white);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: all 0.4s ease;
  border: 2px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  overflow: hidden;
}

.dashboard-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--card-top-border, #E1E8ED);
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Varied border colors for dashboard cards */
.dashboard-card:nth-child(1) {
  border-color: #4CAF50;
}
.dashboard-card:nth-child(1)::before {
  background: #4CAF50;
}
.dashboard-card:nth-child(2) {
  border-color: #FF9800;
}
.dashboard-card:nth-child(2)::before {
  background: #FF9800;
}
.dashboard-card:nth-child(3) {
  border-color: #9C27B0;
}
.dashboard-card:nth-child(3)::before {
  background: #9C27B0;
}
.dashboard-card:nth-child(4) {
  border-color: #00BCD4;
}
.dashboard-card:nth-child(4)::before {
  background: #00BCD4;
}

.dashboard-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: var(--shadow-md);
  background: var(--bg-hover);
}
.dashboard-card:nth-child(1):hover {
  border-color: #388E3C;
}
.dashboard-card:nth-child(2):hover {
  border-color: #F57C00;
}
.dashboard-card:nth-child(3):hover {
  border-color: #7B1FA2;
}
.dashboard-card:nth-child(4):hover {
  border-color: #0097A7;
}

.dashboard-card:hover::before {
  opacity: 1;
}

.card-icon-wrapper {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  background: var(--card-icon-bg, #F5F7FA);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}

/* Varied icon backgrounds */
.dashboard-card:nth-child(1) .card-icon-wrapper {
  background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
}
.dashboard-card:nth-child(2) .card-icon-wrapper {
  background: linear-gradient(135deg, #FF9800 0%, #FFB74D 100%);
}
.dashboard-card:nth-child(3) .card-icon-wrapper {
  background: linear-gradient(135deg, #9C27B0 0%, #BA68C8 100%);
}
.dashboard-card:nth-child(4) .card-icon-wrapper {
  background: linear-gradient(135deg, #00BCD4 0%, #4DD0E1 100%);
}

.card-icon {
  font-size: 2rem;
  filter: brightness(0) invert(1);
}

.card-content {
  flex: 1;
}

.card-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--card-title-color, var(--text-primary));
  margin: 0 0 0.5rem 0;
  transition: color 0.3s ease;
}

/* Varied title colors */
.dashboard-card:nth-child(1) .card-title {
  color: #4CAF50;
}
.dashboard-card:nth-child(2) .card-title {
  color: #FF9800;
}
.dashboard-card:nth-child(3) .card-title {
  color: #9C27B0;
}
.dashboard-card:nth-child(4) .card-title {
  color: #00BCD4;
}

.dashboard-card:hover .card-title {
  opacity: 0.9;
}

.card-description {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

.card-arrow {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: var(--card-arrow-color, var(--text-secondary));
  font-size: 1.5rem;
  font-weight: 700;
  transition: transform 0.3s ease;
}

/* Varied arrow colors */
.dashboard-card:nth-child(1) .card-arrow {
  color: #4CAF50;
}
.dashboard-card:nth-child(2) .card-arrow {
  color: #FF9800;
}
.dashboard-card:nth-child(3) .card-arrow {
  color: #9C27B0;
}
.dashboard-card:nth-child(4) .card-arrow {
  color: #00BCD4;
}

.dashboard-card:hover .card-arrow {
  transform: translateX(5px);
}

/* Responsive */
@media (max-width: 768px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-card {
    padding: 1.5rem;
  }
}
.activity-logs-container {
  background: var(--white);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
  margin-bottom: 2rem;
  animation: slideInUp 0.8s ease-out;
}

/* Date Picker Header */
.date-picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid var(--border-light);
  flex-wrap: wrap;
  gap: 1rem;
}

.date-picker-wrapper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.date-quick-btn {
  padding: 0.75rem 1.25rem;
  background: #f5f5f5;
  border: 2px solid var(--border-medium);
  border-radius: 8px;
  font-size: 0.95rem;
  color: var(--primary-blue);
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
}

.date-quick-btn:hover {
  background: #e8e8e8;
  border-color: var(--primary-blue);
}

.date-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary-blue);
  cursor: pointer;
}

.calendar-icon {
  font-size: 1.25rem;
}

.date-input {
  padding: 0.75rem 1rem;
  border: 2px solid var(--border-medium);
  border-radius: 8px;
  font-size: 1rem;
  color: var(--primary-blue);
  background: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

.date-input:hover {
  border-color: var(--primary-blue);
}

.date-input:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.selected-date-display {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--primary-blue);
  padding: 0.5rem 1rem;
  background: rgba(74, 144, 226, 0.05);
  border-radius: 8px;
}

/* Wellness Cards Container - Three Rows Layout */
.wellness-cards-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.wellness-cards-row {
  display: grid;
  gap: 1.5rem;
}

.wellness-cards-row.first-row {
  grid-template-columns: repeat(3, 1fr);
}

.wellness-cards-row.full-width-row {
  grid-template-columns: 1fr;
}

.full-width-card {
  width: 100%;
}

.wellness-card {
  background: var(--white);
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 2px 8px rgba(74, 144, 226, 0.05);
  border: 1px solid var(--border-light);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* Room for absolutely positioned decorative emoji (top-left) */
.wellness-card:has(.wellness-metric-art) {
  padding-left: 3.35rem;
}

/* Keep metric labels/values above decorative SVG art */
.wellness-card .card-header,
.wellness-card .card-value,
.wellness-card .card-progress {
  position: relative;
  z-index: 1;
}

.wellness-card .card-click-hint {
  z-index: 2;
}

.wellness-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue) 100%);
  transform: scaleY(0);
  transition: transform 0.3s ease;
}

.wellness-card.clickable {
  cursor: pointer;
}

.wellness-card.clickable:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary-blue);
}

.wellness-card.clickable:hover::before {
  transform: scaleY(1);
}

.wellness-card.clickable:active {
  transform: translateY(-2px);
}

.card-click-hint {
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  font-size: 0.65rem;
  color: var(--text-secondary);
  opacity: 0;
  transition: opacity 0.3s ease;
  font-weight: 500;
}

.wellness-card.clickable:hover .card-click-hint {
  opacity: 1;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.card-title h3 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--card-title-color, var(--text-primary));
  margin: 0 0 0.15rem 0;
}

.wellness-card[data-type="sleep"] .card-title h3 {
  color: #9C27B0;
}
.wellness-card[data-type="steps"] .card-title h3 {
  color: #FF9800;
}
.wellness-card[data-type="heart_rate"] .card-title h3 {
  color: #E91E63;
}
.wellness-card[data-type="hydration"] .card-title h3 {
  color: #00BCD4;
}
.wellness-card[data-type="nutrition"] .card-title h3 {
  color: #4CAF50;
}

.card-subtitle {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin: 0;
}

.card-value {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.value-number {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--card-value-color, var(--text-primary));
}

.wellness-card[data-type="sleep"] .value-number {
  color: #9C27B0;
}
.wellness-card[data-type="steps"] .value-number {
  color: #FF9800;
}
.wellness-card[data-type="heart_rate"] .value-number {
  color: #E91E63;
}
.wellness-card[data-type="hydration"] .value-number {
  color: #00BCD4;
}
.wellness-card[data-type="nutrition"] .value-number {
  color: #4CAF50;
}

.value-unit {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 500;
}

/* Progress Bar */
.card-progress {
  margin-top: 0.5rem;
}

.progress-bar {
  width: 100%;
  height: 6px;
  background-color: #e0e0e0;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 0.4rem;
}

.progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease;
}

.progress-label {
  font-size: 0.7rem;
  color: var(--text-secondary);
  font-weight: 500;
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease;
  padding: 1rem;
}

.modal-content {
  background: white;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUp 0.3s ease;
}

.card-details-modal {
  padding: 0;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 2px solid var(--border-light);
}

.modal-title-wrapper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.modal-icon {
  font-size: 2rem;
}

.modal-header h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-blue);
  margin: 0;
}

.modal-close {
  background: none;
  border: none;
  font-size: 2rem;
  color: var(--text-secondary);
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.modal-close:hover {
  background: rgba(74, 144, 226, 0.08);
  color: var(--primary-blue);
}

.modal-body {
  padding: 1.5rem;
}

.detail-value-display {
  background: linear-gradient(135deg, #faf8f5 0%, #ffffff 100%);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  text-align: center;
  border: 2px solid var(--border-light);
}

.detail-value-label {
  display: block;
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.detail-value-text {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary-blue);
}

.detail-message {
  background: #e8f5e9;
  border-left: 4px solid #4caf50;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}

.detail-message p {
  margin: 0;
  font-size: 1rem;
  color: #2e7d32;
  font-weight: 500;
  line-height: 1.6;
}

.detail-tips {
  margin-top: 1.5rem;
}

.tips-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--primary-blue);
  margin: 0 0 1rem 0;
}

.tips-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.tips-list li {
  padding: 0.75rem 1rem;
  background: #f9f9f9;
  border-radius: 8px;
  font-size: 0.95rem;
  color: var(--primary-blue);
  line-height: 1.6;
  border-left: 3px solid #4caf50;
  padding-left: 1.25rem;
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 3rem 2rem;
}

/* No Data Message */
.no-data-message {
  text-align: center;
  padding: 3rem 2rem;
  background: #fff9e6;
  border-radius: 12px;
  border: 2px dashed var(--primary-blue);
  margin: 2rem 0;
}

.no-data-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.no-data-message h3 {
  font-size: 1.5rem;
  color: var(--primary-blue);
  margin: 0 0 0.5rem 0;
}

.no-data-message p {
  color: var(--text-secondary);
  font-size: 1rem;
  margin: 0;
}

.empty-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.empty-state h3 {
  font-size: 1.5rem;
  color: var(--primary-blue);
  margin: 0 0 0.5rem 0;
}

.empty-state p {
  color: var(--text-secondary);
  font-size: 1rem;
}

.empty-state-secondary {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
  opacity: 0.92;
  line-height: 1.45;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}

.loading-message {
  text-align: center;
  padding: 2rem;
  color: var(--text-secondary);
  font-size: 1rem;
}

/* Responsive */
@media (max-width: 1024px) {
  .wellness-cards-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .wellness-cards-row:last-child {
    max-width: 100%;
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .wellness-cards-row {
    grid-template-columns: 1fr;
  }

  .wellness-cards-row:last-child {
    grid-template-columns: 1fr;
  }

  .activity-logs-container {
    padding: 1.5rem;
  }

  .date-picker-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .date-picker-wrapper {
    width: 100%;
  }

  .date-input {
    flex: 1;
  }

  .modal-content {
    margin: 1rem;
    max-height: calc(100vh - 2rem);
  }
}

/* Animations */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Static decorative emojis — top-left of metric cards */

.wellness-metric-art {
  position: absolute;
  top: 0.35rem;
  left: 0.35rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  pointer-events: none;
  z-index: 0;
  line-height: 1;
  user-select: none;
}

.wellness-metric-art--wide {
  top: 0.45rem;
  left: 0.5rem;
}

.wellness-metric-emoji {
  font-size: 2.25rem;
  opacity: 0.92;
}

.wellness-metric-art--wide .wellness-metric-emoji {
  font-size: 2.1rem;
}
.reward-system-container {
  background: var(--white);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(74, 144, 226, 0.05);
  border: 1px solid var(--border-light);
  margin-bottom: 2rem;
  animation: slideInUp 0.8s ease-out;
}

.reward-header {
  margin-bottom: 2rem;
}

.section-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-blue);
  margin: 0 0 0.5rem 0;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-subtitle {
  font-size: 1rem;
  color: var(--text-secondary);
  margin: 0;
  font-weight: 500;
}

/* Rewards Summary */
.rewards-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.reward-stat-card {
  background: var(--white);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(74, 144, 226, 0.05);
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all 0.3s ease;
}

.reward-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px var(--border-light);
}

.stat-icon-wrapper {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-icon {
  font-size: 2rem;
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary-blue);
  margin-bottom: 0.25rem;
}

.stat-label {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 500;
}

/* Achievements Section */
.achievements-section {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 2px solid var(--border-light);
}

.achievements-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--primary-blue);
  margin: 0 0 1.5rem 0;
}

.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
}

.achievement-card {
  background: var(--white);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(74, 144, 226, 0.08);
  border: 2px solid var(--border-light);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.achievement-card.unlocked {
  border-color: #4caf50;
  background: linear-gradient(135deg, #ffffff 0%, #f1f8f4 100%);
}

.achievement-card.locked {
  opacity: 0.7;
}

.achievement-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px var(--border-light);
}

.achievement-icon-wrapper {
  position: relative;
  display: inline-block;
  margin-bottom: 1rem;
}

.achievement-icon {
  font-size: 3rem;
  display: block;
}

.achievement-checkmark {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 24px;
  height: 24px;
  background: #4caf50;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: bold;
  border: 2px solid white;
}

.achievement-content {
  flex: 1;
}

.achievement-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--primary-blue);
  margin: 0 0 0.5rem 0;
}

.achievement-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin: 0 0 0.75rem 0;
}

.achievement-progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.progress-bar-small {
  flex: 1;
  height: 6px;
  background-color: #e0e0e0;
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill-small {
  height: 100%;
  background: linear-gradient(90deg, #4caf50 0%, #66bb6a 100%);
  border-radius: 3px;
  transition: width 0.5s ease;
}

.progress-text-small {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-weight: 500;
  min-width: 35px;
}

/* Points Info */
.points-info {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 2px solid var(--border-light);
  background: #f9f9f9;
  border-radius: 8px;
  padding: 1.5rem;
}

.points-info-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--primary-blue);
  margin: 0 0 1rem 0;
}

.points-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.points-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  color: var(--primary-blue);
}

.points-icon {
  color: #4caf50;
  font-weight: bold;
  font-size: 1.1rem;
}

.points-text {
  flex: 1;
}

.points-text strong {
  color: var(--primary-blue);
  font-weight: 600;
}

/* No Rewards Message */
.no-rewards-message {
  text-align: center;
  padding: 3rem 2rem;
  background: #fff9e6;
  border-radius: 12px;
  border: 2px dashed #ff9800;
  margin: 2rem 0;
}

.no-rewards-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.no-rewards-message h3 {
  font-size: 1.5rem;
  color: var(--primary-blue);
  margin: 0 0 0.5rem 0;
}

.no-rewards-message p {
  color: var(--text-secondary);
  font-size: 1rem;
  margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .rewards-summary {
    grid-template-columns: 1fr;
  }

  .achievements-grid {
    grid-template-columns: 1fr;
  }

  .reward-system-container {
    padding: 1.5rem;
  }
}

/* Animations */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* Night mode */
[data-theme='dark'] .reward-system-container,
[data-theme='dark'] .reward-stat-card,
[data-theme='dark'] .achievement-card,
[data-theme='dark'] .no-rewards-message,
[data-theme='dark'] .points-info {
  background: #1a2332 !important;
  border-color: #3d4f66 !important;
  color: #e8edf4 !important;
}
[data-theme='dark'] .achievement-name,
[data-theme='dark'] .section-title {
  background: none !important;
  -webkit-text-fill-color: #8bb8ef !important;
  color: #8bb8ef !important;
}
[data-theme='dark'] .achievement-desc,
[data-theme='dark'] .section-subtitle {
  color: #c5d0de !important;
}
.student-appointment-calendar {
  background: var(--white);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
  margin-bottom: 2rem;
}

.appointment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--border-light);
}

.appointment-header h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.book-appointment-btn {
  padding: 0.75rem 1.5rem;
  background: var(--gradient-primary);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.book-appointment-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.appointments-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.appointment-item {
  display: grid;
  grid-template-columns: 1fr 1fr auto auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  background: var(--bg-hover);
  border-radius: 8px;
  border: 1px solid var(--border-light);
  transition: all 0.3s ease;
}

.appointment-item:hover {
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.appointment-date {
  font-weight: 600;
  color: var(--text-primary);
}

.appointment-time {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.appointment-type {
  padding: 0.25rem 0.75rem;
  background: var(--primary-blue-soft);
  color: var(--primary-blue);
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 500;
}

.appointment-status {
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: capitalize;
}

.no-appointments {
  text-align: center;
  padding: 2rem;
  color: var(--text-secondary);
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.modal-content {
  background: var(--white);
  border-radius: 16px;
  padding: 2rem;
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  position: relative;
  transition: width 0.3s ease, height 0.3s ease;
}

.modal-content.expanded {
  max-width: 95vw;
  max-height: 95vh;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  padding-right: 0.5rem;
  border-bottom: 2px solid var(--border-light);
  user-select: none;
  -webkit-user-select: none;
}

.modal-controls {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.modal-expand-btn {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: all 0.2s ease;
}

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

.modal-resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 0%, transparent 40%, var(--border-light) 40%, var(--border-light) 45%, transparent 45%, transparent 55%, var(--border-light) 55%, var(--border-light) 60%, transparent 60%);
  border-bottom-right-radius: 16px;
}

.modal-resize-handle:hover {
  background: linear-gradient(135deg, transparent 0%, transparent 40%, var(--primary-blue) 40%, var(--primary-blue) 45%, transparent 45%, transparent 55%, var(--primary-blue) 55%, var(--primary-blue) 60%, transparent 60%);
}

.modal-header h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.modal-close {
  background: none;
  border: none;
  font-size: 2rem;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

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

.booking-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.95rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 0.75rem;
  border: 2px solid var(--border-light);
  border-radius: 8px;
  font-size: 1rem;
  font-family: 'Inter', sans-serif;
  transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.form-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 1rem;
}

.form-actions button {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.form-actions button[type="button"] {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.form-actions button[type="button"]:hover {
  background: var(--border-light);
}

.form-actions button[type="submit"] {
  background: var(--gradient-primary);
  color: white;
}

.form-actions button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.form-actions button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Enhanced Booking Modal Styles */
.appointment-booking-modal {
  max-width: 700px;
}

.recommendations-header {
  margin-bottom: 1.5rem;
}

.recommendations-intro {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
}

.recommended-staff-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.staff-recommendation-card {
  padding: 1.5rem;
  background: var(--bg-hover);
  border-radius: 12px;
  border: 2px solid var(--border-light);
  transition: all 0.3s ease;
}

.staff-recommendation-card:hover {
  border-color: var(--primary-blue);
  box-shadow: var(--shadow-sm);
}

.staff-info {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.staff-avatar {
  position: relative;
  overflow: hidden;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  flex-shrink: 0;
}

.staff-avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  z-index: 1;
}

.staff-avatar-initial {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.staff-meta-line {
  margin: 0.2rem 0 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: #64748b;
  line-height: 1.35;
  word-break: break-word;
}

.staff-meta-role {
  color: #475569;
  text-transform: capitalize;
}

.staff-meta-associate-id {
  font-size: 0.78rem;
  font-weight: 500;
  color: #94a3b8;
}

.staff-details h4 {
  margin: 0 0 0.25rem 0;
  font-size: 1.1rem;
  color: var(--text-primary);
}

.staff-specialization {
  color: var(--primary-blue);
  font-size: 0.9rem;
  font-weight: 500;
  margin: 0 0 0.5rem 0;
}

.staff-bio {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin: 0;
  line-height: 1.5;
}

.available-slots-preview {
  margin: 1rem 0;
  padding: 1rem;
  background: white;
  border-radius: 8px;
  border: 1px solid var(--border-light);
}

.slots-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 0.5rem 0;
}

.slots-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.slot-badge {
  padding: 0.5rem 1rem;
  background: var(--primary-blue-soft);
  color: var(--primary-blue);
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
}

.staff-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}

.btn-primary {
  padding: 0.75rem 1.5rem;
  background: var(--gradient-primary);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  flex: 1;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  padding: 0.75rem 1.5rem;
  background: white;
  color: var(--primary-blue);
  border: 2px solid var(--primary-blue);
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  flex: 1;
}

.btn-secondary:hover {
  background: var(--primary-blue-soft);
}

.btn-link {
  background: none;
  border: none;
  color: var(--primary-blue);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  padding: 0.5rem 0;
}

.btn-link:hover {
  color: var(--primary-blue-dark);
}

.browse-options {
  text-align: center;
  margin: 1.5rem 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-light);
}

.all-staff-list {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--border-light);
}

.all-staff-list h4 {
  margin: 0 0 1rem 0;
  color: var(--text-primary);
  font-size: 1.1rem;
}

.staff-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: white;
  border-radius: 8px;
  border: 1px solid var(--border-light);
  margin-bottom: 0.75rem;
}

.selected-staff-info {
  padding: 1rem;
  background: var(--primary-blue-soft);
  border-radius: 8px;
  margin-bottom: 1.5rem;
}

.selected-staff-info h4 {
  margin: 0 0 0.25rem 0;
  color: var(--primary-blue);
}

.selected-staff-info p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.time-slot-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.slots-instruction {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
  font-style: italic;
}

.time-slots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
  margin-top: 0.5rem;
  max-height: 400px;
  overflow-y: auto;
  padding: 0.5rem;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--bg-hover);
}

.btn-google-calendar-inline {
  padding: 0.5rem 1rem;
  background: #4285f4;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-google-calendar-inline:hover {
  background: #357ae8;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.time-slot-btn {
  padding: 1rem;
  background: white;
  border: 2px solid var(--border-light);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}

.time-slot-btn:hover {
  border-color: var(--primary-blue);
  background: var(--primary-blue-soft);
}

.time-slot-btn.selected {
  background: var(--gradient-primary);
  color: white;
  border-color: var(--primary-blue);
}

.slot-date {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.slot-time {
  font-size: 0.9rem;
  font-weight: 500;
}

.more-slots-note {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-style: italic;
}

.loading-state,
.no-recommendations {
  text-align: center;
  padding: 2rem;
  color: var(--text-secondary);
}

.appointment-staff {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-style: italic;
}

/* Alternative Workflow Styles */
.form-intro {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: #f0f9ff;
  border-radius: 8px;
  border-left: 4px solid #3b82f6;
}

.form-intro p {
  margin: 0;
  color: #1e40af;
  font-size: 0.9rem;
  line-height: 1.5;
}

.form-hint {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8rem;
  color: #6b7280;
  font-style: italic;
}

.btn-browse-all {
  background: white;
  color: #3b82f6;
  border: 2px solid #3b82f6;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-browse-all:hover {
  background: #eff6ff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.btn-browse-all:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.staff-list-intro {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: #f9fafb;
  border-radius: 6px;
}

.no-staff {
  padding: 2rem;
  text-align: center;
  color: var(--text-secondary);
}

.no-staff p {
  margin: 0;
  font-size: 0.9rem;
}

/* Google Calendar Modal Styles */
.google-calendar-modal {
  max-width: 900px;
  width: 95%;
}

.calendar-embed-container {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.calendar-embed-container iframe {
  width: 100%;
  min-height: 600px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
}

.calendar-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  padding: 1rem;
  border-top: 1px solid var(--border-light);
}

.calendar-actions .btn-primary,
.calendar-actions .btn-secondary {
  flex: 0 0 auto;
  min-width: 150px;
}

.calendar-actions a.btn-primary {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.no-calendar {
  padding: 3rem;
  text-align: center;
}

.no-calendar p {
  margin: 0 0 1.5rem 0;
  color: var(--text-secondary);
  font-size: 1rem;
}

/* Google Calendar Button */
.btn-google-calendar {
  padding: 0.75rem 1.5rem;
  background: #4285f4;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
}

.btn-google-calendar:hover {
  background: #357ae8;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-google-calendar::before {
  content: '📅';
  font-size: 1rem;
}

/* Staff Item Actions */
.staff-item-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.staff-item-actions .btn-secondary,
.staff-item-actions .btn-google-calendar {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .google-calendar-modal {
    max-width: 100%;
    width: 100%;
    margin: 0;
    border-radius: 0;
    max-height: 100vh;
  }

  .calendar-embed-container iframe {
    min-height: 400px;
  }

  .staff-actions,
  .staff-item-actions {
    flex-direction: column;
  }

  .staff-actions button,
  .staff-item-actions button {
    width: 100%;
  }
}

/* =========================
   Step 3: Calendar selection
   ========================= */
.availability-calendar {
  border: 2px solid var(--border-light);
  border-radius: 12px;
  padding: 1rem;
  background: var(--white);
}

.availability-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.calendar-month-title {
  font-weight: 700;
  color: var(--text-primary);
}

.calendar-nav-btn {
  border: 1px solid var(--border-light);
  background: var(--bg-hover);
  color: var(--text-primary);
  border-radius: 8px;
  padding: 0.35rem 0.6rem;
  cursor: pointer;
}

.calendar-nav-btn:hover {
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}

.calendar-weekday {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.35rem;
}

.calendar-day {
  border: 1px solid var(--border-light);
  background: var(--white);
  border-radius: 10px;
  padding: 0.5rem;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
}

.calendar-day.empty {
  border: none;
  background: transparent;
  cursor: default;
}

.calendar-day.unavailable {
  background: #f7f7f9;
  color: var(--text-secondary);
  cursor: not-allowed;
  opacity: 0.7;
}

.calendar-day.available:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.calendar-day.selected {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.15);
}

.calendar-day-number {
  font-weight: 700;
  color: var(--text-primary);
}

.calendar-availability-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary-blue);
  position: absolute;
  bottom: 6px;
  right: 6px;
}

.calendar-times {
  margin-top: 1rem;
  border-top: 1px solid var(--border-light);
  padding-top: 0.75rem;
}

.calendar-times-header {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}

.calendar-times-title {
  font-weight: 700;
  color: var(--text-primary);
}

.calendar-times-subtitle {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.calendar-times-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

@media (max-width: 768px) {
  .calendar-times-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Success confirmation (replaces browser alert after booking) */
.booking-success-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(4px);
  animation: booking-success-fade-in 0.2s ease-out;
}

@keyframes booking-success-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.booking-success-dialog {
  width: 100%;
  max-width: 420px;
  background: var(--white);
  border-radius: 16px;
  padding: 1.75rem 1.5rem 1.5rem;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-light);
  text-align: center;
  animation: booking-success-pop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes booking-success-pop {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.booking-success-icon-wrap {
  width: 56px;
  height: 56px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    var(--brand-blue-primary, #649ce4),
    var(--brand-blue-deep, #2e74b5)
  );
  box-shadow: 0 8px 24px rgba(100, 156, 228, 0.35);
}

.booking-success-check {
  color: #fff;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
}

.booking-success-title {
  margin: 0 0 0.75rem;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-primary);
}

.booking-success-saved {
  margin: 0 0 1rem;
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.45;
  text-align: left;
  padding: 0.65rem 0.75rem;
  background: var(--bg-hover);
  border-radius: 10px;
  border-left: 3px solid var(--brand-blue-primary, #649ce4);
}

.booking-success-lead {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

.booking-success-time {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--primary-blue);
}

.booking-success-hint {
  margin: 0 0 1.25rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.4;
  padding: 0.65rem 0.75rem;
  background: var(--primary-blue-soft, var(--bg-hover));
  border-radius: 10px;
  text-align: left;
}

.booking-success-hint-muted {
  background: var(--bg-hover);
  border-left: none;
}

.booking-success-gcal {
  margin: 0 0 1.25rem;
  text-align: left;
}

.booking-success-gcal-label {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}

.booking-success-gcal-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.65rem 1rem;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(
    135deg,
    var(--brand-blue-primary, #649ce4),
    var(--brand-blue-deep, #2e74b5)
  );
  border: 1px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.booking-success-gcal-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(46, 116, 181, 0.3);
  color: #fff;
  text-decoration: none;
}

.booking-success-gcal-link:focus-visible {
  outline: 2px solid var(--brand-blue-primary, #649ce4);
  outline-offset: 2px;
}

.booking-success-ok {
  width: 100%;
  padding: 0.75rem 1.25rem;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(
    135deg,
    var(--brand-blue-primary, #649ce4),
    var(--brand-blue-deep, #2e74b5)
  );
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.booking-success-ok:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(46, 116, 181, 0.35);
}

.booking-success-ok:focus-visible {
  outline: 2px solid var(--brand-blue-primary, #649ce4);
  outline-offset: 2px;
}


.cs-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  padding: 1rem;
}

.cs-modal {
  width: 100%;
  max-width: 760px;
  background: white;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  overflow: hidden;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}

.cs-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #eee;
}

.cs-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #1976d2;
}

.cs-subtitle {
  color: #667;
  margin-top: 0.25rem;
  font-size: 0.95rem;
}

.cs-close {
  border: none;
  background: transparent;
  font-size: 1.75rem;
  cursor: pointer;
  color: #666;
}

.cs-body {
  padding: 1rem 1.25rem;
  overflow: auto;
}

.cs-safety {
  background: #fff3e0;
  border-left: 4px solid #ef6c00;
  padding: 0.75rem;
  border-radius: 10px;
  margin-bottom: 1rem;
  color: #333;
}

.cs-error {
  background: #ffebee;
  border-left: 4px solid #c62828;
  padding: 0.75rem;
  border-radius: 10px;
  color: #333;
}

.cs-progress {
  font-weight: 700;
  color: #333;
  margin-bottom: 0.5rem;
}

.cs-question {
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 1rem;
  background: #fafafa;
}

.cs-qtext {
  font-weight: 800;
  color: #222;
  margin-bottom: 0.75rem;
}

.cs-scale {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.cs-choice {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 12px;
  border: 1px solid #e5e5e5;
  background: white;
  cursor: pointer;
  text-align: left;
}

.cs-choice.selected {
  border-color: #1976d2;
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.15);
}

.cs-choice--optout {
  border-style: dashed;
  border-color: #b0bec5;
  background: #f8fafc;
}

.cs-choice--optout.selected {
  border-color: #546e7a;
  border-style: solid;
  box-shadow: 0 0 0 3px rgba(84, 110, 122, 0.18);
}

.cs-choice-v {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #e3f2fd;
  color: #1976d2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  flex: 0 0 auto;
}

.cs-choice-label {
  color: #333;
  font-weight: 600;
}

.cs-nav {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.cs-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

.cs-footer--hrsn {
  flex-wrap: wrap;
  align-items: center;
}

.cs-btn {
  padding: 0.65rem 1rem;
  border-radius: 10px;
  font-weight: 700;
  border: 1px solid #e0e0e0;
  cursor: pointer;
}

.cs-btn.primary {
  background: #1976d2;
  border-color: #1976d2;
  color: white;
}

.cs-btn.secondary {
  background: #f4f6f8;
  color: #223;
}

.cs-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.cs-textarea {
  width: 100%;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 0.75rem;
  resize: vertical;
  font-family: inherit;
}

@media (max-width: 640px) {
  .cs-scale {
    grid-template-columns: 1fr;
  }
}


.student-checkin-card {
  --checkin-pink: #ec4899;
  --checkin-violet: #8b5cf6;
  --checkin-amber: #f59e0b;
  --checkin-mint: #34d399;
  --checkin-sky: #38bdf8;
  background: linear-gradient(165deg, #ffffff 0%, #f8fafc 48%, #fff7ed 100%);
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 1.35rem 1.25rem 1.25rem;
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.06);
  position: relative;
  overflow: hidden;
}

.student-checkin-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(
    90deg,
    var(--checkin-mint),
    var(--checkin-sky),
    var(--checkin-violet),
    var(--checkin-pink),
    var(--checkin-amber)
  );
  opacity: 0.92;
}

.student-checkin-title {
  margin: 0;
  font-size: 1.42rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  background: linear-gradient(105deg, #0f172a 10%, #0d9488 45%, #7c3aed 78%, #db2777 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #0f172a;
}

@supports not (background-clip: text) {
  .student-checkin-title {
    color: #0f172a;
    background: none;
    -webkit-text-fill-color: unset;
  }
}

.student-checkin-subtitle {
  margin: 0.35rem 0 1rem 0;
  color: #64748b;
  font-size: 0.9rem;
  line-height: 1.45;
}

.student-checkin-subtitle-update {
  display: block;
  margin-top: 0.5rem;
  color: #0f172a;
  font-weight: 650;
}

.student-checkin-error {
  margin-bottom: 0.75rem;
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #991b1b;
  font-weight: 650;
  font-size: 0.9rem;
}

.student-checkin-section {
  margin-top: 1rem;
}

.student-checkin-section-title {
  font-weight: 800;
  color: #0f172a;
  font-size: 0.95rem;
  margin-bottom: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.student-checkin-section-title--spark {
  color: #0f766e;
}

.student-checkin-section-title--amber {
  color: #c2410c;
}

.student-checkin-section-title--coral {
  color: #be123c;
}

.student-checkin-section-icon {
  font-size: 0.65rem;
  opacity: 0.85;
}

.student-checkin-section-optional {
  font-size: 0.72rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: lowercase;
  letter-spacing: 0;
}

.student-checkin-creative-panel {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 0.85rem 0.75rem;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
}

.student-checkin-creative-panel--intensity {
  border-color: rgba(245, 158, 11, 0.35);
  background: linear-gradient(145deg, #fffbeb 0%, #ffffff 55%, #fff7ed 100%);
}

.student-checkin-creative-panel--stress {
  border-color: rgba(236, 72, 153, 0.28);
  background: linear-gradient(145deg, #fdf2f8 0%, #ffffff 50%, #eff6ff 100%);
}

.student-checkin-creative-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  flex-wrap: wrap;
  margin-bottom: 0.65rem;
}

.student-checkin-creative-head--tight {
  margin-bottom: 0.5rem;
}

.student-checkin-chip {
  font-size: 0.78rem;
  font-weight: 900;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  letter-spacing: 0.04em;
}

.student-checkin-chip--intensity {
  background: linear-gradient(135deg, #fde68a, #fdba74);
  color: #78350f;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.student-checkin-chip--stress {
  background: color-mix(in srgb, var(--chip-c, #0d9488) 18%, #ffffff);
  color: #0f172a;
  border: 1px solid color-mix(in srgb, var(--chip-c, #64748b) 45%, #ffffff);
}

.student-checkin-creative-label {
  font-size: 0.88rem;
  font-weight: 800;
  color: #475569;
}

.student-checkin-scale {
  margin-top: 0.15rem;
}

.student-checkin-scale-rail {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.student-checkin-scale-emoji-cap {
  font-size: 1.15rem;
  line-height: 1;
  flex-shrink: 0;
  width: 1.5rem;
  text-align: center;
}

.student-checkin-scale-segments {
  flex: 1;
  display: flex;
  gap: 4px;
  min-height: 44px;
  align-items: stretch;
}

.student-checkin-segment {
  flex: 1;
  min-width: 0;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  min-height: 36px;
  background: color-mix(in srgb, var(--seg, #e2e8f0) 22%, #ffffff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition:
    transform 0.15s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
}

.student-checkin-segment:hover {
  transform: scaleY(1.08);
  filter: brightness(1.03);
}

.student-checkin-segment.is-active {
  background: var(--seg, #0d9488);
  box-shadow:
    0 4px 12px color-mix(in srgb, var(--seg, #0d9488) 40%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.student-checkin-segment:focus-visible {
  outline: 2px solid #0d9488;
  outline-offset: 2px;
  z-index: 1;
}

.student-checkin-scale-helper {
  margin: 0.55rem 0 0;
  font-size: 0.75rem;
  font-weight: 650;
  color: #64748b;
  line-height: 1.35;
}

.student-checkin-feeling {
  margin: 0.75rem 0 0;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  color: #475569;
}

.student-checkin-feeling-highlight {
  font-weight: 800;
}

.student-checkin-emotion-hint {
  margin: 0 0 0.65rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: #64748b;
  font-weight: 600;
}

.student-checkin-cap-hint {
  margin: 0 0 0.65rem;
  padding: 0.5rem 0.65rem;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 650;
  color: #92400e;
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.45);
}

.student-checkin-metric-optional-hint {
  margin: 0.35rem 0 0.65rem;
  font-size: 0.75rem;
  line-height: 1.35;
  font-weight: 600;
  color: #64748b;
}

.student-checkin-emotion-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.student-checkin-emotion-card {
  border: 2px solid #e2e8f0;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  transition:
    border-color 0.18s ease,
    box-shadow 0.22s ease,
    transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.student-checkin-emotion-card.is-on {
  border-color: var(--emotion-border, #0d9488);
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--emotion-squircle, #ecfdf5) 55%, #ffffff),
    #ffffff
  );
  box-shadow:
    0 12px 32px color-mix(in srgb, var(--emotion-accent, #0d9488) 22%, transparent),
    0 0 0 1px color-mix(in srgb, var(--emotion-border, #94a3b8) 35%, transparent);
}

.student-checkin-emotion-card:hover {
  transform: translateY(-3px);
}

.student-checkin-emotion {
  border: none;
  background: transparent;
  border-radius: 0;
  padding: 0.65rem 0.45rem 0.55rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  transition:
    transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.22s ease;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.student-checkin-emotion:hover {
  transform: scale(1.01);
}

.student-checkin-emotion.is-on {
  background: transparent;
  box-shadow: none;
}

.student-checkin-emotion.is-on:hover {
  transform: scale(1.02);
}

.student-checkin-emotion-squircle {
  width: 3.35rem;
  height: 3.35rem;
  border-radius: 22%;
  background: var(--emotion-squircle, #f1f5f9);
  border: 2px solid color-mix(in srgb, var(--emotion-border, #e2e8f0) 50%, #ffffff);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.22s ease;
}

.student-checkin-emotion.is-on .student-checkin-emotion-squircle {
  box-shadow: 0 6px 16px color-mix(in srgb, var(--emotion-accent, #0d9488) 28%, transparent);
}

.student-checkin-emotion-emoji {
  font-size: 2.35rem;
  line-height: 1;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: block;
}

.student-checkin-emotion:hover:not(.is-on) .student-checkin-emotion-squircle {
  transform: scale(1.06);
}

.student-checkin-emotion:hover:not(.is-on) .student-checkin-emotion-emoji {
  transform: scale(1.14);
}

.student-checkin-emotion.is-on .student-checkin-emotion-emoji {
  animation: student-checkin-float-emoji 2.8s ease-in-out infinite;
}

@keyframes student-checkin-float-emoji {
  0%,
  100% {
    transform: scale(1.14) translateY(0);
  }
  50% {
    transform: scale(1.14) translateY(-5px);
  }
}

.student-checkin-emotion-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.student-checkin-emotion-burst-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--burst-c, #0d9488);
  opacity: 0;
  animation: student-checkin-burst-dot 0.6s ease forwards;
}

@keyframes student-checkin-burst-dot {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px))) scale(0.15);
  }
}

.student-checkin-emotion-label {
  font-size: 0.8rem;
  color: #334155;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.student-checkin-emotion-slider-wrap {
  border-top: 1px solid #e2e8f0;
  padding: 0.45rem 0.55rem 0.55rem;
  background: rgba(248, 250, 252, 0.85);
}

.student-checkin-emotion-slider-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  margin-bottom: 0.25rem;
  color: #475569;
  font-size: 0.72rem;
  font-weight: 800;
}

.student-checkin-emotion-slider-word {
  flex: 1;
  text-align: center;
  color: #0f766e;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.2;
  min-width: 0;
}

.student-checkin-celebrate-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10050;
  background: rgba(15, 23, 42, 0.38);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  animation: student-checkin-fade-in 0.35s ease;
}

@keyframes student-checkin-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.student-checkin-celebrate-card {
  position: relative;
  width: 100%;
  max-width: 400px;
  background: linear-gradient(160deg, #ffffff 0%, #f0fdfa 35%, #fff7ed 100%);
  border-radius: 22px;
  padding: 2rem 1.5rem 1.5rem;
  box-shadow:
    0 28px 80px rgba(15, 23, 42, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.8) inset;
  text-align: center;
  animation: student-checkin-pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes student-checkin-pop-in {
  from {
    opacity: 0;
    transform: scale(0.88) translateY(12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.student-checkin-celebrate-glow {
  position: absolute;
  top: -40%;
  left: 50%;
  width: 120%;
  height: 80%;
  transform: translateX(-50%);
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--glow, #0d9488) 45%, transparent) 0%,
    transparent 70%
  );
  pointer-events: none;
  opacity: 0.55;
}

.student-checkin-celebrate-emoji {
  position: relative;
  font-size: 3.4rem;
  line-height: 1;
  margin-bottom: 0.35rem;
  animation: student-checkin-celebrate-bounce 2.2s ease-in-out infinite;
}

@keyframes student-checkin-celebrate-bounce {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-8px) scale(1.06);
  }
}

.student-checkin-celebrate-title {
  position: relative;
  margin: 0 0 0.65rem;
  font-size: 1.35rem;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.student-checkin-celebrate-body {
  position: relative;
  margin: 0 0 0.75rem;
  font-size: 0.98rem;
  line-height: 1.55;
  color: #475569;
  font-weight: 600;
}

.student-checkin-celebrate-sub {
  position: relative;
  margin: 0 0 1.25rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #64748b;
  font-weight: 650;
}

.student-checkin-celebrate-btn {
  position: relative;
  width: 100%;
  border: none;
  border-radius: 14px;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  font-weight: 900;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, #0d9488, #7c3aed 45%, #db2777);
  background-size: 140% 140%;
  box-shadow: 0 10px 28px rgba(13, 148, 136, 0.35);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.student-checkin-celebrate-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(124, 58, 237, 0.35);
}

.student-checkin-celebrate-btn:active {
  transform: scale(0.98);
}

.student-checkin-slider-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.student-checkin-slider-row--wrap {
  flex-wrap: wrap;
}

.student-checkin-slider-row--wrap .student-checkin-range {
  flex: 1 1 100%;
}

.student-checkin-slider-row input[type='range'] {
  flex: 1;
  min-width: 0;
}

.student-checkin-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  outline: none;
}

.student-checkin-range--intensity {
  background: linear-gradient(
    to right,
    var(--intensity-c, #0d9488) 0%,
    var(--intensity-c, #0d9488) var(--range-pct, 44%),
    #e2e8f0 var(--range-pct, 44%),
    #e2e8f0 100%
  );
}

.student-checkin-range--stress {
  height: 8px;
}

.student-checkin-intensity-list {
  display: grid;
  gap: 0.55rem;
}

.student-checkin-intensity-item {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 0.55rem 0.6rem;
  background: rgba(255, 255, 255, 0.92);
}

.student-checkin-intensity-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.student-checkin-intensity-item-name {
  font-size: 0.82rem;
  font-weight: 800;
  color: #334155;
}

.student-checkin-intensity-item-value {
  font-size: 0.75rem;
  font-weight: 900;
  color: #0f172a;
}

.student-checkin-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #0d9488;
  cursor: grab;
  box-shadow: 0 2px 10px rgba(13, 148, 136, 0.35);
  border: 2px solid #fff;
}

.student-checkin-range--stress::-webkit-slider-thumb {
  background: var(--stress-thumb, #0d9488);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.12);
}

.student-checkin-range--intensity::-webkit-slider-thumb {
  background: var(--intensity-c, #0d9488);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--intensity-c, #0d9488) 38%, transparent);
}

.student-checkin-range:active::-webkit-slider-thumb {
  cursor: grabbing;
  transform: scale(1.12);
}

.student-checkin-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #0d9488;
  cursor: grab;
  box-shadow: 0 2px 10px rgba(13, 148, 136, 0.35);
  border: 2px solid #fff;
}

.student-checkin-range--stress::-moz-range-thumb {
  background: var(--stress-thumb, #0d9488);
}

.student-checkin-range--intensity::-moz-range-thumb {
  background: var(--intensity-c, #0d9488);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--intensity-c, #0d9488) 38%, transparent);
}

.student-checkin-range--heart {
  background: linear-gradient(
    to right,
    #fda4af 0%,
    #fda4af var(--range-pct, 0%),
    #e2e8f0 var(--range-pct, 0%),
    #e2e8f0 100%
  );
}

.student-checkin-range--heart::-webkit-slider-thumb {
  background: #f43f5e;
  box-shadow: 0 2px 10px rgba(244, 63, 94, 0.35);
}

.student-checkin-range--heart::-moz-range-thumb {
  background: #f43f5e;
  box-shadow: 0 2px 10px rgba(244, 63, 94, 0.35);
}

.student-checkin-range--water {
  background: linear-gradient(
    to right,
    #2dd4bf 0%,
    #2dd4bf var(--range-pct, 0%),
    #e2e8f0 var(--range-pct, 0%),
    #e2e8f0 100%
  );
}

.student-checkin-range--water::-webkit-slider-thumb {
  background: #0d9488;
  box-shadow: 0 2px 10px rgba(13, 148, 136, 0.35);
}

.student-checkin-range--water::-moz-range-thumb {
  background: #0d9488;
  box-shadow: 0 2px 10px rgba(13, 148, 136, 0.35);
}

.student-checkin-range--sleep {
  background: linear-gradient(
    to right,
    #6366f1 0%,
    #6366f1 var(--range-pct, 0%),
    #e2e8f0 var(--range-pct, 0%),
    #e2e8f0 100%
  );
}

.student-checkin-range--sleep::-webkit-slider-thumb {
  background: #6366f1;
  box-shadow: 0 2px 10px rgba(99, 102, 241, 0.35);
}

.student-checkin-range--sleep::-moz-range-thumb {
  background: #6366f1;
  box-shadow: 0 2px 10px rgba(99, 102, 241, 0.35);
}

.student-checkin-range--steps {
  background: linear-gradient(
    to right,
    #22c55e 0%,
    #22c55e var(--range-pct, 0%),
    #e2e8f0 var(--range-pct, 0%),
    #e2e8f0 100%
  );
}

.student-checkin-range--steps::-webkit-slider-thumb {
  background: #22c55e;
  box-shadow: 0 2px 10px rgba(34, 197, 94, 0.35);
}

.student-checkin-range--steps::-moz-range-thumb {
  background: #22c55e;
  box-shadow: 0 2px 10px rgba(34, 197, 94, 0.35);
}

.student-checkin-range--temp {
  background: linear-gradient(
    to right,
    #f97316 0%,
    #f97316 var(--range-pct, 0%),
    #e2e8f0 var(--range-pct, 0%),
    #e2e8f0 100%
  );
}

.student-checkin-range--temp::-webkit-slider-thumb {
  background: #f97316;
  box-shadow: 0 2px 10px rgba(249, 115, 22, 0.35);
}

.student-checkin-range--temp::-moz-range-thumb {
  background: #f97316;
  box-shadow: 0 2px 10px rgba(249, 115, 22, 0.35);
}

.student-checkin-range--nutrition {
  background: linear-gradient(
    to right,
    #eab308 0%,
    #eab308 var(--range-pct, 0%),
    #e2e8f0 var(--range-pct, 0%),
    #e2e8f0 100%
  );
}

.student-checkin-range--nutrition::-webkit-slider-thumb {
  background: #eab308;
  box-shadow: 0 2px 10px rgba(234, 179, 8, 0.35);
}

.student-checkin-range--nutrition::-moz-range-thumb {
  background: #eab308;
  box-shadow: 0 2px 10px rgba(234, 179, 8, 0.35);
}

.student-checkin-slider-value {
  min-width: 72px;
  text-align: right;
  font-weight: 800;
  color: #0f172a;
  font-size: 0.9rem;
}

.student-checkin-stress-meta {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px dashed #e2e8f0;
  flex-wrap: wrap;
}

.student-checkin-stress-face {
  font-size: 2rem;
  line-height: 1;
  transition: transform 0.2s ease;
}

.student-checkin-stress-hint {
  font-size: 0.78rem;
  color: #64748b;
  background: rgba(241, 245, 249, 0.95);
  padding: 0.35rem 0.65rem;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
}

.student-checkin-metrics-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  margin-top: 1rem;
}

@media (max-width: 640px) {
  .student-checkin-metrics-row {
    grid-template-columns: 1fr;
  }
}

.student-checkin-metric-card {
  background: #fff;
  border: 2px solid #e2e8f0;
  border-radius: 14px;
  padding: 0.85rem 0.75rem;
  box-shadow: 0 6px 22px rgba(15, 23, 42, 0.05);
}

.student-checkin-metric-card.is-collapsed {
  padding-bottom: 0.7rem;
}

.student-checkin-metric-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}

.student-checkin-metric-toggle:hover .student-checkin-metric-chevron {
  color: #0f172a;
}

.student-checkin-metric-toggle:focus-visible {
  outline: 2px solid #0d9488;
  outline-offset: 3px;
  border-radius: 8px;
}

.student-checkin-metric-toggle .student-checkin-metric-label {
  margin-bottom: 0;
  flex: 1;
  min-width: 0;
}

.student-checkin-metric-title-text {
  flex: 1;
  min-width: 0;
}

.student-checkin-metric-toggle-meta {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
}

.student-checkin-metric-summary {
  font-size: 0.8rem;
  font-weight: 800;
  color: #0f172a;
  white-space: nowrap;
}

.student-checkin-metric-card.is-collapsed .student-checkin-metric-summary {
  color: #64748b;
}

.student-checkin-metric-card.is-expanded .student-checkin-metric-summary {
  display: none;
}

.student-checkin-metric-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  min-height: 1.35rem;
  font-size: 1.2rem;
  font-weight: 800;
  color: #94a3b8;
  line-height: 1;
  transition: color 0.15s ease, transform 0.2s ease;
}

.student-checkin-metric-card.is-expanded .student-checkin-metric-chevron {
  color: #0f766e;
}

.student-checkin-metric-panel {
  margin-top: 0.55rem;
}

.student-checkin-metric-panel[hidden] {
  display: none;
}

.student-checkin-metric-card--heart {
  border-color: rgba(251, 113, 133, 0.65);
  background: linear-gradient(165deg, #fff1f2 0%, #ffffff 65%);
}

.student-checkin-metric-card--water {
  border-color: rgba(56, 189, 248, 0.55);
  background: linear-gradient(165deg, #ecfeff 0%, #ffffff 65%);
}

.student-checkin-metric-card--sleep {
  border-color: rgba(99, 102, 241, 0.45);
  background: linear-gradient(165deg, #eef2ff 0%, #ffffff 65%);
}

.student-checkin-metric-card--steps {
  border-color: rgba(34, 197, 94, 0.45);
  background: linear-gradient(165deg, #ecfdf5 0%, #ffffff 65%);
}

.student-checkin-metric-card--temp {
  border-color: rgba(249, 115, 22, 0.45);
  background: linear-gradient(165deg, #fff7ed 0%, #ffffff 65%);
}

.student-checkin-metric-card--nutrition {
  border-color: rgba(234, 179, 8, 0.45);
  background: linear-gradient(165deg, #fefce8 0%, #ffffff 65%);
}

.student-checkin-metric-squircle--sleep {
  background: #e0e7ff;
  border-color: #6366f1;
}

.student-checkin-metric-squircle--steps {
  background: #dcfce7;
  border-color: #22c55e;
}

.student-checkin-metric-squircle--temp {
  background: #ffedd5;
  border-color: #f97316;
}

.student-checkin-metric-squircle--nutrition {
  background: #fef9c3;
  border-color: #eab308;
}

.student-checkin-metric-label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 0.45rem;
}

.student-checkin-metric-squircle {
  width: 2rem;
  height: 2rem;
  border-radius: 22%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
  background: #e0f2fe;
  border: 2px solid #38bdf8;
}

.student-checkin-metric-squircle--heart {
  background: #ffe4e6;
  border-color: #fb7185;
}

.student-checkin-metric-input {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 0.5rem 0.65rem;
  font-size: 0.95rem;
  background: #fff;
  color: #0f172a;
  outline: none;
}

.student-checkin-metric-input:focus {
  border-color: #0d9488;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.18);
}

.student-checkin-heart-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.55rem;
}

.student-checkin-heart-emoji {
  font-size: 2.25rem;
  line-height: 1;
  animation: student-checkin-heartbeat 1s ease-in-out infinite;
}

.student-checkin-bpm-readout {
  font-size: 0.95rem;
  font-weight: 800;
  color: #e11d48;
}

@keyframes student-checkin-heartbeat {
  0%,
  100% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.18);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.08);
  }
  70% {
    transform: scale(1);
  }
}

.student-checkin-water-body {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-top: 0.35rem;
}

.student-checkin-bottle-wrap {
  position: relative;
  flex-shrink: 0;
}

.student-checkin-bottle-svg {
  width: 52px;
  height: 110px;
  overflow: visible;
  transition: filter 0.35s ease;
}

.student-checkin-bottle-svg.has-fill {
  filter: drop-shadow(0 4px 12px rgba(56, 189, 248, 0.28));
}

.student-checkin-wave-top {
  animation: student-checkin-wave-morph 2.2s ease-in-out infinite;
}

@keyframes student-checkin-wave-morph {
  0%,
  100% {
    d: path('M5,0 Q18,-5 31,0 Q44,5 57,0 L57,8 L5,8Z');
  }
  50% {
    d: path('M5,0 Q18,5 31,0 Q44,-5 57,0 L57,8 L5,8Z');
  }
}

.student-checkin-bubble {
  opacity: 0;
  animation: student-checkin-bubble-rise 2.4s ease-in-out infinite;
}

.student-checkin-bubble:nth-child(4) {
  animation-delay: 0.7s;
}

.student-checkin-bubble:nth-child(5) {
  animation-delay: 1.4s;
}

@keyframes student-checkin-bubble-rise {
  0% {
    opacity: 0;
    transform: translateY(0) scale(1);
  }
  35% {
    opacity: 0.55;
  }
  100% {
    opacity: 0;
    transform: translateY(-28px) scale(0.35);
  }
}

.student-checkin-fill-label {
  position: absolute;
  bottom: -0.35rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.62rem;
  font-weight: 800;
  color: #0ea5e9;
  white-space: nowrap;
}

.student-checkin-water-controls {
  flex: 1;
  min-width: 0;
}

.student-checkin-water-ml-line {
  font-size: 1.35rem;
  font-weight: 800;
  color: #0284c7;
  line-height: 1.2;
}

.student-checkin-water-ml-unit {
  font-size: 0.8rem;
  font-weight: 700;
  color: #64748b;
}

.student-checkin-water-hint-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.15rem;
}

.student-checkin-water-drop {
  font-size: 1.2rem;
  animation: student-checkin-water-drop 1.8s ease-in-out infinite;
}

@keyframes student-checkin-water-drop {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

.student-checkin-water-hint-text {
  font-size: 0.78rem;
  font-weight: 700;
  color: #64748b;
}

.student-checkin-water-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.45rem;
}

.student-checkin-water-btn {
  border: 1px solid rgba(14, 165, 233, 0.35);
  background: rgba(224, 242, 254, 0.85);
  color: #0369a1;
  border-radius: 8px;
  padding: 0.3rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.12s ease;
}

.student-checkin-water-btn:hover {
  background: rgba(125, 211, 252, 0.55);
}

.student-checkin-water-btn:active {
  transform: scale(0.96);
}

.student-checkin-water-direct {
  display: block;
  margin-top: 0.45rem;
}

.student-checkin-water-direct-input {
  margin-top: 0.15rem;
}

.student-checkin-xp-bar-wrap {
  margin-top: 0.55rem;
}

.student-checkin-xp-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.68rem;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 0.25rem;
}

.student-checkin-xp-bar {
  height: 8px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
}

.student-checkin-xp-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #14b8a6, #38bdf8);
  transition: width 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}

.student-checkin-xp-fill::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 18px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45));
  border-radius: 0 999px 999px 0;
  animation: student-checkin-xp-shimmer 1.6s ease-in-out infinite;
}

@keyframes student-checkin-xp-shimmer {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}

.student-checkin-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-weight: 700;
  color: #0f172a;
  font-size: 0.88rem;
}

.student-checkin-field input,
.student-checkin-field textarea {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 0.55rem 0.65rem;
  font-size: 0.9rem;
  background: #fff;
}

.student-checkin-note-field {
  margin-top: 0.8rem;
}

.student-checkin-manual-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

@media (max-width: 640px) {
  .student-checkin-manual-grid {
    grid-template-columns: 1fr;
  }
}

.student-checkin-actions {
  margin-top: 1rem;
}

.student-checkin-submit {
  width: 100%;
  border: none;
  border-radius: 14px;
  padding: 0.85rem 1rem;
  cursor: pointer;
  background: linear-gradient(135deg, #0d9488 0%, #0ea5e9 38%, #a855f7 72%, #ec4899 100%);
  background-size: 160% 160%;
  color: #fff;
  font-weight: 900;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  box-shadow: 0 12px 32px rgba(13, 148, 136, 0.35);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
}

.student-checkin-submit:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 16px 40px rgba(168, 85, 247, 0.33);
}

.student-checkin-submit:active:not(:disabled) {
  transform: scale(0.99);
}

.student-checkin-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.2);
  box-shadow: none;
}

.student-checkin-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.student-checkin-bp-inputs {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.35rem;
}

.student-checkin-bp-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #475569;
}

.student-checkin-bp-field input,
.student-checkin-number {
  width: 5.5rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  background: #fff;
}

.student-checkin-bp-slash {
  font-size: 1.25rem;
  font-weight: 800;
  color: #94a3b8;
  padding-bottom: 0.35rem;
}

.student-checkin-metric-card--bp .student-checkin-metric-optional-hint,
.student-checkin-metric-card--hrv .student-checkin-metric-optional-hint {
  margin-top: 0.5rem;
}
.map-followup-card {
  max-width: 440px;
  text-align: left;
  max-height: calc(100dvh - 2.5rem);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

.map-followup-resource {
  text-align: left;
}

.map-followup-resource strong {
  display: block;
  margin-bottom: 0.25rem;
  color: #0f172a;
}

.map-followup-meta {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: #64748b;
  line-height: 1.35;
}

.map-followup-lead--tight {
  margin-top: 0.25rem;
  margin-bottom: 0.75rem;
}

.map-followup-consent-note {
  margin: 0 0 0.65rem;
  font-size: 0.78rem;
  color: #64748b;
  line-height: 1.35;
}

.resource-checkin-defer-menu {
  padding-top: 0.25rem;
  border-top: 1px dashed #e2e8f0;
}

.map-followup-block {
  margin-bottom: 1rem;
}

.map-followup-q {
  margin: 0 0 0.5rem;
  font-size: 0.88rem;
  font-weight: 800;
  color: #334155;
}

.map-followup-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: nowrap;
}

.map-followup-row--wrap {
  flex-wrap: wrap;
}

.map-followup-chip {
  flex: 1;
  min-width: 0;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 0.5rem 0.65rem;
  font-size: 0.86rem;
  font-weight: 750;
  cursor: pointer;
  color: #475569;
  background: #fff;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.map-followup-chip:hover {
  border-color: var(--brand-blue-primary, #649ce4);
  color: #0f172a;
}

.map-followup-chip--on {
  border-color: var(--brand-blue-deep, #2e74b5);
  background: rgba(100, 156, 228, 0.12);
  color: #0f172a;
}

.map-followup-actions {
  margin-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.resource-checkin-stars {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}

.resource-checkin-star {
  border: none;
  background: transparent;
  font-size: 1.65rem;
  line-height: 1;
  cursor: pointer;
  color: #cbd5e1;
  padding: 0.1rem;
}

.resource-checkin-star:hover,
.resource-checkin-star--on {
  color: #f59e0b;
}
.resource-util-modal {
  max-width: 460px;
}

.resource-util-reasons .map-followup-chip {
  flex: 1 1 calc(50% - 0.25rem);
  min-width: 7rem;
}

.resource-util-textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 0.55rem 0.65rem;
  font-size: 0.88rem;
  font-family: inherit;
  resize: vertical;
  color: #0f172a;
}

.resource-util-textarea:focus {
  outline: 2px solid rgba(100, 156, 228, 0.45);
  border-color: var(--brand-blue-primary, #649ce4);
}

.resource-util-error {
  margin: 0 0 0.75rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #b91c1c;
}
.loop-notifications-card {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem 0.5rem;
  border-radius: 12px;
  border: 1px solid #c5e0e3;
  background: #f7fbfc;
}

.loop-notifications-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}

.loop-notifications-card__title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: #01696f;
}

.loop-notifications-card__count {
  font-size: 0.75rem;
  color: #64748b;
}

.loop-notifications-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.loop-notification-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0.85rem;
  border-radius: 10px;
  border: 1px solid #4f98a3;
  background: #fff;
}

.loop-notification-banner--reinforcement {
  border-color: #4f98a3;
  background: linear-gradient(135deg, #e8f4f5 0%, #fff 100%);
}

.loop-notification-banner--progress {
  border-color: #d19900;
  background: linear-gradient(135deg, #fff8e7 0%, #fff 100%);
}

.loop-notification-banner--closed {
  border-color: #437a22;
  background: linear-gradient(135deg, #e8f5e9 0%, #fff 100%);
}

.loop-notification-banner--utilization {
  border-color: #6366f1;
  background: linear-gradient(135deg, #eef2ff 0%, #fff 100%);
}

.loop-notification-banner--utilization .loop-notification-banner__title {
  color: #4338ca;
}

.loop-notification-banner--utilization .loop-notification-banner__dismiss {
  background: #4338ca;
}

.loop-notification-banner__icon {
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
}

.loop-notification-banner__body {
  flex: 1;
  min-width: 0;
}

.loop-notification-banner__tag {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  margin-bottom: 0.15rem;
}

.loop-notification-banner__title {
  display: block;
  font-size: 0.9rem;
  color: #01696f;
  margin-bottom: 0.2rem;
}

.loop-notification-banner--progress .loop-notification-banner__title {
  color: #9a6700;
}

.loop-notification-banner--closed .loop-notification-banner__title {
  color: #437a22;
}

.loop-notification-banner__message {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: #3d3a36;
}

.loop-notification-banner__dismiss {
  flex-shrink: 0;
  border: none;
  border-radius: 8px;
  padding: 0.4rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  background: #01696f;
  color: #fff;
}

.loop-notification-banner--progress .loop-notification-banner__dismiss {
  background: #9a6700;
}

.loop-notification-banner--closed .loop-notification-banner__dismiss {
  background: #437a22;
}
.resource-suggestion-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10050;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  overflow-y: auto;
}

.resource-suggestion-card {
  width: 100%;
  max-width: 480px;
  background: linear-gradient(165deg, #ffffff 0%, #eff6ff 45%, #f0fdf4 100%);
  border-radius: 20px;
  padding: 1.75rem 1.5rem 1.4rem;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.16);
  text-align: center;
}

.resource-suggestion-card__icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.resource-suggestion-card__tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #1d4ed8;
  background: #dbeafe;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  margin-bottom: 0.65rem;
}

.resource-suggestion-card__title {
  margin: 0 0 0.85rem;
  font-size: 1.15rem;
  color: #0f172a;
}

.resource-suggestion-card__message {
  margin: 0 0 1.1rem;
  padding: 0.85rem 0.95rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  text-align: left;
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.45;
  color: #334155;
  max-height: 280px;
  overflow-y: auto;
}

.resource-suggestion-card__actions {
  display: flex;
  justify-content: center;
}

.resource-suggestion-card__primary {
  border: none;
  border-radius: 12px;
  padding: 0.65rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  background: #2563eb;
  color: #fff;
}
.counselor-notes-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.counselor-note-card {
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 0.75rem;
  background: #fff;
}

.counselor-note-header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.25rem;
}

.counselor-note-author {
  font-weight: 600;
  color: #333;
}

.counselor-note-badge {
  font-weight: 500;
  color: #666;
}

.counselor-note-time {
  color: #777;
  font-size: 12px;
  white-space: nowrap;
}

.counselor-note-body {
  color: #444;
  white-space: pre-wrap;
}

.counselor-note-replies {
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid #f0f0f0;
}

.counselor-note-replies-title {
  font-size: 12px;
  font-weight: 700;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 0.5rem;
}

.counselor-note-reply {
  background: #f7f9fc;
  border-radius: 8px;
  padding: 0.55rem 0.65rem;
  margin-bottom: 0.45rem;
}

.counselor-note-reply-header {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.2rem;
}

.counselor-note-reply-author {
  font-size: 12px;
  font-weight: 600;
  color: #355;
}

.counselor-note-reply-body {
  color: #444;
  font-size: 14px;
  white-space: pre-wrap;
}

.counselor-note-reply-form {
  margin-top: 0.35rem;
}

.counselor-note-reply-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 0.5rem 0.65rem;
  resize: vertical;
  font: inherit;
  color: #333;
  background: #fff;
}

.counselor-note-reply-input:focus {
  outline: none;
  border-color: #1976d2;
}

.counselor-note-reply-btn {
  margin-top: 0.45rem;
  border: none;
  border-radius: 8px;
  background: #1976d2;
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  padding: 0.4rem 0.85rem;
  cursor: pointer;
}

.counselor-note-reply-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.counselor-note-reply-error {
  margin-top: 0.35rem;
  color: #c62828;
  font-size: 12px;
}

/* Night mode */
[data-theme='dark'] .counselor-note-card,
[data-theme='dark'] .counselor-note-reply,
[data-theme='dark'] .counselor-note-reply-input {
  background: #243044 !important;
  border-color: #3d4f66 !important;
  color: #e8edf4 !important;
}
[data-theme='dark'] .counselor-note-author,
[data-theme='dark'] .counselor-note-body,
[data-theme='dark'] .counselor-note-reply-body,
[data-theme='dark'] .counselor-note-reply-author {
  color: #e8edf4 !important;
}
[data-theme='dark'] .counselor-note-badge,
[data-theme='dark'] .counselor-note-time,
[data-theme='dark'] .counselor-note-replies-title {
  color: #c5d0de !important;
}
.student-dashboard-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #FEFEFE 0%, #FAF8F5 50%, #F5F7FA 100%);
}

.student-dashboard-top-banners {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1rem 2rem 0;
}

.student-dashboard-top-banners .loop-notifications-card {
  margin-bottom: 0;
}

.dashboard-main-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.student-checkin-anchor {
  scroll-margin-top: 5rem;
}

/* Quick Stats Grid */
.quick-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.stat-card {
  background: var(--white);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: 1.25rem;
  transition: all 0.4s ease;
  border-left: 4px solid transparent;
  border: 2px solid var(--border-light);
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--stat-border-color, #E1E8ED);
  transform: scaleY(0);
  transition: transform 0.3s ease;
}

/* Varied border colors for stat cards */
.stat-card:nth-child(1) {
  border-color: #4CAF50;
}
.stat-card:nth-child(1)::before {
  background: #4CAF50;
}
.stat-card:nth-child(1):hover {
  border-left-color: #4CAF50;
}

.stat-card:nth-child(2) {
  border-color: #FF9800;
}
.stat-card:nth-child(2)::before {
  background: #FF9800;
}
.stat-card:nth-child(2):hover {
  border-left-color: #FF9800;
}

.stat-card:nth-child(3) {
  border-color: #9C27B0;
}
.stat-card:nth-child(3)::before {
  background: #9C27B0;
}
.stat-card:nth-child(3):hover {
  border-left-color: #9C27B0;
}

.stat-card:nth-child(4) {
  border-color: #00BCD4;
}
.stat-card:nth-child(4)::before {
  background: #00BCD4;
}
.stat-card:nth-child(4):hover {
  border-left-color: #00BCD4;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  background: var(--bg-hover);
}

.stat-card:hover::before {
  transform: scaleY(1);
}

.stat-icon-wrapper {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s ease;
  background: var(--stat-icon-bg, #F5F7FA);
}

/* Varied colors for stat card icons */
.stat-card:nth-child(1) .stat-icon-wrapper {
  background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
}
.stat-card:nth-child(2) .stat-icon-wrapper {
  background: linear-gradient(135deg, #FF9800 0%, #FFB74D 100%);
}
.stat-card:nth-child(3) .stat-icon-wrapper {
  background: linear-gradient(135deg, #9C27B0 0%, #BA68C8 100%);
}
.stat-card:nth-child(4) .stat-icon-wrapper {
  background: linear-gradient(135deg, #00BCD4 0%, #4DD0E1 100%);
}

.stat-card:hover .stat-icon-wrapper {
  transform: scale(1.1) rotate(5deg);
}

.stat-icon {
  font-size: 1.75rem;
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--stat-value-color, var(--text-primary));
  margin-bottom: 0.25rem;
  transition: color 0.3s ease;
}

/* Varied text colors for stat values */
.stat-card:nth-child(1) .stat-value {
  color: #4CAF50;
}
.stat-card:nth-child(2) .stat-value {
  color: #FF9800;
}
.stat-card:nth-child(3) .stat-value {
  color: #9C27B0;
}
.stat-card:nth-child(4) .stat-value {
  color: #00BCD4;
}

.stat-card:hover .stat-value {
  opacity: 0.9;
}

.stat-label {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 500;
}

/* Wellness Score Section */
.wellness-score-container {
  animation: slideInUp 0.8s ease-out 0.4s backwards;
}

/* Navigation Section */
.navigation-section {
  background: var(--white);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
  animation: slideInUp 0.8s ease-out 0.5s backwards;
}

.section-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.5rem 0;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-subtitle {
  font-size: 1rem;
  color: var(--text-secondary);
  margin: 0 0 1.5rem 0;
  font-weight: 500;
}

/* Responsive */
@media (max-width: 968px) {
  .dashboard-main-content {
    padding: 1rem;
  }

  .quick-stats-grid {
    grid-template-columns: 1fr;
  }
}

/* Animations */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

.quick-stats-grid {
  animation: fadeIn 0.6s ease-out 0.2s backwards;
}

/* Stagger animation for stat cards */
.stat-card:nth-child(1) {
  animation: slideInUp 0.6s ease-out 0.3s backwards;
}

.stat-card:nth-child(2) {
  animation: slideInUp 0.6s ease-out 0.35s backwards;
}

.stat-card:nth-child(3) {
  animation: slideInUp 0.6s ease-out 0.4s backwards;
}

.stat-card:nth-child(4) {
  animation: slideInUp 0.6s ease-out 0.45s backwards;
}

/* Clinical screeners (replaces inline light colors) */
.clinical-screeners-lead,
.clinical-screeners-empty {
  color: #666;
}

.clinical-screener-row {
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 0.75rem;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  background: #fafafa;
}

.clinical-screener-type {
  font-weight: 800;
  color: #1976d2;
}

.clinical-screener-meta {
  color: #666;
  font-size: 13px;
}

[data-theme='dark'] .clinical-screeners-lead,
[data-theme='dark'] .clinical-screeners-empty,
[data-theme='dark'] .clinical-screener-meta {
  color: #c5d0de !important;
}

[data-theme='dark'] .clinical-screener-row {
  background: #243044 !important;
  border-color: #3d4f66 !important;
}

[data-theme='dark'] .clinical-screener-type {
  color: #8bb8ef !important;
}

/* My resources intro on student dashboard */
.my-resources-intro-card {
  margin-top: 1rem;
  border: 2px solid #0d9488;
  background: linear-gradient(135deg, #f0fdfa 0%, #fff 100%);
}

.my-resources-intro-lead {
  margin-top: 0;
  color: #444;
  font-size: 0.95rem;
  line-height: 1.5;
}

[data-theme='dark'] .my-resources-intro-card {
  background: #1a2332 !important;
  border-color: #2d6b5a !important;
}

[data-theme='dark'] .my-resources-intro-lead {
  color: #ffffff !important;
}

.my-resources-intro-btn {
  margin-top: 0.5rem;
  background: #0d9488;
  border-color: #0d9488;
}
.weekly-summary-card {
  background: var(--white);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px var(--border-light);
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--primary-blue);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.weekly-summary-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(135deg, rgba(74, 144, 226, 0.02) 0%, var(--calm-blue-50) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.weekly-summary-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px var(--shadow-medium);
}

.weekly-summary-card:hover::before {
  opacity: 1;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #f0f0f0;
}

.card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary-blue);
  margin: 0;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.card-badge {
  padding: 0.25rem 0.75rem;
  background: var(--gradient-primary);
  color: white;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  box-shadow: 0 2px 8px var(--focus-ring);
}

.summary-stats {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem;
  background: #f8f9fa;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.stat-row:hover {
  background: #f0f0f0;
  transform: translateX(3px);
}

.stat-label {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.stat-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary-blue);
}

.stat-value.highlight {
  color: #2196f3;
  font-size: 1.25rem;
}

.stat-value.emotion {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-transform: capitalize;
}

.trend-indicator {
  margin-bottom: 1rem;
}

.trend-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.9rem;
}

.trend-badge.decreasing {
  background: #e8f5e9;
  color: #2e7d32;
  border-left: 4px solid #4caf50;
}

.trend-badge.increasing {
  background: #ffebee;
  color: #c62828;
  border-left: 4px solid #f44336;
}

.trend-badge.stable {
  background: #fff3e0;
  color: #ef6c00;
  border-left: 4px solid #ff9800;
}

.trend-icon {
  font-size: 1.25rem;
}

.wellness-streak {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
  border-radius: 10px;
  border-left: 4px solid #ff9800;
}

.streak-icon {
  font-size: 2rem;
}

.streak-info {
  flex: 1;
}

.streak-count {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary-blue);
  margin-bottom: 0.25rem;
}

.streak-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.stat-emoji {
  font-size: 1.2rem;
  margin-right: 0.5rem;
  display: inline-block;
}

.motivational-message {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  border-radius: 12px;
  margin-top: 1rem;
  border-left: 4px solid #2196f3;
  animation: fadeInUp 0.6s ease;
}

.motivational-emoji {
  font-size: 2rem;
  animation: bounce 2s infinite;
}

.motivational-text {
  flex: 1;
  font-size: 0.95rem;
  font-weight: 600;
  color: #1565c0;
  line-height: 1.4;
}

.encouragement-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 1rem;
}

.encouragement-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  border-radius: 10px;
  text-align: center;
  transition: all 0.3s ease;
  animation: fadeIn 0.5s ease;
}

.encouragement-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stress-card {
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
  border-left: 3px solid #ff9800;
}

.emotion-card {
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  border-left: 3px solid #4caf50;
}

.encouragement-emoji {
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
  animation: pulse 2s infinite;
}

.encouragement-text {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}


/* Night mode */
[data-theme='dark'] .weekly-summary-card,
[data-theme='dark'] .stat-row {
  background: #1a2332 !important;
  border-color: #3d4f66 !important;
  color: #e8edf4 !important;
}
[data-theme='dark'] .weekly-summary-card .card-title,
[data-theme='dark'] .stat-label,
[data-theme='dark'] .stat-value {
  background: none !important;
  -webkit-text-fill-color: #e8edf4 !important;
  color: #e8edf4 !important;
}
.goal-progress-card {
  background: var(--white);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px var(--border-light);
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--primary-blue);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.goal-progress-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(135deg, rgba(74, 144, 226, 0.02) 0%, var(--calm-blue-50) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.goal-progress-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px var(--shadow-medium);
}

.goal-progress-card:hover::before {
  opacity: 1;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #f0f0f0;
}

.card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary-blue);
  margin: 0;
}

.card-badge {
  padding: 0.25rem 0.75rem;
  background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%);
  color: white;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

.goals-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.goal-item {
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 10px;
  border-left: 4px solid #e0e0e0;
  transition: all 0.3s ease;
}

.goal-item:hover {
  background: #f0f0f0;
  transform: translateX(3px);
}

.goal-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.goal-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--primary-blue);
}

.goal-status {
  font-size: 1.25rem;
}

.progress-bar-container {
  margin-bottom: 0.75rem;
}

.progress-bar {
  height: 24px;
  background: #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.progress-fill {
  height: 100%;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width 0.5s ease;
  position: relative;
}

.progress-fill.on-track {
  background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%);
}

.progress-fill.needs-improvement {
  background: linear-gradient(135deg, #ff9800 0%, #ffb74d 100%);
}

.progress-fill.at-risk {
  background: linear-gradient(135deg, #f44336 0%, #e57373 100%);
}

.progress-text {
  font-size: 0.75rem;
  font-weight: 700;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.goal-details {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.progress-label {
  font-weight: 500;
}

.target-label {
  font-weight: 600;
  color: var(--text-muted);
}

.goals-summary {
  display: flex;
  justify-content: space-around;
  padding-top: 1.5rem;
  border-top: 2px solid #f0f0f0;
  gap: 1rem;
}

.summary-stat {
  text-align: center;
  flex: 1;
}

.summary-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--primary-blue);
  margin-bottom: 0.5rem;
}

.summary-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.achievement-badges-card {
  background: var(--white);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px var(--border-light);
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--primary-blue);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.achievement-badges-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(135deg, rgba(74, 144, 226, 0.02) 0%, var(--calm-blue-50) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.achievement-badges-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px var(--shadow-medium);
}

.achievement-badges-card:hover::before {
  opacity: 1;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #f0f0f0;
}

.card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary-blue);
  margin: 0;
}

.card-badge {
  padding: 0.25rem 0.75rem;
  background: linear-gradient(135deg, #ff9800 0%, #ffb74d 100%);
  color: white;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.achievement-badge {
  padding: 1rem;
  border-radius: 10px;
  border: 2px solid #e0e0e0;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all 0.3s ease;
  position: relative;
  background: #f8f9fa;
}

.achievement-badge.unlocked {
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
  border-color: #ff9800;
  box-shadow: 0 2px 8px rgba(255, 152, 0, 0.2);
}

.achievement-badge.locked {
  opacity: 0.6;
  background: #f5f5f5;
}

.achievement-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.badge-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.badge-content {
  flex: 1;
}

.badge-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--primary-blue);
  margin-bottom: 0.25rem;
}

.badge-description {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.badge-checkmark {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 24px;
  height: 24px;
  background: #4caf50;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  box-shadow: 0 2px 4px rgba(76, 175, 80, 0.3);
}

.achievement-progress {
  padding-top: 1.5rem;
  border-top: 2px solid #f0f0f0;
}

.progress-bar-wrapper {
  height: 8px;
  background: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0.75rem;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(135deg, #ff9800 0%, #ffb74d 100%);
  border-radius: 4px;
  transition: width 0.5s ease;
}

.progress-text {
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-align: center;
  font-weight: 500;
}

.chart-container {
  background: transparent;
  border-radius: 12px;
  padding: 0;
  transition: all 0.3s ease;
}

.chart-container:hover {
  transform: translateY(-2px);
}

.chart-header {
  margin-bottom: 1.5rem;
}

.chart-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary-blue);
  margin-bottom: 0.5rem;
  transition: color 0.3s ease;
}

.chart-subtitle {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.chart-container:hover .chart-title {
  color: var(--primary-blue);
}

.chart-note {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 0.75rem;
  font-style: italic;
}

/* Emotion Distribution Styles */
.emotion-distribution {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e0e0e0;
}

.distribution-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 1rem;
}

.distribution-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}

.distribution-item {
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 3px solid #e0e0e0;
  transition: all 0.3s ease;
}

.distribution-item:hover {
  background: #f0f0f0;
  transform: translateX(3px);
}

.emotion-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.emotion-emoji {
  font-size: 1.5rem;
}

.emotion-stats {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.emotion-percentage {
  font-size: 1.25rem;
  font-weight: 700;
}

.emotion-count {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.emotion-intensity {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.emotion-bar {
  height: 4px;
  background: #e0e0e0;
  border-radius: 2px;
  overflow: hidden;
}

.emotion-bar-fill {
  height: 100%;
  transition: width 0.5s ease;
}

/* Stress Analysis Styles */
.stress-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.stat-card {
  padding: 1rem;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border-radius: 10px;
  border: 1px solid #e0e0e0;
  text-align: center;
}

.stat-card.highlight {
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
  border-color: #ff9800;
}

.stat-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--primary-blue);
  margin-bottom: 0.25rem;
}

.stat-trend {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.trend-indicator {
  display: inline-block;
  margin-right: 0.25rem;
}

.trend-indicator.decreasing {
  color: #4caf50;
}

.trend-indicator.increasing {
  color: #f44336;
}

.stress-insights {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e0e0e0;
}

.insights-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 1rem;
}

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

.insights-list li {
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 3px solid #2196f3;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.insights-list li.positive-insight {
  border-left-color: #4caf50;
  background: #f1f8f4;
}

.insight-icon {
  font-size: 1.25rem;
}

/* Heatmap Styles */
.heatmap-container {
  margin-top: 1rem;
}

.heatmap-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.legend-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.legend-gradient {
  display: flex;
  gap: 2px;
}

.legend-color {
  width: 20px;
  height: 20px;
  border-radius: 4px;
}

.heatmap-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.heatmap-week {
  display: flex;
  gap: 0.5rem;
}

.heatmap-day {
  flex: 1;
  aspect-ratio: 1;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  border: 2px solid transparent;
}

.heatmap-day:hover {
  transform: scale(1.1);
  z-index: 10;
  border-color: var(--primary-blue);
}

.heatmap-day.empty {
  background: #f5f5f5;
  opacity: 0.3;
}

.heatmap-day-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.heatmap-day-score {
  font-size: 0.6rem;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  margin-top: 0.25rem;
}

.heatmap-summary {
  display: flex;
  justify-content: space-around;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e0e0e0;
  flex-wrap: wrap;
  gap: 1rem;
}

.summary-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.summary-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.summary-value {
  font-size: 1.5rem;
  font-weight: 700;
}

/* Correlation Styles */
.correlation-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.correlation-card {
  padding: 1.25rem;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border-radius: 10px;
  border: 1px solid #e0e0e0;
  text-align: center;
}

.correlation-label {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
  font-weight: 500;
}

.correlation-value {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.correlation-strength {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.correlation-description {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
}

.correlation-insight {
  margin-top: 1rem;
  padding: 1rem;
  background: #e3f2fd;
  border-radius: 8px;
  border-left: 4px solid #2196f3;
}

.insight-text {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-primary);
}

/* StudentTimeSeriesChart — L/M/H legend row (aligned with Stress/Mood/Wellness) */
.chart-legend-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1.25rem;
  margin: 0.35rem 0 0.75rem;
}

.chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--text-secondary, #5a6c7d);
}

.chart-legend-swatch {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  flex-shrink: 0;
}

.chart-legend-letter {
  font-weight: 700;
  color: var(--text-primary, #2c3e50);
}

.chart-legend-full {
  font-size: 0.75rem;
  opacity: 0.9;
}

.chart-recharts-wrap {
  width: 100%;
  min-height: 250px;
}

.chart-empty-state {
  padding: 1rem 0.5rem 1.25rem;
  text-align: center;
  color: var(--text-secondary, #5a6c7d);
  font-size: 0.9rem;
}

.chart-empty-hint {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  opacity: 0.85;
}

.enhanced-analytics-container {
  min-height: 100vh;
  background: var(--gradient-soft);
  animation: fadeIn 0.5s ease-out;
}

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

.enhanced-analytics-content-wrapper {
  max-width: 1600px;
  margin: 0 auto;
  padding: 2rem;
}

.enhanced-analytics-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.analytics-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.header-content {
  flex: 1;
}

.page-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary-blue);
  margin-bottom: 0.5rem;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-subtitle {
  font-size: 1rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.time-range-selector {
  display: flex;
  gap: 0.5rem;
  background: white;
  padding: 0.25rem;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.time-btn {
  padding: 0.5rem 1rem;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.3s ease;
}

.time-btn:hover {
  background: #f5f5f5;
  color: var(--primary-blue);
}

.time-btn.active {
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue) 100%);
  color: white;
  box-shadow: 0 2px 8px var(--focus-ring);
}

/* Date range (match Student Dashboard date picker look) */
.esa-date-range-row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin: 0.25rem 0 1rem;
}

.esa-date-picker-wrapper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.esa-date-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary-blue);
}

.esa-calendar-icon {
  font-size: 1.25rem;
}

.esa-date-input {
  padding: 0.75rem 1rem;
  border: 2px solid var(--border-medium);
  border-radius: 8px;
  font-size: 1rem;
  color: var(--primary-blue);
  background: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

.esa-date-input:hover {
  border-color: var(--primary-blue);
}

.esa-date-input:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.esa-date-range-sep {
  color: #666;
  font-weight: 600;
}

/* Metrics Overview Grid */
.metrics-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

/* Analytics Main Grid */
.analytics-main-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
}

.chart-section-large {
  grid-column: span 6;
  background: var(--white);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px var(--border-light);
  border: 1px solid var(--border-light);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.chart-section-large::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue) 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}

.chart-section-large:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.chart-section-large:hover::before {
  transform: scaleX(1);
}

.chart-section-medium {
  grid-column: span 6;
  background: var(--white);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px var(--border-light);
  border: 1px solid var(--border-light);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.chart-section-medium::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue) 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}

.chart-section-medium:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.chart-section-medium:hover::before {
  transform: scaleX(1);
}

.insights-section {
  grid-column: span 12;
  background: var(--white);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px var(--border-light);
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--primary-blue);
}

/* Responsive Design */
@media (max-width: 1400px) {
  .chart-section-large {
    grid-column: span 12;
  }
  
  .chart-section-medium {
    grid-column: span 12;
  }
}

@media (max-width: 968px) {
  .analytics-page-header {
    flex-direction: column;
  }

  .metrics-overview-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .enhanced-analytics-content-wrapper {
    padding: 1rem;
  }

  .page-title {
    font-size: 1.5rem;
  }

  .chart-section-large,
  .chart-section-medium {
    padding: 1rem;
  }
}

/* Animations */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chart-section-large,
.chart-section-medium,
.insights-section {
  animation: slideInUp 0.6s ease-out backwards;
}

.chart-section-large:nth-child(1) {
  animation-delay: 0.1s;
}

.chart-section-large:nth-child(2) {
  animation-delay: 0.2s;
}

.chart-section-large:nth-child(3) {
  animation-delay: 0.3s;
}

.chart-section-medium {
  animation-delay: 0.4s;
}

.insights-section {
  animation-delay: 0.5s;
}

.quick-support {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 1.5rem;
}

.support-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.support-card {
  padding: 1.5rem;
  background: var(--white);
  border-radius: 12px;
  border-left: 4px solid var(--card-color, var(--primary-blue));
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 200px;
  border: 1px solid var(--border-light);
  border-right: 1px solid var(--border-light);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

.support-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.support-card.urgent {
  background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%) !important;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 4px 12px rgba(244, 67, 54, 0.2);
  }
  50% {
    box-shadow: 0 4px 16px rgba(244, 67, 54, 0.4);
  }
}

.support-icon {
  font-size: 2rem;
  text-align: center;
}

.support-content {
  flex: 1;
}

.support-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.support-card-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin: 0;
  font-weight: 500;
}

.support-card-details {
  font-size: 0.8rem;
  color: #888;
  margin: 0.5rem 0 0 0;
  line-height: 1.4;
}

.support-action-btn {
  padding: 0.625rem 1rem;
  background: var(--card-color, var(--primary-blue));
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
}

.support-action-btn:hover {
  opacity: 0.9;
  transform: scale(1.02);
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
}

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

.modal-content {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  animation: slideUp 0.3s ease;
  position: relative;
  transition: all 0.3s ease;
}

.modal-content.draggable-modal {
  user-select: none;
}

.modal-content.expanded {
  max-width: 98vw;
  width: 98vw;
  max-height: 98vh;
  height: 98vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) !important;
  position: fixed;
  padding: 1.5rem;
  border-radius: 12px;
}

.resources-modal {
  max-width: 700px;
}

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

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #e0e0e0;
}

.modal-header.draggable-header {
  cursor: grab;
}

.modal-header.draggable-header:active {
  cursor: grabbing;
}

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

.modal-header h3 {
  margin: 0;
  font-size: 1.5rem;
  color: var(--primary-blue);
}

.modal-close,
.expand-toggle {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s;
  font-weight: bold;
  line-height: 1;
}

.modal-close {
  font-size: 2rem;
}

.expand-toggle {
  font-size: 1.8rem;
  font-weight: 300;
}

.modal-close:hover,
.expand-toggle:hover {
  background: #f0f0f0;
  color: var(--text-primary);
  transform: scale(1.1);
}

.modal-body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.counselor-info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.school-staff-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.staff-card {
  border: 1px solid var(--border-light);
  background: #ffffff;
  border-radius: 12px;
  padding: 0.9rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.staff-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.staff-card-title-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  flex: 1;
}

.quick-support-staff-avatar {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
}

.quick-support-staff-avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  z-index: 1;
}

.quick-support-staff-avatar-initial {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
}

.staff-name {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-role-badge {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--primary-blue);
  background: rgba(33, 150, 243, 0.12);
  border: 1px solid rgba(33, 150, 243, 0.25);
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  flex-shrink: 0;
}

.staff-meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.staff-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.35rem 0.5rem;
  border-radius: 10px;
  background: #f8f9fa;
}

.staff-meta-label {
  font-weight: 700;
  color: var(--text-secondary);
  font-size: 0.8rem;
  flex-shrink: 0;
}

.staff-actions {
  margin-top: 0.6rem;
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.staff-action-btn {
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  border: 1px solid var(--border-medium);
  background: white;
  color: var(--primary-blue);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.staff-action-btn:hover {
  background: rgba(33, 150, 243, 0.08);
  transform: translateY(-1px);
}

.info-item {
  padding: 0.75rem;
  background: #f8f9fa;
  border-radius: 8px;
  font-size: 0.95rem;
}

.info-item strong {
  color: var(--primary-blue);
  margin-right: 0.5rem;
}

.contact-link {
  color: #2196f3;
  text-decoration: none;
  margin-left: 0.5rem;
  transition: color 0.2s;
}

.contact-link:hover {
  color: #1976d2;
  text-decoration: underline;
}

.emergency-note {
  background: #fff3cd;
  border-left: 3px solid #ffc107;
  color: #856404;
  font-size: 0.85rem;
}

.modal-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.btn-primary {
  flex: 1;
  padding: 0.75rem 1.5rem;
  background: var(--primary-blue);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-primary:hover {
  background: var(--primary-blue);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.btn-secondary {
  flex: 1;
  padding: 0.75rem 1.5rem;
  background: #e0e0e0;
  color: var(--text-primary);
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-secondary:hover {
  background: #d0d0d0;
  transform: translateY(-2px);
}

.resources-intro {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

.resources-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.resource-item {
  padding: 1.25rem;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 3px solid #ff9800;
  transition: all 0.2s;
}

.resources-modal.expanded .resource-item {
  min-height: 200px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.resources-modal.expanded .resources-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  gap: 1.5rem !important;
  max-height: calc(98vh - 250px) !important;
  overflow-y: auto !important;
  padding-right: 0.5rem;
}

.resources-modal.expanded .resources-list::-webkit-scrollbar {
  width: 10px;
}

.resources-modal.expanded .resources-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 5px;
}

.resources-modal.expanded .resources-list::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}

.resources-modal.expanded .resources-list::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.resources-modal.expanded .resource-item h4 {
  font-size: 1.3rem !important;
  margin-bottom: 0.75rem !important;
}

.resources-modal.expanded .resource-item p {
  font-size: 1rem !important;
  line-height: 1.6 !important;
  margin-bottom: 1rem !important;
}

.resources-modal.expanded .resource-link-btn {
  font-size: 1rem !important;
  padding: 0.5rem 1rem !important;
  border-radius: 6px !important;
}

.resource-item.highlighted {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  border-left: 4px solid #2196f3;
  box-shadow: 0 2px 8px var(--border-medium);
}

.resource-item:hover {
  background: #f0f0f0;
  transform: translateX(5px);
}

.resource-item.highlighted:hover {
  background: linear-gradient(135deg, #bbdefb 0%, #90caf9 100%);
}

.resource-item h4 {
  margin: 0 0 0.5rem 0;
  color: var(--primary-blue);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.badge-new {
  padding: 0.25rem 0.75rem;
  background: #2196f3;
  color: white;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.resource-item p {
  margin: 0 0 0.75rem 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
}

.resource-link-btn {
  background: none;
  border: none;
  color: #ff9800;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  font-size: 0.9rem;
  transition: all 0.2s;
}

.resource-link-btn:hover {
  color: #f57c00;
  transform: translateX(3px);
}

/* Maximum Zoom Styles for Resources Modal */
.resources-modal.expanded {
  max-width: 98vw !important;
  width: 98vw !important;
  max-height: 98vh !important;
  height: 98vh !important;
  padding: 2rem !important;
}

.resources-modal.expanded .resources-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  gap: 1.5rem !important;
  max-height: calc(98vh - 250px) !important;
  overflow-y: auto !important;
  padding-right: 0.5rem;
}

.resources-modal.expanded .resources-list::-webkit-scrollbar {
  width: 10px;
}

.resources-modal.expanded .resources-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 5px;
}

.resources-modal.expanded .resources-list::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}

.resources-modal.expanded .resources-list::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.resources-modal.expanded .resource-item {
  min-height: 200px;
  padding: 1.75rem !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.resources-modal.expanded .resource-item h4 {
  font-size: 1.3rem !important;
  margin-bottom: 0.75rem !important;
}

.resources-modal.expanded .resource-item p {
  font-size: 1rem !important;
  line-height: 1.6 !important;
  margin-bottom: 1rem !important;
}

.resources-modal.expanded .resource-link-btn {
  font-size: 1rem !important;
  padding: 0.5rem 1rem !important;
  border-radius: 6px !important;
}

@media (max-width: 768px) {
  .support-grid {
    grid-template-columns: 1fr;
  }
  
  .modal-content {
    padding: 1.5rem;
    width: 95%;
  }
  
  .modal-actions {
    flex-direction: column;
  }
}

.resources-page-container {
  min-height: 100vh;
  background: var(--gradient-soft);
}

.resources-content-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 1.25rem 1.5rem;
}

.resources-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.page-header {
  margin-bottom: 0.5rem;
  text-align: center;
}

.page-title {
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--primary-blue);
  margin-bottom: 0.2rem;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.resources-section-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--primary-blue, #1e40af);
  margin: 0.75rem 0 0.15rem;
}

.resources-section-subtitle {
  font-size: 0.88rem;
  color: var(--text-secondary, #64748b);
  margin: 0 0 0.5rem;
}

.support-section-full {
  display: flex;
  flex-direction: column;
  width: 100%;
}

@media (max-width: 768px) {
  .resources-content-wrapper {
    padding: 1rem;
  }
  
  .page-title {
    font-size: 1.8rem;
  }
  
  .page-subtitle {
    font-size: 0.95rem;
  }
}

.resource-map-leaflet-wrap {
  width: 100%;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}

.resource-map-leaflet-wrap .resource-map-leaflet-note {
  margin: 0;
  padding: 0.5rem 0.75rem;
  font-size: 0.8rem;
  color: #475569;
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
}

.resource-map-leaflet-map {
  flex: 1;
  min-height: 480px;
  width: 100%;
  position: relative;
}

.resource-map-google-map {
  min-height: 480px;
}

.resource-map-google-map > div {
  border-radius: 8px;
  overflow: hidden;
}

/*
 * Google Maps InfoWindow draws its own close control (small box + ×) on top of the tail.
 * We use custom content + our own close + onCloseClick, so hide the default chrome.
 */
.resource-map-google-map .gm-style-iw-chr {
  display: none !important;
}

.resource-map-google-map .gm-style-iw button[title='Close'],
.resource-map-google-map .gm-style-iw button[aria-label='Close'] {
  display: none !important;
}

.resource-map-google-map .gm-style-iw-c button.gm-ui-hover-effect {
  display: none !important;
}

.resource-map-custom-marker {
  outline: none;
}
.resource-map-custom-marker:hover {
  filter: brightness(1.1);
}
.resource-map-custom-marker:focus-visible {
  outline: 2px solid #0ea5e9;
  outline-offset: 2px;
}

.resource-leaflet-marker-wrap {
  background: transparent !important;
  border: none !important;
}

.resource-leaflet-marker-dot {
  flex-shrink: 0;
}

.resource-map-leaflet-empty {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  color: #64748b;
  text-align: center;
  font-size: 0.95rem;
}

.resource-map-leaflet-popup .popup-title {
  font-weight: 700;
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  color: #0f172a;
}

.resource-map-leaflet-popup .popup-line {
  margin: 0.2rem 0;
  font-size: 0.8rem;
  color: #334155;
}

.resource-map-leaflet-popup a {
  color: #2563eb;
}

/* Rich InfoWindow (Google Maps–style card) */
.gm-style-card.resource-map-info-window {
  max-width: 300px;
}

.resource-map-info-window {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: #202124;
  line-height: 1.35;
  padding: 0.15rem 0.25rem 0.35rem;
}

.resource-map-info-window--compact {
  max-width: 280px;
  padding: 0.35rem 0.4rem 0.5rem;
}

.resource-map-info-compact-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.35rem;
}

.resource-map-info-compact-head .resource-map-info-title {
  margin-bottom: 0.1rem;
}

.resource-map-info-compact-close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #f1f3f4;
  color: #5f6368;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.resource-map-info-compact-close:hover {
  background: #e8eaed;
  color: #202124;
}

.resource-map-info-section--tight {
  margin-top: 0.35rem;
  padding-top: 0.35rem;
}

.resource-map-info-line--location {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.3;
}

.resource-map-info-more {
  display: block;
  width: 100%;
  margin-top: 0.45rem;
  padding: 0.35rem 0.5rem;
  border: none;
  border-radius: 8px;
  background: #e8f0fe;
  color: #1967d2;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
}

.resource-map-info-more:hover {
  background: #d2e3fc;
}

/* Full detail card (portal) */
.resource-map-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483600;
  background: rgba(32, 33, 36, 0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1rem;
  overflow-y: auto;
}

.resource-map-detail-card {
  width: 100%;
  max-width: 420px;
  max-height: min(90vh, 640px);
  overflow-y: auto;
  margin: 0.5rem auto;
  background: #fff;
  border-radius: 16px;
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.18),
    0 2px 6px rgba(0, 0, 0, 0.08);
  border: 1px solid #dadce0;
}

.resource-map-detail-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1rem 0.75rem;
  border-bottom: 1px solid #e8eaed;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}

.resource-map-detail-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #202124;
}

.resource-map-detail-sub {
  margin: 0.2rem 0 0;
  font-size: 0.85rem;
  color: #5f6368;
}

.resource-map-detail-close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: #f1f3f4;
  color: #5f6368;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.resource-map-detail-close:hover {
  background: #e8eaed;
  color: #202124;
}

.resource-map-detail-first {
  margin-top: 0 !important;
  padding-top: 0.75rem !important;
  border-top: none !important;
  padding-left: 1rem;
  padding-right: 1rem;
}

.resource-map-detail-card .resource-map-info-section {
  padding-left: 1rem;
  padding-right: 1rem;
}

.resource-map-detail-card-foot {
  padding: 0.75rem 1rem 1rem;
  border-top: 1px solid #e8eaed;
  position: sticky;
  bottom: 0;
  background: #fff;
}

.resource-map-detail-done {
  width: 100%;
  padding: 0.55rem;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  background: #1a73e8;
  color: #fff;
  cursor: pointer;
}

.resource-map-detail-done:hover {
  background: #1557b0;
}

.resource-map-info-reviews--tall {
  max-height: 200px;
}

.resource-map-info-title {
  margin: 0 0 0.2rem;
  font-size: 1rem;
  font-weight: 600;
  color: #202124;
}

.resource-map-info-category {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  color: #5f6368;
}

.resource-map-info-section {
  margin-top: 0.55rem;
  padding-top: 0.5rem;
  border-top: 1px solid #e8eaed;
}

.resource-map-info-section:first-of-type {
  margin-top: 0.25rem;
  padding-top: 0;
  border-top: none;
}

.resource-map-info-heading {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #5f6368;
}

.resource-map-info-desc {
  margin: 0;
  font-size: 0.82rem;
  color: #3c4043;
}

.resource-map-info-line {
  margin: 0.25rem 0;
  font-size: 0.82rem;
  color: #3c4043;
  display: flex;
  gap: 0.35rem;
  align-items: flex-start;
}

.resource-map-info-icon {
  flex-shrink: 0;
}

.resource-map-info-line a {
  color: #1a73e8;
  word-break: break-word;
}

.resource-map-info-rating-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
}

.resource-map-info-stars {
  color: #f9ab00;
  font-size: 0.85rem;
  letter-spacing: -0.05em;
}

.resource-map-info-stars-dim {
  color: #dadce0;
}

.resource-map-info-rating-text {
  font-size: 0.8rem;
  color: #5f6368;
}

.resource-map-info-muted {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  color: #80868b;
}

.resource-map-info-meta-list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.78rem;
  color: #3c4043;
}

.resource-map-info-meta-list li {
  margin-bottom: 0.2rem;
}

.resource-map-info-reviews {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  max-height: 140px;
  overflow-y: auto;
}

.resource-map-info-review-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.72rem;
}

.resource-map-info-review-stars {
  color: #f9ab00;
  letter-spacing: -0.05em;
}

.resource-map-info-review-when {
  color: #80868b;
  flex-shrink: 0;
}

.resource-map-info-review-text {
  margin: 0.2rem 0 0;
  font-size: 0.78rem;
  color: #3c4043;
}

.resource-map-info-hint {
  margin: 0.5rem 0 0;
  font-size: 0.72rem;
  color: #80868b;
  font-style: italic;
}

.resource-map-info-feedback-stars {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 0.35rem;
}

.resource-map-info-star-pick {
  border: 1px solid #dadce0;
  background: #fff;
  border-radius: 6px;
  padding: 0.2rem 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #5f6368;
  cursor: pointer;
}

.resource-map-info-star-pick.is-on {
  border-color: #f9ab00;
  background: #fff8e1;
  color: #b06000;
}

.resource-map-info-star-pick:disabled {
  opacity: 0.6;
  cursor: wait;
}

.resource-map-info-note-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: #5f6368;
  margin-bottom: 0.2rem;
}

.resource-map-info-note {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #dadce0;
  border-radius: 8px;
  padding: 0.35rem 0.5rem;
  font-size: 0.78rem;
  resize: vertical;
  min-height: 2.5rem;
  font-family: inherit;
}

.resource-map-info-submit {
  margin-top: 0.4rem;
  width: 100%;
  border: none;
  border-radius: 8px;
  padding: 0.45rem 0.65rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
  background: #1a73e8;
  cursor: pointer;
}

.resource-map-info-submit:hover:not(:disabled) {
  background: #1557b0;
}

.resource-map-info-submit:disabled {
  opacity: 0.7;
  cursor: wait;
}

.resource-map-info-feedback-error {
  margin: 0 0 0.35rem;
  padding: 0.4rem 0.5rem;
  font-size: 0.78rem;
  color: #b3261e;
  background: #fce8e6;
  border-radius: 8px;
  border: 1px solid #f9dedc;
}

/* Shared: quick 1★–5★ (admin map list + student matched resources + map popup) */
.resource-quick-star {
  margin-top: 0.35rem;
}

.resource-quick-star--compact {
  margin-top: 0.25rem;
}

.resource-quick-star-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  color: #5f6368;
  margin-bottom: 0.25rem;
}

.resource-quick-star-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.resource-quick-star-btn {
  border: 1px solid var(--primary-blue-light, #6ba3e8);
  background: var(--primary-blue-soft, #e8f2fc);
  color: var(--primary-blue-dark, #357abd);
  border-radius: 6px;
  padding: 0.2rem 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}

.resource-quick-star-btn:hover:not(:disabled) {
  background: #dbeafe;
  border-color: var(--primary-blue, #4a90e2);
}

.resource-quick-star-btn:disabled {
  opacity: 0.55;
  cursor: wait;
}

.resource-quick-star-error {
  margin: 0.35rem 0 0;
  font-size: 0.7rem;
  color: #b3261e;
}

.resource-map-info-google-badge {
  margin: 0.2rem 0 0;
  font-size: 0.68rem;
  font-weight: 700;
  color: #2563eb;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.resource-map-info-more--link {
  display: inline-block;
  margin-top: 0.5rem;
  text-decoration: none;
}

/* Link-only location list (no embedded Google Maps API) */
.resource-map-list {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
  max-height: 520px;
  overflow-y: auto;
}

.resource-map-list-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
  transition: background 0.15s ease;
}

.resource-map-list-item:last-child {
  border-bottom: none;
}

.resource-map-list-item--highlighted {
  background: #fff7ed;
  box-shadow: inset 3px 0 0 #d97706;
}

.resource-map-list-item--google {
  background: #f8fafc;
}

.resource-map-list-dot {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-top: 0.35rem;
  border: 2px solid rgba(0, 0, 0, 0.12);
}

.resource-map-list-body {
  flex: 1;
  min-width: 0;
}

.resource-map-list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
}

.resource-map-list-title {
  font-size: 0.95rem;
  color: #0f172a;
}

.resource-map-list-category {
  font-size: 0.75rem;
  color: #64748b;
  background: #f1f5f9;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
}

.resource-map-list-badge {
  font-size: 0.7rem;
  color: #1d4ed8;
  background: #dbeafe;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
}

.resource-map-list-addr,
.resource-map-list-phone,
.resource-map-list-rating {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  color: #475569;
}

.resource-map-list-phone a {
  color: #0d9488;
  text-decoration: none;
}

.resource-map-list-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.resource-map-list-btn {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.resource-map-list-btn--primary {
  background: #0d9488;
  color: #fff;
}

.resource-map-list-btn--primary:hover {
  background: #0f766e;
}

.resource-map-list-btn--secondary {
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #cbd5e1;
}

.resource-map-list-btn--secondary:hover {
  background: #e2e8f0;
}
.loop-match-section {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  margin-bottom: 0.65rem;
  overflow: hidden;
  background: #fff;
}

.loop-match-section.severity-red {
  border-color: #e8c4c8;
}

.loop-match-section.severity-yellow {
  border-color: #f0e4b8;
}

.loop-match-section.severity-green {
  border-color: #c8e4c4;
}

.loop-match-toggle {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: none;
  background: #f8fafc;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.loop-match-toggle:hover {
  background: #f1f5f9;
}

.loop-match-sev {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-top: 0.45rem;
  flex-shrink: 0;
}

.loop-match-sev--red {
  background: #a13544;
}

.loop-match-sev--yellow {
  background: #d19900;
}

.loop-match-sev--green {
  background: #437a22;
}

.loop-match-toggle-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.loop-match-domain {
  font-weight: 700;
  font-size: 0.95rem;
  color: #0f172a;
}

.loop-match-summary {
  font-size: 0.8rem;
  color: #64748b;
}

.loop-match-priority {
  font-size: 0.75rem;
  font-weight: 600;
}

.loop-match-priority--red {
  color: #a13544;
}

.loop-match-priority--yellow {
  color: #9a7200;
}

.loop-match-priority--green {
  color: #437a22;
}

.loop-match-chevron {
  color: #01696f;
  font-size: 1rem;
  flex-shrink: 0;
}

.loop-match-panel {
  padding: 0 0.85rem 0.85rem;
  border-top: 1px solid #e8ecef;
}

.loop-match-empty {
  margin: 0.65rem 0 0;
  font-size: 0.86rem;
  color: #64748b;
  line-height: 1.45;
}

.loop-match-block {
  margin-top: 0.75rem;
}

.loop-match-block-title {
  margin: 0 0 0.45rem;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #475569;
}

.loop-match-block--google {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px dashed #e2e8f0;
}

.loop-match-list {
  margin-top: 0 !important;
}

.fnr-loop-matches {
  margin-top: 0.75rem;
}

.fnr-loop-matches-intro {
  margin: 0 0 0.65rem;
  font-size: 0.86rem;
  color: #475569;
  line-height: 1.45;
}

/* Night mode */
[data-theme='dark'] .loop-match-section,
[data-theme='dark'] .loop-match-panel {
  background: #1a2332 !important;
  border-color: #3d4f66 !important;
  color: #e8edf4 !important;
}
[data-theme='dark'] .loop-match-toggle {
  background: #243044 !important;
  color: #e8edf4 !important;
}
[data-theme='dark'] .loop-match-domain {
  color: #e8edf4 !important;
}
[data-theme='dark'] .loop-match-summary,
[data-theme='dark'] .loop-match-empty,
[data-theme='dark'] .loop-match-block-title,
[data-theme='dark'] .fnr-loop-matches-intro {
  color: #c5d0de !important;
}
.fnr-quick-rate {
  margin: 0.35rem 0 0.25rem;
}

.fnr-card {
  margin-top: 0.5rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

.fnr-loading {
  color: #64748b;
  font-size: 0.95rem;
}

.fnr-error-detail {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: #b91c1c;
  background: #fef2f2;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
}

.fnr-retry {
  margin-top: 0.75rem;
  padding: 0.5rem 1rem;
  font-weight: 600;
  font-size: 0.88rem;
  color: #0d9488;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 8px;
  cursor: pointer;
}

.fnr-retry:hover {
  background: #d1fae5;
}

.fnr-title {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
  color: #0f172a;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.fnr-lead {
  margin: 0 0 0.4rem;
  color: #475569;
  font-size: 0.85rem;
  line-height: 1.35;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.fnr-muted {
  background: linear-gradient(135deg, #f8fafc 0%, #fff 100%);
  border-color: #cbd5e1;
}

.fnr-success {
  background: linear-gradient(135deg, #f0fdf4 0%, #fff 100%);
  border-color: #86efac;
}

.fnr-warn {
  background: linear-gradient(135deg, #fffbeb 0%, #fff 100%);
  border-color: #fcd34d;
}

.fnr-main {
  border-color: #0d9488;
  border-width: 2px;
  background: linear-gradient(180deg, #f0fdfa 0%, #fff 12%);
}

.fnr-location-panel {
  margin: 0.65rem 0 0.35rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.fnr-location-hint {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  color: #475569;
  line-height: 1.35;
  display: block;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

.fnr-location-search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.5rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.fnr-location-input {
  flex: 1;
  min-width: 12rem;
  padding: 0.45rem 0.65rem;
  font-size: 0.9rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  color: #0f172a;
}

.fnr-location-input:focus {
  outline: none;
  border-color: #0d9488;
  box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.2);
}

.fnr-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.45rem;
  margin-bottom: 0.4rem;
}

.fnr-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  background: #e0f2fe;
  color: #0369a1;
}

.fnr-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.fnr-item {
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #fafafa;
}

.fnr-item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem;
  margin-bottom: 0.15rem;
}

.fnr-item-head strong {
  color: #0f172a;
  font-size: 1rem;
}

.fnr-cat {
  font-size: 0.75rem;
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  background: #dbeafe;
  color: #1e40af;
}

.fnr-desc {
  margin: 0 0 0.3rem;
  font-size: 0.82rem;
  color: #64748b;
  line-height: 1.4;
}

.fnr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.fnr-nearby-controls {
  margin-bottom: 0.55rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.fnr-radius-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  color: #334155;
  font-weight: 600;
}

.fnr-radius-select {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 0.3rem 0.5rem;
  font-size: 0.82rem;
  background: #fff;
}

.fnr-location-status {
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
  color: #0f766e;
}

.fnr-nearby-count {
  margin: 0 0 0.45rem;
  font-size: 0.8rem;
  color: #334155;
}

.fnr-rating-pill {
  font-family: inherit;
  font-size: 0.76rem;
  color: #7c2d12;
  background: #ffedd5;
  border: 1px solid #fdba74;
  border-radius: 999px;
  padding: 0.2rem 0.5rem;
  font-weight: 700;
  cursor: pointer;
}

.fnr-rating-pill:hover {
  background: #fed7aa;
  border-color: #fb923c;
}

.fnr-rating-pill:focus-visible {
  outline: 2px solid #0d9488;
  outline-offset: 2px;
}

.fnr-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.fnr-btn-primary {
  background: #0d9488;
  color: #fff;
}

.fnr-btn-primary:hover {
  background: #0f766e;
  color: #fff;
}

.fnr-btn-secondary {
  background: #f1f5f9;
  color: #0f172a;
  border: 1px solid #e2e8f0;
}

.fnr-btn-map {
  background: #e0f2fe;
  color: #0369a1;
  border: 1px solid #7dd3fc;
}

.fnr-btn-map:hover {
  background: #bae6fd;
  color: #0c4a6e;
}

.fnr-btn-why {
  background: #fff7ed;
  color: #9a3412;
  border: 1px solid #fdba74;
}

.fnr-btn-why:hover {
  background: #ffedd5;
}

.fnr-addr {
  font-size: 0.8rem;
  color: #64748b;
}

.fnr-expand {
  margin-top: 0.45rem;
  width: 100%;
  padding: 0.5rem;
  font-weight: 600;
  font-size: 0.88rem;
  color: #0d9488;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 8px;
  cursor: pointer;
}

.fnr-map-section {
  margin-top: 0.65rem;
  padding-top: 0.6rem;
  border-top: 1px dashed #cbd5e1;
}

.fnr-map-toggle {
  width: 100%;
  text-align: left;
  padding: 0.45rem 0.65rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #334155;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 0.45rem;
}

.fnr-map-wrap {
  border-radius: 12px;
  overflow: hidden;
}

.fnr-map-wrap .resource-map-leaflet-note {
  font-size: 0.75rem;
}

/* “Why this match?” modal */
.fnr-why-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1.5rem 1rem;
  overflow-y: auto;
}

.fnr-why-modal {
  background: #fff;
  width: 100%;
  max-width: 480px;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  border: 1px solid #e2e8f0;
  margin-top: 0.5rem;
}

.fnr-why-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1rem 0.25rem;
  border-bottom: 1px solid #f1f5f9;
}

.fnr-why-head h2 {
  margin: 0;
  font-size: 1.05rem;
  color: #0f172a;
}

.fnr-why-close {
  border: none;
  background: #f1f5f9;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  color: #64748b;
}

.fnr-why-close:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.fnr-why-resource-title {
  margin: 0.5rem 1rem 0;
  font-weight: 700;
  color: #0f172a;
  font-size: 0.95rem;
}

.fnr-why-meta {
  margin: 0.35rem 1rem 0.75rem;
  font-size: 0.82rem;
  color: #64748b;
  line-height: 1.45;
}

.fnr-why-body {
  padding: 0 1rem 1rem;
  max-height: min(52vh, 420px);
  overflow-y: auto;
}

.fnr-why-section {
  margin-bottom: 1rem;
}

.fnr-why-section h3 {
  margin: 0 0 0.35rem;
  font-size: 0.88rem;
  color: #b45309;
  border-left: 3px solid #f59e0b;
  padding-left: 0.5rem;
}

.fnr-why-section ul {
  margin: 0;
  padding-left: 1.15rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: #334155;
}

.fnr-why-fallback {
  padding: 0 1rem 1rem;
  font-size: 0.88rem;
  color: #334155;
}

.fnr-why-fallback-hint {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  color: #64748b;
}

.fnr-why-foot {
  padding: 0.75rem 1rem 1rem;
  border-top: 1px solid #f1f5f9;
  display: flex;
  justify-content: flex-end;
}

/* Google Places (server-side Text Search) */
.fnr-google-block {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed #cbd5e1;
}

.fnr-google-title {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  color: #0f172a;
}

.fnr-google-disclaimer {
  margin: 0 0 0.65rem;
  font-size: 0.78rem;
  color: #64748b;
  line-height: 1.4;
}

.fnr-google-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.fnr-google-item {
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}

.fnr-google-item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.fnr-google-rating {
  font-size: 0.8rem;
  color: #b45309;
  font-weight: 600;
}

.fnr-google-addr {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  color: #475569;
}

.fnr-google-domain {
  margin: 0.25rem 0 0;
  font-size: 0.78rem;
  color: #64748b;
}

.fnr-google-link {
  margin-top: 0.45rem;
  display: inline-block;
}

.fnr-google-domain-group {
  margin-top: 0.85rem;
}

.fnr-google-domain-group:first-of-type {
  margin-top: 0.5rem;
}

.fnr-google-domain-title {
  margin: 0 0 0.45rem;
  font-size: 0.88rem;
  font-weight: 800;
  color: #0f766e;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.fnr-google-domain-count {
  font-size: 0.72rem;
  font-weight: 800;
  color: #64748b;
  background: #f1f5f9;
  border-radius: 999px;
  padding: 0.12rem 0.45rem;
}

.fnr-google-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.45rem;
  align-items: center;
}

.fnr-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
}

.fnr-map-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #475569;
}

.fnr-map-legend-item::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #b45309;
  background: #d97706;
}

.fnr-map-legend-item--google::before {
  border-color: #2563eb;
  background: #3b82f6;
}

.fnr-map-legend-item--radius::before {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  border: 2px solid #0d9488;
  background: rgba(20, 184, 166, 0.15);
}

.fnr-google-hint {
  margin: 0.65rem 0 0;
  font-size: 0.78rem;
  color: #64748b;
}

.fnr-google-hint code {
  font-size: 0.72rem;
  background: #f1f5f9;
  padding: 0.1rem 0.3rem;
  border-radius: 4px;
}

.fnr-google-hint--error {
  color: #b91c1c;
  background: #fef2f2;
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
}

.fnr-nearby-search-fallback {
  margin-top: 0.65rem;
}

.fnr-nearby-search-note {
  margin-bottom: 0.5rem;
}

.fnr-nearby-search-hint {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
}

.fnr-nearby-search-list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.fnr-nearby-search-list-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.65rem 0.75rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.fnr-nearby-search-domain {
  font-weight: 600;
  color: #334155;
  font-size: 0.9rem;
}

.fnr-google-block--search-links {
  margin-top: 1rem;
}

/* Night mode */
[data-theme='dark'] .fnr-card,
[data-theme='dark'] .fnr-item,
[data-theme='dark'] .fnr-location-panel,
[data-theme='dark'] .fnr-why-modal,
[data-theme='dark'] .fnr-google-item {
  background: #1a2332 !important;
  background-image: none !important;
  border-color: #3d4f66 !important;
  color: #e8edf4 !important;
}
[data-theme='dark'] .fnr-title,
[data-theme='dark'] .fnr-item-head strong,
[data-theme='dark'] .fnr-google-domain-title {
  color: #e8edf4 !important;
}
[data-theme='dark'] .fnr-lead,
[data-theme='dark'] .fnr-desc,
[data-theme='dark'] .fnr-location-hint {
  color: #c5d0de !important;
}
[data-theme='dark'] .fnr-btn-secondary {
  background: #243044 !important;
  color: #e8edf4 !important;
  border-color: #4a5f78 !important;
}
.addressable-issues-card {
  background: #fff;
  border: 1px solid #c5e3e6;
  border-radius: 14px;
  margin-bottom: 1rem;
  box-shadow: 0 2px 10px rgba(1, 105, 111, 0.06);
  overflow: hidden;
}

.addressable-issues-toggle {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 1rem 1.15rem;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.addressable-issues-toggle:hover {
  background: #f7fbfc;
}

.addressable-issues-toggle:focus-visible {
  outline: 2px solid #01696f;
  outline-offset: -2px;
}

.addressable-issues-toggle:disabled {
  cursor: default;
  opacity: 0.85;
}

.addressable-issues-toggle-text {
  flex: 1;
  min-width: 0;
}

.addressable-issues-title {
  margin: 0 0 0.25rem;
  font-size: 1.12rem;
  font-weight: 700;
  color: #28251d;
}

.addressable-issues-sub,
.addressable-issues-summary-line {
  margin: 0;
  font-size: 0.86rem;
  color: #5a5957;
  line-height: 1.45;
}

.addressable-issues-summary-line {
  font-weight: 500;
}

.addressable-issues-chevron {
  flex-shrink: 0;
  font-size: 1.1rem;
  color: #01696f;
  line-height: 1.4;
  margin-top: 0.15rem;
}

.addressable-issues-panel {
  padding: 0 1.15rem 1.1rem;
  border-top: 1px solid #e8f0f1;
}

.addressable-issues-card.is-collapsed .addressable-issues-panel {
  display: none;
}

.addressable-issues-muted {
  margin: 0.5rem 0 0;
  color: #5a5957;
  font-size: 0.9rem;
}

.addressable-issues-error {
  margin: 0.5rem 0 0;
  color: #a13544;
  font-size: 0.9rem;
}

.addressable-issues-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.65rem 0 0.85rem;
}

.addressable-issues-pill {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}

.addressable-issues-pill--red {
  background: #fde8ea;
  color: #8b2a38;
}

.addressable-issues-pill--yellow {
  background: #fff6df;
  color: #8a6a00;
}

.addressable-issues-pill--green {
  background: #e8f5e9;
  color: #2d5c22;
}

.addressable-issues-group {
  margin-bottom: 0.85rem;
}

.addressable-issues-group:last-of-type {
  margin-bottom: 0.35rem;
}

.addressable-issues-group-title {
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.addressable-issues-group-title--red {
  color: #a13544;
}

.addressable-issues-group-title--yellow {
  color: #9a7200;
}

.addressable-issues-group-title--green {
  color: #437a22;
}

.addressable-issues-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.addressable-issues-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  border: 1px solid #e8ece9;
  background: #fafaf8;
}

.addressable-issues-item.severity-red {
  border-color: #e8c4c8;
  background: #fff8f8;
}

.addressable-issues-item.severity-yellow {
  border-color: #f0e4b8;
  background: #fffdf5;
}

.addressable-issues-item.severity-green {
  border-color: #c8e4c4;
  background: #f8fdf7;
}

.addressable-issues-sev {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-top: 0.4rem;
  flex-shrink: 0;
}

.addressable-issues-sev--red {
  background: #a13544;
}

.addressable-issues-sev--yellow {
  background: #d19900;
}

.addressable-issues-sev--green {
  background: #437a22;
}

.addressable-issues-body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.addressable-issues-body strong {
  font-size: 0.95rem;
  color: #28251d;
}

.addressable-issues-meta {
  font-size: 0.78rem;
  color: #5a5957;
}

.addressable-issues-help-toggle {
  margin-top: 0.75rem;
  padding: 0;
  border: none;
  background: none;
  color: #01696f;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.addressable-issues-help-toggle:hover {
  color: #014a4f;
}

.addressable-issues-help {
  margin-top: 0.5rem;
  padding: 0.75rem 0.85rem;
  background: #f7f6f2;
  border-radius: 10px;
  font-size: 0.84rem;
  color: #444;
  line-height: 1.5;
}

.addressable-issues-help p {
  margin: 0 0 0.5rem;
}

.addressable-issues-help ul {
  margin: 0 0 0.5rem;
  padding-left: 1.1rem;
}

.addressable-issues-help li {
  margin-bottom: 0.35rem;
}

.addressable-issues-help .help-red {
  color: #a13544;
}

.addressable-issues-help .help-yellow {
  color: #9a7200;
}

.addressable-issues-help .help-green {
  color: #437a22;
}

.addressable-issues-help-note {
  margin-bottom: 0 !important;
  font-size: 0.8rem;
  color: #5a5957;
}

.addressable-issues-consent {
  font-size: 0.76rem;
  font-weight: 600;
  margin-top: 0.15rem;
}

.addressable-issues-consent.consent-pending {
  color: #9a7200;
}

.addressable-issues-consent.consent-accepted {
  color: #437a22;
}

.addressable-issues-consent.consent-rejected {
  color: #a13544;
}

.addressable-issues-consent.consent-info {
  color: #5a4a7a;
  font-weight: 500;
}

.addressable-issues-resolved {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px dashed #d8d6d0;
}

.addressable-issues-item--closed {
  opacity: 0.92;
}

/* Night mode — keep My resources cards dark and meta text readable */
[data-theme='dark'] .addressable-issues-card {
  background: #1a2332 !important;
  border-color: #3d4f66 !important;
  box-shadow: none !important;
}

[data-theme='dark'] .addressable-issues-item,
[data-theme='dark'] .addressable-issues-item.severity-red,
[data-theme='dark'] .addressable-issues-item.severity-yellow,
[data-theme='dark'] .addressable-issues-item.severity-green {
  background: #243044 !important;
  border-color: #3d4f66 !important;
}

[data-theme='dark'] .addressable-issues-toggle:hover {
  background: #2a3850 !important;
}

[data-theme='dark'] .addressable-issues-title,
[data-theme='dark'] .addressable-issues-body strong {
  color: #e8edf4 !important;
}

[data-theme='dark'] .addressable-issues-sub,
[data-theme='dark'] .addressable-issues-summary-line,
[data-theme='dark'] .addressable-issues-meta,
[data-theme='dark'] .addressable-issues-muted,
[data-theme='dark'] .addressable-issues-help-note {
  color: #c5d0de !important;
}

[data-theme='dark'] .addressable-issues-help {
  background: #1e2838 !important;
  color: #c5d0de !important;
}

[data-theme='dark'] .addressable-issues-panel {
  border-top-color: #3d4f66 !important;
}

[data-theme='dark'] .addressable-issues-pill--red {
  background: #3d2020 !important;
  color: #fca5a5 !important;
}

[data-theme='dark'] .addressable-issues-pill--yellow {
  background: #3d3020 !important;
  color: #fcd34d !important;
}

[data-theme='dark'] .addressable-issues-pill--green {
  background: #1a3d32 !important;
  color: #86efac !important;
}

[data-theme='dark'] .addressable-issues-consent.consent-accepted {
  color: #86efac !important;
}

[data-theme='dark'] .addressable-issues-consent.consent-pending {
  color: #fcd34d !important;
}

[data-theme='dark'] .addressable-issues-consent.consent-rejected {
  color: #fca5a5 !important;
}

[data-theme='dark'] .addressable-issues-consent.consent-info {
  color: #c4b5fd !important;
}
.care-consent-banner {
  background: linear-gradient(135deg, #f5f0ff 0%, #fff 100%);
  border: 1px solid #d4c4e8;
  border-radius: 12px;
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
}

.care-consent-banner-title {
  margin: 0 0 0.4rem;
  font-size: 1rem;
  color: #4a2c6a;
}

.care-consent-banner-lead {
  margin: 0 0 0.65rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: #444;
}

.care-consent-banner-action {
  margin: 0 0 0.65rem;
  font-size: 0.88rem;
  color: #333;
}

.care-consent-banner-action a {
  color: #01696f;
  font-weight: 600;
}

.care-consent-banner-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.care-consent-banner-item {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  font-size: 0.85rem;
  background: #fff;
  border: 1px solid #e8e0f0;
}

.care-consent-banner-item--pending {
  border-color: #e0c878;
  background: #fffdf5;
}

.care-consent-banner-item--accepted {
  border-color: #a8d4a0;
  background: #f8fdf7;
}

.care-consent-banner-item--rejected {
  border-color: #e8c4c8;
  background: #fff8f8;
}

.care-consent-banner-item strong {
  color: #28251d;
}

.care-consent-banner-hint {
  font-size: 0.78rem;
  color: #5a5957;
}

.care-consent-banner-muted {
  margin: 0;
  font-size: 0.84rem;
  color: #5a5957;
}

/* Night mode */
[data-theme='dark'] .care-consent-banner {
  background: #1a2332 !important;
  border-color: #3d4f66 !important;
}
[data-theme='dark'] .care-consent-banner-title,
[data-theme='dark'] .care-consent-banner-lead,
[data-theme='dark'] .care-consent-banner-item strong {
  color: #e8edf4 !important;
}
[data-theme='dark'] .care-consent-banner-hint,
[data-theme='dark'] .care-consent-banner-muted {
  color: #c5d0de !important;
}
[data-theme='dark'] .care-consent-banner-item,
[data-theme='dark'] .care-consent-banner-item--pending,
[data-theme='dark'] .care-consent-banner-item--accepted,
[data-theme='dark'] .care-consent-banner-item--rejected {
  background: #243044 !important;
  border-color: #3d4f66 !important;
}
/* Aligns with student dashboard (StudentDashboard.css + src/styles/colors.css) */
.sdoh-student-page {
  min-height: 100vh;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  background: linear-gradient(135deg, var(--warm-white, #fefefe) 0%, #faf8f5 50%, var(--light-gray, #f5f7fa) 100%);
}

.sdoh-student-top-banners {
  max-width: 960px;
  margin: 0 auto;
  padding: 1rem 1.25rem 0;
}

.sdoh-student-top-banners .loop-notifications-card {
  margin-bottom: 0;
}

.sdoh-student-loading {
  padding: 3rem;
  text-align: center;
  color: var(--text-secondary, #5a6c7d);
}

/* Screening + resources in one column */
.sdoh-combined-stack {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.sdoh-student-inner {
  max-width: 100%;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 1rem 0 0;
  box-sizing: border-box;
}

.sdoh-new-period-bar {
  margin: 0 0 1rem;
}

.sdoh-latest-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--primary-blue, #4a90e2);
  margin-bottom: 0.35rem;
}

.sdoh-student-title {
  margin: 0 0 0.35rem;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--primary-blue, #4a90e2);
  letter-spacing: -0.02em;
}

.sdoh-student-period-line {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-secondary, #5a6c7d);
}

.sdoh-student-hero {
  margin-bottom: 1rem;
}

.sdoh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1.1rem;
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.sdoh-btn-primary {
  background: var(--primary-blue, #4a90e2);
  color: var(--white, #fff);
  border: 2px solid var(--primary-blue, #4a90e2);
  box-shadow: var(--shadow-sm, 0 2px 4px rgba(74, 144, 226, 0.12));
}

.sdoh-btn-primary:hover {
  background: var(--primary-blue-dark, #357abd);
  border-color: var(--primary-blue-dark, #357abd);
}

.sdoh-btn-secondary {
  background: var(--white, #fff);
  color: var(--text-primary, #2c3e50);
  border: 2px solid var(--border-light, #e1e8ed);
}

.sdoh-btn-secondary:hover {
  background: var(--primary-blue-soft, #e8f2fc);
  border-color: var(--primary-blue-light, #6ba3e8);
}

.sdoh-btn-ghost {
  background: transparent;
  color: var(--primary-blue, #4a90e2);
  border: 2px solid var(--primary-blue-light, #6ba3e8);
}

.sdoh-btn-ghost:hover {
  background: var(--primary-blue-soft, #e8f2fc);
}

.sdoh-student-error {
  padding: 0.75rem 1rem;
  border-radius: 12px;
  background: var(--error-light, #ffebee);
  color: var(--error, #e74c3c);
  font-size: 0.88rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(231, 76, 60, 0.2);
}

.sdoh-student-empty {
  text-align: center;
  padding: 2rem 1rem;
  background: var(--white, #fff);
  border-radius: 16px;
  border: 2px dashed var(--border-light, #e1e8ed);
  box-shadow: var(--shadow-sm, 0 2px 4px rgba(74, 144, 226, 0.08));
}

.sdoh-student-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sdoh-student-list--single {
  margin-bottom: 0;
}

.sdoh-student-card {
  background: var(--white, #fff);
  border: 2px solid var(--border-light, #e1e8ed);
  border-radius: 16px;
  padding: 0.85rem 1rem;
  box-shadow: var(--shadow-sm, 0 2px 4px rgba(74, 144, 226, 0.08));
}

.sdoh-student-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.sdoh-student-card-head strong {
  color: var(--text-primary, #2c3e50);
}

.sdoh-student-meta {
  font-weight: 400;
  color: var(--text-secondary, #5a6c7d);
  font-size: 0.88rem;
}

.sdoh-student-card-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: flex-end;
}

.sdoh-student-detail {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border-light, #e1e8ed);
}

.sdoh-student-section {
  margin-bottom: 1rem;
}

.sdoh-student-section h3 {
  margin: 0 0 0.35rem;
  font-size: 0.92rem;
  color: var(--primary-blue-dark, #357abd);
  border-left: 3px solid var(--primary-blue, #4a90e2);
  padding-left: 0.5rem;
}

.sdoh-student-section ul {
  margin: 0;
  padding-left: 1.15rem;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--text-primary, #2c3e50);
}

.sdoh-student-muted {
  margin: 0;
  color: var(--text-secondary, #5a6c7d);
  font-size: 0.88rem;
}

/* Matched resources: visually joined to screening above */
.sdoh-fnr-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--border-light, #e1e8ed);
  box-sizing: border-box;
}

.sdoh-fnr-wrap .fnr-card {
  margin-top: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.sdoh-fnr-wrap .fnr-main {
  border-color: var(--border-light, #e1e8ed);
  border-width: 2px;
  background: linear-gradient(180deg, var(--primary-blue-soft, #e8f2fc) 0%, var(--white, #fff) 14%);
}

[data-theme='dark'] .sdoh-student-page {
  background: #121a26 !important;
  color: #ffffff !important;
}
[data-theme='dark'] .sdoh-student-period-line,
[data-theme='dark'] .sdoh-student-muted,
[data-theme='dark'] .sdoh-student-loading,
[data-theme='dark'] .sdoh-student-empty,
[data-theme='dark'] .sdoh-student-inner p,
[data-theme='dark'] .sdoh-student-meta {
  color: #ffffff !important;
}
[data-theme='dark'] .sdoh-student-card,
[data-theme='dark'] .sdoh-student-inner,
[data-theme='dark'] .sdoh-student-hero {
  background: #1a2332 !important;
  border-color: #3d4f66 !important;
  color: #ffffff !important;
}
.med-workspace {
  max-width: 1120px;
  margin: 0 auto;
  padding: 1rem 0;
  color: #222;
}

.med-workspace--compact {
  max-width: none;
  padding: 0.5rem 0.25rem;
}

/* --- Accent palette (complements brand blues) --- */
.med-workspace {
  --med-accent-teal: #26a69a;
  --med-accent-violet: #7e57c2;
  --med-accent-coral: #ff8a65;
  --med-accent-amber: #ffb300;
  --med-accent-indigo: #5c6bc0;
}

/* --- Keyframes --- */
@keyframes med-fade-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes med-hero-glow {
  0%,
  100% {
    box-shadow: 0 4px 18px rgba(100, 156, 228, 0.14), 0 0 0 1px rgba(46, 116, 181, 0.08);
  }
  50% {
    box-shadow: 0 10px 32px rgba(46, 116, 181, 0.2), 0 0 0 1px rgba(100, 156, 228, 0.25);
  }
}

@keyframes med-ring-soft {
  0%,
  100% {
    stroke: var(--brand-blue-primary, #649ce4);
    filter: drop-shadow(0 0 0 transparent);
  }
  50% {
    stroke: var(--brand-blue-deep, #2e74b5);
    filter: drop-shadow(0 0 5px rgba(100, 156, 228, 0.55));
  }
}

@keyframes med-bar-rise {
  from {
    transform: scaleY(0.2);
    opacity: 0.5;
  }
  to {
    transform: scaleY(1);
    opacity: 0.95;
  }
}

@keyframes med-pending-soft {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 179, 0, 0.35);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(255, 179, 0, 0);
  }
}

@keyframes med-card-enter {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes med-strip-shine {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .med-workspace .med-hero,
  .med-workspace .med-ring-fg,
  .med-workspace .med-bar,
  .med-workspace .med-badge--pending,
  .med-workspace .med-compact-strip,
  .med-workspace .med-dose-card,
  .med-workspace .med-med-card,
  .med-workspace .med-kpi,
  .med-workspace .med-chart-card,
  .med-workspace .med-section,
  .med-workspace .med-toolbar,
  .med-workspace .med-alert-banner {
    animation: none !important;
    transition-duration: 0.12s !important;
  }
}

/* --- Hero & analytics --- */
.med-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.35rem 1.5rem;
  margin-bottom: 1rem;
  border-radius: 16px;
  background: linear-gradient(
    135deg,
    var(--brand-blue-bg-start, #e8f4fc) 0%,
    #e3f2fd 35%,
    var(--brand-blue-bg-mid, #f0f7ff) 65%,
    rgba(126, 87, 194, 0.08) 100%
  );
  background-size: 200% 200%;
  border: 1px solid rgba(46, 116, 181, 0.2);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(74, 144, 226, 0.12));
  animation: med-fade-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) both, med-hero-glow 6s ease-in-out 0.55s infinite,
    med-strip-shine 18s linear infinite;
}

.med-hero-main {
  flex: 1 1 280px;
  min-width: 0;
}

.med-hero-title {
  margin: 0 0 0.35rem 0;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--brand-blue-deep, #2e74b5);
  letter-spacing: -0.02em;
}

.med-hero-sub {
  margin: 0 0 1rem 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: #4a5a6a;
  max-width: 52ch;
}

.med-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.65rem;
}

.med-kpi {
  background: rgba(255, 255, 255, 0.88);
  border-radius: 12px;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(46, 116, 181, 0.12);
  border-left: 4px solid var(--brand-blue-primary, #649ce4);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  animation: med-card-enter 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.med-kpi-row .med-kpi:nth-child(1) {
  border-left-color: var(--med-accent-teal);
  background: linear-gradient(125deg, rgba(38, 166, 154, 0.1), rgba(255, 255, 255, 0.92));
  animation-delay: 0.05s;
}

.med-kpi-row .med-kpi:nth-child(2) {
  border-left-color: var(--med-accent-violet);
  background: linear-gradient(125deg, rgba(126, 87, 194, 0.1), rgba(255, 255, 255, 0.92));
  animation-delay: 0.1s;
}

.med-kpi-row .med-kpi:nth-child(3) {
  border-left-color: var(--med-accent-coral);
  background: linear-gradient(125deg, rgba(255, 138, 101, 0.12), rgba(255, 255, 255, 0.92));
  animation-delay: 0.15s;
}

.med-kpi-row .med-kpi:nth-child(4) {
  border-left-color: var(--med-accent-amber);
  background: linear-gradient(125deg, rgba(255, 179, 0, 0.12), rgba(255, 255, 255, 0.92));
  animation-delay: 0.2s;
}

.med-kpi:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(46, 116, 181, 0.14);
}

.med-kpi-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--brand-blue-deep, #2e74b5);
  line-height: 1.2;
}

.med-kpi-row .med-kpi:nth-child(1) .med-kpi-value {
  color: #00695c;
}

.med-kpi-row .med-kpi:nth-child(2) .med-kpi-value {
  color: #5e35b1;
}

.med-kpi-row .med-kpi:nth-child(3) .med-kpi-value {
  color: #d84315;
}

.med-kpi-row .med-kpi:nth-child(4) .med-kpi-value {
  color: #f57f17;
}

.med-kpi-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6a7a88;
}

.med-kpi--inline {
  flex-direction: row;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.35rem 0.65rem;
  background: var(--brand-blue-soft-tint, rgba(100, 156, 228, 0.12));
  border-radius: 8px;
  border: none;
}

.med-compact-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
  padding: 0.5rem 0.65rem;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(38, 166, 154, 0.12), rgba(100, 156, 228, 0.15), rgba(126, 87, 194, 0.1));
  border: 1px solid rgba(46, 116, 181, 0.15);
  animation: med-fade-up 0.45s ease both;
}

.med-hero-chart {
  position: relative;
  flex: 0 0 auto;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.med-ring-svg {
  filter: drop-shadow(0 2px 6px rgba(46, 116, 181, 0.15));
}

.med-ring-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 10;
}

.med-ring-fg {
  fill: none;
  stroke: var(--brand-blue-primary, #649ce4);
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke-dasharray 0.55s cubic-bezier(0.34, 1.2, 0.64, 1);
  animation: med-ring-soft 4s ease-in-out infinite;
}

.med-ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-size: 0.75rem;
  color: var(--brand-blue-deep, #2e74b5);
}

.med-ring-label strong {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.1;
}

.med-chart-card {
  margin-bottom: 1rem;
  animation: med-fade-up 0.52s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}

.med-chart-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.med-chart-title {
  margin: 0;
  font-size: 1.05rem;
  color: var(--brand-blue-deep, #2e74b5);
}

.med-chart-range {
  font-size: 0.78rem;
}

.med-chart-hint {
  margin: 0 0 0.85rem 0;
  font-size: 0.8rem;
}

.med-bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.45rem;
  height: 132px;
  padding: 0 0.15rem;
}

.med-bar-wrap {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
}

.med-bar {
  width: 100%;
  max-width: 48px;
  margin: 0 auto;
  border-radius: 8px 8px 4px 4px;
  min-height: 6px;
  background: linear-gradient(
    180deg,
    var(--brand-blue-primary, #649ce4) 0%,
    var(--brand-blue-deep, #2e74b5) 100%
  );
  opacity: 0.95;
  transform-origin: bottom center;
  transition: height 0.45s cubic-bezier(0.34, 1.15, 0.64, 1), box-shadow 0.22s ease, opacity 0.2s ease,
    transform 0.22s ease;
  animation: med-bar-rise 0.7s cubic-bezier(0.34, 1.25, 0.64, 1) backwards;
}

.med-bar-wrap:nth-child(1) .med-bar {
  animation-delay: 0.03s;
  background: linear-gradient(180deg, #26c6da, #00897b);
}

.med-bar-wrap:nth-child(2) .med-bar {
  animation-delay: 0.07s;
  background: linear-gradient(180deg, var(--brand-blue-primary, #649ce4), var(--brand-blue-deep, #2e74b5));
}

.med-bar-wrap:nth-child(3) .med-bar {
  animation-delay: 0.11s;
  background: linear-gradient(180deg, #5c6bc0, #3949ab);
}

.med-bar-wrap:nth-child(4) .med-bar {
  animation-delay: 0.15s;
  background: linear-gradient(180deg, #9575cd, #5e35b1);
}

.med-bar-wrap:nth-child(5) .med-bar {
  animation-delay: 0.19s;
  background: linear-gradient(180deg, #ba68c8, #7b1fa2);
}

.med-bar-wrap:nth-child(6) .med-bar {
  animation-delay: 0.23s;
  background: linear-gradient(180deg, #ff8a65, #e64a19);
}

.med-bar-wrap:nth-child(7) .med-bar {
  animation-delay: 0.27s;
  background: linear-gradient(180deg, #ffca28, #ff8f00);
}

.med-bar:hover {
  opacity: 1;
  transform: scaleX(1.06) scaleY(1.02);
  box-shadow: 0 6px 16px rgba(46, 116, 181, 0.35);
}

.med-bar--selected {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brand-blue-primary, #649ce4);
}

.med-bar-label {
  font-size: 0.68rem;
  color: #666;
  text-align: center;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.med-section {
  background: #fff;
  border: 1px solid #e4e4e4;
  border-radius: 12px;
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(74, 144, 226, 0.05));
}

.med-section:not(.med-chart-card) {
  animation: med-fade-up 0.46s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.med-workspace > .med-alert-banner {
  animation: med-fade-up 0.4s ease 0.06s both;
}

.med-section h3 {
  margin: 0 0 0.65rem 0;
  font-size: 1.05rem;
  color: var(--brand-blue-deep, #2e74b5);
}

.med-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  margin-bottom: 0.75rem;
}

.med-section-head h3 {
  margin: 0;
}

.med-form-title {
  margin: 0 0 0.65rem 0;
  font-size: 0.95rem;
  color: #333;
}

.med-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.med-toolbar-hint {
  flex: 1 1 220px;
  line-height: 1.45;
  max-width: 42rem;
}

.med-pending-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.med-pending-list li {
  margin: 0;
}

.med-pending-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  text-align: left;
  padding: 0.65rem 0.85rem;
  border-radius: 12px;
  border: 1px solid rgba(46, 116, 181, 0.25);
  background: linear-gradient(135deg, #fff 0%, #f5fbff 100%);
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.med-pending-row:hover {
  border-color: var(--brand-blue-primary, #649ce4);
  box-shadow: 0 4px 14px rgba(46, 116, 181, 0.12);
  transform: translateY(-1px);
}

.med-pending-row--readonly {
  cursor: default;
  background: #fafafa;
}

.med-pending-row--readonly:hover {
  transform: none;
  box-shadow: none;
}

.med-pending-row-main {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.med-pending-row-meta {
  font-size: 0.8rem;
  line-height: 1.35;
}

.med-pending-row-cta {
  flex-shrink: 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--brand-blue-deep, #2e74b5);
}

.med-date-label {
  font-weight: 600;
  font-size: 0.88rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.med-date-label input[type='date'] {
  padding: 0.4rem 0.5rem;
  border-radius: 8px;
  border: 1px solid #ccc;
}

.med-alert-banner {
  background: #fff3e0;
  border: 1px solid #ffb74d;
  border-radius: 10px;
  padding: 0.65rem 0.85rem;
  margin-bottom: 0.75rem;
  font-size: 0.88rem;
}

.med-dose-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.85rem;
}

.med-dose-card {
  border: 1px solid #e8ecf1;
  border-radius: 14px;
  padding: 1rem 1.05rem;
  background: linear-gradient(145deg, #fff 0%, #f5fbff 40%, #fafcfe 100%);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
  animation: med-card-enter 0.48s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.med-dose-grid .med-dose-card:nth-child(1) {
  animation-delay: 0.02s;
}

.med-dose-grid .med-dose-card:nth-child(2) {
  animation-delay: 0.06s;
}

.med-dose-grid .med-dose-card:nth-child(3) {
  animation-delay: 0.1s;
}

.med-dose-grid .med-dose-card:nth-child(4) {
  animation-delay: 0.14s;
}

.med-dose-grid .med-dose-card:nth-child(5) {
  animation-delay: 0.18s;
}

.med-dose-grid .med-dose-card:nth-child(6) {
  animation-delay: 0.22s;
}

.med-dose-card:hover {
  border-color: rgba(100, 156, 228, 0.55);
  box-shadow: 0 10px 28px rgba(46, 116, 181, 0.12);
  transform: translateY(-2px);
}

.med-dose-card--interactive {
  cursor: pointer;
}

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

.med-dose-grid-hint {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
}

.med-dose-detail-card {
  max-width: min(420px, 92vw);
  text-align: left;
}

.med-dose-detail-dl {
  margin: 0;
  padding: 0;
}

.med-dose-detail-dl > div {
  display: grid;
  grid-template-columns: minmax(6.5rem, 34%) 1fr;
  gap: 0.25rem 0.65rem;
  margin-bottom: 0.55rem;
  font-size: 0.86rem;
  line-height: 1.45;
}

.med-dose-detail-dl dt {
  margin: 0;
  font-weight: 600;
  color: #555;
}

.med-dose-detail-dl dd {
  margin: 0;
  color: #222;
}

.med-dose-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.med-dose-name {
  font-size: 1.02rem;
  color: #1a2b3c;
}

.med-dose-meta {
  font-size: 0.8rem;
  margin-top: 0.2rem;
}

.med-dose-body {
  font-size: 0.82rem;
  line-height: 1.45;
}

.med-dose-caution {
  font-size: 0.8rem;
  margin-top: 0.35rem;
  padding: 0.35rem 0.5rem;
  background: #fff8e6;
  border-radius: 8px;
  border: 1px solid #f0e0bc;
}

.med-pill-meter {
  margin-top: 0.65rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.45rem 0.55rem;
  border-radius: 10px;
  background: var(--brand-blue-soft-tint, rgba(100, 156, 228, 0.12));
  font-size: 0.8rem;
  color: #444;
}

.med-pill-meter strong {
  font-size: 1.1rem;
  color: var(--brand-blue-deep, #2e74b5);
}

.med-dose-confirm {
  margin-top: 0.5rem;
  font-size: 0.78rem;
}

.med-dose-actions-block {
  margin-top: 0.5rem;
  padding-top: 0.65rem;
  border-top: 1px dashed #e0e6ed;
}

.med-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.med-badge--taken {
  background: linear-gradient(135deg, #e0f7f1, #c8e6c9);
  color: #1b5e20;
  border: 1px solid #81c784;
  animation: med-card-enter 0.35s ease backwards;
}

.med-badge--skipped {
  background: linear-gradient(135deg, #fff3e0, #ffe0b2);
  color: #bf360c;
  border: 1px solid #ffb74d;
  animation: med-card-enter 0.35s ease backwards;
}

.med-badge--pending {
  background: linear-gradient(135deg, #fafafa, #eceff1);
  color: #546e7a;
  border: 1px solid #cfd8dc;
  animation: med-pending-soft 2.4s ease-in-out infinite;
}

.med-badge--active {
  background: #e8f4fc;
  color: var(--brand-blue-deep, #2e74b5);
  border: 1px solid rgba(100, 156, 228, 0.45);
}

.med-badge--inactive {
  background: #f0f0f0;
  color: #777;
  border: 1px solid #ddd;
}

.med-med-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
}

.med-med-card {
  border: 1px solid #e8ecf1;
  border-radius: 12px;
  padding: 0.85rem 1rem;
  background: linear-gradient(160deg, #fff 0%, #f8fbff 100%);
  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.22s ease;
  animation: med-card-enter 0.45s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.med-med-grid .med-med-card:nth-child(3n + 1) {
  border-top: 3px solid var(--med-accent-teal);
  animation-delay: 0.04s;
}

.med-med-grid .med-med-card:nth-child(3n + 2) {
  border-top: 3px solid var(--brand-blue-primary, #649ce4);
  animation-delay: 0.08s;
}

.med-med-grid .med-med-card:nth-child(3n + 3) {
  border-top: 3px solid var(--med-accent-violet);
  animation-delay: 0.12s;
}

.med-med-card:hover {
  border-color: rgba(100, 156, 228, 0.45);
  box-shadow: 0 8px 22px rgba(46, 116, 181, 0.14);
  transform: translateY(-2px);
}

.med-med-card--inactive {
  opacity: 0.88;
  background: #fafafa;
}

.med-med-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}

.med-med-name {
  font-size: 0.95rem;
  color: #1a2b3c;
  line-height: 1.25;
}

.med-med-dose,
.med-med-freq {
  font-size: 0.8rem;
  margin-bottom: 0.2rem;
}

.med-med-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.65rem;
}

.med-slot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid #eee;
}

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

.med-slot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.med-btn {
  padding: 0.4rem 0.85rem;
  border-radius: 8px;
  border: 1px solid #ccc;
  background: #fafafa;
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.med-btn:hover:not(:disabled) {
  background: #f0f4f8;
  border-color: #bbb;
}

.med-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.med-btn-primary {
  background: linear-gradient(165deg, var(--brand-blue-primary, #649ce4) 0%, var(--brand-blue-deep, #2e74b5) 100%);
  border-color: var(--brand-blue-deep, #2e74b5);
  color: #fff;
  font-weight: 600;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.med-btn-primary:hover:not(:disabled) {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(46, 116, 181, 0.35);
}

.med-btn-primary:active:not(:disabled) {
  transform: translateY(0);
}

.med-btn-ghost {
  background: rgba(100, 156, 228, 0.1);
  border-color: rgba(46, 116, 181, 0.35);
  color: var(--brand-blue-deep, #2e74b5);
  font-weight: 600;
}

.med-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.65rem 1rem;
}

.med-form-grid label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #444;
}

.med-form-grid input,
.med-form-grid select,
.med-form-grid textarea {
  padding: 0.45rem 0.5rem;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 0.88rem;
}

.med-input {
  width: 100%;
  padding: 0.45rem 0.5rem;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 0.88rem;
  box-sizing: border-box;
}

.med-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.med-tag {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8rem;
}

.med-muted {
  color: #666;
  font-size: 0.82rem;
}

/* Night mode */
[data-theme='dark'] .med-workspace { color: #e8edf4 !important; }
[data-theme='dark'] .med-hero,
[data-theme='dark'] .med-section,
[data-theme='dark'] .med-pending-row,
[data-theme='dark'] .med-pending-row--readonly,
[data-theme='dark'] .med-kpi,
[data-theme='dark'] .med-kpi-row .med-kpi:nth-child(n) {
  background: #1a2332 !important;
  background-image: none !important;
  border-color: #3d4f66 !important;
  color: #e8edf4 !important;
  animation: none !important;
}
[data-theme='dark'] .med-hero-title,
[data-theme='dark'] .med-section h3,
[data-theme='dark'] .med-pending-row-main,
[data-theme='dark'] .med-kpi-value,
[data-theme='dark'] .med-kpi-label {
  color: #e8edf4 !important;
}
[data-theme='dark'] .med-hero-sub,
[data-theme='dark'] .med-pending-row-meta,
[data-theme='dark'] .med-bar-label {
  color: #c5d0de !important;
}
[data-theme='dark'] .med-pending-row-cta { color: #8bb8ef !important; }
[data-theme='dark'] .med-btn {
  background: #243044 !important;
  color: #e8edf4 !important;
  border-color: #4a5f78 !important;
}
.student-med-page {
  min-height: 100vh;
  background: #f5f7fa;
}

.student-med-main {
  padding: 1rem 1.25rem 2rem;
  max-width: 1120px;
  margin: 0 auto;
}

.student-med-back {
  margin-bottom: 12px;
}

.student-med-title {
  font-size: 1.45rem;
  margin: 0 0 0.5rem 0;
  color: #1a2b3c;
}

.student-med-lead {
  color: #555;
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

.student-med-error {
  color: #c62828;
}

[data-theme='dark'] .student-med-page {
  background: #121a26 !important;
}

[data-theme='dark'] .student-med-title {
  color: #e8edf4 !important;
}

[data-theme='dark'] .student-med-lead {
  color: #c5d0de !important;
}
.dashboard-header {
  background: white;
  padding: 1.25rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid var(--primary-blue);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  min-height: 80px;
  position: relative;
  animation: slideDownHeader 0.5s ease-out;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
  flex: 0 0 auto;
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.logo-image {
  width: 45px;
  height: 45px;
  border-radius: 8px;
  object-fit: cover;
  transition: transform 0.3s ease;
  animation: logoFloat 3s ease-in-out infinite;
}

.logo-image:hover {
  transform: scale(1.1) rotate(5deg);
}

@keyframes logoFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

/* Header animation applied to existing .dashboard-header rule above */

@keyframes slideDownHeader {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.logo-text {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--primary-blue);
  letter-spacing: -0.5px;
}

.header-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  z-index: 1;
}

.header-school-branding {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  justify-content: center;
}

.header-school-icon {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  object-fit: cover;
  border: 2px solid rgba(74, 144, 226, 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.header-school-icon-fallback {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--brand-blue-deep, #2e74b5);
  background: linear-gradient(
    145deg,
    var(--brand-blue-soft-tint, rgba(100, 156, 228, 0.2)),
    rgba(255, 255, 255, 0.95)
  );
  border: 2px solid rgba(100, 156, 228, 0.45);
  box-shadow: 0 2px 8px rgba(46, 116, 181, 0.12);
}

.header-school-official-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary, #5a6b7d);
  text-align: center;
  letter-spacing: 0.02em;
  max-width: 22rem;
  line-height: 1.3;
}

.header-school-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}

.school-name {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--primary-blue); /* Fallback color */
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue) 50%, var(--primary-blue) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: center;
  letter-spacing: 0.5px;
  white-space: nowrap;
  position: relative;
  animation: schoolNameGlow 3s ease-in-out infinite;
  text-shadow: 0 2px 8px var(--border-medium);
  padding: 0.5rem 1.5rem;
  border-radius: 8px;
  background-size: 200% 200%;
  transition: all 0.3s ease;
}

.school-name.custom-color {
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
  background-clip: unset;
  animation: none;
}

.school-name::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, var(--border-light) 0%, rgba(74, 144, 226, 0.15) 50%, var(--border-light) 100%);
  border-radius: 8px;
  z-index: -1;
  animation: backgroundPulse 3s ease-in-out infinite;
}

.school-name::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, var(--primary-blue), var(--primary-blue), var(--primary-blue));
  border-radius: 10px;
  z-index: -2;
  opacity: 0.2;
  animation: borderGlow 3s ease-in-out infinite;
}

@keyframes schoolNameGlow {
  0%, 100% {
    background-position: 0% 50%;
    filter: brightness(1);
  }
  50% {
    background-position: 100% 50%;
    filter: brightness(1.1);
  }
}

@keyframes backgroundPulse {
  0%, 100% {
    opacity: 0.1;
    transform: scale(1);
  }
  50% {
    opacity: 0.2;
    transform: scale(1.05);
  }
}

@keyframes borderGlow {
  0%, 100% {
    opacity: 0.15;
    filter: blur(4px);
  }
  50% {
    opacity: 0.3;
    filter: blur(6px);
  }
}

.header-subtitle {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-top: 0.15rem;
  opacity: 0.8;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  justify-content: flex-end;
  flex-shrink: 0;
  flex: 0 0 auto;
}

.sync-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.sync-dot {
  width: 8px;
  height: 8px;
  background-color: #4caf50;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.header-alerts {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 8px;
}

.alert-badge {
  background-color: #ff5722;
  color: white;
  padding: 0.2rem 0.5rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

.alert-text {
  font-size: 0.85rem;
  color: #856404;
  font-weight: 500;
}

.user-avatar-container {
  position: relative;
}

.user-avatar {
  cursor: pointer;
  transition: transform 0.2s ease;
}

.user-avatar:hover {
  transform: scale(1.05);
}

.avatar-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-blue), var(--primary-blue));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.2s ease;
  overflow: hidden;
  position: relative;
}

.dashboard-header .avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.dashboard-header .avatar-initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-avatar:hover .avatar-circle {
  box-shadow: 0 4px 12px var(--focus-ring);
}

/* Dropdown Menu */
.user-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  min-width: 250px;
  z-index: 1000;
  animation: slideDownDropdown 0.2s ease;
  overflow: hidden;
}

@keyframes slideDownDropdown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dropdown-header {
  padding: 1rem;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
}

.dropdown-user-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.dropdown-avatar {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-blue), var(--primary-blue));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1rem;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

.dropdown-user-details {
  flex: 1;
  min-width: 0;
}

.dropdown-name {
  font-weight: 600;
  color: var(--primary-blue);
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown-email {
  font-size: 0.85rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown-divider {
  height: 1px;
  background: #e0e0e0;
  margin: 0.5rem 0;
}

.dropdown-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--primary-blue);
  font-size: 0.95rem;
  font-weight: 500;
}

.dropdown-item:hover {
  background: #f5f5f5;
  color: var(--primary-blue);
}

.dropdown-item:active {
  background: #e8e8e8;
}

.dropdown-icon {
  font-size: 1.1rem;
  width: 24px;
  text-align: center;
}

/* Clickable school logo → larger preview */
.header-school-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: zoom-in;
  border-radius: 12px;
  line-height: 0;
  flex-shrink: 0;
}

.header-school-icon-btn:focus-visible {
  outline: 3px solid var(--primary-blue, #4a90e2);
  outline-offset: 3px;
}

.header-school-icon-btn:hover .header-school-icon {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
  transform: scale(1.02);
}

.header-school-logo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  background: rgba(15, 23, 42, 0.72);
  cursor: zoom-out;
}

.header-school-logo-lightbox-inner {
  position: relative;
  display: inline-block;
  max-width: min(98vw, 1600px);
  max-height: 96vh;
  cursor: default;
}

.header-school-logo-lightbox-img {
  display: block;
  max-width: min(98vw, 1600px);
  max-height: 96vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  background: #fff;
}

.header-school-logo-lightbox-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 10px;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: #fff;
  background: rgba(15, 23, 42, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.header-school-logo-lightbox-close:hover {
  background: #0f172a;
}

.sidebar {
  width: 250px;
  background-color: var(--primary-blue);
  flex-shrink: 0;
  align-self: stretch;
  padding: 2rem 0;
  overflow-y: auto;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0 1rem;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s ease;
  text-align: left;
  font-family: 'Inter', sans-serif;
  position: relative;
  animation: slideInNav 0.5s ease-out backwards;
}

.nav-item:nth-child(1) {
  animation-delay: 0.1s;
}

.nav-item:nth-child(2) {
  animation-delay: 0.2s;
}

.nav-item:nth-child(3) {
  animation-delay: 0.3s;
}

.nav-item:nth-child(4) {
  animation-delay: 0.4s;
}

.nav-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px;
  height: 0;
  background-color: white;
  border-radius: 0 3px 3px 0;
  transition: all 0.3s ease;
}

.nav-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  transform: translateX(5px);
}

.nav-item:hover::before {
  transform: translateY(-50%) scaleY(1);
  height: 60%;
}

.nav-item.active {
  background-color: rgba(255, 255, 255, 0.15);
  color: white;
}

.nav-item.active::before {
  transform: translateY(-50%) scaleY(1);
  height: 60%;
}

.nav-icon {
  font-size: 1.3rem;
  transition: transform 0.3s ease;
}

.nav-item:hover .nav-icon {
  transform: scale(1.2);
}

@keyframes slideInNav {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.nav-label {
  flex: 1;
}

.prioritization-panel {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.panel-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.panel-title .student-count {
  font-size: 0.875rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.prioritization-table {
  overflow-x: auto;
  flex: 1;
}

.prioritization-table.scrollable {
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  flex-shrink: 0;
}

.prioritization-table.scrollable thead th {
  position: sticky;
  top: 0;
  background: white;
  z-index: 1;
}

/* Scrollbar styling */
.prioritization-table.scrollable::-webkit-scrollbar {
  width: 6px;
}

.prioritization-table.scrollable::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.prioritization-table.scrollable::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

.prioritization-table.scrollable::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.prioritization-table table {
  width: 100%;
  border-collapse: collapse;
}

.prioritization-table th {
  text-align: left;
  padding: 0.75rem 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 2px solid #e0e0e0;
}

.prioritization-table td {
  padding: 1rem 0.5rem;
  font-size: 0.9rem;
  border-bottom: 1px solid #f0f0f0;
}

.student-row {
  cursor: pointer;
  transition: all 0.3s ease;
  animation: fadeInRow 0.5s ease-out backwards;
}

.student-row:nth-child(1) {
  animation-delay: 0.1s;
}

.student-row:nth-child(2) {
  animation-delay: 0.2s;
}

.student-row:nth-child(3) {
  animation-delay: 0.3s;
}

.student-row:hover {
  background-color: #f8f9fa;
  transform: translateX(5px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

@keyframes fadeInRow {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.risk-badge,
.flag-badge {
  transition: transform 0.2s ease;
}

.student-row:hover .risk-badge,
.student-row:hover .flag-badge {
  transform: scale(1.1);
}

.student-name {
  font-weight: 500;
  color: var(--primary-blue);
}

.issue-summary {
  color: var(--text-secondary);
  max-width: 200px;
}

.risk-badge {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border-radius: 12px;
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
}

.flag-badge {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border-radius: 8px;
  background-color: #fff3cd;
  color: #856404;
  font-size: 0.75rem;
  font-weight: 500;
}

.no-students-message {
  padding: 3rem 2rem;
  text-align: center;
  color: var(--text-secondary);
}

.no-students-message p {
  font-size: 1rem;
  margin: 0;
}

.staff-screening-followup {
  padding: 1.25rem 1.5rem 1.5rem;
}

.staff-screening-followup__title {
  margin: 0 0 0.4rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: #0f172a;
}

.staff-screening-followup__hint {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.5;
  max-width: 52rem;
}

.staff-screening-followup__label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: #475569;
}

.staff-screening-followup__label > span {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #64748b;
}

.staff-screening-followup__textarea,
.staff-screening-followup__select,
.staff-screening-followup__input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.6rem 0.75rem;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  font-size: 0.95rem;
  font-family: inherit;
  background: #fff;
}

.staff-screening-followup__textarea {
  resize: vertical;
  min-height: 88px;
}

.staff-screening-followup__notes-block {
  margin-bottom: 1.25rem;
}

.staff-screening-followup__domains {
  margin-bottom: 1rem;
}

.staff-screening-followup__domains-head {
  margin: 0 0 0.85rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
}

.staff-screening-followup__domain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}

.staff-screening-followup__domain {
  padding: 1rem 1.1rem;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.staff-screening-followup__domain-head {
  font-size: 1rem;
  font-weight: 700;
  color: #b45309;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #fde68a;
}

.staff-screening-followup__domain-fields {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.staff-screening-followup__empty {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  color: #64748b;
}

.staff-screening-followup__err {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  color: #b91c1c;
}

.staff-screening-followup__ok {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  color: #15803d;
}

.staff-screening-followup__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 0.5rem;
  border-top: 1px solid #e2e8f0;
  margin-top: 0.5rem;
}

.staff-screening-followup__save {
  padding: 0.6rem 1.35rem;
  font-size: 0.95rem;
}
.hrsn-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 11100;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  overflow: hidden;
  animation: hrsnDetailFade 0.2s ease;
}

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

.hrsn-detail-modal {
  background: #fff;
  width: min(75vw, 1100px);
  height: min(85vh, 900px);
  max-height: 85vh;
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22);
  border: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.hrsn-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
  flex-shrink: 0;
}

.hrsn-detail-head__main {
  flex: 1;
  min-width: 0;
}

.hrsn-detail-head h2 {
  margin: 0 0 0.35rem;
  font-size: 1.35rem;
  line-height: 1.3;
  color: #0f172a;
}

.hrsn-detail-student {
  margin: 0;
  font-weight: 700;
  color: #1e40af;
  font-size: 1.05rem;
}

.hrsn-detail-meta,
.hrsn-detail-history {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  color: #64748b;
}

.hrsn-detail-history {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-width: 320px;
}

.hrsn-detail-history span {
  font-weight: 600;
  color: #475569;
  font-size: 0.8rem;
}

.hrsn-detail-history select {
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  font-size: 0.95rem;
  width: 100%;
}

.hrsn-detail-close {
  border: none;
  background: #f1f5f9;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: #64748b;
  flex-shrink: 0;
}

.hrsn-detail-close:hover {
  background: #e2e8f0;
  color: #0f172a;
}

/* Single scroll region for flags + staff follow-up */
.hrsn-detail-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.hrsn-detail-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  min-height: min-content;
}

.hrsn-detail-modal--staff .hrsn-detail-layout {
  grid-template-columns: minmax(280px, 38%) 1fr;
}

.hrsn-detail-panel {
  min-width: 0;
}

.hrsn-detail-panel--flags {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #eef2f7;
}

.hrsn-detail-modal--staff .hrsn-detail-panel--flags {
  border-bottom: none;
  border-right: 1px solid #e2e8f0;
  background: #fafbfc;
}

.hrsn-detail-panel--followup {
  background: #f8fafc;
}

.hrsn-detail-body {
  padding: 0;
}

.hrsn-detail-sections-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hrsn-detail-section {
  margin: 0;
  padding: 1rem 1.1rem;
  border-radius: 12px;
  border: 1px solid #fde68a;
  background: #fffbeb;
}

.hrsn-detail-section h3 {
  margin: 0 0 0.6rem;
  font-size: 1rem;
  font-weight: 700;
  color: #b45309;
  border-left: 4px solid #f59e0b;
  padding-left: 0.65rem;
}

.hrsn-detail-section ul {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #334155;
}

.hrsn-detail-empty {
  margin: 0;
  color: #64748b;
  font-size: 0.95rem;
}

.hrsn-detail-foot {
  padding: 1rem 1.5rem;
  border-top: 1px solid #e2e8f0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  background: #fff;
}

.hrsn-detail-foot .btn-primary {
  padding: 0.6rem 1.5rem;
  border-radius: 10px;
  border: none;
  background: #2563eb;
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
}

.hrsn-detail-foot .btn-primary:hover {
  background: #1d4ed8;
}

@media (max-width: 900px) {
  .hrsn-detail-modal {
    width: 94vw;
    height: 92vh;
    max-height: 92vh;
  }

  .hrsn-detail-modal--staff .hrsn-detail-layout {
    grid-template-columns: 1fr;
  }

  .hrsn-detail-modal--staff .hrsn-detail-panel--flags {
    border-right: none;
    border-bottom: 1px solid #e2e8f0;
  }
}
.hrsn-flags-embed-desc {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  color: var(--text-secondary, #64748b);
  line-height: 1.45;
  padding: 0;
}

.hrsn-flags-embed .panel-header {
  align-items: center;
  margin-bottom: 0.75rem;
}

/* No flex stretch — table hugs content; scroll only when many rows */
.hrsn-flagged-compact.prioritization-panel {
  height: auto;
  min-height: 0;
  align-self: start;
}

.hrsn-flagged-compact .hrsn-flags-table-inner {
  flex: 0 0 auto;
  overflow-x: auto;
  overflow-y: visible;
  max-height: none;
}

/* Many rows: cap height and scroll */
.hrsn-flagged-compact .hrsn-flags-table-inner--scroll {
  max-height: min(380px, 50vh);
  overflow-y: auto;
}

.hrsn-flagged-compact .no-students-message {
  padding: 1.25rem 1rem;
}

.hrsn-flagged-compact .panel-header {
  margin-bottom: 0.5rem;
}

.hrsn-flags-page .dashboard-layout {
  display: flex;
  min-height: calc(100vh - 64px);
}

.hrsn-flags-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.hrsn-flags-header h1 {
  margin: 0 0 0.35rem;
  font-size: 1.5rem;
}

.hrsn-flags-header p {
  margin: 0;
  max-width: 52rem;
  color: var(--text-secondary, #64748b);
  line-height: 1.5;
}

.btn-refresh {
  padding: 0.5rem 1rem;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  background: #fff;
  font-weight: 600;
  cursor: pointer;
}

.btn-refresh:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.hrsn-flags-error {
  background: #fef2f2;
  color: #b91c1c;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  margin-bottom: 1rem;
}

.hrsn-flags-muted {
  color: #64748b;
}

.hrsn-flags-empty {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
}

.hrsn-flags-table-wrap {
  overflow-x: auto;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
}

.hrsn-flags-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.hrsn-flags-table th,
.hrsn-flags-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid #f1f5f9;
}

.hrsn-flags-table th {
  background: #f8fafc;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}

.hrsn-flags-table tr:last-child td {
  border-bottom: none;
}

.hrsn-flags-summary {
  max-width: 280px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.badge-critical {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 800;
  background: #fee2e2;
  color: #b91c1c;
}

.hrsn-followup-badge {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.hrsn-followup-badge--done {
  background: #dcfce7;
  color: #15803d;
}

.hrsn-followup-badge--pending {
  background: #f1f5f9;
  color: #64748b;
}

.btn-details,
.btn-profile {
  padding: 0.35rem 0.65rem;
  margin-right: 0.35rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
}

.btn-details {
  background: #2563eb;
  color: #fff;
}

.btn-profile {
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #e2e8f0;
}

.btn-details,
.btn-profile,
.btn-referral {
  margin-bottom: 0.25rem;
}

.btn-referral {
  padding: 0.35rem 0.65rem;
  margin-right: 0.35rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid #0f766e;
  background: #ecfdf5;
  color: #0f766e;
}

.btn-referral:hover {
  background: #d1fae5;
}

.hrsn-referral-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 11400;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.hrsn-referral-modal {
  max-width: 32rem;
  width: 100%;
  background: #fff;
  border-radius: 14px;
  padding: 1.25rem 1.35rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  border: 1px solid #e2e8f0;
}

.hrsn-referral-modal h3 {
  margin: 0 0 0.75rem;
  font-size: 1.1rem;
  color: #0f172a;
}

.hrsn-referral-modal-lead {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  color: #475569;
  line-height: 1.45;
}

.hrsn-referral-modal-steps {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
  font-size: 0.875rem;
  color: #334155;
  line-height: 1.55;
}

.hrsn-referral-modal-steps li {
  margin-bottom: 0.5rem;
}

.hrsn-referral-modal-muted {
  margin: 0 0 1rem;
  font-size: 0.8rem;
  color: #64748b;
  line-height: 1.4;
}

.hrsn-referral-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.btn-referral-primary {
  padding: 0.45rem 1.1rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.875rem;
  border: none;
  cursor: pointer;
  background: #0d9488;
  color: #fff;
}

.btn-referral-primary:hover {
  background: #0f766e;
}

.btn-referral-secondary {
  padding: 0.45rem 1.1rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  background: #f1f5f9;
  color: #0f172a;
  border: 1px solid #cbd5e1;
}

.btn-referral-secondary:hover {
  background: #e2e8f0;
}

.hrsn-referral-consent-banner {
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  font-size: 0.85rem;
  line-height: 1.45;
  margin-bottom: 0.75rem;
  background: #fff7ed;
  border: 1px solid #fdba74;
  color: #7c2d12;
}

.hrsn-referral-consent-banner--ok {
  background: #ecfdf5;
  border-color: #6ee7b7;
  color: #065f46;
}

.hrsn-referral-field {
  margin-bottom: 0.75rem;
}

.hrsn-referral-field label {
  display: block;
  font-weight: 600;
  font-size: 0.8rem;
  margin-bottom: 0.25rem;
  color: #334155;
}

.hrsn-referral-field select,
.hrsn-referral-field textarea {
  width: 100%;
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  padding: 0.45rem 0.55rem;
  font: inherit;
}

.hrsn-referral-field-error {
  margin-top: 0.35rem;
}

.hrsn-referral-created {
  padding: 0.5rem 0;
  font-size: 0.9rem;
}

.hrsn-flags-detail-loading {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background: #0f172a;
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 10px;
  font-size: 0.85rem;
  z-index: 10002;
}

.admin-sdoh-screenings-page .page-header .btn-back {
  display: inline-block;
  margin-bottom: 0.75rem;
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
  font-size: 0.875rem;
  cursor: pointer;
}

.admin-sdoh-screenings-page .page-header .btn-back:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

.staff-ref-request-modal {
  max-width: 520px;
}

.staff-ref-request-modal h3 {
  font-size: 1.25rem;
  margin-top: 0;
}

.staff-ref-request-student {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  color: #334155;
}

.staff-ref-resource-feedback-block {
  padding: 0.75rem;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}

.staff-ref-resource-feedback-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 0.5rem;
}

.staff-ref-request-actions {
  justify-content: flex-end;
  flex-direction: row-reverse;
  gap: 0.5rem;
}

.staff-ref-request-success-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.closing-loop-overview {
  margin-bottom: 1.25rem;
  padding: 1.15rem 1.25rem;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}

.closing-loop-overview--compact {
  margin-bottom: 1rem;
  padding: 1rem;
}

.closing-loop-overview__kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.closing-loop-overview--compact .closing-loop-overview__kpis {
  margin-bottom: 0;
}

@media (max-width: 720px) {
  .closing-loop-overview__kpis {
    grid-template-columns: repeat(2, 1fr);
  }
}

.closing-loop-kpi {
  padding: 0.85rem 1rem;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.closing-loop-kpi--red {
  border-color: #fecaca;
  background: linear-gradient(135deg, #fef2f2 0%, #fff 100%);
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.08), 0 4px 12px rgba(239, 68, 68, 0.08);
}

.closing-loop-kpi--yellow {
  border-color: #fde68a;
  background: linear-gradient(135deg, #fffbeb 0%, #fff 100%);
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.08), 0 4px 12px rgba(245, 158, 11, 0.08);
}

.closing-loop-kpi--green {
  border-color: #bbf7d0;
  background: linear-gradient(135deg, #f0fdf4 0%, #fff 100%);
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.08), 0 4px 12px rgba(34, 197, 94, 0.08);
}

.closing-loop-kpi__value {
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1.1;
  color: #0f172a;
}

.closing-loop-kpi--red .closing-loop-kpi__value {
  color: #b91c1c;
}

.closing-loop-kpi--yellow .closing-loop-kpi__value {
  color: #b45309;
}

.closing-loop-kpi--green .closing-loop-kpi__value {
  color: #15803d;
}

.closing-loop-kpi__label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.closing-loop-kpi__sub {
  font-size: 0.75rem;
  color: #64748b;
}

.closing-loop-overview__pipeline-title {
  margin: 0 0 0.85rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
}

.closing-loop-overview__pipeline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.25rem;
  overflow-x: auto;
  padding-bottom: 0.35rem;
}

.closing-loop-pipeline-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  min-width: 72px;
  flex-shrink: 0;
}

.closing-loop-pipeline-step__circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  font-weight: 800;
  color: #1e3a8a;
  background: linear-gradient(145deg, #dbeafe, #93c5fd);
  border: 2px solid #60a5fa;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1), 0 4px 12px rgba(37, 99, 235, 0.15);
}

.closing-loop-pipeline-step__label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #475569;
  text-align: center;
}

.closing-loop-pipeline-step__arrow {
  flex: 1;
  min-width: 12px;
  height: 2px;
  margin-top: 24px;
  background: linear-gradient(90deg, #93c5fd, #60a5fa);
  position: relative;
}

.closing-loop-pipeline-step__arrow::after {
  content: '';
  position: absolute;
  right: 0;
  top: -4px;
  border: 5px solid transparent;
  border-left-color: #60a5fa;
}

.closing-loop-overview__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid #e2e8f0;
  font-size: 0.78rem;
  color: #64748b;
}

.closing-loop-legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 0.35rem;
  vertical-align: middle;
}

.closing-loop-legend-dot--red {
  background: #ef4444;
}

.closing-loop-legend-dot--yellow {
  background: #f59e0b;
}

.closing-loop-legend-dot--green {
  background: #22c55e;
}

/* Night mode */
[data-theme='dark'] .closing-loop-overview,
[data-theme='dark'] .closing-loop-kpi,
[data-theme='dark'] .closing-loop-kpi--red,
[data-theme='dark'] .closing-loop-kpi--yellow,
[data-theme='dark'] .closing-loop-kpi--green {
  background: #1a2332 !important;
  background-image: none !important;
  border-color: #3d4f66 !important;
  box-shadow: none !important;
  color: #fff !important;
}
[data-theme='dark'] .closing-loop-kpi__value,
[data-theme='dark'] .closing-loop-kpi__label,
[data-theme='dark'] .closing-loop-kpi__sub,
[data-theme='dark'] .closing-loop-overview__pipeline-title,
[data-theme='dark'] .closing-loop-pipeline-step__label,
[data-theme='dark'] .closing-loop-overview__legend {
  color: #fff !important;
}
[data-theme='dark'] .closing-loop-kpi--red .closing-loop-kpi__value,
[data-theme='dark'] .closing-loop-kpi--red .closing-loop-kpi__label { color: #fca5a5 !important; }
[data-theme='dark'] .closing-loop-kpi--yellow .closing-loop-kpi__value,
[data-theme='dark'] .closing-loop-kpi--yellow .closing-loop-kpi__label { color: #fcd34d !important; }
[data-theme='dark'] .closing-loop-kpi--green .closing-loop-kpi__value,
[data-theme='dark'] .closing-loop-kpi--green .closing-loop-kpi__label { color: #86efac !important; }
.closing-loop-dash-widget {
  margin: 0 0 1.5rem;
  padding: 1.15rem 1.25rem;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

.closing-loop-dash-widget__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.closing-loop-dash-widget__head h2 {
  margin: 0 0 0.25rem;
  font-size: 1.1rem;
  color: #0f172a;
}

.closing-loop-dash-widget__sub {
  margin: 0;
  font-size: 0.85rem;
  color: #64748b;
  line-height: 1.45;
  max-width: 42rem;
}

.closing-loop-dash-widget__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.closing-loop-dash-widget__link {
  font-size: 0.85rem;
  font-weight: 600;
  color: #2563eb;
  text-decoration: none;
  white-space: nowrap;
}

.closing-loop-dash-widget__link:hover {
  text-decoration: underline;
}

.closing-loop-dash-widget__empty {
  margin: 0;
  font-size: 0.9rem;
  color: #64748b;
}
.clinical-screener-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 11100;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  overflow: hidden;
}

.clinical-screener-detail-modal {
  background: #fff;
  width: min(75vw, 900px);
  height: min(85vh, 900px);
  max-height: 85vh;
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22);
  border: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.clinical-screener-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
}

.clinical-screener-detail-head__main {
  flex: 1;
  min-width: 0;
}

.clinical-screener-detail-head h2 {
  margin: 0 0 0.35rem;
  font-size: 1.35rem;
  line-height: 1.3;
  color: #0f172a;
}

.clinical-screener-detail-student {
  margin: 0;
  font-weight: 700;
  color: #1e40af;
  font-size: 1.05rem;
}

.clinical-screener-detail-meta,
.clinical-screener-detail-history {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  color: #64748b;
}

.clinical-screener-detail-history {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-width: 360px;
}

.clinical-screener-detail-history select {
  padding: 0.4rem 0.55rem;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  font: inherit;
}

.clinical-screener-detail-close {
  border: none;
  background: #f1f5f9;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: #334155;
  flex-shrink: 0;
}

.clinical-screener-detail-close:hover {
  background: #e2e8f0;
}

.clinical-screener-detail-scroll {
  flex: 1;
  overflow: auto;
  padding: 1rem 1.5rem 1.5rem;
}

.clinical-screener-detail-section {
  margin-bottom: 1.5rem;
}

.clinical-screener-detail-section h3 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  color: #0f172a;
}

.clinical-screener-detail-chart {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 0.75rem 0.5rem 0.85rem;
  background: #f8fafc;
}

.clinical-screener-detail-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
  padding: 0.35rem 0.75rem 0;
  font-size: 0.9rem;
  color: #334155;
}

.clinical-screener-detail-positive {
  color: #b91c1c;
  font-weight: 700;
}

.clinical-screener-detail-empty {
  margin: 0;
  color: #64748b;
  font-size: 0.95rem;
}

.clinical-screener-detail-error {
  margin: 0;
  color: #b91c1c;
  font-size: 0.95rem;
}

.clinical-screener-answer-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.clinical-screener-answer-item {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  background: #fff;
}

.clinical-screener-answer-q {
  color: #334155;
  font-size: 0.92rem;
  line-height: 1.45;
  margin-bottom: 0.35rem;
}

.clinical-screener-answer-num {
  font-weight: 700;
  color: #64748b;
  margin-right: 0.35rem;
}

.clinical-screener-answer-a {
  color: #0f172a;
  font-size: 0.95rem;
}

.clinical-screener-answer-score {
  color: #64748b;
  font-weight: 500;
}
.med-staff-overview {
  font-size: 0.9rem;
}

.med-staff-intro {
  margin: 0 0 1rem;
  color: #64748b;
  line-height: 1.45;
}

.med-staff-toolbar {
  margin-bottom: 0.75rem;
}

.med-staff-legend {
  margin-bottom: 0.75rem;
}

.med-staff-summary {
  align-items: stretch;
}

.med-staff-summary .admin-med-detail-message {
  flex: 1 1 100%;
  margin-bottom: 0;
}

.med-staff-table-wrap {
  max-height: min(52vh, 480px);
}

.med-staff-schedule {
  font-size: 0.82rem;
  color: #475569;
  white-space: nowrap;
}

.med-staff-error {
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.1);
  color: #b91c1c;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.admin-med-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
  margin-bottom: 1rem;
}

.admin-med-date-label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #475569;
}

.admin-med-date-label input {
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  font-size: 0.88rem;
}

.admin-med-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  margin-bottom: 1rem;
  font-size: 0.84rem;
  color: #475569;
}

.admin-med-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.admin-med-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.admin-med-dot--green {
  background: #22c55e;
}

.admin-med-dot--yellow {
  background: #eab308;
}

.admin-med-dot--red {
  background: #ef4444;
}

.admin-med-summary-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.admin-med-summary-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 0.65rem 1rem;
  min-width: 5.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.admin-med-summary-card strong {
  font-size: 1.25rem;
  color: #0f172a;
}

.admin-med-summary-card span {
  font-size: 0.78rem;
  color: #64748b;
  font-weight: 600;
}

.admin-med-summary-card--green {
  border-color: rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.06);
}

.admin-med-summary-card--yellow {
  border-color: rgba(234, 179, 8, 0.35);
  background: rgba(234, 179, 8, 0.06);
}

.admin-med-summary-card--red {
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.06);
}

.admin-med-table-wrap {
  overflow: auto;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}

.admin-med-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

.admin-med-table th,
.admin-med-table td {
  vertical-align: middle;
  font-size: 0.86rem;
  padding: 0.55rem 0.65rem;
  text-align: left;
  border-bottom: 1px solid #e2e8f0;
}

.admin-med-table th {
  background: #f8fafc;
  font-weight: 800;
  color: #475569;
  font-size: 0.78rem;
  text-transform: uppercase;
}

.admin-med-row--clickable {
  cursor: pointer;
}

.admin-med-row--clickable:hover {
  background: rgba(100, 156, 228, 0.08);
}

.admin-med-status-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.admin-med-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.45rem;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 800;
}

.admin-med-status-chip--green {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
}

.admin-med-status-chip--yellow {
  background: rgba(234, 179, 8, 0.12);
  color: #a16207;
}

.admin-med-status-chip--red {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}

.admin-med-message-cell {
  max-width: 14rem;
  color: #475569;
  line-height: 1.35;
}

.admin-med-view-btn {
  border: 1px solid #cbd5e1;
  background: #fff;
  border-radius: 8px;
  padding: 0.35rem 0.65rem;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--brand-blue-deep, #2e74b5);
}

.admin-med-view-btn:hover {
  background: rgba(100, 156, 228, 0.1);
}

.admin-med-detail-card {
  max-width: 520px;
  max-height: min(88vh, 720px);
  overflow-y: auto;
  text-align: left;
}

.admin-med-detail-sub {
  margin: -0.25rem 0 0.75rem;
  font-size: 0.85rem;
  color: #64748b;
}

.admin-med-detail-message {
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  font-size: 0.86rem;
  font-weight: 600;
}

.admin-med-detail-message--ok {
  background: rgba(34, 197, 94, 0.1);
  color: #15803d;
}

.admin-med-detail-message--alert {
  background: rgba(239, 68, 68, 0.1);
  color: #b91c1c;
}

.admin-med-detail-dl {
  display: grid;
  gap: 0.35rem;
  margin: 0 0 0.75rem;
  font-size: 0.84rem;
}

.admin-med-detail-dl > div {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0.5rem;
}

.admin-med-detail-dl dt {
  font-weight: 700;
  color: #64748b;
}

.admin-med-detail-dl dd {
  margin: 0;
  color: #0f172a;
}

.admin-med-inactive-tag {
  margin-left: 0.4rem;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #64748b;
  background: #e2e8f0;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
}

.admin-med-detail-slots-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 800;
  color: #64748b;
  margin-bottom: 0.35rem;
}

.admin-med-detail-slot-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}

.admin-med-slot-pill {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
}

.admin-med-slot-pill--green {
  background: rgba(34, 197, 94, 0.15);
  color: #15803d;
}

.admin-med-slot-pill--yellow {
  background: rgba(234, 179, 8, 0.15);
  color: #a16207;
}

.admin-med-slot-pill--red {
  background: rgba(239, 68, 68, 0.15);
  color: #b91c1c;
}

.admin-med-no-slots {
  margin: 0 0 0.75rem;
  font-size: 0.82rem;
}

.med-muted {
  color: #64748b;
}
.staff-ref-feedback-fields__hint {
  margin: 0 0 0.65rem;
  font-size: 0.8rem;
  color: #64748b;
  line-height: 1.4;
}

.staff-ref-feedback-fields__label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #475569;
}

.staff-ref-feedback-fields__select,
.staff-ref-feedback-fields__input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.65rem;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  font-size: 0.875rem;
  font-family: inherit;
}
.staff-ref-fb-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 11200;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem 1rem;
  overflow-y: auto;
}

.staff-ref-fb-modal {
  background: #fff;
  width: 100%;
  max-width: 480px;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.16);
  padding: 1.25rem;
}

.staff-ref-fb-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.staff-ref-fb-modal__head h3 {
  margin: 0;
  font-size: 1.1rem;
  color: #0f172a;
}

.staff-ref-fb-modal__close {
  border: none;
  background: #f1f5f9;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 1.4rem;
  cursor: pointer;
  color: #64748b;
}

.staff-ref-fb-modal__student {
  margin: 0 0 0.35rem;
  font-weight: 700;
  color: #334155;
  font-size: 0.9rem;
}

.staff-ref-fb-modal__resource {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  color: #475569;
  line-height: 1.45;
}

.staff-ref-fb-modal__current {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.78rem;
  color: #64748b;
}

.staff-ref-fb-modal__err {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  color: #b91c1c;
}

.staff-ref-fb-modal__ok {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  color: #15803d;
}

.staff-ref-fb-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.closing-loop-journey {
  padding: 0.85rem 0;
}

.closing-loop-journey--large {
  padding: 1rem 1.1rem;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
}

.closing-loop-journey__track {
  display: flex;
  align-items: flex-start;
  width: 100%;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}

.closing-loop-journey__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  min-width: 72px;
  flex-shrink: 0;
}

.closing-loop-journey--large .closing-loop-journey__step {
  min-width: 88px;
}

.closing-loop-journey__step.is-active .closing-loop-journey__node {
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2), 0 0 16px rgba(239, 68, 68, 0.25);
  transform: scale(1.06);
}

.closing-loop-journey__step.is-active .closing-loop-journey__node.loop-step--active {
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.2), 0 0 16px rgba(245, 158, 11, 0.25);
}

.closing-loop-journey__node {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  border: 2px solid #cbd5e1;
  background: #f8fafc;
  color: #64748b;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.closing-loop-journey--large .closing-loop-journey__node {
  width: 48px;
  height: 48px;
}

.closing-loop-journey__node.loop-step--complete {
  background: linear-gradient(145deg, #4ade80, #22c55e);
  border-color: #86efac;
  color: #fff;
}

.closing-loop-journey__node.loop-step--active {
  background: linear-gradient(145deg, #fcd34d, #f59e0b);
  border-color: #fde68a;
  color: #78350f;
}

.closing-loop-journey__node.loop-step--attention {
  background: linear-gradient(145deg, #f87171, #ef4444);
  border-color: #fca5a5;
  color: #fff;
}

.closing-loop-journey__node.loop-step--pending {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #94a3b8;
}

.closing-loop-journey__num {
  font-size: 0.85rem;
}

.closing-loop-journey__label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #475569;
  text-align: center;
}

.closing-loop-journey--large .closing-loop-journey__label {
  font-size: 0.78rem;
  color: #334155;
}

.closing-loop-journey__state-hint {
  font-size: 0.62rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.closing-loop-journey__connector {
  flex: 1;
  min-width: 12px;
  height: 4px;
  margin-top: 20px;
  border-radius: 4px;
  background: #e2e8f0;
}

.closing-loop-journey__connector.loop-step--complete {
  background: linear-gradient(90deg, #22c55e, #4ade80);
}

.closing-loop-journey__connector.loop-step--active {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.closing-loop-journey__connector.loop-step--attention {
  background: linear-gradient(90deg, #ef4444, #f87171);
}

.closing-loop-journey__meta {
  margin: 0.85rem 0 0;
  font-size: 0.85rem;
  color: #64748b;
}

.closing-loop-journey__meta strong {
  color: #0f172a;
}

.closing-loop-journey__current {
  color: #2563eb !important;
}

.closing-loop-journey__sep {
  margin: 0 0.4rem;
}
.closing-loop-risk {
  text-align: center;
  padding: 1rem;
  border-radius: 14px;
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
  border: 1px solid #e2e8f0;
}

.closing-loop-risk--high {
  border-color: #fecaca;
  background: linear-gradient(180deg, #fef2f2 0%, #fff 100%);
}

.closing-loop-risk--moderate {
  border-color: #fde68a;
  background: linear-gradient(180deg, #fffbeb 0%, #fff 100%);
}

.closing-loop-risk--low {
  border-color: #bbf7d0;
  background: linear-gradient(180deg, #f0fdf4 0%, #fff 100%);
}

.closing-loop-risk__gauge {
  position: relative;
  width: 120px;
  height: 64px;
  margin: 0 auto 0.35rem;
  overflow: hidden;
}

.closing-loop-risk__arc {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  border-radius: 120px 120px 0 0;
  background: conic-gradient(
    from 180deg at 50% 100%,
    #22c55e 0deg,
    #eab308 90deg,
    #ef4444 180deg
  );
  mask: radial-gradient(circle at 50% 100%, transparent 58%, #000 59%);
  -webkit-mask: radial-gradient(circle at 50% 100%, transparent 58%, #000 59%);
}

.closing-loop-risk__needle {
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 3px;
  height: 48px;
  margin-left: -1.5px;
  transform-origin: bottom center;
  background: #0f172a;
  border-radius: 2px;
  transition: transform 0.4s ease;
  z-index: 2;
}

.closing-loop-risk__hub {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: #0f172a;
  z-index: 3;
}

.closing-loop-risk__value {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  color: #0f172a;
}

.closing-loop-risk--high .closing-loop-risk__value {
  color: #b91c1c;
}

.closing-loop-risk--moderate .closing-loop-risk__value {
  color: #b45309;
}

.closing-loop-risk--low .closing-loop-risk__value {
  color: #15803d;
}

.closing-loop-risk__label {
  font-size: 0.85rem;
  font-weight: 700;
  color: #475569;
  margin-top: 0.15rem;
}

.closing-loop-risk__hint {
  margin: 0.35rem 0 0;
  font-size: 0.72rem;
  color: #94a3b8;
}
.closing-loop-timeline__track {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.5rem 0 0.25rem;
}

.closing-loop-timeline__item {
  flex: 1;
  min-width: 100px;
  text-align: center;
  position: relative;
  padding-top: 1.1rem;
}

.closing-loop-timeline__item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 0.45rem;
  left: calc(50% + 10px);
  right: calc(-50% + 10px);
  height: 3px;
  background: #e2e8f0;
  z-index: 0;
}

.closing-loop-timeline__dot {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px #cbd5e1;
  background: #94a3b8;
  z-index: 1;
}

.closing-loop-timeline__item--complete .closing-loop-timeline__dot {
  background: #22c55e;
  box-shadow: 0 0 0 2px #86efac;
}

.closing-loop-timeline__item--attention .closing-loop-timeline__dot {
  background: #ef4444;
  box-shadow: 0 0 0 2px #fca5a5;
}

.closing-loop-timeline__item--active .closing-loop-timeline__dot {
  background: #f59e0b;
  box-shadow: 0 0 0 2px #fcd34d;
}

.closing-loop-timeline__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: #334155;
  line-height: 1.3;
}

.closing-loop-timeline__date {
  display: block;
  font-size: 0.68rem;
  color: #64748b;
  margin-top: 0.2rem;
}

.closing-loop-timeline__empty {
  margin: 0;
  font-size: 0.85rem;
  color: #64748b;
}
.staff-suggest-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 11400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.staff-suggest-modal {
  width: min(560px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.2);
  padding: 1.1rem 1.25rem 1.25rem;
}

.staff-suggest-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}

.staff-suggest-modal__head h3 {
  margin: 0;
  font-size: 1.05rem;
}

.staff-suggest-modal__close {
  border: none;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: #64748b;
}

.staff-suggest-modal__lead {
  margin: 0 0 0.85rem;
  font-size: 0.875rem;
  color: #475569;
  line-height: 1.45;
}

.staff-suggest-modal__preview {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 0.75rem 0.85rem;
  margin-bottom: 0.85rem;
  font-size: 0.8125rem;
  color: #334155;
}

.staff-suggest-modal__preview-title {
  font-weight: 700;
  margin-bottom: 0.35rem;
}

.staff-suggest-modal__preview p {
  margin: 0.2rem 0;
}

.staff-suggest-modal__maps-link {
  margin-top: 0.45rem !important;
}

.staff-suggest-modal__maps-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #1d4ed8;
  margin-bottom: 0.2rem;
}

.staff-suggest-modal__maps-link a {
  word-break: break-all;
  color: #2563eb;
}

.staff-suggest-modal__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 0.35rem;
}

.staff-suggest-modal__textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 0.65rem 0.75rem;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.45;
  resize: vertical;
  min-height: 180px;
}

.staff-suggest-modal__err {
  color: #b91c1c;
  font-size: 0.8125rem;
  margin: 0.65rem 0 0;
}

.staff-suggest-modal__ok {
  color: #15803d;
  font-size: 0.8125rem;
  margin: 0.65rem 0 0;
}

.staff-suggest-modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
}

.staff-suggest-modal__btn {
  border-radius: 10px;
  padding: 0.55rem 0.95rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
}

.staff-suggest-modal__btn--ghost {
  background: #fff;
  border-color: #cbd5e1;
  color: #334155;
}

.staff-suggest-modal__btn--primary {
  background: #2563eb;
  color: #fff;
}

.staff-suggest-modal__btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}
.cl-case-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 11300;
  background: rgba(15, 23, 42, 0.4);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1.25rem;
  overflow-y: auto;
}

.cl-case-modal {
  width: min(96vw, 1100px);
  background: #fff;
  border-radius: 18px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.12);
  overflow: hidden;
  margin: auto;
}

.cl-case-modal__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
}

.cl-case-modal__head h2 {
  margin: 0.35rem 0 0.15rem;
  font-size: 1.35rem;
  color: #0f172a;
}

.cl-case-modal__sub {
  margin: 0;
  font-size: 0.9rem;
  color: #64748b;
}

.cl-case-modal__status {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cl-case-modal__status--red {
  background: #fee2e2;
  color: #991b1b;
}

.cl-case-modal__status--yellow {
  background: #fef3c7;
  color: #92400e;
}

.cl-case-modal__status--green,
.cl-case-modal__status--closed {
  background: #dcfce7;
  color: #166534;
}

.cl-case-modal__close {
  border: none;
  background: #f1f5f9;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  font-size: 1.5rem;
  cursor: pointer;
  color: #64748b;
}

.cl-case-modal__journey {
  padding: 0.75rem 1.25rem 0.85rem;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.cl-case-modal__recent-activity {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
}

.cl-case-modal__recent-activity-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 0.9rem;
  border: none;
  background: #fff;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: #0f172a;
}

.cl-case-modal__recent-activity-toggle:hover {
  background: #f8fafc;
}

.cl-case-modal__recent-activity-chevron {
  font-size: 0.7rem;
  color: #64748b;
  width: 1rem;
  flex-shrink: 0;
}

.cl-case-modal__recent-activity-title {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #334155;
}

.cl-case-modal__recent-activity-count {
  margin-left: auto;
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748b;
}

.cl-case-modal__recent-activity-body {
  padding: 0.15rem 0.9rem 0.85rem;
  border-top: 1px solid #eef2f7;
}

.cl-case-modal__body {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 1rem;
  padding: 1rem 1.25rem 1.25rem;
  background: #f8fafc;
}

.cl-case-modal__main {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.cl-case-modal__alert {
  padding: 1rem 1.1rem;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  background: #fff;
}

.cl-case-modal__alert--red {
  border-color: #fecaca;
  background: linear-gradient(135deg, #fff 0%, #fef2f2 100%);
}

.cl-case-modal__alert--yellow {
  border-color: #fde68a;
  background: linear-gradient(135deg, #fff 0%, #fffbeb 100%);
}

.cl-case-modal__alert h3 {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  color: #0f172a;
}

.cl-case-modal__alert p {
  margin: 0;
  font-size: 0.88rem;
  color: #475569;
  line-height: 1.5;
}

.cl-case-modal__grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.cl-case-modal__panel {
  padding: 1rem;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #e2e8f0;
}

.cl-case-modal__panel h4 {
  margin: 0 0 0.65rem;
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
}

.cl-case-modal__needed-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cl-case-modal__needed-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.88rem;
  color: #334155;
}

.cl-case-modal__needed-list li:last-child {
  border-bottom: none;
}

.cl-case-tag {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
}

.cl-case-tag--attention {
  background: #fee2e2;
  color: #991b1b;
}

.cl-case-tag--active {
  background: #fef3c7;
  color: #92400e;
}

.cl-case-modal__action-hint {
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  color: #64748b;
  line-height: 1.4;
}

.cl-case-modal__action {
  margin: 0;
  font-size: 0.9rem;
  color: #334155;
  line-height: 1.45;
}

.cl-case-modal__side {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.cl-case-modal__barriers {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cl-case-modal__barriers li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: #334155;
  padding: 0.35rem 0;
}

.cl-case-priority {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cl-case-priority--high {
  background: #ef4444;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.6);
}

.cl-case-priority--medium {
  background: #f59e0b;
}

.cl-case-modal__panel--metric {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.cl-case-metric__icon {
  font-size: 1.5rem;
}

.cl-case-modal__panel--metric strong {
  display: block;
  font-size: 1.5rem;
  color: #1e40af;
  line-height: 1.1;
}

.cl-case-modal__panel--metric span {
  font-size: 0.75rem;
  color: #64748b;
}

.cl-case-modal__side-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cl-case-btn {
  display: block;
  text-align: center;
  padding: 0.6rem 1rem;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.cl-case-btn--primary {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
}

.cl-case-btn--secondary {
  background: #fff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}

.cl-case-btn--ghost {
  background: transparent;
  color: #64748b;
  border: 1px solid #e2e8f0;
  font-size: 0.8rem;
}

.cl-case-modal__panel--google {
  border-color: #dbeafe;
  background: linear-gradient(135deg, #fff 0%, #f8fbff 100%);
}

.cl-case-google__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.cl-case-google__head h4 {
  margin: 0;
}

.cl-case-google__badge {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
}

.cl-case-google__badge--no-api {
  background: #fef3c7;
  color: #92400e;
}

.cl-case-google__badge--mixed {
  background: #e0e7ff;
  color: #4338ca;
}

.cl-case-google__item-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.cl-case-resource-badge {
  flex-shrink: 0;
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
}

.cl-case-resource-badge--school {
  background: #dcfce7;
  color: #166534;
}

.cl-case-resource-badge--local {
  background: #ffedd5;
  color: #c2410c;
}

.cl-case-resource-badge--national {
  background: #ede9fe;
  color: #5b21b6;
}

.cl-case-resource-badge--google {
  background: #dbeafe;
  color: #1d4ed8;
}

.cl-case-resource-badge--cbo {
  background: #fce7f3;
  color: #9d174d;
}

.cl-case-resource-badge--score {
  background: #ecfdf5;
  color: #047857;
  font-variant-numeric: tabular-nums;
}

.cl-case-google__explain {
  margin: 0.2rem 0 0;
  font-size: 0.78rem;
  color: #475569;
  line-height: 1.4;
}

.cl-case-resource-badge--nearby {
  background: #ecfdf5;
  color: #047857;
}

.cl-case-resource-badge--maps {
  background: #dbeafe;
  color: #1d4ed8;
}

.cl-case-google__browse-maps {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: 0.84rem;
  font-weight: 600;
  color: #2563eb;
  text-decoration: none;
}

.cl-case-google__browse-maps:hover {
  text-decoration: underline;
}

.cl-case-google__phone {
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
  color: #334155;
}

.cl-case-google__lead,
.cl-case-google__muted,
.cl-case-google__note {
  margin: 0 0 0.75rem;
  font-size: 0.84rem;
  color: #64748b;
  line-height: 1.45;
}

.cl-case-google__note {
  margin-top: 0.65rem;
  margin-bottom: 0;
  font-size: 0.78rem;
  color: #92400e;
}

.cl-case-google__error {
  margin: 0;
  font-size: 0.84rem;
  color: #b91c1c;
}

.cl-case-google__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.cl-case-google__list li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e2e8f0;
}

.cl-case-resources-groups {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cl-case-resources-section__head h5 {
  margin: 0 0 0.25rem;
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #334155;
}

.cl-case-resources-section__desc {
  margin: 0 0 0.55rem;
  font-size: 0.78rem;
  color: #64748b;
  line-height: 1.4;
}

.cl-case-resources-section__empty {
  margin: 0;
  padding: 0.75rem 0.85rem;
  border-radius: 8px;
  border: 1px dashed #cbd5e1;
  background: #f8fafc;
  display: grid;
  gap: 0.4rem;
}

.cl-case-resources-section__empty p {
  margin: 0;
  font-size: 0.82rem;
  color: #475569;
  line-height: 1.4;
}

.cl-case-google__item-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  flex-shrink: 0;
}

.cl-case-google__staff-btn {
  padding: 0.4rem 0.65rem;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid transparent;
}

.cl-case-google__staff-btn--cbo {
  background: #fdf2f8;
  border-color: #f9a8d4;
  color: #9d174d;
}

.cl-case-google__staff-btn--suggest {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
}

.cl-case-google__staff-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.cl-case-google__item-main {
  display: flex;
  gap: 0.65rem;
  min-width: 0;
}

.cl-case-google__rank {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 0.72rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cl-case-google__item-body {
  min-width: 0;
}

.cl-case-google__item-body strong {
  display: block;
  font-size: 0.88rem;
  color: #0f172a;
  margin-bottom: 0.15rem;
}

.cl-case-google__rating {
  display: inline-block;
  font-size: 0.75rem;
  color: #92400e;
  font-weight: 600;
}

.cl-case-google__addr {
  margin: 0.2rem 0 0;
  font-size: 0.78rem;
  color: #64748b;
  line-height: 1.35;
}

.cl-case-google__map-btn,
.cl-case-google__search-link {
  flex-shrink: 0;
  align-self: center;
  padding: 0.4rem 0.65rem;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid #bfdbfe;
  background: #fff;
  color: #2563eb;
  cursor: pointer;
  white-space: nowrap;
}

.cl-case-google__search-link {
  display: inline-block;
}

@media (max-width: 900px) {
  .cl-case-modal__body {
    grid-template-columns: 1fr;
  }

  .cl-case-modal__grid-2 {
    grid-template-columns: 1fr;
  }

  .cl-case-google__list li {
    flex-direction: column;
  }

  .cl-case-google__item-actions {
    align-items: flex-start;
    width: 100%;
  }

  .cl-case-google__map-btn {
    align-self: flex-start;
  }
}

.cl-case-modal__panel--activity {
  border-color: #bbf7d0;
  background: linear-gradient(135deg, #fff 0%, #f0fdf4 100%);
}

.cl-case-activity__muted {
  margin: 0;
  font-size: 0.84rem;
  color: #64748b;
  line-height: 1.45;
}

.cl-case-activity__err {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  color: #b91c1c;
}

.cl-case-activity__group {
  margin-top: 0.65rem;
}

.cl-case-activity__group h5 {
  margin: 0 0 0.45rem;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #475569;
}

.cl-case-activity__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.cl-case-activity__item {
  padding: 0.6rem 0.7rem;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e2e8f0;
}

.cl-case-activity__item div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.cl-case-activity__item strong {
  font-size: 0.86rem;
  color: #0f172a;
}

.cl-case-activity__badge {
  flex-shrink: 0;
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
}

.cl-case-activity__badge--referral {
  background: #fce7f3;
  color: #9d174d;
}

.cl-case-activity__badge--suggest {
  background: #dbeafe;
  color: #1d4ed8;
}

.cl-case-activity__detail,
.cl-case-activity__meta {
  margin: 0.25rem 0 0;
  font-size: 0.78rem;
  color: #64748b;
  line-height: 1.35;
}

.cl-case-resource-shared {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.45;
  font-weight: 600;
}

.cl-case-resource-shared--ok {
  color: #15803d;
}

.cl-case-resource-shared--active {
  color: #1d4ed8;
}

.cl-case-resource-shared--wait {
  color: #b45309;
}

.cl-case-resource-shared--muted {
  color: #64748b;
}
.closing-loop-mini__track {
  display: flex;
  align-items: flex-start;
  width: 100%;
  min-width: 0;
}

.closing-loop-mini__node-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.closing-loop-mini__node {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 800;
  border: 2px solid #cbd5e1;
  background: #f8fafc;
  color: #64748b;
  transition: box-shadow 0.2s ease;
}

.closing-loop-mini__node.loop-step--complete {
  background: linear-gradient(145deg, #4ade80, #22c55e);
  border-color: #86efac;
  color: #fff;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.35);
}

.closing-loop-mini__node.loop-step--active {
  background: linear-gradient(145deg, #fcd34d, #f59e0b);
  border-color: #fde68a;
  color: #78350f;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.35);
}

.closing-loop-mini__node.loop-step--attention {
  background: linear-gradient(145deg, #f87171, #ef4444);
  border-color: #fca5a5;
  color: #fff;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.45);
}

.closing-loop-mini__node.loop-step--pending {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #94a3b8;
}

.closing-loop-mini--compact .closing-loop-mini__node {
  width: 22px;
  height: 22px;
  font-size: 0.58rem;
}

.closing-loop-mini__connector {
  flex: 1;
  height: 3px;
  margin-top: 13px;
  min-width: 8px;
  background: #e2e8f0;
  border-radius: 2px;
}

.closing-loop-mini--compact .closing-loop-mini__connector {
  margin-top: 10px;
}

.closing-loop-mini__connector.loop-step--complete {
  background: #86efac;
}

.closing-loop-mini__connector.loop-step--active {
  background: #fcd34d;
}

.closing-loop-mini__connector.loop-step--attention {
  background: #fca5a5;
}

.closing-loop-mini__label {
  font-size: 0.62rem;
  color: #64748b;
  text-align: center;
  max-width: 52px;
  line-height: 1.2;
}
.care-loop-tracker {
  margin: 0 0 1.25rem;
  padding: 1rem 1.1rem;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #fff;
}

.care-loop-tracker__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.care-loop-tracker__title {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
}

.care-loop-tracker__sub {
  margin: 0;
  font-size: 0.8125rem;
  color: #64748b;
  line-height: 1.45;
}

.care-loop-tracker__refresh {
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  font-size: 0.8125rem;
  cursor: pointer;
}

.care-loop-tracker__table-wrap {
  overflow-x: auto;
}

.care-loop-tracker__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.care-loop-tracker__table th,
.care-loop-tracker__table td {
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid #eef2f7;
  text-align: left;
  vertical-align: top;
}

.care-loop-tracker__table th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #64748b;
}

.care-loop-badge {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.care-loop-badge--red {
  background: #fee2e2;
  color: #991b1b;
}

.care-loop-badge--yellow {
  background: #fef3c7;
  color: #92400e;
}

.care-loop-badge--green {
  background: #dcfce7;
  color: #166534;
}

.care-loop-tracker__meta {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.75rem;
  color: #64748b;
}

.care-loop-sdoh-flag {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
  background: #ede9fe;
  color: #5b21b6;
  font-size: 0.75rem;
  font-weight: 600;
}

.care-loop-tracker__link {
  font-size: 0.8125rem;
  color: #2563eb;
  text-decoration: none;
}

.care-loop-tracker__link:hover {
  text-decoration: underline;
}

.care-loop-tracker__empty {
  margin: 0;
  padding: 0.75rem;
  font-size: 0.875rem;
  color: #64748b;
  background: #f8fafc;
  border-radius: 8px;
}

.care-loop-tracker__row--closed {
  background: #fafdf9;
}

.care-loop-status-pill {
  display: inline-block;
  margin-right: 0.35rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
}

.care-loop-status-pill--open {
  background: #dbeafe;
  color: #1d4ed8;
}

.care-loop-status-pill--closed {
  background: #dcfce7;
  color: #166534;
}

.care-loop-plain {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
}

.care-loop-plain--ok {
  color: #166534;
}

.care-loop-plain--wait {
  color: #92400e;
}

.care-loop-plain--warn {
  color: #991b1b;
}

.care-loop-plain--closed {
  color: #166534;
}

.care-loop-plain--muted {
  color: #94a3b8;
  font-weight: 500;
}

.care-loop-step {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #334155;
}

.care-loop-tracker__action {
  display: block;
  font-size: 0.8125rem;
  color: #475569;
}

.care-loop-staff-fb {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.care-loop-staff-fb--ok {
  color: #15803d;
}

.care-loop-staff-fb--pending {
  color: #b45309;
}

.care-loop-staff-fb--muted {
  color: #94a3b8;
}

.care-loop-tracker__head-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.care-loop-view-toggle {
  display: inline-flex;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  overflow: hidden;
}

.care-loop-view-toggle button {
  padding: 0.35rem 0.65rem;
  border: none;
  background: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
}

.care-loop-view-toggle button.is-on {
  background: #2563eb;
  color: #fff;
}

.care-loop-case-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1rem;
}

.care-loop-case-card {
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
  padding: 1.1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.care-loop-case-card:hover {
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.1);
  transform: translateY(-1px);
}

.care-loop-case-card--red {
  border-left: 5px solid #ef4444;
  background: linear-gradient(180deg, #fff 0%, #fef2f2 120%);
}

.care-loop-case-card--yellow {
  border-left: 5px solid #f59e0b;
  background: linear-gradient(180deg, #fff 0%, #fffbeb 120%);
}

.care-loop-case-card--green,
.care-loop-case-card--closed {
  border-left: 5px solid #22c55e;
  background: linear-gradient(180deg, #fff 0%, #f0fdf4 120%);
}

.care-loop-case-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}

.care-loop-case-card__name {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
}

.care-loop-case-card__need {
  margin: 0.2rem 0 0;
  font-size: 0.85rem;
  color: #64748b;
}

.care-loop-case-card__status {
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}

.care-loop-case-card__status--red {
  background: #fee2e2;
  color: #991b1b;
}

.care-loop-case-card__status--yellow {
  background: #fef3c7;
  color: #92400e;
}

.care-loop-case-card__status--green,
.care-loop-case-card__status--closed {
  background: #dcfce7;
  color: #166534;
}

.care-loop-case-card__facts {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem 1rem;
  font-size: 0.8rem;
}

.care-loop-case-card__facts dt {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94a3b8;
}

.care-loop-case-card__facts dd {
  margin: 0.15rem 0 0;
}

.care-loop-case-card__action {
  font-size: 0.8rem;
  color: #475569;
  line-height: 1.35;
}

.care-loop-case-card__badges {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
}

.care-loop-case-card__days {
  font-size: 0.68rem;
  font-weight: 700;
  color: #1e40af;
  background: #dbeafe;
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
}

.care-loop-case-card__step {
  margin: 0;
  font-size: 0.78rem;
  color: #64748b;
}

.care-loop-case-card__step strong {
  color: #2563eb;
}

.care-loop-case-card__consent-note {
  color: #92400e;
  font-weight: 600;
}

.care-loop-case-card__needed {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.care-loop-case-card__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.55rem;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #334155;
  background: #f1f5f9;
}

.care-loop-case-card__chip span {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.care-loop-case-card__chip--attention {
  background: #fee2e2;
  color: #991b1b;
}

.care-loop-case-card__chip--attention span {
  color: #b91c1c;
}

.care-loop-case-card__chip--active {
  background: #fef3c7;
  color: #92400e;
}

.care-loop-case-card__chip--active span {
  color: #b45309;
}

.care-loop-case-card__impact {
  margin: 0;
  font-size: 0.78rem;
  color: #64748b;
  line-height: 1.45;
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid #f1f5f9;
}

.care-loop-case-card__foot {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: auto;
  padding-top: 0.65rem;
  border-top: 1px solid #e2e8f0;
}

.care-loop-case-card__foot-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.care-loop-case-card__view-btn {
  width: 100%;
  padding: 0.55rem 0.85rem;
  border-radius: 10px;
  border: 1px solid #bfdbfe;
  background: linear-gradient(180deg, #fff 0%, #eff6ff 100%);
  color: #1d4ed8;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.care-loop-case-card__view-btn--primary {
  border-color: #0f766e;
  background: linear-gradient(180deg, #14b8a6 0%, #0d9488 100%);
  color: #fff;
}

.care-loop-case-card__view-btn--primary:hover {
  background: linear-gradient(180deg, #0d9488 0%, #0f766e 100%);
  border-color: #0f766e;
  color: #fff;
}

.care-loop-case-card__view-btn:hover {
  background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
  border-color: #93c5fd;
}

.care-loop-tracker__detail-btn {
  display: block;
  margin-bottom: 0.25rem;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
}

.care-loop-tracker__journey-cell {
  min-width: 180px;
}

.care-loop-staff-fb__btn {
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  color: #334155;
}

.care-loop-staff-fb__btn:hover {
  background: #e2e8f0;
}
.student-profile-staff-panel {
  padding: 0.25rem 0;
}

.student-profile-staff-panel__lead {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  color: var(--text-secondary, #5f6368);
  line-height: 1.45;
}

.student-profile-staff-panel__empty {
  margin: 0.5rem 0;
  color: var(--text-secondary, #5f6368);
  font-size: 0.875rem;
  line-height: 1.5;
}

.student-profile-staff-panel__empty--error {
  color: #c62828;
}

.student-profile-staff-table-wrap {
  overflow-x: auto;
  border: 1px solid #e8eaed;
  border-radius: 10px;
}

.student-profile-staff-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.student-profile-staff-table th,
.student-profile-staff-table td {
  padding: 0.625rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid #eef1f4;
  vertical-align: top;
}

.student-profile-staff-table th {
  background: #f8f9fa;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5f6368;
  font-weight: 600;
}

.student-profile-staff-table tr:last-child td {
  border-bottom: none;
}

.student-profile-staff-pill {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: #eef1f4;
  color: #3c4043;
}

.student-profile-staff-pill--pending,
.student-profile-staff-pill--pending_parent_consent {
  background: #fff3e0;
  color: #e65100;
}

.student-profile-staff-pill--accepted,
.student-profile-staff-pill--sent {
  background: #e8f5e9;
  color: #2e7d32;
}

.student-profile-staff-pill--declined {
  background: #ffebee;
  color: #c62828;
}

.student-profile-staff-pill--suggested {
  background: #e3f2fd;
  color: #1565c0;
}

.student-profile-staff-pill--scheduled {
  background: #f3e5f5;
  color: #6a1b9a;
}

.student-profile-staff-pill--unknown {
  background: #eef1f4;
  color: #3c4043;
}

.student-profile-staff-subtabs-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.student-profile-staff-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  border-bottom: 1px solid #e8eaed;
  padding-bottom: 0.5rem;
}

.student-profile-staff-subtab {
  border: 1px solid transparent;
  background: transparent;
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #5f6368;
  cursor: pointer;
}

.student-profile-staff-subtab--active {
  background: #e8f0fe;
  border-color: #c2d7fc;
  color: #1a73e8;
}

.student-profile-staff-table__sub {
  margin-top: 0.2rem;
  font-size: 0.75rem;
  color: #5f6368;
  line-height: 1.35;
}

.student-profile-staff-table__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.student-profile-staff-table__links a {
  font-weight: 600;
  color: #1a73e8;
  text-decoration: none;
}

.student-profile-staff-table__links a:hover {
  text-decoration: underline;
}

.care-loop-tracker--profile.care-loop-tracker--embedded {
  margin: 0;
}

.care-loop-tracker--profile.care-loop-tracker--embedded .care-loop-case-grid {
  grid-template-columns: 1fr;
}

.student-profile-drawer .drawer-content .care-loop-tracker--profile {
  padding: 0;
}

.student-profile-drawer.fullscreen .care-loop-tracker--profile .care-loop-case-grid {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  animation: fadeIn 0.3s ease;
}

.student-profile-drawer {
  position: fixed;
  top: 0;
  right: auto;
  bottom: auto;
  width: 550px;
  max-width: 90vw;
  max-height: 90vh;
  background: white;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  animation: slideIn 0.3s ease;
  border-radius: 12px;
  overflow: hidden;
  user-select: none;
  transition: all 0.3s ease;
}

.student-profile-drawer.fullscreen {
  border-radius: 0;
  box-shadow: none;
  max-width: 100vw;
  max-height: 100vh;
}

.student-profile-drawer.minimized {
  border-radius: 8px 8px 0 0;
  overflow: visible;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
}

.student-profile-drawer.dragging {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  transform: scale(1.02);
  transition: transform 0.1s ease;
}

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

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

.drawer-header {
  padding: 1.75rem;
  /* Reserve space for absolutely positioned fullscreen / close (avoids flex squeeze + overflow clip) */
  padding-right: 5.5rem;
  border-bottom: 2px solid #e0e0e0;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  position: relative;
}

.drawer-header.drawer-drag-handle {
  cursor: grab;
}

.drawer-header.drawer-drag-handle:active {
  cursor: grabbing;
}

.drag-handle-icon {
  font-size: 1.2rem;
  color: var(--text-secondary);
  font-weight: bold;
  letter-spacing: -2px;
  opacity: 0.6;
  transition: opacity 0.2s;
  user-select: none;
}

.drawer-header:hover .drag-handle-icon {
  opacity: 1;
}

/* Profile Image Styles */
.drawer-profile-image-container {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.drawer-profile-image {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--primary-blue);
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  position: relative;
}

.drawer-profile-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.drawer-profile-image-upload {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: center;
}

.drawer-upload-label {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 1rem;
  border: 2px solid #e0e0e0;
}

.drawer-upload-label:hover {
  background: #e0e0e0;
  transform: scale(1.1);
}

.drawer-upload-actions {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}

.drawer-upload-btn,
.drawer-cancel-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

.drawer-upload-btn {
  background: #4caf50;
  color: white;
}

.drawer-upload-btn:hover:not(:disabled) {
  background: #45a049;
  transform: scale(1.1);
}

.drawer-upload-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.drawer-cancel-btn {
  background: #f44336;
  color: white;
}

.drawer-cancel-btn:hover {
  background: #da190b;
  transform: scale(1.1);
}

.drawer-profile-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.drawer-profile-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
  font-weight: 600;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue) 100%);
}

.drawer-header-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
}

/* Let the student block shrink so the actions row doesn’t push controls off-screen */
.drawer-header-main {
  min-width: 0;
  flex: 1;
}

.drawer-header h2 {
  margin: 0 0 0.5rem 0;
  font-size: 1.3rem;
  color: var(--primary-blue);
}

.drawer-subtitle {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.drawer-header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  min-width: 0;
  flex-shrink: 1;
}

.drawer-control-buttons {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-shrink: 0;
  /* Pinned to header so they’re never clipped when the title/actions are wide */
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 10;
}

.drawer-control-btn {
  background: rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.08);
  width: 36px;
  height: 36px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  line-height: 1;
  color: #374151;
  transition: all 0.2s ease;
  font-weight: 600;
}

.drawer-control-btn svg {
  flex-shrink: 0;
  pointer-events: none;
}

.drawer-control-btn:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #111827;
  transform: scale(1.1);
}

.drawer-control-btn.minimize-btn:hover {
  background: #fbbf24;
  color: white;
}

.drawer-control-btn.fullscreen-btn:hover {
  background: #3b82f6;
  color: white;
}

.drawer-control-btn.close-btn:hover {
  background: #ef4444;
  color: white;
}

.student-profile-drawer.minimized .drawer-header {
  padding: 0.75rem 1.75rem;
  padding-right: 5.5rem;
  border-bottom: none;
}

.student-profile-drawer.minimized .drawer-header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.student-profile-drawer.minimized .drawer-profile-image,
.student-profile-drawer.minimized .drawer-profile-placeholder {
  width: 40px;
  height: 40px;
  font-size: 0.9rem;
}

.student-profile-drawer.minimized h2 {
  font-size: 1rem;
  margin: 0;
}

.student-profile-drawer.minimized .drawer-subtitle {
  font-size: 0.75rem;
  margin: 0;
}

.risk-badge-large {
  padding: 0.5rem 1rem;
  border-radius: 20px;
  color: white;
  font-weight: 600;
  font-size: 0.85rem;
}

.btn-edit-student {
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue) 100%);
  color: white;
  border: none;
  padding: 0.625rem 1.25rem;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.875rem;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px var(--border-medium);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-edit-student:hover {
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue) 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px var(--focus-ring);
}

.btn-edit-student:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px var(--border-medium);
}

.close-drawer-btn {
  background: none;
  border: none;
  font-size: 2rem;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s;
}

.close-drawer-btn:hover {
  background: #e0e0e0;
  color: var(--text-primary);
}

.drawer-tabs {
  display: flex;
  border-bottom: 2px solid #e0e0e0;
  background: white;
  overflow-x: auto;
}

.tab {
  padding: 1rem 1.5rem;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--text-secondary);
  border-bottom: 3px solid transparent;
  transition: all 0.2s;
  white-space: nowrap;
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tab:hover {
  color: var(--primary-blue);
  background: #f8f9fa;
}

.tab.active {
  color: var(--primary-blue);
  border-bottom-color: var(--primary-blue);
  font-weight: 600;
}

.tab-badge {
  background: var(--primary-blue);
  color: white;
  padding: 0.125rem 0.5rem;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  min-width: 20px;
  text-align: center;
}

.drawer-content {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
}

.student-profile-staff-tab-panel {
  max-height: calc(90vh - 220px);
  overflow-y: auto;
  padding-bottom: 0.5rem;
}

.student-profile-drawer.fullscreen .student-profile-staff-tab-panel {
  max-height: calc(100vh - 220px);
}

.tab-panel {
  animation: fadeInTab 0.3s ease;
}

@keyframes fadeInTab {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Overview Section */
.overview-section {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.section-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary-blue);
  margin: 0 0 1rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #e0e0e0;
}

/* Student Information Section */
.info-section {
  background: #f8f9fa;
  padding: 1.5rem;
  border-radius: 12px;
  border: 1px solid #e0e0e0;
}

/* Clinical Screeners - Latest Results */
.screener-latest-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

@media (max-width: 720px) {
  .screener-latest-grid {
    grid-template-columns: 1fr;
  }
}

.screener-card {
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.screener-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.screener-card-title-centered {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.screener-card-title {
  font-weight: 800;
  color: var(--primary-blue);
  font-size: 1.5rem;
  line-height: 1.2;
}

.screener-card-subtitle {
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.screener-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.screener-card-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.screener-card-row--wrap {
  align-items: flex-start;
}

.screener-card--hrsn-severe {
  border-color: #c62828;
  box-shadow: 0 0 0 1px rgba(198, 40, 40, 0.15);
}

.screener-card--hrsn-clickable {
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.screener-card--hrsn-clickable:hover {
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.12);
}

.screener-card--hrsn-clickable:focus {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.screener-card-hint {
  font-size: 0.78rem !important;
  color: #2563eb !important;
  font-weight: 600;
  margin-top: 4px;
}

/* HRSN critical alert (staff) — above drawer */
.hrsn-staff-alert-overlay {
  position: fixed;
  inset: 0;
  z-index: 11050;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  animation: fadeIn 0.2s ease;
}

.hrsn-staff-alert-modal {
  background: #fff;
  max-width: 420px;
  width: 100%;
  border-radius: 16px;
  padding: 1.5rem 1.5rem 1.25rem;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
  border: 1px solid #e2e8f0;
}

.hrsn-staff-alert-modal h3 {
  margin: 0 0 0.75rem;
  font-size: 1.15rem;
  color: #b71c1c;
}

.hrsn-staff-alert-lead {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  line-height: 1.45;
  color: #334155;
}

.hrsn-staff-alert-meta {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  color: #64748b;
}

.hrsn-staff-alert-scores {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
  color: #475569;
}

.hrsn-staff-alert-flags-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  margin-bottom: 0.35rem;
}

.hrsn-staff-alert-flags ul {
  margin: 0;
  padding-left: 1.15rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #1e293b;
}

.hrsn-staff-alert-actions {
  margin-top: 1.25rem;
  display: flex;
  justify-content: flex-end;
}

.screener-card-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.screener-card-meta-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.screener-card-meta-label {
  color: var(--text-secondary);
}

.screener-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  border: 1px solid transparent;
  white-space: nowrap;
}

.screener-chip--neutral {
  background: #f3f4f6;
  color: #374151;
  border-color: #e5e7eb;
}

.screener-chip--assigned {
  background: #e8f0fe;
  color: #1d4ed8;
  border-color: #bfdbfe;
}

.screener-chip--completed {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}

/* Severity tones */
.screener-chip--good {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}

.screener-chip--mild {
  background: #fffbeb;
  color: #92400e;
  border-color: #fde68a;
}

.screener-chip--moderate {
  background: #fff7ed;
  color: #9a3412;
  border-color: #fdba74;
}

.screener-chip--severe {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.info-item.full-width {
  grid-column: 1 / -1;
}

.appointment-context {
  background: #e8f0fe;
  border-left: 4px solid #4285f4;
  padding: 1.5rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
}

.appointment-context .section-title {
  color: #4285f4;
  margin-bottom: 1rem;
}

.notes-text {
  background: white;
  padding: 0.75rem;
  border-radius: 6px;
  border: 1px solid #e0e0e0;
  white-space: pre-wrap;
  word-wrap: break-word;
  line-height: 1.5;
}

.status-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: capitalize;
}

.status-badge.status-pending {
  background: #fff3cd;
  color: #856404;
}

.status-badge.status-scheduled {
  background: #d1ecf1;
  color: #0c5460;
}

.status-badge.status-completed {
  background: #d4edda;
  color: #155724;
}

.status-badge.status-cancelled {
  background: #f8d7da;
  color: #721c24;
}

.appointment-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 2px solid #4285f4;
}

.btn-approve,
.btn-reject {
  flex: 1;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-approve {
  background: #28a745;
  color: white;
}

.btn-approve:hover {
  background: #218838;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
}

.btn-reject {
  background: #dc3545;
  color: white;
}

.btn-reject:hover {
  background: #c82333;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
}

.btn-approve:active,
.btn-reject:active {
  transform: translateY(0);
}

.info-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.info-value {
  font-size: 0.95rem;
  color: var(--primary-blue);
  font-weight: 500;
}

/* Metrics Section */
.metrics-section {
  background: white;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.85rem;
}

.metric-card {
  background: #f8f9fa;
  padding: 1rem 1.1rem;
  border-radius: 12px;
  border: 1px solid #e0e0e0;
  transition: all 0.2s ease;
}

.metric-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.metric-card.primary {
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue) 100%);
  color: white;
  border: none;
}

.metric-card.primary .metric-label,
.metric-card.primary .metric-sentiment {
  color: rgba(255, 255, 255, 0.9);
}

.metric-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.metrics-grid .metric-value-large {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary-blue);
  margin: 0.4rem 0;
  line-height: 1;
}

.metric-card.primary .metric-value-large {
  color: white;
}

.metric-sentiment {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-top: 0.5rem;
  font-style: italic;
}

.metric-details {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.metric-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid #e0e0e0;
}

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

.metrics-grid .metric-name {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* Scoped to beat the globally-loaded .metric-number rule from StudentMetricDetailPopup.css */
.metrics-grid .metric-number {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--primary-blue);
  text-align: right;
}

.draggable-notes-container {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  border: 2px solid var(--primary-blue);
  user-select: none;
  z-index: 10;
}

.draggable-notes-container.dragging {
  z-index: 20;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.notes-drag-handle {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: #f8f9fa;
  border-radius: 8px;
  margin-bottom: 1rem;
  cursor: grab;
  border: 2px dashed #e0e0e0;
  transition: all 0.2s;
}

.notes-drag-handle:hover {
  background: #e9ecef;
  border-color: var(--primary-blue);
}

.notes-drag-handle:active {
  cursor: grabbing;
}

.drag-icon {
  font-size: 1.2rem;
  color: var(--text-secondary);
  font-weight: bold;
  letter-spacing: -2px;
}

.drag-hint {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-style: italic;
  flex: 1;
}

.tab-header-actions {
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: flex-end;
}

.btn-primary {
  background: var(--primary-blue);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s;
}

.btn-primary:hover {
  background: #4a3428;
  transform: translateY(-2px);
}

/* Notes Section */
.notes-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.note-item {
  background: white;
  padding: 1.25rem;
  border-radius: 12px;
  border: 1px solid #e0e0e0;
  border-left: 4px solid var(--primary-blue);
  transition: all 0.2s ease;
}

.note-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateX(4px);
}

.note-header, .intervention-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.note-text, .intervention-description {
  color: var(--text-primary);
  line-height: 1.6;
  margin: 0.5rem 0;
}

.intervention-type {
  font-weight: 600;
  color: var(--primary-blue);
}

.intervention-status {
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

.intervention-status.active {
  background: #fff3cd;
  color: #856404;
}

.intervention-status.completed {
  background: #d4edda;
  color: #155724;
}

.intervention-outcome {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #e0e0e0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.activity-timeline {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.timeline-item {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid var(--primary-blue);
}

.timeline-time {
  font-size: 0.85rem;
  color: var(--text-secondary);
  min-width: 150px;
}

.timeline-content {
  flex: 1;
}

.timeline-action {
  display: inline-block;
  background: var(--primary-blue);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.timeline-summary {
  margin: 0.5rem 0;
  color: var(--text-primary);
}

.timeline-actor {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.no-items {
  text-align: center;
  padding: 2rem;
  color: var(--text-muted);
}

.drawer-loading {
  text-align: center;
  padding: 2rem;
  color: var(--text-secondary);
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
}

.modal-content {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  animation: slideUp 0.3s ease;
}

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

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.modal-header h3 {
  margin: 0;
  color: var(--primary-blue);
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s;
}

.modal-close:hover {
  background: #e0e0e0;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--text-primary);
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 0.9rem;
  font-family: inherit;
}

.form-group textarea {
  resize: vertical;
}

.modal-textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 0.9rem;
  font-family: inherit;
  resize: vertical;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 1.5rem;
}

.btn-secondary {
  background: #e0e0e0;
  color: var(--text-primary);
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s;
}

.btn-secondary:hover {
  background: #d0d0d0;
}

/* Trends Section */
.trends-section {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.trend-chart-container {
  background: white;
  border-radius: 12px;
  border: 1px solid #e0e0e0;
  overflow: hidden;
}

.trend-chart-placeholder {
  padding: 1.5rem;
}

.chart-label {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  text-align: center;
  font-weight: 600;
}

.trend-data {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.trend-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  background: #f8f9fa;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.trend-item:hover {
  background: #e9ecef;
}

.trend-date {
  font-size: 0.85rem;
  color: var(--text-secondary);
  min-width: 80px;
  font-weight: 500;
}

.trend-bar-container {
  flex: 1;
  height: 24px;
  background: #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.trend-bar {
  height: 100%;
  border-radius: 12px;
  transition: width 0.3s ease;
  min-width: 4px;
}

.trend-value {
  font-weight: 600;
  color: var(--primary-blue);
  min-width: 40px;
  text-align: right;
  font-size: 0.9rem;
}

.no-data-message {
  text-align: center;
  padding: 3rem 2rem;
  background: #f8f9fa;
  border-radius: 12px;
  border: 1px solid #e0e0e0;
}

.no-data-message p {
  margin: 0.5rem 0;
  color: var(--text-secondary);
}

.no-data-subtitle {
  font-size: 0.85rem;
  color: var(--text-muted) !important;
}

.add-student-modal {
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
}

.add-student-modal .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.add-student-modal .form-group {
  margin-bottom: 1.5rem;
}

.add-student-modal .form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.9rem;
}

.add-student-modal .form-group input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 0.9rem;
  font-family: inherit;
  transition: border-color 0.2s;
}

.add-student-modal .form-group input:focus {
  outline: none;
  border-color: var(--primary-blue);
}

.add-student-modal .form-hint {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
  display: block;
}

.add-student-modal .error-message {
  background: #fee;
  color: #c33;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  border: 1px solid #fcc;
  font-size: 0.9rem;
}

@media (max-width: 600px) {
  .add-student-modal .form-row {
    grid-template-columns: 1fr;
  }
}

.chart-container {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.chart-container:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.chart-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 1rem;
  transition: color 0.3s ease;
}

.chart-container:hover .chart-title {
  color: var(--primary-blue);
}

.admin-dashboard {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #FEFEFE 0%, #FAF8F5 50%, #F5F7FA 100%);
}

.dashboard-layout {
  display: flex;
  flex: 1;
  align-items: stretch;
  min-height: calc(100vh - 80px);
  width: 100%;
}

.dashboard-content {
  flex: 1;
  padding: 2rem;
  width: 100%;
  animation: fadeIn 0.5s ease-in;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* School Branding Section */
.school-branding-section {
  background: white;
  border-radius: 12px;
  padding: 2.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  text-align: center;
  border: 1px solid rgba(74, 144, 226, 0.1);
}

.school-branding-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.school-branding-icon {
  width: 80px;
  height: 80px;
  border-radius: 12px;
  object-fit: cover;
  border: 3px solid rgba(74, 144, 226, 0.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.school-branding-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.school-branding-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--primary-blue);
  margin: 0;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 8px rgba(74, 144, 226, 0.2);
}

.school-branding-subtitle {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin: 0;
  opacity: 0.9;
}

.school-branding-section::after {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--primary-blue), transparent);
  margin-top: 2rem;
  opacity: 0.6;
}

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

.dashboard-main {
  width: 100%;
  margin: 0;
}

.dashboard-main-overview {
  display: grid;
  grid-template-columns: 1fr; /* Full width (right panel removed) */
  gap: 2rem;
  width: 100%;
  margin: 0;
  align-items: start;
  box-sizing: border-box;
}

.overview-section {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.2s ease;
  width: 100%;
}

.overview-section:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.analytics-trends-section {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding: 1rem;
}

.analytics-trends-section .section-header {
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
}

.analytics-trends-section .section-header h2 {
  font-size: 1.25rem;
}

.analytics-trends-section .chart-container {
  padding: 0.75rem;
}

.overview-section:first-child {
  grid-column: 1 / -1; /* still full width */
}

.section-header {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #e0e0e0;
}

.section-header h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-blue);
  margin: 0 0 0.5rem 0;
}

.section-note {
  font-size: 0.875rem;
  color: var(--text-secondary);
  font-style: italic;
  margin: 0;
}

.right-panel-section {
  grid-column: 2; /* Right panel in second column */
  position: sticky;
  top: 2rem;
  align-self: start;
  height: fit-content;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

.charts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  width: 100%;
}

.charts-grid-main {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  width: 100%;
}

.chart-wrapper {
  background: white;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  min-height: 350px;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 1200px) {
  .dashboard-main-overview {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .overview-section:first-child,
  .overview-section:nth-child(2),
  .right-panel-section {
    grid-column: 1;
  }
  
  .charts-grid {
    grid-template-columns: 1fr;
  }
  
  .right-panel-section {
    position: static;
    max-height: none;
  }
}

@media (max-width: 768px) {
  .dashboard-content {
    padding: 1rem;
  }
  
  .dashboard-main-overview {
    gap: 1rem;
  }
  
  .overview-section {
    padding: 1rem;
  }
}

.dashboard-main-single {
  width: 100%;
  margin: 0;
}

.main-col {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.top-panel {
  width: 100%;
}

.charts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.chart-wrapper {
  background: white;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.right-panel {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.view-toggle {
  display: flex;
  gap: 0.5rem;
  background: #e0e0e0;
  padding: 0.25rem;
  border-radius: 8px;
}

.view-toggle button {
  padding: 0.5rem 1.5rem;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  color: var(--text-secondary);
  transition: all 0.2s;
}

.view-toggle button.active {
  background: var(--primary-blue);
  color: white;
}

.view-toggle button:hover {
  background: #d0d0d0;
  color: var(--primary-blue);
}

.view-toggle button.active:hover {
  background: var(--primary-blue);
  color: white;
}

.dashboard-header-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #e0e0e0;
  flex-wrap: wrap;
  gap: 1rem;
}

.header-buttons {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.btn-refresh {
  background: #f5f5f5;
  color: var(--primary-blue);
  border: 2px solid #e0e0e0;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-refresh:hover {
  background: #e8e8e8;
  border-color: var(--primary-blue);
  transform: translateY(-2px);
}

.dashboard-header-actions h1 {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--primary-blue);
  margin: 0;
}

.btn-add-student {
  background: var(--primary-blue);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-add-student:hover {
  background: var(--primary-blue);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.notification-banner {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.notification-banner-content {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.notification-banner-icon {
  font-size: 1.5rem;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.notification-banner-text {
  flex: 1;
  font-size: 1rem;
  font-weight: 500;
}

.notification-banner-text strong {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0.25rem;
}

.notification-banner-button {
  background: white;
  color: #667eea;
  border: none;
  padding: 0.5rem 1.25rem;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.95rem;
}

.notification-banner-button:hover {
  background: #f0f0f0;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.notification-banner-button:active {
  transform: translateY(0);
}

.error-banner {
  position: fixed;
  top: 70px;
  right: 20px;
  background: #ff5722;
  color: white;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 999;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.hrsn-flags-dashboard-card {
  margin-bottom: 1.25rem;
}

.hrsn-flags-dashboard-card-inner {
  background: #fff;
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.hrsn-flags-dashboard-card-title {
  margin: 0 0 0.35rem;
  font-size: 1.1rem;
  color: #0f172a;
}

.hrsn-flags-dashboard-card-text {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #64748b;
  max-width: 36rem;
}

.hrsn-flags-dashboard-card-btn {
  font-weight: 600;
}

.risk-level-info-root {
  position: fixed;
  inset: 0;
  z-index: 1100;
  pointer-events: none;
}

.risk-level-info-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
  pointer-events: auto;
  animation: risk-level-info-fade 0.2s ease;
}

.risk-level-info-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100vw);
  background: #fff;
  box-shadow: -8px 0 28px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  animation: risk-level-info-slide 0.25s ease;
}

.risk-level-info-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.25rem 1rem;
  border-bottom: 1px solid #e5e7eb;
}

.risk-level-info-header h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: #0f172a;
}

.risk-level-info-subtitle {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  color: #64748b;
}

.risk-level-info-close {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 8px;
  background: #f1f5f9;
  color: #334155;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.risk-level-info-close:hover {
  background: #e2e8f0;
}

.risk-level-info-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
}

.risk-level-info-section + .risk-level-info-section {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #f1f5f9;
}

.risk-level-info-section h3 {
  margin: 0 0 0.65rem;
  font-size: 0.95rem;
  font-weight: 650;
  color: #0f172a;
}

.risk-level-info-section p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #475569;
}

.risk-level-tier-list,
.risk-level-factor-list {
  list-style: none;
  margin: 0.85rem 0 0;
  padding: 0;
}

.risk-level-tier-item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.75rem 0;
}

.risk-level-tier-item + .risk-level-tier-item {
  border-top: 1px solid #f1f5f9;
}

.risk-level-tier-badge {
  flex-shrink: 0;
  min-width: 5.5rem;
  text-align: center;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 650;
}

.risk-level-tier-range {
  font-size: 0.88rem;
  font-weight: 600;
  color: #0f172a;
}

.risk-level-tier-detail {
  margin-top: 0.2rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: #64748b;
}

.risk-level-factor-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.88rem;
  color: #334155;
}

.risk-level-factor-list li:last-child {
  border-bottom: none;
}

.risk-level-factor-weight {
  font-weight: 650;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}

@keyframes risk-level-info-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes risk-level-info-slide {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

[data-theme='dark'] .risk-level-info-panel {
  background: #1e293b;
  box-shadow: -8px 0 28px rgba(0, 0, 0, 0.45);
}

[data-theme='dark'] .risk-level-info-header {
  border-bottom-color: #334155;
}

[data-theme='dark'] .risk-level-info-header h2,
[data-theme='dark'] .risk-level-info-section h3,
[data-theme='dark'] .risk-level-tier-range,
[data-theme='dark'] .risk-level-factor-weight {
  color: #f8fafc;
}

[data-theme='dark'] .risk-level-info-subtitle,
[data-theme='dark'] .risk-level-tier-detail {
  color: #94a3b8;
}

[data-theme='dark'] .risk-level-info-section p,
[data-theme='dark'] .risk-level-factor-list li {
  color: #cbd5e1;
}

[data-theme='dark'] .risk-level-info-close {
  background: #334155;
  color: #e2e8f0;
}

[data-theme='dark'] .risk-level-info-close:hover {
  background: #475569;
}

[data-theme='dark'] .risk-level-info-section + .risk-level-info-section,
[data-theme='dark'] .risk-level-tier-item + .risk-level-tier-item,
[data-theme='dark'] .risk-level-factor-list li {
  border-color: #334155;
}
.student-triage-table {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  height: 100%;
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.table-title-section {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.table-header h2 {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.student-count-badge {
  font-size: 0.875rem;
  color: var(--text-secondary);
  font-weight: 500;
  padding: 0.25rem 0.75rem;
  background: #f5f5f5;
  border-radius: 12px;
}

.table-filters {
  display: flex;
  gap: 1rem;
}

.filter-select {
  padding: 0.5rem 1rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 0.9rem;
  background: white;
  cursor: pointer;
}

.table-container {
  overflow-x: auto;
  flex: 1;
}

.student-triage-table table {
  width: 100%;
  border-collapse: collapse;
}

.student-triage-table th {
  text-align: left;
  padding: 0.75rem 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 2px solid #e0e0e0;
  background: #f8f9fa;
}

.th-with-info {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.risk-level-info-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  padding: 0;
  border: 1.5px solid #64748b;
  border-radius: 50%;
  background: transparent;
  color: #475569;
  font-size: 0.7rem;
  font-weight: 700;
  font-style: italic;
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
}

.risk-level-info-trigger:hover,
.risk-level-info-trigger:focus-visible {
  border-color: var(--primary-blue, #1976d2);
  color: var(--primary-blue, #1976d2);
  background: rgba(25, 118, 210, 0.08);
  outline: none;
}

.student-triage-table td {
  padding: 1rem 0.5rem;
  font-size: 0.9rem;
  border-bottom: 1px solid #f0f0f0;
}

.student-row {
  cursor: pointer;
  transition: all 0.3s ease;
}

.student-row:hover {
  background-color: #f8f9fa;
  transform: translateX(3px);
}

.student-name {
  font-weight: 500;
  color: var(--primary-blue);
}

.student-name-cell {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.student-avatar-small {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--primary-blue);
  flex-shrink: 0;
}

.student-avatar-placeholder {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-blue), var(--primary-blue));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.student-name-text {
  flex: 1;
}

.risk-badge {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border-radius: 12px;
  color: white;
  font-size: 0.85rem;
  font-weight: 700;
}

.wellness-score {
  font-weight: 600;
  color: var(--primary-blue);
}

.no-data {
  text-align: center;
  padding: 2rem;
  color: var(--text-muted);
}

.triage-table-loading {
  text-align: center;
  padding: 2rem;
  color: var(--text-secondary);
}


/* Night mode */
[data-theme='dark'] .student-triage-table {
  background: #1a2332 !important;
  color: #fff !important;
  box-shadow: none !important;
}
[data-theme='dark'] .student-triage-table h2,
[data-theme='dark'] .student-triage-table td,
[data-theme='dark'] .student-triage-table th {
  color: #fff !important;
}
[data-theme='dark'] .student-triage-table th,
[data-theme='dark'] .filter-select,
[data-theme='dark'] .student-count-badge {
  background: #243044 !important;
  border-color: #4a5f78 !important;
  color: #fff !important;
}
.admin-students-page {
  min-height: 100vh;
  background: #f5f5f5;
}

.dashboard-layout {
  display: flex;
  min-height: calc(100vh - 60px);
  width: 100%;
}

.dashboard-content {
  flex: 1;
  padding: 2rem;
  width: 100%;
  animation: fadeIn 0.5s ease-in;
  box-sizing: border-box;
  overflow-x: hidden;
}

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

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #e0e0e0;
  flex-wrap: wrap;
  gap: 1rem;
}

.page-header h1 {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--primary-blue);
  margin: 0;
}

.header-buttons {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.btn-refresh {
  background: #f5f5f5;
  color: var(--primary-blue);
  border: 2px solid #e0e0e0;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-refresh:hover {
  background: #e8e8e8;
  border-color: var(--primary-blue);
  transform: translateY(-2px);
}

.btn-add-student {
  background: var(--primary-blue);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-add-student:hover {
  background: var(--primary-blue);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.search-bar-container {
  margin-bottom: 1.5rem;
}

.search-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: white;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  border: 2px solid #e0e0e0;
  transition: all 0.2s ease;
}

.search-bar:focus-within {
  border-color: var(--primary-blue);
  box-shadow: 0 2px 8px var(--border-light);
}

.search-icon {
  font-size: 1.25rem;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 1rem;
  color: var(--text-primary);
  background: transparent;
}

.search-input::placeholder {
  color: var(--text-muted);
}

.search-clear {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.search-clear:hover {
  background: #f5f5f5;
  color: var(--primary-blue);
}

.students-main {
  width: 100%;
  margin: 0;
}

.error-banner {
  position: fixed;
  top: 70px;
  right: 20px;
  background: #ff5722;
  color: white;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 999;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.appointment-calendar {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pending-requests-banner {
  background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
  color: white;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.pending-requests-content {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
}

.pending-icon {
  font-size: 1.5rem;
}

.pending-text {
  flex: 1;
  font-weight: 600;
}

.btn-primary.small {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  background: white;
  color: #ff9800;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-primary.small:hover {
  background: #f0f0f0;
  transform: translateY(-2px);
}

.calendar-sync-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-right: 1rem;
}

.sync-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: #666;
}

.sync-toggle input[type="checkbox"] {
  cursor: pointer;
}

.calendar-type-select {
  padding: 0.5rem 1rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 0.9rem;
  cursor: pointer;
}

.pending-requests-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: 400px;
  overflow-y: auto;
}

.pending-request-item {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 1.25rem;
  border-left: 4px solid #ff9800;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.request-info {
  flex: 1;
}

.request-student {
  font-size: 1.1rem;
  color: #333;
  margin-bottom: 0.5rem;
}

.request-details {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.9rem;
  color: #666;
}

.request-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pending-requests-intro {
  margin: 0 0 1rem;
  font-size: 0.92rem;
  color: #555;
  line-height: 1.45;
}

.pending-request-notes {
  margin: 0.5rem 0 0;
  font-size: 0.82rem;
  color: #666;
  max-height: 4.5rem;
  overflow: auto;
}

.appointment-cbo-pill {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(100, 156, 228, 0.18);
  color: var(--brand-blue-deep, #2e74b5);
}

.appointment-cbo-banner {
  margin: 0 0 1rem;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  border: 1px solid rgba(100, 156, 228, 0.4);
  background: var(--brand-blue-bg-start, #e8f4fc);
  color: #1e3a5f;
  font-size: 0.9rem;
  line-height: 1.4;
}

.appointment-modal-actions--wrap {
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.calendar-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.calendar-btn {
  padding: 0.5rem 1rem;
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s;
}

.calendar-btn:hover {
  background: #e0e0e0;
}

.calendar-title {
  margin: 0 1rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-blue);
}

.calendar-view-selector {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.view-btn {
  padding: 0.5rem 1rem;
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s;
}

.view-btn:hover {
  background: #e0e0e0;
}

.view-btn.active {
  background: var(--primary-blue);
  color: white;
  border-color: var(--primary-blue);
}

.add-appointment-btn {
  padding: 0.5rem 1rem;
  background: #2196f3;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.2s;
  margin-left: 0.5rem;
}

.add-appointment-btn:hover {
  background: #1976d2;
  transform: translateY(-2px);
}

/* Month View */
.calendar-month-view {
  width: 100%;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.weekday-header {
  padding: 0.75rem;
  text-align: center;
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.5rem;
}

.calendar-day {
  min-height: 100px;
  padding: 0.5rem;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  background: white;
}

.calendar-day:hover {
  background: #f5f5f5;
  border-color: var(--primary-blue);
}

.calendar-day.empty {
  background: transparent;
  border: none;
  cursor: default;
}

.calendar-day.other-month {
  opacity: 0.4;
}

.calendar-day.today {
  background: #e3f2fd;
  border-color: #2196f3;
  border-width: 2px;
}

.day-number {
  font-weight: 600;
  color: var(--primary-blue);
  margin-bottom: 0.5rem;
}

.day-appointments {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.appointment-badge {
  padding: 0.25rem 0.5rem;
  background: #2196f3;
  color: white;
  border-radius: 4px;
  font-size: 0.75rem;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.appointment-badge:hover {
  background: #1976d2;
}

.more-appointments {
  font-size: 0.7rem;
  color: var(--text-secondary);
  font-style: italic;
}

/* Week View */
.calendar-week-view {
  width: 100%;
}

.week-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.5rem;
}

.week-day-column {
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  min-height: 400px;
  background: white;
}

.week-day-column.today {
  background: #e3f2fd;
  border-color: #2196f3;
}

.week-day-header {
  padding: 0.75rem;
  text-align: center;
  border-bottom: 1px solid #e0e0e0;
  background: #f8f9fa;
}

.week-day-name {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 600;
}

.week-day-number {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--primary-blue);
  margin-top: 0.25rem;
}

.week-day-appointments {
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.week-appointment-item {
  padding: 0.5rem;
  background: #2196f3;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
}

.week-appointment-item:hover {
  background: #1976d2;
}

.appointment-time {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.appointment-student {
  font-size: 0.8rem;
  opacity: 0.9;
}

.appointment-type {
  font-size: 0.75rem;
  opacity: 0.8;
  margin-top: 0.25rem;
}

/* Day View */
.calendar-day-view {
  width: 100%;
}

.day-view-header {
  padding: 1rem;
  border-bottom: 2px solid #e0e0e0;
  margin-bottom: 1rem;
}

.day-view-header h3 {
  margin: 0;
  font-size: 1.5rem;
  color: var(--primary-blue);
}

.day-view-timeline {
  display: flex;
  flex-direction: column;
}

.timeline-hour {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #f0f0f0;
}

.hour-label {
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.hour-slot {
  position: relative;
  min-height: 60px;
}

.day-appointment-item {
  padding: 0.75rem;
  background: #2196f3;
  color: white;
  border-radius: 6px;
  margin-bottom: 0.5rem;
  cursor: pointer;
}

.day-appointment-item:hover {
  background: #1976d2;
}

.appointment-duration {
  font-size: 0.8rem;
  opacity: 0.9;
  margin-top: 0.25rem;
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
}

.appointment-modal {
  max-width: 600px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #e0e0e0;
}

.modal-header h3 {
  margin: 0;
  font-size: 1.5rem;
  color: var(--primary-blue);
}

.modal-close {
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  color: var(--text-secondary);
  line-height: 1;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  color: var(--primary-blue);
}

.modal-body {
  margin-bottom: 1.5rem;
}

.appointment-detail-item {
  margin-bottom: 1rem;
}

.appointment-detail-item strong {
  color: var(--primary-blue);
  display: inline-block;
  min-width: 120px;
}

.appointment-detail-item p {
  margin: 0.5rem 0 0 0;
  color: var(--text-secondary);
}

.status-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: capitalize;
}

.status-badge.status-scheduled {
  background: #e3f2fd;
  color: #1976d2;
}

.status-badge.status-completed {
  background: #e8f5e9;
  color: #2e7d32;
}

.status-badge.status-cancelled {
  background: #ffebee;
  color: #c62828;
}

.status-badge.status-no-show {
  background: #f3e5f5;
  color: #6a1b9a;
}

.status-badge.status-in-progress {
  background: #fff3e0;
  color: #ef6c00;
}

.appointment-status-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.appointment-status-label {
  font-weight: 600;
  color: var(--text-secondary);
}

.appointment-status-select {
  padding: 0.5rem 0.75rem;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: white;
  font-weight: 600;
}

.modal-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
}

.btn-primary {
  padding: 0.75rem 1.5rem;
  background: var(--primary-blue);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-primary:hover {
  background: var(--primary-blue);
  transform: translateY(-2px);
}

.btn-secondary {
  padding: 0.75rem 1.5rem;
  background: #e0e0e0;
  color: var(--text-primary);
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-secondary:hover {
  background: #d0d0d0;
}

/* Office Hours Modal */
.office-hours-modal {
  max-width: 720px;
}

.office-hours-help {
  margin: 0 0 1rem 0;
  color: var(--text-secondary);
}

.office-hours-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.office-hours-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  background: #fafafa;
}

.office-hours-day {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--text-primary);
}

.office-hours-times {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.office-hours-times input[type="time"] {
  padding: 0.5rem 0.6rem;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}

.office-hours-to {
  color: var(--text-secondary);
}

.office-hours-btn {
  margin-right: 0.5rem;
}

/* Form Styles */
.appointment-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  font-weight: 600;
  color: var(--primary-blue);
  font-size: 0.9rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 0.75rem;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary-blue);
}

@media (max-width: 768px) {
  .calendar-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .calendar-view-selector {
    width: 100%;
    flex-wrap: wrap;
  }

  .calendar-grid {
    gap: 0.25rem;
  }

  .calendar-day {
    min-height: 80px;
    padding: 0.25rem;
  }

  .week-header {
    grid-template-columns: 1fr;
  }
}

.appointments-page {
  min-height: 100vh;
  background: #f5f5f5;
}

.dashboard-layout {
  display: flex;
  min-height: calc(100vh - 60px);
  width: 100%;
}

.dashboard-content {
  flex: 1;
  padding: 2rem;
  width: 100%;
  animation: fadeIn 0.5s ease-in;
  box-sizing: border-box;
  overflow-x: hidden;
}

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

.page-header {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #e0e0e0;
}

.page-header h1 {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--primary-blue);
  margin: 0 0 0.5rem 0;
}

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

.appointments-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid #e0e0e0;
}

.tab-btn {
  padding: 0.75rem 1.5rem;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-secondary);
  transition: all 0.2s;
  margin-bottom: -2px;
}

.tab-btn:hover {
  color: var(--primary-blue);
  background: #f5f5f5;
}

.tab-btn.active {
  color: var(--primary-blue);
  border-bottom-color: var(--primary-blue);
}

.appointments-content {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* History Styles */
.appointment-history {
  width: 100%;
}

.history-filters {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.filter-select,
.filter-date {
  padding: 0.5rem 1rem;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 0.9rem;
  background: white;
}

.history-status-select {
  margin-left: 0.5rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 0.85rem;
  background: white;
}

.history-empty {
  padding: 1rem;
  color: var(--text-secondary);
}

.filter-select:focus,
.filter-date:focus {
  outline: none;
  border-color: var(--primary-blue);
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.history-item {
  padding: 1.5rem;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #2196f3;
  transition: all 0.2s;
}

.history-item:hover {
  background: #e9ecef;
  transform: translateX(4px);
}

.history-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.history-student-name {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--primary-blue);
}

.history-status {
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: capitalize;
}

.history-status.status-completed {
  background: #e8f5e9;
  color: #2e7d32;
}

.history-status.status-scheduled {
  background: #e3f2fd;
  color: #1976d2;
}

.history-status.status-pending {
  background: #fff3e0;
  color: #ef6c00;
}

.history-status.status-in-progress {
  background: #fff3e0;
  color: #ef6c00;
}

.history-status.status-missed {
  background: #f3e5f5;
  color: #6a1b9a;
}

.history-status.status-cancelled {
  background: #ffebee;
  color: #c62828;
}

.history-item-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.history-detail {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.history-detail strong {
  color: var(--primary-blue);
  margin-right: 0.5rem;
}

.history-notes {
  padding: 1rem;
  background: white;
  border-radius: 6px;
  font-size: 0.9rem;
  color: var(--text-secondary);
  border-left: 3px solid #ff9800;
}

.history-notes strong {
  color: var(--primary-blue);
  display: block;
  margin-bottom: 0.5rem;
}

@media (max-width: 768px) {
  .history-filters {
    flex-direction: column;
  }

  .filter-select,
  .filter-date {
    width: 100%;
  }

  .history-item-details {
    grid-template-columns: 1fr;
  }
}

.multi-student-picker {
  width: 100%;
}

.msp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.msp-chips-empty {
  color: #666;
  font-size: 0.95rem;
}

.msp-chip {
  border: 1px solid #e0e0e0;
  background: #f7f7f7;
  color: #333;
  border-radius: 999px;
  padding: 0.35rem 0.6rem;
  cursor: pointer;
  font-weight: 600;
}

.msp-chip:hover {
  background: #eee;
}

.msp-chip-x {
  margin-left: 0.35rem;
  font-weight: 900;
}

.msp-toolbar {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.msp-search {
  flex: 1;
  min-width: 220px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  outline: none;
}

.msp-search:focus {
  border-color: var(--primary-blue);
}

.msp-btn {
  background: #f5f5f5;
  color: var(--primary-blue);
  border: 1px solid #e0e0e0;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
}

.msp-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.msp-list {
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  max-height: 260px;
  overflow: auto;
  padding: 0.25rem;
  background: #fff;
}

.msp-item {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  cursor: pointer;
}

.msp-item:hover {
  background: #f7faff;
}

.msp-item.checked {
  background: #eef5ff;
}

.msp-item-label {
  font-weight: 600;
  color: #333;
}

.msp-item-meta {
  color: #666;
  font-size: 0.9rem;
}

.msp-empty {
  padding: 0.75rem;
  color: #666;
}


.metric-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.2s ease-in;
}

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

.metric-popup-content {
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUp 0.3s ease-out;
}

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

.metric-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 2px solid #e0e0e0;
}

.metric-popup-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--primary-blue, #2196f3);
}

.metric-popup-close {
  background: none;
  border: none;
  font-size: 2rem;
  color: #666;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.metric-popup-close:hover {
  background: #f0f0f0;
  color: #333;
}

.metric-popup-body {
  padding: 1.5rem;
}

.metric-popup-date {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  font-size: 1rem;
  color: #666;
}

.calendar-icon {
  font-size: 1.2rem;
}

.metric-popup-metric {
  background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.metric-label {
  font-size: 0.875rem;
  color: #666;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.metric-value-display {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.metric-number {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--primary-blue, #2196f3);
}

.metric-word {
  font-size: 1.25rem;
  font-weight: 500;
  color: #666;
  font-style: italic;
}

.metric-popup-info {
  margin-top: 1rem;
}

.metric-popup-note {
  font-size: 0.875rem;
  color: #666;
  line-height: 1.5;
  margin: 0;
  padding: 1rem;
  background: #f9f9f9;
  border-radius: 6px;
  border-left: 3px solid var(--primary-blue, #2196f3);
}

.metric-popup-actions {
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  border-top: 2px solid #e0e0e0;
  justify-content: flex-end;
}

.btn-view-profile {
  background: var(--primary-blue, #2196f3);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-view-profile:hover {
  background: #1976d2;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(33, 150, 243, 0.3);
}

.btn-close-popup {
  background: #f5f5f5;
  color: #666;
  border: 1px solid #ddd;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-close-popup:hover {
  background: #e0e0e0;
  color: #333;
}

@media (max-width: 768px) {
  .metric-popup-content {
    width: 95%;
    max-height: 85vh;
  }

  .metric-popup-header {
    padding: 1rem;
  }

  .metric-popup-title {
    font-size: 1.25rem;
  }

  .metric-popup-body {
    padding: 1rem;
  }

  .metric-value-display {
    flex-direction: column;
    gap: 0.5rem;
  }

  .metric-number {
    font-size: 2rem;
  }

  .metric-popup-actions {
    flex-direction: column;
    padding: 1rem;
  }

  .btn-view-profile,
  .btn-close-popup {
    width: 100%;
  }
}

.date-detail-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 2rem;
  overflow-y: auto;
}

.date-detail-content {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.date-detail-header {
  padding: 1.5rem 2rem;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background: #f9f9f9;
}

.date-detail-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: #333;
}

.date-detail-subtitle {
  margin: 0.5rem 0 0 0;
  font-size: 1rem;
  color: #666;
}

.date-detail-close {
  background: none;
  border: none;
  font-size: 2rem;
  color: #666;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s;
}

.date-detail-close:hover {
  background: #e0e0e0;
  color: #333;
}

.date-detail-body {
  padding: 1.5rem 2rem;
  overflow-y: auto;
  flex: 1;
}

.detail-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.detail-card-title {
  margin: 0 0 1rem 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.card-icon {
  font-size: 1.25rem;
}

.detail-card-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Screener Items */
.screener-item {
  padding: 1rem;
  background: #f9f9f9;
  border-radius: 6px;
  border-left: 3px solid #2196f3;
}

.screener-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.screener-type {
  font-weight: 600;
  color: #1976d2;
  font-size: 1rem;
}

.screener-time {
  font-size: 0.875rem;
  color: #666;
}

.screener-details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.screener-score {
  font-size: 1rem;
  color: #333;
}

.score-max {
  color: #666;
  font-weight: normal;
  margin-left: 0.25rem;
}

.screener-severity {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.severity-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: none;
  white-space: normal;
  line-height: 1.3;
  max-width: 100%;
}

/* Metric Items */
.metric-item {
  padding: 1rem;
  background: #f9f9f9;
  border-radius: 6px;
}

.metric-label {
  font-size: 0.875rem;
  color: #666;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.metric-value {
  font-size: 1.25rem;
  font-weight: 600;
  color: #333;
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}

.metric-unit {
  font-size: 1rem;
  color: #666;
  font-weight: normal;
}

.risk-label {
  font-size: 0.875rem;
  margin-left: 0.5rem;
  font-weight: 700;
}

.metric-label {
  font-size: 0.875rem;
  color: #666;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.metric-note {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: #666;
  font-style: italic;
}

/* Appointment Items */
.appointment-item {
  padding: 1rem;
  background: #f9f9f9;
  border-radius: 6px;
  border-left: 3px solid #4caf50;
}

.appointment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.appointment-time {
  font-weight: 600;
  color: #333;
}

.appointment-status {
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
}

.status-completed {
  background: #4caf50;
  color: #fff;
}

.status-confirmed {
  background: #2196f3;
  color: #fff;
}

.status-pending {
  background: #ff9800;
  color: #fff;
}

.status-cancelled {
  background: #9e9e9e;
  color: #fff;
}

.appointment-details {
  font-size: 0.875rem;
  color: #666;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.appointment-notes {
  margin-top: 0.5rem;
  padding: 0.75rem;
  background: #fff;
  border-radius: 4px;
  font-style: italic;
}

/* Note Items */
.note-item {
  padding: 1rem;
  background: #f9f9f9;
  border-radius: 6px;
  border-left: 3px solid #9c27b0;
}

.note-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.note-author {
  font-weight: 600;
  color: #333;
  font-size: 0.875rem;
}

.note-time {
  font-size: 0.75rem;
  color: #666;
}

.note-content {
  color: #333;
  line-height: 1.6;
  white-space: pre-wrap;
}

/* Symptom Items */
.symptom-item {
  padding: 1rem;
  background: #f9f9f9;
  border-radius: 6px;
  border-left: 3px solid #ff5722;
}

.symptom-type {
  font-weight: 600;
  color: #333;
  margin-bottom: 0.5rem;
}

.symptom-severity {
  font-size: 0.875rem;
  color: #666;
  margin-bottom: 0.5rem;
}

.symptom-notes {
  font-size: 0.875rem;
  color: #666;
  font-style: italic;
}

/* No Data Message */
.no-data-message {
  padding: 2rem;
  text-align: center;
  color: #666;
  font-size: 1rem;
}

/* Actions */
.date-detail-actions {
  padding: 1.5rem 2rem;
  border-top: 1px solid #e0e0e0;
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  background: #f9f9f9;
}

.btn-view-profile {
  padding: 0.75rem 1.5rem;
  background: #2196f3;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-view-profile:hover {
  background: #1976d2;
}

.btn-close-popup {
  padding: 0.75rem 1.5rem;
  background: #fff;
  color: #666;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-close-popup:hover {
  background: #f5f5f5;
  border-color: #bbb;
}

.population-health-page {
  min-height: 100vh;
  background: #f5f7fa;
}

/* Tighter spacing under "Date & student scope" (no instructional paragraph) */
.population-health-page .overview-section.ph-scope-section {
  padding: 1rem 1.25rem 1.25rem;
}

.population-health-page .overview-section.ph-scope-section .section-header {
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e0e0e0;
}

.population-health-page .overview-section.ph-scope-section .section-header h2 {
  margin: 0;
  font-size: 1.35rem;
}

.population-health-page .overview-section.ph-scope-section .ph-scope-date-row {
  margin-top: 0;
}

/* Same tight header + padding as date scope (clinical + wellness blocks) */
.population-health-page .overview-section.ph-section-compact {
  padding: 1rem 1.25rem 1.25rem;
}

.population-health-page .overview-section.ph-section-compact .section-header {
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e0e0e0;
}

.population-health-page .overview-section.ph-section-compact .section-header h2 {
  margin: 0;
  font-size: 1.35rem;
}

/* Collapsible clinical + wellness chart sections (default collapsed) */
.population-health-page .ph-collapsible-section {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.population-health-page .ph-collapsible-header {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  width: 100%;
  margin: 0;
  padding: 0.35rem 0 0.65rem;
  text-align: left;
  background: transparent;
  border: none;
  border-bottom: 1px solid #e0e0e0;
  cursor: pointer;
  border-radius: 0;
  color: inherit;
  font: inherit;
  transition: background 0.15s ease;
}

.population-health-page .ph-collapsible-header:hover {
  background: rgba(74, 144, 226, 0.06);
}

.population-health-page .ph-collapsible-header:focus-visible {
  outline: 2px solid var(--primary-blue, #4a90e2);
  outline-offset: 2px;
}

.population-health-page .ph-collapsible-chevron {
  flex-shrink: 0;
  width: 1.25rem;
  margin-top: 0.2rem;
  font-size: 0.75rem;
  color: #555;
  line-height: 1.2;
}

.population-health-page .ph-collapsible-title-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  min-width: 0;
}

.population-health-page .ph-collapsible-heading {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 600;
  color: #222;
  line-height: 1.25;
}

.population-health-page .ph-collapsible-sub {
  font-size: 0.8rem;
  font-weight: 400;
  color: #666;
  line-height: 1.35;
}

.population-health-page .ph-collapsible-body {
  margin-top: 0.75rem;
  padding-top: 0.25rem;
}

.population-health-page .ph-collapsible-empty-hint {
  padding: 0.25rem 0 0.75rem;
  margin: 0;
  font-size: 0.875rem;
  color: #666;
}

.population-health-page .overview-section.ph-section-compact .charts-grid-main {
  margin-top: 0;
}

.population-health-page .overview-section.ph-section-compact .charts-grid-screener-trends {
  margin-top: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  width: 100%;
}

@media (max-width: 1400px) {
  .population-health-page .overview-section.ph-section-compact .charts-grid-screener-trends {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .population-health-page .overview-section.ph-section-compact .charts-grid-screener-trends {
    grid-template-columns: 1fr;
  }
}

.population-health-tabs {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  border-bottom: 2px solid #e0e0e0;
}

.tab-btn {
  padding: 0.75rem 1.5rem;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: #666;
  transition: all 0.3s ease;
}

.tab-btn:hover {
  color: var(--primary-blue);
  background: rgba(74, 144, 226, 0.05);
}

.tab-btn.active {
  color: var(--primary-blue);
  border-bottom-color: var(--primary-blue);
}

.peer-comparison-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 2rem;
}

.student-selector-panel {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  height: fit-content;
}

.student-selector-panel h2 {
  margin: 0 0 1rem 0;
  font-size: 1.2rem;
  color: var(--primary-blue);
}

.student-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.student-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem;
  background: #f8f9fa;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}

.student-item:hover {
  background: #e9ecef;
  border-color: var(--primary-blue);
}

.student-item.selected {
  background: #e3f2fd;
  border-color: var(--primary-blue);
}

.student-item-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.student-item-name {
  font-weight: 600;
  color: #333;
}

.student-item-grade {
  font-size: 0.85rem;
  color: #666;
}

.risk-badge {
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

.risk-badge.risk-high {
  background: #ffebee;
  color: #c62828;
}

.risk-badge.risk-medium {
  background: #fff3e0;
  color: #e65100;
}

.risk-badge.risk-low {
  background: #e8f5e9;
  color: #2e7d32;
}

.comparison-panel {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.ph-date-range-row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

/* Match Student Dashboard date picker styles */
.date-picker-wrapper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.date-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary-blue);
}

.calendar-icon {
  font-size: 1.25rem;
}

.date-input {
  padding: 0.75rem 1rem;
  border: 2px solid var(--border-medium);
  border-radius: 8px;
  font-size: 1rem;
  color: var(--primary-blue);
  background: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

.date-input:hover {
  border-color: var(--primary-blue);
}

.date-input:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.ph-date-range-sep {
  color: #666;
  font-weight: 600;
}

.no-selection {
  text-align: center;
  padding: 3rem;
  color: #999;
}

.no-students {
  text-align: center;
  padding: 2rem;
  color: #999;
}

@media (max-width: 968px) {
  .peer-comparison-layout {
    grid-template-columns: 1fr;
  }
}

.location-picker {
  width: 100%;
  margin-bottom: 1rem;
}

.location-picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.location-picker-header label {
  font-weight: 600;
  color: #333;
  font-size: 0.9rem;
}

.btn-clear-location {
  padding: 0.5rem 1rem;
  background: #ffebee;
  color: #c62828;
  border: none;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-clear-location:hover {
  background: #ffcdd2;
}

.location-search {
  margin-bottom: 0.75rem;
}

.location-search-input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.location-search-input:focus {
  outline: none;
  border-color: var(--primary-blue, #1976d2);
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

.location-picker-google-note,
.location-picker-osm-note {
  font-size: 0.8rem;
  color: #475569;
  margin: 0 0 0.75rem;
  line-height: 1.4;
  padding: 0.5rem 0.65rem;
  background: #f1f5f9;
  border-radius: 6px;
}

.location-picker-map {
  width: 100%;
  height: 400px;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 0.75rem;
  position: relative;
}

.location-picker-map--google {
  position: relative;
}

.location-picker-map--google > div:first-child {
  height: 100% !important;
  width: 100% !important;
  min-height: 400px;
}

.location-picker-map-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 400px;
  color: #64748b;
  font-size: 0.95rem;
}

.location-search-input--on-map {
  position: absolute !important;
  top: 12px;
  left: 12px;
  right: 12px;
  max-width: 400px;
  z-index: 10;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.location-search-status--overlay {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: #fff;
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  z-index: 10;
}

.location-search--osm {
  position: relative;
}

.location-search-status {
  display: block;
  font-size: 0.75rem;
  color: #64748b;
  margin-top: 0.35rem;
}

.location-search-results {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  position: absolute;
  left: 0;
  right: 0;
  z-index: 500;
}

.location-search-results li {
  margin: 0;
  border-bottom: 1px solid #f1f5f9;
}

.location-search-results li:last-child {
  border-bottom: none;
}

.location-search-results button {
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.75rem;
  border: none;
  background: none;
  font-size: 0.8rem;
  color: #1e293b;
  cursor: pointer;
  line-height: 1.35;
}

.location-search-results button:hover {
  background: #eff6ff;
}

.location-picker-error {
  padding: 2rem;
  background: #ffebee;
  border: 1px solid #ffcdd2;
  border-radius: 8px;
  text-align: center;
  color: #c62828;
}

.location-picker-error p {
  margin: 0.5rem 0;
}

.location-info {
  background: #f5f5f5;
  padding: 0.75rem;
  border-radius: 8px;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.location-coords,
.location-address {
  margin-bottom: 0.5rem;
}

.location-coords:last-child,
.location-address:last-child {
  margin-bottom: 0;
}

.location-coords strong,
.location-address strong {
  color: #333;
  margin-right: 0.5rem;
}

.location-hint {
  padding: 0.75rem;
  background: #e3f2fd;
  border-left: 4px solid #1976d2;
  border-radius: 4px;
  font-size: 0.9rem;
  color: #1565c0;
  text-align: center;
}

.location-picker-fields {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.location-picker-search-row {
  display: flex;
  gap: 0.5rem;
}

.location-picker-search-row .location-search-input {
  flex: 1;
}

.location-picker-search-btn,
.location-picker-apply-btn {
  padding: 0.65rem 1rem;
  background: #0d9488;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.location-picker-search-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.location-picker-coords-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: flex-end;
}

.location-picker-coords-row label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #475569;
  flex: 1;
  min-width: 120px;
}

.location-coord-input {
  padding: 0.5rem 0.65rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 0.95rem;
}

.location-picker-status {
  font-size: 0.85rem;
  color: #475569;
  margin: 0 0 0.5rem;
}

.location-picker-maps-link {
  display: inline-block;
  margin-top: 0.5rem;
  font-weight: 600;
  color: #0d9488;
  text-decoration: none;
}

.location-picker-maps-link:hover {
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
  .location-picker-map {
    height: 300px;
  }
}

/* Modal Overlay */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.modal-content {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  max-width: 700px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}

.add-resource-modal {
  max-width: 900px;
  width: 95%;
}

.add-resource-modal--workflow .modal-header {
  flex-direction: row;
  align-items: flex-start;
  gap: 1rem;
}

.add-resource-modal__subtitle {
  margin: 0.35rem 0 0;
  font-size: 0.875rem;
  color: #64748b;
  font-weight: 400;
}

.add-resource-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 1rem 1.5rem;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.add-resource-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: #94a3b8;
}

.add-resource-step.active {
  color: #1d4ed8;
  font-weight: 600;
}

.add-resource-step.done {
  color: #15803d;
}

.add-resource-step__num {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: #e2e8f0;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
}

.add-resource-step.active .add-resource-step__num {
  background: #2563eb;
  color: #fff;
}

.add-resource-step.done .add-resource-step__num {
  background: #22c55e;
  color: #fff;
}

.add-resource-review {
  background: #f8fafc;
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}

.add-resource-review dl {
  margin: 0;
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 0.5rem 1rem;
  font-size: 0.9rem;
}

.add-resource-review dt {
  margin: 0;
  color: #64748b;
  font-weight: 600;
}

.add-resource-review dd {
  margin: 0;
  color: #0f172a;
}

.add-resource-skip-location {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px dashed #cbd5e1;
}

.add-resource-skip-location__btn {
  flex-shrink: 0;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid #e0e0e0;
}

.modal-header h3 {
  margin: 0;
  font-size: 1.5rem;
  color: #333;
}

.modal-close {
  background: none;
  border: none;
  font-size: 2rem;
  color: #666;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s;
}

.modal-close:hover {
  background: #f5f5f5;
  color: #333;
}

/* Form Styles */
.resource-form {
  padding: 1.5rem;
}

.form-error {
  background: #ffebee;
  border-left: 4px solid #f44336;
  padding: 0.75rem 1rem;
  border-radius: 4px;
  margin-bottom: 1rem;
  color: #c62828;
  font-weight: 500;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #333;
  font-size: 0.9rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary-blue, #1976d2);
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

.form-group textarea {
  resize: vertical;
  min-height: 80px;
}

.form-hint {
  margin-top: 0.25rem;
  font-size: 0.85rem;
  color: #666;
  font-style: italic;
}

.form-checkboxes {
  display: flex;
  gap: 2rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: #f9f9f9;
  border-radius: 8px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-weight: 500;
  color: #333;
}

.checkbox-label input[type="checkbox"] {
  width: auto;
  margin: 0;
  cursor: pointer;
}

.modal-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  padding-top: 1rem;
  border-top: 1px solid #e0e0e0;
  margin-top: 1.5rem;
}

.btn-primary {
  padding: 0.75rem 1.5rem;
  background: var(--primary-blue, #1976d2);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-primary:hover:not(:disabled) {
  background: #1565c0;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-secondary {
  padding: 0.75rem 1.5rem;
  background: #e0e0e0;
  color: #333;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-secondary:hover:not(:disabled) {
  background: #d0d0d0;
}

.btn-secondary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Location Picker Toggle */
.location-picker-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.location-picker-toggle label {
  margin-bottom: 0;
}

.btn-toggle-map {
  padding: 0.5rem 1rem;
  background: #e3f2fd;
  color: #1976d2;
  border: 1px solid #1976d2;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-toggle-map:hover {
  background: #bbdefb;
}

/* Responsive */
@media (max-width: 768px) {
  .form-row {
    grid-template-columns: 1fr;
  }

  .form-checkboxes {
    flex-direction: column;
    gap: 1rem;
  }

  .modal-content {
    max-width: 100%;
    margin: 0;
  }

  .location-picker-toggle {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

.admin-resource-map-page {
  min-height: 100vh;
  background: #f5f5f5;
}

.dashboard-layout {
  display: flex;
  min-height: calc(100vh - 60px);
}

.dashboard-content {
  flex: 1;
  padding: 2rem;
  overflow-y: auto;
}

.page-header {
  margin-bottom: 2rem;
}

.page-title {
  font-size: 2rem;
  font-weight: 700;
  color: #333;
  margin: 0 0 0.5rem 0;
}

.page-subtitle {
  font-size: 1rem;
  color: #666;
  margin: 0;
}

.error-banner {
  background: #ffebee;
  border-left: 4px solid #f44336;
  padding: 1rem;
  border-radius: 4px;
  margin-bottom: 1.5rem;
}

.error-banner p {
  margin: 0;
  color: #c62828;
  font-weight: 500;
}

.success-banner {
  background: #e8f5e9;
  border-left: 4px solid #4caf50;
  padding: 1rem;
  border-radius: 4px;
  margin-bottom: 1.5rem;
}

.success-banner p {
  margin: 0;
  color: #2e7d32;
  font-weight: 500;
}

.map-container-wrapper {
  background: white;
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
  min-height: 600px;
}

.loading-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  color: #666;
}

.resource-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.stat-card {
  background: white;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.stat-value {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--primary-blue, #1976d2);
  margin-bottom: 0.5rem;
}

.stat-label {
  font-size: 0.9rem;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.map-instructions {
  background: white;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.map-instructions h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: #333;
  margin: 0 0 1rem 0;
}

.map-instructions ul {
  margin: 0;
  padding-left: 1.5rem;
  color: #666;
}

.map-instructions li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

/* Responsive Design */
@media (max-width: 768px) {
  .dashboard-content {
    padding: 1rem;
  }

  .page-title {
    font-size: 1.5rem;
  }

  .map-container-wrapper {
    padding: 0.5rem;
    min-height: 400px;
  }

  .resource-stats {
    grid-template-columns: 1fr;
  }
}

/* SDOH Resource Mapping Styles */
.resource-map-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid #e0e0e0;
  padding-bottom: 0.5rem;
}

.tab-button {
  padding: 0.75rem 1.5rem;
  border: none;
  background: transparent;
  color: #666;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all 0.2s;
}

.tab-button:hover {
  color: #1976d2;
  background: #f5f5f5;
}

.tab-button.active {
  color: #1976d2;
  border-bottom-color: #1976d2;
  font-weight: 600;
}

.sdoh-domain-filter--shared {
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.guides-documents-view {
  background: white;
  border-radius: 12px;
  padding: 1.5rem 1.75rem 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  margin-bottom: 2rem;
}

.guides-documents-title {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
  color: #0f172a;
}

.guides-documents-subtitle {
  margin: 0 0 1.25rem;
  font-size: 0.95rem;
  color: #64748b;
  line-height: 1.5;
}

.guides-count-line {
  font-size: 0.85rem;
  font-weight: 600;
  color: #475569;
  margin: 0 0 0.75rem;
}

.guides-empty {
  padding: 2.5rem 1.5rem;
  text-align: center;
  background: #f8fafc;
  border-radius: 10px;
  border: 1px dashed #cbd5e1;
}

.guides-empty p {
  margin: 0 0 0.75rem;
  color: #475569;
  font-size: 1rem;
}

.guides-empty-hint {
  font-size: 0.9rem !important;
  color: #64748b !important;
}

.link-like-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: #2563eb;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.link-like-btn:hover {
  color: #1d4ed8;
}

/* SDOH Domain Filter */
.sdoh-domain-filter {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  flex-wrap: wrap;
}

.btn-add-resource {
  padding: 0.75rem 1.5rem;
  background: #4caf50;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  margin-left: auto;
}

.btn-add-resource:hover {
  background: #45a049;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.sdoh-domain-filter label {
  font-weight: 500;
  color: #333;
}

.domain-select {
  flex: 1;
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.95rem;
}

.clear-filter-btn {
  padding: 0.5rem 1rem;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s;
}

.clear-filter-btn:hover {
  background: #e0e0e0;
}

/* Selected Domain Banner */
.selected-domain-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  color: white;
}

.domain-banner-content {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
}

.domain-banner-icon {
  font-size: 2rem;
  line-height: 1;
}

.domain-banner-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.domain-banner-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: white;
}

.domain-banner-badges {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.domain-banner-badges .domain-badge,
.domain-banner-badges .urgency-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.domain-banner-close {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.domain-banner-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

/* Domains View */
.domains-view h2,
.mappings-view h2,
.admin-resources-view h2,
.metadata-resources-view h2 {
  margin-bottom: 1.5rem;
  color: #333;
}

.domains-grid,
.resources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.domain-card,
.resource-card {
  background: white;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}

.domain-card:hover,
.resource-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.domain-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.domain-icon {
  font-size: 2rem;
}

.domain-header h3,
.resource-card h3 {
  margin: 0 0 0.75rem 0;
  color: #333;
  font-size: 1.2rem;
}

.domain-info,
.resource-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.domain-badge,
.urgency-badge,
.status-badge,
.resource-type,
.access-level,
.fhir-type,
.standard-body {
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: capitalize;
}

.domain-badge.core {
  background: #e3f2fd;
  color: #1976d2;
}

.domain-badge.supplemental {
  background: #f3e5f5;
  color: #7b1fa2;
}

.urgency-badge.low {
  background: #e8f5e9;
  color: #2e7d32;
}

.urgency-badge.medium {
  background: #fff3e0;
  color: #f57c00;
}

.urgency-badge.high {
  background: #ffebee;
  color: #c62828;
}

.urgency-badge.critical {
  background: #fce4ec;
  color: #c2185b;
  font-weight: 600;
}

.domain-description,
.resource-card p {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.view-resources-btn,
.resource-link {
  display: inline-block;
  padding: 0.75rem 1rem;
  background: #1976d2;
  color: white;
  text-decoration: none;
  border: none;
  border-radius: 4px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
  width: 100%;
  text-align: center;
}

.view-resources-btn:hover,
.resource-link:hover {
  background: #1565c0;
}

.resource-link {
  width: auto;
}

/* View Headers */
.view-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.view-header h2 {
  margin: 0;
  font-size: 1.75rem;
  color: #333;
}

.btn-add {
  padding: 0.75rem 1.5rem;
  background: var(--primary-blue, #1976d2);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-add:hover {
  background: #1565c0;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn-add-empty {
  padding: 0.75rem 1.5rem;
  background: var(--primary-blue, #1976d2);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 1rem;
}

.btn-add-empty:hover {
  background: #1565c0;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn-delete-small {
  background: #ffebee;
  color: #c62828;
  border: none;
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.2s;
}

.btn-delete-small:hover {
  background: #ffcdd2;
  transform: scale(1.1);
}

/* Mappings View */
.mappings-view {
  background: white;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.mappings-table {
  width: 100%;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.mappings-table thead {
  background: #f5f5f5;
}

.mappings-table th {
  padding: 1rem;
  text-align: left;
  font-weight: 600;
  color: #333;
  border-bottom: 2px solid #e0e0e0;
}

.mappings-table td {
  padding: 1rem;
  border-bottom: 1px solid #f0f0f0;
}

.mappings-table tr:hover {
  background: #f9f9f9;
}

.status-badge.active {
  background: #e8f5e9;
  color: #2e7d32;
}

.status-badge.inactive {
  background: #ffebee;
  color: #c62828;
}

.resource-meta .resource-type,
.resource-meta .access-level,
.resource-meta .fhir-type,
.resource-meta .standard-body {
  background: #f5f5f5;
  color: #666;
}

.empty-state {
  text-align: center;
  padding: 3rem;
  color: #999;
  font-size: 1.1rem;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.empty-state p {
  margin-bottom: 1rem;
}

.admin-resources-view,
.metadata-resources-view {
  background: white;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Resources List Section */
.resources-list-section {
  background: white;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-top: 2rem;
}

.resources-list-section h3 {
  margin: 0 0 1rem 0;
  font-size: 1.25rem;
  color: #333;
}

.resources-list-hint {
  margin: -0.5rem 0 1rem;
  font-size: 0.85rem;
  color: #64748b;
  line-height: 1.4;
}

.resources-list-no-pins-title {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #e2e8f0;
  font-size: 1.05rem !important;
  color: #64748b !important;
}

.resources-list--compact .resource-list-item {
  padding: 0.75rem 1rem;
}

.resource-list-item--muted {
  cursor: default;
  opacity: 0.92;
}

.resource-list-item--muted:hover {
  transform: none;
  box-shadow: none;
  border-color: #e0e0e0;
  background: #fafafa;
}

.resource-list-item .muted {
  color: #94a3b8;
  font-size: 0.85rem;
  margin: 0.35rem 0 0;
}

.btn-resources-expand {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 1rem auto 0;
  padding: 0.65rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #1d4ed8;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.btn-resources-expand:hover {
  background: #dbeafe;
  border-color: #93c5fd;
}

.off-map-explainer {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 1rem 1.15rem;
  margin-bottom: 1rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: #334155;
}

.off-map-explainer p {
  margin: 0 0 0.75rem;
}

.off-map-suggestions {
  margin: 0;
  padding-left: 1.25rem;
  color: #475569;
}

.off-map-suggestions li {
  margin-bottom: 0.35rem;
}

.resources-list--offmap {
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .resources-list--offmap {
    grid-template-columns: repeat(2, 1fr);
  }
}

.resource-list-item--offmap {
  cursor: default;
  align-items: flex-start;
}

.resource-list-item--offmap:hover {
  transform: none;
  border-color: #e2e8f0;
  background: #fafafa;
  box-shadow: none;
}

.offmap-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.25rem;
}

.offmap-title-row h4 {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 1rem;
}

.offmap-badge {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  background: #e0e7ff;
  color: #3730a3;
}

.offmap-desc {
  font-size: 0.82rem;
  color: #64748b;
  margin: 0.4rem 0 0.5rem;
  line-height: 1.4;
}

.offmap-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.offmap-link-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
  background: #2563eb;
  border-radius: 6px;
  text-decoration: none;
}

.offmap-link-btn:hover {
  background: #1d4ed8;
  color: #fff;
}

.offmap-link-btn--secondary {
  background: #f1f5f9;
  color: #0f172a;
  border: 1px solid #e2e8f0;
}

.offmap-link-btn--secondary:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.resources-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}

.resource-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  background: #fafafa;
}

.resource-list-item:hover {
  border-color: var(--primary-blue, #1976d2);
  background: #f0f7ff;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.resource-list-item.highlighted {
  border-color: var(--primary-blue, #1976d2);
  background: #e3f2fd;
  box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3);
}

.resource-list-content {
  flex: 1;
}

.resource-list-content h4 {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  color: #333;
}

.resource-category {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  background: #e0e0e0;
  color: #666;
  border-radius: 4px;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

.resource-address,
.resource-phone {
  margin: 0.25rem 0;
  font-size: 0.9rem;
  color: #666;
}

.btn-show-on-map {
  padding: 0.5rem 1rem;
  background: var(--primary-blue, #1976d2);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.btn-show-on-map:hover {
  background: #1565c0;
}

.resource-list-item.highlighted .btn-show-on-map {
  background: #4caf50;
}

@media (max-width: 768px) {
  .resources-list {
    grid-template-columns: 1fr;
  }

  .resource-list-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .btn-show-on-map {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .resource-map-tabs {
    flex-wrap: wrap;
  }

  .tab-button {
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
  }

  .sdoh-domain-filter {
    flex-direction: column;
    align-items: stretch;
  }

  .domains-grid,
  .resources-grid {
    grid-template-columns: 1fr;
  }

  .mappings-table {
    font-size: 0.9rem;
  }

  .mappings-table th,
  .mappings-table td {
    padding: 0.75rem 0.5rem;
  }
}

/* ZIP / city search + geolocation + radius */
.admin-map-location-stack {
  margin-bottom: 1.25rem;
  padding: 1rem 1.25rem;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e0e0e0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.admin-map-location-hint {
  margin: 0 0 0.65rem;
  font-size: 0.88rem;
  color: #555;
  line-height: 1.4;
}

.admin-map-location-search {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

.admin-map-location-input {
  flex: 1;
  min-width: 14rem;
  padding: 0.45rem 0.75rem;
  font-size: 0.95rem;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.admin-map-location-input:focus {
  outline: none;
  border-color: #1976d2;
  box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
}

/* Geolocation + radius + ratings (aligned with student resource map UX) */
.admin-map-nearby-bar {
  margin-bottom: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}

.admin-map-nearby-btn {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  background: #1976d2;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.admin-map-nearby-btn:hover {
  background: #1565c0;
}

.admin-map-nearby-btn--secondary {
  background: #f5f5f5;
  color: #333;
  border: 1px solid #ddd;
}

.admin-map-nearby-btn--secondary:hover {
  background: #eee;
}

.admin-map-radius-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #444;
}

.admin-map-radius-select {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 0.35rem 0.6rem;
  font-size: 0.88rem;
  background: #fff;
}

.admin-map-location-status {
  width: 100%;
  margin: 0;
  font-size: 0.85rem;
  color: #2e7d32;
}

.admin-map-nearby-count {
  width: 100%;
  margin: 0;
  font-size: 0.88rem;
  color: #555;
}

.admin-map-rating-error {
  width: 100%;
  margin: 0;
  padding: 0.5rem 0.65rem;
  font-size: 0.85rem;
  color: #b71c1c;
  background: #ffebee;
  border: 1px solid #ffcdd2;
  border-radius: 8px;
}

.admin-map-nearby-empty {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  background: #fff8e1;
  border: 1px solid #ffcc80;
  border-radius: 8px;
  font-size: 0.9rem;
  color: #6d4c41;
}

.admin-map-rating-pill {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #7c2d12;
  background: #ffedd5;
  border: 1px solid #fdba74;
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
}

.admin-map-star-row {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.admin-map-star-btn {
  border: 1px solid #fcd34d;
  background: #fffbeb;
  color: #92400e;
  border-radius: 6px;
  padding: 0.2rem 0.45rem;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

.admin-map-star-btn:disabled {
  opacity: 0.55;
  cursor: wait;
}

.admin-resource-util-page {
  min-height: 100vh;
  background: #f5f5f5;
}

.admin-resource-util-page .dashboard-layout {
  display: flex;
  min-height: calc(100vh - 60px);
  width: 100%;
}

.admin-resource-util-page .dashboard-content {
  flex: 1;
  padding: 2rem;
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

.resource-util-header {
  margin-bottom: 1rem;
}

.resource-util-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-bottom: 1rem;
}

.resource-util-stat {
  font-size: 0.88rem;
  color: #64748b;
}

.resource-util-stat strong {
  color: #0f172a;
  margin-right: 0.2rem;
}

.resource-util-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

.resource-util-filter {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #475569;
}

.resource-util-filter select {
  min-width: 11rem;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  font-size: 0.88rem;
  background: #fff;
}

.resource-util-table-wrap {
  max-height: min(70vh, 720px);
  overflow: auto;
}

.resource-util-table th,
.resource-util-table td {
  vertical-align: top;
  font-size: 0.84rem;
}

.resource-util-dt {
  white-space: nowrap;
  font-size: 0.8rem;
  color: #475569;
}

.resource-util-user-name {
  display: block;
  font-weight: 700;
  color: #0f172a;
}

.resource-util-user-role {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
}

.resource-util-place-title {
  display: block;
  font-weight: 700;
  color: #0f172a;
}

.resource-util-place-meta {
  display: block;
  font-size: 0.78rem;
  color: #64748b;
  line-height: 1.35;
  margin-top: 0.15rem;
}

.resource-util-badge {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.resource-util-badge--google {
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
}

.resource-util-badge--catalog {
  background: rgba(249, 115, 22, 0.12);
  color: #c2410c;
}

.resource-util-status {
  display: inline-block;
  padding: 0.2rem 0.45rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 750;
}

.resource-util-status--ok {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
}

.resource-util-status--pending {
  background: rgba(100, 156, 228, 0.15);
  color: #1e5a9a;
}

.resource-util-status--warn {
  background: rgba(234, 179, 8, 0.15);
  color: #a16207;
}

.resource-util-status--muted {
  background: #f1f5f9;
  color: #64748b;
}

.resource-util-notes-cell {
  max-width: 10rem;
  color: #475569;
}

.resource-util-notes-btn {
  border: none;
  background: none;
  padding: 0;
  text-align: left;
  font: inherit;
  color: #475569;
  cursor: pointer;
}

.resource-util-notes-btn:hover {
  color: #0f172a;
  text-decoration: underline;
}

.resource-util-link {
  font-weight: 700;
  color: var(--brand-blue-deep, #2e74b5);
  text-decoration: none;
}

.resource-util-link:hover {
  text-decoration: underline;
}

.resource-util-detail-row td {
  background: #f8fafc;
  font-size: 0.84rem;
  color: #334155;
  padding-top: 0.35rem;
  padding-bottom: 0.65rem;
}
.cbo-header {
  background: white;
  padding: 1.25rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid var(--primary-blue);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  min-height: 80px;
  position: relative;
  animation: slideDownHeader 0.5s ease-out;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
  flex: 0 0 auto;
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.logo-image {
  width: 45px;
  height: 45px;
  border-radius: 8px;
  object-fit: cover;
  transition: transform 0.3s ease;
  animation: logoFloat 3s ease-in-out infinite;
}

.logo-image:hover {
  transform: scale(1.1) rotate(5deg);
}

@keyframes logoFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

@keyframes slideDownHeader {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.logo-text {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--primary-blue);
  letter-spacing: -0.5px;
}

.header-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  z-index: 1;
  max-width: min(92vw, 36rem);
  padding: 0 0.5rem;
}

/* Admin-style center: platform mark left, org icon + name + tagline (staff Header pattern) */
.cbo-org-branding {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: center;
  animation: cboOrgBrandingIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes cboOrgBrandingIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cbo-org-icon {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  object-fit: cover;
  border: 2px solid rgba(100, 156, 228, 0.35);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  flex-shrink: 0;
}

.cbo-org-icon-fallback {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--brand-blue-deep, #2e74b5);
  background: linear-gradient(
    145deg,
    var(--brand-blue-soft-tint, rgba(100, 156, 228, 0.2)),
    rgba(255, 255, 255, 0.95)
  );
  border: 2px solid rgba(100, 156, 228, 0.45);
  box-shadow: 0 2px 8px rgba(46, 116, 181, 0.12);
}

.cbo-org-branding-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  min-width: 0;
  text-align: left;
}

.cbo-org-name {
  font-size: clamp(1.15rem, 2.5vw, 1.65rem);
  font-weight: 800;
  color: var(--primary-blue);
  background: linear-gradient(
    135deg,
    var(--brand-blue-deep, #2e74b5) 0%,
    var(--brand-blue-primary, #649ce4) 55%,
    var(--primary-blue) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
  line-height: 1.15;
  position: relative;
  animation: orgNameGlow 4s ease-in-out infinite;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.cbo-org-name::before {
  content: '';
  position: absolute;
  top: -0.25rem;
  left: -0.35rem;
  right: -0.35rem;
  bottom: -0.25rem;
  background: linear-gradient(135deg, var(--border-light) 0%, var(--shadow-medium) 50%, var(--border-light) 100%);
  border-radius: 10px;
  z-index: -1;
  opacity: 0.12;
  animation: backgroundPulse 3.5s ease-in-out infinite;
}

.cbo-org-subtitle {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary, #64748b);
  letter-spacing: 0.04em;
  line-height: 1.35;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

@keyframes orgNameGlow {
  0%, 100% {
    background-position: 0% 50%;
    filter: brightness(1);
  }
  50% {
    background-position: 100% 50%;
    filter: brightness(1.1);
  }
}

@keyframes backgroundPulse {
  0%, 100% {
    opacity: 0.1;
    transform: scale(1);
  }
  50% {
    opacity: 0.2;
    transform: scale(1.05);
  }
}

.header-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  justify-content: flex-end;
  flex-shrink: 0;
  flex: 0 0 auto;
}

.sync-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.sync-dot {
  width: 8px;
  height: 8px;
  background-color: #4caf50;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.header-alerts {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 8px;
}

.alert-badge {
  background-color: var(--primary-blue);
  color: white;
  padding: 0.2rem 0.5rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

.alert-text {
  font-size: 0.85rem;
  color: #856404;
  font-weight: 500;
}

.cbo-user-menu {
  position: relative;
}

.cbo-user-menu-trigger {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 10px;
}

.cbo-user-menu-trigger:focus-visible {
  outline: 2px solid var(--brand-blue-primary, #649ce4);
  outline-offset: 2px;
}

.cbo-user-menu-chevron {
  font-size: 0.65rem;
  color: var(--text-secondary, #666);
  line-height: 1;
}

.cbo-user-menu-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 11rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 50;
  padding: 0.35rem 0;
}

.cbo-user-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--brand-blue-deep, #2e74b5);
  text-decoration: none;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

.cbo-user-menu-item:hover {
  background: var(--brand-blue-soft-tint, rgba(100, 156, 228, 0.12));
}

.cbo-user-menu-item--danger {
  color: #b71c1c;
}

.cbo-user-menu-item--danger:hover {
  background: #ffebee;
}

.user-avatar {
  cursor: pointer;
}

.avatar-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-blue), var(--primary-blue));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.9rem;
}

@media (max-width: 720px) {
  .cbo-org-branding {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.65rem;
  }

  .cbo-org-branding-text {
    align-items: center;
    text-align: center;
    width: 100%;
  }

  .cbo-org-name {
    text-align: center;
    -webkit-line-clamp: 3;
  }

  .cbo-org-subtitle {
    text-align: center;
  }
}

.cbo-sidebar {
  width: 250px;
  background-color: var(--primary-blue);
  min-height: calc(100vh - 80px);
  padding: 2rem 0;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0 1rem;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s ease;
  text-align: left;
  font-family: 'Inter', sans-serif;
  position: relative;
  animation: slideInNav 0.5s ease-out backwards;
}

.nav-item:nth-child(1) {
  animation-delay: 0.1s;
}

.nav-item:nth-child(2) {
  animation-delay: 0.2s;
}

.nav-item:nth-child(3) {
  animation-delay: 0.3s;
}

.nav-item:nth-child(4) {
  animation-delay: 0.4s;
}

.nav-item:nth-child(5) {
  animation-delay: 0.5s;
}

.nav-item:nth-child(6) {
  animation-delay: 0.6s;
}


.nav-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px;
  height: 0;
  background-color: white;
  border-radius: 0 3px 3px 0;
  transition: all 0.3s ease;
}

.nav-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  transform: translateX(5px);
}

.nav-item:hover::before {
  transform: translateY(-50%) scaleY(1);
  height: 60%;
}

.nav-item.active {
  background-color: rgba(255, 255, 255, 0.15);
  color: white;
}

.nav-item.active::before {
  transform: translateY(-50%) scaleY(1);
  height: 60%;
}

.nav-icon {
  font-size: 1.3rem;
  transition: transform 0.3s ease;
}

.nav-item:hover .nav-icon {
  transform: scale(1.2);
}

@keyframes slideInNav {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.nav-label {
  flex: 1;
}

.cbo-dashboard {
  min-height: 100vh;
  background: linear-gradient(135deg, #FEFEFE 0%, #FAF8F5 50%, #F5F7FA 100%);
}

.cbo-static-banner {
  margin-bottom: 1.25rem;
  padding: 0.85rem 1.1rem;
  border-radius: 10px;
  border: 1px solid #c7d2fe;
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  color: #312e81;
  font-size: 0.95rem;
  line-height: 1.45;
}

.cbo-static-banner-code {
  font-size: 0.8rem;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid #a5b4fc;
}

.dashboard-layout {
  display: flex;
  min-height: calc(100vh - 80px);
}

.dashboard-content {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 2rem 1.5rem;
  overflow-y: auto;
  box-sizing: border-box;
}

.dashboard-main {
  max-width: none;
  width: 100%;
  margin: 0;
}

.content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.content-col {
  display: flex;
  flex-direction: column;
}

.charts-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.chart-col {
  display: flex;
  flex-direction: column;
  min-height: 400px;
}

.chart-full-width {
  width: 100%;
  margin-bottom: 2rem;
  min-height: 400px;
}

/* Activity and Actions sections */
.content-grid:last-of-type {
  margin-bottom: 2rem;
}

/* Responsive Design */
@media (max-width: 1200px) {
  .content-grid,
  .charts-section {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .dashboard-content {
    padding: 1rem;
  }

  .cbo-sidebar {
    position: fixed;
    left: -250px;
    transition: left 0.3s ease;
    z-index: 1000;
  }

  .cbo-sidebar.open {
    left: 0;
  }
}

/* Animation for page load */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.dashboard-content {
  animation: fadeIn 0.5s ease-out;
}

.cbo-dashboard .dashboard-main {
  animation: fadeIn 0.55s ease-out;
}
.cbo-workspace-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #e2e8f0;
}

.cbo-workspace-tab {
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cbo-workspace-tab:hover {
  border-color: var(--brand-blue-primary, #649ce4);
  color: var(--brand-blue-deep, #2e74b5);
}

.cbo-workspace-tab.is-active {
  background: linear-gradient(135deg, var(--brand-blue-primary, #649ce4), var(--brand-blue-deep, #2e74b5));
  border-color: transparent;
  color: #fff;
}

.cbo-workspace-panel {
  margin-top: 0.5rem;
}

.cbo-workspace-panel-title {
  margin: 0 0 0.35rem;
  font-size: 1.25rem;
  color: #0f172a;
}

.cbo-workspace-lead {
  margin: 0 0 1rem;
  max-width: 40rem;
  color: #64748b;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Referrals: full main column next to sidebar; detail panel + expand control */
.cbo-referrals-workspace {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 1rem;
  width: 100%;
  min-height: calc(100vh - 13rem);
  min-width: 0;
}

.cbo-referrals-workspace .cbo-referrals-queue {
  flex: 1 1 42%;
  min-width: 0;
  min-height: 0;
  transition: flex 0.25s ease, max-width 0.25s ease, opacity 0.2s ease, margin 0.25s ease;
}

.cbo-referrals-workspace--split .cbo-referrals-queue {
  flex: 1 1 38%;
}

.cbo-referrals-queue--collapsed {
  flex: 0 0 0 !important;
  max-width: 0 !important;
  opacity: 0;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none;
  border: none;
}

.cbo-referrals-detail {
  flex: 1 1 58%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  transition: flex 0.25s ease;
}

.cbo-referrals-detail--expanded {
  flex: 1 1 100%;
}

@media (max-width: 960px) {
  .cbo-referrals-workspace {
    flex-direction: column;
    min-height: auto;
  }

  .cbo-referrals-workspace--split .cbo-referrals-queue {
    flex: 0 0 auto;
    max-width: none;
  }

  .cbo-referrals-queue--collapsed {
    display: none;
  }

  .cbo-referrals-detail {
    flex: 1 1 auto;
    min-height: min(70vh, 640px);
  }
}
.cbo-res-catalog {
  max-width: none;
  width: 100%;
}

.cbo-res-lead--short {
  max-width: 42rem;
  margin-bottom: 1rem;
}

.cbo-res-studio-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.35rem 0 1.15rem;
  padding: 1.1rem 1.25rem;
  border-radius: 18px;
  background: linear-gradient(165deg, #ffffff 0%, #f0fdfa 40%, #fffbeb 100%);
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
  position: relative;
  overflow: hidden;
}

.cbo-res-studio-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #34d399, #38bdf8, #8b5cf6, #ec4899, #f59e0b);
}

.cbo-res-studio-kicker {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0d9488;
}

.cbo-res-studio-hero-copy h3 {
  margin: 0.2rem 0 0.35rem;
  font-size: 1.2rem;
  color: #0f172a;
}

.cbo-res-studio-hero-copy p {
  margin: 0;
  max-width: 36rem;
  color: #475569;
  font-size: 0.92rem;
  line-height: 1.4;
}

.cbo-res-studio-hero-cta {
  border: none;
  border-radius: 999px;
  padding: 0.75rem 1.25rem;
  font-weight: 800;
  font-size: 0.92rem;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #0d9488, #0ea5e9 50%, #7c3aed);
  box-shadow: 0 10px 22px rgba(13, 148, 136, 0.3);
}

.cbo-res-studio-hero-cta:hover:not(:disabled) {
  filter: brightness(1.05);
}

.cbo-res-studio-hero-cta:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.cbo-res-food-only-hint {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--brand-blue-deep, #2e74b5);
  padding: 0.35rem 0;
}

.cbo-res-catalog-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.cbo-res-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.cbo-res-export-btn {
  padding: 0.45rem 1rem;
  border-radius: 10px;
  border: 1px solid rgba(100, 156, 228, 0.55);
  background: #fff;
  color: var(--brand-blue-deep, #2e74b5);
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background 0.15s ease;
}

.cbo-res-export-btn:hover:not(:disabled) {
  background: var(--brand-blue-soft-tint, rgba(100, 156, 228, 0.12));
}

.cbo-res-export-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.cbo-res-filters-secondary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  margin-bottom: 1.25rem;
}

.cbo-res-cat-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}

.cbo-res-cat-select,
.cbo-res-search-input {
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  font-size: 0.9rem;
}

.cbo-res-cat-select {
  min-width: 12rem;
}

.cbo-res-search-input {
  flex: 1 1 14rem;
  min-width: 0;
  max-width: 28rem;
}

.cbo-res-catalog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cbo-res-filter-chip {
  border: 1px solid rgba(100, 156, 228, 0.45);
  background: #fff;
  color: var(--brand-blue-deep, #2e74b5);
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.cbo-res-filter-chip.is-active {
  background: linear-gradient(135deg, var(--brand-blue-primary, #649ce4), var(--brand-blue-deep, #2e74b5));
  color: #fff;
  border-color: transparent;
}

.cbo-res-add-btn {
  padding: 0.45rem 1rem;
  border-radius: 10px;
  border: none;
  font-weight: 700;
  cursor: pointer;
  background: linear-gradient(135deg, var(--brand-blue-primary, #649ce4), var(--brand-blue-deep, #2e74b5));
  color: #fff;
}

.cbo-res-add-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.cbo-res-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(100, 156, 228, 0.28);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.cbo-res-data-table {
  width: 100%;
  min-width: 960px;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.cbo-res-data-table thead th {
  text-align: left;
  padding: 0.65rem 0.75rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
  background: linear-gradient(180deg, var(--brand-blue-bg-start, #e8f4fc) 0%, #f8fafc 100%);
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
}

.cbo-res-data-table tbody td {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
  vertical-align: top;
}

.cbo-res-data-table tbody tr:last-child td {
  border-bottom: none;
}

.cbo-res-data-row:hover td {
  background: rgba(100, 156, 228, 0.06);
}

.cbo-res-data-row--demo td {
  background: rgba(100, 156, 228, 0.04);
}

.cbo-res-col-name {
  font-weight: 600;
  color: #0f172a;
}

.cbo-res-col-desc {
  max-width: 14rem;
  line-height: 1.4;
}

.cbo-res-col-contact {
  max-width: 10rem;
  line-height: 1.35;
}

.cbo-res-col-updated {
  white-space: nowrap;
  font-size: 0.8rem;
  color: #64748b;
}

.cbo-res-table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.cbo-res-table-actions button {
  padding: 0.3rem 0.5rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.78rem;
  cursor: pointer;
  border: 1px solid var(--brand-blue-deep, #2e74b5);
  background: #fff;
  color: var(--brand-blue-deep, #2e74b5);
}

.cbo-res-table-actions button:hover:not(:disabled) {
  background: var(--brand-blue-soft-tint, rgba(100, 156, 228, 0.12));
}

.cbo-res-table-actions button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.cbo-res-badge {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  white-space: nowrap;
}

.cbo-res-badge--active {
  background: rgba(76, 175, 80, 0.2);
  color: #2e7d32;
}

.cbo-res-badge--in_progress {
  background: rgba(255, 152, 0, 0.22);
  color: #e65100;
}

.cbo-res-badge--completed {
  background: rgba(33, 150, 243, 0.18);
  color: #1565c0;
}

.cbo-res-badge--paused {
  background: rgba(158, 158, 158, 0.25);
  color: #424242;
}

.cbo-res-empty {
  padding: 2rem;
  text-align: center;
  color: #64748b;
  border: 1px dashed rgba(100, 156, 228, 0.4);
  border-radius: 12px;
  background: #fafcff;
}

.cbo-res-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
  padding: 1rem;
}

.cbo-res-modal {
  background: #fff;
  border-radius: 14px;
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
}

.cbo-res-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e2e8f0;
}

.cbo-res-modal-header h2 {
  margin: 0;
  font-size: 1.15rem;
  color: var(--brand-blue-deep, #2e74b5);
}

.cbo-res-modal-close {
  border: none;
  background: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: #64748b;
}

.cbo-res-form {
  padding: 1rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cbo-res-field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  margin-bottom: 0.25rem;
}

.cbo-res-field .hint {
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: #94a3b8;
  display: block;
  margin-top: 0.15rem;
}

.cbo-res-field input,
.cbo-res-field select,
.cbo-res-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  font: inherit;
}

.cbo-res-field textarea {
  min-height: 72px;
  resize: vertical;
}

.cbo-res-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

@media (max-width: 520px) {
  .cbo-res-row2 {
    grid-template-columns: 1fr;
  }
}

.cbo-res-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #334155;
}

.cbo-res-modal-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  padding-top: 0.5rem;
}

.cbo-res-modal-actions button {
  padding: 0.5rem 1.1rem;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
}

.cbo-res-modal-actions .secondary {
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
}

.cbo-res-modal-actions .primary {
  border: none;
  background: linear-gradient(135deg, var(--brand-blue-primary, #649ce4), var(--brand-blue-deep, #2e74b5));
  color: #fff;
}

.cbo-res-error {
  color: #c62828;
  font-size: 0.88rem;
}

.cbo-res-lead {
  margin: 0 0 1rem;
  max-width: 46rem;
  color: #64748b;
  font-size: 0.92rem;
  line-height: 1.5;
}
.cbo-studio--fullscreen {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: #062a3d;
  color: #0f172a;
  animation: cboStudioIn 0.28s ease;
}

/* Page template: top stepper + form body (scrollable) */
.cbo-studio--panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  min-height: 0;
  max-height: none;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  color: #0f172a;
  box-shadow: none;
  animation: none;
}

.cbo-studio--panel .cbo-studio-bg {
  display: none;
}

.cbo-studio-topline {
  --checkin-pink: #ec4899;
  --checkin-violet: #8b5cf6;
  --checkin-amber: #f59e0b;
  --checkin-mint: #34d399;
  --checkin-sky: #38bdf8;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.05rem 1.15rem 1rem;
  border-radius: 18px;
  color: #0f172a;
  background: linear-gradient(165deg, #ffffff 0%, #f0fdfa 38%, #fff7ed 72%, #fdf2f8 100%);
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 36px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.cbo-studio-topline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--checkin-mint),
    var(--checkin-sky),
    var(--checkin-violet),
    var(--checkin-pink),
    var(--checkin-amber)
  );
}

.cbo-studio-topline-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1rem;
}

.cbo-studio-topline .cbo-studio-brand {
  flex: 1;
  min-width: 10rem;
}

.cbo-studio-topline .cbo-studio-brand h1 {
  margin: 0.15rem 0 0;
  font-size: 1.42rem;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -0.02em;
  background: linear-gradient(105deg, #0f172a 10%, #0d9488 45%, #7c3aed 78%, #db2777 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #0f172a;
}

@supports not (background-clip: text) {
  .cbo-studio-topline .cbo-studio-brand h1 {
    color: #0f172a;
    background: none;
    -webkit-text-fill-color: unset;
  }
}

.cbo-studio-topline .cbo-studio-kicker {
  color: #0d9488;
}

.cbo-studio-topline .cbo-studio-back {
  border-color: rgba(13, 148, 136, 0.28);
  background: rgba(255, 255, 255, 0.85);
  color: #0f766e;
}

.cbo-studio-topline .cbo-studio-back:hover {
  background: #fff;
}

.cbo-studio-topline-meta {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-left: auto;
}

.cbo-studio-score--inline {
  margin: 0;
  padding: 0;
  color: #64748b;
}

.cbo-studio-topline .cbo-studio-score-dots i {
  background: #e2e8f0;
}

.cbo-studio-topline .cbo-studio-score-dots i.is-on {
  background: linear-gradient(135deg, #34d399, #8b5cf6);
  box-shadow: none;
}

.cbo-studio-topline .cbo-studio-x {
  background: #f1f5f9;
  color: #334155;
}

.cbo-studio-topline .cbo-studio-x:hover {
  background: #e2e8f0;
}

.cbo-studio-stepper {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.45rem;
}

.cbo-studio-stepper-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-align: left;
  border: 1.5px solid #e2e8f0;
  background: rgba(255, 255, 255, 0.85);
  color: #0f172a;
  border-radius: 12px;
  padding: 0.55rem 0.65rem;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.cbo-studio-stepper-item:hover {
  background: #fff;
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--step-accent) 45%, #e2e8f0);
}

.cbo-studio-stepper-item.is-current {
  background: #fff;
  border-color: var(--step-accent);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--step-accent) 22%, transparent);
}

.cbo-studio-stepper-item.is-done:not(.is-current) {
  background: color-mix(in srgb, var(--step-accent) 14%, #ffffff);
  border-color: color-mix(in srgb, var(--step-accent) 35%, #e2e8f0);
}

.cbo-studio-stepper-num {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 800;
  background: color-mix(in srgb, var(--step-accent) 18%, #ffffff);
  color: var(--step-accent);
}

.cbo-studio-stepper-item.is-current .cbo-studio-stepper-num,
.cbo-studio-stepper-item.is-done .cbo-studio-stepper-num {
  background: var(--step-accent);
  color: #fff;
}

.cbo-studio-stepper-copy {
  min-width: 0;
}

.cbo-studio-stepper-copy strong {
  display: block;
  font-size: 0.86rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cbo-studio-stepper-copy small {
  display: block;
  font-size: 0.68rem;
  opacity: 0.75;
}

.cbo-studio--panel .cbo-studio-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-radius: 18px;
  overflow: visible;
  background: linear-gradient(165deg, #ffffff 0%, #f8fafc 48%, #fff7ed 100%);
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.06);
  position: relative;
}

.cbo-studio--panel .cbo-studio-main::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, #34d399, #38bdf8, #8b5cf6, #ec4899, #f59e0b);
  opacity: 0.92;
  pointer-events: none;
}

.cbo-studio--panel .cbo-studio-scroll {
  flex: none;
  overflow: visible;
  padding: 0.75rem 1.5rem 1.25rem;
}

.cbo-studio--panel .cbo-studio-footer {
  position: sticky;
  bottom: 0;
  margin-top: auto;
}

.cbo-studio--fullscreen .cbo-studio-topline {
  border-radius: 0;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.cbo-studio--fullscreen .cbo-studio-main {
  flex: 1;
  min-height: 0;
  border-radius: 0;
  box-shadow: none;
}

@keyframes cboStudioIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.cbo-studio-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 420px at 12% 8%, rgba(14, 165, 233, 0.35), transparent 55%),
    radial-gradient(700px 380px at 88% 18%, rgba(20, 184, 166, 0.28), transparent 50%),
    radial-gradient(600px 360px at 70% 90%, rgba(245, 158, 11, 0.2), transparent 45%),
    linear-gradient(160deg, #043047 0%, #0b3d52 45%, #0f766e 100%);
  pointer-events: none;
}

.cbo-studio-rail,
.cbo-studio-main {
  position: relative;
  z-index: 1;
}

/* Legacy rail (unused when topline stepper is present) */
.cbo-studio-rail {
  display: none;
}

.cbo-studio-back {
  align-self: flex-start;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: #e0f2fe;
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
}

.cbo-studio-back:hover {
  background: rgba(255, 255, 255, 0.16);
}

.cbo-studio-kicker {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
  color: #7dd3fc;
}

.cbo-studio-brand h1 {
  margin: 0.2rem 0 0.35rem;
  font-size: 1.55rem;
  line-height: 1.15;
  color: #fff;
}

.cbo-studio-lead {
  margin: 0;
  font-size: 0.88rem;
  color: rgba(224, 242, 254, 0.78);
  line-height: 1.4;
}

.cbo-studio-ring {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  margin: 0.35rem auto;
  background: conic-gradient(#38bdf8 var(--pct), rgba(255, 255, 255, 0.15) 0);
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 6px rgba(56, 189, 248, 0.12);
}

.cbo-studio-ring-inner {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: #043047;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.cbo-studio-ring-inner strong {
  font-size: 1.15rem;
}

.cbo-studio-ring-inner span {
  font-size: 0.7rem;
  opacity: 0.75;
}

.cbo-studio-steps {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.cbo-studio-step {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-align: left;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.05);
  color: #e0f2fe;
  border-radius: 14px;
  padding: 0.55rem 0.65rem;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}

.cbo-studio-step strong {
  display: block;
  font-size: 0.88rem;
}

.cbo-studio-step small {
  display: block;
  font-size: 0.7rem;
  opacity: 0.7;
}

.cbo-studio-step-ico {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--step-accent) 30%, transparent);
  color: #fff;
  font-size: 0.95rem;
}

.cbo-studio-step.is-current {
  background: rgba(255, 255, 255, 0.14);
  border-color: color-mix(in srgb, var(--step-accent) 65%, white);
  transform: translateX(2px);
}

.cbo-studio-step.is-done {
  background: rgba(34, 197, 94, 0.15);
}

.cbo-studio-score {
  margin-top: auto;
  padding-top: 0.75rem;
  font-size: 0.78rem;
  color: rgba(224, 242, 254, 0.8);
}

.cbo-studio-score-dots {
  display: flex;
  gap: 0.3rem;
  margin-top: 0.4rem;
}

.cbo-studio-score-dots i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: block;
}

.cbo-studio-score-dots i.is-on {
  background: #34d399;
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.55);
}

.cbo-studio-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.96) 0%, #f1f5f9 100%);
  border-radius: 24px 0 0 24px;
  overflow: hidden;
  box-shadow: -16px 0 40px rgba(0, 0, 0, 0.18);
}

.cbo-studio-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 1.75rem 0.75rem;
}

.cbo-studio-top-step {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0f766e;
}

.cbo-studio-top h2 {
  margin: 0.15rem 0 0;
  font-size: 1.65rem;
  color: #0f172a;
}

.cbo-studio-x {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 12px;
  background: #e2e8f0;
  color: #334155;
  font-size: 1.5rem;
  cursor: pointer;
}

.cbo-studio-x:hover {
  background: #cbd5e1;
}

.cbo-studio-error {
  margin: 0 1.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: 12px;
  background: #fff1f2;
  border: 1px solid #fecdd3;
  color: #be123c;
  font-weight: 600;
}

.cbo-studio-scroll {
  flex: 1;
  overflow: auto;
  padding: 0.75rem 1.75rem 1rem;
}

.cbo-studio-panel {
  max-width: 860px;
}

.cbo-studio-hero-field label,
.cbo-studio-field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0f172a;
  margin-bottom: 0.4rem;
}

.cbo-studio-hero-field input {
  width: 100%;
  box-sizing: border-box;
  font-size: 1.35rem;
  font-weight: 700;
  padding: 0.9rem 1rem;
  border-radius: 16px;
  border: 2px solid #cbd5e1;
  background: #fff;
  color: #0f172a;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cbo-studio-hero-field input:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.18);
}

.cbo-studio-block {
  margin-top: 1.25rem;
}

.cbo-studio-block h3 {
  margin: 0 0 0.55rem;
  font-size: 0.95rem;
  color: #0f172a;
}

.cbo-studio-hint {
  margin: 0 0 1rem;
  color: #334155;
  font-size: 0.92rem;
  line-height: 1.45;
}

.cbo-studio-opt {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
  background: #f1f5f9;
  vertical-align: middle;
}

.cbo-studio-field-help {
  margin: 0 0 0.5rem;
  font-size: 0.84rem;
  font-weight: 550;
  line-height: 1.4;
  color: #475569;
  text-transform: none;
  letter-spacing: 0;
}

.cbo-studio-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  margin-top: 1rem;
}

.cbo-studio-field {
  margin-top: 0.85rem;
}

.cbo-studio-field input,
.cbo-studio-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.65rem 0.8rem;
  border-radius: 12px;
  border: 1px solid #cbd5e1;
  font: inherit;
  background: #fff;
}

.cbo-studio-field textarea {
  resize: vertical;
}

.cbo-studio-cats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.55rem;
}

.cbo-studio-cat {
  text-align: left;
  border: 1.5px solid #e2e8f0;
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
  border-radius: 14px;
  padding: 0.75rem 0.7rem;
  cursor: pointer;
  font-weight: 650;
  font-size: 0.84rem;
  color: #0f172a;
  display: flex;
  gap: 0.45rem;
  align-items: flex-start;
  min-height: 58px;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.cbo-studio-cat:hover {
  transform: translateY(-1px);
  border-color: #a78bfa;
}

.cbo-studio-cat.is-on {
  border-color: transparent;
  background: linear-gradient(135deg, #0d9488, #0ea5e9 50%, #7c3aed);
  color: #fff;
  box-shadow: 0 8px 22px rgba(124, 58, 237, 0.25);
}

.cbo-studio-cat-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.cbo-studio-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.cbo-studio-chip {
  border-radius: 999px;
  border: 1.5px solid #cbd5e1;
  background: #fff;
  color: #334155;
  padding: 0.45rem 0.85rem;
  font-size: 0.84rem;
  font-weight: 650;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.12s ease, color 0.12s ease;
}

.cbo-studio-chip:hover {
  transform: translateY(-1px);
}

.cbo-studio-chips--mint .cbo-studio-chip.is-on {
  background: linear-gradient(135deg, #34d399, #0d9488);
  border-color: transparent;
  color: #fff;
}

.cbo-studio-chips--sky .cbo-studio-chip.is-on,
.cbo-studio-chips--blue .cbo-studio-chip.is-on {
  background: linear-gradient(135deg, #38bdf8, #0284c7);
  border-color: transparent;
  color: #fff;
}

.cbo-studio-chips--violet .cbo-studio-chip.is-on {
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
  border-color: transparent;
  color: #fff;
}

.cbo-studio-chips--pink .cbo-studio-chip.is-on,
.cbo-studio-chips--coral .cbo-studio-chip.is-on {
  background: linear-gradient(135deg, #f472b6, #db2777);
  border-color: transparent;
  color: #fff;
}

.cbo-studio-chips--amber .cbo-studio-chip.is-on {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  border-color: transparent;
  color: #78350f;
}

.cbo-studio-chips--teal .cbo-studio-chip.is-on {
  background: linear-gradient(135deg, #2dd4bf, #0f766e);
  border-color: transparent;
  color: #fff;
}

.cbo-studio-slider input[type='range'] {
  width: 100%;
  accent-color: #8b5cf6;
  cursor: pointer;
}

.cbo-studio-slider--coral input[type='range'] {
  accent-color: #ec4899;
}

.cbo-studio-slider--teal input[type='range'] {
  accent-color: #0d9488;
}

.cbo-studio-sliders {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1.15rem;
}

.cbo-studio-slider {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 0.9rem 1rem 0.75rem;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
}

.cbo-studio-slider-head {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}

.cbo-studio-slider-label {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #0f172a;
}

.cbo-studio-slider-value {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
  text-align: right;
  max-width: 70%;
}

.cbo-studio-slider-metric {
  font-size: 1.35rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.cbo-studio-slider-unit {
  font-size: 0.78rem;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0;
}

.cbo-studio-slider-caption {
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
  line-height: 1.25;
}

.cbo-studio-slider input[type='range'] {
  width: 100%;
  accent-color: #0f766e;
  cursor: pointer;
}

.cbo-studio-slider-ends {
  display: flex;
  justify-content: space-between;
  font-size: 0.68rem;
  color: #94a3b8;
  margin-top: 0.25rem;
}

.cbo-studio-toggles {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0.35rem 0 1rem;
}

.cbo-studio-switch {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid #e2e8f0;
  background: #fff;
  border-radius: 16px;
  padding: 0.85rem 1rem;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cbo-studio-switch.is-on {
  border-color: transparent;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
}

.cbo-studio-switch--teal.is-on,
.cbo-studio-switch--mint.is-on {
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.16), rgba(255, 255, 255, 0.95));
}

.cbo-studio-switch--coral.is-on,
.cbo-studio-switch--pink.is-on {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.14), rgba(255, 255, 255, 0.95));
}

.cbo-studio-switch--blue.is-on,
.cbo-studio-switch--violet.is-on {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.14), rgba(255, 255, 255, 0.95));
}

.cbo-studio-switch--amber.is-on {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.16), rgba(255, 255, 255, 0.95));
}

.cbo-studio-switch-track {
  width: 48px;
  height: 28px;
  border-radius: 999px;
  background: #cbd5e1;
  position: relative;
  flex-shrink: 0;
  transition: background 0.15s ease;
}

.cbo-studio-switch.is-on .cbo-studio-switch-track {
  background: #0d9488;
}

.cbo-studio-switch--mint.is-on .cbo-studio-switch-track {
  background: #10b981;
}

.cbo-studio-switch--coral.is-on .cbo-studio-switch-track,
.cbo-studio-switch--pink.is-on .cbo-studio-switch-track {
  background: #ec4899;
}

.cbo-studio-switch--blue.is-on .cbo-studio-switch-track,
.cbo-studio-switch--violet.is-on .cbo-studio-switch-track {
  background: #8b5cf6;
}

.cbo-studio-switch--amber.is-on .cbo-studio-switch-track {
  background: #f59e0b;
}

.cbo-studio-switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease;
}

.cbo-studio-switch.is-on .cbo-studio-switch-knob {
  transform: translateX(20px);
}

.cbo-studio-switch-label {
  font-weight: 700;
  color: #0f172a;
  font-size: 0.95rem;
}

.cbo-studio-callout {
  margin: 0.75rem 0 1rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  font-weight: 600;
  font-size: 0.9rem;
}

.cbo-studio-callout--mint {
  background: rgba(52, 211, 153, 0.16);
  color: #065f46;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.cbo-studio-review-card {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  background: #fff;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
}

.cbo-studio-review-banner {
  padding: 1.25rem 1.35rem;
  background: linear-gradient(135deg, #0d9488, #0ea5e9 45%, #7c3aed 78%, #db2777);
  color: #fff;
}

.cbo-studio-review-banner h3 {
  margin: 0;
  font-size: 1.35rem;
}

.cbo-studio-review-banner p {
  margin: 0.35rem 0 0;
  opacity: 0.92;
}

.cbo-studio-review-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  padding: 1rem;
}

.cbo-studio-review-grid article {
  background: #f8fafc;
  border-radius: 12px;
  padding: 0.7rem 0.8rem;
  border: 1px solid #eef2f7;
}

.cbo-studio-review-grid span {
  display: block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 0.2rem;
}

.cbo-studio-review-grid strong {
  color: #0f172a;
  font-size: 0.92rem;
}

.cbo-studio-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.75rem 1.15rem;
  border-top: 1px solid #e2e8f0;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(8px);
}

.cbo-studio-footer-right {
  display: flex;
  gap: 0.5rem;
}

.cbo-studio-btn {
  border-radius: 12px;
  padding: 0.65rem 1.2rem;
  font-weight: 800;
  font-size: 0.92rem;
  cursor: pointer;
  border: none;
}

.cbo-studio-btn.ghost {
  background: transparent;
  color: #64748b;
}

.cbo-studio-btn.soft {
  background: #e2e8f0;
  color: #334155;
}

.cbo-studio-btn.solid {
  color: #fff;
  background: linear-gradient(135deg, #0d9488, #0ea5e9 50%, #7c3aed);
  box-shadow: 0 8px 24px rgba(13, 148, 136, 0.3);
}

.cbo-studio-btn--save {
  background: linear-gradient(135deg, #22c55e, #16a34a) !important;
  box-shadow: 0 8px 18px rgba(34, 197, 94, 0.3) !important;
}

.cbo-studio-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

@media (max-width: 900px) {
  .cbo-studio-stepper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cbo-studio-topline-meta .cbo-studio-score--inline {
    display: none;
  }

  .cbo-studio--panel .cbo-studio-main {
    border-radius: 12px;
  }

  .cbo-studio-grid2,
  .cbo-studio-sliders,
  .cbo-studio-review-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .cbo-studio-stepper {
    grid-template-columns: 1fr;
  }
}
.cbo-template-page {
  width: 100%;
}

.cbo-studio-boot {
  min-height: 40vh;
  display: grid;
  place-items: center;
  padding: 2rem;
}

.cbo-studio-boot-card {
  padding: 1.25rem 1.5rem;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #334155;
  font-weight: 650;
}
.cbo-settings-page {
  max-width: 960px;
  animation: cboSettingsFade 0.45s ease-out;
}

@keyframes cboSettingsFade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cbo-settings-page-header {
  margin-bottom: 1.25rem;
}

.cbo-settings-page-lead {
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
  color: var(--text-secondary, #64748b);
  line-height: 1.5;
  max-width: 44rem;
}

.cbo-settings-sections {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.cbo-settings-panel {
  background: #fff;
  border: 1px solid #e8ecf1;
  border-radius: 14px;
  padding: 1.35rem 1.5rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.cbo-settings-panel--accent {
  border-color: rgba(100, 156, 228, 0.35);
  background: linear-gradient(135deg, var(--brand-blue-bg-start, #e8f4fc) 0%, #fff 55%);
}

.cbo-settings-panel--muted {
  background: #fafbfc;
}

.cbo-settings-panel-title {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--brand-blue-deep, #2e74b5);
}

.cbo-settings-panel-hint {
  margin: 0 0 1rem;
  font-size: 0.85rem;
  color: var(--text-secondary, #64748b);
}

.cbo-settings-brand-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: flex-start;
}

.cbo-settings-logo-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  flex: 0 0 auto;
}

.cbo-settings-logo-img {
  width: 88px;
  height: 88px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid #e2e8f0;
  background: #fff;
}

.cbo-settings-logo-img--muted {
  object-fit: contain;
  padding: 10px;
  opacity: 0.85;
}

.cbo-settings-logo-fallback {
  width: 88px;
  height: 88px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--brand-blue-deep, #2e74b5);
  background: linear-gradient(
    145deg,
    var(--brand-blue-soft-tint, rgba(100, 156, 228, 0.22)),
    rgba(255, 255, 255, 0.98)
  );
  border: 2px solid rgba(100, 156, 228, 0.45);
  box-shadow: 0 2px 10px rgba(46, 116, 181, 0.1);
  flex-shrink: 0;
  animation: cboSettingsLogoPop 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes cboSettingsLogoPop {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.cbo-settings-logo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.cbo-settings-file {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.cbo-settings-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem 1.25rem;
}

.cbo-settings-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.cbo-settings-field--full {
  grid-column: 1 / -1;
}

.cbo-settings-field label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary, #64748b);
}

.cbo-settings-field input,
.cbo-settings-field textarea {
  font: inherit;
  padding: 0.55rem 0.65rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #0f172a;
}

.cbo-settings-input-readonly {
  background: #f1f5f9 !important;
  color: #334155 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  cursor: default;
}

.cbo-settings-field textarea {
  resize: vertical;
  min-height: 5rem;
}

.cbo-settings-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  border: 1px solid transparent;
}

.cbo-settings-btn--primary {
  background: var(--brand-blue-primary, #649ce4);
  color: #fff;
  border-color: var(--brand-blue-deep, #2e74b5);
}

.cbo-settings-btn--primary:hover:not(:disabled) {
  filter: brightness(1.03);
}

.cbo-settings-btn--primary:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.cbo-settings-btn--secondary {
  background: #fff;
  border-color: #cbd5e1;
  color: #0f172a;
}

.cbo-settings-btn--secondary:hover {
  border-color: var(--brand-blue-primary, #649ce4);
  color: var(--brand-blue-deep, #2e74b5);
}

.cbo-settings-btn--ghost {
  background: transparent;
  border: none;
  color: #64748b;
  text-decoration: underline;
  padding: 0.35rem 0.5rem;
}

.cbo-settings-footer-actions {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid #e8ecf1;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.cbo-settings-dl--compact > div {
  grid-template-columns: 10rem 1fr;
}

.cbo-settings-muted {
  color: var(--text-secondary, #666);
  margin: 0;
}

.cbo-settings-error {
  color: #b71c1c;
  background: #ffebee;
  border: 1px solid #ffcdd2;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.cbo-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-top: 1rem;
}

.cbo-settings-card {
  background: #fafbfc;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
}

.cbo-settings-card--wide {
  grid-column: 1 / -1;
}

.cbo-settings-card-title {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--brand-blue-deep, #2e74b5);
}

.cbo-settings-dl {
  margin: 0;
}

.cbo-settings-dl > div {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 0.5rem 1rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid #eee;
  font-size: 0.9rem;
}

.cbo-settings-dl > div:last-child {
  border-bottom: none;
}

.cbo-settings-dl dt {
  margin: 0;
  color: var(--text-secondary, #666);
  font-weight: 600;
}

.cbo-settings-dl dd {
  margin: 0;
  color: var(--text-primary, #222);
}

.cbo-settings-locations {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--text-primary, #333);
  line-height: 1.5;
}

.cbo-settings-actions {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 2px solid #f0f0f0;
}

.cbo-settings-logout {
  padding: 0.65rem 1.5rem;
  border-radius: 8px;
  border: 1px solid #c62828;
  background: #fff;
  color: #c62828;
  font-weight: 600;
  cursor: pointer;
}

.cbo-settings-logout:hover {
  background: #ffebee;
}
.staff-community-referrals-page .dashboard-content {
  max-width: 1200px;
  margin: 0 auto;
}

.staff-cr-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.staff-cr-title {
  margin: 0 0 0.35rem;
  font-size: 1.65rem;
  color: #0f172a;
}

.staff-cr-page-lead {
  margin: 0;
  max-width: 44rem;
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.45;
}

.staff-cr-subtitle {
  margin: 0;
  max-width: 42rem;
  color: #475569;
  line-height: 1.5;
  font-size: 0.95rem;
}

.staff-cr-back {
  flex-shrink: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--brand-blue-deep, #2e74b5);
  text-decoration: none;
  padding: 0.4rem 0.65rem;
  border-radius: 8px;
  border: 1px solid rgba(46, 116, 181, 0.35);
}

.staff-cr-back:hover {
  background: rgba(100, 156, 228, 0.12);
}

.staff-cr-steps {
  margin: 0 0 1.25rem;
  padding: 0.85rem 1rem 0.85rem 1.5rem;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #334155;
  font-size: 0.875rem;
  line-height: 1.5;
}

.staff-cr-steps li {
  margin-bottom: 0.25rem;
}

.staff-cr-steps li:last-child {
  margin-bottom: 0;
}

.staff-cr-section {
  margin-bottom: 1.75rem;
  padding: 1.1rem 1.25rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.staff-cr-section--table {
  padding-top: 0.5rem;
}

.staff-cr-section-title {
  margin: 0 0 0.65rem;
  font-size: 1.05rem;
  color: #0f172a;
}

.staff-cr-muted {
  font-size: 0.875rem;
  color: #64748b;
  line-height: 1.45;
  margin: 0 0 0.65rem;
}

.staff-cr-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: 0.35rem;
}

.staff-cr-textarea {
  width: 100%;
  max-width: 40rem;
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  padding: 0.5rem 0.65rem;
  font: inherit;
  margin-bottom: 0.65rem;
}

.staff-cr-select {
  display: block;
  width: 100%;
  max-width: 28rem;
  margin-bottom: 0.5rem;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  font: inherit;
}

.staff-cr-hint {
  margin-top: 0.25rem;
  margin-bottom: 0.75rem;
  font-size: 0.84rem;
}

.staff-cr-consent-preview {
  margin: 0 0 1rem;
  width: 100%;
}

.staff-cr-consent-preview-card {
  width: 100%;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  overflow: hidden;
}

.staff-cr-consent-preview-label {
  display: block;
  padding: 0.6rem 0.85rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
}

.staff-cr-consent-preview-body {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0.85rem 1rem;
  border: none;
  border-radius: 0;
  background: transparent;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #1e293b;
  white-space: pre-wrap;
  word-break: break-word;
}

.staff-cr-error {
  color: #b91c1c;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}

.staff-cr-error-banner {
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border-radius: 10px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  line-height: 1.45;
}

.staff-cr-success {
  color: #166534;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}

.staff-cr-actions {
  margin-top: 0.35rem;
}

.staff-cr-table-wrap {
  overflow-x: auto;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.staff-cr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.staff-cr-table th,
.staff-cr-table td {
  text-align: left;
  padding: 0.45rem 0.65rem;
  border-bottom: 1px solid #f1f5f9;
}

.staff-cr-table th {
  background: #f8fafc;
  font-weight: 600;
  color: #475569;
}

.staff-cr-cell-clip {
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.staff-cr-accepted-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.staff-cr-accepted-card {
  border: 1px solid #bbf7d0;
  background: #f0fdf4;
  border-radius: 10px;
  padding: 0.85rem 1rem;
}

.staff-cr-badge {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 0.75rem;
  color: #166534;
  font-weight: 600;
}

.staff-cr-student-bar {
  margin-bottom: 0.25rem;
  padding: 1rem 1.15rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.staff-cr-student-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: 0.4rem;
}

.staff-cr-student-select {
  width: 100%;
  max-width: 32rem;
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  padding: 0.55rem 0.65rem;
  font: inherit;
  font-size: 0.95rem;
  color: #0f172a;
  background: #fff;
}

.staff-cr-student-meta {
  margin: 0.45rem 0 0;
  font-size: 0.8rem;
  color: #64748b;
}

.staff-cr-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #e2e8f0;
  margin: 1rem 0 1.25rem;
}

.staff-cr-tab {
  appearance: none;
  border: none;
  background: none;
  padding: 0.65rem 1.1rem 0.75rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  border-radius: 8px 8px 0 0;
}

.staff-cr-tab:hover {
  color: #334155;
  background: rgba(100, 156, 228, 0.08);
}

.staff-cr-tab--active {
  color: var(--brand-blue-deep, #2e74b5);
  border-bottom-color: var(--brand-blue-primary, #649ce4);
}

.staff-cr-resources-hint {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
  font-size: 0.875rem;
  line-height: 1.45;
}

.staff-cr-resources-panel .staff-cr-zip-row {
  margin-bottom: 1.25rem;
}

.staff-cr-zip-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.staff-cr-zip-input {
  flex: 1;
  min-width: 8rem;
  max-width: 14rem;
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  padding: 0.5rem 0.65rem;
  font: inherit;
}

.staff-cr-zip-refresh {
  padding: 0.5rem 1.15rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.875rem;
  border: none;
  cursor: pointer;
  color: #fff;
  background: var(--brand-blue-deep, #2e74b5);
}

.staff-cr-zip-refresh:hover {
  background: #2563a8;
}

.staff-cr-zip-helper {
  margin: 0;
  font-size: 0.8rem;
  color: #64748b;
}

.staff-cr-org-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.staff-cr-org-card {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1rem 1.15rem 1.1rem;
  background: #fafbfc;
}

.staff-cr-org-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}

.staff-cr-org-name {
  font-weight: 700;
  font-size: 1.05rem;
  color: #0f172a;
}

.staff-cr-org-ein {
  flex-shrink: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: #475569;
}

.staff-cr-org-ein--muted {
  font-weight: 500;
  color: #94a3b8;
}

.staff-cr-org-desc {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  color: #475569;
  line-height: 1.45;
}

.staff-cr-org-line {
  margin: 0 0 0.45rem;
  font-size: 0.85rem;
  color: #334155;
  line-height: 1.4;
}

.staff-cr-org-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  align-items: center;
  font-size: 0.85rem;
  color: #475569;
  margin-bottom: 0.35rem;
}

.staff-cr-org-web {
  color: var(--brand-blue-deep, #2e74b5);
  font-weight: 600;
  text-decoration: none;
}

.staff-cr-org-web:hover {
  text-decoration: underline;
}

.staff-cr-org-tags {
  margin: 0 0 0.85rem;
  font-size: 0.8rem;
  color: #64748b;
}

.staff-cr-org-cta {
  width: 100%;
  margin-top: 0.15rem;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}

.staff-cr-accepted-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.65rem;
}

/* Consent history tab */
.staff-cr-consent-history .staff-cr-history-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  margin-bottom: 1rem;
}

.staff-cr-history-filter-label {
  margin: 0;
}

.staff-cr-history-filter {
  max-width: 12rem;
}

.staff-cr-table-wrap--wide {
  overflow-x: auto;
}

.staff-cr-table--history {
  font-size: 0.82rem;
}

.staff-cr-table--history th,
.staff-cr-table--history td {
  vertical-align: top;
}

.staff-cr-cell-notes {
  max-width: 14rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.staff-cr-pill {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.staff-cr-pill--pending {
  background: rgba(100, 156, 228, 0.18);
  color: var(--brand-blue-deep, #2e74b5);
  border: 1px solid rgba(46, 116, 181, 0.35);
}

.staff-cr-pill--accepted {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.staff-cr-pill--rejected {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.staff-cr-pill--unknown {
  background: #f1f5f9;
  color: #475569;
}

.staff-cr-pending-org-banner {
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  background: #fff8e7;
  border: 1px solid #d19900;
  color: #713f12;
  font-size: 0.875rem;
  line-height: 1.45;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}

.staff-cr-pending-org-banner--ready {
  background: #ecfdf5;
  border-color: #6ee7b7;
  color: #065f46;
}

.staff-cr-resources-loop-hint {
  margin: 0 0 1rem;
  padding: 0.65rem 0.85rem;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.staff-cr-resources-loop-hint p {
  margin: 0.25rem 0;
}

.staff-cr-section-sub {
  margin: -0.35rem 0 0.85rem;
  max-width: 42rem;
}

.staff-cr-direct-referral-cta {
  margin: 0.75rem 0 1rem;
  padding: 0.85rem 1rem;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.staff-cr-direct-referral-cta p {
  margin: 0;
  flex: 1 1 12rem;
}

.staff-cr-selected-student {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  color: #334155;
}

.staff-cr-needs-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.staff-cr-need-chip {
  display: inline-block;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
}

.staff-cr-need-chip--direct {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.staff-cr-need-chip--consent {
  background: #fff8e7;
  color: #92400e;
  border: 1px solid #fcd34d;
}

.staff-cr-consent-send-box {
  margin: 1rem 0;
  padding: 1rem 1.1rem;
  border-radius: 10px;
  background: #faf5ff;
  border: 1px solid #ddd6fe;
}

.staff-cr-consent-send-title {
  margin: 0 0 0.65rem;
  font-size: 0.95rem;
  color: #5b21b6;
}

.staff-cr-consent-send-note {
  margin: 0 0 0.75rem;
}

.staff-cr-table--accepted th,
.staff-cr-table--accepted td {
  vertical-align: middle;
}

.staff-cr-table--accepted .btn-referral-primary {
  white-space: nowrap;
  font-size: 0.82rem;
  padding: 0.4rem 0.75rem;
}

.staff-cr-accepted-section {
  border-left: 3px solid #22c55e;
}

.staff-cr-consent-panel {
  border-left: 3px solid #7a39bb;
}

.staff-cr-consent-approved {
  margin: 0;
  padding: 0.65rem 0.85rem;
  background: #ecfdf5;
  border-radius: 8px;
  color: #065f46;
  font-size: 0.875rem;
}

.staff-cr-status-guide {
  margin: 0.75rem 0 1rem;
  padding: 0.85rem 1rem;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  color: #0c4a6e;
  font-size: 0.875rem;
  line-height: 1.45;
}

.staff-cr-status-guide strong {
  display: block;
  margin-bottom: 0.35rem;
  color: #075985;
}

.staff-cr-status-guide ul {
  margin: 0.35rem 0 0.5rem;
  padding-left: 1.2rem;
}

.staff-cr-status-guide li {
  margin: 0.25rem 0;
}

.staff-cr-status-guide__tip {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: #0369a1;
}

.staff-cr-inline-link {
  display: inline;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  color: #0e7490;
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.staff-cr-inline-link:hover {
  color: #155e75;
}

.staff-cr-empty-accepted,
.staff-cr-empty-orgs {
  display: grid;
  gap: 0.35rem;
}

#staff-cr-cbo-partners {
  scroll-margin-top: 1.25rem;
}

.staff-cr-consent-pending {
  margin: 0;
  padding: 0.65rem 0.85rem;
  background: #eff6ff;
  border-radius: 8px;
  color: #1e40af;
  font-size: 0.875rem;
}

.staff-cr-org-card--blocked {
  opacity: 0.92;
  border-color: #fcd34d;
}

.staff-cr-org-consent-note {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  color: #b45309;
  font-weight: 600;
}

.staff-cr-referral-export-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 8px;
}

.staff-cr-referral-export-bar .staff-cr-muted {
  margin: 0;
  flex: 1;
  min-width: 200px;
}

.staff-cr-referral-export-btn {
  flex-shrink: 0;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  background: #1e40af;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.staff-cr-referral-export-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}
.parent-header {
  background: var(--white);
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  box-shadow: 0 4px 12px var(--border-light);
  border-bottom: 1px solid var(--border-light);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.logo-image {
  height: 40px;
  width: auto;
}

.logo-text {
  font-size: 1.5rem;
  font-weight: 700;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.header-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.parent-name {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--primary-blue);
}

.header-subtitle {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.header-alerts {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--border-light);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid var(--border-medium);
}

.header-alerts:hover {
  background: var(--shadow-medium);
}

.alert-badge {
  background: var(--gradient-primary);
  color: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  box-shadow: 0 2px 8px var(--focus-ring);
}

.alert-text {
  font-size: 0.875rem;
  color: var(--text-primary);
  font-weight: 500;
}

.user-avatar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.avatar-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.9375rem;
  box-shadow: 0 2px 8px var(--focus-ring);
  transition: transform 0.2s ease;
  overflow: hidden;
  position: relative;
}

.parent-header .avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.parent-header .avatar-initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-avatar:hover .avatar-circle {
  transform: scale(1.05);
}

.user-menu-container {
  position: relative;
}

.user-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  min-width: 250px;
  z-index: 1000;
  overflow: hidden;
  animation: dropdownFadeIn 0.2s ease;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dropdown-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--border-light);
  border-bottom: 1px solid var(--border-medium);
}

.dropdown-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1.125rem;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

.dropdown-user-info {
  flex: 1;
  min-width: 0;
}

.dropdown-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropdown-email {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropdown-divider {
  height: 1px;
  background: var(--border-light);
  margin: 0.5rem 0;
}

.dropdown-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: none;
  border: none;
  text-align: left;
  font-size: 0.9375rem;
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.dropdown-item:hover {
  background: var(--border-light);
}

.dropdown-item.logout-item {
  color: #f44336;
}

.dropdown-item.logout-item:hover {
  background: #ffebee;
}

.dropdown-icon {
  font-size: 1.125rem;
  width: 24px;
  text-align: center;
}

@media (max-width: 768px) {
  .parent-header {
    padding: 0 1rem;
  }

  .header-center {
    display: none;
  }

  .logo-text {
    display: none;
  }
}

.parent-sidebar {
  width: 250px;
  background-color: var(--primary-blue);
  min-height: calc(100vh - 80px);
  padding: 2rem 0;
  position: sticky;
  top: 80px;
  overflow-y: auto;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0 1rem;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s ease;
  text-align: left;
  font-family: 'Inter', sans-serif;
  position: relative;
  animation: slideInNav 0.5s ease-out backwards;
}

.nav-item:nth-child(1) {
  animation-delay: 0.1s;
}

.nav-item:nth-child(2) {
  animation-delay: 0.2s;
}

.nav-item:nth-child(3) {
  animation-delay: 0.3s;
}

.nav-item:nth-child(4) {
  animation-delay: 0.4s;
}

.nav-item:nth-child(5) {
  animation-delay: 0.5s;
}

.nav-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px;
  height: 0;
  background-color: white;
  border-radius: 0 3px 3px 0;
  transition: all 0.3s ease;
}

.nav-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  transform: translateX(5px);
}

.nav-item:hover::before {
  transform: translateY(-50%) scaleY(1);
  height: 60%;
}

.nav-item.active {
  background-color: rgba(255, 255, 255, 0.15);
  color: white;
  font-weight: 600;
}

.nav-item.active::before {
  transform: translateY(-50%) scaleY(1);
  height: 60%;
}

.nav-icon {
  font-size: 1.3rem;
  transition: transform 0.3s ease;
  width: 24px;
  text-align: center;
}

.nav-item:hover .nav-icon {
  transform: scale(1.2);
}

@keyframes slideInNav {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.nav-label {
  flex: 1;
}

/* Scrollbar styling */
.parent-sidebar::-webkit-scrollbar {
  width: 6px;
}

.parent-sidebar::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

.parent-sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 10px;
}

.parent-sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

@media (max-width: 768px) {
  .parent-sidebar {
    position: fixed;
    left: -250px;
    top: 80px;
    z-index: 999;
    transition: left 0.3s ease;
  }

  .parent-sidebar.open {
    left: 0;
  }
}

.child-card {
  background: var(--white);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px var(--border-light);
  border: 1px solid var(--border-light);
  transition: all 0.4s ease;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: relative;
  overflow: hidden;
}

.child-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--gradient-primary);
  transform: scaleY(0);
  transition: transform 0.3s ease;
}

.child-card:hover {
  box-shadow: 0 8px 24px var(--shadow-medium);
  transform: translateY(-4px);
  border-left-color: var(--primary-blue);
}

.child-card:hover::before {
  transform: scaleY(1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.child-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
}

.child-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 600;
  flex-shrink: 0;
  box-shadow: 0 4px 12px var(--focus-ring);
}

.child-details {
  flex: 1;
}

.child-name {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--primary-blue);
  margin: 0 0 0.25rem 0;
}

.child-grade {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin: 0;
}

.status-badge {
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.wellness-metrics {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.metric-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid #f0f0f0;
}

.metric-item:last-child {
  border-bottom: none;
}

.metric-label {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.metric-value {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--primary-blue);
}

.activity-summary {
  padding: 1rem;
  background: rgba(74, 144, 226, 0.03);
  border-radius: 8px;
  border-left: 4px solid var(--primary-blue);
}

.summary-text {
  font-size: 0.875rem;
  color: var(--text-primary);
  line-height: 1.6;
  margin: 0;
}

.card-actions {
  display: flex;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 2px solid #f0f0f0;
}

.action-btn {
  flex: 1;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.view-btn {
  background: var(--calm-blue-50);
  color: var(--primary-blue);
  border: 1px solid var(--border-medium);
}

.view-btn:hover {
  background: var(--border-light);
  transform: translateY(-1px);
}

.request-btn {
  background: var(--gradient-primary);
  color: white;
}

.request-btn:hover {
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue) 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--focus-ring);
}

@media (max-width: 768px) {
  .card-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .card-actions {
    flex-direction: column;
  }
}

.parent-appointment-calendar {
  background: var(--white);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
  margin-bottom: 2rem;
}

.appointment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--border-light);
}

.appointment-header h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.book-appointment-btn {
  padding: 0.75rem 1.5rem;
  background: var(--gradient-primary);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.book-appointment-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.appointments-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.appointment-item {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr auto auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  background: var(--bg-hover);
  border-radius: 8px;
  border: 1px solid var(--border-light);
  transition: all 0.3s ease;
}

.appointment-item:hover {
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.appointment-child {
  font-weight: 600;
  color: var(--text-primary);
}

.appointment-date {
  font-weight: 600;
  color: var(--text-primary);
}

.appointment-time {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.appointment-type {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.75rem;
  background: var(--primary-blue-soft);
  color: var(--primary-blue);
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 500;
}

.appointment-type-label {
  font-weight: 600;
}

.appointment-cbo-badge {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  background: rgba(46, 116, 181, 0.15);
  color: var(--brand-blue-deep, #2e74b5);
}

.parent-appointment-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  padding-top: 0.35rem;
}

.parent-apt-btn {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.45rem 0.9rem;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: opacity 0.2s ease, transform 0.15s ease;
}

.parent-apt-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.parent-apt-btn--primary {
  background: var(--brand-blue-primary, #649ce4);
  color: #fff;
  border-color: var(--brand-blue-deep, #2e74b5);
}

.parent-apt-btn--primary:hover:not(:disabled) {
  transform: translateY(-1px);
}

.parent-apt-btn--ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--border-light);
}

.parent-apt-btn--ghost:hover:not(:disabled) {
  border-color: var(--brand-blue-primary, #649ce4);
  color: var(--brand-blue-deep, #2e74b5);
}

.appointment-status {
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: capitalize;
}

.status-pending {
  background: var(--warning-light);
  color: var(--warning);
}

.status-scheduled {
  background: var(--info-light);
  color: var(--info);
}

.status-completed {
  background: var(--success-light);
  color: var(--success);
}

.status-cancelled {
  background: var(--error-light);
  color: var(--error);
}

.no-appointments {
  text-align: center;
  padding: 2rem;
  color: var(--text-secondary);
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.modal-content {
  background: var(--white);
  border-radius: 16px;
  padding: 2rem;
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--border-light);
}

.modal-header h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.modal-close {
  background: none;
  border: none;
  font-size: 2rem;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

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

.booking-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.95rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 0.75rem;
  border: 2px solid var(--border-light);
  border-radius: 8px;
  font-size: 1rem;
  font-family: 'Inter', sans-serif;
  transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.form-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 1rem;
}

.form-actions button {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.form-actions button[type="button"] {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.form-actions button[type="button"]:hover {
  background: var(--border-light);
}

.form-actions button[type="submit"] {
  background: var(--gradient-primary);
  color: white;
}

.form-actions button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.form-actions button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}


.parent-consent-panel {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1px solid #fcd34d;
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}

.parent-consent-panel-title {
  margin: 0 0 0.75rem;
  font-size: 1.1rem;
  color: #78350f;
}

.parent-consent-domain {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: #01696f;
}

.parent-consent-flagged {
  margin: 0 0 0.65rem;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-family: inherit;
  font-size: 0.85rem;
  line-height: 1.45;
  color: #1e293b;
  white-space: pre-wrap;
}

.parent-consent-staff-wrap {
  margin-top: 0.25rem;
}

.parent-consent-staff-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  margin-bottom: 0.2rem;
}

.parent-consent-panel-error {
  color: #b91c1c;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

.parent-consent-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.parent-consent-card {
  background: #fff;
  border-radius: 10px;
  padding: 0.75rem 1rem;
  border: 1px solid #fde68a;
}

.parent-consent-meta {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 0.8rem;
  color: #78716c;
}

.parent-consent-msg {
  margin: 0.5rem 0;
  font-size: 0.875rem;
  color: #44403c;
  line-height: 1.45;
}

.parent-consent-actions {
  margin-top: 0.5rem;
}

.parent-consent-btn {
  border-radius: 8px;
  padding: 0.4rem 0.9rem;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  border: 1px solid transparent;
}

.parent-consent-btn.primary {
  background: var(--brand-blue-deep, #2e74b5);
  color: #fff;
}

.parent-consent-btn.danger {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}

.parent-consent-btn.ghost {
  background: transparent;
  color: #57534e;
  border-color: #d6d3d1;
}

.parent-consent-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.parent-consent-modal {
  background: #fff;
  border-radius: 12px;
  max-width: 420px;
  width: 100%;
  padding: 1.25rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.parent-consent-modal h3 {
  margin: 0 0 0.5rem;
}

.parent-consent-modal-lead {
  margin: 0 0 0.75rem;
}

.parent-consent-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: #334155;
}

.parent-consent-modal textarea {
  width: 100%;
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  padding: 0.5rem;
  font: inherit;
  margin-bottom: 0.75rem;
}

.parent-consent-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

.parent-consent-success-modal h3 {
  color: #065f46;
}

.parent-consent-success-message {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #334155;
}

.parent-consent-success-actions {
  justify-content: center;
}
.parent-dashboard {
  min-height: 100vh;
  background: linear-gradient(135deg, #FEFEFE 0%, #FAF8F5 50%, #F5F7FA 100%);
}

.dashboard-layout {
  display: flex;
  min-height: calc(100vh - 80px);
}

.dashboard-content {
  flex: 1;
  padding: 2rem;
  overflow-y: auto;
}

.dashboard-main {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.welcome-section {
  background: var(--white);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 12px var(--border-light);
  border: 1px solid var(--border-light);
}

.welcome-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary-blue);
  margin: 0 0 0.5rem 0;
}

.welcome-subtitle {
  font-size: 1.125rem;
  color: var(--text-secondary);
  margin: 0;
}

/* Quick Stats Grid - Adapted from Student Dashboard */
.quick-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.stat-card {
  background: var(--white);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px var(--border-light);
  display: flex;
  align-items: center;
  gap: 1.25rem;
  transition: all 0.4s ease;
  border-left: 4px solid transparent;
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--gradient-primary);
  transform: scaleY(0);
  transition: transform 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px var(--shadow-medium);
  border-left-color: var(--primary-blue);
}

.stat-card:hover::before {
  transform: scaleY(1);
}

.stat-icon-wrapper {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.stat-card:hover .stat-icon-wrapper {
  transform: scale(1.1) rotate(5deg);
}

.stat-icon {
  font-size: 1.75rem;
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--primary-blue);
  margin-bottom: 0.25rem;
  transition: color 0.3s ease;
}

.stat-card:hover .stat-value {
  color: var(--primary-blue);
}

.stat-label {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.children-section {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.section-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-blue);
  margin: 0;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.children-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 1.5rem;
}

.bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  min-height: 500px;
}

.grid-col {
  display: flex;
  flex-direction: column;
}

/* Responsive Design */
@media (max-width: 1200px) {
  .bottom-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .dashboard-content {
    padding: 1rem;
  }

  .children-grid {
    grid-template-columns: 1fr;
  }

  .quick-stats-grid {
    grid-template-columns: 1fr;
  }

  .welcome-title {
    font-size: 1.5rem;
  }

  .welcome-subtitle {
    font-size: 1rem;
  }
}

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

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dashboard-content {
  animation: fadeIn 0.5s ease-out;
}

.welcome-section {
  animation: slideInUp 0.6s ease-out 0.1s backwards;
}

.quick-stats-grid {
  animation: fadeIn 0.6s ease-out 0.2s backwards;
}

/* Stagger animation for stat cards */
.stat-card:nth-child(1) {
  animation: slideInUp 0.6s ease-out 0.3s backwards;
}

.stat-card:nth-child(2) {
  animation: slideInUp 0.6s ease-out 0.35s backwards;
}

.stat-card:nth-child(3) {
  animation: slideInUp 0.6s ease-out 0.4s backwards;
}

.stat-card:nth-child(4) {
  animation: slideInUp 0.6s ease-out 0.45s backwards;
}

.children-section {
  animation: slideInUp 0.8s ease-out 0.5s backwards;
}

.bottom-grid {
  animation: slideInUp 0.8s ease-out 0.6s backwards;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.2s ease;
}

.modal-content {
  background: var(--white);
  border-radius: 16px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px var(--focus-ring);
  border: 1px solid var(--border-light);
  animation: slideUp 0.3s ease;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 2px solid #f0f0f0;
}

.modal-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-blue);
  margin: 0;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.modal-close {
  background: none;
  border: none;
  font-size: 2rem;
  color: var(--text-muted);
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.modal-close:hover {
  background: var(--border-light);
  color: var(--primary-blue);
}

.modal-form {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--primary-blue);
}

.required {
  color: #f44336;
}

.child-display {
  padding: 1rem;
  background: rgba(74, 144, 226, 0.03);
  border-radius: 8px;
  border-left: 4px solid var(--primary-blue);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.child-name-display {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--primary-blue);
}

.child-grade-display {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.form-select,
.form-textarea {
  padding: 0.75rem 1rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-family: inherit;
  transition: all 0.2s ease;
  background: white;
}

.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px var(--border-light);
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
}

.form-actions {
  display: flex;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 2px solid #f0f0f0;
}

.btn-cancel,
.btn-submit {
  flex: 1;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-cancel {
  background: var(--calm-blue-50);
  color: var(--primary-blue);
  border: 1px solid var(--border-medium);
}

.btn-cancel:hover {
  background: var(--border-light);
  transform: translateY(-1px);
}

.btn-submit {
  background: var(--gradient-primary);
  color: white;
}

.btn-submit:hover {
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue) 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--focus-ring);
}

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

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

/* Scrollbar styling */
.modal-form::-webkit-scrollbar {
  width: 6px;
}

.modal-form::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.modal-form::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 10px;
}

.modal-form::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

.activity-timeline {
  background: var(--white);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px var(--border-light);
  border: 1px solid var(--border-light);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.timeline-header {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #f0f0f0;
}

.timeline-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary-blue);
  margin: 0;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.timeline-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  padding-left: 2rem;
}

.timeline-list::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--primary-blue) 0%, var(--primary-blue) 100%);
}

.timeline-item {
  display: flex;
  gap: 1rem;
  position: relative;
}

.timeline-icon {
  position: absolute;
  left: -1.5rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  border: 3px solid #faf8f5;
  background: var(--gradient-primary);
  box-shadow: 0 0 0 2px var(--primary-blue), 0 2px 8px var(--focus-ring);
  z-index: 1;
}

.timeline-content {
  flex: 1;
  padding: 1rem;
  background: rgba(74, 144, 226, 0.03);
  border-radius: 8px;
  border-left: 3px solid var(--primary-blue);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.timeline-text {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text-primary);
  line-height: 1.5;
}

.timeline-time {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.empty-timeline {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
}

.empty-timeline p {
  margin: 0;
  font-size: 0.9375rem;
}

/* Scrollbar styling */
.timeline-list::-webkit-scrollbar {
  width: 6px;
}

.timeline-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.timeline-list::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 10px;
}

.timeline-list::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

.parent-children-page {
  min-height: 100vh;
  background: var(--gradient-soft);
}

.dashboard-layout {
  display: flex;
  min-height: calc(100vh - 80px);
}

.dashboard-content {
  flex: 1;
  padding: 2rem;
  overflow-y: auto;
}

.page-header {
  margin-bottom: 2rem;
}

.page-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary-blue);
  margin: 0 0 0.5rem 0;
}

.page-subtitle {
  font-size: 1.125rem;
  color: var(--text-secondary);
  margin: 0;
}

.children-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 1.5rem;
}

/* Detail View Styles */
.detail-header {
  margin-bottom: 2rem;
}

.back-btn {
  background: none;
  border: none;
  color: #20b2aa;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.5rem 0;
  margin-bottom: 1rem;
  transition: all 0.2s ease;
}

.back-btn:hover {
  color: #17a2b8;
  transform: translateX(-4px);
}

.child-detail-header-info {
  margin-top: 0.5rem;
}

.child-detail-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary-blue);
  margin: 0 0 0.5rem 0;
}

.child-detail-subtitle {
  font-size: 1rem;
  color: var(--text-secondary);
  margin: 0;
}

.detail-loading {
  text-align: center;
  padding: 3rem;
  color: var(--text-secondary);
}

.detail-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.5rem;
}

.detail-main {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.detail-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.detail-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.card-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--primary-blue);
  margin: 0 0 1.5rem 0;
  padding-bottom: 1rem;
  border-bottom: 2px solid #f0f0f0;
}

.wellness-stats {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.wellness-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: #fafafa;
  border-radius: 8px;
}

.stat-item-large {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 8px;
  grid-column: 1 / -1;
}

.stat-label {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.stat-value {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--primary-blue);
}

.stat-value-large {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--primary-blue);
  margin-bottom: 0.5rem;
}

.stat-status {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 600;
}

/* Profile Info Grid */
.profile-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.info-item {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background: #fafafa;
  border-radius: 8px;
}

.info-label {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.info-value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* Metrics Grid */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}

.metric-card {
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 8px;
  text-align: center;
}

.metric-card .metric-label {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
  font-weight: 500;
}

.metric-card .metric-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-blue);
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.action-btn {
  width: 100%;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

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

.request-btn {
  background: linear-gradient(135deg, #20b2aa 0%, #17a2b8 100%);
  color: white;
}

.request-btn:hover {
  background: linear-gradient(135deg, #17a2b8 0%, #20b2aa 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(32, 178, 170, 0.3);
}

.view-reports-btn {
  background: #f5f5f5;
  color: var(--text-primary);
}

.view-reports-btn:hover {
  background: #e0e0e0;
}

/* Summary Content */
.summary-content {
  margin-top: 0.5rem;
}

.summary-text {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 1200px) {
  .detail-content {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .dashboard-content {
    padding: 1rem;
  }

  .children-grid {
    grid-template-columns: 1fr;
  }
}

.parent-reports-page {
  min-height: 100vh;
  background: var(--gradient-soft);
}

.dashboard-layout {
  display: flex;
  min-height: calc(100vh - 80px);
}

.dashboard-content {
  flex: 1;
  padding: 2rem;
  overflow-y: auto;
}

.page-header {
  margin-bottom: 2rem;
}

.page-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary-blue);
  margin: 0 0 0.5rem 0;
}

.page-subtitle {
  font-size: 1.125rem;
  color: var(--text-secondary);
  margin: 0;
}

.child-reports-section {
  margin-bottom: 3rem;
}

.section-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--primary-blue);
  margin: 0 0 1.5rem 0;
  padding-bottom: 1rem;
  border-bottom: 2px solid #e0e0e0;
}

.reports-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.report-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.report-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--primary-blue);
  margin: 0 0 1.5rem 0;
  padding-bottom: 1rem;
  border-bottom: 2px solid #f0f0f0;
}

.export-section {
  display: flex;
  gap: 1rem;
  justify-content: center;
  padding: 2rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.export-btn {
  padding: 0.75rem 2rem;
  background: linear-gradient(135deg, #20b2aa 0%, #17a2b8 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.export-btn:hover {
  background: linear-gradient(135deg, #17a2b8 0%, #20b2aa 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(32, 178, 170, 0.3);
}

@media (max-width: 1200px) {
  .reports-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .dashboard-content {
    padding: 1rem;
  }

  .export-section {
    flex-direction: column;
  }

  .export-btn {
    width: 100%;
  }
}

.parent-resources-page {
  min-height: 100vh;
  background: var(--gradient-soft);
}

.dashboard-layout {
  display: flex;
  min-height: calc(100vh - 80px);
}

.dashboard-content {
  flex: 1;
  min-width: 0;
  padding: 2rem;
  overflow-y: auto;
}

.page-header {
  margin-bottom: 2rem;
}

.page-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary-blue);
  margin: 0 0 0.5rem 0;
}

.page-subtitle {
  font-size: 1.125rem;
  color: var(--text-secondary);
  margin: 0;
}

.search-filter-bar {
  margin-bottom: 2rem;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: white;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  margin-bottom: 1rem;
}

.search-icon {
  font-size: 1.25rem;
}

.search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 0.9375rem;
  color: var(--text-primary);
}

.search-input::placeholder {
  color: var(--text-muted);
}

.category-filters {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.category-filter {
  padding: 0.5rem 1rem;
  background: white;
  border: 2px solid #e0e0e0;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.category-filter:hover {
  border-color: #20b2aa;
  color: #20b2aa;
}

.category-filter.active {
  background: #20b2aa;
  border-color: #20b2aa;
  color: white;
}

.resources-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.resource-item {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  transition: all 0.2s ease;
}

.resource-item:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.resource-content {
  flex: 1;
}

.resource-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.75rem;
  gap: 1rem;
}

.resource-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--primary-blue);
  margin: 0;
  flex: 1;
}

.resource-type {
  padding: 0.375rem 0.75rem;
  background: #f0f9f9;
  color: #20b2aa;
  border-radius: 20px;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}

.resource-description {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 0.75rem 0;
}

.resource-contact {
  display: flex;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.contact-label {
  color: var(--text-secondary);
  font-weight: 500;
}

.contact-value {
  color: #20b2aa;
  font-weight: 600;
}

.resource-action-btn {
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #20b2aa 0%, #17a2b8 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.resource-action-btn:hover {
  background: linear-gradient(135deg, #17a2b8 0%, #20b2aa 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(32, 178, 170, 0.3);
}

.no-results {
  text-align: center;
  padding: 4rem 2rem;
  background: white;
  border-radius: 12px;
  color: var(--text-muted);
}

.no-results p {
  font-size: 1.125rem;
  margin: 0;
}

.parent-resources-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #e2e8f0;
}

.parent-resources-tab {
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.parent-resources-tab:hover {
  border-color: var(--brand-blue-primary, #649ce4);
  color: var(--brand-blue-deep, #2e74b5);
}

.parent-resources-tab.is-active {
  background: linear-gradient(135deg, var(--brand-blue-primary, #649ce4), var(--brand-blue-deep, #2e74b5));
  border-color: transparent;
  color: #fff;
}

.parent-sdoh-section-wrap {
  margin-top: 0.5rem;
}

.parent-resources-referrals-section {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 2px solid #e2e8f0;
}

.parent-resources-section-heading {
  margin: 0 0 0.35rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--primary-blue);
}

.parent-resources-section-lead {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.parent-sdoh-child-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.parent-sdoh-child-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-secondary, #64748b);
}

.parent-sdoh-child-select {
  min-width: 200px;
  padding: 0.45rem 0.65rem;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  font-size: 0.95rem;
  color: #0f172a;
  background: #fff;
}

.parent-sdoh-context {
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
  color: #64748b;
  font-weight: 600;
}

.parent-sdoh-cbo-note {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: #475569;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.parent-sdoh-empty {
  text-align: center;
  max-width: 420px;
  margin: 2rem auto;
}

.parent-sdoh-empty p {
  line-height: 1.55;
  margin-bottom: 1rem;
}

.parent-sdoh-embed .sdoh-student-title {
  font-size: 1.5rem;
}

@media (max-width: 768px) {
  .dashboard-content {
    padding: 1rem;
  }

  .resource-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .resource-action-btn {
    width: 100%;
  }

  .category-filters {
    overflow-x: auto;
    flex-wrap: nowrap;
  }
}

.parent-resources-subnav {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 1.25rem;
  padding: 0.35rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  width: fit-content;
}

.parent-resources-subnav-link {
  padding: 0.45rem 0.9rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #64748b;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.parent-resources-subnav-link:hover {
  color: #334155;
  background: #f1f5f9;
}

.parent-resources-subnav-link.is-active {
  color: #fff;
  background: var(--primary-blue, #2e74b5);
}

.parent-resource-activity-back {
  display: inline-block;
  margin-bottom: 0.65rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary-blue, #2e74b5);
  text-decoration: none;
}

.parent-resource-activity-back:hover {
  text-decoration: underline;
}

.parent-resource-activity-muted {
  color: #64748b;
  font-size: 0.9rem;
}

.parent-resource-activity-child-bar {
  margin-bottom: 1rem;
  max-width: 20rem;
}

.parent-resource-activity-child-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: 0.35rem;
}

.parent-resource-activity-child-select {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 0.55rem 0.65rem;
  font: inherit;
  font-size: 0.95rem;
  background: #fff;
}

.parent-resource-activity-empty-card {
  padding: 1.25rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

.parent-resource-activity-link-btn {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.45rem 0.9rem;
  border-radius: 8px;
  background: var(--primary-blue, #2e74b5);
  color: #fff;
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
}

.parent-resources-overview-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.25rem;
  padding: 1rem 1.15rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.parent-resources-overview-link:hover {
  border-color: #94a3b8;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.parent-resources-overview-link-title {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  font-weight: 600;
  color: #0f172a;
}

.parent-resources-overview-link-text {
  margin: 0;
  font-size: 0.85rem;
  color: #64748b;
  line-height: 1.4;
}

.parent-resources-overview-link-arrow {
  font-size: 1.25rem;
  color: var(--primary-blue, #2e74b5);
  flex-shrink: 0;
}
.parent-child-resource-activity {
  margin: 0 0 1.5rem;
  padding: 1.25rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.parent-child-resource-activity-title {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 600;
  color: #0f172a;
}

.parent-child-resource-activity-lead {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  color: #64748b;
  line-height: 1.4;
}

.parent-child-resource-activity-error {
  color: #b91c1c;
  font-size: 0.85rem;
}

.parent-child-resource-activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.parent-child-resource-activity-list li {
  padding: 0.65rem 0;
  border-bottom: 1px solid #e2e8f0;
}

.parent-child-resource-activity-list li:last-child {
  border-bottom: none;
}

.parent-child-resource-activity-list li.is-redacted {
  opacity: 0.85;
}

.parent-child-resource-activity-row-top {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: flex-start;
}

.parent-child-resource-activity-date {
  font-size: 0.78rem;
  color: #94a3b8;
  white-space: nowrap;
}

.parent-child-resource-activity-meta,
.parent-child-resource-activity-outcome {
  display: block;
  font-size: 0.8rem;
  color: #64748b;
  margin-top: 0.2rem;
}

.parent-child-resource-activity-empty {
  margin: 0;
  font-size: 0.85rem;
  color: #64748b;
}

.parent-child-resource-activity-muted {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  color: #64748b;
}

.parent-child-resource-activity-redacted-hint {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: #b45309;
  font-style: normal;
}

.parent-child-resource-activity-table-wrap {
  overflow-x: auto;
  margin-top: 0.5rem;
}

.parent-child-resource-activity-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.parent-child-resource-activity-table th {
  text-align: left;
  padding: 0.65rem 0.75rem;
  background: #f8fafc;
  border-bottom: 2px solid #e2e8f0;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #64748b;
  white-space: nowrap;
}

.parent-child-resource-activity-table td {
  padding: 0.75rem;
  border-bottom: 1px solid #e2e8f0;
  vertical-align: top;
  color: #1e293b;
  line-height: 1.45;
}

.parent-child-resource-activity-table tbody tr:last-child td {
  border-bottom: none;
}

.parent-child-resource-activity-table tbody tr.is-redacted {
  background: #fffbeb;
}

.parent-activity-cell-date {
  min-width: 7rem;
  white-space: nowrap;
}

.parent-activity-date-main {
  display: block;
  font-weight: 600;
  color: #0f172a;
}

.parent-activity-date-time {
  display: block;
  font-size: 0.78rem;
  color: #94a3b8;
  margin-top: 0.15rem;
}

.parent-activity-resource-name {
  display: block;
  font-weight: 600;
  color: #0f172a;
}

.parent-activity-resource-addr {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.8rem;
  color: #64748b;
}
.parent-settings-page {
  min-height: 100vh;
  background: var(--gradient-soft);
}

.dashboard-layout {
  display: flex;
  min-height: calc(100vh - 80px);
}

.dashboard-content {
  flex: 1;
  padding: 2rem;
  overflow-y: auto;
}

.page-header {
  margin-bottom: 2rem;
}

.page-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary-blue);
  margin: 0 0 0.5rem 0;
}

.page-subtitle {
  font-size: 1.125rem;
  color: var(--text-secondary);
  margin: 0;
}

.settings-sections {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 800px;
}

.settings-section {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.section-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--primary-blue);
  margin: 0 0 1.5rem 0;
  padding-bottom: 1rem;
  border-bottom: 2px solid #f0f0f0;
}

.settings-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--primary-blue);
}

.form-input {
  padding: 0.75rem 1rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 0.9375rem;
  color: var(--text-primary);
  background: #fafafa;
}

.form-input:focus {
  outline: none;
  border-color: #20b2aa;
  background: white;
}

.update-btn {
  padding: 0.75rem 2rem;
  background: linear-gradient(135deg, #20b2aa 0%, #17a2b8 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  align-self: flex-start;
}

.update-btn:hover {
  background: linear-gradient(135deg, #17a2b8 0%, #20b2aa 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(32, 178, 170, 0.3);
}

/* Profile Image Styles for Parent Settings */
.profile-image-container-parent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem;
}

.profile-image-preview-parent {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--primary-blue);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  background: linear-gradient(135deg, var(--primary-blue), var(--primary-blue));
}

.profile-image-preview-parent img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profile-image-placeholder-parent {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-blue), var(--primary-blue));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  font-weight: 600;
  border: 4px solid var(--primary-blue);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.profile-image-edit-parent {
  width: 100%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.profile-image-label-parent {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--primary-blue);
  cursor: pointer;
  padding: 0.75rem 1rem;
  background: #f0f7ff;
  border-radius: 8px;
  border: 2px dashed var(--primary-blue);
  transition: all 0.2s;
  justify-content: center;
}

.profile-image-label-parent:hover {
  background: #e0f0ff;
  border-color: var(--primary-blue);
}

.upload-actions-parent {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.btn-upload-parent {
  padding: 0.75rem 1.5rem;
  background: var(--primary-blue);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.9rem;
}

.btn-upload-parent:hover:not(:disabled) {
  background: #4a3428;
  transform: translateY(-2px);
}

.btn-upload-parent:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
}

.btn-cancel-upload-parent {
  padding: 0.75rem 1.5rem;
  background: #e0e0e0;
  color: var(--text-primary);
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.9rem;
}

.btn-cancel-upload-parent:hover {
  background: #d0d0d0;
}

.profile-image-hint-parent {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
  text-align: center;
}

.settings-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: #fafafa;
  border-radius: 8px;
}

.setting-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}

.setting-label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--primary-blue);
}

.setting-desc {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 26px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.3s;
  border-radius: 26px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
  background-color: #20b2aa;
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(24px);
}

.account-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.action-btn {
  padding: 0.75rem 1.5rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.danger-btn {
  background: white;
  color: #f44336;
  border-color: #f44336;
}

.danger-btn:hover {
  background: #ffebee;
  border-color: #d32f2f;
}

@media (max-width: 768px) {
  .dashboard-content {
    padding: 1rem;
  }

  .settings-section {
    padding: 1.5rem;
  }
}

.parent-profile-page {
  min-height: 100vh;
  background: var(--gradient-soft);
}

.dashboard-layout {
  display: flex;
  min-height: calc(100vh - 80px);
}

.dashboard-content {
  flex: 1;
  padding: 2rem;
  overflow-y: auto;
}

.page-header {
  margin-bottom: 2rem;
}

.page-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary-blue);
  margin: 0 0 0.5rem 0;
}

.page-subtitle {
  font-size: 1.125rem;
  color: var(--text-secondary);
  margin: 0;
}

.profile-content {
  max-width: 900px;
}

.profile-header {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 2rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  margin-bottom: 2rem;
}

.profile-avatar-large {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-blue) 0%, #17a2b8 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

.profile-avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.profile-avatar-initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-header-info {
  flex: 1;
}

.profile-name {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.5rem 0;
}

.profile-role {
  font-size: 1rem;
  color: var(--text-secondary);
  margin: 0;
  padding: 0.25rem 0.75rem;
  background: var(--border-light);
  border-radius: 12px;
  display: inline-block;
}

.profile-section {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  margin-bottom: 1.5rem;
}

.section-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--primary-blue);
  margin: 0 0 1.5rem 0;
  padding-bottom: 1rem;
  border-bottom: 2px solid #f0f0f0;
}

.profile-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.info-label {
  font-size: 0.875rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.info-value {
  font-size: 1rem;
  color: var(--text-primary);
  font-weight: 600;
}

.profile-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.action-btn {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.primary-btn {
  background: linear-gradient(135deg, var(--primary-blue) 0%, #17a2b8 100%);
  color: white;
}

.primary-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(32, 178, 170, 0.3);
}

.secondary-btn {
  background: #f5f5f5;
  color: var(--text-primary);
}

.secondary-btn:hover {
  background: #e0e0e0;
}

@media (max-width: 768px) {
  .dashboard-content {
    padding: 1rem;
  }

  .profile-header {
    flex-direction: column;
    text-align: center;
  }

  .profile-info-grid {
    grid-template-columns: 1fr;
  }
}

.resource-locator {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.resource-header {
  margin-bottom: 1rem;
}

.panel-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-blue);
  margin: 0 0 0.5rem 0;
}

.resource-subtitle {
  color: #666;
  margin: 0;
}

.featured-resource-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  padding: 2rem;
  color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.featured-resource-content {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.featured-resource-icon {
  font-size: 3rem;
}

.featured-resource-info {
  flex: 1;
}

.featured-resource-info h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.5rem;
}

.featured-resource-info p {
  margin: 0 0 1rem 0;
  opacity: 0.9;
}

.featured-resource-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.resource-link-btn {
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  display: inline-block;
}

.resource-link-btn.primary {
  background: white;
  color: #667eea;
}

.resource-link-btn.primary:hover {
  background: #f0f0f0;
  transform: translateY(-2px);
}

.resource-link-btn.secondary {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 2px solid white;
}

.resource-link-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.3);
}

.resources-section {
  margin-top: 2rem;
}

.section-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--primary-blue);
  margin: 0 0 1.5rem 0;
}

.resources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.resource-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.resource-card.clickable {
  cursor: pointer;
}

.resource-card.clickable:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  border-color: var(--primary-blue);
}

.resource-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.resource-category {
  padding: 0.25rem 0.75rem;
  background: #e3f2fd;
  color: var(--primary-blue);
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

.resource-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #333;
  margin: 0 0 0.75rem 0;
}

.resource-description {
  color: #666;
  margin: 0 0 1rem 0;
  line-height: 1.5;
}

.resource-details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.resource-detail {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: #666;
}

.detail-icon {
  font-size: 1rem;
}

.resource-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.resource-link {
  color: var(--primary-blue);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: color 0.2s;
}

.resource-link:hover {
  color: #1976d2;
  text-decoration: underline;
}

/* View Toggle */
.view-toggle-container {
  margin: 2rem 0;
  display: flex;
  justify-content: center;
}

.view-toggle {
  display: flex;
  gap: 0.5rem;
  background: #f0f0f0;
  padding: 4px;
  border-radius: 8px;
}

.view-button {
  padding: 0.75rem 1.5rem;
  border: none;
  background: transparent;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  color: #666;
}

.view-button:hover {
  background: rgba(0, 0, 0, 0.05);
}

.view-button.active {
  background: var(--primary-blue);
  color: white;
}

/* Map Section */
.resource-map-section {
  margin-top: 2rem;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.resource-map-placeholder {
  background: #f0f0f0;
  border-radius: 12px;
  padding: 3rem;
  text-align: center;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.map-overlay {
  width: 100%;
}

.resource-legend {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.legend-icon {
  font-size: 1.5rem;
}

.legend-text {
  font-size: 0.9rem;
  color: #666;
}

.map-note {
  color: #999;
  font-size: 0.85rem;
  margin: 0;
}

/* Modal Styles */
.resource-modal {
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
}

.resource-modal-info {
  margin-bottom: 2rem;
}

.resource-modal-description {
  color: #666;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.resource-modal-detail {
  margin-bottom: 0.75rem;
  color: #333;
}

.resource-modal-detail strong {
  color: var(--primary-blue);
  margin-right: 0.5rem;
}

.resource-modal-detail a {
  color: var(--primary-blue);
  text-decoration: none;
}

.resource-modal-detail a:hover {
  text-decoration: underline;
}

.related-articles-section {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 2px solid #e0e0e0;
}

.related-articles-section h4 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--primary-blue);
  margin: 0 0 1.5rem 0;
}

.articles-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.article-item {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 1.25rem;
  border-left: 4px solid var(--primary-blue);
}

.article-item h5 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #333;
  margin: 0 0 0.5rem 0;
}

.article-item p {
  color: #666;
  line-height: 1.6;
  margin: 0 0 1rem 0;
}

.article-link-btn {
  padding: 0.5rem 1rem;
  background: var(--primary-blue);
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.9rem;
}

.article-link-btn:hover {
  background: #1976d2;
  transform: translateY(-2px);
}

.modal-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e0e0e0;
}

.btn-primary {
  padding: 0.75rem 1.5rem;
  background: var(--primary-blue);
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-primary:hover {
  background: #1976d2;
}

.btn-secondary {
  padding: 0.75rem 1.5rem;
  background: #f0f0f0;
  color: #333;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-secondary:hover {
  background: #e0e0e0;
}
.resources-page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.resources-content {
  flex: 1;
  padding: 2rem;
  animation: fadeIn 0.5s ease-in;
}

.resources-header {
  margin-bottom: 2rem;
  animation: slideDown 0.6s ease-out;
}

.resources-header h1 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary-blue);
  margin-bottom: 0.5rem;
}

.resources-header p {
  font-size: 1.1rem;
  color: var(--text-secondary);
}

.resources-main {
  animation: fadeInUp 0.8s ease-out;
}

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

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mc3-resource-banner {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  border-left: 4px solid #2196f3;
  box-shadow: 0 2px 8px var(--border-medium);
}

.mc3-content {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.mc3-icon {
  font-size: 2.5rem;
  flex-shrink: 0;
}

.mc3-info {
  flex: 1;
}

.mc3-info h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: #1976d2;
  margin: 0 0 0.5rem 0;
}

.mc3-info p {
  font-size: 1rem;
  color: var(--text-secondary);
  margin: 0;
}

.mc3-link-btn {
  padding: 0.75rem 1.5rem;
  background: #2196f3;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  display: inline-block;
}

.mc3-link-btn:hover {
  background: #1976d2;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--focus-ring);
}

@media (max-width: 768px) {
  .mc3-content {
    flex-direction: column;
    align-items: flex-start;
  }

  .mc3-link-btn {
    width: 100%;
    text-align: center;
  }
}

/*
  FILE: frontend/feedback-loop/components/FeedbackWidget.css
  Upgraded pilot feedback UI — step flow, element cards, category chips.
*/

.feedback-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1200;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(15, 118, 110, 0.35);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.feedback-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(15, 118, 110, 0.4);
}

.feedback-fab__icon { font-size: 18px; line-height: 1; }
.feedback-fab__label { line-height: 1; }

.feedback-overlay {
  position: fixed;
  inset: 0;
  z-index: 1300;
  background: rgba(15, 23, 42, 0.5);
  display: flex;
  justify-content: flex-end;
  backdrop-filter: blur(2px);
}

.feedback-panel {
  width: min(100%, 520px);
  height: 100%;
  background: #ffffff;
  padding: 22px 24px 28px;
  overflow-y: auto;
  box-shadow: -16px 0 40px rgba(15, 23, 42, 0.15);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.feedback-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.feedback-panel__header h2 {
  margin: 0 0 4px;
  font-size: 1.35rem;
  color: #0f172a;
}

.feedback-panel__subtitle {
  margin: 0;
  color: #64748b;
  font-size: 0.92rem;
  font-weight: 400;
}

.feedback-close {
  border: none;
  background: #f1f5f9;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 18px;
  color: #475569;
  cursor: pointer;
  flex-shrink: 0;
}

.feedback-close:hover { background: #e2e8f0; }

/* Step indicator */
.feedback-steps {
  display: flex;
  gap: 8px;
  padding: 4px 0 8px;
}

.feedback-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0.45;
  transition: opacity 0.2s;
}

.feedback-step--active,
.feedback-step--done { opacity: 1; }

.feedback-step__dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  background: #e2e8f0;
  color: #64748b;
}

.feedback-step--active .feedback-step__dot {
  background: #0f766e;
  color: #fff;
}

.feedback-step--done .feedback-step__dot {
  background: #ccfbf1;
  color: #0f766e;
}

.feedback-step__label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Selection pills */
.feedback-selection-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.feedback-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #f0fdfa;
  color: #0f766e;
  font-size: 0.82rem;
  font-weight: 600;
  border: 1px solid #99f6e4;
}

/* Sections */
.feedback-section__title {
  margin: 0 0 4px;
  font-size: 1.05rem;
  color: #0f172a;
}

.feedback-section__hint {
  margin: 0 0 14px;
  color: #64748b;
  font-size: 0.9rem;
  font-weight: 400;
}

/* Element grid */
.feedback-element-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
  max-height: 340px;
  overflow-y: auto;
  padding-right: 4px;
}

.feedback-element-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.feedback-element-card:hover {
  border-color: #99f6e4;
  background: #f8fffe;
}

.feedback-element-card--selected {
  border-color: #0f766e;
  background: #f0fdfa;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

.feedback-element-card__icon { font-size: 1.25rem; }
.feedback-element-card__label {
  font-size: 0.88rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.25;
}

.feedback-element-card__desc {
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 400;
  line-height: 1.35;
}

.feedback-element-card__type {
  margin-top: 4px;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #0f766e;
  background: #ccfbf1;
  padding: 2px 8px;
  border-radius: 999px;
}

/* Category cards */
.feedback-category-grid {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

.feedback-category-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 2px;
  padding: 14px 16px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
}

.feedback-category-card__icon {
  grid-row: 1 / span 2;
  font-size: 1.5rem;
  align-self: center;
}

.feedback-category-card__label {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
}

.feedback-category-card__desc {
  font-size: 0.82rem;
  color: #64748b;
  font-weight: 400;
}

.feedback-category-card:hover {
  border-color: var(--cat-color, #0f766e);
  background: var(--cat-bg, #f8fafc);
}

.feedback-category-card--selected {
  border-color: var(--cat-color, #0f766e);
  background: var(--cat-bg, #f0fdfa);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cat-color) 15%, transparent);
}

/* Form */
.feedback-form { display: grid; gap: 14px; }

.feedback-field {
  display: grid;
  gap: 8px;
  color: #0f172a;
  font-weight: 600;
  font-size: 0.9rem;
}

.feedback-field textarea {
  width: 100%;
  font: inherit;
  font-weight: 400;
  padding: 12px 14px;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: #ffffff;
  color: #0f172a;
  resize: vertical;
  min-height: 140px;
  line-height: 1.5;
}

.feedback-field textarea:focus {
  outline: none;
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15);
}

.feedback-context-details {
  font-size: 0.82rem;
  color: #64748b;
}

.feedback-context-details summary {
  cursor: pointer;
  font-weight: 600;
  color: #94a3b8;
}

.feedback-context-details__body {
  margin-top: 8px;
  padding: 10px 12px;
  background: #f8fafc;
  border-radius: 8px;
  display: grid;
  gap: 4px;
}

/* Buttons */
.feedback-nav-row {
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.feedback-primary-btn,
.feedback-secondary-btn {
  border: none;
  border-radius: 10px;
  padding: 12px 18px;
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  transition: opacity 0.15s;
}

.feedback-primary-btn {
  flex: 1;
  background: #0f172a;
  color: #fff;
}

.feedback-primary-btn:hover:not(:disabled) { background: #1e293b; }
.feedback-primary-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.feedback-secondary-btn {
  background: #f1f5f9;
  color: #475569;
  min-width: 88px;
}

.feedback-secondary-btn:hover { background: #e2e8f0; }

/* Messages */
.feedback-message {
  padding: 12px;
  border-radius: 10px;
  font-size: 0.9rem;
}

.feedback-message--error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

/* Success */
.feedback-success-state {
  text-align: center;
  padding: 40px 20px;
}

.feedback-success-state__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: #ecfdf5;
  color: #059669;
  font-size: 1.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feedback-success-state h3 {
  margin: 0 0 8px;
  color: #0f172a;
}

.feedback-success-state p {
  margin: 0;
  color: #64748b;
}

@media (max-width: 480px) {
  .feedback-element-grid { grid-template-columns: 1fr; }
  .feedback-panel { padding: 18px 16px 24px; }
}
.feedback-review {
  flex: 1;
  padding: 1.25rem 1.5rem 2rem;
  overflow-y: auto;
  background: #f1f5f9;
}

.fr-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.fr-header h1 {
  margin: 0 0 0.2rem;
  font-size: 1.35rem;
  color: #0f172a;
}

.fr-header p {
  margin: 0;
  color: #64748b;
  font-size: 0.88rem;
}

.fr-header__actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.fr-count {
  background: #0f766e;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}

.fr-btn {
  border: none;
  border-radius: 8px;
  padding: 0.45rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.fr-btn--primary { background: #0f766e; color: #fff; }
.fr-btn--primary:hover { background: #115e59; }
.fr-btn--ghost { background: #fff; color: #475569; border: 1px solid #cbd5e1; }
.fr-btn--ghost:hover { background: #f8fafc; }

.fr-stats {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
  flex-wrap: wrap;
}

.fr-stat {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e2e8f0;
}

.fr-stat--issue { color: #dc2626; }
.fr-stat--suggestion { color: #d97706; }
.fr-stat--question { color: #2563eb; }

.fr-filters {
  display: grid;
  grid-template-columns: 1fr repeat(4, auto) auto;
  gap: 0.45rem;
  align-items: center;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 0.6rem;
  margin-bottom: 0.65rem;
}

.fr-filters__search,
.fr-filters select {
  padding: 0.5rem 0.65rem;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  font: inherit;
  font-size: 0.84rem;
  background: #fff;
}

.fr-filters select { min-width: 108px; }

.fr-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.65rem;
}

.fr-chip {
  border: 1px solid #99f6e4;
  background: #ecfdf5;
  color: #0f766e;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  cursor: pointer;
}

.fr-chip:hover { background: #d1fae5; }

.fr-alert {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  margin-bottom: 0.75rem;
  font-size: 0.88rem;
}

.fr-loading,
.fr-empty {
  text-align: center;
  padding: 2.5rem 1rem;
  color: #64748b;
  background: #fff;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
}

.fr-empty p { margin: 0 0 0.75rem; }

.fr-table-wrap {
  overflow-x: auto;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
}

.fr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}

.fr-table th,
.fr-table td {
  padding: 0.65rem 0.85rem;
  text-align: left;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: top;
}

.fr-table th {
  background: #f8fafc;
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  white-space: nowrap;
}

.fr-table tbody tr:hover {
  background: #f8fafc;
}

.fr-table tbody tr:last-child td {
  border-bottom: none;
}

.fr-table__row--issue { border-left: 3px solid #dc2626; }
.fr-table__row--suggestion { border-left: 3px solid #d97706; }
.fr-table__row--question { border-left: 3px solid #2563eb; }

.fr-table__when {
  white-space: nowrap;
  color: #64748b;
  font-size: 0.8rem;
}

.fr-table__page {
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
}

.fr-table__element {
  white-space: nowrap;
  color: #475569;
}

.fr-table__email {
  color: #475569;
  font-size: 0.8rem;
  max-width: 180px;
  word-break: break-all;
}

.fr-table__comment {
  min-width: 260px;
  max-width: 380px;
  line-height: 1.45;
  color: #1e293b;
}

.fr-table__comment-text {
  white-space: pre-wrap;
  margin-bottom: 0.65rem;
}

.fr-response {
  margin-top: 0.35rem;
  padding-top: 0.65rem;
  border-top: 1px dashed #e2e8f0;
}

.fr-response__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  margin-bottom: 0.35rem;
}

.fr-response__textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 4.5rem;
  resize: vertical;
  padding: 0.5rem 0.6rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font: inherit;
  font-size: 0.82rem;
  line-height: 1.4;
  color: #0f172a;
  background: #f8fafc;
}

.fr-response__textarea:focus {
  outline: none;
  border-color: #0f766e;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

.fr-response__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.45rem;
}

.fr-response__meta {
  font-size: 0.72rem;
  color: #94a3b8;
}

.fr-response__ok {
  margin: 0.4rem 0 0;
  font-size: 0.75rem;
  color: #0f766e;
}

.fr-response__err {
  margin: 0.4rem 0 0;
  font-size: 0.75rem;
  color: #dc2626;
}

.fr-table__path code {
  font-size: 0.72rem;
  color: #94a3b8;
  word-break: break-all;
}

.fr-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
}

.fr-badge--issue { background: #fef2f2; color: #dc2626; }
.fr-badge--suggestion { background: #fffbeb; color: #d97706; }
.fr-badge--question { background: #eff6ff; color: #2563eb; }

.fr-status {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: capitalize;
  color: #475569;
  background: #f1f5f9;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  white-space: nowrap;
}

.fr-status-cell {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 8.5rem;
}

.fr-status-select {
  width: 100%;
  max-width: 10.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  padding: 0.35rem 0.45rem;
  background: #fff;
  color: #334155;
  cursor: pointer;
}

.fr-status-select:disabled {
  opacity: 0.7;
  cursor: wait;
}

.fr-status-select--new {
  border-color: #93c5fd;
  background: #eff6ff;
  color: #1d4ed8;
}

.fr-status-select--will_look_into,
.fr-status-select--reviewed {
  border-color: #fcd34d;
  background: #fffbeb;
  color: #b45309;
}

.fr-status-select--replied {
  border-color: #5eead4;
  background: #f0fdfa;
  color: #0f766e;
}

.fr-status-select--resolved {
  border-color: #86efac;
  background: #f0fdf4;
  color: #15803d;
}

.fr-status-err {
  color: #dc2626;
  font-weight: 800;
  font-size: 0.85rem;
}

@media (max-width: 1100px) {
  .fr-filters {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .fr-filters {
    grid-template-columns: 1fr;
  }
  .fr-header { flex-direction: column; }
}
.app {
  width: 100%;
  min-height: 100vh;
}

/* Calming Blue & Light Color System for Student-Friendly Dashboard */

:root {
  /* MindAlgle brand (wordmark / accents) */
  --brand-blue-primary: #649ce4;
  --brand-blue-deep: #2e74b5;
  --brand-blue-bg-start: #e8f4fc;
  --brand-blue-bg-mid: #f0f7ff;
  --brand-blue-soft-tint: rgba(100, 156, 228, 0.12);

  /* Primary Blue Palette - Calming and Soothing */
  --primary-blue: #4A90E2;        /* Soft, calming blue */
  --primary-blue-light: #6BA3E8;  /* Lighter blue for hover states */
  --primary-blue-dark: #357ABD;   /* Darker blue for emphasis */
  --primary-blue-soft: #E8F2FC;   /* Very light blue for backgrounds */
  
  /* Secondary Blues */
  --sky-blue: #87CEEB;            /* Light sky blue */
  --powder-blue: #B0D4E8;         /* Powder blue */
  --ice-blue: #E0F4FF;            /* Ice blue for subtle backgrounds */
  
  /* White & Light Neutrals */
  --white: #FFFFFF;
  --off-white: #FAFBFC;
  --light-gray: #F5F7FA;
  --soft-gray: #E8ECF1;
  --warm-white: #FEFEFE;
  
  /* Text Colors */
  --text-primary: #2C3E50;        /* Dark blue-gray for readability */
  --text-secondary: #5A6C7D;      /* Medium gray-blue */
  --text-light: #8B9BAD;          /* Light gray-blue */
  --text-muted: #B0BEC5;          /* Muted text */
  
  /* Accent Colors - Calming Pastels */
  --mint-green: #A8E6CF;          /* Soft mint for success states */
  --lavender: #D4C5E8;            /* Soft lavender */
  --peach: #FFD3B6;               /* Warm peach */
  --soft-yellow: #FFEAA7;         /* Soft yellow for highlights */
  
  /* Semantic Colors - Soft & Calming */
  --success: #52C9A2;             /* Calming green */
  --success-light: #E8F8F3;       /* Light success background */
  --warning: #F5A623;             /* Soft orange */
  --warning-light: #FFF8E8;       /* Light warning background */
  --info: #4A90E2;                /* Info blue */
  --info-light: #E8F2FC;          /* Light info background */
  --error: #E74C3C;               /* Soft red */
  --error-light: #FFEBEE;         /* Light error background */
  
  /* Borders & Dividers */
  --border-light: #E1E8ED;        /* Very light border */
  --border-medium: #C8D6E0;       /* Medium border */
  --border-soft: #F0F4F8;         /* Soft border */
  
  /* Shadows - Soft & Subtle */
  --shadow-xs: 0 1px 2px rgba(74, 144, 226, 0.05);
  --shadow-sm: 0 2px 4px rgba(74, 144, 226, 0.08);
  --shadow-md: 0 4px 12px rgba(74, 144, 226, 0.12);
  --shadow-lg: var(--shadow-md);
  --shadow-xl: 0 12px 32px rgba(74, 144, 226, 0.18);
  
  /* Gradients - Calming & Soft */
  --gradient-primary: linear-gradient(135deg, #4A90E2 0%, #6BA3E8 100%);
  --gradient-soft: linear-gradient(135deg, #E8F2FC 0%, #F5F7FA 100%);
  --gradient-sky: linear-gradient(135deg, #87CEEB 0%, #B0D4E8 100%);
  --gradient-light: linear-gradient(135deg, #FFFFFF 0%, #F5F7FA 100%);
  --gradient-card: linear-gradient(135deg, #FFFFFF 0%, #FAFBFC 100%);
  
  /* Backgrounds */
  --bg-primary: #F5F7FA;          /* Main background */
  --bg-secondary: #FFFFFF;        /* Card backgrounds */
  --bg-tertiary: #FAFBFC;         /* Alternative background */
  --bg-hover: #F0F4F8;            /* Hover state */
  --bg-active: #E8F2FC;           /* Active state */
  
  /* Interactive States */
  --hover-overlay: rgba(74, 144, 226, 0.08);
  --focus-ring: var(--focus-ring);
  --active-overlay: rgba(74, 144, 226, 0.12);
  
  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.4s ease;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

#root {
  width: 100%;
  min-height: 100vh;
}

/* ============================================================================
   Dark theme
   ---------------------------------------------------------------------------
   Most page/component CSS in this project hardcodes light colors
   (background: white / #f5f7fa, color: #222 / #333 / #666, etc.) inside their
   own files instead of using the design tokens. Overriding the CSS variables
   alone therefore only recolors the few components that actually use them.

   To make dark mode work across the *whole* dashboard without editing dozens
   of component stylesheets, this file uses broad structural selectors (class
   substring matches + element selectors) with !important so the theme layer
   reliably wins regardless of bundle order or per-file specificity.
   Interactive / semantically-colored elements (buttons, badges, status pills,
   charts, maps) are excluded so their meaning is preserved.
   ============================================================================ */

[data-theme='dark'] {
  --primary-blue: #6ba3e8;
  --primary-blue-light: #8bb8ef;
  --primary-blue-dark: #4a90e2;
  --primary-blue-soft: #1e3a5f;

  --sky-blue: #5a8fb8;
  --powder-blue: #3d5f7a;
  --ice-blue: #1a2f45;

  --white: #1a2332;
  --off-white: #1e2838;
  --light-gray: #243044;
  --soft-gray: #2d3a50;
  --warm-white: #1a2332;

  --text-primary: #e8edf4;
  --text-secondary: #a8b8cc;
  --text-light: #7d8fa6;
  --text-muted: #5c6d82;

  --mint-green: #2d6b5a;
  --lavender: #4a3d6b;
  --peach: #6b4a3d;
  --soft-yellow: #6b5a2d;

  --success: #3db892;
  --success-light: #1a3d32;
  --warning: #e6a23c;
  --warning-light: #3d3020;
  --info: #6ba3e8;
  --info-light: #1e3a5f;
  --error: #ef6b5a;
  --error-light: #3d2020;

  --border-light: #3d4f66;
  --border-medium: #4a5f78;
  --border-soft: #2d3a50;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg: var(--shadow-md);
  --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.4);

  --gradient-soft: linear-gradient(135deg, #1e2838 0%, #243044 100%);
  --gradient-light: linear-gradient(135deg, #1a2332 0%, #243044 100%);
  --gradient-card: linear-gradient(135deg, #1e2838 0%, #1a2332 100%);

  --bg-primary: #121a26;
  --bg-secondary: #1a2332;
  --bg-tertiary: #1e2838;
  --bg-hover: #243044;
  --bg-active: #1e3a5f;

  --hover-overlay: rgba(107, 163, 232, 0.12);
  --active-overlay: rgba(107, 163, 232, 0.18);

  /* Convenience aliases used by the rules below */
  --surface-1: #1a2332; /* cards / sections */
  --surface-2: #1e2838; /* nested surfaces / inputs / table headers */
  --surface-3: #243044; /* hover */
  --page-bg: #121a26;   /* page canvas */
}

/* ---------------------------------------------------------------------------
   1. Base canvas
   --------------------------------------------------------------------------- */
[data-theme='dark'] body,
[data-theme='dark'] #root {
  background: var(--page-bg);
  color: var(--text-primary);
}

/* Top-level dashboard shells + page canvases */
[data-theme='dark'] .admin-dashboard,
[data-theme='dark'] .student-dashboard,
[data-theme='dark'] .parent-dashboard,
[data-theme='dark'] .cbo-dashboard,
[data-theme='dark'] [class*='-page'],
[data-theme='dark'] [class*='-main'],
[data-theme='dark'] [class*='dashboard-content'],
[data-theme='dark'] [class*='dashboard-main'] {
  background: var(--page-bg) !important;
  color: var(--text-primary);
}

[data-theme='dark'] .admin-dashboard {
  background: linear-gradient(135deg, #121a26 0%, #1a2332 50%, #1e2838 100%) !important;
}

/* ---------------------------------------------------------------------------
   2. Surfaces: cards, sections, panels, widgets, modals, containers
   Broader than -card/-section alone so wrappers like .quick-support,
   .chart-wrapper, .fr-filters, calendars, banners don't stay bright white.
   --------------------------------------------------------------------------- */
[data-theme='dark'] [class*='-section']:not([class*='btn']):not([class*='badge']):not([class*='pill']):not([class*='chip']):not([class*='tag']),
[data-theme='dark'] [class*='-card']:not([class*='btn']):not([class*='badge']),
[data-theme='dark'] [class*='-panel']:not([class*='btn']),
[data-theme='dark'] [class*='-widget'],
[data-theme='dark'] [class*='-box']:not([class*='btn']),
[data-theme='dark'] [class*='-tile'],
[data-theme='dark'] [class*='-wrapper'],
[data-theme='dark'] [class*='table-wrap'],
[data-theme='dark'] [class*='overview-section'],
[data-theme='dark'] [class*='modal-content'],
[data-theme='dark'] [class*='modal-body'],
[data-theme='dark'] [class*='drawer'],
[data-theme='dark'] [class*='popup'],
[data-theme='dark'] [class*='popover'],
[data-theme='dark'] [class*='dropdown-menu'],
[data-theme='dark'] [class*='user-dropdown'],
[data-theme='dark'] [class*='chart-container'],
[data-theme='dark'] [class*='chart-wrapper'],
[data-theme='dark'] [class*='table-container'],
[data-theme='dark'] [class*='banner'],
[data-theme='dark'] [class*='reminder'],
[data-theme='dark'] [class*='quick-support'],
[data-theme='dark'] [class*='support-grid'],
[data-theme='dark'] [class*='student-checkin'],
[data-theme='dark'] [class*='checkin-card'],
[data-theme='dark'] [class*='resource-item'],
[data-theme='dark'] [class*='resources-list'],
[data-theme='dark'] [class*='search-filter'],
[data-theme='dark'] [class*='search-box'],
[data-theme='dark'] [class*='filter-bar'],
[data-theme='dark'] [class*='content-area'],
[data-theme='dark'] [class*='main-content'],
[data-theme='dark'] [class*='page-header'],
[data-theme='dark'] [class*='empty-state'],
[data-theme='dark'] [class*='loading']:not([class*='btn']),
[data-theme='dark'] [class*='alert']:not([class*='btn']),
[data-theme='dark'] .feedback-review,
[data-theme='dark'] .fr-filters,
[data-theme='dark'] .fr-table-wrap,
[data-theme='dark'] .fr-stats,
[data-theme='dark'] .fr-header,
[data-theme='dark'] .fr-empty,
[data-theme='dark'] .fr-loading,
[data-theme='dark'] .fr-response,
[data-theme='dark'] .fr-alert {
  background-color: var(--surface-1) !important;
  background-image: none !important;
  border-color: var(--border-light) !important;
  color: var(--text-primary);
}

/* Soft pastel alert chips / callouts → dark equivalents */
[data-theme='dark'] [class*='callout'],
[data-theme='dark'] [class*='notice'],
[data-theme='dark'] [class*='hint-box'],
[data-theme='dark'] [class*='info-box'],
[data-theme='dark'] [class*='warning-box'] {
  background-color: var(--surface-2) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-light) !important;
}

/* Nested / secondary surfaces sit slightly lighter than their parent card */
[data-theme='dark'] [class*='stat-content'],
[data-theme='dark'] [class*='-inner'],
[data-theme='dark'] [class*='-body'] > [class*='-item'],
[data-theme='dark'] [class*='detail-card-content'],
[data-theme='dark'] [class*='sub-card'],
[data-theme='dark'] [class*='__body'],
[data-theme='dark'] [class*='__content'],
[data-theme='dark'] [class*='list-item'],
[data-theme='dark'] [class*='row-item'] {
  background-color: var(--surface-2) !important;
}

/* Keep gradients on primary/highlight metric cards readable */
[data-theme='dark'] .metric-card.primary,
[data-theme='dark'] [class*='card'].primary,
[data-theme='dark'] [class*='card'].highlight {
  background: linear-gradient(135deg, #2e5a8a 0%, #3d6a9a 100%) !important;
  color: #ffffff;
}

/* ---------------------------------------------------------------------------
   3. Modal / drawer overlays
   --------------------------------------------------------------------------- */
[data-theme='dark'] [class*='overlay'],
[data-theme='dark'] [class*='backdrop'] {
  background: rgba(4, 8, 14, 0.7) !important;
}

/* ---------------------------------------------------------------------------
   4. Text
   ONLY force light ink inside known dark shells (dashboards + login).
   Global bare `h1`/`p`/`label` overrides were painting white text onto
   leftover white cards (login, empty states) — unreadable. Scope them.
   --------------------------------------------------------------------------- */
[data-theme='dark'] .login h1,
[data-theme='dark'] .login h2,
[data-theme='dark'] .login h3,
[data-theme='dark'] .login p,
[data-theme='dark'] .login label,
[data-theme='dark'] .login li,
[data-theme='dark'] .login span,
[data-theme='dark'] .login strong,
[data-theme='dark'] .student-dashboard h1,
[data-theme='dark'] .student-dashboard h2,
[data-theme='dark'] .student-dashboard h3,
[data-theme='dark'] .student-dashboard h4,
[data-theme='dark'] .student-dashboard h5,
[data-theme='dark'] .student-dashboard h6,
[data-theme='dark'] .student-dashboard p,
[data-theme='dark'] .student-dashboard label,
[data-theme='dark'] .student-dashboard li,
[data-theme='dark'] .student-dashboard dt,
[data-theme='dark'] .student-dashboard dd,
[data-theme='dark'] .student-dashboard th,
[data-theme='dark'] .student-dashboard td,
[data-theme='dark'] .parent-dashboard h1,
[data-theme='dark'] .parent-dashboard h2,
[data-theme='dark'] .parent-dashboard h3,
[data-theme='dark'] .parent-dashboard h4,
[data-theme='dark'] .parent-dashboard h5,
[data-theme='dark'] .parent-dashboard h6,
[data-theme='dark'] .parent-dashboard p,
[data-theme='dark'] .parent-dashboard label,
[data-theme='dark'] .parent-dashboard li,
[data-theme='dark'] .parent-dashboard th,
[data-theme='dark'] .parent-dashboard td,
[data-theme='dark'] .admin-dashboard h1,
[data-theme='dark'] .admin-dashboard h2,
[data-theme='dark'] .admin-dashboard h3,
[data-theme='dark'] .admin-dashboard h4,
[data-theme='dark'] .admin-dashboard h5,
[data-theme='dark'] .admin-dashboard h6,
[data-theme='dark'] .admin-dashboard p,
[data-theme='dark'] .admin-dashboard label,
[data-theme='dark'] .admin-dashboard li,
[data-theme='dark'] .admin-dashboard th,
[data-theme='dark'] .admin-dashboard td,
[data-theme='dark'] .cbo-dashboard h1,
[data-theme='dark'] .cbo-dashboard h2,
[data-theme='dark'] .cbo-dashboard h3,
[data-theme='dark'] .cbo-dashboard h4,
[data-theme='dark'] .cbo-dashboard p,
[data-theme='dark'] .cbo-dashboard label,
[data-theme='dark'] .cbo-dashboard li,
[data-theme='dark'] .cbo-dashboard th,
[data-theme='dark'] .cbo-dashboard td,
[data-theme='dark'] .feedback-review h1,
[data-theme='dark'] .feedback-review h2,
[data-theme='dark'] .feedback-review h3,
[data-theme='dark'] .feedback-review p,
[data-theme='dark'] .feedback-review label,
[data-theme='dark'] .feedback-review li,
[data-theme='dark'] .feedback-review th,
[data-theme='dark'] .feedback-review td,
[data-theme='dark'] .student-dashboard .section-title,
[data-theme='dark'] .parent-dashboard .section-title,
[data-theme='dark'] .admin-dashboard .section-title,
[data-theme='dark'] .student-dashboard [class*='-title']:not([class*='btn']):not([class*='badge']):not([class*='pill']),
[data-theme='dark'] .parent-dashboard [class*='-title']:not([class*='btn']):not([class*='badge']):not([class*='pill']),
[data-theme='dark'] .admin-dashboard [class*='-title']:not([class*='btn']):not([class*='badge']):not([class*='pill']),
[data-theme='dark'] .cbo-dashboard [class*='-title']:not([class*='btn']):not([class*='badge']):not([class*='pill']),
[data-theme='dark'] .student-dashboard [class*='-label']:not([class*='btn']):not([class*='badge']):not([class*='pill']):not([class*='chip']),
[data-theme='dark'] .parent-dashboard [class*='-label']:not([class*='btn']):not([class*='badge']):not([class*='pill']):not([class*='chip']),
[data-theme='dark'] .admin-dashboard [class*='-label']:not([class*='btn']):not([class*='badge']):not([class*='pill']):not([class*='chip']),
[data-theme='dark'] .student-dashboard [class*='-heading'],
[data-theme='dark'] .student-dashboard [class*='-name']:not([class*='btn']),
[data-theme='dark'] .student-dashboard [class*='-text']:not([class*='btn']):not([class*='badge']),
[data-theme='dark'] .student-dashboard [class*='-value']:not([class*='btn']):not([class*='badge']),
[data-theme='dark'] .student-dashboard [class*='-desc'],
[data-theme='dark'] .student-dashboard [class*='-description'],
[data-theme='dark'] .student-dashboard [class*='-meta'],
[data-theme='dark'] .student-dashboard [class*='-subtitle'],
[data-theme='dark'] .parent-dashboard [class*='-desc'],
[data-theme='dark'] .parent-dashboard [class*='-description'],
[data-theme='dark'] .parent-dashboard [class*='-meta'],
[data-theme='dark'] .parent-dashboard [class*='-subtitle'],
[data-theme='dark'] .admin-dashboard [class*='-desc'],
[data-theme='dark'] .admin-dashboard [class*='-meta'],
[data-theme='dark'] .admin-dashboard [class*='-subtitle'],
[data-theme='dark'] .feedback-review [class*='-title'],
[data-theme='dark'] .feedback-review [class*='-comment'],
[data-theme='dark'] .feedback-review [class*='-meta'],
[data-theme='dark'] .feedback-review code {
  color: var(--text-primary) !important;
}

/* Gradient-clipped titles become invisible in dark mode unless fill is restored */
[data-theme='dark'] .student-dashboard .section-title,
[data-theme='dark'] .parent-dashboard .section-title,
[data-theme='dark'] .admin-dashboard .section-title {
  background: none !important;
  -webkit-text-fill-color: var(--primary-blue-light) !important;
  color: var(--primary-blue-light) !important;
}

/* Muted secondary text inside dashboards */
[data-theme='dark'] .student-dashboard small,
[data-theme='dark'] .parent-dashboard small,
[data-theme='dark'] .admin-dashboard small,
[data-theme='dark'] .cbo-dashboard small,
[data-theme='dark'] .student-dashboard [class*='-muted'],
[data-theme='dark'] .parent-dashboard [class*='-muted'],
[data-theme='dark'] .admin-dashboard [class*='-muted'],
[data-theme='dark'] .student-dashboard [class*='-secondary']:not([class*='btn']),
[data-theme='dark'] .parent-dashboard [class*='-secondary']:not([class*='btn']),
[data-theme='dark'] .admin-dashboard [class*='-secondary']:not([class*='btn']),
[data-theme='dark'] .student-dashboard [class*='-caption'],
[data-theme='dark'] .student-dashboard [class*='-timestamp'],
[data-theme='dark'] .student-dashboard [class*='helper'],
[data-theme='dark'] .student-dashboard [class*='help-text'],
[data-theme='dark'] .login .login-tagline,
[data-theme='dark'] .login .login-portal-hint,
[data-theme='dark'] .login .login-footer-muted,
[data-theme='dark'] .login .login-form-lead {
  color: var(--text-secondary) !important;
}

/* Plain body copy fallback: unclassed text nodes inside dashboards */
[data-theme='dark'] .student-dashboard span:not([class]),
[data-theme='dark'] .parent-dashboard span:not([class]),
[data-theme='dark'] .admin-dashboard span:not([class]),
[data-theme='dark'] .cbo-dashboard span:not([class]),
[data-theme='dark'] .feedback-review span:not([class]),
[data-theme='dark'] .student-dashboard div:not([class]),
[data-theme='dark'] .parent-dashboard div:not([class]),
[data-theme='dark'] .admin-dashboard div:not([class]),
[data-theme='dark'] .cbo-dashboard div:not([class]),
[data-theme='dark'] .feedback-review div:not([class]) {
  color: var(--text-primary) !important;
}

/* Catch leftover light-theme ink colors on any text-like node inside dashboards.
   Keeps buttons/badges/status chips/links on their own colors. */
[data-theme='dark'] .student-dashboard :where(span, div, strong, em, b, i, td, th, p, label, li, h1, h2, h3, h4, h5, h6):not(button):not(a):not([class*='btn']):not([class*='badge']):not([class*='pill']):not([class*='chip']):not([class*='tag']):not([class*='status']):not([class*='risk']):not([class*='alert-']):not([class*='toast']),
[data-theme='dark'] .parent-dashboard :where(span, div, strong, em, b, i, td, th, p, label, li, h1, h2, h3, h4, h5, h6):not(button):not(a):not([class*='btn']):not([class*='badge']):not([class*='pill']):not([class*='chip']):not([class*='tag']):not([class*='status']):not([class*='risk']):not([class*='alert-']):not([class*='toast']),
[data-theme='dark'] .admin-dashboard :where(span, div, strong, em, b, i, td, th, p, label, li, h1, h2, h3, h4, h5, h6):not(button):not(a):not([class*='btn']):not([class*='badge']):not([class*='pill']):not([class*='chip']):not([class*='tag']):not([class*='status']):not([class*='risk']):not([class*='alert-']):not([class*='toast']):not([class*='fr-stat']):not([class*='fr-badge']),
[data-theme='dark'] .cbo-dashboard :where(span, div, strong, em, b, i, td, th, p, label, li, h1, h2, h3, h4, h5, h6):not(button):not(a):not([class*='btn']):not([class*='badge']):not([class*='pill']):not([class*='chip']):not([class*='tag']):not([class*='status']):not([class*='risk']):not([class*='alert-']):not([class*='toast']),
[data-theme='dark'] .feedback-review :where(span, div, strong, em, b, i, td, th, p, label, li, h1, h2, h3, h4, h5, h6):not(button):not(a):not([class*='btn']):not([class*='badge']):not([class*='pill']):not([class*='chip']):not([class*='tag']):not([class*='status']):not([class*='fr-stat']):not([class*='fr-badge']):not([class*='fr-btn']) {
  color: var(--text-primary) !important;
}

/* Links keep the accent color */
[data-theme='dark'] a:not([class*='btn']) {
  color: var(--primary-blue-light) !important;
}

/* ---------------------------------------------------------------------------
   5. Borders / dividers
   --------------------------------------------------------------------------- */
[data-theme='dark'] hr,
[data-theme='dark'] [class*='-header'],
[data-theme='dark'] [class*='-divider'],
[data-theme='dark'] [class*='-row'],
[data-theme='dark'] [class*='separator'] {
  border-color: var(--border-light) !important;
}

/* ---------------------------------------------------------------------------
   6. Forms
   --------------------------------------------------------------------------- */
[data-theme='dark'] input,
[data-theme='dark'] select,
[data-theme='dark'] textarea,
[data-theme='dark'] [class*='search'] input,
[data-theme='dark'] [class*='-input'] {
  background: var(--surface-2) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-medium) !important;
}

[data-theme='dark'] input::placeholder,
[data-theme='dark'] textarea::placeholder {
  color: var(--text-muted);
}

[data-theme='dark'] input:focus,
[data-theme='dark'] select:focus,
[data-theme='dark'] textarea:focus {
  border-color: var(--primary-blue) !important;
  outline-color: var(--primary-blue);
}

/* Date/time picker widgets in webkit */
[data-theme='dark'] input[type='date']::-webkit-calendar-picker-indicator,
[data-theme='dark'] input[type='time']::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.4);
}

/* ---------------------------------------------------------------------------
   7. Tables
   --------------------------------------------------------------------------- */
[data-theme='dark'] table {
  background: var(--surface-1);
  color: var(--text-primary);
}

[data-theme='dark'] table th,
[data-theme='dark'] thead {
  background: var(--surface-2) !important;
  color: var(--text-primary) !important;
}

[data-theme='dark'] table td {
  border-color: var(--border-light) !important;
}

[data-theme='dark'] tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.03);
}

[data-theme='dark'] tbody tr:hover {
  background: var(--surface-3);
}

/* ---------------------------------------------------------------------------
   8. Headers (top bars) — keep them a touch lighter than the canvas
   --------------------------------------------------------------------------- */
[data-theme='dark'] .dashboard-header,
[data-theme='dark'] .student-dashboard-header,
[data-theme='dark'] .parent-header,
[data-theme='dark'] .cbo-header,
[data-theme='dark'] [class*='-header'][class*='top'],
[data-theme='dark'] header {
  background: var(--surface-1) !important;
  border-bottom-color: var(--border-medium) !important;
  box-shadow: var(--shadow-sm);
}

[data-theme='dark'] .logo-text,
[data-theme='dark'] .user-name,
[data-theme='dark'] .parent-name {
  color: var(--text-primary);
}

[data-theme='dark'] .header-subtitle,
[data-theme='dark'] .sync-status {
  color: var(--text-secondary);
}

/* Dropdown / menu hovers */
[data-theme='dark'] [class*='dropdown-item']:hover,
[data-theme='dark'] [class*='menu-item']:hover {
  background: var(--bg-hover) !important;
}

/* ---------------------------------------------------------------------------
   8b. Sidebar / side navigation — keep dark, not accent blue
   --------------------------------------------------------------------------- */
[data-theme='dark'] .sidebar,
[data-theme='dark'] [class*='sidebar']:not([class*='-item']):not([class*='-nav']):not([class*='-link']),
[data-theme='dark'] [class*='side-nav'] {
  background: #0f1826 !important;
  background-color: #0f1826 !important;
  border-right-color: var(--border-medium) !important;
}

[data-theme='dark'] .nav-item {
  color: var(--text-secondary);
}

[data-theme='dark'] .nav-item:hover,
[data-theme='dark'] .nav-item.active {
  background-color: var(--active-overlay) !important;
  color: var(--text-primary);
}

/* ---------------------------------------------------------------------------
   9. Preserve semantic / interactive coloring
   The broad surface/text rules above target layout containers (-section,
   -card, -panel, etc.) and generic text nodes, which do not match buttons,
   badges, pills, chips or status indicators — so those keep their own colors
   automatically. The map just needs a dark canvas.
   --------------------------------------------------------------------------- */
[data-theme='dark'] .leaflet-container {
  background: #0e1620 !important;
}

/* Recharts tooltips / cartesian text */
[data-theme='dark'] .recharts-tooltip-wrapper .recharts-default-tooltip {
  background: var(--surface-1) !important;
  border-color: var(--border-medium) !important;
  color: var(--text-primary) !important;
}

[data-theme='dark'] .recharts-cartesian-axis-tick text,
[data-theme='dark'] .recharts-legend-item-text,
[data-theme='dark'] .recharts-label {
  fill: var(--text-secondary) !important;
}

[data-theme='dark'] .recharts-cartesian-grid line {
  stroke: var(--border-soft) !important;
}

/* ---------------------------------------------------------------------------
   10. Role dashboards — known white islands + hard-to-read ink
   Student / Parent / Staff share many one-off class names that never match
   -card/-section. Keep this list short and high-traffic.
   --------------------------------------------------------------------------- */

/* Student: check-in, quick support, my resources, empty states, rewards */
[data-theme='dark'] .student-checkin-card,
[data-theme='dark'] .student-checkin-creative-panel,
[data-theme='dark'] .quick-support,
[data-theme='dark'] .support-card,
[data-theme='dark'] .wellness-resources,
[data-theme='dark'] .fnr-card,
[data-theme='dark'] .fnr-location-panel,
[data-theme='dark'] .addressable-issues-card,
[data-theme='dark'] .addressable-issues-panel,
[data-theme='dark'] .addressable-issues-item,
[data-theme='dark'] .addressable-issues-item.severity-red,
[data-theme='dark'] .addressable-issues-item.severity-yellow,
[data-theme='dark'] .addressable-issues-item.severity-green,
[data-theme='dark'] .loop-notifications-card,
[data-theme='dark'] .loop-resource-match-section,
[data-theme='dark'] .care-loop-consent-banner,
[data-theme='dark'] .resource-suggestion-popup,
[data-theme='dark'] .resource-map-followup-reminder,
[data-theme='dark'] .clinical-screener-modal,
[data-theme='dark'] .post-login-checkin-modal,
[data-theme='dark'] .counselor-notes-list,
[data-theme='dark'] .counselor-info,
[data-theme='dark'] .school-staff-list,
[data-theme='dark'] .student-appointment-calendar,
[data-theme='dark'] .appointments-list,
[data-theme='dark'] .appointment-item,
[data-theme='dark'] .no-data-message,
[data-theme='dark'] .empty-state,
[data-theme='dark'] .reward-system-container,
[data-theme='dark'] .reward-stat-card,
[data-theme='dark'] .activity-logs-display,
[data-theme='dark'] .activity-logs-container,
[data-theme='dark'] .chart-card,
[data-theme='dark'] .logs-card {
  background-color: var(--surface-1) !important;
  background-image: none !important;
  color: var(--text-primary) !important;
  border-color: var(--border-light) !important;
}

[data-theme='dark'] .addressable-issues-toggle:hover {
  background-color: var(--surface-3) !important;
}

[data-theme='dark'] .addressable-issues-title,
[data-theme='dark'] .addressable-issues-body strong {
  color: var(--text-primary) !important;
}

[data-theme='dark'] .addressable-issues-sub,
[data-theme='dark'] .addressable-issues-summary-line,
[data-theme='dark'] .addressable-issues-meta,
[data-theme='dark'] .addressable-issues-muted,
[data-theme='dark'] .no-data-message p,
[data-theme='dark'] .no-data-subtitle,
[data-theme='dark'] .section-subtitle {
  color: var(--text-secondary) !important;
}

[data-theme='dark'] .no-data-message h3,
[data-theme='dark'] .empty-state h3 {
  color: var(--primary-blue-light) !important;
  -webkit-text-fill-color: var(--primary-blue-light) !important;
}

/* Soft pill chips stay readable on dark cards */
[data-theme='dark'] .addressable-issues-pill--red {
  background: #3d2020 !important;
  color: #fca5a5 !important;
}
[data-theme='dark'] .addressable-issues-pill--yellow {
  background: #3d3020 !important;
  color: #fcd34d !important;
}
[data-theme='dark'] .addressable-issues-pill--green {
  background: #1a3d32 !important;
  color: #86efac !important;
}

/* Parent surfaces */
[data-theme='dark'] .parent-resources-page .resource-item,
[data-theme='dark'] .parent-resources-page .search-filter-bar,
[data-theme='dark'] .parent-resources-page .search-box,
[data-theme='dark'] .child-profile-summary,
[data-theme='dark'] .parent-child-resource-activity,
[data-theme='dark'] .parent-referral-consent-panel,
[data-theme='dark'] .parent-settings-page [class*='-card'],
[data-theme='dark'] .parent-reports-page [class*='-card'],
[data-theme='dark'] .parent-profile-page [class*='-card'] {
  background-color: var(--surface-1) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-light) !important;
}

/* Staff / admin page canvas + inner surfaces that often stayed white */
[data-theme='dark'] .dashboard-content,
[data-theme='dark'] .dashboard-main {
  background-color: var(--page-bg) !important;
  color: var(--text-primary) !important;
}

[data-theme='dark'] .top-panel,
[data-theme='dark'] .right-panel,
[data-theme='dark'] .chart-wrapper,
[data-theme='dark'] .prioritization-panel,
[data-theme='dark'] .closing-loop-case-detail-modal,
[data-theme='dark'] .closing-loop-overview-panel,
[data-theme='dark'] .closing-loop-dashboard-widget,
[data-theme='dark'] .student-profile-drawer,
[data-theme='dark'] .risk-level-info-panel,
[data-theme='dark'] .staff-referral-feedback-modal,
[data-theme='dark'] .population-health-page,
[data-theme='dark'] .admin-hrsn-flags-page,
[data-theme='dark'] .appointments-page,
[data-theme='dark'] .staff-community-referrals-page {
  background-color: var(--surface-1) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-light) !important;
}

/* Calendar / appointment popovers (student + staff) */
[data-theme='dark'] [class*='appointment'] [class*='popover'],
[data-theme='dark'] [class*='appointment'] [class*='modal-content'],
[data-theme='dark'] [class*='appointment'] [class*='dropdown'],
[data-theme='dark'] [class*='calendar'] [class*='popover'],
[data-theme='dark'] [class*='calendar'] [class*='popup'],
[data-theme='dark'] [class*='calendar'] [class*='tooltip'],
[data-theme='dark'] [class*='calendar'] [class*='menu'],
[data-theme='dark'] [class*='cal-'][class*='panel'],
[data-theme='dark'] [class*='cal-'][class*='dropdown'] {
  background-color: var(--surface-1) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-light) !important;
}

/* Application development feedback page */
[data-theme='dark'] .feedback-review {
  background: var(--page-bg) !important;
}

[data-theme='dark'] .feedback-review .fr-table,
[data-theme='dark'] .feedback-review .fr-table th,
[data-theme='dark'] .feedback-review .fr-table td {
  background-color: var(--surface-1) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-light) !important;
}

[data-theme='dark'] .feedback-review .fr-table thead th {
  background-color: var(--surface-2) !important;
}

[data-theme='dark'] .feedback-review .fr-btn--ghost,
[data-theme='dark'] .feedback-review .fr-chip,
[data-theme='dark'] .feedback-review .fr-filters select,
[data-theme='dark'] .feedback-review .fr-filters input,
[data-theme='dark'] .feedback-review .fr-status-select {
  background-color: var(--surface-2) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-medium) !important;
}

[data-theme='dark'] .feedback-widget,
[data-theme='dark'] .feedback-widget__panel,
[data-theme='dark'] [class*='feedback-widget'],
[data-theme='dark'] .feedback-panel,
[data-theme='dark'] .feedback-modal,
[data-theme='dark'] .feedback-sheet,
[data-theme='dark'] .feedback-element-card,
[data-theme='dark'] .feedback-selection-summary,
[data-theme='dark'] .feedback-success-state {
  background-color: var(--surface-1) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-light) !important;
}

[data-theme='dark'] .feedback-panel__subtitle,
[data-theme='dark'] .feedback-section__hint,
[data-theme='dark'] .feedback-element-card__desc {
  color: var(--text-secondary) !important;
}

/* Restore intentional white text on darkened gradient metric cards */
[data-theme='dark'] .metric-card.primary,
[data-theme='dark'] [class*='card'].primary,
[data-theme='dark'] [class*='card'].highlight,
[data-theme='dark'] .metric-card.primary *,
[data-theme='dark'] [class*='card'].primary *:not([class*='badge']),
[data-theme='dark'] [class*='card'].highlight *:not([class*='badge']) {
  color: #ffffff !important;
}

/* Sidebar nav text after the broad dashboard ink override */
[data-theme='dark'] .nav-item {
  color: var(--text-secondary) !important;
}

[data-theme='dark'] .nav-item:hover,
[data-theme='dark'] .nav-item.active {
  color: var(--text-primary) !important;
}

/* ---------------------------------------------------------------------------
   11. Nuclear pass — remaining white / cream cards across all roles
   Force every common light surface to the dark palette + readable ink.
   --------------------------------------------------------------------------- */
[data-theme='dark'] .student-dashboard [class*='card']:not([class*='btn']):not([class*='badge']),
[data-theme='dark'] .student-dashboard [class*='Card']:not([class*='btn']),
[data-theme='dark'] .student-dashboard [class*='panel']:not([class*='btn']),
[data-theme='dark'] .student-dashboard [class*='modal-content'],
[data-theme='dark'] .student-dashboard [class*='popup'],
[data-theme='dark'] .student-dashboard [class*='banner'],
[data-theme='dark'] .student-dashboard [class*='reminder'],
[data-theme='dark'] .student-dashboard [class*='timeline'],
[data-theme='dark'] .student-dashboard [class*='metrics'],
[data-theme='dark'] .student-dashboard [class*='goals'],
[data-theme='dark'] .student-dashboard [class*='insights'],
[data-theme='dark'] .student-dashboard [class*='sidebar'] > *,
[data-theme='dark'] .student-dashboard .personal-metrics,
[data-theme='dark'] .student-dashboard .personal-goals,
[data-theme='dark'] .student-dashboard .peer-comparison-card,
[data-theme='dark'] .student-dashboard .mental-health-resources,
[data-theme='dark'] .student-dashboard .self-care-recommendations,
[data-theme='dark'] .student-dashboard .student-profile-card,
[data-theme='dark'] .student-dashboard .student-activity-timeline,
[data-theme='dark'] .student-dashboard .weekly-summary-card,
[data-theme='dark'] .student-dashboard .left-sidebar,
[data-theme='dark'] .student-dashboard .insights-panel,
[data-theme='dark'] .student-dashboard .date-picker-header,
[data-theme='dark'] .student-dashboard .metric-card,
[data-theme='dark'] .student-dashboard .achievement-card,
[data-theme='dark'] .student-dashboard .badge-item,
[data-theme='dark'] .student-dashboard .reward-badge,
[data-theme='dark'] .parent-dashboard [class*='card']:not([class*='btn']),
[data-theme='dark'] .parent-dashboard [class*='panel']:not([class*='btn']),
[data-theme='dark'] .parent-dashboard [class*='modal-content'],
[data-theme='dark'] .parent-dashboard .resource-item,
[data-theme='dark'] .parent-dashboard .search-box,
[data-theme='dark'] .parent-dashboard .search-filter-bar,
[data-theme='dark'] .parent-dashboard .settings-section,
[data-theme='dark'] .parent-dashboard .profile-section,
[data-theme='dark'] .parent-dashboard .report-card,
[data-theme='dark'] .parent-dashboard .child-card,
[data-theme='dark'] .admin-dashboard [class*='card']:not([class*='btn']):not([class*='badge']),
[data-theme='dark'] .admin-dashboard [class*='panel']:not([class*='btn']),
[data-theme='dark'] .admin-dashboard [class*='modal-content'],
[data-theme='dark'] .admin-dashboard [class*='widget'],
[data-theme='dark'] .admin-dashboard .chart-wrapper,
[data-theme='dark'] .admin-dashboard .overview-section,
[data-theme='dark'] .admin-dashboard .school-branding-section,
[data-theme='dark'] .cbo-dashboard [class*='card']:not([class*='btn']),
[data-theme='dark'] .cbo-dashboard [class*='panel']:not([class*='btn']),
[data-theme='dark'] .cbo-dashboard [class*='modal-content'] {
  background-color: #1a2332 !important;
  background-image: none !important;
  border-color: #3d4f66 !important;
  color: #e8edf4 !important;
}

/* Nested list / row surfaces — only real card-like items, not every *-item node */
[data-theme='dark'] .student-dashboard [class*='list-item'],
[data-theme='dark'] .student-dashboard [class*='goal-item'],
[data-theme='dark'] .student-dashboard [class*='resource-item'],
[data-theme='dark'] .student-dashboard [class*='appointment-item'],
[data-theme='dark'] .parent-dashboard [class*='list-item'],
[data-theme='dark'] .parent-dashboard [class*='resource-item'],
[data-theme='dark'] .admin-dashboard [class*='list-item'] {
  background-color: #243044 !important;
  border-color: #3d4f66 !important;
  color: #e8edf4 !important;
}

/* Make sure secondary/meta copy is light gray — never leftover #333 / #5a5957 */
[data-theme='dark'] .student-dashboard [class*='-meta'],
[data-theme='dark'] .student-dashboard [class*='-sub'],
[data-theme='dark'] .student-dashboard [class*='-hint'],
[data-theme='dark'] .student-dashboard [class*='-muted'],
[data-theme='dark'] .student-dashboard [class*='-caption'],
[data-theme='dark'] .student-dashboard [class*='-secondary']:not([class*='btn']),
[data-theme='dark'] .student-dashboard [class*='subtitle'],
[data-theme='dark'] .parent-dashboard [class*='-meta'],
[data-theme='dark'] .parent-dashboard [class*='-muted'],
[data-theme='dark'] .parent-dashboard [class*='subtitle'],
[data-theme='dark'] .admin-dashboard [class*='-meta'],
[data-theme='dark'] .admin-dashboard [class*='-muted'],
[data-theme='dark'] .admin-dashboard [class*='subtitle'] {
  color: #c5d0de !important;
}

[data-theme='dark'] .student-dashboard strong,
[data-theme='dark'] .student-dashboard b,
[data-theme='dark'] .parent-dashboard strong,
[data-theme='dark'] .admin-dashboard strong {
  color: #e8edf4 !important;
}

/* Cream / pastel empty & reward surfaces */
[data-theme='dark'] .student-dashboard .no-data-message,
[data-theme='dark'] .student-dashboard .empty-state,
[data-theme='dark'] .student-dashboard .reward-system-container,
[data-theme='dark'] .student-dashboard .achievement-unlocked,
[data-theme='dark'] .student-dashboard .badge-empty,
[data-theme='dark'] .student-dashboard .rewards-empty {
  background: #1a2332 !important;
  color: #e8edf4 !important;
  border-color: #3d4f66 !important;
}

/* ============================================================================
   Role-surface night mode (Student / Parent / Staff leftovers)
   Loaded last via ThemeContext so cards never stay white and text stays light.
   ============================================================================ */

/* ---- Login (must win over Login.css white card) ---- */
[data-theme='dark'] body:has(.login),
[data-theme='dark'] #root:has(.login) {
  background: #121a26 !important;
}

[data-theme='dark'] .login,
[data-theme='dark'] .login.login--refined,
[data-theme='dark'] .login.login--minimal {
  background: linear-gradient(145deg, #0f1622 0%, #121a26 40%, #1a2332 100%) !important;
  color: #e8edf4 !important;
}

[data-theme='dark'] .login .login-container,
[data-theme='dark'] .login .login-container--minimal,
[data-theme='dark'] .login.login--minimal .login-container--minimal {
  background: #1a2332 !important;
  background-color: #1a2332 !important;
  background-image: none !important;
  border: 1px solid #3d4f66 !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5) !important;
  color: #e8edf4 !important;
}

[data-theme='dark'] .login h1,
[data-theme='dark'] .login h2,
[data-theme='dark'] .login .login-header h1,
[data-theme='dark'] .login .login-intro-title {
  color: #9ec5f0 !important;
  -webkit-text-fill-color: #9ec5f0 !important;
  background: none !important;
}

[data-theme='dark'] .login p,
[data-theme='dark'] .login label,
[data-theme='dark'] .login span,
[data-theme='dark'] .login .login-tagline,
[data-theme='dark'] .login .login-intro-text,
[data-theme='dark'] .login .login-form-lead,
[data-theme='dark'] .login .login-portal-label,
[data-theme='dark'] .login .login-portal-hint,
[data-theme='dark'] .login .login-footer,
[data-theme='dark'] .login .login-footer-muted,
[data-theme='dark'] .login .form-group label,
[data-theme='dark'] .login .remember-me,
[data-theme='dark'] .login .remember-label {
  color: #d0dae8 !important;
  -webkit-text-fill-color: #d0dae8 !important;
}

[data-theme='dark'] .login .login-portal-banner {
  background: #243044 !important;
  border-color: #3d4f66 !important;
}

[data-theme='dark'] .login input,
[data-theme='dark'] .login select,
[data-theme='dark'] .login textarea,
[data-theme='dark'] .login .form-group input,
[data-theme='dark'] .login .login-portal-picker select {
  background: #121a26 !important;
  background-color: #121a26 !important;
  color: #e8edf4 !important;
  border-color: #4a5f78 !important;
}

[data-theme='dark'] .login input::placeholder {
  color: #7d8fa6 !important;
}

[data-theme='dark'] .login .login-audience-btn,
[data-theme='dark'] .login .login-cta-outline {
  background: #243044 !important;
  color: #d0dae8 !important;
  border-color: #4a5f78 !important;
}

[data-theme='dark'] .login .login-audience-btn.is-active,
[data-theme='dark'] .login .login-audience-btn[aria-pressed='true'] {
  background: #1e3a5f !important;
  color: #9ec5f0 !important;
  border-color: #6ba3e8 !important;
}

[data-theme='dark'] .login .login-button {
  color: #fff !important;
}

[data-theme='dark'] .login .login-theme-toggle {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

/* ---- My resources intro copy ---- */
[data-theme='dark'] .my-resources-intro-card {
  background: #1a2332 !important;
  border-color: #2d6b5a !important;
}

[data-theme='dark'] .my-resources-intro-lead,
[data-theme='dark'] .sdoh-student-hero p,
[data-theme='dark'] .sdoh-student-period-line,
[data-theme='dark'] .sdoh-student-muted,
[data-theme='dark'] .sdoh-student-inner p {
  color: #ffffff !important;
}

/* ---- Clinical Screeners + Counselor Notes (student dashboard) ---- */
[data-theme='dark'] .dashboard-card,
[data-theme='dark'] .clinical-screeners-card,
[data-theme='dark'] .counselor-notes-card {
  background: #1a2332 !important;
  border-color: #3d4f66 !important;
  color: #e8edf4 !important;
  box-shadow: none !important;
}

[data-theme='dark'] .clinical-screeners-lead,
[data-theme='dark'] .clinical-screeners-empty,
[data-theme='dark'] .clinical-screener-meta {
  color: #c5d0de !important;
}

[data-theme='dark'] .clinical-screener-row {
  background: #243044 !important;
  border-color: #3d4f66 !important;
  color: #e8edf4 !important;
}

[data-theme='dark'] .clinical-screener-type {
  color: #8bb8ef !important;
}

[data-theme='dark'] .counselor-note-card,
[data-theme='dark'] .counselor-note-reply,
[data-theme='dark'] .counselor-note-reply-input {
  background: #243044 !important;
  border-color: #3d4f66 !important;
  color: #e8edf4 !important;
}

[data-theme='dark'] .counselor-note-author,
[data-theme='dark'] .counselor-note-body,
[data-theme='dark'] .counselor-note-reply-body,
[data-theme='dark'] .counselor-note-reply-author {
  color: #e8edf4 !important;
}

[data-theme='dark'] .counselor-note-badge,
[data-theme='dark'] .counselor-note-time,
[data-theme='dark'] .counselor-note-replies-title {
  color: #c5d0de !important;
}

[data-theme='dark'] .counselor-note-replies {
  border-top-color: #3d4f66 !important;
}

/* ---- Weekly summary / Goals / Achievements ---- */
[data-theme='dark'] .weekly-summary-card,
[data-theme='dark'] .personal-goals,
[data-theme='dark'] .goal-item,
[data-theme='dark'] .reward-system-container,
[data-theme='dark'] .reward-stat-card,
[data-theme='dark'] .achievement-card,
[data-theme='dark'] .achievement-card.locked,
[data-theme='dark'] .achievement-card.unlocked,
[data-theme='dark'] .no-rewards-message,
[data-theme='dark'] .points-info,
[data-theme='dark'] .stat-row,
[data-theme='dark'] .peer-comparison-card {
  background: #1a2332 !important;
  background-image: none !important;
  border-color: #3d4f66 !important;
  color: #e8edf4 !important;
  box-shadow: none !important;
}

[data-theme='dark'] .weekly-summary-card::before {
  display: none !important;
}

[data-theme='dark'] .weekly-summary-card .card-title,
[data-theme='dark'] .goals-title,
[data-theme='dark'] .goal-title,
[data-theme='dark'] .achievement-name,
[data-theme='dark'] .stat-value,
[data-theme='dark'] .stat-label,
[data-theme='dark'] .section-label {
  background: none !important;
  -webkit-text-fill-color: #e8edf4 !important;
  color: #e8edf4 !important;
}

[data-theme='dark'] .achievement-desc,
[data-theme='dark'] .goal-progress-text,
[data-theme='dark'] .progress-text-small,
[data-theme='dark'] .section-subtitle {
  color: #c5d0de !important;
}

[data-theme='dark'] .progress-bar-container,
[data-theme='dark'] .progress-bar-small {
  background: #2d3a50 !important;
}

[data-theme='dark'] .streak-card,
[data-theme='dark'] .day-streak,
[data-theme='dark'] [class*='streak'] {
  background: #3d3020 !important;
  color: #fcd34d !important;
  border-color: #6b5a2d !important;
}

/* ---- Community partner consent ---- */
[data-theme='dark'] .care-consent-banner {
  background: #1a2332 !important;
  border-color: #3d4f66 !important;
  color: #e8edf4 !important;
}

[data-theme='dark'] .care-consent-banner-title,
[data-theme='dark'] .care-consent-banner-lead,
[data-theme='dark'] .care-consent-banner-action,
[data-theme='dark'] .care-consent-banner-item strong {
  color: #e8edf4 !important;
}

[data-theme='dark'] .care-consent-banner-hint,
[data-theme='dark'] .care-consent-banner-muted {
  color: #c5d0de !important;
}

[data-theme='dark'] .care-consent-banner-item,
[data-theme='dark'] .care-consent-banner-item--pending,
[data-theme='dark'] .care-consent-banner-item--accepted,
[data-theme='dark'] .care-consent-banner-item--rejected {
  background: #243044 !important;
  border-color: #3d4f66 !important;
  color: #e8edf4 !important;
}

/* ---- Flagged needs / loop resource match (white frames) ---- */
[data-theme='dark'] .fnr-card,
[data-theme='dark'] .fnr-card.fnr-main,
[data-theme='dark'] .fnr-card.fnr-warn,
[data-theme='dark'] .fnr-card.fnr-success,
[data-theme='dark'] .fnr-card.fnr-muted,
[data-theme='dark'] .fnr-location-panel,
[data-theme='dark'] .fnr-item,
[data-theme='dark'] .fnr-why-modal,
[data-theme='dark'] .fnr-google-item,
[data-theme='dark'] .fnr-nearby-search-list-item,
[data-theme='dark'] .loop-match-section,
[data-theme='dark'] .loop-match-panel {
  background: #1a2332 !important;
  background-image: none !important;
  border-color: #3d4f66 !important;
  color: #e8edf4 !important;
  box-shadow: none !important;
}

[data-theme='dark'] .loop-match-toggle {
  background: #243044 !important;
  color: #e8edf4 !important;
}

[data-theme='dark'] .loop-match-toggle:hover {
  background: #2a3850 !important;
}

[data-theme='dark'] .loop-match-domain,
[data-theme='dark'] .fnr-item-head strong,
[data-theme='dark'] .fnr-title,
[data-theme='dark'] .fnr-google-domain-title,
[data-theme='dark'] .fnr-nearby-search-domain,
[data-theme='dark'] .fnr-why-head h2,
[data-theme='dark'] .fnr-why-resource-title {
  color: #e8edf4 !important;
}

[data-theme='dark'] .loop-match-summary,
[data-theme='dark'] .fnr-lead,
[data-theme='dark'] .fnr-desc,
[data-theme='dark'] .fnr-location-hint,
[data-theme='dark'] .fnr-loop-matches-intro,
[data-theme='dark'] .fnr-google-disclaimer,
[data-theme='dark'] .fnr-google-hint,
[data-theme='dark'] .fnr-why-meta,
[data-theme='dark'] .loop-match-empty,
[data-theme='dark'] .loop-match-block-title {
  color: #c5d0de !important;
}

[data-theme='dark'] .fnr-btn-secondary,
[data-theme='dark'] .fnr-map-toggle,
[data-theme='dark'] .fnr-radius-select,
[data-theme='dark'] .fnr-location-input,
[data-theme='dark'] .fnr-why-close {
  background: #243044 !important;
  color: #e8edf4 !important;
  border-color: #4a5f78 !important;
}

[data-theme='dark'] .fnr-radius-label,
[data-theme='dark'] .fnr-nearby-count,
[data-theme='dark'] .fnr-map-legend-item {
  color: #c5d0de !important;
}

[data-theme='dark'] .fnr-cat,
[data-theme='dark'] .fnr-google-domain-count {
  background: #1e3a5f !important;
  color: #8bb8ef !important;
}

[data-theme='dark'] .fnr-expand {
  background: #1a3d32 !important;
  color: #5eead4 !important;
  border-color: #2d6b5a !important;
}

/* ---- Medications workspace + page ---- */
[data-theme='dark'] .student-med-page {
  background: #121a26 !important;
  color: #e8edf4 !important;
}

[data-theme='dark'] .student-med-page h1,
[data-theme='dark'] .student-med-title {
  color: #e8edf4 !important;
}

[data-theme='dark'] .student-med-lead,
[data-theme='dark'] .student-med-page > main > p {
  color: #c5d0de !important;
}

[data-theme='dark'] .med-workspace {
  color: #e8edf4 !important;
}

[data-theme='dark'] .med-hero,
[data-theme='dark'] .med-section,
[data-theme='dark'] .med-pending-row,
[data-theme='dark'] .med-pending-row--readonly,
[data-theme='dark'] .med-kpi {
  background: #1a2332 !important;
  background-image: none !important;
  border-color: #3d4f66 !important;
  color: #e8edf4 !important;
  box-shadow: none !important;
  animation: none !important;
}

[data-theme='dark'] .med-kpi-row .med-kpi:nth-child(1),
[data-theme='dark'] .med-kpi-row .med-kpi:nth-child(2),
[data-theme='dark'] .med-kpi-row .med-kpi:nth-child(3),
[data-theme='dark'] .med-kpi-row .med-kpi:nth-child(4) {
  background: #243044 !important;
  color: #e8edf4 !important;
}

[data-theme='dark'] .med-hero-title,
[data-theme='dark'] .med-section h3,
[data-theme='dark'] .med-section-head h3,
[data-theme='dark'] .med-pending-row-main,
[data-theme='dark'] .med-pending-row-main strong,
[data-theme='dark'] .med-kpi-value,
[data-theme='dark'] .med-kpi-label {
  color: #e8edf4 !important;
}

[data-theme='dark'] .med-hero-sub,
[data-theme='dark'] .med-pending-row-meta,
[data-theme='dark'] .med-toolbar-hint,
[data-theme='dark'] .med-bar-label,
[data-theme='dark'] .med-form-title {
  color: #c5d0de !important;
}

[data-theme='dark'] .med-pending-row-cta {
  color: #8bb8ef !important;
}

[data-theme='dark'] .med-btn {
  background: #243044 !important;
  color: #e8edf4 !important;
  border-color: #4a5f78 !important;
}

[data-theme='dark'] .med-btn:hover:not(:disabled) {
  background: #2a3850 !important;
  border-color: #6ba3e8 !important;
  color: #e8edf4 !important;
}

[data-theme='dark'] .med-btn-primary {
  background: linear-gradient(165deg, #4a90e2 0%, #357abd 100%) !important;
  color: #fff !important;
  border-color: #357abd !important;
}

[data-theme='dark'] .med-alert-banner {
  background: #3d3020 !important;
  border-color: #6b5a2d !important;
  color: #fcd34d !important;
}

[data-theme='dark'] .med-date-label input[type='date'] {
  background: #243044 !important;
  color: #e8edf4 !important;
  border-color: #4a5f78 !important;
}
/* ============================================================================
   Staff / Admin night mode — match student dashboard readability:
   dark cards, white/light text, no white islands.
   Injected last via ThemeContext.
   ============================================================================ */

/* ---- Global staff shell ---- */
[data-theme='dark'] .admin-dashboard,
[data-theme='dark'] .admin-dashboard .dashboard-content,
[data-theme='dark'] .admin-dashboard .dashboard-main {
  color: #ffffff !important;
}

[data-theme='dark'] .admin-dashboard h1,
[data-theme='dark'] .admin-dashboard h2,
[data-theme='dark'] .admin-dashboard h3,
[data-theme='dark'] .admin-dashboard h4,
[data-theme='dark'] .admin-dashboard p,
[data-theme='dark'] .admin-dashboard label,
[data-theme='dark'] .admin-dashboard li,
[data-theme='dark'] .admin-dashboard span:not([class*='btn']):not([class*='badge']):not([class*='pill']):not([class*='chip']):not([class*='risk']):not([class*='sev']),
[data-theme='dark'] .admin-dashboard td,
[data-theme='dark'] .admin-dashboard th,
[data-theme='dark'] .admin-dashboard strong,
[data-theme='dark'] .admin-dashboard .section-title,
[data-theme='dark'] .admin-dashboard [class*='-title']:not([class*='btn']),
[data-theme='dark'] .admin-dashboard [class*='-label']:not([class*='btn']):not([class*='badge']),
[data-theme='dark'] .admin-dashboard [class*='-meta'],
[data-theme='dark'] .admin-dashboard [class*='-sub'],
[data-theme='dark'] .admin-dashboard [class*='-hint'],
[data-theme='dark'] .admin-dashboard [class*='-muted'],
[data-theme='dark'] .admin-dashboard [class*='-desc'] {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background-image: none !important;
}

[data-theme='dark'] .admin-dashboard [class*='-card']:not([class*='btn']):not([class*='badge']),
[data-theme='dark'] .admin-dashboard [class*='-panel']:not([class*='btn']),
[data-theme='dark'] .admin-dashboard [class*='-section']:not([class*='btn']),
[data-theme='dark'] .admin-dashboard [class*='-widget'],
[data-theme='dark'] .admin-dashboard [class*='-box'],
[data-theme='dark'] .admin-dashboard [class*='-wrapper'],
[data-theme='dark'] .admin-dashboard [class*='table-container'],
[data-theme='dark'] .admin-dashboard [class*='search'],
[data-theme='dark'] .admin-dashboard .chart-wrapper,
[data-theme='dark'] .admin-dashboard .overview-section,
[data-theme='dark'] .admin-dashboard .school-branding-section,
[data-theme='dark'] .admin-dashboard .top-panel,
[data-theme='dark'] .admin-dashboard .right-panel {
  background: #1a2332 !important;
  background-image: none !important;
  border-color: #3d4f66 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

[data-theme='dark'] .admin-dashboard input,
[data-theme='dark'] .admin-dashboard select,
[data-theme='dark'] .admin-dashboard textarea {
  background: #121a26 !important;
  color: #ffffff !important;
  border-color: #4a5f78 !important;
}

[data-theme='dark'] .admin-dashboard input::placeholder,
[data-theme='dark'] .admin-dashboard textarea::placeholder {
  color: #9aabd0 !important;
}

[data-theme='dark'] .admin-dashboard button:not([class*='primary']):not([class*='btn-primary']):not(.btn-primary):not([class*='badge']):not([class*='risk']) {
  background: #243044 !important;
  color: #ffffff !important;
  border-color: #4a5f78 !important;
}

[data-theme='dark'] .admin-dashboard .btn-primary,
[data-theme='dark'] .admin-dashboard button.btn-primary,
[data-theme='dark'] .admin-dashboard [class*='btn-primary'] {
  background: #4a90e2 !important;
  color: #ffffff !important;
  border-color: #357abd !important;
}

/* ---- Closing the Loop overview KPIs ---- */
[data-theme='dark'] .closing-loop-overview,
[data-theme='dark'] .closing-loop-overview--compact,
[data-theme='dark'] .closing-loop-dashboard-widget,
[data-theme='dark'] .closing-loop-overview-panel {
  background: #1a2332 !important;
  background-image: none !important;
  border-color: #3d4f66 !important;
  color: #ffffff !important;
}

[data-theme='dark'] .closing-loop-kpi,
[data-theme='dark'] .closing-loop-kpi--red,
[data-theme='dark'] .closing-loop-kpi--yellow,
[data-theme='dark'] .closing-loop-kpi--green {
  background: #243044 !important;
  background-image: none !important;
  border-color: #3d4f66 !important;
  box-shadow: none !important;
  color: #ffffff !important;
}

[data-theme='dark'] .closing-loop-kpi__value,
[data-theme='dark'] .closing-loop-kpi__label,
[data-theme='dark'] .closing-loop-kpi__sub {
  color: #ffffff !important;
}

[data-theme='dark'] .closing-loop-kpi--red .closing-loop-kpi__value,
[data-theme='dark'] .closing-loop-kpi--red .closing-loop-kpi__label {
  color: #fca5a5 !important;
}

[data-theme='dark'] .closing-loop-kpi--yellow .closing-loop-kpi__value,
[data-theme='dark'] .closing-loop-kpi--yellow .closing-loop-kpi__label {
  color: #fcd34d !important;
}

[data-theme='dark'] .closing-loop-kpi--green .closing-loop-kpi__value,
[data-theme='dark'] .closing-loop-kpi--green .closing-loop-kpi__label {
  color: #86efac !important;
}

[data-theme='dark'] .closing-loop-overview__pipeline-title,
[data-theme='dark'] .closing-loop-pipeline-step__label,
[data-theme='dark'] .closing-loop-overview__legend {
  color: #ffffff !important;
}

[data-theme='dark'] .closing-loop-pipeline-step__circle {
  background: #2e5a8a !important;
  color: #ffffff !important;
}

/* ---- Student triage / management ---- */
[data-theme='dark'] .student-triage-table,
[data-theme='dark'] .prioritization-panel,
[data-theme='dark'] .students-page,
[data-theme='dark'] .students-section,
[data-theme='dark'] .search-box,
[data-theme='dark'] .search-students,
[data-theme='dark'] .student-search,
[data-theme='dark'] .table-header,
[data-theme='dark'] .table-container {
  background: #1a2332 !important;
  border-color: #3d4f66 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

[data-theme='dark'] .student-triage-table h2,
[data-theme='dark'] .student-count-badge,
[data-theme='dark'] .filter-select {
  background: #243044 !important;
  color: #ffffff !important;
  border-color: #4a5f78 !important;
}

[data-theme='dark'] .student-triage-table th {
  background: #243044 !important;
  color: #ffffff !important;
  border-color: #3d4f66 !important;
}

[data-theme='dark'] .student-triage-table td {
  background: #1a2332 !important;
  color: #ffffff !important;
  border-color: #3d4f66 !important;
}

[data-theme='dark'] .student-triage-table tbody tr:nth-child(even) td {
  background: #1e2838 !important;
}

/* ---- Student profile drawer / Student Information ---- */
[data-theme='dark'] .student-profile-drawer,
[data-theme='dark'] .student-profile-drawer .drawer-content,
[data-theme='dark'] .student-profile-drawer .drawer-body,
[data-theme='dark'] .student-profile-drawer .tab-content,
[data-theme='dark'] .info-item,
[data-theme='dark'] .info-grid .info-item,
[data-theme='dark'] .appointment-context,
[data-theme='dark'] .notes-text,
[data-theme='dark'] .wellness-day-row,
[data-theme='dark'] .score-history-item,
[data-theme='dark'] .trend-item,
[data-theme='dark'] .daily-score-item,
[data-theme='dark'] .no-data-message {
  background: #1a2332 !important;
  background-image: none !important;
  border-color: #3d4f66 !important;
  color: #ffffff !important;
}

[data-theme='dark'] .info-item label,
[data-theme='dark'] .info-item .info-label,
[data-theme='dark'] .info-item span,
[data-theme='dark'] .info-item strong,
[data-theme='dark'] .info-item input,
[data-theme='dark'] .info-value {
  color: #ffffff !important;
  background: transparent !important;
}

[data-theme='dark'] .info-item input,
[data-theme='dark'] .student-profile-drawer input,
[data-theme='dark'] .student-profile-drawer select,
[data-theme='dark'] .student-profile-drawer textarea {
  background: #121a26 !important;
  color: #ffffff !important;
  border-color: #4a5f78 !important;
}

/* SDOH follow-up / flagged domains list */
[data-theme='dark'] .hrsn-followup-alert,
[data-theme='dark'] .hrsn-flag-card,
[data-theme='dark'] .sdoh-followup-card,
[data-theme='dark'] .staff-screening-followup,
[data-theme='dark'] .staff-screening-followup ul,
[data-theme='dark'] .staff-screening-followup li,
[data-theme='dark'] .flagged-domains-list,
[data-theme='dark'] .flagged-domains-list li {
  color: #ffffff !important;
}

[data-theme='dark'] .staff-screening-followup li,
[data-theme='dark'] .hrsn-flag-card li {
  color: #e8edf4 !important;
}

/* ---- Closing loop staff tab / care loop tracker ---- */
[data-theme='dark'] .care-loop-tracker,
[data-theme='dark'] .care-loop-case-card,
[data-theme='dark'] .export-referral-banner,
[data-theme='dark'] .staff-cr-export,
[data-theme='dark'] .staff-cr-panel,
[data-theme='dark'] .staff-community-referrals-page [class*='card'],
[data-theme='dark'] .staff-community-referrals-page [class*='panel'],
[data-theme='dark'] .staff-community-referrals-page [class*='banner'] {
  background: #1a2332 !important;
  background-image: none !important;
  border-color: #3d4f66 !important;
  color: #ffffff !important;
}

[data-theme='dark'] .staff-community-referrals-page,
[data-theme='dark'] .staff-community-referrals-page p,
[data-theme='dark'] .staff-community-referrals-page span:not([class*='badge']):not([class*='btn']),
[data-theme='dark'] .staff-community-referrals-page label {
  color: #ffffff !important;
}

/* ---- Appointments / calendar ---- */
[data-theme='dark'] .appointments-page,
[data-theme='dark'] .appointment-calendar,
[data-theme='dark'] .calendar-container,
[data-theme='dark'] .calendar-grid,
[data-theme='dark'] .calendar-day,
[data-theme='dark'] .calendar-header,
[data-theme='dark'] .fc,
[data-theme='dark'] .fc-theme-standard td,
[data-theme='dark'] .fc-theme-standard th,
[data-theme='dark'] .fc-scrollgrid,
[data-theme='dark'] .fc-daygrid-day,
[data-theme='dark'] .fc-col-header-cell,
[data-theme='dark'] .fc-toolbar {
  background: #1a2332 !important;
  border-color: #3d4f66 !important;
  color: #ffffff !important;
}

[data-theme='dark'] .calendar-day-number,
[data-theme='dark'] .fc-daygrid-day-number,
[data-theme='dark'] .fc-col-header-cell-cushion,
[data-theme='dark'] .fc-toolbar-title {
  color: #ffffff !important;
}

[data-theme='dark'] .calendar-nav-btn,
[data-theme='dark'] .view-btn,
[data-theme='dark'] .office-hours-btn {
  background: #243044 !important;
  color: #ffffff !important;
  border-color: #4a5f78 !important;
}

/* ---- Population health scope ---- */
[data-theme='dark'] .population-health-page,
[data-theme='dark'] .ph-scope,
[data-theme='dark'] .ph-date-scope,
[data-theme='dark'] .ph-students-scope,
[data-theme='dark'] .ph-collapsible,
[data-theme='dark'] .ph-collapsible-header,
[data-theme='dark'] .ph-student-row,
[data-theme='dark'] .date-range-card,
[data-theme='dark'] .students-picker,
[data-theme='dark'] .multi-student-picker {
  background: #1a2332 !important;
  border-color: #3d4f66 !important;
  color: #ffffff !important;
}

[data-theme='dark'] .ph-collapsible-heading,
[data-theme='dark'] .ph-collapsible-sub,
[data-theme='dark'] .population-health-page .ph-collapsible-header,
[data-theme='dark'] .population-health-page .ph-collapsible-header * {
  color: #ffffff !important;
}

[data-theme='dark'] .ph-student-row,
[data-theme='dark'] .student-chip-row {
  background: #243044 !important;
  color: #ffffff !important;
  border-color: #3d4f66 !important;
}

/* ---- Resource map ---- */
[data-theme='dark'] .admin-resource-map-page,
[data-theme='dark'] .resource-map-page,
[data-theme='dark'] .resource-list-item,
[data-theme='dark'] .resource-card,
[data-theme='dark'] .rmap-card,
[data-theme='dark'] .rmap-banner,
[data-theme='dark'] .resource-map-banner,
[data-theme='dark'] .school-resources-banner {
  background: #1a2332 !important;
  border-color: #3d4f66 !important;
  color: #ffffff !important;
}

[data-theme='dark'] .resource-list-item h3,
[data-theme='dark'] .resource-list-item h4,
[data-theme='dark'] .resource-card h3,
[data-theme='dark'] .rmap-card h3,
[data-theme='dark'] .resource-list-item p,
[data-theme='dark'] .resource-card p,
[data-theme='dark'] .resource-list-item strong,
[data-theme='dark'] .rmap-card strong {
  color: #ffffff !important;
}

/* ---- Resource utilization feedback ---- */
[data-theme='dark'] .resource-utilization-page,
[data-theme='dark'] .admin-resource-utilization-page,
[data-theme='dark'] .ruf-page,
[data-theme='dark'] .ruf-table,
[data-theme='dark'] .ruf-table th,
[data-theme='dark'] .ruf-table td,
[data-theme='dark'] .ruf-filters,
[data-theme='dark'] .ruf-tabs button {
  background: #1a2332 !important;
  color: #ffffff !important;
  border-color: #3d4f66 !important;
}

[data-theme='dark'] .ruf-tabs button,
[data-theme='dark'] .ruf-tab,
[data-theme='dark'] .ruf-filter-label {
  color: #ffffff !important;
}

[data-theme='dark'] .ruf-status--closed,
[data-theme='dark'] .status-closed {
  background: #243044 !important;
  color: #ffffff !important;
  border-color: #4a5f78 !important;
}

/* ---- HRSN / follow-up panels ---- */
[data-theme='dark'] .hrsn-flags-page,
[data-theme='dark'] .hrsn-flags-table-wrap,
[data-theme='dark'] .hrsn-flags-table,
[data-theme='dark'] .hrsn-referral-modal,
[data-theme='dark'] .hrsn-flags-summary,
[data-theme='dark'] .hrsn-flags-empty {
  background: #1a2332 !important;
  color: #ffffff !important;
  border-color: #3d4f66 !important;
}

[data-theme='dark'] .hrsn-flags-table th,
[data-theme='dark'] .hrsn-flags-table td,
[data-theme='dark'] .hrsn-flags-header h1,
[data-theme='dark'] .hrsn-flags-header p,
[data-theme='dark'] .hrsn-flags-muted {
  color: #ffffff !important;
  background: transparent !important;
}

[data-theme='dark'] .hrsn-flags-table th {
  background: #243044 !important;
}

/* Preserve risk / severity colored badges */
[data-theme='dark'] .admin-dashboard .risk-badge,
[data-theme='dark'] .admin-dashboard [class*='risk-high'],
[data-theme='dark'] .admin-dashboard [class*='risk-medium'],
[data-theme='dark'] .admin-dashboard [class*='risk-low'],
[data-theme='dark'] .admin-dashboard [class*='severity'] {
  -webkit-text-fill-color: unset !important;
}