:root {
  --bg: #030604;
  --bg-grid: rgba(111, 201, 132, 0.035);

  --panel: #09100b;
  --panel-soft: #0d1610;
  --panel-raised: #111c14;
  --panel-hover: #162219;

  --line: #25392a;
  --line-strong: #3b5e43;

  --green: #91f2aa;
  --green-bright: #b8ffc7;
  --green-dim: #6f9778;
  --green-dark: #16311d;

  --gold: #d1ad5c;
  --gold-soft: rgba(209, 173, 92, 0.15);

  --text: #eef8f0;
  --text-muted: #9aaa9e;
  --text-faint: #68786d;

  --danger: #ff8585;
  --danger-dark: #3b1515;
  --warning: #e4bd62;
  --success: #91f2aa;

  --shadow:
    0 18px 45px rgba(0, 0, 0, 0.45);

  --shadow-heavy:
    0 28px 90px rgba(0, 0, 0, 0.72);

  --radius-sm: 5px;
  --radius-md: 9px;
  --radius-lg: 14px;

  --sidebar-width: 270px;
  --topbar-height: 82px;

  --font-mono:
    Consolas,
    "Courier New",
    monospace;

  --font-display:
    Arial,
    Helvetica,
    sans-serif;
}


/* =========================================================
   BASE
   ========================================================= */

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;

  background:
    radial-gradient(
      circle at 50% -10%,
      rgba(50, 125, 68, 0.12),
      transparent 40%
    ),
    linear-gradient(
      rgba(3, 6, 4, 0.97),
      rgba(3, 6, 4, 0.99)
    ),
    repeating-linear-gradient(
      90deg,
      var(--bg-grid) 0 1px,
      transparent 1px 54px
    ),
    repeating-linear-gradient(
      0deg,
      var(--bg-grid) 0 1px,
      transparent 1px 54px
    );

  color: var(--text);
  font-family: var(--font-mono);
  overflow-x: hidden;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border-radius: var(--radius-sm);
}

input,
select,
textarea {
  border-radius: var(--radius-sm);
}

a {
  color: var(--green);
}

.hidden {
  display: none !important;
}

::selection {
  background: rgba(145, 242, 170, 0.22);
  color: var(--green-bright);
}


/* =========================================================
   GLOBAL TYPE
   ========================================================= */

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--text);
}

h1 {
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

h2 {
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.1;
}

h3 {
  font-size: clamp(21px, 2.2vw, 28px);
  line-height: 1.12;
}

h4 {
  font-size: 18px;
  line-height: 1.2;
}

p {
  line-height: 1.6;
}

.eyebrow {
  margin: 0 0 5px;

  color: var(--gold);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.subtitle,
.muted,
.module-description {
  color: var(--text-muted);
}

.module-description {
  max-width: 760px;
  margin: 6px 0 0;
  line-height: 1.45;
}


/* =========================================================
   SCANLINE EFFECT
   ========================================================= */

.scanlines {
  position: fixed;
  inset: 0;
  z-index: 1000;

  pointer-events: none;

  background:
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.018) 0 1px,
      transparent 1px 4px
    );

  mix-blend-mode: screen;
  opacity: 0.55;
}


/* =========================================================
   LOGIN
   ========================================================= */

.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;

  padding: 28px;

  background:
    radial-gradient(
      circle at 50% 30%,
      rgba(49, 133, 71, 0.17),
      transparent 42%
    ),
    linear-gradient(
      rgba(2, 7, 4, 0.91),
      rgba(2, 7, 4, 0.97)
    ),
    repeating-linear-gradient(
      90deg,
      rgba(145, 242, 170, 0.04) 0 1px,
      transparent 1px 52px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(145, 242, 170, 0.04) 0 1px,
      transparent 1px 52px
    );
}

.login-shell {
  width: min(1080px, 100%);

  background:
    linear-gradient(
      145deg,
      rgba(12, 22, 15, 0.98),
      rgba(5, 10, 7, 0.98)
    );

  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);

  box-shadow:
    var(--shadow-heavy),
    inset 0 0 70px rgba(77, 145, 91, 0.045);

  overflow: hidden;
}

.system-bar {
  display: flex;
  justify-content: space-between;
  gap: 16px;

  padding: 12px 18px;

  background: rgba(0, 0, 0, 0.26);
  border-bottom: 1px solid var(--line);

  color: var(--green-dim);
  font-size: 11px;
  letter-spacing: 0.09em;
}

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;

  margin-right: 8px;

  border-radius: 50%;

  background: var(--green);

  box-shadow:
    0 0 8px var(--green),
    0 0 18px rgba(145, 242, 170, 0.8);
}

.login-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  min-height: 590px;
}

.brand-panel,
.auth-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 58px;
}

.brand-panel {
  align-items: center;
  text-align: center;

  border-right: 1px solid var(--line);

  background:
    radial-gradient(
      circle,
      rgba(84, 155, 98, 0.12),
      transparent 66%
    );
}

.logo {
  width: min(320px, 82%);
  max-height: 310px;

  object-fit: contain;

  filter:
    drop-shadow(0 0 24px rgba(145, 242, 170, 0.12));
}

.auth-panel {
  background:
    linear-gradient(
      180deg,
      rgba(17, 28, 20, 0.46),
      rgba(5, 10, 7, 0.2)
    );
}

.auth-panel label,
.admin-personnel-form label {
  display: block;

  margin: 18px 0 7px;

  color: var(--green-dim);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.auth-panel input,
.admin-personnel-form input,
.admin-personnel-form select,
.admin-personnel-form textarea,
.personnel-toolbar input {
  width: 100%;

  padding: 13px 14px;

  background: #030604;
  color: var(--green-bright);

  border: 1px solid var(--line);

  outline: none;

  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.auth-panel input:focus,
.admin-personnel-form input:focus,
.admin-personnel-form select:focus,
.admin-personnel-form textarea:focus,
.personnel-toolbar input:focus {
  border-color: var(--green);
  background: #050906;

  box-shadow:
    0 0 0 3px rgba(145, 242, 170, 0.08),
    0 0 24px rgba(145, 242, 170, 0.06);
}

.auth-panel button {
  width: 100%;
  margin-top: 18px;
  padding: 13px 15px;

  cursor: pointer;
}

#login-button {
  background:
    linear-gradient(
      180deg,
      var(--green-bright),
      var(--green)
    );

  color: #041007;

  border: 1px solid var(--green);

  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;

  box-shadow:
    0 10px 24px rgba(81, 183, 105, 0.18);
}

#login-button:hover:not(:disabled) {
  transform: translateY(-1px);

  box-shadow:
    0 14px 28px rgba(81, 183, 105, 0.28);
}

#login-button:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.secondary {
  background: transparent;
  color: var(--green);

  border: 1px solid var(--line);
}

.secondary:hover {
  background: var(--panel-raised);
  border-color: var(--green-dim);
}

.security-note {
  margin-top: 22px;

  color: var(--text-faint);
  font-size: 11px;
  line-height: 1.5;
}


/* =========================================================
   STATUS MESSAGES
   ========================================================= */

.status {
  min-height: 18px;
  margin-top: 8px;

  color: var(--text-muted);
  font-size: 11px;
}

.status.success {
  color: var(--success);
}

.status.error {
  color: var(--danger);
}

.status.warning {
  color: var(--warning);
}


/* =========================================================
   MAIN APP LAYOUT
   ========================================================= */

.dashboard {
  min-height: 100vh;

  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);

  background:
    linear-gradient(
      90deg,
      rgba(5, 8, 6, 0.96),
      rgba(3, 6, 4, 0.98)
    );
}

.sidebar {
  position: sticky;
  top: 0;

  height: 100vh;

  display: flex;
  flex-direction: column;

  background:
    linear-gradient(
      180deg,
      #0a100c,
      #060a07
    );

  border-right: 1px solid var(--line);

  box-shadow:
    10px 0 36px rgba(0, 0, 0, 0.28);

  overflow-y: auto;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 13px;

  padding: 19px;

  border-bottom: 1px solid var(--line);

  background:
    radial-gradient(
      circle at 10% 20%,
      rgba(145, 242, 170, 0.08),
      transparent 58%
    );
}

.sidebar-logo {
  width: 54px;
  height: 54px;

  object-fit: contain;

  filter:
    drop-shadow(0 0 10px rgba(145, 242, 170, 0.12));
}

.sidebar-brand strong {
  display: block;

  color: var(--text);
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: 0.07em;
}

.sidebar-brand span {
  display: block;
  margin-top: 4px;

  color: var(--green-dim);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sidebar nav {
  flex: 1;

  padding: 18px 11px;
}

.nav-item {
  position: relative;

  width: 100%;

  padding: 12px 13px;
  margin: 3px 0;

  text-align: left;

  background: transparent;
  color: #a8b8ac;

  border: 1px solid transparent;

  cursor: pointer;

  transition:
    color 0.16s ease,
    background 0.16s ease,
    border-color 0.16s ease,
    transform 0.16s ease;
}

.nav-item::before {
  content: "";

  position: absolute;
  left: -1px;
  top: 7px;
  bottom: 7px;

  width: 3px;

  background: transparent;

  border-radius: 2px;
}

.nav-item:hover {
  color: var(--green);

  background: rgba(17, 28, 20, 0.68);

  border-color: rgba(59, 94, 67, 0.6);

  transform: translateX(2px);
}

.nav-item.active {
  color: var(--green-bright);

  background:
    linear-gradient(
      90deg,
      rgba(42, 77, 49, 0.48),
      rgba(17, 28, 20, 0.74)
    );

  border-color: var(--line-strong);

  box-shadow:
    inset 0 0 22px rgba(145, 242, 170, 0.03);
}

.nav-item.active::before {
  background: var(--green);

  box-shadow:
    0 0 10px rgba(145, 242, 170, 0.55);
}

.logout {
  width: calc(100% - 28px);

  margin: 14px;
  padding: 11px;

  background: transparent;
  color: var(--danger);

  border: 1px solid rgba(255, 133, 133, 0.35);

  cursor: pointer;
}

.logout:hover {
  background: rgba(92, 24, 24, 0.28);
  border-color: var(--danger);
}

.workspace {
  min-width: 0;
}

.topbar {
  min-height: var(--topbar-height);

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 22px;

  padding: 17px 26px;

  background:
    rgba(6, 11, 8, 0.92);

  border-bottom: 1px solid var(--line);

  backdrop-filter: blur(10px);
}

.operator {
  min-width: 190px;

  padding: 10px 14px;

  text-align: right;

  background:
    rgba(17, 28, 20, 0.7);

  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.operator span {
  display: block;

  color: var(--green-bright);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.operator small {
  display: block;
  margin-top: 3px;

  color: var(--green-dim);
  font-size: 10px;
  letter-spacing: 0.12em;
}

.content {
  padding: 20px;

  animation:
    content-enter 0.24s ease both;
}

@keyframes content-enter {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* =========================================================
   PANELS / CARDS
   ========================================================= */

.welcome,
.card,
.module-panel,
.admin-card,
.dialog-card,
.migration-upload-panel,
.migration-warning {
  background:
    linear-gradient(
      145deg,
      rgba(14, 24, 17, 0.98),
      rgba(8, 15, 10, 0.98)
    );

  border: 1px solid var(--line);

  box-shadow:
    var(--shadow),
    inset 0 0 35px rgba(145, 242, 170, 0.018);
}

.welcome {
  position: relative;

  padding: 25px;

  border-radius: var(--radius-md);

  overflow: hidden;
}

.welcome::after {
  content: "";

  position: absolute;
  top: 0;
  right: 0;

  width: 160px;
  height: 100%;

  background:
    linear-gradient(
      135deg,
      transparent,
      rgba(145, 242, 170, 0.035)
    );

  pointer-events: none;
}

.card-grid {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 15px;

  margin-top: 17px;
}

.card {
  position: relative;

  min-height: 110px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  padding: 19px;

  border-radius: var(--radius-md);

  overflow: hidden;

  transition:
    transform 0.17s ease,
    border-color 0.17s ease,
    background 0.17s ease;
}

.card::before {
  content: "";

  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 2px;

  background:
    linear-gradient(
      90deg,
      var(--green-dim),
      transparent
    );
}

.card:hover {
  transform: translateY(-2px);

  border-color: var(--line-strong);

  background:
    linear-gradient(
      145deg,
      rgba(20, 33, 23, 0.99),
      rgba(10, 18, 12, 0.99)
    );
}

.card span {
  color: var(--text-muted);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.card strong {
  margin-top: 16px;

  color: var(--green-bright);
  font-family: var(--font-display);
  font-size: 26px;
}

.module-panel {
  padding: 18px;

  border-radius: var(--radius-md);

  animation:
    panel-enter 0.2s ease both;
}

@keyframes panel-enter {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.module-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;

  padding-bottom: 12px;
  margin-bottom: 14px;

  border-bottom: 1px solid var(--line);
}

.module-header h3 {
  font-size: clamp(20px, 2vw, 26px);
}

.module-header .module-description {
  max-width: 720px;
}

.module-header > div:last-child {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
}

.module-empty-state {
  padding: 55px 24px;

  text-align: center;

  background:
    rgba(4, 8, 5, 0.52);

  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
}

.module-empty-state h3 {
  color: var(--green-bright);
}

.module-empty-state p {
  max-width: 650px;
  margin: 12px auto 0;

  color: var(--text-muted);
}


/* =========================================================
   ADMIN CARDS
   ========================================================= */

.admin-card-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 16px;
}

.admin-card {
  position: relative;

  min-height: 220px;

  display: flex;
  flex-direction: column;

  padding: 20px;

  border-radius: var(--radius-md);

  overflow: hidden;

  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.admin-card::after {
  content: "";

  position: absolute;
  right: -35px;
  bottom: -35px;

  width: 100px;
  height: 100px;

  border: 1px solid rgba(145, 242, 170, 0.04);
  border-radius: 50%;
}

.admin-card:hover {
  transform: translateY(-3px);

  border-color: var(--line-strong);

  box-shadow:
    0 22px 42px rgba(0, 0, 0, 0.36);
}

.admin-card h4 {
  margin-bottom: 8px;

  color: var(--green-bright);
}

.admin-card p:not(.eyebrow) {
  flex: 1;

  color: var(--text-muted);
  font-size: 13px;
}

.admin-card-disabled {
  opacity: 0.48;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.module-primary-button,
.personnel-action-button {
  border: 1px solid var(--line-strong);

  cursor: pointer;

  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease,
    transform 0.16s ease;
}

.module-primary-button {
  padding: 11px 15px;

  background:
    linear-gradient(
      180deg,
      rgba(39, 74, 47, 0.96),
      rgba(24, 48, 30, 0.96)
    );

  color: var(--green-bright);

  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.module-primary-button:hover:not(:disabled) {
  transform: translateY(-1px);

  background:
    linear-gradient(
      180deg,
      rgba(52, 96, 61, 0.99),
      rgba(29, 58, 36, 0.99)
    );

  border-color: var(--green-dim);
}

.module-primary-button:disabled,
.personnel-action-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.personnel-action-button {
  padding: 7px 9px;
  margin: 1px;

  background: rgba(17, 28, 20, 0.78);
  color: var(--green);

  font-size: 11px;
}

.personnel-action-button:hover:not(:disabled) {
  color: var(--green-bright);
  background: var(--panel-hover);
  border-color: var(--green-dim);
}


/* =========================================================
   TABLES
   ========================================================= */

.personnel-toolbar {
  display: grid;
  grid-template-columns:
    minmax(150px, auto)
    minmax(220px, 1fr)
    auto;

  align-items: center;
  gap: 12px;

  padding: 14px;

  margin-bottom: 15px;

  background:
    rgba(4, 8, 5, 0.68);

  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.personnel-toolbar label {
  color: var(--green-dim);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.personnel-toolbar span {
  color: var(--text-muted);
  font-size: 12px;
}

.personnel-table-wrapper {
  width: 100%;

  overflow-x: auto;

  border: 1px solid var(--line);
  border-radius: var(--radius-sm);

  background:
    rgba(4, 8, 5, 0.62);
}

.personnel-table {
  width: 100%;

  border-collapse: collapse;

  min-width: 760px;
}

.personnel-table thead {
  background:
    linear-gradient(
      180deg,
      rgba(24, 42, 29, 0.96),
      rgba(14, 25, 17, 0.96)
    );
}

.personnel-table th {
  position: sticky;
  top: 0;
  z-index: 2;

  padding: 13px 14px;

  text-align: left;

  color: var(--gold);

  border-bottom: 1px solid var(--line-strong);

  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.personnel-table td {
  padding: 13px 14px;

  color: #c9d6cc;

  border-bottom: 1px solid rgba(37, 57, 42, 0.7);

  font-size: 12px;
}

.personnel-table tbody tr {
  transition:
    background 0.14s ease;
}

.personnel-table tbody tr:hover {
  background:
    rgba(40, 69, 47, 0.22);
}

.personnel-table tbody tr:last-child td {
  border-bottom: 0;
}

.personnel-table strong {
  color: var(--green-bright);
}


/* =========================================================
   STATUS BADGES
   ========================================================= */

.personnel-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 5px 8px;

  border-radius: 999px;

  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.personnel-status::before {
  content: "";

  width: 6px;
  height: 6px;

  border-radius: 50%;
}

.status-active {
  color: var(--green-bright);
  background: rgba(34, 89, 46, 0.3);
  border: 1px solid rgba(145, 242, 170, 0.25);
}

.status-active::before {
  background: var(--green);

  box-shadow:
    0 0 7px rgba(145, 242, 170, 0.7);
}

.status-inactive {
  color: #d4a4a4;
  background: rgba(92, 24, 24, 0.25);
  border: 1px solid rgba(255, 133, 133, 0.24);
}

.status-inactive::before {
  background: var(--danger);
}


/* =========================================================
   PERSONNEL PROFILE
   ========================================================= */

.personnel-profile-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 15px;
}


/* =========================================================
   FORMS
   ========================================================= */

.admin-personnel-form {
  max-width: 850px;

  display: grid;
  grid-template-columns:
    minmax(170px, 230px)
    minmax(0, 1fr);

  gap: 12px 18px;

  padding: 22px;

  background:
    rgba(4, 8, 5, 0.58);

  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.admin-personnel-form label {
  align-self: center;
  margin: 0;
}

.admin-personnel-form textarea {
  resize: vertical;
}

.admin-personnel-form .status,
.admin-personnel-form .module-description,
.admin-personnel-form button[type="submit"] {
  grid-column: 1 / -1;
}

.admin-personnel-form button[type="submit"] {
  justify-self: start;

  min-width: 220px;

  margin-top: 6px;
}


/* =========================================================
   MIGRATION WIZARD
   ========================================================= */

.migration-wizard {
  display: grid;
  gap: 17px;
}

.migration-warning {
  padding: 16px 18px;

  border-left: 4px solid var(--gold);
  border-radius: var(--radius-sm);

  background:
    linear-gradient(
      90deg,
      var(--gold-soft),
      rgba(9, 16, 11, 0.92)
    );
}

.migration-warning strong {
  color: var(--gold);
}

.migration-warning p {
  margin: 7px 0 0;

  color: var(--text-muted);
  font-size: 12px;
}

.migration-upload-panel {
  padding: 20px;

  border-radius: var(--radius-md);
}

.migration-file-label {
  display: inline-block;

  margin-bottom: 10px;

  color: var(--green-bright);
  font-weight: 700;
}

#migration-file-input {
  display: block;

  width: 100%;

  padding: 12px;

  background: rgba(3, 6, 4, 0.8);
  color: var(--text-muted);

  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
}

.migration-error-list,
.migration-warning-list {
  padding: 16px 18px;

  border-radius: var(--radius-sm);
}

.migration-error-list {
  background: rgba(74, 20, 20, 0.25);
  border: 1px solid rgba(255, 133, 133, 0.22);
}

.migration-warning-list {
  background: rgba(91, 72, 22, 0.2);
  border: 1px solid rgba(228, 189, 98, 0.25);
}

.migration-error-list h4 {
  color: var(--danger);
}

.migration-warning-list h4 {
  color: var(--warning);
}

.migration-error-list li,
.migration-warning-list li {
  margin: 6px 0;

  color: var(--text-muted);
  font-size: 12px;
}


/* =========================================================
   DIALOGS
   ========================================================= */

dialog {
  max-width: 520px;

  padding: 0;

  background: transparent;

  border: 0;
}

dialog::backdrop {
  background:
    rgba(0, 0, 0, 0.8);

  backdrop-filter: blur(4px);
}

.dialog-card {
  padding: 24px;

  color: var(--text);

  border-radius: var(--radius-md);
}

.dialog-card button {
  margin-top: 14px;
  padding: 10px 14px;

  background: var(--panel-raised);
  color: var(--green);

  border: 1px solid var(--line-strong);

  cursor: pointer;
}


/* =========================================================
   OPERATION WORKSPACE
   ========================================================= */

.operation-workspace {
  overflow: hidden;
}

.operation-workspace-header {
  align-items: center;
}

.operation-workspace-header-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.operation-workspace-summary {
  display: grid;
  grid-template-columns:
    repeat(5, minmax(0, 1fr));

  gap: 12px;

  margin-bottom: 18px;
}

.operation-workspace-summary-item {
  min-width: 0;

  padding: 14px 15px;

  background:
    linear-gradient(
      145deg,
      rgba(12, 21, 15, 0.96),
      rgba(6, 12, 8, 0.96)
    );

  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.operation-workspace-summary-item span {
  display: block;

  color: var(--text-faint);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.operation-workspace-summary-item strong {
  display: block;

  margin-top: 8px;

  color: var(--green-bright);
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.25;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operation-workspace-summary-item progress {
  width: 100%;
  height: 8px;

  margin-top: 9px;

  accent-color: var(--green);
}

.operation-workspace-tabs {
  position: sticky;
  top: 0;
  z-index: 12;

  display: flex;
  gap: 8px;

  padding: 10px;

  margin: 0 0 18px;

  overflow-x: auto;

  background:
    linear-gradient(
      180deg,
      rgba(5, 10, 7, 0.98),
      rgba(8, 15, 10, 0.98)
    );

  border: 1px solid var(--line);
  border-radius: var(--radius-md);

  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.28);
}

.operation-workspace-tab {
  min-width: 138px;

  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;

  padding: 10px 11px;

  background:
    rgba(13, 22, 16, 0.92);

  color: var(--text-muted);

  border: 1px solid var(--line);
  border-radius: var(--radius-sm);

  cursor: pointer;

  white-space: nowrap;

  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease,
    transform 0.16s ease,
    box-shadow 0.16s ease;
}

.operation-workspace-tab:hover:not(:disabled) {
  color: var(--green-bright);

  background:
    rgba(22, 34, 25, 0.98);

  border-color: var(--line-strong);

  transform: translateY(-1px);
}

.operation-workspace-tab-active {
  color: var(--green-bright);

  background:
    linear-gradient(
      180deg,
      rgba(38, 70, 45, 0.98),
      rgba(22, 43, 27, 0.98)
    );

  border-color: var(--green-dim);

  box-shadow:
    inset 0 0 18px rgba(145, 242, 170, 0.05),
    0 0 0 1px rgba(145, 242, 170, 0.06);
}

.operation-workspace-tab:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.operation-workspace-tab > span:first-child {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.operation-workspace-tab > strong {
  color: var(--gold);
  font-size: 11px;
}

.operation-workspace-tab .personnel-status {
  flex: 0 0 auto;

  padding: 3px 6px;

  font-size: 8px;
}

.operation-workspace-content {
  min-height: 420px;
}

.operation-overview-text-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 15px;

  margin-top: 18px;
}


/* =========================================================
   DARK TACTICAL FORM CONTROLS
   ========================================================= */

#operations-command-center input,
#operations-command-center select,
#operations-command-center textarea,
.operation-workspace input,
.operation-workspace select,
.operation-workspace textarea {
  width: 100%;

  padding: 12px 13px;

  background:
    linear-gradient(
      180deg,
      #060b07,
      #030604
    );

  color: var(--green-bright);
  caret-color: var(--green);

  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);

  outline: none;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.015),
    inset 0 0 18px rgba(0, 0, 0, 0.3);

  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}

#operations-command-center input:hover:not(:disabled),
#operations-command-center select:hover:not(:disabled),
#operations-command-center textarea:hover:not(:disabled),
.operation-workspace input:hover:not(:disabled),
.operation-workspace select:hover:not(:disabled),
.operation-workspace textarea:hover:not(:disabled) {
  border-color: var(--green-dim);
}

#operations-command-center input:focus,
#operations-command-center select:focus,
#operations-command-center textarea:focus,
.operation-workspace input:focus,
.operation-workspace select:focus,
.operation-workspace textarea:focus {
  background:
    linear-gradient(
      180deg,
      #08100a,
      #040805
    );

  border-color: var(--green);

  box-shadow:
    0 0 0 3px rgba(145, 242, 170, 0.08),
    0 0 22px rgba(145, 242, 170, 0.05),
    inset 0 0 18px rgba(0, 0, 0, 0.32);
}

#operations-command-center input::placeholder,
#operations-command-center textarea::placeholder,
.operation-workspace input::placeholder,
.operation-workspace textarea::placeholder {
  color: #5e6e62;
}

#operations-command-center select,
.operation-workspace select {
  color-scheme: dark;
  background-color: #050906;
}

#operations-command-center select option,
.operation-workspace select option {
  background: #071009;
  color: var(--text);
}

#operations-command-center textarea,
.operation-workspace textarea {
  min-height: 110px;
  resize: vertical;
}

#operations-command-center input:disabled,
#operations-command-center select:disabled,
#operations-command-center textarea:disabled,
.operation-workspace input:disabled,
.operation-workspace select:disabled,
.operation-workspace textarea:disabled {
  cursor: not-allowed;

  color: var(--text-faint);

  background: #050806;

  border-color: rgba(37, 57, 42, 0.62);

  opacity: 0.58;
}

#operations-command-center label.card,
.operation-workspace label.card {
  min-height: auto;

  justify-content: flex-start;

  gap: 10px;
}

#operations-command-center label.card > span,
.operation-workspace label.card > span {
  color: var(--green-dim);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
}

#operations-command-center label.card:focus-within,
.operation-workspace label.card:focus-within {
  border-color: var(--green-dim);

  background:
    linear-gradient(
      145deg,
      rgba(18, 31, 21, 0.99),
      rgba(8, 15, 10, 0.99)
    );

  box-shadow:
    var(--shadow),
    inset 0 0 26px rgba(145, 242, 170, 0.025);
}


/* =========================================================
   SCROLLBARS
   ========================================================= */

* {
  scrollbar-width: thin;
  scrollbar-color:
    var(--line-strong)
    #050806;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: #050806;
}

*::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border: 2px solid #050806;
  border-radius: 8px;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--green-dim);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1180px) {
  :root {
    --sidebar-width: 235px;
  }

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

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

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

  .operation-workspace-summary {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

  .operation-overview-text-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}


@media (max-width: 860px) {
  .login-grid {
    grid-template-columns: 1fr;
  }

  .brand-panel {
    min-height: 320px;

    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .brand-panel,
  .auth-panel {
    padding: 38px 30px;
  }

  .dashboard {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: relative;

    height: auto;

    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .sidebar nav {
    display: grid;
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 4px;
  }

  .logout {
    max-width: 250px;
  }

  .topbar {
    position: relative;

    align-items: flex-start;

    padding: 16px 18px;
  }

  .content {
    padding: 14px;
  }

  .module-header {
    flex-direction: column;
  }

  .module-header > div:last-child {
    justify-content: flex-start;
  }

  .admin-personnel-form {
    grid-template-columns: 1fr;
  }

  .admin-personnel-form .status,
  .admin-personnel-form .module-description,
  .admin-personnel-form button[type="submit"] {
    grid-column: auto;
  }

  .personnel-toolbar {
    grid-template-columns: 1fr;
  }

  .operation-workspace-header-actions {
    justify-content: flex-start;
  }

  .operation-workspace-summary {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .operation-overview-text-grid {
    grid-template-columns: 1fr;
  }

  .operation-workspace-tabs {
    position: relative;
    top: auto;
  }
}


@media (max-width: 620px) {
  .login-screen {
    padding: 0;
  }

  .login-shell {
    min-height: 100vh;

    border-radius: 0;
  }

  .system-bar {
    flex-direction: column;
  }

  .brand-panel {
    min-height: 270px;
  }

  .logo {
    max-height: 190px;
  }

  .sidebar nav {
    grid-template-columns: 1fr;
  }

  .topbar {
    flex-direction: column;
  }

  .operator {
    width: 100%;
    text-align: left;
  }

  .card-grid,
  .admin-card-grid,
  .personnel-profile-grid {
    grid-template-columns: 1fr;
  }

  .module-panel {
    padding: 14px;
  }

  .module-primary-button {
    width: 100%;
  }

  .module-header > div:last-child {
    width: 100%;
  }

  .module-header > div:last-child button {
    width: 100%;
  }

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

  .operation-workspace-tab {
    min-width: 124px;
  }

  .operation-workspace-content {
    min-height: 320px;
  }
}

/* =========================================================
   MISSION PROFILE QUICK SELECT BUTTONS
   ========================================================= */

.operation-credit-toggle-grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(180px, 1fr));

  gap: 12px;

  margin-top: 14px;
}

.operation-credit-toggle-card {
  min-height: 54px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 12px 16px;

  background:
    linear-gradient(
      180deg,
      rgba(12, 21, 15, 0.98),
      rgba(7, 13, 9, 0.98)
    );

  color: var(--text-muted);

  border: 1px solid var(--line);
  border-radius: var(--radius-sm);

  cursor: pointer;

  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;

  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.operation-credit-toggle-card:hover:not(:disabled) {
  transform: translateY(-2px);

  color: var(--green-bright);

  border-color: var(--green-dim);

  background:
    linear-gradient(
      180deg,
      rgba(22, 36, 26, 0.98),
      rgba(12, 21, 15, 0.98)
    );

  box-shadow:
    0 0 18px rgba(145, 242, 170, 0.08);
}

.operation-credit-toggle-card-active {
  color: var(--green-bright);

  border-color: var(--green);

  background:
    linear-gradient(
      180deg,
      rgba(41, 74, 48, 0.98),
      rgba(22, 44, 27, 0.98)
    );

  box-shadow:
    inset 0 0 18px rgba(145, 242, 170, 0.08),
    0 0 20px rgba(145, 242, 170, 0.1);
}

.operation-credit-toggle-card span {
  color: inherit;
}

.operation-credit-toggle-card:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}


/* =========================================================
   GLOBAL DARK SELECT CONTROLS
   ========================================================= */

select,
.personnel-toolbar select,
#jacket-member-select {
  width: 100%;
  min-height: 42px;

  padding: 10px 38px 10px 12px;

  background-color: #050906;
  background-image:
    linear-gradient(
      45deg,
      transparent 50%,
      var(--green-dim) 50%
    ),
    linear-gradient(
      135deg,
      var(--green-dim) 50%,
      transparent 50%
    ),
    linear-gradient(
      180deg,
      #060b07,
      #030604
    );

  background-position:
    calc(100% - 17px) 50%,
    calc(100% - 12px) 50%,
    0 0;

  background-size:
    5px 5px,
    5px 5px,
    100% 100%;

  background-repeat: no-repeat;

  color: var(--green-bright);

  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);

  outline: none;
  color-scheme: dark;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.015),
    inset 0 0 18px rgba(0, 0, 0, 0.3);

  transition:
    background-color 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}

select:hover:not(:disabled),
.personnel-toolbar select:hover:not(:disabled),
#jacket-member-select:hover:not(:disabled) {
  border-color: var(--green-dim);
}

select:focus,
.personnel-toolbar select:focus,
#jacket-member-select:focus {
  border-color: var(--green);

  box-shadow:
    0 0 0 3px rgba(145, 242, 170, 0.08),
    0 0 22px rgba(145, 242, 170, 0.05),
    inset 0 0 18px rgba(0, 0, 0, 0.32);
}

select:disabled,
.personnel-toolbar select:disabled,
#jacket-member-select:disabled {
  cursor: not-allowed;
  color: var(--text-faint);
  border-color: rgba(37, 57, 42, 0.62);
  opacity: 0.58;
}

select option,
.personnel-toolbar select option,
#jacket-member-select option {
  background: #071009;
  color: var(--text);
}

/* =========================================================
   PERSONNEL JACKET COMPACT SEARCH CONTROL
   ========================================================= */

#jacket-member-search {
  width: 100% !important;
  min-width: 0 !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 7px 10px !important;

  background:
    linear-gradient(
      180deg,
      #060b07,
      #030604
    ) !important;

  background-color: #030604 !important;
  color: var(--green-bright) !important;
  caret-color: var(--green) !important;

  border: 1px solid var(--line-strong) !important;
  border-radius: var(--radius-sm) !important;
  outline: none !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.015),
    inset 0 0 18px rgba(0, 0, 0, 0.3) !important;

  color-scheme: dark;
  appearance: none;
  -webkit-appearance: none;
}

