/* =================================================================
   MindEase Design System
   Calm healthcare/education UI for MindUsers, parents and supervisors.
   Light and dark palettes are exposed through semantic CSS variables.
   ================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Atkinson+Hyperlegible:wght@400;700&display=swap');

:root {
  color-scheme: light;

  --me-bg: #FCFDFF;
  --me-bg-soft: #F4F9FE;
  --me-surface: #ffffff;
  --me-surface-2: #F0F5FB;
  --me-elevated: #ffffff;
  --me-border: #E3ECF7;
  --me-border-strong: #D9E4F2;

  --me-text: #1A1F3B;
  --me-text-muted: #4A5170;
  --me-text-soft: #7A83A0;
  --me-inverse: #F7FAFF;

  --me-primary: #20B2AA;
  --me-primary-hover: #1B968F;
  --me-primary-soft: #E4F7F5;
  --me-primary-ink: #0F5C56;

  --me-coral: #E2735C;
  --me-coral-soft: #FBE7E1;
  --me-amber: #E8A72E;
  --me-amber-soft: #FFF3DA;
  --me-lavender: #8B6CFF;
  --me-lavender-soft: #EEE9FF;
  --me-success: #2FAE72;
  --me-success-soft: #ddf3e5;
  --me-danger: #d9534f;
  --me-danger-soft: #fde7e5;
  --me-info: #35A8E0;
  --me-info-soft: #E1F1FB;

  --me-sidebar: #1A1F3B;
  --me-sidebar-2: #12162A;
  --me-sidebar-text: #EDF0FA;
  --me-sidebar-muted: #A8B0CE;

  --me-shadow-sm: 0 1px 2px rgba(26, 31, 59, .06);
  --me-shadow-md: 0 10px 26px rgba(26, 31, 59, .08);
  --me-shadow-lg: 0 22px 56px rgba(26, 31, 59, .12);

  --me-radius-xs: 6px;
  --me-radius-sm: 8px;
  --me-radius-md: 10px;
  --me-radius-lg: 12px;

  --me-font-ui: "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --me-font-readable: "Atkinson Hyperlegible", "Nunito", system-ui, sans-serif;
  --me-font-display: "Nunito", system-ui, sans-serif;

  /* Backward-compatible aliases used by existing pages. */
  --gc-dark: var(--me-sidebar);
  --gc-dark-deep: var(--me-sidebar-2);
  --gc-teal: var(--me-primary);
  --gc-teal-dark: var(--me-primary-hover);
  --gc-purple: var(--me-lavender);
  --gc-purple-dk: #6f57d1;
  --gc-amber: var(--me-amber);
  --gc-amber-dk: #c7922e;
  --gc-sky: #BDE3F7;
  --gc-bg: var(--me-bg);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --me-bg: #12141C;
    --me-bg-soft: #171A24;
    --me-surface: #1D202B;
    --me-surface-2: #232733;
    --me-elevated: #262A38;
    --me-border: #333849;
    --me-border-strong: #454C63;

    --me-text: #EDEFF7;
    --me-text-muted: #B7BECF;
    --me-text-soft: #8B93AA;
    --me-inverse: #10121A;

    --me-primary: #4DD0C7;
    --me-primary-hover: #6EE0D8;
    --me-primary-soft: #163531;
    --me-primary-ink: #B9F3ED;

    --me-coral: #E8917C;
    --me-coral-soft: #402420;
    --me-amber: #F0C669;
    --me-amber-soft: #40340F;
    --me-lavender: #AE9BFF;
    --me-lavender-soft: #221E3E;
    --me-success: #6DD5A6;
    --me-success-soft: #163524;
    --me-danger: #ff8a80;
    --me-danger-soft: #4a2525;
    --me-info: #6EC3F0;
    --me-info-soft: #17303F;

    --me-sidebar: #0E1018;
    --me-sidebar-2: #0A0C12;
    --me-sidebar-text: #EDEFF7;
    --me-sidebar-muted: #9AA1B2;

    --me-shadow-sm: 0 1px 2px rgba(0, 0, 0, .24);
    --me-shadow-md: 0 10px 26px rgba(0, 0, 0, .28);
    --me-shadow-lg: 0 22px 56px rgba(0, 0, 0, .34);
  }
}

html,
body,
button,
input,
textarea,
select,
label {
  font-family: var(--me-font-ui) !important;
}

body {
  background: var(--me-bg);
  color: var(--me-text);
}

h1,
h2,
h3,
.navbar-brand,
.brand,
.hero-title {
  font-family: var(--me-font-display);
  letter-spacing: 0;
}

a {
  color: var(--me-primary);
}

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--me-primary), transparent 58%);
  outline-offset: 2px;
}

::selection {
  background: var(--me-primary-soft);
  color: var(--me-primary-ink);
}

