/* ==========================================================================
   med2date — guideline design system
   --------------------------------------------------------------------------
   The vocabulary here matches the class list in the AI system prompts
   (directus/extensions/endpoints/ai/src/prompts/system-*.js). Keep them in
   sync — adding a class here without updating the prompts means the LLM
   will never emit it; adding to the prompt without styling here means the
   element renders unstyled.
   ========================================================================== */

:root {
  --m2d-text: #1f2937;
  --m2d-muted: #525866;
  --m2d-bg-soft: #f4f2ee;
  --m2d-bg-card: #ffffff;
  --m2d-border: #e5e7eb;
  --m2d-border-strong: #d3d8de;

  --m2d-green: #16a34a;
  --m2d-green-bg: #f0fdf4;
  --m2d-green-border: #bbf7d0;

  --m2d-amber: #f59e0b;
  --m2d-amber-bg: #fffbeb;
  --m2d-amber-border: #fde68a;

  --m2d-red: #dc2626;
  --m2d-red-bg: #fef2f2;
  --m2d-red-border: #fecaca;

  --m2d-blue: #2563eb;
  --m2d-blue-bg: #eff6ff;
  --m2d-blue-border: #bfdbfe;

  --m2d-purple: #7c3aed;
  --m2d-purple-bg: #f5f3ff;
  --m2d-purple-border: #ddd6fe;

  --m2d-radius: 10px;
  --m2d-radius-sm: 6px;
  --m2d-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* --- Section container --------------------------------------------------- */
.guideline-section {
  background: var(--m2d-bg-card);
  border: 1px solid var(--m2d-border);
  border-radius: var(--m2d-radius);
  margin: 1.5rem 0;
  box-shadow: var(--m2d-shadow);
  overflow: hidden;
}
.section-header {
  background: var(--m2d-bg-soft);
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--m2d-border);
}
.section-body { padding: 1.5rem; }

/* --- Typography ---------------------------------------------------------- */
.guideline-h2 {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--m2d-text);
  margin: 0;
  line-height: 1.3;
}
.guideline-h3 {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--m2d-text);
  margin: 1.5rem 0 0.5rem;
  line-height: 1.4;
}
.guideline-h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--m2d-text);
  margin: 1rem 0 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.guideline-p {
  margin: 0.5rem 0 1rem;
  line-height: 1.65;
  color: var(--m2d-text);
}
.guideline-ul, .guideline-ol {
  margin: 0.5rem 0 1rem;
  padding-left: 1.5rem;
}
.guideline-li {
  margin: 0.35rem 0;
  line-height: 1.6;
}
.guideline-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size: 0.9em;
  background: var(--m2d-bg-soft);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}
.new-badge {
  display: inline-block;
  font-size: 0.7em;
  font-weight: 700;
  background: var(--m2d-amber);
  color: #fff;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: middle;
}

/* --- Tables -------------------------------------------------------------- */
.guideline-table-wrap {
  overflow-x: auto;
  margin: 1rem 0;
  border: 1px solid var(--m2d-border);
  border-radius: var(--m2d-radius-sm);
}
.guideline-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.guideline-thead { background: var(--m2d-bg-soft); }
.guideline-th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  color: var(--m2d-text);
  border-bottom: 2px solid var(--m2d-border);
}
.guideline-td {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--m2d-border);
  vertical-align: top;
}
.guideline-table tbody tr:last-child .guideline-td { border-bottom: none; }