#jacket-member-search::placeholder {
  color: #718076 !important;
  opacity: 1;
}

#jacket-member-search:hover:not(:disabled) {
  border-color: var(--green-dim) !important;
}

#jacket-member-search:focus {
  background:
    linear-gradient(
      180deg,
      #08100a,
      #040805
    ) !important;

  border-color: var(--green) !important;

  box-shadow:
    0 0 0 3px rgba(145, 242, 170, 0.08),
    0 0 22px rgba(145, 242, 170, 0.05),
    inset 0 0 18px rgba(0, 0, 0, 0.32) !important;
}

#jacket-member-search::-webkit-search-cancel-button {
  filter: invert(88%) sepia(22%) saturate(556%) hue-rotate(79deg) brightness(103%);
  cursor: pointer;
}

/* =========================================================
   ROLE-BASED DASHBOARD READINESS
   ========================================================= */

.dashboard-readiness-panel {
  margin-top: 18px;

  background:
    radial-gradient(
      circle at 82% 12%,
      rgba(145, 242, 170, 0.07),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(13, 23, 16, 0.99),
      rgba(6, 12, 8, 0.99)
    );

  border-color: var(--line-strong);

  box-shadow:
    0 22px 46px rgba(0, 0, 0, 0.38),
    inset 0 0 55px rgba(145, 242, 170, 0.02);
}

.dashboard-readiness-header {
  align-items: center;
}

.dashboard-readiness-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 30px;

  padding: 7px 10px;

  color: var(--gold);

  background:
    rgba(209, 173, 92, 0.08);

  border: 1px solid rgba(209, 173, 92, 0.26);
  border-radius: 999px;

  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  white-space: nowrap;
}

.dashboard-readiness-grid {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 14px;
}

.dashboard-readiness-card {
  --readiness-accent:
    var(--green);

  --readiness-soft:
    rgba(145, 242, 170, 0.12);

  min-width: 0;
  min-height: 168px;

  display: grid;
  grid-template-columns:
    94px
    minmax(0, 1fr);

  align-items: center;
  gap: 15px;

  padding: 16px;

  background:
    linear-gradient(
      145deg,
      rgba(14, 24, 17, 0.98),
      rgba(7, 13, 9, 0.98)
    );

  border: 1px solid var(--line);
  border-radius: var(--radius-md);

  box-shadow:
    inset 0 0 30px var(--readiness-soft);

  overflow: hidden;

  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.dashboard-readiness-card:hover {
  transform: translateY(-2px);

  border-color: var(--readiness-accent);

  box-shadow:
    0 16px 32px rgba(0, 0, 0, 0.32),
    inset 0 0 34px var(--readiness-soft);
}

.dashboard-readiness-ready {
  --readiness-accent:
    var(--green);

  --readiness-soft:
    rgba(145, 242, 170, 0.11);
}

.dashboard-readiness-attention {
  --readiness-accent:
    var(--warning);

  --readiness-soft:
    rgba(228, 189, 98, 0.11);
}

.dashboard-readiness-critical {
  --readiness-accent:
    var(--danger);

  --readiness-soft:
    rgba(255, 133, 133, 0.1);
}

.dashboard-readiness-neutral {
  --readiness-accent:
    var(--green-dim);

  --readiness-soft:
    rgba(111, 151, 120, 0.08);
}

.dashboard-readiness-gauge {
  width: 86px;
  aspect-ratio: 1;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    conic-gradient(
      var(--readiness-accent)
      calc(
        var(--readiness-value) *
        1%
      ),
      rgba(58, 79, 64, 0.24)
      0
    );

  box-shadow:
    0 0 24px var(--readiness-soft),
    inset 0 0 0 1px rgba(255, 255, 255, 0.02);

  animation:
    readiness-gauge-enter 0.65s ease both;
}

.dashboard-readiness-gauge::before {
  content: "";

  width: 68px;
  aspect-ratio: 1;

  position: absolute;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(10, 18, 12, 0.98),
      rgba(4, 8, 5, 0.99)
    );

  border: 1px solid rgba(255, 255, 255, 0.035);
}

.dashboard-readiness-gauge-inner {
  position: relative;
  z-index: 1;

  display: grid;
  place-items: center;

  text-align: center;
}

.dashboard-readiness-gauge-inner strong {
  color: var(--readiness-accent);

  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
}

.dashboard-readiness-gauge-inner span {
  margin-top: 4px;

  color: var(--text-faint);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.dashboard-readiness-copy {
  min-width: 0;
}

.dashboard-readiness-copy .eyebrow {
  margin-bottom: 8px;

  color: var(--readiness-accent);
}

.dashboard-readiness-copy > strong {
  display: block;

  color: var(--text);
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.25;
}

.dashboard-readiness-bar {
  width: 100%;
  height: 8px;

  margin-top: 13px;

  overflow: hidden;

  background:
    rgba(3, 6, 4, 0.9);

  border: 1px solid var(--line);
  border-radius: 999px;
}

.dashboard-readiness-bar > span {
  display: block;

  height: 100%;

  background:
    linear-gradient(
      90deg,
      color-mix(
        in srgb,
        var(--readiness-accent) 68%,
        #16311d
      ),
      var(--readiness-accent)
    );

  border-radius: inherit;

  box-shadow:
    0 0 12px var(--readiness-soft);

  animation:
    readiness-bar-enter 0.72s ease both;
}

@keyframes readiness-gauge-enter {
  from {
    opacity: 0;
    transform: scale(0.86) rotate(-12deg);
  }

  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

@keyframes readiness-bar-enter {
  from {
    width: 0;
  }
}

.dashboard-command-attention {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 12px;

  margin-top: 14px;
}

.dashboard-command-card {
  --command-accent:
    var(--green-dim);

  --command-soft:
    rgba(111, 151, 120, 0.08);

  position: relative;

  min-height: 112px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  padding: 16px;

  background:
    linear-gradient(
      145deg,
      rgba(12, 21, 15, 0.98),
      rgba(6, 12, 8, 0.98)
    );

  border: 1px solid var(--line);
  border-left: 4px solid var(--command-accent);
  border-radius: var(--radius-sm);

  box-shadow:
    inset 0 0 24px var(--command-soft);
}

.dashboard-command-card .eyebrow {
  color: var(--command-accent);
}

.dashboard-command-card > strong {
  color: var(--command-accent);

  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1;
}

.dashboard-command-card > span {
  color: var(--text-muted);
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.dashboard-command-ready {
  --command-accent:
    var(--green);

  --command-soft:
    rgba(145, 242, 170, 0.1);
}

.dashboard-command-attention {
  --command-accent:
    var(--warning);

  --command-soft:
    rgba(228, 189, 98, 0.1);
}

.dashboard-command-critical {
  --command-accent:
    var(--danger);

  --command-soft:
    rgba(255, 133, 133, 0.1);
}

.dashboard-command-neutral {
  --command-accent:
    var(--green-dim);

  --command-soft:
    rgba(111, 151, 120, 0.08);
}

.dashboard-career-identity {
  min-width: 190px;

  display: grid;

  padding: 11px 14px;

  background:
    linear-gradient(
      145deg,
      rgba(20, 35, 24, 0.96),
      rgba(9, 16, 11, 0.98)
    );

  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}

.dashboard-career-identity span {
  color: var(--text-faint);

  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.dashboard-career-identity strong {
  margin-top: 4px;

  color: var(--green-bright);
  font-family: var(--font-display);
  font-size: 18px;
}

.dashboard-career-identity small {
  margin-top: 3px;

  color: var(--gold);
  font-size: 10px;
  letter-spacing: 0.08em;
}

.dashboard-next-steps {
  position: relative;

  margin-top: 14px;
  padding: 18px;

  background:
    linear-gradient(
      90deg,
      rgba(209, 173, 92, 0.09),
      rgba(8, 15, 10, 0.98)
    );

  border: 1px solid rgba(209, 173, 92, 0.24);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius-sm);

  overflow: hidden;
}

.dashboard-next-steps::after {
  content: "";

  position: absolute;
  right: -45px;
  top: -45px;

  width: 125px;
  height: 125px;

  border: 1px solid rgba(209, 173, 92, 0.07);
  border-radius: 50%;
}

.dashboard-next-steps h4 {
  color: var(--green-bright);
}

.dashboard-next-steps .dashboard-readiness-status {
  margin-top: 12px;
}


/* =========================================================
   DASHBOARD VISUAL POLISH
   ========================================================= */

#dashboard .welcome {
  border-left: 4px solid var(--green);
}

#dashboard .welcome::before {
  content: "HADES // COMMAND NETWORK";

  display: block;

  margin-bottom: 10px;

  color: var(--green-dim);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
}

#dashboard .card-grid .card {
  min-height: 126px;

  background:
    radial-gradient(
      circle at 88% 18%,
      rgba(145, 242, 170, 0.07),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      rgba(16, 27, 19, 0.99),
      rgba(7, 13, 9, 0.99)
    );
}

#dashboard .card-grid .card::after {
  content: "";

  position: absolute;
  right: 14px;
  bottom: 14px;

  width: 30px;
  height: 30px;

  border-right: 1px solid rgba(145, 242, 170, 0.12);
  border-bottom: 1px solid rgba(145, 242, 170, 0.12);
}

#dashboard .card-grid .card strong {
  font-size: 31px;

  text-shadow:
    0 0 18px rgba(145, 242, 170, 0.12);
}

#dashboard .card-grid .card:hover {
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.34),
    inset 0 0 32px rgba(145, 242, 170, 0.025);
}


/* =========================================================
   ROLE-BASED DASHBOARD RESPONSIVE
   ========================================================= */

@media (max-width: 1320px) {
  .dashboard-readiness-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}


@media (max-width: 860px) {
  .dashboard-readiness-header {
    align-items: flex-start;
  }

  .dashboard-command-attention {
    grid-template-columns: 1fr;
  }

  .dashboard-career-identity {
    width: 100%;
  }
}


@media (max-width: 620px) {
  .dashboard-readiness-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-readiness-card {
    min-height: 142px;

    grid-template-columns:
      78px
      minmax(0, 1fr);

    padding: 14px;
  }

  .dashboard-readiness-gauge {
    width: 72px;
  }

  .dashboard-readiness-gauge::before {
    width: 57px;
  }

  .dashboard-readiness-gauge-inner strong {
    font-size: 18px;
  }

  .dashboard-readiness-status {
    width: 100%;

    white-space: normal;
    text-align: center;
  }
}

/* =========================================================
   COMPACT DASHBOARD ABOVE-THE-FOLD LAYOUT
   ========================================================= */

#dashboard .welcome {
  min-height: 0;

  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto;

  grid-template-areas:
    "welcome-title system-status"
    "welcome-details welcome-details";

  align-items: center;
  gap: 7px 18px;

  padding: 15px 20px;

  border-left-width: 3px;
}

#dashboard .welcome::before {
  content: none;
}

#dashboard .welcome::after {
  width: 100px;
}

#dashboard .welcome .eyebrow {
  grid-area: system-status;

  margin: 0;

  justify-self: end;

  padding: 6px 9px;

  color: var(--green-bright);

  background:
    rgba(34, 89, 46, 0.18);

  border: 1px solid rgba(145, 242, 170, 0.2);
  border-radius: 999px;

  font-size: 9px;
  letter-spacing: 0.13em;
  white-space: nowrap;
}

#dashboard .welcome h3 {
  grid-area: welcome-title;

  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.05;
}

#dashboard .welcome p:last-child {
  grid-area: welcome-details;

  margin: 0;

  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/*
  When there are no pending access requests, collapse
  the administrative review panel into a compact strip.
*/
#dashboard-access-request-alert:has(
  .personnel-status.status-inactive
) {
  padding: 11px 16px;
}

#dashboard-access-request-alert:has(
  .personnel-status.status-inactive
) .module-header {
  min-height: 42px;

  align-items: center;

  padding: 0;
  margin: 0;

  border-bottom: 0;
}

#dashboard-access-request-alert:has(
  .personnel-status.status-inactive
) .eyebrow {
  display: none;
}

#dashboard-access-request-alert:has(
  .personnel-status.status-inactive
) h3 {
  font-size: 18px;
}

#dashboard-access-request-alert:has(
  .personnel-status.status-inactive
) .module-description {
  margin-top: 2px;

  font-size: 11px;
  line-height: 1.25;
}

#dashboard-access-request-alert:has(
  .personnel-status.status-inactive
) .module-header > div:last-child {
  align-items: center;
}

#dashboard-access-request-alert:has(
  .personnel-status.status-inactive
) #dashboard-review-access-button {
  padding: 8px 11px;
}


/*
  Reduce spacing between the compact dashboard sections.
*/
#dashboard .content {
  padding-top: 14px;
}

#dashboard-access-request-alert {
  margin-bottom: 12px !important;
}

#dashboard .welcome {
  margin-bottom: 0;
}

.dashboard-readiness-panel {
  margin-top: 12px;
}


/* =========================================================
   COMPACT DASHBOARD RESPONSIVE
   ========================================================= */

@media (max-width: 860px) {
  #dashboard .welcome {
    grid-template-columns:
      minmax(0, 1fr)
      auto;

    padding: 14px 16px;
  }

  #dashboard .welcome h3 {
    font-size: clamp(22px, 5vw, 29px);
  }

  #dashboard .welcome p:last-child {
    font-size: 11px;
  }
}


@media (max-width: 620px) {
  #dashboard .welcome {
    grid-template-columns: 1fr;

    grid-template-areas:
      "welcome-title"
      "system-status"
      "welcome-details";

    gap: 6px;

    padding: 13px 14px;
  }

  #dashboard .welcome .eyebrow {
    justify-self: start;
  }

  #dashboard .welcome p:last-child {
    white-space: normal;
    overflow: visible;
    text-overflow: initial;
  }

  #dashboard-access-request-alert:has(
    .personnel-status.status-inactive
  ) .module-header {
    align-items: stretch;
  }

  #dashboard-access-request-alert:has(
    .personnel-status.status-inactive
  ) .module-header > div:last-child {
    width: 100%;
  }
}

/* =========================================================
   HADES GLOBAL DESIGN SYSTEM
   ========================================================= */

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  --header-compact-height: 64px;
  --panel-accent-width: 3px;
}


/* ---------------------------------------------------------
   GLOBAL MODULE SHELL
   --------------------------------------------------------- */

.module-panel {
  position: relative;

  padding: 16px;

  border-left:
    var(--panel-accent-width)
    solid
    rgba(145, 242, 170, 0.48);

  overflow: hidden;
}

.module-panel::before {
  content: "";

  position: absolute;
  top: 0;
  left: 0;

  width: 150px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      var(--green),
      transparent
    );

  opacity: 0.55;

  pointer-events: none;
}

.module-panel + .module-panel {
  margin-top: 14px;
}


/* ---------------------------------------------------------
   COMPACT MODULE HEADERS
   --------------------------------------------------------- */

.module-header {
  min-height: 0;

  align-items: center;

  padding-bottom: 10px;
  margin-bottom: 12px;
}

.module-header > div:first-child {
  min-width: 0;
}

.module-header .eyebrow {
  margin-bottom: 4px;
}

.module-header h3 {
  font-size:
    clamp(
      19px,
      1.8vw,
      25px
    );
}

.module-header .module-description {
  margin-top: 4px;

  font-size: 12px;
  line-height: 1.35;
}

.module-header > div:last-child {
  align-items: center;
}


/* ---------------------------------------------------------
   STANDARD ACTION BARS
   --------------------------------------------------------- */

.module-action-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 10px 12px;
  margin-bottom: 12px;

  background:
    rgba(4, 8, 5, 0.68);

  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.module-action-bar > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}


/* ---------------------------------------------------------
   STANDARD SUMMARY GRID
   --------------------------------------------------------- */

.module-summary-grid {
  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(150px, 1fr)
    );

  gap: 10px;

  margin-bottom: 14px;
}

