/* Karakoç Tekstil — şirket portalı ortak stil
   Kimlik tek yerde: koyu çivit üst bar. Gerisi sakin ve okunur.
   Dış bağlantı yok: sistem fontları (şirket ağı internetsiz de olsa çalışır). */

:root {
  --bg: #EBEEF2;             /* serin açık zemin */
  --card: #FFFFFF;
  --field: #F5F7F9;
  --ink: #182430;
  --muted: #5C6875;
  --line: #D7DDE3;
  --civit: #1F3A5C;          /* boyahane çiviti — üst bar */
  --civit-acik: #2C5282;     /* butonlar, linkler */
  --civit-koyu: #16293F;
  --danger: #A93A31;
  --success: #2E7D4F;
  --ring: rgba(44, 82, 130, .3);
  --radius: 8px;
  --font: system-ui, "Segoe UI", -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
}

.page {
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 20px 64px;
}

/* ---------- Üst bar ---------- */

.topbar {
  background: var(--civit);
  color: #FFFFFF;
}

.topbar-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  color: inherit;
  text-decoration: none;
}

.brand strong {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

.brand span {
  font-size: .85rem;
  color: #B9C6D6;
}

.brand span:empty { display: none; }

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.nav a {
  color: #D5DEE9;
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 6px;
}

.nav a:hover { background: rgba(255,255,255,.1); color: #FFFFFF; }

.nav a[aria-current="page"] {
  background: rgba(255,255,255,.16);
  color: #FFFFFF;
}

.nav .logout { color: #F0B9B4; }
.nav .logout:hover { background: rgba(169, 58, 49, .35); color: #FFFFFF; }

/* ---------- Sayfa başlığı ---------- */

.sayfa-baslik { margin-bottom: 20px; }

.sayfa-baslik h2 {
  margin: 0 0 4px;
  font-size: 1.35rem;
  letter-spacing: -.015em;
}

.sayfa-baslik .lead { margin: 0; }

/* ---------- Uygulama kartları (hub) ---------- */

.uygulama-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.uygulama-kart {
  display: block;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--civit);
  border-radius: var(--radius);
  padding: 18px 20px;
  color: inherit;
  text-decoration: none;
}

.uygulama-kart:hover {
  border-color: var(--civit-acik);
  border-left-color: var(--civit-acik);
}

.uygulama-kart h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
  color: var(--civit-acik);
}

.uygulama-kart p {
  margin: 0;
  font-size: .88rem;
  color: var(--muted);
}

/* ---------- Modül sekmeleri ---------- */

.modul-sekmeler {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.modul-sekmeler a {
  padding: 8px 16px 10px;
  color: var(--muted);
  text-decoration: none;
  font-size: .92rem;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.modul-sekmeler a:hover { color: var(--ink); }

.modul-sekmeler a[aria-current="page"] {
  color: var(--civit-acik);
  border-bottom-color: var(--civit-acik);
}

/* ---------- Kart ---------- */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
}

.card h2 {
  margin: 0 0 6px;
  font-size: 1.2rem;
  letter-spacing: -.01em;
}

.lead {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: .92rem;
}

/* ---------- Giriş ekranı ---------- */

.giris-brand {
  text-align: center;
  margin: 24px 0 28px;
}

.giris-brand h1 {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--civit);
}

.giris-brand span {
  font-size: .9rem;
  color: var(--muted);
}

.auth { max-width: 440px; margin: 0 auto; }

/* ---------- Form ---------- */

.field { margin-bottom: 14px; }

.field label {
  display: block;
  margin-bottom: 5px;
  font-size: .85rem;
  font-weight: 600;
}

.field input,
.field select {
  width: 100%;
  padding: 9px 12px;
  font: inherit;
  font-size: .92rem;
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--civit-acik);
  box-shadow: 0 0 0 3px var(--ring);
  background: var(--card);
}

/* ---------- Buton ---------- */

.btn {
  display: inline-block;
  padding: 8px 16px;
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}

.btn:hover { border-color: var(--civit-acik); color: var(--civit-acik); }

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}

.btn-primary {
  width: 100%;
  padding: 10px 16px;
  color: #FFFFFF;
  background: var(--civit-acik);
  border-color: var(--civit-acik);
}

.btn-primary:hover { background: var(--civit-koyu); border-color: var(--civit-koyu); color: #FFFFFF; }

/* ---------- Flash mesajları ---------- */

.flash-list { margin-bottom: 18px; }

.flash {
  padding: 10px 14px;
  border-radius: 6px;
  font-size: .9rem;
  margin-bottom: 8px;
  border: 1px solid;
}

.flash.success {
  color: var(--success);
  background: #EBF5EF;
  border-color: #BCDCC9;
}

.flash.danger {
  color: var(--danger);
  background: #FAEEEC;
  border-color: #E5C2BE;
}

/* ---------- Tablo ---------- */

.table-wrap { overflow-x: auto; }

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}

