/* RHTWG Portal v2 — Shared Design System */
:root {
  --brand-blue:        #2f45b7;
  --brand-blue-deep:   #20328d;
  --brand-purple:      #5730a7;
  --brand-purple-deep: #35196f;
  --silver:            #d9dbe8;
  --silver-dark:       #67697a;
  --ink:               #24243b;
  --muted:             #68697c;
  --white:             #ffffff;
  --soft-blue:         #eef1ff;
  --soft-purple:       #f4efff;
  --soft-silver:       #f6f7fb;
  --good:              #1c6e47;
  --good-bg:           #d1fae5;
  --danger:            #9d2f36;
  --danger-bg:         #fee2e2;
  --warning:           #a46719;
  --warning-bg:        #fef3c7;
  --info:              #1e40af;
  --info-bg:           #dbeafe;
  --shadow:            0 18px 44px rgba(41,38,108,.14);
  --shadow-soft:       0 10px 24px rgba(41,38,108,.08);
  --radius:            24px;
  --radius-sm:         16px;
  --radius-xs:         10px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 0% 0%, rgba(87,48,167,.14), transparent 35%),
    radial-gradient(circle at 100% 0%, rgba(47,69,183,.13), transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #f6f7ff 44%, #fbfbff 100%);
  line-height: 1.55;
}

