/* Master data, dashboard and payslip pages (src/views/employees, company, users, home, payslip). Theme tokens only. */

/* Page head: status badge + short status text + "?" on one tidy line. */
.head-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: .35rem; }
.head-status .help { margin-left: -2px; }

/* Breadcrumb above an employee's name. */
.crumb { margin: 0 0 .15rem; font-size: .8rem; font-weight: 600; letter-spacing: .02em; }
.crumb a { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); text-decoration: none; transition: color var(--dur) var(--ease); }
.crumb a::before { content: ""; width: 6px; height: 6px; border-left: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); margin: 0 2px 0 1px; }
.crumb a:hover { color: var(--accent); }

/* Dashboard and roles tables: the same compact size as the employees list. */
@media (min-width: 721px) {
  table.dash-table, table.role-table { font-size: .8rem; }
  table.dash-table th, table.role-table th { font-size: .7rem; }
  table.dash-table th, table.dash-table td, table.role-table th, table.role-table td { padding: .6rem .45rem; }
  table.dash-table td small, table.dash-table td .muted { font-size: .7rem; }
}
@media (min-width: 1280px) { table.dash-table th, table.dash-table td, table.role-table td:first-child { white-space: nowrap; } }
table.dash-table td.r, table.dash-table th.r { font-variant-numeric: tabular-nums; }
table.role-table td.muted { color: var(--text-2); }

/* Users: only the select that fits the role is shown (Department for HOD, Employee record for Employee). */
.users-table form.inline.user-role { flex-wrap: nowrap; max-width: none; }
.user-role:not(:has(select[name=role] option[value=hod]:checked)) :is(.sel-wrap:has(> select[name=dept]), select[name=dept]),
.user-role:not(:has(select[name=role] option[value=employee]:checked)) :is(.sel-wrap:has(> select[name=employee_id]), select[name=employee_id]),
.user-add:not(:has(select[name=role] option[value=hod]:checked)) label.if-hod,
.user-add:not(:has(select[name=role] option[value=employee]:checked)) label.if-emp { display: none; }
@media (max-width: 720px) { .users-table form.inline.user-role { flex-wrap: wrap; } }

/* Number fields on these forms: no native spinner buttons. */
#emp-form input[type=number], form[action="/company"] input[type=number] { -moz-appearance: textfield; appearance: textfield; }
#emp-form input[type=number]::-webkit-inner-spin-button, #emp-form input[type=number]::-webkit-outer-spin-button,
form[action="/company"] input[type=number]::-webkit-inner-spin-button, form[action="/company"] input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* Department suggestions: no native arrow on the text field. */
#emp-form input[list]::-webkit-calendar-picker-indicator { display: none !important; }

/* Long select values end with an ellipsis instead of being cut mid-letter. */
#emp-form select, form[action="/company"] select { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

/* Payslip: status badges sit on the row's text line. */
.slip-er td { vertical-align: middle; }
.slip-er .badge { font-size: .68rem; }

/* Users list: the same compact size as the employees list, so each user stays on one line at 1280. */
@media (min-width: 721px) {
  table.users-table { font-size: .8rem; }
  table.users-table th { font-size: .7rem; }
  table.users-table th, table.users-table td { padding: .5rem .4rem; }
  table.users-table td small, table.users-table td .muted { font-size: .7rem; }
  table.users-table .badge { font-size: .7rem; }
  table.users-table select, table.users-table input.small { --ctl-h: 32px; height: 32px; min-height: 32px; font-size: .8rem; padding-block: 0; border-radius: 9px; }
  table.users-table select[name=employee_id] { max-width: 9.5rem; }
  table.users-table input.small { width: 7rem; }
  table.users-table .btn.small { font-size: .74rem; min-height: 30px; padding-inline: .6rem; }
  table.users-table button.link { font-size: .8rem; }
}
@media (min-width: 1280px) { table.users-table td:not(:last-child) { white-space: nowrap; } }

/* Phones: dashboard tables stay inside their panel. */
@media (max-width: 720px) {
  table.dash-table { font-size: .74rem; }
  table.dash-table th { font-size: .66rem; }
  table.dash-table th, table.dash-table td { padding: .5rem .3rem; white-space: nowrap; }
  /* Users as cards: the role controls and password field sit under their label, full width. */
  table.users-table td[data-label="Role"] { flex-wrap: wrap; justify-content: flex-start; }
  table.users-table td[data-label="Role"]::before { flex-basis: 100%; }
  table.users-table .user-acts { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; white-space: normal; }
  table.users-table .user-acts form.inline { margin: 0; }
  table.users-table .user-acts input.small { width: 10rem; }
}