:root{
  --bg:#f8f9fb;
  --card:#fff;
  --border:#e6e8ef;
  --text:#1b2430;
  --muted:#4a5568;
  --primary:#1e88e5;
}
*{box-sizing:border-box}
body{margin:0;font-family: -apple-system,BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background:var(--bg); color:var(--text)}
.topbar{background:#065aa0;color:#fff}
.fixed-top{position:sticky;top:0;z-index:10}
.shadow-sm{box-shadow:0 1px 6px rgba(0,0,0,.12)}
.nav{max-width:1300px;margin:0 auto;display:flex;gap:18px;align-items:center;padding:10px 16px}
.nav .brand{font-weight:800;color:#fff;text-decoration:none;margin-right:10px}
.nav .brand.title{margin-left:2px;margin-right:8px}
.nav .item{color:#cfe6fa;text-decoration:none;padding:6px 10px;border-radius:6px}
.nav .item:hover{background:rgba(255,255,255,.12);color:#fff}
.nav .item.active{background:#0b6ec5;color:#fff}
.layout{display:grid;grid-template-columns:280px 1fr;gap:32px;max-width:1300px;margin:16px auto;padding:0 16px}
.page-spacer{height:8px}
.sidebar{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  height:fit-content;
  box-shadow:0 4px 12px rgba(0,0,0,0.05);
  position:sticky;
  top:24px;
}
.sidebar .field{display:flex;flex-direction:column;margin-bottom:10px}
.sidebar .field:last-child{margin-bottom:0}
.sidebar .field.two .range{display:grid;grid-template-columns:1fr auto 1fr;gap:6px;align-items:center}
.sidebar .field.two .range > *{min-width:0}
.sidebar label{
  font-weight:600;
  margin-bottom:3px;
  font-size:12px;
  color:#374151;
  display:flex;
  align-items:center;
  gap:4px;
}
.sidebar .checkbox{
  font-weight:400;
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:4px;
  padding:4px 8px;
  border-radius:6px;
  transition:background-color 0.2s ease;
  font-size:12px;
}
.sidebar .checkbox:hover{
  background:#f8f9fb;
}
.sidebar select,
.sidebar input[type="text"],
.sidebar input[type="number"],
.sidebar input[type="search"]{
  padding:7px 10px;
  border:1px solid var(--border);
  border-radius:7px;
  background:#fff;
  width:100%;
  font-size:12px;
  transition:all 0.2s ease;
  box-shadow:0 1px 2px rgba(0,0,0,0.02);
}
.sidebar .field.two input{
  padding:6px 8px;
  border:1px solid var(--border);
  border-radius:6px;
  background:#fff;
  width:100%;
  font-size:11px;
  transition:all 0.2s ease;
  box-shadow:0 1px 2px rgba(0,0,0,0.02);
}
.sidebar select:focus,
.sidebar input:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(30,136,229,0.1);
}
.sidebar input[type="checkbox"]{
  width:16px;
  height:16px;
  border:2px solid var(--border);
  border-radius:3px;
  background:#fff;
  cursor:pointer;
  transition:all 0.2s ease;
  position:relative;
}
.sidebar input[type="checkbox"]:checked{
  background:#3730a3;
  border-color:#3730a3;
}
.sidebar input[type="checkbox"]:checked::after{
  content:"✓";
  color:white;
  font-size:10px;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
}
.sidebar .row{display:flex;gap:4px;align-items:center;flex-wrap:nowrap}
/* Keep selects full-width by default, but inside the inline row (Order by)
   let the select flex while leaving room for a small icon button */
.sidebar .row select{flex:1 1 auto;width:auto;min-width:0;margin-left:12px}
.sidebar #orderDir{
  border:1px solid var(--border);
  background:#fff;
  border-radius:7px;
  cursor:pointer;
  width:28px;
  height:28px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  transition:all 0.2s ease;
  box-shadow:0 1px 2px rgba(0,0,0,0.02);
  font-size:12px;
  flex-shrink:0;
}
.sidebar #orderDir:hover{
  border-color:var(--primary);
  background:#f8f9fb;
}
.sidebar .field.two .range span{
  display:flex;
  align-items:center;
  justify-content:center;
  width:16px;
  color:var(--muted);
  font-weight:600;
  background:#f1f3f9;
  border-radius:4px;
  height:20px;
  font-size:11px;
}

/* Add subtle hover and focus animations */
.sidebar select:hover,
.sidebar input:hover{
  border-color:#c7d2fe;
}
.sidebar .checkbox input[type="checkbox"]:hover{
  border-color:var(--primary);
  transform:scale(1.05);
}

/* Improve placeholder styling */
.sidebar input::placeholder{
  color:#9ca3af;
  font-size:13px;
}

/* Add loading state for selects */
.sidebar select[disabled]{
  background:#f8f9fb;
  color:#9ca3af;
  cursor:not-allowed;
}

/* Better styling for option groups if needed */
.sidebar optgroup{
  font-weight:600;
  color:var(--text);
  background:#f8f9fb;
}
.container{max-width:1100px;margin:0 auto;padding:0}
.toolbar{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.toolbar .search{flex:1;padding:12px 14px;border-radius:12px;border:1px solid var(--border);font-size:16px}
.toolbar .select-all{display:flex;align-items:center;gap:8px;color:var(--text);font-weight:600;font-size: 20px;}
.toolbar .select-all input[type="checkbox"]{
  width:18px;
  height:18px;
  cursor:pointer;
}
.tile-header .row-check{
  width:18px;
  height:18px;
  cursor:pointer;
}
.toolbar .spacer{flex:0.2}
.toolbar .count{font-weight:600;font-size:22px}
.toolbar .primary{background:#3730a3;color:#fff;border:none;padding:12px 16px;border-radius:10px;font-weight:600;opacity:.8}
/* Make the download button visibly stronger (darker) when enabled and subdued when disabled */
.toolbar .primary:disabled{
  background: #3730a3;
  opacity: .6;
  cursor: not-allowed;
}

/* Sidebar clear filters button */
.sidebar #filtersClear{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  color:#475569; /* slate-ish */
  font-weight:600;
  font-size:13px;
  cursor:pointer;
  transition:all 0.2s ease;
  box-shadow:0 1px 2px rgba(0,0,0,0.02);
}
.sidebar #filtersClear:hover{
  border-color:var(--primary);
  background:#f8f9fb;
  color:#334155;
}
.sidebar #filtersClear:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(30,136,229,0.1);
}
.sidebar #filtersClear:active{
  transform:translateY(0.5px);
}
.toolbar .primary:not(:disabled){
  background: #3730a3;
  opacity: 1;
}
.toolbar .primary:not(:disabled):hover{
  background: #312e81;
}

