/* TKMI / Daerat — palette derived from institutional logo */
:root {
  --color-primary: #0b5e3f;
  --color-primary-dark: #084c33;
  --color-accent: #14714b;
  --color-on-primary: #f1e9c9;
  --color-on-primary-muted: rgba(241, 233, 201, 0.85);
  --bg: #f5f7f4;
  --surface: #fcfcfc;
  --text: #2b2b2b;
  --muted: #5a5f5c;
  --border: #d4e0d8;
  --accent-link: #0d6b4a;
  --accent-hover: #084c33;
  --danger: #b42318;
  --success: #0d6832;
  --radius: 8px;
  --shadow: 0 1px 3px rgba(8, 76, 51, 0.08);
  --shadow-lg: 0 8px 24px rgba(8, 76, 51, 0.12);
  --header-h: 52px;
  --layout-max-width: 1480px;
  --layout-side-padding: 1rem;
  --ui-font-size: 0.96875rem;
  --ui-control-h: 2.3125rem;
  --ui-btn-min-h: 2.3125rem;
  --ui-card-pad-y: 0.875rem;
  --ui-card-pad-x: 1.1rem;
  --ui-section-gap: 0.8rem;
  --ui-hero-title: clamp(1.1rem, 2.2vw, 1.4rem);
  --ui-hero-lead: 0.8125rem;
  --font-sans: "Inter", "Noto Sans Arabic", system-ui, -apple-system, sans-serif;
  --font-arabic: "Noto Sans Arabic", "Inter", sans-serif;
  font-family: var(--font-sans);
}

body.theme-ashara {
  --color-primary: #6b1e2b;
  --color-primary-dark: #4f1320;
  --color-accent: #8a2c3d;
  --accent-link: #7b2233;
  --accent-hover: #5e1626;
  --bg: #f8f3f5;
  --surface: #fffdfd;
  --border: #ead4d9;
  --shadow: 0 2px 10px rgba(79, 19, 32, 0.08);
  --shadow-lg: 0 18px 44px rgba(79, 19, 32, 0.16);
}

body.theme-istifada {
  --color-primary: #1f4d89;
  --color-primary-dark: #163964;
  --color-accent: #2f65ad;
  --accent-link: #1f4d89;
  --accent-hover: #163964;
  --bg: #f2f6fc;
  --surface: #fbfdff;
  --border: #cfddee;
  --shadow: 0 2px 10px rgba(22, 57, 100, 0.08);
  --shadow-lg: 0 18px 44px rgba(22, 57, 100, 0.16);
}

body.theme-sherullah {
  --color-primary: #7a2e18;
  --color-primary-dark: #5d2112;
  --color-accent: #a64624;
  --accent-link: #7a2e18;
  --accent-hover: #5d2112;
  --bg: #fbf3ef;
  --surface: #fffdfc;
  --border: #efd8cf;
  --shadow: 0 2px 10px rgba(93, 33, 18, 0.08);
  --shadow-lg: 0 18px 44px rgba(93, 33, 18, 0.16);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 8% -5%, rgba(255, 255, 255, 0.75) 0, transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 94%, #ffffff) 0%, var(--bg) 55%);
  color: var(--text);
  font-size: var(--ui-font-size);
  line-height: 1.45;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  color: var(--accent-link);
  text-decoration: none;
}
a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

/* —— Header —— */
.site-header {
  background: linear-gradient(160deg, var(--color-primary) 0%, var(--color-primary-dark) 90%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: var(--shadow-lg);
  position: sticky;
  top: 0;
  z-index: 30;
}

.header-inner {
  max-width: var(--layout-max-width);
  margin: 0 auto;
  padding: 0.5rem var(--layout-side-padding);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  min-height: var(--header-h);
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--color-on-primary);
}
.brand-lockup:hover {
  text-decoration: none;
  color: #fff;
}
.brand-lockup img {
  height: 36px;
  width: auto;
  display: block;
  border-radius: 6px;
  object-fit: contain;
}
.brand-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  line-height: 1.2;
}
.brand-title {
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
.brand-sub {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--color-on-primary-muted);
}

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.7rem;
}
.nav-collapsible {
  gap: 0.65rem;
  align-items: center;
}
.domain-nav {
  row-gap: 0.75rem;
}
.menu-group {
  border: 1px solid rgba(241, 233, 201, 0.38);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  min-width: 9rem;
  position: relative;
}
.domain-group {
  min-width: 10.25rem;
}
.menu-group summary {
  list-style: none;
  cursor: pointer;
  color: var(--color-on-primary);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.4rem 0.7rem;
}
.menu-group summary::-webkit-details-marker {
  display: none;
}
.menu-group summary::after {
  content: "▾";
  float: right;
  font-weight: 700;
  opacity: 0.9;
}
.menu-group[open] summary::after {
  content: "▴";
}
.menu-links {
  display: none;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.35rem;
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  min-width: 12rem;
  border-radius: 10px;
  border: 1px solid rgba(241, 233, 201, 0.4);
  background: color-mix(in srgb, var(--color-primary-dark) 75%, #ffffff 25%);
  box-shadow: var(--shadow-lg);
  z-index: 40;
}
.menu-group[open] .menu-links {
  display: flex;
}
.menu-links a {
  font-size: 0.84rem;
  padding: 0.42rem 0.55rem;
  border-radius: 6px;
}
.sub-menu-group {
  border: 1px solid rgba(241, 233, 201, 0.28);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.05);
  margin: 0.2rem 0.2rem 0.35rem;
}
.sub-menu-group summary {
  list-style: none;
  cursor: pointer;
  color: rgba(241, 233, 201, 0.96);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.36rem 0.55rem;
}
.sub-menu-group summary::-webkit-details-marker {
  display: none;
}
.sub-menu-group summary::after {
  content: "▾";
  float: right;
}
.sub-menu-group[open] summary::after {
  content: "▴";
}
.menu-stack-links {
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 0.2rem;
  padding: 0.05rem 0.35rem 0.45rem;
}
.sub-menu-group[open] .menu-stack-links {
  display: flex;
}
.menu-stack-links a {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0.36rem 0.55rem;
  border-radius: 7px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-on-primary);
  font-size: 0.79rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
}
.menu-stack-links a:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(241, 233, 201, 0.35);
  color: #fff;
  text-decoration: none;
}
.menu-note {
  display: block;
  font-size: 0.8rem;
  padding: 0.42rem 0.55rem;
  border-radius: 6px;
  color: rgba(241, 233, 201, 0.86);
  background: rgba(255, 255, 255, 0.08);
}
.nav a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-on-primary);
  padding: 0.4rem 0.65rem;
  border-radius: 6px;
  text-decoration: none;
}
.nav a:hover {
  background: rgba(255, 255, 255, 0.12);
  text-decoration: none;
  color: #fff;
}
.user-menu {
  min-width: 12.5rem;
}
.user-menu-label {
  display: inline-block;
  width: calc(100% - 1.1rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-menu summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--ui-control-h);
  box-sizing: border-box;
}
.user-menu-links {
  left: auto;
  right: 0;
}
.user-menu-meta {
  display: block;
  color: var(--color-on-primary-muted);
  font-size: 0.74rem;
  padding: 0.3rem 0.55rem 0.15rem;
}
@media (max-width: 900px) {
  .nav-collapsible {
    width: 100%;
  }
  .menu-group {
    width: 100%;
  }
  .menu-links {
    position: static;
    min-width: 0;
    border: none;
    box-shadow: none;
    background: transparent;
    padding-top: 0;
  }
  .user-menu {
    width: 100%;
    min-width: 0;
  }
  .user-menu-links {
    position: static;
    min-width: 0;
    width: 100%;
    box-shadow: none;
  }
}

.logout-form {
  margin: 0;
}
.link-btn {
  background: none;
  border: 1px solid rgba(241, 233, 201, 0.45);
  color: var(--color-on-primary);
  cursor: pointer;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  padding: 0.35rem 0.65rem;
  border-radius: 6px;
}
.link-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  text-decoration: none;
}

.container {
  flex: 1;
  max-width: var(--layout-max-width);
  margin: 0 auto;
  padding: 0.9rem var(--layout-side-padding) 1.75rem;
  width: 100%;
}

.site-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--color-primary-dark);
  padding: 0.4rem var(--layout-side-padding);
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--color-on-primary-muted);
}
.site-footer p {
  margin: 0;
}
.site-footer-inner {
  margin: 0 auto;
  max-width: var(--layout-max-width);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem 1.25rem;
}
.site-footer-inner > * {
  flex: 0 1 auto;
  min-width: 0;
}
.footer-copyright {
  color: var(--color-on-primary-muted);
}
.footer-joined,
.footer-mode {
  margin: 0;
  color: var(--color-on-primary);
  font-weight: 500;
}
.footer-mode strong {
  font-weight: 700;
}
.footer-clock {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  color: var(--color-on-primary);
  white-space: nowrap;
}
.clock-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: #71d39f;
  box-shadow: 0 0 0 0 rgba(113, 211, 159, 0.6);
  animation: clockPulse 1.6s infinite;
}
@keyframes clockPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(113, 211, 159, 0.6);
  }
  100% {
    box-shadow: 0 0 0 10px rgba(113, 211, 159, 0);
  }
}
@media (min-width: 901px) {
  .site-footer-inner {
    flex-wrap: nowrap;
    gap: 0.5rem;
  }
  .site-footer-inner > * {
    flex: 1 1 0;
    text-align: center;
  }
  .footer-copyright {
    text-align: left;
  }
  .footer-clock {
    justify-content: flex-end;
  }
}
@media (max-width: 900px) and (min-width: 521px) {
  .site-footer-inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    gap: 0.3rem 1rem;
  }
  .site-footer-inner > * {
    text-align: center;
  }
}
@media (max-width: 520px) {
  .site-footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  .site-footer-inner > * {
    width: 100%;
  }
}

.page-head h1 {
  margin: 0 0 0.35rem;
  font-size: 1.75rem;
  color: var(--color-primary-dark);
}
.lead {
  font-size: 1.05rem;
  color: var(--muted);
  max-width: 720px;
}
.muted {
  color: var(--muted);
}
.small {
  font-size: 0.8125rem;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--ui-card-pad-y) var(--ui-card-pad-x);
  margin-bottom: var(--ui-section-gap);
  box-shadow: var(--shadow);
  transition: box-shadow 160ms ease, transform 160ms ease;
}
.card .card {
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.5rem;
  box-shadow: none;
}
.card .card:hover {
  transform: none;
  box-shadow: none;
}
.card .card > h2,
.card .card > h3,
.mza-step-title,
.mza-subhead {
  margin: 0 0 0.3rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}
.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-1px);
}
.card.highlight {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px rgba(20, 113, 75, 0.25);
}
.session-card code {
  word-break: break-all;
}

.grid.two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}
.grid.three {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}
.domain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.domain-panel {
  position: relative;
  overflow: hidden;
  border-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 225px;
}
.domain-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
}
.domain-panel h2 {
  margin-top: 0.35rem;
  margin-bottom: 0.35rem;
}
.domain-panel .btn-row {
  margin-top: auto;
}
.domain-kicker {
  margin: 0;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--muted);
}
.domain-allocation::before {
  background: linear-gradient(140deg, #74d3ac 0%, transparent 60%);
}
.domain-followup::before {
  background: linear-gradient(140deg, #8bb5f5 0%, transparent 60%);
}
.domain-reporting::before {
  background: linear-gradient(140deg, #d7aaee 0%, transparent 60%);
}
.domain-finance::before {
  background: linear-gradient(140deg, #f2be8f 0%, transparent 60%);
}
.domain-members::before {
  background: linear-gradient(140deg, #7ec8e3 0%, transparent 60%);
}

/* Clickable domain tiles (home) */
.domain-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.15rem;
}
.domain-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 220px;
  padding: 1.35rem 1.4rem 1.25rem;
  border-radius: calc(var(--radius) + 2px);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}
.domain-tile:hover,
.domain-tile:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--color-accent) 35%, var(--border));
  outline: none;
}
.domain-tile-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.22;
}
.domain-tile .domain-kicker {
  position: relative;
  z-index: 1;
}
.domain-tile h2,
.domain-tile h3 {
  position: relative;
  z-index: 1;
  margin: 0.35rem 0 0.5rem;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  color: var(--color-primary-dark);
}
.domain-tile-summary {
  position: relative;
  z-index: 1;
  margin: 0;
  flex: 1;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--muted);
}
.domain-tile-cta {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-primary-dark);
}
.domain-tile-cta svg {
  transition: transform 180ms ease;
}
.domain-tile:hover .domain-tile-cta svg {
  transform: translateX(3px);
}
.domain-allocation .domain-tile-glow {
  background: linear-gradient(145deg, #74d3ac 0%, transparent 58%);
}
.domain-allocation .domain-kicker {
  color: #0d6832;
}
.domain-followup .domain-tile-glow {
  background: linear-gradient(145deg, #8bb5f5 0%, transparent 58%);
}
.domain-followup .domain-kicker {
  color: #1f4d89;
}
.domain-reporting .domain-tile-glow {
  background: linear-gradient(145deg, #d7aaee 0%, transparent 58%);
}
.domain-reporting .domain-kicker {
  color: #6b3f8a;
}
.domain-finance .domain-tile-glow {
  background: linear-gradient(145deg, #f2be8f 0%, transparent 58%);
}
.domain-finance .domain-kicker {
  color: #9a5a1a;
}
.domain-members .domain-tile-glow {
  background: linear-gradient(145deg, #7ec8e3 0%, transparent 58%);
}
.domain-members .domain-kicker {
  color: #1a6b85;
}

.page-head-dashboard .lead {
  max-width: 42rem;
}

/* Domain hub detail pages */
.domain-hub-hero {
  position: relative;
  padding: 0.85rem 1rem;
  margin-bottom: 0.85rem;
  border-radius: calc(var(--radius) + 2px);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.domain-hub-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.2;
}
.domain-hub-allocation::before {
  background: linear-gradient(135deg, #74d3ac 0%, transparent 55%);
}
.domain-hub-followup::before {
  background: linear-gradient(135deg, #8bb5f5 0%, transparent 55%);
}
.domain-hub-reporting::before {
  background: linear-gradient(135deg, #d7aaee 0%, transparent 55%);
}
.domain-hub-finance::before {
  background: linear-gradient(135deg, #f2be8f 0%, transparent 55%);
}
.domain-hub-members::before {
  background: linear-gradient(135deg, #7ec8e3 0%, transparent 55%);
}
.domain-hub-back {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.85rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
}
.domain-hub-back:hover {
  color: var(--color-primary-dark);
}
.domain-hub-hero .domain-kicker,
.domain-hub-hero h1,
.domain-hub-lead {
  position: relative;
  z-index: 1;
}
.domain-hub-hero h1 {
  margin: 0.15rem 0 0.3rem;
  font-size: clamp(1.2rem, 2.5vw, 1.55rem);
  letter-spacing: -0.03em;
}
.domain-hub-lead {
  margin: 0;
  max-width: 40rem;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--muted);
}
.domain-hub-section {
  margin-bottom: 1.75rem;
}
.domain-hub-section-title {
  margin: 0 0 0.85rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 700;
  color: var(--muted);
}
.domain-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}
.domain-action-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.15rem 1.2rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  transition: box-shadow 160ms ease, border-color 160ms ease;
}
.domain-action-card:hover {
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--color-accent) 28%, var(--border));
}
.domain-action-body h3 {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
}
.domain-action-body p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--muted);
}
.domain-action-card .btn {
  align-self: flex-start;
  margin-top: auto;
}
.card-compact {
  padding: 1rem 1.15rem;
}
.card-compact h2 {
  margin-top: 0;
  font-size: 1.1rem;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--ui-section-gap);
}
.stack.narrow {
  max-width: 520px;
}

label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
}
input[type="text"],
input[type="password"],
input[type="date"],
select,
textarea {
  padding: 0.38rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
  font-size: 0.875rem;
  background: #fff;
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(20, 113, 75, 0.2);
}
textarea {
  resize: vertical;
  min-height: 120px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: var(--ui-btn-min-h);
  padding: 0.35rem 0.8rem;
  border-radius: 6px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 0.8125rem;
  line-height: 1.2;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn.primary {
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-on-primary);
  border-color: transparent;
}
.btn.primary:hover {
  background: var(--color-primary-dark);
  color: #fff;
}
.btn.secondary {
  background: #fff;
  border-color: var(--border);
  color: var(--text);
}
.btn.secondary:hover {
  background: var(--bg);
  border-color: var(--color-accent);
  color: var(--color-primary-dark);
}
.btn.is-disabled {
  cursor: not-allowed;
  opacity: 0.72;
  pointer-events: none;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-top: 0.75rem;
}
.stack > .btn-row {
  margin-top: 0;
  align-self: flex-start;
}
.stack > .btn.primary,
.stack > .btn.secondary:not(.alloc-filter-chip) {
  align-self: flex-start;
}
.inline-form {
  display: inline-flex;
  align-items: center;
  margin: 0;
  vertical-align: middle;
}
.inline-form .btn {
  width: auto;
}

.search-members-sync-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem 0.85rem;
  margin-bottom: 0.65rem;
}

