@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* FormuLink clinical interface refresh — deliberately calm, compact, and data-first. */
:root {
  --bg: #F7F9F9;
  --surface: #FFFFFF;
  --panel: var(--surface);
  --ink: #0F172A;
  --muted: #64748B;
  --line: #E2E8F0;
  --accent: #0F766E;
  --accent-ink: #0B5A54;
  --accent-soft: #E6F4F2;
  --deep: #0F3D3A;
  --deep2: #134E4A;
  --success: #16A34A;
  --warning: #D97706;
  --danger: #DC2626;
  --serif: Inter, system-ui, sans-serif;
  --sand: var(--bg);
  --amber: var(--warning);
  --amber-soft: #FFF7E8;
  --indica: #6C63A8;
  --indica-soft: #F0EFF8;
  --sativa: #B86B36;
  --sativa-soft: #FBF1E8;
  --hybrid: var(--accent);
  --hybrid-soft: var(--accent-soft);
  --cbd: #426987;
  --cbd-soft: #EDF4F8;
  --danger-soft: #FEF0EF;
  --success-soft: #EDF8F0;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-lg: 0 8px 24px rgba(15, 23, 42, .08);
  --ease: cubic-bezier(.2, .7, .25, 1);
}

html {
  font-family: Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body,
button,
input,
select,
textarea {
  font-family: Inter, system-ui, sans-serif;
}

body {
  color: var(--ink);
  background: var(--bg);
  font-size: 14px;
  line-height: 1.5;
}

.app { height: 100dvh; }
#gate { background: var(--deep); }

h1, h2, h3, h4, h5, h6 {
  color: var(--ink);
  font-family: Inter, system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -.01em;
}

button, input, select, textarea {
  color: var(--ink);
}

button {
  min-height: 36px;
  touch-action: manipulation;
}

/* Solid brand bar; clinic-specific inline token overrides still flow through. */
header {
  height: 64px;
  min-height: 64px;
  padding: 8px 20px;
  gap: 12px;
  color: #fff;
  background: var(--deep);
  border: 0;
  box-shadow: none;
}

header .logo,
header .wordmark,
.logo,
.wordmark,
.paneHead h2,
.matchIntro h3,
.modalBox h3,
.detName,
.gapSecHead {
  font-family: Inter, system-ui, sans-serif;
}

.logo {
  gap: 10px;
  font-size: 16px;
  letter-spacing: -.01em;
}

.logo .dot {
  width: 32px;
  height: 32px;
  color: var(--deep);
  background: #fff;
  box-shadow: none;
}

.logo small,
.stat span,
.wordmark span {
  color: rgba(255, 255, 255, .72);
  font-family: Inter, system-ui, sans-serif;
}

.wordmark { color: #fff; }

.stats { gap: 8px; }

.stat {
  padding: 4px 10px;
  border-color: rgba(255, 255, 255, .17);
  border-radius: 8px;
  background: rgba(255, 255, 255, .08);
  box-shadow: none;
}

.stat b { font-size: 15px; line-height: 20px; font-variant-numeric: tabular-nums; }
.stat span { font-size: 10px; line-height: 14px; }

.tabs {
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 9px;
  background: rgba(255, 255, 255, .08);
}

.tabs .tab {
  min-height: 36px;
  padding: 6px 12px;
  font-size: 13px;
  line-height: 20px;
}

.tab {
  min-height: 34px;
  padding: 7px 14px;
  color: rgba(255, 255, 255, .8);
  transition: background-color .16s var(--ease), color .16s var(--ease);
}

.tab.on {
  color: var(--deep);
  background: #fff;
  box-shadow: none;
}

.main,
.pane,
.list,
.dropzone,
#matchView,
#matchView .inner {
  min-width: 0;
}

.paneHead { padding-top: 16px; }
.paneHead h2 { font-size: 15px; font-weight: 600; }

.count {
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 600;
}

/* Controls and focus: the search container owns the ring, never its inner input. */
.btn,
button.primary,
.chip,
.fltBtn,
.szSel,
select.ctl,
.searchBox,
.brandBox,
.rangeField input,
.clRow input,
.clNew input,
.gateBox input,
.modalBox input:not([type="checkbox"]):not([type="range"]),
.modalBox select,
.modalBox textarea,
.wrap input:not([type="checkbox"]),
.wrap select,
textarea {
  border-radius: 8px;
}

.btn {
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: none;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
  transition: color .16s var(--ease), background-color .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease);
}

