/* Open data dataset browser.
   Reuses tokens from home.css (#0e0e1a bg, #1a1a2e card, #2a2a3a border,
   #2563eb accent, #888 dim). Three surfaces:
     - homeDatasets    inline carousel on the Home tab (up to 6 featured)
     - #datasetsView   the full browse page (filters + grid)
     - #datasetDetailView   one dataset's metadata + series list
*/

/* ───── Inline home section ───── */
#homeDatasets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.dsCard {
  display: flex;
  flex-direction: column;
  padding: 12px;
  background: #1a1a2e;
  border: 1px solid #2a2a3a;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.12s, transform 0.12s;
  position: relative;
  min-height: 200px;
}
.dsCard:hover { border-color: #4a4a6a; transform: translateY(-1px); }

.dsCardCover {
  width: 100%;
  /* aspect-ratio gives a clean 16:9 on modern browsers; the explicit
     min-height keeps the cover visible on older Safari that ignores it. */
  aspect-ratio: 16/9;
  min-height: 120px;
  border-radius: 6px;
  background: linear-gradient(135deg, #1f2540, #0f1424);
  object-fit: cover;    /* <img> covers the box; CSS background fallback ignored */
  display: block;
  margin-bottom: 10px;
  flex-shrink: 0;
}
.dsCardCover.empty {
  background:
    radial-gradient(circle at 20% 30%, #2a3060 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, #1f4060 0%, transparent 50%),
    #0f1424;
}

.dsCardName {
  font-size: 14px;
  font-weight: 600;
  color: #eee;
  margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dsCardShort {
  font-size: 12px;
  color: #aaa;
  line-height: 1.4;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dsCardMeta {
  display: flex; gap: 8px; flex-wrap: wrap;
  font-size: 10px;
  color: #888;
  margin-top: auto;
}
.dsCardMeta .dsChip {
  background: #0e0e1a;
  border: 1px solid #2a2a3a;
  padding: 2px 7px;
  border-radius: 10px;
}

/* License badge — readable color from a glance. Green = commercial OK,
   amber = research-only / share-alike caveats, grey = unknown. */
.dsLicense {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  letter-spacing: 0.02em;
}
.dsLicense.commercial { background: #14502b; color: #74e09a; border: 1px solid #267444; }
.dsLicense.noncommercial { background: #4d3914; color: #ffcc70; border: 1px solid #7a5e22; }
.dsLicense.unknown { background: #2a2a3a; color: #aaa; border: 1px solid #3a3a4a; }

/* ───── Full browse page ───── */
#datasetsView, #datasetDetailView {
  flex: 1;
  overflow: auto;
  padding: 32px 24px 80px;
  background: #0e0e1a;
}
#datasetsContent, #datasetDetailContent {
  max-width: 1100px;
  margin: 0 auto;
}
.dsHeader {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px;
  gap: 12px; flex-wrap: wrap;
}
.dsBackBtn {
  background: transparent; border: 1px solid #2a2a3a; color: #aaa;
  padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 12px;
}
.dsBackBtn:hover { background: #1a1a2e; color: #eee; border-color: #4a4a6a; }

.dsPageTitle {
  font-size: 22px; font-weight: 600; color: #eee; margin: 0;
}
.dsPageLead {
  font-size: 13px; color: #aaa; margin: 4px 0 0; line-height: 1.5;
}

/* Filter chips */
.dsFilters {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px;
  align-items: center;
}
.dsFilterChip {
  background: #1a1a2e; border: 1px solid #2a2a3a; color: #ccc;
  padding: 5px 11px; font-size: 12px; border-radius: 14px;
  cursor: pointer; user-select: none;
}
.dsFilterChip:hover { border-color: #4a4a6a; color: #eee; }
.dsFilterChip.active {
  background: #2563eb; border-color: #2563eb; color: #fff;
}
.dsFilterChipCount {
  opacity: 0.6; font-weight: 400; margin-left: 2px;
}
.dsFilterLabel { font-size: 11px; color: #777; margin-right: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.dsSearch {
  background: #0e0e1a; border: 1px solid #2a2a3a; color: #eee;
  padding: 6px 12px; border-radius: 6px; font-size: 13px;
  width: 220px;
}
.dsSearch:focus { outline: none; border-color: #4a4a6a; }

.dsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.dsEmpty {
  padding: 40px; text-align: center; color: #888; font-size: 13px;
  border: 1px dashed #2a2a3a; border-radius: 10px;
}

/* ───── Dataset detail ───── */
.dsMetaPanel {
  background: #14142a;
  border: 1px solid #2a2a3a;
  border-radius: 10px;
  padding: 18px 22px;
  margin-bottom: 20px;
}
.dsMetaRow {
  display: flex; gap: 16px; flex-wrap: wrap;
  margin: 6px 0;
}
.dsMetaItem {
  font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 0.04em;
}
.dsMetaItem b { color: #ccc; font-weight: 500; text-transform: none; letter-spacing: normal; margin-left: 4px; }
.dsDescription {
  font-size: 13px; color: #ccc; line-height: 1.6; margin-top: 12px;
  white-space: pre-wrap;
}
.dsCitation {
  margin-top: 14px; padding: 12px 14px;
  background: #0e0e1a; border: 1px solid #2a2a3a; border-radius: 6px;
  font-size: 11px; color: #999; line-height: 1.5;
  font-family: var(--mono, ui-monospace, "SF Mono", Consolas, monospace);
}

/* Series list (rows, not cards — denser) */
.dsSeriesList {
  display: flex; flex-direction: column;
  border: 1px solid #2a2a3a; border-radius: 8px; overflow: hidden;
  background: #14142a;
}
.dsSeriesRow {
  display: flex; align-items: stretch; gap: 12px;
  padding: 8px 12px 8px 0; border-bottom: 1px solid #2a2a3a;
  cursor: pointer;
}
.dsSeriesRow:last-child { border-bottom: 0; }
.dsSeriesRow:hover { background: #1a1a2e; }
.dsSeriesRow.selected {
  background: #202846;
  box-shadow: inset 3px 0 0 #7aa6ff;
}
.dsSeriesRow.selected .dsSeriesCase { color: #fff; }

/* Wrapper that turns the area around the checkbox into a single big hit
 * target — clicking anywhere in it toggles the checkbox (via <label>) and
 * the row's click-to-preview handler bails on this class. */
.dsSeriesCheckBox {
  display: flex; align-items: center; justify-content: center;
  width: 44px; align-self: stretch;
  cursor: pointer; flex-shrink: 0;
}
.dsSeriesCheck, .dsSeriesMasterCheck {
  width: 18px; height: 18px;
  margin: 0; cursor: pointer;
  flex-shrink: 0; accent-color: #2563eb;
}

/* Header row inside the series list — master checkbox + "select all" */
.dsSeriesHead {
  display: flex; align-items: stretch; gap: 12px;
  padding: 0 12px 0 0;
  border-bottom: 1px solid #2a2a3a;
  background: #1a1a2e;
  min-height: 36px;
}
.dsSeriesHeadLabel {
  font-size: 12px; color: #aaa;
  user-select: none;
  display: flex; align-items: center;
  cursor: pointer;
}
.dsSeriesThumb {
  width: 56px; height: 56px; border-radius: 4px; background: #0e0e1a;
  flex-shrink: 0; object-fit: cover;
}
.dsSeriesMain { flex: 1; min-width: 0; }
.dsSeriesCase { font-size: 13px; color: #eee; font-weight: 500;
  display: flex; align-items: center; gap: 8px; }
.dsSeriesMaskBadge {
  font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 8px;
  background: rgba(78, 168, 95, 0.18); color: #6bd47f;
  border: 1px solid rgba(78, 168, 95, 0.4);
}
.dsSeriesDesc { font-size: 11px; color: #888; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsSeriesTags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.dsSeriesTag {
  font-size: 10px; padding: 1px 6px; border-radius: 8px;
  background: #0e0e1a; border: 1px solid #2a2a3a; color: #aaa;
}
.dsPreviewControls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.dsPreviewSegLabel {
  font-size: 11px;
  color: #888;
  line-height: 1;
}
.dsPreviewSegSelect {
  max-width: 180px;
  min-width: 132px;
  background: #0e0e1a;
  border: 1px solid #2a2a3a;
  color: #ddd;
  padding: 7px 24px 7px 9px;
  border-radius: 6px;
  font-size: 12px;
}
.dsPreviewSegSelect:focus {
  outline: none;
  border-color: #4a4a6a;
}

.dsActionBar {
  position: sticky; bottom: 16px; left: 0; right: 0;
  z-index: 12;
  background: linear-gradient(180deg, rgba(29, 36, 62, 0.98), rgba(16, 19, 34, 0.98));
  backdrop-filter: blur(10px);
  border: 1px solid rgba(122, 166, 255, 0.46);
  border-radius: 10px;
  box-shadow:
    0 -12px 34px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  padding: 12px 24px;
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0 0;
}
.dsActionLabel {
  font-size: 13px;
  color: #e6ebff;
  flex: 1;
  font-weight: 600;
}
.dsActionBtn {
  background: #2563eb; color: #fff; border: 0;
  padding: 8px 16px; border-radius: 6px; font-size: 13px; font-weight: 500;
  cursor: pointer;
}
.dsActionBtn:hover { background: #1d4fd6; }
.dsActionBtn.secondary { background: transparent; color: #ccc; border: 1px solid #2a2a3a; }
.dsActionBtn.secondary:hover { background: #1a1a2e; color: #eee; }
.dsActionBtn:disabled { opacity: 0.5; cursor: not-allowed; }
.dsReturnProjectBtn { white-space: nowrap; }

/* Project picker modal (clicked from the action bar) */
.dsPickerOverlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(2, 4, 12, 0.72);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.dsPickerModal {
  width: min(520px, 100%);
  max-height: 80vh;
  background: #151a2c;
  border: 1px solid rgba(122, 166, 255, 0.5);
  border-radius: 12px;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.58),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  display: flex; flex-direction: column;
}
.dsPickerHeader {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 18px 22px 12px; gap: 12px;
  border-bottom: 1px solid rgba(122, 166, 255, 0.24);
}
.dsPickerTitle { font-size: 16px; font-weight: 600; color: #eee; }
.dsPickerSub { font-size: 12px; color: #aaa; margin-top: 4px; }
.dsPickerSub b { color: #ccc; font-weight: 500; }
.dsPickerClose {
  background: transparent; border: 0; color: #aaa;
  font-size: 22px; cursor: pointer; line-height: 1;
  padding: 0 6px; border-radius: 4px;
}
.dsPickerClose:hover { color: #fff; background: rgba(255,255,255,0.05); }
.dsPickerBody {
  padding: 14px 22px; overflow: hidden;
  display: flex; flex-direction: column; gap: 10px; min-height: 0;
}
.dsPickerSearch { width: 100%; margin-bottom: 4px; }
.dsPickerList {
  overflow-y: auto; flex: 1;
  background: #0f1322;
  border: 1px solid #343d5f; border-radius: 8px;
}
.dsPickerRow {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid #29314c;
  cursor: pointer; gap: 10px;
}
.dsPickerRow:last-child { border-bottom: 0; }
.dsPickerRow:hover { background: #1d2540; }
.dsPickerName { font-size: 13px; color: #eee; flex: 1; }
.dsPickerMeta { display: flex; gap: 8px; align-items: center; }
.dsPickerEmpty {
  padding: 22px 14px;
  text-align: center;
  color: #888;
  font-size: 12px;
}
.dsPickerRole {
  font-size: 10px; padding: 1px 7px; border-radius: 8px;
  background: #1d2240; color: #7aa6ff; text-transform: capitalize;
}
.dsPickerOwner {
  font-size: 11px; color: #888;
}
.dsPickerFooter {
  padding: 12px 22px 18px;
  border-top: 1px solid rgba(122, 166, 255, 0.24);
}
.dsPickerFooterMain {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.dsPickerCheckLabel {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: #aaa; cursor: pointer; user-select: none;
}

/* Detail-page pagination + filter rail */
.dsDetailControls { margin-bottom: 14px; }
.dsPager {
  display: flex; align-items: center; gap: 12px;
  margin-top: 16px;
  padding: 10px 14px;
  background: #14142a; border: 1px solid #2a2a3a; border-radius: 8px;
}
.dsPager-top { margin-bottom: 16px; }
.dsPagerInfo {
  flex: 1; text-align: center;
  font-size: 12px; color: #aaa;
}

.dsLink {
  background: transparent; border: 0; color: #7aa6ff; cursor: pointer; font-size: 13px;
  text-decoration: underline; padding: 0;
}
.dsLink:hover { color: #a4c2ff; }

@media (max-width: 640px) {
  #homeDatasets, .dsGrid { grid-template-columns: 1fr; }
  .dsActionBar {
    flex-wrap: wrap;
    padding: 12px 16px;
  }
  .dsActionLabel {
    flex: 0 0 100%;
  }
  .dsActionBar .dsActionBtn {
    flex: 1;
  }
  .dsSeriesRow {
    flex-wrap: wrap;
  }
  .dsPreviewControls {
    margin-left: 56px;
    width: calc(100% - 56px);
    justify-content: flex-end;
  }
  .dsPreviewSegSelect {
    flex: 1;
    min-width: 0;
  }
  .dsPreviewSegLabel {
    display: none;
  }
  .dsPickerFooterMain {
    align-items: stretch;
    flex-direction: column;
  }
  .dsPickerFooterMain .dsActionBtn {
    width: 100%;
  }
  .dsReturnProjectBtn {
    width: 100%;
  }
}

/* ── MedSeg folder tile + breadcrumb (folder-in-folder grouping) ───────── */
.dsFolderCard {
  border-style: dashed;
  border-color: #3a4a7a;
  background: linear-gradient(135deg, #16203f, #12182e);
}
.dsFolderCard:hover { border-color: #2563eb; }
.dsFolderIcon {
  width: 100%;
  aspect-ratio: 16/9;
  min-height: 120px;
  border-radius: 6px;
  background: linear-gradient(135deg, #1c2748, #10172c);
  display: flex; align-items: center; justify-content: center;
  color: #6ea0ff;
  margin-bottom: 10px;
  flex-shrink: 0;
}
.dsCardMeta .dsChipOpen {
  background: #14224a; color: #8ab4ff; border: 1px solid #2b3d6e;
}
.dsCrumb { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; }
.dsCrumb:empty { display: none; }
.dsCrumbLink {
  background: transparent; border: 1px solid #2a2a3a; color: #9aa8c7;
  padding: 5px 11px; border-radius: 6px; font-size: 12px; cursor: pointer;
}
.dsCrumbLink:hover { background: #1a1a2e; color: #eee; border-color: #4a4a6a; }
.dsCrumbSep { color: #555; }
.dsCrumbCur { color: #ccc; font-size: 13px; font-weight: 600; }