/* ===== Level 1: Named Palette Tokens (carried over from CpgDashboardV2) ===== */
:root {
  --color-turquoise:   rgb(17,  95,  102);
  --color-green:       rgb(0,   151, 103);
  /* Trial swap (2026-09-02): sandy beige rgb(236, 224, 199) drew negative feedback as the
     page background; trying a light cool tone instead. Revert to the value above if this
     doesn't land either — kept here rather than dropped so the swap is a one-line undo. */
  --color-beige:       rgb(242, 248, 248);
  --color-sand:        rgb(170, 140, 109);
  --color-yellow:      rgb(240, 186, 69);
  --color-blue:        rgb(113, 184, 212);
  --color-gray:        rgb(173, 172, 173);
  --color-white:       rgb(255, 255, 255);
  --color-black:       rgb(0,   0,   0);
  --color-crimson:     rgb(163, 31,  52);
  --color-dark-red:    rgb(126, 20,  22);
  --color-extra-blue:  rgb(117, 119, 184);
  --color-extra-green: rgb(185, 219, 159);
  --color-extra-rose:  rgb(240, 104, 97);
}

/* ===== Level 2+3: Ember Theme ===== */
[data-theme="ember"], :root {
  --primary-color:   var(--color-turquoise);
  --primary-light:   var(--color-blue);
  --secondary-color: var(--color-yellow);
  --accent-color:    var(--color-sand);
  --text-dark:       var(--color-black);
  --text-light:      var(--color-white);
  --bg-light:        var(--color-beige);
  --bg-medium:       var(--color-sand);

  --gradient-primary:   linear-gradient(135deg, var(--primary-color)   0%, var(--primary-light)     100%);
  /* Ported from V1's `--gradient-primaryHalf` (`app.css`) — same start color, but travels
     only halfway to the light endpoint (rgb(65,140,157) is the exact midpoint between
     turquoise and light-blue). V1 uses this only for the navbar (`PrimaryLayout.razor.css`
     `.top-row`), never for section headers — the navbar spans full page width with nav
     links/sign-out button sitting well into the gradient's light (low-contrast-with-white)
     end, unlike a section header's shorter, mostly-title-only bar. */
  --gradient-primary-half: linear-gradient(135deg, var(--primary-color) 0%, rgb(65, 140, 157) 100%);
  --gradient-secondary: linear-gradient(135deg, var(--secondary-color) 0%, var(--accent-color)      100%);
  --gradient-accent:    linear-gradient(135deg, var(--color-green)     0%, var(--color-extra-green) 100%);
  --gradient-warm:      linear-gradient(135deg, var(--accent-color)    0%, var(--bg-light)          100%);
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  background: var(--bg-light);
  color: var(--text-dark);
  min-height: 100vh;
}

/* ===== Header ===== */
.cpg-header {
  display: flex;
  align-items: center;
  padding: 0 28px;
  height: 60px;
  background: var(--gradient-primary-half);
  color: var(--text-light);
  gap: 24px;
}

.header-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  color: #fff;
  gap: 10px;
}
.header-logo { height: 52px; width: auto; display: block; }
.brand-cpg   { font-size: 1.4rem; font-weight: 800; letter-spacing: 1px; }
.brand-title { font-size: 1.1rem; font-weight: 600; opacity: 0.9; margin-left: -5px; }

