:root {
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

/* The native `hidden` attribute is UA-stylesheet-origin display:none,
   which loses to any author rule (e.g. .field-label's own `display:
   block`) that would otherwise apply to the same element - this makes
   `hidden` actually win everywhere, so JS can rely on toggling it. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at top, #1e2430 0%, #10131a 60%);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #f2f3f5;
}

body.layout-centered {
  display: flex;
  align-items: center;
  justify-content: center;
}

.card {
  background: #1a1e27;
  border: 1px solid #2a2f3a;
  border-radius: 16px;
  padding: 48px 40px;
  width: 100%;
  max-width: 380px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.login-card {
  position: relative;
  overflow: hidden;
  border-color: #363d52;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(185, 154, 103, 0.15),
    0 0 50px rgba(185, 154, 103, 0.15);
}

.login-card::before {
  content: '';
  position: absolute;
  top: -70%;
  left: 50%;
  transform: translateX(-50%);
  width: 220%;
  height: 220%;
  background: radial-gradient(circle, rgba(185, 154, 103, 0.22) 0%, transparent 60%);
  pointer-events: none;
}

.login-badge {
  position: relative;
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 18px;
  background: linear-gradient(135deg, #b99a67, #c8ad7d);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  color: #fff;
  box-shadow: 0 12px 30px rgba(185, 154, 103, 0.45);
}

.login-card h1,
.login-card .subtitle {
  position: relative;
}

.login-card h1 {
  font-size: 1.5rem;
  line-height: 1.3;
}

.avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  margin-bottom: 16px;
  border: 2px solid #b99a67;
}

.loading-spinner {
  width: 36px;
  height: 36px;
  margin: 0 auto;
  border: 3px solid #2a2f3a;
  border-top-color: #b99a67;
  border-radius: 50%;
  animation: nb-spin 0.8s linear infinite;
}

@keyframes nb-spin {
  to {
    transform: rotate(360deg);
  }
}

h1 {
  margin: 0 0 8px;
  font-size: 1.6rem;
}

.subtitle {
  color: #a3a9b7;
  margin: 0 0 28px;
}

.app-version {
  text-align: center;
  color: #5a6070;
  font-size: 0.75rem;
  padding: 24px 0 8px;
}

.error {
  background: #3a1e22;
  border: 1px solid #5c2a30;
  color: #f2a3ab;
  border-radius: 8px;
  padding: 10px 14px;
  margin: 0 0 20px;
  font-size: 0.9rem;
}

.notice-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: #3a3520;
  border: 1px solid #5c531f;
  border-radius: 8px;
  padding: 10px 14px;
  margin: 0 0 20px;
  font-size: 0.9rem;
  color: #e8c76b;
}

.notice-bar span {
  flex: 1;
  min-width: 200px;
  font-weight: 600;
}

.notice-bar button {
  width: auto;
  margin-top: 0;
}

.success {
  background: #1e3a26;
  border: 1px solid #2a5c38;
  color: #a3f2b8;
  border-radius: 8px;
  padding: 10px 14px;
  margin: 0 0 20px;
  font-size: 0.9rem;
}

.discord-btn,
.logout-btn {
  display: inline-block;
  width: 100%;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease;
}

.discord-btn {
  background: #b99a67;
  color: #fff;
}

.discord-btn:hover {
  background: #8a6a3e;
}

.logout-btn {
  background: #2a2f3a;
  color: #f2f3f5;
}

.logout-btn:hover {
  background: #363c48;
}

form {
  margin: 0 0 12px;
}

.text-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #2a2f3a;
  background: #10131a;
  color: #f2f3f5;
  margin-bottom: 12px;
  font-size: 1rem;
  font-family: inherit;
}

/* nbApplyCardHtml (views.js) - an alternative to the file picker right
   below it on the Apply form: click/focus this, then Ctrl+V a screenshot
   straight from the clipboard. */
.paste-dropzone {
  border: 1px dashed #3a4150;
  border-radius: 8px;
  padding: 14px 12px;
  margin-bottom: 10px;
  text-align: center;
  font-size: 0.85rem;
  color: #9aa1ad;
  cursor: text;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.paste-dropzone:hover,
.paste-dropzone:focus {
  border-color: #b99a67;
  color: #f2f3f5;
  outline: none;
}

.code-box {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 2px;
  background: #10131a;
  border: 1px solid #2a2f3a;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
  color: #b99a67;
}

.hint {
  color: #a3a9b7;
  font-size: 0.9rem;
  margin-bottom: 16px;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 32px;
  border-bottom: 1px solid #2a2f3a;
}

.brand {
  font-weight: 700;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.search-wrap {
  position: relative;
  width: 260px;
}

.search-input {
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #2a2f3a;
  background: #10131a;
  color: #f2f3f5;
  font-size: 0.9rem;
  font-family: inherit;
}

.search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #1a1e27;
  border: 1px solid #2a2f3a;
  border-radius: 10px;
  overflow: hidden;
  z-index: 10;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.search-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  color: #f2f3f5;
  text-decoration: none;
  font-size: 0.9rem;
}

.search-result:hover {
  background: #10131a;
}

.search-result img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Same look as the topbar staff search, reused for the Payroll Admin
   member picker - a <button> instead of an <a>, since picking a result
   fills a form field instead of navigating away. */
.member-search-wrap {
  position: relative;
}

button.search-result {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.search-result-empty {
  padding: 8px 12px;
  margin: 0;
  color: #a3a9b7;
  font-size: 0.85rem;
}

/* The Host/Co-Host picker's pinned "TRAINEE" row (and, once in trainee
   mode, its "back to staff search" counterpart) - always the first row in
   the results dropdown, styled as a distinct action rather than a normal
   avatar+username result. */
.search-result-pinned {
  color: #a3a9b7;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  border-bottom: 1px solid #2a2f3a;
}

.search-result-pinned:hover {
  color: #f2f3f5;
}

.status-pill {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  flex-shrink: 0;
}

.status-pill.pending {
  color: #e0a83c;
  background: rgba(224, 168, 60, 0.14);
}

.status-pill.paid {
  color: #3ba55d;
  background: rgba(59, 165, 93, 0.14);
}

.bulk-payroll-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

.bulk-select-all {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #a3a9b7;
  font-size: 0.85rem;
  cursor: pointer;
}

.bulk-select-checkbox {
  margin-right: 4px;
  flex-shrink: 0;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
  flex-shrink: 0;
}

.logout-link {
  color: #a3a9b7;
  text-decoration: none;
  font-size: 0.9rem;
}

.back-to-me-link {
  color: #b99a67;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
}

.back-to-me-link:hover {
  color: #8a6a3e;
}

.logout-link:hover {
  color: #f2f3f5;
}

.admin-link {
  color: #b99a67;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
}

.admin-link:hover,
.admin-link.active {
  color: #8a6a3e;
  text-decoration: underline;
}

.admin-dropdown {
  position: relative;
}

.admin-dropdown-summary {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #b99a67;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.admin-dropdown-summary::-webkit-details-marker {
  display: none;
}

.admin-dropdown-summary::after {
  content: '\25BE';
  font-size: 0.7rem;
  transition: transform 0.15s ease;
}

.admin-dropdown[open] .admin-dropdown-summary::after {
  transform: rotate(180deg);
}

.admin-dropdown-summary:hover,
.admin-dropdown-summary.active {
  color: #8a6a3e;
  text-decoration: underline;
}

.admin-dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 190px;
  padding: 6px;
  background: #181c25;
  border: 1px solid #262c3d;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 50;
}

.admin-dropdown-item {
  color: #f2f3f5;
  text-decoration: none;
  font-size: 0.9rem;
  padding: 8px 10px;
  border-radius: 6px;
  white-space: nowrap;
}

.admin-dropdown-item:hover {
  background: #232838;
}

.admin-dropdown-item.active {
  color: #caa66a;
  background: #3a3520;
}

.admin-dropdown-section {
  margin: 4px 0 0;
  padding: 8px 10px 2px;
  border-top: 1px solid #262c3d;
  color: #6b7280;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.topbar-form {
  margin: 0;
}

.view-as-link {
  background: none;
  border: none;
  color: #a3a9b7;
  text-decoration: underline;
  font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer;
  padding: 0;
}

.view-as-link:hover {
  color: #f2f3f5;
}

.view-as-badge {
  background: #3a3520;
  border: 1px solid #5c5220;
  color: #e8c76b;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: inherit;
  border-radius: 999px;
  padding: 4px 12px;
  cursor: pointer;
}

.view-as-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #3a3520;
  color: #e8c76b;
  font-size: 0.85rem;
  padding: 8px 16px;
  text-align: center;
}

.view-as-banner-exit {
  background: none;
  border: 1px solid #e8c76b;
  color: #e8c76b;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: inherit;
  border-radius: 999px;
  padding: 3px 10px;
  cursor: pointer;
  flex-shrink: 0;
}

.view-as-banner-exit:hover {
  background: #e8c76b;
  color: #10131a;
}

.dashboard {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}

.profile-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 28px;
}

.hero-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 2px solid #b99a67;
  flex-shrink: 0;
  object-fit: cover;
  background: #10131a;
}

.profile-hero h1 {
  margin: 0 0 8px;
}

.job-title {
  display: inline-block;
  background: #2a2f3a;
  color: #c7ccd8;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid #2a2f3a;
  padding-bottom: 16px;
  margin-bottom: 24px;
}

.tab {
  padding: 8px 16px;
  border-radius: 8px;
  color: #a3a9b7;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  transition: background 0.15s ease, color 0.15s ease;
}

.tab:hover {
  background: #1a1e27;
  color: #f2f3f5;
}

.tab.active {
  background: #b99a67;
  color: #fff;
}

.content-card {
  background: #1a1e27;
  border: 1px solid #2a2f3a;
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 20px;
}

.content-card:last-child {
  margin-bottom: 0;
}

.content-card h2 {
  margin: 0 0 16px;
}

/* Your Applications (nbApplyPage, views.js) - a signed-in applicant's own
   past submissions, status + the exact rejection message if they got one. */
.nb-my-application { padding: 12px 0; border-bottom: 1px solid #2a2f3a; }
.nb-my-application:last-child { border-bottom: none; padding-bottom: 0; }
.nb-my-application:first-child { padding-top: 0; }

.ops-eyebrow {
  color: #8a6a3e;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 8px;
}

.ops-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.ops-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #1a1e27;
  border: 1px solid #2a2f3a;
  border-radius: 16px;
  padding: 24px;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.ops-tile:hover {
  border-color: #b99a67;
  transform: translateY(-2px);
}

.ops-tile-title {
  color: #f2f3f5;
  font-size: 1.1rem;
  font-weight: 700;
}

.ops-tile-desc {
  color: #a3a9b7;
  font-size: 0.85rem;
}

.ops-footer-links {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.ops-footer-dot {
  color: #4b5160;
}

.stats-row {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}

.week-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  margin-bottom: 20px;
}

.week-nav-link {
  padding: 6px 14px;
  border-radius: 8px;
  color: #f2f3f5;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  background: #2a2f3a;
  transition: background 0.15s ease;
}

.week-nav-link:hover {
  background: #363c4a;
}

.week-nav-disabled {
  color: #5b6270;
  background: transparent;
  cursor: default;
}

.week-nav-label {
  color: #a3a9b7;
  font-size: 0.85rem;
  font-weight: 600;
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.calendar-header h2 {
  margin: 0;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 8px;
  color: #a3a9b7;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: center;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.calendar-cell {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #10131a;
  color: #f2f3f5;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.15s ease;
}

.calendar-cell:hover {
  background: #1a1e27;
}

.calendar-cell-empty {
  background: transparent;
}

.calendar-cell.has-tasks {
  background: #3a3520;
}

.calendar-cell.has-tasks:hover {
  background: #51462f;
}

.calendar-cell.today .calendar-day-number {
  color: #c8ad7d;
}

.calendar-cell.selected {
  box-shadow: 0 0 0 2px #b99a67;
}

.calendar-day-number {
  font-size: 0.9rem;
}

.calendar-task-dot {
  position: absolute;
  bottom: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #b99a67;
}

.stat-card {
  flex: 1;
  padding: 24px 28px;
  margin-bottom: 0;
}

.greeting-card {
  flex: 3;
  padding: 24px 28px;
  margin-bottom: 0;
}

.stat-card h3 {
  margin: 0 0 8px;
  font-size: 0.85rem;
  line-height: 1.2;
  color: #a3a9b7;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-number {
  font-size: 2.2rem;
  font-weight: 700;
  color: #b99a67;
}

.quota-track {
  width: 100%;
  height: 14px;
  background: #10131a;
  border-radius: 999px;
  overflow: hidden;
  margin: 12px 0;
}

.quota-fill {
  height: 100%;
  background: #b99a67;
  border-radius: 999px;
}

.quota-fill.quota-complete {
  background: #3ba55c;
}

.quota-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 16px 0;
}

.quota-metrics--single {
  grid-template-columns: 1fr;
}

.quota-metric-card {
  background: #10131a;
  border: 1px solid #2a2f3a;
  border-left: 3px solid #b99a67;
  border-radius: 12px;
  padding: 18px 20px;
}

.quota-metric-card--complete {
  border-left-color: #3ba55c;
}

.quota-metric-card .quota-track {
  margin: 10px 0;
}

.quota-metric-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.quota-metric-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #a3a9b7;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.quota-metric-fraction {
  font-size: 1.05rem;
  font-weight: 700;
  color: #f2f3f5;
}

