@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/files/org-chart/assets/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/files/org-chart/assets/fonts/plus-jakarta-sans-latin-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

/* ---- DARK THEME (default) ---- */
:root {
  --bg:             #0c0c12;
  --bg-elevated:    #16161f;
  --bg-hover:       #1e1e2a;
  --border:         #2a2a3a;
  --border-focus:   #4a4a6a;
  --text:           #e4e4ef;
  --text-muted:     #6e6e82;
  --text-dim:       #4a4a5e;
  --accent:         rebeccapurple;
  --accent-bright:  #c084fc;
  --accent-glow:    rgba(102, 51, 153, 0.2);
  --accent-2:       #03A062;
  --accent-2-bright:#1CA152;
  --accent-2-glow:  rgba(3, 160, 98, 0.15);
  --status-active:    #03A062;
  --status-available: #4a9eed;
  --status-planned:   #6e6e82;
  --status-inactive:  #c92a2a;
  --status-retired:   #868e96;
  --dept-executive:   #7c5cbf;
  --dept-content:     #3d9970;
  --dept-creative:    #b84fd1;
  --dept-operations:  #e0558a;
  --dept-strategy:    #4a9eed;
  --dept-ar:          #f0a020;
  --dept-education:   #4abe5e;
  --dept-utility:     #8e96a0;
  --dept-marketing:   #e0558a;
  --dept-finance:     #4abe5e;
  --card-shadow:      rgba(0, 0, 0, 0.3);
  --selection-bg:     rgba(102, 51, 153, 0.4);
  --selection-color:  var(--text);
  --mesh-purple:      rgba(102, 51, 153, 0.08);
  --mesh-green:       rgba(3, 160, 98, 0.06);
  --mesh-blue:        rgba(74, 158, 237, 0.04);
  --header-bg:        rgba(12, 12, 18, 0.85);
  --tree-card-bg:     rgba(22, 22, 31, 0.8);
  --dept-group-bg:    rgba(22, 22, 31, 0.5);
  --detail-bg:        rgba(22, 22, 31, 0.92);
  --detail-shadow:    rgba(0, 0, 0, 0.4);
  --highlight-bg:     rgba(240, 160, 32, 0.15);
  --dot-glow:         6px;
  --role-color:       #0ca678;
  --rr-thin-site-header-height: 47px;
}

/* ---- LIGHT THEME ---- */
html.light {
  --bg:             #f4f5f7;
  --bg-elevated:    #ffffff;
  --bg-hover:       #eef0f3;
  --border:         #dde1e6;
  --border-focus:   #b0b8c4;
  --text:           #1a1a2e;
  --text-muted:     #5a6170;
  --text-dim:       #8a8fa0;
  --accent:         rebeccapurple;
  --accent-bright:  #7c3aed;
  --accent-glow:    rgba(102, 51, 153, 0.12);
  --accent-2:       #03A062;
  --accent-2-bright:#1CA152;
  --accent-2-glow:  rgba(3, 160, 98, 0.08);
  --status-active:    #2f9e44;
  --status-available: #1971c2;
  --status-planned:   #868e96;
  --status-inactive:  #c92a2a;
  --status-retired:   #868e96;
  --dept-executive:   #1a1a2e;
  --dept-content:     #2d6a4f;
  --dept-creative:    #9c36b5;
  --dept-operations:  #c2255c;
  --dept-strategy:    #1971c2;
  --dept-ar:          #e67700;
  --dept-education:   #2f9e44;
  --dept-utility:     #868e96;
  --dept-marketing:   #d6336c;
  --dept-finance:     #5c940d;
  --card-shadow:      rgba(0, 0, 0, 0.06);
  --selection-bg:     rgba(102, 51, 153, 0.15);
  --selection-color:  #1a1a2e;
  --mesh-purple:      rgba(102, 51, 153, 0.03);
  --mesh-green:       rgba(3, 160, 98, 0.02);
  --mesh-blue:        rgba(74, 158, 237, 0.02);
  --header-bg:        rgba(255, 255, 255, 0.9);
  --tree-card-bg:     #ffffff;
  --dept-group-bg:    rgba(255, 255, 255, 0.7);
  --detail-bg:        rgba(255, 255, 255, 0.95);
  --detail-shadow:    rgba(0, 0, 0, 0.08);
  --highlight-bg:     rgba(240, 160, 32, 0.12);
  --dot-glow:         4px;
  --role-color:       #0ca678;
}