.search-members-sync-note {
  flex: 1 1 16rem;
  margin: 0;
  max-width: 42rem;
}

.search-members-sync-form {
  flex: 0 0 auto;
  margin: 0;
}

@media (min-width: 640px) {
  .search-members-sync-note {
    text-align: right;
  }
}

.alert {
  padding: 0.55rem 0.75rem;
  border-radius: 6px;
  margin-bottom: 0.65rem;
  font-size: 0.875rem;
}
.alert-error {
  background: #fdecea;
  color: var(--danger);
  border: 1px solid #f5c2c0;
}
.alert-warning {
  background: #fff8e6;
  border: 1px solid #f0e0a8;
  color: #6a5500;
}
.alert-success {
  background: #e8f5ec;
  border: 1px solid #b8dfc6;
  color: var(--success);
}

.table-wrap {
  overflow-x: auto;
  margin: 0.35rem 0 0.65rem;
}
.table-wrap.scroll {
  max-height: min(72vh, 640px);
  overflow: auto;
}

table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}
table.data-table th,
table.data-table td {
  border: 1px solid var(--border);
  padding: 0.3rem 0.45rem;
  text-align: left;
  line-height: 1.3;
}
table.data-table th {
  background: linear-gradient(180deg, #e8f0eb 0%, #dce8e0 100%);
  color: var(--color-primary-dark);
  font-weight: 600;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}
.metrics > div {
  background: var(--surface);
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.metric-label {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
}
.metric-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
}

.chart-host {
  margin: 1rem 0;
  min-height: 320px;
}

.allocation-report-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  margin-top: 0.75rem;
  align-items: stretch;
}

.allocation-report-charts .chart-host {
  margin: 0;
  background: var(--surface);
  border-radius: 8px;
  border: 1px solid var(--border);
  padding: 0.5rem;
  box-shadow: var(--shadow);
}

.allocation-report-charts .chart-host-wide {
  grid-column: 1 / -1;
}

/* —— Allocation dashboard (reports) —— */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

table.data-table th.num,
table.data-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

table.data-table.compact th,
table.data-table.compact td {
  padding: 0.22rem 0.38rem;
  font-size: 0.78rem;
}

.table-wrap.scroll-sm {
  max-height: 220px;
  overflow: auto;
}

/* —— Resizable table columns (table_column_resize.js) —— */
table.table-col-resizable:not(.table-col-resizable--teams-allocate) {
  table-layout: fixed;
  width: max-content;
  max-width: none;
}

#allocate-table.table-col-resizable--teams-allocate {
  table-layout: auto;
  width: 100%;
}

table.table-col-resizable th,
table.table-col-resizable td {
  min-width: 0;
}

table.table-col-resizable thead th.col-resize-th,
table.table-col-resizable thead td.col-resize-th {
  position: relative;
  overflow: visible;
}

.col-resize-handle {
  position: absolute;
  top: 0;
  right: -3px;
  width: 7px;
  height: 100%;
  cursor: col-resize;
  touch-action: none;
  z-index: 4;
}

.col-resize-handle::after {
  content: "";
  position: absolute;
  top: 15%;
  bottom: 15%;
  left: 3px;
  width: 1px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--color-primary-dark) 35%, transparent);
  opacity: 0;
  transition: opacity 0.12s ease;
}

table.table-col-resizable thead th:hover .col-resize-handle::after,
table.table-col-resizable thead th:focus-within .col-resize-handle::after,
.col-resize-handle:hover::after,
body.col-resize-active .col-resize-handle::after {
  opacity: 1;
}

body.col-resize-active {
  cursor: col-resize;
  user-select: none;
}

body.col-resize-active * {
  cursor: col-resize !important;
}

.alloc-dash {
  max-width: var(--layout-max-width);
  margin: 0 auto;
}

/* —— Allocation report · premium shell —— */
.alloc-dash-premium {
  padding-bottom: 2rem;
}

.alloc-premium-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  margin-bottom: 0.75rem;
  padding: 0.75rem 0.95rem;
  border-radius: calc(var(--radius) + 2px);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--surface) 82%, var(--color-primary) 9%) 0%,
      var(--surface) 48%,
      color-mix(in srgb, var(--surface) 90%, var(--color-primary-dark) 6%) 100%
    );
  border: 1px solid color-mix(in srgb, var(--border) 70%, var(--color-primary) 30%);
  box-shadow: var(--shadow-lg);
}

.alloc-premium-hero-main {
  flex: 1 1 280px;
  max-width: 42rem;
}

.alloc-premium-eyebrow {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.alloc-premium-title {
  margin: 0 0 0.2rem;
  font-size: var(--ui-hero-title);
  font-weight: 800;
  color: var(--color-primary-dark);
  letter-spacing: -0.02em;
}

.alloc-premium-lead {
  margin: 0;
  font-size: var(--ui-hero-lead);
  line-height: 1.35;
  color: var(--muted);
}

.alloc-premium-hint {
  font-weight: 600;
  color: var(--color-primary-dark);
}

.alloc-premium-hero-aside {
  flex: 0 1 auto;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}

.alloc-type-label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.alloc-type-segment {
  display: inline-flex;
  padding: 4px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 88%, var(--border) 12%);
  border: 1px solid var(--border);
  gap: 4px;
}

.alloc-type-segment .alloc-seg {
  position: relative;
  cursor: pointer;
  border-radius: 9px;
  padding: 0.45rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted);
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.alloc-type-segment .alloc-seg input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.alloc-type-segment .alloc-seg-btn {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  margin: 0;
  cursor: pointer;
}

.alloc-type-segment .alloc-seg.is-active {
  background: var(--surface);
  color: var(--color-primary-dark);
  box-shadow: var(--shadow);
}

.alloc-premium-form {
  margin-bottom: 0.85rem;
  padding: 0.75rem 0.85rem 0.7rem;
  border-radius: calc(var(--radius) + 2px);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.alloc-premium-form-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.65rem 0.85rem;
}

.alloc-premium-fieldgroup {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.alloc-premium-fieldgroup-grow {
  flex: 1 1 260px;
}

.alloc-fieldgroup-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.alloc-fieldrow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.alloc-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-primary-dark);
}

.alloc-field input,
.alloc-field select {
  min-width: 10rem;
  padding: 0.5rem 0.65rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  font: inherit;
  background: var(--surface);
}

.alloc-field-zone-select select {
  min-width: min(100%, 18rem);
  font-weight: 500;
}

.alloc-field-hint {
  font-weight: 500;
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
}

.alloc-premium-submit {
  flex: 0 0 auto;
  margin-left: auto;
}

.alloc-premium-submit-duo {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
}

.alloc-btn-generate {
  padding: 0.6rem 1.35rem;
  border-radius: 11px;
  font-weight: 700;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary) 35%, transparent);
}

.alloc-advanced-scope {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--border);
}

.alloc-advanced-scope summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--accent-link);
}

.alloc-advanced-help {
  margin: 0.5rem 0 0.65rem;
  max-width: 48rem;
}

.alloc-multiselect {
  min-height: 7rem;
  border-radius: 10px;
  width: min(100%, 22rem);
}

.alloc-premium-meta {
  border-radius: 14px;
}

@media (max-width: 720px) {
  .alloc-premium-hero-aside {
    align-items: stretch;
    text-align: left;
    width: 100%;
  }

  .alloc-type-segment {
    width: 100%;
    justify-content: stretch;
  }

  .alloc-type-segment .alloc-seg,
  .alloc-type-segment .alloc-seg-btn {
    flex: 1;
    text-align: center;
  }

  .alloc-premium-submit {
    margin-left: 0;
    width: 100%;
  }

  .alloc-btn-generate {
    width: 100%;
  }
}

.alloc-dash-hero {
  margin-bottom: 1.25rem;
}

.alloc-dash-title {
  margin: 0 0 0.35rem;
  font-size: 1.65rem;
  color: var(--color-primary-dark);
}

.alloc-dash-sub {
  margin: 0;
  max-width: 52rem;
  color: var(--muted);
  line-height: 1.5;
}

.alloc-dash-hero-bar {
  margin-bottom: 1rem;
}

.alloc-rpt-form {
  margin-bottom: 1.25rem;
  padding: 1rem 1.15rem;
}

.alloc-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
}

.alloc-toolbar-left {
  flex: 1 1 340px;
}

.alloc-toolbar-right {
  flex: 0 1 440px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  justify-content: flex-end;
}

.alloc-toolbar-title {
  margin: 0 0 0.65rem;
  font-size: 1rem;
  color: var(--color-primary-dark);
}

.alloc-filters-inline {
  margin: 0;
}

.alloc-toolbar-actions {
  flex: 0 0 auto;
  align-self: flex-end;
}

.alloc-toolbar-right label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  min-width: 7.5rem;
}

.alloc-rpt-team-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.alloc-explore-panel {
  padding: 1.1rem 1.15rem;
  margin-bottom: 1.25rem;
}

.alloc-explore-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem 1rem;
  margin: 0.75rem 0 1rem;
}

.alloc-explore-filters label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
}

.alloc-plot-explore {
  min-height: 360px;
}

.alloc-explore-chart-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1rem 1.25rem;
}

.alloc-explore-chart-main {
  flex: 1 1 280px;
  min-width: 0;
}

.alloc-explore-legend {
  flex: 0 0 220px;
  max-width: 100%;
  padding: 0.35rem 0.5rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 92%, var(--bg) 8%);
  align-self: stretch;
}

.alloc-explore-legend-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.alloc-explore-legend-item {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 0.5rem 0.65rem;
  font-size: 0.8rem;
  color: var(--color-primary-dark);
}

.alloc-explore-swatch {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}

.alloc-explore-legend-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alloc-explore-legend-count {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.alloc-explore-legend-total {
  margin: 0.65rem 0 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}

/* Compact coverage strip (allocation reports) */
.alloc-coverage-compact.card {
  padding: 0.65rem 0.85rem 0.75rem;
  margin-bottom: 1rem;
}

.alloc-coverage-compact.card:hover {
  transform: none;
}

.alloc-cov-title {
  margin: 0 0 0.45rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}

.alloc-cov-panels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.alloc-cov-panels-line1 {
  margin-bottom: 0.35rem;
}

.alloc-cov-panels-line1 .alloc-cov-mini {
  flex: 1 1 5.5rem;
  min-width: 4.75rem;
}

.alloc-cov-panels-row .alloc-cov-mini {
  flex: 1 1 4.75rem;
  min-width: 4.25rem;
}

.alloc-cov-mini {
  flex: 1 1 6.5rem;
  min-width: 5.75rem;
  padding: 0.32rem 0.4rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 94%, var(--bg) 6%);
  text-align: center;
}

.alloc-cov-mini-val {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary-dark);
  line-height: 1.15;
}

.alloc-cov-mini-lbl {
  display: block;
  margin-top: 0.12rem;
  font-size: 0.58rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--muted);
  line-height: 1.2;
}

.alloc-cov-foot {
  margin: 0.35rem 0 0;
  font-size: 0.62rem;
  line-height: 1.35;
  max-width: 46rem;
}

.alloc-zone-leadership {
  padding: 1.1rem 1.15rem;
  margin-bottom: 1.25rem;
}

.alloc-zone-lead-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem 1.5rem;
  margin-top: 0.65rem;
}

.alloc-zone-lead-block {
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 94%, var(--bg) 6%);
}

.alloc-lead-name {
  margin: 0.25rem 0 0.35rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-primary-dark);
}

.alloc-lead-details {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.alloc-lead-details li {
  margin: 0.2rem 0;
}

.alloc-lead-k {
  display: inline-block;
  min-width: 4.5rem;
  font-weight: 600;
  color: var(--muted);
}

.alloc-coverage-lead {
  margin: 0 0 0.85rem;
  max-width: 52rem;
}

@media (max-width: 720px) {
  .alloc-explore-chart-row {
    flex-direction: column;
  }

  .alloc-explore-legend {
    flex: 1 1 auto;
    width: 100%;
  }
}

.alloc-member-zone-board {
  padding: 1.1rem 1.15rem;
  margin-bottom: 1.25rem;
}

.alloc-mz-board-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  margin-bottom: 1rem;
}

.alloc-mz-board-head .alloc-section-title {
  margin-bottom: 0.35rem;
}

.alloc-mz-board-lead {
  margin: 0;
  max-width: 42rem;
}

.alloc-mz-board-meta {
  margin: 0;
  font-weight: 600;
  white-space: nowrap;
}

.alloc-member-zone-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 1.15rem;
}

.alloc-mz-card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  border: 1px solid color-mix(in srgb, var(--border) 88%, var(--color-primary) 12%);
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--color-primary-dark) 6%, transparent),
    0 8px 24px color-mix(in srgb, var(--color-primary-dark) 4%, transparent);
}

.alloc-mz-card-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 1rem 1.1rem 0.9rem;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-primary) 10%, var(--surface)) 0%,
    color-mix(in srgb, var(--color-primary) 4%, var(--surface)) 100%
  );
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, var(--color-primary) 30%);
}

.alloc-mz-card-eyebrow {
  margin: 0 0 0.15rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.alloc-mz-name {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-primary-dark);
}

.alloc-mz-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.alloc-mz-hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 4.25rem;
  padding: 0.45rem 0.65rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 88%, var(--bg) 12%);
  border: 1px solid var(--border);
}

.alloc-mz-hero-stat--primary {
  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--border));
  background: color-mix(in srgb, var(--color-primary) 14%, var(--surface));
}

.alloc-mz-hero-stat-val {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-primary-dark);
}

.alloc-mz-hero-stat-lbl {
  margin-top: 0.15rem;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-align: center;
}

.alloc-mz-incharge {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0 1.1rem;
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--border) 35%, transparent);
}

.alloc-mz-incharge-icon {
  flex-shrink: 0;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--color-primary);
}

.alloc-mz-incharge-label {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.alloc-mz-incharge-value {
  margin: 0.1rem 0 0;
  font-size: 0.85rem;
  line-height: 1.35;
}

.alloc-mz-block {
  padding: 0 1.1rem;
}

.alloc-mz-block-title {
  margin: 0 0 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.alloc-mz-team-bars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.alloc-mz-team-bar-row {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.alloc-mz-team-bar-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.82rem;
}

.alloc-mz-team-bar-name {
  font-weight: 600;
  color: var(--text, inherit);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.alloc-mz-team-bar-count {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary-dark);
  font-weight: 600;
}

.alloc-mz-team-bar-pct {
  font-weight: 500;
  color: var(--muted);
  font-size: 0.78rem;
}

.alloc-mz-team-bar-track {
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 55%, transparent);
  overflow: hidden;
}

.alloc-mz-team-bar-fill {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--color-primary) 85%, #fff 15%),
    var(--color-primary-dark)
  );
  transition: width 0.35s ease;
}

.alloc-mz-split {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 0.85rem 1rem;
  padding-bottom: 1rem;
}

.alloc-mz-side {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.alloc-mz-jj-table-wrap {
  max-height: 11rem;
  border-radius: 10px;
  border: 1px solid var(--border);
}

.alloc-mz-jj-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: color-mix(in srgb, var(--color-primary) 8%, var(--surface));
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.alloc-mz-jj-table tbody td {
  font-size: 0.82rem;
}

.alloc-mz-count-badge {
  display: inline-block;
  min-width: 1.75rem;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
  background: color-mix(in srgb, var(--color-primary) 12%, var(--surface));
  color: var(--color-primary-dark);
}

.alloc-mz-age-bars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.alloc-mz-age-row {
  display: grid;
  grid-template-columns: 2.75rem 1fr 2rem;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
}

.alloc-mz-age-label {
  font-weight: 600;
  color: var(--muted);
}

.alloc-mz-age-track {
  height: 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 50%, transparent);
  overflow: hidden;
}

