/* ============================================================================
 * Otalytix — App-wide polish layer (installment 1: tokens + sidebar + globals)
 * Loaded AFTER app.css so these refinements win.
 * Goals from feedback: light scheme, NEAR-BLACK type for legibility,
 * subtle elevation (no heavy glows), cleaner interactive states.
 * ==========================================================================*/

:root{
  --otx-ink:        #0B1220;   /* near-black primary text */
  --otx-ink-2:      #1E293B;   /* secondary-strong */
  --otx-muted:      #5A6B82;   /* captions only */
  --otx-accent:     #2563EB;   /* interactive accent (matches the new mockups) */
  --otx-accent-deep:#1E3A5F;   /* brand navy */
  --otx-accent-08:  rgba(37,99,235,0.08);
  --otx-accent-14:  rgba(37,99,235,0.14);
  --otx-rail-line:  #E3E9F2;
  --otx-ease:       cubic-bezier(.16,1,.3,1);
}

/* ── Sidebar shell ───────────────────────────────────────────────────────── */
.sidebar{
  background:linear-gradient(180deg,#FBFCFE 0%,#F2F6FB 100%);
  border-right:1px solid var(--otx-rail-line);
}
.sidebar::before{ background:linear-gradient(90deg,transparent,rgba(37,99,235,.28),transparent); }
.sidebar-header{ border-bottom:1px solid var(--otx-rail-line); }
.sidebar-header h1{ letter-spacing:-.3px; }
.nav{ padding:12px 10px; }

/* ── Nav items: black type, crisp active state, no glow ──────────────────── */
.nav-item{
  color:var(--otx-ink);
  border:1px solid transparent;
  border-radius:11px;
  box-shadow:none;
  transition:background .18s var(--otx-ease), color .18s var(--otx-ease),
             border-color .18s var(--otx-ease);
}
.nav-item .nav-label, .nav-label{ color:var(--otx-ink); font-weight:650; letter-spacing:.1px; }
.nav-item svg{ color:#55637A; transition:color .18s var(--otx-ease), transform .18s var(--otx-ease); flex-shrink:0; }

.nav-item:hover{ background:var(--otx-accent-08); color:var(--otx-ink); border-color:transparent; }
.nav-item:hover svg{ color:var(--otx-accent); }
.nav-item:hover .nav-label{ color:var(--otx-ink); }

.nav-item::before{ background:var(--otx-accent); box-shadow:none; }
.nav-item:hover::before{ height:52%; }

.nav-item.active{
  background:var(--otx-accent-14);
  color:var(--otx-ink);
  border-color:transparent;
  box-shadow:none;
}
.nav-item.active .nav-label{ color:var(--otx-ink); font-weight:750; }
.nav-item.active::before{ height:60%; background:var(--otx-accent); box-shadow:none; }
.nav-item.active svg, .nav-item.active .nav-icon{ color:var(--otx-accent); filter:none; }

/* ── Badges: clean accent pill (no glow) ─────────────────────────────────── */
.nav-badge{
  background:var(--otx-accent); color:#fff; font-weight:700;
  padding:2px 8px; border-radius:999px; box-shadow:none; letter-spacing:.2px;
}
.nav-item.active .nav-badge{ background:var(--otx-accent-deep); }

/* ── Section header / labels ─────────────────────────────────────────────── */
.nav-section-header{ color:var(--otx-muted); }
.nav-section-header:hover{ color:var(--otx-accent); background:var(--otx-accent-08); }
.nav-section-label{ color:var(--otx-muted); font-weight:800; letter-spacing:1px; }

/* ── Undo / feedback footer buttons: align to accent, softer ─────────────── */
.sidebar-undo-btn{ color:var(--otx-ink-2); font-weight:600; }

/* ── Sidebar scrollbar: slim, subtle (matches the screenshot's scroll area) ─ */
.nav::-webkit-scrollbar{ width:8px; }
.nav::-webkit-scrollbar-thumb{ background:#CBD6E6; border-radius:999px; }
.nav::-webkit-scrollbar-thumb:hover{ background:#AEBDD2; }
.nav::-webkit-scrollbar-track{ background:transparent; }

/* ── App-wide: accessible focus ring in the accent (premium, safe) ───────── */
.nav-item:focus-visible, button:focus-visible, a:focus-visible{
  outline:2px solid var(--otx-accent); outline-offset:2px; border-radius:8px;
}

/* ════════════════════════════════════════════════════════════════════════
 * Installment 2 — content surfaces: header bar, cards, buttons, badges, type
 * Black type lives on the light content area; the navy header keeps white text.
 * ════════════════════════════════════════════════════════════════════════ */

/* Page header banner — keep navy bar + white text (high-contrast); soften shadow. */
.app-header-banner{ box-shadow:0 1px 2px rgba(15,23,42,.10), 0 1px 0 rgba(255,255,255,.04); }

/* Near-black content headings. The banner uses <h1>, so target h2–h4 to avoid it. */
.main h2, .main h3, .main h4{ color:var(--otx-ink); letter-spacing:-.1px; }
.main table th, .main thead th{ color:var(--otx-ink); }

/* Cards & panels — hairline border, gentle elevation, black headings + darker body. */
.card{ border-color:var(--otx-rail-line); color:var(--otx-ink-2);
  box-shadow:0 1px 2px rgba(16,24,40,.05), 0 8px 22px rgba(16,24,40,.05); }
.card h1, .card h2, .card h3, .card h4{ color:var(--otx-ink); }
.dash-section-card{ border:1px solid var(--otx-rail-line); }

/* Buttons — cleaner accent, softer shadow, gentle lift (no heavy glow). */
.btn{ letter-spacing:.2px; }
.btn-primary{ box-shadow:0 1px 2px rgba(16,24,40,.16), 0 4px 12px rgba(30,58,95,.20); }
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(30,58,95,.26); }
.btn-secondary{ background:var(--otx-accent-08); color:var(--otx-accent-deep); border:1px solid var(--otx-accent-14); }
.btn-secondary:hover{ background:var(--otx-accent-14); }
.btn-ghost{ color:var(--otx-ink); }

/* Badges / pills — unified, legible. */
.badge{ border-radius:999px; }
.badge-purple{ background:var(--otx-accent-08); color:var(--otx-accent); border:1px solid var(--otx-accent-14); }

/* Inputs / selects — clean accent focus ring. */
.main input:focus, .main select:focus, .main textarea:focus{
  border-color:var(--otx-accent); box-shadow:0 0 0 3px var(--otx-accent-08); outline:none;
}

/* ════════════════════════════════════════════════════════════════════════
 * Installment 3 — tabs, modals, dashboard cards, RCT Explorer
 * ════════════════════════════════════════════════════════════════════════ */

/* Tabs / segmented controls — near-black inactive, clean accent active. */
.tab-btn{ color:var(--otx-ink); }
.tab-btn:hover{ color:var(--otx-accent); background:var(--otx-accent-08); }
.tab-btn.active{ background:#fff; color:var(--otx-accent); border-color:var(--otx-accent);
  box-shadow:0 1px 2px rgba(16,24,40,.06); }
.tab-btn.active svg{ color:var(--otx-accent); }

/* Modals — lighter overlay (was 95% near-black), softer shadow, hairline. */
.modal-overlay{ background:rgba(15,23,42,0.55); }
.modal, .modal-content{ border:1px solid var(--otx-rail-line);
  box-shadow:0 1px 3px rgba(16,24,40,.10), 0 24px 48px rgba(16,24,40,.18); }
.modal-content .modal-header, .modal-content .modal-footer{ border-color:var(--otx-rail-line); }
.modal-content .modal-header h3{ color:var(--otx-ink); }

/* Dashboard cards — hairline border + subtle elevation. */
.dashboard-card{ border:1px solid var(--otx-rail-line);
  box-shadow:0 1px 2px rgba(16,24,40,.04), 0 6px 16px rgba(16,24,40,.04); }
.dashboard-card .card-header{ color:var(--otx-ink); border-bottom-color:var(--otx-rail-line); }
.dashboard-card .card-header svg{ color:var(--otx-accent); }

/* RCT Explorer — unify selection to the brand accent (was a violet/red mix),
   darken light sub-text for legibility. */
.rct-drug-card{ border-color:var(--otx-rail-line); }
.rct-drug-card.selected{ background:var(--otx-accent-08); border-color:#BFD3F6;
  border-left-color:var(--otx-accent); box-shadow:0 4px 16px rgba(37,99,235,.12); }
.rct-drug-generic{ color:#475569; }
.rct-drug-mechanism{ color:#5A6B82; }
.rct-indication-header{ color:var(--otx-ink); border-color:var(--otx-rail-line); }
.rct-trial-item:hover{ background:var(--otx-accent-08); border-color:transparent; }
.rct-trial-item.selected{ background:var(--otx-accent-14); border-color:var(--otx-accent); }
.rct-trial-name{ color:var(--otx-ink); }

/* ════════════════════════════════════════════════════════════════════════
 * Installment 4 — RCT Explorer trial-detail panel
 * ════════════════════════════════════════════════════════════════════════ */
.rct-detail-header{ border-bottom-color:var(--otx-rail-line); }
.rct-detail-title{ color:var(--otx-ink); letter-spacing:-.2px; }
.rct-detail-section h2, .rct-detail-section h3, .rct-detail-section h4{ color:var(--otx-ink); }
.rct-endpoint-item{ border-bottom-color:#EEF2F7; }
.rct-endpoint-label{ color:var(--otx-ink-2); font-weight:600; }
.rct-endpoint-value{ color:var(--otx-ink); font-weight:700; }
/* was a violet→red gradient with violet border — unify to the accent */
.rct-result-highlight{ background:linear-gradient(135deg, rgba(37,99,235,.07), rgba(37,99,235,.02));
  border:1px solid #BFD3F6; }
.rct-result-highlight p{ color:var(--otx-ink-2); }

/* ════════════════════════════════════════════════════════════════════════
 * Installment 5 — broad shared components (tables, tags, empty states, search)
 * Lifts many screens at once (Competitive Intel, Drug Labels, Conference, etc.)
 * ════════════════════════════════════════════════════════════════════════ */

/* Tables — near-black headers, light header band, hairline rows, accent row-hover. */
.table-container{ border-color:var(--otx-rail-line); box-shadow:0 1px 2px rgba(16,24,40,.04); }
table th{ color:var(--otx-ink); font-weight:700; background:#F7F9FC; border-bottom:1px solid var(--otx-rail-line); }
table td{ color:var(--otx-ink-2); border-bottom:1px solid #EEF2F7; }
table tbody tr{ transition:background .15s var(--otx-ease); }
table tbody tr:hover{ background:var(--otx-accent-08); }

/* Tags / chips — crisp, legible, unified color family. */
.tag{ border-radius:999px; letter-spacing:.1px; }
.tag-purple{ background:var(--otx-accent-08); color:var(--otx-accent-deep); border:1px solid var(--otx-accent-14); }
.tag-blue{ background:rgba(37,99,235,.10); color:var(--otx-accent); border:1px solid rgba(37,99,235,.18); }
.tag-lime{ background:rgba(5,150,105,.10); color:#047857; border:1px solid rgba(5,150,105,.20); }

/* Empty states — near-black heading, softer icon. */
.empty{ color:var(--otx-ink-2); }
.empty h3{ color:var(--otx-ink); }
.empty-icon{ color:#B6C2D4; }

/* Search result rows — rounded + accent hover. */
.search-result-item{ border-radius:10px; transition:background .15s var(--otx-ease); }
.search-result-item:hover{ background:var(--otx-accent-08); }

/* ════════════════════════════════════════════════════════════════════════
 * Installment 6 — Drug Labels: international region cards (class-based parts)
 * ════════════════════════════════════════════════════════════════════════ */
.dl-region-card{ border-color:var(--otx-rail-line); }
.dl-region-card:hover{ border-color:var(--otx-accent); box-shadow:0 4px 14px rgba(37,99,235,.10); }
.dl-region-name{ color:var(--otx-ink); }
.dl-region-detail{ color:var(--otx-ink-2); }
.dl-region-link{ color:var(--otx-accent); font-weight:600; }
.dl-approval-badge{ border-radius:999px; }
.dl-intl-summary{ gap:12px; }

/* ════════════════════════════════════════════════════════════════════════
 * Installment 7 — Dashboard launcher tiles: glowing, bokeh-lit "orb" style
 * (keeps each tile's gradient; overlays a luminous core + drifting specks)
 * ════════════════════════════════════════════════════════════════════════ */
.dash-section-card{ box-shadow:0 6px 18px rgba(16,24,40,.16); }
.dash-section-card:hover{ box-shadow:0 16px 34px rgba(16,24,40,.26); }

/* soft luminous glow + top sheen (no particle dots) */
.dash-section-card::before{
  inset:0;
  background:
    radial-gradient(75% 60% at 30% 14%, rgba(255,255,255,.24), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(255,255,255,.14) 0%, transparent 45%);
}

/* abbr badge = a darker, distinct shade of the tile so the white text stays legible */
.dash-section-card > span:first-child{
  background:rgba(11,17,30,0.36) !important;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.18), 0 1px 3px rgba(0,0,0,.20) !important;
  color:#FFFFFF !important;
  border:1px solid rgba(255,255,255,.14) !important;
}