:root {
  color-scheme: light;
  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface-muted: #f8fafc;
  --surface-hover: #f1f5f9;
  --sidebar: #132238;
  --sidebar-strong: #0d1726;
  --sidebar-text: #dbe7f3;
  --sidebar-muted: #8fa2b7;
  --primary: #176bff;
  --primary-strong: #0f56d9;
  --primary-soft: #e8f0ff;
  --success: #16845b;
  --warning: #b56a05;
  --danger: #c43535;
  --text: #000000;
  --muted: #64748b;
  --border: #dbe4ee;
  --border-strong: #cbd5e1;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 16px 40px rgba(15, 23, 42, 0.08);
  --radius: 7px;
  --sidebar-width: 232px;
  --topbar-height: 50px;
  --ui-scale: 1;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0a0f1a;
    --surface: #131a29;
    --surface-muted: #1a2233;
    --surface-hover: #212a3d;
    --primary: #4a8dff;
    --primary-strong: #2f74f0;
    --primary-soft: #16233d;
    --success: #34d399;
    --warning: #fbbf24;
    --danger: #f87171;
    --text: #eef2f8;
    --muted: #93a2b8;
    --border: #263248;
    --border-strong: #34415c;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 16px 40px rgba(0, 0, 0, 0.5);
  }
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0f1a;
  --surface: #131a29;
  --surface-muted: #1a2233;
  --surface-hover: #212a3d;
  --primary: #4a8dff;
  --primary-strong: #2f74f0;
  --primary-soft: #16233d;
  --success: #34d399;
  --warning: #fbbf24;
  --danger: #f87171;
  --text: #eef2f8;
  --muted: #93a2b8;
  --border: #263248;
  --border-strong: #34415c;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 16px 40px rgba(0, 0, 0, 0.5);
}

* {
  box-sizing: border-box;
}

[hidden] { display: none !important; }

html {
  min-height: 100%;
  background: var(--bg);
}

body {
  min-height: 100vh;
  margin: 0;
  background:
    linear-gradient(180deg, rgba(244, 247, 251, 0.90), rgba(244, 247, 251, 0.78)),
    var(--app-background-image, none) center / cover fixed no-repeat,
    linear-gradient(180deg, rgba(23, 107, 255, 0.06), rgba(23, 107, 255, 0) 280px),
    var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  zoom: var(--ui-scale);
}

a {
  color: inherit;
  text-decoration: none;
}

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

code {
  padding: 2px 5px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface-muted);
  color: #334155;
  font-size: 15px;
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  width: var(--sidebar-width);
  overflow-y: auto;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0)),
    var(--sidebar);
  color: var(--sidebar-text);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 18px 0 36px rgba(15, 23, 42, 0.14);
  transition: transform 200ms ease;
}

.sidebar-resize-handle {
  position: absolute;
  top: 0;
  right: -3px;
  z-index: 21;
  width: 6px;
  height: 100%;
  cursor: col-resize;
}

.sidebar-resize-handle:hover,
.sidebar-resize-handle.active {
  background: rgba(23, 107, 255, 0.35);
}

html.sidebar-docked .sidebar {
  transform: translateX(-100%);
}

html.sidebar-docked .app-main {
  padding-left: 22px;
}

html.sidebar-docked .topbar {
  left: 0;
}

.dock-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background 150ms ease;
}

.dock-toggle:hover {
  background: var(--surface-hover);
}

@media (min-width: 821px) {
  .dock-toggle {
    display: inline-flex;
  }
}

.font-size-stepper {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.font-size-stepper button {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-weight: 700;
  transition: background 150ms ease;
}

.font-size-stepper button:hover {
  background: var(--surface-hover);
}

.font-size-stepper span {
  min-width: 34px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #ffffff;
  text-align: center;
}

.brand img {
  width: 84px;
  height: 84px;
  border-radius: 12px;
  object-fit: contain;
  padding: 8px;
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(23, 107, 255, 0.25);
  margin-bottom: 4px;
}

.brand-company-name {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
}

.brand-company-id {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.02em;
}

.sidebar nav {
  display: grid;
  gap: 4px;
  padding: 9px 8px 18px;
}

.nav-group {
  display: grid;
  border-radius: var(--radius);
}

.nav-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 30px;
  padding: 6px 8px;
  border-radius: var(--radius);
  color: var(--sidebar-muted);
  cursor: pointer;
  font-size: 16px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
  transition: background 160ms ease, color 160ms ease;
}

.nav-group-title::-webkit-details-marker {
  display: none;
}

.nav-group-title::before {
  content: "›";
  width: 14px;
  margin-right: 4px;
  color: var(--sidebar-muted);
  font-size: 23px;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform 160ms ease, color 160ms ease;
}

.nav-group-title span {
  flex: 1;
}

.nav-group-title small {
  min-width: 24px;
  margin: 0;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--sidebar-muted);
  font-size: 15px;
  text-align: center;
}

.nav-group[open] .nav-group-title,
.nav-group-title:hover,
.nav-group-title:focus-visible {
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
  outline: none;
}

.nav-group[open] .nav-group-title::before {
  color: #ffffff;
  transform: rotate(90deg);
}

.nav-group-items {
  display: grid;
  gap: 3px;
  padding: 4px 0 6px 18px;
}

.sidebar nav a {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 8px;
  border-radius: var(--radius);
  color: var(--sidebar-muted);
  font-size: 17px;
  font-weight: 650;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.sidebar nav a:hover,
.sidebar nav a:focus-visible,
.sidebar nav a.active {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  outline: none;
  transform: translateX(2px);
}

.sidebar nav a.active {
  box-shadow: inset 3px 0 0 var(--primary);
}

.app-main {
  min-height: 100vh;
  padding: 66px 18px 24px calc(var(--sidebar-width) + 18px);
  overflow-x: hidden;
}

.app-main.no-sidebar {
  padding-left: 22px;
}

.login-main {
  position: relative;
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(5, 5, 5, 0.72), rgba(5, 5, 5, 0.82)),
    var(--app-background-image, none) center / cover no-repeat,
    #050505;
}

.login-main::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.06), transparent 38%);
  pointer-events: none;
}