.alloc-mz-age-fill {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: inherit;
  background: color-mix(in srgb, #1a4dab 75%, var(--color-primary) 25%);
}

.alloc-mz-age-val {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary-dark);
}

.alloc-mz-host-stack {
  display: flex;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--border) 45%, transparent);
}

.alloc-mz-host-seg {
  display: block;
  height: 100%;
  min-width: 2px;
}

.alloc-mz-host-seg--host {
  background: #137333;
}

.alloc-mz-host-seg--other {
  background: #1a4dab;
}

.alloc-mz-host-seg--unknown {
  background: #9aa0a6;
}

.alloc-mz-host-legend {
  list-style: none;
  margin: 0.45rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
  font-size: 0.8rem;
}

.alloc-mz-host-legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.alloc-mz-host-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.alloc-mz-host-dot--host {
  background: #137333;
}

.alloc-mz-host-dot--other {
  background: #1a4dab;
}

.alloc-mz-host-dot--unknown {
  background: #9aa0a6;
}

.alloc-mz-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 1.5rem;
  text-align: center;
}

@media (max-width: 720px) {
  .alloc-mz-split {
    grid-template-columns: 1fr;
  }

  .alloc-mz-card-hero {
    flex-direction: column;
    align-items: stretch;
  }

  .alloc-mz-hero-stats {
    justify-content: flex-start;
  }
}

/* Legacy class hooks (other pages) */
.alloc-mz-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.alloc-mz-zonal {
  margin: 0.45rem 0 0;
}

.alloc-mz-team-list {
  margin: 0.35rem 0 0;
  padding-left: 1.15rem;
  font-size: 0.875rem;
}

.alloc-mz-team-name {
  font-weight: 500;
}

.alloc-team-highlight {
  padding: 1rem 1.15rem;
  margin-bottom: 1.25rem;
  border-left: 4px solid var(--color-primary);
}

.alloc-team-highlight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
}

.alloc-team-highlight-main {
  margin: 0.2rem 0 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}

.alloc-filters {
  margin-bottom: 1.25rem;
  border-radius: var(--radius);
}

.alloc-filters-summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-primary-dark);
  padding: 0.35rem 0;
}

.alloc-filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  align-items: end;
}

.alloc-filters-zones select {
  min-height: 8rem;
}

.alloc-dash-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1rem 1.15rem;
  border-radius: var(--radius);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--surface) 88%, var(--color-primary) 12%) 0%,
    var(--surface) 100%
  );
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.alloc-dash-meta-label {
  margin: 0;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.alloc-dash-meta-value {
  margin: 0.15rem 0 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}

.alloc-dash-meta-hint {
  margin: 0;
  max-width: 28rem;
  line-height: 1.45;
}

.alloc-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}

.alloc-kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.alloc-kpi-value {
  font-size: 1.75rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary);
  line-height: 1.1;
}

.alloc-kpi-label {
  font-size: 0.8rem;
  color: var(--muted);
}

.alloc-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 900px) {
  .alloc-chart-grid {
    grid-template-columns: 1fr;
  }
}

.alloc-chart-panel {
  padding: 0.75rem 0.85rem 0.5rem;
  border-radius: var(--radius);
  min-height: 0;
}

.alloc-chart-panel-wide {
  grid-column: 1 / -1;
}

.alloc-chart-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: 1.25rem;
}

.alloc-plot {
  width: 100%;
  min-height: 320px;
}

.alloc-plot-tall {
  min-height: 400px;
}

.alloc-plot-empty {
  padding: 2rem 1rem;
  text-align: center;
}

.alloc-two-col {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, 1.35fr);
  gap: 1.25rem;
  align-items: start;
  margin-bottom: 1.5rem;
}

@media (max-width: 1024px) {
  .alloc-two-col {
    grid-template-columns: 1fr;
  }
}

.alloc-section-title {
  margin: 0 0 0.45rem;
  font-size: 0.95rem;
  color: var(--color-primary-dark);
}

.alloc-zone-board,
.alloc-teams-board {
  padding: 1.1rem 1.15rem;
  border-radius: var(--radius);
}

.alloc-zone-cards {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.alloc-zone-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  background: color-mix(in srgb, var(--surface) 92%, var(--bg) 8%);
}

.alloc-zone-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.alloc-zone-name {
  margin: 0;
  font-size: 1.05rem;
  color: var(--color-primary-dark);
}

.alloc-zone-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.alloc-pill {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 55%, transparent);
  color: var(--muted);
}

.alloc-pill-strong {
  background: color-mix(in srgb, var(--color-primary) 18%, var(--surface));
  color: var(--color-primary-dark);
}

.alloc-zone-zonal {
  margin: 0.5rem 0 0;
}

.alloc-zone-details {
  margin-top: 0.65rem;
}

.alloc-zone-details summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--accent-link);
}

.alloc-zone-details-body {
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px dashed var(--border);
}

.alloc-mini-head {
  margin: 0.75rem 0 0.35rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.alloc-mini-head:first-child {
  margin-top: 0;
}

.alloc-age-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.alloc-chip {
  font-size: 0.8rem;
  padding: 0.25rem 0.55rem;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
}

.alloc-host-list {
  margin: 0;
  padding-left: 1.2rem;
}

.alloc-teams-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}

.alloc-search input {
  min-width: min(100%, 280px);
  padding: 0.45rem 0.65rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  font: inherit;
}

.alloc-teams-table-wrap {
  max-height: min(70vh, 640px);
}

.alloc-raw-data {
  margin-top: 0.5rem;
  border-radius: var(--radius);
}

.alloc-raw-summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-primary-dark);
  padding: 0.5rem 0;
}

.alloc-raw-body {
  padding-bottom: 1rem;
}

.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2rem 0;
}

details.card summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-primary-dark);
}

.link-list {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
}

/* —— Login —— */
body.login-page {
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(
    165deg,
    var(--color-primary-dark) 0%,
    var(--color-primary) 45%,
    #0a4d35 100%
  );
  padding: 1.5rem;
}

.login-shell {
  width: 100%;
  max-width: 420px;
}

.login-hero {
  text-align: center;
  margin-bottom: 1.5rem;
}
.login-hero img {
  width: 120px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}
.login-hero h1 {
  margin: 1rem 0 0.35rem;
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--color-on-primary);
  letter-spacing: 0.02em;
}
.login-hero .tagline {
  margin: 0;
  font-size: 0.92rem;
  color: var(--color-on-primary-muted);
}

.login-card {
  width: 100%;
  padding: 1.75rem 1.75rem 2rem;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.login-card .stack label {
  color: var(--text);
}
.login-card h2 {
  margin: 0 0 1rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-primary-dark);
}

.filters-form .btn-row {
  margin-top: 0.25rem;
}

.result-block {
  margin-top: 1.5rem;
}

/* Register members */
.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.65rem 1rem;
}
.filter-grid label {
  font-size: 0.8rem;
}
.register-table-card .table-toolbar {
  margin-bottom: 0.5rem;
}
.register-table-wrap {
  max-height: min(70vh, 640px);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.register-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(180deg, #e8f0eb 0%, #dce8e0 100%);
  box-shadow: 0 1px 0 var(--border);
}
.register-table .client-filter-row th {
  top: 2.25rem;
  z-index: 2;
  padding: 0.25rem 0.35rem;
  background: #f0f4f1;
}
.register-table .client-filter-row input {
  width: 100%;
  min-width: 4rem;
  font-size: 0.8rem;
  padding: 0.25rem 0.35rem;
}
.register-filter-cell {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.register-filter-cell select,
.register-filter-cell input {
  width: 100%;
  min-width: 5rem;
  font-size: 0.74rem;
  padding: 0.2rem 0.3rem;
}
.register-table .col-select {
  width: 3.5rem;
  text-align: center;
}

.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem 1rem;
  align-items: end;
}
@media (max-width: 640px) {
  .form-grid-2 {
    grid-template-columns: 1fr;
  }
}

.link-like {
  cursor: pointer;
  color: var(--accent-link);
  font-weight: 500;
}
.row-edit-details summary {
  list-style: none;
}
.row-edit-details summary::-webkit-details-marker {
  display: none;
}

/* Automated team allocation — page shell (width matches .container / other pages) */
.auto-alloc-page {
  width: 100%;
  max-width: none;
  margin: 0;
}
.auto-alloc-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  margin-bottom: 0.85rem;
  padding: 0.75rem 0.95rem;
  border-radius: calc(var(--radius) + 2px);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.auto-alloc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 22%, transparent) 0%, transparent 52%);
  opacity: 0.35;
}
.auto-alloc-hero-text {
  position: relative;
  z-index: 1;
  flex: 1 1 20rem;
}
.auto-alloc-hero-actions {
  position: relative;
  z-index: 1;
  align-self: center;
}
.auto-alloc-kicker {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.auto-alloc-hero h1 {
  margin: 0 0 0.25rem;
  font-size: clamp(1.1rem, 2.2vw, 1.45rem);
  letter-spacing: -0.02em;
  color: var(--color-primary-dark);
}
.auto-alloc-lead {
  margin: 0;
  max-width: 720px;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--muted);
}
.auto-alloc-hero-link {
  gap: 0.45rem;
}
.auto-alloc-icon {
  flex-shrink: 0;
}
.auto-alloc-alert-wrap {
  margin-bottom: 1rem;
}

/* Stepper */
.auto-alloc-stepper {
  margin-bottom: 1.35rem;
}
.auto-alloc-stepper ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.auto-alloc-stepper-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.85rem 0.45rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 600;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}
.auto-alloc-stepper-item.is-active {
  border-color: color-mix(in srgb, var(--color-accent) 45%, var(--border));
  background: color-mix(in srgb, var(--color-accent) 8%, var(--surface));
  color: var(--color-primary-dark);
}
.auto-alloc-stepper-item.is-done {
  border-color: color-mix(in srgb, var(--success) 35%, var(--border));
  color: var(--success);
}
.auto-alloc-stepper-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  background: var(--bg);
  font-size: 0.78rem;
  font-weight: 700;
}
.auto-alloc-stepper-item.is-active .auto-alloc-stepper-num {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.auto-alloc-stepper-item.is-done .auto-alloc-stepper-num {
  background: color-mix(in srgb, var(--success) 15%, #fff);
}

/* Layout */
.auto-alloc-layout {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.auto-alloc-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 22rem);
  gap: 1.25rem;
  align-items: start;
}
@media (min-width: 1200px) {
  .auto-alloc-main {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 24rem);
    gap: 1.5rem;
  }
}
@media (max-width: 960px) {
  .auto-alloc-main {
    grid-template-columns: 1fr;
  }
  .auto-alloc-sidebar {
    order: -1;
  }
}
.auto-alloc-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 2px);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.auto-alloc-form {
  display: flex;
  flex-direction: column;
}
.auto-alloc-section {
  padding: 1.35rem 1.5rem;
  border-bottom: 1px solid var(--border);
}
.auto-alloc-section:last-of-type {
  border-bottom: none;
}
.auto-alloc-section-head {
  display: flex;
  gap: 0.85rem;
  margin-bottom: 1.15rem;
}
.auto-alloc-section-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  background: linear-gradient(145deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-on-primary);
  font-size: 0.9rem;
  font-weight: 700;
}
.auto-alloc-section-head h2 {
  margin: 0 0 0.2rem;
  font-size: 1.15rem;
  color: var(--color-primary-dark);
}
.auto-alloc-section-desc,
.auto-alloc-hint {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--muted);
}
.auto-alloc-subtitle {
  margin: 0 0 0.15rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

/* Fields */
.auto-alloc-field-grid {
  display: grid;
  gap: 1rem;
}
.auto-alloc-field-grid.three {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.auto-alloc-field-grid.two {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.auto-alloc-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.auto-alloc-field-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}
.auto-alloc-input,
.auto-alloc-page .auto-alloc-select {
  width: 100%;
  min-height: 2.65rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  font: inherit;
  font-size: 0.92rem;
  background: #fff;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.auto-alloc-input:focus,
.auto-alloc-page .auto-alloc-select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent);
  outline: none;
}
.auto-alloc-inline-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-top: 1.1rem;
}

/* Teams block */
.auto-alloc-teams-block {
  margin-top: 1.35rem;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--border);
}
.auto-alloc-teams-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem;
  margin-bottom: 0.5rem;
}
.auto-alloc-chip-actions {
  display: flex;
  gap: 0.35rem;
}
.auto-alloc-teams-status {
  margin: 0 0 0.65rem;
}
.auto-alloc-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.5rem;
  max-height: 20rem;
  overflow-y: auto;
  padding: 0.65rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 65%, #fff);
  transition: opacity 200ms ease;
}
.auto-alloc-team-grid[data-loading="true"] {
  opacity: 0.55;
  pointer-events: none;
}
.auto-alloc-team-grid.is-empty::before {
  content: "No teams loaded yet";
  grid-column: 1 / -1;
  padding: 1.5rem;
  text-align: center;
  font-size: 0.88rem;
  color: var(--muted);
}
.auto-alloc-team-chip {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 0.15rem 0.5rem;
  align-items: start;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  font-size: 0.82rem;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.auto-alloc-team-chip:hover:not(.auto-alloc-team-chip-inactive) {
  border-color: color-mix(in srgb, var(--color-accent) 40%, var(--border));
  box-shadow: 0 2px 8px rgba(8, 76, 51, 0.06);
}
.auto-alloc-team-chip:has(input:checked) {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 10%, #fff);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 25%, transparent);
}
.auto-alloc-team-chip-inactive {
  opacity: 0.5;
  cursor: not-allowed;
  background: #f4f6f5;
}
.auto-alloc-team-chip-inactive .auto-alloc-team-chip-meta::after {
  content: " · other date/slot";
  font-style: italic;
}
.auto-alloc-team-chip input {
  margin: 0.15rem 0 0;
  grid-row: 1 / 3;
  accent-color: var(--color-primary);
}
.auto-alloc-team-chip-label {
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}
.auto-alloc-team-chip-meta {
  grid-column: 2;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
}

/* Preference option cards */
.auto-alloc-pref-grid {
  display: grid;
  gap: 1rem;
}
.auto-alloc-pref-grid.two {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.auto-alloc-option-group {
  margin: 0 0 1.15rem;
  padding: 0;
  border: none;
}
.auto-alloc-option-group legend {
  padding: 0;
  margin-bottom: 0.55rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}
.auto-alloc-option-card {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-bottom: 0.45rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}
.auto-alloc-option-card:last-child {
  margin-bottom: 0;
}
.auto-alloc-option-card:hover {
  border-color: color-mix(in srgb, var(--color-accent) 35%, var(--border));
}
.auto-alloc-option-card:has(input:checked) {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 7%, #fff);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 20%, transparent);
}
.auto-alloc-option-card input {
  margin: 0.2rem 0 0;
  flex-shrink: 0;
  accent-color: var(--color-primary);
}
.auto-alloc-option-card.compact {
  display: inline-flex;
  margin-right: 0.45rem;
  margin-bottom: 0.45rem;
  vertical-align: top;
}
.auto-alloc-option-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.auto-alloc-option-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}
.auto-alloc-option-desc {
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--muted);
  font-weight: 400;
}
.auto-alloc-age-mode {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}
.auto-alloc-chip-panel {
  margin-bottom: 0.85rem;
  padding: 0.75rem;
  border-radius: 10px;
  border: 1px dashed var(--border);
  background: color-mix(in srgb, var(--bg) 50%, #fff);
}
.auto-alloc-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.auto-alloc-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}
.auto-alloc-chip:has(input:checked) {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 12%, #fff);
  color: var(--color-primary-dark);
}
.auto-alloc-chip input {
  margin: 0;
  accent-color: var(--color-primary);
}
.auto-alloc-nested-prefs {
  margin-top: 0.5rem;
}
.auto-alloc-segmented {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.auto-alloc-segment {
  display: inline-flex;
  cursor: pointer;
}
.auto-alloc-segment input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.auto-alloc-segment span {
  display: inline-block;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  background: #fff;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.auto-alloc-segment input:checked + span {
  border-color: var(--color-accent);
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.auto-alloc-segment input:focus-visible + span {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.auto-alloc-toggle-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}
.auto-alloc-toggle-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.auto-alloc-toggle-ui {
  flex-shrink: 0;
  width: 2.5rem;
  height: 1.4rem;
  margin-top: 0.1rem;
  border-radius: 999px;
  background: #d4e0d8;
  position: relative;
  transition: background 160ms ease;
}
.auto-alloc-toggle-ui::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: transform 160ms ease;
}
.auto-alloc-toggle-row input:checked ~ .auto-alloc-toggle-ui {
  background: var(--color-primary);
}
.auto-alloc-toggle-row input:checked ~ .auto-alloc-toggle-ui::after {
  transform: translateX(1.1rem);
}
.auto-alloc-toggle-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.auto-alloc-rules .auto-alloc-hint {
  margin-top: 0.65rem;
}

/* Sidebar */
.auto-alloc-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.auto-alloc-tip-card {
  padding: 1rem 1.1rem;
  border-radius: calc(var(--radius) + 2px);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.auto-alloc-tip-card h3 {
  margin: 0 0 0.55rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}
.auto-alloc-tip-list {
  margin: 0;
  padding-left: 1.15rem;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--muted);
}
.auto-alloc-tip-muted {
  background: color-mix(in srgb, var(--bg) 70%, var(--surface));
}
.auto-alloc-hr-legend {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.82rem;
  color: var(--muted);
}
.auto-alloc-hr-legend li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.auto-alloc-hr-legend li span {
  display: inline-block;
  min-width: 3.5rem;
  padding: 0.12rem 0.4rem;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
}

/* Form footer */
.auto-alloc-form-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 1.1rem 1.5rem;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 45%, var(--surface));
}
.auto-alloc-page .btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--color-primary-dark);
  font-weight: 600;
}
.auto-alloc-page .btn.ghost:hover {
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
  border-color: var(--border);
}
.auto-alloc-page .btn-lg {
  min-height: 2.85rem;
  padding: 0.65rem 1.35rem;
  font-size: 0.95rem;
}
.auto-alloc-btn-spinner {
  display: none;
  width: 1rem;
  height: 1rem;
  margin-left: 0.45rem;
  border: 2px solid color-mix(in srgb, currentColor 25%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: auto-alloc-spin 0.7s linear infinite;
  vertical-align: middle;
}
@keyframes auto-alloc-spin {
  to {
    transform: rotate(360deg);
  }
}
.auto-alloc-page .btn.is-loading {
  pointer-events: none;
}
.auto-alloc-page .btn.is-loading .auto-alloc-btn-spinner {
  display: inline-block;
}
.auto-alloc-page .btn.is-loading .auto-alloc-btn-label {
  opacity: 0.85;
}
.auto-alloc-validation {
  margin: 0 0 1rem;
}
.auto-alloc-validation.hidden {
  display: none;
}
.auto-alloc-field.is-invalid .auto-alloc-input,
.auto-alloc-field.is-invalid .auto-alloc-select {
  border-color: var(--danger);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 18%, transparent);
}
.auto-alloc-hint.is-error {
  color: var(--danger);
  font-weight: 500;
}

