/*!
 * Kadrio — UI Components (components.css)
 * ----------------------------------------------------------------------------
 * Styles for the shared component library (js/ui.js).
 * Contains NO raw color values — everything references tokens from theme.css.
 *
 * TABLE OF CONTENTS
 * ----------------------------------------------------------------------------
 *  1. Buttons
 *  2. Form controls
 *  3. Badges
 *  4. Avatars
 *  5. Data table
 *  6. Pagination
 *  7. Modal & confirm dialog
 *  8. Toast notifications
 *  9. Dropdown menu
 * 10. Tabs
 * 11. Empty state
 * 12. Loading skeleton
 * 13. Page patterns (page head, filter bar, segmented control, grids, forms)
 * 14. Responsive
 * 15. Boot overlay (server-mode hydration gate)
 * 16. Goal meter (T68 performance goals)
 * 17. Checklists (T70 onboarding/offboarding)
 * 18. Org chart (T74)
 * 19. Asset enrichment (T77 depreciation + maintenance + history)
 * ----------------------------------------------------------------------------
 */

/* ========================================================================== */
/* 1. Buttons                                                                 */
/* ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-5);
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  white-space: nowrap;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.btn--primary {
  background-color: var(--accent);
  color: var(--text-on-accent);
}

.btn--primary:hover {
  background-color: var(--accent-strong);
}

.btn--dark {
  background-color: var(--dark);
  color: var(--text-on-dark);
}

.btn--dark:hover {
  background-color: var(--dark-surface);
}

.btn--ghost {
  background-color: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

.btn--ghost:hover {
  background-color: var(--surface-alt);
}

.btn--danger {
  background-color: var(--danger-strong);
  color: var(--text-on-danger);
}

/* Hover goes darker — white on --danger would drop below 4.5:1. */
.btn--danger:hover {
  background-color: var(--danger-strong-hover);
}

.btn--small {
  min-height: 32px;
  padding: var(--sp-1) var(--sp-4);
}

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

/* ========================================================================== */
/* 2. Form controls                                                           */
/* ========================================================================== */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-bottom: var(--sp-4);
}

.field-label {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
}

.field-input,
.field-select,
.field-textarea {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  min-height: 40px;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  font: inherit;
  font-size: var(--fs-body);
  color: var(--text);
}

.field-textarea {
  resize: vertical;
  min-height: 80px;
}

/* Border colour signals focus for mouse users; the global :focus-visible
   two-ring halo is the accessible keyboard indicator. */
.field-input:focus,
.field-select:focus,
.field-textarea:focus {
  border-color: var(--accent-strong);
}

.field-error {
  font-size: var(--fs-tiny);
  color: var(--danger-text);
}

/* The same slot can carry a neutral hint instead of an error. */
.field-error.is-hint {
  color: var(--text-secondary);
}

.field-input[aria-invalid='true'],
.field-select[aria-invalid='true'] {
  border-color: var(--danger);
}

/* Inline file control: a "Choose file" button next to the chosen file's name,
   used inside a .field (e.g. the training Add-material modal, server mode). */
.file-control {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.file-control-name {
  font-size: var(--fs-small);
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Pill search input (used by tables and the header). */
.search-input {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-4);
  min-height: 40px;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
}

.search-input:focus-within {
  border-color: var(--accent-strong);
}

.search-input input {
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-small);
  color: var(--text);
  outline: none;
  min-width: 160px;
}

/* ========================================================================== */
/* 3. Badges                                                                  */
/* ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-tiny);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.badge--success { background-color: var(--success-soft); color: var(--success-text); }
.badge--warning { background-color: var(--warning-soft); color: var(--warning-text); }
.badge--danger { background-color: var(--danger-soft); color: var(--danger-text); }
.badge--info { background-color: var(--info-soft); color: var(--info-text); }
.badge--accent { background-color: var(--accent-soft); color: var(--text); }
.badge--neutral { background-color: var(--surface-alt); color: var(--text-secondary); border: 1px solid var(--border); }
.badge--dark { background-color: var(--dark); color: var(--text-on-dark); }

/* ========================================================================== */
/* 4. Avatars                                                                 */
/* ========================================================================== */

.avatar-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-tiny);
  font-weight: var(--fw-semibold);
  color: var(--text-on-accent);
  flex-shrink: 0;
}

.avatar-badge--lg {
  width: 56px;
  height: 56px;
  font-size: var(--fs-h3);
}

.avatar-badge--c0 { background-color: var(--chart-1); }
.avatar-badge--c1 { background-color: var(--chart-2); }
.avatar-badge--c2 { background-color: var(--chart-3); }
.avatar-badge--c3 { background-color: var(--chart-4); }
.avatar-badge--c4 { background-color: var(--chart-5); }
.avatar-badge--c5 { background-color: var(--chart-6); }
.avatar-badge--c6 { background-color: var(--chart-7); }
.avatar-badge--c7 { background-color: var(--chart-8); }