.btn:hover {
  color: var(--accent-ink);
  border-color: var(--accent);
  box-shadow: none;
  transform: none;
}

.app .btn.primary,
.btn.primary {
  color: #fff;
  background: var(--accent) !important;
  border-color: var(--accent);
  box-shadow: none;
}

.app .btn.primary:hover,
.btn.primary:hover {
  color: #fff;
  background: var(--accent-ink) !important;
  border-color: var(--accent-ink);
  box-shadow: none;
}

.btn.primary:active,
.btn:active { transform: translateY(1px); }

.btn:disabled,
button:disabled { cursor: not-allowed; opacity: .62; }

.chip {
  min-height: 32px;
  padding: 5px 11px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  transition: background-color .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}

.chip:hover { transform: none; border-color: var(--accent); }
.chip.on { color: var(--accent-ink); background: var(--accent-soft); border-color: var(--accent-soft); box-shadow: none; }

.searchBox,
.brandBox {
  min-height: 40px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  background: var(--surface);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), background-color .16s var(--ease);
}

.searchBox:focus-within,
.brandBox:focus-within,
.brandBox.on {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.searchBox input,
.brandBox input,
.searchBox input:focus,
.brandBox input:focus,
.searchBox input:focus-visible,
.brandBox input:focus-visible {
  min-width: 0;
  border: 0;
  outline: 0;
  box-shadow: none;
}

/* Equal dimensions override general button minimum heights and padding. */
#brandClear {
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  max-width: 32px;
  max-height: 32px;
  padding: 0;
  flex: 0 0 32px;
  border-radius: 50%;
  line-height: 1;
  align-items: center;
  justify-content: center;
}

#brandClear[hidden] { display: none; }

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
  min-height: 36px;
  border-color: var(--line);
  background-color: var(--surface);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
select:focus,
textarea:focus,
.szSel:focus,
.rangeField input:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

