/* ── Exports topbar: title left, search+create as buttons on the right ── */
.exp-topbar {
  align-items: center !important; /* was flex-end, only needed for the subtitle we removed */
  padding-bottom: 10px !important; /* was 20px via .rp-home-topbar (design-alignment.css) — too much air above the table */
}
.exp-topbar h1 { margin: 0; }

/* Title matches the project-name size used in the project topbar
   (.breadcrumb-current, literature-review.css) rather than the larger
   26px/black weight design-alignment.css applies to .rp-home-topbar h1
   elsewhere — Exports sits at the same visual level as an open project,
   not a section landing page.
   ID-anchored selector + !important: something loaded after
   design-alignment.css (onboarding.css / sidebar-refresh.css) was still
   winning against a plain two-class override, so this pins it down for
   real regardless of load order or !important elsewhere in that chain. */
#viewHome .exp-topbar h1 {
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  letter-spacing: normal !important;
  line-height: 1.3 !important;
  color: var(--ink) !important;
  margin-top: -4px !important;
}

.exp-topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Create — same labelled icon-btn-sm pattern as the project topbar's
   Import / Quarantine / Duplicates buttons (literature-review.css:
   #importBtn.import-btn, #quarantineToggleBtn.quarantine-toggle-btn),
   rather than a filled teal pill-btn. Same ID+class specificity trick so
   it wins the width:30px tie against design-alignment.css's base
   .icon-btn-sm rule. */
#expCreateBtn.exp-create-btn {
  width: auto;
  gap: 6px;
  padding: 0 10px;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-soft);
}
#expCreateBtn.exp-create-btn:hover {
  background: var(--bg-elevated);
  color: var(--ink);
  border-color: var(--border-hover);
}

/* Search — same always-visible box-with-icon pattern as the Abstract
   Screen topbar search (.asv-topbar-search-wrap/-icon/-input in
   abstract-screen.css): a plain bordered field the search icon sits
   inside of, rather than an icon button that expands into a teal-tinted
   pill on click. Kept as its own .exp-* class (not a shared selector)
   since exports.css and abstract-screen.css are loaded independently,
   but every value below is copied 1:1 from the Abstract Screen version. */
.exp-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.exp-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-muted);
  font-size: 0.8rem;
  pointer-events: none;
}
.exp-search-input {
  height: 30px;
  width: 190px;
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: none;
  padding: 0 10px 0 30px;
  font-family: inherit;
  font-size: 0.74rem;
  color: var(--ink);
  outline: none;
  transition: border-color 0.16s ease, width 0.2s ease, background 0.16s ease;
}
.exp-search-input::placeholder { color: var(--ink-muted); }
.exp-search-input:focus {
  border-color: var(--border-hover);
  width: 230px;
  background: var(--bg-elevated);
}
.exp-search-input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(13,167,154,0.18);
}
@media (max-width: 640px) {
  .exp-topbar { flex-wrap: wrap; }
  .exp-search-input,
  .exp-search-input:focus { width: 130px; }
}

/* ── Export tag chips (create modal) ── */
    .exp-tag-chip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 10px;
      border-radius: 20px;
      border: 1.5px solid var(--border);
      background: transparent;
      color: var(--ink-soft);
      font-size: 0.75rem;
      font-family: inherit;
      cursor: pointer;
      transition: border-color 0.15s, background 0.15s, color 0.15s;
    }
    .exp-tag-chip:hover {
      border-color: var(--teal);
      color: var(--teal);
    }
    .exp-tag-chip.selected {
      border-color: var(--teal);
      background: color-mix(in srgb, var(--teal) 12%, transparent);
      color: var(--teal);
      font-weight: 500;
    }
    .exp-tag-chip i { font-size: 0.8rem; }

    /* ── Exports page layout ── */
    #viewHome {
      display: flex;
      flex-direction: column;
      height: calc(100vh - 62px);
      overflow: visible;
    }
    .exp-page-body {
      display: flex;
      flex: 1;
      overflow: visible;
      gap: 0px;
    }