/* Preview panel */
.auto-alloc-preview-panel {
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--color-accent) 30%, var(--border));
  border-radius: calc(var(--radius) + 2px);
  box-shadow: var(--shadow-lg);
  padding: 1.35rem 1.5rem 1.25rem;
  animation: auto-alloc-fade-in 320ms ease;
}
@keyframes auto-alloc-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.auto-alloc-preview-panel.hidden {
  display: none;
}
.auto-alloc-preview-header {
  margin-bottom: 1rem;
}
.auto-alloc-preview-meta {
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted);
}
.auto-alloc-preview-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.auto-alloc-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 55%, #fff);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
}
.auto-alloc-warnings {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 1rem;
}
.auto-alloc-warnings .alert {
  margin: 0;
}
.auto-alloc-hr-summary-wrap {
  margin-bottom: 1.1rem;
}
.auto-alloc-hr-summary-wrap .alloc-hr-grid {
  margin-top: 0.55rem;
}
.auto-alloc-page #auto-alloc-hr-summary .alloc-hr-card {
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.auto-alloc-page #auto-alloc-hr-summary .alloc-hr-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(8, 76, 51, 0.1);
}
.auto-alloc-preview-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  margin-bottom: 0.85rem;
}
.auto-alloc-change-badge {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--color-primary-dark);
}
.auto-alloc-preview-actions {
  display: flex;
  gap: 0.35rem;
}
.auto-alloc-team-layouts {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 1rem;
}
.auto-alloc-team-layouts .auto-alloc-team-card {
  margin: 0;
}
.auto-alloc-team-layouts .auto-alloc-team-card:hover {
  transform: none;
}
.auto-alloc-change-badge-inline {
  display: inline-block;
  padding: 0.12rem 0.45rem;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: capitalize;
  background: color-mix(in srgb, var(--color-accent) 15%, #fff);
  color: var(--color-primary-dark);
}
.auto-alloc-team-layouts tr.auto-alloc-member-changed {
  background: color-mix(in srgb, var(--color-accent) 6%, #fff);
}
.auto-alloc-changes-panel {
  margin-bottom: 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.auto-alloc-changes-panel summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  padding: 0.75rem 1rem;
  font-weight: 600;
  cursor: pointer;
  background: color-mix(in srgb, var(--bg) 50%, #fff);
  list-style: none;
}
.auto-alloc-changes-panel summary::-webkit-details-marker {
  display: none;
}
.auto-alloc-table-wrap {
  border-top: 1px solid var(--border);
}
.auto-alloc-preview-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}

/* Shared utilities (page + legacy) */
.inline-radio,
.inline-check {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-size: 0.9rem;
}
.disabled-block {
  opacity: 0.45;
  pointer-events: none;
}
.auto-alloc-age-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
#auto-alloc-preview-card.hidden {
  display: none;
}
.auto-alloc-preview-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.75rem 0;
}
.auto-alloc-preview-actions {
  margin: 0;
}
.auto-alloc-team-layouts {
  display: grid;
  gap: 0.75rem;
}
.auto-alloc-team-card {
  margin: 0;
}
.auto-alloc-team-meta {
  margin-bottom: 0.75rem;
}
.auto-alloc-member-changed {
  background: #fff9e9;
}
.auto-alloc-change-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: capitalize;
  color: #8f6500;
  background: #fff3d6;
  border: 1px solid #ead8a5;
}
.auto-alloc-changes-panel {
  margin-top: 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.65rem 0.85rem;
  background: #fafcfb;
}
.auto-alloc-changes-panel > summary {
  cursor: pointer;
  font-weight: 700;
}

/* Shared step/panel pattern on other allocation pages */
.alloc-step-page .auto-alloc-alert-wrap,
.alloc-step-page .alloc-step-alert-wrap {
  margin-bottom: 1rem;
}
.alloc-step-page .auto-alloc-stepper,
.alloc-step-page .alloc-stepper {
  margin-bottom: 1.35rem;
}
.alloc-step-page .auto-alloc-layout,
.alloc-step-page .alloc-step-layout {
  margin-bottom: 0.5rem;
}
.auto-alloc-section-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 1.15rem;
}
.auto-alloc-section-head-row .auto-alloc-section-head,
.auto-alloc-section-head-row .alloc-section-head {
  margin-bottom: 0;
  flex: 1 1 16rem;
}
.auto-alloc-panel .auto-alloc-section .card,
.alloc-step-panel .auto-alloc-section .card {
  margin-bottom: 1rem;
  box-shadow: none;
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg) 45%, var(--surface));
}
.auto-alloc-panel .auto-alloc-section .card:hover,
.alloc-step-panel .auto-alloc-section .card:hover {
  transform: none;
  box-shadow: none;
}
.auto-alloc-panel .auto-alloc-section .card > h2,
.auto-alloc-panel .auto-alloc-section .card > h3,
.alloc-step-panel .auto-alloc-section .card > h2,
.alloc-step-panel .auto-alloc-section .card > h3 {
  font-size: 0.95rem;
}
.auto-alloc-panel .auto-alloc-section .card:last-child,
.alloc-step-panel .auto-alloc-section .card:last-child {
  margin-bottom: 0;
}
.alloc-step-page .auto-alloc-section .alert,
.alloc-step-page .auto-alloc-section .muted.small {
  margin-top: 0;
}
.alloc-step-page .auto-alloc-section .btn-row {
  margin-top: 0.85rem;
}

