/* Arctic Frost Neomorphism Design System */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Outfit:wght@300;400;500;600;700&display=swap');

/* ─────────────────────────────────────── */
/* PART 1: ROOT COLOR SYSTEM              */
/* ─────────────────────────────────────── */

:root {
  /* Surfaces */
  --bg:         #EEF4FA;
  --bg2:        #E5EDF6;

  /* Shadows */
  --shadow-d:   #BDD0E4;
  --shadow-l:   #FFFFFF;

  /* Blue accent family */
  --blue:       #1B6BAA;
  --blue-mid:   #3A7EC7;
  --blue-light: #5B9DD4;
  --blue-pale:  #A8CCE8;
  --blue-tint:  #DCEEf8;

  /* Text hierarchy */
  --text-1:     #1A3A5C;
  --text-2:     #3D6A8A;
  --text-3:     #7AAABF;

  /* Semantic */
  --red:        #D94F6A;
  --yellow:     #C98A00;

  /* Neomorphic shadows */
  --neo-out:    6px 6px 14px #BDD0E4, -6px -6px 14px #FFFFFF;
  --neo-out-sm: 4px 4px 10px #BDD0E4, -4px -4px 10px #FFFFFF;
  --neo-out-xs: 3px 3px 7px #BDD0E4, -3px -3px 7px #FFFFFF;
  --neo-in:     inset 3px 3px 8px #BDD0E4, inset -3px -3px 8px #FFFFFF;
  --neo-in-sm:  inset 2px 2px 5px #BDD0E4, inset -2px -2px 5px #FFFFFF;
  --neo-in-input: inset 1.5px 1.5px 3px #BDD0E4, inset -1.5px -1.5px 3px #FFFFFF;

  /* Border radius */
  --radius-lg:  22px;
  --radius-md:  14px;
  --radius-sm:  10px;
  --radius-xs:  8px;
}

/* ─────────────────────────────────────── */
/* PART 2: GLOBAL STYLES                  */
/* ─────────────────────────────────────── */

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

html, body {
  height: 100%;
  width: 100%;
}

body {
  background: var(--bg);
  color: var(--text-1);
  font-family: 'Outfit', sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.5;
}

/* ─────────────────────────────────────── */
/* PART 3: LOGIN SCREEN                   */
/* ─────────────────────────────────────── */

#screen-login {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  background: linear-gradient(150deg, #EEF4FA 0%, #E0ECF7 50%, #D8E8F5 100%);
  position: relative;
  overflow: hidden;
}

/* Decorative radial glow */
#screen-login::before {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(27, 107, 170, 0.07) 0%, transparent 65%);
  top: -150px;
  right: -150px;
  pointer-events: none;
  z-index: 2;
}

/* ─────────────────────────────────────── */
/* LOGIN BOX */
/* ─────────────────────────────────────── */

.login-box {
  width: 100%;
  max-width: 380px;
  background: var(--bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--neo-out);
  padding: 2.5rem 2rem;
  position: relative;
  z-index: 3;
  animation: fadeUp 0.6s ease;
  border: 1px solid rgba(255, 255, 255, 0.9);
}

/* Language switcher pinned to the top-right of the login card, so a visitor
   can pick a language before signing in (stored in the session). */
.login-locale {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.login-forgot {
  margin-top: 1.25rem;
  text-align: center;
  font-size: 0.85rem;
}
.login-forgot a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 600;
}
.login-forgot a:hover {
  text-decoration: underline;
}
.login-forgot .resend-form {
  display: inline;
}
.login-forgot .link-button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--blue);
  font-weight: 600;
  cursor: pointer;
}
.login-forgot .link-button:hover {
  text-decoration: underline;
}

/* ─────────────────────────────────────── */
/* LOGO */
/* ─────────────────────────────────────── */

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 2rem;
}

.logo-icon {
  width: 48px;
  height: 48px;
  background: var(--bg);
  border-radius: var(--radius-md);
  box-shadow: var(--neo-out-sm);
  border: 1px solid rgba(255, 255, 255, 0.8);
  object-fit: contain;
  padding: 6px;
  flex-shrink: 0;
}

.logo-text {
  font-family: 'DM Mono', monospace;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text-1);
  letter-spacing: 2px;
}

.logo-sub {
  font-size: 0.62rem;
  color: var(--text-3);
  font-family: 'DM Mono', monospace;
  letter-spacing: 2.5px;
  margin-top: 2px;
}

/* ─────────────────────────────────────── */
/* LOGIN HEADINGS */
/* ─────────────────────────────────────── */

.login-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 0.25rem;
}

.login-sub {
  font-size: 0.85rem;
  color: var(--text-2);
  margin-bottom: 1.8rem;
}

/* ─────────────────────────────────────── */
/* FORM ELEMENTS */
/* ─────────────────────────────────────── */

.input-group {
  margin-bottom: 1rem;
}
.input-group.error .input-label {
  color: var(--red);
}

.input-label {
  font-size: 0.72rem;
  color: var(--text-2);
  margin-bottom: 7px;
  display: block;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.input-field {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg);
  box-shadow: var(--neo-in-input);
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-1);
  font-family: 'Outfit', sans-serif;
  font-size: 0.9rem;
  outline: none;
  transition: box-shadow 0.2s ease;
}

.input-field:focus {
  box-shadow: var(--neo-in-input), 0 0 0 2px rgba(27, 107, 170, 0.2);
}

.input-field::placeholder {
  color: var(--text-3);
}

select.input-field option {
  background: #d6e8f5;
  color: var(--text-1);
}

/* Password visibility toggle */
.pw-field {
  position: relative;
}
.pw-field .input-field {
  padding-right: 44px;
}
.pw-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  border-radius: var(--radius-xs);
}
.pw-toggle:hover {
  color: var(--text-2);
}
.pw-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(27, 107, 170, 0.3);
}

/* ─────────────────────────────────────── */
/* BUTTONS */
/* ─────────────────────────────────────── */

.btn-primary {
  width: 100%;
  padding: 14px;
  background: var(--bg);
  box-shadow: var(--neo-out-sm);
  border: none;
  border-radius: var(--radius-sm);
  color: var(--blue);
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 0.5rem;
}

.btn-primary:hover {
  box-shadow: var(--neo-out);
  color: var(--blue-mid);
}

.btn-primary:active {
  box-shadow: var(--neo-in-sm);
}

/* ─────────────────────────────────────── */
/* ALERTS & FEEDBACK */
/* ─────────────────────────────────────── */

.alert {
  padding: 12px 16px;
  margin-bottom: 1.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  line-height: 1.4;
  border: 1px solid rgba(217, 79, 106, 0.3);
}

.alert-danger {
  background: rgba(217, 79, 106, 0.08);
  color: var(--red);
}

.alert-success {
  background: rgba(27, 107, 170, 0.08);
  color: var(--blue);
  border-color: rgba(27, 107, 170, 0.3);
}

/* ─────────────────────────────────────── */
/* RESPONSIVE */
/* ─────────────────────────────────────── */

@media (max-width: 600px) {
  .login-box {
    padding: 2rem 1.5rem;
  }

  .login-title {
    font-size: 1.4rem;
  }

  .logo {
    margin-bottom: 1.5rem;
  }
}

/* ─────────────────────────────────────── */
/* PART 4: TOP NAVIGATION                 */
/* ─────────────────────────────────────── */

.topnav {
  background: var(--bg);
  box-shadow: 0 3px 10px var(--shadow-d);
  padding: 1rem 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(255, 255, 255, 0.8);
}

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

.nav-logo {
  height: 28px;
  width: auto;
}

.nav-page {
  font-size: 0.8rem;
  color: var(--text-3);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Mobile nav: keep it compact so nothing gets cut off. The page title and
   the username text drop out (avatar + profile menu still identify the user),
   and the language toggle collapses to just its 🌐 icon. ── */
@media (max-width: 600px) {
  .topnav {
    padding: 0.7rem 0.9rem;
    gap: 8px;
  }

  .nav-logo {
    height: 26px;
  }

  .nav-page {
    display: none;
  }

  .nav-right {
    gap: 6px;
  }

  .nav-username {
    display: none;
  }

  .locale-toggle {
    padding: 8px 10px;
  }

  /* Only the full language name drops out on mobile — the 🌐 icon AND the
     ▾ caret stay so the toggle still reads as a clickable dropdown. */
  .locale-toggle-label {
    display: none;
  }

  .profile-toggle {
    padding: 2px 4px;
  }

  .locale-menu,
  .profile-menu {
    top: calc(100% + 4px);
  }
}

.avatar {
  width: 34px;
  height: 34px;
  background: var(--bg);
  box-shadow: var(--neo-out-xs);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--blue);
}

.avatar--lg {
  width: 42px;
  height: 42px;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.nav-username {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-1);
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Nav language toggle (left of the profile) ── */
.nav-locale {
  position: relative;
}

.locale-toggle {
  background: var(--bg);
  box-shadow: var(--neo-out-xs);
  border: none;
  color: var(--text-1);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  font-weight: 700;
  font-family: 'Outfit', sans-serif;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.locale-toggle:hover {
  box-shadow: var(--neo-out-sm);
  color: var(--blue);
}

.locale-toggle-icon {
  font-size: 0.9rem;
}

.locale-toggle-caret {
  font-size: 0.7rem;
  color: var(--text-3);
}

.locale-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: var(--bg);
  box-shadow: var(--neo-out);
  border-radius: var(--radius-sm);
  padding: 4px;
  z-index: 110;
  display: none;
  flex-direction: column;
  gap: 2px;
  min-width: 160px;
}

.locale-menu.is-open {
  display: flex;
}

.locale-option {
  background: none;
  border: none;
  color: var(--text-2);
  padding: 8px 14px;
  border-radius: var(--radius-xs);
  font-size: 0.8rem;
  font-weight: 600;
  font-family: 'Outfit', sans-serif;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.locale-option:hover {
  background: rgba(27, 107, 170, 0.08);
  color: var(--blue);
}

.locale-active {
  color: var(--blue);
  font-weight: 700;
}

/* ── Nav profile (avatar + name → logout) ── */
.nav-profile {
  position: relative;
}

.profile-toggle {
  background: none;
  border: none;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s;
  font-family: 'Outfit', sans-serif;
}

.profile-toggle:hover {
  background: rgba(27, 107, 170, 0.06);
}

.profile-toggle-caret {
  font-size: 0.7rem;
  color: var(--text-3);
}

.profile-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: var(--bg);
  box-shadow: var(--neo-out);
  border-radius: var(--radius-sm);
  z-index: 110;
  display: none;
  flex-direction: column;
  min-width: 220px;
  overflow: hidden;
}

.profile-menu.is-open {
  display: flex;
}

.profile-menu-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
}

.profile-menu-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

.profile-menu-role {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-3);
  text-transform: capitalize;
}

.profile-menu-divider {
  border-top: 1px solid rgba(27, 107, 170, 0.12);
}

.profile-menu form {
  display: flex;
  width: 100%;
}

.profile-logout {
  background: none;
  border: none;
  color: var(--red);
  padding: 12px 16px;
  font-size: 0.8rem;
  font-weight: 700;
  font-family: 'Outfit', sans-serif;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s;
  width: 100%;
}

.profile-logout:hover {
  background: rgba(217, 79, 106, 0.08);
}

/* ─────────────────────────────────────── */
/* PART 5: FLASH MESSAGES                 */
/* ─────────────────────────────────────── */

.flash-message {
  margin: 0.75rem 0;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  line-height: 1.4;
}

.flash-notice {
  background: rgba(27, 107, 170, 0.08);
  color: var(--blue);
  border: 1px solid rgba(27, 107, 170, 0.3);
}

.flash-alert {
  background: rgba(217, 79, 106, 0.08);
  color: var(--red);
  border: 1px solid rgba(217, 79, 106, 0.3);
}

/* ─────────────────────────────────────── */
/* PART 6: APP BODY                       */
/* ─────────────────────────────────────── */

.app-body {
  padding: 1.25rem 1.2rem;
  max-width: 560px;
  margin: 0 auto;
}

/* ─────────────────────────────────────── */
/* PART 7: FIELD CHECK-IN                 */
/* ─────────────────────────────────────── */

.field-body {
  padding: 1.2rem;
  flex: 1;
}

/* Status card */
.status-card {
  background: var(--bg);
  box-shadow: var(--neo-out-sm);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.2rem;
  margin-bottom: 1.4rem;
  border: 1px solid rgba(255, 255, 255, 0.9);
}

.status-card--in {
  border-left: 4px solid var(--blue);
}

.status-label {
  font-size: 0.7rem;
  color: var(--text-3);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 4px;
}

.status-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 0.6rem;
}

.status-value--in {
  color: var(--blue);
}

.status-time {
  font-family: 'DM Mono', monospace;
  font-size: 0.82rem;
  color: var(--text-3);
  margin-top: 4px;
}

.status-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0.4rem;
  flex-wrap: wrap;
}

.status-task-badge {
  background: var(--blue-tint);
  color: var(--blue);
  border-radius: var(--radius-xs);
  padding: 3px 10px;
  font-size: 0.75rem;
  font-weight: 600;
}

.status-site-text {
  font-family: 'DM Mono', monospace;
  font-size: 0.78rem;
  color: var(--text-2);
}

.status-since {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  color: var(--text-3);
}

.status-gps-warn {
  margin-top: 6px;
  font-size: 0.72rem;
  color: var(--yellow);
}

/* Locked notice */
.locked-notice {
  font-size: 0.82rem;
  color: var(--text-3);
  text-align: center;
  margin-bottom: 1.2rem;
}

/* Section title */
.section-title {
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
  margin-bottom: 0.7rem;
}

/* Task grid */
.task-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 1.2rem;
}

.task-card {
  background: var(--bg);
  box-shadow: var(--neo-out-xs);
  border-radius: var(--radius-md);
  padding: 1rem;
  text-align: center;
  cursor: pointer;
  transition: box-shadow 0.2s, color 0.2s;
  border: 2px solid transparent;
  user-select: none;
}

.task-card:active {
  box-shadow: var(--neo-in-sm);
}

.task-card.selected {
  box-shadow: var(--neo-in-sm);
  border-color: var(--blue-pale);
  background: var(--blue-tint);
}

.task-icon {
  font-size: 1.6rem;
  margin-bottom: 6px;
  line-height: 1;
}

.task-name {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-1);
  line-height: 1.25;
  /* Labels are now translated strings (no <br>), so the browser wraps them —
     balance keeps a two-word/two-line label from breaking into an orphaned
     trailing word (e.g. "Kerja di Kantor /" / "Rumah") at narrow widths. */
  text-wrap: balance;
}

.task-card.selected .task-name {
  color: var(--blue);
}

/* Camera grid */
.camera-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 1.2rem;
}

.camera-box {
  background: var(--bg);
  box-shadow: var(--neo-in-sm);
  border-radius: var(--radius-md);
  padding: 1rem;
  text-align: center;
  cursor: pointer;
  transition: box-shadow 0.2s;
  position: relative;
  overflow: hidden;
  min-height: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--blue-pale);
}

.camera-box:active {
  box-shadow: var(--neo-in);
}

.camera-box.captured {
  border-style: solid;
  border-color: var(--blue);
  background-size: cover;
  background-position: center;
}

.camera-box.captured .camera-icon {
  display: none;
}

.camera-box img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  z-index: 0;
}

.camera-icon {
  font-size: 1.6rem;
  margin-bottom: 6px;
  position: relative;
  z-index: 1;
}

.camera-label {
  font-size: 0.74rem;
  color: var(--text-3);
  font-weight: 500;
  position: relative;
  z-index: 1;
}

.camera-box.captured .camera-label {
  background: rgba(255, 255, 255, 0.75);
  border-radius: var(--radius-xs);
  padding: 2px 8px;
  color: var(--text-2);
}

/* GPS bar */
.gps-bar {
  background: var(--bg);
  box-shadow: var(--neo-in-sm);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1.2rem;
}

.gps-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-3);
  flex-shrink: 0;
}

@keyframes gps-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(1.4); }
}

.gps-dot.active {
  background: var(--blue);
  animation: gps-pulse 1.5s ease-in-out infinite;
}

.gps-dot.acquiring {
  background: var(--text-3);
  animation: gps-pulse 1.5s ease-in-out infinite;
}

.gps-dot.error {
  background: var(--red);
}

.gps-text {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  color: var(--text-3);
  flex: 1;
}

.gps-retry {
  flex-shrink: 0;
  font-family: 'Outfit', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--blue);
  background: var(--bg);
  box-shadow: var(--neo-out-xs);
  border: none;
  border-radius: var(--radius-xs);
  padding: 4px 12px;
  cursor: pointer;
}

.gps-retry:active {
  box-shadow: var(--neo-in-sm);
}

/* Cancel confirmation card (inline) */
.cancel-confirm-card {
  display: none;
  background: var(--bg);
  box-shadow: var(--neo-out);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.85);
  padding: 1.4rem;
  margin-bottom: 1rem;
  animation: fadeUp 0.25s ease;
}

.cancel-confirm-card.active { display: block; }

.cancel-confirm-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 6px;
}

.cancel-confirm-sub {
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  color: var(--text-2);
  line-height: 1.45;
  margin-bottom: 1rem;
}

.cancel-confirm-row {
  display: flex;
  gap: 10px;
}

.cancel-btn-yes {
  flex: 1;
  padding: 12px;
  background: var(--bg);
  box-shadow: var(--neo-out-sm);
  border: none;
  border-radius: var(--radius-sm);
  font-family: 'Outfit', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--blue);
  cursor: pointer;
  transition: all 0.2s;
}

.cancel-btn-yes:hover { box-shadow: var(--neo-out); }
.cancel-btn-yes:active { box-shadow: var(--neo-in-sm); }

.cancel-btn-no {
  flex: 1;
  padding: 12px;
  background: var(--bg);
  box-shadow: var(--neo-in-sm);
  border: none;
  border-radius: var(--radius-sm);
  font-family: 'Outfit', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-3);
  cursor: pointer;
  transition: all 0.2s;
}

.cancel-btn-no:hover { color: var(--red); }

/* Action row */
.action-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.btn-cancel {
  background: var(--bg);
  box-shadow: var(--neo-out-xs);
  border: none;
  border-radius: var(--radius-md);
  color: var(--text-3);
  font-family: 'Outfit', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 16px 18px;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.btn-cancel:active {
  box-shadow: var(--neo-in-sm);
}

/* Check-in / Check-out button */
.checkin-btn {
  flex: 1;
  width: 100%;
  padding: 18px;
  border: none;
  border-radius: var(--radius-md);
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s;
  letter-spacing: 0.3px;
}

.checkin-btn--in {
  background: var(--blue);
  color: #fff;
  box-shadow: 4px 4px 12px rgba(27, 107, 170, 0.35), -2px -2px 8px rgba(255, 255, 255, 0.6);
}

.checkin-btn--in:hover:not(:disabled) {
  background: var(--blue-mid);
}

.checkin-btn--in:active:not(:disabled) {
  box-shadow: var(--neo-in-sm);
}

.checkin-btn--in:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.checkin-btn--out {
  background: var(--bg);
  box-shadow: var(--neo-out-sm);
  color: var(--red);
  border: 2px solid rgba(217, 79, 106, 0.4);
}

.checkin-btn--out:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── CM Job Sheet Bottom Sheet ── */
.checkout-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(26, 58, 92, 0.45);
  z-index: 200;
  align-items: flex-end;
  justify-content: center;
}

.checkout-overlay.open {
  display: flex;
}

.checkout-sheet {
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--bg);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: 0 -6px 24px rgba(26, 58, 92, 0.2);
  padding: 1.25rem 1.25rem 2rem;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.checkout-overlay.open .checkout-sheet {
  transform: translateY(0);
}

.sheet-handle {
  width: 40px;
  height: 4px;
  background: var(--blue-pale);
  border-radius: 2px;
  margin: 0 auto 1rem;
}

.sheet-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 0.25rem;
  text-align: center;
}
.sheet-sub {
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  color: var(--text-3);
  text-align: center;
  margin-bottom: 1.25rem;
}

.sheet-section-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin: 1.25rem 0 0.6rem;
}

.required-star {
  color: var(--red);
}

/* Resolution & Station Status cards */
.resolution-cards,
.station-cards {
  display: grid;
  gap: 8px;
}

.resolution-cards {
  grid-template-columns: repeat(2, 1fr);
}

.station-cards {
  grid-template-columns: repeat(2, 1fr);
}

.resolution-card,
.station-card {
  background: var(--bg);
  box-shadow: var(--neo-out-xs);
  border-radius: var(--radius-sm);
  padding: 10px 6px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  border: 2px solid transparent;
}

.resolution-card:active,
.station-card:active {
  box-shadow: var(--neo-in-sm);
}

.resolution-card.selected,
.station-card.selected {
  box-shadow: inset 1px 1px 3px var(--shadow-d), 0 0 0 1.5px var(--blue);
  background: var(--bg);
}

.res-icon {
  font-size: 1.3rem;
  margin-bottom: 4px;
}

.res-label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-2);
}

/* Select dropdown */
.input-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237AAABF' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