.module-summary-card {
  position: relative;

  min-height: 86px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  padding: 13px 14px;

  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(145, 242, 170, 0.06),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      rgba(14, 24, 17, 0.98),
      rgba(7, 13, 9, 0.98)
    );

  border: 1px solid var(--line);
  border-radius: var(--radius-sm);

  overflow: hidden;
}

.module-summary-card::before {
  content: "";

  position: absolute;
  top: 0;
  left: 0;

  width: 62px;
  height: 2px;

  background:
    var(--green-dim);
}

.module-summary-card span {
  color: var(--text-faint);

  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.module-summary-card strong {
  margin-top: 9px;

  color: var(--green-bright);

  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
}


/* ---------------------------------------------------------
   STANDARD SECTION CARDS
   --------------------------------------------------------- */

.module-section {
  padding: 14px;

  background:
    rgba(4, 8, 5, 0.56);

  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.module-section + .module-section {
  margin-top: 12px;
}

.module-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding-bottom: 9px;
  margin-bottom: 11px;

  border-bottom: 1px solid var(--line);
}

.module-section-header h4 {
  font-size: 16px;
}

.module-section-header p {
  margin: 3px 0 0;

  color: var(--text-muted);
  font-size: 11px;
}


/* ---------------------------------------------------------
   SHARED TAB SYSTEM
   --------------------------------------------------------- */

.module-tabs {
  display: flex;
  gap: 7px;

  padding: 7px;
  margin-bottom: 12px;

  overflow-x: auto;

  background:
    rgba(4, 8, 5, 0.72);

  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.module-tab {
  min-height: 36px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  padding: 8px 11px;

  color: var(--text-muted);

  background:
    rgba(13, 22, 16, 0.88);

  border: 1px solid var(--line);
  border-radius: var(--radius-sm);

  cursor: pointer;
  white-space: nowrap;

  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;

  transition:
    color 0.16s ease,
    background 0.16s ease,
    border-color 0.16s ease,
    transform 0.16s ease;
}

.module-tab:hover:not(:disabled) {
  color: var(--green-bright);

  background:
    var(--panel-hover);

  border-color: var(--line-strong);

  transform: translateY(-1px);
}

.module-tab.active,
.module-tab[aria-selected="true"] {
  color: var(--green-bright);

  background:
    linear-gradient(
      180deg,
      rgba(40, 74, 47, 0.96),
      rgba(22, 43, 27, 0.96)
    );

  border-color: var(--green-dim);

  box-shadow:
    inset 0 0 16px rgba(145, 242, 170, 0.05);
}


/* ---------------------------------------------------------
   STANDARD STATUS BLOCKS
   --------------------------------------------------------- */

.module-status-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;

  padding: 9px 11px;

  background:
    rgba(4, 8, 5, 0.7);

  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.module-status-strip strong {
  color: var(--green-bright);
}

.module-status-strip span {
  color: var(--text-muted);
  font-size: 10px;
}

.module-status-strip-success {
  border-left: 3px solid var(--success);
}

.module-status-strip-warning {
  border-left: 3px solid var(--warning);
}

.module-status-strip-danger {
  border-left: 3px solid var(--danger);
}


/* ---------------------------------------------------------
   COMPACT CARD DENSITY
   --------------------------------------------------------- */

.card {
  min-height: 96px;

  padding: 15px;
}

.card strong {
  margin-top: 11px;

  font-size: 23px;
}

.admin-card {
  min-height: 185px;

  padding: 17px;
}

.admin-card p:not(.eyebrow) {
  font-size: 12px;
  line-height: 1.45;
}


/* ---------------------------------------------------------
   BUTTON CONSISTENCY
   --------------------------------------------------------- */

.module-primary-button {
  min-height: 36px;

  padding: 9px 13px;
}

.personnel-action-button {
  min-height: 32px;

  padding: 6px 9px;
}

.module-primary-button,
.personnel-action-button,
.nav-item,
.operation-workspace-tab,
.module-tab {
  letter-spacing: 0.045em;
}


/* ---------------------------------------------------------
   FORM DENSITY
   --------------------------------------------------------- */

.admin-personnel-form {
  gap: 10px 16px;

  padding: 17px;
}

.auth-panel label,
.admin-personnel-form label {
  font-size: 10px;
}

.auth-panel input,
.admin-personnel-form input,
.admin-personnel-form select,
.admin-personnel-form textarea,
.personnel-toolbar input {
  padding: 10px 12px;
}

.admin-personnel-form textarea {
  min-height: 96px;
}


/* ---------------------------------------------------------
   TABLE DENSITY
   --------------------------------------------------------- */

.personnel-table th {
  padding: 10px 12px;
}

.personnel-table td {
  padding: 10px 12px;
}

.personnel-toolbar {
  padding: 10px 12px;
  margin-bottom: 11px;
}


/* ---------------------------------------------------------
   EMPTY AND UNDER-CONSTRUCTION STATES
   --------------------------------------------------------- */

.module-empty-state {
  padding: 34px 20px;
}

.module-empty-state::before {
  content: "MODULE STATUS";

  display: block;

  margin-bottom: 7px;

  color: var(--gold);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.15em;
}

.module-under-construction {
  padding: 18px;

  background:
    linear-gradient(
      90deg,
      rgba(209, 173, 92, 0.1),
      rgba(8, 15, 10, 0.96)
    );

  border: 1px solid rgba(209, 173, 92, 0.25);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius-sm);
}

.module-under-construction strong {
  color: var(--gold);
}

.module-under-construction p {
  margin: 6px 0 0;

  color: var(--text-muted);
  font-size: 11px;
}


/* ---------------------------------------------------------
   MOBILE-FIRST GLOBAL TIGHTENING
   --------------------------------------------------------- */

@media (max-width: 860px) {
  .module-panel {
    padding: 14px;
  }

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

  .module-header {
    gap: 10px;
  }

  .module-header > div:last-child {
    width: 100%;
  }

  .module-action-bar {
    align-items: stretch;
  }
}


@media (max-width: 620px) {
  .module-panel {
    padding: 12px;

    border-left-width: 2px;
  }

  .module-summary-grid {
    grid-template-columns: 1fr;
  }

  .module-summary-card {
    min-height: 74px;
  }

  .module-header h3 {
    font-size: 20px;
  }

  .module-header .module-description {
    font-size: 11px;
  }

  .module-tabs {
    padding: 6px;
  }

  .module-tab {
    min-height: 34px;

    padding: 7px 9px;
  }

  .admin-card {
    min-height: 150px;
  }

  .module-action-bar {
    flex-direction: column;
  }

  .module-action-bar > div {
    width: 100%;
  }
}

/* =========================================================
   SHARED RANK INSIGNIA COMPONENTS
   ========================================================= */

.rank-insignia-sprite {
  flex: 0 0 auto;

  display: inline-block;

  background-repeat: no-repeat;

  border-radius: 6px;

  filter:
    drop-shadow(
      0 0 9px
      rgba(145, 242, 170, 0.17)
    );
}

.rank-insignia-fallback {
  flex: 0 0 auto;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: var(--green-bright);

  background:
    linear-gradient(
      145deg,
      rgba(20, 35, 24, 0.98),
      rgba(7, 13, 9, 0.98)
    );

  border: 1px solid var(--line-strong);
  border-radius: 6px;

  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
}


/* =========================================================
   PERSONNEL JACKET SNAPSHOT
   ========================================================= */

.jacket-snapshot-panel {
  padding: 16px;
}

.jacket-snapshot-layout {
  display: grid;
  grid-template-columns:
    minmax(110px, 145px)
    minmax(0, 1fr);

  gap: 18px;

  align-items: start;
}

.jacket-snapshot-portrait {
  min-height: 145px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 50% 28%,
      rgba(145, 242, 170, 0.08),
      transparent 58%
    ),
    var(--panel-soft);

  border: 1px solid var(--line);
  border-radius: var(--radius-sm);

  box-shadow:
    inset 0 0 28px rgba(0, 0, 0, 0.32);
}

.jacket-snapshot-photo {
  display: block;

  width: 100%;
  height: 145px;

  object-fit: cover;
}

.jacket-snapshot-initials {
  margin: 0;

  color: var(--green-bright);

  font-family: var(--font-display);
  font-size: 38px;
  letter-spacing: 4px;

  text-shadow:
    0 0 16px rgba(145, 242, 170, 0.16);
}

.jacket-snapshot-content {
  min-width: 0;
}

.jacket-snapshot-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;

  padding-bottom: 13px;
  margin-bottom: 12px;

  border-bottom: 1px solid var(--line);
}

.jacket-snapshot-identity {
  min-width: 0;

  display: flex;
  align-items: center;
  gap: 14px;
}

.jacket-snapshot-rank-insignia {
  flex: 0 0 auto;

  background-color:
    rgba(4, 8, 5, 0.4);

  border:
    1px solid
    rgba(145, 242, 170, 0.1);
}

.jacket-snapshot-identity-copy {
  min-width: 0;
}

.jacket-snapshot-identity-copy h3 {
  overflow: hidden;

  color: var(--text);

  text-overflow: ellipsis;
  white-space: nowrap;
}

.jacket-snapshot-callsign {
  margin-top: 5px;

  font-size: 15px;
}

.jacket-snapshot-callsign strong {
  color: var(--green-bright);
}

.jacket-snapshot-details {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 0 22px;

  margin: 0;
}

.jacket-snapshot-detail {
  min-width: 0;

  display: grid;
  grid-template-columns:
    minmax(105px, auto)
    minmax(0, 1fr);

  gap: 10px;

  align-items: baseline;

  padding: 7px 0;

  border-bottom:
    1px solid
    rgba(37, 57, 42, 0.55);
}

.jacket-snapshot-detail dt {
  margin: 0;

  color: var(--text-faint);

  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.jacket-snapshot-detail dd {
  min-width: 0;

  margin: 0;

  overflow: hidden;

  color: var(--green-bright);

  font-weight: 700;

  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jacket-snapshot-awards {
  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(92px, 116px)
    );

  gap: 9px;

  margin-top: 15px;

  align-items: stretch;
}

.jacket-snapshot-award {
  min-height: 86px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;

  padding: 8px;

  background:
    linear-gradient(
      145deg,
      rgba(13, 22, 16, 0.96),
      rgba(6, 12, 8, 0.98)
    );

  border: 1px solid var(--line);
  border-radius: var(--radius-sm);

  text-align: center;

  transition:
    transform 0.17s ease,
    border-color 0.17s ease;
}

.jacket-snapshot-award:hover {
  transform: translateY(-2px);

  border-color: var(--line-strong);
}

.jacket-snapshot-award img {
  display: block;

  width: 54px;
  height: 44px;

  object-fit: contain;
}

.jacket-snapshot-award > span:last-child {
  color: var(--green-bright);

  font-size: 9px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.03em;
}

.jacket-snapshot-award-fallback {
  width: 54px;
  height: 44px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--text-faint);

  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
}


/* =========================================================
   PERSONNEL JACKET RESPONSIVE
   ========================================================= */

@media (max-width: 860px) {
  .jacket-snapshot-layout {
    grid-template-columns:
      110px
      minmax(0, 1fr);

    gap: 14px;
  }

  .jacket-snapshot-portrait,
  .jacket-snapshot-photo {
    min-height: 120px;
    height: 120px;
  }

  .jacket-snapshot-rank-insignia {
    width: 58px !important;
    height: 58px !important;
  }

  .jacket-snapshot-details {
    grid-template-columns: 1fr;
  }
}


@media (max-width: 620px) {
  .jacket-snapshot-panel {
    padding: 12px;
  }

  .jacket-snapshot-layout {
    grid-template-columns: 1fr;

    gap: 12px;
  }

  .jacket-snapshot-portrait {
    min-height: 96px;
    height: 96px;
  }

  .jacket-snapshot-photo {
    height: 96px;
  }

  .jacket-snapshot-header {
    align-items: center;
  }

  .jacket-snapshot-identity {
    gap: 10px;
  }

  .jacket-snapshot-rank-insignia {
    width: 48px !important;
    height: 48px !important;
  }

  .jacket-snapshot-identity-copy h3 {
    font-size: 20px;
  }

  .jacket-snapshot-callsign {
    font-size: 12px;
  }

  .jacket-snapshot-detail {
    grid-template-columns:
      minmax(94px, auto)
      minmax(0, 1fr);
  }

  .jacket-snapshot-awards {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

/* =========================================================
   INDIVIDUAL RANK INSIGNIA IMAGES
   ========================================================= */

.rank-insignia-frame {
  flex: 0 0 auto;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(145, 242, 170, 0.07),
      transparent 62%
    ),
    rgba(4, 8, 5, 0.36);

  border:
    1px solid
    rgba(145, 242, 170, 0.12);

  border-radius: 8px;

  box-shadow:
    inset 0 0 18px rgba(0, 0, 0, 0.32),
    0 0 14px rgba(145, 242, 170, 0.06);
}

.rank-insignia-image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;

  transform: scale(1.22);

  filter:
    drop-shadow(
      0 0 8px
      rgba(145, 242, 170, 0.18)
    );
}


/* ---------------------------------------------------------
   DASHBOARD RANK INSIGNIA
   --------------------------------------------------------- */

.dashboard-rank-welcome .rank-insignia-frame {
  width: 82px !important;
  height: 82px !important;
}

.dashboard-rank-welcome .rank-insignia-image {
  transform: scale(1.3);
}


/* ---------------------------------------------------------
   PERSONNEL JACKET RANK INSIGNIA
   --------------------------------------------------------- */

.jacket-snapshot-rank-insignia {
  width: 104px !important;
  height: 104px !important;

  border-color:
    rgba(145, 242, 170, 0.18);
}

.jacket-snapshot-rank-insignia .rank-insignia-image {
  transform: scale(1.34);
}


/* =========================================================
   RANK INSIGNIA RESPONSIVE
   ========================================================= */

@media (max-width: 860px) {
  .dashboard-rank-welcome .rank-insignia-frame {
    width: 68px !important;
    height: 68px !important;
  }

  .jacket-snapshot-rank-insignia {
    width: 82px !important;
    height: 82px !important;
  }
}


@media (max-width: 620px) {
  .dashboard-rank-welcome .rank-insignia-frame {
    width: 56px !important;
    height: 56px !important;
  }

  .jacket-snapshot-rank-insignia {
    width: 66px !important;
    height: 66px !important;
  }

  .rank-insignia-image {
    transform: scale(1.18);
  }
}

/* =========================================================
   TACTICAL COMMAND STATUS BAR
   ========================================================= */

.hades-command-status-bar {
  display: flex;
  align-items: center;
  gap: 8px;

  width: 100%;

  margin-bottom: 10px;
  padding: 7px 9px;

  overflow-x: auto;

  background:
    linear-gradient(
      180deg,
      rgba(8, 14, 10, 0.98),
      rgba(4, 8, 5, 0.98)
    );

  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  border-radius: var(--radius-sm);

  box-shadow:
    inset 0 0 22px rgba(145, 242, 170, 0.02),
    0 8px 20px rgba(0, 0, 0, 0.22);
}

.hades-command-status-item {
  flex: 0 0 auto;

  min-height: 30px;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 6px 9px;

  background:
    rgba(13, 22, 16, 0.8);

  border: 1px solid rgba(37, 57, 42, 0.8);
  border-radius: 999px;

  white-space: nowrap;
}

.hades-command-status-item > span:not(
  .hades-command-status-dot
) {
  color: var(--text-faint);

  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.hades-command-status-item > strong {
  color: var(--green-bright);

  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hades-command-status-dot {
  width: 7px;
  height: 7px;

  flex: 0 0 auto;

  border-radius: 50%;
}

.hades-command-status-dot.status-online,
.hades-command-status-dot.status-ready {
  background: var(--green);

  box-shadow:
    0 0 7px rgba(145, 242, 170, 0.85),
    0 0 13px rgba(145, 242, 170, 0.35);
}

.hades-command-status-dot.status-warning {
  background: var(--warning);

  box-shadow:
    0 0 7px rgba(228, 189, 98, 0.8),
    0 0 13px rgba(228, 189, 98, 0.3);
}

.hades-command-status-dot.status-danger {
  background: var(--danger);

  box-shadow:
    0 0 7px rgba(255, 133, 133, 0.8),
    0 0 13px rgba(255, 133, 133, 0.3);
}

.hades-command-status-identity {
  margin-left: auto;

  background:
    linear-gradient(
      180deg,
      rgba(39, 74, 47, 0.86),
      rgba(20, 39, 24, 0.92)
    );

  border-color: var(--line-strong);
}

.hades-command-status-identity > strong {
  color: var(--gold);
}


/* =========================================================
   TACTICAL COMMAND STATUS BAR RESPONSIVE
   ========================================================= */

@media (max-width: 860px) {
  .hades-command-status-bar {
    gap: 6px;

    padding: 6px 7px;
  }

  .hades-command-status-item {
    min-height: 28px;

    padding: 5px 8px;
  }

  .hades-command-status-identity {
    margin-left: 0;
  }
}


@media (max-width: 620px) {
  .hades-command-status-bar {
    margin-bottom: 8px;
  }

  .hades-command-status-item > span:not(
    .hades-command-status-dot
  ) {
    font-size: 7px;
  }

  .hades-command-status-item > strong {
    font-size: 8px;
  }
}

/* =========================================================
   TACTICAL NAVIGATION ICONS
   ========================================================= */

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-item::after {
  content: "";
  order: -1;

  width: 16px;
  height: 16px;

  flex: 0 0 16px;

  background-color: currentColor;

  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;

  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;

  opacity: 0.78;

  transition:
    opacity 0.16s ease,
    transform 0.16s ease,
    filter 0.16s ease;
}

.nav-item:hover::after,
.nav-item.active::after {
  opacity: 1;
  transform: scale(1.06);

  filter:
    drop-shadow(
      0 0 5px
      rgba(145, 242, 170, 0.35)
    );
}

#dashboard-nav-button::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3C/svg%3E");
}

#personnel-nav-button::after,
#jackets-nav-button::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.2'/%3E%3Cpath d='M5.5 20c.7-4.2 3-6.3 6.5-6.3s5.8 2.1 6.5 6.3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.2'/%3E%3Cpath d='M5.5 20c.7-4.2 3-6.3 6.5-6.3s5.8 2.1 6.5 6.3'/%3E%3C/svg%3E");
}

#operations-nav-button::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 3.5v3M12 17.5v3M3.5 12h3M17.5 12h3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 3.5v3M12 17.5v3M3.5 12h3M17.5 12h3'/%3E%3C/svg%3E");
}

#calendar-nav-button::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M7 3v4M17 3v4M3 9h18M7 13h2M11 13h2M15 13h2M7 17h2M11 17h2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M7 3v4M17 3v4M3 9h18M7 13h2M11 13h2M15 13h2M7 17h2M11 17h2'/%3E%3C/svg%3E");
}

#training-nav-button::after,
#training-catalog-nav-button::after,
#qualifications-nav-button::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5 12 3l8 2.5-8 2.7L4 5.5Z'/%3E%3Cpath d='M6.5 7.2v5.3c0 2 2.5 3.5 5.5 3.5s5.5-1.5 5.5-3.5V7.2M20 6v6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5 12 3l8 2.5-8 2.7L4 5.5Z'/%3E%3Cpath d='M6.5 7.2v5.3c0 2 2.5 3.5 5.5 3.5s5.5-1.5 5.5-3.5V7.2M20 6v6'/%3E%3C/svg%3E");
}

#awards-nav-button::after,
#promotions-nav-button::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='5'/%3E%3Cpath d='m8.5 13-1 8 4.5-2.5L16.5 21l-1-8'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='5'/%3E%3Cpath d='m8.5 13-1 8 4.5-2.5L16.5 21l-1-8'/%3E%3C/svg%3E");
}

#media-nav-button::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m10 9 5 3-5 3V9Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m10 9 5 3-5 3V9Z'/%3E%3C/svg%3E");
}

#administration-nav-button::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1-2.8 2.8-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.6v.2h-4V21a1.7 1.7 0 0 0-1-1.6 1.7 1.7 0 0 0-1.9.3l-.1.1L4.2 17l.1-.1a1.7 1.7 0 0 0 .3-1.9A1.7 1.7 0 0 0 3 14H2.8v-4H3a1.7 1.7 0 0 0 1.6-1 1.7 1.7 0 0 0-.3-1.9L4.2 7 7 4.2l.1.1A1.7 1.7 0 0 0 9 4.6 1.7 1.7 0 0 0 10 3V2.8h4V3a1.7 1.7 0 0 0 1 1.6 1.7 1.7 0 0 0 1.9-.3l.1-.1L19.8 7l-.1.1a1.7 1.7 0 0 0-.3 1.9 1.7 1.7 0 0 0 1.6 1h.2v4H21a1.7 1.7 0 0 0-1.6 1Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1-2.8 2.8-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.6v.2h-4V21a1.7 1.7 0 0 0-1-1.6 1.7 1.7 0 0 0-1.9.3l-.1.1L4.2 17l.1-.1a1.7 1.7 0 0 0 .3-1.9A1.7 1.7 0 0 0 3 14H2.8v-4H3a1.7 1.7 0 0 0 1.6-1 1.7 1.7 0 0 0-.3-1.9L4.2 7 7 4.2l.1.1A1.7 1.7 0 0 0 9 4.6 1.7 1.7 0 0 0 10 3V2.8h4V3a1.7 1.7 0 0 0 1 1.6 1.7 1.7 0 0 0 1.9-.3l.1-.1L19.8 7l-.1.1a1.7 1.7 0 0 0-.3 1.9 1.7 1.7 0 0 0 1.6 1h.2v4H21a1.7 1.7 0 0 0-1.6 1Z'/%3E%3C/svg%3E");
}

@media (max-width: 620px) {
  .nav-item {
    gap: 9px;
  }

  .nav-item::after {
    width: 15px;
    height: 15px;

    flex-basis: 15px;
  }
}

/* =========================================================
   DASHBOARD COMMAND HERO CARD
   ========================================================= */

.dashboard-hero-card {
  position: relative;

  display: grid;
  grid-template-columns:
    minmax(0, 1.45fr)
    minmax(340px, 0.85fr);

  gap: 16px;

  margin-bottom: 12px;
  padding: 16px;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 15% 35%,
      rgba(145, 242, 170, 0.08),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(15, 27, 18, 0.99),
      rgba(6, 12, 8, 0.99)
    );

  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--green);
  border-radius: var(--radius-md);

  box-shadow:
    0 20px 42px rgba(0, 0, 0, 0.34),
    inset 0 0 44px rgba(145, 242, 170, 0.02);
}

.dashboard-hero-card::after {
  content: "";

  position: absolute;
  right: -70px;
  top: -70px;

  width: 190px;
  height: 190px;

  border: 1px solid rgba(145, 242, 170, 0.055);
  border-radius: 50%;

  box-shadow:
    0 0 0 28px rgba(145, 242, 170, 0.018),
    0 0 0 56px rgba(145, 242, 170, 0.012);

  pointer-events: none;
}

.dashboard-hero-identity {
  min-width: 0;

  display: grid;
  grid-template-columns:
    auto
    minmax(0, 1fr)
    auto;

  align-items: center;
  gap: 16px;
}

.dashboard-hero-rank {
  flex: 0 0 auto;
}

.dashboard-hero-rank-insignia {
  width: 112px !important;
  height: 112px !important;

  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(145, 242, 170, 0.11),
      transparent 64%
    ),
    rgba(4, 8, 5, 0.54);

  border-color: rgba(145, 242, 170, 0.2);
}

.dashboard-hero-rank-insignia .rank-insignia-image {
  transform: scale(1.18);
}

.dashboard-hero-copy {
  min-width: 0;
}

.dashboard-hero-copy .eyebrow {
  margin-bottom: 5px;
}