.top-navbar,
.sidebar,
nav.sidebar {
  background: linear-gradient(180deg, var(--me-sidebar), var(--me-sidebar-2)) !important;
  color: var(--me-sidebar-text) !important;
}

.top-navbar {
  border-bottom: 1px solid var(--me-border);
  box-shadow: var(--me-shadow-sm);
}

.top-navbar .navbar-brand {
  margin: 0;
  padding: 0;
  min-width: 0;
  flex: 0 1 auto;
  display: inline-flex;
  align-items: center;
}

.top-navbar .brand-logo {
  display: block;
  width: 36px;
  height: 36px;
  max-width: 100%;
}

.sidebar a,
.sidebar .nav-link {
  border-radius: var(--me-radius-sm) !important;
  color: var(--me-sidebar-muted) !important;
}

.sidebar a:hover,
.sidebar .nav-link:hover {
  background: var(--me-sidebar-2) !important;
  color: var(--me-sidebar-text) !important;
}

.sidebar a.active,
.sidebar .nav-link.active {
  background: var(--me-surface) !important;
  color: var(--me-sidebar-text) !important;
  font-weight: 900 !important;
}

.main-content,
.chat-main,
.main,
.dashboard {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--me-primary-soft), transparent 62%), transparent 260px),
    var(--me-bg) !important;
  color: var(--me-text);
}

.card,
.panel,
.info-card,
.info-panel,
table,
.child-selector,
.clinical-panel,
.me-surface {
  background: var(--me-surface) !important;
  border: 1px solid var(--me-border) !important;
  border-radius: var(--me-radius-lg) !important;
  box-shadow: var(--me-shadow-sm) !important;
  color: var(--me-text) !important;
}

.card:hover,
.panel:hover,
.info-card:hover,
.info-panel:hover,
.me-surface:hover {
  box-shadow: var(--me-shadow-md) !important;
}

.btn,
button,
.btn-google {
  border-radius: var(--me-radius-sm) !important;
  font-weight: 700;
  letter-spacing: 0;
}

.btn-primary,
.btn-google,
button[type="submit"] {
  background: var(--me-primary) !important;
  border-color: var(--me-primary) !important;
  color: #fff !important;
}

.btn-primary:hover,
.btn-google:hover,
button[type="submit"]:hover {
  background: var(--me-primary-hover) !important;
  border-color: var(--me-primary-hover) !important;
  color: #fff !important;
}

.btn-secondary,
.btn-outline-secondary {
  background: var(--me-surface-2) !important;
  border-color: var(--me-border) !important;
  color: var(--me-text) !important;
}

input,
textarea,
select,
.form-control,
.form-select,
.mode-select {
  background: var(--me-surface) !important;
  border: 1px solid var(--me-border-strong) !important;
  border-radius: var(--me-radius-sm) !important;
  color: var(--me-text) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--me-text-soft) !important;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-select:focus {
  border-color: var(--me-primary) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--me-primary), transparent 82%) !important;
}

.badge,
.nav-badge,
.mood-btn,
.emotion-chip,
.status-chip {
  border-radius: 999px !important;
  font-weight: 700;
}

.badge.none { background: var(--me-success-soft) !important; color: var(--me-primary-ink) !important; }
.badge.low { background: var(--me-info-soft) !important; color: var(--me-info) !important; }
.badge.medium { background: var(--me-amber-soft) !important; color: var(--me-amber) !important; }
.badge.high { background: var(--me-coral-soft) !important; color: var(--me-coral) !important; }
.badge.neutral { background: var(--me-sidebar-2) !important; color: var(--me-sidebar-muted) !important; }
.badge.whitelist,
.badge.parent,
.ok-msg { background: var(--me-success-soft) !important; color: #17633b !important; }
.badge.blacklist,
.err-msg { background: var(--me-danger-soft) !important; color: #9d1f1b !important; }
.badge.child { background: var(--me-primary-soft) !important; color: var(--me-primary-ink) !important; }

table {
  overflow: hidden;
}

th {
  background: var(--me-surface-2) !important;
  color: var(--me-text-muted) !important;
  font-size: .78rem;
  text-transform: uppercase;
}

td,
th {
  border-bottom-color: var(--me-border) !important;
}

.alert,
.info-box {
  border-radius: var(--me-radius-sm) !important;
}

.me-alert-info,
.info-box {
  background: var(--me-primary-soft) !important;
  border-left: 4px solid var(--me-primary) !important;
  color: var(--me-primary-ink) !important;
}

.privacy-note,
.me-alert-warning {
  background: var(--me-amber-soft) !important;
  border-left: 4px solid var(--me-amber) !important;
  color: var(--me-text) !important;
}

.feedback.success {
  background: var(--me-success-soft) !important;
  border-left: 4px solid var(--me-success) !important;
  color: var(--me-text) !important;
}

.feedback.error {
  background: var(--me-danger-soft) !important;
  border-left: 4px solid var(--me-danger) !important;
  color: var(--me-text) !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}