/* ══════════════════════════════════════════════════════════════
   TMSA Compensation Platform  ·  Global Styles
   ══════════════════════════════════════════════════════════════ */

/* ─── Variables ────────────────────────────────────────────── */
:root {
  --navy:         #1E3A5F;
  --navy-dark:    #152a47;
  --navy-light:   #2d5282;
  --amber:        #F59E0B;
  --amber-light:  #FCD34D;
  --green:        #10B981;
  --green-light:  #D1FAE5;
  --red:          #EF4444;
  --red-light:    #FEE2E2;
  --yellow:       #F59E0B;
  --yellow-light: #FEF3C7;
  --blue-light:   #EFF6FF;

  --text:         #1a202c;
  --text-muted:   #64748b;
  --text-light:   #94a3b8;
  --border:       #e2e8f0;
  --bg:           #f8fafc;
  --white:        #ffffff;

  --sidebar-w:    240px;
  --radius:       8px;
  --radius-lg:    12px;
  --shadow:       0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:    0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg:    0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ─── Reset / Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scrollbar-gutter: stable; }

body {
  font-family: var(--font);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

/* ─── Typography ───────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 { font-weight: 600; line-height: 1.3; }
.text-muted  { color: var(--text-muted); }
.text-light  { color: var(--text-light); }
.text-sm     { font-size: 0.875rem; }
.text-xs     { font-size: 0.75rem; }
.text-success{ color: var(--green); }
.text-danger { color: var(--red); }
.font-mono   { font-family: 'Courier New', monospace; }
.font-semibold{ font-weight: 600; }

/* ─── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: all 0.15s ease;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none !important;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary  { background: var(--navy);  color: #fff; border-color: var(--navy); }
.btn-primary:hover:not(:disabled)  { background: var(--navy-dark); }

.btn-secondary{ background: #e2e8f0; color: var(--text); border-color: #e2e8f0; }
.btn-secondary:hover { background: #cbd5e1; }

.btn-success  { background: var(--green);  color: #fff; border-color: var(--green); }
.btn-success:hover  { background: #059669; }

.btn-warning  { background: var(--yellow); color: #fff; border-color: var(--yellow); }
.btn-warning:hover  { background: #D97706; }

.btn-danger   { background: var(--red);   color: #fff; border-color: var(--red); }
.btn-danger:hover   { background: #DC2626; }

.btn-outline  { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-outline:hover  { background: var(--blue-light); }

.btn-ghost    { background: transparent; color: var(--text-muted); border-color: transparent; }
.btn-ghost:hover    { background: #f1f5f9; }

.btn-sm       { padding: 0.35rem 0.75rem; font-size: 0.8rem; }
.btn-lg       { padding: 0.75rem 1.5rem; font-size: 1rem; }
.btn-full     { width: 100%; justify-content: center; }
.btn-link     { background: none; border: none; color: var(--navy); cursor: pointer; font-size: 0.875rem; padding: 0; }
.btn-link:hover { text-decoration: underline; }

.btn-icon {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: var(--radius);
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
  transition: 0.15s;
}
.btn-icon:hover { background: #f1f5f9; }
.btn-danger-icon { color: var(--red); }
.btn-danger-icon:hover { background: var(--red-light); }

/* ─── Forms ────────────────────────────────────────────────── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.form-group label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-family: var(--font);
  color: var(--text);
  background: var(--white);
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(30,58,95,0.1);
}
.form-group input::placeholder { color: var(--text-light); }
.form-textarea { resize: vertical; min-height: 80px; }

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.form-group-full { grid-column: 1 / -1; }

.form-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
  background: #f8fafc;
  border-left: 3px solid var(--amber);
  padding: 0.5rem 0.75rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-top: 0.5rem;
}

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

.input-prefix-group {
  display: flex;
  align-items: stretch;
}
.input-prefix {
  padding: 0.625rem 0.75rem;
  background: #f1f5f9;
  border: 1.5px solid var(--border);
  border-right: none;
  border-radius: var(--radius) 0 0 var(--radius);
  font-size: 0.875rem;
  color: var(--text-muted);
}
.input-prefix-group input {
  border-radius: 0 var(--radius) var(--radius) 0;
}

.input-copy-group {
  display: flex;
  gap: 0.5rem;
}
.input-copy-field {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.8rem;
  font-family: monospace;
  background: #f8fafc;
  color: var(--text-muted);
}

/* ─── Alerts ───────────────────────────────────────────────── */
.alert {
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  margin-bottom: 0;
  border: 1.5px solid transparent;
}
.alert-success { background: var(--green-light); color: #065f46; border-color: #6ee7b7; }
.alert-danger  { background: var(--red-light);   color: #991b1b; border-color: #fca5a5; }
.alert-warning { background: var(--yellow-light); color: #92400e; border-color: #fde68a; }
.alert-info    { background: var(--blue-light);   color: #1e40af; border-color: #93c5fd; }

/* Overlay toast stack — fixed position, never pushes layout */
.alert-stack {
  position: fixed;
  top: 1.25rem;
  right: 1.5rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 440px;
  width: calc(100% - 3rem);
  pointer-events: none;
}
.alert-stack .alert {
  pointer-events: auto;
  box-shadow: var(--shadow-lg);
  animation: alertSlideIn 0.3s ease;
}
@keyframes alertSlideIn {
  from { opacity: 0; transform: translateY(-0.4rem); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes alertFadeOut {
  from { opacity: 1; max-height: 120px; padding-top: 0.75rem; padding-bottom: 0.75rem; margin: 0; }
  to   { opacity: 0; max-height: 0;     padding-top: 0;        padding-bottom: 0;        margin: 0; border-width: 0; }
}
.alert-dismissing {
  animation: alertFadeOut 0.4s ease forwards;
  overflow: hidden;
}

/* Legacy aliases kept for safety */
.alert-floating { /* handled by .alert-stack */ }
.alert-top      { /* handled by .alert-stack */ }

/* ─── Cards ────────────────────────────────────────────────── */
.card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-bottom: 1.25rem;
}
.card-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-header h3 { font-size: 1rem; font-weight: 600; }
.card-body { padding: 1.25rem; }

/* ─── Tables ───────────────────────────────────────────────── */
.table-container {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: auto;
}
.no-shadow { box-shadow: none; border: none; border-radius: 0; }

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.data-table thead th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #f8fafc;
  border-bottom: 1.5px solid var(--border);
  white-space: nowrap;
}
.data-table tbody td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: none; }

/* Sortable column headers */
.data-table thead th.th-sortable { padding: 0; }
.th-sort-link {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.75rem 1rem;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
}
.th-sort-link:hover { color: var(--navy); background: #eef2f7; }
.data-table thead th.th-sorted { color: var(--navy); }
.th-sort-ind {
  font-size: 0.85em;
  line-height: 1;
  opacity: 0.35;
  transition: opacity 0.1s;
}
.th-sort-link:hover .th-sort-ind { opacity: 0.7; }
.th-sort-ind.is-active { opacity: 1; color: var(--navy); }

.table-row-clickable { cursor: pointer; transition: background 0.1s; }
.table-row-clickable:hover { background: #f8fafc; }
.table-link { color: var(--navy); font-weight: 500; }

.employee-name-cell {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.employee-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}
.name-main { font-weight: 500; }

.action-btns { display: flex; gap: 0.5rem; }

.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
}
.empty-icon { font-size: 2.5rem; margin-bottom: 0.5rem; }
.empty-state p { margin-bottom: 1rem; }
.empty-state-sm {
  text-align: center;
  padding: 2rem;
  color: var(--text-muted);
  font-size: 0.875rem;
}

/* ─── Status Badges ────────────────────────────────────────── */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.badge-lg { font-size: 0.875rem; padding: 0.375rem 0.875rem; }

.status-awaiting-submission   { background: #f1f5f9; color: #475569; }
.status-pending-hr-review     { background: #dbeafe; color: #1e40af; }
.status-action-required       { background: var(--yellow-light); color: #92400e; }
.status-finalized             { background: var(--green-light); color: #065f46; }

.doc-status-pending  { background: #f1f5f9; color: #475569; }
.doc-status-approved { background: var(--green-light); color: #065f46; }
.doc-status-rejected { background: var(--red-light); color: #991b1b; }
.doc-status-unregistered { background: #fef3c7; color: #92400e; }

/* ─── Stats Grid ───────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.stat-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: 1.25rem;
  box-shadow: var(--shadow);
}
.stat-number {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Smaller font for dollar amounts that can be long */
.stat-number-money {
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}
.stat-label { font-size: 0.8rem; color: var(--text-muted); font-weight: 500; }
/* Summary page stats: allow the cards to be wider for money values */
.summary-stats-grid {
  grid-template-columns: 120px repeat(3, 1fr);
}
.stat-total   .stat-number { color: var(--navy); }
.stat-waiting .stat-number { color: #475569; }
.stat-pending .stat-number { color: #1e40af; }
.stat-action  .stat-number { color: #92400e; }
.stat-done    .stat-number { color: var(--green); }

/* ─── Filters ──────────────────────────────────────────────── */
.filter-bar { margin-bottom: 1.25rem; }
.filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}
.filter-input, .filter-select {
  padding: 0.5rem 0.75rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-family: var(--font);
  background: var(--white);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
}
.filter-input:focus, .filter-select:focus { border-color: var(--navy); }
.filter-input { min-width: 200px; }
.filter-select { min-width: 160px; }
.filter-input-sm { width: 120px; font-size: 0.8rem; padding: 0.35rem 0.5rem; }
.filter-select-sm { font-size: 0.8rem; padding: 0.35rem 0.5rem; }

/* ─── Modals ───────────────────────────────────────────────── */
.modal { display: none; position: fixed; inset: 0; z-index: 1000; }
.modal.open { display: block; }
.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
}
.modal-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 90%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-header {
  padding: 1.25rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-header h3 { font-size: 1.125rem; }
.modal-form { padding: 1.25rem; }
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  margin-top: 1rem;
}
.missing-docs-list {
  margin: 0.75rem 0 0;
  padding-left: 1.25rem;
  font-size: 0.875rem;
  color: var(--text);
  line-height: 1.7;
}
.missing-docs-list li { margin-bottom: 0.25rem; }

/* ─── Tab navigation ───────────────────────────────────────── */
.tab-nav {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 1.5rem;
}
.tab-btn {
  padding: 0.75rem 1.25rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: var(--font);
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.15s;
}
.tab-btn:hover { color: var(--navy); }
.tab-btn.active { color: var(--navy); border-bottom-color: var(--navy); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ─── Admin Layout ─────────────────────────────────────────── */
.admin-body {
  background: var(--bg);
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: var(--sidebar-w);
  background: var(--navy);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 100;
  overflow-y: auto;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.sidebar-brand-name { font-size: 1rem; font-weight: 700; display: block; }
.sidebar-brand-sub  { font-size: 0.7rem; opacity: 0.6; display: block; }

.sidebar-nav { flex: 1; padding: 1rem 0; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  color: rgba(255,255,255,0.8);
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.15s;
  border-radius: 0;
  text-decoration: none !important;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  font-family: var(--font);
}
.nav-item:hover, .nav-item.active {
  background: rgba(255,255,255,0.12);
  color: #fff;
}
.nav-icon { font-size: 1.1rem; width: 1.5rem; text-align: center; }

.sidebar-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 0.75rem 0;
}
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
}
.sidebar-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--amber);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 700;
  flex-shrink: 0;
}
.sidebar-user-info { flex: 1; min-width: 0; }
.sidebar-user-name { font-size: 0.8rem; font-weight: 600; color: #fff; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-role { font-size: 0.7rem; color: rgba(255,255,255,0.6); display: block; }

.admin-main {
  margin-left: var(--sidebar-w);
  flex: 1;
  padding: 2rem;
  max-width: calc(100vw - var(--sidebar-w));
}

/* ─── Page header ──────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.page-title { font-size: 1.5rem; color: var(--navy); margin-bottom: 0.25rem; }
.page-subtitle { font-size: 0.875rem; color: var(--text-muted); }
.page-header-back { display: flex; align-items: flex-start; gap: 0.75rem; }
.page-header-actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }

/* ─── Form actions ─────────────────────────────────────────── */
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1.25rem 0;
}

/* ─── Salary breakdown ─────────────────────────────────────── */
.salary-breakdown-grid { max-width: 480px; }
.breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  font-size: 0.875rem;
}
.breakdown-label { color: var(--text-muted); }
.breakdown-value { font-weight: 500; }
.breakdown-highlight .breakdown-label,
.breakdown-highlight .breakdown-value { font-weight: 700; color: var(--navy); }
.breakdown-divider { border-top: 1px solid var(--border); margin: 0.5rem 0; }
.breakdown-total .breakdown-label,
.breakdown-total .breakdown-value { font-size: 1.125rem; font-weight: 700; color: var(--navy); }

.final-salary-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--green-light);
  border: 1.5px solid #6ee7b7;
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-top: 1rem;
  font-size: 0.875rem;
  color: #065f46;
}
.final-salary-display strong { font-size: 1.25rem; font-weight: 700; }

/* ─── Info list ────────────────────────────────────────────── */
.info-list { display: flex; flex-direction: column; gap: 0.625rem; }
.info-item { display: flex; justify-content: space-between; font-size: 0.875rem; }
.info-label { color: var(--text-muted); }
.info-value { font-weight: 500; }

/* ─── Audit timeline ───────────────────────────────────────── */
.audit-timeline { display: flex; flex-direction: column; gap: 0; }
.audit-entry {
  display: flex;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
}
.audit-entry:last-child { border-bottom: none; }
.audit-meta {
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.audit-time { font-size: 0.75rem; color: var(--text-muted); }
.audit-actor {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
}
.actor-admin    { background: #dbeafe; color: #1e40af; }
.actor-employee { background: var(--green-light); color: #065f46; }
.audit-body { flex: 1; }
.audit-action { font-size: 0.875rem; font-weight: 600; margin-bottom: 0.25rem; }
.audit-description { font-size: 0.8rem; color: var(--text-muted); }
.audit-diff { margin-top: 0.5rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.diff-section { background: #f8fafc; border-radius: var(--radius); padding: 0.5rem; font-size: 0.75rem; flex: 1; min-width: 200px; }
.diff-section pre { white-space: pre-wrap; word-break: break-all; margin-top: 0.25rem; }
.diff-old { border-left: 3px solid var(--red); }
.diff-new { border-left: 3px solid var(--green); }

/* ─── Document list ────────────────────────────────────────── */
.doc-list { display: flex; flex-direction: column; gap: 0.75rem; }
.doc-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0.875rem 1rem;
  flex-wrap: wrap;
}
.doc-card-icon { font-size: 1.75rem; flex-shrink: 0; }
.doc-card-info { flex: 1; min-width: 0; }
.doc-card-type  { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); display: block; }
.doc-card-name  { font-size: 0.875rem; font-weight: 500; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-card-date  { font-size: 0.75rem; color: var(--text-muted); display: block; }
.doc-card-status { flex-shrink: 0; }
.doc-card-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* ─── Actions grid ─────────────────────────────────────────── */
.actions-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.25rem; }

/* ─── Summary page ─────────────────────────────────────────── */
.summary-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.25rem; }

.bar-chart { display: flex; flex-direction: column; gap: 0.625rem; }
.bar-row { display: flex; align-items: center; gap: 0.75rem; font-size: 0.8rem; }
.bar-label { width: 180px; flex-shrink: 0; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track { flex: 1; height: 8px; background: #e2e8f0; border-radius: 9999px; overflow: hidden; }
.bar-fill  { height: 100%; background: var(--navy); border-radius: 9999px; transition: width 0.6s ease; }
.bar-value { width: 90px; text-align: right; font-weight: 600; font-size: 0.8rem; }

.donut-legend { display: flex; flex-direction: column; gap: 0.75rem; padding: 0.5rem 0; }
.donut-legend-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}
.donut-legend-item:last-child { border-bottom: none; }
.donut-count { font-size: 1.25rem; font-weight: 700; color: var(--navy); }

/* ─── AUTH PAGES ───────────────────────────────────────────── */
.auth-body {
  min-height: 100vh;
  background: linear-gradient(135deg, #f0f4f8 0%, #e8eef5 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.auth-container {
  width: 100%;
  max-width: 420px;
}

.auth-header {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 1.5rem;
}
.auth-logo { flex-shrink: 0; }
.auth-title { font-size: 1.25rem; font-weight: 700; color: var(--navy); }
.auth-subtitle { font-size: 0.8rem; color: var(--text-muted); }

.auth-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
}

.auth-welcome {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem;
  background: #f0f4f8;
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
}
.auth-welcome-icon { font-size: 1.75rem; }
.auth-welcome-label { font-size: 0.75rem; color: var(--text-muted); }
.auth-welcome-name  { font-size: 1rem; font-weight: 700; color: var(--navy); }
.auth-welcome-email { font-size: 0.8rem; color: var(--text-muted); }

.auth-section-title { margin-bottom: 1.5rem; }
.auth-section-title h2 { font-size: 1.125rem; color: var(--navy); margin-bottom: 0.25rem; }
.auth-section-title p  { font-size: 0.8rem; color: var(--text-muted); }

.auth-form { display: flex; flex-direction: column; gap: 1rem; }

.auth-forgot { text-align: center; margin-top: 1rem; }

.auth-footer {
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-light);
  margin-top: 1.5rem;
}

.auth-demo-info {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--text-muted);
  background: #f8fafc;
  border-radius: var(--radius);
  padding: 0.75rem;
}
.auth-demo-info p { margin-bottom: 0.25rem; }
.auth-demo-info code {
  background: #e2e8f0;
  padding: 0.1rem 0.3rem;
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.8rem;
}

/* ─── Password toggle ──────────────────────────────────────── */
.pw-toggle {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  opacity: 0.5;
}
.pw-toggle:hover { opacity: 1; }

/* ─── EMPLOYEE FORM PAGE ───────────────────────────────────── */
.form-body {
  background: var(--bg);
  min-height: 100vh;
}

.form-header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: var(--shadow);
}
.form-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.5rem;
}
.form-logo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--navy);
}
.form-header-user {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* Progress steps */
.form-progress { padding: 0.625rem 1.5rem; border-top: 1px solid var(--border); background: #f8fafc; }
.progress-steps {
  display: flex;
  gap: 0;
  overflow-x: auto;
}
.progress-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: 0.15s;
}
.progress-step.active { color: var(--navy); border-bottom-color: var(--navy); }
.progress-step.complete { color: var(--green); }
.step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
  transition: 0.15s;
}
.progress-step.active .step-num { background: var(--navy); color: #fff; }
.progress-step.complete .step-num { background: var(--green); color: #fff; }

.form-main {
  max-width: 760px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.form-section { display: none; }
.form-section.active { display: block; }

.section-header { margin-bottom: 1.5rem; }
.section-header h2 { font-size: 1.25rem; color: var(--navy); margin-bottom: 0.375rem; }
.section-header p  { font-size: 0.875rem; color: var(--text-muted); }

.section-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

/* Experience entries */
.experience-entry, .cert-entry {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 0.875rem;
}
.entry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.875rem;
}
.entry-header h4 { font-size: 0.875rem; color: var(--navy); font-weight: 600; }

/* Degree options */
.degree-options { display: flex; flex-direction: column; gap: 0.5rem; }
.degree-option {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: 0.15s;
  background: var(--white);
}
.degree-option:hover { border-color: var(--navy); background: var(--blue-light); }
.degree-option.selected { border-color: var(--navy); background: var(--blue-light); }
.degree-option input[type="radio"] { flex-shrink: 0; accent-color: var(--navy); }
.degree-option-content { display: flex; flex-direction: column; gap: 0.125rem; }
.degree-name { font-size: 0.875rem; font-weight: 600; color: var(--text); }
.degree-desc { font-size: 0.75rem; color: var(--text-muted); }

/* Upload area */
.upload-area {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: 0.15s;
  background: #f8fafc;
}
.upload-area:hover { border-color: var(--navy); background: var(--blue-light); }
.upload-placeholder { display: flex; flex-direction: column; gap: 0.375rem; align-items: center; }
.upload-icon { font-size: 2rem; }
.upload-hint { font-size: 0.75rem; color: var(--text-light); }

/* Doc upload grid */
.doc-upload-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}
.doc-upload-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
}
.doc-icon { font-size: 1.75rem; }
.doc-upload-card h4 { font-size: 0.875rem; font-weight: 600; }
.doc-upload-card p { font-size: 0.75rem; color: var(--text-muted); }
.file-label { cursor: pointer; }
.file-label input[type="file"] { display: none; }

/* Review summary */
.review-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  background: #f8fafc;
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  border: 1px solid var(--border);
}
.review-item {}
.review-label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.review-value { font-size: 0.875rem; font-weight: 500; margin-top: 0.125rem; }

/* Salary preview */
.salary-preview-card {
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 2rem;
  text-align: center;
  margin-bottom: 1.5rem;
}
.salary-preview-loading { display: flex; align-items: center; justify-content: center; gap: 0.75rem; }
.salary-preview-label { font-size: 0.875rem; opacity: 0.8; margin-bottom: 0.5rem; }
.salary-preview-amount { font-size: 2.5rem; font-weight: 700; margin-bottom: 0.5rem; }
.salary-preview-note { font-size: 0.8rem; opacity: 0.7; }

/* Submit confirm */
.submit-confirm { margin-bottom: 1.5rem; }
.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.875rem;
  cursor: pointer;
}
.checkbox-label input { margin-top: 0.1rem; flex-shrink: 0; accent-color: var(--navy); }

/* ─── EMPLOYEE STATUS PAGE ─────────────────────────────────── */
.status-main { max-width: 640px; margin: 0 auto; padding: 2rem 1.5rem; }

.status-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  text-align: center;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  margin-bottom: 1.5rem;
}
.status-icon { font-size: 3.5rem; display: block; margin-bottom: 1rem; }
.status-card h2 { font-size: 1.5rem; color: var(--navy); margin-bottom: 0.75rem; }
.status-card p { color: var(--text-muted); margin-bottom: 1.5rem; font-size: 0.9375rem; }

.salary-estimate-box {
  background: #f0f4f8;
  border-radius: var(--radius);
  padding: 1.25rem;
  margin: 1.25rem 0;
  text-align: center;
}
.salary-est-label  { font-size: 0.8rem; color: var(--text-muted); }
.salary-est-amount { font-size: 2rem; font-weight: 700; color: var(--navy); }
.salary-est-note   { font-size: 0.75rem; color: var(--text-light); }

.salary-final-box {
  background: var(--green-light);
  border: 1.5px solid #6ee7b7;
  border-radius: var(--radius);
  padding: 1.5rem;
  margin: 1.25rem 0;
}
.salary-final-label  { font-size: 0.8rem; color: #065f46; margin-bottom: 0.25rem; }
.salary-final-amount { font-size: 2.5rem; font-weight: 800; color: #065f46; }
.salary-final-note   { font-size: 0.75rem; color: #047857; margin-top: 0.25rem; }

.action-note {
  background: var(--yellow-light);
  border: 1.5px solid #fde68a;
  border-radius: var(--radius);
  padding: 1rem;
  text-align: left;
  margin: 1rem 0 1.5rem;
  font-size: 0.875rem;
}

/* Timeline */
.timeline { text-align: left; margin: 1.5rem 0; }
.timeline-item {
  display: flex;
  gap: 1rem;
  padding-bottom: 1.25rem;
  position: relative;
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 22px;
  bottom: 0;
  width: 2px;
  background: #e2e8f0;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item:last-child::before { display: none; }
.tl-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #e2e8f0;
  background: var(--white);
  flex-shrink: 0;
  margin-top: 0.1rem;
  z-index: 1;
}
.timeline-item.done .tl-dot { background: var(--green); border-color: var(--green); }
.timeline-item.active .tl-dot { background: var(--amber); border-color: var(--amber); }
.tl-content { flex: 1; }
.tl-content strong { font-size: 0.875rem; display: block; }
.tl-content span { font-size: 0.8rem; color: var(--text-muted); }

.submitted-summary {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}
.submitted-summary h3 { font-size: 1rem; margin-bottom: 1rem; color: var(--navy); }
.summary-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.summary-item { display: flex; flex-direction: column; gap: 0.125rem; }
.summary-label { font-size: 0.75rem; color: var(--text-muted); }
.summary-value { font-size: 0.875rem; font-weight: 500; }

/* ─── Spinner ──────────────────────────────────────────────── */
.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Toast ────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background: var(--navy);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  box-shadow: var(--shadow-lg);
  z-index: 9999;
  animation: slideIn 0.3s ease;
}
@keyframes slideIn { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: translateY(0); } }

/* ─── Auth identity card ────────────────────────────────────── */
.auth-identity {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem;
  background: #f0f4f8;
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
}
.auth-identity-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  flex-shrink: 0;
}
.auth-identity-name  { font-size: 1rem; font-weight: 700; color: var(--navy); }
.auth-identity-email { font-size: 0.8125rem; color: var(--text-muted); font-family: monospace; }

.form-error { color: var(--red); font-size: 0.8rem; margin-top: 0.25rem; }

/* ─── Password input wrapper ────────────────────────────────── */
.pw-input-wrap {
  position: relative;
}
.pw-input-wrap input {
  padding-right: 2.5rem;
}
.pw-toggle-btn {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.4;
  padding: 0.25rem;
  display: flex;
  align-items: center;
  transition: opacity 0.15s;
}
.pw-toggle-btn:hover { opacity: 1; }

/* ─── Three-column form grid ────────────────────────────────── */
.form-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.form-grid-3 .form-group-full { grid-column: 1 / -1; }

/* ─── Degree entry ──────────────────────────────────────────── */
.degree-entry {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 0.875rem;
}

/* ─── Doc upload improvements ────────────────────────────────── */
.upload-label {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.upload-trigger { cursor: pointer; pointer-events: auto; }
.file-input-hidden { display: none; }
.upload-filename {
  font-size: 0.8rem;
  color: var(--text-muted);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doc-upload-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color 0.15s;
}
.doc-upload-card.upload-success {
  border-color: var(--green);
  background: #f0fdf4;
}
.doc-card-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.doc-upload-info h4 { font-size: 0.875rem; font-weight: 600; margin-bottom: 0.125rem; }
.doc-upload-info p  { font-size: 0.75rem; color: var(--text-muted); }

/* ─── Privacy card ──────────────────────────────────────────── */
.privacy-card {
  background: #f8fafc;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin: 1.5rem 0;
}
.privacy-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.875rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}
.privacy-body {
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 1rem;
}
.privacy-body ul { padding-left: 1.25rem; }
.privacy-body li { margin-bottom: 0.375rem; }
.privacy-checkbox { align-items: flex-start; font-size: 0.875rem; font-weight: 500; color: var(--text); }
.privacy-checkbox input { flex-shrink: 0; margin-top: 0.15rem; accent-color: var(--navy); }

/* ─── Salary reveal ─────────────────────────────────────────── */
.salary-reveal-wrapper { margin: 1.5rem 0; }
.salary-reveal-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.5rem;
  background: #f8fafc;
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 0.875rem;
}

.spinner-navy {
  width: 22px;
  height: 22px;
  border: 2.5px solid #e2e8f0;
  border-top-color: var(--navy);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}

/* ─── Status icon wrappers ──────────────────────────────────── */
.status-icon-wrap {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
}
.status-waiting { background: #f1f5f9; color: #475569; }
.status-pending  { background: #dbeafe; color: #1e40af; }
.status-action   { background: var(--yellow-light); color: #92400e; }
.status-done     { background: var(--green-light); color: #065f46; }

/* ─── Inline document viewer ─────────────────────────────────── */
.modal-box-xl {
  max-width: 960px;
  width: 92vw;
  height: 92vh;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ─── Document viewer ────────────────────────────────────────── */
.doc-viewer-header { gap: 1rem; flex-shrink: 0; }
.doc-viewer-title {
  font-size: 1.05rem;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-viewer-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.doc-viewer-actions .btn svg { vertical-align: -2px; margin-right: 0.25rem; }

.doc-viewer-body {
  flex: 1;
  min-height: 0;
  background: #f1f5f9;
  position: relative;
  overflow: hidden;
}

/* Prev / next navigation arrows */
.doc-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}
.doc-nav-arrow:hover { background: rgba(15, 23, 42, 0.78); }
.doc-nav-prev { left: 14px; }
.doc-nav-next { right: 14px; }
.doc-nav-arrow:disabled { opacity: 0.25; cursor: default; pointer-events: none; }

/* Footer with position indicator + review actions */
.doc-viewer-footer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  padding: 0.625rem 1rem;
  border-top: 1px solid var(--border);
  background: #fff;
}
.doc-viewer-index { font-size: 0.8125rem; color: var(--text-muted); font-weight: 500; }
.doc-viewer-review { margin-left: auto; display: flex; align-items: center; gap: 0.6rem; }
.doc-viewer-readonly { margin-left: auto; font-size: 0.8125rem; color: var(--text-muted); font-style: italic; }
.doc-viewer-pane { width: 100%; height: 100%; }
#doc-viewer-frame { display: block; border: 0; background: #fff; }

/* Image */
.doc-viewer-image-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  overflow: auto;
}
#doc-viewer-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 2px 14px rgba(15, 23, 42, 0.18);
}

/* Word (.docx) rendered as a paper sheet */
.doc-viewer-docx { overflow: auto; padding: 2rem 1rem; }
.doc-viewer-docx .docx-paper {
  max-width: 760px;
  margin: 0 auto;
  background: #fff;
  padding: 3rem 3.25rem;
  box-shadow: 0 2px 18px rgba(15, 23, 42, 0.12);
  border-radius: 2px;
  color: #1e293b;
  font-size: 0.95rem;
  line-height: 1.65;
  word-wrap: break-word;
}
.doc-viewer-docx .docx-paper > :first-child { margin-top: 0; }
.doc-viewer-docx .docx-paper h1,
.doc-viewer-docx .docx-paper h2,
.doc-viewer-docx .docx-paper h3 { margin: 1.4em 0 0.5em; line-height: 1.3; font-weight: 700; }
.doc-viewer-docx .docx-paper h1 { font-size: 1.5rem; }
.doc-viewer-docx .docx-paper h2 { font-size: 1.25rem; }
.doc-viewer-docx .docx-paper h3 { font-size: 1.1rem; }
.doc-viewer-docx .docx-paper p  { margin: 0 0 0.85em; }
.doc-viewer-docx .docx-paper ul,
.doc-viewer-docx .docx-paper ol { margin: 0 0 0.85em 1.5em; }
.doc-viewer-docx .docx-paper img { max-width: 100%; height: auto; }
.doc-viewer-docx .docx-paper table { border-collapse: collapse; width: 100%; margin: 0 0 1em; }
.doc-viewer-docx .docx-paper td,
.doc-viewer-docx .docx-paper th { border: 1px solid #cbd5e1; padding: 0.4rem 0.6rem; text-align: left; }

/* Loading / fallback states */
.doc-viewer-state {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  text-align: center;
  padding: 2rem;
  color: var(--text-muted);
}
.doc-viewer-spinner {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 3px solid #cbd5e1;
  border-top-color: var(--navy);
  animation: docSpin 0.8s linear infinite;
}
@keyframes docSpin { to { transform: rotate(360deg); } }
.doc-viewer-fallback-icon { color: #94a3b8; }
.doc-viewer-fallback-name {
  font-weight: 600;
  color: var(--text);
  font-size: 0.95rem;
  word-break: break-all;
  max-width: 480px;
}
.doc-viewer-fallback-msg { font-size: 0.875rem; max-width: 420px; }
.doc-viewer-fallback-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }

/* ─── Admin nav SVG icons ────────────────────────────────────── */
.nav-icon { flex-shrink: 0; }
.sidebar-logout {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.5);
  display: flex;
  align-items: center;
  transition: color 0.15s;
}
.sidebar-logout:hover { color: #fff; }

/* ─── Empty state SVG ────────────────────────────────────────── */
.empty-icon-svg {
  margin-bottom: 0.75rem;
}

/* ─── Document card redesign ────────────────────────────────── */
.doc-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  transition: border-color 0.15s;
  flex-wrap: wrap;
}
.doc-card-approved { border-color: #6ee7b7; background: #f0fdf4; }
.doc-card-rejected { border-color: #fca5a5; background: #fef2f2; }
.doc-card-orphan   { border-style: dashed; border-color: #fcd34d; background: #fffbeb; }

.orphan-docs-section { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px dashed var(--border); }
.orphan-docs-header {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
  color: #92400e;
}
.orphan-docs-header svg { flex-shrink: 0; margin-top: 0.15rem; }
.orphan-docs-title { display: block; font-size: 0.875rem; font-weight: 600; color: #92400e; }
.orphan-docs-sub   { display: block; font-size: 0.78rem; color: var(--text-muted); margin-top: 0.1rem; max-width: 640px; }

.doc-card-left {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  flex: 1;
  min-width: 0;
}
.doc-card-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.doc-card-icon { flex-shrink: 0; color: var(--navy); }
.doc-card-info { min-width: 0; }
.doc-card-type  { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: 600; display: block; }
.doc-card-name  { font-size: 0.875rem; font-weight: 500; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.doc-card-date  { font-size: 0.75rem; color: var(--text-muted); display: block; }
.doc-card-note  { font-size: 0.75rem; color: #92400e; display: block; margin-top: 0.125rem; }
.btn-sm-muted   { color: var(--text-light) !important; font-size: 0.75rem; }

/* ─── Step display row ─────────────────────────────────────── */
.step-display-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}
.step-calculated {
  font-size: 0.8rem;
  color: var(--text-muted);
  background: #f1f5f9;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
}
.step-override-badge {
  font-size: 0.7rem;
  font-weight: 600;
  color: #92400e;
  background: var(--yellow-light);
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
}

/* ─── Schedule Edit page ─────────────────────────────────────── */

/* Impact top bar */
.impact-topbar {
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius-lg);
  margin-bottom: 1.25rem;
  padding: 0;
  overflow: hidden;
}
.impact-topbar-inner {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  padding: 0.875rem 1.25rem;
  gap: 1.25rem;
}
.itb-stat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.itb-label  { font-size: 0.7rem; opacity: 0.65; text-transform: uppercase; letter-spacing: 0.06em; }
.itb-value  { font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.itb-delta  { font-size: 1rem; font-weight: 700; }
.itb-arrow  { font-size: 1.25rem; opacity: 0.4; margin: 0 0.25rem; }
.itb-divider { width: 1px; background: rgba(255,255,255,0.15); align-self: stretch; margin: 0 0.25rem; }
.itb-changes    { font-size: 0.8rem; background: rgba(255,255,255,0.15); padding: 0.25rem 0.625rem; border-radius: 9999px; }
.itb-no-changes { font-size: 0.8rem; opacity: 0.5; }

/* Schedule editor action toolbar + snapshots */
.sched-actions { display: flex; gap: 0.625rem; align-items: center; flex-wrap: wrap; }
.snapshot-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.snapshot-bar .btn svg { vertical-align: -2px; margin-right: 0.3rem; }
.snapshot-current {
  display: none;
  align-items: center;
  gap: 0.3rem;
  margin-right: 0.25rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
  max-width: 280px;
  overflow: hidden;
  justify-content: flex-end;
  text-align: right;
}
.snapshot-current.show { display: inline-flex; }
.snapshot-current > span { overflow: hidden; text-overflow: ellipsis; }
.snapshot-current strong { color: var(--text); font-weight: 600; }
.sched-actions-divider { width: 1px; align-self: stretch; background: var(--border); margin: 0 0.25rem; }

/* Snapshot modal: "Create New" button + saved-version list */
.snap-create-btn {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.75rem;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 0.85rem;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: opacity 0.15s;
}
.snap-create-btn:hover { opacity: 0.9; }
.snap-list { display: flex; flex-direction: column; gap: 0.4rem; max-height: 360px; overflow-y: auto; }
.snap-empty { font-size: 0.85rem; color: var(--text-muted); text-align: center; padding: 1.5rem 0; }
.snap-item {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.15s, background 0.15s;
}
.snap-item:hover { border-color: var(--navy); background: #f8fafc; }
.snap-item.active { border-color: var(--navy); background: #eff4fb; }
.snap-item-main {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex: 1;
  min-width: 0;
  padding: 0.6rem 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font);
  color: var(--text);
}
.snap-item-icon { color: var(--navy); flex-shrink: 0; display: inline-flex; }
.snap-item-text { min-width: 0; }
.snap-item-name { display: block; font-size: 0.875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snap-item-meta { display: block; font-size: 0.72rem; color: var(--text-muted); }
.snap-item-act {
  flex-shrink: 0;
  width: 40px;
  border: none;
  border-left: 1px solid var(--border);
  background: none;
  color: var(--text-light);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.snap-item-act:hover { background: #f1f5f9; color: var(--navy); }
.snap-item-del:hover { background: #fef2f2; color: #ef4444; }
.snap-rename-input {
  flex: 1;
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: var(--font);
  padding: 0.3rem 0.5rem;
  border: 1.5px solid var(--navy);
  border-radius: var(--radius);
  outline: none;
}

/* Impact preview filter row (light, standalone above the navy bar) */
.impact-filters {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.impact-filters-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 600;
}
.impact-calc { font-size: 0.75rem; color: var(--text-muted); margin-left: 0.25rem; }

/* Impact breakdown by band */
.impact-breakdown { border-top: 1px solid rgba(255,255,255,0.12); }
.impact-breakdown > summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  list-style: none;
  padding: 0.7rem 1.25rem;
  font-size: 0.8rem;
  font-weight: 600;
  user-select: none;
  transition: background 0.15s;
}
.impact-breakdown > summary:hover { background: rgba(255,255,255,0.10); }
.impact-breakdown > summary::-webkit-details-marker { display: none; }
.impact-bd-chevron { transition: transform 0.15s; opacity: 0.85; }
.impact-breakdown[open] .impact-bd-chevron { transform: rotate(180deg); }
.impact-breakdown .table-container { background: var(--white); color: var(--text); }
.impact-band-table { margin: 0; }

/* Adjustment panel */
.adj-panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow);
}
.adj-panel-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0.875rem;
}
.adj-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.875rem;
}

/* Over-step-30 band toggles (salary schedule editor) */
.over30-band-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.5rem;
}
.over30-band-toggle {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--surface);
}
.over30-band-toggle:has(input:checked) {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 6%, var(--white));
}
.over30-band-label {
  display: flex;
  flex-direction: column;
  font-size: 0.78rem;
  line-height: 1.3;
}
.over30-band-label strong { font-size: 0.8rem; }
.adj-card {
  display: flex;
  gap: 0.75rem;
  padding: 0.875rem;
  background: #f8fafc;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.15s;
}
.adj-card:hover { border-color: #94a3b8; }
.adj-card-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
}
.adj-card-body { flex: 1; min-width: 0; }
.adj-card-body h4 { font-size: 0.8125rem; font-weight: 700; margin-bottom: 0.2rem; color: var(--navy); }
.adj-card-body p  { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.625rem; line-height: 1.4; }
.adj-inputs { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; }
/* Two-row layout for band/step cards */
.adj-inputs-col  { display: flex; flex-direction: column; gap: 0.5rem; }
.adj-inputs-row  { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; }
.adj-select-full { width: 100%; min-width: 0; padding: 0.375rem 0.5rem; border: 1.5px solid var(--border); border-radius: var(--radius); font-size: 0.8rem; font-family: var(--font); background: #fff; outline: none; }
.adj-input {
  width: 72px;
  padding: 0.375rem 0.5rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.8125rem;
  font-family: var(--font);
  outline: none;
  transition: border-color 0.15s;
}
.adj-input:focus { border-color: var(--navy); }
.adj-select {
  padding: 0.375rem 0.5rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.8rem;
  font-family: var(--font);
  background: #fff;
  outline: none;
}
.adj-prefix {
  font-size: 0.8rem;
  color: var(--text-muted);
  padding: 0.375rem 0.25rem;
}

/* dir-btn/toggle removed — signed numbers used directly */

/* Grid inputs */
.grid-input {
  width: 90px;
  padding: 0.35rem 0.5rem;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 0.8rem;
  font-family: 'Courier New', monospace;
  text-align: right;
  background: transparent;
  color: var(--text);
  transition: background 0.1s, border-color 0.1s;
  -moz-appearance: textfield;
}
.grid-input::-webkit-inner-spin-button,
.grid-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.grid-input:hover  { background: #f0f4f8; border-color: #cbd5e1; }
.grid-input:focus  { background: #fff; border-color: var(--navy); outline: none; box-shadow: 0 0 0 2px rgba(30,58,95,0.12); }
.grid-input.cell-changed  { background: #fefce8; border-color: var(--amber); font-weight: 700; color: #92400e; }
.grid-input.cell-override { background: #eff6ff; color: var(--navy); font-weight: 600; }

.edit-table-wrap { overflow: auto; }

/* ─── Salary Schedule page ───────────────────────────────────── */

.schedule-legend {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.8125rem;
  color: var(--text-muted);
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.625rem 1rem;
  margin-bottom: 1.25rem;
}
.legend-sep { color: var(--border); }
.legend-item { display: flex; align-items: center; gap: 0.375rem; }

.schedule-table-wrap {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.schedule-table {
  border-collapse: separate;
  border-spacing: 0;
  width: max-content;
  min-width: 100%;
  font-size: 0.8125rem;
}

.schedule-table thead th {
  position: sticky;
  top: 0;
  background: var(--navy);
  color: #fff;
  padding: 0.625rem 0.75rem;
  white-space: nowrap;
  text-align: right;
  font-size: 0.75rem;
  font-weight: 600;
  border-right: 1px solid rgba(255,255,255,0.1);
  z-index: 20;
}
.schedule-table thead th:first-child { text-align: center; }

.sticky-col {
  position: sticky;
  left: 0;
  z-index: 10;
  background: #f8fafc;
}
.schedule-table thead .sticky-col {
  background: var(--navy-dark);
  z-index: 30;
}

.step-col {
  min-width: 72px;
  text-align: center;
  font-weight: 600;
  color: var(--text-muted);
  font-size: 0.8rem;
  padding: 0.5rem 0.75rem;
  border-right: 2px solid var(--border);
}

.years-cell {
  text-align: left !important;
  font-size: 0.8125rem;
  white-space: nowrap;
}

.band-col {
  min-width: 110px;
}
.band-num {
  display: block;
  font-size: 0.7rem;
  opacity: 0.8;
  margin-bottom: 0.15rem;
}
.band-name-short {
  display: block;
  font-size: 0.72rem;
  line-height: 1.2;
  max-width: 100px;
  white-space: normal;
}

.salary-cell {
  text-align: right;
  padding: 0.5rem 0.875rem;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.zero-cell { color: var(--text-light); }

/* Milestone star (tooltip only, no row coloring) */
.milestone-star {
  color: var(--amber);
  font-size: 0.8em;
  cursor: help;
  margin-left: 0.2rem;
}

/* Alternating rows */
.schedule-table tbody tr:nth-child(even) td { background: #fafafa; }
.schedule-table tbody tr:nth-child(even) .sticky-col { background: #f3f4f6; }
.schedule-table tbody tr:hover td { background: #eff6ff !important; }

.zero-row td { color: var(--text-light); background: #fafafa; }

.table-footer-row td {
  border-top: 2px solid var(--navy);
  background: #f0f4f8;
}

/* No rainbow band colors — uniform header style */

/* Entry card grid — no color accents */

/* Print styles */
@media print {
  .sidebar, .page-header button, .filter-bar, .bulk-action-bar { display: none !important; }
  .admin-main { margin-left: 0 !important; padding: 1rem !important; }
  .schedule-table-wrap { overflow: visible !important; }
  .schedule-table { font-size: 0.65rem; }
  .salary-cell, .step-col { padding: 0.25rem 0.4rem !important; }
  .card { box-shadow: none !important; break-inside: avoid; }
  .sticky-col { position: relative !important; }
  .schedule-table thead th { position: relative !important; color: #000 !important; background: #e2e8f0 !important; }
}

/* ─── Employee detail page layout ───────────────────────────── */
.detail-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.detail-page-header-left {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}
.detail-title-block {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}
.detail-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.detail-page-header-right {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
}

/* Two-column layout */
.detail-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1.25rem;
  align-items: start;
}
.detail-right {
  position: sticky;
  top: 80px; /* below the fixed header */
}

/* ─── Inline edit field rows ─────────────────────────────────── */
.fields-list { display: flex; flex-direction: column; gap: 0; }

.field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0;
  border-bottom: 1px solid #f1f5f9;
  min-height: 44px;
}
.field-row:last-child { border-bottom: none; }
.field-label {
  font-size: 0.8125rem;
  color: var(--text-muted);
  font-weight: 500;
  flex-shrink: 0;
  min-width: 140px;
}
.field-label-hint {
  font-size: 0.72rem;
  color: var(--text-light);
  font-weight: 400;
}
.field-value-group {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex: 1;
  justify-content: flex-end;
}
.field-display {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
  text-align: right;
}
.field-input {
  font-size: 0.875rem;
  font-family: var(--font);
  padding: 0.375rem 0.625rem;
  border: 1.5px solid var(--navy);
  border-radius: var(--radius);
  background: #fff;
  color: var(--text);
  outline: none;
  max-width: 220px;
  transition: box-shadow 0.15s;
}
.field-input:focus { box-shadow: 0 0 0 3px rgba(30,58,95,0.12); }

.field-edit-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  color: var(--text-light);
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: 0.15s;
  flex-shrink: 0;
}
.field-edit-btn:hover { color: var(--navy); background: #f0f4f8; }

/* Bottom action bar */
.detail-bottom-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--border);
  margin-top: 0.5rem;
}

/* Archived employee detail — read-only */
.employee-archived .field-edit-btn,
.employee-archived .btn-danger-icon,
.employee-archived .doc-act-approve,
.employee-archived .doc-act-reset,
.employee-archived .doc-act-reject,
.employee-archived .sp-edit-btn,
.employee-archived button[onclick*="addAdmin"],
.employee-archived button[onclick*="addEntry"],
.employee-archived button[onclick*="toggleLoyaltyOverride"] {
  display: none !important;
}
.employee-archived .field-input,
.employee-archived .form-textarea,
.employee-archived select.field-input {
  pointer-events: none;
  opacity: 0.85;
}

/* ─── Salary panel ───────────────────────────────────────────── */
.salary-panel {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.salary-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--navy);
  color: #fff;
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.salary-panel-body { padding: 0.875rem 1rem; }

.sp-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.35rem 0;
  font-size: 0.8125rem;
}
.sp-row-sub { color: var(--text-muted); font-size: 0.78rem; }
.sp-row-sub > span:last-child { font-weight: 500; color: var(--text); }
.sp-row-highlight {
  font-weight: 600;
  color: var(--navy);
  background: #f0f4f8;
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius);
  margin: 0.25rem 0;
}
.sp-row-stipend { color: var(--text); }
.sp-row-stipend span:last-child { color: var(--green); font-weight: 500; }
.sp-row-over30 { align-items: flex-start; }
.sp-over30-label {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
  padding-right: 0.75rem;
}
.sp-over30-title { font-size: 0.78rem; color: inherit; line-height: 1.3; }
.sp-over30-detail { font-size: 0.7rem; color: var(--text-muted); line-height: 1.35; font-weight: 400; }
.sp-over30-amount {
  flex-shrink: 0;
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  padding-top: 0.125rem;
}
.sp-row-total {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  padding-top: 0.5rem;
}
.sp-row-final {
  font-size: 0.875rem;
  font-weight: 600;
  color: #065f46;
  background: var(--green-light);
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius);
  margin-top: 0.25rem;
}
.sp-divider { border-top: 1px solid var(--border); margin: 0.5rem 0; }
.sp-note { font-size: 0.7rem; color: #92400e; margin-left: 0.25rem; }
.sp-loyalty-wrap { display: flex; align-items: center; gap: 0.25rem; }
.sp-edit-btn { padding: 0.2rem; }

.salary-panel-docs {
  border-top: 1px solid var(--border);
  padding: 0.75rem 1rem;
  background: #f8fafc;
}
.sp-docs-header {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0.5rem;
}
.sp-docs-count {
  background: #e2e8f0;
  color: var(--text-muted);
  font-size: 0.7rem;
  padding: 0.1rem 0.4rem;
  border-radius: 9999px;
  font-weight: 600;
}
.sp-doc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.25rem 0;
  font-size: 0.75rem;
}
.sp-doc-name { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
.sp-docs-warning {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: #92400e;
  background: var(--yellow-light);
  padding: 0.375rem 0.5rem;
  border-radius: var(--radius);
  margin-top: 0.5rem;
}

/* ─── Education entry (read-only display in admin) ───────────── */
.edu-entry {
  padding: 0.75rem;
  background: #f8fafc;
  border-radius: var(--radius);
  margin-bottom: 0.625rem;
  border: 1px solid var(--border);
}
.edu-entry:last-child { margin-bottom: 0; }
.edu-entry-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
}
.edu-entry-detail {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Tab badge */
.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--amber);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  margin-left: 0.25rem;
  vertical-align: middle;
}

/* ─── Inline upload strip (inside form entries) ─────────────── */
.entry-upload-strip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.625rem;
  border-top: 1px dashed var(--border);
  font-size: 0.8rem;
  color: var(--text-muted);
  flex-wrap: wrap;
}
.entry-upload-strip > svg { flex-shrink: 0; color: var(--text-muted); }
.upload-strip-label { color: var(--text-muted); flex-shrink: 0; }
.upload-label-inline { display: inline-flex; align-items: center; cursor: pointer; margin-left: auto; }
.upload-filename-inline {
  font-size: 0.78rem;
  color: var(--text-muted);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ─── Upload chips (multiple files per field) ────────────────── */
.upload-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.entry-upload-strip .upload-chips { flex: 1 1 200px; min-width: 0; }
.doc-upload-card .upload-chips { margin-top: 0.6rem; width: 100%; justify-content: center; }

.upload-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.5rem 0.2rem 0.55rem;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 9999px;
  font-size: 0.75rem;
  color: #065f46;
  max-width: 240px;
}
.upload-chip .upload-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-chip .upload-chip-icon { flex-shrink: 0; color: #10b981; }
.upload-chip.uploading { background: #f3f4f6; border-color: #e5e7eb; color: #6b7280; }
.upload-chip.error     { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.upload-chip.submitted { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.upload-chip.submitted .upload-chip-icon { color: #3b82f6; }
.upload-chip-state { font-size: 0.7rem; opacity: 0.85; flex-shrink: 0; }
.upload-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  color: inherit;
  padding: 0;
  margin-left: 0.1rem;
  opacity: 0.55;
  flex-shrink: 0;
}
.upload-chip-remove:hover { opacity: 1; }
.docs-overview-remove { width: 26px; height: 26px; flex-shrink: 0; }

/* ─── Documents overview in Tab 5 ───────────────────────────── */
.docs-overview-section { margin-bottom: 1.5rem; }
.docs-overview-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.625rem;
}
.docs-overview-list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem;
}
.docs-overview-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.docs-overview-list { display: flex; flex-direction: column; gap: 0.5rem; }
.docs-overview-icon { color: var(--navy); flex-shrink: 0; }
.docs-overview-info { flex: 1; min-width: 0; }
.docs-overview-name { font-size: 0.8125rem; font-weight: 500; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.docs-overview-name { color: var(--navy); text-decoration: none; }
a.docs-overview-name:hover { text-decoration: underline; }
.docs-overview-type { font-size: 0.72rem; color: var(--text-muted); }
.docs-overview-badge { flex-shrink: 0; }

.docs-extra-section { margin-top: 1.25rem; }
.doc-add-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  background: #f8fafc;
  flex-wrap: wrap;
}
.doc-add-text h4 { font-size: 0.9rem; margin: 0 0 0.15rem; }

/* ─── Autosave status indicator ──────────────────────────────── */
.autosave-status {
  font-size: 0.75rem;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 70px;
  justify-content: flex-end;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.autosave-status.show   { opacity: 1; }
.autosave-status.saving { color: var(--text-muted); }
.autosave-status.saved  { color: #059669; }
.autosave-status.error  { color: #dc2626; }
.autosave-status.saved::before  { content: "✓"; font-weight: 700; }

/* ─── Preferences toggle ─────────────────────────────────────── */
.pref-toggle-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.5rem 0;
}
.pref-toggle-info { flex: 1; min-width: 0; }
.pref-toggle-label { display: block; font-size: 0.9375rem; font-weight: 600; color: var(--text); margin-bottom: 0.25rem; }
.pref-toggle-desc  { display: block; font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; }

.toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0;
  background: #cbd5e1;
  border-radius: 9999px;
  cursor: pointer;
  transition: 0.2s;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  left: 3px; bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle-switch input:checked + .toggle-slider { background: var(--navy); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }

/* ─── Preferences: positions & campuses editor ───────────────── */

/* Shared add-form row */
.pref-add-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.pref-bonus-input {
  position: relative;
  width: 130px;
  flex-shrink: 0;
}
.pref-bonus-input .pref-bonus-prefix {
  position: absolute;
  left: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 0.875rem;
  pointer-events: none;
}
.pref-bonus-input input { padding-left: 1.4rem; }

/* Row action buttons */
.pref-row-actions { display: flex; align-items: center; gap: 0.25rem; }
.pref-delete-btn  { color: var(--text-muted); }
.pref-delete-btn:hover { color: var(--red); }

/* Campus table cell alignment */
#campuses-table td { vertical-align: middle; }
#campuses-table .campus-edit-name,
#campuses-table .campus-edit-bonus { font-size: 0.85rem; padding: 0.3rem 0.5rem; }

/* Band accordion */
.pref-band-group { border-bottom: 1px solid var(--border); }
.pref-band-group:last-child { border-bottom: none; }
.pref-band-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 1rem;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s;
}
.pref-band-header:hover { background: #f8fafc; }
.pref-band-label { display: flex; align-items: center; gap: 0.6rem; }
.pref-band-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  background: var(--blue-light);
  color: var(--navy);
  flex-shrink: 0;
}
.pref-band-name  { font-size: 0.875rem; font-weight: 500; color: var(--text); }
.pref-band-meta  { display: flex; align-items: center; gap: 0.6rem; }
.pref-band-count {
  font-size: 0.75rem;
  color: var(--text-muted);
  background: #f1f5f9;
  border-radius: 9999px;
  padding: 0.1rem 0.5rem;
  min-width: 1.5rem;
  text-align: center;
}
.pref-band-chevron { color: var(--text-muted); transition: transform 0.2s; }

/* Position rows inside accordion */
.pref-band-body  { background: #fafbfc; }
.pref-pos-row    { border-top: 1px solid #f0f4f8; }
.pref-pos-view {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 1rem 0.45rem 2rem;
  gap: 0.5rem;
}
.pref-pos-view:hover { background: #f1f5f9; }
.pref-pos-name   { font-size: 0.85rem; color: var(--text); flex: 1; min-width: 0; }
.pref-pos-actions { display: flex; gap: 0.2rem; flex-shrink: 0; opacity: 0; transition: opacity 0.15s; }
.pref-pos-view:hover .pref-pos-actions { opacity: 1; }
.pref-pos-edit {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem 0.5rem 2rem;
  flex-wrap: wrap;
  background: #eff6ff;
}
.pref-pos-edit .form-control  { flex: 1; min-width: 180px; font-size: 0.85rem; padding: 0.3rem 0.5rem; }
.pref-pos-edit .filter-select { font-size: 0.82rem; padding: 0.3rem 0.5rem; min-width: 0; }

/* ─── Permissions modal ──────────────────────────────────────── */
/* ─── Edit Permissions modal ─────────────────────────────────── */
.perm-modal-box {
  max-width: 600px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;            /* inner body scrolls, header/footer stay put */
  padding: 0;
}
.perm-modal-header { flex-shrink: 0; }
.perm-modal-titles { display: flex; flex-direction: column; gap: 0.125rem; }
.perm-modal-titles h3 { margin: 0; font-size: 1.125rem; }
.perm-modal-sub { font-size: 0.8125rem; color: var(--text-muted); font-weight: 500; }

.perm-modal-form {
  display: flex;
  flex-direction: column;
  min-height: 0;               /* allow the body to actually shrink + scroll */
  flex: 1;
}
.perm-modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem 1.25rem 1.25rem;
}

.perm-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.perm-toolbar-hint { font-size: 0.8125rem; color: var(--text-muted); }
.perm-toolbar-actions { display: flex; align-items: center; gap: 0.375rem; flex-shrink: 0; }
.perm-bulk-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
}
.perm-bulk-btn:hover { text-decoration: underline; }
.perm-bulk-sep { color: var(--border); }

.perm-group { margin-bottom: 1.25rem; }
.perm-group:last-child { margin-bottom: 0; }
.perm-group-title {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.perm-group-hint {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 0.6875rem;
  color: var(--text-light, #94a3b8);
}

.perm-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}
.perm-row {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.6875rem 0.875rem;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.perm-row:last-child { border-bottom: none; }
.perm-row:hover { background: #f8fafc; }
.perm-row-text { display: flex; flex-direction: column; gap: 0.125rem; flex: 1; min-width: 0; }
.perm-label { font-size: 0.8125rem; font-weight: 500; color: var(--text); line-height: 1.3; }
.perm-desc { font-size: 0.75rem; color: var(--text-muted); line-height: 1.35; }

/* Toggle switch (driven by the hidden .perm-check) */
.perm-check { position: absolute; opacity: 0; width: 0; height: 0; }
.perm-switch {
  position: relative;
  flex-shrink: 0;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: #cbd5e1;
  transition: background 0.15s ease;
}
.perm-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.25);
  transition: transform 0.15s ease;
}
.perm-check:checked + .perm-switch { background: var(--navy); }
.perm-check:checked + .perm-switch::after { transform: translateX(16px); }
.perm-check:focus-visible + .perm-switch { box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.3); }

.perm-modal-footer {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  border-top: 1px solid var(--border);
  background: #fff;
}

/* Inside the permissions modal the body owns the scroll — let the campus
   list grow naturally instead of creating a nested scroll area. */
.perm-modal-body .campus-check-list { max-height: none; }

.campus-check-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0.5rem;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
}
.campus-check-list:empty::after {
  content: "No campuses configured.";
  display: block;
  padding: 0.75rem 0.875rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}
.campus-check-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--text);
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.12s;
}
.campus-check-item:last-child { border-bottom: none; }
.campus-check-item:hover { background: #f8fafc; }
.campus-check-item input {
  accent-color: var(--navy);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
}

/* ─── Access denied / 403 page ───────────────────────────────── */
.access-denied-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 2rem 1rem;
}
.access-denied-card {
  text-align: center;
  max-width: 420px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2.5rem 2rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
.access-denied-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fef2f2;
  color: #dc2626;
}
.access-denied-title { font-size: 1.375rem; font-weight: 700; color: var(--text); margin: 0 0 0.5rem; }
.access-denied-msg { font-size: 0.9375rem; color: var(--text); margin: 0 0 0.375rem; }
.access-denied-sub { font-size: 0.8125rem; color: var(--text-muted); margin: 0 0 1.5rem; }

/* ─── Finalize confirmation modal ───────────────────────────── */
.finalize-confirm-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0 1.25rem;
  text-align: center;
}
.finalize-name {
  font-size: 0.875rem;
  color: var(--text-muted);
  font-weight: 500;
}
.finalize-salary {
  font-size: 2rem;
  font-weight: 800;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.finalize-notify-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  cursor: pointer;
  margin-top: 0.25rem;
}
.finalize-notify-label input { accent-color: var(--navy); }
.finalize-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.625rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

/* ─── Bulk action bar ────────────────────────────────────────── */
.bulk-action-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius);
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
  /* Follow the viewport when scrolling so the bar stays reachable; snaps back
     to its in-flow position automatically when there's room above. */
  position: sticky;
  top: 1rem;
  z-index: 50;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
  /* Hidden by default but keeps its space reserved (no layout shift). */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  /* Delay flipping visibility until the fade-out finishes. */
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}
.bulk-action-bar.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
}
.bulk-count { font-size: 0.875rem; font-weight: 600; }
/* Push the action buttons (edit campus / edit band & position / send) to the
   right edge as one group, leaving the count + hint on the left. */
.bulk-action-bar #bulk-edit-campus { margin-left: auto; }
.bulk-select-all-hint {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.8);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.bulk-select-all-hint .bulk-link {
  color: #fff;
  font-weight: 600;
  font-size: 0.8125rem;
  text-decoration: underline;
}
.bulk-select-all-hint .bulk-link:hover { color: #e2e8f0; }

/* ─── Bulk edit popovers (campus / band & position) ──────────── */
.bulk-edit { position: relative; display: inline-block; }
.bulk-edit-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 120;
  display: none;
  width: 280px;
  background: var(--white);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 0.75rem;
}
.bulk-edit-panel-wide { width: 320px; }
.bulk-edit.open .bulk-edit-panel { display: block; }
.bulk-edit-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.5rem;
}
.bulk-edit-search {
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.85rem;
  font-family: var(--font);
  outline: none;
  margin-bottom: 0.5rem;
}
.bulk-edit-search:focus { border-color: var(--navy); }
.bulk-edit-list {
  max-height: 260px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.bulk-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  text-align: left;
  padding: 0.45rem 0.55rem;
  border: none;
  background: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.85rem;
  font-family: var(--font);
  color: var(--text);
}
.bulk-opt:hover { background: #f1f5f9; }
.bulk-opt.selected { background: var(--navy); color: #fff; }
.bulk-opt .bulk-opt-sub { font-size: 0.72rem; color: var(--text-muted); flex-shrink: 0; }
.bulk-opt.selected .bulk-opt-sub { color: rgba(255, 255, 255, 0.85); }
.bulk-opt-group {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: 0.5rem 0.55rem 0.2rem;
}
.bulk-edit-empty { font-size: 0.82rem; color: var(--text-muted); padding: 0.5rem 0.55rem; }
.bulk-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.625rem;
  padding-top: 0.625rem;
  border-top: 1px solid var(--border);
}

/* ─── Table checkbox column ─────────────────────────────────── */
.col-check { width: 40px; text-align: center; padding-left: 0.75rem !important; }
.table-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--navy);
  cursor: pointer;
}

/* ─── Selected row highlight ─────────────────────────────────── */
.row-selected { background: #eff6ff !important; }
.row-selected:hover { background: #dbeafe !important; }

/* ─── Filter bar (auto-submit, no button) ────────────────────── */
.filter-bar-form { margin-bottom: 1.25rem; }
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  align-items: center;
}

/* ─── Multi-select filter dropdown ───────────────────────────── */
.multiselect { position: relative; display: inline-block; }
.multiselect-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 170px;
  cursor: pointer;
  text-align: left;
}
.multiselect-toggle .ms-summary {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.multiselect-toggle .ms-chevron { flex-shrink: 0; color: var(--text-muted); transition: transform 0.15s; }
.multiselect.open .ms-chevron { transform: rotate(180deg); }
.multiselect-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 50;
  display: none;
  min-width: 240px;
  max-height: 300px;
  overflow-y: auto;
  padding: 0.35rem;
  background: var(--white);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.multiselect.open .multiselect-panel { display: block; }
.ms-option {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.85rem;
  white-space: nowrap;
}
.ms-option:hover { background: #f1f5f9; }
.ms-option input { width: 15px; height: 15px; flex-shrink: 0; cursor: pointer; }
/* In-panel search box for long option lists (e.g. positions) */
.ms-search {
  position: sticky;
  top: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0.4rem 0.55rem;
  margin-bottom: 0.3rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.82rem;
  font-family: var(--font);
  background: var(--white);
  outline: none;
  z-index: 1;
}
.ms-search:focus { border-color: var(--navy); }
.ms-empty { font-size: 0.82rem; color: var(--text-muted); padding: 0.4rem 0.5rem; }

/* ─── Export dropdown ────────────────────────────────────────── */
.export-wrap {
  position: relative;
  display: inline-block;
}
.export-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 200;
  width: 310px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 1rem;
  display: none;
}
.export-wrap.open .export-panel { display: block; }
.export-panel-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.875rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--border);
}
.export-section { margin-bottom: 0.625rem; }
.export-section-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
}
.export-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
}
.export-check {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  padding: 0.2rem 0.45rem;
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.export-check:hover { background: #f1f5f9; }
.export-check input[type="checkbox"] { width: 14px; height: 14px; cursor: pointer; flex-shrink: 0; accent-color: var(--navy); }
.export-divider { border: none; border-top: 1px solid var(--border); margin: 0.75rem 0; }
.export-fmt-group { display: flex; gap: 0.5rem; margin-top: 0.3rem; }
.export-fmt-btn {
  flex: 1;
  padding: 0.4rem 0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: monospace;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  text-align: center;
}
.export-fmt-btn.active {
  border-color: var(--navy);
  color: var(--navy);
  background: var(--blue-light);
}
.export-fmt-btn:hover:not(.active) { border-color: #94a3b8; color: var(--text); }
.export-dl-btn {
  margin-top: 0.875rem;
  width: 100%;
  justify-content: center;
  gap: 0.4rem;
}

/* ─── Access log page ────────────────────────────────────────── */
.log-row-error { background: #fef2f2; }
.log-row-warn  { background: #fffbeb; }

.log-status {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.75rem;
  font-weight: 700;
}
.log-2xx { background: #d1fae5; color: #065f46; }
.log-3xx { background: #dbeafe; color: #1e40af; }
.log-4xx { background: #fef3c7; color: #92400e; }
.log-5xx { background: #fee2e2; color: #991b1b; }

.log-method {
  display: inline-block;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  font-family: monospace;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
}
.log-method-get    { background: #eff6ff; color: #1d4ed8; }
.log-method-post   { background: #f0fdf4; color: #15803d; }
.log-method-delete { background: #fef2f2; color: #b91c1c; }
.log-method-put,
.log-method-patch  { background: #fefce8; color: #a16207; }

.log-user-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 0.25rem;
}
.log-user-developer   { background: #f3e8ff; color: #7e22ce; }
.log-user-master_admin { background: #1E3A5F; color: #fff; }
.log-user-admin       { background: #dbeafe; color: #1e40af; }
.log-user-employee    { background: #d1fae5; color: #065f46; }

/* ─── Grouped position select ────────────────────────────────── */
/* optgroup labels get the browser default styling — just ensure consistent sizing */
select optgroup { font-size: 0.8rem; }
select option   { font-size: 0.875rem; }

/* ─── Pagination ─────────────────────────────────────────────── */
.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 0;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.pagination-info { font-size: 0.8125rem; color: var(--text-muted); }
.pagination-btns { display: flex; gap: 0.375rem; flex-wrap: wrap; }

/* ─── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .detail-layout { grid-template-columns: 1fr; }
  .detail-right { position: static; }
}

@media (max-width: 768px) {
  .admin-body { flex-direction: column; }
  .sidebar { position: relative; width: 100%; height: auto; }
  .admin-main { margin-left: 0; padding: 1rem; max-width: 100vw; }
  .form-grid { grid-template-columns: 1fr; }
  .doc-upload-grid { grid-template-columns: 1fr; }
  .summary-two-col { grid-template-columns: 1fr; }
  .review-grid { grid-template-columns: 1fr; }
  .summary-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .filter-form { flex-direction: column; align-items: stretch; }
  .filter-input, .filter-select { width: 100%; }
  .actions-grid { grid-template-columns: 1fr; }
  .bar-label { width: 120px; }
}

/* ── Additional Assignments checklist (employee form) ───── */
.assignments-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.5rem;
}
.assignment-check-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  background: var(--surface);
  transition: background 0.15s, border-color 0.15s;
}
.assignment-check-row:hover { background: var(--bg); border-color: var(--navy-light); }
.assignment-check-row input[type="checkbox"] { margin-top: 0.15rem; flex-shrink: 0; accent-color: var(--navy); }
.assignment-check-label { font-size: 0.875rem; line-height: 1.4; }

/* ── Additional Assignments panel row (admin salary panel) ─ */
.sp-row-assign { color: var(--text-secondary); }

/* ── Per-unit assignment row ────────────────────────────── */
.assignment-perunit-row { align-items: center; }
.assignment-qty-wrap {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}
.assignment-qty-label { font-size: 0.85rem; color: var(--text-muted); }
.assignment-qty-input {
  width: 60px;
  padding: 0.25rem 0.375rem;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 0.875rem;
  text-align: center;
  background: var(--bg);
}
.assignment-qty-input:focus { outline: 2px solid var(--navy-light); border-color: transparent; }