.quota-metric-status {
  margin: 0;
  font-size: 0.85rem;
  color: #a3a9b7;
}

.quota-metric-card--complete .quota-metric-status {
  color: #3ba55c;
  font-weight: 600;
}

.person-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.person-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #10131a;
}

.person-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #b99a67;
  flex-shrink: 0;
}

.person-name {
  font-weight: 600;
  flex: 1;
}

.member-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.member-cell .person-avatar {
  width: 28px;
  height: 28px;
}

.person-date {
  color: #a3a9b7;
  font-size: 0.85rem;
}

.online-indicator {
  color: #3ba55c;
  font-weight: 600;
}

.timeoff-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.field-label {
  display: block;
  font-size: 0.85rem;
  color: #a3a9b7;
  margin-bottom: 4px;
}

.field-label .text-input {
  margin-top: 6px;
}

textarea.text-input {
  resize: vertical;
  font-family: inherit;
}

.logbook-entry {
  background: #10131a;
  border: 1px solid #2a2f3a;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 8px;
}

.logbook-entry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.logbook-entry-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logbook-delete-form {
  margin: 0;
}

.logbook-delete-btn {
  background: none;
  border: none;
  color: #a3a9b7;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}

.logbook-delete-btn:hover {
  color: #f2a3ab;
}

.logbook-details {
  margin: 0 0 8px;
  color: #f2f3f5;
  white-space: pre-wrap;
}

.logbook-redacted {
  color: #a3a9b7;
  font-style: italic;
}

.logbook-private-note {
  margin: 0 0 8px;
  color: #e8c76b;
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.logbook-hidden-hint {
  margin: -4px 0 0;
  color: #e8c76b;
}

.logbook-meta {
  margin: 0;
  color: #a3a9b7;
  font-size: 0.8rem;
}

.logbook-type-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.logbook-warning {
  background: #3a3520;
  color: #e8c76b;
}

.logbook-suspension {
  background: #3a2a1a;
  color: #f2a35c;
}

.logbook-note {
  background: #273247;
  color: #d3bd98;
}

.logbook-termination {
  background: #3a1e22;
  color: #f2a3ab;
}

.logbook-operational-notice {
  background: #3a3520;
  color: #e8c76b;
}

.logbook-hidden-note {
  background: #2a1a1a;
  color: #e86b6b;
}

.logbook-attachment {
  margin: 0 0 8px;
}

.logbook-attachment .small-btn {
  display: inline-block;
}

.timeoff-form .discord-btn {
  width: auto;
  align-self: flex-start;
  margin-top: 8px;
}

.button-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.button-row .discord-btn,
.button-row .logout-btn {
  width: auto;
  margin-top: 0;
}

.requests-table {
  width: 100%;
  border-collapse: collapse;
}

.requests-table th,
.requests-table td {
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid #2a2f3a;
  font-size: 0.9rem;
}

.requests-table th {
  color: #a3a9b7;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.requests-table tr:last-child td {
  border-bottom: none;
}

.status-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
}

.status-pending {
  background: #3a3520;
  color: #e8c76b;
}

.status-approved {
  background: #1e3a24;
  color: #6be89a;
}

.status-denied {
  background: #3a1e22;
  color: #f2a3ab;
}

.status-cancelled {
  background: #2a2f3a;
  color: #a3a9b7;
}

.status-declined {
  background: #3a2a1e;
  color: #f2b366;
}

.decided-by {
  margin: 4px 0 0;
  color: #a3a9b7;
  font-size: 0.75rem;
}

.actions-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.actions-cell form {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.small-btn {
  width: auto;
  padding: 6px 14px;
  font-size: 0.85rem;
}

.small-input {
  width: 64px;
  margin: 0;
  padding: 6px 8px;
  font-size: 0.85rem;
}

.edit-dates-form {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.edit-dates-form input[type="date"] {
  width: 138px;
}

.trainee-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.trainee-row .text-input {
  margin: 0;
}

.trainee-row input.text-input {
  flex: 1;
  min-width: 140px;
}

.trainee-row select.text-input {
  flex: 0 0 90px;
  width: auto;
}

.candidate-card {
  background: #10131a;
  border: 1px solid #2a2f3a;
  border-left: 3px solid #2a2f3a;
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 14px;
  transition: border-left-color 0.15s ease;
}

/* Left-edge accent mirrors the live status badge - green/red/amber, same
   colors as .status-approved/.status-denied/.status-pending's own text
   color, so a whole row of cards reads at a glance without hunting for
   the small badge in each header. */
.candidate-card--pass {
  border-left-color: #6be89a;
}

.candidate-card--fail {
  border-left-color: #f2a3ab;
}

.candidate-card--void {
  border-left-color: #e8c76b;
}

.candidate-card--pending {
  border-left-color: #6b7280;
}

.candidate-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.candidate-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #1a1e27;
  border: 2px solid #b99a67;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: #f2f3f5;
  flex-shrink: 0;
}

.candidate-index {
  font-weight: 700;
  color: #f2f3f5;
  margin-right: auto;
}

.candidate-status-badge {
  text-transform: capitalize;
}

.candidate-section-label {
  color: #8a6a3e;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 14px 0 8px;
}

.candidate-card > .candidate-grid:first-of-type,
.candidate-card > .candidate-section-label:first-of-type {
  margin-top: 0;
}

.candidate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 12px;
  margin-bottom: 4px;
}

.candidate-grid .field-label,
.candidate-card > .field-label {
  margin-bottom: 0;
}

.candidate-grid .text-input,
.candidate-card > .field-label .text-input {
  margin-bottom: 0;
}

.edit-amount-form {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.edit-reason-input {
  flex: 1;
  min-width: 160px;
  margin: 0;
  padding: 6px 8px;
  font-size: 0.85rem;
}

.track-select {
  width: auto;
  margin: 0;
  padding: 6px 8px;
  font-size: 0.85rem;
}

.trainee-stage-list {
  list-style: none;
  margin: 12px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.trainee-stage {
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.9rem;
  border: 1px solid transparent;
}

.trainee-stage.done {
  opacity: 0.6;
  text-decoration: line-through;
}

.trainee-stage.current {
  font-weight: 600;
  border-color: #b99a67;
}

.trainee-stage.passed {
  font-weight: 600;
  color: #f2f3f5;
  border-color: #3ba55d;
}

.trainee-stage.upcoming {
  opacity: 0.6;
}

.hosting-task-list {
  list-style: none;
  margin: 12px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

.hosting-task-item {
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.9rem;
  border: 1px solid transparent;
}

.hosting-task-item.signed {
  color: #f2f3f5;
  border-color: #3ba55d;
}

.hosting-task-item.pending {
  opacity: 0.6;
}

.trainee-links {
  margin: 8px 0;
  padding-left: 20px;
  text-align: left;
}

.trainee-links li {
  margin-bottom: 6px;
}

.trainee-links a {
  color: #b99a67;
}

.onboarding-card {
  max-width: 520px;
}

.onboarding-body {
  text-align: left;
}

.onboarding-terms-text {
  color: #f2f3f5;
  line-height: 1.5;
  margin: 0 0 16px;
}

.onboarding-agree {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
  font-weight: normal;
  margin-bottom: 16px;
}

.small-datetime {
  width: 150px;
  margin: 0;
  padding: 6px 8px;
  font-size: 0.8rem;
}

.arrow-sep {
  color: #a3a9b7;
}

.inline-time-form {
  flex-wrap: wrap;
}

.table-scroll {
  overflow-x: auto;
}

.danger-btn {
  background: #7a2530;
  color: #fff;
}

.danger-btn:hover {
  background: #932c39;
}

.subsection-title {
  margin: 24px 0 12px;
  font-size: 1rem;
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.activity-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #10131a;
}

.activity-icon {
  font-size: 1.1rem;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.activity-minutes {
  font-weight: 600;
  flex: 1;
}

.activity-date {
  color: #a3a9b7;
  font-size: 0.85rem;
}

.dev-task-entry {
  border-radius: 10px;
  background: #10131a;
  overflow: hidden;
}

.dev-task-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}

.dev-task-summary::-webkit-details-marker {
  display: none;
}

.dev-task-summary::after {
  content: '\25B8';
  color: #a3a9b7;
  transition: transform 0.15s ease;
}

.dev-task-entry[open] .dev-task-summary::after {
  transform: rotate(90deg);
}

.dev-task-body {
  padding: 0 12px 12px 44px;
}

.dev-task-description {
  margin: 0 0 8px;
  color: #f2f3f5;
  white-space: pre-wrap;
}

.dev-task-meta {
  margin: 0;
  color: #a3a9b7;
  font-size: 0.85rem;
}

.dev-task-body form {
  margin-top: 10px;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 16px;
}

.team-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 8px;
  border-radius: 10px;
  background: #10131a;
  text-align: center;
}

.team-card-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #b99a67;
}

.team-card-name {
  font-weight: 600;
  font-size: 0.9rem;
  word-break: break-word;
}

.chain-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.chain-list .team-card {
  width: 160px;
}

.chain-connector {
  color: #a3a9b7;
  font-size: 1.2rem;
  line-height: 1;
}

@media (max-width: 640px) {
  .card {
    padding: 36px 24px;
  }

  .topbar {
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 16px;
  }

  .search-wrap {
    width: 100%;
    order: 3;
  }

  .topbar-right {
    gap: 10px;
    flex-wrap: wrap;
    margin-left: 0;
  }

  .dashboard {
    padding: 20px 14px 48px;
  }

  .quota-metrics {
    grid-template-columns: 1fr;
  }

  .profile-hero {
    gap: 14px;
    margin-bottom: 20px;
  }

  .hero-avatar {
    width: 64px;
    height: 64px;
  }

  .profile-hero h1 {
    font-size: 1.3rem;
  }

  .tabs {
    gap: 6px;
    padding-bottom: 12px;
    margin-bottom: 16px;
  }

  .tab {
    padding: 7px 12px;
    font-size: 0.85rem;
  }

  .content-card {
    padding: 20px;
  }

  /* Stat cards get squeezed unreadable at phone widths in a row - stack instead. */
  .stats-row {
    flex-direction: column;
  }

  .greeting-card,
  .stat-card {
    flex: none;
    width: 100%;
  }

  .stat-number {
    font-size: 1.8rem;
  }

  .actions-cell {
    flex-direction: column;
    align-items: stretch;
  }

  .actions-cell form {
    justify-content: center;
  }

  .calendar-header {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    gap: 10px;
  }

  .calendar-header h2 {
    order: -1;
    width: 100%;
    font-size: 1.2rem;
  }

  /* Long activity/logbook lines wrap onto their own line instead of
     overflowing or getting clipped against the icon/button next to them. */
  .activity-entry,
  .logbook-entry-header {
    flex-wrap: wrap;
  }

  .activity-date {
    flex-basis: 100%;
  }

  .view-as-banner {
    flex-wrap: wrap;
  }
}


/* ============================================================
   Public Network Britain site (networkbritain.com) - visually matches
   NB Internal's own look rather than having a separate identity: same
   accent blurple (#b99a67), same card/border colours (#1a1e27 /
   #2a2f3a), same muted text (#a3a9b7), same system font stack, same
   shared dark radial-gradient body background already set at the top
   of this file. Scoped under .nb-public-* only for the bits with no
   existing NB Internal equivalent (the nav bar, the hero, the clock);
   everything else (.content-card, .dev-task-description, .dev-task-meta,
   .discord-btn) is reused directly from the rest of this file for real
   consistency, not just a similar palette.
   ============================================================ */
.nb-public {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px 96px;
}

.nb-public-navbar {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 20px 0;
  border-bottom: 1px solid #2a2f3a;
  margin-bottom: 8px;
}

.nb-public-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #f2f3f5;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.05rem;
}

.nb-public-wordmark-badge {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #b99a67;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.nb-public-nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.nb-public-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  color: #a3a9b7;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  transition: background 0.15s ease, color 0.15s ease;
}

.nb-public-nav-link:hover {
  background: #1a1e27;
  color: #f2f3f5;
}

.nb-public-clock {
  margin-left: auto;
  color: #a3a9b7;
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
}

.nb-public-hero {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 32px 48px;
  padding: 56px 0 48px;
}

.nb-public-hero-text {
  flex: 1 1 380px;
  min-width: 0;
}

/* A real in-game screenshot, not a stock photo or an invented graphic -
   given the same card treatment (border/radius) as everything else on the
   page rather than bleeding to the edges, so it reads as part of this
   site's system instead of a dropped-in banner image. */
.nb-public-hero-image {
  flex: 1 1 420px;
  max-width: 560px;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid #2a2f3a;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

.nb-public-title {
  font-size: clamp(2.1rem, 5vw, 3.1rem);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 10px;
}

.nb-public-title--sm {
  font-size: 1.5rem;
  margin-bottom: 0;
}

.nb-public-lede {
  font-size: 1.05rem;
  color: #a3a9b7;
  margin: 0 0 28px;
}

.nb-public-cta {
  display: inline-flex;
  width: auto;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  font-family: inherit;
}

.nb-public-page-header {
  padding: 32px 0 28px;
}

.nb-public-training-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

/* .content-card's own margin-bottom (and the :last-child reset that zeroes
   it) is meant for cards stacked vertically one after another - inside a
   grid it only zeroes whichever card happens to be last in DOM order, not
   the last in each row, leaving mismatched bottom edges between siblings
   in the same row. The grid's own `gap` already spaces cards out, so drop
   the margin entirely here instead. */
.nb-public-training-grid .content-card {
  margin-bottom: 0;
}

.content-card h2.nb-public-training-type {
  margin: 0 0 4px;
  font-size: 1.05rem;
}

.nb-public-empty {
  padding: 56px 24px;
  text-align: center;
  border: 1px dashed #2a2f3a;
  border-radius: 16px;
  color: #a3a9b7;
}

.nb-public-footer {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #2a2f3a;
  color: #a3a9b7;
  font-size: 0.85rem;
}

/* ---- Mega-menu nav dropdown (native <details>, no JS) ---- */
.nb-public-nav-dropdown {
  position: relative;
}

.nb-public-nav-dropdown > summary {
  cursor: pointer;
  list-style: none;
}

.nb-public-nav-dropdown > summary::-webkit-details-marker {
  display: none;
}

.nb-public-nav-dropdown[open] > summary {
  background: #1a1e27;
  color: #f2f3f5;
}

.nb-public-nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  background: #1a1e27;
  border: 1px solid #2a2f3a;
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nb-public-nav-dropdown-menu a {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  color: #f2f3f5;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
}

.nb-public-nav-dropdown-menu a:hover {
  background: #10131a;
}

/* ---- Homepage hero ---- */
.nb-public-eyebrow {
  color: #a3a9b7;
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0 0 8px;
}

.nb-public-hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.nb-public-cta--secondary {
  background: transparent;
  border: 1px solid #2a2f3a;
  color: #f2f3f5;
}

.nb-public-cta--secondary:hover {
  background: #1a1e27;
}

/* ---- Stat cards (live network summary, overview page) ---- */
/* One unified bordered strip with internal dividers, not a grid of
   separately-boxed tiles - the same handful of stat cards recur across
   several pages (homepage, Network Overview, a line's own page, a
   station's own page), so this is one consistent component rather than a
   repeated "row of rounded KPI tiles" on every page. */
.nb-public-summary {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #2a2f3a;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 32px;
}

.nb-public-stat-card {
  flex: 1 1 140px;
  background: #1a1e27;
  border-right: 1px solid #2a2f3a;
  border-bottom: 1px solid #2a2f3a;
  padding: 16px 20px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nb-public-stat-card:last-child {
  border-right: none;
}

.nb-public-stat-value {
  font-size: 1.6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.nb-public-stat-value--status {
  font-size: 1rem;
}

.nb-public-stat-label {
  color: #a3a9b7;
  font-size: 0.8rem;
}

/* ---- Section headers ---- */
.nb-public-section {
  margin-bottom: 32px;
}

.nb-public-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.nb-public-section-header h2 {
  margin: 0;
  font-size: 1.2rem;
}

/* ---- Roblox / Game section ---- */
.nb-public-roblox-body {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin: 16px 0;
}

.nb-public-roblox-icon {
  border-radius: 12px;
  border: 1px solid #2a2f3a;
  flex-shrink: 0;
}

.nb-public-roblox-info {
  flex: 1 1 260px;
  min-width: 0;
}

/* The live player count pulled out as its own figure, not boxed in a
   stat-card - the one number on this page actually worth leading with. */
.nb-public-roblox-players {
  margin-left: auto;
  text-align: right;
  flex-shrink: 0;
}

.nb-public-roblox-players-value {
  display: block;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #6be89a;
}

.nb-public-roblox-players-label {
  color: #a3a9b7;
  font-size: 0.78rem;
}

/* ---- News ---- */
.nb-public-news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.nb-public-news-card {
  display: block;
  background: #1a1e27;
  border: 1px solid #2a2f3a;
  border-radius: 14px;
  padding: 20px;
  text-decoration: none;
  color: #f2f3f5;
}

.nb-public-news-category {
  display: inline-block;
  color: #b99a67;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 8px;
}

.nb-public-news-card h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
}

.nb-public-news-card p {
  margin: 0 0 12px;
  color: #a3a9b7;
  font-size: 0.9rem;
  line-height: 1.5;
}

.nb-public-news-date {
  color: #a3a9b7;
  font-size: 0.8rem;
}

/* ---- Service updates ---- */
.nb-public-update-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #2a2f3a;
}

.nb-public-update-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.nb-public-update-severity {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 5px;
  flex-shrink: 0;
  background: #6be89a;
}

.nb-public-update-severity--minor {
  background: #e8c76b;
}

.nb-public-update-severity--major,
.nb-public-update-severity--closure {
  background: #f2a3ab;
}

.nb-public-update-severity--engineering {
  background: #a3a9b7;
}

.nb-public-update-title {
  margin: 0 0 2px;
  font-weight: 700;
}

/* ---- Explore the network cards ---- */
/* One bordered strip with internal dividers - same component the stat
   cards use - rather than three separate hover-glow feature cards, which
   read as a generic "3-feature grid" landing-page template. */
.nb-public-explore-grid {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #2a2f3a;
  border-radius: 12px;
  overflow: hidden;
}

.nb-public-explore-card {
  flex: 1 1 220px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #1a1e27;
  border-right: 1px solid #2a2f3a;
  padding: 18px 20px;
  text-decoration: none;
  color: #f2f3f5;
  transition: background 0.15s ease;
}

.nb-public-explore-card:last-child {
  border-right: none;
}

.nb-public-explore-card:hover {
  background: #10131a;
}

.nb-public-explore-card svg {
  color: #b99a67;
  flex-shrink: 0;
  margin-top: 3px;
}

.nb-public-explore-card h3 {
  margin: 0 0 4px;
  font-size: 1rem;
}

.nb-public-explore-card p {
  margin: 0;
  color: #a3a9b7;
  font-size: 0.85rem;
  line-height: 1.5;
}

/* ---- Line chips/dots (shared by station/fleet/line pages) ---- */
.nb-public-line-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid #2a2f3a;
  color: #f2f3f5;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
}

.nb-public-line-chip::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--chip-colour, #b99a67);
  flex-shrink: 0;
}