.topbar {
  position: fixed;
  inset: 0 0 auto var(--sidebar-width);
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--topbar-height);
  padding: 0 22px;
  background: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid rgba(203, 213, 225, 0.75);
  backdrop-filter: blur(14px);
}

.topbar strong {
  display: block;
  color: #000000;
  font-size: 20px;
  line-height: 1.15;
}

.topbar span,
small,
.muted {
  color: var(--muted);
}

.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background 150ms ease;
}

.menu-toggle:hover {
  background: var(--surface-hover);
}

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 19;
  background: rgba(15, 23, 42, 0.45);
}

.sidebar-backdrop.open {
  display: block;
}

small {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  line-height: 1.3;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h2 {
  margin-bottom: 14px;
  color: #000000;
  font-size: 17px;
  line-height: 1.25;
}

.grid {
  display: grid;
  gap: 16px;
  align-items: start;
  min-width: 0;
}

.grid > * {
  min-width: 0;
}

.grid.two {
  grid-template-columns: minmax(320px, 0.86fr) minmax(0, 1.64fr);
}

.panel,
.login-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.panel {
  padding: 18px;
  overflow: hidden;
}

.panel-heading-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.panel-heading-row h2 {
  margin: 0;
}

.panel-heading-row .muted {
  margin: 4px 0 0;
  text-align: right;
}

.maintenance-group,
.leave-maintenance-group {
  display: grid;
  gap: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.maintenance-heading,
.leave-maintenance-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.table-wrap {
  max-height: 72vh;
  min-width: 0;
  width: 100%;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.table-wrap table {
  min-width: 760px;
}

.table-wrap table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-muted);
}


.login-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 430px);
  padding: 34px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
}

.lang-switcher select {
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.login-panel h1 {
  margin-bottom: 6px;
  color: #000000;
  font-size: 36px;
  line-height: 1.15;
}

.login-panel .muted {
  margin-top: 18px;
  margin-bottom: 0;
}

.auth-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
}