.header-nav {
  display: flex;
  gap: 4px;
  flex: 1;
}
.nav-link {
  padding: 6px 14px;
  border-radius: 6px;
  color: rgba(255,255,255,0.88);
  text-decoration: none;
  font-size: 0.9rem;
  transition: background 0.15s;
}
.nav-link:hover { background: rgba(255,255,255,0.15); color: #fff; }
/* Active page indicator — 1px white outline around the label. */
.nav-link--active { outline: 1px solid rgba(255,255,255,0.85); outline-offset: -3px; }

.header-user {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.nav-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255,255,255,0.7);
  transition: border-color 0.15s, transform 0.15s;
}
.nav-avatar:hover { border-color: #fff; transform: scale(1.06); }
.nav-avatar__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nav-avatar__initials { color: #fff; font-weight: 700; font-size: 0.8rem; }
.btn-signout, .btn-signin {
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.7);
  color: #fff;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-signout:hover, .btn-signin:hover { background: rgba(255,255,255,0.2); }

/* ===== Main content area ===== */
.cpg-main {
  padding: 32px 28px;
  max-width: 1200px;
  margin: 0 auto;
}
/* Academic Statistics' Enrollment Trend chart/table can have dozens of semester columns —
   the standard 1200px content width leaves them cramped regardless of chart-internal
   spacing, so this page opts into a wider column. Per-page (via base.html's `active_page`
   check), not a global width change — every other page keeps the standard 1200px. */
.cpg-main--wide { max-width: 1600px; }

/* ===== Page header ===== */
.page-header { margin-bottom: 28px; }
.page-header h1 { font-size: 1.8rem; color: #115F66; }
.page-sub { color: #666; font-size: 0.95rem; margin-top: 4px; }

/* ===== Error page (AppError::into_response — src/error.rs) ===== */
.error-actions { display: flex; gap: 10px; margin-top: 8px; }
.error-actions .btn-signin {
  color: #115F66; border-color: #b8d8dc; background: #e8f4f5;
  padding: 7px 18px; border-radius: 20px;
}
.error-actions .btn-signin:hover { background: #d8ecee; }
.error-reference { color: #999; font-size: 0.78rem; margin-top: 22px; font-family: 'SFMono-Regular', Consolas, Menlo, monospace; }

/* ===== Role-demo grid (Home page) ===== */
.role-demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.role-card {
  border-radius: 10px;
  padding: 22px 24px;
  position: relative;
}
.role-card h2 { font-size: 1.05rem; margin-bottom: 8px; }
.role-card p  { font-size: 0.875rem; line-height: 1.6; color: #444; }
.role-card a  { color: #115F66; font-weight: 600; }

.role-card-label {
  position: absolute;
  top: -10px;
  left: 16px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 2px 10px;
  border-radius: 12px;
  background: #115F66;
  color: #fff;
}

.card-default    { background: #f0f7f8; border: 1px solid #c0dde0; }
.card-leadership { background: linear-gradient(135deg, #e8f4f5 0%, #d0eaf0 100%); border: 1px solid #9fd0da; }
.card-analytics  { background: linear-gradient(135deg, #fef8e7 0%, #fdf0c0 100%); border: 1px solid #f0d060; }
.card-guest      { background: #f5f5f5; border: 1px solid #ddd; }
.card-admin      { background: #f5f5f5; border: 1px solid #ddd; border-top: 3px solid #A31F34; }
.card-admin .role-card-label { background: #A31F34; }

/* ===== Generic content card ===== */
.content-card {
  background: #fff;
  border-radius: 10px;
  padding: 24px 28px;
  margin-bottom: 20px;
  border: 1px solid #d8d0c0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.content-card h2 { font-size: 1.1rem; color: #115F66; margin-bottom: 10px; }
.content-card p  { font-size: 0.9rem; color: #555; line-height: 1.6; }

/* ===== Form elements (login, password change, etc.) ===== */
.pw-form        { display: flex; flex-direction: column; gap: 6px; max-width: 360px; margin-top: 12px; }
/* A bare <label> is inline by default, and its text + nested field were relying on plain
   text-wrapping plus default `vertical-align: baseline` to end up "label above field" —
   fine when the field is a short single-line <input> (the misalignment is a pixel or two,
   easy to miss) but badly wrong for a multi-row <textarea>: baseline-aligning a short line
   of label text against a *tall* box puts that text down near the box's bottom edge, not
   its top — exactly the "Comment label at the bottom" bug (since fixed differently there —
   see `.wf-field-unit` below — by moving Comment to a label-beside-field row entirely).
   Making the label itself a column flexbox fixes the stacking outright regardless (used
   here for the workflow forms' date fields, which stay label-above-field on purpose), and
   `align-items: stretch` (flexbox's own default) makes the nested <input> fill the label's
   assigned width for free. */
.pw-label       { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; font-weight: 500; color: #444; margin-top: 6px; }
.pw-label:first-child { margin-top: 0; }
.pw-hint        { font-weight: 400; color: #888; font-size: 0.8rem; }
.pw-input       { padding: 8px 12px; border: 1px solid #ccc; border-radius: 6px;
                  font-size: 0.9rem; font-family: inherit; outline: none; }
.pw-input:focus { border-color: #115F66; box-shadow: 0 0 0 2px rgba(17,95,102,0.15); }
.btn-action     { padding: 8px 20px; background: #115F66; color: #fff; border: none;
                  border-radius: 6px; font-size: 0.9rem; cursor: pointer; align-self: flex-start; }
.btn-action:hover            { background: #0d4f56; }
.btn-action-secondary        { padding: 6px 16px; background: transparent; color: #115F66;
                               border: 1px solid #115F66; border-radius: 6px;
                               font-size: 0.85rem; cursor: pointer; margin-top: 8px;
                               text-decoration: none; display: inline-block; }
.btn-action-secondary:hover  { background: rgba(17,95,102,0.07); }
.btn-action-secondary:disabled { color: #aaa; border-color: #ccc; cursor: default; }
.btn-action-secondary:disabled:hover { background: transparent; }
.diag-btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.diag-btn-row .btn-action-secondary { margin-top: 0; }
.pw-feedback    { font-size: 0.875rem; padding: 8px 12px; border-radius: 6px; margin-bottom: 4px; }
.pw-success     { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
.pw-error       { background: #fdecea; color: #b71c1c; border: 1px solid #ef9a9a; }
.pw-feedback ul { margin: 4px 0 0; padding-left: 20px; }
.pw-feedback li { margin-bottom: 2px; }

/* ===== Admin user registry (ported from Admin.razor.css) ===== */
.user-table-wrap { overflow-x: auto; overflow-y: auto; max-height: 420px; margin-bottom: 16px; border: 1px solid #e0e0e0; border-radius: 6px; }
.user-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.user-table th { position: sticky; top: 0; z-index: 1; text-align: left; padding: 8px 12px; background: #f7f7f7; border-bottom: 2px solid #e0e0e0; color: #555; font-weight: 600; white-space: nowrap; }
.user-table th[data-sort-key] { cursor: pointer; user-select: none; padding-right: 18px; position: sticky; }
.user-table th[data-sort-key]:hover { background: #eef0f0; color: #115F66; }
.user-table th[data-sort-key]::after { content: ""; display: inline-block; width: 0; height: 0; margin-left: 6px; vertical-align: middle; border-left: 4px solid transparent; border-right: 4px solid transparent; opacity: 0.3; }
.user-table th.sort-asc::after { border-bottom: 5px solid #115F66; opacity: 1; }
.user-table th.sort-desc::after { border-top: 5px solid #115F66; opacity: 1; }
.user-table td { padding: 8px 12px; border-bottom: 1px solid #e0e0e0; vertical-align: middle; }
.user-row { cursor: pointer; transition: background 0.1s; }
.user-row:hover { background: #f0f7f8; }
.user-row--selected { background: #dff0f2; outline: 2px solid #115F66; outline-offset: -2px; }
.status-cell { text-align: center; font-size: 0.85rem; white-space: nowrap; }
.status-cell--wide { min-width: 100px; }
.status-yes { color: #2e7d32; }
.status-no  { color: #888; font-variant-numeric: tabular-nums; }

/* ===== Admin performance page ===== */
.metrics-stat-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.metrics-stat { flex: 1 1 110px; background: #f7f7f7; border: 1px solid #e0e0e0; border-radius: 8px;
                padding: 12px 14px; }
.metrics-stat span { display: block; font-size: 0.78rem; color: #777; margin-bottom: 4px; }
.metrics-stat strong { font-size: 1.25rem; color: #115F66; }
.metrics-status-ok  { color: #2e7d32; }
.metrics-status-err { color: #b71c1c; font-weight: 600; }
.user-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 0 8px; border-top: 1px solid #e0e0e0; margin-top: 4px; }
.user-actions__label { font-weight: 600; font-size: 0.9rem; margin-right: 4px; }
.user-actions__email { font-weight: 400; color: #666; font-size: 0.85rem; }
.roles-editor { margin-top: 4px; background: #fafafa; border: 1px solid #e0e0e0; border-radius: 8px; padding: 14px 16px; }
.roles-editor__label { display: block; font-size: 0.85rem; color: #555; margin-bottom: 10px; }
.roles-editor__checks { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 12px; }
.roles-editor__check { display: flex; align-items: center; gap: 5px; font-size: 0.85rem; color: #333; cursor: pointer; user-select: none; }
.roles-editor__check input { cursor: pointer; }
.roles-editor__other-label { display: block; font-size: 0.78rem; color: #777; margin-bottom: 12px; }
.roles-editor__other-label .pw-input { display: block; width: 100%; max-width: 420px; margin-top: 4px; box-sizing: border-box; }
.roles-editor__row { display: flex; align-items: center; gap: 10px; }
.roles-editor__status { font-size: 0.82rem; color: #2e7d32; }
.roles-editor__status--error { color: #b71c1c; }
.link-card { margin-top: 14px; background: #f0f7f8; border: 1px solid #115F66; border-radius: 8px; padding: 14px 16px; }
.link-card__label { display: block; font-size: 0.8rem; color: #555; margin-bottom: 8px; }
.link-card__row { display: flex; gap: 8px; align-items: center; }
.link-card__input { flex: 1; font-size: 0.8rem; font-family: monospace; padding: 7px 10px; border: 1px solid #bbb; border-radius: 6px; background: #fff; color: #222; min-width: 0; }
.link-card__note { margin-top: 8px; font-size: 0.78rem; color: #777; }

/* ===== Researcher directory & profile (ported from Researchers/ResearcherProfile.razor.css) ===== */
.rsearch-wrap { margin-bottom: 32px; }

.dept-section {
  background: #fff; border-radius: 10px; border: 1px solid #d8d0c0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06); margin-bottom: 16px; overflow: hidden;
}
.dept-header {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; background: none; border: none; cursor: pointer;
  text-align: left; gap: 12px; transition: background 0.12s; font-family: inherit;
}
.dept-header:hover { background: #f0f7f8; }
.dept-header__left, .detail-header__left { display: flex; align-items: center; gap: 10px; }
.dept-chevron {
  font-size: 0.65rem; color: #115F66; transition: transform 0.18s ease; display: inline-block;
}
.dept-chevron--open { transform: rotate(90deg); }
.dept-title { font-size: 1rem; font-weight: 600; color: #115F66; }
.dept-count { font-size: 0.8rem; color: #999; white-space: nowrap; }
.dept-body { border-top: 1px solid #ebe3d5; }

.researcher-row {
  display: flex; align-items: center; gap: 14px; padding: 10px 20px;
  border-bottom: 1px solid #f0ebe0; transition: background 0.1s; text-decoration: none;
}
.researcher-row:last-child { border-bottom: none; }
.researcher-row:hover { background: #faf8f4; }

.researcher-photo, .profile-photo {
  border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid #ddd5c5;
}
.researcher-photo { width: 52px; height: 52px; }
.profile-photo { width: 96px; height: 96px; border-width: 3px; }
.researcher-photo--placeholder, .profile-photo--placeholder {
  display: flex; align-items: center; justify-content: center;
  background: #c8dfe2; color: #115F66; font-weight: 700;
}
.researcher-photo--placeholder { font-size: 1rem; }
.profile-photo--placeholder { font-size: 1.8rem; }

.researcher-name {
  flex: 1; font-weight: 600; font-size: 0.9rem; color: #115F66;
  text-decoration: none; min-width: 0;
}
.researcher-name:hover { text-decoration: underline; }
.researcher-stats { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }

.stat-badge { font-size: 0.75rem; padding: 3px 9px; border-radius: 12px; white-space: nowrap; }
.stat-pub  { background: #e8f4f5; color: #115F66; border: 1px solid #b8d8dc; }
.stat-proj { background: #fef8e7; color: #7a5f00; border: 1px solid #e0c840; }
.stat-pat  { background: #f0eeff; color: #3a3a90; border: 1px solid #c0b8e8; }
.stat-tech { background: #f2f2f2; color: #444;    border: 1px solid #d0d0d0; }

.profile-header {
  display: flex; align-items: flex-start; gap: 24px; background: #fff;
  border-radius: 10px; border: 1px solid #d8d0c0; box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  padding: 24px 28px; margin-bottom: 20px;
}
.profile-identity { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.profile-name { font-size: 1.5rem; font-weight: 700; color: #1a2a3a; margin: 0; line-height: 1.2; }
.profile-jobtitle { font-size: 0.95rem; color: #444; margin: 0; }
.profile-dept { font-size: 0.85rem; color: #115F66; font-weight: 600; margin: 0; }
.profile-email { font-size: 0.85rem; color: #115F66; text-decoration: none; }
.profile-email:hover { text-decoration: underline; }
/* `.profile-identity` is a column flexbox with the default `align-items: stretch` — without
   this, the "View my profile" button (the only bordered/background child here) would
   stretch to the card's full width instead of hugging its own text like every sibling. */
.profile-identity .btn-action-secondary { align-self: flex-start; }
.profile-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

.profile-search-row { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.back-link { font-size: 1rem; color: #115F66; text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.back-link:hover { text-decoration: underline; }
button.back-link { background: none; border: none; padding: 0; font: inherit; cursor: pointer; }
/* A back-link sitting directly under a `.page-header` (rather than inline with a search row
   like `.profile-search-row` above): pulls it up closer to the header's own text — the
   header's 28px margin-bottom otherwise reads as an oversized gap for a single link line —
   and gives it more room below before the page's actual content starts. */
.page-back-link { display: block; margin: -16px 0 24px; }

.detail-section {
  background: #fff; border-radius: 10px; border: 1px solid #d8d0c0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06); margin-bottom: 14px; overflow: hidden;
}
.detail-header {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 13px 20px; background: none; border: none; cursor: pointer;
  text-align: left; gap: 12px; transition: background 0.12s; font-family: inherit;
}
.detail-header:hover { background: #f0f7f8; }
.detail-title { font-size: 1rem; font-weight: 600; color: #115F66; }
.detail-body { border-top: 1px solid #ebe3d5; max-height: 520px; overflow-y: auto; }
.detail-empty { padding: 16px 20px; color: #999; font-size: 0.875rem; }
.detail-item { padding: 14px 20px; border-bottom: 1px solid #f0ebe0; }
.detail-item:last-child { border-bottom: none; }
.item-title { font-weight: 600; font-size: 0.9rem; color: #1a2a3a; margin: 0 0 4px; line-height: 1.4; }
.item-meta { font-size: 0.8rem; color: #666; margin: 0 0 3px; }
.item-authors { font-size: 0.78rem; color: #888; margin: 3px 0 0; line-height: 1.4; }
.item-coauthor-link { color: #115F66; text-decoration: none; font-weight: 500; }
.item-coauthor-link:hover { text-decoration: underline; }
.item-doi { font-size: 0.78rem; margin: 4px 0 0; }
.item-doi a { color: #115F66; text-decoration: none; }
.item-doi a:hover { text-decoration: underline; }

/* ===== AuthorPicker search widget (ported from AuthorPicker.razor.css) ===== */
.apicker { position: relative; width: 100%; }

.apicker__input-wrap {
  display: flex; align-items: center; border: 1px solid #ccc; border-radius: 8px;
  background: #fff; transition: border-color 0.15s, box-shadow 0.15s; overflow: hidden;
}
.apicker__input-wrap:focus-within { border-color: #115F66; box-shadow: 0 0 0 3px rgba(17,95,102,0.12); }
.apicker__input-wrap--unresolved { border-color: #c87878; background: #fff8f8; }
.apicker__input-wrap--unresolved:focus-within { border-color: #115F66; background: #fff; box-shadow: 0 0 0 3px rgba(17,95,102,0.12); }

@keyframes apicker-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}
.apicker__input-wrap--shake { animation: apicker-shake 0.35s ease-in-out; }

.apicker__input {
  flex: 1; padding: 9px 12px; border: none; outline: none; font-size: 0.9rem;
  font-family: inherit; background: transparent; color: #1a2a3a;
}
.apicker__input::placeholder { color: #aaa; }

.apicker__clear { padding: 0 10px; background: none; border: none; color: #aaa; cursor: pointer; font-size: 0.75rem; line-height: 1; }
.apicker__clear:hover { color: #555; }

.apicker__toggle {
  padding: 0 11px; background: none; border: none; border-left: 1px solid #e8e8e8;
  color: #777; cursor: pointer; font-size: 1.2rem; line-height: 1; align-self: stretch;
  display: flex; align-items: center; transition: background 0.12s, color 0.12s;
}
.apicker__toggle:hover { background: #f5f5f5; color: #115F66; }

.apicker__dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #fff;
  border: 1px solid #c8d8dc; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  z-index: 300; overflow-y: auto; max-height: 360px;
}

.apicker__result {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  background: none; border: none; border-bottom: 1px solid #f0ebe0; text-align: left;
  cursor: pointer; transition: background 0.1s; font-family: inherit;
  text-decoration: none; color: inherit;
}
.apicker__result:last-child { border-bottom: none; }
.apicker__result:hover, .apicker__result--on { background: #f0f7f8; }

.apicker__avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1px solid #ddd; }
.apicker__avatar--placeholder {
  display: flex; align-items: center; justify-content: center;
  background: #c8dfe2; color: #115F66; font-size: 0.75rem; font-weight: 700;
}

.apicker__result-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.apicker__result-name {
  font-size: 0.875rem; font-weight: 600; color: #1a2a3a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.apicker__result-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-width: 0; }
.apicker__result-dept { font-size: 0.75rem; color: #888; white-space: nowrap; }
.apicker__result-email {
  font-size: 0.72rem; color: #aaa; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; text-align: right; flex-shrink: 1; min-width: 0;
}

/* ===== JournalPicker widget (ported from JournalPicker's inline structure, styled like AuthorPicker) ===== */
.jpicker { position: relative; width: 100%; }
.jpicker__input-wrap {
  display: flex; align-items: center; border: 1px solid #ccc; border-radius: 8px;
  background: #fff; transition: border-color 0.15s, box-shadow 0.15s; overflow: hidden;
}
.jpicker__input-wrap:focus-within { border-color: #115F66; box-shadow: 0 0 0 3px rgba(17,95,102,0.12); }
.jpicker__input {
  flex: 1; padding: 9px 12px; border: none; outline: none; font-size: 0.9rem;
  font-family: inherit; background: transparent; color: #1a2a3a;
}
.jpicker__input::placeholder { color: #aaa; }
.jpicker__add, .jpicker__clear { padding: 0 8px; background: none; border: none; color: #aaa; cursor: pointer; font-size: 0.9rem; line-height: 1; }
.jpicker__add:hover, .jpicker__clear:hover { color: #555; }
.jpicker__toggle {
  padding: 0 11px; background: none; border: none; border-left: 1px solid #e8e8e8;
  color: #777; cursor: pointer; font-size: 1.2rem; line-height: 1; align-self: stretch;
  display: flex; align-items: center; transition: background 0.12s, color 0.12s;
}
.jpicker__toggle:hover { background: #f5f5f5; color: #115F66; }
.jpicker__dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #fff;
  border: 1px solid #c8d8dc; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  z-index: 300; overflow-y: auto; max-height: 360px;
}
.jpicker__result {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; background: none; border: none; border-bottom: 1px solid #f0ebe0;
  text-align: left; cursor: pointer; transition: background 0.1s; font-family: inherit;
}
.jpicker__result:last-child { border-bottom: none; }
.jpicker__result:hover, .jpicker__result--on { background: #f0f7f8; }
.jpicker__result-name { font-size: 0.875rem; color: #1a2a3a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jpicker__result-count { font-size: 0.75rem; color: #999; flex-shrink: 0; }

/* ===== CountryPicker widget (ported from CountryPicker.razor.css) ===== */
.cpicker { position: relative; width: 100%; }
.cpicker__input-wrap {
  display: flex; align-items: center; border: 1px solid #ccc; border-radius: 8px;
  background: #fff; transition: border-color 0.15s, box-shadow 0.15s; overflow: hidden;
}
.cpicker__input-wrap:focus-within { border-color: #115F66; box-shadow: 0 0 0 3px rgba(17,95,102,0.12); }
.cpicker__input {
  flex: 1; padding: 9px 12px; border: none; outline: none; font-size: 0.9rem;
  font-family: inherit; background: transparent; color: #1a2a3a;
}
.cpicker__input::placeholder { color: #aaa; }
.cpicker__add { padding: 0 9px; background: none; border: none; color: #115F66; cursor: pointer; font-size: 1rem; line-height: 1; font-weight: 700; }
.cpicker__add:hover { color: #0d4a50; }
.cpicker__clear { padding: 0 8px; background: none; border: none; color: #aaa; cursor: pointer; font-size: 0.75rem; line-height: 1; }
.cpicker__clear:hover { color: #555; }
.cpicker__toggle {
  padding: 0 11px; background: none; border: none; border-left: 1px solid #e8e8e8;
  color: #777; cursor: pointer; font-size: 1.2rem; line-height: 1; align-self: stretch;
  display: flex; align-items: center; transition: background 0.12s, color 0.12s;
}
.cpicker__toggle:hover { background: #f5f5f5; color: #115F66; }
.cpicker__dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #fff;
  border: 1px solid #c8d8dc; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  z-index: 300; overflow: hidden; max-height: 300px; overflow-y: auto;
}
.cpicker__result {
  width: 100%; display: flex; align-items: baseline; gap: 8px; padding: 8px 14px;
  background: none; border: none; border-bottom: 1px solid #f0ebe0; text-align: left;
  cursor: pointer; font-size: 0.875rem; color: #1a2a3a; font-family: inherit; transition: background 0.1s;
}
.cpicker__result:last-child { border-bottom: none; }
.cpicker__result:hover, .cpicker__result--on { background: #f0f7f8; color: #115F66; }
.cpicker__result-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cpicker__result-count { flex-shrink: 0; font-size: 0.75rem; color: #888; white-space: nowrap; }
.cpicker__result:hover .cpicker__result-count, .cpicker__result--on .cpicker__result-count { color: #4a9aa0; }

/* ===== CollaboratorPicker widget (ported from CollaboratorPicker.razor.css — same shape as CountryPicker) ===== */
.colpicker { position: relative; width: 100%; }
.colpicker__input-wrap {
  display: flex; align-items: center; border: 1px solid #ccc; border-radius: 8px;
  background: #fff; transition: border-color 0.15s, box-shadow 0.15s; overflow: hidden;
}
.colpicker__input-wrap:focus-within { border-color: #115F66; box-shadow: 0 0 0 3px rgba(17,95,102,0.12); }
.colpicker__input {
  flex: 1; padding: 9px 12px; border: none; outline: none; font-size: 0.9rem;
  font-family: inherit; background: transparent; color: #1a2a3a;
}
.colpicker__input::placeholder { color: #aaa; }
.colpicker__add { padding: 0 9px; background: none; border: none; color: #115F66; cursor: pointer; font-size: 1rem; line-height: 1; font-weight: 700; }
.colpicker__add:hover { color: #0d4a50; }
.colpicker__clear { padding: 0 8px; background: none; border: none; color: #aaa; cursor: pointer; font-size: 0.75rem; line-height: 1; }
.colpicker__clear:hover { color: #555; }
.colpicker__toggle {
  padding: 0 11px; background: none; border: none; border-left: 1px solid #e8e8e8;
  color: #777; cursor: pointer; font-size: 1.2rem; line-height: 1; align-self: stretch;
  display: flex; align-items: center; transition: background 0.12s, color 0.12s;
}
.colpicker__toggle:hover { background: #f5f5f5; color: #115F66; }
.colpicker__dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #fff;
  border: 1px solid #c8d8dc; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  z-index: 300; overflow: hidden; max-height: 300px; overflow-y: auto;
}
.colpicker__result {
  width: 100%; display: flex; align-items: baseline; gap: 8px; padding: 8px 14px;
  background: none; border: none; border-bottom: 1px solid #f0ebe0; text-align: left;
  cursor: pointer; font-size: 0.875rem; color: #1a2a3a; font-family: inherit; transition: background 0.1s;
}
.colpicker__result:last-child { border-bottom: none; }
.colpicker__result:hover, .colpicker__result--on { background: #f0f7f8; color: #115F66; }
.colpicker__result-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.colpicker__result-count { flex-shrink: 0; font-size: 0.75rem; color: #888; white-space: nowrap; }
.colpicker__result:hover .colpicker__result-count, .colpicker__result--on .colpicker__result-count { color: #4a9aa0; }

/* ===== Publications page (ported from Publications.razor.css — Phase 1 subset:
   filter panel, badges, results summary, split pub/author list. Charts, drag-reorder,
   settings panel, and author context menu are later passes.) ===== */
.pub-filter-panel {
  background: #fff; border-radius: 10px; border: 1px solid #d8d0c0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06); padding: 20px 24px; margin-bottom: 20px;
}
.pub-filter-row { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.pub-filter-col { flex: 2; min-width: 160px; display: flex; flex-direction: column; gap: 6px; }
.pub-filter-col--narrow { flex: 1; min-width: 140px; }
.filter-label { font-size: 0.75rem; font-weight: 600; color: #115F66; text-transform: uppercase; letter-spacing: 0.04em; }
.filter-label-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }

.filter-count-btn {
  display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 12px;
  font-size: 0.7rem; font-weight: 700; cursor: pointer; font-family: inherit; line-height: 1;
  transition: filter 0.12s; white-space: nowrap; flex-shrink: 0; text-decoration: none;
}
.filter-count-btn:hover { filter: brightness(0.88); }
.filter-count-btn--author  { background: #e8f4f5; color: #115F66; border: 1px solid #b8d8dc; }
.filter-count-btn--journal { background: #fef8e7; color: #7a5f00; border: 1px solid #e0c840; }
.filter-count-btn--country { background: #fef8e7; color: #7a5f00; border: 1px solid #e0c840; }
.filter-count-btn--keyword { background: #fff0e4; color: #7a3d00; border: 1px solid #d4904a; }
.filter-count-btn--dept    { background: #f0eeff; color: #3a3a90; border: 1px solid #c0b8e8; }

.filter-select {
  width: 100%; padding: 9px 12px; border: 1px solid #ccc; border-radius: 8px; background: #fff;
  font-size: 0.9rem; font-family: inherit; color: #1a2a3a; cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.filter-select:focus { outline: none; border-color: #115F66; box-shadow: 0 0 0 3px rgba(17,95,102,0.12); }
/* Compact variant for a `<select>` sitting inline in a settings-panel row (e.g. "Stack by")
   rather than filling a whole filter-panel column — referenced from projects.html and
   academic_statistics.html but never actually defined until now, same pre-existing gap as
   `.settings-item--row`/`.scope-toggle--sm` above. */
.filter-select--sm { width: auto; padding: 4px 8px; font-size: 0.8rem; border-radius: 6px; }

.year-range { display: flex; align-items: center; gap: 6px; }
.year-input {
  flex: 1; min-width: 0; padding: 9px 8px; border: 1px solid #ccc; border-radius: 8px;
  font-size: 0.9rem; font-family: inherit; color: #1a2a3a; text-align: center;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.year-input:focus { outline: none; border-color: #115F66; box-shadow: 0 0 0 3px rgba(17,95,102,0.12); }
.year-input::-webkit-inner-spin-button, .year-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.year-input[type=number] { -moz-appearance: textfield; }
.year-sep { color: #888; font-size: 1rem; flex-shrink: 0; }
.year-input-wrap { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.year-input-wrap .year-input { width: 100%; }

.keyword-input-wrap { display: flex; gap: 6px; align-items: center; }
.keyword-input {
  flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid #ccc; border-radius: 8px;
  font-size: 0.9rem; font-family: inherit; color: #1a2a3a; transition: border-color 0.15s, box-shadow 0.15s;
}
.keyword-input:focus { outline: none; border-color: #d4904a; box-shadow: 0 0 0 3px rgba(212,144,74,0.15); }
.keyword-add-btn {
  flex-shrink: 0; width: 34px; height: 34px; border: 1px solid #d4904a; border-radius: 8px;
  background: #fff0e4; color: #7a3d00; font-size: 1.2rem; font-weight: 400; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.12s, border-color 0.12s;
}
.keyword-add-btn:hover { background: #ffe0c4; border-color: #b86c28; }

.pub-filter-toggles { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 14px; }
.toggle-label { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: #333; cursor: pointer; user-select: none; }
.toggle-label input[type="checkbox"] { accent-color: #115F66; width: 15px; height: 15px; cursor: pointer; flex-shrink: 0; }
.toggle-hint { font-size: 0.75rem; color: #999; }
.toggle-label__main { position: relative; white-space: nowrap; }
.toggle-advisory {
  position: absolute; bottom: 0; left: 100%; transform: translateY(50%); margin-left: 5px;
  font-size: 0.68rem; color: #b05555; font-style: italic; padding: 0 4px; white-space: nowrap;
  pointer-events: none; z-index: 1;
}

.pub-applied-filters { margin-top: 16px; padding-top: 14px; border-top: 1px solid #ebe3d5; display: flex; flex-direction: column; gap: 8px; }
.filter-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.filter-group__label { font-size: 0.72rem; font-weight: 600; color: #999; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; min-width: 80px; }
.filter-badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px;
  font-size: 0.8rem; font-weight: 500; border: none; cursor: pointer; font-family: inherit;
  transition: opacity 0.12s, filter 0.12s; max-width: 260px; text-decoration: none;
}
.filter-badge:hover { filter: brightness(0.92); }
.badge-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge-x { font-size: 0.65rem; opacity: 0.6; flex-shrink: 0; }
.filter-badge--author  { background: #e8f4f5; color: #115F66; border: 1px solid #b8d8dc; }
.filter-badge--journal { background: #fef8e7; color: #7a5f00; border: 1px solid #e0c840; }
.filter-badge--country { background: #fef8e7; color: #7a5f00; border: 1px solid #e0c840; }
.filter-badge--keyword { background: #fff0e4; color: #7a3d00; border: 1px solid #d4904a; }
.filter-badge--dept    { background: #f0eeff; color: #3a3a90; border: 1px solid #c0b8e8; }
.filter-badge--year    { background: #f2f2f2; color: #444;    border: 1px solid #d0d0d0; }

.clear-all-btn {
  margin-top: 2px; padding: 3px 12px; border: 1px solid #ccc; border-radius: 20px; background: #fff;
  font-size: 0.78rem; color: #888; cursor: pointer; font-family: inherit;
  transition: border-color 0.12s, color 0.12s; align-self: flex-start; text-decoration: none;
}
.clear-all-btn:hover { border-color: #115F66; color: #115F66; }

.pub-results-area { display: flex; flex-direction: column; gap: 12px; }
.res-summary { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.res-summary__count { font-size: 0.95rem; font-weight: 600; color: #333; }

.scope-toggle { display: flex; border: 1px solid #d0d0d0; border-radius: 6px; overflow: hidden; }
.scope-btn {
  padding: 4px 14px; border: none; background: #f5f5f5; font-size: 0.8rem; color: #555;
  cursor: pointer; font-family: inherit; transition: background 0.12s, color 0.12s; text-decoration: none;
}
.scope-btn + .scope-btn { border-left: 1px solid #d0d0d0; }
.scope-btn--on { background: #115F66; color: #fff; }

/* ===== Filter-help "?" button and popup ===== */
.filter-help-wrap { position: relative; display: inline-flex; align-items: center; }
.filter-help-btn {
  width: 18px; height: 18px; border-radius: 50%; border: 1px solid #b8d8dc; background: #e8f6f8;
  color: #115F66; font-size: 11px; font-weight: 700; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.filter-help-btn:hover { background: #115F66; color: #fff; border-color: #115F66; }
.filter-help-backdrop { position: fixed; inset: 0; z-index: 800; }
.filter-help-popup {
  position: absolute; top: calc(100% + 7px); right: 0; z-index: 900; background: #fff;
  border: 1px solid #b8d8dc; border-radius: 6px; padding: 12px 14px;
  box-shadow: 0 3px 12px rgba(17,95,102,0.15); width: 320px; font-size: 0.8rem; color: #2a3a42; line-height: 1.55;
}
.filter-help-popup p { margin: 0 0 8px; }
.filter-help-popup p:last-child { margin-bottom: 0; }

/* ===== Settings toggle button + panel ===== */
.settings-toggle {
  margin-left: auto; padding: 4px 10px; border: 1px solid #d0d0d0; border-radius: 6px;
  background: #f5f5f5; font-size: 1rem; color: #666; cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.settings-toggle:hover, .settings-toggle--on { border-color: #115F66; color: #115F66; background: #f0f7f8; }
.settings-panel {
  background: #fafafa; border: 1px solid #e8e8e8; border-radius: 8px; padding: 12px 18px;
  display: flex; gap: 20px; flex-wrap: wrap; align-items: center; font-size: 0.875rem; color: #444;
}
.settings-item { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.settings-item__label { font-weight: 500; color: #555; margin-right: 4px; }
/* A row wrapping a button group (e.g. the Bar-totals [None|Peak|All] control) rather than
   a single checkbox/radio — unlike a plain `.settings-item` label, nothing here is
   directly clickable as a whole, so the inherited pointer cursor is misleading. Referenced
   from projects.html/academic_statistics.html but never actually defined until now — a
   real (if harmless) styling gap, not a stale leftover to delete. */
.settings-item--row { cursor: default; }
/* Visually nests a sub-option that only applies given another setting's current value
   (e.g. the "Breakdown" control, shown only when Projects' Stack-by = Project Type). */
.settings-item--indent { margin-left: 20px; padding-left: 12px; border-left: 2px solid #e0e0e0; }
/* Compact variant for `.scope-toggle`/`.scope-btn` reused inside the settings panel,
   where the full-size buttons (sized for the primary Union/Intersection toggle in the
   results-summary bar) read as oversized. */
.scope-toggle--sm .scope-btn { padding: 3px 10px; font-size: 0.72rem; }
.settings-radio { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.settings-debug-btn {
  background: none; border: 1px solid #c0b0b0; border-radius: 4px; color: #886060; font-size: 0.75rem;
  font-family: inherit; padding: 2px 10px; cursor: pointer; transition: background 0.12s, border-color 0.12s;
}
.settings-debug-btn:hover { background: #fff0f0; border-color: #a07070; }

/* Groups of 50 pub-items are the content-visibility containment unit — lets the browser
   skip layout/paint for offscreen groups, independent of and additive to server caching. */
.pub-group { content-visibility: auto; contain-intrinsic-size: auto 5000px; }
.pub-item { padding: 12px 0; border-bottom: 1px solid #f0ebe0; }
.pub-item:last-child { border-bottom: none; }
.pub-item__title { font-size: 0.9rem; font-weight: 600; color: #1a2a3a; margin: 0 0 4px; line-height: 1.45; }
.pub-item__meta { font-size: 0.82rem; color: #555; margin: 0 0 3px; }
.pub-item__authors { font-size: 0.78rem; color: #777; margin: 0 0 3px; line-height: 1.4; }
.pub-item__doi { font-size: 0.78rem; color: #888; margin: 0; }
.pub-item__doi a { color: #115F66; text-decoration: none; }
.pub-item__doi a:hover { text-decoration: underline; }
.pub-item__title-link, .pub-item__title-link:hover { color: inherit; text-decoration: none; }
.pub-item__author-tag { display: inline; background: #e4f2f3; color: #115F66; border-radius: 3px; padding: 1px 5px; text-decoration: none; white-space: nowrap; }
.pub-item__author-tag:hover { background: #c8e5e8; }

/* ===== Patent list (ported from Patents.razor.css — distinct pat-* class set and
   25-item content-visibility groups, matching V2's own separate BuildPatentListMarkup) ===== */
.pat-list { display: flex; flex-direction: column; }
.pat-item { padding: 12px 0; border-bottom: 1px solid #f0ebe0; }
.pat-group { content-visibility: auto; contain-intrinsic-size: auto 5000px; }
.pat-item:last-child { border-bottom: none; }
.pat-item__title { font-size: 0.9rem; font-weight: 600; color: #1a2a3a; margin: 0 0 4px; line-height: 1.45; }
.pat-item__meta { font-size: 0.82rem; color: #555; margin: 0 0 3px; }
.pat-item__assignee { font-size: 0.78rem; color: #777; margin: 0 0 3px; }
.pat-item__inventors { font-size: 0.78rem; color: #777; margin: 0; line-height: 1.4; }
.pat-item__title-link, .pat-item__title-link:hover { color: inherit; text-decoration: none; }
.pat-item__title-link:hover { text-decoration: underline; text-decoration-color: rgba(26,42,58,0.4); }
.pat-item__author-tag { display: inline; background: #e4f2f3; color: #115F66; border-radius: 3px; padding: 1px 5px; text-decoration: none; white-space: nowrap; }
.pat-item__author-tag:hover { background: #c8e5e8; }

/* ===== Project list (V2 reuses .pat-item verbatim for this — given its own proj-* class
   set here instead, same visual styling, matching this port's per-entity naming) ===== */
.proj-list { display: flex; flex-direction: column; }
.proj-item { padding: 12px 0; border-bottom: 1px solid #f0ebe0; }
.proj-group { content-visibility: auto; contain-intrinsic-size: auto 5000px; }
.proj-item:last-child { border-bottom: none; }
.proj-item__title { font-size: 0.9rem; font-weight: 600; color: #1a2a3a; margin: 0 0 4px; line-height: 1.45; }
.proj-item__meta { font-size: 0.82rem; color: #555; margin: 0 0 3px; }
.proj-item__budget { font-size: 0.78rem; color: #777; margin: 0 0 3px; }
.proj-item__members { font-size: 0.78rem; color: #777; margin: 0; line-height: 1.4; }
.proj-item__author-tag { display: inline; background: #e4f2f3; color: #115F66; border-radius: 3px; padding: 1px 5px; text-decoration: none; white-space: nowrap; }
.proj-item__author-tag:hover { background: #c8e5e8; }

.author-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid #f5f0e8; text-decoration: none; }
.author-row:last-child { border-bottom: none; }
.author-row__count {
  min-width: 32px; text-align: center; background: #115F66; color: #fff; font-size: 0.75rem;
  font-weight: 700; border-radius: 12px; padding: 2px 8px; flex-shrink: 0;
}
.author-row__name-group { flex: 1; min-width: 0; display: flex; flex-direction: row; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.author-row__name {
  font-size: 0.875rem; font-weight: 500; color: #115F66; text-decoration: none; flex-shrink: 0;
  background: none; border: none; padding: 0; cursor: pointer; text-align: left; font-family: inherit;
}
.author-row__name:hover { text-decoration: none; }
.author-row__username { font-size: 0.75rem; color: #aaa; font-family: 'Consolas', 'Monaco', monospace; flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.author-row__dept { font-size: 0.75rem; color: #888; white-space: nowrap; }
.author-row__menu-btn {
  opacity: 0; background: none; border: none; cursor: pointer; color: #888; font-size: 1.05rem;
  letter-spacing: 0.05em; padding: 1px 5px; line-height: 1; border-radius: 3px; flex-shrink: 0;
  transition: opacity 0.12s, color 0.12s, background 0.12s;
}
.author-row:hover .author-row__menu-btn { opacity: 1; }
.author-row__menu-btn:hover { color: #115F66; background: #e4f2f3; }

/* ===== Author context menu ===== */
.author-menu-backdrop { position: fixed; inset: 0; z-index: 1000; cursor: default; }
.author-menu {
  position: fixed; z-index: 1001; background: #fff; border: 1px solid #b8d8dc; border-radius: 6px;
  box-shadow: 0 4px 14px rgba(17,95,102,0.15); padding: 4px 0; min-width: 172px; font-family: inherit;
}
.author-menu__item {
  display: block; width: 100%; padding: 8px 16px; text-align: left; background: none; border: none;
  font-size: 0.875rem; font-family: inherit; color: #1a2a3a; text-decoration: none; cursor: pointer;
  white-space: nowrap; box-sizing: border-box;
}
.author-menu__item:hover { background: #e4f2f3; color: #115F66; }

.res-section {
  background: #fff; border: 1px solid #d8d0c0; border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05); overflow: hidden;
}
.res-section__body { padding: 16px 20px; }

/* Ported from V1's `--gradient-primary` (`drilldown-shared.css`/`app.css`) — the same
   teal-to-light-blue diagonal gradient V1 uses for every section header bar
   (`.chart-header`/`.filter-header`/`.pane-header` alike, a single shared primitive, not a
   per-section-type choice), applied here to `.res-section__header` site-wide rather than
   per-page since that's the header row every page's collapsible sections already share. */
.res-section__header {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px;
  background: var(--gradient-primary);
  border-bottom: 1px solid #0d4a50; user-select: none; cursor: grab;
}
.res-section__header:active { cursor: grabbing; }
.res-section__collapse {
  border: none; background: none; color: rgba(255,255,255,0.85); font-size: 0.75rem; cursor: pointer;
  padding: 2px 6px; flex-shrink: 0; transition: color 0.1s;
}
.res-section__collapse:hover { color: #fff; }
.drag-handle {
  display: inline-block; width: 10px; height: 16px;
  background-image: radial-gradient(circle, rgba(255,255,255,0.65) 1.2px, transparent 1.2px);
  background-size: 4px 5px; background-repeat: repeat; flex-shrink: 0; opacity: 0.7;
}
.res-section__header:hover .drag-handle { opacity: 1; }
.res-section__title-area {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; background: none;
  border: none; padding: 0; text-align: left; font-family: inherit; cursor: pointer;
}
.res-section__title { font-size: 0.875rem; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.04em; }
.res-section__meta { font-size: 0.78rem; color: rgba(255,255,255,0.8); }
.res-section--dragging { opacity: 0.55; box-shadow: 0 4px 16px rgba(17,95,102,0.18); }
.res-section--drop-target { border-color: #115F66; box-shadow: 0 0 0 2px rgba(17,95,102,0.30), 0 1px 4px rgba(0,0,0,0.05); transition: box-shadow 0.1s, border-color 0.1s; }
/* Drop-target highlight swaps to a light background (distinct from the header's normal
   teal gradient, so the highlight itself stays legible mid-drag) — the header's white
   text/icon colors above need restoring to dark here or they'd vanish against it. */
.res-section--drop-target > .res-section__header { background: #e4f2f3; }
.res-section--drop-target > .res-section__header .res-section__title { color: #1a2a3a; }
.res-section--drop-target > .res-section__header .res-section__meta { color: #999; }
.res-section--drop-target > .res-section__header .res-section__collapse { color: #888; }
.res-section--drop-target > .res-section__header .drag-handle { background-image: radial-gradient(circle, #bbb 1.2px, transparent 1.2px); }

.pub-authors-split { display: flex; gap: 0; align-items: flex-start; }
.pub-authors-split__pubs { flex: 62; min-width: 280px; border-right: 1px solid #ebe3d5; padding-right: 20px; }
.pub-authors-split__auth { flex: 35; min-width: 180px; padding-left: 20px; }
.split-col-head {
  font-size: 0.72rem; font-weight: 600; color: #999; text-transform: uppercase; letter-spacing: 0.04em;
  margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid #ebe3d5;
}
.split-scroll {
  max-height: 520px; overflow-y: auto; overflow-x: hidden;
  scrollbar-width: auto; scrollbar-color: #b8b4ac transparent;
}
.split-scroll::-webkit-scrollbar { width: 10px; }
.split-scroll::-webkit-scrollbar-track { background: #f5f3ef; border-radius: 5px; }
.split-scroll::-webkit-scrollbar-thumb { background: #b8b4ac; border-radius: 5px; border: 2px solid #f5f3ef; }
.split-scroll::-webkit-scrollbar-thumb:hover { background: #8a8680; }

@media (max-width: 720px) {
  .pub-authors-split { flex-direction: column; }
  .pub-authors-split__pubs { border-right: none; border-bottom: 1px solid #ebe3d5; padding-right: 0; padding-bottom: 16px; width: 100%; }
  .pub-authors-split__auth { padding-left: 0; padding-top: 16px; width: 100%; }
}

/* ===== Chart-type toggle (By Year / Stacked / Grouped) ===== */
.chart-type-toggle { display: flex; border: 1px solid #d0d0d0; border-radius: 6px; overflow: hidden; align-self: flex-start; margin-bottom: 10px; }
.chart-type-btn { padding: 4px 14px; border: none; background: #f5f5f5; font-size: 0.8rem; color: #555; cursor: pointer; font-family: inherit; transition: background 0.12s, color 0.12s; text-decoration: none; display: inline-block; }
.chart-type-btn + .chart-type-btn { border-left: 1px solid #d0d0d0; }
.chart-type-btn--on { background: #115F66; color: #fff; }

/* ===== Publications charts (PubBarChart / PubStackedBarChart / PubGroupedBarChart) ===== */
.pbc-wrap { padding: 4px 0 8px; }
.psbc-wrap, .pgbc-wrap { position: relative; width: 100%; }
.pbc-svg, .psbc-svg, .pgbc-svg { display: block; overflow: visible; }

.pbc-axis, .pbc-tick { stroke: #bbb; stroke-width: 1; }
.pbc-grid { stroke: #e8e8e8; stroke-width: 1; stroke-dasharray: 3 3; }
.pbc-tick-label { font-size: 11px; fill: #888; font-family: inherit; }
.pbc-count { font-size: 10px; fill: #555; font-family: inherit; font-weight: 600; pointer-events: none; }
.pbc-year { font-size: 11px; fill: #666; font-family: inherit; }
.pbc-bar { fill: #115F66; opacity: 0.82; cursor: pointer; transition: opacity 0.12s, fill 0.12s; }
.pbc-bar:hover { opacity: 1; fill: #0d4a50; }
.pbc-bar--sel { fill: #e07b1a; opacity: 1; }
.pbc-bar--sel:hover { fill: #c56915; }
/* Stack-by-department segments (solo + cross-dept mosaic stripes) — crisp edges avoid an
   anti-aliasing seam between adjacent same-row mosaic stripes. */
.pbc-seg { shape-rendering: crispEdges; }
.pbc-legend { display: flex; flex-wrap: wrap; gap: 12px 20px; justify-content: center; padding: 6px 0 2px; }
.pbc-legend__item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #3a5a62; font-family: 'Arial', inter, 'Segoe UI', Roboto, sans-serif, system-ui; }
.pbc-legend__dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.pbc-empty, .psbc-empty, .pgbc-empty { color: #aaa; font-size: 0.875rem; padding: 20px 0; text-align: center; }

.psbc-axis, .pgbc-axis { stroke: #b8d8dc; stroke-width: 1.5; }
.psbc-grid, .pgbc-grid { stroke: #e2eef0; stroke-width: 1; }
.psbc-tick, .pgbc-tick { stroke: #b8d8dc; stroke-width: 1; }
.psbc-tick-label, .pgbc-tick-label,
.psbc-year, .pgbc-year { font-size: 11px; fill: #5a7a80; font-family: 'Arial', inter, 'Segoe UI', Roboto, sans-serif, system-ui; }
.psbc-count, .pgbc-count { font-size: 10px; fill: #1a3a42; font-family: 'Arial', inter, 'Segoe UI', Roboto, sans-serif, system-ui; font-weight: 600; }

.chart-bar-link { cursor: pointer; }

/* ===== Technologies page ===== */
.tech-split { display: flex; gap: 0; align-items: flex-start; }
.tech-split__list { flex: 60; min-width: 300px; border-right: 1px solid #ebe3d5; padding-right: 20px; }
.tech-split__leaderboard { flex: 40; min-width: 220px; padding-left: 20px; }
@media (max-width: 720px) {
  .tech-split { flex-direction: column; }
  .tech-split__list { border-right: none; border-bottom: 1px solid #ebe3d5; padding-right: 0; padding-bottom: 16px; width: 100%; }
  .tech-split__leaderboard { padding-left: 0; padding-top: 16px; width: 100%; }
}

.tech-card { padding: 12px 4px; border-bottom: 1px solid #f5f0e8; }
.tech-card:last-child { border-bottom: none; }
.tech-card__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.tech-card__title { font-weight: 600; color: #1a3a42; }
.tech-card__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.82rem; color: #6a6a6a; margin-bottom: 4px; }
.tech-card__dot { color: #ccc; }
.tech-card__pi, .tech-card__co { font-size: 0.82rem; color: #444; margin-bottom: 2px; }
.tech-card__desc { font-size: 0.85rem; color: #555; margin: 4px 0 0; line-height: 1.4; }

.tech-badge { display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 10px; color: #fff; flex-shrink: 0; }
.tech-badge.trl-high { background: #2e7d32; }
.tech-badge.trl-mid { background: #e0951a; }
.tech-badge.trl-low { background: #888; }

.tech-tag { display: inline-block; font-size: 0.7rem; font-weight: 600; padding: 1px 7px; border-radius: 8px; background: #eef2f3; color: #3a5a62; }
.tech-tag--deep { background: #f0e6f7; color: #6a3d8a; }
.tech-tag--pi { background: #fdf0e0; color: #a05a10; margin-left: 4px; }

.tech-charts-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) {
  .tech-charts-row { grid-template-columns: 1fr; }
}
.tech-chart-cell { min-width: 0; }
.tech-chart-cell__title {
  font-size: 0.8rem; font-weight: 700; color: #3a5a62; text-transform: uppercase; letter-spacing: 0.03em;
  margin: 0 0 8px; text-align: center;
}

.tch-empty { color: #999; font-size: 0.85rem; text-align: center; padding: 30px 0; }
.tch-axis { stroke: #d0d8dc; stroke-width: 1; }
/* #35777D is #115F66 alpha-composited at 0.85 over white — see academic_chart.rs's
   COLOR_ENROLLED comment for the derivation and where the 0.85 came from. */
.tch-bar { fill: #35777D; }
.tch-bar--sel { fill: #e07b1a; }
.tch-bar-count { font-size: 10px; fill: #1a3a42; font-family: 'Arial', inter, 'Segoe UI', Roboto, sans-serif, system-ui; font-weight: 600; }
.tch-bar-label { font-size: 11px; fill: #5a7a80; font-family: 'Arial', inter, 'Segoe UI', Roboto, sans-serif, system-ui; }

.tch-donut-slice { stroke: #fff; stroke-width: 1.5; }
.tch-donut-slice--sel { stroke: #e07b1a; stroke-width: 3; }
.tch-donut-total { font-size: 22px; fill: #1a3a42; font-weight: 700; font-family: 'Arial', inter, 'Segoe UI', Roboto, sans-serif, system-ui; }
.tch-donut-wrap { text-align: center; }
.tch-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; padding: 8px 0 2px; }
.tch-legend__item { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: #3a5a62; font-family: 'Arial', inter, 'Segoe UI', Roboto, sans-serif, system-ui; }
.tch-legend__dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

.ach-empty { color: #999; font-size: 0.85rem; text-align: center; padding: 30px 0; }
.ach-wrap { text-align: center; }
.ach-axis { stroke: #d0d8dc; stroke-width: 1; }
.ach-tick { stroke: #d0d8dc; stroke-width: 1; }
.ach-grid { stroke: #eef2f3; stroke-width: 1; }
.ach-tick-label { font-size: 10px; fill: #7a8a90; font-family: 'Arial', inter, 'Segoe UI', Roboto, sans-serif, system-ui; }
.ach-period-label { font-size: 9.5px; fill: #5a7a80; font-family: 'Arial', inter, 'Segoe UI', Roboto, sans-serif, system-ui; }
.ach-bar-count { font-size: 9px; fill: #1a3a42; font-family: 'Arial', inter, 'Segoe UI', Roboto, sans-serif, system-ui; font-weight: 600; }
.ach-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; padding: 10px 0 2px; }
.ach-legend__item { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: #3a5a62; font-family: 'Arial', inter, 'Segoe UI', Roboto, sans-serif, system-ui; }
.ach-legend__dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
/* Compound "Also stack by" legend row — mirrors .psc-legend--also/.psc-series-legend__lbl. */
.ach-legend--also { padding-top: 0; }
.ach-legend__lbl { color: #8a9a9e; margin-right: 2px; font-size: 11.5px; }
.ach-seg { cursor: crosshair; transition: opacity 0.1s; }
.ach-seg:hover { opacity: 0.82; }

.ach-granularity-toggle { display: flex; border: 1px solid #d0d0d0; border-radius: 6px; overflow: hidden; margin-left: auto; }
.ach-granularity-btn { padding: 5px 12px; font-size: 0.8rem; color: #444; background: #fff; text-decoration: none; }
.ach-granularity-btn + .ach-granularity-btn { border-left: 1px solid #d0d0d0; }
.ach-granularity-btn--active { background: #115F66; color: #fff; }

.ach-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.ach-table th, .ach-table td { padding: 7px 12px; text-align: right; border-bottom: 1px solid #f0f0f0; }
.ach-table th:first-child, .ach-table td:first-child { text-align: left; }
.ach-table th { color: #6a6a6a; font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; }
.ach-table tbody tr:hover { background: #f7fafa; }

.psbc-legend, .pgbc-legend { display: flex; flex-wrap: wrap; gap: 12px 20px; justify-content: center; padding: 6px 0 2px; }
.psbc-legend__item, .pgbc-legend__item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #3a5a62; font-family: 'Arial', inter, 'Segoe UI', Roboto, sans-serif, system-ui; }
.pgbc-legend__item--total { border-left: 1px solid #d0d8dc; padding-left: 20px; margin-left: 4px; }
.psbc-legend__dot, .pgbc-legend__dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }

/* Single shared cursor-following tooltip (pub-charts.js) for all three chart types */
.chart-float-tip {
  position: fixed; z-index: 1100; background: #ffffff; border: 1px solid #b8d8dc; border-radius: 6px;
  padding: 8px 11px 9px; pointer-events: none; box-shadow: 0 2px 8px rgba(17,95,102,0.18);
  min-width: 130px; max-width: 240px; font-family: 'Arial', inter, 'Segoe UI', Roboto, sans-serif, system-ui;
}
.chart-float-tip__header { font-size: 12px; font-weight: 700; color: #115F66; margin-bottom: 2px; }
.chart-float-tip__year { font-size: 11px; color: #7a9aa0; margin-bottom: 5px; }
.chart-float-tip__row { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #1a2a3a; line-height: 1.6; }
.chart-float-tip__row--indent { margin-left: 14px; }
/* Wraps the row matching whichever segment is currently hovered (pub-charts.js's row[4]
   `active` flag) *and* any indented rows immediately following it — the Cross-dept row's
   expanded combo breakdown, when present — so the highlight rectangle encompasses the whole
   group, not just its header line. Same orange as the chart's own hover/selection outline,
   so the tooltip visibly ties back to the segment under the cursor. Padding/negative-margin
   keeps the group's own footprint from shifting its neighbors when the border appears. */
.chart-float-tip__group--active { border: 1px solid #e07b1a; border-radius: 4px; background: rgba(224,123,26,0.08); padding: 1px 4px; margin: -1px -4px; }
/* The header line within an active group (bolded even when the group is just that one row —
   a segment with nothing to expand still reads as "PETE: 3" in bold, not just boxed). */
.chart-float-tip__row--active-label { font-weight: 700; }
.chart-float-tip__dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* Compound-stack "Also stack by" hover highlight — outlines the whole outer-dimension
   group while any of its inner segments is hovered (pub-charts.js's showGroupHighlight). */
.chart-group-highlight { fill: none; stroke: #e07b1a; stroke-width: 1.5; }

/* ===== Loading spinner (V2's res-summary__updating, shown next to the count while a
   filter-change fetch is in flight — usually imperceptible given cache-hit response
   times, but visible feedback if the network is ever slow) ===== */
@keyframes spin { to { transform: rotate(360deg); } }
.computing-spinner {
  display: inline-block; width: 16px; height: 16px; border: 2px solid #d0d0d0;
  border-top-color: #115F66; border-radius: 50%; animation: spin 0.7s linear infinite; flex-shrink: 0;
}
.computing-spinner--sm { width: 11px; height: 11px; border-width: 1.5px; vertical-align: middle; }

/* ===== Projects stacked chart (ported from PubProjectStackedChart.razor.css). Hover
   tooltips reuse the shared `.chart-float-tip` mechanism from pub-charts.js — V2's own
   bespoke `.psc-float-tip` markup isn't ported, since nothing here builds that DOM. ===== */
.psc-wrap { position: relative; width: 100%; }
.psc-empty { color: #888; font-size: 0.85rem; padding: 1rem 0; }
.psc-svg { display: block; width: 100%; }
.psc-axis { stroke: #b0c4c8; stroke-width: 1; shape-rendering: crispEdges; }
.psc-tick { stroke: #b0c4c8; stroke-width: 1; shape-rendering: crispEdges; }
.psc-grid { stroke: #e8e8e8; stroke-width: 1; shape-rendering: crispEdges; }
.psc-ylabel { font-size: 11px; fill: #4a6670; font-family: 'Arial', inter, 'Segoe UI', Roboto, sans-serif; text-anchor: end; pointer-events: none; }
.psc-xlabel { font-size: 11.5px; fill: #3d5a60; font-family: 'Arial', inter, 'Segoe UI', Roboto, sans-serif; text-anchor: middle; }
.psc-xlabel--sel { fill: #b07000; font-weight: 700; }
.psc-seg { rx: 1; cursor: crosshair; transition: opacity 0.1s; }
.psc-seg:hover { opacity: 0.82; }
/* This used to cancel the dim above for compound segments, back when the left half was
   still one small rect per inner segment (dimming just one patch looked like a stray
   artifact there). Now that the left half is one solid rect per whole outer group, hovering
   it dims the *entire* major division, and hovering an individual right-side rect dims just
   that minor subdivision — both readable, so the per-rect dim is welcome again alongside
   the group-outline highlight rather than needing to be suppressed. */
.psc-count { font-size: 10px; fill: #444; font-family: inherit; font-weight: 700; pointer-events: none; }
.psc-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; padding: 0 4px; }
.psc-legend__item { display: inline-flex; align-items: center; gap: 5px; font-size: 0.78rem; color: #444; }
.psc-legend__dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.psc-series-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 4px; padding: 0 4px; font-size: 0.76rem; color: #666; }
.psc-series-legend__lbl { color: #888; margin-right: 2px; }
.psc-series-legend__item { background: #f0f0f0; border-radius: 3px; padding: 1px 6px; }
.psc-value-note { font-size: 0.72rem; color: #999; text-align: right; margin: 2px 4px 0 0; padding: 0; }
.psc-legend--also { padding-top: 2px; }

/* ===== Toast (shared primitive, static/toast.js) ===== */
.toast-container {
  position: fixed; bottom: 20px; right: 20px; z-index: 2000;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.toast {
  background: #1a2a3a; color: #fff; padding: 10px 16px; border-radius: 8px; font-size: 0.85rem;
  box-shadow: 0 3px 12px rgba(0,0,0,0.25); opacity: 0; transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s; max-width: 320px;
}
.toast--visible { opacity: 1; transform: translateY(0); }

/* ===== Chart metric checkboxes (ported from Projects.razor.css) ===== */
.pmchart-series-checks { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 0 0 14px; align-items: center; }
.pmchart-series-check { display: inline-flex; align-items: center; gap: 6px; font-size: 0.84rem; color: #3d5a60; cursor: pointer; user-select: none; }
.pmchart-series-check input[type="checkbox"] { width: 14px; height: 14px; cursor: pointer; accent-color: #115F66; flex-shrink: 0; }
.pmchart-series-check__dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.res-summary__updating { margin-left: 8px; font-size: 0.8rem; font-weight: 400; color: #999; }

/* ===== Manpower page ===== */
.mpw-total-badge { font-size: 0.78rem; font-weight: 500; color: #555; background: #eef4f5; border: 1px solid #c8d8da; padding: 2px 10px; border-radius: 10px; margin-left: 0.4rem; vertical-align: middle; letter-spacing: 0.2px; }

.mpw-tab-nav { display: flex; gap: 0; margin-bottom: 20px; background: white; border-radius: 10px; border: 1px solid #dde5e6; box-shadow: 0 2px 6px rgba(0,0,0,0.07); overflow: hidden; }
.mpw-tab-btn { flex: 1; padding: 0.7rem 1.25rem; border-right: 1px solid #dde5e6; cursor: pointer; font-size: 0.9rem; font-weight: 500; color: #555; text-decoration: none; text-align: center; transition: background 0.15s, color 0.15s; }
.mpw-tab-btn:last-child { border-right: none; }
.mpw-tab-btn:hover:not(.mpw-tab-active) { background: #f0f7f8; color: var(--primary-color); }
.mpw-tab-active { background: var(--gradient-primary); color: white; font-weight: 600; }

.mpw-card { background: white; border: 1px solid #e4e8e9; border-radius: 10px; margin-bottom: 18px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
.mpw-card__header { padding: 12px 18px; border-bottom: 1px solid #eef0f0; }
.mpw-card__header h3 { margin: 0; font-size: 0.95rem; color: #2c3e50; }
.mpw-card__header--split { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.mpw-card__body { padding: 16px 18px; }
.mpw-tree-body { padding: 0; }

.mpw-hc-totals { display: flex; gap: 8px; align-items: center; }
.mpw-hc-badge { font-size: 0.73rem; font-weight: 600; background: #eef4f5; color: #3a5a62; padding: 2px 10px; border-radius: 10px; letter-spacing: 0.2px; white-space: nowrap; }
.mpw-hc-badge--muted { opacity: 0.75; font-weight: 500; }

.mpw-hc-rowlabel { font-size: 11px; fill: #444; font-weight: 600; }
.mpw-hc-track { fill: #f2f5f6; }
.mpw-hc-count { font-size: 11px; fill: #fff; font-weight: 700; pointer-events: none; }
.mpw-hc-wrap { display: flex; flex-direction: column; align-items: stretch; }

.mpw-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; padding: 10px 0 2px; }
.mpw-legend__item { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: #3a5a62; }
.mpw-legend__dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

.mpw-dept-bar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mpw-dept-bar-cell { min-width: 0; }
.mpw-dept-label { font-size: 0.78rem; font-weight: 700; color: #555; text-align: center; text-transform: uppercase; letter-spacing: 0.45px; margin-bottom: 4px; }

.mpw-axis { stroke: #d8dede; stroke-width: 1; }
.mpw-bar-label { font-size: 9.5px; fill: #5a7a80; }
.mpw-bar-count { font-size: 10px; fill: #1a3a42; font-weight: 700; }
.mpw-bar-wrap { display: flex; flex-direction: column; align-items: stretch; }

.mpw-pie-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.mpw-donut-total { font-size: 22px; fill: #2c3e50; font-weight: 700; }
.mpw-donut-wrap { display: flex; flex-direction: column; align-items: stretch; }

.mpw-dept-section { border-bottom: 1px solid #eef0f0; }
.mpw-dept-section:last-child { border-bottom: none; }
.mpw-dept-header { width: 100%; display: flex; align-items: center; gap: 0.65rem; padding: 0.72rem 1.25rem; background: none; border: none; cursor: pointer; text-align: left; font-size: 0.93rem; font-weight: 600; color: #2c3e50; transition: background 0.13s; }
.mpw-dept-header:hover { background: #f0f7f8; color: var(--primary-color); }
.mpw-arrow { font-size: 0.65rem; color: #aaa; width: 12px; flex-shrink: 0; }
.mpw-dept-name { flex: 1; }
.mpw-dept-count { font-size: 0.75rem; font-weight: 700; background: var(--primary-color); color: white; padding: 1px 9px; border-radius: 10px; flex-shrink: 0; letter-spacing: 0.1px; }

.mpw-emp-table { width: 100%; border-collapse: collapse; font-size: 0.855rem; }
.mpw-emp-table th { background: #f5fafb; color: #666; padding: 0.42rem 1rem 0.42rem 3.2rem; text-align: left; font-weight: 700; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.4px; border-top: 1px solid #e8eef0; border-bottom: 1px solid #e0e8ea; }
.mpw-emp-table td { padding: 0.44rem 1rem 0.44rem 3.2rem; border-bottom: 1px solid #f2f2f2; color: #444; }
.mpw-emp-table tr:last-child td { border-bottom: none; }
.mpw-emp-table tr:hover td { background: #f5f9f9; }
.mpw-name-cell { font-weight: 500; color: #2c3e50; }
.mpw-email-cell { font-size: 0.8rem; color: #888; }

.mpw-year-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.mpw-year-label { font-size: 0.82rem; font-weight: 600; color: #666; text-transform: uppercase; letter-spacing: 0.4px; margin-right: 0.2rem; }
.mpw-year-pill { padding: 0.28rem 0.75rem; border: 1.5px solid #c8d8da; border-radius: 6px; background: white; color: #555; font-size: 0.82rem; font-weight: 500; cursor: pointer; text-decoration: none; transition: all 0.15s; }
.mpw-year-pill:hover:not(.mpw-year-active) { border-color: var(--primary-color); color: var(--primary-color); }
.mpw-year-active { background: var(--primary-color); border-color: var(--primary-color); color: white; font-weight: 600; }

.mpw-totals-toggle { display: flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; font-weight: 500; color: #555; cursor: pointer; margin-left: auto; user-select: none; white-space: nowrap; }
.mpw-totals-toggle input[type="checkbox"] { cursor: pointer; accent-color: var(--primary-color); width: 14px; height: 14px; }

@media (max-width: 900px) {
  .mpw-dept-bar-grid { grid-template-columns: 1fr; }
}

/* ===== Workflow submission/review pages ===== */
.wf-form { display: flex; flex-direction: column; gap: 14px; max-width: 780px; }

/* Label-beside-field rows for the "General Info"/Details sections (Title/Journal/DOI/
   Link/Comment) — deliberately flexbox, not a CSS grid: every label gets the same fixed
   width (`.wf-field-unit__label`), so the *first* field-unit in any row — whether that
   row holds one field or several — always starts its editbox at the same x-offset,
   without forcing every row into the same column count or ratio. A row's own fields
   split available width via plain flex-grow (`--grow2`/`--grow3` below, e.g. 2:3 for a
   40/60 DOI/Link split), not equal grid tracks. */
.wf-field-stack { display: flex; flex-direction: column; gap: 12px; }
.wf-field-row { display: flex; gap: 20px; }
.wf-field-unit { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wf-field-unit--top { align-items: flex-start; }
.wf-field-row > .wf-field-unit { flex: 1 1 0; }
.wf-field-row > .wf-field-unit.wf-field-unit--grow2 { flex-grow: 2; }
.wf-field-row > .wf-field-unit.wf-field-unit--grow3 { flex-grow: 3; }
.wf-field-unit__label { flex: 0 0 100px; font-size: 0.85rem; font-weight: 500; color: #444; white-space: nowrap; }
.wf-field-unit__field { flex: 1 1 auto; min-width: 0; }

/* Research Thrust's label ("Research Thrust" is wider than every other label on this page)
   deliberately does NOT reuse `.wf-field-unit__label` — the per-page 80px override below is
   a same-specificity compound selector (`.wf-form--publication .wf-field-unit__label`), so a
   same-specificity modifier on that shared class would only win by source order rather than
   intent. A standalone class sidesteps the question entirely. */
.wf-rt-label { flex: 0 0 150px; font-size: 0.85rem; font-weight: 500; color: #444; white-space: nowrap; }

/* Two-of-three-columns row: a CSS Grid instead of `.wf-field-row`, so the first field's
   editbox (DOI on Publications, IP Number on Patents) lands in exactly one of the same
   three equal tracks the date row divides its own remaining width into (same label-column
   width + gap, reused below) — pixel-identical to that page's first date box, not just
   visually close. The second field's label+field (Link / Assignee) span the other two
   tracks together; its label keeps the same fixed-width box as every other label on the
   page, just centered within it rather than shrunk to content, so it doesn't wedge tight
   against the first field's editbox. */
.wf-thirds-row { display: grid; grid-template-columns: 100px repeat(3, 1fr); gap: 14px; align-items: center; }
.wf-thirds-row > input.pw-input { min-width: 0; }
.wf-thirds-row__span2 { grid-column: span 2; display: flex; align-items: center; gap: 8px; min-width: 0; }
.wf-thirds-row__span2 .wf-field-unit__label { text-align: center; }

/* Per-page label-width overrides — different forms can tune their own column width without
   touching the 100px default the others still use. Both Publications' and Patents' own
   labels measure well under 80px (Patents' longer ones — "Country of Filing *", "IP
   Number" — already get the placeholder/shortened-label treatment below rather than
   pushing the column wider). */
.wf-form--publication .wf-field-unit__label,
.wf-form--patent .wf-field-unit__label { flex: 0 0 80px; }
/* Matches `.wf-field-unit`'s own label-to-field gap, so the invisible spacer + this gap
   reproduces the exact same offset a real label produces — see `.wf-date-row` below. */
.wf-form--publication .wf-date-row,
.wf-form--patent .wf-date-row { gap: 10px; }
/* Same label width + gap as the date-row override above — this is what guarantees the
   first field's column and the first date box resolve to the same pixel width. */
.wf-form--publication .wf-thirds-row,
.wf-form--patent .wf-thirds-row { grid-template-columns: 80px repeat(3, 1fr); gap: 10px; }

/* The three date fields are unchanged from before — label above field, own row, equal
   thirds — the user confirmed those are fine as they are. A plain flex row (not the grid
   this used to lean on) keeps that "equal thirds" behavior without pulling in a whole
   grid-template just for one row. On both Publications and Patents, a leading spacer (an
   empty `.wf-field-unit__label` — reusing that class, not a hardcoded width, so it
   automatically tracks the override above if that width ever changes again) pushes the
   first date field's input to start at the same x-offset as every other field's input on
   that page, at the cost of compressing the three date boxes into the remaining width and
   leaving that spacer's width empty on the row's left. */
.wf-date-row { display: flex; gap: 14px; }
.wf-date-row > .pw-label { flex: 1 1 0; min-width: 0; }
/* Reserves the readout's line height whether or not it currently holds text, so picking a
   date doesn't shift anything below it down by a line. Scoped to this one modifier rather
   than added to `.pw-hint` generally, which is also used for hint text that's fine
   without a reserved slot. */
.wf-date-readout { display: block; min-height: 1.2em; }

/* "Authors *" label and the author picker share one row above the tab strip/detail panel —
   the picker now *adds* a co-author (see workflow-authors.js) rather than filling in
   whichever tab happens to be selected, so it reads more naturally as a peer of the
   section label than as a field inside the currently-selected author's own detail card. */
.wfauthors-header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 8px; flex-wrap: wrap; }
.wf-authors { border: 1px solid #e0e0e0; border-radius: 8px; padding: 14px; background: #fafafa; }

/* Tab strip — one button per author/inventor, click to select; "+ Add" always last. */
.wfauthor-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.wfauthor-tab {
  padding: 6px 14px; border: 1px solid #d0d0d0; border-radius: 16px; background: #fff;
  color: #444; font-size: 0.82rem; cursor: pointer; max-width: 180px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.wfauthor-tab:hover { border-color: #115F66; }
.wfauthor-tab--selected { background: #115F66; border-color: #115F66; color: #fff; font-weight: 600; }
.wfauthor-tab--add { border-style: dashed; color: #115F66; }

/* Detail panel — editable fields for whichever tab is currently selected. */
.wfauthor-detail { display: flex; flex-direction: column; gap: 10px; background: #fff; border: 1px solid #e0e0e0; border-radius: 6px; padding: 14px; }
.wfauthor-detail__row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.wfauthor-detail__row .pw-label { flex: 1 1 160px; }
.wfauthor-row__corresponding { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: #444; white-space: nowrap; }

.wf-status-badge { display: inline-block; padding: 2px 10px; border-radius: 12px; background: #e8f4f5; color: #115F66; font-weight: 600; font-size: 0.8rem; }
.wf-status-pending  { color: #b8860b; font-weight: 600; }
.wf-status-approved { color: #2e7d32; font-weight: 600; }
.wf-status-rejected { color: #b71c1c; font-weight: 600; }
.wf-status-returned  { color: #b8860b; font-weight: 600; }
.wf-status-ghosted  { color: #999; font-style: italic; }

.wf-action-form { max-width: 480px; margin-top: 16px; padding-top: 16px; border-top: 1px solid #e0e0e0; }
.wf-history { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 0.85rem; }
.wf-history li { padding-bottom: 8px; border-bottom: 1px solid #f0f0f0; }
.wf-history li:last-child { border-bottom: none; }

/* Attachment picker — drop zone, removable file list, inline preview. */
.wfattach { display: flex; flex-direction: column; gap: 12px; }
.wfattach-zone {
  border: 2px dashed #c8d8da; border-radius: 8px; padding: 20px; text-align: center;
  cursor: pointer; background: #fafafa; transition: border-color 0.15s, background 0.15s;
}
.wfattach-zone:hover, .wfattach-zone--dragover { border-color: #115F66; background: #eef6f7; }
.wfattach-zone__text { font-weight: 600; color: #115F66; }
.wfattach-zone__hint { color: #888; font-size: 0.82rem; margin-left: 6px; }
/* Single column, full width of the attach zone above it — the list stacks first, then the
   preview sits below the last item, rather than competing side-by-side for width (a wide
   PDF viewer reads much better than a half-width one, and long filenames no longer need
   to be squeezed into a narrow list column either). */
.wfattach-columns { display: flex; flex-direction: column; gap: 12px; }
.wfattach-list { display: flex; flex-direction: column; gap: 6px; }
.wfattach-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: #fff;
  border: 1px solid #e0e0e0; border-radius: 6px; font-size: 0.85rem; cursor: pointer;
}
.wfattach-item:hover { border-color: #115F66; }
.wfattach-item--selected { border-color: #115F66; background: #eef6f7; }
.wfattach-item__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wfattach-item__size { color: #888; font-size: 0.78rem; white-space: nowrap; }
.wfattach-item__remove { background: none; border: none; color: #b71c1c; cursor: pointer; font-size: 0.9rem; padding: 2px 6px; }
.wfattach-item__remove:hover { background: #fdecea; border-radius: 4px; }
.wfattach-preview { min-height: 200px; border: 1px solid #e0e0e0; border-radius: 6px; background: #f5f5f5; display: flex; align-items: center; justify-content: center; }
.wfattach-preview__embed { width: 100%; height: 400px; border: none; }
.wfattach-preview__embed--compact { height: 280px; margin-top: 6px; display: block; }
.wfattach-preview__empty { color: #999; font-size: 0.85rem; padding: 20px; }
.wf-existing-attachments { display: flex; flex-direction: column; gap: 10px; }
.wf-existing-attachment { padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
.wf-existing-attachment:last-child { border-bottom: none; }