.nb-public-line-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.nb-public-line-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--chip-colour, #b99a67);
  margin-right: 8px;
  vertical-align: middle;
}

/* ---- Lines directory ---- */
.nb-public-line-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.nb-public-line-card {
  display: block;
  background: #1a1e27;
  border: 1px solid #2a2f3a;
  border-top: 4px solid var(--chip-colour, #b99a67);
  border-radius: 14px;
  padding: 20px;
  text-decoration: none;
  color: #f2f3f5;
}

.nb-public-line-card h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
}

.nb-public-line-card p {
  margin: 0 0 12px;
  color: #a3a9b7;
  font-size: 0.88rem;
  line-height: 1.5;
}

.nb-public-line-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* ---- Route diagram ---- */
.nb-public-diagram {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.nb-public-diagram-connector {
  width: 24px;
  height: 2px;
  background: var(--chip-colour, #b99a67);
  flex-shrink: 0;
}

/* ---- Fleet ---- */
.nb-public-fleet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.nb-public-fleet-card {
  display: block;
  background: #1a1e27;
  border: 1px solid #2a2f3a;
  border-radius: 14px;
  padding: 20px;
  text-decoration: none;
  color: #f2f3f5;
}

.nb-public-fleet-image {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  max-height: 220px;
  border-radius: 10px;
  background: #10131a;
  border: 1px solid #2a2f3a;
  color: #b99a67;
  margin-bottom: 14px;
}

.nb-public-fleet-card h3 {
  margin: 0 0 4px;
  font-size: 1.05rem;
}

/* ---- Stations directory + search ---- */
.nb-public-search-form {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #1a1e27;
  border: 1px solid #2a2f3a;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 20px;
  color: #a3a9b7;
}

.nb-public-search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: #f2f3f5;
  font-size: 0.95rem;
  font-family: inherit;
}

.nb-public-station-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nb-public-station-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: #1a1e27;
  border: 1px solid #2a2f3a;
  border-radius: 12px;
  padding: 14px 18px;
  text-decoration: none;
  color: #f2f3f5;
}

.nb-public-station-row strong {
  margin-right: 8px;
}

