/* Şantiye Personel Takip / 206 - ortak ve hafif tasarım sistemi.
 * Harici font, CDN, animasyon kütüphanesi ya da izleme betiği kullanmaz.
 * Yalnızca görünümü değiştirir; mevcut rol/izin/API işleyişini etkilemez.
 */
:root {
  color-scheme: light;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ui-ink: #182c42;
  --ui-deep: #0d2541;
  --ui-muted: #53687a;
  --ui-blue: #145eac;
  --ui-blue-dark: #104b87;
  --ui-blue-pale: #eaf3fc;
  --ui-canvas: #f3f6fa;
  --ui-white: #fff;
  --ui-line: #dce5ef;
  --ui-soft: #f8fbff;
  --ui-success: #137044;
  --ui-danger: #b02c3b;
  --ui-warning: #876017;
  --ui-radius: 14px;
  --ui-shadow: 0 6px 24px rgba(17, 46, 83, .045);
  background: var(--ui-canvas);
  color: var(--ui-ink);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, body[data-ui] {
  width: min(100% - 32px, 1280px);
  max-width: 1280px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 28px 0 76px;
  background: transparent;
  color: var(--ui-ink);
  font-family: inherit;
  line-height: 1.55;
}
[hidden], [hidden=""] { display: none !important; }
::selection { background: #bedcff; color: #102b4b; }
h1, h2, h3, h4, p { overflow-wrap: anywhere; }
h1, h2, h3, h4 { color: var(--ui-deep); line-height: 1.24; letter-spacing: -.025em; }
h1 { font-size: clamp(1.35rem, 2vw + .7rem, 2rem); margin: 0; font-weight: 750; }
h2 { font-size: clamp(1.02rem, 1vw + .75rem, 1.22rem); font-weight: 720; margin: 0 0 12px; }
h3 { font-size: 1rem; margin: 22px 0 10px; }
h4 { font-size: .93rem; margin: 18px 0 7px; }
p { margin: 0 0 15px; }
small, .sub, .ui-caption { color: var(--ui-muted); line-height: 1.58; font-size: .89rem; }
.sub { margin-top: 8px; }
a { color: var(--ui-blue); text-underline-offset: 3px; }
a:hover { color: var(--ui-blue-dark); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid #80b9f3; outline-offset: 2px; }
button, input, textarea, select { font: inherit; }
button, [type="button"], [type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 43px;
  max-width: 100%;
  width: auto;
  padding: 10px 16px;
  margin: 4px 5px 4px 0;
  border: 1px solid transparent;
  border-radius: 9px;
  background: var(--ui-blue);
  color: white;
  font-weight: 650;
  font-size: .91rem;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
  touch-action: manipulation;
}
button:hover:not(:disabled) { background: var(--ui-blue-dark); }
button:disabled { cursor: not-allowed; opacity: .54; }
button[aria-pressed="true"], button[aria-current="true"] { background: var(--ui-deep); }
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  display: block;
  width: 100%;
  min-height: 43px;
  max-width: 100%;
  margin: 6px 0 11px;
  padding: 10px 12px;
  border: 1px solid #bdcddd;
  border-radius: 9px;
  background: var(--ui-white);
  color: var(--ui-ink);
  box-shadow: none;
  font-size: .94rem;
}
input::placeholder, textarea::placeholder { color: #7c8fa2; opacity: 1; }
input:disabled, select:disabled, textarea:disabled { background: #eef2f5; color: #657789; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--ui-blue); width: 18px; height: 18px; margin-right: 6px; vertical-align: middle; }
input[type="file"] { padding: 9px; }
textarea { min-height: 96px; resize: vertical; }
label { display: block; margin: 9px 0; color: #31475a; font-size: .92rem; font-weight: 630; }
fieldset { border: 1px solid var(--ui-line); border-radius: 12px; padding: 12px 15px; min-width: 0; }
legend { color: var(--ui-deep); font-weight: 680; padding: 0 5px; }
pre, code { font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; }
pre { max-width: 100%; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; background: #f2f6fc; border: 1px solid var(--ui-line); border-radius: 10px; padding: 14px; }
hr { border: 0; border-top: 1px solid var(--ui-line); }

/* Uygulama kimliği ve ortak üst çubuk */
.app-header, body[data-ui="pilot"] > header, body[data-ui="sef"] > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
  padding: 16px 19px;
  margin-bottom: 18px;
  background: var(--ui-white);
  border: 1px solid var(--ui-line);
  border-radius: 17px;
  box-shadow: var(--ui-shadow);
}
.brand-lockup { display: flex; align-items: center; gap: 13px; min-width: 0; }
.brand-logo { width: 42px; height: 42px; max-width: 100%; object-fit: contain; image-rendering: auto; flex: 0 0 auto; border-radius: 9px; background: var(--ui-white); }
.eyebrow { display: block; font-size: .69rem; line-height: 1.3; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ui-blue); margin-bottom: 4px; }
.app-header h1 { font-size: clamp(1.13rem, 1.6vw + .75rem, 1.62rem); }
.app-header button { margin: 0; background: var(--ui-soft); color: var(--ui-blue-dark); border-color: var(--ui-line); }
.app-header button:hover:not(:disabled) { background: var(--ui-blue-pale); }
.ui-notice { background: #eef5fd; border: 1px solid #cee0f1; border-left: 4px solid #3382c7; color: #284967; padding: 12px 16px; border-radius: 10px; margin: 0 0 19px; font-size: .87rem; }
.ui-notice strong { color: #1b4e80; }
#mesaj:not(:empty), #message:not(:empty), #konumSonuc:not(:empty), #importStatus:not(:empty),
#sefReportOutput:not(:empty), #sefRaporSonuc:not(:empty) {
  padding: 12px 14px;
  margin: 12px 0;
  min-height: 0;
  border-radius: 10px;
  background: #edf5fd;
  color: #1a4c7d;
  border: 1px solid #d4e6f7;
  font-size: .9rem;
}
[role="alert"]:not(:empty), .bad { color: var(--ui-danger) !important; }
[role="alert"]:not(:empty) { border-color: #f1cbd2 !important; background: #fff2f3 !important; }
.good { color: var(--ui-success) !important; }

/* Paneller, veri tabloları ve dinamik kartlar */
body[data-ui="pilot"] > main, .layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 17px;
  margin-top: 15px;
}
.card, .layout > section, .kutu, body[data-ui="calisan"] section,
body[data-ui="legacy"] > form, body[data-ui="legacy"] > table {
  min-width: 0;
  padding: 23px;
  margin: 0;
  background: var(--ui-white);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow);
}
.card h2, .layout > section h2, .kutu h3, body[data-ui="calisan"] section h2 {
  padding-bottom: 11px;
  border-bottom: 1px solid #edf1f6;
  margin-top: 0;
}
.card h2::before, .layout > section h2::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: .95em;
  background: #3b87d5;
  border-radius: 3px;
  margin-right: 10px;
  vertical-align: -.08em;
}
.wide, .full { grid-column: 1 / -1; }
.card form, .layout section form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 4px 14px; align-items: end; }
.card form > button, .layout form > button { align-self: end; justify-self: start; }
.card form fieldset, .card form > pre, .layout form > textarea { grid-column: 1 / -1; }
.card form label:has(textarea), .layout form label:has(textarea) { grid-column: 1 / -1; }
.dashboard, .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 12px; margin: 13px 0; }
.kpi { display: grid; gap: 4px; padding: 16px; border-radius: 12px; border: 1px solid #d5e4f2; background: #f1f7fe; }
.kpi strong { font-weight: 760; font-size: clamp(1.45rem, 2.5vw, 2rem); color: #174e85; line-height: 1.13; }
.kpi small { color: var(--ui-muted); }
.excel-grid, .table-scroll { overflow: auto; max-width: 100%; max-height: 430px; border-radius: 9px; border: 1px solid var(--ui-line); }
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: .875rem; }
th, td { padding: 11px 12px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--ui-line); border-right: 0; }
th { background: #ebf2fa; color: #254867; font-weight: 740; white-space: nowrap; }
.excel-grid th { position: sticky; top: 0; z-index: 1; background: #e9f2fb; }
.excel-grid td, .excel-grid th { white-space: nowrap; border-left: 0; border-top: 0; }
tr:nth-child(even) td { background: #fafcff; }
tr:hover td { background: #f2f7fd; }
ul { padding-left: 20px; }
li { margin: 5px 0; }
img, svg { max-width: 100%; }

/* Personel: mobilde önce QR, tek başparmakla kullanılabilen kontroller */
body[data-ui="calisan"] { max-width: 800px; }
body[data-ui="calisan"] #calisanPanel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
body[data-ui="calisan"] #calisanPanel > section { margin: 0; }
body[data-ui="calisan"] #calisanPanel > section:nth-child(2),
body[data-ui="calisan"] #calisanPanel > section:nth-child(3) { grid-column: 1 / -1; }
body[data-ui="calisan"] #calisanPanel button, body[data-ui="calisan"] #giris button,
body[data-ui="calisan"] #sifreDegistirBolumu button { min-height: 48px; }
body[data-ui="calisan"] #qrGiris { background: var(--ui-success); }
body[data-ui="calisan"] #qrGiris:hover:not(:disabled) { background: #0b5733; }
body[data-ui="calisan"] #qrCikis { background: #fff5f5; border-color: #e5b4bd; color: #912c39; }
body[data-ui="calisan"] #qrCikis:hover:not(:disabled) { background: #ffe5e9; }
body[data-ui="calisan"] #mesai { background: #e9f3fd; color: #16558e; border-color: #cbdff0; }
body[data-ui="calisan"] #mesai:hover:not(:disabled) { background: #dcecff; }
body[data-ui="calisan"] #cikisBtn, body[data-ui="calisan"] #geciciCikis { background: #f1f5f9; color: #344b61; border-color: var(--ui-line); }
body[data-ui="calisan"] section small { display: block; margin: 10px 0 12px; }
body[data-ui="calisan"] #bildirimler > * { border-bottom: 1px solid var(--ui-line); padding: 8px 0; }

/* Giriş sayfası: sayfa ortasında, tek odaklı ve güvenilir görünüm */
body[data-ui="login"], body[data-ui="qr"] { max-width: 520px; display: grid; place-items: center; min-height: 100svh; padding: 35px 0; }
body[data-ui="login"] main, body[data-ui="qr"] main {
  width: 100%;
  padding: clamp(24px, 5vw, 42px);
  border: 1px solid var(--ui-line);
  border-radius: 20px;
  background: var(--ui-white);
  box-shadow: 0 16px 46px rgba(15, 49, 88, .07);
}
body[data-ui="login"] .login-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
body[data-ui="login"] .login-brand .brand-logo { width: 52px; height: 52px; }
body[data-ui="login"] h2 { margin: 0 0 8px; }
body[data-ui="login"] form { display: block; margin-top: 26px; }
body[data-ui="login"] form button { width: 100%; margin: 11px 0; min-height: 48px; }
body[data-ui="login"] #mesaj:empty { display: none; }
body[data-ui="login"] main > p { color: var(--ui-muted); font-size: .88rem; }

/* Eski test ekranları karışıklık yaratmamalı; işlevler ve ID'ler korunur. */
body[data-ui="legacy"] { max-width: 1050px; }
body[data-ui="legacy"] .ui-notice { margin-top: 18px; }
body[data-ui="legacy"] .kutu { margin-bottom: 17px; }
body[data-ui="legacy"] > form { max-width: 620px; margin: 18px 0; }
body[data-ui="legacy"] button { margin: 6px 6px 6px 0; }
body[data-ui="legacy"] > table { display: block; overflow-x: auto; margin: 15px 0; }
body[data-ui="legacy"] > a { display: inline-block; margin-top: 14px; }

/* Mobil cihazlar ve erişilebilirlik */
@media (max-width: 820px) {
  body[data-ui="pilot"] > main, .layout { grid-template-columns: 1fr; }
  .wide, .full { grid-column: auto; }
  .card form, .layout section form { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
}
@media (max-width: 560px) {
  body, body[data-ui] { width: calc(100% - 22px); padding: 11px 0 50px; }
  .app-header, body[data-ui="pilot"] > header, body[data-ui="sef"] > header { padding: 14px; border-radius: 14px; }
  .brand-logo { width: 36px; height: 36px; }
  .card, .layout > section, .kutu, body[data-ui="calisan"] section { padding: 17px 15px; }
  body[data-ui="calisan"] #calisanPanel { grid-template-columns: 1fr; }
  body[data-ui="calisan"] #calisanPanel > section { grid-column: 1 / -1; }
  .card form, .layout section form { grid-template-columns: 1fr; }
  .card form > button, .layout form > button { justify-self: stretch; width: 100%; }
  button { min-height: 46px; }
  .dashboard, .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-ui="calisan"] #qrGiris, body[data-ui="calisan"] #qrCikis,
  body[data-ui="calisan"] #mesai { display: flex; width: 100%; margin: 8px 0; }
  body[data-ui="login"] main { padding: 24px 20px; }
  th, td { padding: 9px 10px; }
}
@media (max-width: 340px) {
  .dashboard, .kpis { grid-template-columns: 1fr; }
  .app-header { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media print {
  body, body[data-ui] { width: 100%; max-width: none; padding: 0; background: white; color: black; }
  .app-header, .card, .layout > section { box-shadow: none; break-inside: avoid; }
  header button, .app-header button, form button { display: none !important; }
  .excel-grid { max-height: none; overflow: visible; }
  a { color: black; }
}


/* 207 — Kapanış düzenlemeleri: şantiye kullanımında okunaklılık,
 * dar telefonlarda yatay kaydırılabilir kayıtlar, güçlü dokunma hedefleri,
 * yüksek kontrast ve güvenli yazdırma. Yeni ağ bağımlılığı yoktur. */
:root {
  --ui-hit-min: 44px;
  --ui-hairline: #c6d5e5;
}
body[data-ui] { overflow-wrap: break-word; }
body[data-ui] main, body[data-ui] section { min-width: 0; }
body[data-ui] button, body[data-ui] select, body[data-ui] input:not([type="checkbox"]):not([type="radio"]) {
  min-height: var(--ui-hit-min);
}
/* Bilgi ikincil olabilir, ancak yer tutucu ve metin okunur kalmalıdır. */
input::placeholder, textarea::placeholder { color: #536a7e; }
:disabled { cursor: not-allowed; }
button:focus-visible { outline-color: #145eac; outline-offset: 3px; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: #145eac;
  outline-color: #80b9f3;
}
input:user-invalid:not(:focus), textarea:user-invalid:not(:focus) {
  border-color: #b85863;
}
/* Dinamik üretilen rapor ve personel tablosu sayfayı yatay taşırmasın. */
#calisanlar, #hareketler, #talepler, #firmalar, #santiyeler,
#employees, #movements, #requests, #sites,
#raporSonuc, #dashboardSantiyeler, #sefTalepler,
#sefRaporTablo, #sefReportTable, #importPreviewTable,
#personelImportCard .excel-grid {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}
:is(#calisanlar, #hareketler, #talepler, #firmalar, #santiyeler,
  #employees, #movements, #requests, #raporSonuc, #sefTalepler) table {
  width: max-content;
  min-width: 100%;
}
/* Statü metni yalnız renkle anlatılmasın: sayısal rozet ve açıklama kalır. */
.good, .bad { font-weight: 650; }
:where(.card, .layout > section, body[data-ui="calisan"] section) > :last-child { margin-bottom: 0; }
@media (max-width: 560px) {
  body[data-ui] { font-size: 1rem; }
  .brand-lockup { gap: 10px; }
  .app-header h1 { font-size: clamp(1.05rem, 4.2vw, 1.3rem); }
  body[data-ui="pilot"] .dashboard, body[data-ui="sef"] .kpis { gap: 9px; }
  body[data-ui="pilot"] .kpi, body[data-ui="sef"] .kpi { padding: 12px; }
  body[data-ui="calisan"] #calisanPanel section button {
    width: 100%; margin: 7px 0;
  }
  /* Küçük ekranda tablo yatay kayar, bütün sayfa kaymaz. */
  body[data-ui="pilot"] > main, .layout { width: 100%; min-width: 0; }
}
@media (max-width: 380px) {
  .app-header .brand-lockup { width: 100%; }
  .app-header > button { width: 100%; }
  body[data-ui="login"] main, body[data-ui="qr"] main { padding: 20px 16px; }
}
@media (prefers-contrast: more) {
  :root { --ui-line: #7990aa; --ui-muted: #334c61; --ui-blue: #084b91; }
  .card, .layout > section, .ui-notice { border-width: 2px; }
  button { border-color: currentColor; }
}
@media (forced-colors: active) {
  .card, .layout > section, .kpi, .ui-notice, button, input, select, textarea {
    forced-color-adjust: auto;
    border: 1px solid CanvasText;
  }
  :focus-visible { outline: 3px solid Highlight; }
}
@media print {
  .ui-notice { border: 1px solid #777; background: white; color: black; }
  .card, .layout > section { border: 1px solid #bbb; }
  .excel-grid, .table-scroll { max-height: none; }
  button, [type="submit"], [type="button"], #santiye-bekleme { display: none !important; }
}
