/* =============================================
   ZER AUDIT Admin Panel — Global Styles
   ============================================= */

/* ── Tabler Icons webfont (CDN) ── */
@import url('https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.26.0/dist/tabler-icons.min.css');

/* ── Inter (CDN) — daha önce --font'ta referans veriliyordu ama hiç
   yüklenmiyordu, bu yüzden tarayıcı sessizce sistem fontuna düşüyordu. ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --sidebar-bg: #141e35;
  --sidebar-hover: #1e2d50;
  --sidebar-active: #2d51a0;
  --sidebar-text: #8fa3cc;
  --sidebar-text-active: #ffffff;
  --sidebar-width: 248px;

  --topbar-bg: #ffffff;
  --topbar-height: 60px;
  --topbar-border: #e9ecef;

  --content-bg: #f0f3f8;
  --card-bg: #ffffff;
  --card-shadow: 0 2px 12px rgba(0,0,0,0.07);
  --card-radius: 14px;

  --primary: #2d51a0;
  --primary-hover: #1e3a7b;
  --success: #22c55e;
  --danger: #ef4444;
  --warning: #f97316;
  --info: #06b6d4;
  --purple: #8b5cf6;

  --text-primary: #0f172a;
  /* Şart. 21 — WCAG 2.1 AA: 4.5:1 kontrast eşiği için koyulaştırıldı (bkz. #64748b → #526279). */
  --text-secondary: #526279;
  /* Kart/tablo ayırıcıları — dekoratiftir, WCAG 1.4.11 kapsamı dışında. */
  --border-color: #cbd5e1;
  /* Şart. 3.2.4.3.3 (WCAG 2.1 AA · 1.4.11 Non-text Contrast) — form alanı,
     seçim kutusu ve simge düğmesi gibi ETKİLEŞİMLİ bileşenlerin sınırı en az
     3:1 kontrasta sahip olmalıdır. Ölçüm: #7c8899 / #ffffff = 3.60:1,
     #7c8899 / #f0f3f8 = 3.23:1 (ikisi de eşiği geçer). */
  --field-border: #7c8899;

  --font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

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

/* ── Erişilebilirlik: klavye ile gezinirken odak her zaman görünür olmalı ── */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}
.btn:focus-visible { outline-offset: 3px; }
.sidebar-nav li a:focus-visible,
.nav-group-header:focus-visible { outline-color: #fff; outline-offset: -2px; }

/* ── Şart. 3.2.4.3.3 · WCAG 2.4.1 (Bypass Blocks) — içeriğe atlama bağlantısı.
   Yalnızca klavye ile odaklanınca görünür; fare kullanıcısını rahatsız etmez. ── */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--primary); color: #fff; padding: 10px 18px;
  border-radius: 0 0 8px 0; font-size: 14px; font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ── WCAG 1.4.11 — etkileşimli bileşen sınırları 3:1 ── */
.form-control,
.filter-select,
.search-box,
.icon-btn,
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="datetime-local"], input[type="search"], input[type="tel"],
select, textarea {
  border-color: var(--field-border);
}

/* ── WCAG 2.5.5 / şartname "dokunma alanları" — dokunmatik girdide en az 44×44 px.
   Yalnızca kaba işaretleyicide (parmak) uygulanır; fareyle arayüz yoğunluğu korunur. ── */
@media (pointer: coarse) {
  .btn, .icon-btn, .topbar-btn, .modal-close,
  .form-control, .filter-select, select, textarea,
  input[type="text"], input[type="email"], input[type="password"], input[type="number"],
  input[type="date"], input[type="datetime-local"], input[type="search"], input[type="tel"] {
    min-height: 44px;
  }
  .btn, .icon-btn, .topbar-btn, .modal-close { min-width: 44px; }
}