a { color: inherit; }
h1,h2,h3,p { margin-top: 0; }
h1,h2 { font-family: Georgia,'Times New Roman',Times,serif; line-height:1.08; letter-spacing:-.035em; }
h1 { font-size: clamp(2rem,9vw,4rem); color: var(--brand-blue); margin-bottom:10px; }
h2 { font-size: clamp(1.5rem,6vw,2.4rem); color: var(--brand-blue-deep); margin-bottom:10px; }
h3 { color: #293162; margin-bottom:7px; font-size: 1.1rem; }
p  { margin-bottom:12px; }
small { color: var(--muted); }

/* ── Banner & Shell ── */
.banner { width:100%; max-height:200px; object-fit:cover; object-position:center; display:block; background:white; border-bottom:1px solid var(--silver); }
.app-shell { max-width:1100px; margin:0 auto; padding:16px 14px 100px; }

/* ── Cards ── */
.card { background:rgba(255,255,255,.96); border:1px solid rgba(47,69,183,.13); box-shadow:var(--shadow); border-radius:var(--radius); backdrop-filter:blur(8px); }
.section { padding: clamp(20px,4vw,36px); margin-bottom:24px; }

/* ── Topbar ── */
.topbar { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.logo-row { display:flex; align-items:center; gap:12px; }
.logo-mark      { width:54px; height:54px; object-fit:contain; border-radius:16px; background:white; box-shadow:var(--shadow-soft); padding:5px; }
.logo-mark.sm   { width:36px; height:36px; border-radius:12px; padding:3px; }
.logo-mark.lg   { width:84px; height:84px; border-radius:24px; padding:8px; }
.kicker { color:var(--brand-purple); font-weight:900; text-transform:uppercase; letter-spacing:.12em; font-size:.74rem; }
.muted  { color:var(--muted); }
.tagline { font-weight:900; color:#555871; letter-spacing:.14em; text-transform:uppercase; }

/* ── Nav ── */
.nav-pills { display:flex; gap:8px; flex-wrap:wrap; }
.nav-pills a, .nav-pills button {
  background: var(--soft-blue);
  color: var(--brand-blue);
  border: none;
  padding: 7px 16px;
  border-radius: 30px;
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, color .15s;
}
.nav-pills a:hover, .nav-pills button:hover { background: var(--brand-blue); color: #fff; }

/* ── Hero card ── */
.hero-card {
  padding: clamp(22px,5vw,44px);
  display: grid;
  grid-template-columns: 1.35fr .75fr;
  gap: 22px;
  align-items: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(244,240,255,.95));
  margin-bottom: 24px;
}
@media(max-width:680px){ .hero-card { grid-template-columns:1fr; } .hero-side { display:none; } }
.hero-card::after {
  content:'';
  position:absolute; right:-90px; bottom:-80px;
  width:320px; height:320px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(87,48,167,.1), transparent 70%);
  pointer-events:none;
}
.hero-content { position:relative; z-index:1; }

/* ── Quick action tiles ── */
.quick-actions { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; margin-top:20px; }
.action-tile {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:16px 10px;
  background:var(--soft-blue);
  border:1.5px solid rgba(47,69,183,.12);
  border-radius:var(--radius-sm);
  color:var(--brand-blue);
  font-weight:700; font-size:.83rem; text-decoration:none; text-align:center;
  transition: all .15s;
}
.action-tile span { font-size:1.6rem; }
.action-tile:hover { background:var(--brand-blue); color:#fff; transform:translateY(-2px); box-shadow:var(--shadow-soft); }

/* ── Section title ── */
.section-title { display:flex; align-items:center; gap:12px; margin-bottom:14px; }

/* ── Forms ── */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
@media(max-width:560px){ .form-grid { grid-template-columns:1fr; } }
label { display:flex; flex-direction:column; gap:5px; font-weight:700; font-size:.88rem; color:var(--ink); }
label.checkbox-row { flex-direction:row; align-items:flex-start; gap:10px; font-weight:400; font-size:.88rem; cursor:pointer; }
label.checkbox-row input { margin-top:3px; flex-shrink:0; accent-color:var(--brand-blue); width:16px; height:16px; }
input[type=text], input[type=email], input[type=tel], input[type=date], input[type=password], select, textarea {
  padding:9px 12px;
  border:1.5px solid var(--silver);
  border-radius:var(--radius-xs);
  font-size:.92rem;
  font-family:inherit;
  color:var(--ink);
  background:#fff;
  transition:border-color .15s, box-shadow .15s;
  width:100%;
}
input:focus, select:focus, textarea:focus {
  outline:none;
  border-color:var(--brand-blue);
  box-shadow:0 0 0 3px rgba(47,69,183,.12);
}
textarea { resize:vertical; min-height:90px; }
.field-hint { font-size:.78rem; color:var(--muted); font-weight:400; margin-top:2px; }
.form-section { font-size:.72rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; color:var(--brand-purple); padding:14px 0 8px; border-bottom:1.5px solid var(--soft-purple); margin:16px 0 14px; }

/* ── Consent box ── */
.consent-box {
  background:var(--soft-blue);
  border:1.5px solid rgba(47,69,183,.18);
  border-radius:var(--radius-xs);
  padding:16px 18px;
  margin:16px 0;
}
.consent-box p { font-size:.85rem; color:var(--ink); margin-bottom:10px; }
.consent-box p:last-of-type { margin-bottom:14px; }

/* ── Notice / alert ── */
.notice { background:var(--soft-purple); border:1.5px solid rgba(87,48,167,.18); border-radius:var(--radius-sm); padding:16px 18px; }
.notice.danger  { background:var(--danger-bg);  border-color:var(--danger); }
.notice.good    { background:var(--good-bg);    border-color:var(--good); }
.notice.warning { background:var(--warning-bg); border-color:var(--warning); }
.notice.info    { background:var(--info-bg);    border-color:var(--info); }
.notice strong  { font-size:.88rem; display:block; margin-bottom:5px; }

/* ── Buttons ── */
button.primary, .btn-primary {
  background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));
  color:#fff; border:none; padding:12px 28px;
  border-radius:30px; font-size:.95rem; font-weight:700; cursor:pointer;
  font-family:inherit; transition:all .15s; box-shadow:0 4px 14px rgba(47,69,183,.3);
}
button.primary:hover, .btn-primary:hover { transform:translateY(-1px); box-shadow:0 6px 18px rgba(47,69,183,.4); }
button.secondary {
  background:var(--soft-blue); color:var(--brand-blue);
  border:1.5px solid rgba(47,69,183,.2); padding:10px 20px;
  border-radius:30px; font-size:.88rem; font-weight:700; cursor:pointer;
  font-family:inherit; transition:all .15s;
}
button.secondary:hover { background:var(--brand-blue); color:#fff; }
button.danger {
  background:var(--danger-bg); color:var(--danger);
  border:1.5px solid var(--danger); padding:8px 16px;
  border-radius:30px; font-size:.85rem; font-weight:700; cursor:pointer;
  font-family:inherit; transition:all .15s;
}
button.danger:hover { background:var(--danger); color:#fff; }
button.small { padding:5px 12px; font-size:.78rem; }
.button-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

/* ── Status / feedback ── */
.status { font-size:.88rem; margin-top:10px; min-height:1.2em; }
.status.success { color:var(--good); font-weight:700; }
.status.error   { color:var(--danger); font-weight:700; }

/* ── Grids ── */
.grid { display:grid; gap:14px; }
.grid.two   { grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
.grid.three { grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
.grid.four  { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }

/* ── Resource cards ── */
.resource-card {
  background:#fff; border:1px solid rgba(47,69,183,.1);
  border-radius:var(--radius-sm); padding:20px;
  box-shadow:var(--shadow-soft); transition:all .15s;
}
.resource-card:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.resource-icon { font-size:2rem; margin-bottom:10px; }
.resource-card h3 { font-size:.95rem; }
.resource-card .res-phone { font-size:.82rem; color:var(--brand-blue); font-weight:700; margin-top:8px; }
.resource-card .res-url   { font-size:.78rem; color:var(--brand-purple); margin-top:2px; }

/* ── Step cards ── */
.step-card {
  background:#fff; border:1px solid var(--silver);
  border-radius:var(--radius-xs); padding:14px 16px;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.step-card.done strong { text-decoration:line-through; color:var(--muted); }
.step-card .actions { display:flex; gap:6px; flex-shrink:0; }

/* ── Metrics ── */
.metric {
  background:#fff; border:1px solid rgba(47,69,183,.1);
  border-radius:var(--radius-sm); padding:18px 20px;
  box-shadow:var(--shadow-soft);
  display:flex; flex-direction:column; gap:4px;
}
.metric strong { font-size:2rem; font-weight:900; color:var(--brand-blue); line-height:1; }
.metric span   { font-size:.78rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.metric.purple strong { color:var(--brand-purple); }
.metric.good   strong { color:var(--good); }

/* ── Badge ── */
.badge {
  display:inline-block; padding:3px 10px; border-radius:20px;
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  background:var(--soft-blue); color:var(--brand-blue);
}
.badge.new       { background:#FEF3C7; color:#92400E; }
.badge.contacted { background:var(--info-bg); color:var(--info); }
.badge.progress  { background:var(--soft-purple); color:var(--brand-purple); }
.badge.completed { background:var(--good-bg); color:var(--good); }
.badge.urgent    { background:var(--danger-bg); color:var(--danger); }

/* ── Request cards ── */
.request-card {
  background:#fff; border:1px solid rgba(47,69,183,.1);
  border-radius:var(--radius-sm); padding:20px 22px;
  box-shadow:var(--shadow-soft);
}
.request-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:12px; }
.request-card p { font-size:.88rem; margin-bottom:8px; }
.request-card label { margin-top:10px; }
.notes-label { font-size:.72rem; font-weight:900; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; margin-top:14px; display:block; margin-bottom:4px; }
.notes-label::after { content:' — program notes only, no clinical or medical details'; font-weight:400; text-transform:none; letter-spacing:0; }

/* ── Admin controls ── */
.admin-controls { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:18px; padding:16px 18px; background:var(--soft-silver); border-radius:var(--radius-sm); }
.admin-controls input[type=text], .admin-controls input[type=date], .admin-controls select { width:auto; flex:1; min-width:130px; }

/* ── Lock screen ── */
.lock { max-width:420px; margin:60px auto; padding:36px; text-align:center; }
.lock form { text-align:left; margin-top:20px; }
.lock .warning-banner { background:var(--warning-bg); border:1.5px solid var(--warning); border-radius:var(--radius-xs); padding:10px 14px; font-size:.82rem; color:#7c4a00; margin-bottom:16px; }

/* ── Bottom mobile nav ── */
.bottom-nav {
  position:fixed; bottom:0; left:0; right:0;
  background:rgba(255,255,255,.97);
  border-top:1px solid var(--silver);
  display:flex; justify-content:space-around;
  padding:8px 0 env(safe-area-inset-bottom, 8px);
  z-index:100; backdrop-filter:blur(10px);
}
.bottom-nav a {
  display:flex; flex-direction:column; align-items:center; gap:2px;
  font-size:.68rem; font-weight:700; color:var(--muted);
  text-decoration:none; padding:4px 12px;
  text-transform:uppercase; letter-spacing:.06em;
  transition:color .15s;
}
.bottom-nav a span { font-size:1.3rem; }
.bottom-nav a:hover, .bottom-nav a.active { color:var(--brand-blue); }

/* ── Footer ── */
.footer-note { font-size:.75rem; color:var(--muted); text-align:center; margin-top:32px; padding-top:20px; border-top:1px solid var(--silver); }

/* ── Hidden utility ── */
.hidden { display:none !important; }

/* ── Print ── */
@media print { .bottom-nav, .admin-controls button { display:none; } }