/* JPER Stat System — shared styles */

:root {
  --brand-primary: #0b3d62;
  --brand-primary-dark: #082c47;
  --brand-accent: #1f7a8c;
  --brand-accent-hover: #186171;
  --surface: #ffffff;
  --surface-muted: #f4f7fa;
  --border: #d8e0e8;
  --text: #1d2b36;
  --text-muted: #5a6b78;
  --danger: #b3261e;
  --success: #1d7a46;
  --shadow: 0 18px 50px rgba(8, 44, 71, 0.18);
  --radius: 14px;
  --radius-sm: 8px;
  --font: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: var(--font);
  color: var(--text);
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-accent) 100%);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Login page ---------- */

.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
}

.login-card {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.brand {
  text-align: center;
  padding: 36px 32px 8px;
}

.brand__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.brand__mark {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.5px;
  box-shadow: 0 6px 16px rgba(8, 44, 71, 0.3);
}

.brand__img {
  width: 220px;
  max-width: 80%;
  height: auto;
}

.brand__name {
  margin: 18px 0 2px;
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--brand-primary);
}

.brand__tagline {
  margin: 0;
  font-size: 0.86rem;
  color: var(--text-muted);
}

.login-body {
  padding: 24px 32px 8px;
}

.field {
  margin-bottom: 16px;
}

.field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text);
}

.field input {
  width: 100%;
  padding: 12px 14px;
  font-size: 0.95rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.field input:focus {
  outline: none;
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 3px rgba(31, 122, 140, 0.18);
  background: #fff;
}

.row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  font-size: 0.82rem;
}

.row-between label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  cursor: pointer;
}

.btn {
  width: 100%;
  padding: 13px 16px;
  font-size: 0.98rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, transform 0.05s;
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: var(--brand-primary);
  color: #fff;
}

.btn--primary:hover {
  background: var(--brand-primary-dark);
}

.btn--cac {
  background: var(--brand-accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.btn--cac:hover {
  background: var(--brand-accent-hover);
}

.divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.78rem;
  margin: 22px 0;
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.divider span {
  padding: 0 12px;
}

.alert {
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 0.84rem;
  margin-bottom: 16px;
  display: none;
}

.alert--error {
  display: block;
  background: #fdecea;
  color: var(--danger);
  border: 1px solid #f5c6c2;
}

.login-help {
  background: var(--surface-muted);
  border-top: 1px solid var(--border);
  padding: 20px 32px 26px;
  margin-top: 18px;
}

.login-help h2 {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  margin: 0 0 12px;
}

.help-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.help-links a {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--brand-primary);
  font-size: 0.9rem;
  font-weight: 500;
}

.help-links a:hover {
  text-decoration: underline;
}

.help-links .icon {
  font-size: 1rem;
}

.login-foot {
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.76rem;
  margin-top: 18px;
}

.cac-icon {
  width: 20px;
  height: 16px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.9);
  display: inline-block;
  position: relative;
}

/* ---------- Index / dashboard ---------- */

.app {
  min-height: 100vh;
  background: var(--surface-muted);
}

.topbar {
  background: #fff;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 26px;
  height: 60px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.topbar__left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.topbar__chip {
  font-size: 0.74rem; font-weight: 600; color: var(--text);
  background: var(--surface-muted); border: 1px solid var(--border);
  padding: 4px 10px; border-radius: 7px; white-space: nowrap;
}
.topbar__chip--lead { color: var(--brand-primary); background: rgba(11, 61, 98, 0.07); border-color: rgba(11, 61, 98, 0.18); }
.topbar__sep { color: var(--text-muted); font-size: 0.9rem; }
.topbar__right { display: flex; align-items: center; gap: 16px; }
.topbar__search { position: relative; display: flex; align-items: center; }
.topbar__search-ic { position: absolute; left: 10px; color: var(--text-muted); font-size: 0.95rem; pointer-events: none; }
.topbar__search input {
  width: 250px; max-width: 30vw; padding: 7px 12px 7px 30px; font-size: 0.8rem;
  border: 1px solid var(--border); border-radius: 9px; background: var(--surface-muted); color: var(--text);
}
.topbar__search input:focus { outline: none; border-color: var(--brand-accent); background: #fff; }
.topbar__asof {
  font: 600 0.72rem ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--text-muted); letter-spacing: 0.4px; white-space: nowrap;
}
.topbar__id { display: flex; align-items: center; gap: 9px; }
.topbar__avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-size: 0.72rem; font-weight: 700;
  color: #fff; background: var(--brand-accent);
}
.topbar__idtxt { display: flex; flex-direction: column; line-height: 1.15; }
.topbar__idtxt strong { font-size: 0.8rem; }
.topbar__idtxt a { font-size: 0.68rem; color: var(--text-muted); text-decoration: none; }
.topbar__idtxt a:hover { color: var(--brand-accent); text-decoration: underline; }
@media (max-width: 880px) { .topbar__search { display: none; } }

