/* Shared clinical design system for the complete website and AppDev PWA. */
:root {
  --ui-bg: #f4f7fa;
  --ui-surface: #ffffff;
  --ui-surface-muted: #edf2f6;
  --ui-text: #142033;
  --ui-muted: #5f6f82;
  --ui-border: #d4dde7;
  --ui-border-strong: #b9c5d2;
  --ui-primary: #0b1f3a;
  --ui-primary-hover: #122a4d;
  --ui-accent: #2e7bd6;
  --ui-accent-soft: rgba(46, 123, 214, 0.10);
  --ui-danger: #b42318;
  --ui-radius-sm: 4px;
  --ui-radius-md: 6px;
  --ui-radius-lg: 8px;
  --ui-shadow: 0 2px 8px rgba(11, 31, 58, 0.07);
  --ui-font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.clinical-ui {
  margin: 0;
  color: var(--ui-text);
  background: var(--ui-bg);
  font-family: var(--ui-font);
  font-weight: 400;
  font-style: normal;
  font-variation-settings: normal;
}

.clinical-ui *,
.clinical-ui *::before,
.clinical-ui *::after { box-sizing: border-box; }

.clinical-ui :where(button, input, textarea, select) { font: inherit; }
.clinical-ui :where(button, a, input, textarea, select):focus-visible {
  outline: 3px solid rgba(46, 123, 214, 0.28);
  outline-offset: 2px;
}

/* Shared legacy PHP shell */
.clinical-ui:not(.appdev-shell) {
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
}

.clinical-ui:not(.appdev-shell) .topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding: 10px 18px !important;
  color: #fff;
  background: var(--ui-primary) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.clinical-ui.dashboard-page .topbar { justify-content: flex-end; }

.clinical-ui:not(.appdev-shell) .topbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.clinical-ui:not(.appdev-shell) .pagetitle,
.clinical-ui:not(.appdev-shell) .backlink,
.clinical-ui:not(.appdev-shell) .userbox {
  border: 1px solid rgba(255,255,255,0.20) !important;
  border-radius: var(--ui-radius-md) !important;
  background: rgba(255,255,255,0.08) !important;
  box-shadow: none !important;
  color: #fff !important;
}

.clinical-ui:not(.appdev-shell) .pagetitle {
  padding: 8px 11px !important;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clinical-ui:not(.appdev-shell) .backlink {
  padding: 8px 10px !important;
  font-size: 13px;
  font-weight: 650;
}

.clinical-ui:not(.appdev-shell) .backlink:hover {
  background: rgba(255,255,255,0.14) !important;
  transform: none !important;
}

.clinical-ui:not(.appdev-shell) .userbox {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px 7px 11px !important;
}
.clinical-ui:not(.appdev-shell) .usertext .label { color: rgba(255,255,255,0.66) !important; }
.clinical-ui:not(.appdev-shell) .usertext .name { color: #fff; font-weight: 650; }

.clinical-ui:not(.appdev-shell) :is(.btn, .logout, .nb-btn, #btnLogin) {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 13px !important;
  border: 1px solid var(--ui-primary) !important;
  border-radius: var(--ui-radius-md) !important;
  background: var(--ui-primary) !important;
  color: #fff !important;
  box-shadow: none !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.clinical-ui:not(.appdev-shell) button { border-radius: var(--ui-radius-md) !important; }
.clinical-ui:not(.appdev-shell) :is(.btn, .logout, .nb-btn, #btnLogin):hover {
  background: var(--ui-primary-hover) !important;
  opacity: 1;
  transform: none;
}
.clinical-ui:not(.appdev-shell) .topbar :is(.btn, .logout) {
  border-color: rgba(255,255,255,0.28) !important;
  background: rgba(255,255,255,0.10) !important;
}
.clinical-ui:not(.appdev-shell) .topbar :is(.btn, .logout):hover { background: rgba(255,255,255,0.18) !important; }

.clinical-ui:not(.appdev-shell) :is(.card, .tile, .login-box, .article-card, .guide-card, .guide-item, .nb-tabs, .nb-view, .acc-item, .field, .img-card) {
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  background: var(--ui-surface) !important;
  box-shadow: var(--ui-shadow) !important;
}

.clinical-ui:not(.appdev-shell) .container { margin-top: 20px; }
.clinical-ui:not(.appdev-shell) .center { align-items: center; }
.clinical-ui:not(.appdev-shell) .grid { gap: 12px; }
.clinical-ui:not(.appdev-shell) .tile {
  position: relative;
  padding: 28px 22px !important;
  border-left: 4px solid var(--ui-accent) !important;
  transition: border-color .15s ease, background .15s ease;
}
.clinical-ui:not(.appdev-shell) .tile:hover {
  background: #f9fbfd !important;
  border-left-color: var(--ui-primary) !important;
  transform: none !important;
  box-shadow: var(--ui-shadow) !important;
}
.clinical-ui:not(.appdev-shell) .tile-title { color: var(--ui-primary); font-size: 24px; font-weight: 750; }
.clinical-ui:not(.appdev-shell) .tile-sub { color: var(--ui-muted); }

.clinical-ui:not(.appdev-shell) :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select, .searchbar, .guide-search) {
  border: 1px solid var(--ui-border-strong) !important;
  border-radius: var(--ui-radius-md) !important;
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
  box-shadow: none !important;
}
.clinical-ui:not(.appdev-shell) :is(input, textarea, select):focus {
  border-color: var(--ui-accent) !important;
  box-shadow: 0 0 0 3px var(--ui-accent-soft) !important;
  outline: 0;
}
.clinical-ui:not(.appdev-shell) .searchbar { padding: 7px 9px !important; }

.clinical-ui:not(.appdev-shell) :is(.segmented, .mode-switch) {
  padding: 3px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  background: var(--ui-surface-muted) !important;
  box-shadow: none !important;
}
.clinical-ui:not(.appdev-shell) .seg {
  padding: 8px 11px !important;
  border-radius: var(--ui-radius-sm) !important;
  font-weight: 650;
}
.clinical-ui:not(.appdev-shell) .seg.active {
  border-color: var(--ui-primary) !important;
  background: var(--ui-primary) !important;
  color: #fff !important;
}

.clinical-ui:not(.appdev-shell) :is(.nb-tab, .acc-header, .guide-head, .criteria-option, .flow-box, .callout, .weight-calculator, .med-card, .med-tile, .drug-item) {
  border-radius: var(--ui-radius-md) !important;
  box-shadow: none !important;
}
.clinical-ui:not(.appdev-shell) :is(.dose-calc, .calc-inline, .drug-group, .quicklinks-list, .flowchart, .comparison-grid, .summary, .result) {
  border-radius: var(--ui-radius-md) !important;
  box-shadow: none !important;
}
.clinical-ui:not(.appdev-shell) .nb-tab.active {
  border-color: var(--ui-accent) !important;
  background: var(--ui-accent-soft) !important;
  box-shadow: none !important;
}
.clinical-ui:not(.appdev-shell) .nb-btn.secondary {
  border-color: var(--ui-border-strong) !important;
  background: var(--ui-surface) !important;
  color: var(--ui-primary) !important;
}
.clinical-ui:not(.appdev-shell) .nb-btn.danger {
  border-color: var(--ui-danger) !important;
  background: var(--ui-danger) !important;
}

.clinical-ui:not(.appdev-shell) :is(.group-title, .chip, .tag, .med-tile-badge, .acc-icon, .fav-btn, #searchClear, .nb-imgdel) {
  border-radius: var(--ui-radius-sm) !important;
}
.clinical-ui:not(.appdev-shell) :is(.group-title, .chip, .tag) {
  border-color: rgba(46,123,214,0.24) !important;
  background: var(--ui-accent-soft) !important;
  color: #1d5f9f !important;
}

.clinical-ui:not(.appdev-shell) :is(.article-card, .guide-card, .guide-item, .nb-view, .nb-tabs) { border-radius: var(--ui-radius-lg) !important; }
.clinical-ui:not(.appdev-shell) :is(.article-card img, .nb-images img, .schnitt-img) {
  border-radius: var(--ui-radius-md) !important;
  box-shadow: none !important;
}
.clinical-ui:not(.appdev-shell) :is(table, .med-table) { border-color: var(--ui-border) !important; }

/* Login */
.clinical-ui.login-page .login-box { width: min(360px, calc(100vw - 32px)); padding: 30px; }
.clinical-ui.login-page .login-box h1 { color: var(--ui-primary); letter-spacing: .06em; }
.clinical-ui.login-page label { color: var(--ui-text); font-weight: 650; }

/* AppDev: same palette and flatter geometry while preserving its mobile layout. */
.clinical-ui.appdev-shell {
  --navy-900: var(--ui-primary);
  --navy-800: var(--ui-primary-hover);
  --accent: var(--ui-accent);
  --accent-soft: var(--ui-accent-soft);
  --radius-lg: var(--ui-radius-lg);
  --radius-md: var(--ui-radius-md);
  --radius-sm: var(--ui-radius-sm);
  --shadow-card: var(--ui-shadow);
  background: var(--bg);
  color: var(--text);
}
.clinical-ui.appdev-shell :is(.icon-btn, .back-btn, .mode-toggle, .mini-toggle, .search-bar) { border-radius: var(--ui-radius-md) !important; }
.clinical-ui.appdev-shell :is(.mode-toggle button, .mini-toggle button) { border-radius: var(--ui-radius-sm) !important; }
.clinical-ui.appdev-shell :is(.module-card, .list-card, .detail-hero) { border-radius: var(--ui-radius-lg) !important; }
.clinical-ui.appdev-shell :is(.measurement-card, .level-card, .score-total-bar, .score-result-banner, .criteria-block, .measurement-hints) { border-radius: var(--ui-radius-md) !important; }
.clinical-ui.appdev-shell :is(.icon-wrap, .tag, .chip, .grade-chip, .level-badge, .criteria-option-btn, .score-reset-btn) { border-radius: var(--ui-radius-sm) !important; }
.clinical-ui.appdev-shell .fav-star.active { color: var(--ui-accent); }

@media (max-width: 720px) {
  .clinical-ui:not(.appdev-shell) .topbar { align-items: stretch; flex-direction: column; padding: 9px 12px !important; }
  .clinical-ui:not(.appdev-shell) .topbar-left { width: 100%; }
  .clinical-ui:not(.appdev-shell) .pagetitle { flex: 1; }
  .clinical-ui:not(.appdev-shell) .userbox { width: 100%; justify-content: space-between; }
  .clinical-ui:not(.appdev-shell) .usertext { min-width: 0; }
  .clinical-ui:not(.appdev-shell) .center { align-items: flex-start; min-height: 0; }
  .clinical-ui:not(.appdev-shell) .tile { padding: 22px 18px !important; }
  .clinical-ui:not(.appdev-shell) .tile-title { font-size: 21px; }
  .clinical-ui:not(.appdev-shell) :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select) { font-size: 16px !important; }
}