: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;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--surface);
  border-bottom: 1px solid rgba(17,18,20,0.20);
  /* Full width trick within shell padding: The shell has 32px inline padding.
     To make the header span the full width of the screen, we need it to have negative margin
     and extra padding, or just keep it inside the shell and let it be sticky within the container.
     Wait, the instructions don't mention negative margins. Let's just use what they said. */
  margin-inline: -32px;
  padding-inline: 32px;
}

.app-header-top {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* They requested padding 0 20px, but shell already has padding 32px. Let's use 0 because wrapper overrides it, or follow them: */
  /* padding: 0 20px; But wait, if I use margin-inline: -32px, padding-inline: 32px to fill the shell background, the content stays aligned. */
  padding: 0;
}

.app-header-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0 10px;
  border-top: 1px solid var(--line);
}

.app-header-nav__left,
.app-header-nav__right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* compact navigation-button variant, used only in .app-header-nav (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: 5px;
  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 {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  flex-shrink: 0;
  box-sizing: border-box;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  text-decoration: none;
}

/* Desktop: çan | çizgi | profil | isim — yatay aralık tam 5px (çift margin yok). */
@media (min-width: 1024px) {
  .app-header-top .nav {
    gap: 5px;
  }
  .app-header-top .notification-button,
  .app-header-top .authenticated-user-area__action-divider,
  .app-header-top .authenticated-user-area__profile-icon,
  .app-header-top .authenticated-user-area {
    margin-left: 0;
    margin-right: 0;
  }
  .app-header-top .nav > form {
    margin-left: 5px;
  }
}
.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: 22px;
  height: 22px;
  pointer-events: none;
}
.notification-button__badge {
  position: absolute;
  top: 1px;
  left: 1px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #c7192d;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  box-sizing: border-box;
  pointer-events: none;
  box-shadow: 0 0 0 2px #fff;
}

.authenticated-user-area__action-divider {
  display: block;
  flex: 0 0 1px;
  width: 1px;
  height: 24px;
  margin: 0;
  background: #d0d5dd;
}

.authenticated-user-area__profile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  box-sizing: border-box;
  border-radius: 8px;
  color: var(--muted);
  flex-shrink: 0;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  border: none;
  transition: color 0.12s ease, background 0.12s ease;
}
.authenticated-user-area__profile-icon svg {
  width: 22px;
  height: 22px;
  pointer-events: none;
}
.authenticated-user-area__profile-icon:hover {
  color: #c7192d;
  background: rgba(199, 25, 45, 0.06);
  text-decoration: none;
}
.authenticated-user-area__profile-icon:focus-visible {
  outline: 2px solid rgba(199, 25, 45, 0.25);
  outline-offset: 2px;
  color: #c7192d;
}
.authenticated-user-area__profile-icon:active {
  color: #a01424;
}

.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); }
.btn:disabled,
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
.btn:disabled:hover,
.btn[disabled]:hover {
  background: var(--accent);
}

/* 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-field-hint {
  margin-top: 4px;
  font-size: 0.78rem;
  line-height: 1.35;
  color: #667085;
}

.personnel-detail-ozluk .personnel-ozluk-label {
  display: inline-block;
  min-width: 7.5rem;
  color: #475467;
  font-weight: 600;
}

.personnel-ozluk-masked {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.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;
}

/* Desktop: phone text visible; mobile trigger hidden until ≤1023. */
.personnel-col-company__mobile,
.personnel-col-phone__mobile {
  display: none;
}
.personnel-phone-trigger {
  display: none;
  color: #c7192d;
}
.personnel-phone-trigger .btn-icon {
  width: 18px;
  height: 18px;
}
.personnel-col-phone__mobile .btn-icon {
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

@media (max-width: 1023px) {
  body.personel-onay-page .personnel-table .personnel-col-unit,
  body.personel-onay-page .personnel-table .personnel-col-status {
    display: none !important;
  }
  body.personel-onay-page .personnel-company__name {
    display: none;
  }
  body.personel-onay-page .personnel-company {
    gap: 0;
    justify-content: center;
  }
  body.personel-onay-page .personnel-col-company__desktop,
  body.personel-onay-page .personnel-col-phone__desktop,
  body.personel-onay-page .personnel-phone-text {
    display: none !important;
  }
  body.personel-onay-page .personnel-col-company__mobile,
  body.personel-onay-page .personnel-col-phone__mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  body.personel-onay-page .personnel-phone-trigger {
    display: inline-flex;
  }
  body.personel-onay-page .personnel-company__icon {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
  }
}

.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;
}

/* Mobile personnel list: fit 6 columns in viewport — no horizontal scroll.
   Placed after desktop nth-child widths so these overrides win. */
