:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --ink: #1f242b;
  --muted: #6b7280;
  --line: #e5e7eb;
  --accent: #c7192d;
  --accent-dark: #a61425;
  --stage: #111111;
  --ok: #0f766e;
  --font: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --display: "Segoe UI Semibold", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background:
    radial-gradient(1200px 500px at 100% 0%, rgba(200, 16, 46, 0.06), transparent 55%),
    linear-gradient(180deg, #fafbfc 0%, var(--bg) 40%);
  color: var(--ink);
  font-family: var(--font);
  min-height: 100%;
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }

.shell {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 32px;
  padding-bottom: 3rem;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--line);
}

/* header sub-navigation row (below the topbar divider) */
.authenticated-subnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 30px;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 12px;
  margin-bottom: 16px;
}
.authenticated-subnav__left,
.authenticated-subnav__right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* compact navigation-button variant, used only in .authenticated-subnav (30px row) */
.subnav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  min-height: 30px;
  max-height: 30px;
  box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid #c7192d;
  border-radius: 5px;
  background: #ffffff;
  color: #c7192d;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.subnav-btn:hover {
  background: rgba(199, 25, 45, 0.06);
  border-color: #a91425;
  color: #a91425;
}
.subnav-btn:focus-visible {
  outline: 2px solid rgba(199, 25, 45, 0.22);
  outline-offset: 2px;
}
.subnav-btn.is-active {
  background: rgba(199, 25, 45, 0.10);
  border-color: #c7192d;
  color: #c7192d;
}
.subnav-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.subnav-btn:disabled:hover {
  background: #ffffff;
  border-color: #c7192d;
  color: #c7192d;
}

/* fixed-size icon+label variant, used only by the left-side İK / Personel buttons */
.subnav-btn-compact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  width: 110px;
  min-width: 110px;
  max-width: 110px;
  height: 30px;
  min-height: 30px;
  max-height: 30px;
  padding: 0 10px;
  line-height: 1;
}
.subnav-btn-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}
.brand-logo {
  display: block;
  width: 450px;
  height: 66px;
  max-width: 100%;
  object-fit: contain;
}
.brand-logo-login {
  height: 48px;
  max-width: 100%;
  margin-bottom: 0.35rem;
}
.brand-tag {
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-left: 1px solid var(--line);
  padding-left: 0.85rem;
}

.nav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.nav a:not(.btn):not(.notification-button) {
  color: var(--muted);
  font-size: 0.92rem;
}
.nav a:not(.btn):not(.notification-button):hover { color: var(--ink); }

/* grey-bordered container — wraps only the identity text; bell and profile icon
   sit outside it as separate .nav children (see below) */
.authenticated-user-area {
  display: inline-flex;
  align-items: center;
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  padding: 0 12px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  min-width: 0;
}

/* icon-only notification bell (40x40, borderless/frameless) */
.notification-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  box-sizing: border-box;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.notification-button:hover {
  background: rgba(199, 25, 45, 0.06);
  color: #c7192d;
}
.notification-button:focus-visible {
  outline: 2px solid rgba(199, 25, 45, 0.25);
  outline-offset: 2px;
}
.notification-button.has-unread {
  color: #c7192d;
}
.notification-button__icon {
  width: 20px;
  height: 20px;
}

.authenticated-user-area__profile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--muted);
  flex-shrink: 0;
}
.authenticated-user-area__profile-icon svg {
  width: 18px;
  height: 18px;
}

.authenticated-user-area__identity {
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.3rem;
  height: 1.3rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.72rem;
  margin-left: 0.25rem;
}

/* Molekulas global regular-button standard: 42px height, all pages */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 6px;
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  box-sizing: border-box;
  padding: 0 16px;
  cursor: pointer;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}
.btn:hover { background: var(--accent-dark); }

/* shared 16px icon used inside text-with-icon buttons */
.btn-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* reusable danger/primary button state (currently: Çıkış) */
.btn-danger {
  border: 1px solid #c7192d;
}
.btn-danger:hover {
  background: #a91425;
  border-color: #a91425;
  box-shadow: 0 2px 5px rgba(199, 25, 45, 0.20);
}
.btn-danger:active {
  background: #8f1020;
  border-color: #8f1020;
}
.btn-danger:focus-visible {
  outline: 2px solid rgba(199, 25, 45, 0.25);
  outline-offset: 2px;
}
.btn-danger:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.btn-danger:disabled:hover {
  background: var(--accent);
  border-color: #c7192d;
  box-shadow: none;
}

/* Molekulas global secondary/clear button standard (Temizle, İptal, Geri) */
.btn-ghost {
  background: #ffffff;
  border: 1px solid #c7192d;
  color: #c7192d;
  box-shadow: 0 1px 3px rgba(199, 25, 45, 0.14);
}
.btn-ghost:hover {
  background: rgba(199, 25, 45, 0.06);
  border-color: #a91425;
  color: #a91425;
  box-shadow: 0 2px 5px rgba(199, 25, 45, 0.20);
}
.btn-ghost:active {
  background: rgba(199, 25, 45, 0.12);
  border-color: #a91425;
}
.btn-ghost:focus-visible {
  outline: 2px solid rgba(199, 25, 45, 0.22);
  outline-offset: 2px;
}
.btn-ghost.is-active {
  background: rgba(199, 25, 45, 0.08);
}
.btn-ghost:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}
.btn-ghost:disabled:hover {
  background: #ffffff;
  border-color: #c7192d;
  color: #c7192d;
}

.page-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.page-head h1 {
  margin: 0;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.page-title-status {
  display: inline;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  color: #c7192d;
  vertical-align: baseline;
  letter-spacing: normal;
}
.page-head p {
  margin: 0.35rem 0 0;
  color: var(--muted);
}

.filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.chip {
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface);
  font-size: 0.85rem;
}
.chip.active {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

.board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.75rem;
}
.column {
  background: var(--surface);
  border: 1px solid var(--line);
  min-height: 220px;
}
.column-head {
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid var(--line);
  background: var(--stage);
  color: #fff;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
}
.column-body { padding: 0.65rem; display: grid; gap: 0.55rem; }