/* Uploaded profile photo inside the avatar circle (T67, server mode). */
.avatar-badge--photo {
  overflow: hidden;
  background-color: var(--surface-alt);
}

.avatar-badge--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

/* Overlapping avatar group. */
.avatar-group {
  display: inline-flex;
}

.avatar-group .avatar-badge {
  border: 2px solid var(--surface);
}

.avatar-group .avatar-badge + .avatar-badge {
  margin-inline-start: -10px;
}

/* ========================================================================== */
/* 5. Data table                                                              */
/* ========================================================================== */

.table-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-inner);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
}

.data-table th,
.data-table td {
  padding: var(--sp-3) var(--sp-4);
  text-align: start;
  vertical-align: middle;
}

.data-table th {
  font-size: var(--fs-tiny);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  background-color: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

/* The whole header content is a real <button> (correct ARIA: th keeps the
   columnheader role + aria-sort; the button provides keyboard semantics). */
.th-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  color: inherit;
  cursor: pointer;
}

.th-sort-btn:hover {
  color: var(--text);
}

.sort-indicator {
  display: inline-flex;
}

.data-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background-color var(--transition-fast);
}

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

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

.data-table tbody tr.is-clickable {
  cursor: pointer;
}

.data-table .cell-main {
  font-weight: var(--fw-medium);
  color: var(--text);
}

.data-table .cell-sub {
  font-size: var(--fs-tiny);
  color: var(--text-secondary);
}

.data-table .cell-person {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

/* ========================================================================== */
/* 6. Pagination                                                              */
/* ========================================================================== */

.table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.table-count {
  font-size: var(--fs-small);
  color: var(--text-secondary);
}

.pagination {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.pagination .page-info {
  font-size: var(--fs-small);
  color: var(--text-secondary);
  min-width: 80px;
  text-align: center;
}

.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text);
  transition: background-color var(--transition-fast);
}

.page-btn:hover:not(:disabled) {
  background-color: var(--surface-alt);
}

.page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ========================================================================== */
/* 7. Modal & confirm dialog                                                  */
/* ========================================================================== */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  background-color: var(--overlay);
}

.modal {
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - var(--sp-12));
  display: flex;
  flex-direction: column;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-pop);
}

.modal--wide {
  max-width: 760px;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-6) 0;
}

.modal-title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}

.modal-body {
  padding: var(--sp-4) var(--sp-6);
  overflow-y: auto;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  padding: 0 var(--sp-6) var(--sp-5);
}

.modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background-color: var(--surface);
  color: var(--text-secondary);
  flex-shrink: 0;
}

.modal-close:hover {
  background-color: var(--surface-alt);
  color: var(--text);
}

.confirm-message {
  color: var(--text-secondary);
}

/* ========================================================================== */
/* 8. Toast notifications                                                     */
/* ========================================================================== */

.toast-region {
  position: fixed;
  bottom: var(--sp-6);
  inset-inline-end: var(--sp-6);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-width: 360px;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background-color: var(--dark);
  color: var(--text-on-dark);
  border-radius: var(--radius-inner);
  box-shadow: var(--shadow-dark-card);
  font-size: var(--fs-small);
}

.toast-icon {
  display: inline-flex;
  flex-shrink: 0;
}

.toast--success .toast-icon { color: var(--chart-2); }
.toast--error .toast-icon { color: var(--chart-5); }
.toast--info .toast-icon { color: var(--chart-3); }

/* ========================================================================== */
/* 9. Dropdown menu                                                           */
/* ========================================================================== */

.dropdown-menu {
  position: absolute;
  z-index: var(--z-dropdown);
  min-width: 180px;
  padding: var(--sp-2);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-inner);
  box-shadow: var(--shadow-pop);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-small);
  font-size: var(--fs-small);
  color: var(--text);
  text-align: start;
  transition: background-color var(--transition-fast);
}

.dropdown-item:hover {
  background-color: var(--surface-alt);
}

.dropdown-item--danger {
  color: var(--danger-text);
}

/* ========================================================================== */
/* 10. Tabs                                                                   */
/* ========================================================================== */

.tabs {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.tab-list {
  display: inline-flex;
  align-self: flex-start;
  gap: var(--sp-1);
  padding: var(--sp-1);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}

.tab-btn {
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  white-space: nowrap;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

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

.tab-btn[aria-selected='true'] {
  background-color: var(--dark);
  color: var(--text-on-dark);
}

/* ========================================================================== */
/* 11. Empty state                                                            */
/* ========================================================================== */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-10) var(--sp-6);
  text-align: center;
}

.empty-state-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  background-color: var(--accent-soft);
  color: var(--text);
}

.empty-state-title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
}

.empty-state-message {
  max-width: 40ch;
  font-size: var(--fs-small);
  color: var(--text-secondary);
}

/* ========================================================================== */
/* 12. Loading skeleton                                                       */
/* ========================================================================== */

.skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.skeleton-line {
  height: 14px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--surface-alt) 25%, var(--border) 50%, var(--surface-alt) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