.tile{background:var(--card);border:1px solid var(--border);border-radius:14px;margin:18px 0;box-shadow:0 2px 6px rgba(0,0,0,.04)}
.tile{content-visibility:auto;contain-intrinsic-size: 300px 600px}
.tile[hidden]{display:none}
.sentinel{height:1px}
.tile-header{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border)}
.tile-header h2{margin:0;font-size:26px}
.tile-header .preview{margin-left:auto;width:36px;height:36px;border-radius:10px;border:1px solid var(--border);background:linear-gradient(180deg,#fff,#f4f6fb);position:relative;display:inline-block}
.tile-header .preview::before{content:"";position:absolute;inset:0;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>') center/20px no-repeat}
.tile-header .download{width:36px;height:36px;border-radius:10px;border:1px solid var(--border);background:linear-gradient(180deg,#fff,#f4f6fb);position:relative}
.tile-header .download::before{content:"";position:absolute;inset:0;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>') center/20px no-repeat}
.tile-header .visualization{width:36px;height:36px;border-radius:10px;border:1px solid var(--border);background:linear-gradient(180deg,#fff,#f4f6fb);position:relative;display:inline-block;cursor:pointer;z-index:3;pointer-events:auto}
.tile-header .visualization::before{content:"";position:absolute;inset:0;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"/><path d="M18.7 8l-5.1 5.2-2.8-2.7L7 14.3"/></svg>') center/20px no-repeat}
.tile-header .doc{margin-left:auto;width:36px;height:36px;border-radius:10px;border:1px solid var(--border);background:linear-gradient(180deg,#fff,#f4f6fb);position:relative;display:inline-block;cursor:pointer;z-index:3;pointer-events:auto}
.tile-header .doc::before{content:"";position:absolute;inset:0;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>') center/20px no-repeat}

/* (removed popover styles; direct navigation on click) */

/* Preview button matching download style but with an eye icon */

/* Quality score badge */
.tile-header .badges{display:flex;align-items:center;gap:8px;margin-left:8px;margin-right:auto;flex-wrap:wrap}
.tile-header .qs{font-size:12px;font-weight:700;color:#0b6ec5;background:#e8f2fb;border:1px solid #cfe6fa;border-radius:999px;padding:6px 8px}
.tile-header .tag{font-size:12px;font-weight:700;border-radius:999px;padding:6px 8px;border:1px solid transparent}
.tile-header .tag.exp{color:#8a2be2;background:#f2e9ff;border-color:#e4d4ff}
.tile-header .tag.funded{color:#1a7f37;background:#e9f7ef;border-color:#cfe9da}

.grid{display:grid;grid-template-columns:2fr 0.7fr 0.7fr 1fr 1fr 1fr;gap:16px;padding:12px 16px}
.grid.head{font-weight:700;border-bottom:1px solid var(--border)}
.grid .muted{color:var(--muted)}

@media (max-width:900px){
  .layout{
    grid-template-columns:1fr;
    gap:16px;
    margin:8px auto;
    padding:0 12px;
  }
  .sidebar{
    position:sticky;
    top:8px;
    z-index:1;
    padding:12px;
    border-radius:12px;
  }
  .sidebar .field{
    margin-bottom:8px;
  }
  .grid{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
  .grid.head{display:none}
  .grid>div{padding:6px 0;border-bottom:1px dashed var(--border)}
  .grid>div:nth-child(odd){font-weight:600}
}

/* Footer note/explanation */
.note{margin:20px 0 40px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px 16px;color:var(--muted)}
.note h3{margin:0 0 6px;color:var(--text)}

/* Tiny collapsible note under filters */
.micro-note{
  margin-top:6px;
  background:#f8f9fb;
  border:1px solid #e2e8f0;
  border-radius:5px;
  padding:4px 8px;
}
.micro-note summary{
  cursor:pointer;
  color:#065aa0;
  font-size:10px;
  font-weight:600;
  list-style:none;
  display:flex;
  align-items:center;
  gap:3px;
}
.micro-note summary::before{
  content:"ℹ️";
  font-size:11px;
}
.micro-note summary::-webkit-details-marker{
  display:none;
}
.micro-note div{
  font-size:10px;
  color:var(--muted);
  margin-top:4px;
  line-height:1.2;
}
.micro-note .formula{
  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; 
  color:#2b3a55;
  background:#fff;
  padding:2px 4px;
  border-radius:2px;
  border:1px solid #e2e8f0;
  display:inline-block;
  margin-top:2px;
  font-size:9px;
}

/* Minimal utility classes for content pages */
.container{max-width:1100px;margin:0 auto;padding:0 16px}
.container-fluid{max-width:1300px;margin:0 auto;padding:0 16px}
.row{display:flex;flex-wrap:wrap;margin:0 -12px}
.col-12{padding:0 12px;flex:0 0 100%}
@media (min-width:992px){.col-lg-8{flex:0 0 66.666%;max-width:66.666%}}
.mt-4{margin-top:1rem}
.mt-5{margin-top:2rem}
.mb-3{margin-bottom:.75rem}
.ms-auto{margin-left:auto}
.me-auto{margin-right:auto}
.me-lg-3{margin-right:1rem}
.text-center{text-align:center}
.text-justify{text-align:justify}
.font-italic{font-style:italic}
.h4{font-size:1.25rem;margin:0 0 .5rem}
.padding{padding:.25rem 0}
.bg-primary{background:#065aa0}
.navbar{position:sticky;top:0;z-index:3}
.navbar .navbar-brand{color:#fff;text-decoration:none}
.navbar .nav-link{color:#cfe6fa;text-decoration:none;border-radius:6px;padding:6px 10px;display:inline-block}
.navbar .nav-link:hover{background:rgba(255,255,255,.12);color:#fff}
.navbar .nav-link.active{background:#0b6ec5;color:#fff}
.img-nav{height:40px;border-radius:4px}
.toastContainer{position:fixed;bottom:12px;right:12px}

/* Lightweight hover popover (chmurka) near the File icon */
.mini-pop{position:fixed;top:0;left:0;max-width:420px;min-width:280px;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:9999;padding:10px 12px;display:none}
.mini-pop.show{display:block}
.mini-pop .mini-head{font-weight:700;margin:0 0 6px}
.mini-pop .mini-sub{color:var(--muted);font-size:12px;margin:0 0 10px}
.mini-pop .mini-grid{display:grid;grid-template-columns:auto auto;gap:6px 12px;font-size:13px}
.mini-pop .mini-grid .k{color:var(--muted)}
.mini-pop .mini-actions{margin-top:10px;text-align:right}
.mini-pop .mini-actions a{color:#065aa0;text-decoration:none}

/* Lightweight hover popover (chmurka) shown near the File icon */
.mini-pop{position:fixed;top:0;left:0;max-width:420px;min-width:280px;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:9999;padding:10px 12px;display:none}
.mini-pop.show{display:block}
.mini-pop .mini-head{font-weight:700;margin:0 0 6px}
.mini-pop .mini-sub{color:var(--muted);font-size:12px;margin:0 0 10px}
.mini-pop .mini-grid{display:grid;grid-template-columns:auto auto;gap:6px 12px;font-size:13px}
.mini-pop .mini-grid .k{color:var(--muted)}
.mini-pop .mini-actions{margin-top:10px;text-align:right}
.mini-pop .mini-actions a{color:#065aa0;text-decoration:none}

/* Preview page: keep Back-to-search button from changing color on hover */
/* Back to search: neutral link, not blue at all */
.preview .toolbar .back-link{
  display:inline-block;
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  color:var(--text);
  text-decoration:none;
}
.preview .toolbar .back-link:hover,
.preview .toolbar .back-link:focus,
.preview .toolbar .back-link:active{
  background:#fff;
  color:var(--text);
  border-color:var(--border);
  box-shadow:none;
  text-decoration:none;
}