/* ============================================================
   REHAN HEALTH — App-Matching Theme (Purple-Indigo)
   Overrides the legacy teal theme across all pages
   ============================================================ */

:root {
  --primary:       #6C63FF;
  --primary-dark:  #5754D4;
  --primary-light: #EEF0FF;
  --bg:            #F4F6FF;
  --text-dark:     #1A1A2E;
  --text-mid:      #4B5563;
  --text-light:    #6B7280;
  --border:        #E0E3FF;
  --card-bg:       #ffffff;
  --shadow-sm:     0 4px 20px rgba(108,99,255,.10);
  --shadow-md:     0 8px 32px rgba(108,99,255,.18);
  --shadow-lg:     0 20px 60px rgba(108,99,255,.22);
  --radius-sm:     12px;
  --radius-md:     18px;
  --radius-lg:     24px;
}

/* ─── Global ─────────────────────────────────────────────── */
* { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif !important; }

body {
  background: var(--bg) !important;
  position: relative;
}

/* Decorative background blobs (same as app / download page) */
body::before {
  content: '';
  position: fixed;
  top: -150px; right: -100px;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(108,99,255,.10), transparent 70%);
  pointer-events: none; z-index: 0;
}
body::after {
  content: '';
  position: fixed;
  bottom: -80px; left: -80px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(156,148,255,.08), transparent 70%);
  pointer-events: none; z-index: 0;
}

.main-wrapper { position: relative; z-index: 1; }

/* ─── Header / Nav ───────────────────────────────────────── */
.header {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  border: 1px solid var(--border) !important;
}