.dashboard-hero-copy h2 {
  overflow: hidden;

  color: var(--text);

  font-size: clamp(24px, 2.5vw, 34px);
  line-height: 1.02;
  letter-spacing: 0.025em;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-hero-callsign {
  display: block;

  margin-top: 7px;

  color: var(--green-bright);

  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.dashboard-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;

  margin-top: 10px;
}

.dashboard-hero-meta span {
  display: inline-flex;
  align-items: center;

  min-height: 25px;

  padding: 5px 8px;

  color: var(--text-muted);

  background: rgba(4, 8, 5, 0.64);

  border: 1px solid var(--line);
  border-radius: 999px;

  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.dashboard-hero-status {
  align-self: start;
}

.dashboard-hero-metrics {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 9px;

  align-content: stretch;
}

.dashboard-hero-metric {
  position: relative;

  min-width: 0;
  min-height: 76px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  padding: 12px;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 85% 18%,
      rgba(145, 242, 170, 0.07),
      transparent 36%
    ),
    rgba(7, 13, 9, 0.84);

  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.dashboard-hero-metric::before {
  content: "";

  position: absolute;
  left: 0;
  top: 0;

  width: 3px;
  height: 100%;

  background:
    linear-gradient(
      180deg,
      var(--green),
      var(--green-dark)
    );
}

.dashboard-hero-metric span {
  color: var(--text-faint);

  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.dashboard-hero-metric strong {
  margin-top: 10px;

  color: var(--green-bright);

  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1;

  text-shadow:
    0 0 15px rgba(145, 242, 170, 0.12);
}


/* =========================================================
   DASHBOARD HERO RESPONSIVE
   ========================================================= */

@media (max-width: 1180px) {
  .dashboard-hero-card {
    grid-template-columns: 1fr;
  }

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


@media (max-width: 860px) {
  .dashboard-hero-card {
    padding: 14px;
  }

  .dashboard-hero-rank-insignia {
    width: 90px !important;
    height: 90px !important;
  }

  .dashboard-hero-copy h2 {
    font-size: clamp(22px, 4vw, 29px);
  }

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


@media (max-width: 620px) {
  .dashboard-hero-card {
    padding: 12px;
  }

  .dashboard-hero-identity {
    grid-template-columns:
      68px
      minmax(0, 1fr);

    gap: 10px;
  }

  .dashboard-hero-rank-insignia {
    width: 68px !important;
    height: 68px !important;
  }

  .dashboard-hero-status {
    grid-column: 1 / -1;

    justify-self: start;
  }

  .dashboard-hero-copy h2 {
    font-size: 21px;
  }

  .dashboard-hero-callsign {
    font-size: 14px;
  }

  .dashboard-hero-meta {
    gap: 5px;

    margin-top: 8px;
  }

  .dashboard-hero-meta span {
    min-height: 23px;

    padding: 4px 7px;

    font-size: 8px;
  }

  .dashboard-hero-metric {
    min-height: 68px;

    padding: 10px;
  }

  .dashboard-hero-metric strong {
    font-size: 22px;
  }
}

/* =========================================================
   GLOBAL TACTICAL PAGE HEADER SYSTEM
   ========================================================= */

.module-header {
  position: relative;

  min-height: 62px;

  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items: center;
  gap: 14px;

  padding:
    12px
    14px
    12px
    16px;

  margin-bottom: 12px;

  background:
    radial-gradient(
      circle at 92% 16%,
      rgba(145, 242, 170, 0.05),
      transparent 30%
    ),
    linear-gradient(
      90deg,
      rgba(13, 22, 16, 0.88),
      rgba(6, 11, 8, 0.72)
    );

  border:
    1px solid
    var(--line);

  border-left:
    3px solid
    var(--green-dim);

  border-radius:
    var(--radius-sm);

  box-shadow:
    inset 0 0 24px rgba(145, 242, 170, 0.015);

  overflow: hidden;
}

.module-header::before {
  content: "";

  position: absolute;
  top: 0;
  left: 0;

  width: 150px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      var(--green),
      transparent
    );

  opacity: 0.65;
}

.module-header::after {
  content: "";

  position: absolute;
  right: 10px;
  bottom: 7px;

  width: 22px;
  height: 22px;

  border-right:
    1px solid
    rgba(145, 242, 170, 0.08);

  border-bottom:
    1px solid
    rgba(145, 242, 170, 0.08);

  pointer-events: none;
}

.module-header > div:first-child {
  min-width: 0;
}

.module-header .eyebrow {
  margin-bottom: 3px;

  color: var(--gold);

  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.module-header h3 {
  margin: 0;

  color: var(--text);

  font-size:
    clamp(
      20px,
      1.9vw,
      26px
    );

  line-height: 1.06;

  letter-spacing: 0.015em;
}

.module-header .module-description {
  max-width: 760px;

  margin-top: 4px;

  color: var(--text-muted);

  font-size: 11px;
  line-height: 1.35;
}

.module-header > div:last-child {
  position: relative;
  z-index: 1;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}


/* ---------------------------------------------------------
   MODULE-SPECIFIC HEADER ACCENTS
   --------------------------------------------------------- */

#personnel-module .module-header,
#personnel-jackets-module > .module-header {
  border-left-color: #8bc8ff;
}

#operations-command-center .module-header,
.operation-workspace .module-header {
  border-left-color: var(--green);
}

#training-command-center .module-header,
.training-module .module-header {
  border-left-color: #86d7c2;
}

#qualifications-module .module-header,
.qualifications-module .module-header {
  border-left-color: #d1ad5c;
}

#promotions-module .module-header,
.promotion-module .module-header {
  border-left-color: #d6a3ff;
}

#calendar-module .module-header,
.calendar-module .module-header {
  border-left-color: #7eb8ff;
}

#media-library-module .module-header,
.media-module .module-header {
  border-left-color: #ff9f7e;
}

#administration-module .module-header,
.administration-module .module-header {
  border-left-color: var(--danger);
}

#vehicles-module .module-header,
.vehicles-module .module-header {
  border-left-color: #a8b68a;
}

#awards-module .module-header,
.awards-module .module-header {
  border-left-color: var(--gold);
}


/* ---------------------------------------------------------
   ACTION BUTTON ALIGNMENT INSIDE HEADERS
   --------------------------------------------------------- */

.module-header .module-primary-button,
.module-header .personnel-action-button {
  min-height: 34px;

  padding: 8px 11px;

  white-space: nowrap;
}

.module-header .personnel-status {
  min-height: 28px;

  display: inline-flex;
  align-items: center;
}


/* ---------------------------------------------------------
   SECTION HEADER CONSISTENCY
   --------------------------------------------------------- */

.module-section-header,
.operation-member-credit-header {
  position: relative;

  min-height: 42px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding:
    8px
    10px
    8px
    12px;

  margin-bottom: 10px;

  background:
    rgba(6, 11, 8, 0.72);

  border:
    1px solid
    rgba(37, 57, 42, 0.72);

  border-left:
    2px solid
    var(--green-dim);

  border-radius:
    var(--radius-sm);
}

.module-section-header h4,
.operation-member-credit-header strong {
  color: var(--green-bright);
}

.module-section-header p {
  margin: 2px 0 0;

  color: var(--text-muted);

  font-size: 10px;
  line-height: 1.3;
}


/* ---------------------------------------------------------
   HEADER SPACING BETWEEN MAJOR SECTIONS
   --------------------------------------------------------- */

.module-panel > .module-header:first-child {
  margin-top: 0;
}

.module-header + .personnel-toolbar,
.module-header + .module-summary-grid,
.module-header + .card-grid,
.module-header + .module-action-bar,
.module-header + .operation-workspace-summary {
  margin-top: 0;
}

.module-header + .status {
  margin-top: -3px;
  margin-bottom: 9px;
}


/* ---------------------------------------------------------
   RESPONSIVE PAGE HEADERS
   --------------------------------------------------------- */

@media (max-width: 860px) {
  .module-header {
    grid-template-columns: 1fr;

    align-items: stretch;

    min-height: 0;

    padding:
      11px
      12px;
  }

  .module-header > div:last-child {
    justify-content: flex-start;
  }

  .module-header .module-primary-button,
  .module-header .personnel-action-button {
    width: auto;
  }
}


@media (max-width: 620px) {
  .module-header {
    gap: 9px;

    padding:
      10px
      11px;

    border-left-width: 2px;
  }

  .module-header h3 {
    font-size: 20px;
  }

  .module-header .module-description {
    font-size: 10px;
  }

  .module-header > div:last-child {
    width: 100%;
  }

  .module-header > div:last-child .module-primary-button,
  .module-header > div:last-child .personnel-action-button {
    flex: 1 1 auto;
  }
}

/* =========================================================
   HADES PUBLIC COMMAND GATEWAY
   ========================================================= */

.gateway-screen {
  min-height: 100vh;

  color: var(--text);

  background:
    radial-gradient(
      circle at 18% 12%,
      rgba(145, 242, 170, 0.08),
      transparent 28%
    ),
    radial-gradient(
      circle at 82% 18%,
      rgba(209, 173, 92, 0.05),
      transparent 24%
    ),
    linear-gradient(
      180deg,
      #020503 0%,
      #030704 46%,
      #050a06 100%
    );
}

.gateway-entry {
  min-height: 100vh;

  display: flex;
  flex-direction: column;

  padding: 18px;

  position: relative;

  overflow: hidden;
}

.gateway-entry::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(145, 242, 170, 0.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(145, 242, 170, 0.025) 1px,
      transparent 1px
    );

  background-size:
    42px 42px;
}

.gateway-entry::after {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(145, 242, 170, 0.018) 48%,
      transparent 51%
    );

  background-size:
    100% 10px;

  opacity: 0.75;
}

.gateway-system-bar {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  min-height: 34px;

  padding: 8px 12px;

  color: var(--text-muted);

  background:
    rgba(4, 8, 5, 0.9);

  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  border-radius: var(--radius-sm);

  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.gateway-entry-grid {
  position: relative;
  z-index: 2;

  flex: 1;

  width: min(1180px, 100%);

  margin: 0 auto;

  display: grid;
  grid-template-columns:
    minmax(0, 0.95fr)
    minmax(0, 1.05fr);

  align-items: center;
  gap: 32px;

  padding: 44px 0 34px;
}

.gateway-brand-panel {
  min-width: 0;

  display: grid;
  grid-template-columns:
    minmax(150px, 220px)
    minmax(0, 1fr);

  align-items: center;
  gap: 22px;
}

.gateway-logo {
  width: 100%;
  max-width: 210px;

  aspect-ratio: 1;

  object-fit: contain;

  filter:
    drop-shadow(
      0 0 22px
      rgba(145, 242, 170, 0.18)
    );
}

.gateway-brand-panel h1 {
  margin: 0;

  color: var(--green-bright);

  font-family: var(--font-display);

  font-size:
    clamp(
      40px,
      7vw,
      82px
    );

  line-height: 0.94;

  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.gateway-tagline {
  margin: 14px 0 0;

  color: var(--text-muted);

  font-size:
    clamp(
      14px,
      1.5vw,
      19px
    );

  letter-spacing: 0.05em;
}

.gateway-terminal {
  padding: 20px;

  background:
    linear-gradient(
      145deg,
      rgba(10, 18, 12, 0.97),
      rgba(3, 7, 4, 0.99)
    );

  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--green);
  border-radius: var(--radius-md);

  box-shadow:
    0 24px 50px rgba(0, 0, 0, 0.42),
    inset 0 0 38px rgba(145, 242, 170, 0.025);
}

.gateway-terminal-output {
  display: grid;
  gap: 10px;

  margin-top: 16px;
  padding: 15px;

  background:
    rgba(1, 3, 2, 0.78);

  border: 1px solid var(--line);
  border-radius: var(--radius-sm);

  font-family: var(--font-mono);
}

.gateway-terminal-output p {
  margin: 0;

  color: var(--text-muted);

  font-size: 12px;
  line-height: 1.45;
}

.gateway-terminal-output p span {
  color: var(--green);
}

.gateway-access-status {
  margin-top: 6px !important;

  color: var(--green-bright) !important;

  font-weight: 800;
  letter-spacing: 0.12em;

  animation:
    gateway-status-pulse
    1.8s ease-in-out
    infinite;
}

@keyframes gateway-status-pulse {
  0%,
  100% {
    opacity: 0.72;
  }

  50% {
    opacity: 1;
  }
}

.gateway-entry-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;

  margin-top: 16px;
}

.gateway-primary-button,
.gateway-secondary-button {
  min-height: 40px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 15px;

  border-radius: var(--radius-sm);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  cursor: pointer;

  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease;
}

.gateway-primary-button {
  color: #071009;

  background:
    linear-gradient(
      180deg,
      var(--green-bright),
      var(--green)
    );

  border: 1px solid var(--green-bright);

  box-shadow:
    0 0 18px rgba(145, 242, 170, 0.16);
}

.gateway-secondary-button {
  color: var(--green-bright);

  background:
    rgba(10, 18, 12, 0.92);

  border: 1px solid var(--line-strong);
}

.gateway-primary-button:hover:not(:disabled),
.gateway-secondary-button:hover:not(:disabled) {
  transform: translateY(-1px);

  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.3);
}

.gateway-secondary-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.gateway-scroll-cue {
  position: relative;
  z-index: 2;

  align-self: center;

  color: var(--text-faint);

  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-decoration: none;
  text-transform: uppercase;
}

.gateway-scroll-cue::after {
  content: " ↓";

  color: var(--green);
}


/* =========================================================
   PUBLIC CONTENT
   ========================================================= */

.gateway-public-content {
  padding:
    70px
    18px
    28px;

  border-top:
    1px solid
    rgba(145, 242, 170, 0.1);

  background:
    linear-gradient(
      180deg,
      rgba(4, 8, 5, 0.98),
      rgba(2, 5, 3, 1)
    );
}

.gateway-section-heading {
  width: min(900px, 100%);

  margin: 0 auto 24px;

  text-align: center;
}

.gateway-section-heading h2 {
  margin: 0;

  color: var(--green-bright);

  font-family: var(--font-display);

  font-size:
    clamp(
      28px,
      4vw,
      48px
    );

  line-height: 1;
}

.gateway-section-heading > p:last-child {
  max-width: 720px;

  margin:
    12px auto 0;

  color: var(--text-muted);

  line-height: 1.55;
}

.gateway-feature-grid {
  width: min(1180px, 100%);

  margin: 0 auto;

  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 14px;
}

.gateway-feature-card {
  position: relative;

  min-height: 240px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  padding: 18px;

  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(145, 242, 170, 0.055),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      rgba(12, 21, 15, 0.98),
      rgba(5, 10, 7, 0.99)
    );

  border: 1px solid var(--line);
  border-left: 3px solid var(--green-dim);
  border-radius: var(--radius-md);

  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.28);
}

.gateway-feature-card h3 {
  margin: 2px 0 0;

  color: var(--text);

  font-size: 23px;
}

.gateway-feature-card > p:not(.eyebrow) {
  margin: 10px 0 16px;

  color: var(--text-muted);

  line-height: 1.5;
}

.gateway-feature-card .gateway-primary-button,
.gateway-feature-card .gateway-secondary-button {
  margin-top: auto;
}

.gateway-feature-status {
  align-self: flex-end;

  margin-bottom: 12px;

  padding: 5px 8px;

  border-radius: 999px;

  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.status-operational {
  color: var(--green-bright);

  background:
    rgba(34, 89, 46, 0.18);

  border:
    1px solid
    rgba(145, 242, 170, 0.2);
}

.status-limited {
  color: var(--warning);

  background:
    rgba(228, 189, 98, 0.09);

  border:
    1px solid
    rgba(228, 189, 98, 0.2);
}

.status-development {
  color: var(--text-faint);

  background:
    rgba(111, 151, 120, 0.07);

  border:
    1px solid
    rgba(111, 151, 120, 0.16);
}

.gateway-media-placeholder {
  width: 100%;
  min-height: 92px;

  margin-top: auto;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  background:
    repeating-linear-gradient(
      135deg,
      rgba(145, 242, 170, 0.025),
      rgba(145, 242, 170, 0.025) 8px,
      transparent 8px,
      transparent 16px
    ),
    rgba(2, 5, 3, 0.7);

  border:
    1px dashed
    rgba(145, 242, 170, 0.16);

  border-radius: var(--radius-sm);
}

.gateway-media-placeholder span {
  color: var(--text-faint);

  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.gateway-media-placeholder strong {
  margin-top: 4px;

  color: var(--green-dim);

  font-size: 12px;
}

.gateway-status-list {
  width: 100%;

  display: grid;
  gap: 8px;

  margin: 4px 0 0;
}

.gateway-status-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 8px 0;

  border-bottom:
    1px solid
    rgba(37, 57, 42, 0.55);
}

.gateway-status-list dt {
  color: var(--text-muted);

  font-size: 11px;
}

.gateway-status-list dd {
  margin: 0;

  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}


/* =========================================================
   UNIT SECTION
   ========================================================= */

.gateway-units-section {
  width: min(1180px, 100%);

  margin: 54px auto 0;
}

.gateway-unit-grid {
  display: grid;
  grid-template-columns:
    repeat(5, minmax(0, 1fr));

  gap: 10px;
}

.gateway-unit-grid article {
  min-height: 140px;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  padding: 14px;

  background:
    linear-gradient(
      180deg,
      rgba(14, 24, 17, 0.96),
      rgba(6, 12, 8, 0.99)
    );

  border: 1px solid var(--line);
  border-top: 2px solid var(--green-dim);
  border-radius: var(--radius-sm);
}

.gateway-unit-grid span {
  color: var(--gold);

  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.gateway-unit-grid strong {
  margin-top: 7px;

  color: var(--green-bright);

  font-size: 15px;
}

.gateway-unit-grid small {
  margin-top: 6px;

  color: var(--text-muted);

  line-height: 1.35;
}

.gateway-footer {
  width: min(1180px, 100%);

  margin: 48px auto 0;
  padding: 18px 0 0;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  border-top:
    1px solid
    rgba(145, 242, 170, 0.1);
}

.gateway-footer > div {
  display: grid;
}

.gateway-footer strong {
  color: var(--green-bright);

  font-size: 12px;
  letter-spacing: 0.08em;
}

.gateway-footer span {
  margin-top: 3px;

  color: var(--text-faint);

  font-size: 9px;
}


/* =========================================================
   GATEWAY RESPONSIVE
   ========================================================= */

@media (max-width: 980px) {
  .gateway-entry-grid {
    grid-template-columns: 1fr;

    gap: 24px;

    padding-top: 30px;
  }

  .gateway-brand-panel {
    grid-template-columns:
      120px
      minmax(0, 1fr);
  }

  .gateway-logo {
    max-width: 120px;
  }

  .gateway-feature-grid {
    grid-template-columns: 1fr;
  }

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


@media (max-width: 620px) {
  .gateway-entry {
    padding: 10px;
  }

  .gateway-system-bar {
    align-items: flex-start;
    flex-direction: column;

    gap: 4px;

    font-size: 8px;
  }

  .gateway-entry-grid {
    align-items: stretch;

    padding:
      20px 0
      24px;
  }

  .gateway-brand-panel {
    grid-template-columns: 84px 1fr;

    gap: 14px;
  }

  .gateway-brand-panel h1 {
    font-size: 38px;
  }

  .gateway-tagline {
    font-size: 13px;
  }

  .gateway-terminal {
    padding: 14px;
  }

  .gateway-terminal-output {
    padding: 12px;
  }

  .gateway-terminal-output p {
    font-size: 10px;
  }

  .gateway-entry-actions {
    flex-direction: column;
  }

  .gateway-primary-button,
  .gateway-secondary-button {
    width: 100%;
  }

  .gateway-public-content {
    padding:
      50px 10px
      20px;
  }

  .gateway-feature-card {
    min-height: 0;

    padding: 15px;
  }

  .gateway-unit-grid {
    grid-template-columns: 1fr;
  }

  .gateway-unit-grid article {
    min-height: 112px;
  }

  .gateway-footer {
    align-items: stretch;
    flex-direction: column;
  }
}

/* =========================================================
   COMMAND GATEWAY TITLE OVERLAP FIX
   ========================================================= */

.gateway-entry-grid {
  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(460px, 0.85fr);

  gap: 42px;
}

.gateway-brand-panel {
  grid-template-columns:
    minmax(150px, 210px)
    minmax(0, 1fr);

  gap: 26px;
}

.gateway-brand-panel > div {
  min-width: 0;
}

.gateway-brand-panel h1 {
  max-width: 100%;

  font-size:
    clamp(
      46px,
      5.4vw,
      76px
    );

  line-height: 0.96;

  overflow-wrap: normal;
  word-break: normal;
}

.gateway-terminal {
  min-width: 0;
}

@media (max-width: 1180px) {
  .gateway-entry-grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(420px, 0.9fr);

    gap: 28px;
  }

  .gateway-brand-panel h1 {
    font-size:
      clamp(
        42px,
        5vw,
        66px
      );
  }
}

@media (max-width: 980px) {
  .gateway-entry-grid {
    grid-template-columns: 1fr;
  }

  .gateway-brand-panel h1 {
    font-size:
      clamp(
        40px,
        8vw,
        64px
      );
  }
}

@media (max-width: 620px) {
  .gateway-brand-panel {
    grid-template-columns:
      76px
      minmax(0, 1fr);

    gap: 12px;
  }

  .gateway-brand-panel h1 {
    font-size:
      clamp(
        34px,
        10vw,
        46px
      );

    line-height: 0.98;
  }
}

/* =========================================================
   INTEGRATED GATEWAY AUTHENTICATION TERMINAL
   ========================================================= */

.gateway-entry {
  min-height: auto;

  padding-bottom: 28px;
}

.gateway-entry-grid {
  align-items: stretch;

  padding-top: 28px;
  padding-bottom: 18px;
}

.gateway-brand-panel {
  position: relative;

  align-content: center;

  padding:
    26px
    10px
    26px
    0;
}

.gateway-brand-panel::after {
  content: "HADES // SECURE ACCESS NODE";

  position: absolute;
  left: 0;
  bottom: 4px;

  color:
    rgba(145, 242, 170, 0.28);

  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.gateway-terminal {
  display: flex;
  flex-direction: column;

  min-height: 100%;

  padding: 18px;

  border-left-width: 3px;
}

.gateway-terminal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;

  padding-bottom: 11px;
  margin-bottom: 11px;

  border-bottom:
    1px solid
    rgba(145, 242, 170, 0.08);
}

.gateway-terminal-header h2 {
  margin: 0;

  color: var(--text);

  font-size: 24px;
  line-height: 1;
}

.gateway-terminal-output {
  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 8px 14px;

  margin-top: 0;
  padding: 12px 14px;
}

.gateway-terminal-output p {
  font-size: 10px;
}

.gateway-login-panel {
  display: block;

  margin-top: 12px;
  padding: 14px;

  background:
    linear-gradient(
      145deg,
      rgba(8, 14, 10, 0.98),
      rgba(3, 7, 4, 0.99)
    );

  border:
    1px solid
    rgba(145, 242, 170, 0.13);

  border-radius:
    var(--radius-sm);

  box-shadow:
    inset 0 0 26px rgba(145, 242, 170, 0.02);
}

.gateway-login-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;

  margin-bottom: 12px;
}

.gateway-login-heading h3 {
  margin: 0;

  color: var(--green-bright);

  font-size: 20px;
  line-height: 1;
}

.gateway-login-security {
  display: inline-flex;
  align-items: center;

  min-height: 26px;

  padding: 5px 8px;

  color: var(--green-dim);

  background:
    rgba(34, 89, 46, 0.12);

  border:
    1px solid
    rgba(145, 242, 170, 0.13);

  border-radius: 999px;

  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.gateway-login-panel form {
  margin: 0;
}

.gateway-login-fields {
  display: grid;
  grid-template-columns:
    90px
    minmax(0, 1fr);

  gap: 8px 10px;

  align-items: center;
}

.gateway-login-fields label {
  color: var(--text-faint);

  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.gateway-login-fields input {
  width: 100%;
  min-width: 0;
  height: 38px;

  padding: 8px 10px;

  color: var(--green-bright);

  background:
    rgba(1, 4, 2, 0.88);

  border:
    1px solid
    var(--line);

  border-radius:
    var(--radius-sm);

  outline: none;
}

.gateway-login-fields input:focus {
  border-color: var(--green-dim);

  box-shadow:
    0 0 0 2px
    rgba(145, 242, 170, 0.05);
}

.gateway-login-panel #login-button {
  width: 100%;

  margin-top: 10px;
}

.gateway-login-actions {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 8px;

  margin-top: 8px;
}

.gateway-login-panel .status {
  min-height: 18px;

  margin-top: 8px;

  font-size: 10px;
}

.gateway-login-panel .security-note {
  margin:
    8px 0 0;

  color: var(--text-faint);

  font-size: 8px;
  line-height: 1.4;

  letter-spacing: 0.04em;
}

.gateway-scroll-cue {
  margin-top: 4px;
}

.gateway-public-content {
  padding-top: 54px;
}


/* =========================================================
   INTEGRATED LOGIN RESPONSIVE
   ========================================================= */

@media (max-width: 980px) {
  .gateway-brand-panel {
    padding:
      12px
      0
      18px;
  }

  .gateway-terminal-output {
    grid-template-columns: 1fr;
  }
}


@media (max-width: 620px) {
  .gateway-terminal-header {
    align-items: stretch;
    flex-direction: column;
  }

  .gateway-login-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .gateway-login-security {
    align-self: flex-start;
  }

  .gateway-login-fields {
    grid-template-columns: 1fr;

    gap: 5px;
  }

  .gateway-login-fields input {
    margin-bottom: 4px;
  }

  .gateway-login-actions {
    grid-template-columns: 1fr;
  }

  .gateway-brand-panel::after {
    display: none;
  }
}

/* =========================================================
   RECRUITING-PRIORITY LANDING SECTION
   ========================================================= */

.gateway-recruiting-priority {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.gateway-recruitment-hero {
  display: grid;
  grid-template-columns:
    minmax(0, 1.4fr)
    minmax(260px, 0.6fr);

  align-items: center;
  gap: 24px;

  padding: 22px;

  background:
    radial-gradient(
      circle at 92% 15%,
      rgba(145, 242, 170, 0.09),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      rgba(15, 27, 18, 0.99),
      rgba(5, 10, 7, 0.99)
    );

  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--green);
  border-radius: var(--radius-md);

  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.32),
    inset 0 0 28px rgba(145, 242, 170, 0.02);
}

.gateway-recruitment-hero h3 {
  margin: 2px 0 0;

  color: var(--green-bright);

  font-family: var(--font-display);
  font-size:
    clamp(
      28px,
      3.2vw,
      44px
    );

  line-height: 1;
}

.gateway-recruitment-hero p:not(.eyebrow) {
  max-width: 760px;

  margin: 12px 0 0;

  color: var(--text-muted);

  font-size: 14px;
  line-height: 1.55;
}

.gateway-recruitment-actions {
  display: grid;
  gap: 10px;

  align-content: center;
}

.gateway-recruitment-actions span {
  color: var(--text-faint);

  font-size: 9px;
  line-height: 1.45;

  text-align: center;
}

.gateway-recruitment-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 12px;

  margin-top: 12px;
}