/* TomSelect — match Arctic Frost input sizing */
.ts-wrapper {
  min-height: auto !important;
  padding: 0 !important;
}
.ts-wrapper .ts-control {
  padding: 12px 16px !important;
  background: var(--bg) !important;
  box-shadow: var(--neo-in-input) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-1) !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.9rem !important;
  line-height: 1.4 !important;
}
.ts-wrapper.focus .ts-control {
  box-shadow: var(--neo-in-input), 0 0 0 2px rgba(27, 107, 170, 0.2) !important;
}
.ts-wrapper .ts-control > input {
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.9rem !important;
  color: var(--text-1) !important;
}
.ts-wrapper.single .ts-control {
  background-image: none !important;
}
.ts-wrapper.single .ts-control:after {
  border-color: var(--text-3) transparent transparent !important;
  right: 14px !important;
}
.ts-wrapper.single.dropdown-active .ts-control:after {
  border-color: transparent transparent var(--text-3) !important;
}
.ts-dropdown {
  border-radius: var(--radius-sm) !important;
  border: 1px solid rgba(27, 107, 170, 0.15) !important;
  box-shadow: var(--neo-out-sm) !important;
  background: var(--bg) !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.85rem !important;
}
.ts-dropdown .option {
  padding: 8px 12px !important;
  color: var(--text-1) !important;
}
.ts-dropdown .active {
  background: var(--blue-tint) !important;
  color: var(--blue) !important;
}
.ts-wrapper.disabled .ts-control {
  opacity: 0.5 !important;
  background: var(--bg2) !important;
}

/* Textarea */
.input-textarea {
  resize: vertical;
  min-height: 70px;
}

/* Parts toggle */
.parts-toggle-row {
  display: flex;
  gap: 8px;
  margin-bottom: 0.5rem;
}

.parts-toggle-btn {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: var(--radius-sm);
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--bg);
  box-shadow: var(--neo-out-xs);
  color: var(--text-3);
  transition: all 0.2s;
}

.parts-toggle-btn--active {
  background: var(--blue-tint);
  color: var(--blue);
  box-shadow: var(--neo-in-sm);
}

/* Part rows */
.parts-container {
  background: var(--bg2);
  border-radius: var(--radius-sm);
  padding: 10px;
  margin-top: 6px;
}

.part-row {
  display: grid;
  grid-template-columns: 1fr 1fr 56px auto;
  gap: 6px;
  align-items: center;
  margin-bottom: 8px;
}

/* One serial per unit, stacked on their own lines under the row: a phone has no
   room for a fifth column, and a qty of 3 needs three inputs. */
.part-serials {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
}
.part-serials:empty { display: none; }

/* tom-select replaces the part <select> — keep it inside its 1fr grid track */
.part-row .ts-wrapper { min-width: 0; }
.part-row .ts-wrapper.single .ts-control .item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.part-remove-btn {
  background: none;
  border: none;
  color: var(--red);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius-xs);
  line-height: 1;
}

.add-part-btn {
  width: 100%;
  margin-top: 4px;
  padding: 9px;
  border: 2px dashed var(--blue-pale);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--blue-mid);
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.add-part-btn:hover {
  background: var(--blue-tint);
  border-color: var(--blue);
}

/* ── KPI BAR ── */
.manager-body { padding: 1.2rem; }
.hr-body { padding: 1.2rem; }
.kpi-bar { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 1.2rem; }
.kpi-card { display: block; text-decoration: none; color: inherit; background: var(--bg); box-shadow: var(--neo-out-sm); border-radius: var(--radius-md); padding: 0.875rem 0.5rem; text-align: center; cursor: pointer; transition: box-shadow 0.15s; }
.kpi-card:hover { box-shadow: var(--neo-out); }
.kpi-card--active { box-shadow: var(--neo-out-sm), 0 0 0 2px var(--blue); }
.kpi-card--warn { box-shadow: var(--neo-out-sm), 0 0 0 2px var(--red); }
.kpi-big { font-size: 1.5rem; font-weight: 700; font-family: 'DM Mono', monospace; line-height: 1; color: var(--blue); }
.kpi-big--warn { color: var(--red); }
.kpi-sub { font-size: 0.6rem; color: var(--text-3); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.8px; }
.kpi-meta { font-size: 0.6rem; color: var(--text-3); margin-top: 2px; }

/* ── FIELD SECTION (Live Worker List) ── */
.field-section { margin-top: 0.5rem; }
.field-summary { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 1.2rem; }

.field-group-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin: 1rem 0 0.5rem;
}

.worker-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 0.5rem; }

.worker-row {
  background: var(--bg);
  box-shadow: var(--neo-out-sm);
  border-radius: var(--radius-md);
  padding: 0.75rem 0.9rem;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: box-shadow 0.15s ease;
}
.worker-row:active { box-shadow: var(--neo-in-sm); }

.worker-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: var(--neo-in-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.worker-avatar img { width: 100%; height: 100%; object-fit: cover; }
.worker-avatar-initials {
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--blue);
}

.worker-info { flex: 1; min-width: 0; }
.worker-name {
  font-family: 'Outfit', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-1);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.worker-flag { font-size: 0.8rem; }
.worker-ot {
  background: var(--red);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  letter-spacing: 0.5px;
}
.worker-task {
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  color: var(--text-2);
  margin-top: 2px;
}

.worker-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.worker-elapsed { font-family: 'DM Mono', monospace; font-size: 0.7rem; color: var(--text-2); }
.worker-status {
  font-family: 'Outfit', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-xs);
  letter-spacing: 0.5px;
}
.worker-status--in { background: var(--blue-tint); color: var(--blue); }
.worker-status--out { background: var(--bg2); color: var(--text-3); }

.worker-empty {
  text-align: center;
  color: var(--text-3);
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  padding: 2rem 1rem;
  background: var(--bg);
  box-shadow: var(--neo-in-sm);
  border-radius: var(--radius-md);
}

/* ── Worker Detail Modal ── */
.worker-modal-sub {
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  color: var(--text-2);
  text-align: center;
  margin-top: -0.75rem;
  margin-bottom: 1rem;
}

.worker-modal-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 1rem;
}
.worker-modal-photo {
  background: var(--bg);
  box-shadow: var(--neo-in-sm);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.worker-modal-photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.worker-modal-photo-caption {
  padding: 4px 6px; width: 100%; text-align: center;
  font-family: 'Outfit', sans-serif; font-size: 0.62rem; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.worker-modal-photo-placeholder { font-size: 1.75rem; color: var(--text-3); }
.worker-modal-photos-label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 0.3rem;
}

.worker-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--bg2);
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
}
.worker-detail-row:last-child { border-bottom: none; }
.worker-detail-key { color: var(--text-3); flex-shrink: 0; }
.worker-detail-val { color: var(--text-1); text-align: right; max-width: 60%; word-break: break-word; }
.worker-detail-val.mono { font-family: 'DM Mono', monospace; font-size: 0.75rem; }
/* One entry per line for the multi-select taxonomy values (#308). Two or more
   entries switch to a bulleted, left-aligned list: these labels are long enough
   to wrap inside this column, and the bullet plus hanging indent is what tells a
   wrapped continuation apart from the next entry. */
.worker-detail-line { display: block; }
.worker-detail-line + .worker-detail-line { margin-top: 3px; }
/* Serial numbers stack under the quantity, one physical unit per line. Mono
   because they are IDs, and dimmer so the quantity stays the row's headline. */
.worker-detail-sn {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  color: var(--text-2);
}
.worker-detail-val--list { text-align: left; }
.worker-detail-val--list .worker-detail-line {
  padding-left: 11px;
  text-indent: -11px;
}
.worker-detail-val--list .worker-detail-line::before {
  content: "•";
  color: var(--text-3);
  margin-right: 5px;
}
a.worker-gps-link, a.site-gps-link { color: var(--blue); text-decoration: none; }
a.worker-gps-link:hover, a.site-gps-link:hover { text-decoration: underline; }

.worker-jobsheet-block {
  margin-top: 1rem;
  padding: 0.9rem;
  background: var(--bg);
  box-shadow: var(--neo-in-sm);
  border-radius: var(--radius-md);
}
.worker-jobsheet-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 0.5rem;
}
.worker-jobsheet-subtitle {
  font-family: 'Outfit', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin: 0.6rem 0 0.3rem;
}
.bss-badge {
  display: inline-block; font-size: 0.55rem; padding: 1px 6px; border-radius: 6px;
  background: rgba(201, 138, 0, 0.12); color: var(--yellow);
  font-family: 'DM Mono', monospace; font-weight: 700; letter-spacing: 0.5px;
  margin-left: 6px; vertical-align: middle;
}
.worker-modal-after-photo { margin-top: 0.6rem; }
.worker-modal-after-photo img {
  width: 100%;
  border-radius: var(--radius-sm);
  box-shadow: var(--neo-in-sm);
}

.worker-modal-photo-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.worker-modal-photo-cap {
  font-family: 'Outfit', sans-serif;
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  margin-bottom: 3px;
}

.worker-modal-photo-blank {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  border-radius: var(--radius-sm);
  box-shadow: var(--neo-in-sm);
  color: var(--text-3);
}

.worker-jobsheet-pending {
  margin-top: 1rem;
  padding: 0.75rem;
  background: var(--bg);
  box-shadow: var(--neo-in-sm);
  border-radius: var(--radius-sm);
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  color: var(--yellow);
  text-align: center;
}

/* Placeholder inside the modal's lazy job-sheet frame, shown while the sheet
   is on its way (#402). Same recessed slot, quieter voice. */
.worker-jobsheet-loading {
  margin-top: 1rem;
  padding: 0.75rem;
  background: var(--bg);
  box-shadow: var(--neo-in-sm);
  border-radius: var(--radius-sm);
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  color: var(--text-3);
  text-align: center;
}

.worker-modal-close {
  width: 100%;
  margin-top: 1.25rem;
  padding: 0.85rem;
  background: var(--bg);
  box-shadow: var(--neo-out-sm);
  border: none;
  border-radius: var(--radius-md);
  font-family: 'Outfit', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
}
.worker-modal-close:active { box-shadow: var(--neo-in-sm); }

/* Cancel / Complete pair on a still-checked-in record */
.worker-modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 1.25rem;
}

/* Manager's reason inside the job sheet block — above a sheet, or in place of one */
.worker-jobsheet-note { margin-bottom: 0.75rem; }
.worker-modal-note-label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-3);
  margin-bottom: 3px;
}
.worker-modal-note-text {
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  color: var(--text-1);
  line-height: 1.45;
}

/* ─────────────────────────────────────── */
/* PM JOB SHEET                           */
/* ─────────────────────────────────────── */

.evcs-capsule-row { display: flex; justify-content: flex-end; margin-bottom: 0.6rem; }
.evcs-capsule {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px;
  background: var(--bg); box-shadow: var(--neo-out-xs);
  border-radius: 999px;
  color: var(--blue-mid); font-family: 'DM Mono', monospace;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 1.5px;
  border: 1px solid rgba(255,255,255,0.8);
  text-transform: uppercase;
}
.evcs-capsule::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue-mid); animation: pulse 1.5s infinite;
}
.bss-capsule {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px;
  background: var(--bg); box-shadow: var(--neo-out-xs);
  border-radius: 999px;
  color: #00BFFF; font-family: 'DM Mono', monospace;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 1.5px;
  border: 1px solid rgba(255,255,255,0.8);
  text-transform: uppercase;
}
.bss-capsule::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #00BFFF; animation: pulse 1.5s infinite;
}

/* BSS Slot Function Test */
.bss-slot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.bss-slot-card { background: var(--bg); box-shadow: var(--neo-in-sm); border-radius: var(--radius-sm); overflow: hidden; }
.bss-slot-head {
  padding: 10px 12px; display: flex; align-items: center; gap: 8px;
  cursor: pointer; user-select: none; transition: background 0.2s;
}
.bss-slot-head:hover { background: rgba(27,107,170,0.04); }
.bss-slot-num {
  width: 28px; height: 28px; border-radius: 8px;
  background: rgba(27,107,170,0.1); border: 1px solid rgba(27,107,170,0.25);
  display: flex; align-items: center; justify-content: center;
  font-family: 'DM Mono', monospace; font-size: 0.68rem; font-weight: 700;
  color: var(--blue-mid); flex-shrink: 0; transition: all 0.2s;
}
.bss-slot-num.tested-ok {
  background: rgba(0,196,140,0.12); border-color: rgba(0,196,140,0.3); color: #00C48C;
}
.bss-slot-num.tested-fail {
  background: rgba(217,79,106,0.12); border-color: rgba(217,79,106,0.3); color: var(--red);
}
.bss-slot-label { font-size: 0.78rem; font-weight: 600; flex: 1; color: var(--text-1); }
.bss-slot-status { font-size: 0.63rem; color: var(--text-3); font-family: 'DM Mono', monospace; }
.bss-slot-body { display: none; padding: 0 10px 10px; border-top: 1px solid rgba(0,0,0,0.04); }
.bss-slot-body.open { display: block; }
.bss-slot-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 8px 0; }
.bss-slot-field { display: flex; flex-direction: column; gap: 3px; }
.bss-slot-field-label { font-size: 0.6rem; color: var(--text-3); letter-spacing: 0.8px; text-transform: uppercase; font-weight: 600; }
.bss-slot-field-input {
  padding: 7px 8px; background: var(--bg); box-shadow: var(--neo-in-sm);
  border: none; border-radius: var(--radius-xs);
  color: var(--text-1); font-family: 'DM Mono', monospace; font-size: 0.78rem;
  text-align: center; outline: none; width: 100%;
}
.bss-slot-field-input:focus { box-shadow: var(--neo-in-sm), 0 0 0 2px #00BFFF; }
.bss-ejection-label { font-size: 0.64rem; color: var(--text-3); letter-spacing: 0.8px; text-transform: uppercase; font-weight: 600; margin-bottom: 5px; }
.bss-ejection-row { display: flex; gap: 6px; }
.bss-eject-btn {
  flex: 1; padding: 6px 4px; background: var(--bg); box-shadow: var(--neo-out-xs);
  border: none; border-radius: var(--radius-xs);
  color: var(--text-3); font-family: 'Outfit', sans-serif; font-size: 0.72rem;
  font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.bss-eject-btn.sel-ok { box-shadow: var(--neo-in-sm); color: #00C48C; }
.bss-eject-btn.sel-fail { box-shadow: var(--neo-in-sm); color: var(--red); }
.pm-header-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 1rem; gap: 12px;
}
.pm-header-row .sheet-title { text-align: left; margin-bottom: 0.2rem; }
.pm-header-row .sheet-sub { text-align: left; margin-bottom: 0; }

.pm-record-header {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-bottom: 4px;
}
.pm-doc-id-label { font-size: 0.6rem; color: var(--text-3); letter-spacing: 0.8px; text-transform: uppercase; font-weight: 600; }
.pm-doc-id-pill-wrap { display: flex; justify-content: flex-end; margin-bottom: 0.8rem; }

.pm-charger-group, .pm-charger-panel {
  padding: 10px 12px; margin-bottom: 8px;
  background: var(--bg); box-shadow: var(--neo-out-xs);
  border-radius: var(--radius-sm);
}
.pm-charger-title {
  font-family: 'Outfit', sans-serif; font-size: 0.72rem; font-weight: 600;
  color: var(--text-2); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.8px;
}

.connectivity-toggle { display: flex; gap: 6px; }
.connectivity-pill {
  flex: 1; padding: 8px 12px; border: none; cursor: pointer;
  background: var(--bg); box-shadow: var(--neo-out-xs);
  border-radius: var(--radius-xs);
  font-family: 'DM Mono', monospace; font-size: 0.72rem; font-weight: 600;
  color: var(--text-3); letter-spacing: 1px; text-transform: uppercase;
  transition: all 0.2s;
}
.connectivity-pill.active {
  box-shadow: var(--neo-in-sm);
  color: var(--blue); background: var(--blue-tint);
}

.pm-impl-auto {
  display: flex; align-items: center; gap: 8px; padding: 9px 14px;
  background: var(--bg); box-shadow: var(--neo-in-sm);
  border-radius: var(--radius-xs);
  color: var(--text-1); font-family: 'Outfit', sans-serif; font-size: 0.85rem; font-weight: 600;
  margin-bottom: 1rem;
}
.impl-icon { font-size: 1rem; }
.impl-name { flex: 1; }
.impl-tag { font-size: 0.6rem; color: var(--blue-mid); background: var(--blue-tint); padding: 2px 6px; border-radius: 10px; letter-spacing: 0.5px; font-family: 'DM Mono', monospace; }

.pm-doc-id-pill {
  padding: 4px 10px;
  background: var(--bg); box-shadow: var(--neo-in-sm);
  border-radius: var(--radius-xs);
  color: var(--blue); font-family: 'DM Mono', monospace; font-size: 0.68rem; font-weight: 700;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: flex; align-items: center; gap: 5px;
}

.pm-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 1rem; }
.pm-meta-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.pm-meta-label { font-size: 0.64rem; color: var(--text-3); letter-spacing: 0.8px; text-transform: uppercase; font-weight: 600; }
.pm-meta-readonly {
  padding: 9px 12px;
  background: var(--bg); box-shadow: var(--neo-in-sm);
  border-radius: var(--radius-xs);
  color: var(--text-1); font-family: 'Outfit', sans-serif; font-size: 0.82rem;
  display: flex; align-items: center; gap: 6px;
}
.pm-meta-readonly .auto-tag { margin-left: auto; }
.pm-meta-input {
  padding: 9px 12px;
  background: var(--bg); box-shadow: var(--neo-in-sm);
  border: none; border-radius: var(--radius-xs);
  color: var(--text-1); font-family: 'DM Mono', monospace; font-size: 0.76rem;
  outline: none; width: 100%;
}
.pm-meta-input:focus { box-shadow: var(--neo-in-sm), 0 0 0 2px rgba(27,107,170,0.2); }
.pm-meta-input::placeholder { color: var(--text-3); }
.pm-meta-input option { background: #d6e8f5; color: var(--text-1); }

.auto-tag {
  font-size: 0.6rem; color: var(--blue-mid);
  background: var(--blue-tint); padding: 2px 6px; border-radius: 8px;
  letter-spacing: 0.5px; font-family: 'DM Mono', monospace;
}

.pm-progress-wrap { margin-bottom: 1.2rem; }
.pm-progress-label { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--text-2); margin-bottom: 7px; }
.pm-prog-pct { color: var(--blue); font-weight: 700; font-family: 'DM Mono', monospace; }
.pm-progress-bar { height: 8px; background: var(--bg); box-shadow: var(--neo-in-sm); border-radius: 6px; overflow: hidden; }
.pm-progress-fill { height: 100%; background: linear-gradient(90deg, var(--blue), var(--blue-pale)); border-radius: 6px; transition: width 0.35s; }

.pm-findings-summary {
  background: var(--bg); box-shadow: var(--neo-in-sm);
  border-radius: var(--radius-sm);
  padding: 10px 14px; margin-bottom: 1rem;
  display: none;
  border-left: 3px solid var(--yellow);
}
.pm-findings-summary.show { display: block; }
.pm-findings-title { font-size: 0.74rem; font-weight: 700; color: var(--yellow); margin-bottom: 4px; }
.pm-findings-list { font-size: 0.74rem; color: var(--text-1); line-height: 1.55; }

.pm-section-group { background: var(--bg); box-shadow: var(--neo-out-sm); border-radius: var(--radius-md); margin-bottom: 10px; overflow: hidden; border: 1px solid rgba(255,255,255,0.7); }
.pm-section-head { padding: 0.9rem 1.1rem; display: flex; align-items: center; gap: 10px; cursor: pointer; transition: background 0.2s; user-select: none; }
.pm-section-head:hover { background: rgba(27,107,170,0.04); }
.pm-section-icon { width: 32px; height: 32px; border-radius: var(--radius-xs); background: var(--bg); box-shadow: var(--neo-out-xs); display: flex; align-items: center; justify-content: center; font-size: 0.95rem; flex-shrink: 0; }
.pm-section-name { font-weight: 600; font-size: 0.85rem; color: var(--text-1); flex: 1; }
.pm-section-count { font-size: 0.7rem; color: var(--text-3); font-family: 'DM Mono', monospace; }
.pm-section-chev { color: var(--text-3); font-size: 0.7rem; transition: transform 0.2s; margin-left: 6px; }
.pm-section-body { display: none; }
.pm-section-body.open { display: block; }
.pm-item { padding: 0.9rem 1.1rem; border-top: 1px solid rgba(189,208,228,0.40); }
.pm-item:last-child { border: none; }
.pm-item-title { font-size: 0.83rem; font-weight: 500; margin-bottom: 4px; color: var(--text-1); }
.pm-item-desc { font-size: 0.72rem; color: var(--text-3); line-height: 1.4; margin-bottom: 8px; }

.pm-result-row { display: flex; gap: 6px; }
.pm-result-btn {
  flex: 1; padding: 8px 4px;
  background: var(--bg); box-shadow: var(--neo-out-xs);
  border: none; border-radius: var(--radius-xs);
  color: var(--text-3); font-family: 'Outfit', sans-serif; font-size: 0.72rem; font-weight: 600;
  transition: all 0.2s; cursor: pointer;
}
.pm-result-btn:hover { box-shadow: var(--neo-out-sm); }
.pm-result-btn.sel-ok   { box-shadow: var(--neo-in-sm), 0 0 0 1.5px var(--blue);   color: var(--blue); }
.pm-result-btn.sel-na   { box-shadow: var(--neo-in-sm), 0 0 0 1.5px var(--text-3); color: var(--text-2); }
.pm-result-btn.sel-fail { box-shadow: var(--neo-in-sm), 0 0 0 1.5px var(--red);    color: var(--red); }

.pm-item-note { width: 100%; margin-top: 6px; padding: 8px 10px; background: var(--bg); box-shadow: var(--neo-in-sm); border: none; border-radius: var(--radius-xs); color: var(--text-1); font-family: 'Outfit', sans-serif; font-size: 0.78rem; outline: none; display: none; }
.pm-item-note.show { display: block; }
.pm-item-note:focus { box-shadow: var(--neo-in-sm), 0 0 0 2px rgba(27,107,170,0.2); }
.pm-fail-label {
  margin-bottom: 3px; padding-left: 2px;
  font-family: 'Outfit', sans-serif; font-size: 0.72rem; font-weight: 500;
  color: var(--text-2);
}

.pm-submit-errors {
  margin: 0.8rem 1.1rem 0.8rem; padding: 10px 14px;
  background: rgba(217, 79, 106, 0.06);
  border: 1px solid rgba(217, 79, 106, 0.25);
  border-radius: var(--radius-sm);
  font-family: 'Outfit', sans-serif; font-size: 0.75rem; color: var(--red);
}
.pm-submit-errors-title { font-weight: 600; margin-bottom: 4px; }
.pm-submit-error-item { padding-left: 4px; line-height: 1.5; }


.pm-section-note-label { font-size: 0.64rem; color: var(--text-3); letter-spacing: 0.8px; text-transform: uppercase; font-weight: 600; margin: 10px 0 5px; }
.pm-section-note { width: 100%; padding: 8px 10px; background: var(--bg); box-shadow: var(--neo-in-sm); border: none; border-radius: var(--radius-xs); color: var(--text-1); font-family: 'Outfit', sans-serif; font-size: 0.78rem; outline: none; resize: none; min-height: 50px; }
.pm-section-note:focus { box-shadow: var(--neo-in-sm), 0 0 0 2px rgba(27,107,170,0.2); }

.pm-voltage-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: 6px; margin-bottom: 1.2rem; }
.pm-voltage-cell { padding: 8px; background: var(--bg); box-shadow: var(--neo-in-sm); border-radius: var(--radius-xs); }
.pm-voltage-label { font-size: 0.62rem; color: var(--text-3); margin-bottom: 4px; text-align: center; }
.pm-voltage-input { width: 100%; padding: 5px; background: transparent; border: none; color: var(--text-1); font-family: 'DM Mono', monospace; font-size: 0.78rem; text-align: center; outline: none; }