.logo-text h1 {
  background: linear-gradient(135deg, #6C63FF, #9C94FF) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.logo-text p      { color: var(--text-light)  !important; }
.logo-icon i      { color: var(--primary)     !important; }
/* override inline color="#00897b" on logo icons */
[style*="color: #00897b"] { color: var(--primary) !important; }
[style*="color:#00897b"]  { color: var(--primary) !important; }

.nav-btn {
  background: linear-gradient(135deg, #6C63FF, #9C94FF) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 4px 14px rgba(108,99,255,.30) !important;
  transition: transform .15s, box-shadow .15s !important;
  color: #fff !important;
}
.nav-btn:hover {
  background: linear-gradient(135deg, #5754D4, #6C63FF) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(108,99,255,.40) !important;
}
.nav-btn.logout {
  background: linear-gradient(135deg, #FF5F57, #FF3B30) !important;
  box-shadow: 0 4px 14px rgba(255,59,48,.28) !important;
}
.nav-btn.logout:hover {
  background: linear-gradient(135deg, #E53935, #FF5F57) !important;
}

/* ─── Cards & Sections ───────────────────────────────────── */
.welcome-section,
.content-card,
.main-content > div[style*="background: #ffffff"],
div[style*="background:#ffffff"],
div[style*="background: #fff"] {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  border: 1px solid var(--border) !important;
}

/* Stats */
.stats-grid { gap: 16px !important; }

.stat-card {
  background: linear-gradient(135deg, #EEF0FF 0%, #F4F6FF 100%) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform .2s, box-shadow .2s !important;
}
.stat-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-md) !important;
}
.stat-value { color: var(--primary) !important; }
.stat-label { color: var(--text-mid) !important; }
.stat-icon i { color: var(--primary) !important; }

/* Welcome / hero section colors */
.welcome-text h2,
.section-title    { color: var(--text-dark)  !important; }
.welcome-text p   { color: var(--text-light) !important; }

/* Quick action cards */
.action-card {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
  border: 1px solid var(--border) !important;
  transition: transform .2s, box-shadow .2s !important;
}
.action-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--shadow-md) !important;
}
.action-card h3   { color: var(--primary)  !important; }
.action-card p    { color: var(--text-mid) !important; }

/* ─── Dashboard Hero Banner ──────────────────────────────── */
/* Override inline gradients on hero/banner sections */
[style*="linear-gradient(90deg, #00897b"],
[style*="linear-gradient(135deg, #00897b"],
[style*="linear-gradient(135deg, #e0f2f1"] {
  background: linear-gradient(135deg, #6C63FF 0%, #9C94FF 60%, #C084FC 100%) !important;
}

/* ─── Category Cards (admin.php) ─────────────────────────── */
.categories-grid { gap: 16px !important; }

.category-card {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
  border: 1px solid var(--border) !important;
  transition: transform .2s, box-shadow .2s !important;
  overflow: hidden !important;
  text-decoration: none !important;
}
.category-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-md) !important;
}
.category-icon { color: var(--primary) !important; }
.category-name { color: var(--text-dark) !important; }
.category-count {
  color: var(--primary) !important;
  font-weight: 600 !important;
}

/* Per-category gradient icon backgrounds */
.category-card[href*="Blood"]       .category-icon { background: linear-gradient(135deg,#FF6B6B,#EE0979) !important; -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important; }
.category-card[href*="Heart"]       .category-icon { background: linear-gradient(135deg,#FF9A9E,#E91E8C) !important; -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important; }
.category-card[href*="Sugar"]       .category-icon { background: linear-gradient(135deg,#FFB347,#FF6B00) !important; -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important; }
.category-card[href*="Pressure"]    .category-icon { background: linear-gradient(135deg,#4FC3F7,#0277BD) !important; -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important; }
.category-card[href*="Cholesterol"] .category-icon { background: linear-gradient(135deg,#81C784,#388E3C) !important; -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important; }
.category-card[href*="Thyroid"]     .category-icon { background: linear-gradient(135deg,#CE93D8,#8E24AA) !important; -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important; }
.category-card[href*="Vitamin"]     .category-icon { background: linear-gradient(135deg,#FFCC02,#FF9800) !important; -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important; }
.category-card[href*="Kidney"]      .category-icon { background: linear-gradient(135deg,#80DEEA,#0097A7) !important; -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important; }
.category-card[href*="Liver"]       .category-icon { background: linear-gradient(135deg,#FFAB91,#BF360C) !important; -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important; }
.category-card[href*="Bone"]        .category-icon { background: linear-gradient(135deg,#B0BEC5,#546E7A) !important; -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important; }

/* ─── Add Record Form ────────────────────────────────────── */
.add-record-section,
.form-section {
  background: var(--card-bg) !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}
.form-group label   { color: var(--text-dark) !important; }
.form-input,
input[type="text"], input[type="email"], input[type="password"],
input[type="date"], input[type="number"],
select, textarea {
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  background: #FAFBFF !important;
  color: var(--text-dark) !important;
  transition: border-color .2s, box-shadow .2s !important;
}
.form-input:focus,
input:focus, select:focus, textarea:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(108,99,255,.15) !important;
  outline: none !important;
}
.submit-btn,
button[type="submit"],
.primary-btn {
  background: linear-gradient(135deg, #6C63FF, #9C94FF) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 4px 16px rgba(108,99,255,.35) !important;
  color: #fff !important;
  border: none !important;
  transition: transform .15s, box-shadow .15s !important;
}
.submit-btn:hover,
button[type="submit"]:hover,
.primary-btn:hover {
  background: linear-gradient(135deg, #5754D4, #6C63FF) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(108,99,255,.45) !important;
}
.secondary-btn {
  background: var(--primary-light) !important;
  color: var(--primary-dark) !important;
  border-radius: var(--radius-sm) !important;
}

/* ─── Category Page (category.php) ──────────────────────── */
.category-header {
  background: linear-gradient(135deg, #6C63FF 0%, #9C94FF 60%, #C084FC 100%) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md) !important;
}
.category-icon-large { color: #fff !important; }
.category-header h2,
.category-header .category-title { color: #fff !important; }

/* Chart section */
[style*="background: #ffffff; border-radius: 15px;"] {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  border: 1px solid var(--border) !important;
}
[style*="border: 4px solid #00897b"],
[style*="border-left: 4px solid #00897b"] {
  border-left-color: var(--primary) !important;
}
[style*="color: #00897b; font-weight: 600"] {
  color: var(--primary) !important;
}

/* Chart tab buttons */
.chart-tab,
button[id^="chart-tab"] {
  border-radius: var(--radius-sm) !important;
}
#chart-tab-yearly.active,
.chart-tab.active {
  background: linear-gradient(135deg, #6C63FF, #9C94FF) !important;
  box-shadow: 0 4px 15px rgba(108,99,255,.30) !important;
}

/* Records table */
.records-table th {
  background: linear-gradient(135deg, #6C63FF, #9C94FF) !important;
  color: #fff !important;
}
.records-table tr:hover { background: var(--primary-light) !important; }

/* Edit / delete buttons in tables */
button.edit-btn,
.edit-btn {
  background: linear-gradient(135deg, #6C63FF, #9C94FF) !important;
  color: #fff !important;
  border-radius: 8px !important;
}
button.delete-btn,
.delete-btn {
  background: linear-gradient(135deg, #FF5F57, #FF3B30) !important;
  color: #fff !important;
  border-radius: 8px !important;
}

/* ─── Upload Page ────────────────────────────────────────── */
.upload-area {
  background: linear-gradient(135deg, #EEF0FF 0%, #F4F6FF 100%) !important;
  border: 2px dashed var(--primary) !important;
  border-radius: var(--radius-lg) !important;
}
.upload-area:hover {
  background: linear-gradient(135deg, #E4E6FF 0%, #EEF0FF 100%) !important;
  border-color: var(--primary-dark) !important;
}

.progress-bar,
[style*="background: linear-gradient(90deg, #00897b"] {
  background: linear-gradient(90deg, #6C63FF, #9C94FF, #C084FC) !important;
}
.progress-bar-success { background: linear-gradient(90deg, #22C55E, #16A34A) !important; }
.progress-bar-error   { background: linear-gradient(90deg, #EF4444, #DC2626) !important; }

/* Alert / status boxes */
.alert-success,
[style*="linear-gradient(135deg, #e8f5e9"],
[style*="linear-gradient(135deg, #66bb6a"] {
  background: linear-gradient(135deg, #DCFCE7, #BBF7D0) !important;
  color: #166534 !important;
  border-radius: var(--radius-sm) !important;
}
.alert-error,
[style*="linear-gradient(135deg, #ffebee"] {
  background: linear-gradient(135deg, #FEE2E2, #FECACA) !important;
  color: #991B1B !important;
  border-radius: var(--radius-sm) !important;
}
.alert-warning,
[style*="linear-gradient(135deg, #fff8e1"] {
  background: linear-gradient(135deg, #FEF9C3, #FEF08A) !important;
  color: #854D0E !important;
  border-radius: var(--radius-sm) !important;
}

/* ─── Login Page ─────────────────────────────────────────── */
/* Left welcome panel — full purple gradient like app */
.login-wrapper .welcome-section {
  background: linear-gradient(135deg, #6C63FF 0%, #8B85FF 50%, #C084FC 100%) !important;
  border-radius: var(--radius-lg) !important;
  padding: 48px 40px !important;
  box-shadow: var(--shadow-lg) !important;
  border: none !important;
}
.login-wrapper .welcome-section h1   { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.login-wrapper .welcome-section .subtitle   { color: rgba(255,255,255,.90) !important; }
.login-wrapper .welcome-section .description { color: rgba(255,255,255,.82) !important; }
.login-wrapper .welcome-section .features-list li { color: #fff !important; }
.login-wrapper .welcome-section .features-list li .lucide { color: rgba(255,255,255,.90) !important; }

/* Right login card */
.login-container {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md) !important;
  border: 1px solid var(--border) !important;
}
.login-container .logo h1 {
  background: linear-gradient(135deg, #6C63FF, #9C94FF) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.login-container .logo p { color: var(--text-light) !important; }
.login-container .logo-icon i { color: var(--primary) !important; -webkit-text-fill-color: var(--primary) !important; }

/* Tabs */
.auth-tabs { border-bottom-color: var(--border) !important; }
.auth-tab  { color: var(--primary) !important; }
.auth-tab.active {
  color: var(--text-dark) !important;
  border-bottom-color: var(--primary) !important;
}

/* Divider */
.divider { color: var(--text-light) !important; }
.divider::before,
.divider::after { border-bottom-color: var(--border) !important; }

/* Error */
.error-message {
  background: #FEE2E2 !important;
  color: #991B1B !important;
  border-color: #FCA5A5 !important;
  border-radius: var(--radius-sm) !important;
}

/* ─── Family Page ────────────────────────────────────────── */
.family-card {
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border) !important;
  background: #FAFBFF !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform .2s, box-shadow .2s !important;
}
.family-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-md) !important;
}
.family-name { color: var(--text-dark) !important; }
.family-relationship { color: var(--text-light) !important; }
.tag.green {
  background: #DCFCE7 !important;
  color: #166534 !important;
}
.tag.gray {
  background: var(--primary-light) !important;
  color: var(--primary-dark) !important;
}
.small-btn.primary {
  background: linear-gradient(135deg, #6C63FF, #9C94FF) !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(108,99,255,.25) !important;
}
.small-btn.outline {
  border-color: var(--border) !important;
  color: var(--primary) !important;
  border-radius: 8px !important;
}
.page-title    { color: var(--text-dark)  !important; }
.page-subtitle { color: var(--text-light) !important; }

/* ─── Modals & Overlays ──────────────────────────────────── */
.modal-content,
div[style*="background:white; border-radius:16px"],
div[style*="background: white; border-radius"] {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid var(--border) !important;
}

/* ─── Scrollbars ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: #C4C0FF; }

/* ─── Misc / Utility ─────────────────────────────────────── */
.section-title i { color: var(--primary) !important; }
.loading { color: var(--primary) !important; }

/* Profile setup button */
#setup-profile-btn {
  background: linear-gradient(135deg, #6C63FF, #9C94FF) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 4px 14px rgba(108,99,255,.30) !important;
}

/* Tags on family count */
#family-count-tag.green {
  background: #DCFCE7 !important;
  color: #166534 !important;
}
#family-count-tag.gray {
  background: var(--primary-light) !important;
  color: var(--primary-dark) !important;
}