/* Khidmat chip multi-select (allocate members) */
.chip-scroll {
  max-height: 16rem;
  overflow-y: auto;
  padding: 0.35rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fafcfb;
}
.chip-group {
  display: grid;
  gap: 0.3rem;
}
.alloc-assign-head {
  display: grid;
  grid-template-columns: 3.2rem minmax(14rem, 1fr) 8.5rem;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #51625a;
  padding: 0.12rem 0.2rem 0.22rem;
  border-bottom: 1px dashed var(--border);
}
.chip-group label.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  max-width: 100%;
}
.chip-group .chip-assign {
  display: grid;
  grid-template-columns: 3.2rem minmax(14rem, 1fr) 8.5rem;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.3rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
}
.chip-group label.chip:has(input:checked) {
  border-color: var(--color-accent);
  background: #e8f4ee;
  font-weight: 500;
}
.chip-group .chip-assign.chip-active {
  border-color: var(--color-accent);
  background: #e8f4ee;
}
.chip-group label.chip input {
  margin: 0;
  flex-shrink: 0;
}
.chip-group .chip-team-check {
  justify-self: center;
}
.chip-group .chip-team-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #2d3530;
}
.chip-group .chip-role {
  min-width: 8rem;
  font-size: 0.78rem;
  padding: 0.2rem 0.35rem;
  border-radius: 7px;
}
.chip-group .chip-role:disabled {
  opacity: 0.6;
}
.allocate-table-wrap {
  max-height: min(78vh, 820px);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  /* Flex parents (e.g. .stack on zone allocation form) default min-height:auto and
     prevent max-height from shrinking the child; allow inner scroll like allocate-members. */
  min-height: 0;
}
.allocate-table th,
.allocate-table td {
  padding: 0.26rem 0.38rem;
  font-size: 0.8125rem;
  line-height: 1.28;
}
/* Stick the whole thead so both header rows stay aligned when titles wrap. */
.allocate-table thead {
  position: sticky;
  top: 0;
  z-index: 3;
}
.allocate-table thead th {
  background: linear-gradient(180deg, #e8f0eb 0%, #dce8e0 100%);
  box-shadow: none;
  vertical-align: bottom;
  line-height: 1.2;
  word-break: break-word;
  overflow-wrap: anywhere;
  padding: 0.28rem 0.38rem;
}
.allocate-table thead tr:first-child th {
  max-width: min(13rem, 26vw);
  border-bottom: 1px solid var(--border);
}
.allocate-table thead tr:first-child th.allocate-col-attendance {
  max-width: min(7rem, 14vw);
}
.allocate-table thead tr:first-child th.allocate-col-prev-alloc {
  max-width: min(11rem, 22vw);
}
.allocate-table thead tr:first-child th.allocate-col-khidmat-title {
  max-width: min(22rem, 42vw);
  min-width: min(12rem, 24vw);
}
/* Column resize (table_column_resize.js): col widths drive layout; do not cap headers/cells */
.allocate-table.table-col-resizable thead tr:first-child th {
  max-width: none;
}
.allocate-table.table-col-resizable thead tr:first-child th.allocate-col-attendance,
.allocate-table.table-col-resizable thead tr:first-child th.allocate-col-prev-alloc,
.allocate-table.table-col-resizable thead tr:first-child th.allocate-col-khidmat-title {
  max-width: none;
  min-width: 0;
}
.allocate-table.table-col-resizable .client-filter-row th {
  position: relative;
  overflow: visible;
}
#allocate-table.table-col-resizable--teams-allocate thead th.allocate-col-khidmat-title,
#allocate-table.table-col-resizable--teams-allocate tbody td.allocate-col-khidmat {
  min-width: 16rem;
  max-width: none;
  width: auto;
  word-break: normal;
  overflow-wrap: normal;
}
#allocate-table.table-col-resizable--teams-allocate thead th.allocate-col-khidmat-filter {
  min-width: 0;
  max-width: none;
  width: auto;
  word-break: normal;
  overflow-wrap: normal;
}
.allocate-table.table-col-resizable .col-resize-handle {
  z-index: 6;
}
.allocate-table .client-filter-row th {
  z-index: 2;
  padding: 0.18rem 0.28rem;
  background: #f0f4f1;
  vertical-align: top;
  box-shadow: none;
  border-bottom: 1px solid var(--border);
}
/* Follow-up zone change requests: one header row, no client filters */
.zcr-followup-body.stack {
  gap: 1rem;
}
.allocate-table#zcr-table thead th.zcr-th-status,
.allocate-table#zcr-table thead th.zcr-th-check {
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
  max-width: none;
}
.allocate-table#zcr-table thead th.zcr-th-note {
  min-width: 11rem;
  max-width: min(18rem, 28vw);
}
.allocate-table#zcr-table .zcr-td-note {
  vertical-align: top;
  padding: 0.35rem 0.45rem;
}
.allocate-table#zcr-table textarea.zcr-row-note {
  display: block;
  width: 100%;
  min-width: 9rem;
  max-width: 16rem;
  box-sizing: border-box;
  margin: 0;
  font: inherit;
  font-size: 0.82rem;
  line-height: 1.35;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  resize: vertical;
  min-height: 2.5rem;
  background: #fff;
}
.allocate-table tbody tr.data-row > td.allocate-col-khidmat {
  vertical-align: middle;
  padding: 0.35rem 0.4rem;
}
.allocate-col-khidmat {
  min-width: 16rem;
  max-width: min(22rem, 36vw);
  overflow: visible;
  background: var(--surface);
}
.mza-zone-cell-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 2rem;
  box-sizing: border-box;
}
.allocate-table tbody tr.data-row.mza-row-editing {
  position: relative;
  z-index: 5;
}
.mza-zone-dd {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
}
.mza-zone-dd.is-open {
  z-index: 6;
}
.mza-zone-dd-trigger {
  --mza-accent: var(--border);
  --mza-fill: var(--surface);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  width: 100%;
  min-height: 2rem;
  height: auto;
  box-sizing: border-box;
  padding: 0.28rem 1.35rem 0.28rem 0.45rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--mza-accent);
  border-radius: 8px;
  background: var(--mza-fill);
  box-shadow: var(--shadow);
  font: inherit;
  font-size: 0.78rem;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  color: var(--text);
  transition:
    border-color 140ms ease,
    box-shadow 140ms ease,
    background 140ms ease;
}
.allocate-col-khidmat.mza-cell-empty .mza-zone-dd-trigger {
  --mza-accent: color-mix(in srgb, var(--muted) 55%, var(--border));
  --mza-fill: color-mix(in srgb, var(--bg) 42%, var(--surface));
  border-style: dashed;
  border-left-style: solid;
}
.allocate-col-khidmat.mza-cell-saved .mza-zone-dd-trigger {
  --mza-accent: var(--color-accent);
  --mza-fill: color-mix(in srgb, var(--color-accent) 7%, var(--surface));
  border-color: color-mix(in srgb, var(--color-accent) 22%, var(--border));
}
.allocate-col-khidmat.mza-cell-pending .mza-zone-dd-trigger {
  --mza-accent: #c9920f;
  --mza-fill: color-mix(in srgb, #fff6df 72%, var(--surface));
  border-color: color-mix(in srgb, #e4c56a 45%, var(--border));
}
.mza-zone-dd-trigger:hover {
  border-color: color-mix(in srgb, var(--color-accent) 35%, var(--border));
  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-primary-dark) 10%, transparent);
}
.mza-zone-dd-trigger:focus-visible,
.mza-zone-dd.is-open .mza-zone-dd-trigger {
  outline: none;
  border-color: var(--color-accent);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--color-accent) 22%, transparent),
    var(--shadow);
}
.allocate-table tbody tr.data-row.mza-row-editing .mza-zone-dd-trigger {
  border-color: var(--color-accent);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--color-accent) 18%, transparent),
    0 4px 14px color-mix(in srgb, var(--color-primary-dark) 12%, transparent);
}
.mza-zone-dd-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.mza-zone-dd-label:has(.mza-zone-dd-summary-table) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  padding-top: 0;
}
.mza-zone-dd-summary-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.76rem;
  line-height: 1.25;
}
.mza-zone-dd-summary-table tbody td {
  padding: 0.22rem 0.3rem 0.18rem 0;
  vertical-align: middle;
  border: none;
}
.mza-zone-dd-summary-table tbody tr + tr td {
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.mza-zone-dd-summary-table .mza-zone-dd-summary-zone {
  width: 58%;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mza-zone-dd-summary-table .mza-zone-dd-summary-role {
  width: 42%;
  font-weight: 500;
  font-size: 0.72rem;
  color: var(--muted);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mza-zone-dd--empty .mza-zone-dd-trigger {
  align-items: center;
}
.mza-zone-dd-placeholder {
  color: var(--muted);
  font-weight: 500;
  font-style: normal;
  font-size: 0.76rem;
}
.mza-zone-dd-caret {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  font-size: 0.62rem;
  color: var(--muted);
  pointer-events: none;
  opacity: 0.85;
}
.mza-zone-dd-trigger:hover .mza-zone-dd-caret,
.mza-zone-dd.is-open .mza-zone-dd-caret {
  color: var(--color-accent);
  opacity: 1;
}
.mza-zone-popup,
.mza-zone-dd-menu {
  position: fixed;
  z-index: 250;
  box-sizing: border-box;
  width: max(100%, 18rem);
  min-width: 18rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(30, 50, 40, 0.14);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.mza-zone-popup[hidden],
.mza-zone-dd-menu[hidden] {
  display: none !important;
}
.mza-zone-dd-toolbar {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.4rem 0.25rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.mza-zone-dd-toolbar .mza-zone-dd-search {
  flex: 1;
  min-width: 0;
}
.mza-zone-dd-collapse {
  flex-shrink: 0;
  width: 1.65rem;
  height: 1.65rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  font-size: 0.85rem;
  line-height: 1;
  color: #51625a;
  cursor: pointer;
}
.mza-zone-dd-collapse:hover,
.mza-zone-dd-collapse:focus-visible {
  border-color: var(--color-accent);
  color: #1a2e24;
  outline: none;
}
.mza-zone-dd-search {
  width: 100%;
  box-sizing: border-box;
  padding: 0.3rem 0.45rem;
  font: inherit;
  font-size: 0.76rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fafcfb;
}
.mza-zone-dd-search:focus {
  border-color: var(--color-accent);
  outline: none;
  background: #fff;
}
.mza-zone-dd-list {
  overflow-y: auto;
  max-height: min(14rem, 32vh);
  padding: 0;
}
.mza-zone-dd-head,
.mza-zone-dd-item {
  display: grid;
  grid-template-columns: 2.15rem minmax(4.5rem, 1fr) auto;
  gap: 0.45rem 0.55rem;
  align-items: center;
  padding: 0.42rem 0.55rem;
  min-height: 2.35rem;
  font-size: 0.76rem;
  color: #2d3530;
}
.mza-zone-dd-col-role {
  justify-self: end;
}
.mza-zone-dd-head {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  color: #51625a;
  background: #f2f6f4;
  border-bottom: 1px solid var(--border);
  cursor: default;
}
.mza-zone-dd-divider {
  grid-column: 1 / -1;
  height: 0;
  margin: 0.15rem 0.45rem;
  border: none;
  border-top: 1px solid var(--border);
  pointer-events: none;
}
.mza-zone-dd-item {
  cursor: default;
  border-bottom: 1px solid #eef2ef;
}
.mza-zone-dd-item:last-child {
  border-bottom: none;
}
.mza-zone-dd-item.is-selected {
  background: #f4faf7;
}
.mza-zone-dd-item:hover {
  background: #eef7f1;
}
.mza-zone-dd-item.is-hidden {
  display: none;
}
.mza-zone-dd-item .mza-zone-cb {
  margin: 0;
  justify-self: center;
}
.mza-zone-dd-item-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
  font-weight: 600;
  color: #1e2e24;
  cursor: pointer;
}
.mza-zone-row-role,
.mza-team-row-role {
  justify-self: end;
  width: auto;
  min-width: 6.25rem;
  max-width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.25;
  padding: 0.32rem 1.65rem 0.32rem 0.55rem;
  border: 1px solid #c5d4cb;
  border-radius: 6px;
  background-color: #fff;
  color: #2d3530;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%234a5c52' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 0.55rem 0.35rem;
}
.mza-zone-row-role.mza-role-unset,
.mza-team-row-role.mza-role-unset {
  color: #6a7a72;
}
.mza-zone-row-role:disabled,
.mza-team-row-role:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  color: #6a7a72;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%239aa89f' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
}
.mza-zone-row-role option[hidden],
.mza-team-row-role option[hidden] {
  display: none;
}
.mza-zone-dd-empty {
  margin: 0;
  padding: 0.45rem 0.55rem 0.55rem;
  text-align: center;
}
.mza-legend {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}
.mza-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.mza-cell-swatch {
  display: inline-block;
  width: 1.1rem;
  height: 0.72rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  border-left-width: 3px;
  background: var(--surface);
  box-shadow: var(--shadow);
  vertical-align: middle;
}
.mza-cell-swatch.mza-cell-saved {
  border-left-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 8%, var(--surface));
}
.mza-cell-swatch.mza-cell-pending {
  border-left-color: #c9920f;
  background: color-mix(in srgb, #fff6df 70%, var(--surface));
}
.mza-cell-swatch.mza-cell-empty {
  border-left-color: color-mix(in srgb, var(--muted) 55%, var(--border));
  border-style: dashed;
  border-left-style: solid;
  background: color-mix(in srgb, var(--bg) 42%, var(--surface));
}
.allocate-col-prev-alloc {
  min-width: 9rem;
  max-width: min(18rem, 32vw);
}
.allocate-table .mza-assign-panel-title {
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.35;
}
.alloc-column-chooser {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.alloc-column-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  font-size: 0.8rem;
  font-weight: 500;
}
.alloc-column-chip span {
  line-height: 1.25;
  word-break: break-word;
  max-width: 14rem;
}
.alloc-column-chip input {
  margin: 0;
}
.alloc-filter-cell {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

/* Assignment column header toolbar (Teams · Allocate, Zone · Allocate) */
.alloc-assign-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.alloc-assign-toolbar-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}
.alloc-assign-toolbar-row .alloc-table-filters,
.alloc-assign-toolbar-row .mza-table-filters {
  flex: 1 1 auto;
  min-width: 0;
}
.alloc-assign-quick-select {
  flex: 0 1 11rem;
  min-width: 8rem;
  max-width: 14rem;
}
.alloc-assign-toolbar-row--actions {
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
.alloc-assign-toolbar-row--actions .alloc-bulk-scope {
  margin: 0;
  flex: 0 1 auto;
  white-space: nowrap;
}
.alloc-assign-toolbar .alloc-quick-tools {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0.35rem;
  flex: 0 0 auto;
  margin-left: auto;
}
.alloc-assign-toolbar .alloc-quick-tools .btn {
  width: auto;
  white-space: nowrap;
  padding: 0.22rem 0.5rem;
  font-size: 0.72rem;
  min-height: 1.65rem;
}
.allocate-table thead th.allocate-col-khidmat-filter {
  vertical-align: top;
}
.allocate-table thead th.allocate-col-khidmat-filter .alloc-assign-toolbar {
  min-width: min(100%, 26rem);
}
.mza-table-filters,
.alloc-table-filters {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: stretch;
}
.mza-table-filters select,
.alloc-table-filters select {
  flex: 1 1 6rem;
  min-width: 5.25rem;
}
.alloc-filter-cell select,
.alloc-filter-cell input {
  width: 100%;
  min-width: 5.25rem;
  padding: 0.2rem 0.3rem;
  font-size: 0.75rem;
}
.alloc-filter-cell .client-filter {
  min-height: 1.75rem;
}
.alloc-filter-cell .client-filter.is-dropdown {
  padding-right: 1.35rem;
}
.alloc-update-tools {
  min-width: 7rem;
}
.alloc-update-tools .btn {
  padding: 0.25rem 0.45rem;
  font-size: 0.72rem;
  min-height: 1.7rem;
}
.alloc-quick-tools {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.25rem;
}
.alloc-quick-tools .btn {
  width: 100%;
  padding: 0.22rem 0.4rem;
  font-size: 0.72rem;
  min-height: 1.7rem;
}
.alloc-bulk-scope {
  margin-top: 0.1rem;
}
.alloc-btn-danger-soft {
  border-color: #f2d187;
  color: #8a5a00;
  background: #fff9e9;
}
.alloc-btn-danger-soft:hover {
  border-color: #e2bc57;
  color: #7b4f00;
  background: #fff2cc;
}
.alloc-date-slot-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.alloc-date-slot-head h2 {
  margin: 0;
}
.alloc-date-slot-head p {
  margin: 0.25rem 0 0;
}
.alloc-bulk-guard-error {
  color: #b42318;
  font-weight: 600;
}
.alloc-bulk-guard-warning {
  color: #8a5a00;
  font-weight: 600;
}
.alloc-bulk-card h2 {
  margin-top: 0;
}
.alloc-bulk-form {
  gap: 1.1rem;
}
.alloc-bulk-form--member .alloc-bulk-field-teams {
  border-color: rgba(26, 77, 171, 0.35);
  box-shadow: 0 0 0 1px rgba(26, 77, 171, 0.08);
}
.alloc-bulk-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}
.alloc-bulk-field-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-primary-dark, #0b3d2e);
}
.alloc-bulk-field > .alloc-bulk-field-label:first-child {
  margin-bottom: 0.05rem;
}
.alloc-bulk-role-select {
  width: 100%;
  max-width: 28rem;
  font-size: 0.9rem;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.alloc-bulk-field-teams {
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: linear-gradient(180deg, #fafcfb 0%, #f4f7f5 100%);
}
.alloc-bulk-field-teams > .alloc-bulk-field-label {
  font-size: 0.95rem;
}
.alloc-bulk-teams-hint {
  margin: 0 0 0.15rem;
  line-height: 1.4;
}
.alloc-bulk-its-textarea {
  width: 100%;
  min-height: 9rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1.45;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  resize: vertical;
}
.alloc-bulk-teams-toolbar {
  margin: 0.35rem 0 0.35rem;
}
.alloc-bulk-select-all {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.alloc-bulk-select-all input {
  margin: 0;
  width: 1rem;
  height: 1rem;
}
.alloc-bulk-teams-host {
  max-height: 15rem;
  overflow: auto;
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.1));
  border-radius: 8px;
  padding: 0.25rem 0.35rem;
  background: var(--surface);
}
.alloc-bulk-teams-host--member {
  border-color: rgba(26, 77, 171, 0.22);
}
.alloc-bulk-team-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.45rem;
  font-size: 0.86rem;
  cursor: pointer;
  border-radius: 6px;
  margin: 0.06rem 0;
}
.alloc-bulk-team-row:hover {
  background: rgba(0, 0, 0, 0.045);
}
.alloc-bulk-team-row input[type="checkbox"] {
  margin: 0;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  align-self: center;
}
.alloc-bulk-team-name {
  flex: 1;
  min-width: 0;
  line-height: 1.35;
}
.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-bottom: 0.15rem;
}
.alloc-visibility-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.alloc-filter-chips {
  display: inline-flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  align-items: center;
}
.alloc-filter-chip {
  min-height: 1.85rem;
  padding: 0.22rem 0.6rem;
  font-size: 0.78rem;
}
.alloc-filter-chip.is-active {
  border-color: var(--color-accent);
  background: #e8f4ee;
  color: var(--color-primary-dark);
}
.mza-create-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.6rem;
  align-items: end;
}
.mza-create-row label {
  display: grid;
  gap: 0.25rem;
}
.mza-create-row input,
.mza-create-row button {
  min-height: 2.3rem;
}
.mza-edit-zones-head {
  margin-top: 1rem;
}
.mza-zone-edit-list {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.45rem;
}
.mza-zone-edit-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.6rem;
  align-items: end;
  padding: 0.55rem 0 0;
  border-top: 1px solid var(--border);
}
.mza-zone-edit-row label {
  display: grid;
  gap: 0.25rem;
}
.mza-zone-edit-row input,
.mza-zone-edit-row button {
  min-height: 2.3rem;
}
.zone-bulk-wrap {
  margin-top: 0.35rem;
}
.zone-bulk-grid thead th:nth-child(1) {
  min-width: 10rem;
}
.zone-bulk-grid thead th:nth-child(2),
.zone-bulk-grid thead th:nth-child(3),
.zone-bulk-grid thead th:nth-child(4) {
  min-width: 5.5rem;
}
.zone-registry-scroll {
  max-height: min(28rem, 50vh);
  overflow: auto;
  margin-top: 0.45rem;
  border: 1px solid #b8ccc0;
  border-radius: 8px;
  background: #fff;
}
.zone-registry-table {
  margin: 0;
}
.zone-registry-edit-cell {
  padding: 0.35rem 0.45rem !important;
  vertical-align: middle;
}
.zone-registry-edit-row {
  display: grid;
  grid-template-columns: minmax(5rem, 2fr) minmax(3rem, 1fr) minmax(3rem, 1fr) minmax(3rem, 1fr) auto;
  gap: 0.45rem;
  align-items: center;
  width: 100%;
}
.zone-registry-edit-row input {
  min-height: 2.1rem;
  width: 100%;
  box-sizing: border-box;
}
.zone-registry-readonly {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.team-cloning-table-wrap {
  max-height: min(78vh, 820px);
  overflow: auto;
}
.team-cloning-apply {
  border-top: 1px solid var(--border);
  padding-top: 0.75rem;
}
.mza-filter {
  width: 100%;
  min-width: 5.6rem;
  padding: 0.2rem 0.32rem;
  font-size: 0.74rem;
}
.teams-view-filters {
  gap: 0.9rem;
}
.role-assign-field {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.role-assign-field legend {
  font-weight: 600;
  margin-bottom: 0.5rem;
  padding: 0;
}

.role-assign-field .muted.small,
.role-assign-field > .muted.small,
.role-assign-field > p.muted.small {
  margin: 0.5rem 0 0;
}

.role-assign-check-toolbar {
  margin-bottom: 0.5rem;
}

.role-assign-select-all {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.875rem;
  cursor: pointer;
}

.role-assign-select-all input {
  width: 1rem;
  height: 1rem;
  margin: 0;
}

.role-assign-scope-field > .muted.small:first-of-type {
  margin-bottom: 0.75rem;
}

.role-scope-layout {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(280px, 1.35fr);
  gap: 1rem 1.25rem;
  align-items: start;
}

.role-scope-miqaat-col,
.role-scope-zones-col {
  min-width: 0;
}

.role-scope-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
}

.role-scope-filter {
  flex: 1 1 12rem;
  min-width: 10rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
}

.role-scope-toolbar-action {
  flex: 0 0 auto;
  white-space: nowrap;
}

.role-scope-scroll {
  max-height: min(22rem, 50vh);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface, #fff);
}

.role-scope-miqaat-row,
.role-scope-zone-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.45rem 0.65rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  font-size: 0.9rem;
}

.role-scope-miqaat-row:last-child,
.role-scope-zone-row:last-child {
  border-bottom: 0;
}

.role-scope-miqaat-row:hover,
.role-scope-zone-row:hover {
  background: rgba(11, 94, 63, 0.05);
}

.role-scope-miqaat-row[hidden],
.role-scope-zone-row[hidden] {
  display: none;
}

.role-scope-miqaat-row input,
.role-scope-zone-row input {
  margin-top: 0.15rem;
  flex-shrink: 0;
}

.role-scope-miqaat-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.role-scope-miqaat-title {
  font-weight: 500;
  line-height: 1.3;
}

.role-scope-miqaat-meta {
  line-height: 1.25;
}

.role-scope-zones-placeholder {
  margin: 0 0 0.75rem;
  padding: 0.75rem;
  border: 1px dashed var(--border);
  border-radius: 8px;
  text-align: center;
}

.role-scope-zones-placeholder[hidden] {
  display: none;
}

.role-scope-zone-panel {
  margin-bottom: 0.85rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(11, 94, 63, 0.02);
}

.role-scope-zone-panel[hidden] {
  display: none;
}

.role-scope-zone-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
}

.role-scope-zone-panel .role-scope-filter {
  width: 100%;
  margin-bottom: 0.45rem;
}

.role-scope-zone-panel > .muted.small {
  margin: 0.45rem 0 0;
}

@media (max-width: 768px) {
  .role-scope-layout {
    grid-template-columns: 1fr;
  }
}