.pm-photo-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 1.2rem; }
.pm-photo-slot { display: flex; flex-direction: column; gap: 4px; }
.pm-photo-box {
  background: var(--bg); box-shadow: var(--neo-in-sm);
  border-radius: var(--radius-sm); padding: 0.6rem; text-align: center;
  position: relative; overflow: hidden; min-height: 78px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: all 0.2s; cursor: pointer;
}
.pm-photo-box:hover { box-shadow: var(--neo-in-sm), 0 0 0 1.5px rgba(27,107,170,0.3); }
.pm-photo-box.captured { box-shadow: var(--neo-in-sm), 0 0 0 1.5px var(--blue); background-size: cover; background-position: center; }
.pm-photo-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-sm); opacity: 0.7; }
.pm-photo-icon { font-size: 1.1rem; position: relative; z-index: 1; }
.pm-photo-label { font-size: 0.6rem; color: var(--text-3); line-height: 1.2; text-align: center; }
.pm-photo-badge { position: absolute; bottom: 3px; right: 3px; background: var(--blue); color: #fff; border-radius: 50%; width: 16px; height: 16px; font-size: 0.6rem; font-weight: 700; display: flex; align-items: center; justify-content: center; z-index: 2; }

/* ── Photo Upload States ──────────────────────────────────────────── */
.photo-spinner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.35); border-radius: var(--radius-sm); z-index: 3; }
.photo-spinner[hidden] { display: none; }
.photo-spinner::after { content: ""; width: 24px; height: 24px; border: 3px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: photo-spin 0.8s linear infinite; }
@keyframes photo-spin { to { transform: rotate(360deg); } }
.photo-uploading { pointer-events: none; opacity: 0.7; }
.photo-error { box-shadow: var(--neo-in-sm), 0 0 0 1.5px #e53935 !important; }
.photo-error-msg { font-size: 0.6rem; color: #e53935; line-height: 1.2; text-align: center; margin-top: 2px; }
.photo-error-retry { font-size: 0.55rem; color: var(--blue); cursor: pointer; text-decoration: underline; background: none; border: none; padding: 0; margin-top: 2px; }
.photo-uploaded .pm-photo-badge { background: #43a047; }

/* ── ATP Charger Tabs ─────────────────────────────────────────────── */
.atp-charger-tabs-wrap { margin-bottom: 1rem; background: var(--bg); box-shadow: var(--neo-in-sm); border-radius: var(--radius-md); padding: 10px; }
.atp-charger-tabs-label { font-size: 0.62rem; color: var(--text-3); letter-spacing: 1px; text-transform: uppercase; font-weight: 600; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
.atp-charger-count { color: var(--blue-mid); font-family: 'DM Mono', monospace; }
.atp-charger-tabs { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.atp-charger-tab { flex-shrink: 0; padding: 8px 12px; background: var(--bg); box-shadow: var(--neo-out-xs); border: none; border-radius: var(--radius-xs); color: var(--text-3); font-family: 'Outfit', sans-serif; font-size: 0.78rem; font-weight: 500; white-space: nowrap; display: flex; align-items: center; gap: 6px; transition: all 0.2s; cursor: pointer; }
.atp-charger-tab:hover { box-shadow: var(--neo-out-sm); }
.atp-charger-tab.active { box-shadow: var(--neo-in-sm), 0 0 0 1.5px var(--blue); color: var(--blue); font-weight: 700; }
.charger-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); flex-shrink: 0; }
.atp-charger-tab.complete .charger-status-dot { background: var(--blue); }
.atp-charger-tab.partial .charger-status-dot { background: var(--yellow); }
.atp-charger-tab.fail .charger-status-dot { background: var(--red); }
.atp-charger-remove {
  margin-left: 4px; font-size: 0.65rem; color: var(--text-3);
  cursor: pointer; padding: 0 2px; border-radius: 3px; line-height: 1;
}
.atp-charger-remove:hover { color: var(--red); background: rgba(217, 79, 106, 0.1); }
.atp-charger-add { flex-shrink: 0; padding: 8px 12px; background: transparent; border: 2px dashed rgba(189,208,228,0.7); border-radius: var(--radius-xs); color: var(--text-3); font-family: 'Outfit', sans-serif; font-size: 0.78rem; font-weight: 500; transition: all 0.2s; white-space: nowrap; cursor: pointer; margin-top: 6px; width: 100%; }
.atp-charger-add:hover { border-color: var(--blue); color: var(--blue-mid); }

/* ── ATP BSS Tab Variant ──────────────────────────────────────── */
.atp-charger-tab.bss-tab { border-left: 3px solid var(--yellow); }
.atp-charger-tab.bss-tab.active { box-shadow: var(--neo-in-sm), 0 0 0 1.5px var(--yellow); color: var(--yellow); }
.atp-charger-tab.bss-tab .charger-status-dot { background: rgba(201, 138, 0, 0.5); }
.atp-charger-tab.bss-tab.complete .charger-status-dot { background: var(--yellow); }
.atp-charger-tab.bss-tab.fail .charger-status-dot { background: var(--red); }
.atp-charger-tab.bss-tab.partial .charger-status-dot { background: rgba(201, 138, 0, 0.7); }
.bss-tab-badge {
  font-size: 0.55rem; padding: 1px 5px; border-radius: 6px;
  background: rgba(201, 138, 0, 0.12); color: var(--yellow);
  font-family: 'DM Mono', monospace; font-weight: 700; letter-spacing: 0.5px;
}

/* ── ATP Per-Item Attachment Buttons ─────────────────────────────── */
.pm-attach-row { display: flex; gap: 6px; margin-top: 8px; }
.pm-attach-btn { flex: 1; padding: 7px 8px; background: var(--bg); box-shadow: var(--neo-out-xs); border: none; border-radius: var(--radius-xs); color: var(--text-3); font-family: 'Outfit', sans-serif; font-size: 0.7rem; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 5px; transition: all 0.2s; cursor: pointer; }
.pm-attach-btn:hover { box-shadow: var(--neo-out-sm); color: var(--blue-mid); }
.pm-attach-btn.has-files { box-shadow: var(--neo-in-sm), 0 0 0 1.5px var(--blue); color: var(--blue); font-weight: 600; }
.attach-count { font-family: 'DM Mono', monospace; font-size: 0.66rem; background: var(--blue-tint); padding: 1px 5px; border-radius: 8px; color: var(--blue-mid); }

/* ── ATP Conclusion Cards ────────────────────────────────────────── */
.conclusion-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 1.2rem; }
.conclusion-card { padding: 16px 10px; background: var(--bg); box-shadow: var(--neo-out-xs); border-radius: var(--radius-md); text-align: center; cursor: pointer; transition: all 0.2s; border: 1px solid rgba(255,255,255,0.6); }
.conclusion-card:hover { box-shadow: var(--neo-out-sm); }
.conclusion-icon { font-size: 1.6rem; margin-bottom: 6px; }
.conclusion-label { font-size: 0.9rem; font-weight: 700; color: var(--text-2); }
.conclusion-card--pass.selected { box-shadow: var(--neo-in-sm), 0 0 0 2px var(--blue); }
.conclusion-card--pass.selected .conclusion-label { color: var(--blue); }
.conclusion-card--fail.selected { box-shadow: var(--neo-in-sm), 0 0 0 2px var(--red); }
.conclusion-card--fail.selected .conclusion-label { color: var(--red); }
.conclusion-card.disabled { opacity: 0.4; pointer-events: none; cursor: not-allowed; }

/* ─────────────────────────────────────── */
/* MANAGER TABS                           */
/* ─────────────────────────────────────── */

.mgr-tabs {
  display: flex;
  gap: 5px;
  background: var(--bg2);
  box-shadow: var(--neo-in-sm);
  border-radius: var(--radius-sm);
  padding: 4px;
  margin-bottom: 1.2rem;
}
.mgr-tab {
  flex: 1;
  padding: 9px 4px;
  border: none;
  background: transparent;
  color: var(--text-3);
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  position: relative;
  transition: all 0.2s;
  display: block;
}
.mgr-tab--active {
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  box-shadow: var(--neo-out-xs);
}
.mgr-tab--disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}
.tab-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  background: var(--red);
  color: #fff;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  font-size: 0.55rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mgr-section-label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-3);
  margin: 1.2rem 0 0.6rem;
}
.mgr-section-label--acked { opacity: 0.6; }

/* ─────────────────────────────────────── */
/* ESCALATION CARDS (esc-card)            */
/* ─────────────────────────────────────── */

.esc-list { display: flex; flex-direction: column; gap: 10px; }

.esc-empty {
  text-align: center;
  padding: 2.5rem 1rem;
  background: var(--bg);
  box-shadow: var(--neo-in-sm);
  border-radius: var(--radius-md);
  font-family: 'Outfit', sans-serif;
  font-size: 0.9rem;
  color: var(--text-2);
}

.esc-card {
  background: var(--bg);
  border: 1px solid var(--red);
  border-radius: var(--radius-md);
  padding: 1rem 1.1rem;
  position: relative;
}
.esc-card--acked {
  border-color: var(--shadow-d);
  opacity: 0.65;
}

/* Header row: dot · name · time */
.esc-header {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
}
.esc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
  animation: esc-pulse 1.5s ease-in-out infinite;
}
.esc-card--acked .esc-dot {
  background: var(--text-3);
  animation: none;
}
@keyframes esc-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.75); }
}
.esc-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text-1);
  flex: 1;
}
.esc-time {
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  color: var(--text-3);
  white-space: nowrap;
}

.esc-site {
  font-family: 'Outfit', sans-serif;
  font-size: 0.76rem;
  color: var(--text-2);
  margin-bottom: 7px;
}
.esc-location {
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  color: var(--text-3);
  margin-top: -3px;
  margin-bottom: 7px;
}
.esc-coords {
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  color: var(--text-3);
  margin-top: -4px;
  margin-bottom: 7px;
}
.esc-fault {
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  color: var(--text-1);
  line-height: 1.45;
  margin-bottom: 10px;
}
.esc-location {
  font-size: 0.7rem;
  color: var(--text-3);
  font-weight: 400;
}
/* Meta row — Review beside Job Sheet History on an acknowledged card, which
   has no action row to carry the button. */
.esc-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.esc-meta-link {
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--blue);
  background: none;
  border: none;
  padding: 0;
  border-radius: var(--radius-xs);
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s;
}
.esc-meta-link:hover { color: var(--blue-mid); }
.esc-meta-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(27, 107, 170, 0.3);
}
.esc-meta-sep {
  width: 1px;
  height: 11px;
  background: var(--shadow-d);
  flex-shrink: 0;
}

/* Escalated fault, restated at the top of the Review pop-up */
.review-fault {
  margin: 0.75rem 0 0.25rem;
  padding: 0.6rem 0.7rem;
  background: var(--bg);
  box-shadow: var(--neo-in-sm);
  border-radius: var(--radius-sm);
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-1);
}
.review-fault-label {
  display: block;
  margin-bottom: 3px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--red);
}

.esc-history {
  margin-bottom: 10px;
}
.esc-history-link {
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  color: var(--blue);
  text-decoration: none;
  transition: color 0.15s;
}
.esc-history-link:hover {
  color: var(--blue-mid);
  text-decoration: underline;
}
.esc-ack-note {
  font-family: 'Outfit', sans-serif;
  font-size: 0.76rem;
  color: var(--text-2);
  font-style: italic;
}

/* Action buttons row */
.esc-actions {
  display: flex;
  gap: 8px;
  width: 100%;
}
.btn-ack {
  flex: 1;
  padding: 8px;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-ack:active { box-shadow: var(--neo-in-sm); opacity: 0.9; }

.btn-cancel {
  flex: 1;
  padding: 8px;
  background: transparent;
  color: var(--text-3);
  border: 1px solid var(--shadow-d);
  border-radius: var(--radius-sm);
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-cancel:active { color: var(--text-1); }

.btn-redeploy {
  flex: 1;
  padding: 8px;
  background: transparent;
  color: var(--yellow);
  border: 1px solid var(--yellow);
  border-radius: var(--radius-sm);
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-redeploy:active { background: rgba(201, 138, 0, 0.1); }

/* Review shares the outlined vocabulary of Redeploy so the action row reads as
   one control set, rather than a raised surface sitting on the flat card. */
.btn-review {
  flex: 1;
  padding: 8px;
  background: transparent;
  color: var(--blue);
  border: 1px solid var(--blue);
  border-radius: var(--radius-sm);
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-review:hover { background: rgba(27, 107, 170, 0.07); }
.btn-review:active { background: rgba(27, 107, 170, 0.13); }
.btn-review:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(27, 107, 170, 0.3);
}

/* Inline ack note form (hidden until Acknowledge clicked) */
.esc-ack-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  width: 100%;
}
.esc-ack-form--hidden { display: none; }

.esc-ack-textarea {
  width: 100%;
  padding: 0.55rem 0.7rem;
  background: var(--bg);
  box-shadow: var(--neo-in-sm);
  border: none;
  border-radius: var(--radius-sm);
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  color: var(--text-1);
  resize: none;
  box-sizing: border-box;
}
.esc-ack-textarea:focus {
  outline: none;
  box-shadow: var(--neo-in-sm), 0 0 0 2px var(--blue);
}

.esc-confirm-row {
  display: flex;
  gap: 8px;
}

/* Redeploy modal form fields */
.escalation-form-group { display: flex; flex-direction: column; gap: 4px; margin-bottom: 0.75rem; }
.escalation-form-group label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-3);
}
.escalation-form-select,
.escalation-form-input,
.escalation-form-textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  background: var(--bg);
  box-shadow: var(--neo-in-sm);
  border: none;
  border-radius: var(--radius-sm);
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  color: var(--text-1);
  box-sizing: border-box;
  appearance: none;
  resize: none;
}
.escalation-form-select:focus,
.escalation-form-input:focus,
.escalation-form-textarea:focus {
  outline: none;
  box-shadow: var(--neo-in-sm), 0 0 0 2px var(--blue);
}
.escalation-form-textarea { resize: vertical; }
.escalation-form-input--readonly {
  color: var(--text-2);
  box-shadow: none;
  background: var(--bg2);
  cursor: default;
}

/* ── Region → Vendors picker (TomSelect, Arctic Frost) ──
   Matches the modal's recessed inputs; linked vendors read as clear,
   removable rows so it's obvious which vendors are attached. */
.vendor-picker .ts-wrapper { width: 100%; position: relative; }
/* Keep the native <select> visually hidden (it still submits its values); the
   styled TomSelect control below is the actual UI. */
.vendor-picker select.tomselected {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}
.vendor-picker .ts-wrapper .ts-control {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  padding: 0.45rem 0.5rem;
  background: var(--bg);
  box-shadow: var(--neo-in-sm);
  border: none;
  border-radius: var(--radius-sm);
  min-height: 2.4rem;
}
.vendor-picker .ts-wrapper.focus .ts-control {
  box-shadow: var(--neo-in-sm), 0 0 0 2px var(--blue);
}
.vendor-picker .ts-wrapper .ts-control > .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 6px 8px 6px 11px;
  background: var(--blue-tint);
  color: var(--blue);
  border-radius: var(--radius-xs);
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
}
.vendor-picker .ts-wrapper .ts-control > .item .remove {
  border: none;
  color: var(--blue);
  opacity: 0.55;
  padding: 0 2px;
  font-size: 1.05rem;
  line-height: 1;
  text-decoration: none;
}
.vendor-picker .ts-wrapper .ts-control > .item .remove:hover {
  color: var(--red);
  opacity: 1;
  background: transparent;
}
/* Hide the bare placeholder stub the dropdown_input plugin leaves in the
   control; the real search lives in the styled dropdown, opened via the well
   or the add button. */
.vendor-picker .ts-wrapper .ts-control > input { display: none; }
/* Empty state teaches the next action instead of leaving a blank well. */
.vendor-picker .ts-wrapper:not(.has-items) .ts-control::before {
  content: "No vendors linked yet";
  padding: 3px 2px 3px 4px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  color: var(--text-3);
}
/* Explicit add trigger (rendered by the tom-select controller) opens the picker. */
.vendor-picker .ts-add-btn {
  align-self: flex-start;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  background: var(--bg);
  box-shadow: var(--neo-out-xs);
  border: none;
  border-radius: var(--radius-xs);
  color: var(--blue);
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
.vendor-picker .ts-add-btn:hover { color: var(--blue-mid); }
.vendor-picker .ts-add-btn:active { box-shadow: var(--neo-in-sm); }
.vendor-picker .ts-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 10;
  background: var(--bg);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 28px rgba(26, 58, 92, 0.20);
  border-radius: var(--radius-sm);
  padding: 4px;
}
.vendor-picker .ts-dropdown .dropdown-input-wrap { padding: 4px 4px 8px; }
.vendor-picker .ts-dropdown .dropdown-input {
  width: 100%;
  padding: 0.45rem 0.6rem;
  background: var(--bg);
  box-shadow: var(--neo-in-sm);
  border: none;
  border-radius: var(--radius-xs);
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  color: var(--text-1);
}
.vendor-picker .ts-dropdown .option {
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-xs);
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  color: var(--text-1);
}
.vendor-picker .ts-dropdown .option.active { background: var(--blue-tint); color: var(--blue); }
.vendor-picker .ts-dropdown .no-results { padding: 0.5rem 0.65rem; color: var(--text-2); font-size: 0.82rem; }
.vendor-picker .field-hint {
  margin: 6px 0 0;
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  color: var(--text-2);
  line-height: 1.4;
}
.modal-errors {
  background: rgba(217, 79, 106, 0.08);
  color: var(--red);
  border: 1px solid rgba(217, 79, 106, 0.3);
  border-radius: var(--radius-xs);
  padding: 10px 14px;
  margin-bottom: 1rem;
  font-size: 0.82rem;
}
.modal-errors p { margin: 2px 0; line-height: 1.5; }

