/* ThyroCheck AI - original thyroid-health visual identity (light theme)
   Background palette: pearl / pale-blue, dark text - chosen for readability.
   Navigation/sidebar: midnight-slate. Accents: cobalt-sky gradient, raspberry
   CTA, apricot chart highlights. Every accent has a "-deep" text-safe variant
   used wherever the color sits on a light background, so nothing renders as
   light-on-light or low-contrast text. */

:root {
  --midnight: #172033;
  --midnight-soft: #202b45;
  --cobalt: #2947A9;
  --sky: #55B8F2;
  --sky-deep: #1D6FA3;
  --raspberry: #D94A78;
  --raspberry-deep: #B23A63;
  --rose: #F2A6BD;
  --apricot: #F5B77E;
  --apricot-deep: #B36A1E;
  --amber: #E8A23A;
  --amber-deep: #9C6118;

  --pearl-bg: #F8FAFD;
  --pale-blue: #EAF3FC;
  --white: #FFFFFF;
  --border-soft: #DDE6F2;

  --text-dark: #202638;
  --text-muted: #5B6478;

  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 9px;
  --shadow-soft: 0 10px 30px rgba(23, 32, 51, 0.12);
  --shadow-card: 0 4px 16px rgba(23, 32, 51, 0.08);
}

* { box-sizing: border-box; }

body {
  background: var(--pearl-bg);
  color: var(--text-dark);
  font-family: "Segoe UI", "Inter", system-ui, -apple-system, sans-serif;
  min-height: 100vh;
}

a { color: var(--cobalt); text-decoration: none; }
a:hover { color: var(--raspberry-deep); }

.text-muted-custom { color: var(--text-muted) !important; }
.text-heading { color: var(--text-dark) !important; }

/* ---------- Navbar (midnight slate, white text - unchanged, already high contrast) ---------- */
.navbar-thyro {
  background: linear-gradient(180deg, var(--midnight) 0%, var(--midnight-soft) 100%);
  box-shadow: var(--shadow-soft);
  padding: 0.75rem 0;
}
.navbar-thyro .navbar-brand { color: var(--white); font-weight: 700; font-size: 1.25rem; display: flex; align-items: center; gap: 0.5rem; }
.navbar-thyro .navbar-brand .brand-badge {
  width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(135deg, var(--cobalt), var(--sky));
  display: flex; align-items: center; justify-content: center; color: white;
}
.navbar-thyro .nav-link { color: rgba(255,255,255,0.75); font-weight: 500; }
.navbar-thyro .nav-link:hover, .navbar-thyro .nav-link.active { color: var(--white); }
.navbar-thyro .navbar-toggler { border-color: rgba(255,255,255,0.3); }

.badge-not-clinical {
  background: var(--raspberry);
  color: white;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
}

