/* ============================================================
   Welland Smiles — patient portal, forms and admin tabs
   ============================================================ */

.portal-body { background: var(--cream); }

/* ---------- page shell ---------- */
.portal-main { padding: 48px 0 80px; }
.portal-head { max-width: 760px; margin-bottom: 28px; }
.portal-head h1 {
  margin-bottom: 10px;
  color: var(--navy);
  font-size: clamp(1.75rem, 3vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -.02em;
}
.portal-head p { margin: 0; color: var(--slate); font-size: 15px; line-height: 1.7; }
.portal-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; }
.portal-panel {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.portal-panel + .portal-panel { margin-top: 22px; }
.portal-panel h2 {
  margin-bottom: 6px;
  color: var(--navy);
  font-size: 1.15rem;
  font-weight: 800;
}
.portal-panel .panel-sub { margin: 0 0 20px; color: var(--slate-light); font-size: 13px; }

/* ---------- status banner ---------- */
.status-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 22px;
  padding: 14px 16px;
  border: 1px solid rgba(49, 140, 221, .3);
  border-radius: 14px;
  background: var(--blue-soft-2);
  color: #1c4460;
  font-size: 13.5px;
  line-height: 1.6;
}
.status-banner.is-ok { border-color: rgba(47, 158, 122, .35); background: #eefaf5; color: #1d5e49; }
.status-banner.is-warn { border-color: rgba(221, 187, 80, .5); background: #fdf6e3; color: #6b5312; }
.status-banner a { color: inherit; font-weight: 700; }

/* ---------- form fields ---------- */
.form-section { margin-bottom: 30px; }
.form-section h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  color: var(--navy);
  font-size: 1.05rem;
  font-weight: 800;
}
.form-section h3 span.step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.form-section > .section-note { margin: 0 0 18px 34px; color: var(--slate-light); font-size: 13px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field-grid > .field { margin-bottom: 0; }
.field.is-full { grid-column: 1 / -1; }
.field > label, .legend {
  color: #22333f;
  font-size: 13px;
  font-weight: 700;
}
.field .req { color: #cc3b3b; margin-left: 3px; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"],
.field input[type="date"], .field select, .field textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid #d6dfe7;
  border-radius: 10px;
  background: #fff;
  color: #1d2b36;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.45;
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(49, 140, 221, .18);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #cc3b3b; }
.field .error { color: #b3261e; font-size: 12px; }
.field .hint { color: var(--slate-light); font-size: 12px; }

.choice-row { display: flex; flex-wrap: wrap; gap: 10px; }
.choice-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid #d6dfe7;
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  cursor: pointer;
}
.choice-pill:hover { border-color: var(--blue); }
.choice-pill input { accent-color: var(--blue); }
.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 8px 18px;
}
.choice-grid .choice-pill { border-radius: 10px; }
.consent-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--cream);
  margin-bottom: 10px;
  font-size: 13.5px;
  line-height: 1.6;
}
.consent-row input { margin-top: 3px; accent-color: var(--blue); }
.consent-row.is-error { border-color: #cc3b3b; background: #fdf1f0; }

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.form-actions .save-state { margin-left: auto; color: var(--slate-light); font-size: 12.5px; }
.form-actions .save-state.is-ok { color: #1d7a5c; }
.form-actions .save-state.is-error { color: #b3261e; }

/* ---------- auth ---------- */
.auth-wrap { max-width: 460px; margin: 0 auto; }
.auth-switch {
  display: flex;
  gap: 6px;
  margin-bottom: 22px;
  padding: 5px;
  border-radius: 999px;
  background: #e8eef4;
}
.auth-switch button {
  flex: 1;
  padding: 10px 16px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--slate);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}
.auth-switch button[aria-selected="true"] { background: #fff; color: var(--navy); box-shadow: var(--shadow-sm); }
.auth-foot { margin-top: 18px; color: var(--slate-light); font-size: 13px; text-align: center; }
.auth-foot a { color: var(--blue); font-weight: 600; }

/* ---------- dashboard ---------- */
.dash-greeting { margin-bottom: 26px; }
.dash-greeting h1 { margin-bottom: 4px; color: var(--navy); font-size: clamp(1.6rem, 2.8vw, 2.1rem); font-weight: 800; }
.dash-greeting p { margin: 0; color: var(--slate); font-size: 14.5px; }
.dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 26px; }
.dash-stat {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}
.dash-stat span { display: block; color: var(--slate-light); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.dash-stat strong { display: block; margin-top: 6px; color: var(--navy); font-size: 1.7rem; font-weight: 800; line-height: 1; }

.appt-list { display: flex; flex-direction: column; gap: 12px; }
.appt-card {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.appt-date { text-align: center; border-right: 1px solid var(--line); padding-right: 14px; }
.appt-date strong { display: block; color: var(--navy); font-size: 1.35rem; font-weight: 800; line-height: 1.1; }
.appt-date span { color: var(--slate-light); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.appt-body strong { display: block; color: var(--navy); font-size: 14.5px; }
.appt-body span { color: var(--slate); font-size: 13px; }
.appt-body small { display: block; margin-top: 3px; color: var(--slate-light); font-size: 12px; }

.form-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}
.form-card h3 { margin: 0; color: var(--navy); font-size: 14.5px; font-weight: 800; }
.form-card p { margin: 0; color: var(--slate-light); font-size: 12.5px; line-height: 1.55; flex: 1; }
.form-card .form-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: capitalize;
}
.badge-draft { background: #eef2f6; color: #4a6274; }
.badge-submitted { background: #e7f4ff; color: #1a6ba8; }
.badge-reviewed { background: #e8f8f1; color: #1d7a5c; }
.badge-confirmed { background: #e8f8f1; color: #1d7a5c; }
.badge-cancelled { background: #fdeceb; color: #a52a22; }
.badge-completed { background: #eef2f6; color: #4a6274; }
.badge-no-show { background: #fdf4e3; color: #8a6414; }

/* ---------- admin tabs ---------- */
.admin-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 24px; border-bottom: 1px solid var(--line); }
.admin-tabs button {
  padding: 11px 18px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  color: var(--slate);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}
.admin-tabs button[aria-selected="true"] { color: var(--navy); border-bottom-color: var(--blue); }
.admin-panel[hidden] { display: none; }

.admin-card {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  margin-bottom: 20px;
}
.admin-card h2 { margin-bottom: 12px; color: var(--navy); font-size: 1.05rem; font-weight: 800; }
.admin-card .muted { color: var(--slate-light); font-size: 13px; }
.kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 22px; margin: 0; }
.kv div { min-width: 0; }
.kv dt { color: var(--slate-light); font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.kv dd { margin: 3px 0 0; color: #22333f; font-size: 13.5px; line-height: 1.55; word-break: break-word; }
.answer-block { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; }
.answer-block h4 { margin-bottom: 8px; color: var(--navy); font-size: 13px; font-weight: 800; }
.answer-block dl { display: grid; grid-template-columns: minmax(160px, 240px) minmax(0, 1fr); gap: 6px 16px; margin: 0; }
.answer-block dt { color: var(--slate-light); font-size: 12.5px; }
.answer-block dd { margin: 0; color: #22333f; font-size: 13px; }

.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.data-table th, .data-table td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.data-table th { color: var(--slate-light); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; }
.data-table tr:last-child td { border-bottom: 0; }
.table-wrap { overflow-x: auto; }
.link-btn { border: 0; background: none; color: var(--blue); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; padding: 0; }
.link-btn:hover { color: var(--blue-hover); text-decoration: underline; }

@media screen and (max-width: 980px) {
  .portal-grid { grid-template-columns: 1fr; }
  .dash-stats { grid-template-columns: 1fr 1fr; }
  .appt-card { grid-template-columns: 74px minmax(0, 1fr); }
  .appt-card > .btn { grid-column: 1 / -1; }
}

@media screen and (max-width: 640px) {
  .field-grid { grid-template-columns: 1fr; }
  .form-cards { grid-template-columns: 1fr; }
  .portal-panel { padding: 20px; }
  .appt-card { grid-template-columns: 1fr; }
  .appt-date { text-align: left; border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 8px; }
  .answer-block dl { grid-template-columns: 1fr; gap: 2px; }
  .answer-block dd { margin-bottom: 8px; }
}