.nb-public-station-row-lines {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

@media (max-width: 640px) {
  .nb-public {
    padding: 0 18px 72px;
  }

  .nb-public-clock {
    margin-left: 0;
    flex-basis: 100%;
  }

  .nb-public-hero {
    padding: 44px 0 36px;
  }
}


/* ---- NB Internal staff portal redesign ---- */
body.portal-theme {
  --portal-ink: #142033;
  --portal-muted: #6e7074;
  --portal-paper: #f5f2eb;
  --portal-line: #ded8cd;
  --portal-gold: #caa66a;
  color-scheme: light;
  background: var(--portal-paper);
  color: var(--portal-ink);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  min-height: 100vh;
}
.portal-theme .portal-shell { min-height: 100vh; }
.portal-sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 10;
  width: 310px; display: flex; flex-direction: column;
  color: #e5e8ed; background: linear-gradient(155deg, #111c28, #101923 72%, #121d28);
  border-right: 1px solid rgba(255,255,255,.09);
}
.portal-brand {
  height: 108px; padding: 0 38px; display: flex; align-items: center; gap: 20px;
  color: #e6d3b1; text-decoration: none; letter-spacing: .19em; font-size: 15px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.portal-brand-mark {
  color: #e6c791; font-family: Georgia, "Times New Roman", serif;
  font-size: 38px; letter-spacing: -.12em; line-height: 1;
}
.portal-nav {
  display: flex; flex-direction: column; gap: 4px; padding: 28px 0;
  margin: 0; border: 0;
}
.portal-nav .tab {
  height: 78px; display: flex; align-items: center; gap: 25px;
  padding: 0 34px; border: 0; border-left: 6px solid transparent; border-radius: 0;
  color: #c7cdd6; text-decoration: none; font-size: 16px; font-weight: 400;
}
.portal-nav .tab::before {
  width: 23px; display: inline-flex; justify-content: center; color: #d5dbe3;
  font-family: Arial, sans-serif; font-size: 23px; line-height: 1;
}
.portal-nav .tab:nth-child(1)::before { content: "▦"; }
.portal-nav .tab:nth-child(2)::before { content: "⌁"; }
.portal-nav .tab:nth-child(3)::before { content: "♙"; }
.portal-nav .tab:nth-child(4)::before { content: "▤"; }
.portal-nav .tab:nth-child(5)::before { content: "▣"; }
.portal-nav .tab:nth-child(6)::before { content: "□"; }
.portal-nav .tab:nth-child(7)::before { content: "♧"; }
.portal-nav .tab:nth-child(8)::before { content: "▤"; }
.portal-nav .tab:hover, .portal-nav .tab.active {
  background: rgba(255,255,255,.075); color: #fff;
}
.portal-nav .tab.active { border-left-color: var(--portal-gold); }
.portal-nav .tab.active::before { color: #e7c68e; }
.portal-sidebar-profile {
  margin-top: auto; min-height: 112px; padding: 20px 26px;
  display: flex; align-items: center; gap: 16px; border-top: 1px solid rgba(255,255,255,.13);
}
.portal-sidebar-profile img {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--portal-gold);
}
.portal-sidebar-profile strong, .portal-sidebar-profile span { display: block; }
.portal-sidebar-profile strong { color: #f5f2eb; font-size: 15px; font-weight: 500; }
.portal-sidebar-profile span { margin-top: 5px; color: #aeb6c0; font-size: 12px; }
.portal-main { min-height: 100vh; margin-left: 310px; }
.portal-topbar {
  min-height: 78px; padding: 0 44px; display: flex; align-items: center; justify-content: space-between;
  gap: 24px; border-bottom: 1px solid rgba(20,32,51,.09);
}
.portal-breadcrumb { display: flex; gap: 18px; align-items: center; font-size: 13px; letter-spacing: .14em; }
.portal-breadcrumb b { color: #958e82; font-weight: 400; }
.portal-topbar-right { display: flex; align-items: center; gap: 22px; color: var(--portal-ink); font-size: 13px; }
.portal-version { padding: 6px 14px; border: 1px solid #bda783; border-radius: 5px; }
.portal-topbar .logout-link, .portal-topbar .back-to-me-link { color: var(--portal-ink); }
.portal-topbar .admin-dropdown { position: relative; }
.portal-topbar .admin-dropdown-summary { color: var(--portal-ink); list-style: none; cursor: pointer; }
.portal-topbar .admin-dropdown-summary::-webkit-details-marker { display: none; }
.portal-topbar .admin-dropdown-menu {
  position: absolute; right: 0; top: calc(100% + 14px); z-index: 20; min-width: 220px;
  padding: 8px; border: 1px solid var(--portal-line); border-radius: 8px; background: #fffdf8;
  box-shadow: 0 12px 32px rgba(20,32,51,.15);
}
.portal-topbar .admin-dropdown-item { display: block; padding: 9px 11px; color: var(--portal-ink); text-decoration: none; }
.portal-topbar .admin-dropdown-item:hover, .portal-topbar .admin-dropdown-item.active { background: #eee8dc; }
.portal-topbar .admin-dropdown-section { margin: 8px 10px 4px; color: var(--portal-muted); font-size: 11px; }
.portal-content { width: auto; max-width: none; margin: 0; padding: 34px 44px 28px; }
.portal-content h1, .portal-content h2 { color: #101c2e; font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.035em; }
.portal-content h2 { font-size: 28px; }
.portal-content .subtitle { color: var(--portal-muted); }
.portal-content .content-card {
  padding: 24px 26px; border: 1px solid #dedbd4; border-radius: 8px;
  background: rgba(255,255,255,.16); box-shadow: none; color: var(--portal-ink);
}
.portal-content .person-row { color: var(--portal-ink); border-bottom-color: #ddd8ce; }
.portal-content .person-name, .portal-content .person-date { color: var(--portal-ink); }
.portal-content .person-row:last-child { border-bottom: 0; }
.portal-content .person-avatar { border: 0; }
.portal-content .error { color: #7b2525; background: #f8e6e2; border-color: #e4b8ae; }
.portal-content .app-version { display: none; }
.overview-heading { margin: 0 0 32px; }
.overview-heading h1 { margin: 0 0 7px; font-size: clamp(38px, 4vw, 64px); line-height: 1.08; }
.overview-heading p { margin: 0; color: #77787a; font-size: 24px; }
.overview-live-panel {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  min-height: 184px; margin-bottom: 28px; padding: 28px 64px; color: #f5f2eb;
  border-radius: 8px; background: linear-gradient(115deg, #101a26, #121d29);
}
.overview-live-stat { min-height: 128px; display: flex; flex-direction: column; justify-content: center; }
.overview-live-stat + .overview-live-stat { padding-left: 70px; border-left: 1px solid rgba(222,199,160,.8); }
.overview-live-stat strong { color: #f2d5a7; font: 400 68px/1 Georgia, "Times New Roman", serif; }
.overview-live-stat span:last-child { color: #c1c5cb; font-size: 15px; }
.overview-eyebrow, .overview-weekly-stats > div > span {
  margin-bottom: 10px; font-size: 12px; letter-spacing: .2em;
}
.overview-live-indicator { position: absolute; top: 28px; right: 38px; display: flex; align-items: center; gap: 10px; }
.overview-live-indicator i { width: 11px; height: 11px; border-radius: 50%; background: #42b87b; }
.overview-weekly-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 24px; }
.overview-weekly-stats > div { display: flex; flex-direction: column; align-items: center; padding: 14px 20px; text-align: center; }
.overview-weekly-stats > div + div { border-left: 1px solid #d9d0c1; }
.overview-weekly-stats > div > span { color: #273247; }
.overview-weekly-stats strong { color: #101c2e; font: 400 52px/1.05 Georgia, "Times New Roman", serif; }
.overview-weekly-stats small { margin-top: 7px; color: #74767b; font-size: 14px; }
.overview-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.overview-panel { min-width: 0; }
.overview-panel > header { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.overview-panel > header h2 { margin: 0 0 20px; }
.overview-panel > header a { display: flex; gap: 10px; color: #86633c; text-decoration: none; font-size: 13px; }
.overview-panel-note { margin: -12px 0 12px; color: var(--portal-muted); font-size: 12px; }
.overview-panels .person-row { min-height: 60px; padding: 10px 4px; background: transparent; }
.overview-panels .person-row .person-avatar { width: 32px; height: 32px; }
.overview-panels .leaderboard-rank { min-width: 26px; color: var(--portal-ink); }
.overview-panels .rank-first { color: var(--portal-ink); }
.view-as-banner { margin: 0 44px; color: #6d4c21; background: #f3e5ca; border-color: #dfc28e; }
.portal-topbar .view-as-badge { color: #6d4c21; }
.portal-theme .chat-widget-container { z-index: 50; }
.portal-theme .chat-widget-container iframe { max-width: calc(100vw - 20px); }
@media (max-width: 1050px) {
  .portal-sidebar { width: 245px; }
  .portal-main { margin-left: 245px; }
  .portal-brand { padding: 0 25px; }
  .portal-nav .tab { padding-left: 25px; gap: 18px; }
  .portal-topbar { padding: 0 28px; }
  .portal-content { padding: 30px 28px; }
  .overview-live-panel { padding: 24px 40px; }
  .overview-live-stat + .overview-live-stat { padding-left: 42px; }
}
@media (max-width: 760px) {
  .portal-sidebar { position: static; width: 100%; min-height: 0; }
  .portal-brand { height: 72px; padding: 0 20px; }
  .portal-nav { flex-direction: row; overflow-x: auto; gap: 0; padding: 0 8px; }
  .portal-nav .tab { flex: 0 0 auto; height: 58px; gap: 8px; padding: 0 14px; border-left: 0; border-bottom: 3px solid transparent; font-size: 13px; }
  .portal-nav .tab::before { width: auto; font-size: 18px; }
  .portal-nav .tab.active { border-bottom-color: var(--portal-gold); }
  .portal-sidebar-profile { display: none; }
  .portal-main { margin-left: 0; }
  .portal-topbar { min-height: 62px; padding: 10px 18px; align-items: flex-start; flex-direction: column; gap: 10px; }
  .portal-topbar-right { width: 100%; gap: 12px; justify-content: space-between; flex-wrap: wrap; font-size: 12px; }
  .portal-breadcrumb { font-size: 11px; }
  .portal-content { padding: 24px 18px; }
  .overview-heading { margin-bottom: 24px; }
  .overview-heading h1 { font-size: 40px; }
  .overview-heading p { font-size: 18px; }
  .overview-live-panel { min-height: 160px; padding: 22px 20px; }
  .overview-live-stat + .overview-live-stat { padding-left: 20px; }
  .overview-live-stat strong { font-size: 52px; }
  .overview-live-stat span:last-child { font-size: 12px; }
  .overview-live-indicator { top: 14px; right: 14px; font-size: 12px; }
  .overview-weekly-stats > div { padding: 12px 8px; }
  .overview-weekly-stats > div > span { font-size: 9px; letter-spacing: .12em; }
  .overview-weekly-stats strong { font-size: 36px; }
  .overview-weekly-stats small { font-size: 11px; }
  .overview-panels { grid-template-columns: 1fr; }
  .view-as-banner { margin: 0 18px; }
}

.portal-topbar-left { display: flex; align-items: center; gap: 26px; min-width: 0; }
.portal-topbar-left .search-wrap { position: relative; width: 220px; margin: 0; }
.portal-topbar-left .search-input {
  width: 100%; padding: 8px 12px; border: 1px solid #ded8cd; border-radius: 6px;
  background: rgba(255,255,255,.38); color: #142033; font-size: 13px;
}
.portal-topbar-left .search-input::placeholder { color: #85817a; }
.portal-topbar-left .search-results {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; width: 280px;
  background: #fffdf8; border: 1px solid #ded8cd; border-radius: 7px;
  box-shadow: 0 12px 28px rgba(20,32,51,.13);
}
@media (max-width: 1050px) {
  .portal-topbar-left { gap: 14px; }
  .portal-topbar-left .search-wrap { width: 170px; }
}
@media (max-width: 760px) {
  .portal-topbar-left { width: 100%; justify-content: space-between; flex-wrap: wrap; }
  .portal-topbar-left .search-wrap { width: min(220px, 55vw); }
  .portal-topbar { align-items: stretch; }
}


/* Keep legacy dashboard components in the same light surface system. */
body.portal-theme .team-card,
body.portal-theme .quota-metric-card,
body.portal-theme .person-row,
body.portal-theme .activity-entry,
body.portal-theme .dev-task-entry,
body.portal-theme .logbook-entry,
body.portal-theme .calendar-cell,
body.portal-theme .candidate-card {
  color: var(--portal-ink);
  background: #fffdf8;
  border-color: var(--portal-line);
  box-shadow: none;
}
body.portal-theme .team-card { border: 1px solid var(--portal-line); }
body.portal-theme .team-card-avatar,
body.portal-theme .person-avatar { border-color: var(--portal-gold); }
body.portal-theme .team-card-name,
body.portal-theme .quota-metric-fraction,
body.portal-theme .activity-minutes,
body.portal-theme .dev-task-summary,
body.portal-theme .dev-task-description,
body.portal-theme .logbook-details,
body.portal-theme .calendar-cell { color: var(--portal-ink); }
body.portal-theme .quota-metric-label,
body.portal-theme .quota-metric-status,
body.portal-theme .activity-date,
body.portal-theme .dev-task-meta,
body.portal-theme .logbook-meta,
body.portal-theme .person-date,
body.portal-theme .chain-connector { color: var(--portal-muted); }
body.portal-theme .quota-metric-card { border-left-color: var(--portal-gold); }
body.portal-theme .quota-metric-card--complete { border-left-color: #4a8a68; }
body.portal-theme .quota-track { background: #e7e1d6; }
body.portal-theme .quota-fill { background: #bd965f; }
body.portal-theme .quota-fill.quota-complete { background: #4a8a68; }
body.portal-theme .calendar-cell:hover { background: #eee8dd; }
body.portal-theme .calendar-cell.has-tasks,
body.portal-theme .calendar-cell.has-tasks:hover { background: #f1e5cf; }
body.portal-theme .calendar-cell.today .calendar-day-number { color: #8a683e; }
body.portal-theme .calendar-cell.selected { box-shadow: 0 0 0 2px var(--portal-gold); }
body.portal-theme .calendar-task-dot { background: #bd965f; }
body.portal-theme .logbook-warning { background: #fbf1d9; border-color: #e9d5a8; }
body.portal-theme .logbook-suspension { background: #fae9db; border-color: #e7c3a7; }
body.portal-theme .logbook-note { background: #f0eee9; border-color: #d9d0c1; color: #5e6267; }
body.portal-theme .logbook-termination { background: #f8e7e3; border-color: #e5bdb5; }
body.portal-theme .logbook-operational-notice { background: #fbf1d9; border-color: #e9d5a8; color: #70551f; }
body.portal-theme .logbook-redacted { color: var(--portal-muted); }
body.portal-theme .text-input,
body.portal-theme .search-input,
body.portal-theme select {
  color: var(--portal-ink); background: #fffdf8; border-color: var(--portal-line);
}
body.portal-theme .text-input::placeholder,
body.portal-theme .search-input::placeholder { color: #8b8984; }
body.portal-theme .search-results { color: var(--portal-ink); background: #fffdf8; border-color: var(--portal-line); }
body.portal-theme .search-result { color: var(--portal-ink); }
body.portal-theme .search-result:hover { background: #f0ebe2; }
body.portal-theme .week-nav-link { color: var(--portal-ink); background: #eee9e0; }
body.portal-theme .week-nav-link:hover { background: #e5ddcf; }
body.portal-theme .week-nav-disabled { color: #a9a49b; background: transparent; }
body.portal-theme .discord-btn { color: #fff; background: #172435; }
body.portal-theme .discord-btn:hover { background: #28394d; }
body.portal-theme .logout-btn { color: var(--portal-ink); background: #eee9e0; }
body.portal-theme .logout-btn:hover { background: #e2dacc; }
body.portal-theme .status-pending { color: #70551f; background: #fbf1d9; }
body.portal-theme .status-approved { color: #2d6845; background: #e7f1e8; }
body.portal-theme .status-denied,
body.portal-theme .status-declined { color: #8a3b31; background: #f8e7e3; }
body.portal-theme .status-cancelled { color: #5f6266; background: #ecebea; }


/* Refined editorial finish for the staff portal. */
body.portal-theme {
  --portal-paper: #f3efe6;
  --portal-ink: #172337;
  --portal-muted: #74736f;
  --portal-line: #d9d0c1;
  --portal-gold: #c3a16b;
  background:
    radial-gradient(ellipse at 82% 4%, rgba(213, 193, 156, .12), transparent 30rem),
    var(--portal-paper);
}
.portal-theme .portal-sidebar {
  background: linear-gradient(160deg, #111d2a 0%, #0d1722 72%, #131e2a 100%);
  box-shadow: 5px 0 24px rgba(18, 27, 38, .08);
}
.portal-theme .portal-brand {
  color: #e7d6b8;
  letter-spacing: .23em;
}
.portal-theme .portal-brand-mark {
  text-shadow: 0 0 22px rgba(205, 171, 111, .22);
}
.portal-theme .portal-nav .tab.active {
  background: linear-gradient(90deg, rgba(197, 163, 105, .17), rgba(255,255,255,.025));
  box-shadow: inset 0 1px rgba(255,255,255,.035), inset 0 -1px rgba(255,255,255,.035);
}
.portal-theme .portal-topbar {
  background: rgba(250, 248, 242, .82);
  backdrop-filter: blur(12px);
}
.portal-theme .portal-breadcrumb { color: #374257; }
.portal-theme .portal-version {
  color: #765d36;
  background: linear-gradient(180deg, #fffdf8, #f1e9dc);
  border-color: #cbb68f;
}
.portal-theme .portal-content {
  max-width: 1680px;
  margin: 0 auto;
}
.portal-theme .portal-content h1,
.portal-theme .portal-content h2 {
  color: #132035;
  font-family: "Baskerville", "Palatino Linotype", Georgia, serif;
  letter-spacing: -.045em;
}
.portal-theme .portal-content .content-card {
  position: relative;
  overflow: hidden;
  padding: 26px 28px;
  border: 1px solid #d9d0c1;
  border-radius: 11px;
  background: linear-gradient(148deg, rgba(255,253,248,.96), rgba(248,245,238,.94));
  box-shadow: 0 12px 30px rgba(42, 37, 28, .045), inset 0 1px rgba(255,255,255,.9);
}
.portal-theme .portal-content .content-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 28px;
  right: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(190, 153, 91, .75), transparent);
}
.portal-theme .portal-content .content-card h2 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: clamp(27px, 2.25vw, 34px);
}
.portal-theme .portal-content .subtitle {
  color: #77746e;
  line-height: 1.55;
}
.portal-theme .requests-table {
  border-collapse: separate;
  border-spacing: 0;
  color: #243149;
}
.portal-theme .requests-table thead th {
  padding: 15px 14px;
  color: #878477;
  border-bottom: 1px solid #c9b99a;
  font-size: 11px;
  letter-spacing: .16em;
}
.portal-theme .requests-table tbody td {
  padding: 16px 14px;
  color: #26334a;
  border-bottom: 1px solid #e5ded2;
  vertical-align: middle;
}
.portal-theme .requests-table tbody tr:last-child td { border-bottom: 0; }
.portal-theme .requests-table tbody tr:hover td { background: rgba(219, 204, 177, .12); }
.portal-theme .small-input,
.portal-theme input[type="date"] {
  color: #1c2a40;
  background: #fffdf8;
  border: 1px solid #cfc4b2;
  border-radius: 6px;
  box-shadow: inset 0 1px 2px rgba(44, 39, 31, .035);
}
.portal-theme .small-input:focus,
.portal-theme input[type="date"]:focus {
  outline: 2px solid rgba(195, 161, 107, .35);
  border-color: #b8945b;
}
.portal-theme .discord-btn {
  background: linear-gradient(135deg, #203148, #132033);
  border: 1px solid rgba(197, 163, 105, .65);
  box-shadow: 0 3px 8px rgba(22, 34, 52, .12);
}
.portal-theme .discord-btn:hover {
  background: linear-gradient(135deg, #2a405c, #1b2b42);
}
.portal-theme .logout-btn {
  border: 1px solid #e4ddd1;
  background: linear-gradient(180deg, #fffdf8, #f1ede5);
}
.portal-theme .danger-btn {
  color: #873d35;
  border-color: #e6cbc4;
  background: #fbefec;
}
.portal-theme .danger-btn:hover { background: #f5dfda; }
.portal-theme .overview-live-panel {
  border: 1px solid rgba(202, 169, 111, .52);
  box-shadow: 0 18px 38px rgba(22, 31, 43, .12);
}
.portal-theme .overview-weekly-stats strong { text-shadow: 0 2px 0 rgba(255,255,255,.75); }
.portal-theme .overview-panel > header a {
  color: #88673b;
  letter-spacing: .025em;
}
.portal-theme .team-card {
  min-height: 170px;
  justify-content: center;
  padding: 22px 14px;
  border-radius: 12px;
  background: linear-gradient(145deg, #fffdf8, #f6f1e8);
  box-shadow: 0 8px 20px rgba(42, 37, 28, .055), inset 0 1px #fff;
}
.portal-theme .team-card-avatar {
  width: 72px;
  height: 72px;
  border-width: 2px;
  box-shadow: 0 0 0 4px rgba(195, 161, 107, .12);
}
.portal-theme .team-card-name { color: #1c2a40; font-size: .95rem; letter-spacing: .01em; }
@media (min-width: 761px) and (max-width: 1200px) {
  .portal-theme .portal-sidebar { width: 250px; }
  .portal-theme .portal-main { margin-left: 250px; }
  .portal-theme .portal-topbar {
    min-height: 0;
    padding: 13px 22px;
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }
  .portal-theme .portal-topbar-left { width: 100%; justify-content: space-between; }
  .portal-theme .portal-topbar-left .search-wrap { width: min(220px, 36%); }
  .portal-theme .portal-topbar-right {
    width: 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 14px;
    white-space: nowrap;
  }
  .portal-theme .portal-topbar-right time { white-space: nowrap; }
}


/* Phone layout: preserve comfortable reading, touch targets, and all columns. */
@media (max-width: 760px) {
  body.portal-theme .portal-brand { height: 64px; padding: 0 16px; font-size: 13px; }
  body.portal-theme .portal-brand-mark { font-size: 32px; }
  body.portal-theme .portal-nav {
    padding: 0 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  body.portal-theme .portal-nav::-webkit-scrollbar { display: none; }
  body.portal-theme .portal-nav .tab {
    height: 54px;
    flex: 0 0 auto;
    padding: 0 12px;
    gap: 7px;
    font-size: 12px;
    white-space: nowrap;
  }
  body.portal-theme .portal-content { padding: 20px 14px 32px; }
  body.portal-theme .portal-content .content-card {
    padding: 20px 16px;
    border-radius: 10px;
  }
  body.portal-theme .portal-content .content-card::before { left: 16px; right: 16px; }
  body.portal-theme .portal-content .content-card h2 { font-size: 26px; }
  body.portal-theme .portal-topbar { padding: 12px 14px; gap: 10px; }
  body.portal-theme .portal-topbar-left {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
  }
  body.portal-theme .portal-breadcrumb {
    min-width: 0;
    gap: 10px;
    font-size: 10px;
    letter-spacing: .12em;
    white-space: nowrap;
  }
  body.portal-theme .portal-topbar-left .search-wrap { width: 100%; max-width: none; }
  body.portal-theme .portal-topbar-right {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
  }
  body.portal-theme .portal-topbar-right time {
    grid-column: 1 / -1;
    white-space: nowrap;
    font-size: 12px;
  }
  body.portal-theme .portal-version { padding: 5px 9px; }
  body.portal-theme .portal-topbar .admin-dropdown-menu {
    right: 0;
    left: auto;
    width: min(280px, calc(100vw - 28px));
    min-width: 0;
    max-width: calc(100vw - 28px);
    max-height: min(70vh, 520px);
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
  }
  body.portal-theme .overview-heading { margin-bottom: 22px; }
  body.portal-theme .overview-heading h1 {
    font-size: clamp(32px, 9vw, 40px);
    line-height: 1.08;
    overflow-wrap: anywhere;
  }
  body.portal-theme .overview-heading p { font-size: 16px; line-height: 1.45; }
  body.portal-theme .overview-live-panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 0;
    padding: 44px 15px 17px;
    gap: 8px;
  }
  body.portal-theme .overview-live-stat { min-height: 104px; }
  body.portal-theme .overview-live-stat + .overview-live-stat { padding-left: 14px; }
  body.portal-theme .overview-live-stat strong { font-size: 44px; }
  body.portal-theme .overview-live-stat span:last-child { font-size: 11px; line-height: 1.35; }
  body.portal-theme .overview-eyebrow { font-size: 9px; letter-spacing: .14em; }
  body.portal-theme .overview-live-indicator { top: 14px; right: 15px; font-size: 11px; }
  body.portal-theme .overview-weekly-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin-bottom: 20px;
  }
  body.portal-theme .overview-weekly-stats > div { min-width: 0; padding: 13px 7px; }
  body.portal-theme .overview-weekly-stats > div > span {
    min-height: 2.5em;
    margin-bottom: 7px;
    font-size: 9px;
    line-height: 1.3;
    letter-spacing: .1em;
  }
  body.portal-theme .overview-weekly-stats > div + div { border-left: 1px solid #d9d0c1; }
  body.portal-theme .overview-weekly-stats > div:last-child {
    grid-column: 1 / -1;
    border-left: 0;
    border-top: 1px solid #d9d0c1;
  }
  body.portal-theme .overview-weekly-stats strong { font-size: 38px; }
  body.portal-theme .overview-weekly-stats small { font-size: 11px; }
  body.portal-theme .overview-panels { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  body.portal-theme .overview-panel > header { align-items: center; }
  body.portal-theme .overview-panel > header h2 { font-size: 24px; }
  body.portal-theme .table-scroll {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }
  body.portal-theme .requests-table { min-width: 640px; }
  body.portal-theme .requests-table th,
  body.portal-theme .requests-table td { padding: 12px 10px; }
  body.portal-theme .person-name { min-width: 0; overflow-wrap: anywhere; }
  body.portal-theme .person-date { flex-shrink: 0; }
  body.portal-theme .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body.portal-theme .team-card { min-width: 0; min-height: 148px; padding: 16px 8px; }
  body.portal-theme .team-card-name { max-width: 100%; overflow-wrap: anywhere; }
  body.portal-theme .quota-metrics { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 380px) {
  body.portal-theme .portal-nav .tab { padding: 0 9px; font-size: 11px; }
  body.portal-theme .portal-nav .tab::before { font-size: 16px; }
  body.portal-theme .portal-topbar-right { gap: 7px 9px; }
  body.portal-theme .overview-live-panel { padding-inline: 12px; }
  body.portal-theme .overview-live-stat + .overview-live-stat { padding-left: 10px; }
  body.portal-theme .overview-weekly-stats > div > span { font-size: 8px; }
}

/* Ensure the translucent header and its dropdown paint above page content. */
body.portal-theme .portal-topbar {
  position: relative;
  z-index: 40;
}

@media (max-width: 760px) {
  body.portal-theme .admin-dropdown-item {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
    padding: 11px 12px;
  }
}

/* Editorial polish for the staff overview: fewer labels, more breathing room. */
.portal-theme .overview-live-panel {
  border-radius: 14px;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(194, 159, 102, .2), transparent 42%),
    linear-gradient(118deg, #101a26, #172536);
}
.portal-theme .overview-weekly-stats {
  gap: 12px;
}
.portal-theme .overview-weekly-stats > div {
  min-width: 0;
  padding: 18px 16px;
  border: 1px solid #ded5c5;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(255,253,248,.92), rgba(246,241,231,.92));
  box-shadow: 0 8px 20px rgba(42,37,28,.035), inset 0 1px rgba(255,255,255,.9);
}
.portal-theme .overview-weekly-stats > div + div {
  border-left: 1px solid #ded5c5;
}
.portal-theme .overview-weekly-stats > div > span {
  color: #7b674a;
  font-size: 10px;
  letter-spacing: .14em;
}
.portal-theme .overview-panels {
  gap: 18px;
}
.portal-theme .overview-panel > header h2 {
  font-size: clamp(25px, 2vw, 31px);
}
@media (max-width: 760px) {
  body.portal-theme .portal-breadcrumb { display: none; }
  body.portal-theme .portal-topbar-right {
    grid-template-columns: max-content max-content;
    justify-content: space-between;
  }
  body.portal-theme .portal-version { display: none; }
  body.portal-theme .portal-nav { padding: 5px 10px; }
  body.portal-theme .portal-nav .tab {
    height: 44px;
    padding: 0 13px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12px;
  }
  body.portal-theme .portal-nav .tab.active {
    border-color: rgba(213, 181, 124, .42);
    border-bottom-color: rgba(213, 181, 124, .42);
    background: linear-gradient(135deg, rgba(197,163,105,.2), rgba(255,255,255,.045));
  }
  body.portal-theme .portal-topbar-left .search-input {
    min-height: 44px;
    border-radius: 999px;
    padding-inline: 16px;
    background: rgba(255,253,248,.78);
  }
  body.portal-theme .overview-heading {
    margin-bottom: 20px;
  }
  body.portal-theme .overview-heading::before {
    content: "";
    display: block;
    width: 38px;
    height: 2px;
    margin: 0 0 13px;
    border-radius: 2px;
    background: linear-gradient(90deg, #a8824c, rgba(195,161,107,.2));
  }
  body.portal-theme .overview-heading h1 {
    font-size: clamp(31px, 8.2vw, 38px);
    line-height: 1.06;
  }
  body.portal-theme .overview-heading p {
    max-width: 30ch;
    font-size: 15px;
  }
  body.portal-theme .overview-live-panel {
    border-radius: 14px;
    border-color: rgba(202,169,111,.62);
    box-shadow: 0 14px 30px rgba(22,31,43,.11), inset 0 1px rgba(255,255,255,.08);
  }
  body.portal-theme .overview-live-indicator {
    padding: 5px 9px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    background: rgba(255,255,255,.06);
  }
  body.portal-theme .overview-weekly-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-bottom: 20px;
  }
  body.portal-theme .overview-weekly-stats > div {
    align-items: flex-start;
    padding: 12px 9px;
    border: 1px solid #ded5c5;
    border-radius: 10px;
    text-align: left;
  }
  body.portal-theme .overview-weekly-stats > div + div {
    border-left: 1px solid #ded5c5;
  }
  body.portal-theme .overview-weekly-stats > div > span {
    min-height: 2.6em;
    margin-bottom: 4px;
    font-size: 8px;
    line-height: 1.3;
    letter-spacing: .1em;
  }
  body.portal-theme .overview-weekly-stats strong {
    font-size: 31px;
  }
  body.portal-theme .overview-weekly-stats small {
    display: none;
  }
  body.portal-theme .overview-weekly-stats > div:last-child {
    grid-column: auto;
    border-top: 1px solid #ded5c5;
  }
  body.portal-theme .overview-panels { gap: 13px; }
  body.portal-theme .portal-content .content-card {
    padding: 19px 15px;
  }
  body.portal-theme .overview-panel > header h2 { font-size: 24px; }
}
@media (max-width: 380px) {
  body.portal-theme .overview-weekly-stats { gap: 5px; }
  body.portal-theme .overview-weekly-stats > div { padding: 10px 7px; }
  body.portal-theme .overview-weekly-stats > div > span { font-size: 7px; }
  body.portal-theme .overview-weekly-stats strong { font-size: 28px; }
}



/* V2.5 full redesign — Network Britain staff workspace */
body.portal-theme {
  --portal-ink: #152336;
  --portal-muted: #747980;
  --portal-paper: #f3f0e9;
  --portal-line: #ded8cc;
  --portal-brass: #b39463;
  color-scheme: light;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--portal-ink);
  background:
    radial-gradient(ellipse at 68% 0%, rgba(209,190,157,.16), transparent 34rem),
    #f3f0e9;
  font-family: "Avenir Next", Inter, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
body.portal-theme .portal-shell { min-height: 100vh; }
body.portal-theme .portal-header {
  position: relative;
  z-index: 50;
  color: #e8ebef;
  background:
    radial-gradient(ellipse at 12% 0%, rgba(190,157,104,.1), transparent 38%),
    linear-gradient(112deg, #101a26, #152233 72%, #101a26);
  border-bottom: 1px solid rgba(224,204,170,.28);
  box-shadow: 0 8px 26px rgba(13,23,34,.09);
}
body.portal-theme .portal-header-primary {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  grid-template-rows: 68px 48px;
  align-items: center;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 clamp(20px,3.4vw,52px);
}
body.portal-theme .portal-brand {
  grid-column: 1;
  grid-row: 1;
  display: inline-flex;
  width: max-content;
  height: auto;
  align-items: center;
  gap: 16px;
  padding: 0;
  border: 0;
  color: #ead9b8;
  text-decoration: none;
  letter-spacing: .22em;
  font-size: 11px;
  font-weight: 500;
}
body.portal-theme .portal-brand-mark {
  color: #ddc18e;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 37px;
  letter-spacing: -.13em;
  line-height: 1;
}
body.portal-theme .portal-brand-name { white-space: nowrap; }
body.portal-theme .portal-profile-chip {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-left: 18px;
}
body.portal-theme .portal-profile-chip img {
  flex: 0 0 auto;
  width: 37px;
  height: 37px;
  border: 1px solid rgba(221,193,142,.75);
  border-radius: 50%;
  object-fit: cover;
}
body.portal-theme .portal-profile-copy { display: flex; min-width: 0; flex-direction: column; }
body.portal-theme .portal-profile-copy strong {
  overflow: hidden;
  color: #f3f0e9;
  font-size: 11px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.portal-theme .portal-profile-copy small {
  overflow: hidden;
  margin-top: 3px;
  color: #aeb8c3;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.portal-theme .portal-nav {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 3px;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  border: 0;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
}
body.portal-theme .portal-nav::-webkit-scrollbar { display: none; }
body.portal-theme .portal-nav .tab {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  height: 48px;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: #c5ccd4;
  text-decoration: none;
  white-space: nowrap;
  font-size: 12px;
  transition: color .16s ease, background .16s ease, border-color .16s ease;
}
body.portal-theme .portal-nav .tab::before {
  width: auto;
  color: #aab5c0;
  font-size: 15px;
}
body.portal-theme .portal-nav .tab:hover,
body.portal-theme .portal-nav .tab.active {
  color: #fff;
  background: rgba(255,255,255,.055);
}
body.portal-theme .portal-nav .tab.active { border-bottom-color: #d3b57e; }
body.portal-theme .portal-nav .tab.active::before { color: #dfc18d; }
body.portal-theme .portal-topbar {
  position: relative;
  z-index: 60;
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 1600px;
  margin: 0 auto;
  padding: 8px clamp(20px,3.4vw,52px);
  border-bottom: 1px solid rgba(21,35,54,.08);
  background: rgba(248,246,240,.82);
  color: var(--portal-ink);
}
body.portal-theme .portal-topbar-left {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  gap: clamp(16px,2.2vw,30px);
}
body.portal-theme .portal-breadcrumb {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 11px;
  color: #606873;
  font-size: 10px;
  letter-spacing: .15em;
  white-space: nowrap;
}
body.portal-theme .portal-breadcrumb b { color: #b5a78f; font-weight: 400; }
body.portal-theme .portal-topbar-left .search-wrap {
  position: relative;
  width: min(235px, 24vw);
  margin: 0;
}
body.portal-theme .portal-topbar-left .search-input {
  width: 100%;
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid #e0dace;
  border-radius: 5px;
  background: rgba(255,253,248,.8);
  color: #18283c;
  font-size: 12px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
body.portal-theme .portal-topbar-left .search-input::placeholder { color: #85837e; }
body.portal-theme .portal-topbar-left .search-input:focus {
  border-color: #b99a67;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(185,154,103,.15);
}
body.portal-theme .portal-topbar-left .search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 70;
  width: min(320px, calc(100vw - 28px));
  border: 1px solid #e0dace;
  border-radius: 8px;
  background: #fffdf8;
  box-shadow: 0 16px 36px rgba(20,32,51,.14);
}
body.portal-theme .portal-topbar-right {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 14px;
  color: var(--portal-ink);
  font-size: 11px;
}
body.portal-theme .portal-topbar-right time { white-space: nowrap; color: #626973; }
body.portal-theme .portal-version {
  padding: 5px 9px;
  border: 1px solid #cabb9f;
  border-radius: 4px;
  color: #735e3e;
  font-size: 10px;
  letter-spacing: .04em;
}
body.portal-theme .portal-topbar .logout-link,
body.portal-theme .portal-topbar .back-to-me-link,
body.portal-theme .portal-topbar .admin-dropdown-summary { color: #1d2c40; }
body.portal-theme .portal-topbar .logout-link,
body.portal-theme .portal-topbar .back-to-me-link {
  text-decoration: none;
  white-space: nowrap;
}
body.portal-theme .portal-topbar .admin-dropdown { position: relative; }
body.portal-theme .portal-topbar .admin-dropdown-summary {
  display: block;
  padding: 8px 11px;
  border: 1px solid transparent;
  border-radius: 5px;
  list-style: none;
  cursor: pointer;
  white-space: nowrap;
  font-weight: 600;
}
body.portal-theme .portal-topbar .admin-dropdown-summary::-webkit-details-marker { display: none; }
body.portal-theme .portal-topbar .admin-dropdown[open] .admin-dropdown-summary,
body.portal-theme .portal-topbar .admin-dropdown-summary:hover {
  border-color: #ded6c9;
  background: #eee9df;
}
body.portal-theme .portal-topbar .admin-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 80;
  width: 250px;
  max-width: calc(100vw - 24px);
  max-height: min(70vh,600px);
  overflow: auto;
  padding: 8px;
  border: 1px solid #e1dbd0;
  border-radius: 9px;
  background: #fffdf8;
  box-shadow: 0 18px 42px rgba(15,27,40,.2);
}
body.portal-theme .portal-topbar .admin-dropdown-item {
  display: block;
  padding: 10px 11px;
  border-radius: 5px;
  color: #1b2b3f;
  text-decoration: none;
  font-size: 12px;
  line-height: 1.35;
  transition: background .15s ease;
}
body.portal-theme .portal-topbar .admin-dropdown-item:hover,
body.portal-theme .portal-topbar .admin-dropdown-item.active { background: #f0ece4; }
body.portal-theme .portal-topbar .admin-dropdown-section {
  margin: 8px 10px 4px;
  color: #7e796f;
  font-size: 10px;
  letter-spacing: .09em;
  text-transform: uppercase;
}
body.portal-theme .portal-main { min-width: 0; margin: 0; }
body.portal-theme .portal-content {
  width: 100%;
  max-width: 1600px;
  min-width: 0;
  margin: 0 auto;
  padding: clamp(30px,3.7vw,56px) clamp(20px,3.4vw,52px) 44px;
}
body.portal-theme .portal-content h1,
body.portal-theme .portal-content h2 {
  color: #142237;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -.045em;
}
body.portal-theme .portal-content h2 { font-size: 28px; }
body.portal-theme .portal-content .subtitle { color: var(--portal-muted); }
body.portal-theme .portal-content .content-card {
  padding: 24px clamp(18px,2.2vw,30px);
  border: 1px solid #e0dbd2;
  border-radius: 9px;
  background: rgba(255,253,248,.78);
  box-shadow: 0 8px 25px rgba(31,37,44,.035);
  color: var(--portal-ink);
}
body.portal-theme .portal-content .app-version { display: none; }
body.portal-theme .portal-content .person-row {
  color: var(--portal-ink);
  border-bottom-color: #e8e3da;
}
body.portal-theme .portal-content .person-name,
body.portal-theme .portal-content .person-date { color: var(--portal-ink); }
body.portal-theme .portal-content .person-row:last-child { border-bottom: 0; }
body.portal-theme .portal-content .person-avatar { border: 1px solid #d4c3a1; }
body.portal-theme .portal-content .error { color: #7b2525; background: #f8e6e2; border-color: #e4b8ae; }
body.portal-theme :where(a,button,summary,input,select,textarea):focus-visible {
  outline: 2px solid #a98757;
  outline-offset: 3px;
}
body.portal-theme .view-as-banner {
  max-width: 1496px;
  margin: 12px auto 0;
  border-radius: 7px;
}
body.portal-theme .portal-content > * { min-width: 0; }
body.portal-theme .overview-masthead {
  display: grid;
  grid-template-columns: minmax(0,1.25fr) minmax(320px,.85fr);
  align-items: stretch;
  gap: clamp(18px,3vw,42px);
  margin: 0 0 24px;
}
body.portal-theme .overview-heading {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  margin: 0;
  padding: 24px 0 26px;
}
body.portal-theme .overview-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  color: #7d6949;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .19em;
}
body.portal-theme .overview-kicker > span {
  color: #142237;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  letter-spacing: -.08em;
}
body.portal-theme .overview-kicker i {
  width: 21px;
  height: 1px;
  background: #b99b6a;
}
body.portal-theme .overview-heading h1 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  font-size: clamp(44px,5.7vw,82px);
  letter-spacing: -.065em;
  line-height: .94;
  overflow-wrap: anywhere;
}
body.portal-theme .overview-heading h1 #greetingTime { color: #152336; }
body.portal-theme .overview-greeting-name {
  color: #8e7046;
  font-style: italic;
  font-weight: 400;
}
body.portal-theme .overview-heading p {
  max-width: 34ch;
  margin: 18px 0 0;
  color: #6e7378;
  font-size: 15px;
  line-height: 1.55;
}
body.portal-theme .overview-live-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: 256px;
  padding: 27px 29px 18px;
  overflow: hidden;
  border: 1px solid rgba(202,174,128,.45);
  border-radius: 10px;
  color: #f4f1e9;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(210,179,124,.17), transparent 55%),
    linear-gradient(145deg, #111c29 0%, #1b2a3b 100%);
  box-shadow: 0 18px 42px rgba(18,30,44,.14), inset 0 1px rgba(255,255,255,.06);
}
body.portal-theme .overview-live-panel::after {
  content: "";
  position: absolute;
  right: -42px;
  bottom: -94px;
  width: 210px;
  height: 210px;
  border: 1px solid rgba(218,192,150,.12);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(218,192,150,.025), 0 0 0 46px rgba(218,192,150,.02);
  pointer-events: none;
}
body.portal-theme .overview-live-heading {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}
body.portal-theme .overview-live-heading h2 {
  margin: 6px 0 0;
  color: #f4f1e9;
  font-size: 27px;
}
body.portal-theme .overview-eyebrow {
  color: #d3bd98;
  font-size: 9px;
  letter-spacing: .17em;
}
body.portal-theme .overview-live-indicator {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 99px;
  color: #d8e1da;
  background: rgba(255,255,255,.04);
  font-size: 10px;
  white-space: nowrap;
}
body.portal-theme .overview-live-indicator i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #58bb83;
  box-shadow: 0 0 0 3px rgba(88,187,131,.13);
}
body.portal-theme .overview-live-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
}
body.portal-theme .overview-live-stat {
  display: flex;
  min-width: 0;
  min-height: 122px;
  flex-direction: column;
  justify-content: center;
}
body.portal-theme .overview-live-stat + .overview-live-stat {
  padding-left: 22px;
  border-left: 1px solid rgba(222,199,160,.45);
}
body.portal-theme .overview-live-stat strong {
  margin: 5px 0 2px;
  color: #ebd3a8;
  font: 400 58px/1 Georgia, "Times New Roman", serif;
}
body.portal-theme .overview-live-description {
  color: #c2c8d0;
  font-size: 11px;
}
body.portal-theme .overview-live-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 9px;
  padding-top: 11px;
  border-top: 1px solid rgba(255,255,255,.1);
  color: #aeb9c5;
  font-size: 9px;
  letter-spacing: .04em;
}
body.portal-theme .overview-weekly-stats {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 0;
  margin: 0 0 22px;
  overflow: hidden;
  border: 1px solid #e0dbd2;
  border-radius: 9px;
  background: rgba(255,253,248,.8);
  box-shadow: 0 8px 25px rgba(31,37,44,.025);
}
body.portal-theme .overview-weekly-stats > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px clamp(15px,2vw,28px);
  text-align: left;
}
body.portal-theme .overview-weekly-stats > div + div { border-left: 1px solid #e5dfd5; }
body.portal-theme .overview-weekly-stats > div > span {
  margin-bottom: 5px;
  color: #827154;
  font-size: 9px;
  letter-spacing: .14em;
}
body.portal-theme .overview-weekly-stats strong {
  color: #152336;
  font: 400 38px/1.1 Georgia, "Times New Roman", serif;
}
body.portal-theme .overview-weekly-stats small {
  margin-top: 3px;
  color: #777b80;
  font-size: 10px;
}
body.portal-theme .overview-panels {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 16px;
}
body.portal-theme .overview-panel {
  min-width: 0;
  min-height: 240px;
}
body.portal-theme .overview-panel > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
body.portal-theme .overview-panel > header h2 {
  margin: 4px 0 0;
  font-size: clamp(24px,2.2vw,31px);
}
body.portal-theme .overview-panel-kicker {
  color: #8a7554;
  font-size: 9px;
  letter-spacing: .14em;
}
body.portal-theme .overview-panel > header a {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 5px;
  color: #806342;
  text-decoration: none;
  font-size: 11px;
}
body.portal-theme .overview-panel > header a:hover { background: #f0ece4; }
body.portal-theme .overview-panels .person-row {
  min-height: 54px;
  padding: 8px 3px;
  border-bottom: 1px solid #ebe6dc;
  border-radius: 0;
  background: transparent;
}
body.portal-theme .overview-panels .person-row:hover { background: rgba(234,226,211,.26); }
body.portal-theme .overview-panels .person-row .person-avatar {
  width: 31px;
  height: 31px;
}
body.portal-theme .overview-panel-note {
  margin: -5px 0 8px;
  color: var(--portal-muted);
  font-size: 10px;
}
body.portal-theme .portal-content .content-card.overview-panel-leaderboard {
  border-color: #1c2b3c;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(191,159,105,.13), transparent 50%),
    linear-gradient(145deg,#142132,#1a293a);
  color: #eef1f2;
  box-shadow: 0 14px 34px rgba(18,30,44,.1);
}
body.portal-theme .portal-content .overview-panel-leaderboard h2 { color: #f3f0e9; }
body.portal-theme .overview-panel-leaderboard .overview-panel-kicker { color: #d4bc94; }
body.portal-theme .overview-panel-leaderboard > header a { color: #e0c89f; }
body.portal-theme .overview-panel-leaderboard > header a:hover { background: rgba(255,255,255,.08); }
body.portal-theme .overview-panel-leaderboard .overview-panel-note { color: #bbc4ce; }
body.portal-theme .portal-content .overview-panel-leaderboard .person-row,
body.portal-theme .portal-content .overview-panel-leaderboard .person-name,
body.portal-theme .portal-content .overview-panel-leaderboard .person-date,
body.portal-theme .portal-content .overview-panel-leaderboard .leaderboard-rank {
  color: #eef1f2;
  border-bottom-color: rgba(255,255,255,.12);
}
body.portal-theme .overview-panel-leaderboard .rank-first { color: #efd7a8; }
body.portal-theme .overview-tasks-card { margin: 0 0 22px; }
body.portal-theme .chat-widget-container { z-index: 90; }
body.portal-theme .chat-widget-container iframe { max-width: calc(100vw - 16px); }
@media (max-width: 1080px) {
  body.portal-theme .portal-header-primary { padding-inline: 24px; }
  body.portal-theme .portal-nav .tab { padding-inline: 9px; font-size: 11px; }
  body.portal-theme .portal-nav .tab::before { display: none; }
  body.portal-theme .portal-topbar { padding-inline: 24px; gap: 12px; }
  body.portal-theme .portal-topbar-right { gap: 9px; }
  body.portal-theme .portal-topbar-left { gap: 14px; }
  body.portal-theme .overview-masthead { grid-template-columns: minmax(0,1fr) minmax(290px,.9fr); gap: 20px; }
}
@media (max-width: 760px) {
  body.portal-theme .portal-header { position: relative; }
  body.portal-theme .portal-header-primary {
    grid-template-rows: 57px 44px;
    padding-inline: 15px;
  }
  body.portal-theme .portal-brand { gap: 13px; font-size: 10px; }
  body.portal-theme .portal-brand-mark { font-size: 32px; }
  body.portal-theme .portal-profile-chip { width: 34px; height: 34px; }
  body.portal-theme .portal-nav {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 4px;
    margin-inline: -15px;
    width: calc(100% + 30px);
    padding: 0 10px;
  }
  body.portal-theme .portal-nav .tab {
    flex: 0 0 auto;
    height: 41px;
    padding-inline: 12px;
    border: 1px solid transparent;
    border-radius: 5px;
    font-size: 11px;
  }
  body.portal-theme .portal-nav .tab.active {
    border-color: rgba(211,181,126,.34);
    background: rgba(255,255,255,.075);
  }
  body.portal-theme .portal-topbar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 14px;
  }
  body.portal-theme .portal-topbar-left { display: block; width: 100%; }
  body.portal-theme .portal-breadcrumb { display: none; }
  body.portal-theme .portal-topbar-left .search-wrap { width: 100%; }
  body.portal-theme .portal-topbar-left .search-input {
    min-height: 42px;
    padding-inline: 14px;
    border-radius: 6px;
    font-size: 13px;
  }
  body.portal-theme .portal-topbar-right {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
  }
  body.portal-theme .portal-topbar-right time,
  body.portal-theme .portal-version { display: none; }
  body.portal-theme .portal-topbar .admin-dropdown { position: relative; }
  body.portal-theme .portal-topbar .admin-dropdown-summary { padding: 8px 12px; }
  body.portal-theme .portal-topbar .admin-dropdown-menu {
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    width: min(310px,calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    max-height: min(68vh,520px);
    overflow-x: hidden;
    overflow-y: auto;
  }
  body.portal-theme .portal-topbar .admin-dropdown-item {
    padding: 10px 12px;
    overflow-wrap: anywhere;
    white-space: normal;
  }
  body.portal-theme .portal-content { padding: 27px 15px 30px; }
  body.portal-theme .overview-masthead { grid-template-columns: minmax(0,1fr); gap: 14px; }
  body.portal-theme .overview-heading { padding: 5px 0 9px; }
  body.portal-theme .overview-kicker { margin-bottom: 14px; font-size: 8px; }
  body.portal-theme .overview-heading h1 { font-size: clamp(38px,10vw,52px); line-height: .97; }
  body.portal-theme .overview-heading p { margin-top: 11px; font-size: 14px; }
  body.portal-theme .overview-live-panel { min-height: 208px; padding: 20px 17px 13px; border-radius: 8px; }
  body.portal-theme .overview-live-heading { margin-bottom: 12px; }
  body.portal-theme .overview-live-heading h2 { font-size: 24px; }
  body.portal-theme .overview-live-stat { min-height: 94px; }
  body.portal-theme .overview-live-stat + .overview-live-stat { padding-left: 15px; }
  body.portal-theme .overview-live-stat strong { font-size: 49px; }
  body.portal-theme .overview-live-description { font-size: 10px; }
  body.portal-theme .overview-weekly-stats {
    grid-template-columns: repeat(3,minmax(0,1fr));
    margin-bottom: 15px;
    border-radius: 7px;
  }
  body.portal-theme .overview-weekly-stats > div { padding: 11px 9px; }
  body.portal-theme .overview-weekly-stats > div > span { min-height: 2.3em; font-size: 7px; letter-spacing: .08em; }
  body.portal-theme .overview-weekly-stats strong { font-size: clamp(26px,8vw,33px); }
  body.portal-theme .overview-weekly-stats small { display: none; }
  body.portal-theme .overview-panels { grid-template-columns: minmax(0,1fr); gap: 12px; }
  body.portal-theme .portal-content .content-card { padding: 18px 15px; }
  body.portal-theme .overview-panel { min-height: 0; }
  body.portal-theme .overview-panel > header h2 { font-size: 25px; }
  body.portal-theme .overview-panels .person-row { min-height: 50px; }
  body.portal-theme .view-as-banner { margin-inline: 12px; }
}
@media (max-width: 380px) {
  body.portal-theme .portal-header-primary { padding-inline: 12px; }
  body.portal-theme .portal-nav { margin-inline: -12px; width: calc(100% + 24px); }
  body.portal-theme .portal-nav .tab { padding-inline: 9px; font-size: 10px; }
  body.portal-theme .overview-live-panel { padding-inline: 13px; }
  body.portal-theme .overview-live-stat + .overview-live-stat { padding-left: 11px; }
  body.portal-theme .overview-live-stat strong { font-size: 44px; }
  body.portal-theme .overview-weekly-stats > div { padding-inline: 6px; }
  body.portal-theme .overview-weekly-stats > div > span { font-size: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  body.portal-theme *,
  body.portal-theme *::before,
  body.portal-theme *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (max-width: 760px) {
  body.portal-theme .portal-profile-copy { display: none; }
  body.portal-theme .portal-topbar-right .admin-dropdown[open] {
    flex: 1 0 100%;
  }
  body.portal-theme .portal-topbar .admin-dropdown[open] .admin-dropdown-menu {
    position: static;
    width: 100%;
    max-width: 100%;
    max-height: min(68vh,520px);
    margin-top: 7px;
    box-shadow: 0 8px 22px rgba(15,27,40,.12);
  }
}


/* Overview grid cards share one aligned row; the global card margin breaks equal heights. */
body.portal-theme .overview-panels > .overview-panel {
  margin-bottom: 0;
}


/* Editorial polish across the live staff portal */
body.portal-theme {
  --portal-ink: #142237;
  --portal-muted: #70777f;
  --portal-paper: #f4f1e9;
  --portal-line: #ddd5c8;
  --portal-gold: #b99a67;
}
body.portal-theme .portal-content .content-card {
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(255,253,248,.94), rgba(247,244,237,.92));
  box-shadow: 0 14px 34px rgba(22,31,43,.055), inset 0 1px rgba(255,255,255,.78);
}
body.portal-theme .overview-masthead { position: relative; isolation: isolate; }
body.portal-theme .overview-masthead::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: 5%;
  top: 50%;
  width: min(44vw, 520px);
  aspect-ratio: 1;
  transform: translate(10%,-50%);
  border: 1px solid rgba(177,145,94,.15);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(177,145,94,.025), 0 0 0 48px rgba(177,145,94,.022), 0 0 0 86px rgba(177,145,94,.018);
  pointer-events: none;
}
body.portal-theme .overview-heading::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 14%;
  bottom: 14%;
  width: 1px;
  background: linear-gradient(transparent, rgba(177,145,94,.65), transparent);
}
body.portal-theme .overview-live-panel {
  border-radius: 8px;
  box-shadow: 0 24px 52px rgba(17,29,44,.18), inset 0 1px rgba(255,255,255,.08);
}
body.portal-theme .overview-live-panel::after {
  border-color: rgba(218,192,150,.16);
  box-shadow: 0 0 0 22px rgba(218,192,150,.035), 0 0 0 46px rgba(218,192,150,.025);
}

/* Activity: make the week control and figures feel like one considered instrument panel. */
body.portal-theme .week-nav {
  gap: 14px;
  padding: 11px 15px;
  border: 1px solid #26364a;
  border-radius: 8px;
  background: linear-gradient(115deg, #142235, #1c2d41);
  box-shadow: 0 12px 30px rgba(18,30,44,.11), inset 0 1px rgba(255,255,255,.06);
}
body.portal-theme .week-nav-link {
  padding: 8px 12px;
  border: 1px solid rgba(218,192,150,.18);
  border-radius: 5px;
  color: #e9e3d8;
  background: rgba(255,255,255,.045);
  font-size: 11px;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
body.portal-theme .week-nav-link:hover {
  border-color: rgba(218,192,150,.5);
  color: #f5dfb7;
  background: rgba(255,255,255,.09);
}
body.portal-theme .week-nav-label {
  color: #e4cea7;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
}
body.portal-theme .stats-row {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 0;
  margin-bottom: 22px;
  overflow: hidden;
  border: 1px solid #ded7cb;
  border-radius: 10px;
  background: linear-gradient(145deg,#fffdf8,#f4f0e7);
  box-shadow: 0 12px 30px rgba(22,31,43,.045);
}
body.portal-theme .stats-row .stat-card {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 23px clamp(16px,2.4vw,32px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body.portal-theme .stats-row .stat-card + .stat-card::before {
  content: "";
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 0;
  width: 1px;
  background: linear-gradient(transparent,#d8c9ae,transparent);
}
body.portal-theme .stats-row .stat-card h3 {
  margin: 0 0 9px;
  color: #806b4d;
  font-size: 9px;
  letter-spacing: .15em;
}
body.portal-theme .stats-row .stat-number {
  color: #142237;
  font: 400 clamp(38px,4vw,52px)/1 Georgia, "Times New Roman", serif;
  letter-spacing: -.045em;
}
body.portal-theme .portal-content > .content-card:has(.activity-list) {
  min-height: 260px;
  padding: 27px clamp(20px,3vw,38px);
  background: linear-gradient(150deg,rgba(255,253,248,.97),rgba(243,239,230,.94));
}
body.portal-theme .portal-content > .content-card:has(.activity-list) > h2 {
  margin-bottom: 8px;
  font-size: clamp(27px,3vw,36px);
}
body.portal-theme .portal-content > .content-card:has(.activity-list) > .subtitle {
  max-width: 66ch;
  line-height: 1.65;
}
body.portal-theme .activity-list > .subtitle {
  margin: 26px 0 0;
  padding: 19px 21px;
  border-left: 2px solid #b99a67;
  color: #626b73;
  background: linear-gradient(90deg,rgba(185,154,103,.085),transparent 78%);
  font-size: 13px;
}
body.portal-theme #chat-widget-container #chat-widget-minimized {
  filter: hue-rotate(158deg) saturate(.68);
}

@media (max-width: 760px) {
  body.portal-theme .overview-masthead::before { display: none; }
  body.portal-theme .overview-heading::before { left: -8px; }
  body.portal-theme .week-nav { gap: 6px; padding: 9px 8px; }
  body.portal-theme .week-nav-link { padding: 8px 7px; font-size: 10px; }
  body.portal-theme .week-nav-label { font-size: 9px; letter-spacing: .1em; }
  body.portal-theme .stats-row {
    grid-template-columns: 1fr;
    border-radius: 8px;
  }
  body.portal-theme .stats-row .stat-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 16px;
  }
  body.portal-theme .stats-row .stat-card + .stat-card::before {
    top: 0;
    right: 16px;
    bottom: auto;
    left: 16px;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg,transparent,#ded5c6,transparent);
  }
  body.portal-theme .stats-row .stat-card h3 { margin: 0; }
  body.portal-theme .stats-row .stat-number { flex: 0 0 auto; font-size: 34px; }
  body.portal-theme .portal-content > .content-card:has(.activity-list) {
    min-height: 220px;
    padding: 20px 16px;
  }
  body.portal-theme .activity-list > .subtitle { margin-top: 20px; padding: 15px; }
}


/* Live in-game roster, nested in the Team Pulse panel. */
body.portal-theme .overview-live-panel { min-height: 318px; }
body.portal-theme .overview-live-roster {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 7px 12px;
  max-height: 78px;
  margin-top: 8px;
  overflow-y: auto;
  scrollbar-color: rgba(211,189,152,.45) transparent;
}
body.portal-theme .overview-live-person {
  display: flex;
  flex: 1 1 calc(50% - 12px);
  align-items: center;
  min-width: 0;
  gap: 6px;
}
body.portal-theme .overview-live-avatar {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  border: 1px solid rgba(211,189,152,.72);
  border-radius: 50%;
  object-fit: cover;
}
body.portal-theme .overview-live-name {
  min-width: 0;
  overflow: hidden;
  color: #e9e4da;
  font-size: 10px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.portal-theme .overview-live-dot {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: #58bb83;
  box-shadow: 0 0 0 2px rgba(88,187,131,.14);
}
body.portal-theme .overview-live-empty {
  margin: 0;
  color: #bac3cc;
  font-size: 10px;
}
@media (max-width: 760px) {
  body.portal-theme .overview-live-panel { min-height: 318px; }
  body.portal-theme .overview-live-roster { max-height: 70px; }
  body.portal-theme .overview-live-person { flex-basis: 100%; }
}


/* Searched staff overview: bring current-week metrics and recent activity
   into the landing view, with impersonation kept as a secondary action. */
body.portal-theme .staff-overview-intro {
  margin: 4px 0 19px;
  padding-left: 18px;
  border-left: 1px solid rgba(185,154,103,.72);
}
body.portal-theme .staff-overview-intro h1 {
  margin: 3px 0 6px;
  color: #152336;
  font: 400 clamp(34px,4vw,54px)/1.04 Georgia, "Times New Roman", serif;
  letter-spacing: -.045em;
  overflow-wrap: anywhere;
}
body.portal-theme .staff-overview-intro p {
  margin: 0;
  color: #70777f;
  font-size: 13px;
}
body.portal-theme .staff-overview-stats { margin-bottom: 17px; }
body.portal-theme .staff-overview-recent { min-width: 0; }
body.portal-theme .staff-overview-recent-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
body.portal-theme .staff-overview-recent-heading h2 {
  margin: 4px 0 0;
  font-size: clamp(24px,2.2vw,31px);
}
body.portal-theme .staff-overview-recent-heading a {
  flex: 0 0 auto;
  padding: 7px 8px;
  border-radius: 5px;
  color: #806342;
  font-size: 11px;
  text-decoration: none;
}
body.portal-theme .staff-overview-recent-heading a:hover { background: #f0ece4; }
body.portal-theme .staff-profile-view-as {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  padding: 13px 16px;
  border: 1px solid #ded5c5;
  border-radius: 9px;
  color: #70777f;
  background: linear-gradient(145deg,rgba(255,253,248,.9),rgba(246,241,231,.86));
  font-size: 12px;
}
body.portal-theme .staff-profile-view-as form { flex: 0 0 auto; }
body.portal-theme .staff-profile-view-as .logout-btn {
  width: auto;
  padding: 8px 12px;
  border-color: #ded5c5;
  font-size: 11px;
}
@media (max-width: 760px) {
  body.portal-theme .staff-overview-intro { margin-bottom: 14px; }
  body.portal-theme .staff-overview-stats { margin-bottom: 12px; }
  body.portal-theme .staff-overview-recent-heading { align-items: center; }
  body.portal-theme .staff-overview-recent-heading h2 { font-size: 23px; }
  body.portal-theme .staff-profile-view-as { align-items: flex-start; flex-direction: column; gap: 8px; }
  body.portal-theme .staff-profile-view-as .logout-btn { width: auto; }
}