:root {
  --bg: #f3f7fc;
  --bg-soft: #e8f1fb;
  --card: #ffffff;
  --card-2: #f7fbff;
  --text: #1a2763;
  --muted: #5f6f95;
  --border: #d5e2f2;
  --accent: #1cb9ef;
  --accent-2: #1a2763;
  --danger: #cf2e2e;
  --warn: #ff8f1c;
  --success: #00a870;
  --shadow: 0 12px 28px rgba(16, 24, 63, 0.12);
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 10px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Lato", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  background: radial-gradient(900px 500px at 0% -10%, rgba(28, 185, 239, 0.14), transparent),
    radial-gradient(1000px 500px at 100% 0%, rgba(26, 39, 99, 0.09), transparent),
    var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.5;
}

.page {
  max-width: 1240px;
  margin: 0 auto;
  padding: 22px 28px 72px;
}

.topbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 22px;
  padding: 18px 24px;
  border: 1px solid rgba(28, 185, 239, 0.2);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #2a2f7f 0%, #1a2763 45%, #10183f 100%);
  box-shadow: 0 10px 24px rgba(16, 24, 63, 0.22);
  margin-bottom: 26px;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 20px;
}

.brand-logo-link {
  display: inline-flex;
  align-items: center;
}

.brand-logo {
  height: 42px;
  width: auto;
  display: block;
}

.title {
  font-family: "Lato", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(21px, 2.1vw, 31px);
  margin: 0;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #ffffff;
}

.subtitle {
  color: #d9e4ff;
  margin: 6px 0 0;
  font-size: 16px;
  line-height: 1.35;
  max-width: 46ch;
}

.nav {
  display: flex;
  gap: 7px;
  align-items: center;
  flex-wrap: nowrap;
}

.nav a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.09);
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}

.nav a:hover {
  border-color: rgba(28, 185, 239, 0.75);
  background: rgba(28, 185, 239, 0.18);
}

.nav a.active {
  border-color: rgba(28, 185, 239, 0.9);
  color: #ffffff;
  background: rgba(28, 185, 239, 0.28);
}

.cart-icon {
  width: 18px;
  height: 12px;
  border: 2px solid #ffffff;
  border-top: 0;
  border-radius: 0 0 4px 4px;
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  margin-right: 2px;
}

.cart-icon::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 2px;
  background: #ffffff;
  top: -5px;
  left: -3px;
  border-radius: 2px;
  transform: rotate(-22deg);
  transform-origin: left center;
}

.cart-icon::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  background: #ffffff;
  border-radius: 50%;
  bottom: -6px;
  left: 1px;
  box-shadow: 10px 0 0 #ffffff;
}

.card {
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 24px;
  box-shadow: var(--shadow);
}

.card.alert {
  border-color: rgba(207, 46, 46, 0.45);
  background: linear-gradient(180deg, #fff8f8, #ffecec);
  color: #9a2323;
}

.card-recall {
  border-color: rgba(255, 107, 107, 0.5);
}

.card-shortage {
  border-color: rgba(255, 180, 84, 0.5);
}

.card + .card {
  margin-top: 18px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px 24px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}

.results-view-inline {
  flex-direction: row;
  align-items: center;
  gap: 18px;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow-x: auto;
  padding-bottom: 2px;
}

.results-view-inline .label {
  margin-right: 6px;
  flex: 0 0 auto;
}

.results-view-inline label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  font-size: 15px;
  color: var(--text);
}

.results-view-inline input[type="radio"] {
  width: 16px;
  height: 16px;
  min-height: 16px;
  margin: 0;
  accent-color: #1cb9ef;
}

.label {
  color: var(--muted);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
}

input[type="text"],
input[type="search"],
input[type="number"],
input[type="email"],
input[type="url"],
input {
  background-color: #ffffff !important;
  border: 1px solid #cfd6e3;
  color: #121722 !important;
  border-radius: 14px;
  padding: 13px 15px;
  font-size: 16px;
  min-height: 52px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

select {
  background-color: #ffffff;
  border: 1px solid #cfd6e3;
  color: #121722;
  border-radius: 14px;
  padding: 11px 13px;
  font-size: 15px;
  outline: none;
  min-height: 44px;
}

select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(78, 161, 255, 0.2);
}

input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(78, 161, 255, 0.2);
}

.actions {
  display: flex;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.actions-tight {
  margin-top: 0;
}

.mb-16 {
  margin-bottom: 16px;
}

.mb-10 {
  margin-bottom: 10px;
}

.text-danger {
  color: var(--danger);
}

.confirm-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(14, 31, 78, 0.35);
  backdrop-filter: blur(3px);
  z-index: 1000;
}