.escalation-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 0.5rem; }
.escalation-btn {
  width: 100%;
  padding: 0.75rem;
  border: none;
  border-radius: var(--radius-sm);
  font-family: 'Outfit', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
.escalation-btn--primary {
  background: var(--blue);
  color: #fff;
}
.escalation-btn--primary:active { opacity: 0.88; }
.escalation-btn--ghost {
  background: transparent;
  color: var(--text-3);
}
.escalation-btn--ghost:active { color: var(--text-1); }

/* ─────────────────────────────────────── */
/* TOM SELECT — Arctic Frost theme        */
/* ─────────────────────────────────────── */

.ts-wrapper { min-height: unset; }

.ts-wrapper.single .ts-control,
.ts-wrapper.single.input-active .ts-control {
  background: var(--bg);
  box-shadow: var(--neo-in-sm);
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.6rem 2.2rem 0.6rem 0.75rem;
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  color: var(--text-1);
  cursor: pointer;
}
.ts-wrapper.single .ts-control:after {
  border-color: var(--text-3) transparent transparent;
  right: 0.75rem;
}
.ts-wrapper.single.dropdown-active .ts-control:after {
  border-color: transparent transparent var(--blue);
}
.ts-wrapper.focus .ts-control,
.ts-wrapper.single.input-active .ts-control {
  box-shadow: var(--neo-in-sm), 0 0 0 2px var(--blue);
}
.ts-wrapper.single .ts-control input {
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  color: var(--text-1);
}

.ts-dropdown,
.ts-dropdown.single {
  background: var(--bg);
  border: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow: var(--neo-out-sm);
  margin-top: 2px;
  z-index: 100;
}
.ts-dropdown .option {
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  color: var(--text-1);
  padding: 8px 12px;
}
.ts-dropdown .option:hover,
.ts-dropdown .active {
  background: var(--blue-tint);
  color: var(--blue);
}
.ts-dropdown .no-results {
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  color: var(--text-3);
  padding: 10px 12px;
}

/* Search input inside dropdown (dropdown_input plugin) */
.plugin-dropdown_input .dropdown-input {
  background: var(--bg);
  box-shadow: var(--neo-in-sm);
  border: none;
  border-bottom: 1px solid var(--shadow-d);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  padding: 8px 12px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  color: var(--text-1);
  width: 100%;
  box-sizing: border-box;
}
.plugin-dropdown_input .dropdown-input:focus { outline: none; }
.plugin-dropdown_input.focus.dropdown-active .ts-control {
  box-shadow: var(--neo-in-sm), 0 0 0 2px var(--blue);
}

/* Field check-in form — match input-field sizing */
.field-body .ts-wrapper.single .ts-control,
.field-body .ts-wrapper.single.input-active .ts-control {
  box-shadow: var(--neo-in);
  padding: 12px 2.5rem 12px 16px;
  font-size: 0.9rem;
}
.field-body .ts-wrapper.single .ts-control:after { right: 16px; }
.field-body .plugin-dropdown_input.focus.dropdown-active .ts-control {
  box-shadow: var(--neo-in), 0 0 0 2px rgba(27, 107, 170, 0.2);
}

/* ─────────────────────────────────────── */
/* STATION HEALTH BOARD                   */
/* ─────────────────────────────────────── */

.health-summary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}

.health-sum-card {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  background: var(--bg);
  box-shadow: var(--neo-out-sm);
  border-radius: var(--radius-md);
  padding: 0.8rem 0.5rem;
  text-align: center;
  border-top: 3px solid transparent;
  transition: box-shadow 0.15s;
}
.health-sum-card:hover { box-shadow: var(--neo-out); }
.health-sum-card--active { box-shadow: var(--neo-out-sm), 0 0 0 2px var(--blue); }
.hsc-op    { border-top-color: #2a9d5c; }
.hsc-down  { border-top-color: var(--red); }

.hsc-num {
  font-family: 'DM Mono', monospace;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--text-1);
  line-height: 1;
}
.hsc-label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.7rem;
  color: var(--text-2);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Map view — frosted dark island */
.map-view {
  background: linear-gradient(135deg, #1a2e45, #0f2030);
  border-radius: var(--radius-lg);
  margin-bottom: 1rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.map-canvas {
  width: 100%;
  height: 320px;
  position: relative;
  z-index: 0;
  background: #1a2e45;
}

/* Site form map picker — Leaflet canvas in a recessed well */
.site-map-picker {
  height: 220px;
  margin-top: 0.6rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  z-index: 0;
  background: var(--bg2);
  box-shadow: var(--neo-in-sm);
  cursor: crosshair;
}
.site-map-hint {
  font-family: 'Outfit', sans-serif;
  font-size: 0.7rem;
  color: var(--text-3);
  margin-top: 0.4rem;
}
.site-pin-wrap { position: relative; }
.site-pin {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 3px 8px rgba(26, 58, 92, 0.35);
}

/* Leaflet station markers (divIcon) */
.stn-marker-wrap { position: relative; }
.stn-marker {
  position: absolute;
  inset: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.42rem;
  font-weight: 700;
  font-family: 'DM Mono', monospace;
  color: rgba(15, 32, 48, 0.85);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s;
  z-index: 1;
}
.stn-marker-wrap:hover .stn-marker { transform: scale(1.3); }
.stn-marker--down        { background: #d94f6a; }

.stn-marker-pulse {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: mapPulse 2s infinite;
  z-index: 0;
}
.stn-marker-wrap:has(.stn-marker--down) .stn-marker-pulse { background: rgba(217, 79, 106, 0.4); }

@keyframes mapPulse {
  0%   { transform: translate(-50%, -50%) scale(0.5); opacity: 0.8; }
  100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
}

/* Leaflet tooltip — dark frosted theme */
.leaflet-tooltip.leaflet-tooltip-top {
  background: rgba(26, 46, 69, 0.96);
  border: 1px solid rgba(91, 157, 212, 0.25);
  border-radius: 10px;
  padding: 7px 11px;
  font-size: 0.72rem;
  font-family: 'Outfit', sans-serif;
  color: #dff0fb;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.leaflet-tooltip-top::before { border-top-color: rgba(26, 46, 69, 0.96); }
.map-tip-status {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
}
.map-tip-status--operational { color: #2a9d5c; }
.map-tip-status--down        { color: #d94f6a; }

.map-legend {
  display: flex;
  gap: 12px;
  padding: 8px 12px;
  border-top: 1px solid rgba(91, 157, 212, 0.12);
}
.map-leg-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  font-family: 'Outfit', sans-serif;
  color: rgba(168, 204, 232, 0.8);
}
.map-leg-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Job sheet GPS map — the same map inside a bottom sheet, so the canvas is
   shorter and the legend wraps rather than pushing the sheet wide. */
.map-view--sheet { margin: 0.75rem 0 1rem; }
.map-view--sheet .map-canvas { height: 200px; }
.map-view--sheet .map-legend { flex-wrap: wrap; gap: 8px 12px; }

.gps-marker {
  position: absolute;
  inset: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
  font-weight: 700;
  font-family: 'DM Mono', monospace;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s;
}
.stn-marker-wrap:hover .gps-marker { transform: scale(1.2); }

.gps-marker--in,   .map-leg-dot--in   { background: var(--blue); }
.gps-marker--out,  .map-leg-dot--out  { background: #2a9d5c; }
.gps-marker--site, .map-leg-dot--site { background: var(--yellow); }

/* Station list rows */
.health-board { display: flex; flex-direction: column; gap: 8px; }

.station-row {
  background: var(--bg);
  box-shadow: var(--neo-out-xs);
  border-radius: var(--radius-md);
  padding: 0.85rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.stn-row-body { flex: 1; min-width: 0; }

.stn-id {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  color: var(--text-3);
}
.stn-row-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stn-row-meta {
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  color: var(--text-2);
  margin-top: 2px;
}
.stn-row-loc {
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  color: var(--text-3);
  margin-top: 3px;
}
.stn-row-coords {
  font-family: 'DM Mono', monospace;
  font-size: 0.66rem;
  color: var(--text-3);
  margin-top: 2px;
}
.stn-row-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-family: 'DM Mono', monospace;
  font-size: 0.66rem;
  color: var(--text-3);
  margin-top: 4px;
}
.stn-row-jobsheets {
  margin-top: 8px;
  font-size: 0.7rem;
  padding: 4px 10px;
}

.stn-row-status {
  padding: 4px 10px;
  border-radius: 20px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.stn-row-status--operational { background: #d4f0e2; color: #1a6b42; }
.stn-row-status--down        { background: #fde2e8; color: #a3002a; }

/* Station row health badges (repeat fault + SLA breach) */
.station-row.repeat-fault {
  box-shadow: var(--neo-out-xs), inset 3px 0 0 var(--yellow);
}

.repeat-badge,
.sla-breach-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  margin-left: 6px;
  vertical-align: middle;
}

.repeat-badge {
  background: rgba(201, 138, 0, 0.15);
  color: var(--yellow);
  border: 1px solid rgba(201, 138, 0, 0.35);
}

.sla-breach-badge {
  background: rgba(217, 79, 106, 0.15);
  color: var(--red);
  border: 1px solid rgba(217, 79, 106, 0.4);
  animation: slaBreachPulse 1.6s ease-in-out infinite;
}

@keyframes slaBreachPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 79, 106, 0.35); }
  50%      { box-shadow: 0 0 0 4px rgba(217, 79, 106, 0); }
}

/* ─────────────────────────────────────── */
/* TASK ASSIGNMENTS PAGE                  */
/* ─────────────────────────────────────── */

.assign-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.assign-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-1);
}

.btn-new-assign {
  background: var(--blue);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 8px 14px;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: var(--neo-out-xs);
}
.btn-new-assign:active { box-shadow: var(--neo-in-sm); }

.assign-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.btn-bulk-assign {
  background: var(--bg2);
  color: var(--text-3);
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 8px 14px;
  border: 1px dashed var(--shadow-d);
  border-radius: var(--radius-sm);
  cursor: not-allowed;
  box-shadow: none;
}

.task-assign-list { display: flex; flex-direction: column; gap: 10px; }

.assign-card {
  background: var(--bg);
  border: 1px solid var(--shadow-d);
  border-radius: var(--radius-md);
  padding: 1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.assign-card.pending  { border-color: rgba(27, 107, 170, 0.3); }
.assign-card.accepted { border-color: rgba(42, 157, 92, 0.3); }

.assign-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.assign-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--blue-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--blue);
  flex-shrink: 0;
}

.assign-worker {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text-1);
  flex: 1;
}

.assign-status-badge {
  padding: 3px 8px;
  border-radius: 20px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}
.asb-pending  { background: rgba(27, 107, 170, 0.12); color: var(--blue); }
.asb-accepted { background: rgba(42, 157, 92, 0.12);  color: #1a6b42; }

.assign-task-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  background: var(--blue-tint);
  color: var(--blue);
  margin-bottom: 2px;
}

.assign-site-inline {
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  color: var(--text-2);
  margin-left: 6px;
}

/* EVCS / BSS site type badge on the assignment site line */
.site-type-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  margin-left: 6px;
  vertical-align: middle;
  background: var(--blue-tint);
  color: var(--blue);
  border: 1px solid var(--blue-pale);
}

.assign-detail {
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  color: var(--text-2);
  margin-bottom: 2px;
}
.assign-uuid { font-family: 'DM Mono', monospace; font-size: 0.62rem; color: var(--text-3); word-break: break-all; }
.assign-priority--urgent   { color: var(--yellow); }
.assign-priority--critical { color: var(--red); }
.assign-priority--normal   { color: var(--text-3); }

.btn-cancel-assign {
  background: transparent;
  border: 1px solid var(--shadow-d);
  color: var(--text-2);
  padding: 5px 12px;
  border-radius: var(--radius-xs);
  font-family: 'Outfit', sans-serif;
  font-size: 0.75rem;
  cursor: pointer;
  align-self: flex-start;
  transition: border-color 0.15s, color 0.15s;
  margin-top: 2px;
}
.btn-cancel-assign:hover {
  border-color: var(--red);
  color: var(--red);
}

.assign-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  align-items: center;
}

.btn-job-sheets {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--shadow-d);
  color: var(--text-2);
  padding: 5px 12px;
  border-radius: var(--radius-xs);
  font-family: 'Outfit', sans-serif;
  font-size: 0.75rem;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.btn-job-sheets:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.assign-location {
  font-size: 0.75rem;
  color: var(--text-3);
  margin-top: 2px;
}
.assign-chargers {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  color: var(--text-2);
  margin-top: 2px;
}

/* Assignments filter bar — scoped under .filter-bar so it does not collide
   with the HR/audit-log .filter-* classes defined later in this file. */
.filter-bar {
  margin-bottom: 14px;
}
.filter-bar .filter-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
.filter-bar .filter-top {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.filter-bar .filter-top .filter-search {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 520px;
}
.filter-bar .filter-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  padding-left: 16px;
  border-left: 1px solid var(--shadow-d);
}
.filter-bar .filter-adv {
  border-radius: var(--radius-md);
}
.filter-bar .filter-adv-summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-2);
  padding: 4px 2px;
  user-select: none;
  width: max-content;
}
.filter-bar .filter-adv-summary::-webkit-details-marker {
  display: none;
}
.filter-bar .filter-adv-caret {
  display: inline-flex;
  color: var(--text-3);
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.filter-bar .filter-adv[open] .filter-adv-caret {
  transform: rotate(90deg);
}
.filter-bar .filter-adv-count {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  color: var(--blue);
  background: var(--blue-tint);
  border-radius: var(--radius-xs);
  padding: 1px 7px;
}
.filter-bar .filter-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 14px;
  margin-top: 10px;
}
.filter-bar .filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.filter-bar .filter-field--date {
  grid-column: span 2;
}
/* Controls fill their grid cell so the row stays one line on desktop,
   overriding the compact filter-select/ts-wrapper max-widths used elsewhere. */
.filter-bar .filter-grid .filter-select,
.filter-bar .filter-grid .filter-date {
  max-width: none;
  width: 100%;
  box-sizing: border-box;
}
.filter-bar .filter-grid .ts-wrapper {
  max-width: none;
  width: 100%;
}
@media (min-width: 761px) and (max-width: 1200px) {
  .filter-bar .filter-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .filter-bar .filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .filter-bar .filter-field--date {
    grid-column: span 2;
  }
}
.filter-bar .filter-field-label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-2);
}
.filter-bar .filter-dates {
  display: flex;
  align-items: center;
  gap: 6px;
}
.filter-bar .filter-dash {
  color: var(--text-3);
}
@media (prefers-reduced-motion: reduce) {
  .filter-bar .filter-adv-caret { transition: none; }
}
.filter-bar .filter-search {
  padding: 6px 12px;
  border: 1px solid var(--shadow-d);
  border-radius: var(--radius-sm);
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  color: var(--text-1);
  background: var(--bg);
  min-width: 180px;
  height: 34px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.filter-bar .filter-search:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px var(--blue-tint);
}
.filter-bar .filter-search::placeholder {
  color: var(--text-3);
}
.filter-bar .filter-select {
  padding: 6px 10px;
  border: 1px solid var(--shadow-d);
  border-radius: var(--radius-sm);
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  color: var(--text-1);
  background: var(--bg);
  max-width: 150px;
  height: 34px;
  outline: none;
  cursor: pointer;
}
.filter-bar .filter-select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px var(--blue-tint);
}

/* TomSelect dropdowns inside the filter row — match the compact filter sizing
   and keep long selected values on a single truncated line. */
.filter-bar .ts-wrapper {
  min-width: 130px;
  max-width: 160px;
}
.filter-bar .ts-wrapper.single .ts-control {
  padding: 6px 24px 6px 10px !important;
  box-shadow: none !important;
  border: 1px solid var(--shadow-d) !important;
  border-radius: var(--radius-sm) !important;
  font-size: 0.78rem !important;
  min-height: 34px !important;
  display: flex;
  align-items: center;
}
.filter-bar .ts-wrapper.single .ts-control .item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.filter-bar .ts-wrapper.focus .ts-control {
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 2px var(--blue-tint) !important;
}

.filter-bar .filter-date {
  padding: 5px 8px;
  border: 1px solid var(--shadow-d);
  border-radius: var(--radius-sm);
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  color: var(--text-1);
  background: var(--bg);
  width: 130px;
  height: 34px;
  outline: none;
}
.filter-bar .filter-date:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px var(--blue-tint);
}
.filter-bar .filter-dates .filter-date {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}
.filter-bar .filter-btn {
  padding: 6px 14px;
  border: none;
  border-radius: var(--radius-sm);
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  color: #fff;
  background: var(--blue);
  cursor: pointer;
  height: 34px;
  transition: background 0.15s;
}
.filter-bar .filter-btn:hover {
  background: var(--blue-mid);
}
.filter-bar .filter-clear {
  font-size: 0.78rem;
  color: var(--text-3);
  text-decoration: none;
  padding: 6px 8px;
  transition: color 0.15s;
}
.filter-bar .filter-clear:hover {
  color: var(--red);
}

.charger-check-group.hidden {
  display: none;
}
.charger-checklist {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 180px;
  overflow-y: auto;
  padding: 8px;
  background: var(--bg2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--shadow-d);
}
.charger-check-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem;
  color: var(--text-1);
  cursor: pointer;
  padding: 2px 0;
}
.charger-checkbox,
.charger-check {
  accent-color: var(--blue);
  cursor: pointer;
}
.charger-hint {
  font-size: 0.7rem;
  color: var(--text-3);
  margin: 4px 0 0 2px;
}

.per-page-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  margin-bottom: 8px;
}
.per-page-label {
  font-size: 0.75rem;
  color: var(--text-3);
}
.per-page-form {
  display: inline-block;
}
.per-page-dropdown {
  padding: 4px 8px;
  border: 1px solid var(--shadow-d);
  border-radius: var(--radius-xs);
  font-family: 'Outfit', sans-serif;
  font-size: 0.75rem;
  color: var(--text-1);
  background: var(--bg);
  cursor: pointer;
  outline: none;
}
.per-page-dropdown:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px var(--blue-tint);
}

.escalation-btn--primary:active { box-shadow: var(--neo-in-sm); }

/* Additional status colours on assignment cards */
.assign-card.in_progress { border-color: rgba(27, 107, 170, 0.45); }
.assign-card.completed   { border-color: rgba(42, 157, 92, 0.30); }
.assign-card.cancelled   { border-color: var(--shadow-d); }

/* Critical priority — red border, takes precedence over status border */
.assign-card.critical {
  border-color: var(--red);
  border-width: 2px;
  padding: calc(1rem - 1px) calc(1.2rem - 1px);
}

/* Status badges for in_progress / completed / cancelled */
.asb-in_progress { background: rgba(27, 107, 170, 0.15); color: var(--blue); }
.asb-completed   { background: rgba(42, 157, 92, 0.15);  color: #1a6b42; }
.asb-cancelled   { background: rgba(122, 138, 158, 0.15); color: var(--text-3); }

/* History section — faded cards */
.assign-card--history { opacity: 0.65; }

/* ─────────────────────────────────────── */
/* Field — Pending Assignments (read-only) */
/* ─────────────────────────────────────── */

.field-assigned-section {
  margin-bottom: 1.2rem;
}

.field-assigned-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 1.8px;
  margin-bottom: 0.6rem;
}

.assign-card--readonly {
  cursor: default;
}

.assign-priority-badge {
  font-family: 'Outfit', sans-serif;
}
.asb-priority-normal   { background: rgba(122, 138, 158, 0.15); color: var(--text-3); }
.asb-priority-urgent   { background: rgba(201, 138, 0, 0.15);   color: var(--yellow); }
.asb-priority-critical { background: rgba(217, 79, 106, 0.15);  color: var(--red); }

.assign-meta {
  font-family: 'Outfit', sans-serif;
  font-size: 0.7rem;
  color: var(--text-3);
  margin-top: 4px;
}

/* Accept / cancel-accept buttons on field pending assignment cards */
.assign-card--field {
  display: flex;
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.assign-card--field .assign-content-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.assign-card--field .assign-accept-col {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-accept-assign {
  background: var(--blue);
  color: #fff;
  border: none;
  box-shadow: 2px 2px 6px rgba(27, 107, 170, 0.25), -1px -1px 4px rgba(255, 255, 255, 0.6);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.btn-accept-assign:hover {
  background: var(--blue-mid);
}
.btn-accept-assign:active {
  box-shadow: var(--neo-in-sm);
}

.btn-cancel-accept {
  background: var(--bg);
  box-shadow: var(--neo-out-xs);
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-3);
  padding: 6px 12px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.btn-cancel-accept:hover {
  color: var(--text-2);
}
.btn-cancel-accept:active {
  box-shadow: var(--neo-in-sm);
}

/* Accepted assignment card highlight */
.assign-card.accepted-active {
  border-color: rgba(42, 157, 92, 0.55);
  box-shadow: var(--neo-out-xs), inset 3px 0 0 rgba(42, 157, 92, 0.6);
}

/* Camera box error state (CI-b-iv) */
.camera-box.error {
  border-color: var(--red);
  border-style: solid;
  box-shadow: var(--neo-in-sm), 0 0 0 2px rgba(217, 79, 106, 0.25);
}

/* Task section error state */
.task-grid.error .task-card:not(.selected) {
  box-shadow: var(--neo-out-xs), 0 0 0 1px rgba(217, 79, 106, 0.4);
}
.task-grid.locked .task-card:not(.selected) {
  opacity: 0.35; pointer-events: none;
}
.check-in-error-msg {
  font-family: 'Outfit', sans-serif;
  font-size: 0.75rem;
  color: var(--red);
  margin-top: 4px;
}

/* Mismatch confirmation modal — body styling */
.mismatch-pending-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0.6rem 0 1rem;
  padding: 0.8rem 1rem;
  background: var(--bg);
  border-radius: var(--radius-sm);
  box-shadow: var(--neo-in-sm);
}

.mismatch-pending-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.mismatch-pending-more {
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  color: var(--text-3);
}

/* ============================================================
   HR Dashboard
   ============================================================ */

/* Settings bar */
.hr-settings-bar {
  background: var(--bg);
  border-radius: var(--radius-md);
  box-shadow: var(--neo-out-sm);
  padding: 0.8rem 1.2rem;
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.hr-setting-item { display: flex; align-items: center; gap: 8px; }
.hr-setting-label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-3);
  white-space: nowrap;
}
.hr-setting-val {
  font-family: 'DM Mono', monospace;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--blue);
}
.hr-setting-box {
  font-family: 'DM Mono', monospace;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--blue);
  padding: 5px 10px;
  background: var(--bg);
  box-shadow: var(--neo-in-sm);
  border-radius: var(--radius-xs);
  min-width: 60px;
  text-align: center;
  display: inline-block;
}
.hr-setting-divider { width: 1px; height: 20px; background: var(--shadow-d); }
.btn-payroll-csv {
  padding: 7px 14px;
  background: var(--bg);
  box-shadow: var(--neo-out-xs);
  border: none;
  border-radius: var(--radius-xs);
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--blue);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.btn-payroll-csv:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-payroll-csv:not(:disabled):active { box-shadow: var(--neo-in-sm); }