/* ---------- Buttons ---------- */
.btn-thyro-primary {
  background: linear-gradient(135deg, var(--cobalt), var(--sky));
  border: none; color: white; font-weight: 600;
  border-radius: var(--radius-sm); padding: 0.6rem 1.4rem;
  box-shadow: 0 6px 16px rgba(41, 71, 169, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-thyro-primary:hover { color: white; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(41, 71, 169, 0.4); }

.btn-thyro-cta {
  background: var(--raspberry); border: none; color: white; font-weight: 600;
  border-radius: var(--radius-sm); padding: 0.6rem 1.4rem;
  box-shadow: 0 6px 16px rgba(217, 74, 120, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-thyro-cta:hover { color: white; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(217, 74, 120, 0.4); }

.btn-thyro-outline {
  background: var(--white); border: 1.5px solid var(--border-soft); color: var(--text-dark);
  font-weight: 600; border-radius: var(--radius-sm); padding: 0.55rem 1.35rem;
}
.btn-thyro-outline:hover { background: var(--pale-blue); color: var(--cobalt); border-color: var(--cobalt); }

/* Buttons placed directly on the dark hero banner need light text/border, not the default dark-on-light styling above. */
.hero-banner .btn-thyro-outline {
  background: transparent; border-color: rgba(255,255,255,0.55); color: white;
}
.hero-banner .btn-thyro-outline:hover { background: rgba(255,255,255,0.12); color: white; border-color: white; }

/* ---------- Cards ---------- */
.card-thyro {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
}
.card-thyro-elevated {
  background: var(--pale-blue);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
}
.stat-card { text-align: center; }
.stat-card .stat-value { font-size: 2rem; font-weight: 700; color: var(--cobalt); }
.stat-card .stat-label { color: var(--text-muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; }

/* ---------- Hero banner (original CSS illustration, no external images) ----------
   The hero stays dark (midnight -> cobalt gradient) by design, so white text here
   is intentional and remains high-contrast regardless of the page's light theme. */
.hero-banner {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, var(--midnight) 0%, var(--cobalt) 100%);
  padding: 3.5rem 2.5rem;
  color: white;
  box-shadow: var(--shadow-soft);
}
.hero-banner .hero-eyebrow {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: rgba(255,255,255,0.14); border-radius: 999px; padding: 0.3rem 0.8rem;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.03em; margin-bottom: 1rem;
  color: white;
}
.hero-banner h1 { font-weight: 800; font-size: 2.4rem; line-height: 1.15; color: white; }
.hero-banner p.lead { color: rgba(255,255,255,0.9); }

.hero-butterfly {
  position: absolute; right: -40px; top: 50%; transform: translateY(-50%);
  width: 320px; height: 320px; opacity: 0.9; pointer-events: none;
}
.hero-chip {
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.28);
  border-radius: 999px; padding: 0.35rem 0.85rem; font-size: 0.8rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: 0.4rem; color: white;
}
.hero-lab-card {
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.28);
  border-radius: var(--radius-md); padding: 0.75rem 1rem; backdrop-filter: blur(2px);
}
.hero-lab-card .lab-name { font-size: 0.7rem; color: rgba(255,255,255,0.8); text-transform: uppercase; letter-spacing: 0.05em; }
.hero-lab-card .lab-value { font-size: 1.1rem; font-weight: 700; color: #FFD9A8; }

/* ---------- Sidebar (midnight slate, per spec - stays dark with white text) ---------- */
.dashboard-shell { display: flex; min-height: 100vh; }
.sidebar-thyro {
  width: 260px; flex-shrink: 0; background: var(--midnight); color: rgba(255,255,255,0.75);
  padding: 1.25rem 1rem; transition: width 0.2s ease;
}
.sidebar-thyro .sidebar-brand { color: white; font-weight: 700; padding: 0.5rem 0.5rem 1.25rem; display: flex; align-items: center; gap: 0.5rem; }
.sidebar-thyro .nav-link {
  color: rgba(255,255,255,0.75); border-radius: var(--radius-sm); padding: 0.6rem 0.8rem; margin-bottom: 0.2rem;
  display: flex; align-items: center; gap: 0.6rem; font-weight: 500;
}
.sidebar-thyro .nav-link.active, .sidebar-thyro .nav-link:hover { background: rgba(255,255,255,0.12); color: white; }
.sidebar-thyro.collapsed { width: 76px; }
.sidebar-thyro.collapsed .nav-text, .sidebar-thyro.collapsed .sidebar-brand-text { display: none; }
.dashboard-main { flex: 1; padding: 1.75rem; background: var(--pearl-bg); min-width: 0; }

.sidebar-toggle-btn { background: transparent; border: 1px solid rgba(255,255,255,0.3); color: white; border-radius: 8px; }

@media (max-width: 900px) {
  .sidebar-thyro { position: fixed; z-index: 1050; height: 100vh; left: -280px; }
  .sidebar-thyro.mobile-open { left: 0; }
  .dashboard-main { padding: 1rem; }
}

/* ---------- Badges / pattern pills (tinted background + deep text = readable on white) ---------- */
.pill-euthyroid { background: var(--pale-blue); color: var(--sky-deep); border: 1px solid #BFE0F9; }
.pill-hypothyroid { background: #FDF1E4; color: var(--apricot-deep); border: 1px solid #F3D9B8; }
.pill-hyperthyroid { background: #FBE7ED; color: var(--raspberry-deep); border: 1px solid #F3C4D3; }
.pill-insufficient { background: #EEF0F4; color: var(--text-muted); border: 1px solid var(--border-soft); }
.pattern-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.8rem; border-radius: 999px; font-weight: 600; font-size: 0.85rem; }

/* ---------- Circular probability gauge ---------- */
.prob-gauge {
  --pct: 0;
  width: 140px; height: 140px; border-radius: 50%;
  background: conic-gradient(var(--cobalt) calc(var(--pct) * 1%), var(--border-soft) 0);
  display: flex; align-items: center; justify-content: center; margin: 0 auto;
}
.prob-gauge .prob-gauge-inner {
  width: 108px; height: 108px; border-radius: 50%; background: var(--white);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1px var(--border-soft);
}
.prob-gauge .prob-gauge-value { font-size: 1.5rem; font-weight: 800; color: var(--text-dark); }
.prob-gauge .prob-gauge-label { font-size: 0.65rem; color: var(--text-muted); text-align: center; padding: 0 6px; }

/* ---------- Lab result tiles ---------- */
.lab-tile {
  background: var(--pale-blue); border: 1px solid var(--border-soft);
  border-radius: var(--radius-md); padding: 0.85rem 1rem;
}
.lab-tile .lab-tile-name { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.lab-tile .lab-tile-value { font-size: 1.25rem; font-weight: 700; color: var(--cobalt); }
.lab-tile .lab-tile-missing { color: var(--text-muted); font-style: italic; font-size: 0.9rem; }

/* ---------- Forms ---------- */
.form-section-title { color: var(--cobalt); font-weight: 700; margin-top: 1.5rem; margin-bottom: 0.75rem; }
.form-control, .form-select {
  background: var(--white); border: 1px solid var(--border-soft); color: var(--text-dark);
}
.form-control:focus, .form-select:focus {
  background: var(--white); color: var(--text-dark); border-color: var(--cobalt);
  box-shadow: 0 0 0 0.2rem rgba(41, 71, 169, 0.15);
}
.form-control::placeholder { color: #9AA3B5; }
.form-control:disabled, .form-control[readonly] { background: var(--pale-blue); color: var(--text-muted); }
.form-label { color: var(--text-dark); font-weight: 500; }
.form-text-thyro { color: var(--text-muted); font-size: 0.8rem; }
.form-check-input:checked { background-color: var(--cobalt); border-color: var(--cobalt); }

/* ---------- Disclaimer banner ---------- */
.disclaimer-banner {
  background: #FFF6E9; border: 1px solid #F1D6A0;
  border-radius: var(--radius-md); padding: 0.9rem 1.1rem; color: var(--text-dark); font-size: 0.87rem;
}
.disclaimer-banner .disclaimer-title { color: var(--amber-deep); font-weight: 700; margin-bottom: 0.2rem; }

/* ---------- Tables ---------- */
.table-thyro { color: var(--text-dark); }
.table-thyro thead { color: var(--text-muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }
.table-thyro td, .table-thyro th { border-color: var(--border-soft); vertical-align: middle; }
.table-responsive-thyro { overflow-x: auto; }

/* ---------- Empty states ---------- */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--text-muted); }
.empty-state i { font-size: 2.5rem; color: var(--raspberry-deep); margin-bottom: 0.75rem; display: block; }

/* ---------- Loading ---------- */
.btn-loading .spinner-border { width: 1rem; height: 1rem; margin-right: 0.4rem; }

/* ---------- Footer (stays dark midnight, white text - unchanged) ---------- */
.footer-thyro { background: var(--midnight); color: rgba(255,255,255,0.75); padding: 2.5rem 0 1.5rem; margin-top: 3rem; }
.footer-thyro h6 { color: white; }
.footer-thyro a { color: rgba(255,255,255,0.75); }
.footer-thyro a:hover { color: white; }
.footer-thyro .badge-not-clinical { color: white; }

/* ---------- Misc ---------- */
.section-heading { color: var(--text-dark); font-weight: 800; }
.section-subheading { color: var(--text-muted); }
.icon-chip {
  width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--cobalt), var(--sky)); color: white; font-size: 1.2rem;
}
.step-number {
  width: 34px; height: 34px; border-radius: 50%; background: var(--raspberry); color: white;
  display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0;
}
.auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; background: var(--pale-blue); }
.auth-card { max-width: 460px; width: 100%; }

.chart-container { background: var(--white); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 1rem; }

@media (max-width: 576px) {
  .hero-banner h1 { font-size: 1.7rem; }
  .hero-butterfly { display: none; }
}