/* ===== Level 1: Named Palette Tokens (carried over from CpgDashboardV2) ===== */
:root {
  --color-turquoise:   rgb(17,  95,  102);
  --color-green:       rgb(0,   151, 103);
  --color-beige:       rgb(236, 224, 199);
  --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;
}
.user-name {
  font-size: 0.875rem;
  opacity: 0.9;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.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; }
.pw-label       { 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); }
.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; }

/* ===== 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-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; }

.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; }
.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; }
}