.teams-zone-picker {
  display: grid;
  gap: 0.45rem;
}
.teams-zone-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.45rem 0.6rem;
}
.teams-zone-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.42rem 0.56rem;
  background: rgba(11, 94, 63, 0.03);
}
.teams-zone-item:hover {
  background: rgba(11, 94, 63, 0.07);
}
.teams-submit-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}
.teams-op-toolbar {
  display: grid;
  gap: 0.5rem;
  justify-items: end;
  text-align: left;
}
.teams-op-toolbar label {
  min-width: 13rem;
}
.teams-op-actions {
  margin-top: 0.35rem;
}
.teams-submitted-row {
  background: rgba(148, 163, 184, 0.18);
}
.teams-time-form {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.teams-time-form input[type="time"] {
  min-width: 6.5rem;
}
.teams-time-input-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5.1rem;
  gap: 0.45rem;
}
.teams-time-input-group input,
.teams-time-input-group select {
  width: 100%;
}
.team-member-role-select {
  min-width: 7.5rem;
  max-width: 100%;
}

.teams-row-pending-remove {
  background: #fff4d8;
}
.teams-time-confirm {
  border: 1px solid #3d7b61;
  background: #e8f6ee;
  color: #1f6c49;
  border-radius: 999px;
  width: 1.7rem;
  height: 1.7rem;
  font-weight: 700;
  cursor: pointer;
}
.teams-member-sync,
.teams-arrival-sync {
  font-size: 0.78rem;
  color: #344148;
  display: grid;
  gap: 0.12rem;
}
.teams-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.18rem 0.62rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.teams-status-submitted {
  color: #166444;
  background: #e8f7ef;
  border-color: #bae2cb;
}
.teams-status-ready {
  color: #0b4f7f;
  background: #e7f3ff;
  border-color: #b9d8f2;
}
.teams-status-blocked,
.teams-status-pending {
  color: #8a5a00;
  background: #fff4d8;
  border-color: #f2d187;
}
.teams-submitted-text {
  color: #5b6770;
  font-weight: 600;
}
.team-view-pdf-shell {
  gap: 1rem;
}
.team-view-pdf-sheet {
  border: 1px solid #d5dde1;
  border-radius: 10px;
  background: #fff;
  padding: 1rem;
  display: grid;
  gap: 1rem;
}
.team-view-pdf-head {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  align-items: flex-start;
  flex-wrap: wrap;
}
.team-view-pdf-head h2 {
  margin: 0;
}
.team-view-pdf-head p {
  margin: 0.2rem 0 0;
}
.team-view-pdf-meta {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.team-view-meta-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.56rem;
  border-radius: 999px;
  border: 1px solid #d4e3dc;
  background: #eef6f2;
  font-size: 0.76rem;
  color: #265741;
  font-weight: 600;
}
.team-view-note {
  margin: 0;
}
.team-view-block {
  display: grid;
  gap: 0.45rem;
}
.team-view-block h3 {
  margin: 0;
  font-size: 0.96rem;
  color: #194a35;
}
.team-view-table th,
.team-view-table td {
  padding: 0.38rem 0.52rem;
}
.team-view-profile-table th {
  width: 16%;
}
.team-view-profile-table td {
  width: 34%;
}
.alloc-row-state {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  margin-bottom: 0.28rem;
}
.alloc-state-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  margin-right: 0.25rem;
}
.alloc-state-saved {
  background: #e7f4ee;
  color: #1f6c49;
  border: 1px solid #bfe0cf;
}
.alloc-state-pending {
  background: #fff4d8;
  color: #8a5a00;
  border: 1px solid #f2d187;
}
.alloc-state-empty {
  background: #f2f4f5;
  color: #5e666a;
  border: 1px solid #d7dddf;
}
.alloc-state-locked {
  background: #eef2ff;
  color: #3730a3;
  border: 1px solid #c7d2fe;
}
.alloc-row-zone-lead td.allocate-col-khidmat {
  vertical-align: middle;
}
.alloc-zone-role-banner {
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid var(--border);
  max-width: 28rem;
}
.alloc-zone-role-title {
  margin: 0 0 0.25rem;
  font-size: 0.88rem;
}
.alloc-hr-arrow {
  color: #7b8882;
  font-weight: 700;
}

.alloc-hr-dashboard {
  position: relative;
  background:
    radial-gradient(circle at 0% 0%, rgba(20, 113, 75, 0.08) 0, transparent 42%),
    linear-gradient(180deg, #ffffff 0%, #f8fcfa 100%);
}
.alloc-hr-content {
  transition: opacity 140ms ease;
}
.alloc-hr-dashboard.is-collapsed .alloc-hr-content {
  display: none;
}
.alloc-hr-collapse-toggle {
  position: absolute;
  right: -0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.5rem;
  height: 2.6rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: #4c5a54;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(8, 76, 51, 0.12);
}
.alloc-hr-dashboard.is-collapsed .alloc-hr-collapse-toggle {
  transform: translateY(-50%) rotate(180deg);
}
.alloc-hr-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.alloc-hr-actions .btn {
  white-space: nowrap;
}
.alloc-hr-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.65rem;
  flex-wrap: wrap;
}
.alloc-hr-top h3 {
  margin: 0;
  font-size: 0.95rem;
}
.alloc-hr-overall {
  font-size: 1.05rem;
  font-weight: 700;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: #f4f7f5;
}
.alloc-hr-progress-wrap {
  margin-top: 0.55rem;
}
.alloc-hr-progress {
  width: 100%;
  height: 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #eff4f1;
  overflow: hidden;
}
.alloc-hr-progress-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  transition: width 180ms ease, background 180ms ease;
  background: #b42318;
}
.alloc-hr-progress-label {
  margin-top: 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
}
.alloc-hr-grid {
  margin-top: 0.55rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.45rem;
}
.alloc-hr-card {
  border-radius: 8px;
  border: 1px solid var(--border);
  padding: 0.45rem 0.55rem;
  box-shadow: 0 3px 10px rgba(8, 76, 51, 0.08);
  background: #fff;
}
.alloc-hr-card-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.alloc-hr-card-main {
  margin-top: 0.2rem;
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}
.alloc-hr-allocated {
  font-size: 1.1rem;
  font-weight: 700;
}
.alloc-hr-divider {
  color: #8a8f8d;
}
.alloc-hr-required {
  font-size: 1rem;
  font-weight: 600;
  color: #5e6662;
}
.alloc-hr-card-sub {
  margin-top: 0.15rem;
  font-size: 0.74rem;
  font-weight: 600;
}
.alloc-hr-lead-line {
  margin-top: 0.18rem;
  font-size: 0.73rem;
  color: #304037;
  word-break: break-word;
}
.alloc-hr-state-under {
  color: #b42318;
  border-color: #f0c7c3;
  background: #fff4f3;
}
.alloc-hr-state-near {
  color: #8f6500;
  border-color: #ead8a5;
  background: #fff9e9;
}
.alloc-hr-state-exact {
  color: #0d6832;
  border-color: #b8dfc6;
  background: #e9f7ef;
}
.alloc-hr-state-over {
  color: #5c2ab4;
  border-color: #d4c6f6;
  background: #f4f0ff;
}
.alloc-hr-state-open {
  color: #3a4b46;
  border-color: #d8e3dd;
  background: #f5f9f7;
}

.tracker-page .tracker-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}
.tracker-page .tracker-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #f4f8f6;
  font-size: 0.78rem;
  font-weight: 600;
}
.tracker-page .tracker-table-wrap {
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  max-height: min(78vh, 820px);
}
.tracker-page .tracker-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}
.tracker-page .tracker-table th,
.tracker-page .tracker-table td {
  padding: 0.28rem 0.4rem;
  border-bottom: 1px solid #e7ece9;
  text-align: left;
  vertical-align: top;
}
.tracker-page .tracker-table th {
  background: #eef4f0;
  font-weight: 700;
}
.tracker-page .tracker-zone-block {
  margin-top: 0.8rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}
.tracker-page .tracker-zone-block summary {
  cursor: pointer;
  padding: 0.55rem 0.7rem;
  font-weight: 700;
}

.callout.instructions-card {
  background: #f0f7f3;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
}
.instructions-card ul.instruction-list {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
}
.instructions-card li {
  margin-bottom: 0.5rem;
}
.mono.sample-line,
.sample-line {
  font-family: ui-monospace, monospace;
  font-size: 0.8rem;
  word-break: break-all;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.role-perm-fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.role-perm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 0.35rem 1rem;
}

.role-perm-check {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-size: 0.9rem;
}

.role-perm-check input {
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.role-perm-grouped {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.role-perm-area-title {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-muted, #5c6f66);
}

.role-perm-check-block {
  align-items: flex-start;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  border: 1px solid rgba(11, 46, 36, 0.12);
  background: rgba(255, 255, 255, 0.35);
}

.role-perm-check-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.role-perm-title {
  font-weight: 600;
  font-size: 0.95rem;
}

.role-perm-path {
  font-family: ui-monospace, monospace;
  font-size: 0.72rem;
  word-break: break-all;
  color: var(--text-muted, #5c6f66);
}

.role-perm-desc {
  line-height: 1.35;
}

.role-perm-key {
  font-family: ui-monospace, monospace;
  font-size: 0.68rem;
  word-break: break-all;
}

.role-perm-readonly-wrap {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.role-perm-readonly-list {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.role-perm-readonly-list li {
  list-style: disc;
}

.role-perm-readonly-list li .role-perm-title {
  display: block;
}

.role-perm-matrix-wrap {
  overflow-x: auto;
  max-width: 100%;
}

.role-perm-matrix th,
.role-perm-matrix td {
  vertical-align: middle;
}

.role-perm-matrix-th {
  min-width: 6.5rem;
  max-width: 10rem;
  font-weight: 500;
}

.role-perm-th-title {
  display: block;
  font-size: 0.78rem;
  line-height: 1.25;
}

.role-perm-th-key {
  display: block;
  font-family: ui-monospace, monospace;
  font-size: 0.65rem;
  font-weight: 400;
  word-break: break-all;
  margin-top: 0.2rem;
  opacity: 0.88;
}

.role-perm-matrix-sticky-col {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #f4faf7;
  box-shadow: 1px 0 0 rgba(11, 46, 36, 0.1);
  white-space: nowrap;
  text-align: left;
}

.role-perm-matrix-actions {
  white-space: nowrap;
}

.role-perm-matrix .btn.secondary {
  padding: 0.3rem 0.55rem;
  font-size: 0.85rem;
}

.role-perm-matrix-super td {
  background: rgba(11, 94, 63, 0.04);
}

.global-loader {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(11, 22, 18, 0.38);
  backdrop-filter: blur(1.5px);
}
.global-loader.is-visible {
  display: flex;
}
.global-loader-card {
  min-width: 250px;
  max-width: 86vw;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 0.95rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: var(--shadow-lg);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-primary-dark);
}
.global-loader-spinner {
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  border: 2px solid #b7c8bf;
  border-top-color: var(--color-accent);
  animation: globalLoaderSpin 0.8s linear infinite;
}
@keyframes globalLoaderSpin {
  to {
    transform: rotate(360deg);
  }
}

/* —— Session re-login overlay (idle timeout) —— */
body.session-page-locked > *:not(#session-relogin-overlay) {
  pointer-events: none;
  user-select: none;
}
body.session-page-locked .site-header,
body.session-page-locked .container,
body.session-page-locked .site-footer {
  filter: blur(2px) saturate(0.92);
}
.session-relogin-overlay {
  position: fixed;
  inset: 0;
  z-index: 3500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.session-relogin-overlay[hidden] {
  display: none !important;
}
.session-relogin-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 30, 22, 0.55);
  backdrop-filter: blur(4px);
}
.session-relogin-panel {
  position: relative;
  width: min(100%, 420px);
  z-index: 1;
  animation: sessionReloginIn 0.28s ease-out;
}
@keyframes sessionReloginIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.session-relogin-card {
  background: var(--surface);
  border-radius: calc(var(--radius) + 2px);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  padding: 1.5rem 1.6rem 1.35rem;
}
.session-relogin-brand {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  margin-bottom: 1rem;
}
.session-relogin-brand img {
  border-radius: 10px;
  box-shadow: var(--shadow);
}
.session-relogin-brand h2 {
  margin: 0 0 0.35rem;
  font-size: 1.2rem;
  color: var(--color-primary-dark);
}
.session-relogin-lead {
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.45;
}
.session-relogin-alert {
  margin: 0 0 0.75rem;
}
.session-relogin-account {
  margin: 0 0 1rem;
}
.session-relogin-step {
  margin-bottom: 0.5rem;
}
.session-relogin-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--text);
}
.session-relogin-otp-input {
  width: 100%;
  font-size: 1.35rem;
  letter-spacing: 0.35em;
  text-align: center;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 0.75rem;
}
.session-relogin-otp-input:focus {
  outline: 2px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
  border-color: var(--color-accent);
}
.session-relogin-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.session-relogin-btn {
  width: 100%;
  justify-content: center;
}
.session-relogin-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}
.session-relogin-local {
  margin-top: 0.75rem;
}
.session-relogin-foot {
  margin: 1rem 0 0;
  text-align: center;
}

/* —— Themed app confirm dialog —— */
body.app-confirm-open {
  overflow: hidden;
}
body.app-confirm-open > *:not(#app-confirm-overlay) {
  pointer-events: none;
}
.app-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 3400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  pointer-events: auto;
}
.app-confirm-overlay[hidden] {
  display: none !important;
}
.app-confirm-backdrop {
  position: absolute;
  inset: 0;
  background: transparent;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.app-confirm-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 460px);
  animation: appConfirmIn 0.24s ease-out;
}
@keyframes appConfirmIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.app-confirm-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 2px);
  box-shadow: var(--shadow-lg);
  padding: 1.35rem 1.45rem 1.2rem;
}
.app-confirm-title {
  margin: 0 0 0.65rem;
  font-size: 1.12rem;
  line-height: 1.35;
  color: var(--color-primary-dark);
}
.app-confirm-message {
  margin: 0 0 1.15rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text);
}
.app-confirm-message[hidden] {
  display: none;
}
.app-confirm-has-compare .app-confirm-panel {
  width: min(100%, 540px);
}
.app-confirm-compare-wrap {
  margin: 0 0 1.1rem;
}
.app-confirm-compare-wrap .table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.app-confirm-compare-table {
  margin: 0;
}
.app-confirm-compare-table th[scope="row"] {
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  width: 4.5rem;
}
.app-confirm-compare-table td {
  word-break: break-word;
}
.app-confirm-actions {
  justify-content: flex-end;
  gap: 0.55rem;
  margin: 0;
}

.mapping-bulk-wrap {
  overflow: auto;
  max-height: min(65vh, 560px);
  border: 1px solid #b8ccc0;
  border-radius: 8px;
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(8, 76, 51, 0.06);
}
.mapping-bulk-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  table-layout: fixed;
}
.mapping-bulk-grid thead th:nth-child(1),
.mapping-bulk-grid thead th:nth-child(2) {
  min-width: 5.5rem;
}
.mapping-bulk-grid thead th:nth-child(3) {
  min-width: 6.5rem;
}
.mapping-bulk-grid thead th:nth-child(4) {
  min-width: 4.75rem;
}
.mapping-bulk-grid thead th:nth-child(5),
.mapping-bulk-grid thead th:nth-child(6) {
  min-width: 6.25rem;
}
.mapping-bulk-grid thead th:nth-child(7) {
  min-width: 5.5rem;
}
.mapping-bulk-grid thead th:nth-child(8),
.mapping-bulk-grid thead th:nth-child(9) {
  min-width: 6rem;
}
.mapping-bulk-grid thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: linear-gradient(180deg, #dfece3 0%, #d0e3d6 100%);
  border: 1px solid #b8ccc0;
  border-top: none;
  padding: 0.4rem 0.35rem;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  box-shadow: 0 1px 0 #b8ccc0;
}
.mapping-bulk-grid tbody td {
  border: 1px solid #dce8df;
  padding: 0;
  vertical-align: middle;
  background: #fff;
}
.mapping-bulk-grid tbody tr:nth-child(even) td {
  background: #f8fbf9;
}
.mapping-bulk-grid tbody tr:hover td {
  background: #eef6f1;
}
.mapping-grid-cell {
  width: 100%;
  min-width: 0;
  border: none;
  margin: 0;
  padding: 0.35rem 0.4rem;
  font-size: inherit;
  font-family: inherit;
  background: transparent;
  box-sizing: border-box;
}
.mapping-grid-cell:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
  position: relative;
  z-index: 1;
}
select.mapping-grid-slot,
select.mapping-grid-time {
  width: 100%;
  padding: 0.35rem 0.3rem;
  border: none;
  font-size: inherit;
  background: transparent;
  cursor: pointer;
}
.mapping-bulk-col-actions {
  width: 2.25rem;
  min-width: 2.25rem;
  text-align: center;
}
.mapping-grid-actions {
  text-align: center;
  vertical-align: middle;
  padding: 0.15rem;
  background: #f0f4f1 !important;
  display: flex;
  gap: 0.2rem;
  justify-content: center;
  align-items: center;
}
.btn-icon-duplicate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
}
.btn-icon-duplicate:hover {
  background: #e8f2ff;
  color: #1f4d89;
}
.btn-icon-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
.btn-icon-remove:hover {
  background: #fde8e8;
  color: var(--danger);
}
.mapping-bulk-toolbar {
  margin-top: 0.75rem;
}