.auth-tabs .auth-tab {
  flex: 1;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.auth-tabs .auth-tab.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.auth-panel.hidden {
  display: none;
}

/* Honeypot: off-screen (not display:none, which some bots skip filling) so
   only a script following the DOM, not a person, ever fills it in. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.stats > div,
.stats > a {
  position: relative;
  min-height: 96px;
  padding: 14px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  display: block;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.stats > a:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,.10);
  border-color: var(--primary);
}

.stats > div::after,
.stats > a::after {
  content: "";
  position: absolute;
  inset: auto 18px 0;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--primary), #21a67a);
}

.stats span {
  display: block;
  margin-bottom: 6px;
  color: #000000;
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
}

.stats small {
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
}

.form,
.stack {
  display: grid;
  gap: 13px;
  min-width: 0;
}

.form > *,
.stack > * {
  min-width: 0;
}

.employee-form-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.employee-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.employee-form-header h2 {
  margin-bottom: 0;
}

.photo-upload {
  display: grid;
  justify-items: center;
  gap: 8px;
  flex: 0 0 auto;
  width: 4cm;
  color: var(--primary-strong);
  cursor: pointer;
  text-align: center;
}

.employee-photo-ocr-row {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.employee-photo-ocr-row .ocr-panel {
  flex: 1 1 auto;
  min-width: 0;
}

.telegram-qr-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.55);
  padding: 20px;
}

.telegram-qr-modal {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 10px;
  width: 100%;
  max-width: 280px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  text-align: center;
}

.telegram-qr-modal h3 {
  margin: 0;
}

.telegram-qr-modal img {
  width: 100%;
  max-width: 220px;
  height: auto;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow-sm);
}

.telegram-qr-modal-close {
  position: absolute;
  top: 8px;
  right: 10px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}

.confirm-password-overlay {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.55);
  padding: 20px;
}

.confirm-password-overlay[hidden] {
  display: none;
}

.confirm-password-modal {
  display: grid;
  gap: 14px;
  width: 100%;
  max-width: 360px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

.confirm-password-modal h2 {
  margin: 0;
  font-size: 17px;
  line-height: 1.35;
}

.confirm-password-modal label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}

.confirm-password-modal input {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.confirm-password-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.employee-view-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.55);
  padding: 20px;
}

.employee-view-modal {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  overflow-y: auto;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

.employee-view-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.employee-view-header h3 {
  margin: 0;
}

.employee-view-header .muted {
  margin: 2px 0 0;
}

.employee-view-photo {
  width: 56px;
  height: 56px;
  border-radius: 10px;
}

#employeeViewPhotoPlaceholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-weight: 800;
  font-size: 18px;
}

.employee-view-telegram {
  padding: 8px 12px;
  border-radius: var(--radius);
  font-size: 14px;
  margin-bottom: 14px;
}

.employee-view-telegram.is-linked {
  background: rgba(22, 132, 91, 0.12);
  color: var(--success);
}

.employee-view-telegram.is-unlinked {
  background: var(--surface-muted);
  color: var(--muted);
}

.employee-view-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
}

.employee-view-item {
  display: grid;
  gap: 2px;
  font-size: 14px;
  word-break: break-word;
}

.employee-view-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .02em;
}

.photo-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4cm;
  height: 6cm;
  border: 1px dashed #9fb2c8;
  border-radius: 8px;
  background: var(--primary-soft) center / cover no-repeat;
  color: var(--primary-strong);
  font-size: 15px;
  font-weight: 800;
}

.photo-preview.has-image {
  border-style: solid;
  border-color: var(--border-strong);
  background-color: #ffffff;
  box-shadow: var(--shadow-sm);
}

.photo-upload-copy {
  color: #28517f;
  font-size: 15px;
  font-weight: 800;
}

.photo-upload input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

label {
  display: grid;
  gap: 5px;
  color: #334155;
  font-size: 15px;
  font-weight: 750;
}

label.wide,
.wide {
  grid-column: 1 / -1;
}

input,
select,
textarea {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: #ffffff;
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.02);
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

input,
select {
  padding: 0 9px;
}

textarea {
  min-height: 80px;
  resize: vertical;
  padding: 8px 9px;
}

input[type="file"] {
  height: auto;
  min-height: 36px;
  padding: 7px;
  background: var(--surface-muted);
}

input[type="checkbox"] {
  width: 16px;
  min-height: 16px;
  accent-color: var(--primary);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(23, 107, 255, 0.14);
  outline: none;
}

input::placeholder,
textarea::placeholder {
  color: #94a3b8;
}

.check {
  display: flex;
  align-items: center;
  gap: 9px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  width: fit-content;
  padding: 0 13px;
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  background: var(--primary);
  color: #ffffff;
  cursor: pointer;
  font-weight: 750;
  line-height: 1;
  box-shadow: 0 8px 16px rgba(23, 107, 255, 0.18);
  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.button:hover,
.button:focus-visible {
  background: var(--primary-strong);
  border-color: var(--primary-strong);
  outline: none;
  transform: translateY(-1px);
}

.button.ghost {
  background: #ffffff;
  color: #28517f;
  border-color: var(--border-strong);
  box-shadow: none;
}

.button.ghost:hover,
.button.ghost:focus-visible {
  background: var(--surface-hover);
  border-color: #9fb2c8;
}

.button.small {
  min-height: 27px;
  padding: 0 8px;
  font-size: 15px;
}

.wide-button {
  width: 100%;
}

.search {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.search input {
  flex: 1;
}

.employee-search-box,
.employee-picker-box,
.omni-search-box {
  position: relative;
  flex: 1;
}

.employee-search-box input,
.employee-picker-box input,
.omni-search-box input {
  width: 100%;
}

.employee-search-suggestions,
.employee-picker-options,
.omni-search-suggestions,
.payroll-component-options {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow-md);
}

.payroll-component-options {
  z-index: 35;
}

.employee-search-suggestion,
.employee-picker-option,
.omni-search-suggestion,
.payroll-component-option {
  display: block;
  width: 100%;
  min-height: 38px;
  padding: 9px 12px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: #ffffff;
  color: #000000;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.employee-search-suggestion:last-child,
.employee-picker-option:last-child,
.omni-search-suggestion:last-child,
.payroll-component-option:last-child {
  border-bottom: 0;
}

.employee-search-suggestion:hover,
.employee-search-suggestion:focus-visible,
.employee-picker-option:hover,
.employee-picker-option:focus-visible,
.omni-search-suggestion:hover,
.omni-search-suggestion:focus-visible,
.payroll-component-option:hover,
.payroll-component-option:focus-visible {
  background: var(--surface-hover);
  outline: none;
}

.payroll-component-widget {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
}

.payroll-component-widget h3 {
  margin: 0;
  font-size: 17px;
}

.payroll-component-search {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(110px, 150px) auto;
  gap: 8px;
  align-items: start;
}

.payroll-component-search-box {
  position: relative;
}

.payroll-component-selected {
  display: grid;
  gap: 8px;
}

.payroll-component-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(110px, 150px) auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
}

.payroll-component-row span {
  font-weight: 700;
}

.site-picker-widget {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.site-picker-search {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 8px;
  align-items: start;
}

.site-picker-selected {
  display: grid;
  gap: 8px;
}

.site-picker-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
}

.site-picker-row span {
  font-weight: 700;
}

@media (max-width: 640px) {
  .site-picker-search {
    grid-template-columns: 1fr;
  }
}

.payroll-preview-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: #ffffff;
}

.payroll-preview-panel h3 {
  margin: 0;
  font-size: 17px;
}

.payroll-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.payroll-preview-grid > div {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
}

.payroll-preview-grid strong {
  display: block;
  color: #000000;
  font-size: 20px;
}

@media (max-width: 760px) {
  .payroll-preview-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .payroll-component-search,
  .payroll-component-row {
    grid-template-columns: 1fr;
  }
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead {
  background: var(--surface-muted);
}

th,
td {
  padding: 9px 11px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

th {
  color: #475569;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

td {
  color: #263244;
}

tbody tr {
  transition: background 150ms ease;
}

tbody tr:hover {
  background: #fbfdff;
}

td strong {
  display: block;
  color: #000000;
}

td form {
  margin: 0;
}

td select {
  min-width: 140px;
}

.monthly-roster-grid-wrap {
  max-height: 72vh;
  overflow: auto;
}

.monthly-roster-table {
  min-width: 2400px;
  table-layout: fixed;
}

.monthly-roster-table th,
.monthly-roster-table td {
  padding: 8px 6px;
}

.monthly-roster-table th {
  position: sticky;
  top: 0;
  z-index: 4;
  text-align: center;
  white-space: nowrap;
  background: var(--surface-muted);
}

.monthly-roster-table td {
  vertical-align: middle;
  background: var(--surface);
}

.monthly-roster-table .roster-day-col {
  width: 68px;
  min-width: 68px;
}

.roster-day-number,
.roster-weekday,
.roster-employee-name {
  display: block;
}

.roster-day-number {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.1;
}

.roster-weekday {
  margin-top: 3px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.1;
}

.monthly-roster-table .roster-employee-col {
  position: sticky;
  left: 0;
  z-index: 3;
  width: 260px;
  min-width: 260px;
  text-align: left;
  background: var(--surface);
}

.monthly-roster-table thead .roster-employee-col {
  z-index: 5;
  background: var(--surface-muted);
}

.monthly-roster-table .inactive-day {
  background: #f8fafc;
  color: var(--muted);
}

.monthly-roster-table td select {
  width: 100%;
  min-width: 0;
  padding: 0 6px;
  font-size: 15px;
}

.panel:has(table) {
  overflow-x: auto;
  padding: 0;
}

.panel:has(table) h2,
.panel:has(table) .search {
  margin-left: 18px;
  margin-right: 18px;
}

.panel:has(table) h2 {
  margin-top: 18px;
}

.panel:has(table) > table {
  border-top: 1px solid var(--border);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 210px;
}

.file-link {
  display: inline-flex;
  align-items: center;
  max-width: 190px;
  min-height: 26px;
  margin: 0 4px 6px 0;
  padding: 0 9px;
  overflow: hidden;
  border: 1px solid #b8c7db;
  border-radius: 999px;
  background: #f8fbff;
  color: #28517f;
  font-size: 15px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 230px;
}

.employee-photo {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid var(--border);
  background: var(--surface-muted);
}

.employee-photo.placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-weight: 800;
}

.employee-list-table {
  min-width: 620px;
  font-size: 15px;
}

.employee-list-table th,
.employee-list-table td {
  min-width: 80px;
  padding: 7px 9px;
}

.employee-list-table td { white-space: normal; }
.employee-list-table td > small { display: block; color: var(--muted); font-size: 15px; }
.employee-manager-cell strong { font-size: 15px; line-height: 1.25; }

.asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px;
  padding: 22px;
}

.asset-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.asset-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  object-fit: cover;
  background: var(--surface-muted);
  border: 1px solid var(--border);
}

.asset-card strong {
  color: #000000;
  word-break: break-word;
}

.asset-card.active-asset {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-soft);
}

.asset-card .asset-status {
  display: inline-flex;
  width: fit-content;
  min-height: 24px;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-size: 15px;
  font-weight: 800;
}

.asset-card input {
  min-height: 34px;
  font-size: 15px;
}

.flash {
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #eef6ff;
  color: #244a72;
  font-weight: 700;
}

.flash.success {
  border-color: #b8dfce;
  background: #ecfdf5;
  color: var(--success);
}

.flash.error,
.flash.danger {
  border-color: #f2b9b9;
  background: #fff1f2;
  color: var(--danger);
}

.flash.warning {
  border-color: #f4d19c;
  background: #fff7ed;
  color: var(--warning);
}

.role-panel .search {
  margin-bottom: 16px;
}

.permission-form {
  display: grid;
  gap: 16px;
}

.permission-groups {
  display: grid;
  gap: 14px;
}

.permission-group {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fbfdff;
  overflow: hidden;
}

.permission-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: #f6f9fc;
}

.permission-group-header h3 {
  margin: 0;
  color: #000000;
  font-size: 17px;
  line-height: 1.2;
}

.permission-group-header span {
  min-width: 28px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #e9f2ff;
  color: #28517f;
  font-size: 15px;
  font-weight: 750;
  text-align: center;
}

.permission-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
}

.permission-check {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-height: 76px;
  padding: 12px;
  background: #ffffff;
  cursor: pointer;
}

.permission-check input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--primary);
}

.permission-check strong {
  display: block;
  color: #1f2937;
  font-size: 16px;
  line-height: 1.25;
}

.permission-check small {
  margin-top: 4px;
  color: #64748b;
}

.permission-check:hover,
.permission-check:focus-within {
  background: var(--surface-hover);
}


.danger-button {
  color: var(--danger);
  border-color: #efb4b4;
}

.danger-button:hover,
.danger-button:focus-visible {
  background: #fff1f2;
  border-color: #e18383;
  color: var(--danger);
}

.check.compact {
  gap: 7px;
  min-height: auto;
}

.row-editor {
  position: relative;
}

.row-editor summary {
  list-style: none;
}

.row-editor summary::-webkit-details-marker {
  display: none;
}

.inline-edit-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 10px;
  min-width: 360px;
  max-width: min(620px, calc(100vw - 48px));
  margin-top: 8px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #ffffff;
  box-shadow: var(--shadow-md);
}

.inline-edit-form .check,
.inline-edit-form button {
  align-self: end;
}

.employee-actions,
.user-actions {
  min-width: 250px;
}


.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.settings-card h2 {
  margin-bottom: 6px;
}

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

.compact-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 0;
}

.compact-stats > div {
  min-height: 66px;
  padding: 11px;
}

.compact-stats span {
  margin-bottom: 4px;
  font-size: 25px;
}


.day-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.day-picker legend {
  padding: 0 6px;
  color: #475569;
  font-size: 15px;
  font-weight: 800;
}

.day-picker .check {
  min-height: 28px;
  padding: 0 8px 0 0;
}

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

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

  .permission-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  :root {
    --topbar-height: 52px;
  }

  body {
    background: var(--bg);
  }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(260px, 82vw);
    max-height: 100vh;
    transform: translateX(-100%);
    transition: transform 280ms ease;
    z-index: 40;
    box-shadow: none;
  }

  .sidebar.open {
    transform: translateX(0);
    box-shadow: 18px 0 36px rgba(15, 23, 42, 0.22);
  }

  .sidebar nav {
    grid-template-columns: 1fr;
    padding-top: 10px;
  }

  .sidebar nav a {
    min-height: 36px;
  }

  .menu-toggle {
    display: flex;
  }

  .topbar {
    position: sticky;
    inset: auto;
    top: 0;
    min-height: var(--topbar-height);
    padding: 0 14px;
  }

  .topbar > div {
    flex: 1;
    min-width: 0;
  }

  .topbar strong {
    font-size: 20px;
  }

  .app-main {
    padding: 0 14px 28px;
  }

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

  .employee-form-header {
    align-items: center;
  }

  .fields,
  .settings-card .fields {
    grid-template-columns: 1fr;
  }

  .panel,
  .login-panel {
    padding: 16px;
  }

  .panel:has(table) {
    padding: 0;
  }

  .search {
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  .login-main {
    padding: 14px;
  }

  .login-panel {
    padding: 22px 16px;
  }

  .employee-form-header {
    align-items: stretch;
    flex-direction: column;
  }

  .photo-upload {
    align-items: center;
    justify-items: start;
    grid-template-columns: auto 1fr;
    width: 100%;
    text-align: left;
  }

  .employee-photo-ocr-row {
    flex-direction: column;
  }

  .button {
    width: 100%;
  }

  .actions .button,
  .search .button {
    width: auto;
  }
}

@media print {
  body {
    background: #ffffff;
  }

  .sidebar,
  .topbar,
  .button,
  .search {
    display: none !important;
  }

  .app-main {
    padding: 0;
  }

  .panel {
    border: 0;
    box-shadow: none;
  }
}

.org-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.36fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.org-controls {
  position: sticky;
  top: 66px;
  display: grid;
  gap: 18px;
}

.org-selected-card {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-muted);
  text-align: center;
}

.org-selected-card strong {
  margin-top: 8px;
  color: #000000;
  font-size: 20px;
}

.org-selected-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4cm;
  height: 6cm;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: #ffffff center / cover no-repeat;
  object-fit: cover;
  color: var(--primary-strong);
  font-weight: 800;
}

.org-selected-photo.placeholder {
  background: var(--primary-soft);
}

.org-approval-note {
  display: grid;
  gap: 6px;
  padding: 14px;
  border-left: 3px solid var(--primary);
  border-radius: var(--radius);
  background: #f8fbff;
}

.org-approval-note strong {
  color: #000000;
}

.org-chart-panel {
  min-height: 540px;
}

.org-chart-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.org-chart-heading h2 {
  margin-bottom: 0;
}

.org-chart-heading span {
  color: var(--muted);
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
}

.org-tree,
.org-children {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.org-children {
  margin-top: 14px;
  margin-left: 28px;
  padding-left: 18px;
  border-left: 1px solid var(--border-strong);
}

.org-card {
  display: grid;
  gap: 12px;
  max-width: 520px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #ffffff;
  box-shadow: var(--shadow-sm);
}

.org-card.selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(23, 107, 255, 0.12), var(--shadow-sm);
}

.org-card-link {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.org-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary-strong);
  object-fit: cover;
  font-weight: 800;
}

.org-card-body {
  min-width: 0;
}

.org-card-body strong {
  display: block;
  color: #000000;
  font-size: 17px;
}

.org-manager-form label {
  gap: 6px;
}

.org-manager-form select {
  min-height: 36px;
  font-size: 16px;
}

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

  .org-controls {
    position: static;
  }
}

@media (max-width: 620px) {
  .org-chart-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .org-children {
    margin-left: 10px;
    padding-left: 12px;
  }

  .org-card-link {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .org-photo {
    width: 48px;
    height: 48px;
  }
}

.approval-line-panel {
  margin-bottom: 22px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #f8fbff;
}

.approval-line-panel h3 {
  margin-bottom: 14px;
  color: #000000;
  font-size: 17px;
}

.approval-line {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
}

.approval-line-item {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(130px, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 210px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #ffffff;
}

.approval-line-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -11px;
  z-index: 1;
  width: 11px;
  border-top: 2px solid var(--border-strong);
}

.approval-line-item.current {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.approval-line-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
  color: var(--primary-strong);
  object-fit: cover;
  font-weight: 800;
}

.approval-line-photo.placeholder {
  background: var(--primary-soft);
}

.org-node-item {
  position: relative;
}

.org-children .org-node-item::before {
  content: "";
  position: absolute;
  top: 29px;
  left: -18px;
  width: 18px;
  border-top: 1px solid var(--border-strong);
}

@media (max-width: 620px) {
  .approval-line {
    flex-direction: column;
    overflow-x: visible;
  }

  .approval-line-item:not(:last-child)::after {
    top: auto;
    right: auto;
    bottom: -11px;
    left: 31px;
    width: 0;
    height: 11px;
    border-top: 0;
    border-left: 2px solid var(--border-strong);
  }
}

.ocr-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid #c6d6ea;
  border-radius: var(--radius);
  background: #f8fbff;
}

.ocr-panel h3 {
  margin-bottom: 4px;
  color: #000000;
  font-size: 17px;
}

.ocr-actions {
  display: grid;
  grid-template-columns: minmax(150px, 0.6fr) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.ocr-status {
  min-height: 20px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 750;
}

.ocr-status[data-state="success"] {
  color: var(--success);
}

.ocr-status[data-state="error"] {
  color: var(--danger);
}

.ocr-status[data-state="loading"] {
  color: var(--primary-strong);
}

.ocr-raw {
  min-height: 84px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 15px;
}

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

[data-ocr-field].ocr-confidence-low {
  border-color: var(--danger);
  box-shadow: 0 0 0 1px var(--danger);
}

[data-ocr-field].ocr-confidence-medium {
  border-color: var(--warning);
  box-shadow: 0 0 0 1px var(--warning);
}

[data-ocr-field].ocr-confidence-high {
  border-color: var(--success);
}

/* ── Roster Calendar Grid ── */
.roster-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-bottom: 8px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-muted);
}

