/* ============================================================
   liquid-glass.css — OBGY-app fidelity layer.
   Loaded AFTER tokens.css + shell.css + app.css so it refines the
   glass theme and reproduces the standalone OBGY proforma's signature
   components: pill module/mode tabs, colour-coded capsule chips, GPLA
   score pills. Everything else is already glass via the retuned tokens.
   ============================================================ */

/* ---- Buttons: OBGY indigo → deep-indigo gradient (was diag-secondary washout) ---- */
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-d)); }
.btn-primary:hover { box-shadow: 0 6px 18px rgba(99, 102, 241, 0.4); }

/* ---- Cards: a touch more lift + rounder, matching the OBGY app ---- */
.section-card { border-radius: var(--radius, 16px); box-shadow: var(--card-shadow); }
.card-title-row h3 { font-family: var(--font-display); letter-spacing: -0.01em; }

/* ============================================================
   Pill proforma tabs — module (Obs/Gyn/Inf) + history (Short/Long/IPD).
   The native desk swaps a button's className to `proforma-tab[.active]`.
   ============================================================ */
.proforma-tabs { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.proforma-tab {
  border: 1.5px solid var(--border-color); background: var(--bg-secondary); color: var(--text-muted);
  font-family: inherit; font-weight: 700; font-size: 0.82rem; padding: 8px 15px; border-radius: 22px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  transition: all var(--transition-speed) ease;
}
.proforma-tab svg { width: 15px; height: 15px; }
.proforma-tab:hover { border-color: var(--soft); color: var(--text-main); }
.proforma-tab.active {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--accent), var(--accent-d));
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 35%, transparent);
}
.proforma-tab.active svg { color: #fff; }

/* ============================================================
   Colour-coded capsule chips — the OBGY app tints each clinical section:
   complaints = rose, history = cyan, meds = emerald, investigations = violet.
   A `data-tint` on the section-card re-scopes --accent, and .chip-tog.on
   (app.css) already paints itself from --accent / --accent-glow.
   ============================================================ */
.section-card[data-tint="cc"]  { --accent: var(--cc);  --accent-glow: var(--cc-soft); }
.section-card[data-tint="hx"]  { --accent: var(--hx);  --accent-glow: var(--hx-soft); }
.section-card[data-tint="med"] { --accent: var(--med); --accent-glow: var(--med-soft); }
.section-card[data-tint="lab"] { --accent: var(--lab); --accent-glow: var(--lab-soft); }
/* tint the section's title icon + template-row hover to match its capsules */
.section-card[data-tint] .card-title-row h3 svg { color: var(--accent); }

/* capsule chips: softer, pill-shaped, OBGY `.cap` feel */
.chip-tog {
  padding: 6px 12px; border-radius: 999px; font-weight: 700;
  background: var(--bg-secondary); border-width: 1.5px;
}
.chip-tog.on { font-weight: 700; }
.chip-tog:hover { border-color: var(--soft); }

/* ---- Template rows: crisp glass cards (was near-transparent) ---- */
.tpl-row { background: var(--bg-secondary); }
.tpl-row:hover { border-color: var(--accent); }

/* ============================================================
   GPLA score strip — big accented numbers like the OBGY app's dial pills.
   The desk marks the card with data-gpla; its number inputs read as pills.
   ============================================================ */
.section-card[data-gpla] .form-grid,
.section-card[data-gpla] .row { gap: 10px; }
.section-card[data-gpla] .form-group { align-items: center; }
.section-card[data-gpla] .form-group label {
  font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; order: 2; margin-top: 2px;
}
.section-card[data-gpla] .form-control {
  width: 62px; text-align: center; font-size: 1.6rem; font-weight: 900; font-family: var(--font-display);
  color: var(--accent-d); border-radius: 12px; padding: 8px 6px; background: var(--bg-secondary); order: 1;
}
.section-card[data-gpla] .form-control:focus { box-shadow: 0 0 0 3px var(--accent-soft); }

/* ---- Allergy banner keeps its red, but softer on glass ---- */
.list-line { background: var(--bg-secondary); }

/* ---- Doctor/nursing vitals capsule tags read cleaner on white glass ---- */
.vitals-tag, .badge { backdrop-filter: none; }

/* ============================================================
   OBGY PROFORMA — faithful reproduction of clinical-obgy.html's desktop
   layout (the "two columns with a divider" design). Everything here is
   scoped under .obgy-proforma so it never touches the rest of the Shell.
   ============================================================ */

/* Two-column desk row + the centre divider line (the signature look) */
.obgy-proforma .deskrow { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; position: relative; }
.obgy-proforma .deskrow::before { content: ""; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 1px; background: var(--border-color); transform: translateX(-50%); }
.obgy-proforma .deskcol { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (max-width: 1040px) {
  .obgy-proforma .deskrow { grid-template-columns: 1fr; gap: 0; }
  .obgy-proforma .deskrow::before { display: none; }
}

/* Stepper: ① Assessment → ② Prescription & plan */
.obgy-proforma .opd-steps { display: flex; gap: 10px; align-items: center; margin: 4px 0 16px; flex-wrap: wrap; }
.obgy-proforma .opd-step {
  display: inline-flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 800;
  padding: 8px 15px; border-radius: 22px; border: 1.5px solid var(--border-color);
  background: var(--bg-secondary); color: var(--text-muted); cursor: pointer; font-family: inherit;
}
.obgy-proforma .opd-step svg { width: 15px; height: 15px; }
.obgy-proforma .opd-step.on { background: var(--accent-soft); color: var(--accent-d); border-color: color-mix(in srgb, var(--accent) 32%, transparent); }
.obgy-proforma .opd-step .n { width: 20px; height: 20px; border-radius: 50%; background: var(--border-color); color: var(--text-muted); display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 800; }
.obgy-proforma .opd-step.on .n { background: var(--accent); color: #fff; }
.obgy-proforma .opd-steps > svg { width: 16px; height: 16px; color: var(--soft); }

/* Vitals dials — .vitals-wheels → .vital → .vlabel + .wheelrow → .wheel(.adj/.cur) */
.obgy-proforma .vitals-wheels { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.obgy-proforma .vital { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 14px; padding: 10px 8px; display: flex; flex-direction: column; gap: 7px; align-items: center; }
.obgy-proforma .vlabel { font-size: 10px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; text-align: center; line-height: 1.2; min-height: 24px; display: flex; align-items: center; }
.obgy-proforma .wheelrow { display: flex; align-items: center; gap: 5px; justify-content: center; }
.obgy-proforma .wheel { user-select: none; width: 62px; height: 78px; border-radius: 12px; border: 1.5px solid var(--border-color); background: var(--bg-primary); display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
.obgy-proforma .cur { font-size: 23px; font-weight: 800; font-family: var(--font-display); color: var(--text-main); line-height: 1.05; }
.obgy-proforma .adj { font-size: 12px; color: var(--soft); height: 15px; line-height: 1.2; font-weight: 600; }
.obgy-proforma .bpsep { font-size: 22px; font-weight: 800; color: var(--soft); }

/* Capsule chips (.cap look) — the desk's chip-tog rendered as OBGY capsules.
   Colour comes from the enclosing section-card[data-tint] re-scoping --accent. */
.obgy-proforma .chip-tog { font-size: 0.86rem; font-weight: 600; border-width: 1.5px; border-radius: 22px; padding: 8px 15px; background: var(--bg-secondary); color: var(--text-muted); line-height: 1; }
.obgy-proforma .chip-tog::before { display: none; }
.obgy-proforma .chip-tog.on { font-weight: 700; }

/* Uppercase section sub-labels + compact field grid (patient identity) */
.obgy-proforma .sectsub { display: block; font-size: 10.5px; color: var(--soft); text-transform: uppercase; letter-spacing: .6px; font-weight: 800; margin: 13px 0 8px; }
.obgy-proforma .fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.obgy-proforma .fgrid .form-group label { font-size: 0.72rem; }

/* Sticky-feel action row at the foot of the proforma (not fixed — sits in flow) */
.obgy-proforma .desk-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border-color); }
.obgy-proforma .desk-actions .spacer { flex-grow: 1; }

/* section cards a touch tighter, like the app */
.obgy-proforma .section-card { padding: 16px 18px; }

/* ---- Inline branch-app embed (real OBGY/Paediatrics proforma inside the desk) ----
   Fills the desk content; the embedded app's own chrome is hidden via ?shell=1, so
   the Shell's sidebar remains the single navigation. */
.branch-embed {
  width: 100%;
  height: calc(100vh - 118px);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: #fff;
  display: block;
  box-shadow: var(--card-shadow);
}