.table th {
  text-align: left;
  padding: 8px 12px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 2px solid var(--line);
  white-space: nowrap;
}

.table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.table tbody tr:hover { background: var(--field); }

/* ---------- Rol rozetleri ---------- */

.rol {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  background: var(--field);
  border: 1px solid var(--line);
}

.rol-admin   { color: #7C2D63; background: #F7EDF4; border-color: #E1C4D7; }
.rol-yonetim { color: var(--civit-acik); background: #EDF2F8; border-color: #C6D4E4; }
.rol-ik      { color: #8A5A16; background: #F9F1E4; border-color: #E6D3B2; }
.rol-it      { color: #216462; background: #E9F4F3; border-color: #BEDBD9; }
.rol-amir    { color: #4B5563; background: #F1F3F5; border-color: #D3D8DD; }

.empty { color: var(--muted); margin: 0; }

/* ---------- Küçük ekran ---------- */

@media (max-width: 560px) {
  .page { padding: 20px 14px 48px; }
  .card { padding: 18px; }
}

/* ---------- Tablo içi seçimler ---------- */

.table select {
  max-width: 200px;
  padding: 5px 8px;
  font: inherit;
  font-size: .85rem;
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.table select:focus {
  outline: none;
  border-color: var(--civit-acik);
  box-shadow: 0 0 0 3px var(--ring);
}

/* ---------- Vardiya planı ---------- */

.plan-baslik {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.plan-baslik .kod {
  font-size: .8rem;
  font-weight: 500;
  color: var(--muted);
}

.btn-dar { width: auto; }

.btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.onay-rozet {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--success);
  background: #EBF5EF;
  border: 1px solid #BCDCC9;
}

/* ---------- Şifre yenileme modalı ---------- */

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

.modal-arka {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(24, 36, 48, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-kutu {
  width: 100%;
  max-width: 420px;
}

/* ---------- Profil sabit bilgileri ---------- */

.sabit-bilgiler {
  margin-bottom: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.sabit {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  font-size: .92rem;
}

.sabit + .sabit { border-top: 1px solid var(--line); }

.sabit-etiket { color: var(--muted); }

/* ---------- Tehlike butonu ---------- */

.btn-tehlike { color: var(--danger); border-color: #E5C2BE; }
.btn-tehlike:hover { color: #FFFFFF; background: var(--danger); border-color: var(--danger); }

.modal-butonlar { display: flex; gap: 10px; }
.modal-butonlar .btn { width: auto; }

/* ---------- Vardiya onaylı görünüm ---------- */

.islendi { color: var(--success); font-weight: 600; }

.plan-butonlar { display: flex; gap: 10px; margin-top: 16px; }

.vardiya-gruplar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-top: 8px;
}

.vardiya-grup {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.vardiya-grup h3 {
  margin: 0;
  padding: 8px 12px;
  font-size: .9rem;
  color: var(--civit-acik);
  background: var(--field);
  border-bottom: 1px solid var(--line);
}

.vardiya-grup ul {
  list-style: none;
  margin: 0;
  padding: 8px 12px;
  font-size: .88rem;
}

.vardiya-grup li { padding: 3px 0; }

/* ---------- Tablo başlık sıralama ve kişi linkleri ---------- */

.table th .sirala {
  color: inherit;
  text-decoration: none;
}

.table th .sirala:hover { color: var(--civit-acik); }

.kisi-link { color: var(--civit-acik); text-decoration: none; }
.kisi-link:hover { text-decoration: underline; }

/* ---------- Vardiya geçmişi ---------- */

.filtre-satir {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.filtre-satir .field { margin-bottom: 0; min-width: 200px; }

.gecmis-blok {
  border-top: 1px solid var(--line);
  margin-top: 18px;
  padding-top: 14px;
}

.gecmis-blok > h3 { margin: 0 0 2px; font-size: 1rem; }
.gecmis-blok > .lead { margin-bottom: 10px; font-size: .85rem; }

/* ============================================================
   MOBİL UYUM
   Öncelik: amir (vardiya) ve çalışan (anasayfa, profil, şifre)
   ekranları. Yönetim tabloları yatay kaydırmayla çalışır.
   ============================================================ */

@media (max-width: 640px) {

  .page { padding: 16px 12px 48px; }

  /* Üst bar: marka ve menü alt alta, dokunma alanları büyük */
  .topbar-inner { padding: 10px 12px; }
  .nav a { padding: 8px 12px; }

  /* iOS, 16px altındaki inputlara odaklanınca sayfayı yakınlaştırır;
     bunu önlemek için mobilde form elemanları 16px olur */
  .field input,
  .field select,
  .table select {
    font-size: 16px;
    padding: 11px 12px;
  }

  .btn { padding: 11px 16px; }
  .btn-primary { padding: 12px 16px; }

  .card { padding: 16px 14px; }

  /* Filtreler tam genişlik */
  .filtre-satir { flex-direction: column; align-items: stretch; }
  .filtre-satir .field { min-width: 0; }
  .filtre-satir .btn { width: 100%; }

  /* Plan başlığı ve butonlar alt alta, tam genişlik */
  .plan-baslik { flex-direction: column; }
  .plan-butonlar { flex-direction: column; }
  .plan-butonlar .btn { width: 100%; }

  /* Vardiya atama tablosu: satırlar karta dönüşür.
     Sıra: ad (kalın) -> personel kodu (küçük) -> seçim (tam genişlik) */
  .vardiya-tablo thead { display: none; }

  .vardiya-tablo tr {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px 12px;
    margin-bottom: 10px;
    background: var(--card);
  }

  .vardiya-tablo tbody tr:hover { background: var(--card); }

  .vardiya-tablo td {
    display: block;
    border: 0;
    padding: 0;
  }

  .vardiya-tablo td:nth-child(2) { order: 1; font-weight: 600; }

  .vardiya-tablo td:nth-child(1) {
    order: 2;
    font-size: .8rem;
    color: var(--muted);
    margin-bottom: 8px;
  }

  .vardiya-tablo td:nth-child(1)::before { content: "Personel kodu: "; }

  .vardiya-tablo td:nth-child(3) { order: 3; }

  .vardiya-tablo td:nth-child(3) form { display: block; }

  .vardiya-tablo select { width: 100%; max-width: none; }

  /* Onaylı görünüm ve geçmişte gruplar tek kolon akar */
  .vardiya-gruplar { grid-template-columns: 1fr 1fr; }

  /* Uygulama kartları tek kolon */
  .uygulama-grid { grid-template-columns: 1fr; }

  /* Sekmeler taşarsa yatay kaydırılır */
  .modul-sekmeler { overflow-x: auto; white-space: nowrap; }

  /* Yönetim tabloları (kullanıcılar, silme, eski) yatay kaydırma ile;
     dokunmatikte kaydırmayı akıcı yap */
  .table-wrap { -webkit-overflow-scrolling: touch; }

  .modal-kutu { max-width: none; }
}

/* ---------- Mesajlar ---------- */

.rozet {
  display: inline-block;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: .75rem;
  text-align: center;
  color: #FFFFFF;
  background: var(--iplik, #C0343F);
  background: var(--danger);
}

.vardiyam {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  border-left: 4px solid var(--civit);
}

.vardiyam strong { font-size: 1.25rem; color: var(--civit-acik); }

.konusma-listesi { display: flex; flex-direction: column; }

.konusma-satir {
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 8px;
  color: inherit;
  text-decoration: none;
}

.konusma-satir.okunmadi {
  border-left: 4px solid var(--danger);
  background: #FBF3F2;
}

.konusma-satir.okunmadi .konusma-etiket { color: var(--danger); }

.konusma-satir.okundu { color: var(--muted); }

.konusma-satir:hover { border-color: var(--civit-acik); }

.konusma-ust {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.konusma-etiket { font-weight: 600; }
.konusma-zaman { font-size: .8rem; color: var(--muted); }
.konusma-onizleme { font-size: .87rem; margin-top: 2px; }

.mesaj-akis {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.balon {
  max-width: 75%;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: .92rem;
}

.balon.benim {
  align-self: flex-end;
  background: var(--civit-acik);
  color: #FFFFFF;
}

.balon.karsi {
  align-self: flex-start;
  background: var(--field);
  border: 1px solid var(--line);
}

.balon-gonderen { font-size: .78rem; font-weight: 600; color: var(--civit-acik); }

.balon.benim .balon-zaman { color: #C9D6E5; }
.balon-zaman { font-size: .72rem; color: var(--muted); margin-top: 3px; }

.balon-icerik { white-space: pre-wrap; }

.cevap-formu { display: flex; gap: 10px; align-items: flex-end; }

.cevap-formu textarea,
.field textarea {
  flex: 1;
  padding: 9px 12px;
  font: inherit;
  font-size: .92rem;
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 6px;
  width: 100%;
  resize: vertical;
}

.cevap-formu textarea:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--civit-acik);
  box-shadow: 0 0 0 3px var(--ring);
  background: var(--card);
}

.geri-btn { margin-top: 10px; }

@media (max-width: 640px) {
  .balon { max-width: 90%; }
  .cevap-formu { flex-direction: column; align-items: stretch; }
  .cevap-formu textarea { font-size: 16px; }
  .field textarea { font-size: 16px; }
}

/* ---------- Ana sayfa vardiya listesi ---------- */

.vardiyam { display: block; }

.vardiyam h3 {
  margin: 0 0 8px;
  font-size: .95rem;
  color: var(--civit-acik);
}

.vardiyam-satir {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
}

.vardiyam-satir + .vardiyam-satir { border-top: 1px solid var(--line); }

.vardiyam-satir strong { font-size: 1.1rem; color: var(--civit-acik); }

/* ---------- v14: yeni roller ve mükerrer bilgisi ---------- */

.rol-vardiyali { color: var(--muted); }
.rol-gunduzcu  { color: #5B4B8A; background: #F1EEF8; border-color: #D5CCE8; }

.yan-bilgi { font-size: .78rem; color: var(--muted); margin-top: 4px; }

/* ---------- Ek mesai ---------- */

.btn-kucuk { padding: 5px 10px; font-size: .8rem; }

.mesai-hucre { white-space: nowrap; font-size: .88rem; color: var(--muted); }

.mesai-input {
  width: 64px;
  padding: 6px 8px;
  font: inherit;
  text-align: right;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--field);
}

.mesai-input:focus { outline: none; border-color: var(--civit-acik); box-shadow: 0 0 0 3px var(--ring); }

.mesai-etiket {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  color: #8A5A16;
  background: #F9F1E4;
}

@media (max-width: 640px) {
  .vardiya-tablo td:nth-child(4) { order: 4; margin-top: 8px; }
  .mesai-input { width: 80px; font-size: 16px; }
}

/* ---------- İzin ---------- */

.alt-baslik { margin: 22px 0 8px; font-size: 1rem; color: var(--civit-acik); }
.alt-baslik:first-of-type { margin-top: 4px; }

.tarih-satir { display: flex; gap: 12px; }
.tarih-satir .field { flex: 1; }

.izin-aciklama { font-size: .85rem; color: var(--ink); margin-top: 2px; }
.izin-meta { font-size: .76rem; color: var(--muted); margin-top: 2px; }

.nowrap { white-space: nowrap; }

.durum {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
}
.durum-bekliyor   { color: #8A5A16; background: #F9F1E4; }
.durum-onaylandi  { color: #1F6B3A; background: #E6F3EA; }
.durum-reddedildi { color: var(--danger); background: #FBEDEC; }

.karar-form, .ucret-form { display: flex; gap: 6px; align-items: center; }
.ucret-form select { padding: 5px 8px; font-size: .85rem; }

.personel-listesi { display: flex; flex-wrap: wrap; gap: 16px; }
.personel-grup h4 { margin: 0 0 6px; font-size: .88rem; color: var(--muted); }
.personel-link {
  display: inline-block;
  margin: 0 6px 6px 0;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .85rem;
  color: var(--civit-acik);
  text-decoration: none;
}
.personel-link:hover { border-color: var(--civit-acik); }

@media (max-width: 640px) {
  .tarih-satir { flex-direction: column; gap: 0; }
  .field input[type="date"] { font-size: 16px; }
}

.izin-etiket {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  color: #1F6B3A;
  background: #E6F3EA;
}

/* ---------- Kullanıcı arama çubuğu ---------- */
.arama-cubugu { margin-bottom: 14px; padding: 12px; background: var(--field); border-radius: var(--radius); }
.arama-cubugu .field { min-width: 180px; }
#filtre-sayac { color: var(--civit-acik); font-weight: 600; }
.pasif-satir td { color: var(--muted); }
.rol-harici { color: #6B4F2A; background: #F5EFE6; border-color: #E0D2BE; }

/* ---------- Yoklama ---------- */

.yok-kirmizi td { background: #FBEDEC; }
.yok-yeni td:first-child { box-shadow: inset 4px 0 0 var(--danger); }
.yok-gec td { background: #FFF6E5; }
.yok-duzeltildi td { background: #F1F7F3; }
.yok-etiket-yesil      { color: #1F6B3A; background: #E6F3EA; }
.yok-etiket-gec        { color: #8A5A16; background: #F9F1E4; }
.yok-etiket-kirmizi    { color: #FFFFFF; background: var(--danger); }
.yok-etiket-duzeltildi { color: #1F6B3A; background: #D7ECDD; }
.aciklama-input { min-width: 260px; padding: 5px 8px; font: inherit; font-size: .85rem; border: 1px solid var(--line); border-radius: 6px; }

/* Vardiya ekranlarinda isim renkleri */
.ad-yesil::before, .ad-gec::before, .ad-kirmizi::before, .ad-duzeltildi::before {
  content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle;
}
.ad-yesil::before, .ad-duzeltildi::before { background: #2E9E5B; }
.ad-gec::before { background: #E0A62D; }
.ad-kirmizi::before { background: var(--danger); }
.ad-kirmizi { color: var(--danger); font-weight: 600; }