body {
  font-family: var(--font);
  background: var(--content-bg);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── Layout ── */
.wrapper { display: flex; min-height: 100vh; }

/* ═══════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════ */
.sidebar {
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  /* Sabit yükseklik şart: min-height olsaydı uzun menüde sidebar viewport
     dışına büyür ve .sidebar-nav'ın overflow-y:auto'su hiç devreye girmezdi
     (dropdown'lar açıkken alttaki öğelere kaydırılamama hatası). */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  position: fixed;
  top: 0; left: 0;
  display: flex;
  flex-direction: column;
  z-index: 100;
  transition: transform 0.3s ease;
  border-right: 1px solid rgba(255,255,255,0.04);
}

.sidebar-brand {
  padding: 18px 16px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-brand .brand-icon {
  width: 36px; height: 36px;
  background: var(--primary);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 900; color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(45,81,160,0.4);
}

/* Zer Audit brand logo (sidebar üst) */
.sidebar-brand .brand-logo {
  /* Geniş (yatay) logo desteği: kare kutuda ezilmesin */
  width: auto; max-width: 120px; height: 36px;
  object-fit: contain;
  background: #fff;
  border-radius: 10px;
  padding: 4px 8px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(45,81,160,0.4);
}

.sidebar-brand .brand-text {
  font-size: 17px; font-weight: 700; color: #fff; letter-spacing: 0.4px;
}

.sidebar-brand .brand-sub {
  font-size: 9.5px; color: var(--sidebar-text); font-weight: 400;
  margin-top: 1px; letter-spacing: 0.6px; text-transform: uppercase;
}

/* Nav scrollable area */
.sidebar-nav {
  list-style: none;
  flex: 1;
  overflow-y: auto;
  padding: 8px 0 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

/* Direct nav link */
.sidebar-nav li a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  color: var(--sidebar-text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  margin: 1px 8px;
  transition: all 0.18s ease;
  position: relative;
}
.sidebar-nav li a:hover  { background: var(--sidebar-hover); color: var(--sidebar-text-active); }
.sidebar-nav li a.active { background: var(--sidebar-active); color: var(--sidebar-text-active); box-shadow: 0 2px 10px rgba(45,81,160,0.35); }

.sidebar-nav li a .nav-icon {
  font-size: 17px; width: 20px; text-align: center; flex-shrink: 0; line-height: 1;
}

.sidebar-nav li a .badge {
  margin-left: auto;
  /* Şart. 21 — WCAG 2.1 AA kontrastı için koyulaştırıldı. */
  background: rgba(220,38,38,0.95); color: #fff;
  font-size: 9px; font-weight: 700;
  padding: 2px 7px; border-radius: 10px; line-height: 1.4;
}

/* Nav section label */
.nav-section-label {
  font-size: 9.5px; font-weight: 700;
  color: rgba(143,163,204,0.45);
  text-transform: uppercase; letter-spacing: 1.4px;
  padding: 12px 22px 4px;
  list-style: none;
}

/* Nav separator */
.nav-separator {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 6px 16px;
}

/* ── Dropdown group header ── */
.nav-group-header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  color: var(--sidebar-text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 8px;
  margin: 1px 8px;
  transition: all 0.18s ease;
  user-select: none;
}
.nav-group-header:hover { background: var(--sidebar-hover); color: var(--sidebar-text-active); }
.nav-group-header.has-active { color: var(--sidebar-text-active); }

.nav-group-header .nav-icon {
  font-size: 17px; width: 20px; text-align: center; flex-shrink: 0; line-height: 1;
}

.nav-arrow {
  margin-left: auto;
  font-size: 13px; line-height: 1;
  opacity: 0.45;
  transition: transform 0.25s ease, opacity 0.25s;
  flex-shrink: 0;
}
.nav-group-header.expanded .nav-arrow { transform: rotate(90deg); opacity: 0.8; }

/* ── Dropdown children ── */
.nav-children {
  list-style: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4,0,0.2,1);
}
.nav-children.open { max-height: 500px; }

.nav-children li a {
  padding: 7px 14px 7px 40px !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  margin: 1px 8px 1px 0 !important;
  border-radius: 7px !important;
}

.nav-child-icon {
  font-size: 14px !important;
  width: 16px !important;
  opacity: 0.7;
}
.nav-children li a.active .nav-child-icon { opacity: 1; }

/* Sidebar footer */
.sidebar-footer {
  padding: 12px 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0; /* nav kaydırılırken footer sabit kalır, ezilmez */
}

/* Şirket logosu — profil alanının hemen altında ayrı bant */
.sidebar-company-banner {
  padding: 10px 12px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid rgba(255,255,255,0.04);
  flex-shrink: 0;
}
.sidebar-company-banner img {
  width: calc(100% - 4px);
  height: auto;
  object-fit: contain;
  background: #ffffff;
  border-radius: 10px;
  padding: 7px 12px;
  display: block;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}

.sidebar-footer .user-avatar {
  width: 34px; height: 34px;
  background: linear-gradient(135deg, var(--primary), #4a7fd4);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff;
  flex-shrink: 0;
}

.sidebar-footer .user-info { flex: 1; min-width: 0; }
.sidebar-footer .user-name { font-size: 12.5px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-footer .user-role { font-size: 10px; color: var(--sidebar-text); margin-top: 1px; }

.sidebar-footer .logout-btn {
  background: none; border: none;
  color: var(--sidebar-text);
  cursor: pointer; font-size: 18px;
  padding: 5px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.sidebar-footer .logout-btn:hover { color: #ef4444; background: rgba(239,68,68,0.1); }

/* ═══════════════════════════════════════
   MAIN CONTENT
═══════════════════════════════════════ */
/* Şart. 3.2.5.1.2 — min-width:0 şart. .wrapper bir flex konteyner olduğundan
   .main-content'in varsayılan min-width:auto değeri, içindeki en geniş
   içeriğin (geniş tablolar, uzun başlıklar) altına küçülmesini engelliyordu.
   Sonuç: içerik daralmak yerine sayfayı yatayda taşırıyor, .table-wrap'ın
   overflow-x:auto'su hiç devreye giremiyordu. */
.main-content { margin-left: var(--sidebar-width); flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }

/* ── Top Bar ── */
.topbar {
  height: var(--topbar-height);
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--topbar-border);
  display: flex; align-items: center;
  padding: 0 24px; gap: 16px;
  position: sticky; top: 0; z-index: 50;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.topbar-title { font-size: 17px; font-weight: 700; color: var(--text-primary); flex: 1; }
.topbar-sub   { font-size: 11.5px; color: var(--text-secondary); font-weight: 400; margin-top: 1px; }
.topbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.topbar-btn {
  width: 36px; height: 36px; border-radius: 9px; border: none;
  background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; color: var(--text-secondary);
  transition: background 0.2s;
}
.topbar-btn:hover { background: var(--content-bg); color: var(--text-primary); }
.topbar-btn .ti { font-size: 19px; }

/* ── Page Content ── */
.page-content { flex: 1; padding: 24px; }

/* ═══════════════════════════════════════
   HERO / DASHBOARD BANNER
═══════════════════════════════════════ */
.hero-banner {
  background: linear-gradient(135deg, #141e35 0%, #1e3270 45%, #2d51a0 100%);
  border-radius: var(--card-radius);
  padding: 28px 32px;
  margin-bottom: 24px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  position: relative; overflow: hidden;
  box-shadow: 0 8px 32px rgba(20,30,53,0.25);
}
.hero-banner::before {
  content: ''; position: absolute; right: -50px; top: -50px;
  width: 240px; height: 240px; background: rgba(255,255,255,0.035); border-radius: 50%;
}
.hero-banner::after {
  content: ''; position: absolute; right: 80px; bottom: -70px;
  width: 180px; height: 180px; background: rgba(255,255,255,0.025); border-radius: 50%;
}

.hero-left { position: relative; z-index: 1; }
.hero-greeting { font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 4px; }
.hero-sub { font-size: 13px; color: rgba(255,255,255,0.55); font-weight: 400; }

.hero-stat-row { display: flex; gap: 0; margin-top: 22px; }
.hero-stat {
  display: flex; flex-direction: column; gap: 2px;
  padding: 0 24px 0 0;
  border-right: 1px solid rgba(255,255,255,0.15);
  margin-right: 24px;
}
.hero-stat:last-child { border-right: none; margin-right: 0; }
.hero-stat-value { font-size: 26px; font-weight: 800; color: #fff; line-height: 1; }
.hero-stat-label { font-size: 10.5px; color: rgba(255,255,255,0.5); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 3px; }

.hero-actions { display: flex; gap: 10px; flex-shrink: 0; position: relative; z-index: 1; align-self: center; }

/* Alert banner */
.alert-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px; border-radius: 10px;
  margin-bottom: 16px; font-size: 13px; font-weight: 500;
}
.alert-banner .ti { font-size: 18px; flex-shrink: 0; }
.alert-banner.alert-warning { background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; }
.alert-banner.alert-danger  { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.alert-banner.alert-info    { background: #eef2ff; border: 1px solid #c7d2fe; color: #3730a3; }

/* ═══════════════════════════════════════
   STAT CARDS
═══════════════════════════════════════ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--card-bg);
  border-radius: var(--card-radius);
  padding: 20px;
  box-shadow: var(--card-shadow);
  display: flex; align-items: center; gap: 16px;
  border-left: 4px solid transparent;
  transition: transform 0.15s, box-shadow 0.15s;
}
.stat-card:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,0,0,0.1); }

.stat-card.blue   { border-left-color: var(--primary); }
.stat-card.green  { border-left-color: var(--success); }
.stat-card.red    { border-left-color: var(--danger); }
.stat-card.orange { border-left-color: var(--warning); }
.stat-card.purple { border-left-color: var(--purple); }
.stat-card.cyan   { border-left-color: var(--info); }

.stat-icon {
  width: 50px; height: 50px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0; line-height: 1;
}
.stat-icon .ti { font-size: 22px; }

.stat-card.blue   .stat-icon { background: rgba(45,81,160,0.1);  color: var(--primary); }
.stat-card.green  .stat-icon { background: rgba(34,197,94,0.1);  color: var(--success); }
.stat-card.red    .stat-icon { background: rgba(239,68,68,0.1);  color: var(--danger); }
.stat-card.orange .stat-icon { background: rgba(249,115,22,0.1); color: var(--warning); }
.stat-card.purple .stat-icon { background: rgba(139,92,246,0.1); color: var(--purple); }
.stat-card.cyan   .stat-icon { background: rgba(6,182,212,0.1);  color: var(--info); }

.stat-value { font-size: 28px; font-weight: 800; color: var(--text-primary); line-height: 1; }
.stat-label { font-size: 11.5px; color: var(--text-secondary); margin-top: 4px; font-weight: 500; }

/* Kompakt özet "chip" şeridi — liste sayfalarının üst kısmındaki küçük
   istatistik kartları (.stat-card'dan farklı, daha küçük bir bileşen).
   Önceden 14 ayrı sayfada birebir aynı şekilde tekrarlanıyordu. */
/* Satırı doldurur (eskiden sola yaslı küçük blok kalıyordu); telefonda aşağıdaki 2 sütun kuralı geçerli. */
.stat-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 20px; }
.stat-chip {
  background: var(--card-bg); border-radius: 12px; box-shadow: var(--card-shadow);
  padding: 14px 20px; display: flex; align-items: center; gap: 12px;
  min-width: 130px;
}
.stat-chip .chip-icon {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.stat-chip .chip-val { font-size: 22px; font-weight: 800; }
.stat-chip .chip-lbl { font-size: 11px; color: var(--text-secondary); font-weight: 600; }

.chip-icon.blue   { background: rgba(45,81,160,0.12);   color: #2d51a0; }
.chip-icon.green  { background: rgba(34,197,94,0.12);   color: #16a34a; }
.chip-icon.orange { background: rgba(249,115,22,0.12);  color: #f97316; }
.chip-icon.red    { background: rgba(239,68,68,0.12);   color: #ef4444; }
.chip-icon.grey   { background: rgba(100,116,139,0.12); color: #64748b; }

@media (max-width: 640px) {
  .stat-chips { gap: 8px; }
  .stat-chip  { min-width: 0; }
}

/* ═══════════════════════════════════════
   QUICK ACTION CARDS
═══════════════════════════════════════ */
.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}

.quick-action-card {
  background: var(--card-bg);
  border-radius: var(--card-radius);
  padding: 18px;
  text-decoration: none;
  color: var(--text-primary);
  display: flex; align-items: center; gap: 14px;
  border: 1.5px solid var(--border-color);
  transition: all 0.2s; cursor: pointer;
}
.quick-action-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 20px rgba(45,81,160,0.12);
  transform: translateY(-1px);
}

.qa-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.qa-icon .ti { font-size: 20px; }
.qa-blue   { background: rgba(45,81,160,0.1);  color: var(--primary); }
.qa-green  { background: rgba(34,197,94,0.1);  color: var(--success); }
.qa-orange { background: rgba(249,115,22,0.1); color: var(--warning); }
.qa-purple { background: rgba(139,92,246,0.1); color: var(--purple); }
.qa-cyan   { background: rgba(6,182,212,0.1);  color: var(--info); }
.qa-red    { background: rgba(239,68,68,0.1);  color: var(--danger); }

.qa-label { font-size: 13px; font-weight: 600; }
.qa-desc  { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }

/* ═══════════════════════════════════════
   CARDS
═══════════════════════════════════════ */
.card {
  background: var(--card-bg);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  margin-bottom: 20px;
}

.card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
}

.card-title {
  font-size: 14.5px; font-weight: 700;
  color: var(--text-primary);
  display: flex; align-items: center; gap: 8px;
}
.card-title .ti { font-size: 17px; color: var(--primary); }

.card-body { padding: 20px; }

/* ═══════════════════════════════════════
   FILTERS BAR
═══════════════════════════════════════ */
.filters-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-color);
  flex-wrap: wrap; background: #fafbfc;
}

.search-box {
  display: flex; align-items: center; gap: 8px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  padding: 7px 12px;
  flex: 1; min-width: 200px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.search-box:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(45,81,160,0.08); }

.search-box input {
  border: none; outline: none;
  font-size: 13px; color: var(--text-primary);
  background: transparent; width: 100%; font-family: var(--font);
}
.search-box input::placeholder { color: #adb5bd; }
.search-box .ti { font-size: 15px; color: #adb5bd; flex-shrink: 0; }

.filter-select {
  border: 1px solid var(--border-color); border-radius: 9px;
  padding: 7px 12px; font-size: 13px;
  color: var(--text-primary); background: #fff;
  cursor: pointer; outline: none; font-family: var(--font);
  transition: border-color 0.2s;
}
.filter-select:focus { border-color: var(--primary); }

/* ═══════════════════════════════════════
   TABLE
═══════════════════════════════════════ */
.table-wrap { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }

thead tr { background: #f8fafc; border-bottom: 2px solid var(--border-color); }

thead th {
  padding: 11px 16px; text-align: left;
  font-size: 10.5px; font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.7px;
  white-space: nowrap;
}

tbody tr { border-bottom: 1px solid #f1f5f9; transition: background 0.15s; }
tbody tr:hover { background: #f8f9ff; }
tbody tr:last-child { border-bottom: none; }
tbody td { padding: 12px 16px; color: var(--text-primary); vertical-align: middle; }

/* ═══════════════════════════════════════
   BADGES
═══════════════════════════════════════ */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.2px; white-space: nowrap;
}

/* Şart. 21 — WCAG 2.1 AA: rozet metin renkleri 4.5:1 eşiği için koyulaştırıldı. */
.badge-open        { background: #fef2f2; color: #b91c1c; }
.badge-in_progress { background: #eff6ff; color: #2563eb; }
.badge-closed      { background: #f0fdf4; color: #15803d; }
.badge-pending     { background: #fffbeb; color: #b45309; }
.badge-completed   { background: #f0fdf4; color: #15803d; }
.badge-overdue     { background: #fef2f2; color: #b91c1c; }
.badge-draft       { background: #f8fafc; color: #64748b; }
.badge-verified    { background: #faf5ff; color: #7c3aed; }

.badge-low      { background: #eff6ff; color: #2563eb; }
.badge-medium   { background: #fffbeb; color: #d97706; }
.badge-high     { background: #fff7ed; color: #c2410c; }
.badge-critical { background: #faf5ff; color: #7c3aed; }

/* ═══════════════════════════════════════
   BUTTONS
═══════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 9px; border: none;
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all 0.18s; text-decoration: none;
  font-family: var(--font); white-space: nowrap; line-height: 1;
}
.btn .ti { font-size: 15px; }

.btn-primary       { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); box-shadow: 0 4px 12px rgba(45,81,160,0.3); }

.btn-success       { background: var(--success); color: #fff; }
.btn-success:hover { background: #16a34a; }

.btn-danger        { background: var(--danger); color: #fff; }
.btn-danger:hover  { background: #dc2626; }

.btn-warning       { background: var(--warning); color: #fff; }
.btn-warning:hover { background: #ea580c; }

.btn-secondary       { background: #f1f5f9; color: var(--text-primary); border: 1px solid var(--border-color); }
.btn-secondary:hover { background: #e2e8f0; }

.btn-ghost       { background: transparent; color: var(--primary); }
.btn-ghost:hover { background: rgba(45,81,160,0.07); }

/* Şart. 3.2.4.3.3 — hedef boyutu. Ölçümde küçük düğmeler 35×23 px çıkıyordu;
   WCAG 2.2 · 2.5.8 (Target Size Minimum) en az 24×24 px ister. Dokunmatik
   girdide 44×44'e yukarıdaki (pointer: coarse) kuralıyla çıkar. */
.btn-sm      { padding: 6px 11px; font-size: 12px; border-radius: 7px; min-height: 28px; min-width: 28px; }
.btn-sm .ti  { font-size: 13px; }
.btn-icon    { padding: 7px; border-radius: 8px; min-height: 28px; min-width: 28px; }
.btn, .icon-btn, .topbar-btn, .modal-close { min-height: 28px; min-width: 28px; }
/* Arama kutusu: iç <input> yüksekliği ölçümde 16 px kalıyordu. */
.search-box input { min-height: 24px; }

.action-btns { display: flex; gap: 6px; flex-wrap: wrap; }
td .action-btns { flex-wrap: nowrap; } /* satırdan satıra farklı dizilmesin */

/* Küçük ikon-only aksiyon butonu (satır içi düzenle/sil vb.) —
   önceden kazalar.html/kaza-analizi.html/kaza-tazminat.html'de ayrı ayrı tanımlıydı. */
.icon-btn {
  background: none; border: 1px solid var(--border-color); border-radius: 8px;
  width: 30px; height: 30px; cursor: pointer; color: var(--text-secondary);
  display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn:hover         { border-color: var(--primary); color: var(--primary); }
.icon-btn.ok:hover      { border-color: #16a34a; color: #16a34a; }
.icon-btn.danger:hover  { border-color: #ef4444; color: #ef4444; }

/* ═══════════════════════════════════════
   MODAL
═══════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15,23,42,0.45);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s;
}
.modal-overlay.active { opacity: 1; pointer-events: all; }

.modal {
  background: #fff; border-radius: 18px;
  width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto;
  box-shadow: 0 24px 80px rgba(0,0,0,0.2);
  transform: translateY(16px) scale(0.98);
  transition: transform 0.25s;
}
.modal-overlay.active .modal { transform: translateY(0) scale(1); }
.modal-lg { max-width: 740px; }

.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid var(--border-color);
}
.modal-title {
  font-size: 16px; font-weight: 700;
  display: flex; align-items: center; gap: 8px;
}
.modal-title .ti { font-size: 18px; color: var(--primary); }

.modal-close {
  background: none; border: none; font-size: 20px; cursor: pointer;
  color: var(--text-secondary); line-height: 1; padding: 5px; border-radius: 7px;
  transition: background 0.2s;
  display: flex; align-items: center; justify-content: center;
}
.modal-close:hover { background: #f1f5f9; color: var(--danger); }

.modal-body   { padding: 22px; }
.modal-footer { padding: 16px 22px; border-top: 1px solid var(--border-color); display: flex; gap: 10px; justify-content: flex-end; }

/* ═══════════════════════════════════════
   FORMS
═══════════════════════════════════════ */
.form-group { margin-bottom: 16px; }
.form-label {
  display: block; font-size: 11.5px; font-weight: 600;
  color: var(--text-secondary); margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.form-control {
  width: 100%; border: 1.5px solid var(--border-color); border-radius: 9px;
  padding: 9px 12px; font-size: 14px; color: var(--text-primary);
  font-family: var(--font); background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s; outline: none;
}
.form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(45,81,160,0.1); }
textarea.form-control { resize: vertical; min-height: 90px; }

/* ═══════════════════════════════════════
   AVATAR STACK
═══════════════════════════════════════ */
.avatar-stack { display: flex; align-items: center; }
.avatar-stack .av {
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(135deg, var(--primary), #4a7fd4);
  color: #fff; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff; margin-left: -6px;
}
.avatar-stack .av:first-child { margin-left: 0; }
.avatar-stack .av-more { background: #e9ecef; color: var(--text-secondary); font-size: 10px; }

/* ═══════════════════════════════════════
   EMPTY STATE
═══════════════════════════════════════ */
.empty-state { text-align: center; padding: 60px 20px; color: var(--text-secondary); }
.empty-state .empty-icon { font-size: 48px; margin-bottom: 14px; opacity: 0.25; }
.empty-state .empty-icon .ti { font-size: 52px; }
.empty-state .empty-title { font-size: 17px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.empty-state .empty-sub { font-size: 14px; }

/* ═══════════════════════════════════════
   LOADING
═══════════════════════════════════════ */
.spinner {
  display: inline-block; width: 20px; height: 20px;
  border: 2.5px solid rgba(45,81,160,0.2);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.65s linear infinite;
}
.loading-overlay {
  display: flex; align-items: center; justify-content: center;
  padding: 60px; gap: 12px; color: var(--text-secondary); font-size: 14px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════
   TOAST (bottom-right)
═══════════════════════════════════════ */
.toast-container {
  position: fixed; bottom: 24px; right: 24px;
  z-index: 9999; display: flex; flex-direction: column; gap: 8px;
}

.toast {
  background: #fff; border-radius: 12px; padding: 13px 18px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.14);
  display: flex; align-items: center; gap: 11px;
  font-size: 13.5px; font-weight: 500;
  min-width: 280px; max-width: 380px;
  border-left: 4px solid var(--primary);
  animation: slideIn 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.toast.success { border-left-color: var(--success); }
.toast.error   { border-left-color: var(--danger); }
.toast.warning { border-left-color: var(--warning); }

.toast .toast-icon {
  width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.toast .toast-icon .ti { font-size: 16px; }
.toast.success .toast-icon { background: rgba(34,197,94,0.12);  color: var(--success); }
.toast.error   .toast-icon { background: rgba(239,68,68,0.12);  color: var(--danger); }
.toast.warning .toast-icon { background: rgba(249,115,22,0.12); color: var(--warning); }
.toast.info    .toast-icon { background: rgba(45,81,160,0.1);   color: var(--primary); }

@keyframes slideIn  { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slideOut { from { opacity: 1; } to { opacity: 0; transform: translateX(30px); } }

/* ═══════════════════════════════════════
   PAGINATION
═══════════════════════════════════════ */
.pagination {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-top: 1px solid var(--border-color);
  font-size: 13px; color: var(--text-secondary);
}
.pagination-btns { display: flex; gap: 6px; }
.page-btn {
  width: 32px; height: 32px; border: 1px solid var(--border-color);
  border-radius: 7px; background: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; color: var(--text-primary); transition: all 0.15s;
}
.page-btn:hover { background: var(--content-bg); }
.page-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.page-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ═══════════════════════════════════════
   DETAIL GRID
═══════════════════════════════════════ */
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 14px; margin-bottom: 20px; }
.detail-item { display: flex; flex-direction: column; gap: 3px; }
.detail-item .di-label { font-size: 10px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
.detail-item .di-value { font-size: 14px; font-weight: 600; color: var(--text-primary); }

/* User picker */
.user-list { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; }
.user-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; cursor: pointer; transition: background 0.15s; }
.user-item:hover { background: var(--content-bg); }
.user-item input[type=checkbox] { accent-color: var(--primary); width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; }
.user-item .user-av { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, var(--primary), #4a7fd4); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.user-item .user-nm { font-size: 13.5px; font-weight: 600; }
.user-item .user-em { font-size: 11px; color: var(--text-secondary); }

/* Progress bars */
.progress-bar-wrap { height: 8px; background: #f1f5f9; border-radius: 99px; overflow: hidden; margin-top: 5px; }
.progress-bar-fill { height: 100%; border-radius: 99px; transition: width 0.6s cubic-bezier(0.4,0,0.2,1); }

/* ═══════════════════════════════════════
   LOGIN PAGE — split ekran: sol marka paneli + sağ form
═══════════════════════════════════════ */
body.login-page {
  display: flex; min-height: 100vh; min-height: 100dvh;
  background: var(--card-bg);
}

.login-visual {
  flex: 0 0 44%; max-width: 560px;
  background: linear-gradient(135deg, #141e35 0%, #1e3270 45%, #2d51a0 100%);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 48px 48px 36px;
  color: #fff;
}
.login-visual::before {
  content: ''; position: absolute; right: -60px; top: -60px;
  width: 280px; height: 280px; background: rgba(255,255,255,0.04); border-radius: 50%;
}
.login-visual::after {
  content: ''; position: absolute; left: -90px; bottom: -90px;
  width: 260px; height: 260px; background: rgba(255,255,255,0.03); border-radius: 50%;
}
.login-visual-icon {
  position: absolute; right: 6%; bottom: 8%;
  font-size: 220px; line-height: 1; color: rgba(255,255,255,0.05);
  pointer-events: none;
}
.login-visual-top   { position: relative; z-index: 1; }
.login-visual-brand { display: flex; align-items: center; gap: 12px; }
/* Logonun "AUDIT" bölümü koyu lacivert olduğundan bu koyu panelde okunmuyordu;
   kenar çubuğundaki şirket bandıyla aynı beyaz zeminli rozet kullanılır. */
.login-visual-brand img {
  height: 34px; width: auto;
  background: #fff;
  border-radius: 10px;
  padding: 6px 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.22);
}
.login-visual-mid    { position: relative; z-index: 1; max-width: 360px; }
.login-visual-mid h2 {
  font-size: 27px; font-weight: 800; line-height: 1.28; margin-bottom: 14px;
  text-wrap: balance;
}
.login-visual-mid p {
  font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.62);
}
.login-visual-features { list-style: none; margin-top: 26px; display: flex; flex-direction: column; gap: 13px; }
.login-visual-features li {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: rgba(255,255,255,0.82); font-weight: 500;
}
.login-visual-features .ti {
  width: 26px; height: 26px; border-radius: 8px;
  background: rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}
.login-visual-foot { position: relative; z-index: 1; font-size: 11.5px; color: rgba(255,255,255,0.4); }

.login-form-side {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 32px 24px;
}
.login-card {
  width: 100%; max-width: 380px;
}
.login-card-head { margin-bottom: 30px; }
.login-card-head .login-mobile-logo { display: none; margin-bottom: 22px; }
.login-card-head .login-mobile-logo img { height: 32px; }
.login-card-head h1 { font-size: 23px; font-weight: 800; color: var(--text-primary); }
.login-card-head p  { font-size: 13.5px; color: var(--text-secondary); margin-top: 5px; }

.login-error {
  background: #fef2f2; border: 1px solid #fecaca; border-radius: 9px;
  padding: 10px 14px; font-size: 13px; color: var(--danger);
  margin-bottom: 16px; display: none;
}

.password-field { position: relative; }
.password-field .form-control { padding-right: 42px; }
.password-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border: none; background: none; cursor: pointer;
  color: var(--text-secondary); border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.password-toggle:hover { background: var(--content-bg); color: var(--text-primary); }

.login-foot-note { text-align: center; font-size: 12px; color: #adb5bd; margin-top: 26px; }

@media (max-width: 860px) {
  .login-visual { display: none; }
  .login-card-head .login-mobile-logo { display: block; }
}

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
.hamburger { display: none; }

/* Şart. 3.2.5.1.2 — "tablet çözünürlüklerinde duyarlı çalışmalıdır".
   Sabit yan menü (248px) tablet dikey genişliklerinde içeriğe yer bırakmıyordu.
   1023px sınırı bilinçli seçildi: tüm yaygın tablet DİKEY genişlikleri
   (iPad Mini 744, Galaxy Tab ~800, iPad Air 820, iPad Pro 11" 834, 10.9" 1000)
   çekmece moduna girer; iPad YATAY (1024px) ve masaüstü sabit menüyü korur. */
@media (max-width: 1023px) {
  .hamburger { display: flex; margin-right: 8px; }
  /* Gölge yalnız açıkken: kapalı menünün gölgesi ekranın sol kenarına sızıyordu. */
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); box-shadow: 4px 0 24px rgba(0,0,0,0.15); }
  .main-content { margin-left: 0; }
  .sidebar-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 90; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
  .sidebar-backdrop.active { opacity: 1; pointer-events: all; }
}

/* Telefon: yalnızca içerik yoğunluğu kuralları. Yukarıdaki gezinme kuralları
   bu blokta TEKRARLANMAZ — 1023px bloğu zaten bu genişlikleri de kapsıyor. */
@media (max-width: 768px) {
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .quick-actions-grid { grid-template-columns: repeat(2,1fr); }
  .hero-banner { flex-direction: column; padding: 22px; }
  .hero-stat-row { gap: 16px; }
  .hero-greeting { font-size: 19px; }
  .hero-actions { display: none; }
  .filters-bar { flex-direction: column; align-items: stretch; }
  .search-box { min-width: unset; }
}

@media (max-width: 480px) {
  .page-content { padding: 14px; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .stat-value { font-size: 22px; }
  .topbar { padding: 0 16px; }
  .hero-stat-row { flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════════════════════════════
   DAR EKRAN DÜZELTMELERİ (telefon + tablet dikey)

   Şart. 3.2.1.2 / 3.2.5.1.2 — panel telefon ve tablet çözünürlüklerinde
   duyarlı çalışmalıdır.

   375 px genişlikte yapılan ölçümde 30 sayfanın 20'sinde belge genişliği
   görünüm alanını aşıyordu (en kötüsü 701 px). Dört kök neden vardı:

     1. Satır içi `style="grid-template-columns:..."` — medya sorguları
        satır içi stili ezemediği için ızgaralar telefonda da 3-4 sütunda
        kalıyordu. Yalnızca !important ile geri alınabilir.
     2. Esnek kutu (flex) öğelerinin varsayılan `min-width:auto` değeri —
        uzun seçenek metni olan <select> daralamıyor, satırı taşırıyordu.
     3. Sarmalayıcısı (.table-wrap) olmayan tablolar.
     4. Sarılamayan üst çubuk ve sekme şeridi.

   Buradaki kurallar SEBEPLERİ giderir; `overflow:hidden` ile belirtiyi
   gizlemez — aksi hâlde taşan veri kullanıcıdan tamamen saklanırdı.
═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Satır içi ızgara sütunları ─────────────────────────────────── */

/* Tablet dikey ve altı: 3+ sütun → 2 sütun. */
@media (max-width: 900px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  .page-content [style*="repeat(3"]:not(.stats-grid),
  .page-content [style*="repeat(4"]:not(.stats-grid),
  .page-content [style*="repeat(5"]:not(.stats-grid),
  .page-content [style*="repeat(6"]:not(.stats-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Telefon: çok sütunlu her ızgara tek sütuna iner. `minmax(0,1fr)`
   kullanılır — düz `1fr` (= minmax(auto,1fr)) uzun içerikte yine taşar. */
@media (max-width: 560px) {
  .page-content [style*="grid-template-columns"]:not(.stats-grid) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* İstatistik kartları telefonda 2 sütun kalır (mevcut 480px kuralıyla aynı
   yoğunluk). Yalnızca çok dar ekranlarda tek sütuna iner. */
@media (max-width: 340px) {
  .stats-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ── 2. Esnek kutu öğeleri daralabilsin ───────────────────────────── */

/* Form öğeleri kapsayıcısından geniş olmasın; flex içinde daralabilsin. */
input, select, textarea { max-width: 100%; min-width: 0; }

/* Genel amaçlı: esnek satırlardaki öğeler içeriklerinden dolayı satırı
   taşırmasın (ör. near-miss "İSG uzmanı seç" açılır listesi). */
/* Izgara/esnek kutu öğelerinin varsayılan `min-width:auto` değeri, öğenin
   içeriğinden daha dar olmasını engeller; `1fr` sütunlar bu yüzden kapsayıcıyı
   taşırır. `min-width:0` daralmaya İZİN verir, zorlamaz.

   `.page-content *` bilinçli olarak geniş tutuldu: sayfa içi <style>
   bloklarında düzinelerce `repeat(N,1fr)` tanımı var ve hepsini tek tek
   `minmax(0,1fr)` yapmak hem riskli hem eksik kalırdı. Kural yalnızca hiçbir
   yerde min-width TANIMLANMAMIŞ öğeleri etkiler: bu dosya sayfa <style>
   bloklarından ÖNCE yüklendiği için, açıkça min-width veren her kural
   (ve her satır içi stil) bu kuralı ezer. */
@media (max-width: 1023px) {
  .page-content * { min-width: 0; }
}

/* Telefonda form denetimi + düğme satırları alt alta geçsin; yan yana
   sıkıştırıldıklarında açılır listelerin metni okunmuyordu. */
@media (max-width: 560px) {
  .assign-wrap { flex-wrap: wrap; }
  .assign-wrap > select { flex: 1 1 100%; }
  .assign-wrap > button { flex: 1 1 100%; }
}

/* ── 3. Tablolar ───────────────────────────────────────────────────── */

.table-wrap { -webkit-overflow-scrolling: touch; }

/* .table-wrap'a alınmamış tablolar da yatayda kaydırılabilsin.
   :has() panelin desteklediği tüm güncel tarayıcılarda mevcuttur. */
/* Tabloyu DOĞRUDAN içeren her kapsayıcı yatayda kaydırılabilir olur —
   böylece .table-wrap kullanılmayan sayfalarda (kaza-ice-aktar, roles,
   kazalar, egitim, api-anahtarlari …) tablo sayfayı taşırmaz, kendi
   içinde kayar. Veri gizlenmez, erişilebilir kalır. */
@media (max-width: 1023px) {
  .page-content *:has(> table) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── 4. Üst çubuk ve sekme şeridi ─────────────────────────────────── */

/* Başlık + eylem düğmeleri tek satıra sığmadığında alt satıra sarsın.
   Sabit yükseklik kaldırılır, asgari yükseklik korunur. */
@media (max-width: 640px) {
  .topbar {
    height: auto;
    min-height: var(--topbar-height);
    flex-wrap: wrap;
    row-gap: 8px;
    padding-top: 10px; padding-bottom: 10px;
  }
  .topbar-title { flex: 1 1 100%; min-width: 0; }
  .topbar-actions { margin-left: 0; flex-wrap: wrap; }
}

/* Sekmeler ve adım göstergesi sarmak yerine yatayda kaydırılır —
   sıralı bileşenlerde satır atlatmak akışı okunmaz hâle getiriyor. */
@media (max-width: 900px) {
  .tab-bar,
  .steps-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .tab-bar .tab-btn,
  .steps-bar > * { flex: 0 0 auto; white-space: nowrap; }
}

/* Sayfa başlığındaki eylem grupları da sarsın. */
@media (max-width: 640px) {
  .law-hero-actions,
  .page-actions,
  .header-actions { flex-wrap: wrap; }
}

/* ── 5. Kipler (modal) ────────────────────────────────────────────── */

@media (max-width: 560px) {
  .modal-overlay { padding: 12px; align-items: flex-end; }
  .modal { max-width: 100%; max-height: 88vh; border-radius: 16px; }
  .modal-lg { max-width: 100%; }
}

/* ── 6. Uzun metinler ─────────────────────────────────────────────── */

/* Kesintisiz uzun dizeler (e-posta, URL, imzalı bağlantı) kutuyu taşırmasın. */
@media (max-width: 640px) {
  /* DİKKAT: `overflow-wrap: anywhere` KULLANILMAZ — min-content genişliğini de
     küçülttüğü için tablo sütunları sıfıra yakın daralıp metni harf harf alt
     alta kırıyordu. `break-word` yalnızca taşmayı önler, ölçüyü etkilemez. */
  .page-content { overflow-wrap: break-word; }
  /* Tablo hücreleri hariç: sütun genişliği içeriğe göre hesaplanmalı. */
  .page-content td, .page-content th { overflow-wrap: normal; }

  /* Sayısal değerler ve kısa etiketler ASLA bölünmemeli — "63.200" tutarı
     "63.20 / 0" diye iki satıra ayrılıyordu. Bunlar zaten kısa oldukları için
     taşma riski yok; kırılma yalnızca zarar veriyor. */
  .page-content .stat-value,
  .page-content .chip-val,
  .page-content .stat-label,
  .page-content .chip-lbl,
  .page-content .score-pill,
  .page-content .tab-count,
  .page-content .badge,
  .page-content .btn { overflow-wrap: normal; }
  .page-content pre,
  .page-content code { white-space: pre-wrap; overflow-wrap: break-word; }
}

/* ── 7. İstatistik kartları (dar ekran) ───────────────────────────── */

/* İki sütuna inen kartta 50 px'lik simge + 20 px dolgu, etikete yalnızca
   ~85 px bırakıyor ve "Tamamlanan" gibi tek kelimelik başlıklar kelime
   ortasından bölünüyordu. Simge ve dolgu küçültülüp etikete yer açılır;
   etiketlerde kelime bölme kapatılır. */
@media (max-width: 560px) {
  .stat-card { padding: 14px; gap: 10px; }
  .stat-icon { width: 38px; height: 38px; border-radius: 10px; font-size: 18px; }
  .stat-icon .ti { font-size: 18px; }
}

/* ── 8. Çip ve süzgeç satırları (dar ekran) ───────────────────────── */

/* `.stat-chips` (14 sayfa) ve `.filter-bar`/`.filters-bar`/`.toolbar`
   esnek satırlardır; telefonda öğeler içeriklerine göre farklı genişliklerde
   sarınca kenar tırtıklı ve dağınık görünüyordu. Çipler iki eşit sütuna,
   süzgeç denetimleri tam genişliğe alınır. */
@media (max-width: 560px) {
  .stat-chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .stat-chips > * { width: auto; }

  .filter-bar,
  .filters-bar,
  .toolbar { flex-wrap: wrap; }

  /* Arama kutusu ve açılır listeler tam satır kaplasın; yan yana
     sıkıştıklarında metin okunmuyordu. */
  .filter-bar > input, .filter-bar > select,
  .filters-bar > input, .filters-bar > select,
  .toolbar > input, .toolbar > select,
  .filter-bar > .search-box,
  .filters-bar > .search-box { flex: 1 1 100%; width: 100%; }
}

/* Çok dar ekranda çipler de tek sütun. */
@media (max-width: 360px) {
  .stat-chips { grid-template-columns: minmax(0, 1fr); }
}

/* ── 9. Ekran turu bulguları (v0.02.5) ────────────────────────────── */

/* Süzgeç çubuğunda etiketli tarih alanı (etiketsiz "gg.aa.yyyy" iki kutu ayırt edilemiyordu). */
.tarih-filtre { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.tarih-filtre input { width: auto; }
.tarih-araligi { display: inline-flex; gap: 10px; flex-wrap: wrap; } /* başlangıç ve bitiş birlikte sarılır */
@media (max-width: 560px) {
  .filters-bar > .tarih-filtre, .filter-bar > .tarih-filtre, .filters-bar > .tarih-araligi, .tarih-araligi > .tarih-filtre { flex: 1 1 100%; }
  .tarih-filtre input { flex: 1; }
}

@media (max-width: 768px) {
  /* Yukarıdaki `.page-content * { min-width: 0 }` tablo hücrelerini de sıfıra
     kadar daraltıyor, metin kelime kelime alt alta kırılıyordu. Hücre bir
     kelime grubunu taşıyacak kadar geniş kalır; tablo kendi kutusunda kayar. */
  .page-content td:not(:has(> input[type=checkbox])),
  .page-content th:not(:has(> input[type=checkbox])) { min-width: 6.5rem; }
  /* İlk sütun genelde başlık/ad taşır; birkaç kelime yan yana sığsın. */
  .page-content td:first-child:not(:has(> input[type=checkbox])) { min-width: 11rem; }
  /* Durum/rol rozetleri tek satır. */
  .page-content .badge, .page-content .score-pill { white-space: nowrap; }
  /* Tek sayıda kartta son kart satırı doldursun (2 sütunlu telefon ızgarası). */
  .stats-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Pencerelerdeki satır içi ızgaralar: alanlar daralabilsin; telefonda tek sütun
   (sayfa kuralları .page-content'i kapsıyor, pencereler onun dışında kalıyordu —
   çalışma izni talebinde lokasyon/bitiş alanları ekrandan taşıyordu). */
.modal [style*="grid-template-columns"] > * { min-width: 0; }
@media (max-width: 480px) {
  .modal [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Skor rozeti ("75 · GEÇTİ") iki satıra bölünmesin. */
.score-pill { white-space: nowrap; }
/* Telefonda kart başlığı: başlık ve eylemler sarılır (PDKS kılavuz düğmesi ve rozetler taşıyordu). */
@media (max-width: 560px) {
  .card-header { flex-wrap: wrap; gap: 8px; }
  .card-header .card-title { min-width: 0; flex: 1 1 100%; }
  .search-box { min-width: 0; max-width: 100%; box-sizing: border-box; }
  .search-box input { min-width: 0; width: 100%; }
}

/* Lokasyon seçimleri: işletme başlığı (optgroup) altında birimler; seçilen birimin yolu altta */
select optgroup { font-style: normal; font-weight: 700; color: var(--text-primary); }
select optgroup option { font-weight: 400; padding-left: 14px; }
.lokasyon-yolu { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.lokasyon-yolu:empty { display: none; }