/* ---- RESET ---- */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  position: relative;
  min-height: 100vh;
}

/* Gradient mesh background */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, var(--mesh-purple) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 90%, var(--mesh-green) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 60% 30%, var(--mesh-blue) 0%, transparent 50%);
  pointer-events: none;
}

/* ---- HEADER ---- */
header {
  background: var(--header-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}

header h1 { font-size: 18px; font-weight: 600; letter-spacing: -0.3px; }

.controls { display: flex; gap: 12px; align-items: center; }

.search-wrap {
  position: relative;
}
.search-wrap input {
  padding: 6px 12px 6px 30px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  width: 220px;
  outline: none;
  background: var(--bg-elevated);
  color: var(--text);
  font-family: inherit;
}
.search-wrap input::placeholder {
  color: var(--text-dim);
}
.search-wrap input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
}
.search-wrap .search-icon {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 13px;
  pointer-events: none;
}
.search-wrap .clear-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 14px;
  display: none;
  padding: 2px 4px;
}
.search-wrap .clear-btn.visible { display: block; }

.view-toggle {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.view-toggle button {
  padding: 5px 14px;
  border: none;
  background: var(--bg-elevated);
  font-size: 12px;
  cursor: pointer;
  color: var(--text-muted);
  font-weight: 500;
  transition: background 0.15s;
  font-family: inherit;
}
.view-toggle button:hover { background: var(--bg-hover); }
.view-toggle button.active { background: var(--accent); color: white; }

/* ---- STATS BAR ---- */
.stats-bar {
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  padding: 8px 24px;
  display: flex;
  gap: 20px;
  font-size: 12px;
  color: var(--text-muted);
}
.stat { display: flex; align-items: center; gap: 5px; }
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  box-shadow: 0 0 var(--dot-glow) currentColor;
}

main { padding: 24px; }

/* ---- AVATAR ---- */
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: white;
  font-size: 13px;
  overflow: hidden;
  background: var(--text-muted);
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  transform: scale(1.08);
}
.avatar-sm { width: 28px; height: 28px; font-size: 10px; }
.avatar-card { width: 64px; height: 64px; font-size: 20px; }
.avatar-lg { width: 80px; height: 80px; font-size: 28px; }

/* ---- TREE / HIERARCHY VIEW ---- */
.tree-view { display: none; overflow-x: auto; padding-bottom: 24px; }
.tree-view.active { display: block; }

.tree-root {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  padding: 0 24px;
  width: min(1180px, 100%);
}
.hierarchy-root { gap: 0; }
.hierarchy-root-card .tree-card { min-width: 180px; }

.tree-connector {
  width: 2px;
  height: 24px;
  background: linear-gradient(to bottom, var(--border), var(--text-dim));
  margin: 0 auto;
}
.tree-connector-short {
  width: 2px;
  height: 14px;
  background: var(--border);
}

.tree-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  position: relative;
}

.tree-row-hline {
  position: absolute;
  top: 0;
  height: 2px;
  background: var(--border);
}

