.director-shell {
  --director-navy: #111b2e;
  --director-navy-soft: #1b2941;
  --director-blue: #2563eb;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  color: #172033;
  background: #f3f5f9;
}

.director-sidebar {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 100vh;
  overflow-y: auto;
  padding: 22px 16px 18px;
  color: #b9c3d5;
  background: var(--director-navy);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.director-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 8px 20px;
  color: white;
}

.director-brand-mark {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  border-radius: 9px;
  background: linear-gradient(145deg, #3b82f6, #1d4ed8);
  box-shadow: 0 8px 20px rgba(37, 99, 235, .27);
  font-size: 15px;
  font-weight: 900;
}

.director-brand > span:last-child,
.director-profile-card > span:nth-child(2) {
  min-width: 0;
  display: grid;
}

.director-brand strong {
  font-size: 14px;
  letter-spacing: -.01em;
}

.director-brand small {
  margin-top: 2px;
  color: #76839a;
  font-size: 9px;
}

.director-profile-card {
  display: grid;
  grid-template-columns: 33px minmax(0, 1fr) 7px;
  align-items: center;
  gap: 9px;
  margin-bottom: 20px;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 9px;
  background: rgba(255, 255, 255, .035);
}

.director-avatar,
.manager-avatar {
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: white;
  background: #334155;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.director-avatar {
  width: 33px;
  height: 33px;
}

.director-profile-card strong {
  overflow: hidden;
  color: #f8fafc;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.director-profile-card small {
  margin-top: 3px;
  color: #78869e;
  font-size: 8px;
}

.online-dot {
  width: 7px;
  height: 7px;
  border: 2px solid #1d293c;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, .12);
}

.director-nav {
  display: grid;
  gap: 3px;
}

.nav-section {
  margin: 14px 10px 5px;
  color: #5d6a82;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.director-nav a {
  display: flex;
  min-height: 35px;
  align-items: center;
  gap: 11px;
  padding: 8px 11px;
  border-radius: 7px;
  color: #9ba8bc;
  font-size: 10px;
  font-weight: 600;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}

.director-nav a:hover {
  color: white;
  background: rgba(255, 255, 255, .05);
  transform: translateX(2px);
}

.director-nav a.active {
  color: white;
  background: #23314a;
  box-shadow: inset 2px 0 #3b82f6;
}

.director-nav svg,
.director-logout svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  fill: currentColor;
}

.director-nav-count {
  min-width: 19px;
  margin-left: auto;
  padding: 2px 6px;
  border-radius: 20px;
  color: white;
  background: #dc3545;
  font-size: 8px;
  text-align: center;
}

.director-logout {
  margin-top: 22px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .07);
}

.director-logout button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  color: #76839a;
  border: 0;
  background: transparent;
  font-size: 9px;
  cursor: pointer;
}

.director-logout button:hover {
  color: white;
}

.director-main {
  min-width: 0;
  padding: 25px clamp(22px, 3.2vw, 46px) 50px;
}

.director-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.director-title-line,
.director-top-actions {
  display: flex;
  align-items: center;
}

.director-title-line {
  flex-wrap: wrap;
  gap: 10px;
}

.director-title-line h1 {
  margin: 0;
  color: #111827;
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1;
  letter-spacing: -.035em;
}

.director-topbar p {
  margin: 7px 0 0;
  color: #7b8494;
  font-size: 11px;
}

.role-badge,
.pending-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 800;
}

.role-badge {
  padding: 5px 8px;
  color: #1d4ed8;
  background: #e8f0ff;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.director-top-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.pending-badge {
  padding: 7px 10px;
  color: #b42330;
  border: 1px solid #f2c9ce;
  background: #fff5f5;
}

.director-button {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid #d9dee8;
  border-radius: 7px;
  font-size: 9px;
  font-weight: 800;
}

.director-button.secondary {
  color: #344054;
  background: white;
}