.job-card {
  display: block;
  padding: 0.7rem;
  border: 1px solid var(--line);
  background: #fff;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.job-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.job-card strong {
  display: block;
  font-size: 0.92rem;
  margin-bottom: 0.25rem;
}
.job-card span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  /* No top gap — heading text starts flush against the panel's top border
     line instead of floating above it. */
  padding: 0 20px 16px;
}
.panel + .panel { margin-top: 1rem; }
.panel h2 {
  /* Pulled up past the panel's own top border so the heading sits directly
     on the border line instead of just flush beneath it. */
  margin: -10px 0 16px;
  position: relative;
  font-size: 16px;
  font-weight: 700;
}

.form-grid {
  display: grid;
  gap: 0.9rem;
}
label {
  display: grid;
  gap: 0.35rem;
  font-size: 0.88rem;
  color: var(--muted);
}
input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.7rem 0.8rem;
  background: #fff;
  color: var(--ink);
}
textarea { min-height: 110px; resize: vertical; }

.auth-page {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: hidden;
  background:
    radial-gradient(900px 400px at 85% 15%, rgba(200, 16, 46, 0.08), transparent 50%),
    linear-gradient(160deg, #ffffff, #f0f2f5 60%, #e8ebf0);
  box-sizing: border-box;
}
.auth-card {
  width: min(100%, 680px);
  margin: 0;
}
.gateway-card {
  max-width: 680px;
  padding: 32px;
  display: grid;
  gap: 16px;
  justify-items: center;
  text-align: center;
  background: #ffffff;
  border: 1px solid #d0d5dd;
  border-top: 3px solid #c7192d;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.08);
  box-sizing: border-box;
}
.gateway-card .brand-logo-login {
  max-width: 220px;
  width: 100%;
  height: auto;
}
.gateway-card h1 { margin: 0; font-size: 1.5rem; }
.gateway-description, .gateway-access-notice { margin: 0; line-height: 1.5; }
.gateway-description { color: var(--ink); }
.gateway-access-notice { color: var(--muted); font-size: 0.84rem; }
.gateway-card .error { width: 100%; margin: 0; box-sizing: border-box; }
.gateway-auth-alert {
  width: 100%;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 18px 20px;
  color: #8f111f;
  background: linear-gradient(135deg, #fff8f8, #fff1f2);
  border: 1px solid #dc172f;
  border-radius: 8px;
  text-align: left;
  box-sizing: border-box;
}
.gateway-auth-alert__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #dc1028;
  border-radius: 50%;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
}
.gateway-auth-alert__content { display: grid; gap: 6px; min-width: 0; white-space: nowrap; }
.gateway-auth-alert__content strong { color: #a50e20; font-size: 1.05rem; line-height: 1.35; }
.gateway-auth-alert__content span { color: #7d2029; font-size: 0.95rem; line-height: 1.45; }
@media (max-width: 520px) {
  .gateway-card { padding: 24px 20px; }
  .gateway-auth-alert__content { white-space: normal; }
  .gateway-auth-alert { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 16px; }
  .gateway-auth-alert__icon { width: 40px; height: 40px; font-size: 1.6rem; }
}
.google-signin-button {
  width: 100%;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 12px;
  color: #1f1f1f;
  background: #ffffff;
  border: 1px solid #747775;
  border-radius: 6px;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
  cursor: pointer;
}
.google-signin-button:hover { background: #f8fafd; }
.google-signin-button:focus-visible { outline: 2px solid #1a73e8; outline-offset: 2px; }
.google-signin-button:disabled { opacity: 0.6; cursor: not-allowed; }
.google-signin-button img { width: 18px; height: 18px; flex: 0 0 18px; }

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.timeline li {
  border-left: 3px solid var(--accent);
  padding: 0.15rem 0 0.15rem 0.85rem;
}
.timeline time {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
}
.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0.75rem 0 1.25rem;
}
.stage-pill {
  display: inline-block;
  background: var(--stage);
  color: #fff;
  padding: 0.25rem 0.55rem;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.notif {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: start;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
}
.notif.unread strong { color: var(--accent); }
.empty {
  color: var(--muted);
  padding: 1.5rem 0.25rem;
  font-size: 0.95rem;
}

.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.85rem;
}

.personnel-filter-grid {
  grid-template-columns: repeat(4, minmax(180px, 1fr));
}

.personnel-reference-add-grid {
  grid-template-columns: repeat(4, minmax(200px, 1fr));
}

.personnel-reference-add-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.personnel-reference-add-form label {
  display: grid;
  gap: 0.35rem;
  font-size: 0.88rem;
  color: var(--muted);
}
.personnel-reference-add-form .btn {
  align-self: flex-start;
}

.pf-company { order: 1; }
.pf-search { order: 2; }
.pf-department { order: 3; }
.pf-title { order: 4; }
.pf-duty { order: 5; }
.pf-location { order: 6; }
.pf-clear { order: 7; }
.pf-apply { order: 8; }
.pf-work-type { order: 9; }
.pf-status { order: 10; }

.filter-action .btn,
.filter-action a.btn {
  width: 100%;
}

.table-wrap {
  width: 100%;
  /* Only this wrapper scrolls, and only horizontally. overflow-y must stay
     an explicit `visible` — leaving it unset while overflow-x is `auto`
     makes browsers silently resolve overflow-y to `auto` too (CSS overflow
     computed-value rule), which was producing the unwanted internal
     vertical scrollbar. */
  overflow-x: auto;
  overflow-y: visible;
}

.personnel-table {
  width: 100%;
  margin: 0;
  /* Sum of the fixed column widths below (970px data columns + 60px
     actions column) — keeps regular columns from being compressed; the
     table wrapper scrolls horizontally instead on narrower viewports. */
  min-width: 1030px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  border: 1px solid #dfe3e8;
}

.personnel-table th,
.personnel-table td {
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  overflow-wrap: anywhere;
}

.personnel-table thead th {
  height: 40px;
  padding: 0 10px;
  box-sizing: border-box;
  font-size: 13px;
  font-weight: 700;
  line-height: normal;
  background: #f3f4f6;
  border-top: 1px solid #dfe3e8;
  color: #374151;
  /* Nudge label text slightly upward within the fixed-height header row —
     purely visual offset, does not affect row height, column widths, or
     table structure. Applies uniformly to every header cell. */
  position: relative;
  top: -2px;
}

.personnel-table thead th:first-child {
  border-left: 0;
}

.personnel-table td {
  font-size: 13px;
  font-weight: 400;
}

.personnel-table tbody tr {
  height: 40px;
}

.personnel-table tbody td {
  height: 40px;
  padding: 0 0.5rem;
}

.personnel-table tbody td .btn {
  height: 30px;
  padding: 0 0.6rem;
  gap: 6px;
  line-height: 1;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}

.personnel-table tbody td .btn-ghost {
  border: none;
}

.personnel-table tbody td .btn-icon-only {
  width: 30px;
  height: 30px;
  padding: 0;
  gap: 0;
  border-radius: 6px;
}

.personnel-table tbody td .btn-delete-icon {
  width: 26px;
  height: 26px;
  line-height: 1;
}

.personnel-table .actions-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: nowrap;
  width: 100%;
  /* .personnel-table th/td sets overflow-wrap:anywhere for the data columns'
     free-text content; without an explicit override here that inherits into
     the action button(s), breaking any future text label one letter per
     line. word-break/writing-mode are reset for the same reason. */
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
  writing-mode: horizontal-tb;
}

.personnel-table .actions-inline > * {
  flex-shrink: 0;
}

.personnel-modal-overlay {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: var(--personnel-modal-overlay-top);
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12px;
  background: rgba(17, 17, 17, 0.22);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-sizing: border-box;
  overflow-y: auto;
}

.personnel-modal-overlay[hidden] {
  display: none;
}

.personnel-modal {
  width: min(900px, calc(100vw - 64px));
  max-width: 100%;
  max-height: calc(100vh - var(--personnel-modal-overlay-top) - 24px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 20px;
  border: 1px solid #dfe3e8;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  box-sizing: border-box;
}

.personnel-modal-header {
  position: sticky;
  top: -20px;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: -20px -20px 16px;
  padding: 14px 20px;
  border-bottom: 1px solid #dfe3e8;
  background: #ffffff;
}

.personnel-modal-header h2 {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  line-height: 24px;
}

.personnel-modal-person-name {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 18px;
}

.personnel-modal-close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid #dfe3e8;
  border-radius: 6px;
  background: #ffffff;
  color: #c7192d;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.personnel-modal-close:hover {
  border-color: #c7192d;
  background: rgba(199, 25, 45, 0.06);
}

.personnel-modal-close:focus-visible {
  outline: 2px solid rgba(199, 25, 45, 0.3);
  outline-offset: 2px;
}

.personnel-modal-content {
  min-width: 0;
}

.personnel-edit-panel {
  width: 100%;
  min-width: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  padding: 0;
}

body.personnel-modal-open {
  overflow: hidden;
}

body.personnel-modal-open .personnel-table-scroll {
  overflow: hidden;
}

.personnel-edit-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.personnel-edit-form,
.personnel-edit-form *,
.personnel-modal-header {
  min-width: 0;
  box-sizing: border-box;
}

.personnel-edit-form input,
.personnel-edit-form select,
.personnel-edit-form textarea {
  width: 100%;
  max-width: 100%;
}

.personnel-edit-form label,
.personnel-modal-header > div {
  overflow-wrap: anywhere;
}

/* One block per SECTION (Organizasyon / Görev ve Çalışma / İletişim ve Durum).
   Subtle separation only — a thin rule under the section title, no nested
   card/border around the section body. */
.personnel-edit-section + .personnel-edit-section {
  margin-top: 16px;
}

.personnel-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: end;
}

.personnel-edit-grid--contact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
.personnel-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
}

.personnel-contact-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.personnel-contact-field > input {
  width: 100%;
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  padding: 0 12px;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  box-sizing: border-box;
}

.personnel-edit-bottom-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin-top: 16px;
}