.tree-node-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hierarchy-band {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-elevated) 72%, transparent);
  padding: 14px;
}
.hierarchy-band-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}
.hierarchy-exec-row {
  margin-bottom: 12px;
}
.hierarchy-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 12px;
  align-items: stretch;
  width: 100%;
}
.role-overlay-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.tree-card {
  background: var(--tree-card-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  text-align: center;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.15s, background 0.15s;
  position: relative;
  min-width: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.tree-card:hover {
  box-shadow: 0 4px 16px var(--card-shadow);
  transform: translateY(-1px);
  background: var(--bg-hover);
}
.tree-card:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.tree-card .dept-stripe {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 8px 8px 0 0;
}
.tree-card .status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  position: absolute;
  top: 8px; right: 8px;
  box-shadow: 0 0 var(--dot-glow) currentColor;
}
.tree-card .name { font-size: 12px; font-weight: 600; white-space: nowrap; }
.tree-card .role { font-size: 10px; color: var(--text-muted); white-space: nowrap; }

.shortcode-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  padding: 2px 6px;
  border: 1px solid color-mix(in srgb, var(--accent-bright) 36%, var(--border));
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent-bright);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}
.shortcode-inline {
  flex-shrink: 0;
}
.shortcode-tree {
  margin-top: 2px;
}
.shortcode-detail {
  font-size: 12px;
  padding: 3px 8px;
}
.scope-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  padding: 2px 6px;
  border: 1px solid color-mix(in srgb, var(--text-muted) 28%, var(--border));
  border-radius: 4px;
  background: color-mix(in srgb, var(--bg-elevated) 72%, var(--bg));
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.scope-tree {
  max-width: 168px;
  text-align: center;
}
.scope-chip {
  margin-left: 0;
  max-width: 100%;
  text-align: left;
}
.chip-main {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
  overflow-wrap: anywhere;
  flex-wrap: wrap;
}

/* Department group in hierarchy */
.dept-group {
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px 12px;
  min-width: 160px;
  position: relative;
  background: var(--dept-group-bg);
}
.hierarchy-group {
  min-width: 0;
  width: 100%;
  height: 100%;
}
.dept-group-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  margin: -8px -12px 8px;
  border-radius: 8px 8px 0 0;
  color: white;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  min-height: 34px;
}
.dept-group-header > span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}
.dept-group-header .chevron {
  margin-left: auto;
  font-size: 10px;
  transition: transform 0.2s;
}
.dept-group-header.collapsed .chevron { transform: rotate(-90deg); }

.dept-group-agents {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dept-group-agents.hidden { display: none; }

.dept-agent-chip {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  transition: background 0.1s;
  white-space: normal;
  min-height: 42px;
}
.dept-agent-chip .scope-chip {
  grid-column: 2;
}
.dept-agent-chip .status-dot-sm {
  justify-self: center;
}
.dept-agent-chip:hover { background: var(--bg-hover); }
.dept-agent-chip:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.dept-agent-chip .status-dot-sm {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 4px currentColor;
}

.indev-label {
  white-space: nowrap;
}

.dept-agent-chip.open-position {
  border-style: dashed;
  color: var(--text-muted);
  font-style: italic;
}

/* ---- DIRECTORY VIEW ---- */
.dept-view { display: none; }
.dept-view.active { display: block; }

.dept-section { margin-bottom: 24px; }

.directory-band {
  margin-bottom: 24px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-elevated) 56%, transparent);
  padding: 14px;
}
.directory-band-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}
.directory-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 12px;
  align-items: start;
}
.role-section-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.compact-section {
  margin-bottom: 0;
  min-width: 0;
}

.dept-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.dept-header:hover { background: var(--bg-hover); }

.dept-color-bar { width: 4px; height: 20px; border-radius: 2px; flex-shrink: 0; }

.dept-header h2 { font-size: 14px; font-weight: 600; flex: 1; }

.dept-header .count {
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg);
  padding: 2px 8px;
  border-radius: 10px;
}
.dept-header .chevron {
  font-size: 12px;
  color: var(--text-muted);
  transition: transform 0.2s;
}
.dept-header.collapsed .chevron { transform: rotate(-90deg); }

.dept-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}
.dept-grid.hidden { display: none; }
.compact-grid {
  grid-template-columns: 1fr;
}

.agent-card {
  background: var(--bg-elevated);
  padding: 14px 16px;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
  display: flex;
  gap: 14px;
  align-items: center;
  min-height: 92px;
}
.compact-grid .agent-card {
  min-height: 76px;
}
.agent-card:hover {
  background: var(--bg-hover);
  box-shadow: inset 0 0 20px var(--accent-glow);
}
.agent-card:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.agent-card.highlight { background: var(--highlight-bg); }