.exp-page-body:has(.exp-drawer.open) {
  gap: 10px;
}

    .exp-list-pane {
      flex:  1;
    }

    #exportsGrid.proj-table {
      table-layout: auto;
      min-width: 780px; /* below this, .exp-list-pane scrolls horizontally instead of columns colliding */
    }
    /* Type and Created are short, fixed-shape content (a one-line badge, a
     * date) — giving them their own reserved width keeps them from being
     * squeezed by table-layout:auto and spilling into the next column at
     * narrower viewports (e.g. a split-screen browser window). Linked
     * Project keeps the shared, flexible .pt-col-desc/.pt-cell-desc (its
     * max-width:0 ellipsis trick is designed for exactly one flexible
     * column) since project names genuinely vary in length. */
    #exportsGrid.proj-table thead th.pt-col-type    { width: 168px; }
    #exportsGrid.proj-table thead th.pt-col-created { width: 130px; }
    #exportsGrid .pt-cell-type {
      max-width: none;
      white-space: nowrap;
    }
    #exportsGrid .pt-cell-created {
      max-width: none;
      white-space: nowrap;
    }
    .exp-list-pane .proj-table-wrap {
      overflow-x: auto; /* safety net below min-width, scoped to Exports only */
    }
    #exportsGrid.proj-table thead th {
      position: sticky;
      top: 0;
      z-index: 2;
      padding: 16px;
      font-size: 0.74rem;
      font-weight: 700;
      color: var(--ink-soft);
      background: var(--bg-page);
      border-bottom: 1px solid rgba(43,24,23,0.10);
      border-right: 1px solid rgba(43,24,23,0.06);
      white-space: nowrap;
    }
    #exportsGrid.proj-table thead th:first-child { padding-left: 18px; }
    #exportsGrid.proj-table thead th:last-child { padding-right: 18px; border-right: none; }
    #exportsGrid.proj-table thead tr { border-bottom: none; }

    #exportsGrid .proj-table-row {
      border-bottom: 1px solid rgba(43,24,23,0.085);
      transition: background 0.12s;
    }
    #exportsGrid .proj-table-row:last-child { border-bottom: none; }
    #exportsGrid .proj-table-row:hover { background: var(--bg-page); }
    #exportsGrid .proj-table-row:hover td:first-child { background: var(--bg-page); }
    #exportsGrid .proj-table-row.exp-row-selected { background: var(--bg-page); }
    #exportsGrid .proj-table-row.exp-row-selected td:first-child { background: var(--bg-page); }

    #exportsGrid td {
      padding: 20px 16px;
      vertical-align: top;
      border-right: 1px solid rgba(43,24,23,0.06);
    }
    #exportsGrid td:first-child {
      position: sticky;
      left: 0;
      z-index: 1;
      background: var(--bg-surface);
      padding-left: 18px;
    }
    #exportsGrid td:last-child { padding-right: 18px; border-right: none; }

    #exportsGrid .pt-title-text {
      font-size: 0.80rem;
      font-weight: 700;
      color: var(--ink);
      letter-spacing: normal;
      line-height: 1.45;
    }
    #exportsGrid .pt-title-sub,
    #exportsGrid .pt-desc-text {
      font-size: 0.7rem;
      color: var(--ink-muted);
      font-weight: 500;
    }
    /* Drawer */
    .exp-drawer {
      width: 0;
      min-width: 0;
      overflow: hidden;
      background: var(--bg-surface, #fff);
      display: flex;
      flex-direction: column;
      transition: width 0.22s cubic-bezier(.4,0,.2,1),
                  border-left-width 0.22s,
                  min-width 0.22s;
      flex-shrink: 0;
      border-radius: 10px;
    }
    .exp-drawer.open {
      width: 380px;
      min-width: 380px;
      border: 1px solid var(--border);
      box-shadow: var(--shadow-card);
    }
    /* Drawer header */
    .exp-drawer-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px 12px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }
    .exp-drawer-title {
      font-size: 0.88rem;
      font-weight: 600;
      color: var(--ink);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex: 1;
      margin-right: 8px;
    }
    .exp-drawer-actions {
      display: flex;
      gap: 6px;
      flex-shrink: 0;
    }
    /* Plain, quiet action buttons — same transparent/bordered treatment
       as the topbar's #expCreateBtn.exp-create-btn, not the filled/
       tinted .pill-btn.blue / .pill-btn.red look used elsewhere. */
    .exp-drawer-actions .pill-btn {
      background: none;
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--ink-muted);
    }
    .exp-drawer-actions .pill-btn:hover {
      background: var(--bg-elevated);
      color: var(--ink);
      border-color: var(--border-hover);
    }
    .exp-drawer-body {
      flex: 1;
      overflow-y: auto;
    }
    /* Selected row uses the same wash as hover — see the
       #exportsGrid .proj-table-row.exp-row-selected rule above. */

    /* Meta rows */
    .exp-meta-section { padding: 4px 0; }
    .exp-meta-section-title {
      font-size: 0.68rem;
      font-weight: 600;
      color: var(--ink-muted);
      padding: 10px 16px 4px;
    }
    .exp-meta-section-sub {
      font-size: 0.69rem;
      color: var(--ink-muted);
      padding: 0 16px 6px;
      opacity: 0.75;
    }
    .exp-meta-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 7px 16px;
      font-size: 0.8rem;
    }
    .exp-meta-label { color: var(--ink-soft); display: flex; align-items: center; }
    .exp-meta-badge {
      font-weight: 600;
      color: var(--ink);
      background: var(--bg-elevated, #f2efea);
      padding: 2px 9px;
      border-radius: 10px;
      font-size: 0.74rem;
    }
    .exp-meta-divider {
      border: none;
      border-top: 1px solid var(--border);
      margin: 0;
    }
    .exp-meta-empty {
      padding: 8px 16px;
      font-size: 0.78rem;
      color: var(--ink-muted);
    }

    /* History */
    .exp-history-toggle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 10px 16px 6px;
      background: none;
      border: none;
      cursor: pointer;
      font-family: inherit;
      gap: 6px;
    }
    .exp-history-toggle:hover .exp-meta-section-title {
      color: var(--ink-soft);
    }
    .exp-history-caret {
      font-size: 1rem;
      color: var(--ink-muted);
      transition: transform 0.2s ease;
      flex-shrink: 0;
    }
    .exp-history-toggle.open .exp-history-caret {
      transform: rotate(-180deg);
    }
    .exp-history-body-wrap {
      display: none;
    }
    .exp-history-body-wrap.open {
      display: block;
    }
    .exp-history-list { padding: 6px 16px 10px; }
    .exp-history-row {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 6px 0;
    }
    .exp-history-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--teal);
      margin-top: 4px;
      flex-shrink: 0;
    }
    .exp-history-body { display: flex; flex-direction: column; gap: 1px; }
    .exp-history-action { font-size: 0.8rem; color: var(--ink); }
    .exp-history-meta { font-size: 0.72rem; color: var(--ink-muted); }

    /* ── Unapproved tag chip (create modal) ── */
    .exp-tag-chip.unapproved {
      border-color: var(--amber, #d97706);
      color: var(--amber, #d97706);
      background: color-mix(in srgb, var(--amber, #d97706) 8%, transparent);
      cursor: not-allowed;
      opacity: 0.85;
    }
    .exp-tag-chip.unapproved i {
      color: var(--amber, #d97706);
    }
    .exp-tag-chip.unapproved:hover {
      border-color: var(--amber, #d97706);
      color: var(--amber, #d97706);
      background: color-mix(in srgb, var(--amber, #d97706) 14%, transparent);
    }
    .exp-tag-chip-count {
      font-size: 0.68rem;
      opacity: 0.75;
      margin-left: 2px;
    }
    @keyframes exp-tag-flash {
      0%, 100% { background: color-mix(in srgb, var(--amber, #d97706) 8%, transparent); }
      50%       { background: color-mix(in srgb, var(--amber, #d97706) 28%, transparent); }
    }
    .exp-tag-chip.unapproved-flash {
      animation: exp-tag-flash 0.3s ease 2;
    }
    .exp-tag-approval-note {
      font-size: 0.73rem;
      color: var(--amber, #d97706);
      margin: 8px 0 0;
      line-height: 1.5;
    }

    /* ── Export drawer: device hierarchy cards ── */

    /* Wrapper for all device cards in the By Device section */
    .exp-device-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 4px 16px 12px;
    }

    /* One card per device */
    .exp-device-group {
      border: 1px solid var(--border, #e5e8ed);
      border-radius: 8px;
      overflow: hidden;
      cursor: pointer;
      transition: opacity 0.15s, border-color 0.15s;
    }
    .exp-device-group.deselected {
      opacity: 0.7;
      border-color: color-mix(in srgb, var(--border, #e5e8ed) 60%, transparent);
    }
    .exp-device-group:hover {
      opacity: 1;
      border-color: var(--teal);
    }

    /* Device name header row */
    .exp-device-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 10px 8px 12px;
      background: var(--bg-page);
      gap: 8px;
    }
    .exp-device-group.deselected .exp-device-header {
      border-bottom-color: transparent;
    }
    .exp-device-header-name {
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--ink);
      flex: 1;
    }
    .exp-device-header-right {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }
    .exp-device-header-badge {
      font-size: 0.72rem;
      font-weight: 700;
      color: var(--ink);
      background: var(--bg-page);
      border: 1px solid var(--border, #e5e8ed);
      padding: 1px 8px;
      border-radius: 10px;
    }

    /* Selection circle */
    .exp-device-sel-circle {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 1px solid var(--border, #e5e8ed);
      background: var(--bg-surface, #fff);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: border-color 0.15s, background 0.15s;
      color: #fff;
      font-size: 0.65rem;
    }
    .exp-device-sel-circle.checked {
      border-color: var(--teal);
      background: var(--teal-soft);
      color: teal;
    }
    .exp-device-group:hover .exp-device-sel-circle:not(.checked) {
      border-color: var(--teal);
    }

    /* Population block inside a device card */
    .exp-pop-block {
      border-top: 1px solid var(--border, #e5e8ed);
    }
    .exp-pop-block:first-child {
      border-top: none;
    }

    /* Population name row */
    .exp-pop-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 6px 12px;
      background: transparent;
    }
    .exp-pop-label {
      font-size: 0.74rem;
      font-weight: 500;
      color: var(--ink-soft);
    }
    .exp-pop-badge {
      font-size: 0.69rem;
      font-weight: 600;
      color: var(--ink-soft);
      background: var(--bg-elevated, #f2efea);
      padding: 1px 8px;
      border-radius: 10px;
    }

    /* Data-type + off-label sub-rows under a population */
    .exp-dt-list {
      display: flex;
      flex-direction: column;
      gap: 0;
      padding: 0 12px 6px 24px;
    }
    .exp-dt-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 3px 0;
      border-top: 1px solid color-mix(in srgb, var(--border, #e5e8ed) 60%, transparent);
    }
    .exp-dt-row:first-child {
      border-top: none;
    }
    .exp-dt-label {
      font-size: 0.71rem;
      color: var(--ink-muted, #8f817b);
      font-weight: 400;
    }
    .exp-dt-badge {
      font-size: 0.68rem;
      font-weight: 600;
      color: var(--ink-muted);
      min-width: 20px;
      text-align: right;
      flex-shrink: 0;
    }
/* ── Export Type picker (Create Export modal) ─────────────────────
 * Segmented control, ported from the old per-project Home export
 * modal (project-home-export.js, now retired). Wraps to a 2x2 grid on
 * narrow modals rather than squeezing four labels into one row. */
.exp-source-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.exp-source-opt {
  flex: 1 1 auto;
  min-width: 132px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  border-radius: var(--r-sm, 8px);
  border: 1px solid var(--border);
  background: var(--bg-page);
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.14s ease;
}
.exp-source-opt i { font-size: 0.88rem; }
.exp-source-opt:hover { background: var(--bg-elevated); color: var(--ink); border-color: var(--border-hover); }
.exp-source-opt.active {
  background: var(--teal-soft);
  color: var(--teal);
  border-color: var(--teal-border);
}

/* ── Export Type badge (exports table + drawer) ───────────────────
 * One colour per type so the table stays scannable at a glance:
 * Summaries (teal, matches the app's brand accent) / Abstract Screen
 * (blue) / Full Text Screen (purple) / Quarantine (amber). */
.exp-type-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid transparent;
}
.exp-type-pill i { font-size: 0.8rem; }
.exp-type-pill--summaries {
  background: var(--teal-soft);
  color: var(--teal);
  border-color: var(--teal-border);
}
.exp-type-pill--abstract {
  background: var(--blue-soft);
  color: var(--blue);
  border-color: color-mix(in srgb, var(--blue) 25%, transparent);
}
.exp-type-pill--fulltext {
  background: var(--purple-soft);
  color: var(--purple);
  border-color: color-mix(in srgb, var(--purple) 25%, transparent);
}
.exp-type-pill--quarantine {
  background: var(--amber-soft);
  color: var(--amber);
  border-color: color-mix(in srgb, var(--amber) 25%, transparent);
}