/* ═══════════════════════════════════════════════════════════════════════
   Nursing Drug Reference & Checker v3.0.0
   Mobile-first · Clinical-grade · NIOSH + Beers always visible
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --ndc-primary: #1e3a5f;
  --ndc-accent:  #2D9C9C;
  --ndc-red:     #dc2626;
  --ndc-orange:  #d97706;
  --ndc-green:   #16a34a;
  --ndc-purple:  #7c3aed;
  --ndc-blue:    #2563eb;
  --ndc-teal:    #0891b2;
  --ndc-grey:    #6b7280;
  --ndc-dark:    #111827;
  --ndc-bg:      #f8fafc;
  --ndc-card:    #ffffff;
  --ndc-border:  #e2e8f0;
  --ndc-radius:  10px;
  --ndc-shadow:  0 2px 12px rgba(0,0,0,.08);
}

/* ── Page header ────────────────────────────────────────────────────── */
.ndc-page-header {
  background: linear-gradient(135deg, var(--ndc-primary) 0%, #2D9C9C 100%);
  color: #fff;
  padding: 1.5rem 1.25rem;
  border-radius: var(--ndc-radius);
  margin-bottom: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
}
.ndc-header-brand { display: flex; gap: .75rem; align-items: center; }
.ndc-header-icon  { font-size: 2rem; line-height: 1; }
.ndc-header-title { margin: 0; font-size: 1.35rem; font-weight: 700; color: #fff; }
.ndc-header-sub   { margin: .2rem 0 0; font-size: .82rem; opacity: .85; }
.ndc-header-badges { display: flex; flex-wrap: wrap; gap: .4rem; align-items: flex-start; }
.ndc-badge-pill {
  font-size: .72rem; font-weight: 600; padding: .3rem .65rem;
  border-radius: 999px; white-space: nowrap;
}
.ndc-badge-free     { background: rgba(255,255,255,.2); color: #fff; }
.ndc-badge-private  { background: rgba(255,255,255,.15); color: #fff; }
.ndc-badge-guideline{ background: #d97706; color: #fff; }
.ndc-badge-niosh    { background: #dc2626; color: #fff; }

/* ── Split layout ───────────────────────────────────────────────────── */
.ndc-split-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 960px) {
  .ndc-split-layout { grid-template-columns: 1fr 1fr; }
}

/* ── Panels ─────────────────────────────────────────────────────────── */
.ndc-panel {
  background: var(--ndc-card);
  border: 1px solid var(--ndc-border);
  border-radius: var(--ndc-radius);
  padding: 1.25rem;
  box-shadow: var(--ndc-shadow);
}
.ndc-panel-header {
  display: flex; gap: .75rem; align-items: center;
  margin-bottom: 1rem; padding-bottom: .75rem;
  border-bottom: 2px solid var(--ndc-border);
}
.ndc-panel-icon  { font-size: 1.5rem; }
.ndc-panel-title { font-size: 1rem; font-weight: 700; color: var(--ndc-primary); }
.ndc-panel-sub   { font-size: .75rem; color: var(--ndc-grey); margin-top: .1rem; }

/* ── Form elements ──────────────────────────────────────────────────── */
.ndc-age-field { max-width: 100px !important; }
.ndc-drug-input {
  width: 100% !important; box-sizing: border-box;
  padding: .65rem .85rem !important;
  border: 2px solid var(--ndc-border) !important;
  border-radius: 8px !important; font-size: .95rem !important;
  transition: border-color .2s;
}
.ndc-drug-input:focus {
  border-color: var(--ndc-accent) !important; outline: none !important;
}
.ndc-mar-textarea {
  width: 100% !important; box-sizing: border-box;
  border: 2px solid var(--ndc-border) !important;
  border-radius: 8px !important; font-size: .87rem !important;
  font-family: monospace; padding: .65rem !important;
}

/* ── Buttons ────────────────────────────────────────────────────────── */
.ndc-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .6rem 1.2rem; border-radius: 8px; font-size: .9rem;
  font-weight: 600; border: none; cursor: pointer;
  transition: filter .15s, transform .1s;
}
.ndc-btn:hover  { filter: brightness(1.08); }
.ndc-btn:active { transform: scale(.97); }
.ndc-btn-lookup { background: var(--ndc-primary); color: #fff; margin-top: .5rem; }
.ndc-btn-add    { background: var(--ndc-accent);  color: #fff; margin-top: .5rem; }
.ndc-btn-add-sm { background: var(--ndc-accent);  color: #fff; }
.ndc-btn-check  { background: var(--ndc-primary); color: #fff; margin-top: .75rem; }
.ndc-btn-clear  { background: #6b7280; color: #fff; margin-top: .5rem; margin-left: .5rem; }

/* ── Mode toggle ────────────────────────────────────────────────────── */
.ndc-mode-toggle {
  display: flex; gap: .5rem; margin-bottom: 1rem;
  border-bottom: 2px solid var(--ndc-border); padding-bottom: .75rem;
}
.ndc-mode-btn {
  padding: .45rem 1rem; border-radius: 6px 6px 0 0;
  border: 1px solid var(--ndc-border); border-bottom: none;
  background: var(--ndc-bg); font-size: .85rem; cursor: pointer;
  font-weight: 500; color: var(--ndc-grey);
}
.ndc-mode-btn.active {
  background: var(--ndc-card); color: var(--ndc-primary);
  font-weight: 700; border-color: var(--ndc-primary);
}
.ndc-mode-panel { display: block; }
.ndc-mode-hidden { display: none; }

/* ── Context row ────────────────────────────────────────────────────── */
.ndc-context-row { display: contents; }
.ndc-context-field { width: 100% !important; box-sizing: border-box; }

/* ── Checker chips ──────────────────────────────────────────────────── */
.ndc-checker-chips { margin-bottom: .75rem; }
.ndc-chips-label   { font-size: .8rem; color: var(--ndc-grey); margin-bottom: .4rem; }
.ndc-chips-row     { display: flex; flex-wrap: wrap; gap: .35rem; }
.ndc-chip {
  background: #eff6ff; border: 1px solid #bfdbfe;
  color: #1d4ed8; padding: .25rem .65rem;
  border-radius: 999px; font-size: .82rem; font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════════
   LOOKUP RESULTS
   ═══════════════════════════════════════════════════════════════════════ */

/* Drug identity header */
.ndc-result-header {
  padding: 1rem; background: #f0f9ff;
  border: 1px solid #bae6fd; border-radius: 8px; margin-bottom: .75rem;
}
.ndc-result-name-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ndc-result-name {
  margin: 0; font-size: 1.2rem; font-weight: 800;
  color: var(--ndc-primary); letter-spacing: .02em;
}
.ndc-result-generic { font-size: .85rem; color: var(--ndc-grey); margin-top: .3rem; }
.ndc-result-meta    { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.ndc-meta-pill {
  background: rgba(45,156,156,.1); border: 1px solid rgba(45,156,156,.3);
  color: #0f766e; padding: .2rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 600;
}
.ndc-meta-source { background: #f0f9ff; border-color: #bae6fd; color: #0369a1; }
.ndc-bbw-badge {
  background: #dc2626; color: #fff; padding: .2rem .6rem;
  border-radius: 4px; font-size: .72rem; font-weight: 800; letter-spacing: .05em;
}

/* ── ALERTS BAR — v3.0.0 always visible ─────────────────────────────── */
.ndc-alerts-bar {
  display: flex; flex-direction: column; gap: .6rem;
  margin: .75rem 0;
}
.ndc-alert {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: .85rem 1rem; border-radius: 8px; border-left: 4px solid;
}
.ndc-alert-icon {
  font-size: 1.2rem; flex-shrink: 0; margin-top: .1rem;
}
.ndc-alert-title {
  font-size: .78rem; font-weight: 800; letter-spacing: .06em; margin-bottom: .3rem;
}
.ndc-alert-text  { font-size: .87rem; margin: 0 0 .3rem; line-height: 1.5; }
.ndc-alert-link  { font-size: .82rem; font-weight: 600; text-decoration: underline; }

/* Black Box Warning */
.ndc-alert-bbw {
  background: #1c0508; border-color: #dc2626; color: #fecaca;
}
.ndc-alert-bbw .ndc-alert-title { color: #fca5a5; }
.ndc-alert-bbw .ndc-alert-link  { color: #fca5a5; }

/* NIOSH Table 1 */
.ndc-alert-niosh-t1 {
  background: #fff7ed; border-color: #dc2626;
}
.ndc-alert-niosh-t1 .ndc-alert-title { color: #9a3412; }
.ndc-alert-niosh-t1 .ndc-alert-link  { color: #9a3412; }

/* NIOSH Table 2 */
.ndc-alert-niosh-t2 {
  background: #fffbeb; border-color: #d97706;
}
.ndc-alert-niosh-t2 .ndc-alert-title { color: #92400e; }
.ndc-alert-niosh-t2 .ndc-alert-link  { color: #92400e; }

/* Beers High */
.ndc-alert-beers-high {
  background: #fff1f2; border-color: #e11d48;
}
.ndc-alert-beers-high .ndc-alert-title { color: #9f1239; }
.ndc-alert-beers-high .ndc-alert-link  { color: #9f1239; }

/* Beers Moderate */
.ndc-alert-beers-mod {
  background: #fffbeb; border-color: #f59e0b;
}
.ndc-alert-beers-mod .ndc-alert-title { color: #92400e; }
.ndc-alert-beers-mod .ndc-alert-link  { color: #92400e; }

/* ── Quick view ──────────────────────────────────────────────────────── */
.ndc-quick-view {
  background: #f8fafc; border: 1px solid var(--ndc-border);
  border-radius: 8px; padding: .75rem 1rem; margin-bottom: .75rem;
}
.ndc-quick-title { font-size: .78rem; font-weight: 700; color: var(--ndc-grey); margin-bottom: .5rem; text-transform: uppercase; letter-spacing: .06em; }
.ndc-quick-grid  { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.ndc-quick-item  { display: flex; flex-direction: column; }
.ndc-quick-label { font-size: .72rem; color: var(--ndc-grey); font-weight: 600; text-transform: uppercase; }
.ndc-quick-val   { font-size: .9rem; color: var(--ndc-dark); font-weight: 500; }

/* ── Accordion ───────────────────────────────────────────────────────── */
.ndc-accordion { display: flex; flex-direction: column; gap: .4rem; }

.ndc-acc-item {
  border: 1px solid var(--ndc-border); border-radius: 8px; overflow: hidden;
}

.ndc-acc-trigger {
  display: flex; justify-content: space-between; align-items: center;
  padding: .75rem 1rem; cursor: pointer; list-style: none;
  font-size: .9rem; font-weight: 600; background: #f8fafc;
  user-select: none; transition: background .15s;
}
.ndc-acc-trigger:hover       { background: #f1f5f9; }
.ndc-acc-item[open] .ndc-acc-trigger { background: #f1f5f9; }
.ndc-acc-arrow { transition: transform .2s; font-size: 1.1rem; color: var(--ndc-grey); }
.ndc-acc-item[open] .ndc-acc-arrow { transform: rotate(90deg); }

/* Colour-coded left border per section */
.ndc-acc-blue   { border-left: 3px solid var(--ndc-blue); }
.ndc-acc-red    { border-left: 3px solid var(--ndc-red); }
.ndc-acc-orange { border-left: 3px solid var(--ndc-orange); }
.ndc-acc-green  { border-left: 3px solid var(--ndc-green); }
.ndc-acc-purple { border-left: 3px solid var(--ndc-purple); }
.ndc-acc-pink   { border-left: 3px solid #db2777; }
.ndc-acc-teal   { border-left: 3px solid var(--ndc-teal); }
.ndc-acc-grey   { border-left: 3px solid var(--ndc-grey); }
.ndc-acc-dark   { border-left: 3px solid var(--ndc-dark); }

.ndc-acc-body {
  padding: .9rem 1rem; border-top: 1px solid var(--ndc-border);
  background: #fff;
}

/* ── FDA text formatting ─────────────────────────────────────────────── */
.ndc-fda-content { font-size: .87rem; line-height: 1.65; color: #374151; }
.ndc-fda-heading {
  font-size: .9rem; font-weight: 700; color: var(--ndc-primary);
  margin: .9rem 0 .35rem; border-bottom: 1px solid #e5e7eb; padding-bottom: .2rem;
}
.ndc-fda-num    { color: var(--ndc-accent); font-size: .8rem; margin-right: .35rem; }
.ndc-fda-label  { font-weight: 700; color: var(--ndc-dark); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; margin: .75rem 0 .25rem; }
.ndc-fda-para   { margin: .4rem 0; }
.ndc-fda-list   { margin: .4rem 0 .4rem 1.2rem; padding: 0; }
.ndc-fda-list li{ margin-bottom: .3rem; }

/* ── Cross-links ─────────────────────────────────────────────────────── */
.ndc-result-crosslinks {
  display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
  margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--ndc-border);
}
.ndc-crosslinks-label { font-size: .78rem; font-weight: 700; color: var(--ndc-grey); text-transform: uppercase; }
.ndc-crosslink {
  font-size: .82rem; font-weight: 600; padding: .3rem .7rem;
  border-radius: 999px; background: #f1f5f9; border: 1px solid var(--ndc-border);
  color: var(--ndc-primary); text-decoration: none; transition: background .15s;
}
.ndc-crosslink:hover { background: #e2e8f0; }

/* ═══════════════════════════════════════════════════════════════════════
   CHECKER RESULTS
   ═══════════════════════════════════════════════════════════════════════ */

.ndc-results-summary {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: .85rem 1rem; border-radius: 8px; margin-bottom: .75rem; border-left: 4px solid;
}
.ndc-sum-critical { background: #fef2f2; border-color: #dc2626; }
.ndc-sum-major    { background: #fff7ed; border-color: #d97706; }
.ndc-sum-moderate { background: #fffbeb; border-color: #f59e0b; }
.ndc-sum-clear    { background: #f0fdf4; border-color: #16a34a; }
.ndc-sum-icon     { font-size: 1.4rem; }
.ndc-sum-title    { font-size: .9rem; font-weight: 700; }
.ndc-sum-meta     { font-size: .78rem; color: var(--ndc-grey); margin-top: .25rem; }
.ndc-cnt          { padding: .15rem .5rem; border-radius: 4px; font-size: .75rem; font-weight: 700; margin-left: .25rem; }
.ndc-cnt-crit     { background: #dc2626; color: #fff; }
.ndc-cnt-maj      { background: #d97706; color: #fff; }
.ndc-cnt-mod      { background: #f59e0b; color: #fff; }
.ndc-cnt-beers    { background: #7c3aed; color: #fff; }

.ndc-result-section { margin-bottom: 1rem; }
.ndc-section-label {
  font-size: .78rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; padding: .4rem .75rem; border-radius: 5px; margin-bottom: .5rem;
  display: inline-block;
}
.ndc-label-beers  { background: #f3e8ff; color: #7c3aed; }
.ndc-label-ddi    { background: #fff7ed; color: #c2410c; }
.ndc-label-rxnorm { background: #eff6ff; color: #1d4ed8; }

.ndc-int-card {
  border: 1px solid var(--ndc-border); border-radius: 8px;
  overflow: hidden; margin-bottom: .5rem;
}
.ndc-card-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: .6rem .85rem; background: #f8fafc;
}
.ndc-card-drugs { font-size: .88rem; font-weight: 600; }
.ndc-card-body  { padding: .75rem .85rem; font-size: .85rem; line-height: 1.6; }
.ndc-card-body p{ margin: .3rem 0; }

.ndc-sev-badge {
  font-size: .7rem; font-weight: 800; padding: .2rem .55rem;
  border-radius: 4px; letter-spacing: .04em;
}
.ndc-sev-critical { background: #dc2626; color: #fff; }
.ndc-sev-major,
.ndc-sev-high     { background: #d97706; color: #fff; }
.ndc-sev-moderate { background: #f59e0b; color: #1c1917; }
.ndc-sev-minor    { background: #6b7280; color: #fff; }

.ndc-card-critical  { border-left: 3px solid #dc2626; }
.ndc-card-major,
.ndc-card-high      { border-left: 3px solid #d97706; }
.ndc-card-moderate  { border-left: 3px solid #f59e0b; }
.ndc-card-beers-high{ border-left: 3px solid #e11d48; }
.ndc-card-beers-mod { border-left: 3px solid #f59e0b; }

.ndc-source-note { color: var(--ndc-grey); font-size: .75rem !important; }

.ndc-result-clear { text-align: center; padding: 1.5rem; background: #f0fdf4; border-radius: 8px; }
.ndc-clear-icon   { font-size: 2rem; margin-bottom: .5rem; }

.ndc-not-found  { text-align: center; padding: 1.5rem; }
.ndc-not-found-icon { font-size: 2rem; margin-bottom: .5rem; }
.ndc-hint       { font-size: .82rem; color: var(--ndc-grey); }

.ndc-disclaimer {
  font-size: .78rem; color: var(--ndc-grey); background: var(--ndc-bg);
  border: 1px solid var(--ndc-border); border-radius: 6px;
  padding: .65rem .85rem; margin-top: .75rem; line-height: 1.5;
}