.agent-card-info { flex: 1; min-width: 0; }

.agent-card .agent-name {
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.agent-card .agent-role {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.agent-card .agent-meta {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  font-size: 10px;
  flex-wrap: wrap;
}
.agent-card .agent-meta span {
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--bg);
  color: var(--text-muted);
}

.status-badge {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 var(--dot-glow) currentColor;
}

.agent-card.open-position {
  border-left: 3px solid var(--status-planned);
  background: var(--bg);
}
.agent-card.open-position .agent-name {
  font-style: italic;
  color: var(--text-muted);
}

/* ---- DETAIL PANEL ---- */
.detail-overlay {
  display: none;
  position: fixed;
  top: var(--rr-thin-site-header-height); right: 0; bottom: 0;
  width: 400px;
  background: var(--detail-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-left: 1px solid var(--border);
  box-shadow: -4px 0 24px var(--detail-shadow);
  z-index: 200;
  overflow-y: auto;
  padding: 0;
  transform: translateX(20px);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.detail-overlay.open {
  display: block;
  transform: translateX(0);
  opacity: 1;
}

.detail-header-area {
  padding: 24px 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}

.detail-close {
  position: absolute;
  top: 12px; right: 12px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px 8px;
  border-radius: 4px;
  line-height: 1;
}
.detail-close:hover { background: var(--bg-hover); }

.detail-name { font-size: 20px; font-weight: 700; margin-top: 12px; }
.detail-role { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

.detail-badges {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

.badge-dept {
  font-size: 11px;
  padding: 2px 10px;
  border-radius: 4px;
  color: white;
  font-weight: 500;
}
.badge-status {
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
}

.detail-body { padding: 0 24px 24px; }

.detail-section { margin-top: 20px; }
.detail-section h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 8px;
  font-weight: 600;
}

.detail-bio {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
  font-style: italic;
  padding: 10px 14px;
  background: var(--bg);
  border-radius: 6px;
  border-left: 3px solid var(--border);
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pill {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 12px;
  background: var(--bg-hover);
  color: var(--text-muted);
  font-weight: 500;
  border: 1px solid var(--border);
}

.cert-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  font-size: 12px;
}
.cert-check {
  color: var(--status-active);
  font-weight: 700;
  flex-shrink: 0;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.detail-row .label { color: var(--text-muted); }
.detail-row .value { font-weight: 500; text-align: right; max-width: 60%; word-break: break-word; }

.link-btn {
  color: var(--accent-bright);
  cursor: pointer;
  text-decoration: none;
  font-weight: 500;
}
.link-btn:hover { text-decoration: underline; }

.direct-report-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  cursor: pointer;
  font-size: 12px;
}
.direct-report-item:hover { color: var(--accent-bright); }

.detail-notes {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ---- ROLES SECTION ---- */
.roles-section { margin-bottom: 24px; }

.roles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}
.roles-grid.hidden { display: none; }
.roles-grid.compact-grid {
  grid-template-columns: 1fr;
}

.role-card {
  background: var(--bg-elevated);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-left: 3px solid var(--role-color);
}
.role-card.highlight { background: var(--highlight-bg); }
.role-card:hover {
  background: var(--bg-hover);
  box-shadow: inset 0 0 20px var(--accent-2-glow);
}
.role-card:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.role-card-header {
  display: flex;
  align-items: center;
  gap: 6px;
}
.role-icon {
  font-size: 14px;
  color: var(--role-color);
}
.role-name {
  font-size: 13px;
  font-weight: 600;
}
.role-status-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--role-color) 15%, transparent);
  color: var(--role-color);
  font-weight: 500;
  margin-left: auto;
}
.role-purpose {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}
.role-replaces {
  font-size: 10px;
  color: var(--text-dim);
  font-style: italic;
}

/* Roles in hierarchy view */
.role-chip {
  border-color: color-mix(in srgb, var(--role-color) 30%, transparent);
}

/* ---- RETIRED SECTION ---- */
.retired-section { margin-bottom: 24px; }
.retired-header h2 { color: var(--text-muted); }

.retired-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}
.retired-grid.hidden { display: none; }