.personnel-employment-dates {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex: 0 1 572px;
  min-width: 0;
}

.employment-date-field,
.termination-date-field {
  flex: 1 1 0;
  width: min(280px, 100%);
  min-width: 0;
}

.employment-date-field input[type="date"],
.termination-date-field input[type="date"] {
  width: 100%;
  height: 42px;
  box-sizing: border-box;
}

.termination-date-field input[type="date"]:disabled {
  background: #f3f4f6;
  color: #8a9099;
  cursor: not-allowed;
  opacity: 1;
}

.personnel-edit-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-left: auto;
}

@media (max-width: 720px) {
  .personnel-contact-grid {
    grid-template-columns: 1fr;
  }

  .personnel-edit-bottom-row,
  .personnel-employment-dates {
    flex-wrap: wrap;
  }

  .personnel-employment-dates {
    flex: 1 0 100%;
  }

  .personnel-edit-actions {
    flex: 1 0 100%;
  }
}


.personnel-form-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.personnel-form-field > label,
.personnel-form-label {
  display: block;
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 18px;
  color: var(--muted);
}

.personnel-form-field input,
.personnel-form-field select {
  width: 100%;
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid #d0d5dd;
  border-radius: 5px;
  background: #ffffff;
  padding: 0 12px;
  font-size: 13px;
  color: var(--ink);
}