/* Dashboard Tabs (HR + Manager share the same visual style) */
.hr-tabs,
.mgr-tabs {
  display: flex;
  gap: 6px;
  background: var(--bg2);
  box-shadow: var(--neo-in-sm);
  border-radius: var(--radius-sm);
  padding: 4px;
  margin-bottom: 1.2rem;
}
.hr-tab,
.mgr-tab {
  flex: 1;
  padding: 9px 4px;
  border: none;
  background: transparent;
  color: var(--text-3);
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
  font-size: 0.74rem;
  font-weight: 500;
  transition: all 0.2s;
}
.hr-tab--active,
.mgr-tab--active {
  background: var(--bg);
  box-shadow: var(--neo-out-xs);
  color: var(--blue);
  font-weight: 700;
}
.hr-tab:disabled,
.mgr-tab:disabled { opacity: 0.35; cursor: not-allowed; }

/* Five manager tabs no longer fit a phone at equal width (#317). Each tab keeps
   its label on one line and grows to fill a wide screen; the bar scrolls when
   the labels together outrun the viewport. */
.mgr-tabs { overflow-x: auto; scrollbar-width: none; }
.mgr-tabs::-webkit-scrollbar { display: none; }
.mgr-tabs .mgr-tab {
  flex: 1 0 auto;
  white-space: nowrap;
  padding: 9px 10px;
}

/* Roll summary */
.roll-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 1rem;
}
.rs-sum-card { border-radius: var(--radius-sm); padding: 0.7rem; text-align: center; }
.rs-sum-present { background: rgba(27,107,170,0.08);  border: 1px solid rgba(27,107,170,0.2); }
.rs-sum-late    { background: rgba(201,138,0,0.08);   border: 1px solid rgba(201,138,0,0.2); }
.rs-sum-absent  { background: rgba(217,79,106,0.08);  border: 1px solid rgba(217,79,106,0.2); }
.rs-sum-leave   { background: rgba(122,170,191,0.08); border: 1px solid rgba(122,170,191,0.2); }
.rs-sum-num {
  font-size: 1.3rem;
  font-weight: 700;
  font-family: 'DM Mono', monospace;
}
.rs-sum-present .rs-sum-num { color: var(--blue); }
.rs-sum-late    .rs-sum-num { color: var(--yellow); }
.rs-sum-absent  .rs-sum-num { color: var(--red); }
.rs-sum-leave   .rs-sum-num { color: var(--text-3); }
.rs-sum-label {
  font-size: 0.6rem;
  color: var(--text-3);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: 'Outfit', sans-serif;
}

/* Roll call list */
.roll-call-list { display: flex; flex-direction: column; gap: 8px; }
.roll-card {
  background: var(--bg);
  border-radius: var(--radius-sm);
  box-shadow: var(--neo-out-sm);
  padding: 0.9rem 1.2rem;
  display: flex;
  align-items: center;
  gap: 12px;
}
.roll-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: var(--neo-in-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Mono', monospace;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--blue);
  flex-shrink: 0;
}
.roll-info { flex: 1; min-width: 0; }
.roll-name { font-weight: 600; font-size: 0.88rem; color: var(--text-1); }
.roll-meta { font-size: 0.72rem; color: var(--text-3); margin-top: 2px; }
.roll-badge {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  flex-shrink: 0;
  white-space: nowrap;
  font-family: 'Outfit', sans-serif;
}
.rb-present { background: rgba(27,107,170,0.12);  color: var(--blue); }
.rb-late    { background: rgba(201,138,0,0.12);   color: var(--yellow); }
.rb-absent  { background: rgba(217,79,106,0.12);  color: var(--red); }
.rb-on_leave { background: rgba(122,170,191,0.12); color: var(--text-3); }

/* Overtime panel */
.ot-summary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 1rem;
}
.ot-sum-card {
  background: rgba(201,138,0,0.08);
  border: 1px solid rgba(201,138,0,0.2);
  border-radius: var(--radius-sm);
  padding: 0.7rem;
  text-align: center;
}
.ot-num {
  font-size: 1.3rem;
  font-weight: 700;
  font-family: 'DM Mono', monospace;
  color: var(--yellow);
}
.ot-label {
  font-size: 0.6rem;
  color: var(--text-3);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: 'Outfit', sans-serif;
}

.ot-list { display: flex; flex-direction: column; gap: 8px; }
.ot-card {
  background: var(--bg);
  border-radius: var(--radius-sm);
  box-shadow: var(--neo-out-sm);
  padding: 0.9rem 1.2rem;
  display: flex;
  align-items: center;
  gap: 12px;
}
.ot-info { flex: 1; min-width: 0; }
.ot-name { font-weight: 600; font-size: 0.88rem; color: var(--text-1); }
.ot-detail { font-size: 0.72rem; color: var(--text-3); margin-top: 2px; }
.ot-hours {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(201,138,0,0.12);
  color: var(--yellow);
  font-family: 'DM Mono', monospace;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Pagy navigation */
.pagy-nav {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.pagy-nav a,
.pagy-nav span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: var(--radius-xs);
  font-family: 'DM Mono', monospace;
  font-size: 0.78rem;
  color: var(--text-2);
  text-decoration: none;
  box-shadow: var(--neo-out-xs);
  background: var(--bg);
}
.pagy-nav a:hover { color: var(--blue); }
.pagy-nav span.current {
  box-shadow: var(--neo-in-sm);
  color: var(--blue);
  font-weight: 700;
}

/* hr-tab as <a> link */
a.hr-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
a.hr-tab:hover { color: var(--blue); }

/* btn-payroll-csv as <a> link */
a.btn-payroll-csv { text-decoration: none; }
a.btn-payroll-csv:hover { box-shadow: var(--neo-out-sm); color: var(--blue); }

/* Attendance Log page */
.filter-row { display: flex; gap: 8px; margin-bottom: 1.2rem; flex-wrap: wrap; align-items: center; }
.filter-form { display: contents; }
.filter-select {
  flex: 1;
  min-width: 120px;
  padding: 9px 11px;
  background: var(--bg);
  box-shadow: var(--neo-in-sm);
  border: none;
  border-radius: var(--radius-xs);
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  color: var(--text-1);
}
.log-filter-btn {
  padding: 9px 16px;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: var(--radius-xs);
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.btn-export {
  padding: 9px 16px;
  background: var(--bg);
  box-shadow: var(--neo-out-xs);
  border-radius: var(--radius-xs);
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
  white-space: nowrap;
  display: inline-block;
}
.btn-export:hover { box-shadow: var(--neo-out-sm); }

/* ── Audit log ── */
.filter-date {
  padding: 9px 11px;
  background: var(--bg);
  box-shadow: var(--neo-in-sm);
  border: none;
  border-radius: var(--radius-xs);
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  color: var(--text-1);
}

.audit-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.audit-row {
  background: var(--bg);
  box-shadow: var(--neo-out-xs);
  border: 1px solid rgba(255, 255, 255, 0.70);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.audit-rowbtn {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 0.8rem 1rem;
  background: transparent;
  border: 0;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}
.audit-rowbtn:hover { background: var(--blue-tint); }
.audit-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}
.ad-create { background: var(--blue); }
.ad-update { background: var(--yellow); }
.ad-delete { background: var(--red); }
.audit-body { flex: 1; min-width: 0; }
.audit-action {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-1);
}
.audit-meta {
  font-size: 0.7rem;
  color: var(--text-3);
  margin-top: 3px;
  font-family: 'DM Mono', monospace;
}
.audit-chevron {
  color: var(--text-3);
  font-size: 0.7rem;
  transition: transform 0.2s;
  flex-shrink: 0;
  margin-top: 4px;
}
.audit-row.open .audit-chevron { transform: rotate(180deg); }
.audit-detail { display: none; padding: 0 1rem 0.9rem; }
.audit-row.open .audit-detail { display: block; }
.audit-diff {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg);
  box-shadow: var(--neo-in-sm);
  border-radius: var(--radius-xs);
  overflow: hidden;
}
.audit-diff th {
  text-align: left;
  padding: 6px 10px;
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-3);
}
.audit-diff td {
  padding: 6px 10px;
  font-size: 0.74rem;
  color: var(--text-2);
  vertical-align: top;
  word-break: break-word;
}
.audit-diff-field { font-weight: 600; color: var(--text-1); }
.audit-diff .mono { font-family: 'DM Mono', monospace; font-size: 0.72rem; }

.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 1rem;
}
.stat-card {
  background: var(--bg);
  box-shadow: var(--neo-out-xs);
  border-radius: var(--radius-sm);
  padding: 0.8rem;
  text-align: center;
}
.stat-num {
  font-size: 1.6rem;
  font-weight: 700;
  font-family: 'DM Mono', monospace;
  color: var(--blue);
}
.stat-label {
  font-size: 0.68rem;
  color: var(--text-3);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: 'Outfit', sans-serif;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--bg2);
  border-radius: var(--radius-md);
  background: var(--bg);
  box-shadow: var(--neo-out-xs);
}
.attendance-table { width: 100%; border-collapse: collapse; }
.attendance-table th {
  text-align: left;
  padding: 10px 12px;
  font-size: 0.72rem;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 1px solid var(--bg2);
  white-space: nowrap;
  font-family: 'Outfit', sans-serif;
}
.attendance-table td {
  padding: 10px 12px;
  font-size: 0.82rem;
  border-bottom: 1px solid var(--bg2);
  vertical-align: middle;
  white-space: nowrap;
  color: var(--text-1);
  font-family: 'Outfit', sans-serif;
}
.attendance-table tr:last-child td { border-bottom: none; }
.attendance-table tr:hover td { background: rgba(27,107,170,0.04); }
.attendance-table .mono { font-family: 'DM Mono', monospace; font-size: 0.78rem; color: var(--text-2); }
.log-empty {
  text-align: center;
  color: var(--text-3);
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  padding: 2rem 0;
}

/* ── Monthly Summary ─────────────────────────── */
.month-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 1rem; }
.month-btn {
  background: var(--bg);
  border: 1px solid var(--shadow-d);
  color: var(--text-3);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.2s;
  flex-shrink: 0;
}
.month-btn:hover { border-color: var(--blue); color: var(--blue); }
.month-btn.disabled { opacity: 0.35; pointer-events: none; }
a.month-btn { line-height: 32px; text-align: center; }
.month-label { font-weight: 600; font-size: 0.9rem; flex: 1; text-align: center; color: var(--text-1); font-family: 'Outfit', sans-serif; }
.monthly-grid { display: flex; flex-direction: column; gap: 8px; }
.monthly-card {
  background: var(--bg);
  box-shadow: var(--neo-out-sm);
  border-radius: 14px;
  padding: 1rem 1.2rem;
}
.monthly-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.monthly-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--blue);
  flex-shrink: 0;
}
.monthly-name { font-weight: 600; font-size: 0.88rem; color: var(--text-1); font-family: 'Outfit', sans-serif; }
.monthly-dept { font-size: 0.7rem; color: var(--text-3); font-family: 'Outfit', sans-serif; }
.monthly-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ms-cell { text-align: center; padding: 6px 4px; background: var(--bg2); border-radius: var(--radius-xs); }
.ms-val { font-size: 0.95rem; font-weight: 700; font-family: 'DM Mono', monospace; color: var(--blue); }
.ms-val.warn   { color: var(--yellow); }
.ms-val.danger { color: var(--red); }
.ms-key { font-size: 0.6rem; color: var(--text-3); margin-top: 2px; text-transform: uppercase; font-family: 'Outfit', sans-serif; }

/* ============================================================
   Admin — User Account Management
   ============================================================ */

.admin-body { padding: 1.2rem; }

.admin-wrap { }

/* ── Scrollable tab bar ── */
.admin-tabs-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1.2rem;
}
.admin-tabs-inner {
  display: flex;
  gap: 6px;
  background: var(--bg2);
  border-radius: 12px;
  padding: 4px;
  min-width: max-content;
}
.admin-tab2 {
  padding: 9px 10px;
  border: none;
  background: transparent;
  color: var(--text-2);
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  transition: all 0.2s;
  text-decoration: none;
  display: inline-block;
}
.admin-tab2.active {
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  box-shadow: var(--neo-out-xs);
}
.admin-tab2:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.admin-panel { }

/* ── Search + add row ── */
.search-add-row {
  display: flex;
  gap: 8px;
  margin-bottom: 1.2rem;
}
.search-field {
  flex: 1;
  padding: 10px 14px;
  background: var(--bg);
  border: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--neo-in-sm);
  font-family: 'Outfit', sans-serif;
  font-size: 0.88rem;
  color: var(--text-1);
  outline: none;
  min-width: 0;
}
.search-field:focus {
  box-shadow: var(--neo-in), 0 0 0 2px rgba(27, 107, 170, 0.2);
}
.search-field::placeholder { color: var(--text-3); }

.btn-add {
  padding: 10px 18px;
  background: var(--blue);
  border: none;
  border-radius: var(--radius-sm);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  box-shadow: var(--neo-out-xs);
  white-space: nowrap;
  transition: box-shadow 0.15s;
}
.btn-add:hover { box-shadow: var(--neo-out-sm); color: #fff; }
.btn-add:active { box-shadow: var(--neo-in-sm); }

/* ── User cards ── */
.user-list { display: flex; flex-direction: column; gap: 8px; }

.user-card {
  background: var(--bg);
  border: 1px solid var(--shadow-d);
  border-radius: 14px;
  padding: 1rem 1.2rem;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--neo-out-xs);
  transition: border-color 0.2s;
}
.user-card:hover { border-color: var(--blue-pale); }
.user-card--inactive { opacity: 0.5; }

.uc-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--blue-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Mono', monospace;
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--blue);
  flex-shrink: 0;
}

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

.user-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text-1);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.user-meta {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  color: var(--text-3);
  margin-top: 3px;
}

.role-chip {
  padding: 2px 7px;
  border-radius: 20px;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.rc-field   { background: rgba(27, 107, 170, 0.1);  color: var(--blue); }
.rc-manager { background: rgba(201, 138, 0, 0.12);  color: var(--yellow); }
.rc-hr      { background: rgba(91, 157, 212, 0.15); color: var(--blue-mid); }
.rc-admin   { background: rgba(217, 79, 106, 0.12); color: var(--red); }
.rc-reset   { background: rgba(201, 138, 0, 0.12);  color: var(--yellow); }

.user-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}

.status-toggle {
  padding: 4px 10px;
  border-radius: 20px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  border: none;
  cursor: default;
}
.st-active   { background: rgba(42, 157, 92, 0.12); color: #1a6b42; }
.st-inactive { background: rgba(217, 79, 106, 0.1); color: var(--red); }

/* Region admin card list */
.region-list { display: flex; flex-direction: column; gap: 10px; }
.region-card { background: var(--bg); box-shadow: var(--neo-out-sm); border-radius: var(--radius-md); overflow: hidden; }
.region-card-head { display: flex; align-items: center; }
.region-card-head .region-row { flex: 1; width: auto; }
.region-card-actions { display: flex; align-items: center; gap: 6px; padding-right: 1.1rem; flex-shrink: 0; }
.region-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 1rem 1.2rem;
  background: transparent;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.region-row:hover { background: var(--blue-tint); }
.region-icon { font-size: 1.3rem; flex-shrink: 0; }
.region-info { flex: 1; min-width: 0; }
.region-name { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 0.88rem; color: var(--text-1); }
.region-meta { font-family: 'DM Mono', monospace; font-size: 0.7rem; color: var(--text-3); margin-top: 3px; }
.region-chevron { color: var(--text-3); font-size: 0.7rem; transition: transform 0.2s; flex-shrink: 0; }
.region-card.open .region-chevron { transform: rotate(180deg); }
.region-body { display: none; padding: 0.4rem 1.2rem 1rem; border-top: 1px solid rgba(189, 208, 228, 0.4); }
.region-card.open .region-body { display: block; }
.region-body-label { font-family: 'Outfit', sans-serif; font-size: 0.65rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 1px; margin: 0.6rem 0 0.4rem; }
.region-sub { display: flex; flex-wrap: wrap; gap: 6px; }
.region-tag {
  padding: 4px 10px;
  background: var(--blue-tint);
  border-radius: 20px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  color: var(--text-2);
}

/* Site admin card list */
.site-list { display: flex; flex-direction: column; gap: 10px; }
.site-card { background: var(--bg); box-shadow: var(--neo-out-sm); border-radius: var(--radius-md); padding: 1rem 1.2rem; }
.site-row { display: flex; align-items: center; gap: 10px; }
.site-icon { font-size: 1.2rem; flex-shrink: 0; }
.site-info { flex: 1; min-width: 0; }
.site-name { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 0.88rem; color: var(--text-1); }
.site-loc { font-family: 'DM Mono', monospace; font-size: 0.7rem; color: var(--text-3); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.charger-uuid { font-family: 'DM Mono', monospace; font-size: 0.62rem; color: var(--text-3); margin-top: 2px; word-break: break-all; }
.site-card-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* Site status badges */
.site-status-badge { padding: 3px 10px; border-radius: 20px; font-family: 'Outfit', sans-serif; font-size: 0.7rem; font-weight: 700; white-space: nowrap; }
.site-status--live               { background: rgba(42, 157, 92, 0.12);  color: #1a6b42; }
.site-status--under_construction { background: rgba(201, 138, 0, 0.12);  color: var(--yellow); }
.site-status--planned            { background: rgba(27, 107, 170, 0.1);   color: var(--blue); }
.site-status--inactive           { background: rgba(122, 170, 191, 0.12); color: var(--text-3); }

/* Bulk upload status badges */
.bulk-status--pending    { background: rgba(122, 170, 191, 0.12); color: var(--text-3); }
.bulk-status--processing { background: rgba(27, 107, 170, 0.1);   color: var(--blue); }
.bulk-status--completed  { background: rgba(42, 157, 92, 0.12);   color: #1a6b42; }
.bulk-status--failed     { background: rgba(217, 79, 106, 0.12);  color: var(--red); }

/* ── Bulk upload ── */
.bulk-kind-tabs { display: flex; gap: 6px; margin-bottom: 1rem; }
.bulk-kind-tab {
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  box-shadow: var(--neo-out-xs);
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-2);
  text-decoration: none;
  transition: box-shadow 0.15s, color 0.15s;
}
.bulk-kind-tab:hover { color: var(--blue); }
.bulk-kind-tab.active { box-shadow: var(--neo-in-sm); color: var(--blue); }

.bulk-upload-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 1.2rem;
}
.bulk-upload-form { display: flex; gap: 8px; align-items: center; flex: 1; min-width: 0; }
.bulk-upload-form input[type="file"] {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  background: var(--bg);
  border: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--neo-in-sm);
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  color: var(--text-2);
}
/* Secondary action button. Deliberately NOT a .btn-add modifier: .btn-add is a
   selector the admin E2E specs use to reach the single primary "+ Add" button
   on a page, so a second element carrying that class would hijack the click. */
.btn-ghost {
  padding: 10px 18px;
  background: var(--bg);
  border: none;
  border-radius: var(--radius-sm);
  color: var(--blue);
  font-family: 'Outfit', sans-serif;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  box-shadow: var(--neo-out-xs);
  white-space: nowrap;
  transition: box-shadow 0.15s;
}
.btn-ghost:hover  { color: var(--blue); box-shadow: var(--neo-out-sm); }
.btn-ghost:active { box-shadow: var(--neo-in-sm); }

.bulk-upload-heading {
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
  margin: 1.4rem 0 0.6rem;
}
.bulk-upload-note {
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-3);
}

/* Format guide (collapsible) */
.format-guide {
  background: var(--bg);
  border-radius: var(--radius-md);
  box-shadow: var(--neo-out-xs);
  margin-bottom: 1.2rem;
}
.format-guide-summary {
  padding: 12px 16px;
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-1);
  list-style: none;
}
.format-guide-summary::-webkit-details-marker { display: none; }
.format-guide-summary::after { content: " ▾"; color: var(--text-3); }
.format-guide[open] .format-guide-summary::after { content: " ▴"; }
.format-guide-body { padding: 0 16px 16px; }
.format-guide-points {
  margin: 0 0 1rem;
  padding-left: 1.1rem;
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text-2);
}
.format-guide-points code,
.format-guide-table code {
  font-family: 'DM Mono', monospace;
  font-size: 0.78rem;
  color: var(--text-1);
}
.format-guide-table-wrap { overflow-x: auto; }
.format-guide-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  color: var(--text-2);
}
.format-guide-table th {
  text-align: left;
  padding: 8px 10px;
  color: var(--text-3);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.format-guide-table td {
  padding: 8px 10px;
  border-top: 1px solid var(--shadow-d);
  vertical-align: top;
}
.format-guide-req { text-align: center; color: var(--text-1); }
.format-guide-pill {
  display: inline-block;
  margin: 2px 4px 2px 0;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--blue-tint);
  color: var(--blue);
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
}
.format-guide-default,
.format-guide-note { display: block; color: var(--text-3); font-size: 0.74rem; }