.roster-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 15px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
}

.shift-legend-0 { background: #dbeafe; color: #1d4ed8; }
.shift-legend-1 { background: #dcfce7; color: #15803d; }
.shift-legend-2 { background: #fef9c3; color: #a16207; }
.shift-legend-3 { background: #ffe4e6; color: #be123c; }
.shift-legend-4 { background: #f3e8ff; color: #7e22ce; }
.shift-legend-5 { background: #ffedd5; color: #c2410c; }

.roster-calendar-wrap {
  max-height: 65vh;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 100%;
}

.roster-calendar-table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

.roster-calendar-table th,
.roster-calendar-table td {
  padding: 0;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
}

.roster-calendar-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-muted);
  padding: 2px 1px !important;
  text-align: center;
}

.roster-emp-col {
  position: sticky;
  left: 0;
  z-index: 3;
  width: 130px;
  min-width: 130px;
  padding: 3px 6px !important;
  background: var(--surface-muted);
  border-right: 2px solid var(--border-strong) !important;
  text-align: left;
}

.roster-calendar-table thead .roster-emp-col {
  z-index: 4;
}

.roster-day-col {
  width: auto;
}

.roster-day-num {
  display: block;
  font-size: 11px;
  font-weight: 800;
  color: #000000;
  line-height: 1.2;
}

.roster-day-wd {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.1;
  text-transform: uppercase;
}

.roster-mgr-row td,
.roster-mgr-day {
  background: #1a3558 !important;
  border-bottom: 2px solid #0d2040 !important;
}

.roster-mgr-cell {
  padding: 2px 6px !important;
  background: #1a3558 !important;
}

.roster-mgr-cell strong {
  display: block;
  color: #e2eaf5;
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.roster-mgr-cell small {
  color: #7aafdc;
  font-size: 12px;
  margin-top: 1px;
}

.roster-staff-row:hover td {
  background: #f0f6ff;
}

.roster-staff-cell {
  padding: 2px 6px !important;
  background: var(--surface) !important;
}

.roster-staff-cell span {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #000000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.roster-staff-cell small {
  font-size: 12px;
  color: var(--muted);
  margin-top: 1px;
}

.roster-cell {
  padding: 0 !important;
  height: 1px;
  background: var(--surface);
}

.roster-shift-select {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 20px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #475569;
  font-size: 12px;
  font-weight: 600;
  padding: 0 1px;
  cursor: pointer;
}

.roster-shift-select:focus { outline: 2px solid var(--primary); outline-offset: -2px; }
.roster-shift-select:disabled { opacity: 0.65; cursor: default; }

.roster-shift-select[data-color="0"] { background: #dbeafe; color: #1d4ed8; }
.roster-shift-select[data-color="1"] { background: #dcfce7; color: #15803d; }
.roster-shift-select[data-color="2"] { background: #fef9c3; color: #a16207; }
.roster-shift-select[data-color="3"] { background: #ffe4e6; color: #be123c; }
.roster-shift-select[data-color="4"] { background: #f3e8ff; color: #7e22ce; }
.roster-shift-select[data-color="5"] { background: #ffedd5; color: #c2410c; }

.pending-row {
  opacity: 0.55;
  background: #f8fafc;
}

.pending-row select,
.pending-row input,
.pending-row button:not(.button) {
  pointer-events: none;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 15px;
  font-weight: 800;
}

.status-pill.approved {
  background: #ecfdf5;
  color: var(--success);
}

.status-pill.pending {
  background: #f1f5f9;
  color: #64748b;
}

.status-pill.rejected {
  background: #fff1f2;
  color: var(--danger);
}

.status-pill.inactive {
  background: #e2e8f0;
  color: #475569;
}

.status-pill.cancelled {
  background: #f8f4e3;
  color: #92400e;
}

.live-badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--success);
  letter-spacing: 0.04em;
}

/* ── Data grid toolbar ── */
.dt-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  position: relative;
}
.dt-search {
  flex: 1 1 160px;
  max-width: 260px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  font-size: 15px;
  background: var(--surface);
  color: var(--text);
  outline: none;
}
.dt-search:focus { border-color: var(--primary, #2563eb); box-shadow: 0 0 0 2px #dbeafe; }

.dt-btn {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  white-space: nowrap;
}
.dt-btn:hover { background: var(--surface-muted); }

.dt-sort-lbl {
  font-size: 15px;
  color: var(--muted);
  white-space: nowrap;
}

/* Filter chips */
.dt-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.dt-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #dbeafe;
  color: #1e40af;
  border-radius: 999px;
  padding: 2px 8px 2px 10px;
  font-size: 15px;
  font-weight: 500;
}
.dt-chip button {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  padding: 0;
  color: inherit;
  opacity: .6;
}
.dt-chip button:hover { opacity: 1; }

/* Filter panel dropdown */
.dt-filter-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 120;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  min-width: 360px;
}
.dt-filter-panel select,
.dt-filter-panel input[type="text"] {
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  font-size: 15px;
  background: var(--surface);
  color: var(--text);
}
.dt-filter-panel input[type="text"] { flex: 1 1 120px; }

/* Column visibility dropdown */
.dt-colvis-wrap { position: relative; }
.dt-colvis-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 120;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
.dt-colvis-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  cursor: pointer;
  white-space: nowrap;
}
.dt-colvis-item input { cursor: pointer; }

/* Checkbox column */
.dt-cb-col { width: 32px; text-align: center; padding: 6px 4px; }
.dt-cb-col input { cursor: pointer; }

/* Sortable headers */
thead th.dt-sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
thead th.dt-sortable:hover { background: var(--surface-muted); }
.dt-th-text { margin-right: 4px; }
.dt-th-arr { font-size: 17px; opacity: .45; }

/* ── Employee panel toolbar extensions ── */
.employee-panel-header { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .75rem; }
.dt-filter-area { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.dt-menu-label {
  display: block; font-size: .72rem; font-weight: 700; color: var(--muted);
  padding: .15rem .5rem .25rem; text-transform: uppercase; letter-spacing: .04em;
}
.dt-menu-opt {
  display: block; width: 100%; text-align: left; padding: .3rem .55rem;
  border-radius: 4px; background: none; border: none; cursor: pointer; font: inherit; font-size: .875rem;
}
.dt-menu-opt:hover { background: var(--surface-hover); }
.dt-menu-opt.dt-menu-clear {
  color: var(--muted); border-top: 1px solid var(--border); margin-top: .2rem; padding-top: .4rem;
}
.dt-cols-menu { min-width: 210px; }
.dt-cols-menu label { display: flex; align-items: center; gap: .45rem; padding: .22rem .5rem; border-radius: 4px; cursor: pointer; font-size: .875rem; }
.dt-cols-menu label:hover { background: var(--surface-hover); }
thead th.dt-sortable:hover .dt-th-arr { opacity: .7; }
thead th.dt-sortable[data-sort-active] .dt-th-arr { opacity: 1; color: var(--primary); }
.filter-hidden { display: none; }
th[data-col], td[data-col] { display: none; }

/* ── Theme toggle ── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background 150ms ease;
}

.theme-toggle:hover {
  background: var(--surface-hover);
}

.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: inline-flex; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: inline-flex; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .theme-toggle .icon-sun { display: inline-flex; }
  html:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}

/* ── Dark mode overrides ──
   :root variables handle most of the app automatically. These target the
   remaining hardcoded (non-variable) colors: headings/strong text, tinted
   panel backgrounds, status/flash/legend pastels and the login card. */
html[data-theme="dark"] body,
html:not([data-theme="light"]) body {
  background:
    linear-gradient(180deg, rgba(10, 15, 26, 0.90), rgba(10, 15, 26, 0.78)),
    var(--app-background-image, none) center / cover fixed no-repeat,
    linear-gradient(180deg, rgba(74, 141, 255, 0.08), rgba(74, 141, 255, 0) 280px),
    var(--bg);
}

html[data-theme="dark"] .topbar,
html:not([data-theme="light"]) .topbar {
  background: rgba(19, 26, 41, 0.85);
  border-bottom-color: rgba(52, 65, 92, 0.6);
}

html[data-theme="dark"] .login-panel,
html:not([data-theme="light"]) .login-panel {
  background: rgba(19, 26, 41, 0.96);
}

/* Heading / strong text pinned to literal black in light mode */
html[data-theme="dark"] h2,
html:not([data-theme="light"]) h2,
html[data-theme="dark"] .topbar strong,
html:not([data-theme="light"]) .topbar strong,
html[data-theme="dark"] .stats span,
html:not([data-theme="light"]) .stats span,
html[data-theme="dark"] .login-panel h1,
html:not([data-theme="light"]) .login-panel h1,
html[data-theme="dark"] td strong,
html:not([data-theme="light"]) td strong,
html[data-theme="dark"] .payroll-preview-grid strong,
html:not([data-theme="light"]) .payroll-preview-grid strong,
html[data-theme="dark"] .permission-group-header h3,
html:not([data-theme="light"]) .permission-group-header h3,
html[data-theme="dark"] .permission-check strong,
html:not([data-theme="light"]) .permission-check strong,
html[data-theme="dark"] .asset-card strong,
html:not([data-theme="light"]) .asset-card strong,
html[data-theme="dark"] .org-selected-card strong,
html:not([data-theme="light"]) .org-selected-card strong,
html[data-theme="dark"] .org-card-body strong,
html:not([data-theme="light"]) .org-card-body strong,
html[data-theme="dark"] .org-approval-note strong,
html:not([data-theme="light"]) .org-approval-note strong,
html[data-theme="dark"] .approval-line-panel h3,
html:not([data-theme="light"]) .approval-line-panel h3,
html[data-theme="dark"] .ocr-panel h3,
html:not([data-theme="light"]) .ocr-panel h3,
html[data-theme="dark"] .roster-day-num,
html:not([data-theme="light"]) .roster-day-num,
html[data-theme="dark"] .roster-staff-cell span,
html:not([data-theme="light"]) .roster-staff-cell span,
html[data-theme="dark"] .employee-search-suggestion,
html:not([data-theme="light"]) .employee-search-suggestion,
html[data-theme="dark"] .employee-picker-option,
html:not([data-theme="light"]) .employee-picker-option,
html[data-theme="dark"] .omni-search-suggestion,
html:not([data-theme="light"]) .omni-search-suggestion,
html[data-theme="dark"] .payroll-component-option,
html:not([data-theme="light"]) .payroll-component-option {
  color: var(--text);
}

/* Secondary/tertiary text pinned to literal grays */
html[data-theme="dark"] code,
html:not([data-theme="light"]) code,
html[data-theme="dark"] label,
html:not([data-theme="light"]) label,
html[data-theme="dark"] th,
html:not([data-theme="light"]) th,
html[data-theme="dark"] td,
html:not([data-theme="light"]) td,
html[data-theme="dark"] .day-picker legend,
html:not([data-theme="light"]) .day-picker legend,
html[data-theme="dark"] .roster-shift-select,
html:not([data-theme="light"]) .roster-shift-select,
html[data-theme="dark"] .status-pill.inactive,
html:not([data-theme="light"]) .status-pill.inactive,
html[data-theme="dark"] .permission-check small,
html:not([data-theme="light"]) .permission-check small {
  color: var(--muted);
}

html[data-theme="dark"] input::placeholder,
html:not([data-theme="light"]) input::placeholder,
html[data-theme="dark"] textarea::placeholder,
html:not([data-theme="light"]) textarea::placeholder {
  color: #5b6b85;
}

html[data-theme="dark"] .photo-upload-copy,
html:not([data-theme="light"]) .photo-upload-copy,
html[data-theme="dark"] .button.ghost,
html:not([data-theme="light"]) .button.ghost,
html[data-theme="dark"] .file-link,
html:not([data-theme="light"]) .file-link,
html[data-theme="dark"] .permission-group-header span,
html:not([data-theme="light"]) .permission-group-header span {
  color: #8fb4ea;
}

/* Surfaces pinned to literal white/near-white */
html[data-theme="dark"] input,
html:not([data-theme="light"]) input,
html[data-theme="dark"] select,
html:not([data-theme="light"]) select,
html[data-theme="dark"] textarea,
html:not([data-theme="light"]) textarea,
html[data-theme="dark"] .photo-preview.has-image,
html:not([data-theme="light"]) .photo-preview.has-image,
html[data-theme="dark"] .employee-search-suggestions,
html:not([data-theme="light"]) .employee-search-suggestions,
html[data-theme="dark"] .employee-picker-options,
html:not([data-theme="light"]) .employee-picker-options,
html[data-theme="dark"] .omni-search-suggestions,
html:not([data-theme="light"]) .omni-search-suggestions,
html[data-theme="dark"] .payroll-component-options,
html:not([data-theme="light"]) .payroll-component-options,
html[data-theme="dark"] .employee-search-suggestion,
html:not([data-theme="light"]) .employee-search-suggestion,
html[data-theme="dark"] .employee-picker-option,
html:not([data-theme="light"]) .employee-picker-option,
html[data-theme="dark"] .omni-search-suggestion,
html:not([data-theme="light"]) .omni-search-suggestion,
html[data-theme="dark"] .payroll-component-option,
html:not([data-theme="light"]) .payroll-component-option,
html[data-theme="dark"] .payroll-component-row,
html:not([data-theme="light"]) .payroll-component-row,
html[data-theme="dark"] .site-picker-row,
html:not([data-theme="light"]) .site-picker-row,
html[data-theme="dark"] .payroll-preview-panel,
html:not([data-theme="light"]) .payroll-preview-panel,
html[data-theme="dark"] .permission-check,
html:not([data-theme="light"]) .permission-check,
html[data-theme="dark"] .inline-edit-form,
html:not([data-theme="light"]) .inline-edit-form,
html[data-theme="dark"] .org-card,
html:not([data-theme="light"]) .org-card,
html[data-theme="dark"] .org-selected-photo,
html:not([data-theme="light"]) .org-selected-photo,
html[data-theme="dark"] .approval-line-item,
html:not([data-theme="light"]) .approval-line-item,
html[data-theme="dark"] .approval-line-photo,
html:not([data-theme="light"]) .approval-line-photo,
html[data-theme="dark"] .button.ghost,
html:not([data-theme="light"]) .button.ghost {
  background: var(--surface);
}

html[data-theme="dark"] .button.ghost:hover,
html:not([data-theme="light"]) .button.ghost:hover {
  border-color: var(--border-strong);
}

html[data-theme="dark"] .photo-preview,
html:not([data-theme="light"]) .photo-preview {
  border-color: var(--border-strong);
}

html[data-theme="dark"] tbody tr:hover,
html:not([data-theme="light"]) tbody tr:hover,
html[data-theme="dark"] .roster-staff-row:hover td,
html:not([data-theme="light"]) .roster-staff-row:hover td {
  background: var(--surface-hover);
}

html[data-theme="dark"] .permission-group,
html:not([data-theme="light"]) .permission-group,
html[data-theme="dark"] .org-approval-note,
html:not([data-theme="light"]) .org-approval-note,
html[data-theme="dark"] .ocr-panel,
html:not([data-theme="light"]) .ocr-panel,
html[data-theme="dark"] .file-link,
html:not([data-theme="light"]) .file-link {
  background: var(--surface-muted);
}

html[data-theme="dark"] .permission-group-header,
html:not([data-theme="light"]) .permission-group-header {
  background: var(--surface-hover);
}

html[data-theme="dark"] .ocr-panel,
html:not([data-theme="light"]) .ocr-panel,
html[data-theme="dark"] .file-link,
html:not([data-theme="light"]) .file-link {
  border-color: var(--border-strong);
}

html[data-theme="dark"] .danger-button,
html:not([data-theme="light"]) .danger-button {
  border-color: rgba(248, 113, 113, 0.4);
}

html[data-theme="dark"] .danger-button:hover,
html:not([data-theme="light"]) .danger-button:hover {
  background: rgba(248, 113, 113, 0.12);
  border-color: rgba(248, 113, 113, 0.55);
}

/* Flash messages */
html[data-theme="dark"] .flash,
html:not([data-theme="light"]) .flash {
  background: rgba(74, 141, 255, 0.12);
  color: #a9c7ff;
}

html[data-theme="dark"] .flash.success,
html:not([data-theme="light"]) .flash.success {
  background: rgba(52, 211, 153, 0.12);
  border-color: rgba(52, 211, 153, 0.35);
}

html[data-theme="dark"] .flash.error,
html:not([data-theme="light"]) .flash.error,
html[data-theme="dark"] .flash.danger,
html:not([data-theme="light"]) .flash.danger {
  background: rgba(248, 113, 113, 0.12);
  border-color: rgba(248, 113, 113, 0.35);
}

html[data-theme="dark"] .flash.warning,
html:not([data-theme="light"]) .flash.warning {
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.35);
}

/* Status pills */
html[data-theme="dark"] .status-pill.approved,
html:not([data-theme="light"]) .status-pill.approved {
  background: rgba(52, 211, 153, 0.15);
}

html[data-theme="dark"] .status-pill.pending,
html:not([data-theme="light"]) .status-pill.pending {
  background: rgba(148, 163, 184, 0.15);
  color: #cbd5e1;
}

html[data-theme="dark"] .status-pill.rejected,
html:not([data-theme="light"]) .status-pill.rejected {
  background: rgba(248, 113, 113, 0.15);
}

html[data-theme="dark"] .status-pill.inactive,
html:not([data-theme="light"]) .status-pill.inactive {
  background: rgba(148, 163, 184, 0.15);
}

html[data-theme="dark"] .status-pill.cancelled,
html:not([data-theme="light"]) .status-pill.cancelled {
  background: rgba(234, 179, 8, 0.15);
  color: #eab308;
}

/* Shift / roster legend + select colors, and the matching data-color chips */
html[data-theme="dark"] .shift-legend-0,
html:not([data-theme="light"]) .shift-legend-0,
html[data-theme="dark"] .roster-shift-select[data-color="0"],
html:not([data-theme="light"]) .roster-shift-select[data-color="0"],
html[data-theme="dark"] .dt-chip,
html:not([data-theme="light"]) .dt-chip {
  background: rgba(59, 130, 246, 0.18);
  color: #93c5fd;
}

html[data-theme="dark"] .shift-legend-1,
html:not([data-theme="light"]) .shift-legend-1,
html[data-theme="dark"] .roster-shift-select[data-color="1"],
html:not([data-theme="light"]) .roster-shift-select[data-color="1"] {
  background: rgba(34, 197, 94, 0.18);
  color: #4ade80;
}

html[data-theme="dark"] .shift-legend-2,
html:not([data-theme="light"]) .shift-legend-2,
html[data-theme="dark"] .roster-shift-select[data-color="2"],
html:not([data-theme="light"]) .roster-shift-select[data-color="2"] {
  background: rgba(234, 179, 8, 0.18);
  color: #facc15;
}

html[data-theme="dark"] .shift-legend-3,
html:not([data-theme="light"]) .shift-legend-3,
html[data-theme="dark"] .roster-shift-select[data-color="3"],
html:not([data-theme="light"]) .roster-shift-select[data-color="3"] {
  background: rgba(244, 63, 94, 0.18);
  color: #fb7185;
}

html[data-theme="dark"] .shift-legend-4,
html:not([data-theme="light"]) .shift-legend-4,
html[data-theme="dark"] .roster-shift-select[data-color="4"],
html:not([data-theme="light"]) .roster-shift-select[data-color="4"] {
  background: rgba(168, 85, 247, 0.18);
  color: #c084fc;
}

html[data-theme="dark"] .shift-legend-5,
html:not([data-theme="light"]) .shift-legend-5,
html[data-theme="dark"] .roster-shift-select[data-color="5"],
html:not([data-theme="light"]) .roster-shift-select[data-color="5"] {
  background: rgba(249, 115, 22, 0.18);
  color: #fb923c;
}

html[data-theme="dark"] .dt-search:focus,
html:not([data-theme="light"]) .dt-search:focus {
  box-shadow: 0 0 0 2px rgba(74, 141, 255, 0.25);
}

.legal-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 0;
}

.legal-panel {
  padding: 28px 32px;
}

.legal-panel h1 {
  margin-top: 0;
}

.legal-panel h2 {
  margin-top: 28px;
  margin-bottom: 8px;
  font-size: 1.05em;
}

.legal-panel p,
.legal-panel li {
  color: var(--text);
  line-height: 1.6;
}

.legal-notice {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.92em;
}

.legal-footer-links {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.app-footer {
  margin-top: 32px;
  padding: 16px 0 8px;
  text-align: center;
  font-size: 0.85em;
}