.retired-card {
  background: var(--bg);
  padding: 10px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  opacity: 0.6;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}
.retired-card:hover {
  background: var(--bg-hover);
  opacity: 0.85;
}
.retired-card.highlight {
  background: var(--highlight-bg);
  opacity: 1;
}
.retired-name {
  font-size: 12px;
  font-weight: 500;
  text-decoration: line-through;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.retired-dept {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--bg-elevated);
  font-weight: 500;
}
.retired-replaced {
  font-size: 10px;
  color: var(--text-dim);
  font-style: italic;
  margin-left: auto;
}

/* ---- NO RESULTS ---- */
.no-results {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-muted);
  font-size: 14px;
}

/* ---- BACK LINK ---- */
.back-link {
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
}
.back-link:hover { color: var(--accent-bright); }

/* ---- SCROLLBAR ---- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--border-focus);
}

/* ---- SELECTION ---- */
::selection {
  background: var(--selection-bg);
  color: var(--selection-color);
}

/* ---- FOCUS OUTLINES ---- */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- MC RETIREMENT UI ---- */

/* Retired badge in hierarchy dept headers */
.retired-badge-sm {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 3px;
  background: #c92a2a;
  color: #fff;
  margin-left: 6px;
  vertical-align: middle;
}

/* IN DEV label for planned agents */
.indev-label {
  font-size: 10px;
  font-weight: 600;
  color: #868e96;
  margin-left: 4px;
}

/* Inactive label for directory cards */
.inactive-label {
  font-size: 10px;
  font-weight: 600;
  color: #c92a2a;
  margin-left: 4px;
}

/* Dimmed agent cards in retired departments */
.agent-dimmed { opacity: 0.6; }

/* RETIRED banner across directory dept card */
.dept-retired-banner {
  background: #c92a2a;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-align: center;
  padding: 6px 12px;
  border-radius: 8px 8px 0 0;
}
.dept-retired-banner + .dept-header {
  border-radius: 0;
}

/* Inactive toggle */
.inactive-toggle-wrap {
  margin-bottom: 16px;
  padding: 0 4px;
}
.inactive-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
}
.inactive-toggle-label input[type="checkbox"] {
  accent-color: #c92a2a;
  width: 14px;
  height: 14px;
}

/* No active agents placeholder */
.no-active-msg {
  padding: 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  font-style: italic;
}

@media (max-width: 760px) {
  header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .controls {
    flex-wrap: wrap;
  }
  .search-wrap,
  .search-wrap input {
    width: 100%;
  }
  .stats-bar {
    flex-wrap: wrap;
    gap: 8px 14px;
    padding: 10px 24px;
  }
  .stat {
    flex: 0 1 auto;
  }
  main {
    padding: 16px;
  }
  .tree-root {
    padding: 0;
  }
  .hierarchy-group-grid,
  .role-overlay-grid {
    grid-template-columns: 1fr;
  }
  .hierarchy-band {
    padding: 10px;
  }
  .directory-band {
    padding: 10px;
  }
  .directory-section-grid,
  .role-section-grid {
    grid-template-columns: 1fr;
  }
  .tree-row {
    flex-wrap: wrap;
  }
  .dept-agent-chip {
    align-items: flex-start;
  }
  .scope-chip {
    max-width: 100%;
    margin-left: 0;
    text-align: left;
  }
  .chip-main {
    flex-wrap: wrap;
  }
}

/* ---- FULL-PAGE RR SITE HEADER INTEGRATION ---- */
body.page--full-route .rr-thin-site-header {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}

body.page--org-chart #app > header {
  top: var(--rr-thin-site-header-height);
}

@media (max-width: 760px) {
  body.page--org-chart {
    --rr-thin-site-header-height: 79px;
  }

  body.page--org-chart #app > header {
    top: var(--rr-thin-site-header-height);
  }
}