/* Job detail */
.bulk-upload-summary { margin-bottom: 1rem; }
.bulk-upload-file {
  font-family: 'DM Mono', monospace;
  font-size: 0.9rem;
  color: var(--text-1);
}
.bulk-upload-meta {
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  color: var(--text-3);
  margin-top: 2px;
}
.bulk-upload-tiles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 0.9rem; }
.bulk-upload-tile {
  flex: 1 1 110px;
  padding: 12px;
  border-radius: var(--radius-sm);
  box-shadow: var(--neo-out-xs);
  text-align: center;
}
.bulk-upload-tile--bad .bulk-upload-tile-value { color: var(--red); }
.bulk-upload-tile-value {
  font-family: 'DM Mono', monospace;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--text-1);
}
.bulk-upload-tile-label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  margin-top: 2px;
}
.bulk-upload-warnings {
  margin: 0;
  padding-left: 1.1rem;
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--text-2);
}

/* Failed row table */
.bulk-error-table-wrap { overflow-x: auto; }
.bulk-error-table {
  border-collapse: collapse;
  font-family: 'Outfit', sans-serif;
  font-size: 0.76rem;
  color: var(--text-2);
  white-space: nowrap;
}
.bulk-error-table th {
  text-align: left;
  padding: 8px 10px;
  color: var(--text-3);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.bulk-error-table td {
  padding: 8px 10px;
  border-top: 1px solid var(--shadow-d);
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bulk-error-row {
  font-family: 'DM Mono', monospace;
  color: var(--text-1);
  font-weight: 500;
}
.bulk-error-msg { color: var(--red); white-space: normal; min-width: 220px; }

/* Charger status badges */
.charger-status--active         { background: rgba(42, 157, 92, 0.12);  color: #1a6b42; }
.charger-status--inactive       { background: rgba(122, 170, 191, 0.12); color: var(--text-3); }
.charger-status--decommissioned { background: rgba(217, 79, 106, 0.12); color: var(--red); }

/* Site detail page */
.site-name-link { color: inherit; text-decoration: none; }
.site-name-link:hover { color: var(--blue); }
.site-detail-back {
  display: inline-block;
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  color: var(--text-2);
  text-decoration: none;
  margin-bottom: 1rem;
}
.site-detail-back:hover { color: var(--blue); }
.site-detail-header {
  background: var(--bg);
  border-radius: var(--radius-md);
  box-shadow: var(--neo-out-sm);
  border: 1px solid rgba(255, 255, 255, 0.85);
  padding: 1rem 1.1rem;
  margin-bottom: 1.4rem;
}
.site-detail-title { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 1rem; color: var(--text-1); }
.site-detail-meta { font-family: 'DM Mono', monospace; font-size: 0.72rem; color: var(--text-3); margin: 4px 0 6px; }
.site-detail-uuid { font-family: 'DM Mono', monospace; font-size: 0.65rem; color: var(--text-3); word-break: break-all; }
.site-detail-section-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  font-size: 0.78rem;
  color: var(--text-2);
  margin-bottom: 0.8rem;
}

.btn-icon {
  background: transparent;
  border: 1px solid var(--shadow-d);
  border-radius: var(--radius-xs);
  padding: 5px 8px;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
  display: inline-flex;
  align-items: center;
}
.btn-icon:hover { border-color: var(--blue-pale); background: var(--blue-tint); }
.btn-icon--del:hover { border-color: var(--red); background: rgba(217,79,106,0.06); }

.users-empty-state {
  text-align: center;
  color: var(--text-3);
  font-family: 'Outfit', sans-serif;
  font-size: 0.88rem;
  padding: 2rem 0;
}

/* ── Admin form sheet (2-col row helper) ── */
.esc-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* ── Stream flash notice ── */
.flash-notice-stream:not(:empty) {
  display: block;
  margin: 0 0 0.8rem;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  background: rgba(27, 107, 170, 0.08);
  color: var(--blue);
  border: 1px solid rgba(27, 107, 170, 0.3);
}

/* ── Admin floating modal ── */
/* The card and the page share one ground, so the scrim is the only thing that
   separates a modal from what it covers. At 0.5 the card sat 2.7:1 above the
   scrim and read as part of the page; 0.62 puts it at 3.6:1. */
.admin-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(26, 58, 92, 0.62);
  backdrop-filter: blur(3px);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.admin-modal-overlay.open { display: flex; }

.admin-modal-card {
  background: var(--bg);
  border: 1px solid rgba(255, 255, 255, 0.90);
  border-radius: var(--radius-lg);
  padding: 2rem;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 12px 40px rgba(26, 58, 92, 0.22);
  animation: fadeUp 0.25s ease;
}

.admin-modal-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-1);
  margin: 0 0 4px;
}
.admin-modal-sub {
  font-family: 'Outfit', sans-serif;
  font-size: 0.84rem;
  color: var(--text-2);
  margin: 0 0 1.4rem;
}

.admin-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 1.2rem;
}

/* admin-tab2 used as <a> link */
a.admin-tab2 { text-decoration: none; }

/* ============================================================
   Admin — Department Cards
   ============================================================ */

.dept-list { display: flex; flex-direction: column; gap: 10px; }

.dept-card {
  background: var(--bg);
  border: 1px solid var(--shadow-d);
  border-radius: 14px;
  padding: 1rem 1.2rem;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--neo-out-xs);
  transition: border-color 0.2s;
}
.dept-card:hover { border-color: var(--blue-pale); }
.dept-card--inactive { opacity: 0.5; }

.dept-icon-box {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* Department color variants — icon box & employee badge */
.ic-green  { background: rgba(42,  157,  92, 0.12); color: #1a6b42; }
.ic-yellow { background: rgba(201, 138,   0, 0.12); color: var(--yellow); }
.ic-blue   { background: rgba(27,  107, 170, 0.10); color: var(--blue); }
.ic-red    { background: rgba(217,  79, 106, 0.12); color: var(--red); }

.dept-info { flex: 1; }

.dept-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-1);
}

.dept-count {
  font-family: 'Outfit', sans-serif;
  font-size: 0.73rem;
  color: var(--text-3);
  margin-top: 2px;
}

.dept-actions { display: flex; gap: 6px; }

/* ============================================================
   Admin — Employee Cards
   ============================================================ */

.emp-list { display: flex; flex-direction: column; gap: 8px; }

.emp-card {
  background: var(--bg);
  border: 1px solid var(--shadow-d);
  border-radius: 16px;
  padding: 1rem 1.2rem;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--neo-out-xs);
  transition: border-color 0.2s;
}
.emp-card:hover { border-color: var(--blue-pale); }
.emp-card--inactive { opacity: 0.5; }

/* Department badge shown on employee cards — reuses .ic-* color classes */
.dept-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 20px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ── System Config ── */
.config-section {
  background: var(--bg);
  box-shadow: var(--neo-out-sm);
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: var(--radius-md);
  padding: 1.2rem;
  margin-bottom: 1rem;
}
.config-section-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 1rem;
}
/* A field whose number drives something the reader cannot see from this page
   needs a line saying so — the label alone cannot carry it. */
.config-field-hint {
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  color: var(--text-2);
  line-height: 1.4;
  margin: 6px 0 0;
}
.config-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
  min-height: 32px;
}
.config-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg);
  box-shadow: var(--neo-out-xs);
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: 20px;
  padding: 5px 12px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  color: var(--text-1);
}
.config-tag-del {
  background: transparent;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0;
  line-height: 1;
  transition: color 0.2s;
}
.config-tag-del:hover { color: var(--red); }
.config-add-row {
  display: flex;
  gap: 8px;
}
.config-add-input {
  flex: 1;
  padding: 8px 12px;
  background: var(--bg);
  box-shadow: var(--neo-in-sm);
  border: none;
  border-radius: var(--radius-xs);
  color: var(--text-1);
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  outline: none;
}
.config-add-input:focus {
  box-shadow: var(--neo-in), 0 0 0 2px rgba(27,107,170,0.2);
}
.config-add-input::placeholder { color: var(--text-3); }
.btn-config-add {
  padding: 8px 14px;
  background: var(--blue);
  border: none;
  border-radius: var(--radius-xs);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--neo-out-xs);
}
.btn-config-add:hover { background: var(--blue-mid); }

/* ─────────────────────────── CM Taxonomy (Config page) ───────────────── */
.cm-taxonomy-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cm-group-card {
  background: var(--bg);
  border: 1px solid var(--shadow-d);
  border-radius: var(--radius-md);
  box-shadow: var(--neo-out-xs);
  overflow: hidden;
  transition: border-color 0.2s;
}
.cm-group-card:hover { border-color: var(--blue-pale); }

.cm-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.8rem 1rem;
  cursor: pointer;
  user-select: none;
}
.cm-group-chevron {
  display: inline-block;
  width: 16px;
  font-size: 0.7rem;
  color: var(--text-3);
  flex-shrink: 0;
  transition: transform 0.15s;
}
.cm-group-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text-1);
  flex: 1;
}
.cm-group-count {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  color: var(--text-3);
  background: var(--bg2);
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
}

.cm-group-body {
  border-top: 1px solid var(--shadow-d);
  padding: 0.5rem 1rem 0.8rem 2.2rem;
}
.cm-child-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}
.cm-child-row + .cm-child-row { border-top: 1px solid rgba(189,208,228,0.3); }
.cm-child-name {
  flex: 1;
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  color: var(--text-2);
}
.cm-child-edit-form {
  flex: 1;
  align-items: center;
  gap: 4px;
}
.cm-child-edit-form:not([hidden]) {
  display: flex;
}
.cm-child-edit-input {
  flex: 1;
  padding: 4px 8px;
  background: var(--bg2);
  border: 1px solid var(--blue-pale);
  border-radius: var(--radius-xs);
  color: var(--text-1);
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  outline: none;
  box-shadow: var(--neo-in-sm);
}
.cm-child-edit-input:focus { border-color: var(--blue); }

/* Groups the English + Bahasa Indonesia name inputs in a child add/edit row
   without disturbing the row's existing (non-flex) layout: inline-flex keeps
   the pair sitting next to the save/cancel buttons like a single field did. */
.cm-child-name-stack {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  vertical-align: middle;
}

/* Fixed EN/ID language tag inside each well of a name stack, so the pair
   stays tellable-apart once both fields hold a value and the Indonesian
   placeholder is gone. DM Mono because a locale code is machine data. */
.cm-lang-field {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.cm-lang-tag {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--text-2);
  pointer-events: none;
  user-select: none;
}
.cm-lang-field .cm-child-edit-input,
.cm-lang-field .cm-child-add-input { padding-left: 32px; }

.cm-child-empty {
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  color: var(--text-3);
  padding: 4px 0;
  font-style: italic;
}
.cm-child-add-toggle {
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--blue);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  margin-top: 8px;
}
.cm-child-add-toggle:hover { color: var(--blue-mid); }

.cm-child-add-row {
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--shadow-d);
}
.cm-child-add-row.is-open {
  display: flex;
}
.cm-child-add-input {
  flex: 1;
  padding: 6px 10px;
  background: var(--bg2);
  box-shadow: var(--neo-in-sm);
  border: none;
  border-radius: var(--radius-xs);
  color: var(--text-1);
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  outline: none;
}
.cm-child-add-input:focus {
  box-shadow: var(--neo-in-sm), 0 0 0 2px rgba(27,107,170,0.2);
}
.cm-child-add-input::placeholder { color: var(--text-3); }

/* small icon button variant */
.btn-icon--sm {
  width: 26px;
  height: 26px;
  font-size: 0.75rem;
  justify-content: center;
}
/* ─────────────────────────── Parts Inventory ─────────────────────────── */
.parts-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 1rem;
}
.parts-stat {
  background: var(--bg);
  box-shadow: var(--neo-out-xs);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-md);
  padding: 0.8rem 0.5rem;
  text-align: center;
}
.parts-stat-num {
  font-family: 'DM Mono', monospace;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--blue);
  line-height: 1.1;
}
.parts-stat-num--warn { color: var(--yellow); }
.parts-stat-label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 1.4px;
  color: var(--text-3);
  margin-top: 4px;
  text-transform: uppercase;
}

.parts-list { display: flex; flex-direction: column; gap: 8px; }

.part-inv-card {
  background: var(--bg);
  box-shadow: var(--neo-out-sm);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-md);
  padding: 0.9rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 12px;
}
.part-inv-card--low { box-shadow: var(--neo-out-sm), 0 0 0 2px var(--yellow); }
.part-inv-card--out { box-shadow: var(--neo-out-sm), 0 0 0 2px var(--red); }

.part-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--blue-tint);
  box-shadow: var(--neo-out-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.part-info { flex: 1; min-width: 0; }
.part-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text-1);
}
.part-meta {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  color: var(--text-3);
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.part-stock { text-align: right; flex-shrink: 0; }
.part-qty {
  font-family: 'DM Mono', monospace;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-1);
}
.part-qty--low { color: var(--yellow); }
.part-qty--out { color: var(--red); }
.part-unit {
  font-family: 'Outfit', sans-serif;
  font-size: 0.66rem;
  color: var(--text-3);
  margin-top: 2px;
}
.part-unit--out { color: var(--red); font-weight: 700; letter-spacing: 0.04em; }

.part-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* Contractor badge — shown next to name on contractor cards */
.contractor-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  background: rgba(122, 158, 148, 0.12);
  color: var(--text-3);
  border: 1px solid rgba(122, 158, 148, 0.2);
  margin-left: 6px;
}

/* Contract expiry warning — applied to dates within 30 days */
.expiry-warning {
  color: var(--yellow);
  font-weight: 600;
}

/* ── SLA configuration panel ── */
.sla-banner {
  background: var(--bg);
  box-shadow: var(--neo-in-sm);
  border-radius: var(--radius-md);
  padding: 0.85rem 1.1rem;
  margin-bottom: 1rem;
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  color: var(--text-2);
  line-height: 1.45;
}
.sla-banner strong { color: var(--text-1); font-weight: 600; }

.sla-list { display: flex; flex-direction: column; gap: 10px; }

.sla-card-frame { display: block; }

.sla-card {
  background: var(--bg);
  box-shadow: var(--neo-out-sm);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-md);
  padding: 0.9rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}
.sla-card--breach { box-shadow: var(--neo-out-sm), 0 0 0 1px rgba(217, 79, 106, 0.35); }

.sla-status {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sla-ok     { background: var(--blue-light); box-shadow: 0 0 0 3px rgba(91, 157, 212, 0.18); }
.sla-breach { background: var(--red);        box-shadow: 0 0 0 3px rgba(217, 79, 106, 0.22); animation: sla-pulse 1.4s infinite; }

@keyframes sla-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(217, 79, 106, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(217, 79, 106, 0);    }
  100% { box-shadow: 0 0 0 0   rgba(217, 79, 106, 0);    }
}

.sla-info { flex: 1; min-width: 0; }
.sla-station {
  font-family: 'DM Mono', monospace;
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--text-1);
  letter-spacing: 0.4px;
}
.sla-type {
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  color: var(--text-3);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.sla-breach-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(217, 79, 106, 0.12);
  color: var(--red);
  font-family: 'Outfit', sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.sla-down-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(201, 138, 0, 0.10);
  color: var(--yellow);
  font-family: 'Outfit', sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.sla-threshold {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.sla-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(91, 157, 212, 0.25);
  border-top-color: var(--blue);
  opacity: 0;
  transition: opacity 0.12s;
  animation: sla-spin 0.7s linear infinite;
}
.sla-spinner[data-loading] { opacity: 1; }

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

.sla-input {
  width: 64px;
  padding: 6px 8px;
  background: var(--bg);
  box-shadow: var(--neo-in-sm);
  border: none;
  border-radius: var(--radius-xs);
  font-family: 'DM Mono', monospace;
  font-size: 0.85rem;
  color: var(--text-1);
  text-align: center;
  outline: none;
  -moz-appearance: textfield;
}
.sla-input::-webkit-outer-spin-button,
.sla-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sla-input:focus { box-shadow: var(--neo-in-sm), 0 0 0 2px var(--blue); }

.sla-unit {
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  color: var(--text-3);
}

/* ─────────────────────────────────────── */
/* HR Leave Tracker                        */
/* ─────────────────────────────────────── */

/* Green token (introduced for leave tracker — Arctic-Frost-compatible cool green) */
:root {
  --green:      #2A9D5C;
  --green-deep: #1A6B42;
}

.leave-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.leave-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-1);
}

.btn-add-leave {
  background: var(--blue);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 8px 14px;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: var(--neo-out-xs);
}
.btn-add-leave:active { box-shadow: var(--neo-in-sm); }

.leave-list { display: flex; flex-direction: column; gap: 8px; }

.leave-card {
  background: var(--bg);
  border-radius: var(--radius-md);
  box-shadow: var(--neo-out-sm);
  border: 1px solid rgba(255, 255, 255, 0.7);
  padding: 0.9rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 12px;
}

.leave-info { flex: 1; min-width: 0; }
.leave-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text-1);
}
.leave-detail {
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  color: var(--text-3);
  margin-top: 3px;
  word-break: break-word;
}

.leave-type {
  padding: 4px 10px;
  border-radius: 20px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  white-space: nowrap;
}
.lt-annual   { background: rgba(42, 157, 92, 0.12);  color: var(--green-deep); }
.lt-sick     { background: rgba(217, 79, 106, 0.12); color: var(--red); }
.lt-personal { background: rgba(27, 107, 170, 0.12); color: var(--blue); }
.lt-unpaid   { background: rgba(122, 170, 191, 0.12); color: var(--text-3); }

.leave-days {
  font-family: 'DM Mono', monospace;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-3);
  flex-shrink: 0;
}

.btn-leave-edit,
.btn-leave-del {
  background: var(--bg);
  border: none;
  box-shadow: var(--neo-out-xs);
  border-radius: var(--radius-xs);
  padding: 6px 9px;
  font-size: 0.85rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: box-shadow 0.15s;
}
.btn-leave-edit:active,
.btn-leave-del:active { box-shadow: var(--neo-in-sm); }

/* button_to wraps the delete button in an inline form — strip wrapper margin */
.leave-card form { margin: 0; display: inline-flex; flex-shrink: 0; }

/* Delete-confirm bottom-sheet */
.checkout-sheet--confirm { padding-bottom: 1.5rem; }
.checkout-sheet--confirm form.button_to { margin: 0; }
.leave-del-warn {
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  color: var(--text-2);
  text-align: center;
  margin: 0.5rem 0 1.25rem;
  line-height: 1.45;
}
.escalation-btn--danger {
  width: 100%;
  background: var(--red);
  color: #fff;
}
.escalation-btn--danger:active { opacity: 0.88; }

/* Side-by-side date inputs in the leave modal */
.leave-date-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.leave-date-row .escalation-form-group { margin-bottom: 0.75rem; }

/* ── Toast (floating confirmation) ──
   Fixed and centred so it floats over the nav and the login card instead of
   taking a slot in the page flow. pointer-events stay off: the toast dismisses
   itself, and it must never swallow a click aimed at what is underneath. */
.toast {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translate(-50%, -14px);
  z-index: 9998;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 32px);
  padding: 12px 18px;
  background: var(--bg);
  box-shadow: var(--neo-out);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: var(--radius-md);
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-1);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.toast-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--blue-tint);
  box-shadow: var(--neo-in-sm);
  color: var(--blue);
  font-size: 0.75rem;
}

/* ── Success Overlay (check-in/out confirmation) ── */
.success-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.success-overlay.visible { opacity: 1; }

.success-overlay__icon {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--blue);
  background: var(--bg);
  box-shadow: var(--neo-out);
  border: 2px solid rgba(27, 107, 170, 0.25);
  animation: successPop 0.5s ease 0.1s both;
}

.success-overlay__label {
  margin-top: 1.25rem;
  font-family: 'Outfit', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-1);
  animation: fadeUp 0.6s ease 0.25s both;
}

@keyframes successPop {
  0%   { transform: scale(0.5); opacity: 0; }
  60%  { transform: scale(1.1); }
  100% { transform: scale(1);   opacity: 1; }
}

/* ── CM Before & After Photos Grid ─────────────────────────────────── */
.cm-photo-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 0.8rem;
}

.cm-photo-slot {
  background: var(--bg);
  border-radius: var(--radius-md);
  box-shadow: var(--neo-out-sm);
  padding: 10px;
  position: relative;
}

.cm-photo-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.cm-photo-slot .camera-box {
  margin-bottom: 8px;
}

/* Half-width boxes: trim the padding so the label still fits on one or two
   lines on a narrow phone. */
.cm-photo-pair .camera-box {
  padding: 0.75rem 0.4rem;
  min-height: 104px;
}

.cm-photo-remove-wrap {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
}