/* Team mapping — collapsible + scrollable “all rows” table */
.team-mapping-all-card .team-mapping-all-rows {
  margin: 0;
}
.team-mapping-all-rows > .team-mapping-all-rows-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1rem;
  padding: 0.15rem 0 0.65rem;
  user-select: none;
}
.team-mapping-all-rows > .team-mapping-all-rows-summary::-webkit-details-marker {
  display: none;
}
.team-mapping-all-rows-title {
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--color-primary-dark);
}
.team-mapping-all-rows-title::before {
  content: "▸ ";
  display: inline-block;
  width: 1.1em;
  color: var(--muted);
  font-size: 0.85em;
}
.team-mapping-all-rows[open] > .team-mapping-all-rows-summary .team-mapping-all-rows-title::before {
  content: "▾ ";
}
.team-mapping-all-rows-meta {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--muted);
}
.team-mapping-all-rows[open] > .team-mapping-all-rows-summary {
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.75rem;
}
.team-mapping-all-rows-scroll {
  max-height: min(70vh, 40rem);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius, 8px);
  background: var(--surface);
}
.team-mapping-all-rows-scroll .table-wrap {
  margin: 0;
}
.team-mapping-all-rows-scroll table.data-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: 0 1px 0 var(--border);
}
.team-mapping-all-empty {
  margin: 0.25rem 0 0;
}

.success-batch-card {
  border-left: 4px solid var(--color-accent);
}

/* Arabic-friendly: optional RTL */
[dir="rtl"] .brand-lockup {
  flex-direction: row-reverse;
}
[dir="rtl"] .link-list {
  padding-right: 1.25rem;
  padding-left: 0;
}

/* Attendance report */
.att-rpt-table-card {
  margin-top: 1rem;
}
.att-rpt-kpis {
  margin-top: 0.75rem;
}
.att-rpt-rollup {
  font-size: 0.85em;
  white-space: nowrap;
}
.att-rpt-details summary {
  cursor: pointer;
  color: var(--color-accent, #1f4d89);
  font-size: 0.9rem;
}
.att-rpt-details .nested {
  margin-top: 0.5rem;
  font-size: 0.85rem;
}
.att-rpt-tl-cell {
  min-width: 7rem;
  vertical-align: top;
}
.att-pill {
  display: inline-block;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.att-pill-present {
  background: #e6f4ea;
  color: #137333;
}
.att-pill-late {
  background: #fef7e0;
  color: #b06000;
}
.att-pill-absent {
  background: #fdecea;
  color: #c5221f;
}
.att-pill-leave {
  background: #e8f0fe;
  color: #1a4dab;
}

.att-tel-link {
  font-weight: 600;
  color: var(--color-accent, #1f4d89);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.att-tel-link:hover {
  color: var(--color-primary-dark, #0b3d6d);
}

.att-rpt-chart-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  align-items: start;
}
.att-rpt-chart-title {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  font-weight: 600;
}
.att-rpt-pie {
  min-height: 300px;
  overflow: visible;
  padding-top: 0.35rem;
}
.att-rpt-pie .js-plotly-plot .plotly,
.att-rpt-pie .plotly-graph-div {
  overflow: visible !important;
}
.att-rpt-pie-empty {
  margin: 0;
  padding: 2rem 0.5rem;
  text-align: center;
}
.att-rpt-team-card {
  margin-bottom: 1rem;
}
.att-rpt-team-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  margin-bottom: 0.75rem;
}
.att-rpt-team-head-main {
  flex: 1 1 12rem;
  min-width: 0;
}
.att-rpt-team-head-meta {
  flex: 0 1 16rem;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  align-items: flex-end;
}
.att-rpt-team-meta-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
  max-width: 100%;
}
.att-rpt-team-meta-k {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.att-rpt-team-meta-v {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-primary-dark);
  line-height: 1.35;
  word-break: break-word;
}
.att-rpt-team-slot-pill {
  font-weight: 700;
  color: var(--color-primary);
}
.att-rpt-team-title {
  margin: 0;
  font-size: 1.1rem;
}
.att-rpt-team-leads {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 0.25rem;
}

.att-rpt-hero-simple .alloc-premium-hero-main {
  max-width: none;
  flex: 1 1 100%;
}

.att-rpt-filter-card {
  margin-bottom: 0.65rem;
}
.att-rpt-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.55rem 0.85rem;
}
.att-rpt-filter-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  min-width: 9rem;
}
.att-rpt-filter-item input,
.att-rpt-filter-item select {
  font-weight: 500;
  color: var(--color-primary-dark);
}
.att-rpt-filter-actions-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin-left: auto;
}

.att-rpt-team-section {
  margin-top: 1.25rem;
}
.att-rpt-team-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}
.att-rpt-team-section-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.85rem 1.25rem;
}
.att-rpt-bd-slot-note {
  margin: 0;
  align-self: center;
}
.att-rpt-team-filter-label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  min-width: 12rem;
}
.att-rpt-team-filter-label select {
  font-weight: 500;
}

/* Follow-up: collapsible panels + scrollable member tables */
.att-fup-panel {
  margin-bottom: 1rem;
}
.att-fup-panel > summary.att-fup-panel-summary {
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 600;
  padding: 0.35rem 0;
  list-style: none;
}
.att-fup-panel > summary.att-fup-panel-summary::-webkit-details-marker {
  display: none;
}
.att-fup-panel > summary.att-fup-panel-summary::before {
  content: "";
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-right: 0.5rem;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  /* Expanded: chevron points down */
  transform: rotate(45deg);
  vertical-align: middle;
  transition: transform 0.15s ease;
}
.att-fup-panel:not([open]) > summary.att-fup-panel-summary::before {
  /* Collapsed: chevron points right */
  transform: rotate(-45deg);
}
.att-fup-panel-body {
  padding-top: 0.5rem;
}
.att-fup-team-details > summary.att-fup-team-summary {
  cursor: pointer;
  list-style: none;
  padding: 0.5rem 0;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.att-fup-team-details > summary.att-fup-team-summary::-webkit-details-marker {
  display: none;
}
.att-fup-team-details > summary.att-fup-team-summary::before {
  content: "";
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-top: 0.35rem;
  flex-shrink: 0;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}
.att-fup-team-details:not([open]) > summary.att-fup-team-summary::before {
  transform: rotate(-45deg);
}
.att-fup-team-summary-main {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: flex-start;
}
@media (min-width: 640px) {
  .att-fup-team-summary-main {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1rem;
  }
}
.att-fup-team-inner {
  padding-top: 0.35rem;
  border-top: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
  margin-top: 0.35rem;
}
.att-fup-member-scroll {
  max-height: 18rem;
  overflow: auto;
}
.arr-fup-member-scroll {
  max-height: 28rem;
  overflow: auto;
}
.arr-fup-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
}
.arr-fup-badge-ok {
  background: rgba(19, 115, 51, 0.12);
  color: #137333;
}
.arr-fup-badge-pending {
  background: rgba(154, 160, 166, 0.25);
  color: var(--muted);
}
.arr-fup-badge-sync {
  background: rgba(26, 77, 171, 0.12);
  color: #1a4dab;
}
.arr-fup-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.5rem;
}
.arr-fup-hero-text {
  flex: 1 1 18rem;
  min-width: 0;
}
.arr-fup-sync-form {
  flex: 0 0 auto;
  margin-left: auto;
  align-self: flex-start;
}
.arr-fup-sync-form .btn {
  white-space: nowrap;
}
@media (max-width: 640px) {
  .arr-fup-sync-form {
    margin-left: 0;
    width: 100%;
  }
  .arr-fup-sync-form .btn {
    width: 100%;
  }
}
.fup-sa-sync-panel {
  margin-bottom: 1rem;
}
.fup-sa-sync-title {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
}
.fup-sa-sync-lead {
  margin: 0 0 0.75rem;
}
.fup-sa-sync-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}
.fup-sa-autosync-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.92rem;
  cursor: pointer;
}
.fup-sa-sync-status {
  margin: 0.75rem 0 0;
  font-size: 0.9rem;
}
.fup-sa-sync-status.is-success {
  color: var(--success, #1b7f3a);
}
.fup-sa-sync-status.is-error {
  color: var(--danger, #b42318);
}
.fup-sa-sync-status.is-muted {
  color: var(--muted, #5f6368);
}
.admin-sync-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1rem;
  margin-top: 0.75rem;
}
.admin-sync-status-value {
  margin: 0.2rem 0 0;
  font-size: 1.05rem;
  font-weight: 600;
}
.admin-sync-status-ok {
  color: var(--success, #1b7f3a);
}
.admin-sync-status-pending {
  color: var(--warning, #b45309);
}
.admin-sync-actions .admin-sync-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--border, #e8eaed);
}
.admin-sync-actions .admin-sync-row:first-of-type {
  border-top: none;
  padding-top: 0.25rem;
}
.admin-sync-row-text {
  flex: 1 1 14rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.admin-sync-settings-sub {
  margin: 1rem 0 0.35rem;
  font-size: 1rem;
}
.admin-sync-settings-sub:first-child {
  margin-top: 0;
}
.admin-sync-settings-grid {
  display: grid;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.admin-sync-setting-row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem;
  border: 1px solid var(--border, #e8eaed);
  border-radius: 8px;
  cursor: default;
}
.admin-sync-setting-label {
  font-weight: 600;
}
.admin-sync-setting-concerns {
  font-style: italic;
}
.admin-sync-setting-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.35rem;
}
.admin-sync-setting-input input[type="number"] {
  width: 6rem;
}
.arr-fup-kpis {
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
}
.arr-fup-charts-explore .alloc-explore-filters {
  margin-top: 0.35rem;
}
.arr-fup-charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.25rem;
  align-items: start;
}

.arr-fup-chart-panel .att-rpt-chart-title {
  margin-bottom: 0.5rem;
}

.arr-fup-chart-row {
  margin-top: 0;
}

.arr-fup-chart-panel .alloc-explore-legend {
  max-height: 280px;
  overflow-y: auto;
}
.arr-fup-bar-chart {
  min-height: 360px;
}
.arr-fup-column-card {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  background: var(--surface-elevated, rgba(0, 0, 0, 0.02));
  border-radius: 8px;
}
.arr-fup-subhead {
  margin: 0 0 0.35rem;
  font-size: 1rem;
}
.arr-fup-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}
.arr-fup-status-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}
.arr-fup-status-chip.is-active {
  border-color: var(--accent, #0b5e3f);
  background: rgba(11, 94, 63, 0.1);
  color: var(--accent, #0b5e3f);
}
.arr-fup-coord-list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.82rem;
  line-height: 1.45;
}
.arr-fup-coord-list-cell {
  max-width: 22rem;
}
.arr-fup-coord-call {
  margin-left: 0.35rem;
  font-weight: 600;
}
.arr-fup-coord-cell .arr-fup-coord-text {
  display: inline-block;
  max-width: 14rem;
  vertical-align: middle;
}
.arr-fup-stats-panel .arr-fup-coord-list-cell,
.arr-fup-stats-panel .arr-fup-coord-plain-cell {
  vertical-align: top;
}
.arr-fup-coord-plain-cell {
  max-width: 22rem;
  font-size: 0.82rem;
  line-height: 1.45;
}

/* —— Allocation audit history —— */
.allocate-col-audit {
  width: 2.75rem;
  text-align: center;
  vertical-align: middle;
}
.alloc-audit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 1px solid var(--border, #d8e3dc);
  border-radius: 999px;
  background: var(--surface-elevated, #fff);
  color: var(--accent, #0b5e3f);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
}
.alloc-audit-btn:hover,
.alloc-audit-btn:focus-visible {
  background: color-mix(in srgb, var(--accent, #0b5e3f) 12%, white);
  border-color: var(--accent, #0b5e3f);
  outline: none;
}
body.audit-history-open {
  overflow: hidden;
}
.audit-history-overlay {
  position: fixed;
  inset: 0;
  z-index: 3500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(8, 24, 18, 0.45);
}
.audit-history-overlay[hidden] {
  display: none !important;
}
.audit-history-panel {
  width: min(42rem, 100%);
  max-height: min(85vh, 40rem);
  display: flex;
  flex-direction: column;
  margin: 0;
}
.audit-history-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border, #d8e3dc);
}
.audit-history-head h2 {
  margin: 0;
  font-size: 1.1rem;
}
.audit-history-close {
  min-width: 2rem;
  padding-inline: 0.5rem;
  font-size: 1.25rem;
  line-height: 1;
}
.audit-history-body {
  overflow: auto;
  padding-top: 0.75rem;
}
.audit-history-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}
.audit-history-item {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border, #d8e3dc);
}
.audit-history-item:last-child {
  border-bottom: none;
}
.audit-history-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  margin-bottom: 0.5rem;
}
.audit-history-diff {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.5rem;
  align-items: start;
}
.audit-diff-label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #5c6b63);
  margin-bottom: 0.2rem;
}
.audit-diff-arrow {
  padding-top: 1.1rem;
  color: var(--muted, #5c6b63);
}
.audit-role-pill {
  display: inline-block;
  margin-left: 0.15rem;
  padding: 0.05rem 0.35rem;
  border-radius: 0.25rem;
  background: color-mix(in srgb, var(--accent, #0b5e3f) 10%, white);
  font-size: 0.78rem;
}
.admin-audit-panels {
  margin-top: 1rem;
}
.admin-audit-filter-form label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.88rem;
}
.audit-entity-tag {
  font-size: 0.75rem;
}
.audit-entity-id {
  max-width: 14rem;
  word-break: break-all;
}
.audit-change-summary {
  max-width: 18rem;
  line-height: 1.4;
}
@media (max-width: 640px) {
  .audit-history-diff {
    grid-template-columns: 1fr;
  }
  .audit-diff-arrow {
    display: none;
  }
}

/* —— Reports UI (allocation & attendance) —— */
.att-rpt-page {
  --rpt-radius: 10px;
  --rpt-radius-sm: 8px;
  --rpt-control-h: var(--ui-control-h);
  padding-bottom: 1.25rem;
}

.att-rpt-page .card.rpt-card,
.att-rpt-page .rpt-section.card {
  border-radius: var(--rpt-radius);
  border: 1px solid color-mix(in srgb, var(--border) 82%, var(--color-primary) 18%);
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--color-primary-dark) 5%, transparent),
    0 6px 20px color-mix(in srgb, var(--color-primary-dark) 4%, transparent);
}

.att-rpt-page .card.rpt-card:hover,
.att-rpt-page .rpt-section.card:hover,
.att-rpt-page .alloc-coverage-compact.card:hover,
.att-rpt-page .alloc-mz-card:hover {
  transform: none;
}

.att-rpt-page .alloc-premium-hero.rpt-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 0.65rem;
  padding: 0.65rem 0.95rem 0.7rem;
  border-radius: calc(var(--radius) + 2px);
}

.att-rpt-page .rpt-hero::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -8%;
  width: min(42%, 280px);
  height: 140%;
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--color-primary) 18%, transparent) 0%,
    transparent 68%
  );
  pointer-events: none;
  opacity: 0.85;
}

.att-rpt-page .rpt-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.55rem 1rem;
}

.att-rpt-page .rpt-hero-main {
  flex: 1 1 280px;
  max-width: 44rem;
}

.att-rpt-page .rpt-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 0.25rem;
  padding: 0.16rem 0.45rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--border));
}

.att-rpt-page .rpt-hero-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 25%, transparent);
}

.rpt-nav {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.3rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg) 55%, var(--surface));
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--color-primary-dark) 4%, transparent);
}