.skeleton-line--wide { width: 100%; }
.skeleton-line--medium { width: 70%; }
.skeleton-line--narrow { width: 45%; }

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ========================================================================== */
/* 13. Page patterns                                                          */
/* ========================================================================== */

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.page-actions {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.filter-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}

.filter-bar .search-input {
  flex: 1;
  min-width: 200px;
  max-width: 320px;
}

.field-select--inline {
  width: auto;
  min-width: 160px;
}

/* Segmented pill control (view toggles). */
.seg-control {
  display: inline-flex;
  gap: var(--sp-1);
  padding: var(--sp-1);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}

.seg-btn {
  padding: var(--sp-1) var(--sp-4);
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.seg-btn:hover {
  color: var(--text);
}

.seg-btn.is-active {
  background-color: var(--dark);
  color: var(--text-on-dark);
}

/* Person/grid cards. */
.person-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--sp-4);
}

.person-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-5);
  text-align: center;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-inner);
  transition: background-color var(--transition-fast);
  cursor: pointer;
}

.person-card:hover {
  background-color: var(--surface-alt);
}

.person-card .cell-main {
  font-weight: var(--fw-semibold);
}

.person-card .cell-sub {
  font-size: var(--fs-tiny);
  color: var(--text-secondary);
}

/* Read-only colleague directory card (employee portal, T65). Reuses the
   .person-grid layout but reads left-aligned, with the projected work contact
   details stacked beneath the name and role. No sensitive field is shown. */
.directory-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-1);
  padding: var(--sp-4);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-inner);
}

.directory-card .avatar-badge {
  margin-bottom: var(--sp-1);
}

.directory-card .cell-main {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: var(--fw-semibold);
}

.directory-card .cell-sub {
  font-size: var(--fs-tiny);
  color: var(--text-secondary);
}

.directory-contact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--sp-2);
  word-break: break-word;
}

.directory-label {
  color: var(--text-secondary);
}

/* Inline notice banner (non-working day, info notes). */
.notice {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  background-color: var(--info-soft);
  color: var(--info-text);
  border-radius: var(--radius-inner);
  font-size: var(--fs-small);
}

.notice--warning {
  background-color: var(--warning-soft);
  color: var(--warning-text);
}

/* Date navigation cluster (attendance, calendar). */
.date-nav {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.date-nav .field-input {
  width: auto;
}

/* Attendance month grid (employees × days). */
.att-grid-wrap {
  overflow: auto;
  max-height: 70vh; /* the wrap is the scroll container, so sticky headers work */
  border: 1px solid var(--border);
  border-radius: var(--radius-inner);
}

.att-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-tiny);
}

.att-grid th,
.att-grid td {
  padding: var(--sp-1);
  text-align: center;
  border-bottom: 1px solid var(--border);
  min-width: 28px;
}

.att-grid th {
  position: sticky;
  top: 0;
  background-color: var(--surface-alt);
  color: var(--text-secondary);
  font-weight: var(--fw-semibold);
  z-index: 1;
}

.att-grid tbody tr:last-child th,
.att-grid tbody tr:last-child td {
  border-bottom: 0;
}

.att-grid .att-name {
  position: sticky;
  inset-inline-start: 0;
  background-color: var(--surface);
  text-align: start;
  min-width: 180px;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--text);
  z-index: 1;
}

.att-grid thead .att-name {
  background-color: var(--surface-alt);
  z-index: 2;
}

.att-grid td.is-off {
  background-color: var(--surface-alt);
}

.att-grid thead th.is-off {
  background-color: var(--border);
  color: var(--text);
}

/* One day cell: a clickable button holding a lettered status mark.
   The letter (P/L/H/A/V — same codes as the CSV export) carries the status
   alongside the color, so the grid never relies on color alone. */
.att-cell-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-pill);
  transition: background-color var(--transition-fast);
}

.att-cell-btn:hover {
  background-color: var(--surface-alt);
}

.att-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-tiny);
  font-weight: var(--fw-bold);
  line-height: 1;
}

.att-mark--present { background-color: var(--success-soft); color: var(--success-text); }
.att-mark--late { background-color: var(--warning-soft); color: var(--warning-text); }
.att-mark--absent { background-color: var(--danger-soft); color: var(--danger-text); }
.att-mark--half-day { background-color: var(--info-soft); color: var(--info-text); }
/* Stable, preset-independent color for leave — never tied to --accent. */
.att-mark--leave { background-color: var(--chart-1); color: var(--text-on-accent); }
.att-mark--none {
  background-color: transparent;
  border: 1px dashed var(--border-dashed);
}

/* Status legend below the grid. */
.legend {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  font-size: var(--fs-tiny);
  color: var(--text-secondary);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}

/* Payslip document (screen + print). */
.payslip {
  max-width: 720px;
  margin: 0 auto;
}

.payslip-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}