.cm-photo-remove {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: var(--red);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.cm-photo-remove:active {
  transform: scale(0.9);
}

.cm-photo-desc-input {
  font-size: 0.75rem;
  min-height: 40px;
}

/* ── Multi-select: selected chips + grouped dropdown ───────────────── */
/* TomSelect renders selected values as .item chips; left alone they carry the
   library's own blue and square corners, which reads as a different design
   system from the rest of the sheet. Every pick is shown, wrapping onto as many
   rows as it needs. */
.ts-wrapper.multi .ts-control {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
}

.ts-wrapper.multi .ts-control > .item {
  background: var(--blue-tint) !important;
  color: var(--blue) !important;
  border: none !important;
  border-radius: var(--radius-xs) !important;
  padding: 2px 8px !important;
  margin: 0 !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

/* The separator between one group's options and the next. */
.ts-dropdown .optgroup:not(:first-child) {
  border-top: 1px solid var(--blue-pale);
}

.ts-dropdown .optgroup-header {
  font-family: 'Outfit', sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
  padding: 9px 12px 4px;
  background: transparent;
}

.ts-dropdown .option {
  display: flex !important;
  align-items: center;
  gap: 9px;
  padding: 9px 12px !important;
}

.ts-dropdown .option .tomselect-checkbox {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--blue);
  flex-shrink: 0;
  /* The row already toggles the value; a live checkbox would double-fire. */
  pointer-events: none;
}

/* ── CM BSS Fault Diagnosis ────────────────────────────────────────── */
.cm-bss-fault-section {
  margin-bottom: 0.9rem;
}

.cm-bss-fault-section > .input-label {
  display: block;
  margin-bottom: 8px;
}

.cm-fault-card {
  background: var(--bg);
  box-shadow: var(--neo-out-sm);
  border-radius: var(--radius-md);
  margin-bottom: 10px;
  overflow: hidden;
}

.cm-fault-card-head {
  padding: 0.75rem 0.9rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.cm-fault-num {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-xs);
  background: var(--bg);
  box-shadow: var(--neo-out-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-3);
  flex-shrink: 0;
}

.cm-fault-num.has-type {
  color: var(--blue);
  box-shadow: var(--neo-in-sm), 0 0 0 1.5px var(--blue);
}

.cm-fault-label {
  flex: 1;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-1);
}

.cm-fault-remove {
  background: none;
  border: none;
  color: var(--red);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  padding: 4px 6px;
  border-radius: var(--radius-xs);
  cursor: pointer;
}

.cm-fault-remove:hover {
  background: rgba(217, 79, 106, 0.08);
}

.cm-fault-body {
  padding: 0 0.9rem 0.9rem;
}

.cm-fault-body .input-select {
  margin-bottom: 10px;
}

.cm-slot-label,
.cm-diag-label {
  font-size: 0.64rem;
  color: var(--text-3);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  font-weight: 600;
  margin: 8px 0 6px;
}

.cm-slot-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.cm-slot-chip {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-xs);
  background: var(--bg);
  box-shadow: var(--neo-out-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-3);
  cursor: pointer;
  transition: color 0.15s;
}

.cm-slot-chip.affected {
  color: var(--blue);
  box-shadow: var(--neo-in-sm), 0 0 0 1.5px var(--blue);
}

.cm-diag-sub {
  color: var(--text-3);
  font-size: 0.9em;
}

/* ── CM Spare Parts (code-field matches PM) ────────────────────────── */
.part-code-field {
  flex: 1;
  min-width: 0;
}

.part-name-field {
  flex: 1;
  min-width: 0;
  background: var(--bg2);
  color: var(--text-3);
  cursor: default;
}

/* ── Manager Modal Photo Description ───────────────────────────────── */
.worker-modal-photo-desc {
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  color: var(--text-2);
  margin-top: 4px;
  padding: 4px 6px;
  background: var(--bg2);
  border-radius: var(--radius-xs);
}

/* ── Watermark Overlay ──────────────────────────────────────────────── */
.watermark-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.watermark-container {
  position: absolute;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 80px 40px;
  padding: 80px;
  transform: rotate(-30deg);
}

.watermark-text {
  font-family: 'Outfit', sans-serif;
  font-size: 1.25rem;
  color: var(--text-1);
  opacity: 0.1;
  white-space: nowrap;
  user-select: none;
  text-align: center;
}


/* Reduced motion: collapse every animation and transition to near-zero. Kept
   near-zero rather than none so animationend/transitionend still fire for JS
   that waits on them (e.g. success_overlay_controller), and iteration count
   is forced to 1 so infinite pulse loops actually stop. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}



/* ───────────────── Admin → Parts, ledger-backed (#374) ─────────────────
   The Instrument Panel, applied to a 720-SKU stock list.

   Three corrections drive this block, all of them DESIGN.md's own:

   1. FLATTER. The system's Light-Touch Rule names --neo-out-xs the workhorse
      and calls puffy double-shadows on every card the AI-neomorphism tell. A
      list of 25 identical floating cards is that failure at scale, so rows sit
      flat on the one ground and are separated by --bg2 hairlines. Depth is
      spent once, on the panel that holds them.
   2. READABLE. Ink Faint (#7AAABF) is ~2.3:1 and the Faint-Ink Prohibition bars
      it from carrying information. Every label, unit, count and column header
      here is information, so none of them use it.
   3. NO SIDE-STRIPE. A colored left border as a status accent is explicitly on
      the Don't list. Status is carried where the system already puts it — a
      tinted badge, the same vocabulary as .status-task-badge — plus a hairline
      that warms toward the alarm hue. */

/* ── Sub-tabs. Activity is inert until #376; it reads as unavailable, not
   broken, and its badge still carries the live ledger count. ── */
.parts-subtabs {
  display: flex;
  gap: 4px;
  margin-bottom: 1.4rem;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--bg2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* The current sub-tab is a filled pill, not a 2px underline. An underline plus a
   blue label asks the eye to compare two weights of the same colour to work out
   where it is; a solid fill answers it before you look. This is the mockup's own
   answer, and white on --blue is 5.6:1. */
.parts-subtab {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border: none;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.parts-subtab:hover:not(.parts-subtab--active):not(.parts-subtab--disabled) {
  background: var(--bg2);
  color: var(--text-1);
}
.parts-subtab--active {
  background: var(--blue);
  color: var(--shadow-l);
  font-weight: 700;
}
.parts-subtab--disabled {
  color: var(--text-3);
  cursor: not-allowed;
}
.parts-subtab-badge {
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--bg2);
  color: var(--text-2);
}
/* On the filled pill the badge borrows the fill's own light rather than the page's. */
.parts-subtab--active .parts-subtab-badge {
  background: rgba(255, 255, 255, 0.22);
  color: var(--shadow-l);
}

/* ── KPI row. Catalogue-wide figures. One raise for the group, none on the
   individual cards: four equally-floating cards is the hero-metric template
   and reads as flat. Dividers do the separating. ── */
.parts-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--bg);
  box-shadow: var(--neo-out-xs);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-md);
  margin-bottom: 1.1rem;
  overflow: hidden;
}
.parts-kpi {
  padding: 1rem 1.1rem;
  border-left: 1px solid var(--bg2);
}
.parts-kpi:first-child { border-left: none; }
.parts-kpi-num {
  font-family: 'DM Mono', monospace;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.5px;
  color: var(--blue);
}
/* Semantic ink only where the figure is genuinely an alarm. A zero in the Out
   of Stock card should look different from 723 in Total SKUs. */
.parts-kpi--out.is-alarm  .parts-kpi-num { color: var(--red); }
.parts-kpi--low.is-alarm  .parts-kpi-num { color: var(--yellow); }
.parts-kpi--quar .parts-kpi-num { color: var(--text-1); }
.parts-kpi-label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-1);
  margin-top: 8px;
}
.parts-kpi-sub {
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  color: var(--text-2);
  margin-top: 3px;
  line-height: 1.35;
}

/* Text for assistive tech only. The negative-stock warning is an icon plus a
   colour, and neither reaches a screen reader on its own. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Icons. One authored set: 24px grid, 1.6 stroke, currentColor. ── */
.parts-icon {
  width: 1.05em;
  height: 1.05em;
  flex-shrink: 0;
}

/* ── Toolbar. The buttons are drawn but inert until their modals ship, each
   carrying a title naming the issue that owns it. ── */
.parts-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 1rem;
}
.parts-search-form {
  position: relative;
  flex: 1 1 260px;
  min-width: 0;
  display: flex;
  align-items: center;
}
.parts-search-icon {
  position: absolute;
  left: 13px;
  display: flex;
  color: var(--text-2);
  pointer-events: none;
}
.parts-search-icon .parts-icon { width: 15px; height: 15px; }
.parts-search-field {
  flex: 1;
  padding-left: 36px;
}

/* The committing action is a filled blue button, the way the mockup draws it.
   It used to be a raised surface with blue text, which put the toolbar's one
   real action at the same visual weight as the disabled placeholders beside it.
   A hairline carries the secondary; depth carries nothing here. */
.parts-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  border: 1px solid var(--shadow-d);
  border-radius: var(--radius-xs);
  background: var(--bg);
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}
.parts-btn:hover:not(:disabled) { border-color: var(--blue-mid); color: var(--blue); }
.parts-btn:active:not(:disabled) { background: var(--bg2); }
.parts-btn--primary {
  border-color: var(--blue);
  background: var(--blue);
  color: var(--shadow-l);
  font-weight: 700;
}
.parts-btn--primary:hover:not(:disabled) {
  border-color: var(--blue-mid);
  background: var(--blue-mid);
  color: var(--shadow-l);
}
/* Resets the fill too, or a disabled --primary keeps its blue and goes on
   looking like the one thing to click. The Inventory toolbar is four such
   placeholders, Add SKU among them. */
.parts-btn:disabled,
.parts-btn--primary:disabled {
  background: var(--bg);
  border-color: var(--bg2);
  color: var(--text-3);
  cursor: not-allowed;
}

/* Smaller than the toolbar's own buttons — the backfill queue's inline Save
   sits beside a price field, not a page-level action. */
.parts-btn--sm {
  padding: 6px 10px;
  font-size: 0.76rem;
  border-radius: var(--radius-xs);
}

/* a.parts-btn (the Export CSV download) needs the one thing an anchor brings
   with it that a button does not: the UA underline. Same one-line reset as
   a.btn-payroll-csv, the HR export beside it. */
a.parts-btn { text-decoration: none; }

/* label.parts-btn (the Bulk Photos trigger) needs nothing beyond the rules
   above — .parts-btn already sets display: inline-flex, align-items and
   cursor: pointer, and those apply to any element carrying the class. The
   wrapping form is the flex item now, so it carries the flex-shrink: 0 that
   .parts-btn itself already has. */
.parts-bulk-form { flex-shrink: 0; }

/* ── Bulk photo zip result (#378). A transient report, not a card — flat
   field, hairline border, no --neo-out* depth. Reuses .rc-rejected's visual
   weight for the unmatched block (red tint + border), since an unmatched
   filename is the one thing here the operator has to act on, same as a
   rejected bulk-paste line in the Receive modal. ── */
.parts-bulk-result {
  margin-bottom: 1rem;
  padding: 12px 14px;
  border: 1px solid var(--shadow-d);
  border-radius: var(--radius-sm);
  background: var(--bg);
}
.parts-bulk-matched {
  margin: 0;
  font-family: 'Outfit', sans-serif;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--blue);
}
.parts-bulk-error {
  margin: 0;
  font-family: 'Outfit', sans-serif;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--red);
}
.parts-bulk-unmatched {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: rgba(217, 79, 106, 0.10);
  border: 1px solid rgba(168, 44, 70, 0.35);
}
.parts-bulk-unmatched-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--red);
  margin-bottom: 6px;
}
.parts-bulk-unmatched-hint {
  margin: 0 0 6px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--text-2);
}
.parts-bulk-unmatched ul {
  margin: 0;
  padding-left: 16px;
  font-size: 0.76rem;
  line-height: 1.7;
}
.parts-bulk-unmatched-name {
  font-family: 'DM Mono', monospace;
  color: var(--text-1);
}

/* ── Category chips ── */
.parts-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 1rem;
}
.parts-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-xs);
  background: var(--bg);
  box-shadow: var(--neo-out-xs);
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  white-space: nowrap;
  transition: box-shadow 0.18s cubic-bezier(0.2, 0.8, 0.3, 1), color 0.18s;
}
.parts-chip:hover { box-shadow: var(--neo-out-sm); color: var(--text-1); }
/* Selected state is the system's own: blue-tint fill, Instrument Blue text,
   recessed — the same rhetoric as .status-task-badge and the selected filter. */
.parts-chip--active {
  background: var(--blue-tint);
  box-shadow: var(--neo-in-sm);
  color: var(--blue);
  font-weight: 700;
}
.parts-chip-n {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  color: var(--text-2);
}
.parts-chip--active .parts-chip-n { color: var(--blue); }

/* ── The list. One raised panel; rows are hairline-separated bands inside it,
   not 25 floating cards. Eight columns — the forecast pair (Burn/Cover)
   collapses below 1180px, leaving six. ── */
.parts-listhead,
.parts-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 108px 64px 78px 78px 128px 80px;
  align-items: center;
  gap: 14px;
}
.parts-listhead {
  padding: 0 1.1rem 9px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-2);
}
.parts-listhead > span:nth-child(3),
.parts-listhead > span:nth-child(4),
.parts-listhead > span:nth-child(5),
.parts-listhead > span:nth-child(6) { text-align: center; }
.parts-listhead > span:nth-child(8) { text-align: right; }

.parts-rows {
  background: var(--bg);
  box-shadow: var(--neo-out-xs);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.parts-row {
  padding: 0.8rem 1.1rem;
  border-top: 1px solid var(--bg2);
  transition: background 0.15s;
}
.parts-row:first-child { border-top: none; }
.parts-row:hover { background: var(--bg2); }

/* Status is carried by a faint wash across the whole row, not an edge. A 1px
   L-shaped rule was the half-measure that respecting "no colored side-stripe"
   forced; at that weight nobody sees it, and a stripe you have to hunt for is
   worse than no stripe. The ban exists to stop the slab-down-the-side cliché,
   not to mandate an invisible hairline.
   This is a deliberate, recorded exception to The One Ground Rule. The wash is
   kept at 9-11% so the cool ground still shows through as the same material —
   what changes is temperature, which the eye reads faster than luminance.
   Healthy and no-threshold rows stay on the bare ground, so trouble separates
   by presence rather than by everything being colored.
   Verified: every text pairing on these washes clears AA (name 9.4:1,
   material code 4.7:1, on-hand figure 5.5:1 / 4.7:1). */
.parts-row--out { background: rgba(217, 79, 106, 0.09); }
.parts-row--low { background: rgba(201, 138, 0, 0.11); }
.parts-row--out:hover { background: rgba(217, 79, 106, 0.16); }
.parts-row--low:hover { background: rgba(201, 138, 0, 0.19); }

/* The measurement itself carries the alarm — the strongest cue in the numeric
   column, and the one an operator is already looking at. Min is a threshold,
   not a measurement, so it stays neutral. */
/* Deepened semantic ink, not the raw alarm hues: #D94F6A is 3.59:1 on the
   ground and #C98A00 is 2.66:1 — both fail AA at this size. These read the
   same but measure 6.09:1 and 5.15:1. The bright hues stay for edges and
   fills, where contrast is not carrying the meaning. */
.parts-row--out .parts-figure--onhand .parts-figure-v { color: #A82C46; font-weight: 700; }
.parts-row--low .parts-figure--onhand .parts-figure-v { color: #8A5E00; font-weight: 700; }

/* A pale accent chip rather than a recessed grey well. Painted --bg with an
   inset shadow and a --text-3 glyph (2.3:1), a part's identity was wearing the
   vocabulary of a disabled control — recessed means "input" in this system, and
   nothing on the row is view-only. The glyph carries the chip here: --blue on
   --blue-tint is 4.7:1 where the grey was 2.3:1. Flat, so it does not read as
   something you press either. */
.parts-photo {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-xs);
  background: var(--blue-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--blue);
}
.parts-photo img { width: 100%; height: 100%; object-fit: cover; }
.parts-photo .parts-icon { width: 19px; height: 19px; }

/* Hierarchy in three steps: the name carries the row, the material code is
   supporting mono, the category a quiet tag. They previously sat at
   near-identical weight and tone, which is why the row had no focal point. */
.parts-ident { min-width: 0; }
.parts-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.parts-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.parts-code {
  font-family: 'DM Mono', monospace;
  font-size: 0.74rem;
  color: var(--text-2);
}
.parts-cat {
  font-family: 'Outfit', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-2);
}
.parts-cat::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-3);
  vertical-align: 2px;
  margin-right: 8px;
}
.parts-quar {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: var(--radius-xs);
  background: var(--blue-tint);
  color: var(--blue);
}

/* ── Figures. The unit rides beside the number instead of as a label under
   every row: the column header already names it, and 25 rows × 4 labels was a
   hundred lines of text carrying nothing. ── */
.parts-figure {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  min-width: 0;
}
.parts-figure-v {
  font-family: 'DM Mono', monospace;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text-1);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
/* Negative on-hand is a data-quality signal — a missing opening balance,
   unreceived stock, or opname drift. It is shown, never clamped. */
.parts-figure-v--neg   { color: #A82C46; font-weight: 700; }
/* The em-dash says "no threshold set" — that is information, so it does not
   get Ink Faint (2.28:1). Muted, not invisible. */
.parts-figure-v--muted { color: var(--text-2); }
/* Cover severity. Deepened semantic ink, the same reasoning as --neg above:
   the raw --red/--yellow read too light as text on this ground. */
.parts-figure-v--warn  { color: var(--yellow-deep); font-weight: 700; }
.parts-figure-v--crit  { color: var(--red-deep);    font-weight: 700; }
.parts-figure-warn {
  width: 14px;
  height: 14px;
  color: var(--red);
  align-self: center;
}
.parts-figure-u {
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  color: var(--text-2);
}

/* ── Status pills. The system's badge vocabulary — tinted fill, semantic ink —
   rather than four pale lozenges that all read the same at a glance. ── */
.parts-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 11px;
  border-radius: var(--radius-xs);
  font-family: 'Outfit', sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
  justify-self: start;
}
/* Opaque, not alpha: these pills now sit on a washed row, and a translucent
   fill would shift with whatever is behind it. */
.parts-pill--out {
  background: #F7DDE3;
  color: #A82C46;
}
.parts-pill--low {
  background: #F2E8CC;
  color: #7A5300;
}
.parts-pill--ok {
  background: var(--blue-tint);
  color: var(--blue);
}
.parts-pill--na {
  background: var(--bg2);
  color: var(--text-2);
}

/* ── Row actions. Both open the drawer (#392), so both are inert here. ── */
.parts-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.parts-icon-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.parts-icon-btn .parts-icon { width: 17px; height: 17px; }
.parts-icon-btn:hover:not(:disabled) { background: var(--blue-tint); color: var(--blue); }
.parts-icon-btn:disabled { color: var(--text-3); cursor: not-allowed; }

/* Focus is the ring, never a border shift — the system's focus signal. */
.parts-chip:focus-visible,
.parts-btn:focus-visible,
.parts-icon-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--blue);
}

/* The forecast pair (Burn/Cover) is the first thing to go on a narrower
   screen — Min is still readable off the status pill alone, so it survives
   down to 900px. Restores the original six-track template. */
@media (max-width: 1180px) {
  .hide-forecast { display: none; }
  .parts-listhead,
  .parts-row {
    grid-template-columns: 44px minmax(0, 1fr) 108px 64px 128px 80px;
  }
}

/* ── Narrow screens. Min goes first: it is the one figure a glancing operator
   can infer from the status pill. ── */
@media (max-width: 900px) {
  .parts-kpis { grid-template-columns: repeat(2, 1fr); }
  .parts-kpi:nth-child(3) { border-left: none; }
  .parts-kpi:nth-child(n + 3) { border-top: 1px solid var(--bg2); }
  .parts-listhead,
  .parts-row {
    grid-template-columns: 44px minmax(0, 1fr) 100px 122px 76px;
  }
  .parts-listhead > span:nth-child(4),
  .parts-figure--min { display: none; }
}

@media (max-width: 640px) {
  .parts-listhead { display: none; }
  /* Twelve chips wrapped to four lines pushed the list itself below the fold.
     One scrollable rail keeps the filter reachable and the stock visible. */
  .parts-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: -1px;
    padding-bottom: 2px;
  }
  .parts-chips::-webkit-scrollbar { display: none; }
  .parts-chip { flex-shrink: 0; }
  .parts-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
  }
  .parts-ident { flex: 1 1 150px; }
  .parts-figure { flex: 0 0 auto; }
  /* Wrapping gives Min its room back, so it returns below the 900px grid. */
  .parts-figure--min { display: flex; }
  .parts-pill { margin-left: auto; }
}

/* ─────────────────────────────────────── */
/* Parts — Activity (ledger stream)        */
/* ─────────────────────────────────────── */

/* Two hues the palette did not have. The mockup separates eight transaction
   types across six colours, and with only blue/red/green/amber to hand two
   pairs would collide — REVERSAL with RECEIPT, and the returns family with
   nothing at all. Both are desaturated into Arctic Frost's cool register rather
   than lifted from the mockup, which runs hot.

   Each ships as a fill/text pair, the same split --green/--green-deep already
   uses: the light value tints the pill, the deep one carries the letters. The
   light values fail AA as text (#6B5BD4 → 4.0:1, #1E8E8E → 3.1:1 on their own
   tints) and are never used for type. */
:root {
  --violet:      #6B5BD4;   /* the three RETURN_* types */
  --violet-deep: #4A3BAF;   /* 6.4:1 on the violet tint */
  --teal:        #1E8E8E;   /* receipts, and the unit price they carry */
  --teal-deep:   #106A6A;   /* 5.0:1 on the teal tint, 5.8:1 on the ground */

  /* The deep halves of --red and --yellow. Both were inline literals on the
     pill and qty rules; naming them puts the whole ledger palette in one place
     and stops the same hex being retyped per rule. */
  --red-deep:    #A82C46;   /* 6.1:1 on the ground, 5.3:1 on the red tint */
  --yellow-deep: #7A5300;   /* 5.4:1 on the amber tint */
}

/* The stream, and the column the queues land in. 320px is the narrowest the
   sidebar cards read at without their titles wrapping. */