.rpt-nav-link {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.rpt-nav-link:hover {
  color: var(--color-primary-dark);
  text-decoration: none;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
}

.rpt-nav-link.is-active {
  color: var(--color-primary-dark);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.rpt-alerts {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 1rem;
}

.rpt-alerts .alert {
  margin: 0;
  border-radius: var(--rpt-radius-sm);
}

.rpt-filter-form {
  margin-bottom: 0.75rem;
}

.rpt-filter-card {
  padding: 0;
  overflow: hidden;
  margin-bottom: 0;
}

.rpt-filter-head {
  padding: 0.65rem 0.85rem 0.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-primary) 5%, var(--surface)) 0%,
    var(--surface) 100%
  );
}

.rpt-filter-title {
  margin: 0 0 0.15rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  letter-spacing: -0.01em;
}

.rpt-filter-desc {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--muted);
  max-width: 40rem;
}

.rpt-filter-body {
  padding: 0.65rem 0.85rem 0.75rem;
}

.rpt-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: 0.65rem 0.85rem;
  align-items: end;
}

.rpt-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.rpt-field--wide {
  grid-column: span 1;
}

@media (min-width: 900px) {
  .rpt-field--team {
    grid-column: span 2;
  }
}

.rpt-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.rpt-label-hint {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.72rem;
  color: color-mix(in srgb, var(--muted) 88%, var(--text));
}

.rpt-control {
  width: 100%;
  min-height: var(--rpt-control-h);
  padding: 0.32rem 0.55rem;
  border-radius: var(--rpt-radius-sm);
  border: 1px solid color-mix(in srgb, var(--border) 90%, var(--color-primary) 10%);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-primary-dark);
  background: var(--surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rpt-control:hover {
  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--border));
}

.rpt-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

select.rpt-control {
  cursor: pointer;
  appearance: none;
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235a5f5c' d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 12px;
}

.rpt-filter-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px dashed color-mix(in srgb, var(--border) 85%, transparent);
}

.rpt-btn-generate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: var(--rpt-control-h);
  padding: 0.35rem 1rem;
  border-radius: var(--rpt-radius-sm);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow:
    0 2px 8px color-mix(in srgb, var(--color-primary) 28%, transparent),
    0 1px 2px color-mix(in srgb, var(--color-primary-dark) 12%, transparent);
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}

.rpt-btn-generate:hover {
  transform: translateY(-1px);
  box-shadow:
    0 4px 14px color-mix(in srgb, var(--color-primary) 32%, transparent),
    0 2px 4px color-mix(in srgb, var(--color-primary-dark) 10%, transparent);
}

.rpt-btn-generate:active {
  transform: translateY(0);
}

.rpt-btn-icon {
  font-size: 1rem;
  line-height: 1;
  opacity: 0.92;
}

.rpt-btn-generate:disabled {
  opacity: 0.88;
  cursor: wait;
  transform: none;
}

.rpt-btn-spinner {
  display: inline-block;
  width: 0.95rem;
  height: 0.95rem;
  border: 2px solid color-mix(in srgb, currentColor 25%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: rpt-spin 0.65s linear infinite;
  vertical-align: -0.15em;
}

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

.rpt-empty-hint {
  text-align: center;
  padding: 2rem 1.5rem;
  margin-bottom: 1.25rem;
  border-style: dashed;
  background: color-mix(in srgb, var(--surface) 92%, var(--bg) 8%);
}

.rpt-empty-hint-icon {
  display: block;
  margin: 0 auto 0.65rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  line-height: 2.5rem;
  font-size: 1.25rem;
  background: color-mix(in srgb, var(--color-primary) 12%, var(--surface));
  color: var(--color-primary);
}

.rpt-empty-hint-title {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}

.rpt-results {
  animation: rpt-fade-in 0.45s ease both;
}

@keyframes rpt-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.rpt-period-card {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-bottom: 1.25rem;
  padding: 1.15rem 1.35rem;
  border-radius: var(--rpt-radius);
  background: linear-gradient(
    120deg,
    color-mix(in srgb, var(--color-primary) 11%, var(--surface)) 0%,
    var(--surface) 55%,
    color-mix(in srgb, var(--color-primary-dark) 4%, var(--surface)) 100%
  );
  border: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--border));
}

.rpt-period-label {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.rpt-period-value {
  margin: 0.2rem 0 0;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-primary-dark);
  line-height: 1.2;
}

.rpt-period-meta {
  margin: 0.45rem 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--muted);
  max-width: 36rem;
}

.rpt-period-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.rpt-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-primary-dark);
  background: color-mix(in srgb, var(--color-primary) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--color-primary) 20%, var(--border));
}

.rpt-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.35rem;
}

.rpt-kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 1rem 1.05rem 0.95rem;
  border-radius: var(--rpt-radius);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rpt-kpi::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--color-primary),
    color-mix(in srgb, var(--color-accent) 80%, var(--color-primary))
  );
  opacity: 0.85;
}

.rpt-kpi:hover {
  border-color: color-mix(in srgb, var(--color-primary) 30%, var(--border));
  box-shadow: var(--shadow-lg);
}

.rpt-kpi-value {
  font-size: clamp(1.5rem, 3vw, 1.85rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary-dark);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.rpt-kpi-label {
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--muted);
}

.rpt-section {
  margin-bottom: 0.85rem;
  padding: 0.75rem 0.85rem 0.85rem;
}

.rpt-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.45rem 0.75rem;
  margin-bottom: 0.65rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}

.rpt-section-head .alloc-section-title,
.rpt-section-head .rpt-section-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-primary-dark);
}

.rpt-section-lead {
  margin: 0.35rem 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--muted);
  max-width: 42rem;
}

.rpt-stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
  gap: 0.55rem;
  margin-bottom: 1.25rem;
}

.rpt-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.75rem 0.5rem;
  border-radius: var(--rpt-radius-sm);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 96%, var(--bg) 4%);
  text-align: center;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.rpt-stat:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.rpt-stat-val {
  font-size: 1.35rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.rpt-stat-lbl {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  line-height: 1.25;
}

.rpt-stat--allocated .rpt-stat-val { color: var(--color-primary-dark); }
.rpt-stat--ontime .rpt-stat-val { color: #137333; }
.rpt-stat--late .rpt-stat-val { color: #b06000; }
.rpt-stat--absent .rpt-stat-val { color: #c5221f; }
.rpt-stat--leave .rpt-stat-val { color: #1a4dab; }
.rpt-stat--nodata .rpt-stat-val { color: var(--muted); }
.rpt-stat--other .rpt-stat-val { color: #5f6368; }

.rpt-stat--ontime { border-color: color-mix(in srgb, #137333 25%, var(--border)); background: #e6f4ea; }
.rpt-stat--late { border-color: color-mix(in srgb, #b06000 22%, var(--border)); background: #fef7e0; }
.rpt-stat--absent { border-color: color-mix(in srgb, #c5221f 20%, var(--border)); background: #fdecea; }
.rpt-stat--leave { border-color: color-mix(in srgb, #1a4dab 20%, var(--border)); background: #e8f0fe; }

.rpt-chart-panel {
  padding: 0.85rem 1rem 1rem;
  border-radius: var(--rpt-radius-sm);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 97%, var(--bg) 3%);
}

.rpt-chart-panel .att-rpt-chart-title {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}

.att-rpt-page .att-rpt-chart-row {
  gap: 1.15rem;
}

.att-rpt-page .att-rpt-pie {
  min-height: 320px;
  border-radius: 8px;
}

.rpt-lead-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.rpt-lead-card {
  padding: 0.9rem 1rem;
  border-radius: var(--rpt-radius-sm);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 94%, var(--bg) 6%);
  transition: border-color 0.15s ease;
}

.rpt-lead-card:hover {
  border-color: color-mix(in srgb, var(--color-primary) 28%, var(--border));
}

.rpt-team-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem 1.25rem;
  margin-bottom: 1rem;
  padding: 1.1rem 1.35rem;
  border-radius: var(--rpt-radius);
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 82%, var(--color-primary) 18%);
  box-shadow: var(--shadow);
}

.rpt-team-section-head .alloc-section-title {
  margin: 0;
}

.rpt-team-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.85rem 1.15rem;
}

.rpt-team-filters .rpt-field {
  min-width: 10.5rem;
}

.att-rpt-page .att-rpt-team-card {
  border-radius: var(--rpt-radius);
  border: 1px solid color-mix(in srgb, var(--border) 80%, var(--color-primary) 15%);
  padding: 1.15rem 1.35rem 1.25rem;
  margin-bottom: 1rem;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.att-rpt-page .att-rpt-team-card:hover {
  border-color: color-mix(in srgb, var(--color-primary) 28%, var(--border));
  box-shadow: var(--shadow-lg);
}

.att-rpt-page .att-rpt-team-title {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-primary-dark);
}

.att-rpt-page .att-rpt-team-slot-pill {
  display: inline-block;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  font-size: 0.75rem;
  background: color-mix(in srgb, var(--color-primary) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--border));
}

.att-rpt-page .data-table.compact thead th {
  background: color-mix(in srgb, var(--color-primary) 7%, var(--surface));
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.att-rpt-page .alloc-explore-panel {
  border-radius: var(--rpt-radius);
}

.att-rpt-page .alloc-explore-filters label select {
  min-height: var(--rpt-control-h);
  padding: 0.45rem 2rem 0.45rem 0.65rem;
  border-radius: var(--rpt-radius-sm);
  border: 1px solid color-mix(in srgb, var(--border) 90%, var(--color-primary) 10%);
}

.att-rpt-page .alloc-team-highlight {
  border-radius: var(--rpt-radius);
  border-left-width: 4px;
}

@media (max-width: 720px) {
  .att-rpt-page .rpt-hero-inner {
    flex-direction: column;
  }

  .rpt-nav {
    width: 100%;
    justify-content: stretch;
  }

  .rpt-nav-link {
    flex: 1;
    text-align: center;
    padding: 0.5rem 0.35rem;
    font-size: 0.78rem;
  }

  .rpt-filter-foot {
    justify-content: stretch;
  }

  .rpt-btn-generate {
    width: 100%;
  }

  .rpt-period-card {
    flex-direction: column;
  }

  .rpt-stat-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .att-rpt-page .att-rpt-team-head-meta {
    align-items: flex-start;
    text-align: left;
  }

  .att-rpt-page .att-rpt-team-meta-block {
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rpt-results {
    animation: none;
  }

  .rpt-stat:hover,
  .rpt-btn-generate:hover {
    transform: none;
  }
}

/* Arrival report / follow-up (shared template) */
.rpt-sync-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.85rem;
  margin-bottom: 1.15rem;
  padding: 0.85rem 1.15rem;
  border-radius: var(--rpt-radius-sm);
  border: 1px solid color-mix(in srgb, var(--color-primary) 20%, var(--border));
  background: color-mix(in srgb, var(--color-primary) 6%, var(--surface));
}

.rpt-sync-banner--muted {
  border-style: dashed;
  background: color-mix(in srgb, var(--surface) 94%, var(--bg) 6%);
}

.rpt-sync-banner-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.rpt-sync-banner-value {
  font-size: 0.95rem;
  color: var(--color-primary-dark);
}

.rpt-sync-banner-note {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--muted);
}

.rpt-kpi--registered::before {
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}

.rpt-kpi--arrived::before {
  background: linear-gradient(90deg, #137333, #1e8e3e);
}

.rpt-kpi--arrived .rpt-kpi-value {
  color: #137333;
}

.rpt-kpi--pending::before {
  background: linear-gradient(90deg, #9aa0a6, #b8bcc0);
}

.rpt-kpi--not-synced::before {
  background: linear-gradient(90deg, #1a4dab, #4285f4);
}

.rpt-kpi--not-synced .rpt-kpi-value {
  color: #1a4dab;
}

.att-rpt-page details.rpt-panel {
  padding: 0;
  overflow: hidden;
  margin-bottom: 1.15rem;
}

.att-rpt-page details.rpt-panel:hover {
  transform: none;
}

.att-rpt-page details.rpt-panel > summary.rpt-panel-summary {
  cursor: pointer;
  list-style: none;
  margin: 0;
  padding: 1rem 1.35rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-primary-dark);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-primary) 5%, var(--surface)) 0%,
    var(--surface) 100%
  );
  border-bottom: 1px solid transparent;
  transition: background 0.15s ease;
}

.att-rpt-page details.rpt-panel[open] > summary.rpt-panel-summary {
  border-bottom-color: color-mix(in srgb, var(--border) 80%, transparent);
}

.att-rpt-page details.rpt-panel > summary.rpt-panel-summary::-webkit-details-marker {
  display: none;
}

.att-rpt-page details.rpt-panel > summary.rpt-panel-summary::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.55rem;
  border-right: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  transform: rotate(45deg);
  vertical-align: 0.1em;
  transition: transform 0.15s ease;
  opacity: 0.75;
}

.att-rpt-page details.rpt-panel:not([open]) > summary.rpt-panel-summary::before {
  transform: rotate(-45deg);
  vertical-align: 0;
}

.att-rpt-page details.rpt-panel .att-fup-panel-body {
  padding: 1rem 1.35rem 1.25rem;
}

.att-rpt-page .rpt-explore-filters label select {
  min-height: var(--rpt-control-h);
  padding: 0.45rem 2rem 0.45rem 0.65rem;
  border-radius: var(--rpt-radius-sm);
  border: 1px solid color-mix(in srgb, var(--border) 90%, var(--color-primary) 10%);
  font-weight: 500;
}

.att-rpt-page .arr-fup-stats-panel .data-table thead th {
  background: color-mix(in srgb, var(--color-primary) 7%, var(--surface));
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.att-rpt-page .rpt-inset-card {
  margin-bottom: 1rem;
  padding: 1rem 1.1rem;
  border-radius: var(--rpt-radius-sm);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 96%, var(--bg) 4%);
}

.att-rpt-page .rpt-inset-card .rpt-section-title {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
}

.att-rpt-page .rpt-table-toolbar {
  padding: 0.65rem 0.85rem;
  margin-bottom: 0.75rem;
  border-radius: var(--rpt-radius-sm);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 40%, var(--surface));
}

.att-rpt-page .rpt-visible-count {
  font-weight: 600;
  color: var(--color-primary-dark);
}

.att-rpt-page .rpt-filter-group-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 0.25rem;
}

.att-rpt-page .rpt-status-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.att-rpt-page .rpt-status-chip {
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  min-height: 1.85rem;
  padding: 0.22rem 0.6rem;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.att-rpt-page .rpt-status-chip.is-active {
  border-color: color-mix(in srgb, var(--color-primary) 45%, var(--border));
  background: color-mix(in srgb, var(--color-primary) 12%, var(--surface));
  color: var(--color-primary-dark);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
}

.att-rpt-page .rpt-table-scroll {
  border-radius: var(--rpt-radius-sm);
  border: 1px solid var(--border);
  max-height: min(78vh, 820px);
  overflow: auto;
}

.att-rpt-page .rpt-table-scroll .data-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: color-mix(in srgb, var(--color-primary) 8%, var(--surface));
  box-shadow: 0 1px 0 var(--border);
}

.att-rpt-page .arr-fup-chart-panel.rpt-chart-panel {
  padding: 1rem;
}

.att-rpt-page .alloc-column-chip {
  border-radius: 999px;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.att-rpt-page .alloc-filter-cell .arr-fup-filter-op,
.att-rpt-page .alloc-filter-cell .arr-fup-filter {
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--border) 90%, var(--color-primary) 8%);
}

.att-rpt-page .att-rpt-hero-simple .alloc-premium-lead {
  max-width: 56rem;
}

.att-rpt-page .card > .muted.small {
  margin-bottom: 0.35rem;
}

.mza-page .mza-step-card > .muted.small {
  margin: 0 0 0.45rem;
  line-height: 1.35;
}

.mza-page .mza-column-card {
  margin-bottom: 0.45rem;
}

.att-rpt-page .att-rpt-team-card {
  padding: 0.75rem 0.85rem 0.85rem;
  margin-bottom: 0.65rem;
}

.rpt-team-section-head {
  margin-bottom: 0.65rem;
  padding: 0.65rem 0.85rem;
}

.att-fup-panel {
  margin-bottom: 0.65rem;
}
.att-fup-panel > summary.att-fup-panel-summary {
  font-size: 0.92rem;
  padding: 0.2rem 0;
}
.att-fup-member-scroll {
  max-height: min(72vh, 640px);
}
.arr-fup-member-scroll {
  max-height: min(78vh, 820px);
}

.att-rpt-page .alloc-filter-cell .arr-fup-filter:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 16%, transparent);
}