.payslip-company {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.payslip-doc-title {
  text-align: end;
}

/* Payment-status badge in the document head. Forces its soft background to
   survive printing so the Paid/Unpaid state is unambiguous on paper; the same
   label is also repeated as text in the meta grid as a fallback. */
.payslip-status {
  margin-top: var(--sp-2);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* Typography inside the document head (cell-main/-sub are otherwise only
   styled within tables and cards). */
.payslip-company .cell-main {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
}

.payslip-doc-title .cell-main {
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
}

.payslip-doc-title .cell-sub {
  font-size: var(--fs-small);
  color: var(--text-secondary);
}

.payslip-meta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-3) var(--sp-6);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--border);
}

.payslip .line-total {
  border-top: 1px solid var(--border);
  padding-top: var(--sp-3);
}

.payslip-footer {
  margin-top: var(--sp-5);
  font-size: var(--fs-tiny);
  color: var(--text-secondary);
}

@media print {
  .payslip {
    max-width: none;
  }
}

/* Global search palette (js/global.js). */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh var(--sp-4) var(--sp-4);
  background-color: var(--overlay);
}

.search-palette {
  width: 100%;
  max-width: 560px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}

.search-input-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
}

.search-input-row input {
  flex: 1;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-h3);
  color: var(--text);
  outline: none;
}

.search-results {
  overflow-y: auto;
  padding: var(--sp-2);
}

.search-group-label {
  padding: var(--sp-2) var(--sp-3) var(--sp-1);
  font-size: var(--fs-tiny);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

.search-result {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-small);
  text-align: start;
  font-size: var(--fs-small);
  color: var(--text);
}

.search-result:hover,
.search-result.is-active {
  background-color: var(--surface-alt);
}

.search-result .cell-sub {
  font-size: var(--fs-tiny);
  color: var(--text-secondary);
}

.search-empty,
.search-hint {
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
  text-align: center;
  font-size: var(--fs-small);
  color: var(--text-secondary);
}

/* Dashboard ---------------------------------------------------------------- */

.dash-hero {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--sp-6);
  align-items: center;
}

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

.stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
}

.stat-big {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 96px;
}

.stat-big-value {
  font-size: var(--fs-display);
  font-weight: var(--fw-light);
  line-height: var(--lh-tight);
}

.stat-big-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-small);
  color: var(--text-secondary);
}

/* Signature segmented bar (recruitment pipeline distribution). */
.segbar {
  display: flex;
  gap: var(--sp-1);
  height: 28px;
  margin-top: var(--sp-2);
}

.segbar-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 10px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-tiny);
  font-weight: var(--fw-semibold);
  color: var(--text-on-accent);
  overflow: hidden;
  white-space: nowrap;
}

.segbar-seg--new { background-color: var(--info); color: var(--text-on-accent); }
.segbar-seg--screening { background-color: var(--accent); color: var(--text-on-accent); }
.segbar-seg--interview { background-color: var(--warning); color: var(--text-on-accent); }
.segbar-seg--offer { background-color: var(--success); color: var(--text-on-accent); }
.segbar-seg--empty {
  flex: 1;
  background-color: transparent;
  border: 1px dashed var(--border-dashed);
}

.segbar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-3);
  font-size: var(--fs-tiny);
  color: var(--text-secondary);
}

/* Card header: title on the left, an action link (e.g. "Manage →") on the
   right. Used by dashboard cards that link out to a full page. */
.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}

.card-head .text-link {
  flex-shrink: 0;
  font-size: var(--fs-small);
}

/* The pre-JS fallback: a plain grid (short cards can leave a gap below them,
   but the content is complete). dashboard.js upgrades this to balanced columns
   (.is-masonry) once the cards are measured — see below. */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-5);
  align-items: start;
}

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

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

/* Masonry mode (JS on): shortest-column packing — every column packs top to
   bottom with no gaps, at any width and any data. Cards are distributed into
   .dash-col containers by dashboard.js; the column count tracks the same
   768/1100 breakpoints as the fallback grid. Direction-agnostic (flex row),
   so RTL mirrors via the document dir with no left/right here. */
.dash-grid.is-masonry {
  display: flex;
  align-items: flex-start;
}

.dash-col {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
  gap: var(--sp-5);
}

/* In masonry mode the vertical rhythm comes from the column gap, so drop the
   per-card top margin (otherwise the top card of each column gets double space). */
.dash-grid.is-masonry .card {
  margin-top: 0;
}

/* Dark card (tasks / reminders — the reference's signature dark panel). */
.dash-dark {
  background-color: var(--dark);
  color: var(--text-on-dark);
  border: 0;
  box-shadow: var(--shadow-dark-card);
}

.dash-dark .card-title {
  color: var(--text-on-dark);
}

/* Icon actions on the dark card (T57): the "Add task" head button and each
   task's kebab menu reuse .icon-btn, compacted and recoloured for the dark
   surface; hover mirrors .btn--primary (accent pill with dark icon). */
.dash-dark .card-head {
  align-items: center;
}

.dash-dark .icon-btn {
  width: 32px;
  height: 32px;
  background-color: var(--dark-surface);
  border-color: var(--dark-surface);
  color: var(--text-on-dark);
  flex-shrink: 0;
}