.act-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  align-items: start;
}

/* Same recipe as .parts-rows: one raised surface with a frost edge, never a
   different background. */
.act-card {
  background: var(--bg);
  box-shadow: var(--neo-out-xs);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-md);
  padding: 1.1rem;
  min-width: 0;
}
.act-card-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 0.9rem;
}
.act-card-title .parts-icon { color: var(--blue); width: 17px; height: 17px; }
.act-card-sub {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
}

.act-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Flat, not raised and not recessed: these two carry no data yet. A raise would
   promise the stream's weight, and a well would claim to be something you fill.
   A hairline holds the space and says nothing more. */
.act-card--pending {
  box-shadow: none;
  border: 1px solid var(--bg2);
}
.act-card--pending .act-card-title { color: var(--text-2); }
.act-card--pending .act-card-title .parts-icon { color: var(--text-2); }
/* The backfill queue's own empty state reads identically, so it joins the
   selector list here rather than duplicating the block. */
.act-pending-note,
.act-card-empty {
  margin: 0;
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-2);
}

/* One queued line. Flat, not raised and not recessed — it sits inside
   .act-card, which is already raised, and a second raise inside a raised card
   is the depth-stacking the parts direction moved away from. */
.queue-item {
  background: var(--bg);
  border: 1px solid var(--bg2);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.8rem;
}
.queue-item + .queue-item { margin-top: 10px; }

.qi-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.qi-name {
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-1);
  min-width: 0;
}
/* DM Mono, this repo's mono face for machine values — the mockup's JetBrains
   Mono does not ship here. */
.qi-meta {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  color: var(--text-2);
}

.qi-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
/* Flat field, accent on focus — same recipe as .pd-minrow's, never the default
   recessed well .escalation-form-input otherwise carries. */
.qi-price {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--bg2);
  border: 1.5px solid transparent;
  box-shadow: none;
}
.qi-price:focus {
  background: var(--bg);
  border-color: var(--blue);
  box-shadow: none;
  outline: none;
}

/* The table is the only thing allowed to scroll sideways; the page never does. */
.act-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tx-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Outfit', sans-serif;
}
.tx-table th {
  text-align: left;
  padding: 0 10px 9px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-2);
  border-bottom: 1px solid var(--bg2);
  white-space: nowrap;
}
.tx-table td {
  padding: 0.7rem 10px;
  border-top: 1px solid var(--bg2);
  vertical-align: middle;
  transition: background 0.15s;
}
.tx-table tbody tr:first-child td { border-top: none; }
.tx-table tbody tr:hover td { background: var(--bg2); }
.tx-col-qty { text-align: center; }

/* A timestamp is machine data, so it is mono — and it is the audit trail's
   first column, so it is readable ink. It was --text-3 (2.3:1) in Outfit, which
   was wrong twice over. */
.tx-date {
  white-space: nowrap;
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem;
  color: var(--text-2);
}
/* The two halves stack rather than shrink on a phone; both stay readable ink. */
.tx-date-d,
.tx-date-t { white-space: nowrap; }
.tx-part-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-1);
}
.tx-part-code {
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem;
  color: var(--text-2);
}
.tx-actor {
  font-size: 0.8rem;
  color: var(--text-2);
  white-space: nowrap;
}

.tx-ref { min-width: 0; }
.tx-ref-id {
  font-family: 'DM Mono', monospace;
  font-size: 0.76rem;
  color: var(--text-2);
  word-break: break-word;
}
/* Reason and price hang under the reference because both describe it: the
   reason is why the adjustment happened, the price what the receipt line cost.
   Neither is metadata — the reason is the whole justification for a stock
   correction — so both carry readable ink rather than the faint step. */
.tx-ref-note {
  font-size: 0.75rem;
  color: var(--text-2);
}
.tx-ref-price {
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem;
  color: var(--teal-deep);
}

/* ── Type pills. Tinted fill, solid hue as text — the same rhetoric as the
   status pills and the leave-type badges. ── */
.tx-type {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
/* Reinforcement, never the distinguishing signal — the labels already differ. */
.tx-type-glyph { width: 12px; height: 12px; opacity: 0.85; }

/* Six fills for eight types, grouped by what the row did to on-hand:
     blue    opening balance
     teal    in from a supplier
     green   back into stock — a reversal or a cleared return
     red     out to a job
     amber   a correction
     violet  outside on-hand entirely — quarantined or written off
   Every pair is ≥4.7:1; the labels run at 0.68rem bold, so they are small text
   and owe the full AA ratio, not the large-text 3:1. */
/* Each pair carries a hairline in its own deep tone. On a near-white ground no
   soft tint can separate on its own — 12% red over #EEF4FA lands at 1.16:1, and
   even 50% only reaches 1.88:1 — so the fill alone left these reading as loose
   coloured words rather than badges. The edge is what makes a badge a badge.
   The tint is up from 0.12 to 0.18 for the same reason; the deep tone stays the
   letters, so every pair is still ≥5:1 as text. */
.tx-type--load {
  background: rgba(27, 107, 170, 0.16);
  border-color: rgba(27, 107, 170, 0.45);
  color: var(--blue);
}
.tx-type--consume {
  background: rgba(217, 79, 106, 0.18);
  border-color: rgba(168, 44, 70, 0.42);
  color: var(--red-deep);
}
.tx-type--reversal {
  background: rgba(42, 157, 92, 0.18);
  border-color: rgba(26, 107, 66, 0.42);
  color: var(--green-deep);
}
.tx-type--return {
  background: rgba(107, 91, 212, 0.18);
  border-color: rgba(74, 59, 175, 0.42);
  color: var(--violet-deep);
}
.tx-type--receipt {
  background: rgba(30, 142, 142, 0.18);
  border-color: rgba(16, 106, 106, 0.42);
  color: var(--teal-deep);
}
.tx-type--adjust {
  background: rgba(201, 138, 0, 0.20);
  border-color: rgba(122, 83, 0, 0.42);
  color: var(--yellow-deep);
}

/* Signed and coloured: an IN and an OUT of the same size must never read alike.
   A quantity is measured, so it is mono — which is also what stops it reading as
   one more word in an Outfit row. */
.tx-col-qty .tx-qty--in,
.tx-col-qty .tx-qty--out {
  font-family: 'DM Mono', monospace;
  font-size: 0.84rem;
  font-weight: 500;
}
.tx-qty--in  { color: var(--green-deep); font-weight: 700; }
.tx-qty--out { color: var(--red-deep);   font-weight: 700; }

/* The empty state is the only thing on screen when it fires, so it gets real
   room, readable ink, and a second line naming the way out. */
.tx-empty {
  padding: 2.6rem 10px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-1);
}
.tx-empty-hint {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-2);
}

/* The type dropdown, matching the search field it sits beside. */
/* Flat, like the modal's fields: the accent edge on focus is the signal, not a
   sunk well on every control in the toolbar. */
.parts-toolbar .search-field,
.parts-select {
  background: var(--bg2);
  border: 1.5px solid transparent;
  box-shadow: none;
}
.parts-toolbar .search-field:focus,
.parts-select:focus {
  background: var(--bg);
  border-color: var(--blue);
  box-shadow: none;
  outline: none;
}
.parts-select {
  flex-shrink: 0;
  padding: 10px 13px;
  border-radius: var(--radius-xs);
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  color: var(--text-1);
  cursor: pointer;
}
.parts-select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--blue);
}

/* Below the sidebar's own width there is no second column to have: the queues
   drop under the stream rather than squeezing it. */
@media (max-width: 900px) {
  .act-grid { grid-template-columns: minmax(0, 1fr); }
}

/* No column is dropped on a phone — Actor is half the point of an audit trail.
   The table keeps its six and scrolls instead. Two things make that honest:
   the timestamp stacks date over time so the widest column stops eating 40% of
   a 320px well, and the scroll well fades at its right edge so the columns past
   the fold announce themselves. Without the fade, Qty and Actor may as well not
   exist on a phone. */
@media (max-width: 640px) {
  .act-card { padding: 0.9rem; }
  .parts-select { flex: 1 1 100%; }

  .act-table-scroll {
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  }
  .tx-table { min-width: 620px; }
  .tx-date { white-space: normal; }
  .tx-date-d,
  .tx-date-t { display: block; }
  /* Cap the stacked timestamp so the width it gives up goes to Part, which
     otherwise shreds a SKU name across three lines. */
  .tx-table th:first-child,
  .tx-table td:first-child { width: 88px; }
  /* The fade must not eat the last column's own text, so the table carries a
     matching tail of padding to scroll into. */
  .tx-table th:last-child,
  .tx-table td:last-child { padding-right: 26px; }
}

/* ============================================================
   Admin — Parts / Receive Stock modal (#375)
   ============================================================
   Wider than the stock admin modal because a line is four controls across.
   Everything sits on var(--bg) and takes its depth from the shared neo
   shadows; the dashed buttons are the one exception, and they are dashed
   precisely to read as "optional, not yet filled". */

.rc-card { max-width: 560px; }

/* Fields here are flat, and the accent does the work — the mockup's own move.
   A recessed neomorphic well on every one of eight controls spends depth on
   nothing: when all of them are sunk, none of them reads as the one you are in.
   So rest is a plain fill with a transparent edge, and focus turns that edge
   blue. One clear signal instead of eight soft ones. */
.rc-card .escalation-form-input,
.rc-card .escalation-form-select,
.rc-line .ts-control {
  background: var(--bg2);
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  box-shadow: none;
}
.rc-card .escalation-form-input:focus,
.rc-card .escalation-form-select:focus,
.rc-line .ts-wrapper.focus .ts-control {
  background: var(--bg);
  border-color: var(--blue);
  box-shadow: none;
  outline: none;
}
/* Labels are structure, not decoration, so they carry readable ink. */
.rc-card .escalation-form-group > label { color: var(--text-2); }

/* Cancel was --text-3 (2.3:1). A way out of a form has to be readable. */
.rc-card .escalation-btn--ghost { color: var(--text-2); }
.rc-card .escalation-btn--ghost:hover { color: var(--text-1); }

.rc-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rc-title .parts-icon { color: var(--blue); }

/* The "— price optional" aside, inside an uppercased label. */
/* "— price optional" is the answer to a question the operator will otherwise
   ask, so it is information and takes readable ink. --text-3 is 2.3:1. */
.rc-label-hint {
  margin-left: 4px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--text-2);
}

.rc-mono { font-family: 'DM Mono', monospace; }

/* Optional affordances: attach a photo, add a line, open the bulk panel. */
/* The dashed edge was --blue-pale: 1.5:1 on the ground, which is a border you
   have to hunt for. --blue-mid clears the 3:1 non-text bar at 3.8:1, so the
   affordance is visible without becoming a second primary button. */
.rc-dashed {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 9px 12px;
  background: transparent;
  border: 1.5px dashed var(--blue-mid);
  border-radius: var(--radius-sm);
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--blue);
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}
.rc-dashed:hover { border-color: var(--blue); background: var(--blue-tint); }
.rc-dashed:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--blue);
}
/* A picked file confirms in place — the button is the only feedback there is. */
.rc-dashed--done {
  border-style: solid;
  border-color: var(--blue);
  color: var(--blue);
}

/* The real file inputs never show; their dashed buttons stand in for them. */
.rc-file {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ── Lines ── */
.rc-lines {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}
.rc-line {
  display: grid;
  grid-template-columns: 1fr 76px 110px 32px;
  gap: 6px;
  align-items: center;
}
/* Without this the picker refuses to shrink and pushes qty off the row. */
.rc-line .ts-wrapper { min-width: 0; }
.rc-line-num { text-align: right; }

/* TomSelect ships its own white-and-grey widget, which reads as a foreign
   control beside the recessed inputs either side of it. Restyle the parts it
   actually draws so the row looks like one field. The original <select> keeps
   submitting from behind the widget — that is the vendor CSS's job, and it is
   why this page loads tom-select.css at all. */
/* Fill, edge and focus come from the shared flat-field rule above; this only
   has to undo TomSelect's own typography and metrics. */
.rc-line .ts-control {
  min-height: 0;
  padding: 0.6rem 0.75rem;
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  color: var(--text-1);
}
.rc-line .ts-wrapper.single .ts-control:after { border-top-color: var(--text-2); }
/* A SKU name plus its material code overruns the track — clip rather than wrap,
   so a line stays one row tall however long the part is called. */
.rc-line .ts-control .item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rc-line .ts-dropdown {
  background: var(--bg);
  border: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--neo-out-sm);
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  color: var(--text-1);
}
.rc-line .ts-dropdown .option { padding: 8px 10px; }
.rc-line .ts-dropdown .active { background: var(--blue-tint); color: var(--text-1); }
.rc-line .ts-dropdown .dropdown-input {
  padding: 8px 10px;
  background: var(--bg);
  border: none;
  border-radius: var(--radius-xs);
  box-shadow: var(--neo-in-sm);
  font-family: 'Outfit', sans-serif;
  color: var(--text-1);
}

.rc-line-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  background: transparent;
  border: none;
  border-radius: var(--radius-xs);
  color: var(--red);
  cursor: pointer;
}
.rc-line-remove:hover { background: rgba(217, 79, 106, 0.12); }
.rc-line-remove:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--blue);
}

/* ── Bulk import ── */
.rc-bulk { margin-top: 8px; }
.rc-bulk[hidden] { display: none; }

.rc-bulk-text {
  min-height: 110px;
  resize: vertical;
  font-size: 0.78rem;
  line-height: 1.6;
}
.rc-bulk-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.rc-bulk-actions .rc-dashed { flex: 1; }
.rc-apply {
  flex: 1;
  justify-content: center;
}
/* This hint states the two rules of the paste format. It has to be readable. */
.rc-bulk-hint {
  margin: 6px 0 0;
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--text-2);
}

/* Rejected codes stay on screen until the next Apply. They are the one thing
   the operator has to act on, and a toast that fades takes them away. */
.rc-rejected {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  /* A tinted panel with a red edge, not a neomorphic well. This is the one
     thing in the modal reporting a problem, so it says so in colour rather than
     in depth — depth is the same signal every other field was using. */
  background: rgba(217, 79, 106, 0.10);
  border: 1px solid rgba(168, 44, 70, 0.35);
}
.rc-rejected[hidden] { display: none; }
.rc-rejected-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--red);
  margin-bottom: 6px;
}
.rc-rejected ul {
  margin: 0;
  padding-left: 16px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.76rem;
  line-height: 1.7;
  color: var(--text-2);
}
.rc-rejected-code {
  font-family: 'DM Mono', monospace;
  color: var(--text-1);
}

/* A line will not fit four across on a phone: the picker takes its own row and
   qty, price and remove share the one below. */
@media (max-width: 560px) {
  .rc-line {
    grid-template-columns: 1fr 1fr 32px;
    row-gap: 6px;
  }
  .rc-line > select,
  .rc-line .ts-wrapper { grid-column: 1 / -1; }
  .rc-bulk-actions { flex-wrap: wrap; }
}

/* ============================================================
   Admin — Parts / Detail drawer + Stock Adjustment (#392)
   ============================================================
   The drawer is a right-slide panel over the same ground as the page, not a
   second surface colour — depth (a left shadow) is what separates it, the
   same rhetoric as .admin-modal-card over its scrim. The adjustment modal
   reuses .admin-modal-overlay/.admin-modal-card wholesale, the way
   _receive_modal does. */

.part-drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(26, 58, 92, 0.5);
  backdrop-filter: blur(2px);
  /* Below .admin-modal-overlay's z-index (200): the Adjustment modal can be
     opened from inside the drawer and has to land on top of it, not behind. */
  z-index: 150;
}
.part-drawer-overlay.open { display: block; }

.part-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 151;
  width: min(600px, 96vw);
  height: 100vh;
  background: var(--bg);
  border-left: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: -20px 0 60px rgba(26, 58, 92, 0.22);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.32, 0.9, 0.35, 1);
}
.part-drawer.open { transform: translateX(0); }

.pd-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 1.2rem 1.4rem;
  border-bottom: 1px solid var(--bg2);
}
/* Wraps .pd-photo so the upload posts on change (#378) — flex-shrink: 0 is
   what .pd-photo itself carried before, and .pd-head's flex row needs it on
   whichever element sits directly inside it now. */
.pd-photo-form { flex-shrink: 0; }
.pd-photo {
  position: relative;
  flex-shrink: 0;
  width: 74px;
  height: 74px;
  border-radius: var(--radius-md);
  background: var(--blue-tint);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
}
.pd-photo img { width: 100%; height: 100%; object-fit: cover; }
.pd-photo .parts-icon { width: 28px; height: 28px; }
.pd-upload-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2px 0;
  background: rgba(26, 58, 92, 0.72);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-align: center;
}
/* Same visually-hidden treatment as .rc-file — the label (or, for the bulk
   form, a JS-driven change handler) is the real affordance. */
.pd-photo-input,
.parts-bulk-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.pd-ident { min-width: 0; flex: 1; }
.pd-name {
  font-family: 'Outfit', sans-serif;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pd-ident .parts-meta { margin-top: 5px; }

.pd-close {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: var(--bg2);
  color: var(--text-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.pd-close .parts-icon { width: 15px; height: 15px; }
.pd-close:hover { background: var(--red); color: #fff; }
.pd-close:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--blue); }

.pd-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.2rem 1.4rem 2rem;
}
.pd-section { margin-bottom: 1.5rem; }
.pd-section:last-child { margin-bottom: 0; }

.pd-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 0.7rem;
}
.pd-title--row { display: flex; align-items: center; gap: 10px; }

/* Flat tiles, not recessed wells: four of them side by side would otherwise
   spend the same well-shadow four times over for nothing but a number. */
.pd-statgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.pd-stat {
  background: var(--bg2);
  border-radius: var(--radius-sm);
  padding: 10px 6px;
  text-align: center;
}
.pd-stat-v {
  font-family: 'DM Mono', monospace;
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
}
.pd-stat-l {
  margin-top: 2px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-2);
}
/* Quarantine shares the ledger's own colour for the concept — the same
   --violet-deep the RETURN_* pills already carry, not a fresh hue. */
.pd-stat--quar .pd-stat-v { color: var(--violet-deep); }
/* Cover severity — same deepened tones as the row's own --warn/--crit. */
.pd-stat--warn .pd-stat-v { color: var(--yellow-deep); }
.pd-stat--crit .pd-stat-v { color: var(--red-deep); }

.pd-minrow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* Flat field, accent on focus — the parts direction, not a recessed well. */
.pd-minrow .escalation-form-input {
  width: 120px;
  flex: 0 0 auto;
  background: var(--bg2);
  border: 1.5px solid transparent;
  box-shadow: none;
}
.pd-minrow .escalation-form-input:focus {
  background: var(--bg);
  border-color: var(--blue);
  box-shadow: none;
  outline: none;
}

/* Wraps the Min form and the suggestion chip. button_to renders its own
   <form>, and nesting one inside .pd-minrow's form_with is invalid HTML —
   this is the sibling container that keeps both on one flowing line. */
.pd-minrow-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* Unwraps button_to's own <form> so the chip inside it behaves like any
   other inline flex item rather than a block-level wrapper. */
.pd-minrow-wrap > form.button_to { display: contents; }

/* The suggestion chip — pill radius, hairline border, blue accent on a pale
   tint, filled on hover. Sized like .parts-btn--primary so the row reads as
   one action group, not two mismatched controls. */
.parts-chip-suggest {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border: 1px solid var(--blue-pale);
  border-radius: 999px;
  background: var(--blue-tint);
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--blue);
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.parts-chip-suggest:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--shadow-l);
}
.parts-chip-suggest:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--blue);
}
.pd-hint {
  margin: 8px 0 0;
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--text-2);
}

.pd-model-tag {
  display: inline-block;
  background: var(--bg2);
  border-radius: var(--radius-xs);
  padding: 5px 11px;
  margin: 0 6px 6px 0;
  font-family: 'DM Mono', monospace;
  font-size: 0.74rem;
  color: var(--text-2);
}
.pd-empty-note {
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  color: var(--text-2);
}

/* Ghost/hairline — the one action in the history header, so it does not
   compete with Save above it for the filled-primary treatment. */
.pd-adjust-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--shadow-d);
  border-radius: var(--radius-xs);
  font-family: 'Outfit', sans-serif;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.pd-adjust-btn .parts-icon { width: 14px; height: 14px; }
.pd-adjust-btn:hover { border-color: var(--blue-mid); color: var(--blue); }
.pd-adjust-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--blue); }

.pd-footnote {
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  color: var(--text-2);
}
/* Amber, not --red: a partial average is a caveat, not an error, and --yellow
   itself fails AA as text on this ground (2.66:1) — --yellow-deep is the pair
   already carrying that fix elsewhere in the file. */
.pd-footnote-flag { color: var(--yellow-deep); }

@media (max-width: 480px) {
  .pd-statgrid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Stock Adjustment modal ── */
.adj-card { max-width: 440px; }
.adj-title { display: flex; align-items: center; gap: 8px; }
.adj-title .parts-icon { color: var(--yellow-deep); }

.adj-seg {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--bg2);
  border-radius: var(--radius-sm);
}
.adj-seg-btn {
  flex: 1;
  padding: 8px;
  border: none;
  border-radius: var(--radius-xs);
  background: transparent;
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.adj-seg-btn--in.on { background: var(--green); color: #fff; }
.adj-seg-btn--out.on { background: var(--red); color: #fff; }
.adj-seg-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--blue); }