@media (max-width: 1023px) {
  body.personel-onay-page .personnel-page {
    padding-inline: 6px;
  }
  body.personel-onay-page .active-personnel-panel,
  body.personel-onay-page .passive-personnel-panel {
    padding: 8px 6px 10px;
  }
  body.personel-onay-page .active-personnel-table-wrap,
  body.personel-onay-page .table-wrap,
  body.personel-onay-page .personnel-table-scroll {
    /* Keep vertical scroll when clamping overflow-x (CSS would otherwise
       coerce overflow-y to the non-visible axis inconsistently). */
    overflow-x: auto !important;
    overflow-y: auto !important;
    max-width: 100%;
  }
  body.personel-onay-page .personnel-table {
    min-width: 0 !important;
    width: 100% !important;
    table-layout: fixed;
  }
  body.personel-onay-page .personnel-table thead th,
  body.personel-onay-page .personnel-table tbody td {
    padding-left: 3px !important;
    padding-right: 3px !important;
    font-size: 11px;
  }
  body.personel-onay-page .personnel-table thead th {
    height: 32px;
    font-size: 10px;
    top: 0;
  }
  body.personel-onay-page .personnel-table tbody tr,
  body.personel-onay-page .personnel-table tbody td {
    height: 36px;
  }
  /* Reset desktop fixed column widths (hidden cols already display:none). */
  body.personel-onay-page .personnel-table th:nth-child(n),
  body.personel-onay-page .personnel-table td:nth-child(n),
  body.personel-onay-page .personnel-table thead th:last-child,
  body.personel-onay-page .personnel-table td:last-child {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  body.personel-onay-page .personnel-table th.personnel-col-sira,
  body.personel-onay-page .personnel-table td.personnel-col-sira {
    width: 7% !important;
    text-align: center;
  }
  body.personel-onay-page .personnel-table th.personnel-col-name,
  body.personel-onay-page .personnel-table td.personnel-col-name {
    width: 34% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  body.personel-onay-page .personnel-table th.personnel-col-company,
  body.personel-onay-page .personnel-table td.personnel-col-company {
    width: 11% !important;
    text-align: center;
  }
  body.personel-onay-page .personnel-table th.personnel-col-title,
  body.personel-onay-page .personnel-table td.personnel-col-title {
    width: 24% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  body.personel-onay-page .personnel-table th.personnel-col-phone,
  body.personel-onay-page .personnel-table td.personnel-col-phone,
  body.personel-onay-page .personnel-table th.personnel-col-actions,
  body.personel-onay-page .personnel-table td.personnel-col-actions {
    width: 12% !important;
    text-align: center;
  }
  body.personel-onay-page .personnel-table tbody td .btn-icon-only,
  body.personel-onay-page .personnel-phone-trigger {
    width: 28px;
    height: 28px;
    min-width: 28px;
  }
  body.personel-onay-page .personnel-table tbody td .btn-icon,
  body.personel-onay-page .personnel-phone-trigger .btn-icon {
    width: 15px;
    height: 15px;
  }
}

.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 .app-header-top and
   .app-header-nav 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 > .app-header-top,
body.personel-onay-page .shell > .app-header-nav,
body.personel-onay-page .shell > .app-mobile-header {
  flex: 0 0 auto;
}

/* Kok neden: <main> etiketi artik 'personnel-page' sinifini degil
   'molekulas-module-frame ik-module-frame' siniflarini kullaniyor, ama
   yukaridaki scroll-fix mekanizmasi (bkz. yukarida "Personnel page"
   yorumu) hala .personnel-page'in flex:1 1 auto + min-height:0 +
   flex-column context saglamasina bagimliydi. .personnel-list-panel
   zaten flex:1 1 auto bekliyor ama <main> block display oldugu icin bu
   hicbir sey yapmiyordu ve tum icerik (4600px+) shell'in 889px'lik
   overflow:hidden alani icinde scroll'suz kirpiliyordu ("scroll gitti,
   sayfa hareketsiz"). Sadece layout ozellikleri geri getiriliyor;
   molekulas-module-frame'in gorsel stili (border/radius/golge/padding)
   dokunulmadan kaliyor. */
body.personel-onay-page main.molekulas-module-frame.ik-module-frame {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}


/* Personel kartı shares body.personel-onay-page with the list page but is a
   normal document flow page — do NOT inherit the list's viewport lock or a
   second nested scrollbar appears on the right (tabs overflow-x also forces
   overflow-y:auto in browsers unless overflow-y is set explicitly). */
html.personel-karti-page,
body.personel-karti-page {
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
body.personel-karti-page .shell {
  height: auto;
  min-height: 100dvh;
  min-height: 100vh;
  display: block;
  overflow: visible;
  padding-bottom: 3rem;
}
body.personel-karti-page .personel-karti {
  overflow-x: hidden;
  overflow-y: visible;
}

/* Mobile (≤1023): standard compact header; hide platform topbar + subnav box.
   Desktop (≥1024): unchanged shared topbar/subnav. */
body.personel-onay-page .personnel-compact-header {
  display: none;
}
@media (max-width: 1023px) {
  body.personel-onay-page .shell {
    padding-inline: 0;
  }
  body.personel-onay-page .shell > .app-header-top,
  body.personel-onay-page .shell > .app-header-nav {
    display: none !important;
  }
  body.personel-onay-page .personnel-compact-header {
    display: block;
    width: 100%;
    padding: 2px 0 0;
    margin-bottom: 5px;
  }
  body.personel-onay-page .personnel-page {
    padding-inline: 6px;
  }
  body.personel-onay-page .personnel-fixed-content {
    gap: 5px;
  }
}
.personnel-compact-header__top {
  display: grid;
  grid-template-columns: minmax(44px, 1fr) auto minmax(44px, 1fr);
  align-items: center;
  width: 100%;
  padding-bottom: 3px;
  border-bottom: 1px solid #e5e7eb;
}
.personnel-compact-header__menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 1px solid #9CA3AF;
  border-radius: 6px;
  background: transparent;
  color: #6B7280;
  cursor: pointer;
  justify-self: start;
  appearance: none;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.personnel-compact-header__menu-toggle:hover,
.personnel-compact-header__menu-toggle:focus-visible {
  background: #f3f4f6;
  color: #344054;
  outline: none;
}
.personnel-compact-header__menu-toggle[aria-expanded="true"] {
  background: #f3f4f6;
  color: #c7192d;
  border-color: #c7192d;
}
.personnel-compact-header__menu-toggle svg { width: 24px; height: 24px; pointer-events: none; }
.personnel-compact-header__menu-toggle:disabled {
  color: #6B7280;
  background: transparent;
  opacity: 1;
  pointer-events: none;
  cursor: not-allowed;
}
.personnel-compact-header .app-mobile-menu { margin-top: 8px; }
@media (min-width: 1024px) {
  .personnel-compact-header .app-mobile-menu { display: none !important; }
}
.personnel-compact-header__brand {
  display: flex;
  grid-column: 2;
  align-items: center;
  justify-self: center;
  margin: 0;
}
.personnel-compact-header__logo {
  display: block;
  width: 208px;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}
.personnel-compact-header__actions {
  grid-column: 3;
  justify-self: end;
  margin-left: 0;
  display: inline-flex;
  align-items: center;
}
.personnel-logout-form { margin: 0; }
.personnel-header-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #9CA3AF;
  border-radius: 6px;
  background: transparent;
  color: #667085;
  cursor: pointer;
  appearance: none;
}
.personnel-header-icon-button svg { width: 20px; height: 20px; }
.personnel-header-logout {
  width: 40px;
  height: 40px;
  color: #c7192d;
}
.personnel-header-logout:hover,
.personnel-header-logout:focus-visible {
  color: #a91023;
  background: #fff1f3;
}
.personnel-compact-header__bottom {
  display: flex;
  align-items: center;
  padding: 5px 0 0;
}
.personnel-compact-header__user {
  min-width: 0;
  margin: 0;
  padding: 0;
}
.personnel-compact-header__name {
  font-size: 12px;
  font-weight: 700;
  color: #c7192d;
  line-height: 1.2;
  white-space: nowrap;
}
@media (min-width: 768px) and (max-width: 1023px) {
  .personnel-compact-header__logo { width: 280px; }
}

.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;
  height: auto;
  max-height: 100%;
  padding: 0 0 12px;
  overflow-x: auto;
  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
   .app-header-nav__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 > .app-header-top,
body.management-page-body .shell > .app-header-nav,
body.management-page-body .shell > .app-mobile-header { 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;
  display: flex;
  flex-direction: column;
}
/* Sole vertical scroll host for long lists: flex growth + min-height:0.
   Avoid height:100% alone — it often fails when the parent only has a flex
   size, leaving no overflow path and clipping lower rows. */
.management-table-scroll {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: 100%;
  padding: 0 0 12px;
  overflow-x: auto;
  overflow-y: 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 tiers: danger / warning / success (shared with Son Ä°ÅŸlemler lines) */
.ocr-confidence--low { background: rgba(220, 53, 69, 0.16); color: #dc3545; }
.ocr-confidence--mid { background: rgba(253, 126, 20, 0.18); color: #fd7e14; }
.ocr-confidence--high { background: rgba(25, 135, 84, 0.16); color: #198754; }
.ocr-confidence--excellent { background: rgba(25, 135, 84, 0.16); color: #198754; }
.ocr-confidence--good { background: rgba(253, 126, 20, 0.18); color: #fd7e14; }
.ocr-confidence--review { background: rgba(220, 53, 69, 0.16); color: #dc3545; }
.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; } }

/* Personel kartı — yatay, optimize desktop density (standart renk/stil) */
.personel-karti {
  --pk-text-base: 13px;
  --pk-text-sm: 12px;
  --pk-text-lg: 1.35rem;
  --pk-gap-xs: 8px;
  --pk-gap-sm: 12px;
  --pk-gap-md: 16px;
  --pk-photo: 175px;
  margin-top: 0.75rem;
  font-size: var(--pk-text-base);
  line-height: 1.35;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
  color: var(--ink);
}
.personel-karti__toolbar { margin-bottom: var(--pk-gap-sm); }
/* Yatay hero: 175×175 foto + kimlik/özet sağda. */
.personel-karti__header {
  display: grid;
  grid-template-columns: var(--pk-photo) minmax(0, 1fr);
  gap: var(--pk-gap-md);
  align-items: stretch;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  position: relative;
  z-index: 1;
}
.personel-karti__identity {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pk-gap-sm);
  justify-content: space-between;
}
.personel-karti__identity-main { min-width: 0; }
.personel-karti__header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.personel-karti__photo {
  width: var(--pk-photo);
  height: var(--pk-photo);
  max-width: 100%;
  border-radius: 12px;
  background: #eef1f5;
  border: 2px solid var(--line);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  box-sizing: border-box;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
/* Durum balonu yok — durum renkleri foto çerçevesinde (status-active / status-inactive) */
.personel-karti__photo--active {
  background: #ecfdf5;
  border-color: #99f6e4;
  box-shadow: 0 0 0 1px rgba(5, 150, 105, 0.12);
}
.personel-karti__photo--active .personel-karti__photo-fallback {
  color: #065f46;
}
.personel-karti__photo--inactive {
  background: #fff7ed;
  border-color: #fed7aa;
  box-shadow: 0 0 0 1px rgba(154, 52, 18, 0.1);
}
.personel-karti__photo--inactive .personel-karti__photo-fallback {
  color: #9a3412;
}
.personel-karti__header--active {
  border-color: #99f6e4;
  box-shadow: 0 0 0 1px rgba(153, 246, 228, 0.35);
}
.personel-karti__header--inactive {
  border-color: #fed7aa;
  box-shadow: 0 0 0 1px rgba(254, 215, 170, 0.4);
}
.personel-karti__photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.personel-karti__photo-fallback {
  font-size: clamp(2rem, 12vw, 3.25rem);
  font-weight: 700;
  color: var(--muted);
  line-height: 1;
  user-select: none;
}
.personel-karti__name {
  margin: 0 0 6px;
  font-size: var(--pk-text-lg);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.personel-karti__meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  color: var(--muted);
  font-size: var(--pk-text-base);
  line-height: 1.35;
}
.personel-karti__meta-item {
  display: inline-flex;
  align-items: center;
}
.personel-karti__meta-item:not(:last-child)::after {
  content: none;
}
/* Özet kartları kimlik bloğunun altında yatay ızgara */
.personel-karti__ozet { margin: 0; min-height: 0; }
.personel-karti__ozet--inline { margin-top: auto; }
.personel-karti__ozet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: var(--pk-gap-xs);
}
.personel-karti__ozet-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: #f8fafc;
  min-width: 0;
  overflow-wrap: anywhere;
}
.personel-karti__ozet-label {
  display: block;
  font-size: 11px;
  color: var(--muted);
  /* Labels: "Personel No" not "PERSONEL NO" (AGENTS.md UI label casing) */
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 2px;
  font-weight: 600;
}
.personel-karti__ozet-value {
  font-size: 13px;
  font-weight: 650;
  line-height: 1.3;
  color: var(--ink);
}
.personel-karti__ozet-loading { color: var(--muted); font-size: var(--pk-text-sm); }
.personel-karti__ozet-error {
  border: 1px dashed #cfd6e0;
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--muted);
  background: #f8fafc;
  font-size: var(--pk-text-sm);
}
.personel-karti__ozet-error p { margin: 0; }
.personel-karti__tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  margin: var(--pk-gap-sm) 0 0;
  padding: 0 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 10px 10px 0 0;
  overflow-x: auto;
  overflow-y: hidden; /* avoid vertical scrollbar when overflow-x is auto */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  position: sticky;
  top: 0;
  z-index: 5;
}
.personel-karti__tab {
  border: 0; background: transparent; padding: 8px 12px; cursor: pointer;
  color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px;
  font-size: var(--pk-text-base);
  line-height: 1.3;
  white-space: nowrap;
  flex: 0 0 auto;
}
.personel-karti__tab.is-active { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.personel-karti__panel {
  margin-top: 0; padding: 14px 16px; background: var(--surface);
  border: 1px solid var(--line); border-top: 0; border-radius: 0 0 10px 10px; min-height: 140px;
  font-size: var(--pk-text-base);
  overflow-wrap: anywhere;
}
/* Genel bakış: yatay kart ızgarası (desktop yoğun) */
.personel-karti__overview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pk-gap-sm);
  align-items: start;
}
.personel-karti__overview--flat {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.personel-karti__overview-col {
  display: flex;
  flex-direction: column;
  gap: var(--pk-gap-sm);
  min-width: 0;
}
.personel-karti__overview-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--surface);
  min-height: 0;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}
.personel-karti__overview-card h3 {
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
.personel-karti__overview-line {
  margin: 0;
  font-size: var(--pk-text-base);
  color: var(--ink);
  line-height: 1.4;
}
/* Kart içinde alanlar yatay (etiket | değer); dar kartta tek sütun */
.personel-karti__overview-card .personel-karti__dl {
  grid-template-columns: 1fr;
}
.personel-karti__overview-card .personel-karti__dl > div {
  grid-template-columns: minmax(6.5rem, 36%) minmax(0, 1fr);
  gap: 4px 10px;
  padding: 5px 0;
}
.personel-karti__overview-card .personel-karti__list {
  margin: 0;
  padding-left: 1rem;
}
.personel-karti__overview-card .personel-karti__list li {
  padding: 2px 0;
}
.personel-karti__panel h3 {
  margin: var(--pk-gap-md) 0 var(--pk-gap-xs);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
.personel-karti__panel h3:first-child { margin-top: 0; }
/* Yatay alan satırları: etiket | değer — 2 sütun (genişte 3) */
.personel-karti__dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 14px;
  margin: 0;
}
.personel-karti__dl > div {
  display: grid;
  grid-template-columns: minmax(5.5rem, 38%) minmax(0, 1fr);
  gap: 4px 8px;
  align-items: baseline;
  min-width: 0;
  padding: 4px 0;
  border-bottom: 1px solid #f1f3f5;
}
.personel-karti__dl > div:last-child { border-bottom: 0; }
.personel-karti__dl dt {
  font-size: var(--pk-text-sm);
  color: var(--muted);
  /* Labels: "Personel No" not "PERSONEL NO" (AGENTS.md UI label casing) */
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
  font-weight: 600;
  line-height: 1.3;
}
.personel-karti__dl dd {
  margin: 0;
  font-size: var(--pk-text-base);
  line-height: 1.35;
  color: var(--ink);
  min-width: 0;
  overflow-wrap: anywhere;
}
.personel-karti__dl--edit {
  grid-template-columns: 1fr;
}
.personel-karti__dl--edit > div {
  grid-template-columns: 1fr;
  border-bottom: 0;
  padding: 0;
}
.personel-karti__dl--edit dd { display: grid; gap: 4px; }
.personel-karti__edit-form,
.personel-karti__address-form,
.personel-karti__contact-form {
  display: grid;
  gap: var(--pk-gap-xs);
  margin: 0 0 var(--pk-gap-sm);
}
.personel-karti__address-form label,
.personel-karti__contact-form label,
.personel-karti__edit-form label {
  display: grid;
  gap: 4px;
  font-size: var(--pk-text-sm);
  color: var(--muted);
  margin-bottom: 0;
}
.personel-karti__edit-form input,
.personel-karti__edit-form select,
.personel-karti__address-form input,
.personel-karti__address-form select,
.personel-karti__contact-form input,
.personel-karti__contact-form select {
  width: 100%;
  max-width: 28rem;
  height: 36px;
  box-sizing: border-box;
  padding: 8px 10px;
  font-size: var(--pk-text-base);
  line-height: 1.3;
  border: 1px solid var(--line, #c9c9c9);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
}
.personel-karti__edit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pk-gap-xs);
  margin-top: 4px;
}
.personel-karti__field-error,
.personel-karti__form-banner {
  color: #9b1c1c;
  font-size: var(--pk-text-sm);
}
.personel-karti__form-banner {
  padding: 6px 8px;
  border: 1px solid #f1c0c0;
  background: #fff5f5;
  border-radius: 6px;
}
.personel-karti__edit-hint { font-size: var(--pk-text-sm); }
.personel-karti.is-editing .personel-karti__panel {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.personel-karti__dl pre, .personel-karti__list pre {
  margin: 0; white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: var(--pk-text-base);
}
.personel-karti__timeline { margin: 0; padding-left: 1.1rem; display: grid; gap: var(--pk-gap-xs); font-size: var(--pk-text-base); }
.personel-karti__loading, .personel-karti .muted { color: var(--muted); font-size: var(--pk-text-sm); }
.personel-karti .error { color: #b42318; }
.personel-karti__skeleton { display: grid; gap: 8px; padding: 2px 0 6px; }
.personel-karti__skeleton-line {
  height: 10px; border-radius: 6px; background: linear-gradient(90deg, #eef1f5 25%, #f7f8fa 50%, #eef1f5 75%);
  background-size: 200% 100%; animation: personel-karti-shimmer 1.1s ease-in-out infinite;
}
.personel-karti__skeleton-line--short { width: 42%; }
@keyframes personel-karti-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.personel-karti__empty-state {
  padding: 12px; border: 1px dashed #cfd6e0; border-radius: 8px;
  background: #f8fafc; color: var(--muted); font-size: var(--pk-text-sm);
}
.personel-karti__empty-state p { margin: 0; line-height: 1.4; }
.personel-karti__access-denied {
  padding: 12px; border: 1px solid #fda29b; border-radius: 8px;
  background: #fef3f2; color: #b42318; font-size: var(--pk-text-sm);
}
.personel-karti__access-denied p { margin: 0; font-weight: 600; }
.personel-karti__toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pk-gap-xs);
}
.personel-karti__actions { display: flex; flex-wrap: wrap; gap: var(--pk-gap-xs); }
.personel-karti__empty-tabs {
  margin: 6px 0 var(--pk-gap-sm); padding: 10px 12px; border-radius: 8px;
  border: 1px dashed #cfd6e0; color: var(--muted); background: #f8fafc; font-size: var(--pk-text-sm);
}
.personel-karti__tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.personel-karti__tab { white-space: nowrap; flex: 0 0 auto; }
.personel-karti__ozet-grid--tab { margin: 0 0 var(--pk-gap-sm); }
.personel-karti__izin-toolbar {
  display: flex;
  align-items: center;
  gap: var(--pk-gap-xs);
  margin: 0 0 var(--pk-gap-sm);
}
.personel-karti__izin-year-label {
  font-size: var(--pk-text-sm);
  font-weight: 600;
  color: var(--muted, #5b6570);
}
.personel-karti__izin-year {
  min-width: 96px;
  height: 36px;
  padding: 0 10px;
  font-size: var(--pk-text-base);
  border: 1px solid #dfe3e8;
  background: #fff;
  border-radius: 4px;
}
.personel-karti__izin-actions { margin: 0 0 var(--pk-gap-sm); }
.personel-karti__izin-entitlement-form { margin: 0 0 var(--pk-gap-sm); }
.personel-karti__evrak-form { margin: 0 0 var(--pk-gap-sm); }
.personel-karti__table-wrap { overflow-x: auto; margin: 0 0 var(--pk-gap-sm); }
.personel-karti__row-actions { white-space: nowrap; }
.personel-karti__badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: var(--pk-text-sm);
  font-weight: 600;
  background: #eef1f4;
  color: #334;
  line-height: 1.3;
}
.personel-karti__badge--ok { background: #e6f4ea; color: #137333; }
.personel-karti__badge--warn { background: #fef7e0; color: #b06000; }
.personel-karti__badge--danger { background: #fce8e6; color: #c5221f; }
.personel-karti__badge--muted { background: #eef1f4; color: #5f6368; }
.personel-karti__checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--pk-gap-xs);
  font-size: var(--pk-text-sm);
}
.btn-sm { padding: 4px 10px; font-size: var(--pk-text-sm); }
.personel-karti__table {
  width: 100%; border-collapse: collapse; font-size: var(--pk-text-base);
}
.personel-karti__table th,
.personel-karti__table td {
  border-bottom: 1px solid var(--line); text-align: left; padding: 6px 8px; vertical-align: top;
}
.personel-karti__table th {
  color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .03em;
}
.personel-karti__list {
  margin: 0 0 var(--pk-gap-sm);
  padding-left: 1.1rem;
  font-size: var(--pk-text-base);
}
.personel-karti__list li { padding: 4px 0; line-height: 1.35; }
.personel-karti__print-footer { display: none; }
/* Address SSR panel mounted inside personel kartı */
.personel-karti #pk-address-panel,
.personel-karti [data-pk-address-form] {
  font-size: var(--pk-text-base);
}
.personel-karti #pk-address-panel h3,
.personel-karti [data-pk-address-form] h3 {
  margin: var(--pk-gap-md) 0 var(--pk-gap-xs);
  font-size: 14px;
  font-weight: 600;
}
.personel-karti #pk-address-panel label,
.personel-karti [data-pk-address-form] label {
  font-size: var(--pk-text-sm);
  margin-bottom: 4px;
}
.personel-karti #pk-address-panel input,
.personel-karti #pk-address-panel select,
.personel-karti [data-pk-address-form] input,
.personel-karti [data-pk-address-form] select {
  height: 36px;
  padding: 8px 10px;
  font-size: var(--pk-text-base);
  box-sizing: border-box;
}
.pk-address-panel__doc-block {
  margin: var(--pk-gap-md) 0 var(--pk-gap-sm);
  padding-top: var(--pk-gap-sm);
  border-top: 1px solid var(--border, #e5e7eb);
}
.pk-address-panel__doc-block h4 {
  margin: 0 0 var(--pk-gap-xs);
  font-size: 13px;
  font-weight: 600;
}
.pk-address-panel__file-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.pk-address-panel__pending {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: var(--pk-gap-md);
  padding: 8px 10px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  font-size: var(--pk-text-sm);
}
.pk-address-panel__pending-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f3f4f6;
  font-weight: 600;
  font-size: 12px;
}
.pk-address-panel__pending-remove {
  display: inline;
  margin: 0;
}
/* Geniş masaüstü: panel alanları 3 sütun; overview kartları 2’li alan ızgarası */
@media (min-width: 1280px) {
  .personel-karti__dl {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .personel-karti__overview-card .personel-karti__dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .personel-karti__overview--flat {
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  }
}
/* Tablet: foto biraz küçülür, header yatay kalır */
@media (max-width: 900px) and (min-width: 721px) {
  .personel-karti { --pk-photo: 160px; }
  .personel-karti__name { font-size: 1.2rem; }
  .personel-karti__dl { grid-template-columns: 1fr; }
}
/* Mobil: foto üstte ortalı, kimlik altta */
@media (max-width: 720px) {
  .personel-karti { --pk-photo: 140px; }
  .personel-karti__header {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding: 12px;
  }
  .personel-karti__identity {
    width: 100%;
    align-items: center;
  }
  .personel-karti__identity-main { width: 100%; }
  .personel-karti__meta { justify-content: center; }
  .personel-karti__header-actions { justify-content: center; }
  .personel-karti__ozet-grid { grid-template-columns: 1fr 1fr; }
  .personel-karti__overview { grid-template-columns: 1fr; }
  .personel-karti__overview-card { min-height: 0; }
  .personel-karti__dl { grid-template-columns: 1fr; }
  .personel-karti__dl > div {
    grid-template-columns: minmax(5rem, 42%) minmax(0, 1fr);
  }
  .personel-karti__tabs { position: static; }
}
@media (max-width: 480px) {
  .personel-karti { --pk-photo: 96px; }
  .personel-karti__ozet-grid { grid-template-columns: 1fr; }
  .personel-karti__dl > div { grid-template-columns: 1fr; }
}
@media print {
  @page { size: A4 landscape; margin: 12mm; }
  body { background: #fff !important; }
  .app-header, .app-nav, .no-print, .personel-karti__tabs, .personel-karti__toolbar {
    display: none !important;
  }
  .personel-karti { --pk-photo: 96px; }
  .personel-karti__header {
    position: static;
    border: 0;
    padding: 0 0 8px;
    grid-template-columns: 96px minmax(0, 1fr);
  }
  .personel-karti__panel { border: 0; padding: 0; min-height: 0; }
  .personel-karti__print-footer {
    display: flex !important;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    gap: 16px;
    font-size: 11px;
    color: #333;
    border-top: 1px solid #ccc;
    padding-top: 6px;
    background: #fff;
  }
}
.personnel-col-name a.personnel-card-link { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.personnel-col-name a.personnel-card-link:hover { color: var(--accent); }

.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; }

/* İK > Adres SSR */
.ik-adres-page { max-width: 100%; }
.ik-adres-page__header h1 { margin: 0 0 4px; font-size: 1.35rem; }
.ik-adres-page__stats { display: flex; flex-wrap: wrap; gap: 16px; margin: 12px 0 20px; font-size: 0.9rem; }
.ik-adres-page__filters,
.ik-adres-page__form-wrap {
  margin-bottom: 20px;
  padding: 14px 16px;
  border: 1px solid var(--border, #d8dee8);
  border-radius: 8px;
  background: var(--surface, #fff);
}
.ik-adres-page__filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px 12px;
  margin: 10px 0;
}
.ik-adres-page__filter-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
}
.ik-adres-page__filter-grid select,
.ik-adres-page__filter-grid input[type="text"],
.ik-adres-page__filter-grid input[type="search"] {
  padding: 6px 8px;
  border: 1px solid var(--border, #cfd7e3);
  border-radius: 6px;
}
.ik-adres-page__checkbox {
  flex-direction: row !important;
  align-items: center;
  gap: 8px !important;
  margin-top: 18px;
}
.ik-adres-page__filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.ik-adres-page__flash { color: #08783e; background: #edf9f2; padding: 8px 12px; border-radius: 6px; }
.ik-adres-page__error { color: #b42318; background: #fef3f2; padding: 8px 12px; border-radius: 6px; }

.hr-street-suggest {
  position: relative;
  margin-top: 4px;
  max-width: 100%;
}
.hr-street-suggest__list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  border: 1px solid var(--border, #d0d5dd);
  border-radius: 6px;
  background: #fff;
  max-height: 220px;
  overflow: auto;
  box-shadow: 0 4px 12px rgba(16, 24, 40, 0.08);
}
.hr-street-suggest__item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 8px 12px;
  cursor: pointer;
  font: inherit;
}
.hr-street-suggest__item:hover,
.hr-street-suggest__item:focus,
.hr-street-suggest__item.is-active,
.hr-street-suggest__item[aria-selected="true"] {
  background: #f2f4f7;
}
.hr-street-suggest__empty {
  margin: 4px 0 0;
  font-size: 0.85rem;
}

/* HR Landing — corporate home */
.hr-landing { max-width: 100%; overflow-x: hidden; }
.hr-landing__hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 0.65rem;
}
.hr-landing__hero-text { flex: 1 1 14rem; min-width: 0; }
.hr-landing__hero h1 {
  margin: 0 0 0.2rem;
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  line-height: 1.25;
}
.hr-landing__intro {
  margin: 0;
  color: var(--muted, #5c5c5c);
  font-size: 0.92rem;
  line-height: 1.35;
  max-width: 36rem;
}
.hr-landing__quick {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}
.hr-landing__kpi-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0.5rem 0 0.85rem;
}
@media (min-width: 720px) {
  .hr-landing__kpi-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 960px) {
  .hr-landing__kpi-strip {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
.hr-landing__kpi {
  min-height: 3.35rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line, #ddd6cb);
  border-radius: 8px;
  background: var(--surface, #fff);
  box-sizing: border-box;
  overflow: hidden;
}
.hr-landing__label {
  display: block;
  font-size: 0.74rem;
  color: var(--muted, #5c5c5c);
  margin-bottom: 0.15rem;
}
.hr-landing__value {
  font-size: clamp(0.98rem, 2vw, 1.2rem);
  font-weight: 650;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.hr-landing__mid {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
@media (min-width: 860px) {
  .hr-landing__mid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}
.hr-landing__panel {
  border: 1px solid var(--line, #ddd6cb);
  border-radius: 8px;
  padding: 0.7rem 0.8rem 0.85rem;
  background: var(--surface, #fff);
  min-width: 0;
}
.hr-landing__section-title {
  margin: 0 0 0.45rem;
  font-size: 0.98rem;
  font-weight: 650;
}
.hr-landing__subhead {
  margin: 0.55rem 0 0.3rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted, #5c5c5c);
}
.hr-landing__empty { margin: 0.25rem 0 0; font-size: 0.9rem; }
.hr-landing__action-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hr-landing__action-list li + li { margin-top: 0.35rem; }
.hr-landing__action-link {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: center;
  text-decoration: none;
  color: inherit;
  padding: 0.4rem 0.45rem;
  border-radius: 6px;
  min-width: 0;
}
.hr-landing__action-link:hover { background: var(--surface-2, #f6f4ef); }
.hr-landing__action-link:focus-visible {
  outline: 2px solid var(--ink, #2a2a2a);
  outline-offset: 2px;
}
.hr-landing__action-link.is-passive {
  cursor: default;
  opacity: 0.85;
}
.hr-landing__action-link.is-passive:hover { background: transparent; }
.hr-landing__action-indicator {
  flex: 0 0 auto;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--muted, #8a8a8a);
}
.hr-landing__action-link--warn .hr-landing__action-indicator {
  background: #b06000;
}
.hr-landing__action-link--ok .hr-landing__action-indicator {
  background: #137333;
}
.hr-landing__action-link--info .hr-landing__action-indicator {
  background: var(--ink, #2a2a2a);
}
.hr-landing__action-label {
  font-size: 0.9rem;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hr-landing__action-count {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
  font-size: 0.85rem;
  white-space: nowrap;
}
.hr-landing-missing__header { margin-bottom: 1rem; }
.hr-landing-missing__back { margin: 0 0 0.35rem; font-size: 0.9rem; }
.hr-landing-missing__meta { margin: 0.25rem 0 0; }
.hr-landing-missing__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hr-landing-missing__list li + li,
.hr-landing-missing__row + .hr-landing-missing__row { margin-top: 0.35rem; }
.hr-landing-missing__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  min-width: 0;
  padding: 0.35rem 0.25rem;
  border-bottom: 1px solid var(--line, #e7e1d6);
}
.hr-landing-missing__link {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-decoration: none;
  color: inherit;
  min-width: 0;
  flex: 1 1 12rem;
  padding: 0.2rem 0.25rem;
  border-radius: 6px;
}
.hr-landing-missing__link:hover { background: var(--surface-2, #f6f4ef); }
.hr-landing-missing__link:focus-visible {
  outline: 2px solid var(--ink, #2a2a2a);
  outline-offset: 2px;
}
.hr-landing-missing__name {
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hr-landing-missing__cat {
  font-size: 0.82rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hr-landing-missing__action {
  flex: 0 0 auto;
  margin-left: auto;
  max-width: 100%;
}
.hr-landing-missing__request-btn {
  white-space: nowrap;
  max-width: 100%;
}
.hr-landing-missing__request-btn:focus-visible {
  outline: 2px solid var(--ink, #2a2a2a);
  outline-offset: 2px;
}
.hr-landing-missing__unavailable {
  display: inline-block;
  font-size: 0.82rem;
  color: var(--muted, #5c5c5c);
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hr-landing-missing__more { margin-top: 0.75rem; font-size: 0.85rem; }
.hr-landing-missing-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(20, 20, 20, 0.45);
}
.hr-landing-missing-modal[hidden] { display: none !important; }
.hr-landing-missing-modal__dialog {
  width: min(32rem, 100%);
  max-height: min(90vh, 40rem);
  overflow: auto;
  background: var(--surface, #fff);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}
.hr-landing-missing-modal__dialog h2 {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
}
.hr-landing-missing-modal__recipient { margin: 0 0 0.75rem; font-size: 0.9rem; }
.hr-landing-missing-modal__label {
  display: block;
  font-size: 0.85rem;
  margin-bottom: 0.35rem;
}
.hr-landing-missing-modal__message {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  min-height: 10rem;
  font: inherit;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--line, #e7e1d6);
  border-radius: 6px;
}
.hr-landing-missing-modal__message:focus-visible {
  outline: 2px solid var(--ink, #2a2a2a);
  outline-offset: 1px;
}
.hr-landing-missing-modal__feedback {
  margin: 0.55rem 0 0;
  font-size: 0.85rem;
}
.hr-landing-missing-modal__feedback.is-error { color: #c5221f; }
.hr-landing-missing-modal__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.9rem;
}
@media print {
  .hr-landing-missing__action,
  .hr-landing-missing-modal { display: none !important; }
}
@media (max-width: 360px) {
  .hr-landing-missing__action { width: 100%; }
  .hr-landing-missing__request-btn,
  .hr-landing-missing__unavailable { max-width: 100%; }
}
.hr-landing__bars {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hr-landing__bars li + li { margin-top: 0.4rem; }
.hr-landing__bar-meta {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.82rem;
  margin-bottom: 0.15rem;
}
.hr-landing__bar-track {
  height: 0.45rem;
  border-radius: 999px;
  background: var(--line, #e7e1d6);
  overflow: hidden;
}
.hr-landing__bar-fill {
  display: block;
  height: 100%;
  background: var(--ink, #2a2a2a);
  border-radius: inherit;
  max-width: 100%;
}
.hr-landing__more { margin: 0.55rem 0 0; font-size: 0.85rem; }
.hr-landing__modules { margin-top: 0.35rem; }
.hr-landing__module-grid {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .hr-landing__module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.hr-landing__module-card {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line, #ddd6cb);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  background: var(--surface, #fff);
}
.hr-landing__module-card:hover { border-color: var(--ink, #2a2a2a); }
.hr-landing__module-title { font-weight: 650; font-size: 0.95rem; }
.hr-landing__module-desc {
  font-size: 0.82rem;
  color: var(--muted, #5c5c5c);
  line-height: 1.35;
}
.hr-tab-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--line, #ddd6cb);
}
.hr-tab-nav a { color: var(--ink, #1a1a1a); text-decoration: none; font-weight: 600; }
.hr-tab-nav a:hover { text-decoration: underline; }

/* Legacy class aliases kept for older CSS references */
.hr-landing__header { margin-bottom: 8px; }
.hr-landing__widget-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.hr-landing__widget-card {
  flex: 1 1 8rem;
  min-width: min(100%, 8rem);
  padding: 8px 10px;
  border: 1px solid var(--line, #ddd6cb);
  border-radius: 8px;
  background: var(--surface, #fff);
  box-sizing: border-box;
}
.hr-landing__ops { margin-top: 0.75rem; }
.hr-landing__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.4rem; }

/* Araçlar ve Borçlar portfolio table — compact actions */
.vf-portfolio-table {
  width: 100%;
  font-size: 0.9rem;
  border-collapse: collapse;
  table-layout: auto;
}
.vf-portfolio-table th,
.vf-portfolio-table td {
  vertical-align: middle;
  padding: 0.45rem 0.55rem;
}
.vf-portfolio-table th:last-child,
.vf-portfolio-table td.vf-portfolio-table__actions {
  text-align: right;
  white-space: nowrap;
  width: 1%;
}
.vf-portfolio-table__vehicle {
  min-width: 8rem;
  max-width: 16rem;
}
.vf-portfolio-table__vehicle-link {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  display: inline;
  word-break: break-word;
}
.vf-portfolio-table__vehicle-link:hover {
  color: var(--accent);
  text-decoration: underline;
}
.vf-portfolio-table__vehicle-link:focus-visible {
  outline: 2px solid rgba(199, 25, 45, 0.35);
  outline-offset: 2px;
  border-radius: 2px;
}
.vf-portfolio-table__meta {
  color: var(--muted);
  font-size: 0.85rem;
  white-space: nowrap;
}
.vf-portfolio-table__money {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}
.vf-portfolio-table th.vf-portfolio-table__money {
  text-align: right;
}
.vf-portfolio-table__status {
  white-space: nowrap;
}
.vf-btn-add-finance {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 28px;
  min-height: 28px;
  max-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--accent);
  border-radius: 5px;
  background: #fff;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
}
.vf-btn-add-finance:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.vf-btn-add-finance:active {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: #fff;
}
.vf-btn-add-finance:focus-visible {
  outline: 2px solid rgba(199, 25, 45, 0.35);
  outline-offset: 2px;
}
.vf-portfolio-table__action-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
.vf-portfolio-table__action-link:hover {
  text-decoration: underline;
}
.vf-portfolio-table__action-link:focus-visible {
  outline: 2px solid rgba(199, 25, 45, 0.35);
  outline-offset: 2px;
  border-radius: 2px;
}
@media (max-width: 720px) {
  .vf-portfolio-table__vehicle {
    max-width: 11rem;
  }
  .vf-btn-add-finance {
    height: 26px;
    min-height: 26px;
    max-height: 26px;
    padding: 0 8px;
    font-size: 11px;
  }
}

/* Accounting fixed costs / credit cards tables */
.acc-fixed-table {
  width: 100%;
  font-size: 0.9rem;
  border-collapse: collapse;
}
.acc-fixed-table th,
.acc-fixed-table td {
  vertical-align: middle;
  padding: 0.45rem 0.55rem;
}
.acc-fixed-table__name {
  min-width: 8rem;
  max-width: 16rem;
  word-break: break-word;
}
.acc-fixed-table__money {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}
.acc-fixed-table th.acc-fixed-table__money {
  text-align: right;
}
.acc-fixed-table__actions {
  white-space: nowrap;
  text-align: right;
  width: 1%;
}

/* sidebar header altına hizala: */
.sidebar {
  position: sticky;
  top: 110px;
  max-height: calc(100vh - 110px);
}


/* fixed kullanılıyorsa zorunlu: (sticky yapıldığı için gerek yok ama biz sticky yaptık, padding gerekli değil çünkü sticky document flow'undadır ama emin olmak için eklemedik, user sticky VEYA fixed demiş). */