.dash-dark .icon-btn:hover {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent);
}

.dash-dark-sub {
  font-size: var(--fs-tiny);
  color: var(--text-on-dark-secondary);
}

.task-list {
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.task-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}

.task-item label {
  flex: 1;
  font-size: var(--fs-small);
  cursor: pointer;
}

/* Meta line under the task title: due date and/or assignee name. */
.task-item .task-meta {
  display: block;
  font-size: var(--fs-tiny);
  color: var(--text-on-dark-secondary);
  margin-top: 2px;
}

.task-item.is-done label {
  text-decoration: line-through;
  color: var(--text-on-dark-secondary);
}

/* Activity / upcoming feed. */
.feed {
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.feed-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-small);
}

.feed-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background-color: var(--accent-soft);
  color: var(--text);
}

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

.feed-time {
  font-size: var(--fs-tiny);
  color: var(--text-secondary);
}

/* HR Activity feed (employee profile): a badge + date head, then one or two
   text lines. Reuses the .feed / .feed-item / .feed-body layout. */
.feed-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.feed-line {
  display: block;
  margin-top: var(--sp-1);
}

.feed-line--muted {
  color: var(--text-secondary);
  font-size: var(--fs-small);
}

/* "Out today" avatar list. */
.out-list {
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.out-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-small);
}

/* Charts (SVG, js/charts.js). Palette classes set `color`; SVG shapes use
   fill/stroke="currentColor" so one class drives both — keeps raw colors in
   theme.css only. */
.chart {
  width: 100%;
  height: auto;
  display: block;
}

.chart-c1 { color: var(--chart-1); }
.chart-c2 { color: var(--chart-2); }
.chart-c3 { color: var(--chart-3); }
.chart-c4 { color: var(--chart-4); }
.chart-c5 { color: var(--chart-5); }
.chart-c6 { color: var(--chart-6); }
.chart-c7 { color: var(--chart-7); }
.chart-c8 { color: var(--chart-8); }
.chart-accent { color: var(--accent); }
.chart-success { color: var(--success); }
.chart-info { color: var(--info); }
.chart-grid { color: var(--border); }

.chart-axis-label {
  fill: var(--text-secondary);
  font-size: 12px;
  font-family: var(--font);
}

.chart-value-label {
  fill: var(--text-secondary);
  font-size: 11px;
  font-family: var(--font);
}

.chart-center-value {
  fill: var(--text);
  font-size: 26px;
  font-weight: var(--fw-light);
  font-family: var(--font);
}

.chart-center-label {
  fill: var(--text-secondary);
  font-size: 12px;
  font-family: var(--font);
}

.chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  color: var(--text-secondary);
  font-size: var(--fs-small);
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-3);
  font-size: var(--fs-small);
}

.chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.chart-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-pill);
  background-color: currentColor;
  flex-shrink: 0;
}

.chart-legend-value {
  color: var(--text-secondary);
}

/* Two-column chart grid for the reports page. */
.chart-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
}

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

/* Kanban board (candidate pipeline). */
.kanban {
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  padding-bottom: var(--sp-3);
  align-items: flex-start;
}

.kanban-col {
  display: flex;
  flex-direction: column;
  flex: 0 0 264px;
  max-width: 264px;
  background-color: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-inner);
}

.kanban-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
}

.kanban-col-title {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
}

.kanban-col-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

.kanban-col-dot--new { background-color: var(--info); }
.kanban-col-dot--screening { background-color: var(--accent-strong); }
.kanban-col-dot--interview { background-color: var(--warning); }
.kanban-col-dot--offer { background-color: var(--success); }
.kanban-col-dot--hired { background-color: var(--success); }
.kanban-col-dot--rejected { background-color: var(--danger); }

.kanban-col-count {
  font-size: var(--fs-tiny);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0 var(--sp-2);
  min-width: 22px;
  text-align: center;
}

.kanban-col-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-3);
  min-height: 120px;
  transition: background-color var(--transition-fast);
}

.kanban-col-body.is-drop-target {
  background-color: var(--accent-soft);
}

.kanban-empty {
  padding: var(--sp-5) var(--sp-3);
  text-align: center;
  font-size: var(--fs-tiny);
  color: var(--text-secondary);
  border: 1px dashed var(--border-dashed);
  border-radius: var(--radius-small);
}

.kanban-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: box-shadow var(--transition-fast), opacity var(--transition-fast);
}

.kanban-card:hover {
  box-shadow: var(--shadow-pop);
}

.kanban-card.is-dragging {
  opacity: 0.5;
}

.kanban-card-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* The name is a real button (keyboard path to the detail modal) styled to
   read as the card title — the card itself is a plain draggable container,
   so no interactive element is nested inside a role="button". */
.kanban-card-name {
  flex: 1;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--text);
  text-align: start;
  cursor: pointer;
}

.kanban-card-name:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.kanban-card-sub {
  font-size: var(--fs-tiny);
  color: var(--text-secondary);
}