.gateway-recruitment-grid .gateway-feature-card {
  min-height: 0;

  padding: 16px;
}

.gateway-recruitment-grid .gateway-feature-card h3 {
  font-size: 20px;
}

.gateway-recruitment-grid .gateway-feature-card > p:not(.eyebrow) {
  margin:
    8px 0
    12px;

  font-size: 12px;
  line-height: 1.45;
}

.gateway-recruitment-list {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 7px;

  width: 100%;

  margin: auto 0 0;
  padding: 0;

  list-style: none;
}

.gateway-recruitment-list li {
  position: relative;

  padding:
    8px
    8px
    8px
    22px;

  color: var(--text-muted);

  background:
    rgba(3, 7, 4, 0.58);

  border: 1px solid rgba(37, 57, 42, 0.68);
  border-radius: var(--radius-sm);

  font-size: 10px;
  line-height: 1.3;
}

.gateway-recruitment-list li::before {
  content: "";

  position: absolute;
  left: 8px;
  top: 50%;

  width: 6px;
  height: 6px;

  background: var(--green);

  border-radius: 50%;

  box-shadow:
    0 0 7px rgba(145, 242, 170, 0.52);

  transform: translateY(-50%);
}

.gateway-feature-card-media .gateway-media-placeholder {
  min-height: 74px;
}

.gateway-member-access-card {
  border-left-color: var(--gold);
}

.gateway-member-access-card .gateway-secondary-button {
  width: 100%;
}


/* =========================================================
   COMPACT PUBLIC SYSTEM STATUS
   ========================================================= */

.gateway-public-status-strip {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 8px;

  margin-top: 12px;
  padding: 8px;

  background:
    rgba(3, 7, 4, 0.82);

  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.gateway-public-status-strip > div {
  min-width: 0;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;

  padding:
    7px
    9px;

  background:
    rgba(12, 21, 15, 0.74);

  border: 1px solid rgba(37, 57, 42, 0.64);
  border-radius: var(--radius-sm);
}

.gateway-public-status-strip span {
  color: var(--text-faint);

  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.gateway-public-status-strip strong {
  padding: 3px 6px;

  border-radius: 999px;

  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}


/* =========================================================
   RECRUITING SECTION RESPONSIVE
   ========================================================= */

@media (max-width: 920px) {
  .gateway-recruitment-hero {
    grid-template-columns: 1fr;

    gap: 16px;
  }

  .gateway-recruitment-actions {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(180px, 0.7fr);

    align-items: center;
  }

  .gateway-recruitment-actions span {
    text-align: left;
  }

  .gateway-public-status-strip {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}


@media (max-width: 700px) {
  .gateway-recruitment-grid {
    grid-template-columns: 1fr;
  }

  .gateway-recruitment-list {
    grid-template-columns: 1fr;
  }
}


@media (max-width: 620px) {
  .gateway-recruitment-hero {
    padding: 16px;
  }

  .gateway-recruitment-hero h3 {
    font-size: 28px;
  }

  .gateway-recruitment-actions {
    grid-template-columns: 1fr;
  }

  .gateway-recruitment-actions span {
    text-align: center;
  }

  .gateway-public-status-strip {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   LANDING PAGE SQUAD PATCHES
   ========================================================= */

.gateway-unit-card {
  position: relative;

  min-height: 250px !important;

  align-items: center;

  padding-top: 16px !important;

  text-align: center;

  overflow: hidden;
}

.gateway-unit-card::before {
  content: "";

  position: absolute;
  top: 12px;
  left: 50%;

  width: 126px;
  height: 126px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(145, 242, 170, 0.09),
      rgba(145, 242, 170, 0.025) 48%,
      transparent 72%
    );

  transform:
    translateX(-50%);

  pointer-events: none;
}

.gateway-unit-patch {
  position: relative;
  z-index: 1;

  display: block;

  width: 118px;
  height: 118px;

  margin:
    0 auto
    12px;

  object-fit: contain;

  border-radius: 8px;

  filter:
    drop-shadow(
      0 8px 12px
      rgba(0, 0, 0, 0.38)
    )
    drop-shadow(
      0 0 12px
      rgba(145, 242, 170, 0.1)
    );

  transition:
    transform 0.18s ease,
    filter 0.18s ease;
}

.gateway-unit-card:hover .gateway-unit-patch {
  transform:
    translateY(-3px)
    scale(1.03);

  filter:
    drop-shadow(
      0 10px 16px
      rgba(0, 0, 0, 0.45)
    )
    drop-shadow(
      0 0 16px
      rgba(145, 242, 170, 0.18)
    );
}

.gateway-unit-card > span {
  position: relative;
  z-index: 1;

  margin-top: auto;
}

.gateway-unit-card > strong {
  position: relative;
  z-index: 1;
}

.gateway-unit-card > small {
  position: relative;
  z-index: 1;
}


/* ---------------------------------------------------------
   SUBTLE SQUAD-SPECIFIC ACCENTS
   --------------------------------------------------------- */

.gateway-unit-castle {
  border-top-color:
    #7f8d59 !important;
}

.gateway-unit-ember {
  border-top-color:
    #d87034 !important;
}

.gateway-unit-phantom {
  border-top-color:
    #c7a54b !important;
}

.gateway-unit-angel {
  border-top-color:
    #a8b7c7 !important;
}

.gateway-unit-centaur {
  border-top-color:
    #8f7a59 !important;
}


/* =========================================================
   SQUAD PATCH RESPONSIVE
   ========================================================= */

@media (max-width: 980px) {
  .gateway-unit-card {
    min-height: 230px !important;
  }

  .gateway-unit-patch {
    width: 104px;
    height: 104px;
  }

  .gateway-unit-card::before {
    width: 114px;
    height: 114px;
  }
}


@media (max-width: 620px) {
  .gateway-unit-card {
    min-height: 210px !important;
  }

  .gateway-unit-patch {
    width: 96px;
    height: 96px;
  }

  .gateway-unit-card::before {
    width: 104px;
    height: 104px;
  }
}

/* =========================================================
   COMPACT TACTICAL COMMAND NETWORK VIEW
   ========================================================= */

.gateway-public-content {
  padding-top: 26px;
}

.gateway-public-content > .gateway-section-heading {
  margin-bottom: 14px;
}

.gateway-public-content > .gateway-section-heading .eyebrow {
  margin-bottom: 4px;
}

.gateway-public-content > .gateway-section-heading h2 {
  font-size:
    clamp(
      30px,
      3.8vw,
      48px
    );

  line-height: 0.98;
}

.gateway-public-content > .gateway-section-heading > p:last-child {
  max-width: 760px;

  margin-top: 8px;

  font-size: 12px;
  line-height: 1.4;
}

.gateway-recruitment-hero {
  min-height: 0;

  padding: 16px 18px;

  gap: 18px;
}

.gateway-recruitment-hero h3 {
  font-size:
    clamp(
      26px,
      3vw,
      40px
    );
}

.gateway-recruitment-hero p:not(.eyebrow) {
  margin-top: 8px;

  font-size: 12px;
  line-height: 1.4;
}

.gateway-recruitment-actions {
  gap: 8px;
}

.gateway-recruitment-grid {
  gap: 10px;

  margin-top: 10px;
}

.gateway-recruitment-grid .gateway-feature-card {
  padding: 13px 14px;
}

.gateway-recruitment-grid .gateway-feature-card h3 {
  font-size: 18px;
}

.gateway-recruitment-grid .gateway-feature-card > p:not(.eyebrow) {
  margin:
    6px 0
    10px;

  font-size: 11px;
  line-height: 1.35;
}

.gateway-recruitment-list {
  gap: 6px;
}

.gateway-recruitment-list li {
  padding:
    7px
    7px
    7px
    20px;

  font-size: 9px;
}

.gateway-feature-card-media .gateway-media-placeholder {
  min-height: 62px;
}

.gateway-public-status-strip {
  margin-top: 10px;
}

.gateway-units-section {
  margin-top: 36px;
}


/* =========================================================
   VIEWPORT TARGETING
   ========================================================= */

@media (min-width: 1100px) and (min-height: 760px) {
  .gateway-public-content {
    min-height: 100vh;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .gateway-recruiting-priority {
    flex: 0 0 auto;
  }
}


@media (max-width: 920px) {
  .gateway-public-content {
    padding-top: 22px;
  }

  .gateway-public-content > .gateway-section-heading {
    margin-bottom: 12px;
  }
}


@media (max-width: 620px) {
  .gateway-public-content {
    padding-top: 18px;
  }

  .gateway-public-content > .gateway-section-heading h2 {
    font-size: 30px;
  }

  .gateway-public-content > .gateway-section-heading > p:last-child {
    font-size: 11px;
  }

  .gateway-recruitment-hero {
    padding: 14px;
  }
}


/* =========================================================
   AUTHENTICATED HADES COMPACT DENSITY PASS
   ========================================================= */

/*
  This layer intentionally targets the authenticated HADES app only.
  Public gateway/login presentation is left unchanged.
*/

@media (min-width: 861px) {
  :root {
    --sidebar-width: 242px;
    --topbar-height: 64px;
  }

  .sidebar-brand {
    gap: 10px;
    padding: 13px 14px;
  }

  .sidebar-logo {
    width: 44px;
    height: 44px;
  }

  .sidebar-brand strong {
    font-size: 15px;
  }

  .sidebar-brand span {
    margin-top: 2px;
    font-size: 9px;
  }

  .sidebar nav {
    padding: 10px 8px;
  }

  .nav-item {
    min-height: 36px;
    margin: 2px 0;
    padding: 9px 10px;
    gap: 8px;
    font-size: 11px;
  }

  .logout {
    width: calc(100% - 20px);
    margin: 10px;
    padding: 9px;
  }

  .topbar {
    min-height: var(--topbar-height);
    gap: 14px;
    padding: 10px 16px;
  }

  .operator,
  .dashboard-career-identity {
    min-width: 170px;
    padding: 8px 11px;
  }

  .operator span {
    font-size: 12px;
  }

  .operator small {
    margin-top: 2px;
    font-size: 9px;
  }

  .content {
    padding: 12px 14px 16px;
  }

  .hades-command-status-bar {
    margin-bottom: 8px;
    padding: 5px 7px;
  }

  .hades-command-status-item {
    min-height: 26px;
    padding: 4px 7px;
  }

  .module-panel {
    padding: 12px 13px;
  }

  .module-panel + .module-panel {
    margin-top: 10px;
  }

  .module-header {
    min-height: 50px;
    gap: 10px;
    padding: 8px 10px 8px 12px;
    margin-bottom: 9px;
  }

  .module-header .eyebrow {
    margin-bottom: 2px;
    font-size: 8px;
  }

  .module-header h3 {
    font-size: clamp(18px, 1.55vw, 23px);
  }

  .module-header .module-description {
    margin-top: 2px;
    font-size: 10px;
    line-height: 1.28;
  }

  .module-header .module-primary-button,
  .module-header .personnel-action-button {
    min-height: 31px;
    padding: 6px 9px;
  }

  .module-primary-button {
    min-height: 33px;
    padding: 7px 11px;
  }

  .personnel-action-button {
    min-height: 29px;
    padding: 5px 8px;
  }

  .card-grid {
    gap: 9px;
    margin-top: 10px;
  }

  .card {
    min-height: 74px;
    padding: 11px 12px;
  }

  .card span {
    font-size: 9px;
  }

  .card strong {
    margin-top: 7px;
    font-size: 20px;
  }

  #dashboard .card-grid .card {
    min-height: 80px;
  }

  #dashboard .card-grid .card strong {
    font-size: 23px;
  }

  .admin-card-grid {
    gap: 10px;
  }

  .admin-card {
    min-height: 132px;
    padding: 13px 14px;
  }

  .admin-card h4 {
    margin-bottom: 5px;
    font-size: 16px;
  }

  .admin-card p:not(.eyebrow) {
    margin: 5px 0 8px;
    font-size: 11px;
    line-height: 1.35;
  }

  .module-summary-grid {
    gap: 8px;
    margin-bottom: 10px;
  }

  .module-summary-card {
    min-height: 68px;
    padding: 10px 11px;
  }

  .module-summary-card strong {
    margin-top: 6px;
    font-size: 19px;
  }

  .module-section {
    padding: 11px 12px;
  }

  .module-section + .module-section {
    margin-top: 9px;
  }

  .module-section-header,
  .operation-member-credit-header {
    min-height: 36px;
    padding: 6px 8px 6px 10px;
    margin-bottom: 8px;
  }

  .module-section-header h4 {
    font-size: 14px;
  }

  .module-tabs {
    gap: 5px;
    padding: 5px;
    margin-bottom: 9px;
  }

  .module-tab {
    min-height: 31px;
    padding: 6px 9px;
    font-size: 9px;
  }

  .module-action-bar {
    gap: 8px;
    padding: 7px 9px;
    margin-bottom: 9px;
  }

  .personnel-toolbar {
    gap: 8px;
    padding: 8px 10px;
    margin-bottom: 8px;
  }

  .personnel-toolbar input,
  .admin-personnel-form input,
  .admin-personnel-form select,
  .admin-personnel-form textarea {
    padding: 8px 10px;
  }

  .personnel-table th,
  .personnel-table td {
    padding: 8px 10px;
  }

  .admin-personnel-form {
    gap: 8px 13px;
    padding: 13px;
  }

  .operation-workspace-summary {
    gap: 8px;
    margin-bottom: 10px;
  }

  .operation-workspace-summary-item {
    padding: 9px 10px;
  }

  .operation-workspace-summary-item strong {
    margin-top: 5px;
    font-size: 13px;
  }

  .operation-workspace-tabs {
    gap: 5px;
    padding: 6px;
    margin-bottom: 10px;
  }

  .operation-workspace-tab {
    min-width: 116px;
    padding: 7px 8px;
  }

  .operation-overview-text-grid {
    gap: 10px;
    margin-top: 10px;
  }

  .operation-credit-toggle-grid {
    gap: 8px;
    margin-top: 9px;
  }

  .operation-credit-toggle-card {
    min-height: 42px;
    padding: 8px 11px;
  }

  .dashboard-hero-card {
    gap: 11px;
    margin-bottom: 9px;
    padding: 11px 12px;
  }

  .dashboard-hero-identity {
    gap: 11px;
  }

  .dashboard-hero-rank-insignia {
    width: 82px !important;
    height: 82px !important;
  }

  .dashboard-hero-copy h2 {
    font-size: clamp(21px, 2vw, 29px);
  }

  .dashboard-hero-callsign {
    margin-top: 5px;
    font-size: 14px;
  }

  .dashboard-hero-meta {
    gap: 5px;
    margin-top: 7px;
  }

  .dashboard-hero-meta span {
    min-height: 21px;
    padding: 3px 6px;
    font-size: 8px;
  }

  .dashboard-hero-metrics {
    gap: 6px;
  }

  .dashboard-hero-metric {
    min-height: 58px;
    padding: 8px 9px;
  }

  .dashboard-hero-metric strong {
    margin-top: 6px;
    font-size: 21px;
  }

  .dashboard-readiness-panel {
    margin-top: 9px;
  }

  .dashboard-readiness-grid {
    gap: 8px;
  }

  .dashboard-readiness-card {
    min-height: 108px;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
  }

  .dashboard-readiness-gauge {
    width: 60px;
  }

  .dashboard-readiness-gauge::before {
    width: 47px;
  }

  .dashboard-readiness-gauge-inner strong {
    font-size: 16px;
  }

  .dashboard-readiness-copy .eyebrow {
    margin-bottom: 4px;
    font-size: 8px;
  }

  .dashboard-readiness-copy > strong {
    font-size: 12px;
  }

  .dashboard-readiness-bar {
    height: 6px;
    margin-top: 8px;
  }

  .dashboard-command-attention {
    gap: 8px;
    margin-top: 9px;
  }

  .dashboard-command-card {
    min-height: 78px;
    padding: 10px 11px;
  }

  .dashboard-command-card > strong {
    font-size: 23px;
  }

  .dashboard-next-steps {
    margin-top: 9px;
    padding: 12px;
  }

  .jacket-snapshot-panel {
    padding: 12px;
  }

  .jacket-snapshot-layout {
    grid-template-columns: minmax(90px, 112px) minmax(0, 1fr);
    gap: 12px;
  }

  .jacket-snapshot-portrait,
  .jacket-snapshot-photo {
    min-height: 112px;
    height: 112px;
  }

  .jacket-snapshot-rank-insignia {
    width: 78px !important;
    height: 78px !important;
  }

  .jacket-snapshot-header {
    gap: 10px;
    padding-bottom: 8px;
    margin-bottom: 8px;
  }

  .jacket-snapshot-detail {
    padding: 5px 0;
  }

  .jacket-snapshot-awards {
    gap: 7px;
    margin-top: 10px;
  }

  .jacket-snapshot-award {
    min-height: 70px;
    gap: 5px;
    padding: 6px;
  }

  .jacket-snapshot-award img,
  .jacket-snapshot-award-fallback {
    width: 46px;
    height: 38px;
  }
}

/* Preserve comfortable touch targets while reducing mobile vertical waste. */
@media (max-width: 860px) {
  .content {
    padding: 10px;
  }

  .module-panel {
    padding: 11px;
  }

  .module-header {
    gap: 7px;
    padding: 9px 10px;
    margin-bottom: 9px;
  }

  .module-section,
  .admin-personnel-form {
    padding: 11px;
  }

  .card-grid,
  .admin-card-grid {
    gap: 8px;
  }

  .card {
    min-height: 72px;
    padding: 11px;
  }

  .admin-card {
    min-height: 118px;
    padding: 12px;
  }

  .module-summary-grid {
    gap: 8px;
  }

  .module-summary-card {
    min-height: 66px;
    padding: 10px 11px;
  }

  .dashboard-hero-card {
    gap: 9px;
    margin-bottom: 8px;
    padding: 11px;
  }

  .dashboard-readiness-card {
    min-height: 112px;
  }
}

@media (max-width: 620px) {
  .content {
    padding: 8px;
  }

  .module-panel {
    padding: 9px;
  }

  .module-panel + .module-panel {
    margin-top: 8px;
  }

  .module-header {
    padding: 8px 9px;
    margin-bottom: 8px;
  }

  .module-header h3 {
    font-size: 18px;
  }

  .module-header .module-description {
    font-size: 9px;
  }

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

  .module-summary-card {
    min-height: 62px;
  }

  .admin-card {
    min-height: 104px;
  }

  .dashboard-hero-rank-insignia {
    width: 58px !important;
    height: 58px !important;
  }

  .dashboard-hero-metrics {
    gap: 5px;
  }

  .dashboard-hero-metric {
    min-height: 58px;
  }

  .dashboard-readiness-grid {
    gap: 7px;
  }

  .dashboard-readiness-card {
    min-height: 96px;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 8px;
    padding: 9px;
  }

  .dashboard-readiness-gauge {
    width: 54px;
  }

  .dashboard-readiness-gauge::before {
    width: 42px;
  }

  .dashboard-command-card {
    min-height: 72px;
  }

  .operation-workspace-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================================================
   HADES COMPACT DENSITY PASS 2
   Authenticated application only
   ========================================================= */

@media (min-width: 861px) {
  :root {
    --sidebar-width: 228px;
    --topbar-height: 56px;
  }

  .sidebar-brand {
    gap: 10px;
    padding: 12px 14px;
  }

  .sidebar-logo {
    width: 42px;
    height: 42px;
  }

  .sidebar nav {
    padding: 10px 8px;
  }

  .nav-item {
    padding: 9px 10px;
    margin: 2px 0;
  }

  .logout {
    width: calc(100% - 20px);
    margin: 10px;
    padding: 9px;
  }

  .topbar {
    min-height: 56px;
    gap: 14px;
    padding: 9px 16px;
  }

  .operator {
    min-width: 168px;
    padding: 7px 10px;
  }

  .content {
    padding: 10px 12px;
  }

  .hades-command-status-bar {
    margin-bottom: 7px;
    padding: 5px 7px;
  }

  .hades-command-status-item {
    min-height: 26px;
    padding: 4px 7px;
  }

  .module-panel {
    padding: 10px 11px;
  }

  .module-panel + .module-panel {
    margin-top: 9px;
  }

  .module-header {
    min-height: 46px;
    gap: 10px;
    padding: 8px 10px 8px 12px;
    margin-bottom: 8px;
  }

  .module-header .eyebrow {
    margin-bottom: 2px;
    font-size: 8px;
  }

  .module-header h3 {
    font-size: clamp(18px, 1.55vw, 22px);
  }

  .module-header .module-description {
    margin-top: 2px;
    font-size: 10px;
    line-height: 1.25;
  }

  .module-header .module-primary-button,
  .module-header .personnel-action-button {
    min-height: 31px;
    padding: 6px 9px;
  }

  .module-action-bar {
    gap: 7px;
    padding: 7px 9px;
    margin-bottom: 8px;
  }

  .module-tabs,
  .operation-workspace-tabs {
    gap: 5px;
    padding: 5px;
    margin-bottom: 8px;
  }

  .module-tab,
  .operation-workspace-tab {
    min-height: 31px;
    padding: 6px 8px;
  }

  .operation-workspace-tab {
    min-width: 118px;
  }

  .module-summary-grid,
  .card-grid,
  .admin-card-grid,
  .operation-workspace-summary {
    gap: 7px;
  }

  .module-summary-grid,
  .operation-workspace-summary {
    margin-bottom: 9px;
  }

  .card-grid {
    margin-top: 9px;
  }

  .module-summary-card {
    min-height: 58px;
    padding: 8px 10px;
  }

  .module-summary-card strong {
    margin-top: 5px;
    font-size: 19px;
  }

  .card {
    min-height: 66px;
    padding: 10px 11px;
  }

  .card strong {
    margin-top: 6px;
    font-size: 20px;
  }

  #dashboard .card-grid .card {
    min-height: 70px;
  }

  #dashboard .card-grid .card strong {
    font-size: 23px;
  }

  .admin-card {
    min-height: 102px;
    padding: 11px 12px;
  }

  .admin-card h4 {
    margin-bottom: 4px;
    font-size: 16px;
  }

  .admin-card p:not(.eyebrow) {
    margin: 4px 0;
    font-size: 11px;
    line-height: 1.3;
  }

  .module-section {
    padding: 10px;
  }

  .module-section + .module-section {
    margin-top: 8px;
  }

  .module-section-header,
  .operation-member-credit-header {
    min-height: 36px;
    padding: 6px 8px 6px 10px;
    margin-bottom: 7px;
  }

  .personnel-toolbar {
    gap: 8px;
    padding: 7px 9px;
    margin-bottom: 8px;
  }

  .personnel-table th,
  .personnel-table td {
    padding: 7px 9px;
  }

  .admin-personnel-form {
    gap: 7px 12px;
    padding: 11px;
  }

  .admin-personnel-form textarea {
    min-height: 74px;
  }

  .operation-workspace-summary-item {
    padding: 8px 10px;
  }

  .operation-workspace-summary-item strong {
    margin-top: 4px;
    font-size: 13px;
  }

  .operation-workspace-summary-item progress {
    height: 6px;
    margin-top: 5px;
  }

  .dashboard-hero-card {
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.75fr);
    gap: 10px;
    margin-bottom: 7px;
    padding: 10px 11px;
  }

  .dashboard-hero-identity {
    gap: 10px;
  }

  .dashboard-hero-rank-insignia {
    width: 76px !important;
    height: 76px !important;
  }

  .dashboard-hero-copy h2 {
    font-size: clamp(21px, 2vw, 28px);
  }

  .dashboard-hero-callsign {
    margin-top: 4px;
    font-size: 14px;
  }

  .dashboard-hero-meta {
    gap: 5px;
    margin-top: 6px;
  }

  .dashboard-hero-meta span {
    min-height: 21px;
    padding: 3px 6px;
    font-size: 8px;
  }

  .dashboard-hero-metrics {
    gap: 6px;
  }

  .dashboard-hero-metric {
    min-height: 54px;
    padding: 8px 9px;
  }

  .dashboard-hero-metric strong {
    margin-top: 5px;
    font-size: 21px;
  }

  .dashboard-readiness-panel {
    margin-top: 7px;
  }

  .dashboard-readiness-grid {
    gap: 7px;
  }

  .dashboard-readiness-card {
    min-height: 94px;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 9px;
    padding: 9px 10px;
  }

  .dashboard-readiness-gauge {
    width: 58px;
  }

  .dashboard-readiness-gauge::before {
    width: 46px;
  }

  .dashboard-readiness-gauge-inner strong {
    font-size: 15px;
  }

  .dashboard-readiness-copy .eyebrow {
    margin-bottom: 3px;
  }

  .dashboard-readiness-copy > strong {
    font-size: 11px;
  }

  .dashboard-readiness-bar {
    height: 5px;
    margin-top: 6px;
  }

  .dashboard-command-attention {
    gap: 7px;
    margin-top: 7px;
  }

  .dashboard-command-card {
    min-height: 66px;
    padding: 8px 9px;
  }

  .dashboard-command-card > strong {
    font-size: 21px;
  }

  .dashboard-next-steps {
    margin-top: 7px;
    padding: 9px 10px;
  }

  .jacket-snapshot-panel {
    padding: 10px;
  }

  .jacket-snapshot-layout {
    grid-template-columns: minmax(78px, 98px) minmax(0, 1fr);
    gap: 10px;
  }

  .jacket-snapshot-portrait,
  .jacket-snapshot-photo {
    min-height: 98px;
    height: 98px;
  }

  .jacket-snapshot-rank-insignia {
    width: 68px !important;
    height: 68px !important;
  }

  .jacket-snapshot-header {
    gap: 8px;
    padding-bottom: 6px;
    margin-bottom: 6px;
  }

  .jacket-snapshot-callsign {
    margin-top: 3px;
    font-size: 13px;
  }

  .jacket-snapshot-detail {
    padding: 4px 0;
  }

  .jacket-snapshot-awards {
    gap: 6px;
    margin-top: 8px;
  }

  .jacket-snapshot-award {
    min-height: 62px;
    gap: 4px;
    padding: 5px;
  }
}

@media (max-width: 860px) {
  .content {
    padding: 8px;
  }

  .module-panel {
    padding: 9px;
  }

  .module-header {
    padding: 8px 9px;
    margin-bottom: 7px;
  }

  .module-action-bar,
  .personnel-toolbar {
    padding: 7px 8px;
    margin-bottom: 7px;
  }

  .card-grid,
  .admin-card-grid,
  .module-summary-grid,
  .operation-workspace-summary {
    gap: 6px;
  }

  .card {
    min-height: 64px;
    padding: 9px;
  }

  .admin-card {
    min-height: 96px;
    padding: 10px;
  }

  .module-summary-card {
    min-height: 58px;
    padding: 8px 9px;
  }

  .dashboard-hero-card {
    padding: 9px;
  }

  .dashboard-readiness-card {
    min-height: 88px;
  }
}

@media (max-width: 620px) {
  .content {
    padding: 6px;
  }

  .module-panel {
    padding: 8px;
  }

  .module-panel + .module-panel {
    margin-top: 6px;
  }

  .module-header {
    gap: 6px;
    padding: 7px 8px;
    margin-bottom: 6px;
  }

  .module-summary-grid {
    gap: 5px;
  }

  .module-summary-card {
    min-height: 56px;
    padding: 8px;
  }

  .module-summary-card strong {
    font-size: 18px;
  }

  .card {
    min-height: 60px;
    padding: 8px 9px;
  }

  .admin-card {
    min-height: 90px;
    padding: 9px;
  }

  .module-primary-button {
    min-height: 34px;
    padding: 8px 10px;
  }

  .personnel-action-button {
    min-height: 30px;
  }

  .personnel-table th,
  .personnel-table td {
    padding: 7px 8px;
  }

  .dashboard-hero-card {
    gap: 7px;
    padding: 8px;
  }

  .dashboard-hero-rank-insignia {
    width: 52px !important;
    height: 52px !important;
  }

  .dashboard-hero-metric {
    min-height: 54px;
    padding: 8px;
  }

  .dashboard-readiness-card {
    min-height: 82px;
    grid-template-columns: 52px minmax(0, 1fr);
    padding: 8px;
  }

  .dashboard-readiness-gauge {
    width: 48px;
  }

  .dashboard-readiness-gauge::before {
    width: 38px;
  }

  .dashboard-command-card {
    min-height: 64px;
  }
}

/* =========================================================
   DASHBOARD ULTRA-COMPACT CONTENT DENSITY PASS
   Targets dashboard-only oversized sections seen in the
   Command Queue / Operational Timeline / Command Feed view.
   ========================================================= */

/* Keep dashboard module shells lean without affecting other modules. */
#dashboard .module-panel {
  padding: 8px 9px;
}