select.ctl {
  min-height: 40px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.fltBtn {
  min-height: 34px;
  border-color: var(--line);
  background: var(--surface);
  box-shadow: none;
}

.fltBtn.on,
.fltWrap.open .fltBtn {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.fltWrap.open .fltBtn { box-shadow: 0 0 0 3px var(--accent-soft); }

.fltPop,
#bddPanel,
#clinicDD,
.actionMenuItems {
  border-color: var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.fltOpt:hover,
.bddRow:hover,
.bddRow.act,
.clRow:hover,
.clRow.cur,
.actionMenuItems .btn:hover {
  color: var(--accent-ink);
  background: var(--accent-soft);
}

.rangeGroup {
  border-color: var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.rangeField input {
  min-height: 36px;
}

/* Catalogue cards, lists, filter summaries and status language. */
.card,
.matchIntro,
.mCard,
.gapCard,
.flDataSummary,
.reqCard {
  border-color: var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.card {
  padding: 24px;
  transition: border-color .16s var(--ease), background-color .16s var(--ease);
}

.card:hover,
.mCard:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: none; }
.card.selOn { border-color: var(--accent); background: var(--accent-soft); }
.card.inForm { opacity: .56; }
.card.dragging { border-color: var(--accent); }

.list,
.dropzone {
  gap: 8px;
  overscroll-behavior: contain;
}

.empty {
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--muted);
}

.empty b { color: var(--ink); }

.tag,
.stTag,
.bestBadge,
.count,
.flDataBadge,
.fltBtn {
  border-radius: 999px;
}

.tag { font-weight: 600; }
.tag.thc,
.tag.type,
.grpHead .n,
.why span { background: var(--bg); }
.tag.terp { background: var(--surface); }
.tag.fx,
.stTag.okk,
.why span.good { background: var(--accent-soft); color: var(--accent-ink); }
.tag.custom,
.tag.stale { border: 0; background: var(--amber-soft); color: var(--warning); }
.stTag.oos,
.why span.bad { background: var(--danger-soft); color: var(--danger); }
.stTag.gone { background: var(--bg); color: var(--muted); }
.iconBtn { border-radius: 8px; background: var(--accent-soft); color: var(--accent-ink); }
.iconBtn:hover { background: var(--accent); color: #fff; }
.iconBtn.rm,
.iconBtn.stock.oos { background: var(--danger-soft); color: var(--danger); }
.iconBtn.rm:hover,
.iconBtn.stock.oos:hover { background: var(--danger); color: #fff; }

.cName,
.cPrice b,
.gapTitle,
.gsName { color: var(--ink); }
.cPrice,
.cSub,
.gapSubT,
.gsMeta { color: var(--muted); }
.cPrice b,
.scorePct,
.wPct,
.gapStats b,
.detTile b,
.dualBound {
  font-variant-numeric: tabular-nums;
}

.grpHead,
.chipLbl,
.rangeTitle,
.detSec h4,
.reqLbl,
.resLbl,
.gapRecLbl,
.cmpTable th {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.thcVal,
.wPct,
.scorePct,
.detTile b,
.resLbl,
.plainWhy { color: var(--accent-ink); }

.scoreBar { height: 7px; background: var(--bg); box-shadow: none; }
.scoreBar i { background: var(--accent); animation: none; }
.mCard.best { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.bestBadge { background: var(--accent); color: #fff; }
.reqCard { border-width: 1px; border-left: 3px solid var(--warning); }
.reqLbl { color: var(--warning); }

.flFilterSummary { color: var(--muted); }
.flFilterChip {
  border-color: var(--line);
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.flFilterChip:hover { border-color: var(--accent); }
.flDataSummary {
  border-left-color: var(--accent);
  background: var(--surface);
}
.flDataBadge[data-state="review"] { border-color: #F3D9A8; background: #FFF7E8; color: #8A5A08; }
.flDataBadge[data-state="reviewed"] { border-color: var(--accent-soft); background: var(--accent-soft); color: var(--accent-ink); }
.flSyncStatus {
  border-color: rgba(255, 255, 255, .24);
  border-radius: 8px;
  background: rgba(255, 255, 255, .09);
  color: rgba(255, 255, 255, .82);
}

/* Tables stay within their containing card and keep figures easy to scan. */
table {
  color: var(--ink);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

th {
  color: var(--muted);
  background: var(--bg);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-align: left;
  text-transform: uppercase;
}

td, th { border-color: var(--line); }

table:not(.cmpTable):not(.gapGrid) {
  border-color: var(--line);
}

.card:has(> table),
.modalBox:has(table),
.gapCard:has(table),
#matchView .inner:has(table) {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.card:has(> table) table,
.modalBox table,
.gapCard table,
#matchView .inner table {
  min-width: 100%;
  width: max-content;
}

.gapGrid th { background: var(--bg); }
.gapGrid th, .gapGrid td { border-color: var(--line); }
.gapGrid td.ok { background: var(--accent-soft); color: var(--accent-ink); }
.gapGrid td.gap { background: var(--danger-soft); color: var(--danger); }

.cmpTable { min-width: 100%; font-size: 12px; }
.cmpTable th {
  background: var(--surface);
  font-family: Inter, system-ui, sans-serif;
  font-size: 10.5px;
  border-bottom: 1px solid var(--line);
}
.cmpTable td { padding: 8px 10px; border-color: var(--line); }
.cmpTable .cmpBest { color: var(--accent-ink); background: var(--accent-soft); }

/* Dialogs, invitations, editor surfaces and the passcode/auth screens. */
#addModal,
#txtModal {
  background: rgba(15, 23, 42, .42);
  padding: 16px;
}

.modalBox,
.gateBox,
#cmpModal .modalBox {
  max-width: min(100%, 680px);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.modalBox {
  padding: 24px;
  max-height: 88vh;
  overscroll-behavior: contain;
  animation: formulink-sheet-in .18s var(--ease);
}

.gateBox button { min-height: 40px; }

.modalBox h3 { font-size: 17px; }
.modalBox p { color: var(--muted); }
.modalFoot { gap: 8px; }
.dropTarget {
  border-color: var(--line);
  border-radius: 10px;
  background: var(--bg);
}
.dropTarget:hover,
.dropTarget.over { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }

.gateBox {
  width: min(92vw, 380px);
  padding: 28px;
  box-shadow: var(--shadow-lg);
  animation: none;
}
.gateBox .dot { background: var(--accent); color: #fff; }
.gateBox h1 { font-family: Inter, system-ui, sans-serif; font-size: 19px; }
.gateBox input { min-height: 40px; border-radius: 8px; }
.gateBox button,
button.primary {
  min-height: 40px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
}
.gateBox button:hover,
button.primary:hover { background: var(--accent-ink); }

.wrap { max-width: 400px; }
.wrap .brand { margin-bottom: 20px; }
.wrap .brand b { color: var(--deep); font-family: Inter, system-ui, sans-serif; }
.wrap .dot { border-radius: 10px; background: var(--deep); }
.wrap .card {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.wrap h1 { color: var(--ink); font-size: 21px; }
.wrap p.sub,
.wrap .foot { color: var(--muted); }
.wrap label { color: var(--muted); }
.wrap input:not([type="checkbox"]) { min-height: 40px; }
.wrap button.primary {
  width: 100%;
  margin-top: 18px;
  min-height: 40px;
  padding: 9px 12px;
  background: var(--accent);
}
.wrap button.primary:hover { background: var(--accent-ink); }
.wrap .links a,
.wrap .link { color: var(--accent-ink); }
.wrap .msg.err { background: var(--danger-soft); color: var(--danger); }
.wrap .msg.ok,
.wrap .invite { background: var(--accent-soft); color: var(--accent-ink); }

#toast {
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 8px;
  background: var(--deep);
  box-shadow: var(--shadow-lg);
}

#cmpBar {
  box-shadow: var(--shadow-lg);
  background: var(--deep);
}
#cmpBar .btn { min-height: 36px; color: var(--deep); }

/* Clear keyboard indication; focused search fields use their accent-soft container ring. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
header :focus-visible { outline-color: #fff; }
.searchBox input:focus-visible,
.brandBox input:focus-visible,
.dualRange input[type="range"]:focus-visible {
  outline: none !important;
}
.searchBox:focus-within,
.brandBox:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

@keyframes formulink-sheet-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
  header {
    height: auto;
    min-height: 60px;
    padding: 10px 14px;
    gap: 8px;
  }
}

@media (max-width: 600px) {
  body { font-size: 14px; height: auto; min-height: 100dvh; overflow-y: auto; overflow-x: hidden; }
  .app { height: auto; min-height: 100dvh; }
  .main { flex: none; grid-template-rows: auto; overflow: visible; }
  .pane { flex: none; min-height: 0; overflow: visible; }
  .list, .dropzone { flex: none; min-height: 240px; max-height: 60dvh; overflow-y: auto; }
  .list > .card, .dropzone .card { flex-shrink: 0; }
  header {
    align-items: center;
    padding: 10px 12px;
  }
  header .tabs { width: 100%; margin-left: 0; }
  header .tabs .tab { min-height: 40px; flex: 1; padding: 8px 10px; }
  /* These counts are repeated in each pane; keep the phone header compact. */
  header .stats { display: none; }
  .paneHead, .filters { padding-left: 12px; padding-right: 12px; }
  .list, .dropzone { padding-left: 12px; padding-right: 12px; }
  .formActions { gap: 6px; }
  .btn { min-height: 40px; }
  .iconBtn { min-width: 36px; min-height: 36px; }
  .modalBox {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    max-height: 92dvh;
    margin: auto 0 0;
    padding: 20px 16px max(20px, env(safe-area-inset-bottom));
    border-radius: 10px 10px 0 0;
  }
  .modalFoot { flex-wrap: wrap; }
  #cmpModal { padding: 0 !important; width: 100vw; max-width: 100vw; overflow-x: hidden; }
  #cmpBody { min-width: 0; width: 100%; max-width: 100%; }
  #addModal,
  #txtModal {
    align-items: flex-end;
    padding: 0;
  }
  #cmpModal { padding: 0; align-items: flex-end; }
  #cmpModal .modalBox {
    width: 100%;
    max-height: 92dvh;
    border-radius: 10px 10px 0 0;
  }
  #cmpBody {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .cmpTable { width: max-content; min-width: 100%; }
  .cmpTable th, .cmpTable td { min-width: 96px; max-width: 220px; padding: 8px; overflow-wrap: anywhere; }
  .cmpTable th:not(:first-child) { min-width: 150px; }
  .gateBox { padding: 26px 22px; }
  .wrap .card { padding: 24px 16px; }
  #cmpBar { bottom: max(12px, env(safe-area-inset-bottom)); max-width: calc(100vw - 24px); flex-wrap: wrap; }
}

@media (max-width: 400px) {
  .stats { gap: 5px; }
  .stat { padding: 5px 7px; min-width: 0; }
  .stat span { font-size: 9px; }
  .formActions { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}