.kanban-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}

.kanban-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  font-size: var(--fs-tiny);
  color: var(--text-secondary);
}

/* Star rating (filled = accent highlight, with a numeric aria-label so the
   rating is never conveyed by color alone). */
.rating {
  display: inline-flex;
  gap: 1px;
  color: var(--border);
  line-height: 1;
}

.rating .star--on {
  color: var(--accent-strong);
}

/* Stage move list inside the candidate modal. */
.stage-move {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.note-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.note-item {
  padding: var(--sp-2) var(--sp-3);
  background-color: var(--surface-alt);
  border-radius: var(--radius-small);
  font-size: var(--fs-small);
}

.note-item-meta {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-tiny);
  color: var(--text-secondary);
}

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.timeline-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-small);
}

.timeline-date {
  font-size: var(--fs-tiny);
  color: var(--text-secondary);
  margin-inline-start: auto;
}

/* Month calendar (leave overview, events). */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--sp-1);
}

.cal-head {
  padding: var(--sp-1);
  text-align: center;
  font-size: var(--fs-tiny);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

.cal-day {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-1);
  min-height: 84px;
  padding: var(--sp-2);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  text-align: start;
  transition: background-color var(--transition-fast);
}

button.cal-day:hover {
  background-color: var(--surface-alt);
}

.cal-day.is-off {
  background-color: var(--surface-alt);
}

.cal-day.is-today {
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 1px var(--accent-strong);
}

.cal-day.is-empty {
  background-color: transparent;
  border-style: dashed;
  border-color: var(--border-dashed);
}

.cal-day-num {
  font-size: var(--fs-tiny);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
}

.cal-day-holiday {
  font-size: var(--fs-tiny);
  color: var(--warning-text);
}

.cal-more {
  font-size: var(--fs-tiny);
  color: var(--text-secondary);
}

/* Event chips inside a calendar day cell. */
.cal-events {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  min-width: 0;
}

.cal-event {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  width: 100%;
  min-width: 0;
  padding: 1px var(--sp-1);
  border-radius: var(--radius-small);
  background-color: var(--surface-alt);
  font-size: var(--fs-tiny);
}

.cal-event-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-event-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

.cal-dot--holiday { background-color: var(--warning); }
.cal-dot--leave { background-color: var(--info); }
.cal-dot--birthday { background-color: var(--success); }
.cal-dot--event { background-color: var(--accent-strong); }

.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-4);
  font-size: var(--fs-tiny);
  color: var(--text-secondary);
}

.cal-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}

.avatar-badge--sm {
  width: 24px;
  height: 24px;
  font-size: var(--fs-tiny);
}

/* Auth pages (login / register / forgot password / 404) — standalone,
   centered, no app chrome. */
.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--sp-6) var(--sp-4);
}

.auth-card {
  width: 100%;
  max-width: 400px;
  padding: var(--sp-8);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  justify-content: center;
  margin-bottom: var(--sp-6);
}

.auth-title {
  font-size: var(--fs-h1);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  text-align: center;
}

.auth-sub {
  margin-top: var(--sp-2);
  margin-bottom: var(--sp-6);
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--fs-small);
}

.auth-card .btn {
  width: 100%;
  margin-top: var(--sp-2);
}

.auth-links {
  margin-top: var(--sp-5);
  text-align: center;
  font-size: var(--fs-small);
  color: var(--text-secondary);
}

.auth-note {
  margin-top: var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  background-color: var(--info-soft);
  color: var(--info-text);
  border-radius: var(--radius-inner);
  font-size: var(--fs-tiny);
}

/* Big muted numeral — never yellow text (design-system rule); size stays on
   the typographic scale. */
.auth-404-code {
  font-size: var(--fs-display);
  font-weight: var(--fw-light);
  line-height: 1;
  text-align: center;
  color: var(--text-secondary);
}

/* Settings — appearance controls. */
.settings-field {
  margin-bottom: var(--sp-5);
}

.settings-field-label {
  display: block;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  margin-bottom: var(--sp-2);
}

.accent-swatches {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

/* Each swatch carries data-accent="..." so its own --accent resolves to the
   preset color — no raw colors needed here. */
.accent-swatch {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background-color: var(--accent);
  border: 2px solid var(--border);
  cursor: pointer;
  transition: transform var(--transition-fast);
}

.accent-swatch:hover {
  transform: scale(1.08);
}

.accent-swatch.is-selected {
  border-color: var(--text);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text);
}

/* Working-days checkbox row. */
.day-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.day-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-small);
}

.data-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* Side-by-side cards (departments/positions, settings sections). */
.split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  align-items: start;
  margin-top: var(--sp-5);
}

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

/* Two-column modal forms. */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--sp-4);
}

.form-grid .field--full {
  grid-column: 1 / -1;
}

/* Inline checkbox row inside a modal form (boolean flags). */
.check-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-small);
  cursor: pointer;
}

.check-row input[type='checkbox'] {
  flex: none;
}