#dashboard .module-panel + .module-panel {
  margin-top: 7px;
}

/* Dashboard headers should read like command strips, not full cards. */
#dashboard .module-header {
  min-height: 42px;
  padding: 6px 8px 6px 10px;
  margin-bottom: 6px;
  gap: 8px;
}

#dashboard .module-header .eyebrow {
  margin-bottom: 1px;
  font-size: 7px;
}

#dashboard .module-header h3 {
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1;
}

#dashboard .module-header .module-description {
  margin-top: 1px;
  font-size: 9px;
  line-height: 1.2;
}

/* Empty dashboard modules are informational states, not feature cards. */
#dashboard .module-empty-state {
  min-height: 0;
  padding: 13px 12px;
}

#dashboard .module-empty-state::before {
  margin-bottom: 4px;
  font-size: 7px;
  letter-spacing: 0.12em;
}

#dashboard .module-empty-state h3 {
  font-size: 18px;
  line-height: 1.05;
}

#dashboard .module-empty-state p {
  margin-top: 5px;
  font-size: 10px;
  line-height: 1.25;
}

/* Collapse the no-pending-access strip even further. */
#dashboard-access-request-alert:has(
  .personnel-status.status-inactive
) {
  padding: 7px 9px;
}

#dashboard-access-request-alert:has(
  .personnel-status.status-inactive
) .module-header {
  min-height: 34px;
}

#dashboard-access-request-alert:has(
  .personnel-status.status-inactive
) h3 {
  font-size: 16px;
}

#dashboard-access-request-alert:has(
  .personnel-status.status-inactive
) .module-description {
  font-size: 9px;
}

/* Dashboard KPI cards should behave like compact readout tiles. */
#dashboard .card-grid {
  gap: 7px;
  margin-top: 7px;
}

#dashboard .card-grid .card {
  min-height: 54px;
  padding: 8px 10px;
  justify-content: center;
  gap: 5px;
}

#dashboard .card-grid .card span {
  font-size: 8px;
  line-height: 1;
}

#dashboard .card-grid .card strong {
  margin-top: 2px;
  font-size: 20px;
  line-height: 1;
}

#dashboard .card-grid .card::after {
  right: 8px;
  bottom: 8px;
  width: 22px;
  height: 22px;
}

/* Compact dashboard command/readiness blocks. */
#dashboard .dashboard-command-attention {
  gap: 6px;
  margin-top: 6px;
}

#dashboard .dashboard-command-card {
  min-height: 56px;
  padding: 7px 8px;
}

#dashboard .dashboard-command-card > strong {
  font-size: 19px;
}

#dashboard .dashboard-readiness-panel {
  margin-top: 7px;
}

#dashboard .dashboard-readiness-grid {
  gap: 7px;
}

#dashboard .dashboard-readiness-card {
  min-height: 76px;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 8px;
  padding: 8px;
}

#dashboard .dashboard-readiness-gauge {
  width: 52px;
}

#dashboard .dashboard-readiness-gauge::before {
  width: 41px;
}

#dashboard .dashboard-readiness-gauge-inner strong {
  font-size: 15px;
}

#dashboard .dashboard-readiness-copy .eyebrow {
  margin-bottom: 2px;
  font-size: 7px;
}

#dashboard .dashboard-readiness-copy > strong {
  font-size: 10px;
}

#dashboard .dashboard-readiness-bar {
  height: 4px;
  margin-top: 5px;
}

/* Reduce dashboard section separation so the screen reads as one console. */
#dashboard .content {
  padding-top: 8px;
}

#dashboard .module-panel {
  margin-bottom: 7px;
}

/* Keep timeline/list rows compact when they are rendered inside dashboard modules. */
#dashboard .module-section,
#dashboard .module-action-bar,
#dashboard .module-status-strip {
  padding-top: 7px;
  padding-bottom: 7px;
}

@media (max-width: 860px) {
  #dashboard .module-panel {
    padding: 7px;
  }

  #dashboard .module-header {
    min-height: 38px;
    padding: 6px 7px;
  }

  #dashboard .module-empty-state {
    padding: 12px 10px;
  }

  #dashboard .card-grid .card {
    min-height: 52px;
  }
}

@media (max-width: 620px) {
  #dashboard .module-panel {
    padding: 6px;
  }

  #dashboard .module-header {
    min-height: 0;
    padding: 6px 7px;
  }

  #dashboard .module-empty-state {
    padding: 11px 9px;
  }

  #dashboard .module-empty-state h3 {
    font-size: 17px;
  }

  #dashboard .module-empty-state p {
    font-size: 9px;
  }

  #dashboard .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #dashboard .card-grid .card {
    min-height: 50px;
    padding: 7px 8px;
  }

  #dashboard .card-grid .card strong {
    font-size: 18px;
  }
}

/* =========================================================
   HADES TYPOGRAPHY LEGIBILITY PASS
   Keeps the compact layout while improving scan speed,
   contrast, and readability across the authenticated UI.
   ========================================================= */

:root {
  --font-ui:
    Arial,
    Helvetica,
    sans-serif;

  --font-technical:
    Consolas,
    "Courier New",
    monospace;
}

/* Use a clean sans-serif for normal interface reading. */
body {
  font-family: var(--font-ui);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Reserve monospace for technical labels and system metadata. */
.eyebrow,
.status,
.hades-command-status-item,
.gateway-system-bar,
.gateway-terminal-output,
.gateway-brand-panel::after,
.module-status-strip span,
.personnel-status,
.dashboard-readiness-status,
.dashboard-readiness-gauge-inner span,
.dashboard-readiness-copy .eyebrow,
.dashboard-command-card .eyebrow,
.dashboard-hero-copy .eyebrow,
.dashboard-hero-meta span,
.dashboard-hero-metric span,
.module-summary-card span,
.operation-workspace-summary-item span,
.operation-workspace-tab > strong,
.gateway-feature-status,
.gateway-unit-grid span,
.gateway-footer span,
.gateway-public-status-strip span,
.gateway-public-status-strip strong,
.gateway-login-security,
.gateway-login-fields label,
.gateway-login-panel .security-note {
  font-family: var(--font-technical);
}

/* Improve general secondary-text contrast. */
.subtitle,
.muted,
.module-description,
.admin-card p:not(.eyebrow),
.module-empty-state p,
.personnel-table td,
.gateway-tagline,
.gateway-feature-card > p:not(.eyebrow),
.gateway-recruitment-hero p:not(.eyebrow),
.gateway-recruitment-grid .gateway-feature-card > p:not(.eyebrow) {
  color: #b2c0b5;
}

/* Navigation needs to be readable at a glance. */
.nav-item {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.025em;
}

.sidebar-brand strong,
.sidebar-brand span,
.operator span,
.operator small,
button,
input,
select,
textarea {
  font-family: var(--font-ui);
}

/* Buttons stay compact but become easier to read. */
.module-primary-button,
.personnel-action-button,
.gateway-primary-button,
.gateway-secondary-button,
.operation-workspace-tab,
.module-tab {
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: 0.025em;
}

.module-primary-button {
  font-size: 11px;
}

.personnel-action-button {
  font-size: 10.5px;
}

/* Tables: keep density, remove eye strain. */
.personnel-table th {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.045em;
}

.personnel-table td {
  font-family: var(--font-ui);
  font-size: 11.5px;
  line-height: 1.35;
}

.personnel-toolbar label,
.personnel-toolbar span {
  font-family: var(--font-ui);
}

.personnel-toolbar label {
  font-size: 10px;
}

.personnel-toolbar span {
  font-size: 11px;
}

/* Form labels and values should not look like microprint. */
.auth-panel label,
.admin-personnel-form label {
  font-family: var(--font-ui);
  font-size: 10.5px;
  letter-spacing: 0.045em;
}

.auth-panel input,
.admin-personnel-form input,
.admin-personnel-form select,
.admin-personnel-form textarea,
.personnel-toolbar input,
select,
#jacket-member-select,
#jacket-member-search {
  font-family: var(--font-ui);
  font-size: 12px;
}

/* Module/page headers remain compact but clearer. */
.module-header .eyebrow {
  font-size: 9px;
  letter-spacing: 0.12em;
}

.module-header h3 {
  font-weight: 700;
  letter-spacing: 0;
}

.module-header .module-description {
  font-family: var(--font-ui);
  font-size: 11.5px;
  line-height: 1.35;
}

.module-section-header p {
  font-family: var(--font-ui);
  font-size: 10.5px;
  line-height: 1.35;
}

/* Dashboard: restore readable type without restoring oversized boxes. */
#dashboard .module-header .eyebrow,
#dashboard .dashboard-readiness-copy .eyebrow {
  font-size: 8.5px;
  letter-spacing: 0.1em;
}

#dashboard .module-header h3 {
  font-size: 18px;
}

#dashboard .module-header .module-description {
  font-size: 10px;
}

#dashboard .module-empty-state::before {
  font-family: var(--font-technical);
  font-size: 8.5px;
  letter-spacing: 0.12em;
}

#dashboard .module-empty-state h3 {
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.15;
}

#dashboard .module-empty-state p {
  font-family: var(--font-ui);
  font-size: 10.5px;
  line-height: 1.35;
}

#dashboard .card-grid .card span {
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.045em;
}

#dashboard .card-grid .card strong {
  font-family: var(--font-ui);
  font-size: 19px;
  font-weight: 700;
}

#dashboard .dashboard-hero-copy h2,
#dashboard .dashboard-hero-callsign,
#dashboard .dashboard-hero-metric strong,
#dashboard .dashboard-command-card > strong,
#dashboard .dashboard-readiness-copy > strong,
#dashboard .dashboard-readiness-gauge-inner strong {
  font-family: var(--font-ui);
}

#dashboard .dashboard-hero-copy h2 {
  font-weight: 700;
}

#dashboard .dashboard-hero-callsign {
  font-weight: 700;
  letter-spacing: 0.055em;
}

#dashboard .dashboard-hero-meta span {
  font-size: 8.5px;
  letter-spacing: 0.06em;
}

#dashboard .dashboard-hero-metric span {
  font-size: 8.5px;
}

#dashboard .dashboard-readiness-gauge-inner span {
  font-size: 8px;
}

#dashboard .dashboard-readiness-copy > strong {
  font-size: 11px;
  line-height: 1.25;
}

#dashboard .dashboard-command-card > span {
  font-family: var(--font-ui);
  font-size: 9.5px;
  letter-spacing: 0.04em;
}

/* Command status bar was especially small in the screenshot. */
.hades-command-status-item > span:not(.hades-command-status-dot) {
  font-size: 8.5px;
  letter-spacing: 0.08em;
}

.hades-command-status-item > strong {
  font-family: var(--font-ui);
  font-size: 9.5px;
  letter-spacing: 0.04em;
}

/* Operation workspace labels and values. */
.operation-workspace-summary-item span {
  font-size: 8.5px;
}

.operation-workspace-summary-item strong {
  font-family: var(--font-ui);
  font-size: 13px;
}

.operation-workspace-tab > span:first-child {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.035em;
}

/* Personnel Jacket readout. */
.jacket-snapshot-detail dt {
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.045em;
}

.jacket-snapshot-detail dd,
.jacket-snapshot-award > span:last-child,
.jacket-snapshot-callsign {
  font-family: var(--font-ui);
}

.jacket-snapshot-detail dd {
  font-size: 11.5px;
}

.jacket-snapshot-award > span:last-child {
  font-size: 9.5px;
}

/* Admin cards should scan quickly. */
.admin-card h4 {
  font-size: 16px;
}

.admin-card p:not(.eyebrow) {
  font-family: var(--font-ui);
  font-size: 11.5px;
  line-height: 1.4;
}

/* Keep public gateway readable as well, without changing its layout. */
.gateway-tagline,
.gateway-feature-card > p:not(.eyebrow),
.gateway-recruitment-hero p:not(.eyebrow),
.gateway-recruitment-grid .gateway-feature-card > p:not(.eyebrow),
.gateway-status-list dt,
.gateway-unit-grid small,
.gateway-footer strong {
  font-family: var(--font-ui);
}

.gateway-terminal-output p {
  font-size: 10.5px;
  line-height: 1.45;
}

.gateway-status-list dt {
  font-size: 11px;
}

/* Mobile: never let compact mode turn into unreadable microtext. */
@media (max-width: 620px) {
  .nav-item {
    font-size: 11px;
  }

  .module-header .module-description {
    font-size: 10.5px;
  }

  #dashboard .module-empty-state h3 {
    font-size: 16px;
  }

  #dashboard .module-empty-state p {
    font-size: 10px;
  }

  #dashboard .card-grid .card span {
    font-size: 8.5px;
  }

  #dashboard .card-grid .card strong {
    font-size: 18px;
  }

  .hades-command-status-item > span:not(.hades-command-status-dot) {
    font-size: 8px;
  }

  .hades-command-status-item > strong {
    font-size: 9px;
  }
}
/* =========================================================
   COMPACT MEDIA LIBRARY + FULLSCREEN VIEWER
   ========================================================= */

.media-library-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 12px;

  margin-top: 12px;
}

.media-library-card {
  min-width: 0;
  min-height: 0;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 9px;

  padding: 10px;

  background:
    linear-gradient(
      145deg,
      rgba(12, 21, 15, 0.98),
      rgba(5, 10, 7, 0.99)
    );

  border: 1px solid var(--line);
  border-radius: var(--radius-sm);

  overflow: hidden;
}

.media-library-card:hover {
  transform: none;

  border-color: var(--line-strong);

  background:
    linear-gradient(
      145deg,
      rgba(15, 26, 18, 0.99),
      rgba(6, 12, 8, 0.99)
    );
}

.media-preview-button {
  position: relative;

  width: 100%;
  min-width: 0;
  aspect-ratio: 16 / 9;

  display: block;

  padding: 0;
  margin: 0;

  overflow: hidden;

  appearance: none;
  -webkit-appearance: none;

  background:
    linear-gradient(
      145deg,
      #071009,
      #020503
    );

  color: var(--text);

  border: 1px solid var(--line);
  border-radius: var(--radius-sm);

  cursor: pointer;

  box-shadow:
    inset 0 0 28px rgba(0, 0, 0, 0.32);

  transition:
    border-color 0.16s ease,
    transform 0.16s ease,
    box-shadow 0.16s ease;
}

.media-preview-button:hover {
  transform: translateY(-1px);

  border-color: var(--green-dim);

  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.28),
    inset 0 0 28px rgba(0, 0, 0, 0.32);
}

.media-preview-button:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.media-card-preview-image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  background: #020503;

  transition:
    transform 0.18s ease,
    filter 0.18s ease;
}

.media-preview-button:hover .media-card-preview-image {
  transform: scale(1.02);

  filter: brightness(1.05);
}

.media-preview-button::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      transparent 48%,
      rgba(0, 0, 0, 0.52) 100%
    );

  pointer-events: none;
}

.media-preview-play-icon {
  position: absolute;
  z-index: 2;

  left: 50%;
  top: 50%;

  width: 46px;
  height: 46px;

  display: grid;
  place-items: center;

  padding-left: 3px;

  color: #041007;

  background:
    linear-gradient(
      180deg,
      var(--green-bright),
      var(--green)
    );

  border: 1px solid var(--green-bright);
  border-radius: 50%;

  font-size: 18px;
  line-height: 1;

  box-shadow:
    0 0 22px rgba(145, 242, 170, 0.2),
    0 10px 24px rgba(0, 0, 0, 0.34);

  transform:
    translate(-50%, -50%);
}

.media-preview-action {
  position: absolute;
  z-index: 2;

  left: 10px;
  bottom: 8px;

  color: var(--green-bright);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  text-shadow:
    0 1px 4px rgba(0, 0, 0, 0.9);
}

.media-preview-generic {
  display: grid;
  place-items: center;

  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(145, 242, 170, 0.08),
      transparent 48%
    ),
    linear-gradient(
      145deg,
      #071009,
      #020503
    );
}

.media-preview-unavailable {
  min-height: 140px;

  display: grid;
  place-items: center;

  color: var(--text-faint);

  background:
    rgba(3, 7, 4, 0.72);

  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);

  font-size: 11px;
}

.media-card-heading {
  min-width: 0;

  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.media-card-heading > div {
  min-width: 0;
}

.media-card-heading .eyebrow {
  margin-bottom: 3px;
}

.media-card-heading h4 {
  margin: 0;

  overflow: hidden;

  color: var(--text);

  font-size: 16px;
  line-height: 1.15;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-card-heading .personnel-status {
  flex: 0 0 auto;
}

.media-card-description {
  display: -webkit-box;

  margin: 0;

  overflow: hidden;

  font-size: 11px;
  line-height: 1.35;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.media-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.media-card-admin-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;

  margin-top: auto;
  padding-top: 2px;
}


/* ---------------------------------------------------------
   MEDIA VIEWER OVERLAY
   --------------------------------------------------------- */

.media-viewer-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;

  display: grid;
  place-items: center;

  padding: 18px;

  background:
    rgba(0, 0, 0, 0.88);

  backdrop-filter: blur(8px);
}

.media-viewer-shell {
  width: min(1180px, 96vw);
  max-height: 94vh;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      rgba(11, 19, 13, 0.995),
      rgba(3, 7, 4, 0.995)
    );

  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--green);
  border-radius: var(--radius-md);

  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.72),
    inset 0 0 50px rgba(145, 242, 170, 0.02);
}

.media-viewer-shell:fullscreen {
  width: 100vw;
  height: 100vh;
  max-height: none;

  border: 0;
  border-radius: 0;

  background: #010201;
}

.media-viewer-header {
  flex: 0 0 auto;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  padding: 11px 13px;

  border-bottom: 1px solid var(--line);

  background:
    rgba(7, 13, 9, 0.94);
}

.media-viewer-header h3 {
  margin: 0;

  font-size: 20px;
}

.media-viewer-header .eyebrow {
  margin-bottom: 3px;
}

.media-viewer-actions {
  flex: 0 0 auto;

  display: flex;
  gap: 7px;
}

.media-viewer-stage {
  min-height: 0;

  display: grid;
  place-items: center;

  flex: 1 1 auto;

  padding: 10px;

  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(145, 242, 170, 0.035),
      transparent 55%
    ),
    #010201;
}