.personnel-form-field input:focus,
.personnel-form-field select:focus {
  border-color: #c7192d;
  outline: 2px solid rgba(199, 25, 45, 0.12);
  outline-offset: 0;
}

/* Compact company dropdown (edit panel only) — a single control the same
   size as any other field, showing the selected company's icon + name,
   opening a small menu with the other choices on click. */
.company-select {
  position: relative;
  min-width: 0;
}

.company-select-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  box-sizing: border-box;
  border: 1px solid #d0d5dd;
  border-radius: 5px;
  background: #ffffff;
  padding: 0 10px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.company-select-trigger:focus-visible,
.company-select.is-open .company-select-trigger {
  border-color: #c7192d;
  outline: 2px solid rgba(199, 25, 45, 0.12);
  outline-offset: 0;
}

.company-select-trigger-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.company-select-trigger-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.company-select-trigger-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-select-chevron {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  color: var(--muted);
  transition: transform 150ms ease;
}

.company-select.is-open .company-select-chevron {
  transform: rotate(180deg);
}

.company-select-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  box-shadow: 0 6px 16px rgba(16, 24, 40, 0.12);
  padding: 4px;
}

.company-select-option {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}

.company-select-option:hover {
  background: rgba(199, 25, 45, 0.06);
}

.company-select-option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.company-select-option-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.company-select-option-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 1024px) {
  .personnel-edit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .personnel-edit-grid {
    grid-template-columns: 1fr;
  }
}

/* Multi-email management area inside the İletişim ve Durum section. */
.personnel-form-field--emails {
  margin-bottom: 16px;
}

.personnel-email-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 0;
}

.personnel-email-row {
  min-width: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

.personnel-email-row.is-inactive {
  background: transparent;
}

.personnel-email-main-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 6px;
  min-width: 0;
}

.personnel-email-main-field .personnel-email-edit-input {
  width: 100%;
  min-width: 0;
}

.personnel-email-state {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
}