/* Profile page header. */
.profile-head {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
}

.profile-identity {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 200px;
}

.profile-name {
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}

.profile-role {
  font-size: var(--fs-small);
  color: var(--text-secondary);
}

.profile-head .page-actions {
  margin-inline-start: auto;
}

/* Label/value pairs (profile overview, salary breakdown). */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-4) var(--sp-6);
}

/* Spacing utility: vertical rhythm between stacked sections inside a card. */
.section-gap {
  margin-top: var(--sp-6);
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.info-label {
  font-size: var(--fs-tiny);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

.info-value {
  font-size: var(--fs-body);
  color: var(--text);
}

/* Compact stat chips (attendance summary, leave balances). */
.chip-row {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.stat-chip {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-4);
  min-width: 110px;
  background-color: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-inner);
}

.stat-chip-value {
  font-size: var(--fs-h2);
  font-weight: var(--fw-light);
  line-height: var(--lh-tight);
}

.stat-chip-label {
  font-size: var(--fs-tiny);
  color: var(--text-secondary);
}

/* Simple definition list rows (salary lines). */
.line-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.line-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-2) 0;
  border-bottom: 1px dashed var(--border-dashed);
  font-size: var(--fs-small);
}

.line-list li:last-child {
  border-bottom: 0;
}

.line-list .line-total {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
}

/* Named salary-component editor rows (payroll structure modal): a type
   dropdown + optional custom name + amount + remove, wrapping on narrow
   screens. The name field flexes; the amount stays compact. */
.component-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-2);
}

.component-row .field-select {
  width: auto;
  min-width: 140px;
}

.component-row .field-input[type='text'] {
  flex: 1;
  min-width: 140px;
}

.component-row .field-input[type='number'] {
  width: 120px;
}

/* Inline text links (breadcrumbs, "back to" links). */
.text-link {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--border-dashed);
  transition: color var(--transition-fast);
}

.text-link:hover {
  color: var(--text-secondary);
}

/* Checkboxes pick up the brand accent. */
input[type='checkbox'] {
  accent-color: var(--accent-strong);
  width: 16px;
  height: 16px;
}

.select-col {
  width: 36px;
}

/* ========================================================================== */
/* 14. Responsive                                                             */
/* ========================================================================== */

@media (max-width: 768px) {
  .table-toolbar,
  .table-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .search-input input {
    min-width: 0;
    width: 100%;
  }

  .toast-region {
    inset-inline: var(--sp-4);
    bottom: var(--sp-4);
    max-width: none;
  }

  .modal {
    max-height: calc(100vh - var(--sp-8));
  }

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

  .filter-bar .search-input {
    max-width: none;
  }

  /* Page header stacks so the title and actions each get a full row. */
  .page-head {
    flex-direction: column;
    align-items: stretch;
  }

  /* Kanban shows one column at a time with a peek at the next. */
  .kanban-col {
    flex: 0 0 80vw;
    max-width: 80vw;
  }

  /* Denser calendar cells on small screens. */
  .cal-day {
    min-height: 64px;
    padding: var(--sp-1);
  }

  .cal-grid {
    gap: 2px;
  }
}

/* Search palette: the command result text can wrap on very small screens. */
@media (max-width: 480px) {
  .search-palette {
    max-height: 80vh;
  }

  .search-input-row input {
    font-size: var(--fs-body);
  }
}

/* ========================================================================== */
/* 15. Boot overlay (server-mode hydration gate)                              */
/* ========================================================================== */
/* Shown by store.js while it hydrates the dataset from the API (server mode   */
/* only). Token-only styling; no raw colors. role=status + aria-busy live on   */
/* the element in JS so the wait is announced to assistive tech.               */

.boot-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  background-color: var(--overlay);
}

.boot-overlay-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-6);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-pop);
  color: var(--text);
  font-family: var(--font);
}

.boot-overlay-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--accent-strong);
  border-radius: var(--radius-pill);
  animation: boot-spin 0.8s linear infinite;
}

.boot-overlay-text {
  margin: 0;
  font-size: var(--fs-body);
  color: var(--text-secondary);
}

.boot-overlay--error .boot-overlay-spinner {
  display: none;
}

.boot-overlay--error .boot-overlay-text {
  color: var(--danger);
}

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

@media (prefers-reduced-motion: reduce) {
  .boot-overlay-spinner {
    animation: none;
  }
}

/* ========================================================================== */
/* 16. Goal meter (T68 performance goals)                                     */
/* ========================================================================== */
/* A small track + accent fill + % label, used by the employee-detail Goals tab
   and the portal "My goals" card. The fill width is set by JS
   (element.style.width = 'NN%') — the dashboard segmented progress uses the
   same dynamic-style pattern. */

.goal-meter {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 120px;
}

.goal-meter-track {
  flex: 1 1 auto;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--surface-alt);
  border: 1px solid var(--border);
  overflow: hidden;
}

.goal-meter-fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background-color: var(--accent);
}