.media-viewer-youtube,
.media-viewer-video {
  display: block;

  width: min(100%, 1100px);
  max-height: calc(94vh - 150px);
  aspect-ratio: 16 / 9;

  background: #000;

  border: 0;
  border-radius: var(--radius-sm);
}

.media-viewer-image {
  display: block;

  max-width: 100%;
  max-height: calc(94vh - 150px);

  object-fit: contain;

  background: #000;

  border-radius: var(--radius-sm);
}

.media-viewer-shell:fullscreen .media-viewer-youtube,
.media-viewer-shell:fullscreen .media-viewer-video {
  width: 100%;
  height: 100%;
  max-height: none;

  border-radius: 0;
}

.media-viewer-shell:fullscreen .media-viewer-image {
  max-width: 100%;
  max-height: 100%;

  border-radius: 0;
}

.media-viewer-footer {
  flex: 0 0 auto;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  padding: 9px 12px;

  border-top: 1px solid var(--line);

  background:
    rgba(6, 11, 8, 0.94);
}

.media-viewer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.media-viewer-footer .module-description {
  max-width: 620px;

  margin: 0;

  font-size: 11px;
  text-align: right;
}

.media-viewer-unavailable {
  width: min(600px, 100%);
}


/* ---------------------------------------------------------
   MEDIA RESPONSIVE
   --------------------------------------------------------- */

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


@media (max-width: 700px) {
  .media-library-grid {
    grid-template-columns: 1fr;
  }

  .media-library-card {
    padding: 9px;
  }

  .media-card-heading h4 {
    font-size: 15px;
  }

  .media-viewer-overlay {
    padding: 8px;
  }

  .media-viewer-shell {
    width: 100%;
    max-height: 97vh;
  }

  .media-viewer-header {
    align-items: stretch;
    flex-direction: column;

    padding: 10px;
  }

  .media-viewer-actions {
    width: 100%;
  }

  .media-viewer-actions button {
    flex: 1 1 0;
  }

  .media-viewer-stage {
    padding: 6px;
  }

  .media-viewer-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .media-viewer-footer .module-description {
    max-width: none;

    text-align: left;
  }
}
/* =========================================================
   SECONDARY TEXT READABILITY PASS
   ========================================================= */

.module-description {
  color: #b8c5bb;

  font-size: 12px;
  line-height: 1.45;
}

.module-header .module-description {
  color: #bcc9bf;

  font-size: 12px;
  line-height: 1.4;
}

#media-library-module .module-description,
.media-module .module-description {
  color: #c3cec5;

  font-size: 12px;
  line-height: 1.45;
}

.media-card-description {
  color: #b8c5bb;

  font-size: 11px;
  line-height: 1.4;
}

.personnel-table td,
.personnel-toolbar span,
.gateway-status-list dt,
.dashboard-hero-meta span,
.dashboard-readiness-copy > strong,
.dashboard-command-card > span {
  color: #b2c0b5;
}

.text-faint,
.module-status-strip span,
.operation-workspace-summary-item span,
.module-summary-card span,
.dashboard-readiness-gauge-inner span,
.dashboard-career-identity span,
.hades-command-status-item > span:not(
  .hades-command-status-dot
) {
  color: #94a497;
}

@media (max-width: 620px) {
  .module-description,
  .module-header .module-description,
  #media-library-module .module-description,
  .media-module .module-description {
    font-size: 11px;
    line-height: 1.4;
  }
}
/* =========================================================
   GLOBAL HEADER SUPPORT TEXT LEGIBILITY
   Keep compact layouts; make subtitles readable.
   ========================================================= */

.module-header .module-description,
.module-panel > .module-description,
.dashboard-hero-subtitle,
.dashboard-command-header p,
.dashboard-section-header p,
.dashboard-section-title + p,
.dashboard-command-card-header p,
.operation-workspace-header p,
.personnel-jacket-header p,
.admin-section-header p,
.card-header p,
.section-header p {
  color: #c7d1c9 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
  letter-spacing: 0.005em !important;
}

.dashboard-hero-subtitle {
  font-size: 14px !important;
}

.module-header h1 + p,
.module-header h2 + p,
.module-header h3 + p,
.module-header h4 + p,
.card h1 + p,
.card h2 + p,
.card h3 + p,
.card h4 + p {
  color: #c7d1c9 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
}

@media (max-width: 620px) {
  .module-header .module-description,
  .module-panel > .module-description,
  .dashboard-hero-subtitle,
  .dashboard-command-header p,
  .dashboard-section-header p,
  .dashboard-section-title + p,
  .dashboard-command-card-header p,
  .operation-workspace-header p,
  .personnel-jacket-header p,
  .admin-section-header p,
  .card-header p,
  .section-header p,
  .module-header h1 + p,
  .module-header h2 + p,
  .module-header h3 + p,
  .module-header h4 + p,
  .card h1 + p,
  .card h2 + p,
  .card h3 + p,
  .card h4 + p {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  .dashboard-hero-subtitle {
    font-size: 13px !important;
  }
}
/* =========================================================
   QUALIFICATIONS CATALOG COMPACT CARDS
   ========================================================= */

.qualification-catalog-grid,
.qualifications-catalog-grid {
  gap: 8px !important;
}

.qualification-card,
.qualification-standard-card,
.qualifications-card {
  min-height: 0 !important;
  padding: 8px 11px !important;
  gap: 5px !important;
}

.qualification-card .module-header,
.qualification-standard-card .module-header,
.qualifications-card .module-header {
  min-height: 0 !important;
  padding: 7px 10px !important;
  margin: 0 0 5px !important;
}

.qualification-card h3,
.qualification-card h4,
.qualification-standard-card h3,
.qualification-standard-card h4,
.qualifications-card h3,
.qualifications-card h4 {
  margin: 0 !important;
  line-height: 1.15 !important;
}

.qualification-card .module-description,
.qualification-standard-card .module-description,
.qualifications-card .module-description {
  margin: 3px 0 0 !important;
  line-height: 1.3 !important;
}

.qualification-card .personnel-status,
.qualification-standard-card .personnel-status,
.qualifications-card .personnel-status {
  min-height: 20px !important;
  padding: 3px 8px !important;
}

.qualification-card > div:last-child,
.qualification-standard-card > div:last-child,
.qualifications-card > div:last-child {
  margin-top: 2px !important;
}

/* Fallback for catalog cards built from generic .card elements */
.module-panel .card:has(.personnel-status.status-active) {
  min-height: 0;
}

@media (max-width: 620px) {
  .qualification-card,
  .qualification-standard-card,
  .qualifications-card {
    padding: 7px 9px !important;
  }
}
/* =========================================================
   QUALIFICATION STANDARD ROW ALIGNMENT
   ========================================================= */

.qualification-compact-row {
  display: grid !important;
  grid-template-columns:
    minmax(300px, 0.95fr)
    minmax(260px, 1.35fr)
    minmax(250px, auto)
    auto !important;

  align-items: center !important;
  column-gap: 14px !important;
  row-gap: 6px !important;

  min-height: 0 !important;

  padding:
    7px
    10px !important;
}

.qualification-compact-row > div:first-child {
  min-width: 0;

  display: grid !important;
  grid-template-columns:
    58px
    minmax(0, 1fr);

  align-items: center;
  gap: 8px !important;
}

.qualification-compact-row > div:first-child .eyebrow {
  margin: 0 !important;

  color: var(--gold);

  font-size: 9px;
  letter-spacing: 0.12em;

  white-space: nowrap;
}

.qualification-compact-row > div:first-child > strong {
  min-width: 0;

  overflow: hidden;

  font-size: 16px !important;
  line-height: 1.15 !important;

  text-overflow: ellipsis;
  white-space: nowrap !important;
}

.qualification-compact-row > .module-description {
  min-width: 0 !important;

  margin: 0 !important;

  overflow: hidden;

  color: #c4cec6 !important;

  font-size: 12px !important;
  line-height: 1.3 !important;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.qualification-compact-row .operation-credit-assignment-list {
  min-width: 0;

  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;

  justify-content: flex-start;

  gap: 5px !important;

  margin: 0 !important;
}

.qualification-compact-row .operation-credit-assignment-list .personnel-status {
  flex: 0 0 auto;

  min-height: 20px !important;

  padding:
    3px
    7px !important;

  font-size: 9px;
}

.qualification-compact-row > .personnel-status.status-active {
  justify-self: end;

  margin-left: 0 !important;

  white-space: nowrap;
}


/* ---------------------------------------------------------
   QUALIFICATION ROW RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 1180px) {
  .qualification-compact-row {
    grid-template-columns:
      minmax(260px, 1fr)
      minmax(220px, 1.2fr)
      auto !important;
  }

  .qualification-compact-row .operation-credit-assignment-list {
    grid-column:
      1 / 3;

    padding-left: 66px;
  }

  .qualification-compact-row > .personnel-status.status-active {
    grid-column: 3;
    grid-row: 1 / 3;

    align-self: center;
  }
}


@media (max-width: 760px) {
  .qualification-compact-row {
    grid-template-columns:
      minmax(0, 1fr)
      auto !important;

    column-gap: 10px !important;
  }

  .qualification-compact-row > div:first-child {
    grid-column: 1;

    grid-template-columns:
      54px
      minmax(0, 1fr);
  }

  .qualification-compact-row > .module-description {
    grid-column:
      1 / -1;

    white-space: normal;

    padding-left: 62px;
  }

  .qualification-compact-row .operation-credit-assignment-list {
    grid-column:
      1 / -1;

    flex-wrap: wrap !important;

    padding-left: 62px;
  }

  .qualification-compact-row > .personnel-status.status-active {
    grid-column: 2;
    grid-row: 1;

    align-self: center;
  }
}


@media (max-width: 520px) {
  .qualification-compact-row {
    padding:
      7px
      8px !important;
  }

  .qualification-compact-row > div:first-child {
    grid-template-columns: 1fr;

    gap: 2px !important;
  }

  .qualification-compact-row > div:first-child > strong {
    white-space: normal !important;
  }

  .qualification-compact-row > .module-description,
  .qualification-compact-row .operation-credit-assignment-list {
    padding-left: 0;
  }
}
/* =========================================================
   PUBLIC LANDING PAGE REBUILD
   Match redesigned index.html without affecting HADES OS.
   ========================================================= */

#gateway-screen {
  min-height: 100vh;
}

#gateway-entry {
  min-height: auto;
  padding:
    16px
    clamp(18px, 3vw, 42px)
    22px;
}

#gateway-entry .gateway-system-bar {
  min-height: 34px;
  margin-bottom: 14px;
  padding: 6px 10px;
}

#gateway-entry .gateway-entry-grid {
  width: min(1260px, 100%);
  margin: 0 auto;

  display: grid;
  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(380px, 0.8fr);

  align-items: center;
  gap: clamp(28px, 4vw, 56px);
}

#gateway-entry .gateway-brand-panel {
  min-width: 0;
  min-height: 0;

  display: grid;
  grid-template-columns:
    150px
    minmax(0, 1fr);

  align-items: center;
  gap: 24px;

  padding: 10px 0;

  background: transparent;
  border: 0;
  box-shadow: none;
}

#gateway-entry .gateway-logo {
  width: 150px;
  height: 150px;

  object-fit: contain;

  align-self: center;

  border-radius: 8px;

  filter:
    drop-shadow(
      0 14px 26px
      rgba(0, 0, 0, 0.45)
    );
}

#gateway-entry .gateway-brand-copy {
  min-width: 0;
}

#gateway-entry .gateway-brand-copy .eyebrow {
  margin-bottom: 7px;
}

#gateway-entry #gateway-title {
  max-width: 700px;

  margin: 0;

  color: var(--green-bright);

  font-family: var(--font-display);

  font-size:
    clamp(34px, 4.1vw, 62px);

  font-weight: 800;

  line-height: 0.98;

  letter-spacing: -0.035em;

  text-transform: uppercase;
}

#gateway-entry .gateway-tagline {
  max-width: 690px;

  margin:
    16px
    0
    0;

  color: #c7d2c9;

  font-size: 16px;
  line-height: 1.55;
}

#gateway-entry .gateway-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  margin-top: 18px;
}

#gateway-entry .gateway-hero-actions button {
  min-height: 38px;
  padding: 8px 14px;
}

#gateway-entry .gateway-hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;

  margin-top: 12px;
}

#gateway-entry .gateway-hero-points span {
  display: inline-flex;
  align-items: center;

  min-height: 24px;

  padding: 4px 8px;

  color: #aab8ad;

  background:
    rgba(7, 15, 9, 0.76);

  border: 1px solid var(--line);
  border-radius: 999px;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 0.05em;
  text-transform: uppercase;
}


/* ---------------------------------------------------------
   Landing login terminal
   --------------------------------------------------------- */

#gateway-entry .gateway-terminal {
  min-width: 0;
  min-height: 0;

  align-self: center;

  padding: 12px;

  border-radius: 10px;
}

#gateway-entry .gateway-terminal-header {
  min-height: 0;

  padding:
    2px
    0
    10px;

  margin-bottom: 9px;
}

#gateway-entry .gateway-terminal-header h2 {
  margin: 0;

  font-size: 22px;
}

#gateway-entry .gateway-terminal-output {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 5px;

  padding: 8px 10px;
  margin-bottom: 10px;

  min-height: 0;

  border-radius: 6px;
}

#gateway-entry .gateway-terminal-output p {
  margin: 0;

  font-size: 9px;
  line-height: 1.35;

  white-space: nowrap;
}

#gateway-entry .gateway-login-panel {
  min-height: 0;

  padding: 12px;

  border-radius: 7px;
}

#gateway-entry .gateway-login-heading {
  margin-bottom: 9px;
}

#gateway-entry .gateway-login-heading h3 {
  margin: 0;

  font-size: 18px;
}

#gateway-entry .gateway-login-fields {
  display: grid;
  grid-template-columns:
    86px
    minmax(0, 1fr);

  align-items: center;
  gap:
    8px
    10px;
}

#gateway-entry .gateway-login-fields label {
  margin: 0;

  font-size: 9px;
}

#gateway-entry .gateway-login-fields input {
  min-height: 36px;
  height: 36px;

  padding:
    7px
    10px;
}

#gateway-entry #login-button {
  width: 100%;

  min-height: 38px;

  margin-top: 10px;
}

#gateway-entry .security-note {
  margin:
    10px
    0
    0;

  color: #879589;

  font-size: 9px;
  line-height: 1.4;
}

#gateway-entry .gateway-scroll-cue {
  display: block;

  width: fit-content;

  margin:
    16px
    auto
    0;

  font-size: 10px;
}


/* ---------------------------------------------------------
   Public content cleanup
   --------------------------------------------------------- */

#gateway-public-content {
  padding:
    34px
    clamp(18px, 3vw, 42px)
    44px;
}

#gateway-public-content > * {
  width: min(1260px, 100%);
  margin-left: auto;
  margin-right: auto;
}

#gateway-public-content .gateway-section-heading {
  max-width: 820px;
  margin-bottom: 20px;
}

#gateway-public-content .gateway-section-heading h2 {
  margin:
    2px
    0
    7px;

  font-size:
    clamp(30px, 3.2vw, 44px);
}

#gateway-public-content .gateway-section-heading > p:last-child {
  color: #bdc9bf;

  font-size: 13px;
  line-height: 1.5;
}

#gateway-public-content .gateway-recruitment-grid {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 10px;
}

#gateway-public-content .gateway-feature-card {
  min-height: 0;

  padding: 14px;

  border-radius: 8px;
}

#gateway-public-content .gateway-feature-card h3 {
  margin:
    3px
    0
    6px;

  font-size: 18px;
}

#gateway-public-content .gateway-feature-card > p:last-child {
  margin-bottom: 0;

  color: #bcc8be;

  font-size: 12px;
  line-height: 1.45;
}

#gateway-public-content .gateway-recruitment-hero {
  min-height: 0;

  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items: center;
  gap: 24px;

  margin-top: 12px;

  padding: 16px;
}

#gateway-public-content .gateway-recruitment-hero h3 {
  margin:
    3px
    0
    6px;

  font-size: 22px;
}

#gateway-public-content .gateway-recruitment-hero p {
  max-width: 760px;

  margin: 0;

  color: #c1ccc3;

  font-size: 13px;
  line-height: 1.5;
}

#gateway-public-content .gateway-recruitment-actions {
  min-width: 210px;
}

#gateway-public-content .gateway-recruitment-actions span {
  display: block;

  max-width: 240px;

  margin-top: 6px;

  color: #8f9e91;

  font-size: 10px;
  line-height: 1.4;
}

#gateway-public-content .gateway-feature-card-media {
  min-height: 0;

  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(300px, 0.7fr);

  align-items: center;
  gap: 18px;

  margin-top: 12px;
}

#gateway-public-content .gateway-media-placeholder {
  min-height: 92px;

  display: grid;
  place-items: center;

  padding: 14px;
}

#gateway-public-content .gateway-public-status-strip {
  margin-top: 12px;
}


/* ---------------------------------------------------------
   Unit cards
   --------------------------------------------------------- */

#gateway-public-content .gateway-units-section {
  margin-top: 34px;
}

#gateway-public-content .gateway-unit-grid {
  display: grid;
  grid-template-columns:
    repeat(5, minmax(0, 1fr));

  gap: 10px;
}

#gateway-public-content .gateway-unit-card {
  min-height: 0;

  display: grid;
  grid-template-columns:
    64px
    minmax(0, 1fr);

  grid-template-areas:
    "patch tier"
    "patch name"
    "patch detail";

  align-items: center;
  column-gap: 10px;
  row-gap: 2px;

  padding: 10px;
}

#gateway-public-content .gateway-unit-patch {
  grid-area: patch;

  width: 64px;
  height: 64px;

  object-fit: contain;
}

#gateway-public-content .gateway-unit-card > span {
  grid-area: tier;

  font-size: 8px;
}

#gateway-public-content .gateway-unit-card > strong {
  grid-area: name;

  font-size: 14px;
  line-height: 1.15;
}

#gateway-public-content .gateway-unit-card > small {
  grid-area: detail;

  color: #9eaca1;

  font-size: 10px;
  line-height: 1.3;
}


/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */

#gateway-public-content .gateway-footer {
  margin-top: 30px;
  padding: 14px 0 0;
}

#gateway-public-content .gateway-footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}


/* ---------------------------------------------------------
   Landing responsive
   --------------------------------------------------------- */

@media (max-width: 1080px) {
  #gateway-entry .gateway-entry-grid {
    grid-template-columns: 1fr;
  }

  #gateway-entry .gateway-brand-panel {
    grid-template-columns:
      120px
      minmax(0, 1fr);
  }

  #gateway-entry .gateway-logo {
    width: 120px;
    height: 120px;
  }

  #gateway-entry #gateway-title {
    font-size:
      clamp(34px, 7vw, 54px);
  }

  #gateway-entry .gateway-terminal {
    width: min(720px, 100%);
    justify-self: center;
  }

  #gateway-public-content .gateway-recruitment-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  #gateway-public-content .gateway-unit-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}


@media (max-width: 700px) {
  #gateway-entry {
    padding:
      10px
      12px
      18px;
  }

  #gateway-entry .gateway-system-bar {
    gap: 8px;

    font-size: 8px;
  }

  #gateway-entry .gateway-brand-panel {
    grid-template-columns: 1fr;

    justify-items: center;

    text-align: center;

    gap: 12px;
  }

  #gateway-entry .gateway-logo {
    width: 108px;
    height: 108px;
  }

  #gateway-entry #gateway-title {
    font-size:
      clamp(32px, 11vw, 46px);

    line-height: 1;
  }

  #gateway-entry .gateway-tagline {
    margin-top: 12px;

    font-size: 14px;
  }

  #gateway-entry .gateway-hero-actions,
  #gateway-entry .gateway-hero-points {
    justify-content: center;
  }

  #gateway-entry .gateway-terminal-output {
    grid-template-columns: 1fr;
  }

  #gateway-entry .gateway-terminal-output p {
    white-space: normal;
  }

  #gateway-entry .gateway-login-fields {
    grid-template-columns: 1fr;

    gap: 4px;
  }

  #gateway-entry .gateway-login-fields input {
    margin-bottom: 5px;
  }

  #gateway-public-content {
    padding:
      26px
      12px
      34px;
  }

  #gateway-public-content .gateway-recruitment-grid,
  #gateway-public-content .gateway-feature-card-media,
  #gateway-public-content .gateway-recruitment-hero,
  #gateway-public-content .gateway-unit-grid {
    grid-template-columns: 1fr;
  }

  #gateway-public-content .gateway-recruitment-actions {
    min-width: 0;
  }

  #gateway-public-content .gateway-recruitment-actions span {
    max-width: none;
  }
}

/* =========================================================
   MEMBER SERVICE READINESS FULL CHECKLIST
   Keeps the Promotion Doctrine checklist visible and compact.
   ========================================================= */

/*
  The member career dashboard renders Upcoming Activity and
  Service Readiness as the two panels inside this grid. Target
  only the second panel so command/admin dashboard layouts are
  left untouched.
*/
#dashboard-readiness-panel
> div[style*="grid-template-columns"]
> .module-panel:nth-child(2) {
  min-width: 0;
  overflow: visible;
}

/*
  Render the Service Readiness rows in two compact columns on
  desktop. The renderer currently supplies inline grid styles,
  so these dashboard-only rules intentionally override them.
*/
#dashboard-readiness-panel
> div[style*="grid-template-columns"]
> .module-panel:nth-child(2)
> div[style*="display:grid"][style*="gap:0"] {
  display: grid !important;
  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;
  gap: 0 !important;
  max-height: none;
  overflow: visible !important;
}

#dashboard-readiness-panel
> div[style*="grid-template-columns"]
> .module-panel:nth-child(2)
> div[style*="display:grid"][style*="gap:0"]
> article {
  min-width: 0;
  min-height: 52px !important;
  padding: 7px 9px !important;
  border-bottom: 1px solid var(--line) !important;
}

/* Add a divider between the two checklist columns. */
#dashboard-readiness-panel
> div[style*="grid-template-columns"]
> .module-panel:nth-child(2)
> div[style*="display:grid"][style*="gap:0"]
> article:nth-child(odd) {
  border-right: 1px solid var(--line);
}

/* Let requirement names and progress details wrap instead of clip. */
#dashboard-readiness-panel
> div[style*="grid-template-columns"]
> .module-panel:nth-child(2)
> div[style*="display:grid"][style*="gap:0"]
> article strong,
#dashboard-readiness-panel
> div[style*="grid-template-columns"]
> .module-panel:nth-child(2)
> div[style*="display:grid"][style*="gap:0"]
> article .module-description {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: initial !important;
}

#dashboard-readiness-panel
> div[style*="grid-template-columns"]
> .module-panel:nth-child(2)
> div[style*="display:grid"][style*="gap:0"]
> article strong {
  font-size: 11px !important;
  line-height: 1.2 !important;
}

#dashboard-readiness-panel
> div[style*="grid-template-columns"]
> .module-panel:nth-child(2)
> div[style*="display:grid"][style*="gap:0"]
> article .module-description {
  font-size: 9px !important;
  line-height: 1.25 !important;
}

/* Keep status labels readable without forcing a wide row. */
#dashboard-readiness-panel
> div[style*="grid-template-columns"]
> .module-panel:nth-child(2)
> div[style*="display:grid"][style*="gap:0"]
> article div[style*="justify-content:space-between"] {
  align-items: flex-start !important;
  flex-wrap: wrap;
  row-gap: 2px;
}

/* At tablet size use one column and a short internal scroll area. */
@media (max-width: 860px) {
  #dashboard-readiness-panel
  > div[style*="grid-template-columns"]
  > .module-panel:nth-child(2)
  > div[style*="display:grid"][style*="gap:0"] {
    grid-template-columns: 1fr !important;
    max-height: 310px;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  #dashboard-readiness-panel
  > div[style*="grid-template-columns"]
  > .module-panel:nth-child(2)
  > div[style*="display:grid"][style*="gap:0"]
  > article:nth-child(odd) {
    border-right: 0;
  }
}

/* Phone layout: preserve touch-friendly rows without a giant page. */
@media (max-width: 620px) {
  #dashboard-readiness-panel
  > div[style*="grid-template-columns"]
  > .module-panel:nth-child(2)
  > div[style*="display:grid"][style*="gap:0"] {
    max-height: 290px;
  }

  #dashboard-readiness-panel
  > div[style*="grid-template-columns"]
  > .module-panel:nth-child(2)
  > div[style*="display:grid"][style*="gap:0"]
  > article {
    min-height: 54px !important;
    padding: 8px 9px !important;
  }
}

/* =========================================================
   DASHBOARD MEMBER METRIC STRIP - FINAL AUTHORITATIVE PASS
   Scoped to the member career dashboard. This block lives at
   the end of styles.css so older density/responsive passes can
   no longer resize the strip unpredictably.
   ========================================================= */

#dashboard-readiness-panel .dashboard-hero-card {
  min-height: 0 !important;
  padding: 9px 10px !important;
  gap: 10px !important;
}