/* --- Alert boxes --------------------------------------------------------- */
.alert {
  display: flex;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: var(--m2d-radius-sm);
  border-left: 4px solid;
  margin: 1rem 0;
}
.alert-icon { font-size: 1.25rem; line-height: 1.4; flex-shrink: 0; }
.alert-body { line-height: 1.55; }
.alert-warning { background: var(--m2d-amber-bg); border-color: var(--m2d-amber); color: #78350f; }
.alert-danger  { background: var(--m2d-red-bg);   border-color: var(--m2d-red);   color: #7f1d1d; }
.alert-info    { background: var(--m2d-blue-bg);  border-color: var(--m2d-blue);  color: #1e3a8a; }
.alert-success,
.alert-green   { background: var(--m2d-green-bg); border-color: var(--m2d-green); color: #14532d; }

/* --- Drug cards ---------------------------------------------------------- */
.drug-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}
.drug-card {
  background: var(--m2d-bg-card);
  border: 1px solid var(--m2d-border);
  border-radius: var(--m2d-radius-sm);
  overflow: hidden;
  box-shadow: var(--m2d-shadow);
}
.drug-card-header {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.85rem 1rem;
  background: var(--m2d-bg-soft);
  border-bottom: 1px solid var(--m2d-border);
}
.drug-icon {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
}
.drug-name { font-weight: 700; font-size: 1rem; color: var(--m2d-text); }
.drug-brand { font-size: 0.8rem; color: var(--m2d-muted); margin-top: 2px; }
.drug-body { padding: 0.5rem 1rem; }
.drug-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--m2d-border);
  font-size: 0.92rem;
}
.drug-row:last-child { border-bottom: none; }
.drug-row-label { color: var(--m2d-muted); flex-shrink: 0; }
.drug-row-value { text-align: right; color: var(--m2d-text); }

/* --- PBS status pills ---------------------------------------------------- */
.pbs-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid;
}
.pbs-pill.pbs-green { background: var(--m2d-green-bg); color: #14532d; border-color: var(--m2d-green-border); }
.pbs-pill.pbs-amber { background: var(--m2d-amber-bg); color: #78350f; border-color: var(--m2d-amber-border); }
.pbs-pill.pbs-red   { background: var(--m2d-red-bg);   color: #7f1d1d; border-color: var(--m2d-red-border); }

/* --- Severity cards ------------------------------------------------------ */
.severity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}
.severity-card {
  background: var(--m2d-bg-card);
  border: 1px solid var(--m2d-border);
  border-left: 5px solid;
  border-radius: var(--m2d-radius-sm);
  padding: 0.85rem 1rem;
  box-shadow: var(--m2d-shadow);
}
.severity-card.sev-mild     { border-left-color: var(--m2d-green); }
.severity-card.sev-moderate { border-left-color: var(--m2d-amber); }
.severity-card.sev-severe   { border-left-color: var(--m2d-red); }
.sev-label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 3px;
  margin-bottom: 0.35rem;
}
.sev-mild .sev-label     { background: var(--m2d-green-bg); color: #14532d; }
.sev-moderate .sev-label { background: var(--m2d-amber-bg); color: #78350f; }
.sev-severe .sev-label   { background: var(--m2d-red-bg);   color: #7f1d1d; }
.sev-title { font-weight: 700; font-size: 1rem; color: var(--m2d-text); }
.sev-desc  { font-size: 0.9rem; color: var(--m2d-text); margin: 0.25rem 0; line-height: 1.5; }
.sev-setting { font-size: 0.8rem; color: var(--m2d-muted); font-style: italic; }

/* --- Investigation list -------------------------------------------------- */
.inv-list { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: 0.5rem; }
.inv-item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.65rem 0.85rem;
  background: var(--m2d-bg-card);
  border: 1px solid var(--m2d-border);
  border-radius: var(--m2d-radius-sm);
}
.inv-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 999px;
  flex-shrink: 0;
  white-space: nowrap;
}
.inv-badge.inv-essential  { background: var(--m2d-red-bg);    color: #7f1d1d; }
.inv-badge.inv-available  { background: var(--m2d-green-bg);  color: #14532d; }
.inv-badge.inv-specialist { background: var(--m2d-purple-bg); color: #5b21b6; }
.inv-badge.inv-referral   { background: var(--m2d-amber-bg);  color: #78350f; }
.inv-name { font-weight: 600; color: var(--m2d-text); }
.inv-detail { font-size: 0.88rem; color: var(--m2d-muted); margin-top: 2px; }

/* --- Timeline ------------------------------------------------------------ */
.timeline {
  position: relative;
  margin: 1rem 0 1rem 0.5rem;
  padding-left: 1.5rem;
  border-left: 2px solid var(--m2d-border);
}
.timeline-item { position: relative; margin: 1rem 0; }
.timeline-item::before {
  content: '';
  position: absolute;
  left: -1.95rem;
  top: 0.4rem;
  width: 12px;
  height: 12px;
  background: var(--m2d-blue);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--m2d-border);
}
.timeline-time {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--m2d-blue);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.timeline-content { color: var(--m2d-text); margin-top: 0.25rem; line-height: 1.55; }

/* --- Population cards ---------------------------------------------------- */
.pop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}
.pop-card {
  background: var(--m2d-bg-card);
  border: 1px solid var(--m2d-border);
  border-radius: var(--m2d-radius-sm);
  overflow: hidden;
  box-shadow: var(--m2d-shadow);
}
.pop-header {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.65rem 0.85rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff;
}
.pop-header.preg    { background: #ec4899; }
.pop-header.peds    { background: #06b6d4; }
.pop-header.elder   { background: #6366f1; }
.pop-header.renal   { background: #0ea5e9; }
.pop-header.hepatic { background: #d97706; }
.pop-header.immuno  { background: #7c3aed; }
.pop-header.atsi    { background: #b91c1c; }
.pop-icon { font-size: 1.1rem; }
.pop-body { padding: 0.75rem 1rem; }
.pop-item {
  padding: 0.4rem 0;
  border-bottom: 1px dashed var(--m2d-border);
  font-size: 0.92rem;
}
.pop-item:last-child { border-bottom: none; }
.pop-drug { font-weight: 600; color: var(--m2d-text); }
.pop-note { font-size: 0.85rem; color: var(--m2d-muted); margin-top: 2px; }

/* --- Quick reference ----------------------------------------------------- */
.qr-grid {
  display: grid;
  gap: 0.4rem;
  margin: 1rem 0;
}
.qr-row {
  display: grid;
  grid-template-columns: 1.2fr 1.5fr 0.8fr 1.5fr;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  background: var(--m2d-bg-card);
  border: 1px solid var(--m2d-border);
  border-radius: var(--m2d-radius-sm);
  font-size: 0.9rem;
}
.qr-cell { color: var(--m2d-text); line-height: 1.4; }
.qr-syndrome { font-weight: 600; }
.qr-drug { color: var(--m2d-blue); }
.qr-duration { font-weight: 600; color: var(--m2d-muted); }
.qr-note { font-style: italic; color: var(--m2d-muted); }

@media (max-width: 700px) {
  .qr-row { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* --- ATSI section -------------------------------------------------------- */
.atsi-section {
  background: linear-gradient(135deg, #fef2f2 0%, #fffbeb 50%, #f9fafb 100%);
  border: 1px solid var(--m2d-border);
  border-radius: var(--m2d-radius);
  padding: 1.25rem;
  margin: 1.5rem 0;
}
.atsi-header { display: flex; gap: 0.75rem; align-items: center; margin-bottom: 1rem; }
.atsi-flag {
  display: flex;
  flex-direction: column;
  width: 32px;
  height: 22px;
  border: 1px solid #1f2937;
  overflow: hidden;
}
.atsi-flag span:first-child { flex: 1; background: #000; }
.atsi-flag span:last-child  { flex: 1; background: #d4351c; }
.atsi-title { font-weight: 700; color: var(--m2d-text); font-size: 1.05rem; }
.barrier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.75rem;
}
.barrier-item {
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid var(--m2d-border);
  border-radius: var(--m2d-radius-sm);
  padding: 0.65rem 0.85rem;
}
.barrier-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #b91c1c;
  margin-bottom: 0.25rem;
}
.barrier-value { font-size: 0.92rem; color: var(--m2d-text); line-height: 1.5; }

/* --- Step boxes ---------------------------------------------------------- */
.step-grid {
  display: grid;
  gap: 0.6rem;
  margin: 1rem 0;
}
.step-box {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  background: var(--m2d-bg-card);
  border: 1px solid var(--m2d-border);
  border-radius: var(--m2d-radius-sm);
  align-items: start;
}
.step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--m2d-blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  flex-shrink: 0;
}
.step-content { display: flex; flex-direction: column; gap: 0.15rem; }
.step-title { font-weight: 600; color: var(--m2d-text); }
.step-desc { font-size: 0.92rem; color: var(--m2d-muted); line-height: 1.5; }

/* --- Two-column layout --------------------------------------------------- */
.two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}
.info-box {
  background: var(--m2d-bg-card);
  border: 1px solid var(--m2d-border);
  border-radius: var(--m2d-radius-sm);
  padding: 0.85rem 1rem;
}
.info-box-title {
  font-weight: 700;
  color: var(--m2d-text);
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  border-bottom: 2px solid var(--m2d-border);
  padding-bottom: 0.3rem;
}

/* --- References ---------------------------------------------------------- */
.ref-list { list-style: none; padding: 0; margin: 1rem 0; counter-reset: ref; }
.ref-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem;
  padding: 0.4rem 0;
  font-size: 0.88rem;
  line-height: 1.5;
  border-bottom: 1px dashed var(--m2d-border);
}
.ref-item:last-child { border-bottom: none; }
.ref-num {
  font-weight: 700;
  color: var(--m2d-muted);
  font-variant-numeric: tabular-nums;
  min-width: 2ch;
}