.personnel-phone-main-fields {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.personnel-phone-main-fields .personnel-email-edit-input {
  flex: 1 1 auto;
  width: auto;
}


.personnel-email-view {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
}


.personnel-email-address {
  font-size: 13px;
  color: var(--ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: auto;
}

.personnel-email-address--empty {
  color: var(--muted);
}

.personnel-email-badge {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}

.personnel-email-badge--primary {
  background: rgba(199, 25, 45, 0.08);
  border-color: rgba(199, 25, 45, 0.35);
  color: #c7192d;
}

.personnel-email-badge--secondary {
  background: #f3f4f6;
  border-color: #e5e7eb;
  color: var(--muted);
}

.personnel-email-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.personnel-email-management-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.personnel-email-edit-form[hidden],
.personnel-email-add-form[hidden],
.personnel-email-management-actions[hidden] {
  display: none !important;
}

.personnel-email-inline-form {
  margin: 0;
}

.personnel-email-delete-btn {
  border: 1px solid var(--line);
  background: #fff;
  color: #991b1b;
  border-radius: 4px;
  width: 26px;
  height: 26px;
  line-height: 1;
  cursor: pointer;
}

.personnel-email-delete-btn:hover {
  border-color: #fca5a5;
  background: #fef2f2;
}

.personnel-email-edit-form {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.personnel-email-edit-input,
.personnel-email-add-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 36px;
  box-sizing: border-box;
  border: 1px solid #d0d5dd;
  border-radius: 5px;
  padding: 0 10px;
  font-size: 13px;
  color: var(--ink);
}

.personnel-email-edit-input:focus,
.personnel-email-add-input:focus {
  border-color: #c7192d;
  outline: 2px solid rgba(199, 25, 45, 0.12);
  outline-offset: 0;
}

.personnel-email-empty {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--muted);
}

.personnel-email-add-form {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.personnel-email-form-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.personnel-email-add-trigger {
  align-self: flex-start;
}

@media (max-width: 720px) {
  .personnel-email-list {
    grid-template-columns: 1fr;
  }
}

/* Multi-phone management area — reuses the .personnel-email-* row/view/
   badge/actions/edit-form/delete-btn classes above (identical layout), only
   the list/row/view/number/extension wrapper classes are phone-specific. */
.personnel-form-field--phones {
  margin-bottom: 0;
}

.personnel-phone-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

.personnel-phone-row {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 6px 10px;
  background: #ffffff;
}

.personnel-phone-row.is-inactive {
  background: #f9fafb;
}

.personnel-phone-view {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.personnel-phone-identity {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-right: auto;
}

.personnel-phone-number {
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
}

.personnel-phone-extension {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}


/* Personnel Detayı panel — all email addresses with their states. */
.personnel-detail-emails {
  margin-top: 10px;
}

.personnel-detail-email-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.personnel-detail-email-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.personnel-modal .personnel-edit-panel .btn {
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  padding: 0 16px;
  gap: 8px;
  line-height: normal;
  white-space: nowrap;
}

.personnel-modal .personnel-edit-panel .btn-ghost {
  border: 1px solid #c7192d;
}

.personnel-modal .personnel-edit-panel .personnel-email-add-trigger {
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  padding: 0 12px;
}

.personnel-modal .personnel-edit-panel .btn-delete-icon {
  width: auto;
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  padding: 0 16px;
  border: 1px solid #c7192d;
  border-radius: 6px;
  background: #ffffff;
  color: #c7192d;
  font-weight: 600;
  font-size: 13px;
  line-height: normal;
}

.personnel-modal .personnel-edit-panel .btn-delete-icon:hover {
  background: rgba(199, 25, 45, 0.06);
  border-color: #a91425;
  color: #a91425;
}

/* reusable Şirket-column cell: [company icon][actual company name] */
.personnel-company {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.personnel-company__icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.personnel-company__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.personnel-company__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.personnel-table thead th:last-child,
.personnel-table td:last-child {
  /* Only a single 30x30 Düzenle icon lives here now — sized to that plus
     the cell's own padding, not the wider multi-button width from before. */
  border-right: none;
  width: 60px;
  min-width: 60px;
  text-align: center;
}

.personnel-table th:nth-child(1),
.personnel-table td:nth-child(1) {
  width: 40px;
  white-space: nowrap;
  text-align: center;
}

.personnel-table th:nth-child(2),
.personnel-table td:nth-child(2) {
  width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.personnel-table th:nth-child(3),
.personnel-table td:nth-child(3) {
  width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.personnel-table th:nth-child(4),
.personnel-table td:nth-child(4) {
  /* Birim */
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.personnel-table th:nth-child(5),
.personnel-table td:nth-child(5) {
  /* Ünvan */
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.personnel-table th:nth-child(6),
.personnel-table td:nth-child(6) {
  /* Telefon */
  width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.personnel-table th:nth-child(7),
.personnel-table td:nth-child(7) {
  /* Durum */
  width: 100px;
  text-align: center;
}

.status-pill {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  font-size: 0.76rem;
  border: 1px solid transparent;
}

.status-active {
  background: #ecfdf5;
  border-color: #99f6e4;
  color: #065f46;
}

.status-inactive {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #9a3412;
}

.actions-inline form {
  margin: 0;
}

.status-checkbox {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--ok);
}

.personnel-table .status-cell {
  text-align: center;
  vertical-align: middle;
}

.company-selector-block {
  display: grid;
  gap: 0.35rem;
  align-content: start;
}

.company-selector-title {
  font-size: 0.88rem;
  color: var(--muted);
}

.company-logo-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.company-logo-option {
  position: relative;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.company-logo-option img {
  max-width: 28px;
  max-height: 28px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.company-logo-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.company-logo-option:has(input:checked) {
  border-color: #c7192d;
  box-shadow: 0 0 0 2px rgba(199, 25, 45, 0.16);
}

.company-logo-option:has(input:disabled) {
  opacity: 0.65;
  cursor: default;
}

.btn-delete-icon {
  border: 1px solid var(--line);
  background: #fff;
  color: #991b1b;
  border-radius: 4px;
  width: 26px;
  height: 26px;
  line-height: 1;
  cursor: pointer;
  font-weight: 700;
}

.btn-delete-icon:hover {
  border-color: #fca5a5;
  background: #fef2f2;
}

.confirm-modal {
  position: fixed;
  inset: 0;
  background: rgba(17, 17, 17, 0.45);
  display: grid;
  place-items: center;
  padding: 1rem;
  z-index: 2000;
}

.confirm-modal[hidden] {
  display: none !important;
}

.confirm-card {
  width: min(420px, 100%);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px 20px 16px;
}

.confirm-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
}

.confirm-card-header h3 {
  margin: 0;
}

.confirm-modal-close {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.confirm-modal-close:hover {
  background: #f3f4f6;
  color: var(--ink);
}

.personnel-success-notice {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid #86c99a;
  border-radius: 6px;
  background: #edf9f0;
  color: #176b35;
  font-weight: 700;
}


.confirm-card p {
  margin: 0 0 1rem;
  color: var(--muted);
}

.delete-confirm-check {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #d71935;
  cursor: pointer;
  line-height: 1.35;
}

.delete-confirm-check input[type="checkbox"] {
  flex: 0 0 auto;
  margin: 0;
  accent-color: #d71935;
}


.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
}

@media (max-width: 720px) {
  .page-head { flex-direction: column; align-items: start; }
  .authenticated-user-area__identity { max-width: 140px; }
  .personnel-filter-grid { grid-template-columns: 1fr; }
}

/* Personnel page — fixed upper section, only the personnel list scrolls.
   Scoped to this page via html.personel-onay-page / body.personel-onay-page
   so no other page's scroll behavior is affected.

   Root cause of the clipped-last-row bug: .personnel-page previously had
   height: 100vh while still being pushed down in normal flow by .topbar and
   .authenticated-subnav above it (both live in the shared .shell, outside
   .personnel-page). 100vh + the topbar/subnav's own height together exceed
   the real viewport height, and body's overflow: hidden silently clipped
   whatever fell below the fold — including the personnel table's last
   rows — with no scroll path to reach it.

   Fix: make .shell itself the single flex column spanning the true
   viewport height (100dvh, falling back to 100vh), with topbar/subnav as
   fixed-size flex items and .personnel-page as the flexible remainder
   (flex: 1 1 auto). That remainder is exactly "the available height
   calculated from the viewport" without any hard-coded pixel guess. */
html.personel-onay-page,
body.personel-onay-page {
  height: 100%;
  overflow: hidden;
}
body.personel-onay-page {
  margin: 0;
}
body.personel-onay-page .shell {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* .shell's shared 3rem bottom padding is meant for normally-scrolling
     pages; here it would just eat into the fixed viewport budget for no
     benefit, since .personnel-page supplies its own spacing. */
  padding-bottom: 0;
}
body.personel-onay-page .shell > .topbar,
body.personel-onay-page .shell > .authenticated-subnav {
  flex: 0 0 auto;
}
.personnel-page {
  width: 100%;
  max-width: none;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 8px 0 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}
.personnel-fixed-content {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* background/z-index kept from before this pass: without them the sticky
     table header would show scrolled rows through it while scrolling. */
  background: transparent;
  z-index: 10;
}
.personnel-list-panel {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.active-personnel-panel,
.passive-personnel-panel {
  position: relative;
  width: 100%;
  min-inline-size: 0;
  margin: 0;
  padding: 10px 20px 12px;
  box-sizing: border-box;
  border: 1px solid #dfe3e8;
  background: #ffffff;
}

.active-personnel-table-wrap {
  position: relative;
  width: 100%;
  margin: 0;
}

.passive-personnel-panel {
  margin-top: 16px;
}
/* The optional Personel Detayı block remains a nested .panel inside the
   unified scroll flow; flatten only that detail chrome. Active and passive
   personnel lists are separate sibling fieldsets below. */
.personnel-list-panel .panel {
  border: 0;
  background: transparent;
  padding: 0;
}
/* Inner elements must not add their own horizontal margin/padding on top of
   .personnel-page's — otherwise their content sits indented relative to the
   panel border around them. */
.classification-form-content,
.new-personnel-form,
.personnel-table-scroll {
  width: 100%;
  min-width: 0;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
}
.personnel-form-toggle-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}

.personnel-form-toggle-row > button {
  width: 100%;
  min-width: 0;
}

.classification-toggle,
.new-personnel-toggle {
  margin-left: 0;
  margin-right: 0;
  color: #c7192d;
  border: 1px solid #c7192d;
  background: #ffffff;
  font-weight: 700;
}
.classification-toggle:hover,
.new-personnel-toggle:hover {
  color: #ffffff;
  border-color: #c7192d;
  background: #c7192d;
}
.classification-toggle:focus-visible,
.new-personnel-toggle:focus-visible {
  outline: 2px solid rgba(199, 25, 45, 0.25);
  outline-offset: 2px;
}
.personnel-table-scroll {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 0 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.personnel-table thead {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #f5f6f8;
}

/* Yeni Personel Ekle — collapsed-by-default form. */
.new-personnel-form[hidden] {
  display: none !important;
}
.new-personnel-form:not([hidden]) {
  display: block;
}

.new-personnel-layout {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.new-personnel-row {
  display: grid;
  align-items: end;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.new-personnel-row > label,
.new-personnel-row > .company-selector-block {
  min-width: 0;
}

.new-personnel-row--one {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.new-personnel-row--two {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.new-personnel-row--three {
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
}

.new-personnel-row--three .new-personnel-submit {
  justify-self: end;
  width: auto;
  min-width: 150px;
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  align-self: end;
  margin: 0;
  box-sizing: border-box;
}

@media (max-width: 1000px) {
  .new-personnel-row--one,
  .new-personnel-row--two {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .new-personnel-row--three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .new-personnel-row--one,
  .new-personnel-row--two,
  .new-personnel-row--three {
    grid-template-columns: minmax(0, 1fr);
  }

  .new-personnel-row--three .new-personnel-submit {
    width: min(220px, 100%);
  }
}

.new-personnel-toggle {
  display: block;
  margin: 0;
  box-sizing: border-box;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  text-align: center;
}

/* Sınıflandırma Listelerine Yeni Değer Ekle — each "Ekle" button matches the
   width of its own input above it, instead of shrinking to its text width. */
.classification-add-group {
  display: flex;
  flex-direction: column;
}
.classification-add-group .classification-add-button {
  display: block;
  width: 100%;
  box-sizing: border-box;
}
.classification-add-button,
.new-personnel-submit {
  color: #ffffff;
  background: #c7192d;
  border: 1px solid #c7192d;
  font-weight: 700;
}
.classification-add-button:hover,
.new-personnel-submit:hover {
  color: #ffffff;
  background: #a91426;
  border-color: #a91426;
}
.classification-add-button:focus-visible,
.new-personnel-submit:focus-visible {
  outline: 2px solid rgba(199, 25, 45, 0.30);
  outline-offset: 2px;
}

/* Personel Sayısı Özeti — moved inline next to the "Personel" nav button
   (subnav is shared markup in base.html; the box itself is only rendered
   when request.url.path == '/personel_onay', so other pages are unaffected
   even though .personnel-navigation-row's own rule applies to every page's
   .authenticated-subnav__left). */
.personnel-navigation-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}
.personnel-inline-summary {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  height: 30px;
  min-height: 30px;
  padding: 0 12px;
  box-sizing: border-box;
  border: 1px solid #d6d9de;
  border-radius: 6px;
  background: #ffffff;
  color: #667085;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}
.personnel-inline-summary strong {
  margin-right: 4px;
  color: #526176;
  font-weight: 600;
}
@media (max-width: 700px) {
  .personnel-inline-summary {
    width: 100%;
    justify-content: space-between;
    gap: 8px;
    white-space: normal;
  }
}

/* Page title/description temporarily hidden (not deleted, so it can be
   restored later by removing this one class) — reserves zero layout space.
   The reset block below is the authoritative final state for all three
   selectors (it is deliberately the last rule for these classes in this
   file, so it wins over the earlier compaction-pass margins on tie-break). */
.personnel-page-heading {
  display: none !important;
}
.personnel-page-heading,
.personnel-page-title,
.personnel-page-description {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}
.personnel-page fieldset {
  padding-top: 10px;
}

.personnel-page fieldset > legend {
  display: table;
  width: auto;
  max-width: calc(100% - 32px);
  margin-left: 16px;
  padding: 0;
  background: transparent;
  line-height: 20px;
  font-weight: 700;
  box-sizing: border-box;
}
.classification-form-content[hidden] {
  display: none !important;
}
.classification-form-content:not([hidden]) {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.classification-toggle {
  display: block;
  margin: 0;
  box-sizing: border-box;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  text-align: center;
}
@media (max-width: 900px) {
  .classification-form-content:not([hidden]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .personnel-form-toggle-row,
  .classification-form-content:not([hidden]) {
    grid-template-columns: 1fr;
  }
}


/* /personel_onay page permissions and live presence */
.personnel-page-access-button,
.personnel-presence-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.personnel-page-access-button {
  border: 1px solid #c7192d;
  background: #fff5f6;
  color: #a91425;
}
.personnel-page-access-button:hover { background: #fdebed; }
.personnel-control-icon { width: 15px; height: 15px; flex: 0 0 15px; }
.personnel-presence-button {
  border: 1px solid #86d5a8;
  background: #edf9f2;
  color: #08783e;
}
.personnel-presence-button:hover { background: #e1f5e9; }
.personnel-presence-indicator {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, .12);
}
.personnel-view-only-notice,
.personnel-concurrent-warning { margin: 0 0 12px; padding: 10px 12px; border: 1px solid #f0c36d; border-radius: 6px; background: #fff8e7; color: #7a4b00; }
.page-access-overlay { position: fixed; inset: 0; z-index: 2200; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(17,17,17,.28); }
.page-access-overlay[hidden] { display: none; }
.page-access-modal { display: flex; flex-direction: column; width: min(980px, calc(100vw - 64px)); max-height: calc(100vh - 48px); overflow: hidden; padding: 20px; border: 1px solid #dfe3e8; border-radius: 8px; background: #fff; box-shadow: 0 12px 32px rgba(0,0,0,.18); }
.page-access-modal > header { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 0 14px; background: #fff; }
.page-access-modal h2 { margin: 0; }
.page-access-modal header button { border: 0; background: transparent; font-size: 24px; cursor: pointer; }
.page-access-toolbar { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.page-access-search { width: min(480px, 100%); margin: 0; }
.page-access-result-count { flex: 0 0 auto; color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.page-access-modal form { display: flex; flex: 1 1 auto; min-height: 0; flex-direction: column; }
.page-access-list-wrap { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; border: 1px solid #e5e7eb; border-radius: 6px; }
.page-access-columns, .page-access-row { display: grid; grid-template-columns: minmax(0, 35fr) minmax(0, 24fr) minmax(0, 29fr) minmax(48px, 6fr) minmax(48px, 6fr); align-items: center; gap: 12px; }
.page-access-columns { position: sticky; top: 0; z-index: 2; min-height: 42px; padding: 0 12px; border-bottom: 1px solid #d7dce2; background: #f3f5f7; color: #475467; font-size: 12px; font-weight: 700; }
.page-access-columns span:nth-last-child(-n+2) { text-align: center; }
.page-access-column-icon { display: flex; align-items: center; justify-content: center; color: #475467; }
.page-access-column-icon svg { width: 18px; height: 18px; }
.page-access-list { display: block; }
.page-access-row { min-height: 58px; padding: 7px 12px; border-bottom: 1px solid #e9ecef; }
.page-access-row[hidden] { display: none; }
.page-access-row:nth-child(even) { background: #fafbfc; }
.page-access-row:last-of-type { border-bottom: 0; }
.page-access-row > div, .presence-user > div { display: grid; min-width: 0; gap: 2px; }
.page-access-row span, .presence-user span { font-size: 12px; color: var(--muted); }
.page-access-row.is-disabled { color: #667085; }
.page-access-identity strong { display: flex; align-items: center; min-width: 0; gap: 7px; }
.page-access-identity > span, .page-access-company span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.25; }
.page-access-identity strong { line-height: 1.25; }
.page-access-presence-dot { flex: 0 0 auto; }
.page-access-presence-dot.has-no-account { visibility: hidden; }
.page-access-status { align-content: center; }
.page-access-account-status { justify-self: start; padding: 3px 7px; border-radius: 999px; background: #eef2f6; color: #344054 !important; font-size: 11px !important; font-weight: 700; line-height: 1.25; }
.page-access-row:not(.is-disabled) .page-access-account-status { background: #eaf7ef; color: #08783e !important; }
.page-access-disabled-help { overflow: hidden; color: #667085; font-size: 11px !important; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.page-access-check { display: flex; align-items: center; justify-content: center; min-height: 32px; cursor: pointer; }
.page-access-check input { width: 16px; height: 16px; margin: 0; }
.page-access-check:has(input:disabled) { cursor: not-allowed; }
.page-access-empty { margin: 0; padding: 24px 12px; color: var(--muted); text-align: center; }
.page-access-actions { flex: 0 0 auto; display: flex; justify-content: flex-end; gap: 12px; margin-top: 14px; padding-top: 2px; background: #fff; }
.page-presence-modal { width: min(620px, 100%); }
.presence-user { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid #e5e7eb; }
.presence-dot { width: 8px; height: 8px; border-radius: 50%; background: #98a2b3; }
.presence-dot.is-online { background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.12); }
@media (max-width: 900px) {
  .page-access-overlay { padding: 12px; }
  .page-access-modal { max-height: calc(100vh - 24px); padding: 14px; }
  .page-access-columns, .page-access-row { grid-template-columns: minmax(190px, 1.45fr) minmax(150px, 1fr) minmax(210px, 1.2fr) 56px 56px; gap: 8px; }
}


/* Reusable management-list template (Personnel, Expenses and future modules). */
html.management-page-root,
body.management-page-body { height: 100%; overflow: hidden; }
body.management-page-body { margin: 0; }
body.management-page-body .shell { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; }
body.management-page-body .shell > .topbar,
body.management-page-body .shell > .authenticated-subnav { flex: 0 0 auto; }
.management-page { width: 100%; max-width: none; flex: 1 1 auto; min-height: 0; padding: 8px 0 10px; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.management-fixed-content { flex: 0 0 auto; width: 100%; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.management-page-heading { margin: 0; }
.management-page-heading h1 { margin: 0; }
.management-page-heading p { margin: 4px 0 0; color: var(--muted); }
.management-result-summary, .management-feature-status { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border: 1px solid #d6d9de; border-radius: 999px; background: #fff; color: #526176; font-size: 12px; font-weight: 700; }
.management-filter-panel { margin: 0; padding: 12px; }
.management-filter-form { display: grid; gap: 12px; }
.management-filter-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 12px; }
.management-filter-grid label, .management-form-grid label, .management-form-button-field { display: flex; flex-direction: column; min-width: 0; gap: 5px; color: #475467; font-size: 12px; font-weight: 600; }
.management-filter-grid input, .management-filter-grid select { width: 100%; min-width: 0; height: 36px; padding: 0 10px; box-sizing: border-box; }
.management-date-range { grid-column: span 2; }
.management-date-range > span { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.management-filter-search { grid-column: span 2; }
.management-filter-actions, .management-form-actions { display: flex; justify-content: flex-end; gap: 10px; }
.management-list-panel { flex: 1 1 auto; min-height: 0; width: 100%; overflow: hidden; }
.management-table-scroll { height: 100%; min-height: 0; padding: 0 0 12px; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.management-table-panel { min-width: 0; margin: 0; padding: 10px 20px 12px; border: 1px solid #dfe3e8; background: #fff; box-sizing: border-box; }
.management-table-panel > legend { margin-left: 16px; font-weight: 700; }
.management-table-wrap { width: 100%; overflow-x: auto; }
.management-table { width: 100%; border-collapse: collapse; background: #fff; }
.management-table th, .management-table td { padding: 8px 10px; border-bottom: 1px solid #e5e7eb; vertical-align: middle; font-size: 12px; text-align: left; }
.management-table thead { position: sticky; top: 0; z-index: 4; background: #f5f6f8; }
.management-table tbody tr { transition: background-color .15s ease; }
.management-table tbody tr:hover, .management-table tbody tr[aria-selected="true"] { background: #fff7f8; }
.management-select-column { width: 38px; text-align: center !important; }
.management-sort-button { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 700; white-space: nowrap; cursor: pointer; }
.management-sort-button.is-active { color: #a91425; }
.management-upload-panel { margin: 14px 0 0; padding: 16px; }
.management-section-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.management-section-header h2, .management-drawer h2, .management-drawer h3 { margin: 0; }
.management-section-header p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.management-form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.management-form-grid input, .management-form-grid select, .management-form-grid textarea { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
.management-form-button-field .btn { height: 42px; }
.management-form-span-2 { grid-column: span 2; }
.management-form-actions { margin-top: 14px; }
.management-form-feedback { margin: 12px 0 0; padding: 9px 12px; border: 1px solid #f0c36d; border-radius: 6px; background: #fff8e7; color: #7a4b00; font-size: 12px; }
.expenses-table { min-width: 1680px; table-layout: fixed; }
.expenses-table th:nth-child(2), .expenses-table td:nth-child(2) { width: 74px; text-align: center; }
.expenses-table th:nth-child(3), .expenses-table td:nth-child(3) { width: 104px; }
.expenses-table th:nth-child(4), .expenses-table td:nth-child(4) { width: 126px; }
.expenses-table th:nth-child(5), .expenses-table td:nth-child(5) { width: 160px; }
.expenses-table th:last-child, .expenses-table td:last-child { width: 58px; text-align: center; }
.expense-thumbnail { width: 38px; height: 46px; padding: 0; border: 1px solid #d0d5dd; border-radius: 4px; background: #fff; color: #667085; cursor: pointer; }
.expense-thumbnail svg { width: 26px; height: 34px; fill: #f5f6f8; stroke: currentColor; stroke-width: 1.5; }
.expense-amount { font-weight: 700; white-space: nowrap; }
.ocr-confidence { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.ocr-confidence--excellent { background: #eaf7ef; color: #08783e; }
.ocr-confidence--good { background: #eef4ff; color: #175cd3; }
.ocr-confidence--review { background: #fff4e5; color: #b54708; box-shadow: inset 0 0 0 1px #fdb022; }
.management-drawer-overlay { position: fixed; inset: 0; z-index: 2400; display: flex; justify-content: flex-end; background: rgba(17,17,17,.28); }
.management-drawer-overlay[hidden] { display: none; }
.management-drawer { width: min(620px, calc(100vw - 32px)); height: 100%; display: flex; flex-direction: column; background: #fff; box-shadow: -12px 0 32px rgba(0,0,0,.18); animation: management-drawer-in .18s ease-out; }
.management-drawer > header { flex: 0 0 auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 18px; border-bottom: 1px solid #dfe3e8; }
.management-drawer > header p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.management-drawer-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px; }
.management-drawer-content section { padding: 14px 0; border-bottom: 1px solid #e5e7eb; }
.management-drawer-content section:first-child { padding-top: 0; }
.management-drawer-content h3 { margin-bottom: 10px; font-size: 14px; }
.management-drawer-open { overflow: hidden; }
.expense-document-preview { display: grid; justify-items: center; gap: 8px; min-height: 260px; padding: 22px !important; border: 1px solid #dfe3e8 !important; border-radius: 6px; background: #f8fafc; }
.expense-document-preview svg { width: 150px; height: 200px; fill: #fff; stroke: #98a2b3; stroke-width: 2; }
.expense-document-preview p { margin: 0; color: var(--muted); font-size: 12px; }
.expense-detail-grid { display: grid; grid-template-columns: minmax(130px, .8fr) 1.2fr; gap: 7px 12px; font-size: 12px; }
.expense-detail-grid span, .management-muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@keyframes management-drawer-in { from { transform: translateX(24px); opacity: .7; } to { transform: translateX(0); opacity: 1; } }
@media (max-width: 1100px) { .management-filter-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .management-form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .management-filter-grid, .management-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .management-date-range, .management-filter-search, .management-form-span-2 { grid-column: 1 / -1; } .management-section-header { flex-direction: column; } }
@media (max-width: 520px) { .management-filter-grid, .management-form-grid { grid-template-columns: 1fr; } .management-filter-actions, .management-form-actions { flex-wrap: wrap; } }

.ocr-result-summary { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 12px; border: 1px solid #b7dfc8; border-radius: 6px; background: #edf9f2; color: #08783e; font-size: 12px; }
.ocr-result-summary[hidden] { display: none; }
.ocr-result-summary span { color: #526176; }
.management-form-feedback.is-error { border-color: #fda29b; background: #fef3f2; color: #b42318; }
.is-ocr-uncertain { padding: 7px; border: 1px solid #fdb022; border-radius: 6px; background: #fffaeb; }
.ocr-raw-text-field textarea { font-family: Consolas, monospace; font-size: 11px; line-height: 1.4; }