#dashboard-readiness-panel .dashboard-hero-identity {
  min-width: 0 !important;
}

#dashboard-readiness-panel .dashboard-hero-metrics {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
  min-width: 0 !important;
}

#dashboard-readiness-panel .dashboard-hero-metric {
  min-width: 0 !important;
  min-height: 54px !important;
  padding: 7px 8px !important;
  gap: 3px !important;
  justify-content: center !important;
}

#dashboard-readiness-panel .dashboard-hero-metric span {
  font-size: 8px !important;
  line-height: 1.05 !important;
  letter-spacing: 0.08em !important;
  white-space: normal !important;
}

#dashboard-readiness-panel .dashboard-hero-metric strong {
  margin-top: 2px !important;
  font-size: 18px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Keep the member overview's two information panels compact. */
#dashboard-readiness-panel > div[style*="grid-template-columns"] {
  gap: 8px !important;
  align-items: start !important;
}

#dashboard-readiness-panel > div[style*="grid-template-columns"] > .module-panel {
  min-width: 0 !important;
  padding: 8px 9px !important;
}

#dashboard-readiness-panel > div[style*="grid-template-columns"] > .module-panel .module-header {
  min-height: 0 !important;
  padding: 6px 7px !important;
  margin-bottom: 5px !important;
}

@media (max-width: 860px) {
  #dashboard-readiness-panel .dashboard-hero-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  #dashboard-readiness-panel .dashboard-hero-metric {
    min-height: 52px !important;
    padding: 6px 7px !important;
  }

  #dashboard-readiness-panel .dashboard-hero-metric strong {
    font-size: 17px !important;
  }
}

@media (max-width: 620px) {
  #dashboard-readiness-panel .dashboard-hero-card {
    padding: 8px !important;
  }

  #dashboard-readiness-panel .dashboard-hero-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  #dashboard-readiness-panel .dashboard-hero-metric {
    min-height: 50px !important;
    padding: 6px 7px !important;
  }

  #dashboard-readiness-panel .dashboard-hero-metric strong {
    font-size: 16px !important;
  }

  #dashboard-readiness-panel > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   MEMBER CAREER PANEL - PARENT HEIGHT / GRID STRETCH FIX
   Prevent the Career Progress / HADES Activity region from
   inheriting a stretched track height from an ancestor layout.
   ========================================================= */

#dashboard-readiness-panel {
  height: auto !important;
  min-height: 0 !important;
  align-self: start !important;
  align-content: start !important;
}

#dashboard-readiness-panel > header,
#dashboard-readiness-panel > section,
#dashboard-readiness-panel > div {
  height: auto !important;
  min-height: 0 !important;
  align-self: start !important;
}

#dashboard-readiness-panel > section .dashboard-hero-card,
#dashboard-readiness-panel > section .dashboard-hero-metrics {
  height: auto !important;
  min-height: 0 !important;
  align-self: start !important;
  align-content: start !important;
}


/* =========================================================
   HADES UNIFIED MODULE VISUAL SYSTEM
   Compact tactical command-center language shared across
   authenticated modules. This layer preserves existing
   layouts while making headers, cards, sections, summaries,
   and dense data areas visually consistent.
   ========================================================= */

:root {
  --hades-accent-default: #56ff91;
  --hades-accent-personnel: #69b7ff;
  --hades-accent-operations: #69b7ff;
  --hades-accent-training: #ffd166;
  --hades-accent-qualifications: #56ff91;
  --hades-accent-awards: #d1ad5c;
  --hades-accent-promotions: #d9a7ff;
  --hades-accent-calendar: #9fd8ff;
  --hades-accent-media: #ff9f7e;
  --hades-accent-admin: #ff8585;
  --hades-accent-vehicles: #a8b68a;
}


/* ---------------------------------------------------------
   MODULE ACCENT ROUTING
   --------------------------------------------------------- */

#personnel-module,
#personnel-jackets-module {
  --module-accent: var(--hades-accent-personnel);
}

#operations-command-center,
.operation-workspace,
#operations-module {
  --module-accent: var(--hades-accent-operations);
}

#training-command-center,
#training-module,
.training-module,
#training-catalog-module {
  --module-accent: var(--hades-accent-training);
}

#qualifications-module,
.qualifications-module {
  --module-accent: var(--hades-accent-qualifications);
}

#awards-module,
.awards-module {
  --module-accent: var(--hades-accent-awards);
}

#promotions-module,
.promotion-module {
  --module-accent: var(--hades-accent-promotions);
}

#calendar-module,
.calendar-module {
  --module-accent: var(--hades-accent-calendar);
}

#media-library-module,
.media-module {
  --module-accent: var(--hades-accent-media);
}

#administration-module,
.administration-module {
  --module-accent: var(--hades-accent-admin);
}

#vehicles-module,
.vehicles-module {
  --module-accent: var(--hades-accent-vehicles);
}


/* ---------------------------------------------------------
   TOP-LEVEL MODULE PANELS
   --------------------------------------------------------- */

#personnel-module .module-panel,
#personnel-jackets-module .module-panel,
#operations-command-center .module-panel,
.operation-workspace .module-panel,
#training-command-center .module-panel,
#training-module .module-panel,
.training-module .module-panel,
#training-catalog-module .module-panel,
#qualifications-module .module-panel,
.qualifications-module .module-panel,
#awards-module .module-panel,
.awards-module .module-panel,
#promotions-module .module-panel,
.promotion-module .module-panel,
#calendar-module .module-panel,
.calendar-module .module-panel,
#media-library-module .module-panel,
.media-module .module-panel,
#administration-module .module-panel,
.administration-module .module-panel,
#vehicles-module .module-panel,
.vehicles-module .module-panel {
  border-left-color:
    color-mix(
      in srgb,
      var(--module-accent, var(--hades-accent-default)) 72%,
      var(--line)
    );

  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.24),
    inset 0 0 26px
      color-mix(
        in srgb,
        var(--module-accent, var(--hades-accent-default)) 2.5%,
        transparent
      );
}


/* ---------------------------------------------------------
   ICON-BACKED PAGE HEADERS
   --------------------------------------------------------- */

#personnel-module .module-header > div:first-child,
#personnel-jackets-module > .module-header > div:first-child,
#operations-command-center .module-header > div:first-child,
.operation-workspace > .module-header > div:first-child,
#training-command-center .module-header > div:first-child,
#training-module .module-header > div:first-child,
#training-catalog-module .module-header > div:first-child,
#qualifications-module .module-header > div:first-child,
#awards-module .module-header > div:first-child,
#promotions-module .module-header > div:first-child,
#calendar-module .module-header > div:first-child,
#media-library-module .module-header > div:first-child,
#administration-module .module-header > div:first-child,
#vehicles-module .module-header > div:first-child {
  position: relative;

  min-height: 42px;

  display: grid;
  grid-template-columns:
    38px minmax(0, 1fr);
  grid-template-rows:
    auto auto auto;

  column-gap: 10px;
  align-items: center;
}

#personnel-module .module-header > div:first-child::before,
#personnel-jackets-module > .module-header > div:first-child::before,
#operations-command-center .module-header > div:first-child::before,
.operation-workspace > .module-header > div:first-child::before,
#training-command-center .module-header > div:first-child::before,
#training-module .module-header > div:first-child::before,
#training-catalog-module .module-header > div:first-child::before,
#qualifications-module .module-header > div:first-child::before,
#awards-module .module-header > div:first-child::before,
#promotions-module .module-header > div:first-child::before,
#calendar-module .module-header > div:first-child::before,
#media-library-module .module-header > div:first-child::before,
#administration-module .module-header > div:first-child::before,
#vehicles-module .module-header > div:first-child::before {
  content: "";

  grid-column: 1;
  grid-row: 1 / 4;

  width: 36px;
  height: 36px;

  display: block;

  background-color:
    var(--module-accent, var(--hades-accent-default));

  border:
    1px solid
    color-mix(
      in srgb,
      var(--module-accent, var(--hades-accent-default)) 58%,
      var(--line)
    );

  border-radius: 8px;

  box-shadow:
    inset 0 0 14px
      color-mix(
        in srgb,
        var(--module-accent, var(--hades-accent-default)) 10%,
        transparent
      ),
    0 0 12px
      color-mix(
        in srgb,
        var(--module-accent, var(--hades-accent-default)) 9%,
        transparent
      );

  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 21px 21px;

  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 21px 21px;
}

#personnel-module .module-header > div:first-child > *,
#personnel-jackets-module > .module-header > div:first-child > *,
#operations-command-center .module-header > div:first-child > *,
.operation-workspace > .module-header > div:first-child > *,
#training-command-center .module-header > div:first-child > *,
#training-module .module-header > div:first-child > *,
#training-catalog-module .module-header > div:first-child > *,
#qualifications-module .module-header > div:first-child > *,
#awards-module .module-header > div:first-child > *,
#promotions-module .module-header > div:first-child > *,
#calendar-module .module-header > div:first-child > *,
#media-library-module .module-header > div:first-child > *,
#administration-module .module-header > div:first-child > *,
#vehicles-module .module-header > div:first-child > * {
  grid-column: 2;
}


/* Personnel */
#personnel-module .module-header > div:first-child::before,
#personnel-jackets-module > .module-header > div:first-child::before {
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='8' r='3' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M3.8 18c.8-3.4 2.7-5.1 5.2-5.1s4.4 1.7 5.2 5.1' fill='none' stroke='black' stroke-width='1.8'/%3E%3Ccircle cx='17' cy='9' r='2.2' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M15.5 14.3c2.8.2 4.4 1.5 4.9 3.7' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E");
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='8' r='3' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M3.8 18c.8-3.4 2.7-5.1 5.2-5.1s4.4 1.7 5.2 5.1' fill='none' stroke='black' stroke-width='1.8'/%3E%3Ccircle cx='17' cy='9' r='2.2' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M15.5 14.3c2.8.2 4.4 1.5 4.9 3.7' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E");
}

/* Operations */
#operations-command-center .module-header > div:first-child::before,
.operation-workspace > .module-header > div:first-child::before {
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='7.5' fill='none' stroke='black' stroke-width='1.8'/%3E%3Ccircle cx='12' cy='12' r='2.2' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M12 2.5v4M12 17.5v4M2.5 12h4M17.5 12h4' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E");
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='7.5' fill='none' stroke='black' stroke-width='1.8'/%3E%3Ccircle cx='12' cy='12' r='2.2' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M12 2.5v4M12 17.5v4M2.5 12h4M17.5 12h4' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E");
}

/* Training */
#training-command-center .module-header > div:first-child::before,
#training-module .module-header > div:first-child::before,
#training-catalog-module .module-header > div:first-child::before {
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 3 7 4-7 4-7-4 7-4Z' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M7 10.5V15l5 3 5-3v-4.5M19 7v6' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E");
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 3 7 4-7 4-7-4 7-4Z' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M7 10.5V15l5 3 5-3v-4.5M19 7v6' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E");
}

/* Qualifications / Awards */
#qualifications-module .module-header > div:first-child::before,
#awards-module .module-header > div:first-child::before {
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='9' r='5' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='m8.5 13-1 8 4.5-2.5L16.5 21l-1-8' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E");
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='9' r='5' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='m8.5 13-1 8 4.5-2.5L16.5 21l-1-8' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E");
}

/* Promotions */
#promotions-module .module-header > div:first-child::before {
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 17 6-5 6 5M6 12l6-5 6 5M8 20h8' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 17 6-5 6 5M6 12l6-5 6 5M8 20h8' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
}

/* Calendar */
#calendar-module .module-header > div:first-child::before {
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='5.5' width='16' height='14' rx='2' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M8 3.5v4M16 3.5v4M4 9h16M9 13h6M9 16h4' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E");
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='5.5' width='16' height='14' rx='2' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M8 3.5v4M16 3.5v4M4 9h16M9 13h6M9 16h4' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E");
}

/* Media */
#media-library-module .module-header > div:first-child::before {
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='14' rx='2' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='m10 9 5 3-5 3V9Z' fill='black'/%3E%3C/svg%3E");
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='14' rx='2' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='m10 9 5 3-5 3V9Z' fill='black'/%3E%3C/svg%3E");
}

/* Administration */
#administration-module .module-header > div:first-child::before {
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='3' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1-2.8 2.8-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.6v.2h-4V21a1.7 1.7 0 0 0-1-1.6 1.7 1.7 0 0 0-1.9.3l-.1.1L4.2 17l.1-.1a1.7 1.7 0 0 0 .3-1.9A1.7 1.7 0 0 0 3 14H2.8v-4H3a1.7 1.7 0 0 0 1.6-1 1.7 1.7 0 0 0-.3-1.9L4.2 7 7 4.2l.1.1A1.7 1.7 0 0 0 9 4.6 1.7 1.7 0 0 0 10 3V2.8h4V3a1.7 1.7 0 0 0 1 1.6 1.7 1.7 0 0 0 1.9-.3l.1-.1L19.8 7l-.1.1a1.7 1.7 0 0 0-.3 1.9 1.7 1.7 0 0 0 1.6 1h.2v4H21a1.7 1.7 0 0 0-1.6 1Z' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E");
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='3' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1-2.8 2.8-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.6v.2h-4V21a1.7 1.7 0 0 0-1-1.6 1.7 1.7 0 0 0-1.9.3l-.1.1L4.2 17l.1-.1a1.7 1.7 0 0 0 .3-1.9A1.7 1.7 0 0 0 3 14H2.8v-4H3a1.7 1.7 0 0 0 1.6-1 1.7 1.7 0 0 0-.3-1.9L4.2 7 7 4.2l.1.1A1.7 1.7 0 0 0 9 4.6 1.7 1.7 0 0 0 10 3V2.8h4V3a1.7 1.7 0 0 0 1 1.6 1.7 1.7 0 0 0 1.9-.3l.1-.1L19.8 7l-.1.1a1.7 1.7 0 0 0-.3 1.9 1.7 1.7 0 0 0 1.6 1h.2v4H21a1.7 1.7 0 0 0-1.6 1Z' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E");
}

/* Vehicles */
#vehicles-module .module-header > div:first-child::before {
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 7h12l2 4v6H4v-6l1-4Z' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M7 7l1-3h7l1 3M6 14h12M7 20a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM16 20a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E");
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 7h12l2 4v6H4v-6l1-4Z' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M7 7l1-3h7l1 3M6 14h12M7 20a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM16 20a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E");
}


/* ---------------------------------------------------------
   SUMMARY / METRIC CARD POLISH
   --------------------------------------------------------- */

.module-summary-card,
.operation-workspace-summary-item,
.card {
  border-top:
    1px solid
    color-mix(
      in srgb,
      var(--module-accent, var(--green-dim)) 52%,
      var(--line)
    );
}

.module-summary-card strong,
.operation-workspace-summary-item strong {
  text-shadow:
    0 0 10px
    color-mix(
      in srgb,
      var(--module-accent, var(--green)) 12%,
      transparent
    );
}


/* ---------------------------------------------------------
   LARGE-DATA COLLAPSIBLE SYSTEM
   Apply this class only to large/dense data areas.
   --------------------------------------------------------- */

.hades-data-collapse {
  border:
    1px solid
    color-mix(
      in srgb,
      var(--module-accent, var(--green-dim)) 24%,
      var(--line)
    );

  border-radius: var(--radius-sm);

  background:
    linear-gradient(
      180deg,
      color-mix(
        in srgb,
        var(--module-accent, var(--green)) 2.5%,
        rgba(6, 11, 8, .92)
      ),
      rgba(4, 8, 5, .94)
    );

  overflow: hidden;
}

.hades-data-collapse + .hades-data-collapse {
  margin-top: 9px;
}

.hades-data-collapse > summary {
  list-style: none;

  min-height: 40px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 8px 10px;

  cursor: pointer;
  user-select: none;

  border-left:
    2px solid
    var(--module-accent, var(--green-dim));
}

.hades-data-collapse > summary::-webkit-details-marker {
  display: none;
}

.hades-data-collapse > summary::after {
  content: "▾";

  color:
    var(--module-accent, var(--green));

  font-size: 12px;

  transition:
    transform .16s ease;
}

.hades-data-collapse:not([open]) > summary::after {
  transform: rotate(-90deg);
}

.hades-data-collapse > summary strong {
  color: var(--text);

  font-size: 13px;
}

.hades-data-collapse > summary span {
  color: var(--text-muted);

  font-size: 10px;
}

.hades-data-collapse-body {
  padding: 9px 10px 10px;

  border-top: 1px solid var(--line);
}


/* ---------------------------------------------------------
   DATA AREA SEPARATION
   --------------------------------------------------------- */

.personnel-table-wrapper,
.operation-workspace-content,
.media-library-grid,
.module-section {
  box-shadow:
    inset 0 0 18px rgba(0, 0, 0, .16);
}

.personnel-table-wrapper {
  border-top:
    1px solid
    color-mix(
      in srgb,
      var(--module-accent, var(--green-dim)) 42%,
      var(--line)
    );
}


/* ---------------------------------------------------------
   MOBILE ADAPTATION
   --------------------------------------------------------- */

@media (max-width: 620px) {
  #personnel-module .module-header > div:first-child,
  #personnel-jackets-module > .module-header > div:first-child,
  #operations-command-center .module-header > div:first-child,
  .operation-workspace > .module-header > div:first-child,
  #training-command-center .module-header > div:first-child,
  #training-module .module-header > div:first-child,
  #training-catalog-module .module-header > div:first-child,
  #qualifications-module .module-header > div:first-child,
  #awards-module .module-header > div:first-child,
  #promotions-module .module-header > div:first-child,
  #calendar-module .module-header > div:first-child,
  #media-library-module .module-header > div:first-child,
  #administration-module .module-header > div:first-child,
  #vehicles-module .module-header > div:first-child {
    grid-template-columns:
      32px minmax(0, 1fr);

    column-gap: 8px;
  }

  #personnel-module .module-header > div:first-child::before,
  #personnel-jackets-module > .module-header > div:first-child::before,
  #operations-command-center .module-header > div:first-child::before,
  .operation-workspace > .module-header > div:first-child::before,
  #training-command-center .module-header > div:first-child::before,
  #training-module .module-header > div:first-child::before,
  #training-catalog-module .module-header > div:first-child::before,
  #qualifications-module .module-header > div:first-child::before,
  #awards-module .module-header > div:first-child::before,
  #promotions-module .module-header > div:first-child::before,
  #calendar-module .module-header > div:first-child::before,
  #media-library-module .module-header > div:first-child::before,
  #administration-module .module-header > div:first-child::before,
  #vehicles-module .module-header > div:first-child::before {
    width: 30px;
    height: 30px;

    -webkit-mask-size: 18px 18px;
    mask-size: 18px 18px;
  }

  .hades-data-collapse > summary {
    min-height: 38px;

    padding: 8px 9px;
  }

  .hades-data-collapse-body {
    padding: 8px;
  }
}

/* =========================================================
   HADES SIDEBAR NAVIGATION — TACTICAL VISUAL UPGRADE
   ========================================================= */

.sidebar nav {
  gap: 3px;
}

.nav-item {
  --nav-accent: #91f2aa;
  --nav-accent-rgb: 145, 242, 170;

  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 8px 10px;
  margin: 2px 0;

  color: #b4c2b8;

  background:
    linear-gradient(
      90deg,
      rgba(var(--nav-accent-rgb), 0.018),
      rgba(5, 10, 7, 0.18) 52%,
      transparent
    );

  border: 1px solid rgba(59, 94, 67, 0.24);
  border-radius: 5px;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.012);

  font-weight: 700;
  letter-spacing: 0.025em;

  overflow: hidden;

  transition:
    color 0.16s ease,
    background 0.16s ease,
    border-color 0.16s ease,
    transform 0.16s ease,
    box-shadow 0.16s ease;
}

.nav-item::before {
  top: 6px;
  bottom: 6px;
  left: -1px;
  width: 3px;

  background: rgba(var(--nav-accent-rgb), 0);

  border-radius: 0 2px 2px 0;

  transition:
    background 0.16s ease,
    box-shadow 0.16s ease;
}

.nav-item::after {
  width: 27px;
  height: 27px;

  flex: 0 0 27px;

  background-color: currentColor;

  opacity: 0.82;

  transition:
    opacity 0.16s ease,
    transform 0.16s ease,
    filter 0.16s ease;
}

#dashboard-nav-button {
  --nav-accent: #91f2aa;
  --nav-accent-rgb: 145, 242, 170;
}

#personnel-nav-button,
#jackets-nav-button {
  --nav-accent: #72d8ff;
  --nav-accent-rgb: 114, 216, 255;
}

#operations-nav-button {
  --nav-accent: #ffb866;
  --nav-accent-rgb: 255, 184, 102;
}

#calendar-nav-button {
  --nav-accent: #c6e77a;
  --nav-accent-rgb: 198, 231, 122;
}

#training-nav-button,
#training-catalog-nav-button,
#qualifications-nav-button {
  --nav-accent: #83aaff;
  --nav-accent-rgb: 131, 170, 255;
}

#media-nav-button {
  --nav-accent: #67d8c2;
  --nav-accent-rgb: 103, 216, 194;
}

#awards-nav-button {
  --nav-accent: #d9a7ff;
  --nav-accent-rgb: 217, 167, 255;
}

#promotions-nav-button {
  --nav-accent: #f0ce73;
  --nav-accent-rgb: 240, 206, 115;
}

#administration-nav-button {
  --nav-accent: #ff8585;
  --nav-accent-rgb: 255, 133, 133;
}

.nav-item:hover {
  color: var(--nav-accent);

  background:
    linear-gradient(
      90deg,
      rgba(var(--nav-accent-rgb), 0.105),
      rgba(var(--nav-accent-rgb), 0.035) 52%,
      rgba(8, 14, 10, 0.46)
    );

  border-color: rgba(var(--nav-accent-rgb), 0.34);

  transform: translateX(2px);

  box-shadow:
    inset 0 0 18px rgba(var(--nav-accent-rgb), 0.025),
    0 4px 12px rgba(0, 0, 0, 0.16);
}

.nav-item:hover::before {
  background: rgba(var(--nav-accent-rgb), 0.56);

  box-shadow:
    0 0 8px rgba(var(--nav-accent-rgb), 0.22);
}

.nav-item:hover::after {
  opacity: 1;
  transform: scale(1.06);

  filter:
    drop-shadow(
      0 0 5px
      rgba(var(--nav-accent-rgb), 0.34)
    );
}

.nav-item.active {
  color: var(--nav-accent);

  background:
    radial-gradient(
      circle at 14% 50%,
      rgba(var(--nav-accent-rgb), 0.13),
      transparent 34%
    ),
    linear-gradient(
      90deg,
      rgba(var(--nav-accent-rgb), 0.12),
      rgba(var(--nav-accent-rgb), 0.045) 58%,
      rgba(8, 14, 10, 0.56)
    );

  border-color: rgba(var(--nav-accent-rgb), 0.46);

  transform: none;

  box-shadow:
    inset 0 0 22px rgba(var(--nav-accent-rgb), 0.045),
    0 0 0 1px rgba(var(--nav-accent-rgb), 0.025),
    0 5px 14px rgba(0, 0, 0, 0.18);
}

.nav-item.active::before {
  background: var(--nav-accent);

  box-shadow:
    0 0 7px rgba(var(--nav-accent-rgb), 0.65),
    0 0 14px rgba(var(--nav-accent-rgb), 0.24);
}

.nav-item.active::after {
  opacity: 1;
  transform: scale(1.04);

  filter:
    drop-shadow(
      0 0 6px
      rgba(var(--nav-accent-rgb), 0.42)
    );
}

.nav-item:focus-visible {
  outline: 2px solid rgba(var(--nav-accent-rgb), 0.7);
  outline-offset: 2px;
}

@media (max-width: 860px) {
  .nav-item {
    min-height: 40px;
    padding: 7px 9px;
    margin: 0;
  }
}

@media (max-width: 620px) {
  .nav-item {
    min-height: 42px;
  }
}