/* Notification bell + tray */
.topbar__notif { position: relative; }
.topbar__bell { position: relative; background: none; border: none; cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 6px; border-radius: 8px; color: var(--text-muted); }
.topbar__bell:hover { background: var(--surface-muted); }
.topbar__bell.has-unread { color: var(--brand-primary); }
.topbar__badge { position: absolute; top: 0; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 0.62rem; font-weight: 700; line-height: 16px; text-align: center; }
.notif-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 50; width: 340px; max-width: 86vw; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(8,44,71,0.18); overflow: hidden; }
.notif-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border-bottom: 1px solid var(--border); }
.notif-head strong { font-size: 0.9rem; color: var(--brand-primary); }
.notif-allread { background: none; border: none; color: var(--brand-accent); font-size: 0.74rem; font-weight: 600; cursor: pointer; }
.notif-list { max-height: 60vh; overflow-y: auto; }
.notif-item { display: grid; gap: 2px; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--surface-muted); padding: 10px 14px; cursor: pointer; }
.notif-item:hover { background: var(--surface-muted); }
.notif-item.is-unread { background: rgba(31,122,140,0.06); }
.notif-item.is-unread .notif-item__title::before { content: "•"; color: var(--brand-accent); margin-right: 5px; }
.notif-item__title { font-size: 0.82rem; font-weight: 600; color: var(--text); }
.notif-item__body { font-size: 0.76rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-item__when { font-size: 0.68rem; color: var(--text-muted); }
.notif-empty { padding: 18px 14px; color: var(--text-muted); font-size: 0.82rem; text-align: center; }

/* Data calls / taskings */
.tk-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.tk-head .ov__btn { cursor: pointer; }
.tk-list { display: grid; gap: 10px; margin-bottom: 18px; }
.tk-card { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; box-shadow: 0 1px 2px rgba(8,44,71,0.04); }
.tk-card.is-done { opacity: 0.8; }
.tk-card__main { flex: 1; min-width: 0; }
.tk-card__title { font-weight: 700; color: var(--brand-primary); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tk-card__body { font-size: 0.84rem; color: var(--text-muted); margin-top: 3px; }
.tk-card__meta { font-size: 0.72rem; color: var(--text-muted); margin-top: 5px; }
.tk-compliance { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.tk-compliance__bar { flex: 1; max-width: 240px; height: 8px; background: var(--surface-muted); border-radius: 5px; overflow: hidden; }
.tk-compliance__bar span { display: block; height: 100%; background: var(--brand-accent); border-radius: 5px; }
.tk-compliance__txt { font-size: 0.74rem; font-weight: 600; color: var(--text); }
.tk-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.tk-field span { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); }
.tk-field input, .tk-field textarea { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-family: var(--font); font-size: 0.86rem; }
.tk-field input:focus, .tk-field textarea:focus { outline: none; border-color: var(--brand-accent); }

/* Delegation */
.dg-current { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 0.88rem; }
.dg-set { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dg-set .facet__sel { min-width: 220px; }
.dg-acting { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.dg-chip { font-size: 0.8rem; font-weight: 600; padding: 5px 11px; border-radius: 20px; background: rgba(31,122,140,0.1); color: var(--brand-primary); }
.badge--acting { background: rgba(31,122,140,0.14); color: var(--brand-accent); }

/* Data quality */
.dq-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.dq-count { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); }
.dq-toolbar .btn-sm, .dq-toolbar .ov__btn { cursor: pointer; }
.dq-table th input, .dq-table td input { cursor: pointer; }
.dq-dup { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; margin-top: 10px; }
.dq-dup__key { font-weight: 700; color: var(--brand-primary); font-size: 0.84rem; margin-bottom: 6px; }
.dq-dup .data-table { margin-bottom: 8px; }

/* Forecast on the trend */
.trend__forecast { fill: none; stroke: var(--brand-accent); stroke-width: 1.8; stroke-dasharray: 4 3; opacity: 0.75; }
.trend__fcdot { fill: var(--brand-accent); opacity: 0.8; }
.dot--fc { background: var(--brand-accent); opacity: 0.7; }

/* Saved views / alerts lists */
.vw-list { display: grid; gap: 6px; }
.vw-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 0.84rem; }
.vw-load { flex: 1; text-align: left; background: none; border: none; cursor: pointer; color: var(--text); }
.vw-load:hover strong { color: var(--brand-accent); }
.vw-meta { color: var(--text-muted); font-size: 0.74rem; }

/* Org structure tree */
.org-tree { display: grid; gap: 4px; }
.org-node { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; }
.org-node:hover { background: var(--surface-muted); }
.org-node__type { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: #fff; background: var(--brand-accent); padding: 2px 7px; border-radius: 5px; }
.org-node__name { font-weight: 600; color: var(--brand-primary); }
.org-node__meta { font-size: 0.74rem; color: var(--text-muted); }
.org-node__actions { margin-left: auto; display: flex; gap: 6px; }
.org-node__actions .btn-sm { cursor: pointer; }

/* Auto-insights / narrative ("AI") */
.insights { margin-bottom: 16px; display: grid; gap: 10px; }
.insights:empty { display: none; }
.insights__narr { display: flex; gap: 10px; align-items: flex-start; background: linear-gradient(135deg, rgba(31,122,140,0.08), rgba(11,61,98,0.06)); border: 1px solid rgba(31,122,140,0.22); border-radius: var(--radius); padding: 12px 14px; font-size: 0.88rem; line-height: 1.45; }
.insights__ic { color: var(--brand-accent); font-size: 1rem; flex-shrink: 0; }
.insights__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.insight { background: #fff; border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--radius-sm); padding: 10px 12px; box-shadow: 0 1px 2px rgba(8,44,71,0.04); }
.insight--crit { border-left-color: var(--danger); }
.insight--warn { border-left-color: #f59e0b; }
.insight--info { border-left-color: var(--brand-accent); }
.insight--ok { border-left-color: var(--success); }
.insight__title { font-weight: 700; font-size: 0.84rem; color: var(--brand-primary); }
.insight__detail { font-size: 0.78rem; color: var(--text-muted); margin-top: 3px; }

/* Classification / control marking banner (top + bottom of every screen) */
.classbar { position: fixed; left: 0; right: 0; height: 22px; line-height: 22px; text-align: center; font-weight: 700; font-size: 0.72rem; letter-spacing: 1.2px; z-index: 200; color: #fff; text-transform: uppercase; }
.classbar--top { top: 0; } .classbar--bottom { bottom: 0; }
.classbar--unclass { background: #007a33; }      /* green */
.classbar--cui { background: #522d80; }           /* purple — DoD CUI */
.classbar--confidential { background: #0033a0; }  /* blue */
.classbar--secret { background: #c8102e; }        /* red */
.classbar--ts { background: #ff8c00; color: #000; } /* orange */
body.has-classbar .shell { height: calc(100vh - 44px); margin-top: 22px; }
body.has-classbar .login-wrap { padding-top: 30px; padding-bottom: 30px; }

/* DoD consent gate */
.consent { position: fixed; inset: 0; z-index: 300; background: rgba(8, 20, 32, 0.75); display: grid; place-items: center; padding: 28px; backdrop-filter: blur(2px); }
.consent.is-dismissed { display: none; }
.consent__card { background: #fff; border-radius: var(--radius); max-width: 760px; width: 100%; max-height: 86vh; display: flex; flex-direction: column; box-shadow: var(--shadow); overflow: hidden; padding: 22px 24px; }
.consent__card h2 { margin: 0 0 12px; color: var(--brand-primary); }
.consent__card h3 { margin: 14px 0 6px; color: var(--brand-primary); font-size: 0.95rem; }
.consent__body { overflow-y: auto; font-size: 0.82rem; line-height: 1.5; color: var(--text); }
.consent__body ul { margin: 6px 0; padding-left: 20px; }
.consent__body li { margin-bottom: 6px; }
.consent__card .btn { margin-top: 16px; flex-shrink: 0; }

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 24px;
}

.page-title {
  margin: 0 0 4px;
  color: var(--brand-primary);
  font-size: 1.5rem;
  font-weight: 700;
}

.page-sub {
  margin: 0 0 22px;
  color: var(--text-muted);
  font-size: 0.86rem;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}

.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: 0 1px 2px rgba(8, 44, 71, 0.04);
}

.card h3 {
  margin: 0 0 6px;
  color: var(--brand-primary);
  font-size: 1.02rem;
}

.card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.88rem;
}

.card .stat {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--brand-accent);
}

@media (max-width: 480px) {
  .login-body,
  .login-help,
  .brand {
    padding-left: 22px;
    padding-right: 22px;
  }
}

/* ---------- Dashboard shell + components ---------- */

.topbar__scope {
  font-size: 0.74rem;
  opacity: 0.8;
  display: block;
}

.topbar__user strong {
  font-weight: 600;
}

.role-pill {
  display: inline-block;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-left: 8px;
}

.section {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(8, 44, 71, 0.04);
  padding: 18px 20px;
  margin-bottom: 16px;
}

.section h2 {
  margin: 0 0 4px;
  color: var(--brand-primary);
  font-size: 1.05rem;
}

.section .section__hint {
  margin: 0 0 16px;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
}

.badge--pending { background: #fff4e0; color: #9a6400; }
.badge--pending_validation { background: #e6f0fb; color: #1a5ca8; }
.badge--approved { background: #e3f5ea; color: var(--success); }
.badge--declined { background: #fdecea; color: var(--danger); }
.badge--returned { background: #f1ecfb; color: #6b3fb3; }
.badge--flag { background: #fde7e7; color: #b3261e; }
.badge--routine { background: #eef2f6; color: #5a6b78; }

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

table.data th,
table.data td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--surface-muted);
  vertical-align: middle;
}

table.data th {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

table.data tbody tr:hover { background: var(--surface-muted); }

.btn-sm {
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  margin-right: 6px;
}

.btn-sm:hover { background: var(--surface-muted); }
.btn-sm--approve { background: var(--success); color: #fff; border-color: var(--success); }
.btn-sm--validate { background: var(--brand-accent); color: #fff; border-color: var(--brand-accent); }
.btn-sm--decline { color: var(--danger); border-color: #f0b8b4; }
.btn-sm--return { color: #6b3fb3; border-color: #d4c4ee; }

.empty {
  color: var(--text-muted);
  font-size: 0.88rem;
  padding: 14px 4px;
  font-style: italic;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}

.stat-box {
  background: #fff;
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand-accent);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  box-shadow: 0 1px 2px rgba(8, 44, 71, 0.04);
}

.stat-box .n { font-size: 1.7rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.stat-box .k { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }

.bars { display: grid; gap: 8px; }
.bar-row { display: grid; grid-template-columns: 130px 1fr 42px; align-items: center; gap: 10px; font-size: 0.82rem; }
.bar-track { background: var(--surface-muted); border-radius: 6px; height: 18px; overflow: hidden; }
.bar-fill { background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent)); height: 100%; }

/* AI chat panel */
.chat {
  display: flex;
  flex-direction: column;
  height: 320px;
}
.chat__log {
  flex: 1;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  background: var(--surface-muted);
  margin-bottom: 10px;
}
.chat__msg { margin-bottom: 10px; font-size: 0.88rem; line-height: 1.4; }
.chat__msg .who { font-weight: 700; font-size: 0.74rem; text-transform: uppercase; color: var(--text-muted); }
.chat__msg--ai .bubble { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; display: inline-block; }
.chat__form { display: flex; gap: 8px; }
.chat__form input { flex: 1; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); }

.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.form-grid .field { margin-bottom: 0; }
.form-grid select,
.form-grid input,
.form-grid textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  font-family: inherit;
  font-size: 0.9rem;
}

.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--brand-primary);
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  font-size: 0.88rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s;
  z-index: 50;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast--error { background: var(--danger); }

.phase-banner {
  background: #fff8e8;
  border: 1px solid #f0dca8;
  color: #8a6400;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 0.82rem;
  margin-bottom: 22px;
}

/* ---------- App shell (topbar + rail + content) ---------- */

.shell {
  height: 100vh;
  display: flex;
  align-items: stretch;
  background: var(--surface-muted);
}
.shell__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.rail {
  --rail-bg: #16212e;
  --rail-bg2: #111a24;
  --rail-text: #aebccb;
  /* WCAG 2.1 AA on both rail surfaces (#16212e and #111a24). The previous value
     (#6b7c8d) measured 3.79:1 and 4.09:1 against a 4.5:1 requirement, which failed
     on every screen for every user — group labels, the brand subtitle, and the
     signed-in role. Verified by the axe suite in tests-e2e/accessibility.spec.js. */
  --rail-muted: #8b9cad;
  width: 240px;
  flex-shrink: 0;
  background: var(--rail-bg);
  color: var(--rail-text);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.rail__brand {
  display: flex; align-items: center; gap: 11px;
  padding: 16px 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.rail__mark {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  display: grid; place-items: center; font-weight: 800; font-size: 0.82rem; letter-spacing: 0.5px;
  color: #fff; background: linear-gradient(135deg, var(--brand-accent), #134e5a);
}
.rail__brandtxt { display: flex; flex-direction: column; color: #fff; font-weight: 700; font-size: 0.95rem; line-height: 1.1; }
.rail__brandtxt small { font-weight: 600; font-size: 0.56rem; letter-spacing: 1px; color: var(--rail-muted); margin-top: 3px; }

.rail__nav { flex: 1; overflow-y: auto; padding: 14px 12px; }
.rail__section + .rail__section { margin-top: 18px; }
.rail__group-label {
  font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
  color: var(--rail-muted); padding: 0 10px 7px;
}
.rail__item {
  display: flex; align-items: center; gap: 10px; position: relative;
  padding: 8px 11px; margin-bottom: 1px; border-radius: 8px;
  color: var(--rail-text); text-decoration: none; font-size: 0.92rem; font-weight: 600; line-height: 1.25;
  cursor: pointer; border: none; background: none; width: 100%; text-align: left;
  transition: background 0.12s ease, color 0.12s ease;
}
.rail__ic { width: 18px; text-align: center; font-size: 0.92rem; opacity: 0.8; flex-shrink: 0; }
.rail__lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail__item:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.rail__item.is-active { background: var(--brand-accent); color: #fff; font-weight: 600; }
.rail__item.is-active .rail__ic { opacity: 1; }

.rail__divider { height: 1px; background: rgba(255, 255, 255, 0.07); margin: 16px 10px 12px; }
.rail__empty { color: var(--rail-muted); font-size: 0.82rem; font-style: italic; padding: 8px 12px; }

.rail__user {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-top: 1px solid rgba(255, 255, 255, 0.06); background: var(--rail-bg2);
}
.rail__avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-size: 0.7rem; font-weight: 700; color: #fff;
  background: rgba(255, 255, 255, 0.12);
}
.rail__usertxt { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.rail__usertxt strong { color: #fff; font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail__usertxt small { color: var(--rail-muted); font-size: 0.66rem; }

.content {
  flex: 1;
  min-width: 0;
  padding: 28px 32px;
  overflow-y: auto;
}

.content__crumb {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.placeholder-card {
  background: #fff;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 40px;
  text-align: center;
  color: var(--text-muted);
  max-width: 640px;
}

.placeholder-card h2 {
  color: var(--brand-primary);
  margin: 0 0 8px;
}

.placeholder-card .tag {
  display: inline-block;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 14px;
}

@media (max-width: 640px) {
  .shell { flex-direction: column; height: auto; }
  .rail { width: 100%; }
  .rail__nav { display: flex; flex-wrap: wrap; gap: 4px; }
  .rail__section, .rail__user { display: none; }
}

/* ---------- Personnel data-entry tabbed form ---------- */

.pf-period {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 0.86rem;
  color: var(--text);
  margin-bottom: 18px;
}

.pf-period__note {
  display: block;
  color: var(--text-muted);
  font-size: 0.78rem;
  margin-top: 2px;
}

.pf-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.pf-tab {
  border: none;
  background: none;
  padding: 11px 18px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pf-tab:hover { color: var(--text); }

.pf-tab.is-active {
  color: var(--brand-primary);
  border-bottom-color: var(--brand-accent);
}

.pf-tab.has-error { color: var(--danger); }

.pf-tab.is-locked { opacity: 0.4; cursor: not-allowed; }

.pf-step-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--border);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
}
.pf-tab.is-active .pf-step-no { background: var(--brand-accent); color: #fff; }
.pf-tab.is-complete .pf-step-no { background: var(--success); color: #fff; }
.pf-tab.has-error .pf-step-no { background: var(--danger); color: #fff; }

.pf-tab__err:empty { display: none; }
.pf-tab__err {
  background: var(--danger);
  color: #fff;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pf-panel { display: none; }
.pf-panel.is-active { display: block; }

.pf-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 40px;
  max-width: 900px;
}
.pf-cols--1 { grid-template-columns: 1fr; max-width: 560px; }

.pf-col { display: flex; flex-direction: column; gap: 16px; }
.pf-cols--1 { display: flex; flex-direction: column; gap: 16px; }

.pf-form .field { margin-bottom: 0; }

.pf-form .field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 5px;
  color: var(--text);
}

.pf-form .field input,
.pf-form .field select,
.pf-form .field textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  font-family: inherit;
  font-size: 0.9rem;
}

.pf-form .field input:disabled {
  background: var(--surface-muted);
  color: var(--text-muted);
  cursor: not-allowed;
}

.pf-form .field input.pf-readonly {
  background: var(--surface-muted);
  border-style: dashed;
  font-weight: 600;
  color: var(--brand-primary);
}

.pf-form .field input:focus,
.pf-form .field select:focus,
.pf-form .field textarea:focus {
  outline: none;
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 3px rgba(31, 122, 140, 0.16);
}

.pf-check label {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  font-weight: 500 !important;
  color: var(--text-muted) !important;
  cursor: pointer;
}
.pf-check input { width: auto !important; }

.field .req { color: var(--danger); }

.field__err {
  display: block;
  color: var(--danger);
  font-size: 0.76rem;
  margin-top: 4px;
  min-height: 0;
}
.field__err:empty { display: none; }

.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: var(--danger);
  background: #fdf3f2;
}

.pf-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  max-width: 900px;
}

.pf-summary { color: var(--success); font-size: 0.86rem; font-weight: 600; }

/* Review-before-submit (final step) */
.pf-review-wrap {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 2px solid var(--border);
  max-width: 760px;
}
.pf-review-title { margin: 0 0 4px; color: var(--brand-primary); font-size: 1.02rem; }
.pf-review-hint { margin: 0 0 16px; color: var(--text-muted); font-size: 0.84rem; }

.rev-sec { margin-bottom: 18px; }
.rev-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  color: var(--brand-primary);
  font-size: 0.9rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 5px;
  margin-bottom: 6px;
}
.rev-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 12px;
  padding: 4px 0;
  font-size: 0.86rem;
}
.rev-k { color: var(--text-muted); }
.rev-v { font-weight: 500; word-break: break-word; }

@media (max-width: 700px) {
  .pf-cols { grid-template-columns: 1fr; }
  .rev-row { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- Personnel search & retrieve ---------- */

.ps-form { display: flex; gap: 10px; max-width: 620px; margin-bottom: 8px; }
.ps-form input {
  flex: 1;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  background: #fff;
}
.ps-form input:focus { outline: none; border-color: var(--brand-accent); box-shadow: 0 0 0 3px rgba(31,122,140,0.16); }
.ps-note { color: var(--text-muted); font-size: 0.78rem; margin: 0 0 16px; }

.ps-detail-card {
  margin-top: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-muted);
  padding: 20px 22px;
}
.ps-detail-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ps-detail-head h2 { margin: 0; color: var(--brand-primary); font-size: 1.1rem; }

.ps-protected {
  background: #fff;
  border: 1px solid #f0dca8;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 16px;
}
.ps-protected h3 {
  margin: 0 0 8px;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #8a6400;
}
.ps-id-row { align-items: center; }
.ps-id-row .rev-v { display: flex; align-items: center; gap: 12px; }
.ps-mask { font-family: ui-monospace, Menlo, monospace; letter-spacing: 2px; }
.ps-revealed { color: var(--success); font-size: 0.74rem; font-weight: 600; }

.ps-fields {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}

/* ---------- Generated reports (breakout + casualty) ---------- */
.gen__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.gen__title { margin: 0; color: var(--brand-primary); font-size: 1.05rem; }
.gen__computed {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--brand-accent); border: 1px solid var(--border);
  border-radius: 999px; padding: 2px 10px; background: var(--surface-muted);
}
.gen__controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-left: auto; }
.gen__controls label { display: flex; flex-direction: column; gap: 3px; font-size: 0.72rem; color: var(--text-muted); }
.gen__controls select, .gen__controls input { padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; }
.gen__hint, .gen__note { font-size: 0.74rem; color: var(--text-muted); margin: 8px 0; }
.gen__meta { font-size: 0.78rem; color: var(--text-muted); margin: 6px 0 10px; font-weight: 600; }
.gen__revised {
  background: #fff7e6; border: 1px solid #f0dca8; color: #8a6400;
  border-radius: var(--radius-sm); padding: 8px 12px; font-size: 0.8rem; margin: 10px 0;
}
.gen__warn { background: #fdeceb; border: 1px solid #f3c2bf; color: var(--danger); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 0.8rem; margin: 8px 0; }
.gen__scroll { overflow-x: auto; }

table.grid { border-collapse: collapse; width: 100%; font-size: 0.8rem; }
table.grid th, table.grid td { border: 1px solid var(--border); padding: 5px 8px; text-align: right; white-space: nowrap; }
table.grid th { background: var(--brand-primary); color: #fff; font-weight: 600; position: sticky; top: 0; }
table.grid th.l, table.grid td.l { text-align: left; }
table.grid tr:nth-child(even) td { background: var(--surface-muted); }
table.grid .z { color: #b6c2cc; }
table.grid .d-pos { color: var(--success); font-weight: 600; }
table.grid .d-neg { color: var(--danger); font-weight: 600; }
table.grid tr.sub td { background: #eef3f7; font-weight: 600; }
table.grid tr.grand td { background: #dde7ef; font-weight: 700; }
table.grid tr.line td { background: var(--brand-primary); color: #fff; font-weight: 700; }
table.grid tr.line td.l { color: #fff; }
table.grid tr.overlap td { font-style: italic; color: var(--text-muted); }
.tag--sm { font-size: 0.62rem; padding: 1px 6px; }

/* ---------- Dependent form ---------- */
.dep { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 900px) { .dep { grid-template-columns: 1fr; } }
.dep__main h2 { margin: 0 0 4px; color: var(--brand-primary); }
.dep__period { font-size: 0.82rem; color: var(--text-muted); margin: 0 0 8px; }
.dep__privacy { font-size: 0.74rem; color: #8a6400; background: #fff7e6; border: 1px solid #f0dca8; border-radius: var(--radius-sm); padding: 8px 12px; margin: 0 0 14px; }
.dep__hint { font-size: 0.72rem; color: var(--text-muted); grid-column: 1 / -1; margin: 2px 0 0; }
.dep .form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dep .form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 0.74rem; color: var(--text-muted); }
.dep .form-grid .full { grid-column: 1 / -1; }
.dep .form-grid input, .dep .form-grid select { padding: 7px 9px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; }
.dep .casualty-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; background: var(--surface-muted); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; }
.dep .form-actions { display: flex; gap: 10px; }
.dep .field-error { border-color: var(--danger); background: #fdeceb; }
.dep__list h3 { font-size: 0.82rem; color: var(--brand-primary); margin: 0 0 10px; }
.grid--list th { position: static; }

/* ---------- Daily roster ---------- */
.ro-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.ro-title { margin: 0; color: var(--brand-primary); font-size: 1.05rem; }
.ro-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-left: auto; }
.ro-controls label, .ro-form label, .h-lab { display: flex; flex-direction: column; gap: 3px; font-size: 0.72rem; color: var(--text-muted); }
.ro-controls select, .ro-controls input, .ro-form select, .ro-form input, .ro-search input, .h-row select, .h-row input {
  padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; }
.ro-explain, .ro-hint { font-size: 0.76rem; color: var(--text-muted); margin: 8px 0; }
.ro-actions { display: flex; gap: 10px; margin: 12px 0; }
.ro-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0; }
.ro-chip { font-size: 0.74rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--surface-muted); border: 1px solid var(--border); color: var(--text); }
.ro-chip--ok { background: #e8f5ee; border-color: #b7e0c6; color: var(--success); }
.ro-chip--warn { background: #fff7e6; border-color: #f0dca8; color: #8a6400; }
.ro-derived { font-size: 0.7rem; color: var(--text-muted); font-style: italic; margin-left: 4px; }
.ro-badge { font-size: 0.7rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.ro-badge--ok { background: #e8f5ee; color: var(--success); }
.ro-badge--warn { background: #fff7e6; color: #8a6400; cursor: help; }
/* Quick Roster Entry — full-field inline grid (spreadsheet-style bulk entry) */
.ro-gridbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 10px 0; }
.ro-gridbar .ro-summary { margin: 0; }
table.grid--entry { font-size: 0.78rem; }
table.grid--entry th, table.grid--entry td { text-align: left; padding: 3px 5px; }
table.grid--entry th { position: sticky; top: 0; }
table.grid--entry td.c { text-align: center; }
table.grid--entry input, table.grid--entry select {
  font: inherit; padding: 3px 5px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--surface, #fff); color: var(--text); min-width: 96px; max-width: 190px;
}
table.grid--entry input[type="date"] { min-width: 132px; }
table.grid--entry input[type="number"] { min-width: 70px; }
table.grid--entry input[type="checkbox"] { min-width: 0; }
.qr-sticky { position: sticky; left: 0; z-index: 3; }
table.grid--entry thead th.qr-sticky { z-index: 4; }
table.grid--entry tbody td.qr-sticky,
table.grid--entry tbody tr:nth-child(even) td.qr-sticky { background: var(--surface-muted); font-weight: 600; }
table.grid--entry tbody tr.qr-dirty td,
table.grid--entry tr.qr-dirty td { background: #fffbe6 !important; }
table.grid--entry tr.qr-dirty td.qr-sticky { box-shadow: inset 3px 0 0 var(--brand-primary); }
.qr-id { white-space: nowrap; }
.qr-reveal { background: none; border: none; color: var(--brand-primary); cursor: pointer; text-decoration: underline; font-size: 0.7rem; margin-left: 4px; padding: 0; }
.qr-shown { color: var(--text-muted); font-size: 0.7rem; margin-left: 4px; }
/* Per-row save status — an inline badge on the sticky Name cell (always visible). */
.qr-rowstatus:empty { display: none; }
.qr-rowstatus { margin-left: 8px; font-size: 0.72rem; font-weight: 600; white-space: nowrap; }
.qr-rowstatus--ok { color: var(--success); }
.qr-rowstatus--err { color: var(--danger); cursor: help; }
/* Read-only identity columns: visible but clearly non-editable (static text). */
table.grid--entry td.qr-ro { color: var(--text-muted); background: var(--surface-muted); white-space: nowrap; }
table.grid--entry th.qr-rohead { font-weight: 600; opacity: 0.9; }
/* Divider between the read-only identity block and the editable operational block. */
table.grid--entry td.qr-ro:last-of-type, table.grid--entry th.qr-rohead:last-of-type { border-right: 2px solid var(--brand-primary); }
/* "Show identity columns" toggle hides the read-only block to consolidate the grid. */
.qr-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text); white-space: nowrap; }
table.grid--entry.qr-hide-ro td.qr-ro,
table.grid--entry.qr-hide-ro th.qr-rohead { display: none; }
/* Ranked rate list (installation footprint / COCOM strength-vs-casualty) */
.rrl { display: flex; flex-direction: column; gap: 2px; }
.rrl__head, .rrl__row { display: grid; grid-template-columns: minmax(110px, 1.6fr) 1.4fr 1.3fr 0.7fr; align-items: center; gap: 10px; }
.rrl__head { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); padding: 0 0 6px; border-bottom: 1px solid var(--border, #e3e8ee); }
.rrl__head span:not(:first-child), .rrl__row > span:not(.rrl__name):not(.rrl__bar) { text-align: right; }
.rrl__row { padding: 6px 0; border-bottom: 1px solid #f1f4f7; font-size: 0.82rem; }
.rrl__name { font-weight: 600; color: var(--brand-primary, #0b3c5d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rrl__bar { position: relative; display: flex; align-items: center; gap: 6px; }
.rrl__bar .rrl__fill { height: 8px; border-radius: 999px; background: #c7d6e5; min-width: 2px; }
.rrl__bar .rrl__n { font-variant-numeric: tabular-nums; color: var(--text-muted); }
.rrl__cas { font-variant-numeric: tabular-nums; }
.rrl__cas em { color: var(--danger); font-style: normal; font-size: 0.72rem; }
.rrl__rate { font-weight: 700; font-variant-numeric: tabular-nums; padding: 2px 8px; border-radius: 999px; }
.rrl__rate--ok { background: #e8f5ee; color: var(--success); }
.rrl__rate--warn { background: #fff7e6; color: #8a6400; }
.rrl__rate--crit { background: #fdeceb; color: var(--danger); }
/* Duty availability posture bar */
.avail__bar { display: flex; height: 22px; border-radius: 6px; overflow: hidden; background: #eef2f6; }
.avail__seg--ok { background: #10b981; }
.avail__seg--warn { background: #f59e0b; }
.avail__seg--crit { background: #ef4444; }
.avail__legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; font-size: 0.82rem; }
.avail__dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }
.avail__dot--ok { background: #10b981; } .avail__dot--warn { background: #f59e0b; } .avail__dot--crit { background: #ef4444; }
.avail__rate { margin: 12px 0 0; font-size: 0.85rem; color: var(--text-muted); }
/* Gains / losses movement trend */
.gl-trend { display: flex; align-items: flex-end; gap: 10px; padding: 10px 4px; min-height: 96px; }
.gl-col { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; }
.gl-bar { width: 14px; border-radius: 3px 3px 0 0; }
.gl-bar--gain { background: #10b981; }
.gl-bar--loss { background: #ef4444; }
.gl-col__lbl { font-size: 0.66rem; color: var(--text-muted); margin-top: 4px; }
/* Executive Commander's SITREP */
.sitrep { background: #f7f9fb; border: 1px solid var(--border, #e3e8ee); border-radius: 10px; padding: 16px; margin-bottom: 8px; }
.sitrep__narr { margin: 0 0 12px; font-size: 0.92rem; line-height: 1.5; color: var(--text, #1f2937); }
.sitrep__digest { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.sitrep__chip { font-size: 0.78rem; padding: 4px 10px; border-radius: 999px; background: #eef2f6; color: #334155; }
.sitrep__chip--warn { background: #fff7e6; color: #8a6400; }
.sitrep__chip--crit { background: #fdeceb; color: var(--danger); }
.sitrep__insights { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
/* Batch review toolbar */
.q-batch { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.q-batch__n { font-size: 0.8rem; color: var(--text-muted); margin-right: auto; }
.qm-head-actions { display: flex; gap: 8px; align-items: center; }
/* Supervisor correction panel (record drawer) */
.ps-sup { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border, #e3e8ee); }
.ps-sup h3 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); margin: 0 0 6px; }
.ps-sup-note { font-size: 0.8rem; color: var(--text-muted); margin: 0 0 10px; }
.ps-sup-btns { display: flex; gap: 8px; }
.ps-ov { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; background: #f7f9fb; padding: 12px; border-radius: 8px; }
.ps-ov-row { display: flex; flex-direction: column; gap: 4px; font-size: 0.78rem; color: var(--text-muted); }
.ps-ov-row--full { grid-column: 1 / -1; }
.ps-ov-row input, .ps-ov-row select, .ps-ov-row textarea { font: inherit; padding: 6px 8px; border: 1px solid var(--border, #cdd6e0); border-radius: 6px; }
.ps-ov-btns { grid-column: 1 / -1; display: flex; gap: 8px; }
.wl-count { font-size: 0.85rem; color: var(--text-muted); margin: 4px 0 14px; }
.wl-tag { display: inline-block; font-size: 0.7rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #eef2f6; color: #334155; }
.wl-tag--warn { background: #fff7e6; color: #8a6400; }
.wl-tag--crit { background: #fdeceb; color: var(--danger); }
.ro-row-actions { white-space: nowrap; display: flex; gap: 6px; }
.btn-sm--danger { background: #fdeceb; border-color: #f3c2bf; color: var(--danger); }
.ro-card { border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; box-shadow: 0 1px 2px rgba(8, 44, 71, 0.04); padding: 14px 16px; margin: 12px 0; }
.ro-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ro-card__head h3 { margin: 0; color: var(--brand-primary); font-size: 0.95rem; }
.ro-search { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.ro-search input { min-width: 240px; }
.ro-missing { font-size: 0.76rem; color: #8a6400; background: #fff7e6; border: 1px solid #f0dca8; border-radius: var(--radius-sm); padding: 8px 10px; }
.ro-form { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin: 10px 0; }
.ro-casfields { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px; }
.ro-form-actions { display: flex; gap: 10px; margin-top: 8px; }
.h-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-bottom: 8px; }
.h-count { width: 90px; }
@media (max-width: 820px) { .ro-form, .ro-casfields { grid-template-columns: 1fr 1fr; } }

/* Roster full-edit panel */
.ro-sec { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 14px 14px; margin: 12px 0; background: #fff; }
.ro-sec legend { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--brand-accent); font-weight: 600; padding: 0 6px; }
.ro-full { grid-column: 1 / -1; }
.ro-check { flex-direction: row !important; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--text); }
.ro-form textarea { padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; font: inherit; resize: vertical; }
.ro-form input:disabled { background: var(--surface-muted); color: var(--text-muted); }

/* Personnel form — row layout, masked identifiers, derived fields */
.pf-rows { display: flex; flex-direction: column; gap: 14px; }
.pf-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.pf-row .field { flex: 1 1 0; min-width: 150px; }
.pf-row .pf-check { flex-basis: 100%; }
.pf-mask { display: flex; gap: 6px; align-items: center; }
.pf-mask input { flex: 1; min-width: 0; }
.pf-mask-toggle { font-size: 0.68rem; padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-muted); color: var(--text-muted); cursor: pointer; }
.pf-mask-toggle:hover { color: var(--brand-primary); }
select.pf-derived, input.pf-derived { background: var(--surface-muted); color: var(--text-muted); cursor: not-allowed; }

/* Casualty master report — per-branch sections */
.gen-master { flex-direction: row !important; align-items: center; gap: 6px; font-size: 0.74rem; color: var(--text); white-space: nowrap; }
.cm-section { margin: 14px 0; }
.cm-branch { margin: 0 0 6px; font-size: 0.95rem; font-weight: 700; color: #fff; background: var(--brand-primary); padding: 6px 12px; border-radius: var(--radius-sm); }
.cm-section--agg .cm-branch { background: var(--brand-accent); }

/* Upload via Excel */
.xu__title { margin: 0 0 6px; color: var(--brand-primary); font-size: 1.05rem; }
.xu__steps { margin: 0 0 14px; padding-left: 20px; font-size: 0.82rem; color: var(--text); }
.xu__steps li { margin: 3px 0; }
.xu__req { color: var(--danger); font-weight: 700; }
.xu__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.xu__file { cursor: pointer; }
.xu__filename { font-size: 0.78rem; color: var(--text-muted); }
.xu__summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0; }
.xu__done { background: #e8f5ee; border: 1px solid #b7e0c6; color: var(--success); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 0.85rem; }
#xu-import { margin: 6px 0 12px; }

/* My Activity */
.act__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.act__title { margin: 0; color: var(--brand-primary); font-size: 1.05rem; }
.act__range { margin-left: auto; font-size: 0.74rem; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.act__range select { padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; }
.act__hint { font-size: 0.78rem; color: var(--text-muted); margin: 8px 0 12px; }
.act__summary { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.act__day { margin: 14px 0; }
.act__dayhead { font-size: 0.85rem; color: #fff; background: var(--brand-primary); padding: 5px 12px; border-radius: var(--radius-sm); margin: 0 0 6px; }
.act__table th { position: static; }
.act__cat { font-size: 0.7rem; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--surface-muted); border: 1px solid var(--border); color: var(--brand-accent); }

/* Report review modal (queues) */
.btn-sm--review { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); }
.btn-sm--return { background: #fff7e6; border-color: #f0dca8; color: #8a6400; }
.btn-sm--decline { background: #fdeceb; border-color: #f3c2bf; color: var(--danger); }
.qm-overlay { position: fixed; inset: 0; background: rgba(8,44,71,0.45); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; z-index: 1000; overflow-y: auto; }
.qm-modal { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); width: min(720px, 100%); }
.qm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.qm-head h2 { margin: 0 0 6px; color: var(--brand-primary); font-size: 1.1rem; }
.qm-body { padding: 16px 20px; }
.qm-h3 { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--brand-accent); margin: 16px 0 8px; }
.qm-h3:first-child { margin-top: 0; }
.qm-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px 18px; }
.qm-row { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dotted var(--border); padding: 4px 0; font-size: 0.84rem; }
.qm-k { color: var(--text-muted); }
.qm-v { font-weight: 600; text-align: right; }
.qm-events { list-style: none; margin: 0; padding: 0; }
.qm-events li { padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 0.82rem; }
.qm-ev-act { font-weight: 700; color: var(--brand-primary); margin-right: 8px; }
.qm-ev-who { color: var(--text); }
.qm-ev-when { color: var(--text-muted); float: right; font-size: 0.76rem; }
.qm-ev-note { color: var(--text-muted); font-style: italic; margin-top: 2px; }
.qm-note-label { display: block; font-size: 0.74rem; color: var(--text-muted); }
.qm-note-label textarea { width: 100%; margin-top: 4px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; resize: vertical; }
.qm-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
@media (max-width: 620px) { .qm-grid { grid-template-columns: 1fr; } }

/* Review modal — drill-down into granular records */
.qm-drill-note { font-size: 0.78rem; color: var(--text-muted); margin: 4px 0 10px; }
.qm-period { margin-bottom: 12px; }
.qm-period-h { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; color: #fff; background: var(--brand-accent); padding: 4px 10px; border-radius: var(--radius-sm); margin-bottom: 6px; }
.qm-rec { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 6px; background: var(--surface-muted); }
.qm-rec > summary { cursor: pointer; padding: 7px 12px; font-weight: 600; font-size: 0.84rem; list-style: none; }
.qm-rec > summary::-webkit-details-marker { display: none; }
.qm-rec > summary::before { content: "▸ "; color: var(--brand-accent); }
.qm-rec[open] > summary::before { content: "▾ "; }
.qm-rec[open] > summary { border-bottom: 1px solid var(--border); }
.qm-rec--dep > summary::before { color: #8a6400; }
.qm-rec-sum { font-weight: 400; color: var(--text-muted); font-size: 0.78rem; }
.qm-rec .qm-grid { padding: 10px 12px; background: #fff; }

/* Record-level review in the drill-down */
.qm-rev { font-size: 0.66rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; margin-left: 4px; }
.qm-rev--pending { background: var(--surface-muted); color: var(--text-muted); border: 1px solid var(--border); }
.qm-rev--approved { background: #e8f5ee; color: var(--success); }
.qm-rev--declined { background: #fdeceb; color: var(--danger); }
.qm-rec-actions { display: flex; gap: 8px; padding: 0 12px 10px; background: #fff; }
.qm-broad { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--text-muted); background: var(--surface-muted); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; margin-bottom: 10px; }

/* Decline/return correction banner in the review modal */
.qm-correct { background: #fff7e6; border: 1px solid #f0dca8; color: #8a6400; border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 12px; font-size: 0.85rem; }

/* Author report-edit modal */
.ed-form { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px 16px; margin-bottom: 6px; }
.ed-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.74rem; color: var(--text-muted); }
.ed-form input { padding: 7px 9px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; font: inherit; }
.ed-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
@media (max-width: 620px) { .ed-form { grid-template-columns: 1fr; } }

/* Users and Access (admin) */
.ua-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ua-uname { font-size: 0.74rem; color: var(--text-muted); font-family: ui-monospace, Menlo, monospace; }
.ua-cap { display: inline-block; font-size: 0.68rem; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: #e8f0f6; color: var(--brand-primary); border: 1px solid #cfe0ec; }
.ua-caps { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 6px; }
.ua-check { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--text); }
.ua-check--cap { flex-direction: column; align-items: flex-start; gap: 3px; flex: 1 1 260px; max-width: 320px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 11px; }
.ua-check__row { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.ua-cap-desc { font-size: 0.74rem; color: var(--text-muted); line-height: 1.35; padding-left: 22px; }

/* Users & Access multi-select + hints */
.ua-multi { width: 100%; padding: 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; font: inherit; margin-bottom: 4px; }
.ua-hint { font-size: 0.7rem; color: var(--text-muted); font-weight: 400; }

/* Branding & Theme admin */
.br-logo-row { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.br-logo-label { font-size: 0.78rem; color: var(--text-muted); }
.br-logo-preview { height: 40px; max-width: 220px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 8px; object-fit: contain; }
.br-themes td { vertical-align: middle; }
.br-themes input[type="color"] { width: 48px; height: 28px; border: 1px solid var(--border); border-radius: 6px; background: #fff; cursor: pointer; padding: 2px; }
.br-swatch { display: inline-block; width: 80px; height: 22px; border-radius: 6px; border: 1px solid var(--border); }

/* ── Analytics workspace (Power BI embed surface) ─────────────────────────── */
.aw-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.aw-scope .tag { white-space: nowrap; }
.aw-headright { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.aw-export { display: flex; gap: 6px; }
.aw-export .ov__btn { cursor: pointer; }

/* Scope explainer + AOR drill chips */
.scopebar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 6px 0 12px; padding: 9px 13px; background: rgba(31,122,140,0.06); border: 1px solid rgba(31,122,140,0.2); border-radius: var(--radius-sm); }
.scopebar__why { font-size: 0.8rem; color: var(--text); }
.scopebar__why i { color: var(--brand-accent); font-style: normal; font-weight: 700; margin-right: 4px; }
/* AOR multi-select dropdown */
.aordrop { position: relative; }
.aordrop__btn { display: inline-flex; align-items: center; gap: 6px; font-size: 0.76rem; font-weight: 600; padding: 6px 12px; border-radius: 8px; cursor: pointer; background: #fff; border: 1px solid var(--border); color: var(--brand-primary); }
.aordrop__btn:hover, .aordrop.is-open .aordrop__btn { border-color: var(--brand-accent); }
.aordrop__car { color: var(--text-muted); font-size: 0.7rem; transition: transform 0.12s; }
.aordrop.is-open .aordrop__car { transform: rotate(180deg); }
.aordrop__panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 200px; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 28px rgba(8,44,71,0.16); padding: 8px; }
.aordrop__panel[hidden] { display: none; }
.aordrop__opts { display: grid; gap: 2px; max-height: 240px; overflow: auto; }
.aordrop__opt { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 7px; cursor: pointer; font-size: 0.82rem; }
.aordrop__opt:hover { background: var(--surface-muted); }
.aordrop__opt input { width: 15px; height: 15px; accent-color: var(--brand-accent); cursor: pointer; }
.aordrop__actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }

.aw-tabs {
  display: flex; flex-wrap: wrap; gap: 4px;
  border-bottom: 1px solid var(--border);
  margin: 14px 0 18px;
}
.aw-tab {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  padding: 9px 14px; font: inherit; font-size: 0.86rem; color: var(--text-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.aw-tab:hover { color: var(--text); background: var(--surface-muted); }
.aw-tab.is-active { color: var(--brand-primary); border-bottom-color: var(--brand-accent); font-weight: 600; }

.pill {
  font-size: 0.72rem; padding: 3px 10px; border-radius: 999px;
  background: var(--surface-muted); border: 1px solid var(--border); color: var(--text-muted);
}
.pill--ok { color: var(--success); border-color: var(--success); }
.pill--wait { color: var(--brand-accent); border-color: var(--brand-accent); }

/* ---- Live geographic laydown ------------------------------------------- */
.geo-live { margin: 4px 0 28px; }
.geo-livehead { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.geo-livehead .aw-sub { margin: 0; display: flex; align-items: center; gap: 8px; }
.aw-pbihead { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--border); }
.aw-pbihead h2 { margin: 0 0 2px; }

.geo-kpis { margin-bottom: 18px; }
.stat-box--warn { border-color: #f0b27a; background: #fff8f0; }
.stat-box--warn .n { color: #c2710c; }
.stat-box--crit { border-color: #e7a3a0; background: #fdf3f2; }
.stat-box--crit .n { color: var(--danger); }

.geo-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 16px; margin-bottom: 16px; }
.geo-grid--three { grid-template-columns: repeat(3, 1fr); }
.geo-sidecards { display: grid; grid-template-rows: auto auto; gap: 16px; }
@media (max-width: 1080px) {
  .geo-grid, .geo-grid--three { grid-template-columns: 1fr; }
}

.geo-cardhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.geo-cardhead h3 { margin: 0; color: var(--brand-primary); font-size: 1rem; }
.geo-mapcard { padding: 16px; }

/* Map — dark "command center" theme, interactive */
.geo-mapwrap { position: relative; }
.geo-map { width: 100%; height: auto; display: block; border-radius: var(--radius-sm); border: 1px solid #0c1a27; background: #0b1722; cursor: grab; touch-action: none; }
.geo-map:active { cursor: grabbing; }
.geo-ocean { fill: #0b1a28; }
.geo-land path { fill: #1b3146; stroke: #2b4a66; stroke-width: 0.4; }
.geo-grat line { stroke: #214056; stroke-width: 0.4; opacity: 0.55; }
.geo-equator { stroke: #2f5777; stroke-width: 0.8; stroke-dasharray: 4 4; opacity: 0.7; }
.geo-zonelbl { font: 700 12px var(--font); text-anchor: middle; paint-order: stroke; stroke: #0b1722; stroke-width: 3px; pointer-events: none; }
.geo-badge { font: 700 11px var(--font); }
.geo-zone { cursor: pointer; }
.geo-zone rect { transition: fill-opacity 0.12s; }
.geo-zone:hover rect { fill-opacity: 0.55; }
.geo-bubble { cursor: pointer; }
.geo-bubble circle { stroke: #eaf2fb; stroke-width: 1.4; opacity: 0.9; transition: opacity 0.12s, stroke-width 0.12s; filter: drop-shadow(0 0 3px rgba(0,0,0,0.5)); }
.geo-bubble:hover circle { opacity: 1; stroke-width: 2.4; }
.geo-bubble--ok circle { fill: #34d399; }
.geo-bubble--warn circle { fill: #fbbf24; }
.geo-bubble--crit circle { fill: #f87171; }
.geo-bubble.is-est circle { stroke-dasharray: 3 2; opacity: 0.62; }

/* Zoom controls */
.geo-zoomctl { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 4px; }
.geo-zoomctl button {
  width: 30px; height: 30px; border-radius: 7px; border: 1px solid #2b4a66; cursor: pointer;
  background: rgba(15, 27, 39, 0.86); color: #cfe0f0; font-size: 1.05rem; line-height: 1;
  display: grid; place-items: center; backdrop-filter: blur(2px); transition: background 0.12s;
}
.geo-zoomctl button:hover { background: rgba(31, 122, 140, 0.9); color: #fff; }

/* Hover tooltip */
.geo-tip {
  position: absolute; z-index: 5; pointer-events: none; min-width: 150px; max-width: 240px;
  background: rgba(10, 19, 28, 0.95); color: #e8eef5; border: 1px solid #2b4a66; border-radius: 9px;
  padding: 8px 10px; font-size: 0.78rem; box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
.geo-tip[hidden] { display: none; }
.geo-tip strong { display: block; font-size: 0.84rem; }
.geo-tip__sub { color: #93a7bb; font-size: 0.7rem; }
.geo-tip__line { margin-top: 4px; }
.geo-tip b.warn { color: #fbbf24; } .geo-tip b.crit { color: #f87171; }
.geo-tip__est { display: block; margin-top: 4px; color: #93a7bb; font-size: 0.68rem; }
.geo-tip__hint { margin-top: 5px; padding-top: 5px; border-top: 1px solid #20384e; color: #7d93a8; font-size: 0.66rem; }

/* Active location-filter chip on the map */
.geo-chip {
  position: absolute; top: 10px; left: 10px; display: flex; align-items: center; gap: 8px;
  background: rgba(11, 23, 34, 0.92); border: 1px solid var(--brand-accent); border-radius: 9px;
  padding: 5px 6px 5px 10px; box-shadow: 0 6px 18px rgba(0,0,0,0.4); max-width: 70%;
}
.geo-chip__pin { font-size: 0.8rem; }
.geo-chip__txt { color: #e8eef5; font-size: 0.78rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.geo-chip__view { background: var(--brand-accent); color: #fff; border: none; border-radius: 6px; padding: 4px 9px; font-size: 0.72rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.geo-chip__view:hover { background: var(--brand-accent-hover); }
.geo-chip__x { background: rgba(255,255,255,0.1); color: #cfe0f0; border: none; border-radius: 6px; width: 24px; height: 24px; cursor: pointer; font-size: 0.8rem; }
.geo-chip__x:hover { background: rgba(248,113,113,0.85); color: #fff; }

/* Clickable base-laydown rows */
.geo-basetable tr.is-click { cursor: pointer; }
.geo-basetable tr.is-click:hover { background: rgba(31,122,140,0.08); }
.row-go { color: var(--brand-accent); font-weight: 700; opacity: 0; transition: opacity 0.1s; }
.geo-basetable tr.is-click:hover .row-go { opacity: 1; }

/* Records drill-down modal */
.recmodal { position: fixed; inset: 0; z-index: 60; background: rgba(8,20,32,0.55); display: grid; place-items: center; padding: 24px; backdrop-filter: blur(2px); }
.recmodal__card { background: #fff; border-radius: var(--radius); width: min(1040px, 100%); max-height: 86vh; display: flex; flex-direction: column; box-shadow: var(--shadow); overflow: hidden; }
.recmodal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.recmodal__head h2 { margin: 0; color: var(--brand-primary); font-size: 1.1rem; }
.recmodal__sub { margin: 3px 0 0; color: var(--text-muted); font-size: 0.8rem; }
.recmodal__x { background: var(--surface-muted); border: 1px solid var(--border); border-radius: 7px; width: 32px; height: 32px; cursor: pointer; font-size: 0.9rem; color: var(--text-muted); flex-shrink: 0; }
.recmodal__x:hover { background: var(--border); color: var(--text); }
.recmodal__body { overflow: auto; padding: 8px 20px; flex: 1; }
.recmodal__table { width: 100%; font-size: 0.82rem; }
.recmodal__table th { position: sticky; top: 0; background: #fff; z-index: 1; }
.recmodal__foot { padding: 10px 20px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.recmodal__foot .ov__btn { cursor: pointer; }
.recmodal__note { font-size: 0.72rem; color: var(--text-muted); }
.rec-cExp { width: 22px; text-align: center; }
.rec-row { cursor: pointer; }
.rec-row:hover { background: var(--surface-muted); }
.rec-row.is-open { background: rgba(31,122,140,0.07); }
.rec-caret { color: var(--brand-accent); font-size: 0.7rem; display: inline-block; transition: transform 0.12s; }
.rec-row.is-open .rec-caret { transform: rotate(90deg); }
.rec-detail > td { background: var(--surface-muted); padding: 0 !important; }
.rec-detailwrap { padding: 12px 16px; }
.rec-detailhead { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--brand-primary); margin-bottom: 8px; }
.rec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 18px; }
.rec-dl { display: flex; flex-direction: column; }
.rec-dl dt { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); }
.rec-dl dd { margin: 1px 0 0; font-size: 0.82rem; color: var(--text); }
.rec-protect { margin-top: 10px; font-size: 0.7rem; color: var(--text-muted); }
.rec-secs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 12px; }
.rec-sec { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; min-width: 0; overflow: hidden; }
/* Tabular sections (timeline, dependents, audit) get the full row so they don't overflow. */
.rec-sec:has(.rec-mini), .rec-sec:has(.rec-audit) { grid-column: 1 / -1; }
.rec-sec h4 { margin: 0 0 8px; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.4px; color: var(--brand-primary); }
.rec-kv { display: flex; justify-content: space-between; gap: 10px; font-size: 0.8rem; padding: 2px 0; }
.rec-kv span { color: var(--text-muted); }
.rec-mini { width: 100%; border-collapse: collapse; font-size: 0.76rem; table-layout: fixed; }
.rec-mini th { text-align: left; color: var(--text-muted); font-weight: 600; font-size: 0.64rem; text-transform: uppercase; padding: 3px 6px; border-bottom: 1px solid var(--border); }
.rec-mini td { padding: 4px 6px; border-bottom: 1px solid var(--surface-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-audit { display: grid; gap: 8px; }
.rec-auditrow { display: grid; gap: 2px; padding: 7px 9px; background: var(--surface-muted); border-radius: 7px; min-width: 0; }
.rec-auditmeta { display: flex; align-items: center; gap: 8px; }
.rec-auditmeta .feed__when { margin-left: auto; color: var(--text-muted); font-size: 0.72rem; white-space: nowrap; }
.rec-auditactor { font-weight: 600; font-size: 0.78rem; }
.rec-auditsum { font-size: 0.78rem; color: var(--text); font-family: ui-monospace, "SF Mono", Menlo, monospace; word-break: break-word; line-height: 1.4; }
/* expandable dependent rows */
.dep-row { cursor: pointer; }
.dep-row:hover { background: rgba(31,122,140,0.06); }
.dep-row.is-open { background: rgba(31,122,140,0.08); }
.dep-row .rec-caret { color: var(--brand-accent); font-size: 0.7rem; display: inline-block; transition: transform 0.12s; }
.dep-row.is-open .rec-caret { transform: rotate(90deg); }
.dep-detail > td { background: #fff; padding: 0 !important; white-space: normal; overflow: visible; text-overflow: clip; }
.dep-detail .rec-detailwrap { padding: 10px 12px; }

/* Inline edit / delete for owned records */
.rec-actions { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; }
.rec-actions__lbl { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--success); margin-right: auto; }
.rec-editform { margin: 0 0 12px; padding: 12px; background: var(--surface-muted); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.rec-editgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 12px; }
.rec-editfield { display: flex; flex-direction: column; gap: 2px; }
.rec-editfield span { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.3px; color: var(--text-muted); }
.rec-editfield input, .rec-editfield select { padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 0.82rem; font-family: var(--font); background: #fff; color: var(--text); width: 100%; }
.rec-editfield input:focus, .rec-editfield select:focus { outline: none; border-color: var(--brand-accent); }
.rec-editactions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
tr.is-deleted { opacity: 0.5; text-decoration: line-through; }

/* Report builder */
.rb-sec { margin-bottom: 16px; }
.rb-lbl { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 8px; }
.rb-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.rb-preset { font-size: 0.78rem; font-weight: 600; padding: 6px 13px; border-radius: 20px; cursor: pointer; background: #fff; border: 1px solid var(--border); color: var(--text); }
.rb-preset:hover { border-color: var(--brand-accent); }
.rb-preset.is-on { background: var(--brand-accent); border-color: var(--brand-accent); color: #fff; }
.rb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px 12px; }
.rb-opt { display: flex; align-items: center; gap: 8px; font-size: 0.84rem; cursor: pointer; }
.rb-opt input { width: 15px; height: 15px; accent-color: var(--brand-accent); }
.rb-fmt { display: flex; gap: 18px; }
.rb-radio { display: flex; align-items: center; gap: 6px; font-size: 0.84rem; cursor: pointer; }
.rb-radio input { accent-color: var(--brand-accent); }

/* Vertical bar + bubble/scatter charts */
.vbarchart, .bubblechart { width: 100%; height: auto; display: block; }
.axisline { stroke: var(--border); stroke-width: 1; }
.gridln { stroke: var(--surface-muted); stroke-width: 1; }
.vbar__val { font: 700 10px var(--font); fill: var(--text); text-anchor: middle; }
.vbar__lbl { font: 500 9px var(--font); fill: var(--text-muted); text-anchor: middle; }
.vbar rect { transition: opacity 0.12s; } .vbar:hover rect { opacity: 0.82; }
.axis__tick { font: 500 8px var(--font); fill: var(--text-muted); text-anchor: middle; }
.axis__tick--y { text-anchor: end; }
.axis__lbl { font: 600 9px var(--font); fill: var(--text-muted); text-anchor: middle; text-transform: uppercase; letter-spacing: 0.4px; }
.bub circle { stroke: #fff; stroke-width: 1.4; opacity: 0.78; transition: opacity 0.12s; cursor: default; }
.bub:hover circle { opacity: 1; }
.bub--ok circle { fill: #34d399; } .bub--warn circle { fill: #fbbf24; } .bub--crit circle { fill: #f87171; }
.bub__lbl { font: 600 10px var(--font); fill: var(--text); text-anchor: middle; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.plotbg { fill: #fafcfd; }

/* ---- Drill-through trend points -------------------------------------- */
.trend__pt { cursor: pointer; }
.trend__ptdot { fill: var(--brand-accent); transition: r 0.1s; }
/* Partial/exempt days: hollow markers so a reporting gap reads differently from
   a genuine strength change on the line. */
.trend__ptdot--partial { fill: #fff; stroke: #d98a00; stroke-width: 2; }
.trend__ptdot--exempt { fill: #fff; stroke: #9aa7b4; stroke-width: 1.5; stroke-dasharray: 2 1.5; }
.trend__pthit { fill: transparent; }
.trend__pt:hover .trend__ptdot { fill: var(--brand-primary); }
.trend__pt:hover .trend__ptdot--partial, .trend__pt:hover .trend__ptdot--exempt { fill: var(--brand-primary); stroke: var(--brand-primary); }

/* ---- Time-scrubber under the map ------------------------------------- */
.geo-scrub { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.geo-scrub__lbl { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); white-space: nowrap; }
.geo-scrub input[type="range"] { flex: 1; accent-color: var(--brand-accent); cursor: pointer; }
.geo-scrub__val { font-size: 0.74rem; color: var(--brand-primary); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 90px; text-align: right; }

/* ---- Exceptions worklist --------------------------------------------- */
.exc { display: grid; gap: 12px; }
.exc-cat { padding: 0; overflow: hidden; }
.exc-cathead { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; }
.exc-cathead:hover { background: var(--surface-muted); }
.exc-cathead h3 { margin: 0; font-size: 0.98rem; color: var(--brand-primary); flex: 1; }
.exc-dot { width: 10px; height: 10px; border-radius: 50%; }
.exc-dot--crit { background: var(--danger); } .exc-dot--warn { background: #f59e0b; } .exc-dot--info { background: var(--brand-accent); }
.exc-count { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.exc-caret { color: var(--brand-accent); transition: transform 0.12s; }
.exc-cathead.is-open .exc-caret { transform: rotate(90deg); }
.exc-list { border-top: 1px solid var(--border); }
.exc-row { display: grid; grid-template-columns: 1.4fr 1.4fr 1.6fr auto; align-items: center; gap: 12px; padding: 8px 16px; font-size: 0.82rem; cursor: pointer; border-bottom: 1px solid var(--surface-muted); }
.exc-row:hover { background: rgba(31,122,140,0.06); }
.exc-name { font-weight: 600; }
.exc-meta { color: var(--text-muted); }
.exc-detail { color: #b45309; }
.exc-open { color: var(--brand-accent); font-weight: 600; }
.exc-more { padding: 8px 16px; font-size: 0.78rem; color: var(--text-muted); }

/* ---- Duty-status transition sankey ----------------------------------- */
.sankey__heads { display: flex; justify-content: space-between; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); padding: 0 16px; }
.sankey__svg { width: 100%; height: auto; max-height: 360px; }
.sankey__node { fill: #fff; stroke: var(--border); }
.sankey__lbl { font: 600 11px var(--font); text-anchor: middle; fill: var(--text); }
.sankey__rib { fill: none; opacity: 0.5; transition: opacity 0.12s; cursor: default; }
.sankey__rib:hover { opacity: 0.9; }
.sankey__rib--same { stroke: #94a3b8; }
.sankey__rib--change { stroke: var(--brand-accent); }
.sankey__note { font-size: 0.74rem; color: var(--text-muted); margin: 6px 0 0; padding: 0 16px; }
.sankey__key { display: inline-block; width: 16px; height: 4px; border-radius: 2px; vertical-align: middle; margin: 0 2px; }
.sankey__key--change { background: var(--brand-accent); } .sankey__key--same { background: #94a3b8; }

.geo-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; font-size: 0.78rem; color: var(--text-muted); }
.geo-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.dot--ok { background: #22c55e; } .dot--warn { background: #f59e0b; }
.dot--crit { background: #ef4444; } .dot--strength { background: var(--brand-accent); }
.dot--partial { background: #fff; border: 2px solid #d98a00; } .dot--exempt { background: #fff; border: 1.5px dashed #9aa7b4; }
.ring { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--text-muted); display: inline-block; }

/* Bar list */
.barlist { display: grid; gap: 9px; }
.barlist__row { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 10px; font-size: 0.82rem; }
.barlist__lbl { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barlist__track { height: 9px; background: var(--surface-muted); border-radius: 6px; overflow: hidden; }
.barlist__fill { display: block; height: 100%; background: var(--brand-accent); border-radius: 6px; min-width: 2px; }
.barlist__val { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); white-space: nowrap; }
.barlist__val em { font-style: normal; font-weight: 400; color: var(--text-muted); font-size: 0.74rem; }

/* Donut */
.donut { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.donut__svg { width: 150px; height: 150px; flex-shrink: 0; }
.donut__num { text-anchor: middle; font: 700 22px var(--font); fill: var(--text); }
.donut__cap { text-anchor: middle; font: 400 10px var(--font); fill: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; }
.donut__legend { display: grid; gap: 4px; font-size: 0.76rem; }
.donut__lg { display: flex; align-items: center; gap: 6px; color: var(--text-muted); }
.donut__lg i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.donut__lg b { color: var(--text); margin-left: auto; padding-left: 10px; font-variant-numeric: tabular-nums; }

/* Trend */
.trend__svg { width: 100%; height: auto; }
.trend__area { fill: rgba(31, 122, 140, 0.14); }
.trend__line { fill: none; stroke-width: 2; }
.trend__line--strength { stroke: var(--brand-accent); }
.trend__line--cas { stroke: #ef4444; stroke-width: 1.6; }
.trend__legend { display: flex; gap: 14px; align-items: center; font-size: 0.74rem; color: var(--text-muted); margin-top: 6px; flex-wrap: wrap; }
.trend__legend span { display: inline-flex; align-items: center; gap: 5px; }
.trend__range { margin-left: auto; font-variant-numeric: tabular-nums; }

/* Data table (geo) */
.geo-basetable { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.data-table th { text-align: left; color: var(--text-muted); font-weight: 600; text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.3px; padding: 6px 10px; border-bottom: 1px solid var(--border); }
.data-table td { padding: 7px 10px; border-bottom: 1px solid var(--surface-muted); }
.data-table tbody tr:hover { background: var(--surface-muted); }
.data-table .ta-r { text-align: right; font-variant-numeric: tabular-nums; }
.sev { font-weight: 700; }
.sev--warn { color: #c2710c; } .sev--crit { color: var(--danger); }

/* ---- Command Overview (mockup-styled live surface) --------------------- */
.ov { margin: 2px 0 26px; }
.ov__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.ov__eyebrow { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--brand-accent); margin-bottom: 4px; }
.ov__title { margin: 0; font-size: 1.5rem; color: var(--brand-primary); font-weight: 700; }
.ov__sub { margin: 3px 0 0; color: var(--text-muted); font-size: 0.86rem; }
.ov__headactions { display: flex; gap: 8px; flex-shrink: 0; }
.ov__btn { font-size: 0.76rem; font-weight: 600; padding: 7px 14px; border-radius: 9px; cursor: pointer; border: 1px solid var(--border); }
.ov__btn--ghost { background: #fff; color: var(--text-muted); }
.ov__btn--solid { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); }
.ov__btn--solid:hover { background: var(--brand-primary-dark); }

/* KPI tiles */
.kpirow { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 16px; }
.kpirow--4 { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
@media (max-width: 560px) { .kpirow { grid-template-columns: repeat(2, 1fr); } }
.kpi { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 15px 17px; box-shadow: 0 1px 2px rgba(8, 44, 71, 0.04); }
.kpi--warn { border-left: 3px solid #f0b27a; }
.kpi--crit { border-left: 3px solid var(--danger); }
.kpi__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kpi__label { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); }
.kpi__delta { font-size: 0.68rem; font-weight: 700; padding: 2px 7px; border-radius: 20px; white-space: nowrap; }
.kpi__delta.is-up { color: var(--success); background: rgba(29, 122, 70, 0.1); }
.kpi__delta.is-down { color: var(--danger); background: rgba(179, 38, 30, 0.1); }
.kpi__delta.is-flat { color: var(--text-muted); background: var(--surface-muted); }
.kpi__val { font-size: 2rem; font-weight: 700; color: var(--text); line-height: 1.1; margin-top: 8px; font-variant-numeric: tabular-nums; }
.kpi__sub { font-size: 0.72rem; color: var(--text-muted); margin-top: 4px; }
.kpi__sub--crit { color: var(--danger); font-weight: 600; }

/* Panels */
.panel { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 17px 18px; box-shadow: 0 1px 2px rgba(8, 44, 71, 0.04); }
.panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.panel__head h3 { margin: 0; font-size: 1rem; color: var(--brand-primary); }
.panel__right { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); }

.ov__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.ov__grid--wide { grid-template-columns: 1.5fr 1fr; }
.ov__grid--three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .ov__grid, .ov__grid--wide, .ov__grid--three { grid-template-columns: 1fr; } }

/* Readiness bars */
.domainbars { display: grid; gap: 13px; }
.domainbar { display: grid; grid-template-columns: 96px 1fr auto auto; align-items: center; gap: 12px; font-size: 0.84rem; }
.domainbar__name { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.domainbar__track { height: 10px; background: var(--surface-muted); border-radius: 6px; overflow: hidden; }
.domainbar__fill { display: block; height: 100%; border-radius: 6px; min-width: 3px; }
.domainbar__fill--ok { background: #22c55e; }
.domainbar__fill--warn { background: #f59e0b; }
.domainbar__fill--crit { background: #ef4444; }
.domainbar__val { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
.domainbar__cas { font-size: 0.7rem; color: #8a5600;  /* was #c2710c at 3.71:1 */ font-weight: 600; min-width: 48px; text-align: right; }
.domainbar__ok { font-size: 0.7rem; color: var(--success); font-weight: 600; min-width: 48px; text-align: right; }

/* Posture quadrant */
.quad { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quad__cell { border-radius: 10px; padding: 14px; border: 1px solid var(--border); }
.quad__cell--ok { background: rgba(34, 197, 94, 0.08); border-color: rgba(34, 197, 94, 0.25); }
.quad__cell--warn { background: rgba(245, 158, 11, 0.09); border-color: rgba(245, 158, 11, 0.28); }
.quad__cell--crit { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.26); }
.quad__pct { font-size: 1.5rem; font-weight: 700; color: var(--text); }
.quad__cell--ok .quad__pct { color: #15803d; }
.quad__cell--warn .quad__pct { color: #b45309; }
.quad__cell--crit .quad__pct { color: var(--danger); }
.quad__lbl { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }
.quad__cap { font-size: 0.68rem; color: var(--text-muted); margin-top: 10px; text-align: center; }

/* Map panel */
.ov__mappanel { margin-bottom: 14px; }

/* Installations / units list */
.units { display: grid; gap: 4px; }
.units__row { display: grid; grid-template-columns: 12px 1fr auto 80px auto 14px; align-items: center; gap: 11px; padding: 8px 6px; border-radius: 8px; font-size: 0.84rem; }
.units__row:hover { background: var(--surface-muted); }
.units__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.units__ops { color: var(--text-muted); font-size: 0.74rem; white-space: nowrap; }
.units__track { height: 7px; background: var(--surface-muted); border-radius: 5px; overflow: hidden; }
.units__fill { display: block; height: 100%; background: var(--brand-accent); border-radius: 5px; min-width: 2px; }
.units__pct { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.units__chev { color: var(--text-muted); text-align: center; }

/* Trend hero */
.trendhero { display: flex; align-items: baseline; gap: 14px; margin-bottom: 6px; }
.trendhero__num { font-size: 2.2rem; font-weight: 700; color: var(--brand-primary); font-variant-numeric: tabular-nums; }
.trendhero__unit { font-size: 0.74rem; font-weight: 600; color: var(--text-muted); margin-left: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.trendhero__delta { font-size: 0.8rem; font-weight: 700; }
.trendhero__delta.is-up { color: var(--success); }
.trendhero__delta.is-down { color: var(--danger); }

/* ---- Shared period filter (Day / Week / Time frame) -------------------- */
.pf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pf--hub { margin: 4px 0 12px; }
.pf__seg { display: inline-flex; background: var(--surface-muted); border: 1px solid var(--border); border-radius: 9px; padding: 2px; }
.pf__segbtn {
  border: none; background: none; cursor: pointer; font-size: 0.74rem; font-weight: 600;
  color: var(--text-muted); padding: 5px 11px; border-radius: 7px; transition: background 0.12s, color 0.12s;
}
.pf__segbtn:hover { color: var(--text); }
.pf__segbtn.is-active { background: #fff; color: var(--brand-primary); box-shadow: 0 1px 2px rgba(8, 44, 71, 0.1); }
.pf__inputs { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pf__field { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 600; color: var(--text-muted); }
.pf__date {
  font-size: 0.78rem; padding: 5px 8px; border: 1px solid var(--border); border-radius: 7px;
  background: #fff; color: var(--text); font-family: var(--font);
}
.pf__date:focus { outline: none; border-color: var(--brand-accent); }
.pf__hint { font-size: 0.72rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pf-host { display: inline-flex; }
#geoLive.is-loading { opacity: 0.55; transition: opacity 0.12s; pointer-events: none; }
.ps-filter { display: flex; align-items: center; gap: 12px; margin: 10px 0 4px; flex-wrap: wrap; }
.ps-filter__lbl { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); }

/* ---- Analytics tabs toolbar + tab body -------------------------------- */
.aw-toolbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0 0 16px; padding: 12px 14px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(8, 44, 71, 0.04); }
.aw-toolbar[hidden] { display: none; }
.aw-tabbody.is-loading { opacity: 0.55; transition: opacity 0.12s; pointer-events: none; }

/* ---- Decisions stacked-day bars --------------------------------------- */
.stackdays { display: grid; gap: 8px; }
.stackdays__row { display: grid; grid-template-columns: 42px 1fr 32px; align-items: center; gap: 10px; font-size: 0.8rem; }
.stackdays__day { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.stackdays__bar { display: flex; height: 14px; border-radius: 5px; overflow: hidden; background: var(--surface-muted); }
.stackdays__seg--ok { background: #22c55e; } .stackdays__seg--crit { background: #ef4444; } .stackdays__seg--warn { background: #f59e0b; }
.stackdays__pad { background: transparent; }
.stackdays__tot { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.stackdays__legend { display: flex; gap: 14px; margin-top: 4px; font-size: 0.72rem; color: var(--text-muted); }
.stackdays__legend span { display: inline-flex; align-items: center; gap: 5px; }

/* ---- Day volume bars (activity) --------------------------------------- */
.daybars { display: flex; align-items: flex-end; gap: 10px; height: 150px; padding-top: 8px; }
.daybars__col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.daybars__bar { width: 70%; max-width: 46px; background: linear-gradient(180deg, var(--brand-accent), #134e5a); border-radius: 5px 5px 0 0; }
.daybars__lbl { font-size: 0.68rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.daybars__n { font-size: 0.72rem; font-weight: 700; }

/* ---- Activity / review feed ------------------------------------------- */
.feed { display: grid; gap: 2px; }
.feed__row { display: grid; grid-template-columns: 104px 1fr auto auto; align-items: center; gap: 12px; padding: 7px 6px; border-radius: 8px; font-size: 0.83rem; }
.feed__row:hover { background: var(--surface-muted); }
.feed__badge { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; text-align: center; padding: 3px 8px; border-radius: 6px; background: var(--surface-muted); color: var(--text-muted); }
.feed__badge--ok { background: rgba(34, 197, 94, 0.14); color: #15803d; }
.feed__badge--crit { background: rgba(239, 68, 68, 0.13); color: var(--danger); }
.feed__badge--warn { background: rgba(245, 158, 11, 0.15); color: #b45309; }
.feed__badge--info { background: rgba(59, 130, 246, 0.13); color: #1d4ed8; }
.feed__badge--mute { background: var(--surface-muted); color: var(--text-muted); }
.feed__actor { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed__obj { color: var(--text-muted); font-size: 0.76rem; white-space: nowrap; }
.feed__when { color: var(--text-muted); font-size: 0.74rem; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---- Facet filter bar ------------------------------------------------- */
.facets { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; padding: 12px 14px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(8, 44, 71, 0.04); }
.facet { display: flex; flex-direction: column; gap: 4px; }
.facet__lbl { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); }
.facet__sel {
  font-size: 0.78rem; padding: 6px 9px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-muted); color: var(--text); font-family: var(--font); min-width: 130px; cursor: pointer;
}
.facet__sel:focus { outline: none; border-color: var(--brand-accent); background: #fff; }
.facet__sel.is-set { border-color: var(--brand-accent); background: #fff; font-weight: 600; }
.facets__clear { margin-left: auto; align-self: center; }
.facets__active { font-size: 0.72rem; color: var(--text-muted); align-self: center; }

/* ---- Role-aware Home -------------------------------------------------- */
.home-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.home-sub { font-size: 0.82rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; margin: 22px 0 12px; }
.home-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.home-card {
  text-align: left; cursor: pointer; background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 5px; box-shadow: 0 1px 2px rgba(8, 44, 71, 0.04);
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.06s;
}
.home-card:hover { border-color: var(--brand-accent); box-shadow: 0 6px 18px rgba(8, 44, 71, 0.1); }
.home-card:active { transform: translateY(1px); }
.home-card--primary { border-left: 3px solid var(--brand-accent); }
.home-card__title { font-weight: 700; color: var(--brand-primary); font-size: 0.95rem; display: flex; align-items: center; justify-content: space-between; }
.home-card__go { color: var(--brand-accent); font-weight: 700; }
.home-card__desc { font-size: 0.8rem; color: var(--text-muted); }

/* ============================================================
   Talent Management (TM) — profile, validation, search, KPIs
   ============================================================ */
.tm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.tm-head__meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

.tm-domain { margin-bottom: 1rem; }
.tm-domain .section__head { display: flex; align-items: center; gap: 0.6rem; }
.tm-domain .section__head h2 { margin-right: auto; }
.tm-table th, .tm-table td { white-space: nowrap; font-size: 0.82rem; }
.tm-rowact { display: flex; gap: 0.3rem; flex-wrap: wrap; }

/* Inline add/edit form */
.tm-domain__form { margin-top: 0.75rem; }
.tm-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.65rem 0.9rem;
  padding: 0.9rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-muted); }
.tm-field { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); }
.tm-field input, .tm-field select { padding: 0.4rem 0.5rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font: inherit; font-weight: 500; color: var(--text); background: var(--surface); }
.tm-field--cb { flex-direction: row; align-items: center; gap: 0.4rem; }
.tm-form__actions { grid-column: 1 / -1; display: flex; gap: 0.5rem; }
.tm-form__hint { grid-column: 1 / -1; margin: 0; font-size: 0.75rem; color: var(--text-muted); font-weight: 500; }

.tm-search-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.65rem 0.9rem; }

/* Reject/flag button variant */
.btn-sm--flag { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); border-color: var(--danger); }
.btn-sm--flag:hover { background: color-mix(in srgb, var(--danger) 20%, transparent); }

/* KPI tiles */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.9rem; margin-bottom: 1rem; }
.kpi-tile { display: flex; flex-direction: column; gap: 0.15rem; padding: 1rem 1.1rem; border: 1px solid var(--border);
  border-left: 3px solid var(--brand-accent); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.kpi-tile__val { font-size: 1.7rem; font-weight: 800; color: var(--brand-primary); line-height: 1.1; }
.kpi-tile__lbl { font-size: 0.8rem; font-weight: 600; color: var(--text); }
.kpi-tile__sub { font-size: 0.72rem; color: var(--text-muted); }

/* Login/registration — non-CAC fallback + request-access affordances */
.btn--ghost { background: transparent; color: var(--brand-primary); border: 1px solid var(--border); }
.btn--ghost:hover { background: var(--surface-muted); }
.login-hint { font-size: 0.78rem; color: var(--text-muted); text-align: center; margin: 0.4rem 0 0; }
.login-hint a { color: var(--brand-accent); font-weight: 600; }
.alert--ok { background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--success);
  border: 1px solid color-mix(in srgb, var(--success) 40%, transparent); padding: 0.55rem 0.7rem; border-radius: var(--radius-sm); }

/* TM — profile health (completeness + currency attention) */
.tm-attn__lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.tm-attn__lists h4 { margin: 0 0 0.4rem; font-size: 0.82rem; color: var(--text); }
.tm-attn__ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.82rem; }
.tm-attn__ul li { display: flex; align-items: center; gap: 0.45rem; }
.tm-attn__badge { font-size: 0.68rem; font-weight: 700; padding: 0.1rem 0.4rem; border-radius: 999px; white-space: nowrap; }
.tm-attn__badge--expired { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }
.tm-attn__badge--soon { background: color-mix(in srgb, var(--brand-accent) 15%, transparent); color: var(--brand-accent); }
.tm-attn__clear { margin: 0; color: var(--success); font-size: 0.85rem; font-weight: 600; }

.tm-comp { margin-bottom: 0.9rem; }
.tm-comp__bar { height: 8px; border-radius: 999px; background: var(--surface-muted); overflow: hidden; border: 1px solid var(--border); }
.tm-comp__fill { display: block; height: 100%; background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent)); }
.tm-comp__chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.55rem; }
.tm-chip { font-size: 0.7rem; font-weight: 600; padding: 0.12rem 0.45rem; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); }
.tm-chip--current { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); border-color: transparent; }
.tm-chip--partial { background: color-mix(in srgb, var(--brand-accent) 12%, transparent); color: var(--brand-accent); border-color: transparent; }
.tm-chip--absent { opacity: 0.6; }

/* TM — KPI family headers */
.tm-kpi-fam { font-size: 0.9rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin: 1.2rem 0 0.5rem; }
.tm-kpi-fam:first-child { margin-top: 0; }

/* TM — KSAT coverage badge (ok variant) + gap list */
.tm-attn__badge--ok { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
.tm-gap { margin-top: 0.9rem; }
.tm-gap h4 { margin: 0 0 0.4rem; font-size: 0.82rem; }

/* TM — search facets */
.tm-facets { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }
.tm-facet h4 { margin: 0 0 0.35rem; font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.tm-facet { display: flex; flex-direction: column; gap: 0.3rem; align-items: flex-start; }
.tm-facet .tm-chip { background: var(--surface-muted); }

/* TM — bulk validation bar + advisory banner */
.tm-bulkbar { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.8rem; margin-bottom: 0.6rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-muted); flex-wrap: wrap; }
.tm-bulkbar__count { color: var(--text-muted); font-size: 0.8rem; margin-right: auto; }
.tm-advisory { padding: 0.6rem 0.8rem; margin-bottom: 1rem; border-radius: var(--radius); background: color-mix(in srgb, var(--brand-accent) 10%, transparent); color: var(--brand-accent); font-size: 0.82rem; font-weight: 600; border: 1px solid color-mix(in srgb, var(--brand-accent) 30%, transparent); }

/* TM — dependency config console */
.tm-dep .section__head { flex-wrap: wrap; gap: 0.5rem; }
.tm-cfg-json { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.78rem; padding: 0.5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); resize: vertical; }
.tm-dep__out { margin-top: 0.5rem; }

/* TM — config validation errors */
.tm-cfg-errs { margin: 0.5rem 0; padding: 0.5rem 0.7rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); font-size: 0.8rem; font-weight: 600; }
.tm-cfg-errs div { margin: 0.1rem 0; }

/* Ad-hoc report builder */
.ad-dims { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
.ad-dim { display: flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; }
.ad-filter { align-items: end; margin-bottom: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

/* In-app Help — topbar button, drawer, Help Center, editor */
.topbar__help { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface);
  color: var(--brand-primary); font-weight: 800; cursor: pointer; line-height: 1; }
.topbar__help:hover { background: var(--surface-muted); }

.help-drawer { position: fixed; inset: 0; z-index: 1000; pointer-events: none; }
.help-drawer.is-open { pointer-events: auto; }
.help-drawer__scrim { position: absolute; inset: 0; background: rgba(0,0,0,.28); opacity: 0; transition: opacity .18s; }
.help-drawer.is-open .help-drawer__scrim { opacity: 1; }
.help-drawer__panel { position: absolute; top: 0; right: 0; height: 100%; width: min(440px, 92vw); background: var(--surface);
  border-left: 1px solid var(--border); box-shadow: var(--shadow); transform: translateX(100%); transition: transform .2s;
  display: flex; flex-direction: column; }
.help-drawer.is-open .help-drawer__panel { transform: translateX(0); }
.help-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 0.9rem 1rem; border-bottom: 1px solid var(--border); }
.help-drawer__headbtns { display: inline-flex; align-items: center; gap: .4rem; flex-shrink: 0; }
.help-drawer__body { padding: 1rem 1.1rem; overflow-y: auto; flex: 1; font-size: 0.88rem; line-height: 1.5; color: var(--text); }
.help-drawer__body h2 { font-size: 1.05rem; margin: 0 0 .5rem; color: var(--brand-primary); }
.help-drawer__body h3 { font-size: 0.92rem; margin: 1rem 0 .35rem; }
.help-drawer__body h4 { font-size: 0.85rem; margin: .8rem 0 .3rem; color: var(--text-muted); }
.help-drawer__body ul, .help-drawer__body ol { margin: .3rem 0 .7rem 1.1rem; }
.help-drawer__body li { margin: .2rem 0; }
.help-drawer__body code { background: var(--surface-muted); padding: .05rem .3rem; border-radius: 4px; font-size: .85em; }
.help-drawer__body a { color: var(--brand-accent); font-weight: 600; }
.help-drawer__foot { padding: 0.7rem 1rem; border-top: 1px solid var(--border); font-size: 0.82rem; }

.help-search { width: 100%; max-width: 420px; padding: .5rem .7rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
  margin-bottom: 1rem; font: inherit; background: var(--surface); color: var(--text); }
.help-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .6rem; }
.help-card { text-align: left; padding: .8rem .9rem; border: 1px solid var(--border); border-left: 3px solid var(--brand-accent);
  border-radius: var(--radius); background: var(--surface); cursor: pointer; }
.help-card:hover { background: var(--surface-muted); }
.help-card__t { font-weight: 700; color: var(--brand-primary); font-size: .9rem; }

.help-edit { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.help-preview { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .7rem .9rem; background: var(--surface-muted);
  font-size: .85rem; line-height: 1.5; max-height: 340px; overflow-y: auto; }
.help-preview h2 { font-size: 1rem; color: var(--brand-primary); margin: 0 0 .4rem; }
.help-preview h3 { font-size: .9rem; margin: .7rem 0 .3rem; }
.help-preview ul, .help-preview ol { margin-left: 1.1rem; }
@media (max-width: 720px) { .help-edit { grid-template-columns: 1fr; } }

/* Guided walkthrough (tour) */
.tour { position: fixed; inset: 0; z-index: 1100; pointer-events: none; }
.tour__spot { position: fixed; border-radius: 8px; border: 2px solid var(--brand-accent);
  box-shadow: 0 0 0 9999px rgba(0,0,0,.55); transition: all .2s ease; pointer-events: none; }
.tour__bubble { position: fixed; width: 310px; max-width: 92vw; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: .9rem 1rem; pointer-events: auto; }
.tour__t { font-weight: 800; color: var(--brand-primary); margin-bottom: .3rem; }
.tour__b { font-size: .85rem; line-height: 1.45; margin-bottom: .8rem; }
.tour__nav { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.tour__count { font-size: .72rem; color: var(--text-muted); }
.tour__btns { display: flex; gap: .35rem; }

/* Section "?" help button */
.help-q { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: .35rem;
  border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--brand-primary);
  font-size: .72rem; font-weight: 800; line-height: 1; cursor: pointer; vertical-align: middle; }
.help-q:hover { background: var(--surface-muted); }

/* Top-bar "Show me how" button */
.topbar__guide { padding: .25rem .6rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
  color: var(--brand-primary); font-size: .74rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.topbar__guide:hover { background: var(--surface-muted); }
@media (max-width: 640px) { .topbar__guide { display: none; } }

/* ============================================================
   Accessibility (Section 508 / WCAG 2.1 AA)
   ============================================================ */

/* Skip link — off-screen until it receives keyboard focus. */
.skip-link {
  position: fixed; top: -60px; left: 12px; z-index: 2000;
  padding: .5rem .9rem; border-radius: 0 0 8px 8px;
  background: var(--brand-primary, #0b3d62); color: #fff;
  font-size: .85rem; font-weight: 700; text-decoration: none;
  transition: top .12s ease;
}
.skip-link:focus { top: 0; outline: 3px solid #fff; outline-offset: -3px; }

/* Screen-reader-only utility (visually hidden, still announced). */
.sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Visible keyboard focus for interactive elements that don't already define
   their own focus style. Only shows for keyboard users (:focus-visible), so
   mouse clicks stay clean. */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
select:focus-visible, input:focus-visible, textarea:focus-visible,
.rail__item:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--brand-accent, #1f7a8c);
  outline-offset: 2px; border-radius: 4px;
}

/* The main region is focused programmatically by the skip link — don't paint
   an outline for that non-keyboard focus. */
#content:focus:not(:focus-visible) { outline: none; }

/* Respect users who ask for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* ============================================================
   Org Chart — visual command hierarchy (assets/org-chart.js)
   ============================================================ */
.oc-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 6px 0 14px; }
.oc-search {
  flex: 1 1 260px; min-width: 220px; max-width: 420px;
  padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 0.9rem; color: var(--text); background: var(--surface);
}
.oc-search:focus { outline: none; border-color: var(--brand-accent); box-shadow: 0 0 0 3px rgba(31,122,140,0.15); }
.oc-legend { display: flex; flex-wrap: wrap; gap: 12px; }
.oc-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--text-muted); }
.oc-quicklinks { display: flex; gap: 8px; margin-left: auto; }
.oc-quicklinks .btn-sm { text-decoration: none; }

.oc-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.oc-dot--green { background: var(--success); }
.oc-dot--yellow { background: #c9820a; }
.oc-dot--red { background: var(--danger); }
.oc-dot--none { background: var(--border); }
.oc-dot--lock { width: auto; height: auto; background: none; font-size: 0.7rem; line-height: 1; }

.oc-panel { overflow-x: auto; }

/* Classic boxes-and-connectors tree */
.oc-chart { display: inline-block; min-width: 100%; padding: 8px 4px; text-align: center; }
/* Full Map view — drag-and-drop over the whole org */
.oc-viewtoggle { margin-left: auto; }
.oc-maphint { font-size: 0.8rem; color: var(--text-muted); margin: 0 0 10px; }
.oc-mapwrap { overflow: auto; max-height: 72vh; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-muted); }
.oc-map { padding: 16px; }
.oc-mapbox { display: inline-block; text-align: left; vertical-align: top; min-width: 180px; max-width: 230px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; transition: box-shadow 0.1s, border-color 0.1s; }
.oc-mapbox.drop-hover { border-color: var(--brand-accent); box-shadow: 0 0 0 3px rgba(31,122,140,0.25); background: var(--surface); }
.oc-mapbox__head { display: flex; flex-direction: column; margin-bottom: 4px; }
.oc-mapbox__name { font-weight: 700; font-size: 0.82rem; color: var(--brand-primary); }
.oc-mapbox__meta { font-size: 0.7rem; color: var(--text-muted); }
.oc-mapbox__exp { border: 0; background: none; color: var(--brand-accent); font-size: 0.74rem; font-weight: 600; cursor: pointer; padding: 4px 0 2px; }
.oc-mapbox__people { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.oc-chip { display: inline-block; background: var(--surface-muted); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; font-size: 0.74rem; color: var(--text); cursor: grab; user-select: none; }
.oc-chip[draggable="true"]:hover { border-color: var(--brand-accent); }
.oc-chip--lead { display: block; background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); border-radius: var(--radius-sm); margin: 2px 0 4px; font-weight: 600; }
.oc-chip--muted { color: var(--text-muted); cursor: default; background: none; border-color: transparent; }
.oc-chip.dragging { opacity: 0.5; }
.oc-chart ul { position: relative; padding-top: 22px; display: flex; justify-content: center; margin: 0; }
.oc-chart li { list-style: none; position: relative; padding: 22px 10px 0; }
.oc-chart li::before, .oc-chart li::after {
  content: ''; position: absolute; top: 0; right: 50%;
  border-top: 2px solid var(--border); width: 50%; height: 22px;
}
.oc-chart li::after { right: auto; left: 50%; border-left: 2px solid var(--border); }
.oc-chart li:only-child::before, .oc-chart li:only-child::after { display: none; }
.oc-chart li:only-child { padding-top: 0; }
.oc-chart li:first-child::before, .oc-chart li:last-child::after { border: 0 none; }
.oc-chart li:last-child::before { border-right: 2px solid var(--border); border-radius: 0 6px 0 0; }
.oc-chart li:first-child::after { border-radius: 6px 0 0 0; }
.oc-chart ul ul::before {
  content: ''; position: absolute; top: 0; left: 50%;
  border-left: 2px solid var(--border); width: 0; height: 22px;
}
.oc-chart > ul { padding-top: 0; }
.oc-chart > ul > li:only-child { padding-top: 0; }

/* Person card */
.oc-card {
  display: inline-flex; gap: 10px; align-items: flex-start; text-align: left;
  width: 236px; padding: 12px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(8,44,71,0.08); vertical-align: top;
}
.oc-card--unit { background: var(--surface-muted); border-style: dashed; }
.oc-card__avatar { position: relative; flex-shrink: 0; }
.oc-card__img, .oc-card__initials {
  width: 48px; height: 48px; border-radius: 50%; object-fit: cover; display: grid; place-items: center;
}
.oc-card__initials { background: var(--brand-primary); color: #fff; font-weight: 700; font-size: 0.95rem; }
.oc-photo-edit {
  position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
  font-size: 0.7rem; cursor: pointer; padding: 0; line-height: 1;
}
.oc-photo-edit:hover { background: var(--brand-accent); color: #fff; border-color: var(--brand-accent); }
.oc-card__body { min-width: 0; }
.oc-card__name { font-weight: 700; color: var(--text); font-size: 0.92rem; }
.oc-card__role { font-size: 0.76rem; color: var(--text-muted); margin: 1px 0 7px; }
.oc-card__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.oc-status { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 600; }
.oc-status--green { color: var(--success); }
.oc-status--yellow { color: #8a5600; }  /* 6.16:1 on surface; #a8690a was 4.48:1 */
.oc-status--red { color: var(--danger); }
.oc-status--none, .oc-status--lock { color: var(--text-muted); font-weight: 500; }
.oc-link { background: none; border: 0; padding: 0; color: var(--brand-accent); font-size: 0.78rem; font-weight: 600; cursor: pointer; }
.oc-link:hover { text-decoration: underline; }
.oc-noprofile { font-size: 0.74rem; color: var(--text-muted); font-style: italic; }

/* Search highlight */
.oc-card.is-dim { opacity: 0.32; }
.oc-card.is-hit { box-shadow: 0 0 0 2px var(--brand-accent); }

/* Unassigned bucket */
.oc-loose { display: flex; flex-wrap: wrap; gap: 12px; }

/* Read-only talent-profile modal */
.ocp-head { margin: 4px 0 12px; }
.ocp-sec { border-top: 1px solid var(--border); padding: 12px 0; }
.ocp-sec:first-of-type { border-top: 0; }
.ocp-sec h3 { margin: 0 0 8px; font-size: 0.9rem; color: var(--brand-primary); }
.ocp-row { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 6px 0; border-bottom: 1px dashed var(--border); }
.ocp-row:last-child { border-bottom: 0; }
.ocp-kv { display: flex; flex-direction: column; gap: 1px; }
.ocp-kv span { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); }
.ocp-kv b { font-size: 0.84rem; color: var(--text); font-weight: 600; }
.oc-count { font-size: 0.8rem; color: var(--text-muted); margin: 2px 0 10px; }
.oc-asof { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-muted); }
.oc-asof input[type="date"] { padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.85rem; color: var(--text); background: var(--surface); }
.oc-card__links { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.oc-muted { color: var(--text-muted); font-weight: 500; }
.oc-timeline { display: flex; flex-direction: column; gap: 4px; padding: 4px 0 10px; }
.oc-tl-item { border-left: 3px solid var(--border); padding: 8px 0 8px 14px; margin-left: 4px; }
.oc-tl-item--current { border-left-color: var(--success); }
.oc-tl-when { font-size: 0.8rem; font-weight: 700; color: var(--brand-primary); display: flex; align-items: center; gap: 8px; }
.oc-tl-node { font-size: 0.92rem; font-weight: 600; margin: 3px 0; }
.oc-tl-reports, .oc-tl-path { font-size: 0.82rem; color: var(--text); margin-top: 2px; }

/* ---- Org Chart: lazy drill-down tree ---- */
.oc-tree2 { display: flex; flex-direction: column; gap: 2px; }
.oc-unit { border-radius: var(--radius-sm); }
.oc-unit__head { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: var(--radius-sm); }
.oc-unit__head:hover { background: var(--surface-muted); }
.oc-caret { flex-shrink: 0; width: 24px; height: 24px; border: 1px solid var(--border); background: var(--surface); border-radius: 6px; cursor: pointer; color: var(--brand-primary); font-size: 0.7rem; line-height: 1; padding: 0; }
.oc-caret:hover { background: var(--brand-accent); color: #fff; border-color: var(--brand-accent); }
.oc-caret--none { border: 0; background: none; cursor: default; }
.oc-unit__title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 220px; }
.oc-unit__name { font-weight: 700; color: var(--text); }
.oc-unit__type { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); background: var(--surface-muted); border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px; }
.oc-unit__count { font-size: 0.78rem; font-weight: 700; color: var(--brand-accent); }
.oc-unit__count::after { content: " ppl"; font-weight: 500; color: var(--text-muted); }
.oc-unit__lead { margin-left: auto; }
.oc-unit__lead .oc-card { width: 240px; box-shadow: none; background: transparent; border: 0; padding: 4px; }
.oc-unit__body { margin-left: 22px; padding-left: 14px; border-left: 2px solid var(--border); margin-bottom: 4px; }
.oc-unit__children { display: flex; flex-direction: column; gap: 2px; }
.oc-unit__reports { padding: 8px 0 4px; }
.oc-loading { color: var(--text-muted); font-size: 0.82rem; padding: 6px 2px; }
.oc-more { margin: 6px 0 2px; cursor: pointer; }

/* Search results */
.oc-results { display: flex; flex-direction: column; gap: 10px; }
.oc-result { display: flex; flex-direction: column; gap: 2px; }
.oc-result__path { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; }

/* ---- Org Chart: focus/drill boxes-and-connectors view ---- */
.oc-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 18px; font-size: 0.85rem; }
.oc-crumb { background: none; border: 0; color: var(--brand-accent); cursor: pointer; font-size: 0.85rem; padding: 2px 6px; border-radius: 6px; }
.oc-crumb:hover { background: var(--surface-muted); text-decoration: underline; }
.oc-crumb.is-current { color: var(--text); font-weight: 700; cursor: default; }
.oc-crumb-sep { color: var(--text-muted); }

.oc-box { display: inline-flex; flex-direction: column; gap: 8px; width: 244px; text-align: left; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 1px 3px rgba(8,44,71,0.08); vertical-align: top; }
.oc-box--focus { border-color: var(--brand-primary); border-width: 2px; box-shadow: 0 6px 18px rgba(8,44,71,0.14); }
.oc-box--drill { cursor: pointer; transition: transform .08s ease, box-shadow .08s ease, border-color .08s ease; }
.oc-box--drill:hover { border-color: var(--brand-accent); box-shadow: 0 8px 18px rgba(8,44,71,0.18); transform: translateY(-2px); }
.oc-box--drill:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }
.oc-box__person { display: flex; gap: 10px; align-items: center; }
.oc-box__avatar { position: relative; flex-shrink: 0; }
.oc-box .oc-card__img, .oc-box .oc-card__initials { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; }
.oc-box .oc-card__initials { background: var(--brand-primary); color: #fff; font-weight: 700; }
.oc-box__who { min-width: 0; }
.oc-box__name { font-weight: 700; color: var(--text); font-size: 0.92rem; }
.oc-box__role { font-size: 0.75rem; color: var(--text-muted); }
.oc-box__unit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 7px; border-top: 1px dashed var(--border); font-size: 0.77rem; }
.oc-box__uname { font-weight: 700; color: var(--brand-primary); }
.oc-box__count { color: var(--text-muted); }
.oc-box__links { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.oc-box__drillhint { font-size: 0.72rem; color: var(--brand-accent); font-weight: 600;; background: none; border: 0; font: inherit; cursor: pointer; width: 100%; text-align: inherit; }
.oc-box__drillhint:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; border-radius: 4px; }

.oc-reports-band { margin-top: 24px; border-top: 1px solid var(--border); padding-top: 16px; }
.oc-band__title { font-size: 0.95rem; margin: 0 0 12px; color: var(--brand-primary); }
.oc-box__echelon { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--brand-accent); background: color-mix(in srgb, var(--brand-accent) 12%, transparent); border-radius: 999px; padding: 1px 7px; }
/* Personnel category pill (Military / Civilian / Contractor) — non-traffic-light hues */
.oc-cat { display: inline-block; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.5px; padding: 1px 6px; border-radius: 999px; vertical-align: middle; border: 1px solid transparent; }
.oc-cat--military { background: #e6edf5; color: #1d3b5c; border-color: #c4d4e6; }
.oc-cat--civilian { background: #e7f1f2; color: #14606b; border-color: #bfdde1; }
.oc-cat--contractor { background: #f1ecf7; color: #5b3f8c; border-color: #ddd0ee; }
@media (prefers-color-scheme: dark) {
  .oc-cat--military { background: #1d2b3a; color: #a9c6e6; border-color: #2c4056; }
  .oc-cat--civilian { background: #122a2c; color: #7fd0d8; border-color: #244548; }
  .oc-cat--contractor { background: #241b33; color: #c3aef0; border-color: #3a2c52; }
}
/* Duty-status chip — the person's own JPERSTAT status (separate from the reporting dot) */
.oc-duty { display: inline-block; font-size: 0.64rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; border: 1px solid; vertical-align: middle; }
.oc-duty--garrison { color: #1d7a46; border-color: #b9e0ca; background: #e8f5ee; }
.oc-duty--tdy { color: #1256a0; border-color: #b8d3ef; background: #e7f0fb; }
.oc-duty--deployed { color: #3b3b8f; border-color: #c6c6ea; background: #ececf8; }
.oc-duty--leave { color: #8a6400; border-color: #f0dca8; background: #fff7e6; }
.oc-duty--pcs { color: #5a6b78; border-color: #d5dee6; background: #eef2f6; }
.oc-duty--casualty { color: #b3261e; border-color: #f3c2bf; background: #fdeceb; }
.oc-duty--other { color: #5a6b78; border-color: #d5dee6; background: #eef2f6; }
@media (prefers-color-scheme: dark) {
  .oc-duty--garrison { color: #7fd6a2; background: #123024; border-color: #1e4a35; }
  .oc-duty--tdy { color: #8fbdf0; background: #10233b; border-color: #21406a; }
  .oc-duty--deployed { color: #b3b3ef; background: #1b1b3a; border-color: #33336a; }
  .oc-duty--leave { color: #e2be6b; background: #2e2510; border-color: #4a3c1e; }
  .oc-duty--pcs, .oc-duty--other { color: #9fb0bd; background: #1c2733; border-color: #2c3a48; }
  .oc-duty--casualty { color: #f0a8a2; background: #331312; border-color: #52201e; }
}
.ro-command { margin: 2px 0 0; font-size: 0.82rem; color: var(--text-muted); }
.ro-command strong { color: var(--brand-primary); }
/* Person profile modal — header + tabs (merged Talent + History) */
.ocp-person { display: flex; gap: 14px; align-items: center; padding: 4px 0 14px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.ocp-person .oc-card__img, .ocp-person .oc-card__initials { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; }
.ocp-person .oc-card__initials { background: var(--brand-primary); color: #fff; font-weight: 700; font-size: 1.1rem; }
.ocp-person__name { font-weight: 700; font-size: 1.05rem; color: var(--text); }
.ocp-person__sub { font-size: 0.82rem; color: var(--text-muted); margin: 3px 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ocp-person__status { margin-top: 3px; }
/* Person-profile move/depart actions + inline forms */
.ocp-actions { margin-left: auto; display: flex; gap: 6px; align-self: flex-start; }
.ocp-action { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-muted); padding: 12px 14px; margin-bottom: 12px; }
.ocp-form__title { margin: 0 0 8px; font-size: 0.92rem; color: var(--brand-primary); }
.ocp-form__note { margin: 0 0 8px; font-size: 0.8rem; color: var(--text-muted); }
.ocp-field { display: flex; flex-direction: column; gap: 3px; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 8px; }
.ocp-field select, .ocp-field input { padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.86rem; background: var(--surface); color: var(--text); }
.ocp-form__actions { display: flex; gap: 8px; margin-top: 4px; }
.ocp-result { margin-top: 8px; }
.ocp-pending { border-left: 3px solid #c9820a; background: var(--surface); padding: 8px 12px; border-radius: var(--radius-sm); font-size: 0.84rem; }
/* Personnel Moves queue */
.mv-sec { margin-bottom: 24px; }
.mv-h3 { font-size: 0.95rem; color: var(--brand-primary); display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.mv-count { background: var(--brand-accent); color: #fff; border-radius: 999px; font-size: 0.72rem; font-weight: 700; padding: 1px 8px; }
.mv-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px; background: var(--surface); }
.mv-card__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.mv-eff { font-size: 0.76rem; color: var(--text-muted); }
.mv-tag { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; background: var(--surface-muted); border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px; color: var(--text-muted); }
.mv-tag--depart { background: #fdecea; border-color: #f5c6c0; color: var(--danger); }
.mv-route { font-size: 0.86rem; margin: 6px 0; }
.mv-arrow { color: var(--brand-accent); font-weight: 700; margin: 0 4px; }
.mv-reason { font-size: 0.82rem; color: var(--text-muted); font-style: italic; margin-bottom: 6px; }
.mv-appr { font-size: 0.78rem; color: var(--text-muted); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.mv-sep { color: var(--border); margin: 0 2px; }
.mv-dot { font-weight: 700; }
.mv-dot--approved { color: var(--success); }
.mv-dot--rejected { color: var(--danger); }
.mv-dot--pending { color: #c9820a; }
.mv-act { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mv-comment { flex: 1 1 180px; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.84rem; background: var(--surface); color: var(--text); }
.mv-status { font-size: 0.78rem; color: var(--text-muted); margin-right: auto; }
.ocp-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.ocp-tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 14px; cursor: pointer; font-size: 0.88rem; font-weight: 600; color: var(--text-muted); }
.ocp-tab:hover { color: var(--text); }
.ocp-tab.is-active { color: var(--brand-primary); border-bottom-color: var(--brand-primary); }
/* Org-chart card: name / rank / title / pills on separate lines */
.oc-card__rank { font-size: 0.74rem; font-weight: 600; color: var(--brand-accent); margin: 1px 0; }
.oc-card__title { font-size: 0.76rem; color: var(--text-muted); margin: 1px 0 4px; }
.oc-card__pills { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-bottom: 5px; }
.oc-box__rank { font-size: 0.72rem; font-weight: 600; color: var(--brand-accent); margin: 1px 0; }
.oc-box__pills { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 4px; }
/* Org-chart unit box: branch / J-code / #people+status stacked on their own lines */
.oc-box__branch { font-weight: 700; color: var(--brand-primary); font-size: 0.82rem; padding-top: 7px; border-top: 1px dashed var(--border); margin-top: 2px; }
.oc-box__jcode { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.3px; color: var(--brand-accent); margin: 2px 0; }
.oc-box__jcode .oc-box__echelon { margin-left: 2px; }
.oc-box__statline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.78rem; margin: 2px 0; }
/* Analytics hub — Overview dashboard */
.an-tabs { margin-bottom: 14px; }
.an-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin: 6px 0 18px; }
.an-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; text-align: center; }
.an-kpi__val { font-size: 1.6rem; font-weight: 800; color: var(--text); line-height: 1.1; }
.an-kpi__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-top: 4px; }
.an-kpi--green .an-kpi__val { color: var(--success); }
.an-kpi--yellow .an-kpi__val { color: #a8690a; }
.an-kpi--red .an-kpi__val { color: var(--danger); }
.an-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.an-grid .panel h3 { margin: 0 0 10px; font-size: 0.9rem; color: var(--brand-primary); }
.an-grid__wide { grid-column: 1 / -1; }
.an-bars { display: flex; flex-direction: column; gap: 6px; }
.an-bar { display: grid; grid-template-columns: minmax(120px,180px) 1fr 42px; align-items: center; gap: 8px; font-size: 0.8rem; }
.an-bar__label { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-bar__track { background: var(--surface-muted); border-radius: 999px; height: 12px; overflow: hidden; }
.an-bar__fill { display: block; height: 100%; background: var(--brand-accent); border-radius: 999px; }
.an-bar__val { text-align: right; font-weight: 700; color: var(--text); }
.an-trend { display: flex; align-items: flex-end; gap: 3px; height: 120px; padding-top: 8px; }
.an-trend__bar { flex: 1; background: var(--brand-accent); border-radius: 3px 3px 0 0; min-height: 4px; }
/* Partial day (weekday under-reported): hatched amber so the roll-over shows. */
.an-trend__bar--partial { background: repeating-linear-gradient(45deg, #d98a00, #d98a00 3px, #f4c65c 3px, #f4c65c 6px); }
/* Weekend exempt: muted, no reporting expected. */
.an-trend__bar--exempt { background: repeating-linear-gradient(45deg, #c3ccd6, #c3ccd6 3px, #e4e9ef 3px, #e4e9ef 6px); }
.an-trend__axis { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--text-muted); margin-top: 4px; }
.an-trend__note { font-size: 0.7rem; color: var(--text-muted); margin-top: 6px; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.an-trend__key { width: 10px; height: 10px; border-radius: 2px; display: inline-block; vertical-align: middle; }
.an-trend__key--partial { background: repeating-linear-gradient(45deg, #d98a00, #d98a00 2px, #f4c65c 2px, #f4c65c 4px); }
.an-trend__key--exempt { background: repeating-linear-gradient(45deg, #c3ccd6, #c3ccd6 2px, #e4e9ef 2px, #e4e9ef 4px); }
.an-exempt { background: #eef2f7; border: 1px solid #d6dee8; color: #4a5a6a; border-radius: var(--radius-sm); padding: 8px 12px; font-size: 0.8rem; margin: 8px 0; }
.an-range { font-size: 0.8rem; color: var(--text-muted); margin: 2px 0 6px; }
.an-gap { background: #fff7e6; border: 1px solid #f0dca8; color: #8a6400; border-radius: var(--radius-sm); padding: 8px 12px; font-size: 0.8rem; margin: 8px 0; }
.an-trend__summary { font-size: 0.8rem; color: var(--text); margin: 0 0 8px; line-height: 1.5; }
.an-trend__flag--partial { color: #8a6400; font-weight: 600; }
/* Enterprise Analytics — AI Intelligence hub */
.ocp-tab--ai { position: relative; }
.ai-hub { max-width: 940px; }
.ai-hero { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: var(--radius); color: #fff;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-accent) 100%); }
.ai-hero__icon { font-size: 1.9rem; line-height: 1; }
.ai-hero__title { margin: 0 0 4px; font-size: 1.15rem; }
.ai-hero__sub { margin: 0; font-size: 0.86rem; opacity: 0.92; max-width: 640px; }
.ai-badge { display: inline-block; background: var(--brand-accent); color: #fff; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; margin-right: 6px; }
/* Builder: dropdown + preview */
.ai-builder { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 18px 0; }
.ai-field { display: flex; flex-direction: column; gap: 6px; }
.ai-label { font-size: 0.82rem; font-weight: 700; color: var(--brand-primary); display: flex; align-items: center; gap: 8px; }
.ai-step { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--brand-primary); color: #fff; font-size: 0.72rem; font-weight: 800; }
.ai-select { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.88rem; background: var(--surface); color: var(--text); }
.ai-select:focus { outline: none; border-color: var(--brand-accent); box-shadow: 0 0 0 3px rgba(31,122,140,0.15); }
.ai-chip { font-size: 0.72rem; font-weight: 600; color: var(--brand-accent); background: var(--surface-muted); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; text-transform: none; letter-spacing: 0; }
.ai-preview-text { width: 100%; padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.92rem; line-height: 1.45; background: var(--surface); color: var(--text); resize: vertical; font-family: inherit; }
.ai-preview-text:focus { outline: none; border-color: var(--brand-accent); box-shadow: 0 0 0 3px rgba(31,122,140,0.15); }
.ai-targets { margin: 0; font-size: 0.76rem; color: var(--text-muted); }
/* Console: the API-call / evaluation space */
.ai-console { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.ai-console__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--surface-muted); border-bottom: 1px solid var(--border); }
.ai-console__title { font-size: 0.84rem; font-weight: 700; color: var(--brand-primary); display: flex; align-items: center; gap: 8px; }
.ai-console__body { padding: 16px; min-height: 150px; }
.ai-console__hint { margin: 0; font-size: 0.84rem; color: var(--text-muted); line-height: 1.5; }
.ai-run-req { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.78rem; color: var(--text-muted); margin-bottom: 10px; }
.ai-req-k { display: inline-block; background: var(--brand-primary); color: #fff; font-weight: 700; border-radius: 4px; padding: 1px 6px; margin-right: 6px; }
.ai-run-prompt { margin: 0 0 12px; padding: 10px 12px; background: var(--surface-muted); border-left: 3px solid var(--brand-accent); border-radius: var(--radius-sm); font-size: 0.86rem; color: var(--text); white-space: pre-wrap; font-family: inherit; }
.ai-run-res { border-top: 1px dashed var(--border); padding-top: 12px; }
.ai-run-res__status { font-size: 0.86rem; color: var(--text); line-height: 1.45; }
.ai-run-res__scope { margin-top: 8px; font-size: 0.78rem; color: var(--text-muted); }
.ai-run-res__note { margin-top: 12px; padding: 12px 14px; border-left: 3px solid var(--brand-accent); background: var(--surface-alt, rgba(127,127,127,0.06)); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.ai-run-res__note p { margin: 0 0 8px; font-size: 0.82rem; line-height: 1.5; color: var(--text); }
.ai-run-res__note p:last-child { margin-bottom: 0; }
.ai-run-res__answer { margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-alt, rgba(127,127,127,0.06)); font-size: 0.88rem; line-height: 1.5; white-space: pre-wrap; }
/* Environment Configuration */
.ev-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 14px; }
.ev-choice { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; cursor: pointer; font-size: 0.86rem; }
.ev-choice.is-active { border-color: var(--brand-accent); box-shadow: 0 0 0 2px rgba(31,122,140,0.15); }
.ev-agency { font-size: 0.76rem; color: var(--text-muted); }
.ev-note { font-size: 0.78rem; color: var(--text-muted); margin: 8px 0 0; }
.ev-summary { display: flex; flex-direction: column; gap: 8px; font-size: 0.85rem; }
.ev-k { display: inline-block; min-width: 150px; font-weight: 700; color: var(--brand-primary); }
.ev-band { display: inline-block; font-family: var(--mono, ui-monospace, monospace); font-size: 0.68rem; font-weight: 700;
  color: #fff; padding: 1px 7px; border-radius: 3px; letter-spacing: 0.04em; vertical-align: middle; }
.ev-band--cui { background: #522d80; }
.ev-band--secret { background: #c8102e; }
.ev-band--ts { background: #ff8c00; color: #000; }
.ev-band--unclass { background: #007a33; }
.ev-band--confidential { background: #0033a0; }
/* Cross-Domain Roll-up admin */
.cds-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.cds-note { font-size: 0.8rem; color: var(--text-muted); margin: 0 0 10px; }
.cds-field { display: flex; flex-direction: column; gap: 3px; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 10px; }
.cds-field input { padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.86rem; background: var(--surface); color: var(--text); }
.cds-msg { margin-top: 10px; font-size: 0.82rem; }
.cds-ok { color: var(--success); font-weight: 600; }
.cds-err { color: var(--danger); font-weight: 600; }
/* Doctrine JPERSTAT rollup tables */
.dz-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.dz-table th { text-align: left; padding: 6px 8px; color: var(--text-muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 1px solid var(--border); }
.dz-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); }
.dz-table tr:last-child td { border-bottom: none; }
.dz-n { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.dz-delta { text-align: right; width: 64px; }
.dz-d { font-size: 0.78rem; font-weight: 700; color: var(--text-muted); }
.dz-d--up { color: var(--success); }
.dz-d--dn { color: var(--danger); }
.dz-narr { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.dz-narr li { font-size: 0.83rem; color: var(--text); line-height: 1.4; }
.dz-narr__cmd { display: inline-block; background: var(--surface-muted); border: 1px solid var(--border); border-radius: 4px; padding: 0 6px; font-size: 0.72rem; font-weight: 700; color: var(--brand-primary); margin-right: 6px; }
/* Master-detail hub (Talent Catalogs): grouped left rail + content pane */
.hub2 { display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: start; }
.hub2__nav { display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--border); padding-right: 12px; }
.hub2__group { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: 700; padding: 14px 8px 4px; }
.hub2__group:first-child { padding-top: 2px; }
.hub2__item { text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 0.86rem; color: var(--text); cursor: pointer; border-left: 3px solid transparent; }
.hub2__item:hover { background: var(--surface-muted); }
.hub2__item.is-active { background: var(--surface-muted); border-left-color: var(--brand-accent); color: var(--brand-primary); font-weight: 700; }
.hub2__body { min-width: 0; }
@media (max-width: 720px) { .hub2 { grid-template-columns: 1fr; } .hub2__nav { border-right: 0; border-bottom: 1px solid var(--border); padding-right: 0; padding-bottom: 10px; } }
/* Command Readiness Scorecard */
.sc-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.sc-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; min-width: 620px; }
.sc-table th { text-align: left; padding: 10px 12px; background: var(--surface-muted); color: var(--text-muted); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 1px solid var(--border); }
.sc-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.sc-table tr:last-child td { border-bottom: none; }
.sc-name { font-weight: 700; color: var(--brand-primary); }
.sc-score { display: flex; align-items: center; gap: 8px; }
.sc-gauge { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--c); }
.sc-gauge__num { font-size: 0.82rem; font-weight: 800; color: var(--text); }
.sc-band { font-size: 0.78rem; font-weight: 700; }
.sc-sub { display: block; font-size: 0.72rem; color: var(--text-muted); }
.sc-cas { color: var(--danger); font-weight: 700; }
.sc-foot { font-size: 0.76rem; color: var(--text-muted); margin-top: 10px; }
/* Search JPERSTAT — filter bar + instructions */
.oc-searchbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 12px; }
.oc-searchbar .oc-search { flex: 1 1 220px; min-width: 180px; }
.oc-help { margin: 4px 0 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-muted); }
.oc-help summary { cursor: pointer; padding: 8px 12px; font-weight: 600; font-size: 0.85rem; color: var(--brand-primary); }
.oc-help ol { margin: 0 0 10px; padding: 0 20px 0 32px; font-size: 0.84rem; color: var(--text); }
.oc-help li { margin: 4px 0; }
/* Act-as-user impersonation banner */
.imp-banner { position: sticky; top: 0; z-index: 200; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 8px 16px; background: #8a2b0f; color: #fff; font-size: 0.85rem; font-weight: 600; }
.imp-banner strong { font-weight: 800; }
.imp-banner__btn { background: #fff; color: #8a2b0f; border: 0; border-radius: 6px; padding: 4px 12px; font-weight: 700; cursor: pointer; font-size: 0.8rem; }
.imp-banner__btn:hover { background: #ffe8e0; }
/* Help editor formatting toolbar */
.he-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 8px; padding: 6px 8px; background: var(--surface-muted); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.he-tb { min-width: 30px; height: 28px; padding: 0 8px; border: 1px solid var(--border); background: var(--surface); border-radius: 6px; cursor: pointer; font-size: 0.82rem; color: var(--text); }
.he-tb:hover { background: var(--brand-accent); color: #fff; border-color: var(--brand-accent); }
.he-tb__sep { width: 1px; height: 20px; background: var(--border); margin: 0 2px; }
.he-tb__hint { font-size: 0.72rem; color: var(--text-muted); margin-left: auto; }
.help-preview u { text-decoration: underline; }

/* ---- Data Confidence Score ------------------------------------------------ */
/* The score always ships with its drivers: a big number alone would hide the
   very data weakness this is meant to expose. */
.dc { border-left: 4px solid var(--border); margin-bottom: 16px; }
.dc--high { border-left-color: var(--success); }
.dc--med  { border-left-color: #c9820a; }
.dc--low  { border-left-color: var(--danger); }
.dc-head { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.dc-score { display: flex; align-items: baseline; gap: 2px; }
.dc-score__num { font-size: 2.4rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.dc--high .dc-score__num { color: var(--success); }
.dc--med  .dc-score__num { color: #c9820a; }
.dc--low  .dc-score__num { color: var(--danger); }
.dc-score__of { font-size: 0.9rem; color: var(--text-muted); }
.dc-head__txt h3 { margin: 0 0 2px; }
.dc-head__txt p { margin: 0; font-size: 0.82rem; color: var(--text-muted); }
.dc-factors { display: grid; gap: 8px; margin-bottom: 10px; }
.dc-factor { display: grid; grid-template-columns: 180px 1fr 44px; grid-template-areas: "label track pct" "detail detail detail"; align-items: center; gap: 4px 10px; }
.dc-factor__label { grid-area: label; font-size: 0.82rem; font-weight: 600; display: flex; justify-content: space-between; gap: 6px; }
.dc-factor__w { color: var(--text-muted); font-weight: 400; }
.dc-factor__track { grid-area: track; height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.dc-factor__fill { display: block; height: 100%; border-radius: 4px; background: var(--brand-accent); }
.dc--low .dc-factor__fill { background: var(--danger); }
.dc--med .dc-factor__fill { background: #c9820a; }
.dc--high .dc-factor__fill { background: var(--success); }
.dc-factor__pct { grid-area: pct; text-align: right; font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.dc-factor__detail { grid-area: detail; font-size: 0.74rem; color: var(--text-muted); }
.dc-warn { margin: 0; padding-left: 18px; font-size: 0.8rem; color: var(--danger); }
.dc-warn li { margin: 2px 0; }
.dc-ok { margin: 0; font-size: 0.8rem; color: var(--success); }

/* ---- Manning (authorized vs assigned vs present) -------------------------- */
.mn-table td { font-variant-numeric: tabular-nums; }
.mn-name { font-weight: 600; }
.mn-type { display: block; font-size: 0.7rem; color: var(--text-muted); font-weight: 400; text-transform: capitalize; }
.mn-gap { color: var(--danger); font-weight: 700; }
.mn-dash { color: var(--text-muted); }
.mn-unset td { opacity: 0.72; }
.mn-fill { display: flex; align-items: center; gap: 8px; }
.mn-bar { flex: 1; min-width: 60px; height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.mn-bar__fill { display: block; height: 100%; border-radius: 4px; background: var(--success); }
.mn-fill__pct { font-size: 0.8rem; font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
.tk-hint { margin: 4px 0 0; font-size: 0.74rem; color: var(--text-muted); line-height: 1.35; }

/* ---- DCIPS Talent Acquisition helpers ----------------------------------- */
.field--actions { display: flex; align-items: flex-end; }
.field--error input, .field--error select { border-color: var(--danger); }
.muted { color: var(--text-muted); font-size: 0.85em; }
.ta-prevbox { padding: 8px 0; }
.ta-secstatus { max-width: 220px; }

/* ---- DCIPS lifecycle process tracker ------------------------------------ */
.ta-steps { display: flex; overflow-x: auto; padding: 4px 0 14px; }
.ta-step {
  flex: 0 0 auto; min-width: 132px; margin-left: -12px;
  padding: 10px 14px 10px 26px; display: flex; flex-direction: column; gap: 4px;
  font-size: 0.72rem; line-height: 1.15;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%);
}
.ta-step:first-child { margin-left: 0; padding-left: 16px;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); }
.ta-step--todo { background: var(--surface-muted); color: var(--text-muted); }
.ta-step--done { background: var(--brand-accent); color: #fff; }
.ta-step--current { background: var(--brand-primary); color: #fff; font-weight: 700; box-shadow: inset 0 0 0 2px #fff, 0 2px 8px rgba(8,44,71,.25); }
.ta-step__n { font-weight: 700; font-size: 0.8rem; }
.ta-step__l { white-space: normal; }

.ta-mini { display: inline-flex; align-items: center; gap: 6px; }
.ta-mini__bar { width: 84px; height: 6px; background: var(--surface-muted); border-radius: 999px; overflow: hidden; }
.ta-mini__fill { display: block; height: 100%; background: var(--brand-accent); }

/* ---- Collapsible rail groups -------------------------------------------- */
.rail__group-toggle {
  appearance: none; -webkit-appearance: none; background: none; border: 0;
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; cursor: pointer; font-family: inherit;
}
.rail__group-toggle:hover { color: #fff; }
.rail__caret { font-size: 0.6rem; opacity: 0.7; transition: transform 0.15s ease; flex-shrink: 0; }
.rail__section.is-collapsed .rail__caret { transform: rotate(-90deg); }
.rail__section.is-collapsed .rail__group-items { display: none; }

/* Rail brand logo (CYBERCOM seal; falls back to text mark if file absent) */
.rail__logo { height: 36px; width: 36px; object-fit: contain; border-radius: 6px; flex-shrink: 0; }

/* Prominent text wordmark (logo removed) */
.rail__app { font-size: 1.6rem; font-weight: 800; letter-spacing: 0.5px; line-height: 1; }
.rail__brandtxt small { margin-top: 5px; }

/* ---- My Work: personalization ------------------------------------------- */
/* Home "awaiting your action" callout */
.home-tasks {
  display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 18px;
  padding: 10px 16px; border-radius: var(--radius-sm); text-decoration: none;
  background: rgba(31,122,140,0.10); border: 1px solid rgba(31,122,140,0.35);
  color: var(--brand-primary); font-weight: 600; font-size: 0.9rem;
}
.home-tasks:hover { background: rgba(31,122,140,0.16); }
.home-tasks strong { color: var(--brand-accent); }

/* Compact table/UI density preference */
.density-compact table.data th, .density-compact table.data td { padding: 5px 8px; font-size: 0.82rem; }
.density-compact .stat-box { padding: 10px 12px; }
.density-compact .rail__item { padding: 6px 11px; }
.density-compact .card, .density-compact .section { padding-top: 10px; padding-bottom: 10px; }

/* DCIPS onboarding checklist */
.ta-taskbox { padding: 8px 0; }
.ta-taskitem { display: block; padding: 4px 0; font-size: 0.88rem; }
.ta-taskitem input { margin-right: 6px; }

/* DCIPS forms — clean, aligned two-column layout (replaces choppy auto-fill) */
.ta-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; align-items: end; max-width: 840px; }
.ta-form .field { min-width: 0; }
.ta-form .field--wide { grid-column: 1 / -1; }
.ta-form .field--actions { grid-column: 1 / -1; justify-content: flex-start; margin-top: 2px; }
@media (max-width: 640px) { .ta-form { grid-template-columns: 1fr; } }

/* DCIPS/OPM tracker — phase swimlanes (grouped process view) */
.ta-phases { display: flex; flex-direction: column; gap: 12px; margin: 8px 0 18px; }
.ta-phase__label { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand-primary); margin: 0 0 4px 2px; }
.ta-phase .ta-steps { padding-bottom: 4px; }

/* Wrap tracker steps into multiple rows instead of horizontal scrolling */
.ta-phases .ta-steps { flex-wrap: wrap; gap: 6px; overflow: visible; padding: 2px 0 6px; }
.ta-phases .ta-step { margin-left: 0; min-width: 116px; }
.ta-phases .ta-step:first-child { margin-left: 0; padding-left: 26px;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%); }


/* --- Application dossier (Talent Acquisition → Person view) ------------------
   Everything a reviewer needs to adjudicate one application, in one place. The
   portal stores controlled values so they can be searched; these are the labels. */
.ta-dhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem; justify-content: space-between; }
.ta-dtoggle { margin-left: auto; }

.ta-dgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 1rem; margin: 1rem 0 1.5rem; }

.ta-dtable { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.ta-dtable caption { text-align: left; font-weight: 700; padding-bottom: .35rem; }
.ta-dtable th[scope="row"] {
  text-align: left; font-weight: 600; white-space: nowrap;
  width: 40%; padding: .3rem .75rem .3rem 0; vertical-align: top;
  color: var(--muted, #5b6472);
}
.ta-dtable td { padding: .3rem 0; vertical-align: top; word-break: break-word; }
.ta-dtable tr + tr th, .ta-dtable tr + tr td { border-top: 1px solid rgba(0,0,0,.06); }

.ta-dsec { border: 1px solid rgba(0,0,0,.1); border-radius: 6px; padding: .6rem .9rem; margin-bottom: .6rem; }
.ta-dsec > summary { cursor: pointer; font-weight: 700; }
.ta-dsec > summary:hover { color: var(--accent, #355E93); }
.ta-dtable-name { font-size: .75rem; opacity: .6; margin-left: .5rem; }

.ta-dentry { display: grid; grid-template-columns: 2rem 1fr; gap: .75rem; padding: .6rem 0; }
.ta-dentry + .ta-dentry { border-top: 1px solid rgba(0,0,0,.08); }
.ta-dentry__n {
  font-size: .8125rem; font-weight: 700; text-align: center; line-height: 1.6rem;
  height: 1.6rem; border-radius: 999px; background: rgba(0,0,0,.06);
}

/* A submitted value outside the current vocabulary is worth seeing, not hiding. */
.ta-flag {
  font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 1px .4rem; border-radius: 999px; border: 1px solid currentColor; margin-left: .35rem;
}
.ta-disclaimer { font-style: italic; opacity: .8; font-size: .875rem; }
.ta-json { font-size: .75rem; word-break: break-all; }

.ta-timeline { margin: .5rem 0 0; padding-left: 1.25rem; }
.ta-timeline li { padding: .15rem 0; }


/* --- Review workflow (Person view) ------------------------------------------- */
.ta-step-row--complete td { opacity: .85; }
.ta-step-row--in_progress { background: rgba(53, 94, 147, .05); }
.ta-step-row--blocked { background: rgba(180, 95, 10, .07); }
.ta-step-actions { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; justify-content: flex-end; }
.ta-step-actions > * { flex: 0 0 auto; width: auto; }
.ta-step-actions select { max-width: 12rem; }
.ta-scroll { overflow-x: auto; }
.ta-docreq { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; margin-bottom: 1rem; }
.ta-docreq label { display: flex; flex-direction: column; gap: .2rem; font-size: .875rem; font-weight: 600; }
.ta-docreq label[hidden] { display: none; }
.ta-docreq input, .ta-docreq select { min-width: 14rem; }


/* --- Candidates: one block per person, every application beneath ------------- */
.ta-candidate {
  border: 1px solid rgba(0,0,0,.1); border-radius: 8px;
  padding: 1rem; margin-bottom: 1rem;
}
.ta-candidate__head {
  display: flex; flex-wrap: wrap; gap: .75rem;
  align-items: flex-start; justify-content: space-between; margin-bottom: .75rem;
}
.ta-candidate__head h3 { margin: 0; font-size: 1.0625rem; }
.ta-candidate__head p { margin: .2rem 0 0; }
.ta-candidate__meta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }


/* Where a step should go, and why — a sub-row beneath the step it explains. */
.ta-route-row > td { border-top: 0; padding-top: 0; }
.ta-route {
  font-size: .8125rem; white-space: normal;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  padding: .4rem .6rem; border-left: 3px solid var(--color-accent, #355E93);
  background: var(--color-surface-alt, rgba(0, 0, 0, .03)); border-radius: 0 4px 4px 0;
}
.ta-route .btn { margin-left: auto; width: auto; flex: 0 0 auto; }


/* --- Person lookup (assignment type-ahead) ---------------------------------- */
.pl { position: relative; display: inline-flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.pl .btn { width: auto; flex: 0 0 auto; }
.pl__box { position: relative; display: inline-flex; align-items: center; gap: .35rem; }
.pl__input { min-width: 12rem; width: auto; }
.pl__chosen { font-weight: 600; white-space: nowrap; }
.pl__results {
  position: absolute; top: 100%; right: 0; z-index: 40;
  margin: .2rem 0 0; padding: .25rem; list-style: none;
  min-width: 24rem; max-height: 16rem; overflow-y: auto;
  background: var(--color-card, #fff); border: 1px solid var(--color-border, #ADADAD);
  border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); text-align: left;
}
/* Explicit placement: auto-placement puts the name and the capability note in
   whichever cell falls free, which reads as two unrelated people per row. */
.pl__row {
  display: grid; column-gap: .75rem;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name caps" "meta caps";
  padding: .35rem .5rem; border-radius: 4px; cursor: pointer; white-space: normal;
}
.pl__row > strong { grid-area: name; }
.pl__row > .muted:not(.pl__caps) { grid-area: meta; }
.pl__caps { grid-area: caps; align-self: center; text-align: right; max-width: 11rem; }
.pl__row.is-active, .pl__row:hover { background: var(--color-row-hover, rgba(53, 94, 147, .12)); }
.pl__status { margin: .2rem 0 0; }
/* An advisory, not an alarm: handing a step to someone outside the owning
   capability is legitimate (covering leave) but should never be accidental. */
.pl__lacks { font-size: .75rem; font-style: italic; color: var(--color-warning-text, #8a5a00); }
.btn--sm { padding: .15rem .45rem; font-size: .8125rem; }


/* --- New Hire Intake --------------------------------------------------------- */
.tm-newhire__head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; justify-content: space-between; }
.tm-newhire__head h2 { margin: 0; }
.tm-newhire__actions { display: flex; gap: .5rem; }
.tm-newhire__actions .btn { width: auto; }
.tm-toolbar { display: flex; gap: 1rem; align-items: flex-end; margin-bottom: 1rem; }


/* Approval chain on an RPA card. */
.ta-chain { margin: .5rem 0; padding-left: 1.2rem; }
.ta-chain li { margin: .2rem 0; }
.ta-form .ta-wide { flex: 1 1 100%; }
.ta-form .ta-wide input { width: 100%; }


/* Hiring analytics headline figure. */
.ana-headline { font-size: 1.5rem; font-weight: 700; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.ana-headline .muted { font-size: 1rem; font-weight: 400; }

/* Next-step callout on the candidate journey. The lifecycle models 25 stages and
   only five used to carry any routing, so for most of a fill nothing told the
   recruiter what came next — they had to know which of twenty-two screens owned
   the stage. This is that answer, stated once, where they already are. */
.ta-next { border: 1px solid var(--brand-accent); border-left-width: 4px; border-radius: var(--radius);
  padding: 12px 14px; margin: 12px 0; background: var(--surface); }
.ta-next__lbl { font-size: 0.7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--brand-accent); margin-bottom: 4px; }
.ta-next__do { margin: 0 0 2px; font-size: 1.02rem; }
.ta-next__where { margin: 0 0 10px; font-size: 0.82rem; color: var(--text-muted); }

/* Hiring-path guidance: what applies on this authority and what does not. Five of
   the TA modules are inert on an excepted-service fill, and an empty Certificates
   screen reads as missing data unless the product says otherwise. */
.ta-auth { border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 12px; margin: 8px 0; background: var(--surface); }
.ta-auth > summary { cursor: pointer; font-size: 0.9rem; }
.ta-auth__list { list-style: none; margin: 8px 0 4px; padding: 0; display: grid; gap: 6px; }
.ta-auth__item { display: flex; gap: 10px; align-items: flex-start; font-size: 0.86rem; }
.ta-auth__mark { flex: 0 0 1.1rem; font-weight: 700; text-align: center; }
.ta-auth__item--yes .ta-auth__mark { color: var(--success); }
.ta-auth__item--no { opacity: 0.72; }
.ta-auth__item--no .ta-auth__mark { color: var(--text-muted); }