.director-button.primary {
  color: white;
  border-color: var(--director-blue);
  background: var(--director-blue);
  box-shadow: 0 7px 16px rgba(37, 99, 235, .18);
}

.director-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 11px;
  margin-bottom: 15px;
}

.director-metric {
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  min-height: 104px;
  padding: 16px;
  border: 1px solid #e5e8ee;
  border-radius: 8px;
  background: white;
  box-shadow: 0 4px 13px rgba(22, 31, 48, .025);
}

.director-metric-icon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 7px;
  font-size: 9px;
  font-weight: 900;
}

.director-metric > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.director-metric small {
  overflow: hidden;
  color: #737d8d;
  font-size: 8px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.director-metric strong {
  margin: 7px 0 5px;
  color: #101828;
  font-size: 23px;
  line-height: 1;
  letter-spacing: -.03em;
}

.director-metric div > span {
  color: #9aa2b0;
  font-size: 7px;
}

.director-metric.blue .director-metric-icon { color: #2563eb; background: #eaf1ff; }
.director-metric.amber .director-metric-icon { color: #d97706; background: #fff3d6; }
.director-metric.purple .director-metric-icon { color: #7c3aed; background: #f1eaff; }
.director-metric.teal .director-metric-icon { color: #0f9f86; background: #e4f7f2; }
.director-metric.red .director-metric-icon { color: #dc3545; background: #ffebed; }

.hierarchy-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 23px;
  padding: 16px 20px;
  border-radius: 8px;
  color: white;
  background: linear-gradient(115deg, #132139, #0f1a2d 70%);
  box-shadow: 0 10px 25px rgba(16, 24, 40, .09);
}

.section-kicker {
  display: block;
  margin-bottom: 4px;
  color: #8090aa;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hierarchy-banner h2 {
  margin: 0 0 4px;
  font-size: 11px;
  letter-spacing: -.01em;
}

.hierarchy-banner p {
  margin: 0;
  color: #7d8ba3;
  font-size: 8px;
}

.hierarchy-flow {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.hierarchy-flow .level {
  padding: 6px 9px;
  border-radius: 5px;
  font-size: 7px;
  font-weight: 800;
  white-space: nowrap;
}

.hierarchy-flow i {
  width: 15px;
  height: 1px;
  background: #46536a;
}

.director-level { color: #fde68a; background: #55441f; }
.national-level { color: #d8c7ff; background: #3f2a70; }
.zone-level { color: #b9f6de; background: #194b43; }
.advisor-level { color: #bed4ff; background: #1d3e74; }

.director-section {
  margin-bottom: 22px;
}

.director-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 11px;
}

.director-section-heading h2 {
  margin: 0;
  color: #172033;
  font-size: 15px;
  letter-spacing: -.02em;
}

.section-kicker.dark {
  color: #778195;
}

.director-section-heading > a {
  color: #556176;
  font-size: 8px;
  font-weight: 700;
}

.director-section-heading > a span {
  margin-left: 3px;
  color: var(--director-blue);
}

.national-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.national-card,
.director-data-card {
  border: 1px solid #e4e8ef;
  border-radius: 8px;
  background: white;
  box-shadow: 0 5px 16px rgba(20, 31, 51, .025);
}

.national-card {
  padding: 15px;
}

.national-card-head {
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.manager-avatar {
  width: 35px;
  height: 35px;
  color: #6d28d9;
  background: #efe8ff;
}

.national-card-head h3 {
  overflow: hidden;
  margin: 0;
  color: #182033;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.national-card-head p {
  overflow: hidden;
  margin: 3px 0 0;
  color: #8b93a2;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.national-card-head > a {
  padding: 5px;
  color: #818b9c;
  font-size: 18px;
}

.national-card-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin: 13px 0;
}

.national-card-stats > div {
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 8px 3px;
  border-radius: 5px;
  background: #f7f8fa;
}

.national-card-stats strong {
  font-size: 12px;
}

.national-card-stats span {
  color: #8a93a3;
  font-size: 7px;
}

.national-progress > span {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  color: #7a8494;
  font-size: 7px;
}

.national-progress > span strong {
  color: #172033;
}

.national-progress > div,
.conversion-cell > i {
  display: block;
  overflow: hidden;
  height: 4px;
  border-radius: 6px;
  background: #edf0f4;
}

.national-progress > div i,
.conversion-cell em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #60a5fa);
}

.director-bottom-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(270px, .65fr);
  gap: 11px;
}

.director-data-card {
  min-width: 0;
  padding: 15px;
}

.director-section-heading.compact {
  align-items: center;
  margin-bottom: 14px;
}

.director-section-heading.compact h2 {
  font-size: 13px;
}

.director-table-wrap {
  overflow-x: auto;
}

.director-table-head,
.director-table-row {
  display: grid;
  grid-template-columns: 24px minmax(145px, 1.35fr) minmax(100px, 1fr) 70px 90px 75px;
  align-items: center;
  gap: 10px;
  min-width: 620px;
}

.director-table-head {
  padding: 8px 6px;
  color: #929baa;
  border-bottom: 1px solid #e9ecf1;
  background: #fafbfc;
  font-size: 7px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.director-table-row {
  padding: 10px 6px;
  color: #687386;
  border-bottom: 1px solid #edf0f4;
  font-size: 8px;
}

.director-table-row:last-child {
  border-bottom: 0;
}

.director-table-row > strong {
  color: #263247;
  font-size: 9px;
}

.rank-number {
  color: #9aa3b2;
  font-weight: 800;
}

.rank-person {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.rank-person > i {
  display: grid;
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  place-items: center;
  border-radius: 50%;
  color: #1d4ed8;
  background: #e8f0ff;
  font-size: 7px;
  font-style: normal;
  font-weight: 900;
}

.rank-person > b {
  overflow: hidden;
  color: #202b3e;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversion-cell {
  display: grid;
  gap: 4px;
}

.conversion-cell > b {
  color: #15856f;
  font-size: 8px;
}

.conversion-cell > i {
  width: 62px;
  max-width: 100%;
}

.conversion-cell em {
  background: #20a887;
}

.director-agenda-list {
  display: grid;
}

.director-agenda-item {
  display: grid;
  grid-template-columns: 39px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid #edf0f4;
}

.director-agenda-item:last-child {
  border-bottom: 0;
}

.director-agenda-item time {
  display: grid;
  width: 38px;
  height: 40px;
  place-content: center;
  border-radius: 7px;
  color: #1d4ed8;
  background: #eaf1ff;
  text-align: center;
}

.director-agenda-item time strong {
  font-size: 13px;
  line-height: 1;
}

.director-agenda-item time span {
  margin-top: 3px;
  font-size: 6px;
  text-transform: uppercase;
}

.director-agenda-item > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.director-agenda-item > div strong,
.director-agenda-item > div span,
.director-agenda-item > div small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.director-agenda-item > div strong {
  color: #222d41;
  font-size: 8px;
}

.director-agenda-item > div span {
  color: #7f8999;
  font-size: 7px;
}

.director-agenda-item > div small {
  color: #9ca4b1;
  font-size: 6px;
}

.director-empty {
  padding: 25px 12px;
  color: #858f9f;
  border: 1px dashed #dfe4eb;
  border-radius: 7px;
  background: #fafbfc;
  font-size: 9px;
  text-align: center;
}

@media (max-width: 1180px) {
  .director-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .director-bottom-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .director-shell {
    grid-template-columns: 76px minmax(0, 1fr);
  }

  .director-sidebar {
    padding: 18px 11px;
  }

  .director-brand {
    justify-content: center;
    padding-inline: 0;
  }

  .director-brand > span:last-child,
  .director-profile-card > span:nth-child(2),
  .online-dot,
  .nav-section,
  .director-nav a:not(.active)::after,
  .director-nav a {
    font-size: 0;
  }

  .director-profile-card {
    display: flex;
    justify-content: center;
    padding: 10px 0;
  }

  .director-nav a {
    justify-content: center;
    min-height: 39px;
    padding: 9px;
  }

  .director-nav svg {
    width: 17px;
    height: 17px;
    flex-basis: 17px;
  }

  .director-nav-count {
    position: absolute;
    margin: -21px 0 0 22px;
    font-size: 6px;
  }

  .director-logout button {
    justify-content: center;
    font-size: 0;
  }

  .hierarchy-banner {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 700px) {
  .director-shell {
    display: block;
  }

  .director-sidebar {
    position: static;
    width: 100%;
    height: auto;
    padding: 12px 14px;
    overflow: visible;
  }

  .director-sidebar > div {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .director-brand {
    padding: 0;
  }

  .director-brand-mark {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }

  .director-profile-card,
  .director-logout,
  .nav-section {
    display: none;
  }

  .director-nav {
    display: flex;
    flex: 1;
    gap: 4px;
    overflow-x: auto;
  }

  .director-nav a {
    flex: 0 0 36px;
    min-height: 36px;
  }

  .director-main {
    padding: 23px 16px 40px;
  }

  .director-topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .director-top-actions {
    justify-content: flex-start;
  }

  .director-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .national-card-grid {
    grid-template-columns: 1fr;
  }

  .hierarchy-flow {
    width: 100%;
    overflow-x: auto;
  }
}

@media (max-width: 440px) {
  .director-metrics {
    grid-template-columns: 1fr;
  }

  .national-card-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

.management-main {
  max-width: 1600px;
  width: 100%;
  margin-inline: auto;
}

.management-flashes {
  margin-bottom: 14px;
}

.management-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.structure-command-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 15px;
  padding: 17px 20px;
  color: white;
  border-radius: 8px;
  background: linear-gradient(115deg, #17233a, #101a2c);
  box-shadow: 0 9px 24px rgba(16, 24, 40, .08);
}

.structure-command-banner h2 {
  margin: 0 0 4px;
  font-size: 13px;
}

.structure-command-banner p {
  max-width: 600px;
  margin: 0;
  color: #8e9bb0;
  font-size: 8px;
}

.structure-command-flow {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.structure-command-flow span {
  padding: 6px 9px;
  color: #c7d7f5;
  border: 1px solid #30405a;
  border-radius: 5px;
  background: #1e2d47;
  font-size: 7px;
  font-weight: 800;
  white-space: nowrap;
}

.structure-command-flow span:first-child {
  color: #fde68a;
  border-color: #5d4c25;
  background: #483b20;
}

.structure-command-flow i {
  width: 15px;
  height: 1px;
  background: #46536a;
}

.structure-workspace {
  display: grid;
  grid-template-columns: minmax(245px, .34fr) minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}

.structure-forms-card,
.structure-map-card,
.team-directory-card,
.management-history {
  border: 1px solid #e3e7ee;
  border-radius: 8px;
  background: white;
  box-shadow: 0 5px 16px rgba(20, 31, 51, .025);
}

.structure-forms-card,
.structure-map-card,
.team-directory-card {
  padding: 16px;
}

.management-inline-form {
  display: grid;
  gap: 7px;
  padding: 14px 0;
  border-top: 1px solid #edf0f4;
}

.management-inline-form:first-of-type {
  padding-top: 3px;
  border-top: 0;
}

.management-form-title {
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  margin-bottom: 4px;
}

.management-form-title > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: #6d28d9;
  border-radius: 7px;
  background: #efe8ff;
  font-size: 8px;
  font-weight: 900;
}

.management-inline-form:nth-of-type(2) .management-form-title > span {
  color: #087f6e;
  background: #e4f7f2;
}

.management-form-title div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.management-form-title strong {
  color: #202b3e;
  font-size: 9px;
}

.management-form-title small,
.management-inline-form label {
  color: #858f9f;
  font-size: 7px;
}

.management-inline-form label {
  margin-top: 3px;
  font-weight: 800;
}

.management-inline-form input,
.management-inline-form select,
.team-filterbar input,
.team-filterbar select {
  width: 100%;
  min-height: 34px;
  padding: 8px 10px;
  color: #273246;
  border: 1px solid #dfe4eb;
  border-radius: 6px;
  outline: none;
  background: #fbfcfd;
  font-size: 8px;
}

.management-inline-form input:focus,
.management-inline-form select:focus,
.team-filterbar input:focus,
.team-filterbar select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .08);
}

.management-inline-form .director-button {
  width: 100%;
  margin-top: 3px;
}

.management-inline-form .director-button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.structure-count {
  color: #8a93a3;
  font-size: 8px;
  font-weight: 700;
}

.management-tree {
  display: grid;
  gap: 10px;
}

.management-national {
  overflow: hidden;
  border: 1px solid #e7eaf0;
  border-radius: 8px;
}

.management-national > header {
  display: grid;
  grid-template-columns: 34px minmax(130px, 1fr) minmax(160px, .8fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: #fafbfc;
}

.management-node-icon {
  display: grid;
  width: 33px;
  height: 33px;
  place-items: center;
  border-radius: 7px;
  font-size: 9px;
  font-weight: 900;
}

.management-node-icon.national {
  color: #6d28d9;
  background: #efe8ff;
}

.management-node-icon.zone {
  color: #087f6e;
  background: #e4f7f2;
}

.management-national header > div,
.zone-main > div,
.management-owner,
.zone-owner {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.management-national small,
.management-zone small {
  color: #8b94a3;
  font-size: 7px;
}

.management-national h3 {
  overflow: hidden;
  margin: 0;
  color: #182235;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.management-owner a,
.zone-owner a {
  overflow: hidden;
  color: #344054;
  font-size: 8px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.management-owner a:hover,
.zone-owner a:hover,
.management-edit:hover,
.team-action:hover {
  color: #2563eb;
}

.missing-owner {
  justify-self: start;
  padding: 5px 7px;
  color: #b42330 !important;
  border-radius: 5px;
  background: #fff0f1;
}

.management-edit,
.team-action {
  color: #536075;
  font-size: 8px;
  font-weight: 800;
}

.management-zones {
  display: grid;
  padding: 0 12px 12px 45px;
  background: white;
}

.management-zone {
  position: relative;
  display: grid;
  grid-template-columns: minmax(130px, 1fr) minmax(150px, .9fr) 58px 62px auto;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid #edf0f4;
}

.management-zone::before {
  position: absolute;
  top: 0;
  bottom: 50%;
  left: -28px;
  width: 20px;
  border-bottom: 1px solid #dfe4eb;
  border-left: 1px solid #dfe4eb;
  content: "";
}

.management-zone:last-child {
  border-bottom: 0;
}

.zone-main {
  display: grid;
  grid-template-columns: 33px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.zone-main strong {
  overflow: hidden;
  color: #263247;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zone-stat {
  display: grid;
  justify-items: center;
  gap: 2px;
}

.zone-stat strong {
  color: #263247;
  font-size: 10px;
}

.zone-stat span {
  color: #949caa;
  font-size: 6px;
}

.management-history {
  margin-top: 12px;
}

.management-history summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  color: #303b4f;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}

.management-history summary strong {
  color: #8993a3;
  font-size: 7px;
}

.management-history-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 0 16px 16px;
}

.management-history-grid h3 {
  font-size: 10px;
}

.management-history-grid section > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 10px;
  padding: 8px 0;
  border-bottom: 1px solid #edf0f4;
}

.management-history-grid span {
  color: #344054;
  font-size: 8px;
  font-weight: 700;
}

.management-history-grid small {
  color: #8a93a3;
  font-size: 7px;
}

.management-history-grid a {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  color: #2563eb;
  font-size: 7px;
  font-weight: 800;
}

.team-directory-card {
  min-width: 0;
}

.team-heading {
  align-items: center;
  margin-bottom: 14px;
}

.team-filterbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(145px, .45fr) minmax(120px, .35fr) auto auto;
  align-items: end;
  gap: 8px;
  margin-bottom: 14px;
  padding: 11px;
  border: 1px solid #e8ebf0;
  border-radius: 7px;
  background: #f8f9fb;
}

.team-filterbar label {
  display: grid;
  gap: 5px;
}

.team-filterbar label > span {
  color: #818b9b;
  font-size: 7px;
  font-weight: 800;
}

.team-table-wrap {
  overflow-x: auto;
}

.team-table-head,
.team-table-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.25fr) minmax(115px, .7fr) 75px 65px 65px 75px 110px 65px;
  align-items: center;
  gap: 10px;
  min-width: 900px;
}

.team-table-head {
  padding: 8px 10px;
  color: #929baa;
  border-bottom: 1px solid #e8ebf0;
  background: #fafbfc;
  font-size: 7px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.team-table-row {
  padding: 11px 10px;
  color: #687386;
  border-bottom: 1px solid #edf0f4;
  font-size: 8px;
}

.team-table-row:last-child {
  border-bottom: 0;
}

.team-person {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.team-person > i {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  color: #1d4ed8;
  border-radius: 50%;
  background: #e8f0ff;
  font-size: 7px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.team-person > span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.team-person strong,
.team-person small,
.team-zone {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-person strong,
.team-table-row > strong {
  color: #263247;
  font-size: 8px;
}

.team-person small,
.team-table-row time {
  color: #8a93a3;
  font-size: 7px;
}

.team-status {
  display: inline-flex;
  padding: 4px 7px;
  color: #087f6e;
  border-radius: 20px;
  background: #e5f7f2;
  font-size: 7px;
  font-style: normal;
  font-weight: 800;
}

.team-status.inactive {
  color: #b42330;
  background: #fff0f1;
}

.team-empty {
  display: grid;
  gap: 5px;
  margin-top: 10px;
}

.management-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-top: 14px;
  color: #8993a3;
  font-size: 8px;
}

.management-pagination a {
  padding: 6px 9px;
  color: #344054;
  border: 1px solid #dfe4eb;
  border-radius: 5px;
  background: white;
  font-weight: 800;
}

@media (max-width: 1120px) {
  .management-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .structure-workspace {
    grid-template-columns: 1fr;
  }

  .structure-forms-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .structure-forms-card > .director-section-heading {
    grid-column: 1 / -1;
  }

  .management-inline-form:nth-of-type(2) {
    padding-top: 3px;
    border-top: 0;
  }

  .team-filterbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .structure-command-banner {
    align-items: flex-start;
    flex-direction: column;
  }

  .structure-command-flow {
    max-width: 100%;
    overflow-x: auto;
  }

  .structure-forms-card,
  .management-history-grid {
    grid-template-columns: 1fr;
  }

  .management-inline-form:nth-of-type(2) {
    padding-top: 14px;
    border-top: 1px solid #edf0f4;
  }

  .management-national > header {
    grid-template-columns: 34px minmax(0, 1fr) auto;
  }

  .management-owner {
    grid-column: 2;
  }

  .management-national > header > .management-edit {
    grid-column: 3;
    grid-row: 1 / 3;
  }

  .management-zones {
    padding-left: 12px;
  }

  .management-zone {
    grid-template-columns: minmax(140px, 1fr) minmax(130px, .8fr) 55px 60px auto;
    min-width: 590px;
  }

  .management-zone::before {
    display: none;
  }

  .management-zones {
    overflow-x: auto;
  }
}

@media (max-width: 560px) {
  .management-metrics,
  .team-filterbar {
    grid-template-columns: 1fr;
  }
}