.confirm-modal.active {
  display: flex;
}

.confirm-modal .confirm-card {
  width: min(460px, 100%);
}

.confirm-modal .confirm-title {
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--text);
}

.confirm-modal .confirm-text {
  margin: 0;
  color: var(--muted);
}

.btn {
  background: linear-gradient(90deg, #1cb9ef, #32b7e6);
  color: #0b1a4f;
  border: 0;
  padding: 13px 22px;
  border-radius: 14px;
  cursor: pointer;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  font-size: 16px;
  line-height: 1;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(28, 185, 239, 0.3);
}

.btn.secondary {
  background: linear-gradient(90deg, #1a2763, #25388e);
  color: #f7fbff;
}

.close-btn {
  padding: 8px 12px;
}

.section-title {
  margin: 22px 0 12px;
  font-size: 15px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
}

.result-card {
  padding: 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(16, 24, 63, 0.08);
}

.result-card.sub {
  background: #f7fbff;
}

.result-card + .result-card {
  margin-top: 12px;
}

.result-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 22px;
}

.ndc-quote-card .ndc-line {
  display: block;
  margin: 0 0 12px 0;
  line-height: 1.35;
}

.ndc-quote-actions {
  display: flex;
  align-items: center;
  min-height: 46px;
}

.kv {
  color: var(--muted);
  font-weight: 600;
}

.kv span {
  color: var(--text);
  font-weight: 400;
}

.badge-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.badge.shortage {
  background: rgba(255, 180, 84, 0.16);
  color: var(--warn);
  border: 1px solid rgba(255, 180, 84, 0.4);
}

.badge.recall {
  background: rgba(255, 107, 107, 0.18);
  color: var(--danger);
  border: 1px solid rgba(255, 107, 107, 0.5);
}

.badge.dailymed {
  background: rgba(255, 180, 84, 0.16);
  color: var(--warn);
  border: 1px solid rgba(255, 180, 84, 0.5);
  font-size: 14px;
}

.studies-table th {
  font-size: 12px;
}

.studies-table td {
  font-size: 13px;
}

.table-card-scroll {
  overflow: hidden;
}

.studies-table-fixed {
  width: 100%;
  border-collapse: separate;
  border-spacing: 4px 0;
  table-layout: fixed;
}

.studies-th {
  text-align: left;
  padding: 4px;
  border-bottom: 1px solid var(--border);
}

.studies-td {
  padding: 4px 6px;
  border-bottom: 1px solid rgba(26, 39, 99, 0.12);
}

.studies-td-wrap {
  white-space: normal;
  word-break: break-word;
}

.w-8 { width: 8%; }
.w-10 { width: 10%; }
.w-11 { width: 11%; }
.w-12 { width: 12%; }
.w-13 { width: 13%; }
.w-14 { width: 14%; }
.w-15 { width: 15%; }
.w-17 { width: 17%; }
.w-20 { width: 20%; }
.w-30 { width: 30%; }
.w-70 { width: 70%; }

.studies-table .sort-btn {
  font-size: 9px;
  line-height: 9px;
}
.badge.studies {
  background: rgba(96, 227, 139, 0.18);
  color: var(--success);
  border: 1px solid rgba(96, 227, 139, 0.5);
  font-size: 14px;
}

.back-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.muted {
  color: var(--muted);
}

.footer {
  margin-top: 54px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}

.suggestions {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 10px;
  z-index: 10;
  margin-top: 4px;
  overflow: hidden;
}

.suggestions div {
  padding: 8px 10px;
  cursor: pointer;
  border-top: 1px solid #eef3fb;
}

.suggestions div:hover {
  background: rgba(28, 185, 239, 0.12);
}

.sort-controls {
  display: inline-flex;
  flex-direction: row;
  gap: 2px;
  margin-left: 6px;
  vertical-align: middle;
}

.sort-btn {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  line-height: 10px;
  cursor: pointer;
  display: inline-block;
}

.sort-btn:hover {
  color: var(--text);
}

.th-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .page {
    padding: 18px 16px 44px;
  }
  .topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 14px;
  }
  .brand-lockup {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .brand-logo {
    height: 32px;
  }
  .title {
    font-size: 23px;
  }
  .subtitle {
    font-size: 15px;
  }
  .nav {
    width: 100%;
    flex-wrap: wrap;
  }
  .nav a {
    font-size: 12px;
    padding: 6px 10px;
  }
  .results-view-inline {
    gap: 14px;
  }
  .results-view-inline label {
    font-size: 14px;
  }
  .result-grid {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------
   Site-specific colors for page-level components (Bionical Emas).
   styles-acts.css ends with the same selectors holding the Ascintri
   values; pages keep only layout in their own <style> blocks.
   ------------------------------------------------------------------ */
.nav a.nav-admin { border-color: rgba(255,200,80,.5); background: rgba(255,200,80,.12); }

.login-head, .setup-head { background: linear-gradient(135deg, #2a2f7f 0%, #1a2763 45%, #10183f 100%); }
.login-head { padding: 28px 24px 20px; }
.login-logo { height: 38px; display: block; margin: 0 auto 14px; }
.login-title { font-size: 22px; }
.pw-wrap:focus-within { box-shadow: 0 0 0 3px rgba(78,161,255,0.2); }

.alert-box   { background: #fff8f8; border: 1px solid rgba(207,46,46,.4); color: #9a2323; }
.success-box { background: #f0fff8; border: 1px solid rgba(0,168,112,.4); color: #006644; }
.warn-box    { background: #fff8f0; border: 1px solid rgba(255,143,28,.4); color: #7a4800; }
.notice-success { background: #ecfdf3; border: 1px solid #86efac; color: #14532d; }
.debug-card  { border: 1px solid #f59e0b; background: #fffbeb; }
.debug-warn  { color: #b45309; }
.error-card  { border-color: rgba(255,107,107,0.5); }

.pill-admin    { background: rgba(28,185,239,.15); color: #0b6e9e; border: 1px solid rgba(28,185,239,.4); }
.pill-active   { background: rgba(0,168,112,.12);  color: #006644; border: 1px solid rgba(0,168,112,.4); }
.pill-inactive { background: rgba(207,46,46,.10);  color: #9a2323; border: 1px solid rgba(207,46,46,.35); }
.badge-count   { background: rgba(28,185,239,.12); color: #0b6e9e; border: 1px solid rgba(28,185,239,.3); }
.ref-badge     { background: rgba(26,39,99,.08); }
.confirm-modal { background: rgba(16,24,63,.45); }
.confirm-card  { box-shadow: 0 20px 48px rgba(16,24,63,.22); }
.btn-danger    { background: linear-gradient(90deg,#cf2e2e,#a82424); }
.btn-danger:hover { box-shadow: 0 6px 14px rgba(207,46,46,.3); }
/* ------------------------------------------------------------------
   App layout: slim top bar + left sidebar navigation (header.cfm, footer.cfm).
   Wide windows always show the sidebar; below 1000px it hides behind the
   "Menu" button so pages keep their full width and never scroll sideways.
   ------------------------------------------------------------------ */
:root { --topbar-h: 60px; --sidebar-w: 224px; }

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--topbar-h);
  box-sizing: border-box;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  margin: 0;
  padding: 0 22px;
  border-radius: 0;
  border-width: 0 0 1px 0;
}
.app-user { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.app-user-name { color: rgba(255,255,255,.85); font-size: 14px; font-weight: 600; white-space: nowrap; }
.app-logout {
  color: #ffffff; text-decoration: none; font-weight: 700; font-size: 14px; line-height: 1;
  padding: 7px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.09); white-space: nowrap;
}
.app-logout:hover { background: rgba(255,255,255,.18); }

.app-shell { display: flex; align-items: flex-start; min-height: calc(100vh - var(--topbar-h)); }
.app-main { flex: 1 1 auto; min-width: 0; }
.app-main > .footer { margin: 30px 28px 0; padding: 18px 0 24px; }

.sidebar {
  flex: 0 0 var(--sidebar-w);
  width: var(--sidebar-w);
  box-sizing: border-box;
  position: sticky;
  top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
  padding: 16px 12px 24px;
  background: linear-gradient(180deg, #1a2763 0%, #10183f 100%);
}
.sidebar-section {
  color: rgba(255,255,255,.55);
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 16px 12px 6px;
}
.sidebar-section:first-child { padding-top: 4px; }
.sidebar a {
  display: flex; align-items: center; gap: 9px;
  color: #ffffff; text-decoration: none; font-weight: 700; font-size: 14px; line-height: 1.25;
  padding: 9px 12px; margin: 2px 0;
  border-radius: 10px; border-left: 3px solid transparent;
}
.sidebar a:hover { background: rgba(255,255,255,.10); }
.sidebar a.active { background: rgba(28,185,239,.22); border-left-color: #1cb9ef; }

/* Accordion sections in the sidebar (US, EU, UK): header.cfm marks the section holding the current page
   "current open"; hovering or clicking the heading opens others. */
.nav-acc { margin: 4px 0; }
.nav-acc-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: none; border: 0; border-left: 3px solid transparent; cursor: pointer;
  color: rgba(255,255,255,.80); font: inherit; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  padding: 10px 12px; border-radius: 10px; text-align: left;
}
.nav-acc-head:hover, .nav-acc.open > .nav-acc-head { background: rgba(255,255,255,.08); color: #ffffff; }
.nav-acc.current > .nav-acc-head { border-left-color: #1cb9ef; }
.nav-acc-head:focus-visible { outline: 2px solid #1cb9ef; outline-offset: 1px; }
.nav-acc-chev { font-size: 16px; line-height: 1; transition: transform .2s ease; }
.nav-acc.open .nav-acc-chev { transform: rotate(90deg); }
.nav-acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease; }
.nav-acc-body > div { overflow: hidden; min-height: 0; }
.nav-acc.open > .nav-acc-body { grid-template-rows: 1fr; }
.nav-acc-body a { padding-left: 18px; }
.sidebar-subsection {
  color: rgba(255,255,255,.45);
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 8px 12px 2px 18px;
}
@media (prefers-reduced-motion: reduce) {
  .nav-acc-body, .nav-acc-chev { transition: none; }
}

.sidebar-toggle {
  display: none;
  align-items: center; gap: 6px; flex-shrink: 0;
  color: #ffffff; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer;
  padding: 7px 12px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.09);
}
.sidebar-backdrop { display: none; }

@media (max-width: 1000px) {
  .sidebar-toggle { display: inline-flex; }
  .sidebar {
    position: fixed; left: 0; top: var(--topbar-h); z-index: 45;
    transform: translateX(-100%); transition: transform .2s ease;
  }
  body.sidebar-open .sidebar { transform: translateX(0); box-shadow: 10px 0 28px rgba(0,0,0,.28); }
  body.sidebar-open .sidebar-backdrop {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; top: var(--topbar-h);
    background: rgba(0,0,0,.28); z-index: 44;
  }
}
@media (max-width: 640px) {
  .app-topbar { padding: 0 12px; gap: 10px; }
  .app-user-name { display: none; }
  .app-brand > div { display: none; }   /* keep just the logo */
  .app-main > .footer { margin: 24px 16px 0; }
}

/* ------------------------------------------------------------------
   Buttons: one look per role on every page.
     .btn                primary action (Search, Request a Quote, Apply)
     .btn.secondary      everything else (Back, Clear, Details, Edit, Check, Run now, Watch)
     .btn-danger         destructive (Remove, Clear Log)
     .btn-sm             the small size of any of these
     .btn-excel          Download Excel: top right of the page's header card (.excel-corner)
   Link pills (.badge: DailyMed, SmPC, Clinical Trials ...) keep their own colours.
   ------------------------------------------------------------------ */
.btn, .btn-danger, .btn-excel { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.btn-danger {
  background: linear-gradient(90deg, #cf2e2e, #a82424);
  color: #fff; border: 0; cursor: pointer; font-weight: 700; text-decoration: none;
  padding: 13px 22px; border-radius: 14px; font-size: 16px; line-height: 1;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn-danger:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(207, 46, 46, 0.3); }
.btn-sm, .btn.btn-sm, .btn-danger.btn-sm { padding: 7px 14px; font-size: 13px; border-radius: 10px; }
.btn-excel {
  padding: 7px 14px; border-radius: 10px; font-size: 13px; font-weight: 700; line-height: 1; text-decoration: none;
  color: #107c41; background: #ffffff; border: 1.5px solid #107c41; cursor: pointer;
  transition: background 0.12s ease, transform 0.12s ease;
}
.btn-excel::before {
  content: ""; width: 15px; height: 15px; flex: 0 0 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' rx='3' fill='%23107c41'/%3E%3Cpath d='M4.6 4h1.9l1.5 2.6L9.5 4h1.9L9 8l2.4 4H9.5L8 9.4 6.5 12H4.6L7 8z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center / contain;
}
.btn-excel:hover { background: #e7f4ec; transform: translateY(-1px); }
.excel-corner { float: right; margin: 0 0 10px 16px; }
@media (max-width: 640px) { .excel-corner { float: none; margin: 0 0 10px; } }