.goal-meter-label {
  font-size: var(--fs-small);
  color: var(--text-secondary);
  min-width: 36px;
  text-align: end;
}

/* ========================================================================== */
/* 17. Checklists (T70 onboarding/offboarding)                                */
/* ========================================================================== */
/* A checklist block: header row (kind/status badges + meter + actions) and an
   item list. Items carry a native checkbox, the title, a type badge and the
   per-item actions (attach/download for document items). The template-modal
   builder reuses .checklist-item-row for its editable rows. */

.checklist-block {
  border: 1px solid var(--border);
  border-radius: var(--radius-inner);
  padding: var(--sp-4);
}

.checklist-block + .checklist-block {
  margin-block-start: var(--sp-4);
}

.checklist-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.checklist-head .goal-meter {
  margin-inline-start: auto;
}

.checklist-items {
  list-style: none;
  margin: var(--sp-3) 0 0;
  padding: 0;
}

.checklist-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-block-start: 1px dashed var(--border-dashed);
  flex-wrap: wrap;
}

.checklist-item-title {
  font-size: var(--fs-body);
  color: var(--text);
}

.checklist-item.is-done .checklist-item-title {
  color: var(--text-secondary);
  text-decoration: line-through;
}

.checklist-item-actions {
  margin-inline-start: auto;
  display: inline-flex;
  gap: var(--sp-2);
  align-items: center;
}

/* Template modal: one editable item per row. */
.checklist-item-row {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  margin-block-end: var(--sp-2);
  flex-wrap: wrap;
}

.checklist-item-row .field-input {
  flex: 1 1 160px;
}

.checklist-item-row select.field-input {
  flex: 0 1 130px;
}

.checklist-required-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-small);
  color: var(--text-secondary);
  white-space: nowrap;
}

/* ========================================================================== */
/* 18. Org chart (T74)                                                        */
/* ========================================================================== */
/* A nested-list tree (ul.org-tree > li.org-li > [card] + ul.org-children).
   Connectors are drawn with pseudo-elements; the canvas is zoomed via a JS
   transform and panned by scrolling the .org-scroller. Colors/spacing come
   only from tokens. */

.org-toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-block-end: var(--sp-4);
}

.org-zoom-label {
  min-width: 48px;
  text-align: center;
  font-size: var(--fs-small);
  color: var(--text-secondary);
}

.org-scroller {
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-inner);
  background-color: var(--surface-alt);
  padding: var(--sp-6);
}

.org-canvas {
  display: inline-block;
  transform-origin: top center;
  transition: transform var(--transition-fast);
}

/* The tree itself. Each level is a flex row of subtrees. */
.org-tree,
.org-children {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

.org-li {
  position: relative;
  padding-block-start: var(--sp-6);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Vertical line up from each node to the horizontal connector. */
.org-li::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  width: 1px;
  height: var(--sp-6);
  background-color: var(--border-dashed);
}

/* Horizontal connector spanning siblings: each child draws a half-line on
   each side; the first/last trim the outer half so the bar stops at the ends. */
.org-children > .org-li::after {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 1px;
  background-color: var(--border-dashed);
}

.org-children > .org-li:first-child::after {
  inset-inline-start: 50%;
  width: 50%;
}

.org-children > .org-li:last-child::after {
  width: 50%;
}

.org-children > .org-li:only-child::after {
  display: none;
}

/* The root level has nothing above it. */
.org-tree > .org-li {
  padding-block-start: 0;
}

.org-tree > .org-li::before,
.org-tree > .org-li::after {
  display: none;
}

/* Sibling subtrees get horizontal breathing room. */
.org-children > .org-li {
  padding-inline: var(--sp-3);
}

.org-tree > .org-li + .org-li {
  margin-inline-start: var(--sp-5);
}

/* The person card. */
.org-node {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 160px;
  max-width: 200px;
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background-color: var(--surface);
  box-shadow: var(--shadow-card);
}

.org-node.is-activatable {
  cursor: pointer;
}

.org-node.is-activatable:hover {
  border-color: var(--accent-strong);
}

.org-node.is-activatable:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}

.org-node-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.org-node-id {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.org-node-name {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.org-node-role {
  font-size: var(--fs-tiny);
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.org-node-action {
  align-self: flex-start;
}

/* ========================================================================== */
/* 19. Asset enrichment (T77 depreciation + maintenance + history)            */
/* ========================================================================== */
/* The read-only book-value preview in the asset modal, and the read-only
   assignment-history list (one line per past/current assignment). Maintenance
   rows reuse .checklist-item-row. Colors/spacing come only from tokens. */

.asset-book-value {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  color: var(--text);
}

.asset-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.asset-history-item {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-block-start: 1px dashed var(--border-dashed);
  flex-wrap: wrap;
}

.asset-history-item:first-child {
  border-block-start: none;
}

.asset-history-who {
  font-size: var(--fs-body);
  color: var(--text);
}

.asset-history-when {
  margin-inline-start: auto;
  font-size: var(--fs-small);
  color: var(--text-secondary);
}