/* =========================
   styles.css — clean pair
   ========================= */

/* Theme */
:root{
  --bg:#0f1115; --e1:#151a22; --e2:#1a2030; --bx:#293654; --tx:#e9edf5; --mut:#aab2c1; --brand:#6aa1ff;
  --radius:10px;

  /* Navbar tokens */
  --app-border: rgba(255,255,255,.10);
  --app-border-2: rgba(255,255,255,.18);
  --app-bg: rgba(20, 22, 26, .72);
  --app-bg-2: rgba(255,255,255,.06);
  --app-bg-3: rgba(255,255,255,.10);
  --app-text: rgba(255,255,255,.90);
  --app-text-muted: rgba(255,255,255,.70);
  --app-shadow: 0 8px 30px rgba(0,0,0,.35);
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--tx);font:400 16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial}
.bg-header{background:#0f1115e6}
.backdrop-blur{backdrop-filter:blur(6px)}
.border-bx{border-color:var(--bx)!important}
header{border-bottom:1px solid var(--bx)}
header .btn{padding:.35rem .6rem;border-radius:9px;}
.btn.active{background:#1a2030;color:#e9edf5;border-color:#44537b}
.title{font-weight:700;font-size:clamp(18px,2.2vw,26px);margin:0}
.btn-sm{margin-left:10px; margin-right: 10px;}
.btn{outline:#5477af}

/* Form controls */
.form-label-sm{font-size:.85rem;color:var(--mut);font-weight:700;margin-bottom:.25rem}
.form-control,.form-select{border:1px solid var(--bx);background:#151a22;color:var(--tx)}
.form-control:focus,.form-select:focus{border-color:#44537b;box-shadow:0 0 0 .25rem #6aa1ff26}

/* Badges */
.text-bg-source{color:#e3ecff;background:#152246;border:1px solid #2b4580}
.text-bg-date{color:#00163a;background:#6aa1ff;border:1px solid #2b4580}
.text-bg-chip{color:#d8e7ff;background:#23304a;border:1px solid #2f3d5b}

/* Cards */
.card{border:1px solid var(--bx);border-radius:var(--radius)}
.bg-card{background:linear-gradient(180deg,var(--e1) 0,var(--e2) 100%)}
.title-xl{font-weight:700;font-size:1.05rem;line-height:1.25;margin:0 0 .4rem;overflow:hidden;line-clamp:2}
.summary{color:#d9deea;margin:.05rem 0 .6rem;white-space:pre-line;overflow:hidden;line-clamp:5}

/* =========================
   Filters — single, deterministic layout
   ========================= */
.filters-row{
  display: grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap: .6rem 1rem;
  align-items: end;
}

/* blocks map to areas */
.fg-search  { grid-column: span 2; min-width: 0; }
.fg-tags    { grid-column: span 2; min-width: 0; }
.fg-start   { grid-column: span 1; min-width: 0; }
.fg-end     { grid-column: span 1; min-width: 0; }
.fg-sort    { grid-column: span 1; min-width: 0; }
.fg-gap     { grid-column: span 3; }
.fg-sources { grid-column: span 7; min-width: 0; }
.fg-tagcats { grid-column: span 2; min-width: 0; }
.fg-tagcats2 { grid-column: span 3; min-width: 0; }

/* Apply/Reset — always bottom-right, after all criteria */
.filter-actions{
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: .25rem;
  white-space: nowrap;
}

/* --- Two-column top-to-bottom scroll for Sources --- */
.source-group {
  border: 1px solid var(--bx);
  background: #151a22;
  border-radius: 8px;
  padding: .55rem;
  max-height: 150px;
  overflow-y: auto;
  overflow-x: hidden;
}
.source-scroll {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: .25rem .75rem;
}

.tag-group {
  border: 1px solid var(--bx);
  background: #151a22;
  border-radius: 8px;
  padding: .55rem;
  max-height: 150px;
  overflow-y: auto;
  overflow-x: hidden;
}
.tag-scroll {
  display: grid;
  grid-template-columns: 1fr;
  gap: .25rem .75rem;
}

.tag-group2 {
  border: 1px solid var(--bx);
  background: #151a22;
  border-radius: 8px;
  padding: .55rem;
  max-height: 120px;
  overflow-y: auto;
  overflow-x: hidden;
}
.tag-scroll2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .25rem .75rem;
}

.source-scroll .source-check {
  margin: 0;
  display: flex;
  align-items: center;
}

/* Hide Sources on trials tab if desired */
body.tab-trials .fg-sources{ display:none !important; }

/* Responsive stack preserves order; actions still last */
@media (max-width: 1100px){
  .filters-row{ grid-template-columns: 1fr; }
  .filters-row > *{ grid-column: 1 / -1; }
}

/* Relevance buttons */
.relevance-actions{display:flex;gap:.35rem;align-items:center;margin-left:auto}
.rel-btn{
  border:1px solid var(--bx);
  background:transparent;
  padding:.25rem;
  border-radius:8px;
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform .1s ease, background .15s ease, border-color .15s ease;
}
.rel-btn:hover{transform:translateY(-1px)}
.rel-btn .icon-check,.rel-btn .icon-x{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.rel-btn.rel-yes{color:#2ecc71;border-color:#2ecc7140}
.rel-btn.rel-yes.active{background:#2ecc7118;border-color:#2ecc71}
.rel-btn.rel-no{color:#ff5a67;border-color:#ff5a6740}
.rel-btn.rel-no:hover{background:#ff5a6718;border-color:#ff5a67}
.rel-btn.rel-no.active{background:#ff5a6718;border-color:#ff5a67}

/* =========================
   Favorites Star (separate class; NOT .rel-btn)
   ========================= */
.fav-btn{
  border:none;
  background:transparent;
  padding:0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.fav-btn .icon-star{
  width:20px;
  height:20px;
  stroke:goldenrod;
  fill:none;
  stroke-width:2;
  transition:fill .2s ease, stroke .2s ease, transform .12s ease;
}
.fav-btn:hover .icon-star{ fill:gold; stroke:gold; transform:scale(1.05); }
.fav-btn.active .icon-star{ fill:gold; stroke:gold; }

/* --- Self-contained card grid (immune to .row overrides) --- */
.card-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 576px){
  .card-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 992px){
  .card-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (min-width: 1400px){
  .card-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
.card-grid .card{ height: 100%; }

.badge-new {
  background-color: #dc3545;
  color: #fff;
}

.fg-actions {
  grid-column: span 1;
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  gap: .1rem;
}

.fg-actions .btn {
  width: auto !important;
  flex: 0 0 auto;
  padding: .2rem .4rem;
  font-size: 1rem;
}

.card.fade-out{opacity:0;transform:scale(.98);transition:opacity .25s ease,transform .25s ease}
.undo-card{border:1px dashed var(--bx)}
.undo-card .card-body{min-height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.undo-placeholder.card{
  border:1px dashed var(--bx);
  background:linear-gradient(180deg,var(--e1) 0,var(--e2) 100%);
}
.undo-placeholder .card-body{
  min-height:180px;
  display:flex; align-items:center; justify-content:center; gap:.6rem;
}
.undo-btn{display:inline-flex; align-items:center; gap:.45rem}
.undo-btn svg{width:18px; height:18px}

.profile{ float:right; }

.bg-sec-filing {
  background-color: #064d2e;
  color: #ffffff;
}

/* =========================
   Navbar — hierarchy (NEWS / CLINICAL / ADMIN)
   Single source of truth (no duplicates)
   ========================= */

.app-navbar{
  background: var(--app-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--app-border);
  box-shadow: var(--app-shadow);
}

.app-brand{
  letter-spacing: .2px;
  font-weight: 650;
  color: var(--app-text);
}
.app-brand i{ font-size: 1.05rem; opacity: .95; }

.app-toggler{
  border: 1px solid var(--app-border);
  border-radius: 12px;
  padding: .35rem .55rem;
}

/* Rail layout */
.navbar .app-nav-rail{
  display:flex;
  align-items:center;
  gap:.55rem;
  flex-wrap:wrap;
  margin-left:.25rem;
}

/* Group container */
.navbar .app-nav-group{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.28rem .32rem;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
}

/* Group label */
.navbar .app-nav-label{
  font-size:.85rem;
  letter-spacing:.12em;
  font-weight:800;
  color: rgba(255,255,255,.45);
  margin-left:.12rem;
}

/* Pills row inside group */
.navbar .app-nav-row{
  display:flex;
  align-items:center;
  gap:.30rem;
  flex-wrap:wrap;
}

/* Pill base — use specificity instead of all:unset */
.navbar a.app-pill{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  text-decoration:none;
  user-select:none;

  padding:.34rem .56rem;
  border-radius:999px;

  font-size:1.05rem;
  line-height:1;

  color: rgba(255,255,255,.76);
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);

  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 80ms ease;
}

.navbar a.app-pill i{
  font-size: 1.05rem;
  opacity:1;
}

.navbar a.app-pill:hover{
  color:#fff;
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.28);
}

.navbar a.app-pill:active{ transform: translateY(1px); }

/* Active */
.navbar a.app-pill.active{
  color:#fff;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
  border-color: rgba(255,255,255,.35);
  font-weight: 550;
}

/* Primary vs secondary sizing (subtle) */
.navbar a.app-pill-primary{
  padding:.36rem .60rem;
  font-size:1.15rem;
}
.navbar a.app-pill-secondary{
  padding:.30rem .50rem;
  font-size:1.05rem;
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
  color: rgba(255,255,255,.68);
}
.navbar a.app-pill-secondary:hover{
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.20);
  color: rgba(255,255,255,.92);
}
.navbar a.app-pill-secondary.active{
  color:#fff;
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.26);
}

/* Badge */
.navbar .app-badge{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:18px;
  height:18px;
  padding:0 6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  font-size:.70rem;
  font-weight:800;
  color:#fff;
  background:#dc3545;
  border:1px solid rgba(0,0,0,.35);
}

/* Right side controls */
.navbar .app-profile,
.navbar .app-login,
.navbar .app-logout{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.36rem .60rem;
  border-radius:999px;
  text-decoration:none;

  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: #fff;

  font-size:1.05rem;
  line-height:1;
  transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;
}

.navbar .app-profile:hover,
.navbar .app-login:hover,
.navbar .app-logout:hover{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.30);
}

.navbar .app-profile.active{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.28);
}

.navbar .app-logout{
  border-color: rgba(220,53,69,.45);
}
.navbar .app-logout:hover{
  background: rgba(220,53,69,.15);
}

/* Avatar */
.navbar .app-avatar{
  width:24px;
  height:24px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.25);
}

/* Mobile spacing */
@media (max-width: 991.98px){
  .navbar .app-nav-rail{ margin-top:.55rem; margin-left:0; }
}

.navbar .app-profile-lg{
  padding: .44rem .78rem;
}

/* Bottom row spacing + wrapping (prevents crowding) */
.card-bottom-row{
  gap: .75rem !important;
}

.card-bottom-actions{
  flex-wrap: wrap;          /* allows the icons/buttons to wrap instead of squishing */
  row-gap: .5rem;
  column-gap: .5rem;
  justify-content: flex-end;
}

/* Optional: if "Read article" exists, keep it from shrinking */
.card-bottom-row > a.btn{
  flex: 0 0 auto;
}

/* Note Area Theme Sync */
.kcp-input-area {
  background: var(--e2);
  border: 1px solid var(--brand);
  border-radius: var(--radius);
  padding: 1rem;
}
.kcp-input-area textarea {
  background: var(--e1) !important;
  color: var(--tx) !important;
  border: 1px solid var(--bx);
}

/* Button Highlighting */
.btn-kcp-action.active.btn-kcp-add {
  background: #198754; /* Success Green */
  color: white;
  border-color: #198754;
}
.btn-kcp-action.active.btn-kcp-exclude {
  background: #dc3545; /* Danger Red */
  color: white;
  border-color: #dc3545;
}
.kcp-author{opacity:.85;font-style:normal;}


/* =========================
   Navbar group collapse toggle
   (keeps your grouped capsule layout; hides pills per-group)
   ========================= */

.navbar .app-nav-group-toggle{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  border:0;
  background:transparent;
  padding:.10rem .25rem;
  cursor:pointer;
  border-radius: 999px;
}

.navbar .app-nav-group-toggle:hover{
  background: rgba(255,255,255,.06);
}

.navbar .app-nav-group-toggle:focus{
  outline: none;
  box-shadow: 0 0 0 .20rem rgba(106, 161, 255, .18);
}

.navbar .app-nav-group .ei-caret{
  font-size:.85rem;
  opacity:.75;
}

/* Collapsed: hide the pills row, keep the group capsule + toggle visible */
.navbar .app-nav-group.ei-collapsed .app-nav-row{
  display:none;
}

/* Optional: tighten padding when collapsed so the group capsule shrinks */
.navbar .app-nav-group.ei-collapsed{
  padding-right: .40rem;
  padding-left: .40rem;
}