/* ==========================================================================
   Kılıç Enerji Araç Takip Sistemi — Stylesheet
   Faz 1   : ilk minimal mobile-first temel
   Faz 6D  : a11y polish (sr-only, focus-visible, role=alert, kontrast)
   Faz 6F  : mobile hamburger via <details>/<summary> (no-JS)
   Faz 9B  : global design system — CSS variables (tokens) + kurumsal görünüm
   --------------------------------------------------------------------------
   Class isimleri Faz 9A öncesi ile birebir aynıdır; bu dosya sadece görsel
   tokenları, spacing/typography/shadow ölçeklerini ve kurumsal sade görünümü
   sağlar. Template dosyalarında yapısal değişiklik yapılmamıştır.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1) DESIGN TOKENS (CSS variables)
   Tüm renk/boşluk/font değerleri buradan okunur. Gelecek fazlarda paleti
   güncellemek için yalnızca :root bloğunu değiştirmek yeter.
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --color-primary:        #0b3d91;   /* Kılıç Enerji mavisi (korundu) */
  --color-primary-dark:   #082c69;
  --color-primary-soft:   #e6ecf8;
  --color-primary-tint:   #cdd9f3;
  --color-on-primary:     #ffffff;
  --color-accent:         #ffd33d;   /* logo sarısı, sınırlı kullanım */

  /* Surfaces */
  --color-bg:             #f4f6fb;
  --color-surface:        #ffffff;
  --color-surface-soft:   #fafbfd;
  --color-surface-alt:    #f4f6fb;
  --color-border:         #e3e8f3;
  --color-border-strong:  #c8d0e0;

  /* Text */
  --color-text:           #1a1f2c;
  --color-text-muted:     #5b6478;
  --color-text-subtle:    #93a0bf;

  /* Status (semantic) */
  --color-success:        #155724;
  --color-success-bg:     #dcf5e1;
  --color-warning:        #806100;
  --color-warning-bg:     #fff3cd;
  --color-warning-edge:   #ffe88a;
  --color-warning-soft:   #fff8e1;
  --color-critical:       #8a3c0a;
  --color-critical-bg:    #ffe2cc;
  --color-danger:         #7a1e1e;
  --color-danger-bg:      #fde2e2;
  --color-danger-edge:    #a3573b;
  /* Faz A1-mini: 7 gün aciliyet için sıcak amber tonu (warning ile critical arası) */
  --color-warning-strong-bg:   #ffe2c2;   /* warning_bg ile critical_bg arası */
  --color-warning-strong-text: #6e3d00;   /* warning ile critical arası koyu */
  --color-info:           #3a4664;
  --color-info-bg:        #e6ecf8;
  --color-violet:         #3f2882;
  --color-violet-bg:      #e8e3fb;

  /* Spacing scale (8-base) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  --font-size-xs:    12px;
  --font-size-sm:    14px;
  --font-size-base:  16px;   /* iOS zoom-safe */
  --font-size-md:    15px;
  --font-size-lg:    18px;
  --font-size-xl:    22px;
  --font-size-2xl:   28px;
  --line-height-base: 1.5;
  --line-height-tight: 1.25;
  --letter-spacing-caps: .5px;

  /* Border radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-xs:  0 1px 2px rgba(11, 31, 70, .04);
  --shadow-sm:  0 1px 3px rgba(11, 31, 70, .06);
  --shadow-md:  0 4px 12px rgba(11, 31, 70, .08);
  --shadow-lg:  0 10px 24px rgba(11, 31, 70, .12);
  --shadow-card: 0 1px 2px rgba(11, 31, 70, .04), 0 4px 12px rgba(11, 31, 70, .05);

  /* Focus ring (Faz 6D korundu) */
  --focus-ring: 0 0 0 2px rgba(11, 61, 145, .22);
  --focus-color: var(--color-primary);
  --focus-color-on-dark: var(--color-accent);

  /* Transition */
  --transition-fast: 120ms ease-out;
  --transition-base: 180ms ease-out;
}


/* --------------------------------------------------------------------------
   2) RESET + BASE TYPOGRAPHY
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.app {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background: var(--color-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-fast); }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  color: var(--color-text);
  line-height: var(--line-height-tight);
  letter-spacing: -0.01em;
}

.container { max-width: 1080px; margin: 0 auto; padding: 0 var(--space-4); width: 100%; }


/* --------------------------------------------------------------------------
   3) TOPBAR / NAVIGATION
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--color-primary);
  color: var(--color-on-primary);
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: var(--shadow-sm);
}
.topbar__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-on-primary);
  font-weight: 600;
  letter-spacing: -.01em;
}
.brand:hover { text-decoration: none; }
.brand__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--color-accent);
  color: var(--color-text);
  border-radius: var(--radius-md);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -.02em;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .08);
}
.brand__name { font-size: var(--font-size-md); letter-spacing: .2px; }

.topnav {
  margin-left: auto;
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
}
.topnav a {
  color: var(--color-primary-tint);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.topnav a:hover {
  color: var(--color-on-primary);
  background: rgba(255, 255, 255, .06);
  text-decoration: none;
}
.topnav__user { color: var(--color-primary-tint); font-size: var(--font-size-sm); }
.topnav__user small { opacity: .8; }
.topnav__logout { display: inline; margin: 0; padding: 0; }

/* --------------------------------------------------------------------------
   3.1) FAZ UI-1 — KULLANICI PROFİL DROPDOWN (CSS-only, <details> tabanlı)
   - JS yok; native HTML5 disclosure widget kullanılır.
   - Mobil: hamburger panel içinde block layout'a düşer.
   - Klavye: <summary> Tab + Enter ile açılır; ESC ile kapatma tarayıcı doğal.
   -------------------------------------------------------------------------- */
.user-menu {
  position: relative;
  margin-left: auto;
}
.user-menu > summary {
  list-style: none;          /* Firefox marker'ı gizle */
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  color: var(--color-on-primary);
  user-select: none;
}
.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu > summary:hover { background: rgba(255, 255, 255, .08); }
.user-menu > summary:focus-visible {
  outline: 2px solid var(--focus-color-on-dark, #ffd54f);
  outline-offset: 2px;
}
.user-menu__avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--color-primary-tint, #4d6fb1);
  color: var(--color-on-primary, #fff);
  display: inline-flex;
  align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex: 0 0 auto;
}
.user-menu__meta {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}
.user-menu__name { font-size: var(--font-size-sm); font-weight: 600; }
.user-menu__role { font-size: 11px; opacity: .8; }
.user-menu__caret {
  font-size: 12px;
  opacity: .8;
  transition: transform .15s ease;
}
.user-menu[open] .user-menu__caret { transform: rotate(180deg); }

.user-menu__panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 240px;
  background: var(--color-surface, #fff);
  color: var(--color-text, #1b1f24);
  border: 1px solid var(--color-border, #d0d4da);
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
  padding: var(--space-1);
  z-index: 100;
  display: flex;
  flex-direction: column;
  max-width: calc(100vw - 24px);
}
.user-menu__header {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border-soft, #eef0f3);
  margin-bottom: var(--space-1);
}
.user-menu__header strong { display: block; font-size: var(--font-size-sm); }
.user-menu__header small { color: var(--color-text-muted, #6c727b); font-size: 11px; }
.user-menu__item {
  display: block;
  padding: var(--space-2) var(--space-3);
  text-decoration: none;
  color: var(--color-text, #1b1f24);
  border-radius: var(--radius-sm, 4px);
  font-size: var(--font-size-sm);
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  width: 100%;
}
.user-menu__item:hover {
  background: var(--color-surface-alt, #f4f6f9);
  text-decoration: none;
}
.user-menu__item:focus-visible {
  outline: 2px solid var(--color-primary, #0b3d91);
  outline-offset: -2px;
}
.user-menu__item--disabled {
  color: var(--color-text-muted, #9aa0a8);
  cursor: not-allowed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}
.user-menu__item--disabled:hover { background: none; }
.user-menu__badge {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--color-warning-bg, #fff3cd);
  color: var(--color-warning-text, #7a5a00);
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 600;
}
.user-menu__item--logout {
  color: var(--color-danger, #b3261e);
  font-weight: 600;
  margin-top: var(--space-1);
  border-top: 1px solid var(--color-border-soft, #eef0f3);
  border-radius: 0 0 var(--radius-sm, 4px) var(--radius-sm, 4px);
}
.user-menu__item--logout:hover { background: var(--color-danger-bg, #fce4e2); }
.user-menu__logout { margin: 0; padding: 0; }

@media (max-width: 768px) {
  /* Mobil: hamburger panel içinde dropdown tam genişlik */
  .user-menu { width: 100%; margin-left: 0; }
  .user-menu > summary { width: 100%; justify-content: flex-start; }
  .user-menu__panel {
    position: static;
    box-shadow: none;
    border: none;
    background: transparent;
    color: var(--color-on-primary, #fff);
    min-width: 0;
    padding: 0;
  }
  .user-menu__header { color: var(--color-on-primary, #fff); border-color: rgba(255,255,255,.15); }
  .user-menu__header small { color: rgba(255,255,255,.75); }
  .user-menu__item {
    color: var(--color-on-primary, #fff);
  }
  .user-menu__item:hover { background: rgba(255,255,255,.08); }
  .user-menu__item--disabled { color: rgba(255,255,255,.55); }
  .user-menu__item--logout { color: #ffb4ad; border-color: rgba(255,255,255,.15); }
}


/* --------------------------------------------------------------------------
   4) MAIN + FOOTER
   -------------------------------------------------------------------------- */
.main { flex: 1; padding: var(--space-5) 0; }

.footer {
  padding: var(--space-4) 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}


/* --------------------------------------------------------------------------
   5) BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-strong);
  cursor: pointer;
  font-size: var(--font-size-md);
  font-weight: 500;
  background: var(--color-surface);
  color: var(--color-primary);
  transition: background var(--transition-fast),
              border-color var(--transition-fast),
              transform var(--transition-fast),
              box-shadow var(--transition-fast);
}
.btn:hover {
  background: var(--color-primary-soft);
  border-color: var(--color-primary-tint);
  text-decoration: none;
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-xs);
}
.btn--primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-on-primary);
}

.btn--ghost {
  background: transparent;
  color: var(--color-on-primary);
  border-color: rgba(255, 255, 255, .35);
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .55);
  color: var(--color-on-primary);
}

.btn--ghost-light {
  background: transparent;
  color: var(--color-text-muted);
  border-color: var(--color-border-strong);
}
.btn--ghost-light:hover {
  background: var(--color-primary-soft);
  border-color: var(--color-primary-tint);
  color: var(--color-primary);
}

.btn--block { display: flex; width: 100%; }


/* --------------------------------------------------------------------------
   6) MESSAGES (Django messages framework)
   -------------------------------------------------------------------------- */
.messages { list-style: none; padding: 0; margin: 0 0 var(--space-4); }
.message {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-edge);
  color: var(--color-warning);
  font-size: var(--font-size-sm);
}
.message--error { background: var(--color-danger-bg); color: var(--color-danger); border-color: rgba(122, 30, 30, .15); }
.message--success { background: var(--color-success-bg); color: var(--color-success); border-color: rgba(21, 87, 36, .15); }


/* --------------------------------------------------------------------------
   7) AUTH (login)
   -------------------------------------------------------------------------- */
.auth-card {
  max-width: 440px;
  margin: var(--space-7) auto;
  background: var(--color-surface);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
}
.auth-card__header {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.auth-card__title {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-xl);
  color: var(--color-primary);
  letter-spacing: -.01em;
  line-height: 1.3;
}
.auth-card__subtitle {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: 1.6;
}
.auth-card__hint {
  margin: var(--space-4) 0 0;
  text-align: center;
  font-size: var(--font-size-xs);
}

@media (max-width: 600px) {
  .auth-card {
    margin: var(--space-4) auto;
    padding: var(--space-5);
    border-radius: var(--radius-md);
  }
}

.field { margin-bottom: var(--space-3); }
.field label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
}
.field input {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-size: var(--font-size-md);
  background: var(--color-surface);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.field input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}
.form-error {
  color: var(--color-danger);
  background: var(--color-danger-bg);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  border: 1px solid rgba(122, 30, 30, .15);
  font-size: var(--font-size-sm);
}


/* --------------------------------------------------------------------------
   8) DASHBOARD
   -------------------------------------------------------------------------- */
.dashboard__header h1 { font-size: var(--font-size-xl); margin: 0 0 var(--space-1); }
.dashboard__phase { color: var(--color-text-muted); margin: 0 0 var(--space-5); font-size: var(--font-size-sm); }

/* Faz 9C — hero hoş geldin alanı */
.dashboard__hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-on-primary);
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-md);
}
.dashboard__hero h1 {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-2xl);
  color: var(--color-on-primary);
  letter-spacing: -.02em;
}
.dashboard__hero-lead {
  margin: 0;
  font-size: var(--font-size-md);
  color: var(--color-primary-tint);
  max-width: 720px;
  line-height: 1.6;
}
.dashboard__hero-lead strong { color: var(--color-on-primary); font-weight: 600; }

@media (max-width: 600px) {
  .dashboard__hero { padding: var(--space-4); }
  .dashboard__hero h1 { font-size: var(--font-size-xl); }
  .dashboard__hero-lead { font-size: var(--font-size-sm); }
}

/* Faz 9C — boş durum hero variant'ı (kayıt yokken CTA içeren büyük kart) */
.empty--hero {
  padding: var(--space-7) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
  margin-bottom: var(--space-5);
}
.empty--hero p { margin: 0 0 var(--space-2); }
.empty--hero p:last-child { margin-bottom: 0; }
.empty--hero strong { color: var(--color-text); font-size: var(--font-size-lg); font-weight: 600; }
.empty__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-4) !important;
}

/* Faz 9C — hızlı aksiyonlar (CTA grid) */
.quick-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
@media (min-width: 600px) { .quick-actions { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .quick-actions { grid-template-columns: repeat(3, 1fr); } }

.quick-action {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color var(--transition-fast),
              transform var(--transition-fast),
              box-shadow var(--transition-base),
              background var(--transition-fast);
  min-height: 64px;
}
.quick-action:hover {
  border-color: var(--color-primary-tint);
  background: var(--color-primary-soft);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  color: var(--color-text);
}
.quick-action__title {
  font-weight: 600;
  font-size: var(--font-size-md);
  color: var(--color-primary);
}
.quick-action__hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}


/* --------------------------------------------------------------------------
   9) CARDS (genel + metric + a.card hover)
   -------------------------------------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
@media (min-width: 600px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .cards { grid-template-columns: repeat(4, 1fr); } }

.card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-border);
}
.card h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-caps);
}
.card__metric {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  margin: 0;
  color: var(--color-primary);
  letter-spacing: -.02em;
  line-height: 1.1;
}
.card__hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
  margin: var(--space-1) 0 0;
}
.card--placeholder .card__metric { color: var(--color-border-strong); }

a.card {
  color: inherit;
  text-decoration: none;
  transition: transform var(--transition-fast),
              box-shadow var(--transition-base),
              border-color var(--transition-fast);
}
a.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary-tint);
  text-decoration: none;
}


/* --------------------------------------------------------------------------
   10) SCOPE LIST (dashboard footer scope)
   -------------------------------------------------------------------------- */
.scope {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-border);
}
.scope h2 { margin: 0 0 var(--space-3); font-size: var(--font-size-lg); }
.scope__list { list-style: none; padding: 0; margin: 0; }
.scope__list li {
  display: flex;
  justify-content: space-between;
  padding: var(--space-2) 0;
  border-bottom: 1px dashed var(--color-border);
}
.scope__list li:last-child { border-bottom: 0; }
.scope__list em { font-style: normal; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.scope--out .scope__list em { color: var(--color-danger-edge); }


/* --------------------------------------------------------------------------
   11) VEHICLES list / header / filterbar
   -------------------------------------------------------------------------- */
.vehicles__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.vehicles__header h1 { font-size: var(--font-size-xl); margin: 0; }
.vehicles__count { color: var(--color-text-muted); margin: 0; font-size: var(--font-size-sm); }
.vehicles__header-right { display: flex; gap: var(--space-3); align-items: center; }

.filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  background: var(--color-surface);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-border);
  margin-bottom: var(--space-4);
}
.filterbar__search {
  flex: 1 1 220px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  background: var(--color-surface);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.filterbar select {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.filterbar__search:focus,
.filterbar select:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--focus-ring); }

/* --------------------------------------------------------------------------
   11.1) FAZ UI-2 — Şahıs/Şirket pill grubu + sahip-bazlı araç grupları
   -------------------------------------------------------------------------- */
.ownership-pills {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
  margin: var(--space-2) 0 var(--space-3);
}
.ownership-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--color-border, #d0d4da);
  background: var(--color-surface, #fff);
  color: var(--color-text, #1b1f24);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: 500;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.ownership-pill:hover {
  background: var(--color-surface-soft, #f4f6f9);
  text-decoration: none;
}
.ownership-pill.is-active {
  background: var(--color-primary, #0b3d91);
  color: var(--color-on-primary, #fff);
  border-color: var(--color-primary, #0b3d91);
}
.ownership-pill:focus-visible {
  outline: 2px solid var(--color-primary, #0b3d91);
  outline-offset: 2px;
}

.vehicles-group { margin-bottom: var(--space-5); }
.vehicles-group__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 2px solid var(--color-border-soft, #eef0f3);
  margin-bottom: var(--space-2);
}
.vehicles-group__title {
  font-size: var(--font-size-lg, 18px);
  font-weight: 600;
  margin: 0;
  color: var(--color-text, #1b1f24);
}
.vehicles-group__meta {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted, #6c727b);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .vehicles-group__header { flex-direction: column; align-items: flex-start; }
  .vehicles-group__title { font-size: 16px; }
}

/* --------------------------------------------------------------------------
   11.2) FAZ CORE-1C — Satış banner + satıldı modal + iptal modal + sold list
   -------------------------------------------------------------------------- */
.btn--danger {
  background: var(--color-danger, #b3261e);
  color: #fff;
  border: 1px solid var(--color-danger, #b3261e);
}
.btn--danger:hover {
  background: #8a1d18;
  border-color: #8a1d18;
}

.sale-banner {
  background: var(--color-warning-bg, #fff3cd);
  border: 1px solid var(--color-warning-border, #ffe28a);
  border-left: 4px solid var(--color-danger, #b3261e);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md, 8px);
  margin: var(--space-2) 0 var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.sale-banner__main {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.sale-banner__title {
  background: var(--color-danger, #b3261e);
  color: #fff;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 12px;
  letter-spacing: 0.05em;
}
.sale-banner__date { font-weight: 600; }
.sale-banner__buyer { color: var(--color-text-muted, #6c727b); }
.sale-banner__doc { color: var(--color-primary, #0b3d91); font-weight: 600; }
.sale-banner__cancelled {
  background: var(--color-text-muted, #6c727b);
  color: #fff;
  padding: 1px 8px;
  border-radius: 4px;
  font-size: 11px;
}

.sale-modal,
.cancel-sale-modal {
  display: inline-block;
  position: relative;
}
.sale-modal > summary,
.cancel-sale-modal > summary {
  list-style: none;
  cursor: pointer;
}
.sale-modal > summary::-webkit-details-marker,
.cancel-sale-modal > summary::-webkit-details-marker { display: none; }
.sale-modal__panel,
.cancel-sale-modal__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--color-surface, #fff);
  color: var(--color-text, #1b1f24);
  border: 1px solid var(--color-border, #d0d4da);
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
  padding: var(--space-3);
  min-width: 360px;
  max-width: calc(100vw - 24px);
  z-index: 90;
}
.sale-modal__title,
.cancel-sale-modal__title { margin: 0 0 var(--space-2); font-size: 18px; }
.sale-modal__lead { font-size: var(--font-size-sm); margin-bottom: var(--space-3); }

.field--checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}
.field--checkbox label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.row--cancelled td { opacity: .55; text-decoration: line-through; }
.row--cancelled td.plate a { text-decoration: line-through; }

@media (max-width: 768px) {
  .sale-modal__panel,
  .cancel-sale-modal__panel {
    position: static;
    box-shadow: none;
    border-radius: var(--radius-md, 8px);
    margin-top: var(--space-2);
    min-width: 0;
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   11.3) FAZ UI-3C — Telefon Rehberi
   -------------------------------------------------------------------------- */
.directory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.directory-card {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #d0d4da);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: box-shadow var(--transition-fast);
}
.directory-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.directory-card--inactive {
  opacity: 0.65;
  background: var(--color-surface-soft, #f4f6f9);
}
.directory-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}
.directory-card__name {
  margin: 0;
  font-size: var(--font-size-md, 16px);
  font-weight: 600;
  color: var(--color-text, #1b1f24);
}
.directory-card__company {
  margin: 0;
  font-size: var(--font-size-sm);
}
.directory-card__contacts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--font-size-sm);
}
.directory-card__contacts a {
  color: var(--color-primary, #0b3d91);
  text-decoration: none;
  word-break: break-all;
}
.directory-card__contacts a:hover {
  text-decoration: underline;
}
.directory-card__note {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted, #6c727b);
  margin: 0;
  font-style: italic;
}
.directory-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border-soft, #eef0f3);
  flex-wrap: wrap;
}
.directory-category-pill {
  background: var(--color-primary-tint, #e6ecf7);
  color: var(--color-primary, #0b3d91);
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.directory-actions {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
}
.directory-toggle-form {
  display: inline;
  margin: 0;
  padding: 0;
}

@media (max-width: 640px) {
  .directory-grid {
    grid-template-columns: 1fr;
  }
  .directory-card__footer {
    flex-direction: column;
    align-items: stretch;
  }
  .directory-actions {
    justify-content: stretch;
  }
  .directory-actions .btn,
  .directory-actions form {
    flex: 1;
  }
  .directory-actions .btn {
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   11.4) FAZ MTV-1C — MTV liste, kart, modal, durum rozeti
   -------------------------------------------------------------------------- */
.finance-filterbar {
  align-items: center;
  flex-wrap: wrap;
}
.finance-filterbar input[type="number"] {
  max-width: 120px;
}
.filterbar__checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

.mtv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.mtv-card {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #d0d4da);
  border-left: 4px solid var(--color-border, #d0d4da);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.mtv-card--paid { border-left-color: var(--color-success, #2e7d32); }
.mtv-card--unpaid { border-left-color: var(--color-warning-text, #7a5a00); }
.mtv-card--cancelled { border-left-color: var(--color-text-muted, #6c727b); opacity: 0.7; }
.mtv-card--draft { border-left-color: var(--color-text-muted, #6c727b); }

.mtv-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-2);
}
.mtv-card__title { margin: 0; font-size: var(--font-size-md, 16px); font-weight: 600; }
.mtv-card__title a { color: var(--color-primary, #0b3d91); text-decoration: none; }
.mtv-card__period { margin: 0; font-size: var(--font-size-sm); }
.mtv-card__details {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px var(--space-2);
  font-size: var(--font-size-sm);
  margin: 0;
}
.mtv-card__details dt { color: var(--color-text-muted, #6c727b); }
.mtv-card__details dd { margin: 0; }
.mtv-amount { font-weight: 600; }
.mtv-date { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mtv-card__note {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted, #6c727b);
  margin: 0;
  font-style: italic;
}
.mtv-actions {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border-soft, #eef0f3);
}

.mtv-status-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--color-surface-soft, #f4f6f9);
  color: var(--color-text, #1b1f24);
}
.mtv-status-pill--paid {
  background: var(--color-success-bg, #e7f4e8);
  color: var(--color-success, #2e7d32);
}
.mtv-status-pill--unpaid {
  background: var(--color-warning-bg, #fff3cd);
  color: var(--color-warning-text, #7a5a00);
}
.mtv-status-pill--cancelled {
  background: var(--color-text-muted, #6c727b);
  color: #fff;
}
.mtv-status-pill--overdue {
  background: var(--color-danger, #b3261e);
  color: #fff;
  margin-left: 6px;
}
.mtv-status-pill--draft {
  background: var(--color-border, #d0d4da);
  color: var(--color-text, #1b1f24);
}

.mtv-payment-modal,
.mtv-cancel-modal {
  display: inline-block;
  position: relative;
}
.mtv-payment-modal > summary,
.mtv-cancel-modal > summary {
  list-style: none;
  cursor: pointer;
}
.mtv-payment-modal > summary::-webkit-details-marker,
.mtv-cancel-modal > summary::-webkit-details-marker { display: none; }
.mtv-payment-modal__panel,
.mtv-cancel-modal__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--color-surface, #fff);
  color: var(--color-text, #1b1f24);
  border: 1px solid var(--color-border, #d0d4da);
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
  padding: var(--space-3);
  min-width: 320px;
  max-width: calc(100vw - 24px);
  z-index: 90;
}
.mtv-payment-modal__title,
.mtv-cancel-modal__title { margin: 0 0 var(--space-2); font-size: 16px; }

@media (max-width: 768px) {
  .mtv-payment-modal__panel,
  .mtv-cancel-modal__panel {
    position: static;
    box-shadow: none;
    min-width: 0;
    width: 100%;
    margin-top: var(--space-2);
  }
}

@media (max-width: 640px) {
  .mtv-grid {
    grid-template-columns: 1fr;
  }
  .mtv-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .mtv-actions .btn {
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   11.5) FAZ MTV-1D — Dashboard MTV kartı + Vehicle detail MTV bölümü
   -------------------------------------------------------------------------- */
.dashboard-mtv {
  margin-bottom: var(--space-5);
}
.dashboard-mtv__counts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.dashboard-mtv-list {
  margin-bottom: var(--space-3);
}
.dashboard-mtv-list h3 {
  font-size: var(--font-size-md, 16px);
  margin: var(--space-2) 0;
}
.dashboard-mtv-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dashboard-mtv-list li {
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border-soft, #eef0f3);
  border-radius: var(--radius-sm, 4px);
  font-size: var(--font-size-sm);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.dashboard-mtv-list--overdue li {
  border-left: 3px solid var(--color-danger, #b3261e);
}
.dashboard-mtv-list--upcoming li {
  border-left: 3px solid var(--color-warning-text, #7a5a00);
}
.dashboard-mtv__link {
  margin-top: var(--space-3);
}
.mtv-empty-state {
  font-style: italic;
  padding: var(--space-3);
}

.vehicle-detail-mtv .vd-section__head-actions {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
}
.vehicle-detail-mtv-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.vehicle-detail-mtv-row--cancelled {
  opacity: 0.6;
  text-decoration: line-through;
}
.vehicle-detail-mtv-row--cancelled .mtv-status-pill {
  text-decoration: none;
}
.btn--small {
  padding: 4px 10px;
  font-size: 12px;
}

@media (max-width: 640px) {
  .dashboard-mtv__counts {
    grid-template-columns: 1fr;
  }
  .vehicle-detail-mtv-row {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* --------------------------------------------------------------------------
   12) TABLES (vehicles__table + vd-table)
   -------------------------------------------------------------------------- */
.vehicles__table-wrap {
  overflow-x: auto;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-border);
}
.vehicles__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  min-width: 720px;
}
.vehicles__table caption {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-muted);
  font-weight: 500;
}
.vehicles__table th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-soft);
  font-weight: 600;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-caps);
}
.vehicles__table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.vehicles__table tbody tr { transition: background var(--transition-fast); }
.vehicles__table tbody tr:hover { background: var(--color-surface-soft); }
.vehicles__table tr:last-child td { border-bottom: 0; }
.vehicles__table .plate {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--color-primary);
  white-space: nowrap;
}
.vehicles__table .plate a { color: var(--color-primary); text-decoration: none; }
.vehicles__table .plate a:hover { text-decoration: underline; }

/* Faz 9D — Mobilde tablo → kart layout (data-label attr ile)
   Desktop: normal tablo (yukarıdaki kurallar). Mobil ≤640px: row = card. */
@media (max-width: 640px) {
  .vehicles__table--responsive,
  .vd-table,
  .erp-table--cards {
    min-width: 0;
    display: block;
  }
  .vehicles__table--responsive thead,
  .vd-table thead,
  .erp-table--cards thead {
    /* Header'ı görsel olarak gizle ama screen reader için sakla. */
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .vehicles__table--responsive tbody,
  .vd-table tbody,
  .erp-table--cards tbody {
    display: block;
  }
  .vehicles__table--responsive tr,
  .vd-table tr,
  .erp-table--cards tr {
    display: block;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    margin-bottom: var(--space-3);
    box-shadow: var(--shadow-xs);
  }
  .vehicles__table--responsive tr:hover,
  .vd-table tr:hover,
  .erp-table--cards tr:hover { background: var(--color-surface); }
  .vehicles__table--responsive td,
  .vd-table td,
  .erp-table--cards td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-1) 0;
    border: 0;
    border-bottom: 1px dashed var(--color-border);
    text-align: right;
  }
  .vehicles__table--responsive td:last-child,
  .vd-table td:last-child,
  .erp-table--cards td:last-child { border-bottom: 0; }
  .vehicles__table--responsive td::before,
  .vd-table td::before,
  .erp-table--cards td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-caps);
    flex: 0 0 auto;
  }
  .vehicles__table--responsive td.plate,
  .vehicles__table--responsive td:first-child {
    font-size: var(--font-size-base);
  }
  /* Mobilde tablo wrap'ın overflow-x'i ve min-width'i nötrlenir. */
  .vehicles__table-wrap { overflow-x: visible; box-shadow: none; border: 0; background: transparent; }

  /* MOBIL-1 — kart görünümünde değer, etiketin HEMEN YANINDA başlasın.
     Miras alınan kart kuralı değeri sağa yapıştırıyordu; sebep İKİ katmanlı:
       1) td { justify-content: space-between }  → boşluk ortaya, değer sağa
       2) td { text-align: right }               → metin kutu içinde sağa
     İkisi de burada, YALNIZ .erp-table--cards altında sıfırlanıyor.
     Paylaşılan .vehicles__table--responsive / .vd-table kuralları ELLENMEDİ;
     masaüstü zaten bu media bloğunun dışında. */
  .erp-table--cards td {
    justify-content: flex-start;
    text-align: left;
    gap: var(--space-2);
  }
  /* Etiket sabit bir taban genişlik alır → değerler tek kolonda hizalanır.
     9ch ölçümle seçildi: 19 etiketin 17'si ≤9 karakter (medyan 5).
     Uzun ikisi ("Marka / Model", "Şirket / Poliçe No") doğal olarak taşar. */
  .erp-table--cards td::before {
    min-width: 9ch;
  }
  /* Değer, etiketten sonra kalan alanı doldurur ve soldan başlar. */
  .erp-table--cards td > * {
    text-align: left;
  }
  /* Aksiyon hücresi: butonlar sola akar, 44px dokunma hedefi korunur. */
  .erp-table--cards td .btn,
  .erp-table--cards td .erp-actions {
    margin-left: 0;
  }
}


/* --------------------------------------------------------------------------
   13) BADGES (status pills)
   -------------------------------------------------------------------------- */
.badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  border: 1px solid transparent;
}
/* expiry-based color codes */
.badge--ok       { background: var(--color-success-bg);   color: var(--color-success);   border-color: rgba(21, 87, 36, .15); }
.badge--warn     { background: var(--color-warning-bg);   color: var(--color-warning);   border-color: rgba(128, 97, 0, .18); }
.badge--critical { background: var(--color-critical-bg);  color: var(--color-critical);  border-color: rgba(138, 60, 10, .15); }
.badge--expired  { background: var(--color-danger-bg);    color: var(--color-danger);    border-color: rgba(122, 30, 30, .15); }
.badge--unknown  { background: var(--color-info-bg);      color: var(--color-info);      border-color: rgba(58, 70, 100, .12); }

/* Faz A1-mini: ince aciliyet skalası (1day / 3days / 7days)
   Templatetags `expiry_class` filtresi: <1 gün → 1day, 2-3 → 3days, 4-7 → 7days */
.badge--1day     { background: var(--color-danger-bg);    color: var(--color-danger);    border-color: rgba(122, 30, 30, .25); font-weight: 600; }
.badge--3days    { background: var(--color-critical-bg);  color: var(--color-critical);  border-color: rgba(138, 60, 10, .22); font-weight: 600; }
.badge--7days    { background: var(--color-warning-strong-bg); color: var(--color-warning-strong-text); border-color: rgba(110, 61, 0, .18); }
/* Eski 'critical' (0-7) bucket'ı geriye dönük uyumluluk için CSS'te kalıyor;
   artık expiry_class buna dönmüyor — yukarıdaki üç ince variant kullanılır. */
/* status pill aliases */
.badge--active   { background: var(--color-success-bg);   color: var(--color-success); }
.badge--sold     { background: var(--color-danger-bg);    color: var(--color-danger); }
.badge--passive  { background: var(--color-info-bg);      color: var(--color-info); }


/* --------------------------------------------------------------------------
   14) UTILITIES + EMPTY STATE
   -------------------------------------------------------------------------- */
.muted { color: var(--color-text-muted); }   /* Faz 6D AA-uyumlu kontrast */

.empty {
  background: var(--color-surface);
  padding: var(--space-7);
  text-align: center;
  border-radius: var(--radius-lg);
  color: var(--color-text-muted);
  box-shadow: var(--shadow-card);
  border: 1px dashed var(--color-border-strong);
  font-size: var(--font-size-sm);
}
.empty--inline {
  padding: var(--space-4);
  margin: 0;
  border-style: dashed;
  background: var(--color-surface-soft);
}


/* --------------------------------------------------------------------------
   15) SETTINGS PANEL + INFO BOX
   -------------------------------------------------------------------------- */
.settings-page__header { margin-bottom: var(--space-4); }
.settings-page__header h1 { font-size: var(--font-size-xl); margin: 0 0 var(--space-1); }

.info-box {
  background: var(--color-warning-soft);
  border: 1px solid var(--color-warning-edge);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text);
}
.info-box code {
  background: rgba(0, 0, 0, .06);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 12px;
}
.info-box--muted {
  background: var(--color-surface-soft);
  border-color: var(--color-border);
  color: var(--color-info);
}

.field--inline { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.field--inline label { margin: 0; }
.field--inline input[type="checkbox"] { width: 20px; height: 20px; min-height: 20px; padding: 0; }

.rule-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
@media (min-width: 720px) { .rule-grid { grid-template-columns: repeat(3, 1fr); } }
.rule-card {
  background: var(--color-surface-soft);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}
.rule-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
  gap: var(--space-2);
  flex-wrap: wrap;
}
.rule-card__head h3 { margin: 0; font-size: var(--font-size-md); }

.meta-info {
  background: var(--color-surface);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-border);
  margin-top: var(--space-4);
}
.meta-info h2 { font-size: var(--font-size-lg); margin: 0 0 var(--space-3); }


/* --------------------------------------------------------------------------
   16) NOTIFICATION HISTORY
   -------------------------------------------------------------------------- */
.cards--counts { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 600px) { .cards--counts { grid-template-columns: repeat(5, 1fr); } }
.card--mini h2 { text-transform: uppercase; letter-spacing: var(--letter-spacing-caps); font-size: var(--font-size-xs); }
.card--mini .card__metric { font-size: var(--font-size-xl); }

.history-page { /* container only */ }
.history__preview { max-width: 360px; }

/* Status badges (NotificationLog) */
.badge--status-pending   { background: var(--color-info-bg);    color: var(--color-info); }
.badge--status-sent      { background: var(--color-success-bg); color: var(--color-success); }
.badge--status-failed    { background: var(--color-danger-bg);  color: var(--color-danger); }
.badge--status-skipped   { background: var(--color-warning-bg); color: var(--color-warning); }
.badge--status-simulated { background: var(--color-violet-bg);  color: var(--color-violet); }

.card--status-pending   .card__metric { color: var(--color-info); }
.card--status-sent      .card__metric { color: var(--color-success); }
.card--status-failed    .card__metric { color: var(--color-danger); }
.card--status-skipped   .card__metric { color: var(--color-warning); }
.card--status-simulated .card__metric { color: var(--color-violet); }


/* --------------------------------------------------------------------------
   17) IMPORT REVIEW row coloring
   -------------------------------------------------------------------------- */
.row-out-of-scope td   { background: var(--color-surface-alt); color: var(--color-text-muted); }
.row-needs-review td   { background: var(--color-warning-soft); }
.row-high td           { background: var(--color-danger-bg); }
.row-high td:first-child { border-left: 3px solid var(--color-danger); }
.import-review .vehicles__table td { vertical-align: top; }
.import-review .vehicles__table small { font-size: var(--font-size-xs); word-break: break-word; }


/* --------------------------------------------------------------------------
   18) TELEGRAM STATUS panel
   -------------------------------------------------------------------------- */
.telegram-status {
  background: var(--color-surface);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-border);
  margin-bottom: var(--space-4);
}
.telegram-status h2 { margin: 0 0 var(--space-3); font-size: var(--font-size-lg); }
.test-notification-form {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px dashed var(--color-border);
}

/* Faz 9E — Telegram durum başlık satırı (büyük, sade) */
.status-headline {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-md);
}
.status-headline--ok    { background: var(--color-success-bg); color: var(--color-success); }
.status-headline--warn  { background: var(--color-warning-bg); color: var(--color-warning); }
.status-headline strong { font-weight: 600; }

/* Faz 9E — Teknik bilgi accordion (uzman modu, opsiyonel) */
.technical-note {
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0;
  margin: var(--space-3) 0 var(--space-4);
}
.technical-note > summary {
  cursor: pointer;
  padding: var(--space-3) var(--space-4);
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  list-style: none;
  user-select: none;
}
.technical-note > summary::-webkit-details-marker { display: none; }
.technical-note > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: var(--space-2);
  transition: transform var(--transition-fast);
  color: var(--color-text-subtle);
}
.technical-note[open] > summary::before { transform: rotate(90deg); }
.technical-note[open] > summary { border-bottom: 1px dashed var(--color-border); }
.technical-note > *:not(summary) {
  padding: var(--space-3) var(--space-4);
}
.technical-note > .cards { padding: var(--space-3) var(--space-4); margin-bottom: 0; }
.technical-note p { margin: 0 0 var(--space-3); }
.technical-note p:last-child { margin-bottom: 0; }
.technical-note > summary:focus-visible {
  outline: 2px solid var(--focus-color);
  outline-offset: -2px;
  border-radius: var(--radius-md);
}

/* Faz 9E — Status etiket açıklamaları (review_edit_list alt legend) */
.status-legend {
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-top: var(--space-5);
}
.status-legend__title {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-caps);
}
.status-legend__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
}
@media (min-width: 720px) {
  .status-legend__list { grid-template-columns: 1fr 1fr; }
}
.status-legend__list li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
}

/* Faz 9E — Özet status satırı (review_summary "Yayına hazır mı") */
.summary-status {
  margin: var(--space-4) 0;
  font-size: var(--font-size-md);
}
.summary-status .badge { margin: 0 var(--space-2); }

/* Faz 9E — filterbar checkbox label */
.filterbar__check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  cursor: pointer;
  padding: var(--space-2) var(--space-3);
}
.filterbar__check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}


/* --------------------------------------------------------------------------
   19) DASHBOARD section title + upcoming list
   -------------------------------------------------------------------------- */
.dashboard__section-title {
  margin: var(--space-5) 0 var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-caps);
}
.card--overdue .card__metric { color: var(--color-danger); }

.upcoming {
  background: var(--color-surface);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-border);
  margin-bottom: var(--space-3);
}
.upcoming h3 { margin: 0 0 var(--space-3); font-size: var(--font-size-md); }
.upcoming--overdue h3 { color: var(--color-danger); }


/* --------------------------------------------------------------------------
   20) VEHICLE DETAIL
   -------------------------------------------------------------------------- */
.vd-back {
  display: inline-block;
  margin-bottom: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.vd-back:hover { color: var(--color-primary); text-decoration: none; }

.vd-header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-start;
  justify-content: space-between;
  background: var(--color-surface);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-border);
  margin-bottom: var(--space-3);
}
.vd-header__main { flex: 1 1 220px; }
.vd-header__owner { margin: var(--space-1) 0; color: var(--color-text-muted); }
.plate--big {
  font-family: var(--font-mono);
  font-size: var(--font-size-2xl);
  color: var(--color-primary);
  margin: var(--space-1) 0;
  letter-spacing: 1px;
}
.vd-header__actions { display: flex; gap: var(--space-2); }

.vd-nav {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--color-surface);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  overflow-x: auto;
}
.vd-nav a {
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  padding: var(--space-1) var(--space-1);
  white-space: nowrap;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}
.vd-nav a:hover { background: var(--color-primary-soft); text-decoration: none; }

.vd-section {
  background: var(--color-surface);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-border);
  margin-bottom: var(--space-4);
  scroll-margin-top: 70px;
}
.vd-section h2 { margin: 0 0 var(--space-3); font-size: var(--font-size-lg); }
.vd-section__sub { margin: var(--space-4) 0 var(--space-2); font-size: var(--font-size-md); color: var(--color-text); }

/* Faz 9D — Yaklaşan/geçmiş bölümünü görsel olarak öne çıkar */
.vd-section--priority {
  background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface-soft) 100%);
  border-left: 3px solid var(--color-primary);
}
.vd-nav__priority {
  font-weight: 600;
  color: var(--color-primary) !important;
}
.vd-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.vd-section__head h2 { margin: 0; }

.vd-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1) var(--space-3);
  margin: 0;
}
@media (min-width: 600px) { .vd-grid { grid-template-columns: 180px 1fr; } }
.vd-grid dt {
  color: var(--color-text-muted);
  font-weight: 600;
  padding: var(--space-2) 0;
  border-bottom: 1px dashed var(--color-border);
  font-size: var(--font-size-sm);
}
.vd-grid dd {
  margin: 0;
  padding: var(--space-2) 0;
  border-bottom: 1px dashed var(--color-border);
}
.vd-grid dd code {
  background: var(--color-surface-alt);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
}

.vd-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.vd-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-soft);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}
.vd-list__title { font-weight: 600; }
.vd-list__title a { color: var(--color-primary); text-decoration: none; }
.vd-list__title a:hover { text-decoration: underline; }
.vd-list__meta { color: var(--color-text-muted); font-size: var(--font-size-sm); flex: 1 1 auto; }

.vd-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.vd-table th, .vd-table td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
.vd-table th {
  background: var(--color-surface-soft);
  font-weight: 600;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-caps);
  color: var(--color-text-muted);
}
.vd-table tbody tr:last-child td { border-bottom: 0; }


/* --------------------------------------------------------------------------
   21) FORMS (mobil dostu — 16px input, 44px hedef yükseklik)
   -------------------------------------------------------------------------- */
.form-page { max-width: 760px; margin: 0 auto; }
.form-page__header { margin-bottom: var(--space-4); }
.form-page__header h1 { font-size: var(--font-size-xl); margin: var(--space-1) 0 var(--space-2); }
.form-page__lead {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: 1.6;
  max-width: 640px;
}

.model-form {
  background: var(--color-surface);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-border);
}
.model-form fieldset { border: 0; padding: 0; margin: 0 0 var(--space-5); }
.model-form legend {
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-caps);
  margin-bottom: var(--space-2);
}
.model-form .field { margin-bottom: var(--space-3); }
.model-form .field label {
  display: block;
  font-weight: 600;
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-1);
}
.model-form .field input[type="text"],
.model-form .field input[type="email"],
.model-form .field input[type="number"],
.model-form .field input[type="date"],
.model-form .field input[type="search"],
.model-form .field select,
.model-form .field textarea,
.model-form .field input[type="file"] {
  width: 100%;
  font-size: var(--font-size-base); /* 16px iOS zoom önleme */
  padding: var(--space-3);
  min-height: 44px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  box-sizing: border-box;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.model-form .field textarea { min-height: 80px; resize: vertical; }
.model-form .field input:focus,
.model-form .field select:focus,
.model-form .field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}
.model-form .help {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  margin: var(--space-1) 0 0;
}
/* Faz 9D — fieldset altı vurgulu help (KVKK/önemli açıklama) */
.model-form .help--strong {
  background: var(--color-warning-soft);
  border: 1px solid var(--color-warning-edge);
  color: var(--color-text);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-sm);
}
.model-form .help--strong strong { color: var(--color-warning); }
/* Faz 9D — zorunlu alan yıldız stili */
.field__required {
  color: var(--color-danger);
  font-weight: 700;
  margin-left: 2px;
}
.model-form .errorlist {
  color: var(--color-danger);
  font-size: var(--font-size-xs);
  margin: var(--space-1) 0 0;
  padding-left: var(--space-4);
}
.form-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
  flex-wrap: wrap;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.form-actions .btn {
  min-height: 44px;
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}
/* Faz 9D — TR std: İptal sol, primary aksiyon sağ. Mobilde sticky alt CTA hissi. */
.form-actions--reverse {
  justify-content: flex-end;
}
.form-actions--reverse .btn--primary {
  order: 2;
}
.form-actions--reverse .btn--ghost-light {
  order: 1;
  margin-right: auto;
}
@media (max-width: 600px) {
  .form-actions--reverse {
    flex-direction: column;
  }
  .form-actions--reverse .btn { width: 100%; }
  .form-actions--reverse .btn--ghost-light { margin-right: 0; }
  .form-actions--reverse .btn--primary { order: 1; }
  .form-actions--reverse .btn--ghost-light { order: 2; }
}

/* mobil tweaks */
@media (max-width: 600px) {
  .vd-header { padding: var(--space-3); }
  .plate--big { font-size: var(--font-size-xl); }
  .vd-section { padding: var(--space-3); }
  .card { padding: var(--space-4); }
  .model-form { padding: var(--space-4); }
}


/* --------------------------------------------------------------------------
   22) Faz 6D — accessibility polish
   sr-only, :focus-visible outline, errorlist styling, reduced-motion
   (Faz 9B'de korundu — token sistemine bağlandı)
   -------------------------------------------------------------------------- */

/* Visually hidden but available to screen readers (used for filterbar labels). */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Visible focus indicator for keyboard users — design-aligned with Kılıç blue. */
.btn:focus-visible,
a.card:focus-visible,
.topnav a:focus-visible,
.vd-nav a:focus-visible,
.brand:focus-visible,
.vd-back:focus-visible {
  outline: 2px solid var(--focus-color);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}
.topnav a:focus-visible { outline-color: var(--focus-color-on-dark); }
.brand:focus-visible    { outline-color: var(--focus-color-on-dark); }

/* Inputs have a focus box-shadow; outline-offset for parity. */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible,
.filterbar__search:focus-visible,
.filterbar select:focus-visible,
.filterbar input:focus-visible,
.model-form .field input:focus-visible,
.model-form .field select:focus-visible,
.model-form .field textarea:focus-visible {
  outline: 2px solid var(--focus-color);
  outline-offset: 1px;
}

/* errorlist: visible block when role="alert" set on template side */
.errorlist[role="alert"],
.form-error[role="alert"] {
  /* selector exists for style-consistency hooks — no extra paint */
}

/* Respect prefers-reduced-motion for transitions/transforms. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  a.card:hover { transform: none; }
}


/* --------------------------------------------------------------------------
   23) Mobile hamburger — checkbox hack (Faz 9C-pre-fix-2, no-JS)
   --------------------------------------------------------------------------
   Tasarım kararı:
   - Faz 6F'te <details>/<summary> kullanılıyordu, ama Chrome'da <details>
     kapalıyken summary dışı children render edilmiyor (HTML5 native davranış,
     `display: contents` ile bypass edilemiyor). Faz 9C-pre-fix-2'de checkbox
     hack ile değiştirildi.
   - Yapı: <input type="checkbox" id="topnav-menu-toggle"> + <label> + <nav>
   - Desktop ≥600px: label gizli, nav koşulsuz flex (linkler her zaman görünür).
   - Mobil <600px: label hamburger butonu olarak görünür; nav default kapalı,
     checkbox checked olunca dropdown panel açılır.
   - No-JS: tamamen CSS, JavaScript gerek yok.
   - A11y: <label for> semantic bağlantısı, sr-only checkbox, aria-controls.
   -------------------------------------------------------------------------- */

/* Checkbox kendisi her zaman görünmez (sr-only). */
.topnav-toggle__checkbox { /* sr-only sınıfı zaten visually hidden */ }

/* Hamburger label: desktop default gizli, mobil görünür. */
.topnav-toggle__summary {
  display: none;
  margin-left: auto;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

@media (max-width: 599px) {
  /* Mobil hamburger butonu */
  .topnav-toggle__summary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 44px;
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    color: var(--color-on-primary);
    font-size: var(--font-size-md);
    border: 1px solid var(--color-primary-tint);
    border-radius: var(--radius-md);
    background: transparent;
    transition: background var(--transition-fast), border-color var(--transition-fast);
  }
  .topnav-toggle__summary:hover {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .55);
  }
  .topnav-toggle__icon { font-size: 20px; line-height: 1; }
  .topnav-toggle__label { font-weight: 600; }

  /* Mobil: nav default kapalı; checked olunca dropdown panel görünür. */
  .topnav-toggle__checkbox ~ .topnav { display: none; }
  .topnav-toggle__checkbox:checked ~ .topnav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    position: absolute;
    right: var(--space-3);
    top: calc(100% - var(--space-1));
    background: var(--color-primary);
    padding: var(--space-2);
    min-width: 240px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 11;
  }
  .topnav-toggle__checkbox:checked ~ .topnav a,
  .topnav-toggle__checkbox:checked ~ .topnav .topnav__user,
  .topnav-toggle__checkbox:checked ~ .topnav .topnav__logout {
    width: 100%;
    min-height: 44px;
    padding: var(--space-3);
    display: flex;
    align-items: center;
    border-radius: var(--radius-sm);
  }
  .topnav-toggle__checkbox:checked ~ .topnav a:hover {
    background: rgba(255, 255, 255, .08);
    text-decoration: none;
  }
  .topnav-toggle__checkbox:checked ~ .topnav .topnav__user {
    border-top: 1px dashed rgba(255, 255, 255, .2);
    margin-top: var(--space-1);
    padding-top: var(--space-3);
    color: var(--color-primary-tint);
  }
  .topnav-toggle__checkbox:checked ~ .topnav .topnav__logout button {
    width: 100%;
    justify-content: center;
  }
}

/* Focus indicator: klavye kullanıcısı checkbox'a Tab atınca, label outline gösterir.
   sr-only checkbox direkt görünmez ama :focus-visible'i label'a aktarmak için
   adjacent sibling selector kullanıyoruz (label ondan ÖNCE geldiği için ~+: yok,
   ama input :focus-visible ise label'ı görsel vurgulayabiliriz CSS sibling ile). */
.topnav-toggle__checkbox:focus-visible + .topnav-toggle__summary {
  outline: 2px solid var(--focus-color-on-dark);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}


/* --------------------------------------------------------------------------
   24) Faz 9F — Mobile final polish + a11y skip-link
   - Skip-to-content link (a11y)
   - iOS zoom-safe input font-size (≥16px) on small screens
   - iPhone SE / 375px breakpoint fine-tune
   - empty--hero / dashboard__hero / quick-action mobile spacing
   - Topbar mobile: brand truncation güvencesi
   -------------------------------------------------------------------------- */

/* Skip-to-content: focus alınca görünür, sayfanın en üstünde */
.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -40px;
  z-index: 100;
  background: var(--color-primary);
  color: var(--color-on-primary);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--font-size-sm);
  text-decoration: none;
  transition: top var(--transition-fast);
}
.skip-link:focus,
.skip-link:focus-visible {
  top: var(--space-2);
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  color: var(--color-on-primary);
  text-decoration: none;
}
.main:focus { outline: none; }
.main:focus-visible { outline: none; }

/* iOS zoom-safe: telefonda input'a tıklayınca ekran zoom yapmasın diye ≥16px */
@media (max-width: 599px) {
  .field input,
  .field select,
  .field textarea,
  .filterbar__search,
  .filterbar select,
  .filterbar input[type="date"],
  .model-form .field input,
  .model-form .field select,
  .model-form .field textarea {
    font-size: var(--font-size-base); /* 16px — iOS zoom önler */
  }
}

/* Mobil genel: empty--hero ve quick-action touch hedefi */
@media (max-width: 599px) {
  .empty--hero { padding: var(--space-6) var(--space-4); }
  .quick-action { min-height: 56px; }
}

/* iPhone SE / küçük telefon (≤380px) — daha sıkı spacing */
@media (max-width: 380px) {
  .container { padding: 0 var(--space-3); }

  /* Hero — küçük ekranda daha kompakt, ama okunaklı */
  .dashboard__hero {
    padding: var(--space-4) var(--space-3);
    border-radius: var(--radius-md);
  }
  .dashboard__hero h1 { font-size: var(--font-size-lg); }

  /* Boş durum hero — küçük ekranda dikey eksenden yer kazan */
  .empty--hero { padding: var(--space-5) var(--space-3); }
  .empty--hero strong { font-size: var(--font-size-md); }

  /* Hızlı eylemler — küçük ekranda padding daralt, touch hedefini koru */
  .quick-action {
    padding: var(--space-3) var(--space-4);
    min-height: 56px;
  }

  /* Auth card — küçük ekranda daha az boşluk, formlar nefes alsın */
  .auth-card {
    margin: var(--space-3) auto;
    padding: var(--space-4);
  }
  .auth-card__title { font-size: var(--font-size-lg); }

  /* Topbar — brand isim çok uzunsa taşma olmasın */
  .brand__name { font-size: var(--font-size-sm); }
  .topbar__inner { padding: var(--space-2) var(--space-3); gap: var(--space-2); }
}

/* Yatay scroll önleme — uzun kelimeler/kod taşmasın */
.container { overflow-x: clip; }

/* Tablo mobil kart — Faz 9D'de eklendi; burada yalnızca dokunma alanı garantisi */
@media (max-width: 640px) {
  .vehicles__table--responsive td a {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
  }
}

/* ==========================================================================
   Faz FINE-1B — Trafik Cezaları stilleri
   MTV stillerinin extension'ı; ayrı bir görsel dil kurmaz, sadece risk
   kategorilerine renk kodlaması ekler.
   ========================================================================== */

.fine-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 16px 0 20px;
}

.fine-summary {
  border-left: 4px solid transparent;
}
.fine-summary--critical { border-left-color: #c0392b; }
.fine-summary--warning  { border-left-color: #e67e22; }
.fine-summary--horizon  { border-left-color: #f1c40f; }
.fine-summary--lost     { border-left-color: #555; }
.fine-summary--total    { border-left-color: #0b3d91; }

.fine-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}
.fine-chip {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 20px;
  font-size: 0.85rem;
  text-decoration: none;
  color: #333;
  background: #fff;
}
.fine-chip:hover { background: #f5f5f5; }
.fine-chip.is-active {
  background: #0b3d91;
  color: #fff;
  border-color: #0b3d91;
}
.fine-chip--critical.is-active { background: #c0392b; border-color: #c0392b; }
.fine-chip--warning.is-active  { background: #e67e22; border-color: #e67e22; }
.fine-chip--lost.is-active     { background: #555; border-color: #555; }
.fine-chip--cancelled.is-active{ background: #888; border-color: #888; }

/* Discount rozeti renkleri (mtv-status-pill üzerine binerek) */
.fine-discount-pill { font-weight: 600; }
.fine-discount-pill--critical { background: #c0392b; color: #fff; }
.fine-discount-pill--warning  { background: #e67e22; color: #fff; }
.fine-discount-pill--horizon  { background: #f1c40f; color: #333; }
.fine-discount-pill--lost     { background: #555;    color: #fff; }
.fine-discount-pill--paid     { background: #27ae60; color: #fff; }
.fine-discount-pill--cancelled{ background: #aaa;    color: #fff; }

/* Detay kartı sol-kenar renk göstergesi */
.fine-detail-card {
  border-left: 6px solid #ddd;
  background: #fff;
  padding: 16px 20px;
  border-radius: 6px;
  margin: 16px 0;
}
.fine-detail-card--critical { border-left-color: #c0392b; }
.fine-detail-card--warning  { border-left-color: #e67e22; }
.fine-detail-card--horizon  { border-left-color: #f1c40f; }
.fine-detail-card--lost     { border-left-color: #555; }
.fine-detail-card--paid     { border-left-color: #27ae60; }
.fine-detail-card--cancelled{ border-left-color: #aaa; }

.fine-detail-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.fine-discount-banner {
  margin: 12px 0;
  padding: 10px 14px;
  border-radius: 4px;
  font-weight: 500;
}
.fine-discount-banner--critical { background: #fdecea; color: #922b21; }
.fine-discount-banner--warning  { background: #fdf2e6; color: #a04000; }
.fine-discount-banner--horizon  { background: #fef9e7; color: #7d6608; }
.fine-discount-banner--lost     { background: #eee;    color: #444; }
.fine-discount-banner--paid     { background: #e8f8f0; color: #1e8449; }
.fine-discount-banner--cancelled{ background: #f0f0f0; color: #555; }

.fine-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px 16px;
  margin: 12px 0;
}
.fine-detail-grid > div { display: flex; flex-direction: column; }
.fine-detail-grid dt { font-size: 0.78rem; color: #777; text-transform: uppercase; }
.fine-detail-grid dd { margin: 0; font-weight: 500; }

.fine-detail-card__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.fine-attachment-section { margin-top: 24px; }
.fine-attachment-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fine-attachment-item {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 8px 10px;
  background: #fafafa;
  border-radius: 4px;
}

/* Card border per status (extends existing .mtv-card) */
.fine-card--disc-critical { border-top: 3px solid #c0392b; }
.fine-card--disc-warning  { border-top: 3px solid #e67e22; }
.fine-card--disc-lost     { border-top: 3px solid #555; }

@media (max-width: 600px) {
  .fine-summary-grid { grid-template-columns: 1fr 1fr; }
  .fine-detail-grid { grid-template-columns: 1fr; }
  .fine-chips { gap: 6px; }
  .fine-chip { font-size: 0.78rem; padding: 4px 10px; }
}

/* Action modal (CSS-only details) — payment/cancel/attachment formları */
.action-modal { display: inline-block; }
.action-modal > summary { cursor: pointer; list-style: none; }
.action-modal > summary::-webkit-details-marker { display: none; }
.action-modal__panel {
  margin-top: 8px;
  padding: 14px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  min-width: 280px;
  max-width: 480px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.action-modal__panel h3 { margin-top: 0; font-size: 1rem; }
.action-modal__form .form-actions { margin-top: 8px; }
.action-modal--danger .action-modal__panel { border-color: #c0392b; }

/* GECE-1 PAKET-C1 (UX-C4): .btn--danger burada İKİNCİ kez tanımlıydı ve
   hardcoded #c0392b ile satır 827'deki token'lı (--color-danger) tanımı
   eziyordu → tek kaynak kalsın diye kaldırıldı. Kırmızı artık yalnız
   :827'deki var(--color-danger, #b3261e) tanımından gelir. */

/* ==========================================================================
   Faz AUDIT-UI-1B — İşlem Geçmişi UI stilleri (dark mode yok)
   ========================================================================== */

.audit-page { padding: 0; }

.audit-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 16px 0 18px;
}
.audit-summary-card {
  border-left: 4px solid #ddd;
}
.audit-summary-card--critical { border-left-color: #c0392b; }

.audit-filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 4px;
}
.audit-filterbar input,
.audit-filterbar select {
  min-height: 36px;
}

.audit-default-hint {
  font-size: 0.85rem;
  margin: 4px 0 12px;
}

.audit-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 16px;
  background: #fff;
}
.audit-table th,
.audit-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #eee;
  text-align: left;
  vertical-align: top;
  font-size: 0.92rem;
}
.audit-table th {
  background: #f7f9fc;
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #333;
}
.audit-row:hover { background: #fbfcff; }

.audit-action-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 600;
  background: #eee;
  color: #333;
}
.audit-action-pill--create  { background: #2980b9; color: #fff; }
.audit-action-pill--update  { background: #95a5a6; color: #fff; }
.audit-action-pill--pay     { background: #27ae60; color: #fff; }
.audit-action-pill--sell    { background: #1e8449; color: #fff; }
.audit-action-pill--cancel  { background: #e67e22; color: #fff; }
.audit-action-pill--delete  { background: #c0392b; color: #fff; }
.audit-action-pill--login   { background: #8e44ad; color: #fff; }
.audit-action-pill--logout  { background: #6c3483; color: #fff; }
.audit-action-pill--notify  { background: #5dade2; color: #fff; }
.audit-action-pill--export  { background: #0b3d91; color: #fff; }
.audit-action-pill--other   { background: #bdc3c7; color: #333; }

.audit-drawer { display: inline-block; }
.audit-drawer > summary { cursor: pointer; list-style: none; }
.audit-drawer > summary::-webkit-details-marker { display: none; }
.audit-drawer-body {
  margin-top: 6px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  min-width: 280px;
  max-width: 520px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.audit-drawer-body dl {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 4px 10px;
  margin: 0;
  font-size: 0.88rem;
}
.audit-drawer-body dt {
  color: #777;
  font-weight: 500;
}
.audit-drawer-body dd { margin: 0; }

.audit-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
}

/* Mobile list — table'ı 720px altında gizle, kart görünümünü göster */
.audit-mobile-list { display: none; list-style: none; padding: 0; margin: 0; }
.audit-mobile-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 12px 14px;
  margin: 0 0 10px;
}
.audit-mobile-card header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.audit-mobile-card__line { margin: 4px 0; font-size: 0.92rem; }
.audit-mobile-card__desc { margin: 4px 0; font-size: 0.88rem; color: #444; }

@media (max-width: 720px) {
  .audit-table { display: none; }
  .audit-mobile-list { display: block; }
  .audit-mobile-list[aria-hidden="true"] { display: block; }
  .audit-summary-grid { grid-template-columns: 1fr 1fr; }
  .audit-drawer-body dl { grid-template-columns: 90px 1fr; }
}

/* ==========================================================================
   Faz USER-MGMT-1B — Kullanıcı Yönetimi + Erişim Kontrol Merkezi (dark mode yok)
   ========================================================================== */

.mgmt-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 16px 0 18px;
}
.mgmt-summary-card { border-left: 4px solid #ddd; }
.mgmt-summary-card--super { border-left-color: #0b3d91; }
.mgmt-summary-card--risk  { border-left-color: #c0392b; }

.user-filterbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.user-filterbar input, .user-filterbar select { min-height: 36px; }

.user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #0b3d91;
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
}
.user-avatar--lg { width: 56px; height: 56px; font-size: 1.6rem; }

.role-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 600;
  background: #eee;
  color: #333;
  margin: 0 2px 2px 0;
  vertical-align: middle;
}
.role-badge--super-admin   { background: #0b3d91; color: #fff; }
.role-badge--fleet-yonetici{ background: #1e8449; color: #fff; }
.role-badge--muhasebe      { background: #5dade2; color: #fff; }
.role-badge--okuyucu       { background: #bdc3c7; color: #333; }
.role-badge--effective     { background: #f1c40f; color: #333; }
.role-badge--staff         { background: #8e44ad; color: #fff; }
.role-badge--active        { background: #27ae60; color: #fff; }
.role-badge--passive       { background: #95a5a6; color: #fff; }
.role-badge--risk          { background: #c0392b; color: #fff; }

.user-table { width: 100%; border-collapse: collapse; background: #fff; margin: 8px 0 16px; }
.user-table th, .user-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #eee;
  text-align: left;
  font-size: 0.92rem;
}
.user-table th {
  background: #f7f9fc;
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
}
.user-row--passive { opacity: 0.65; }

.user-mobile-list { display: none; list-style: none; padding: 0; margin: 0; }
.user-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 12px 14px;
  margin: 0 0 10px;
}
.user-card header { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.user-card--passive { opacity: 0.7; }

.user-detail__head {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
}
.user-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 16px;
  margin: 16px 0;
}
.user-detail-grid > div { display: flex; flex-direction: column; }
.user-detail-grid dt { font-size: 0.78rem; color: #777; text-transform: uppercase; }
.user-detail-grid dd { margin: 0; font-weight: 500; }

.user-mgmt__access-link { margin-top: 16px; }

.risk-panel { margin: 12px 0; display: grid; gap: 8px; }
.risk-card {
  padding: 10px 14px;
  border-radius: 4px;
  border-left: 4px solid #ccc;
  background: #fafafa;
}
.risk-card strong { display: inline-block; margin-right: 8px; font-family: monospace; }
.risk-card p { margin: 4px 0 0; }
.risk-card--critical { background: #fdecea; border-left-color: #c0392b; color: #922b21; }
.risk-card--warning  { background: #fdf2e6; border-left-color: #e67e22; color: #a04000; }
.risk-card--info     { background: #e8f4fb; border-left-color: #2980b9; color: #1a5276; }

.access-matrix-table { width: 100%; border-collapse: collapse; background: #fff; margin: 8px 0 16px; }
.access-matrix-table th, .access-matrix-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #eee;
  text-align: left;
  font-size: 0.88rem;
  vertical-align: top;
}
.access-matrix-table th {
  background: #f7f9fc;
  font-size: 0.76rem;
  text-transform: uppercase;
}
.access-allowed { color: #1e8449; font-weight: 700; font-size: 1rem; }
.access-denied  { color: #aaa; font-weight: 700; font-size: 1rem; }

.dry-run-panel { margin: 24px 0; }
.dry-run-result { margin-top: 12px; }

@media (max-width: 720px) {
  .user-table { display: none; }
  .user-mobile-list { display: block; }
  .user-mobile-list[aria-hidden="true"] { display: block; }
  .mgmt-summary-grid { grid-template-columns: 1fr 1fr; }
  .user-detail-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Faz INS-1B — Sigorta / Kasko poliçe stilleri (dark mode yok)
   ========================================================================== */

.policy-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 16px 0;
}
.policy-summary-card { border-left: 4px solid #ddd; }
.policy-summary-card--critical { border-left-color: #c0392b; }
.policy-summary-card--warning  { border-left-color: #e67e22; }
.policy-summary-card--expired  { border-left-color: #5d4037; }

.policy-status-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 600;
  background: #eee;
  color: #333;
}
.policy-status-pill--draft     { background: #95a5a6; color: #fff; }
.policy-status-pill--active    { background: #2980b9; color: #fff; }
.policy-status-pill--paid      { background: #27ae60; color: #fff; }
.policy-status-pill--renewed   { background: #bdc3c7; color: #333; }
.policy-status-pill--cancelled { background: #7f8c8d; color: #fff; }

.policy-risk-pill {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 700;
}
.policy-risk-pill--critical { background: #fdecea; color: #c0392b; }
.policy-risk-pill--warning  { background: #fdf2e6; color: #a04000; }
.policy-risk-pill--horizon  { background: #fef9e7; color: #7d6608; }
.policy-risk-pill--expired  { background: #5d4037; color: #fff; }

.policy-detail-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 14px 16px;
  margin: 12px 0;
}
.policy-detail-card--critical { border-left: 4px solid #c0392b; }
.policy-detail-card--warning  { border-left: 4px solid #e67e22; }
.policy-detail-card--horizon  { border-left: 4px solid #f1c40f; }
.policy-detail-card--expired  { border-left: 4px solid #5d4037; }
.policy-detail-card--paid     { border-left: 4px solid #27ae60; }
.policy-detail-card--renewed  { border-left: 4px solid #bdc3c7; }
.policy-detail-card--cancelled{ border-left: 4px solid #7f8c8d; }

.policy-renewal-chain { margin: 16px 0; }
.policy-recent-audits { margin: 16px 0; }

.vehicle-detail-policy-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

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

/* ==========================================================================
   Faz DASH-1B — Genel Risk Merkezi (dark mode yok)
   ========================================================================== */

.risk-kpi-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 16px 0 24px;
}
.risk-kpi-card {
  background: #fff;
  border: 1px solid #eee;
  border-left: 4px solid #ddd;
  border-radius: 6px;
  padding: 14px 16px;
}
.risk-kpi-card .card__metric {
  font-size: 1.8rem;
  font-weight: 700;
  margin: 4px 0;
}
.risk-kpi-card--critical { border-left-color: #c0392b; }
.risk-kpi-card--warning  { border-left-color: #e67e22; }
.risk-kpi-card--expired  { border-left-color: #5d4037; }
.risk-kpi-card--info     { border-left-color: #2980b9; }

.risk-section { margin: 24px 0; }
.risk-section__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.risk-section__subtitle {
  font-size: 0.95rem;
  color: #555;
  margin: 12px 0 6px;
}

.priority-list { list-style: none; padding: 0; margin: 0; }
.priority-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid #eee;
  border-left: 4px solid #ddd;
  border-radius: 4px;
  margin: 0 0 6px;
  font-size: 0.92rem;
}
.priority-row--expired  { border-left-color: #5d4037; background: #f9f5f3; }
.priority-row--critical { border-left-color: #c0392b; background: #fdecea; }
.priority-row--warning  { border-left-color: #e67e22; background: #fdf2e6; }
.priority-row--info     { border-left-color: #2980b9; }
.priority-row__title  { flex: 1; }
.priority-row__date   { font-family: monospace; font-size: 0.85rem; color: #666; }
.priority-row__days   { font-weight: 600; }

.priority-module-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 600;
  background: #95a5a6;
  color: #fff;
}
.priority-module-badge--insurance  { background: #2980b9; }
.priority-module-badge--inspection { background: #16a085; }
.priority-module-badge--mtv        { background: #8e44ad; }
.priority-module-badge--fine       { background: #e67e22; }

.vehicle-risk-list { list-style: none; padding: 0; margin: 0; }
.vehicle-risk-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
  margin: 0 0 6px;
}
.vehicle-risk-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #c0392b;
  color: #fff;
  font-weight: 700;
}
.vehicle-risk-row__items { flex: 1; display: flex; flex-wrap: wrap; gap: 4px; }

.data-gap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin: 8px 0 14px;
}
.data-gap-card {
  background: #fff;
  border: 1px solid #eee;
  border-left: 4px solid #ddd;
  border-radius: 4px;
  padding: 10px 12px;
}
.data-gap-card .card__metric {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 4px 0;
}
.data-gap-card--critical { border-left-color: #c0392b; }
.data-gap-card--warning  { border-left-color: #e67e22; }
.data-gap-card--info     { border-left-color: #2980b9; }

.recent-audit-list { list-style: none; padding: 0; margin: 0; }
.recent-audit-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 6px 12px;
  background: #fff;
  border-bottom: 1px solid #eee;
  font-size: 0.88rem;
}

@media (max-width: 720px) {
  .risk-kpi-band { grid-template-columns: 1fr 1fr; }
  .data-gap-grid { grid-template-columns: 1fr; }
  .priority-row, .vehicle-risk-row, .recent-audit-row {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ==========================================================================
   Faz MUA-1B — Muayene stilleri (dark mode yok)
   ========================================================================== */

.inspection-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 16px 0;
}
.inspection-summary-card { border-left: 4px solid #ddd; }
.inspection-summary-card--critical { border-left-color: #c0392b; }
.inspection-summary-card--warning  { border-left-color: #e67e22; }
.inspection-summary-card--expired  { border-left-color: #5d4037; }
.inspection-summary-card--missing  { border-left-color: #2980b9; }

.inspection-status-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 600;
  background: #eee;
  color: #333;
}
.inspection-status-pill--draft     { background: #95a5a6; color: #fff; }
.inspection-status-pill--active    { background: #16a085; color: #fff; }
.inspection-status-pill--renewed   { background: #bdc3c7; color: #333; }
.inspection-status-pill--cancelled { background: #7f8c8d; color: #fff; }

.inspection-risk-pill {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 700;
}
.inspection-risk-pill--critical { background: #fdecea; color: #c0392b; }
.inspection-risk-pill--warning  { background: #fdf2e6; color: #a04000; }
.inspection-risk-pill--horizon  { background: #fef9e7; color: #7d6608; }
.inspection-risk-pill--expired  { background: #5d4037; color: #fff; }

.inspection-detail-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 14px 16px;
  margin: 12px 0;
}
.inspection-detail-card--critical { border-left: 4px solid #c0392b; }
.inspection-detail-card--warning  { border-left: 4px solid #e67e22; }
.inspection-detail-card--horizon  { border-left: 4px solid #f1c40f; }
.inspection-detail-card--expired  { border-left: 4px solid #5d4037; }
.inspection-detail-card--renewed  { border-left: 4px solid #bdc3c7; }
.inspection-detail-card--cancelled{ border-left: 4px solid #7f8c8d; }

.inspection-renewal-chain { margin: 16px 0; }
.inspection-recent-audits { margin: 16px 0; }

.vehicle-detail-inspection-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

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

/* ==========================================================================
   Faz SETTINGS-1B — Read-only Risk Eşikleri / Telegram / Sistem Sağlığı
   ========================================================================== */

.settings-section {
  margin: 24px 0;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
}
.settings-section--readonly {
  border-left: 4px solid #2980b9;
}
.settings-section__header {
  margin-bottom: 12px;
}
.settings-section__header h2 {
  margin: 0 0 6px;
}
.settings-readonly-note {
  font-size: 0.88rem;
  margin: 4px 0 0;
}

.settings-threshold-group {
  margin: 14px 0;
}
.settings-threshold-group h3 {
  margin: 8px 0 4px;
  font-size: 1rem;
}
.settings-threshold-table {
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0 8px;
  background: #fff;
}
.settings-threshold-table th,
.settings-threshold-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #eee;
  text-align: left;
  font-size: 0.88rem;
  vertical-align: top;
}
.settings-threshold-table th {
  background: #f7f9fc;
  font-size: 0.76rem;
  text-transform: uppercase;
}
.settings-threshold-table code {
  font-family: monospace;
  background: #f4f6fa;
  padding: 1px 6px;
  border-radius: 3px;
}

.settings-health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 8px 0;
}
.settings-health-card {
  background: #fff;
  border: 1px solid #eee;
  border-left: 4px solid #ddd;
  border-radius: 4px;
  padding: 10px 12px;
}
.settings-health-card h3 {
  margin: 0 0 4px;
  font-size: 0.92rem;
}
.settings-health-card .card__metric {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 4px 0;
}

.settings-status-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 600;
  background: #eee;
  color: #333;
}
.settings-status-pill--ok       { background: #27ae60; color: #fff; }
.settings-status-pill--warning  { background: #e67e22; color: #fff; }
.settings-status-pill--disabled { background: #95a5a6; color: #fff; }
.settings-status-pill--info     { background: #2980b9; color: #fff; }

@media (max-width: 720px) {
  .settings-threshold-table { font-size: 0.82rem; }
  .settings-threshold-table th, .settings-threshold-table td { padding: 6px 8px; }
  .settings-health-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Faz CHAT-1B — Mesajlaşma stilleri (dark mode yok)
   ========================================================================== */

.chat-page { padding: 0; }

/* Inbox */
.chat-thread-list { list-style: none; padding: 0; margin: 12px 0; }
.chat-thread-item {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
  margin: 0 0 8px;
}
.chat-thread-item--unread { border-left: 4px solid #c0392b; }
.chat-thread-item__main {
  display: block;
  padding: 12px 14px;
  text-decoration: none;
  color: inherit;
}
.chat-thread-item__main:hover { background: #fbfcff; }
.chat-thread-item__head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.chat-thread-item__participants { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.chat-thread-item__snippet { margin: 6px 0 0; font-size: 0.9rem; }

.chat-unread-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 700;
  background: #c0392b;
  color: #fff;
}
.chat-participant-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.72rem;
  background: #ecf0f1;
  color: #333;
}
.chat-vehicle-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.72rem;
  background: #d6eaf8;
  color: #1a5276;
  text-decoration: none;
}

/* Detail */
.chat-detail__header { margin: 12px 0 8px; }
.chat-detail__participants { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }

.chat-stream {
  background: #f7f9fc;
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 10px;
  max-height: 60vh;
  overflow-y: auto;
  margin: 8px 0;
}

.chat-bubble {
  max-width: 70%;
  margin: 6px 0;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}
.chat-bubble--own {
  margin-left: auto;
  background: #d6eaf8;
  border-color: #aed6f1;
}
.chat-bubble--other { margin-right: auto; }
.chat-bubble--deleted { opacity: 0.6; font-style: italic; background: #f4f6fa; }
.chat-bubble__head { display: flex; align-items: baseline; gap: 6px; margin-bottom: 2px; font-size: 0.85rem; }
.chat-bubble__sender { font-weight: 600; color: #1a5276; }
.chat-bubble__body { margin: 4px 0; word-wrap: break-word; }
.chat-bubble__actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }

.chat-reply-preview {
  background: #fef9e7;
  border-left: 3px solid #f1c40f;
  padding: 4px 8px;
  margin: 4px 0;
  font-size: 0.85rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.chat-reply-preview--inline { background: #f4f6fa; border-left-color: #95a5a6; }

.chat-composer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 10px;
  margin-top: 8px;
}
.chat-composer textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: inherit;
  resize: vertical;
}
.chat-actions { display: flex; gap: 6px; justify-content: flex-end; }
.chat-readonly-note { margin: 12px 0; padding: 10px 14px; background: #f4f6fa; border-radius: 4px; }

.chat-edit-modal {
  margin: 12px 0;
  padding: 12px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
}
.chat-edit-modal[hidden] { display: none; }

.chat-empty-state { padding: 36px 16px; }

@media (max-width: 720px) {
  .chat-bubble { max-width: 88%; }
  .chat-stream { max-height: 50vh; }
}


/* ==========================================================================
   FAZ UI-ERP-1B — ERP Foundation tokens + component classes (additive)
   --------------------------------------------------------------------------
   Bu blok yalnız YENİ class/token ekler. Mevcut hiçbir selector/davranış
   değişmez. Henüz HTML'de kullanılmaz; UI-ERP-1C+ fazlarında bağlanacak.
   Rollback: bu blokun tamamı silinerek 1B öncesi davranış döner.
   ========================================================================== */

:root {
  /* Layout */
  --sidebar-width:           240px;
  --sidebar-width-collapsed: 64px;
  --topbar-h:                56px;
  --page-header-mb:          var(--space-5);

  /* ERP surface aliases (mevcut tokenları yeniden adlandırır, yeni rol verir) */
  --color-surface-raised:    #ffffff;
  --color-surface-sunken:    #f0f3fa;
  --color-stripe-success:    var(--color-success);
  --color-stripe-warning:    var(--color-warning);
  --color-stripe-critical:   var(--color-critical);
  --color-stripe-info:       var(--color-info);
  --color-stripe-violet:     var(--color-violet);
}

/* --------------------------------------------------------------------------
   Sidebar layout (henüz HTML'de yok — UI-ERP-1C'de bağlanacak)
   -------------------------------------------------------------------------- */
.layout-sidebar {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  min-height: 100vh;
}
.layout-sidebar--collapsed {
  grid-template-columns: var(--sidebar-width-collapsed) 1fr;
}
.sidebar {
  background: var(--color-primary-dark);
  color: var(--color-on-primary);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.sidebar__brand {
  padding: var(--space-4) var(--space-4);
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  letter-spacing: .3px;
}
.sidebar__nav {
  flex: 1;
  padding: var(--space-3) 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px var(--space-4);
  color: var(--color-primary-tint);
  text-decoration: none;
  font-size: var(--font-size-sm);
  border-left: 3px solid transparent;
  transition: background var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast);
}
.sidebar__item:hover {
  background: rgba(255,255,255,.06);
  color: #fff;
  text-decoration: none;
}
.sidebar__item.is-active {
  background: rgba(255,255,255,.08);
  color: #fff;
  border-left-color: var(--color-accent);
}
.sidebar__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: .85;
}
.sidebar__label { flex: 1; }
.sidebar__group-title {
  padding: var(--space-3) var(--space-4) var(--space-1);
  font-size: 11px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}

/* --------------------------------------------------------------------------
   Topbar search + bell (henüz bağlı değil)
   -------------------------------------------------------------------------- */
.topbar-search {
  position: relative;
  flex: 1;
  max-width: 360px;
}
.topbar-search__input {
  width: 100%;
  height: 36px;
  padding: 0 var(--space-3) 0 36px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-size: var(--font-size-sm);
  color: var(--color-text);
}
.topbar-search__input:focus {
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: var(--color-primary);
}
.topbar-search__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-subtle);
  pointer-events: none;
}
.bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  color: var(--color-on-primary);
  text-decoration: none;
}
.bell:hover { background: rgba(255,255,255,.08); text-decoration: none; }
.bell__count {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--color-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Page header + breadcrumb (henüz bağlı değil)
   -------------------------------------------------------------------------- */
.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--page-header-mb);
  flex-wrap: wrap;
}
.page-header__title {
  margin: 0;
  font-size: var(--font-size-xl);
  color: var(--color-text);
}
.page-header__subtitle {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.page-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0 0 var(--space-2);
  padding: 0;
  list-style: none;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.breadcrumb__item { display: inline-flex; align-items: center; }
.breadcrumb__item a {
  color: var(--color-text-muted);
  text-decoration: none;
}
.breadcrumb__item a:hover { color: var(--color-primary); text-decoration: underline; }
.breadcrumb__item--current { color: var(--color-text); font-weight: 600; }
.breadcrumb__separator {
  margin: 0 var(--space-1);
  color: var(--color-text-subtle);
}

/* --------------------------------------------------------------------------
   KPI card with left color stripe (henüz bağlı değil)
   -------------------------------------------------------------------------- */
.kpi-card {
  position: relative;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  overflow: hidden;
}
.kpi-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
  background: var(--color-border-strong);
}
.kpi-card--success::before  { background: var(--color-stripe-success); }
.kpi-card--warning::before  { background: var(--color-stripe-warning); }
.kpi-card--critical::before { background: var(--color-stripe-critical); }
.kpi-card--info::before     { background: var(--color-stripe-info); }
.kpi-card--violet::before   { background: var(--color-stripe-violet); }
.kpi-card__label {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--color-text-muted);
}
.kpi-card__value {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.1;
}
.kpi-card__hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
}
.kpi-card__trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-xs);
  margin-top: var(--space-1);
}
.kpi-card__trend--up   { color: var(--color-success); }
.kpi-card__trend--down { color: var(--color-danger); }

/* --------------------------------------------------------------------------
   Mobile data card (table alternatifi — henüz bağlı değil)
   -------------------------------------------------------------------------- */
.data-card {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-xs);
  margin-bottom: var(--space-3);
}
.data-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.data-card__title {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--color-text);
}
.data-card__field {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 4px 0;
  font-size: var(--font-size-sm);
}
.data-card__field-label { color: var(--color-text-muted); }
.data-card__field-value { color: var(--color-text); font-weight: 500; }
.data-card__actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

/* --------------------------------------------------------------------------
   Empty state (henüz bağlı değil)
   -------------------------------------------------------------------------- */
.empty-state {
  text-align: center;
  padding: var(--space-7) var(--space-4);
  color: var(--color-text-muted);
}
.empty-state__icon {
  font-size: 36px;
  opacity: .5;
  margin-bottom: var(--space-2);
}
.empty-state__title {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-lg);
  color: var(--color-text);
}
.empty-state__hint {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-sm);
}
.empty-state__action { display: inline-block; }

/* --------------------------------------------------------------------------
   Eksik badge varyantları (UI-ERP-1A audit önerdi)
   -------------------------------------------------------------------------- */
.badge--renewed {
  background: var(--color-info-bg);
  color: var(--color-info);
}
.badge--missing-data {
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  border: 1px dashed var(--color-border-strong);
}


/* ==========================================================================
   FAZ UI-ERP-1C — Desktop sidebar layout (>= 1024px) + dashboard polish
   --------------------------------------------------------------------------
   Strateji: DOM dokunulmadan, mevcut .topbar / .topnav öğeleri CSS ile
   sol dikey sidebar'a dönüştürülür. Mobil (<600px) ve tablet (600-1023px)
   davranışları DEĞİŞMEDEN korunur.
   Rollback: bu blok silinince 1B-öncesi yatay topnav davranışı döner.
   ========================================================================== */

/* Desktop sidebar — yalnız >= 1024px */
@media (min-width: 1024px) {
  /* Topbar artık sol sidebar */
  .topbar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    z-index: 50;
    box-shadow: var(--shadow-md);
    overflow-y: auto;
    padding: 0;
  }
  .topbar__inner {
    flex-direction: column;
    align-items: stretch;
    height: 100%;
    padding: var(--space-4) 0;
    gap: 0;
  }

  /* Brand: sidebar üst kısmında */
  .brand {
    padding: 0 var(--space-4) var(--space-4);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    margin-bottom: var(--space-3);
  }

  /* Hamburger label desktop'ta zaten gizli (mevcut kural korunur) */

  /* Topnav: dikey stack */
  .topnav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    flex: 1;
    width: 100%;
    padding: 0 0 var(--space-3);
  }
  .topnav a {
    padding: 10px var(--space-4);
    border-radius: 0;
    border-left: 3px solid transparent;
    color: var(--color-primary-tint);
    transition: background var(--transition-fast),
                color var(--transition-fast),
                border-color var(--transition-fast);
  }
  .topnav a:hover {
    background: rgba(255, 255, 255, .06);
    color: #fff;
  }

  /* User-menu sidebar'ın altına yapışsın */
  .topnav .user-menu {
    margin-top: auto;
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding-top: var(--space-3);
  }
  .topnav .user-menu > summary {
    width: 100%;
    justify-content: flex-start;
    padding: 8px var(--space-4);
    border-radius: 0;
  }
  /* User menu paneli sidebar genişliğini geçmesin, sağa açılsın */
  .topnav .user-menu__panel {
    position: absolute;
    left: var(--sidebar-width);
    bottom: 0;
    margin-top: 0;
  }

  /* Main + footer sidebar genişliği kadar kayar */
  .main {
    margin-left: var(--sidebar-width);
  }
  .footer {
    margin-left: var(--sidebar-width);
  }
}

/* Dashboard polish — risk KPI kartlarına sol renk şeridi */
.risk-kpi-card.kpi-card { padding: var(--space-4); }
.risk-kpi-card.kpi-card .card__title {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--color-text-muted);
  margin: 0;
  font-weight: 500;
}
.risk-kpi-card.kpi-card .card__metric {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-text);
  margin: var(--space-1) 0 0;
  line-height: 1.1;
}
.risk-kpi-card.kpi-card small.muted {
  font-size: var(--font-size-xs);
  margin-top: var(--space-1);
}


/* ==========================================================================
   FAZ UI-ERP-2A — Bold ERP polish (dashboard hero kaldırıldı + KPI compact +
   sidebar group titles + page-header compact)
   --------------------------------------------------------------------------
   Rollback: bu blok silinince 1C/1D davranışı döner.
   ========================================================================== */

/* Sidebar grup başlıkları (yalnız desktop sidebar modunda) */
.topnav .sidebar__group-title { display: none; }

@media (min-width: 1024px) {
  .topnav .sidebar__group-title {
    display: block;
    padding: var(--space-3) var(--space-4) var(--space-1);
    font-size: 10px;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .42);
    font-weight: 600;
    user-select: none;
  }
  .topnav .sidebar__group-title:first-child { padding-top: 0; }

  /* Sidebar link tipografisi premium */
  .topnav a {
    font-size: 13.5px;
    letter-spacing: .1px;
    padding: 8px var(--space-4);
  }
  .brand__name { letter-spacing: .4px; }

  /* Brand container kompakt */
  .brand { padding: 0 var(--space-4) var(--space-3); margin-bottom: var(--space-2); }
}

/* Page header compact (eski hero yerine) */
.page-header--compact {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.page-header--compact .page-header__title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.2px;
  color: var(--color-text);
}
.page-header--compact .page-header__subtitle {
  margin-top: 4px;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.dashboard--erp .breadcrumb {
  margin-bottom: var(--space-1);
}

/* Eski büyük dashboard hero stili dashboard--erp altında neutralize */
.dashboard--erp .dashboard__hero {
  background: transparent;
  color: inherit;
  padding: 0;
  border: none;
  box-shadow: none;
}
.dashboard--erp .dashboard__hero h1 { color: var(--color-text); }
.dashboard--erp .dashboard__hero-lead { color: var(--color-text-muted); }

/* Risk KPI band — kompakt yatay ERP görünümü */
.risk-kpi-band--compact {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: var(--space-5);
}
@media (min-width: 600px) {
  .risk-kpi-band--compact { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .risk-kpi-band--compact { grid-template-columns: repeat(6, 1fr); }
}
.risk-kpi-band--compact .risk-kpi-card.kpi-card {
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  gap: 2px;
  min-height: 96px;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: none;
}
.risk-kpi-band--compact .risk-kpi-card.kpi-card .card__title {
  font-size: 10px;
  letter-spacing: .8px;
  font-weight: 600;
}
.risk-kpi-band--compact .risk-kpi-card.kpi-card .card__metric {
  font-size: 26px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -.4px;
}
.risk-kpi-band--compact .risk-kpi-card.kpi-card small.muted {
  font-size: 11px;
  line-height: 1.3;
}

/* Filo Genel Durum + Yaklaşan kartları rafine et */
.dashboard--erp .dashboard__section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--color-text-muted);
  font-weight: 600;
  margin: var(--space-5) 0 var(--space-2);
}
.dashboard--erp .cards .card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: none;
  padding: var(--space-3) var(--space-4);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.dashboard--erp .cards .card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-xs);
}
.dashboard--erp .cards .card h2 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--color-text-muted);
  font-weight: 600;
  margin: 0;
}
.dashboard--erp .cards .card .card__metric {
  font-size: 26px;
  font-weight: 700;
  margin: 4px 0 2px;
  letter-spacing: -.4px;
}
.dashboard--erp .cards .card .card__hint {
  font-size: 11px;
  color: var(--color-text-subtle);
  margin: 0;
}


/* ==========================================================================
   FAZ UI-ERP-3A — Full Dashboard Conversion
   --------------------------------------------------------------------------
   - Page header inline meta strip (eski "Filo Genel Durum" 4-kart yerine)
   - 2-kolon dash-grid (>=1024px)
   - Uniform .dash-card (header + sub + body + actions)
   - .dash-mini-stats kompakt yatay metrik satırı
   - .dash-quick-bar pill aksiyon barı
   - Sidebar premium polish (active/hover daha güçlü)
   ========================================================================== */

/* ---- Page header meta strip ---- */
.dash-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.dash-meta-strip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--space-4);
  align-items: center;
  flex-wrap: wrap;
}
.dash-meta-strip li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 64px;
  border-left: 1px solid var(--color-border);
  padding-left: var(--space-3);
}
.dash-meta-strip li:first-child { border-left: none; padding-left: 0; }
.dash-meta-strip__label {
  font-size: 10px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 600;
}
.dash-meta-strip__value {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.1;
  margin-top: 2px;
  text-decoration: none;
  letter-spacing: -.3px;
}
.dash-meta-strip__value:hover { color: var(--color-primary); text-decoration: none; }

/* ---- 2-kolon ana grid ---- */
.dash-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .dash-grid { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); }
}
.dash-grid__main, .dash-grid__side {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

/* ---- Uniform dash-card ---- */
.dash-card {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.dash-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-soft);
}
.dash-card__title {
  margin: 0;
  font-size: 12px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--color-text);
  font-weight: 700;
}
.dash-card__action {
  font-size: 12px;
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
}
.dash-card__action:hover { text-decoration: underline; }
.dash-card__body { padding: var(--space-3) var(--space-4); margin: 0; }
.dash-card__sub {
  border-top: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-4);
}
.dash-card__sub-title {
  font-size: 11px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 600;
  margin: 0 0 var(--space-2);
}
.dash-card--info { background: var(--color-info-bg); }
.dash-card--info .dash-card__header { background: transparent; border-bottom-color: rgba(58, 70, 100, .15); }
.dash-card--danger .dash-card__header {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border-bottom-color: rgba(122, 30, 30, .15);
}
.dash-card--danger .dash-card__title { color: var(--color-danger); }
.dash-card--side { font-size: var(--font-size-sm); }
.dash-card--side > * { margin: 0; padding: var(--space-3) var(--space-4); }

/* ---- Mini stats yatay row ---- */
.dash-mini-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}
@media (min-width: 600px) {
  .dash-mini-stats { grid-template-columns: repeat(4, 1fr); }
}
.dash-mini-stats > .dash-mini-stat:nth-child(n+5) {
  /* if 5+ stats, last wraps as full-width row */
}
.dash-mini-stat {
  padding: var(--space-3) var(--space-4);
  border-right: 1px solid var(--color-border);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.dash-mini-stat:first-child { border-top: 1px solid transparent; }
@media (min-width: 600px) {
  .dash-mini-stat:nth-child(-n+4) { border-top: none; }
}
.dash-mini-stat:last-child { border-right: none; }
.dash-mini-stat__label {
  font-size: 10px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 600;
}
.dash-mini-stat__value {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.1;
  letter-spacing: -.3px;
  word-break: break-word;
}
.dash-mini-stat--danger .dash-mini-stat__value { color: var(--color-danger); }

/* ---- dash-list polish ---- */
.dash-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dash-card__sub .dash-list,
.dash-card .dash-list {
  display: flex;
  flex-direction: column;
}
.dash-card__sub .dash-list > li,
.dash-card .dash-list > li {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
}
.dash-card__sub .dash-list > li:last-child,
.dash-card .dash-list > li:last-child { border-bottom: none; }
.dash-card .vd-list { padding: var(--space-2) var(--space-4); }
.dash-card .vd-list > li {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}
.dash-card .vd-list > li:last-child { border-bottom: none; }

/* ---- Quick bar (Hızlı Eylemler kompakt) ---- */
.dash-quick-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-top: var(--space-4);
}
.dash-quick-bar__label {
  font-size: 11px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 600;
  margin-right: var(--space-2);
}
/* GECE-1 PAKET-C1 (UX-C4): .btn--sm ve .btn--small ikiz varyantlardı
   (12.5px/32px vs 12px/min-height yok) ve /panel/ gibi sayfalarda İKİSİ
   birlikte kullanılıyordu. Tek görsel kural: ikisi de aynı bloktan beslenir.
   Template'ler değiştirilmedi (39 btn--small + 5 btn--sm kullanımı korunur). */
.btn--sm,
.btn--small {
  padding: 6px var(--space-3);
  font-size: 12.5px;
  min-height: 32px;
  border-radius: var(--radius-sm);
}

/* ---- Sidebar premium polish ---- */
@media (min-width: 1024px) {
  .topnav a {
    position: relative;
  }
  .topnav a:hover {
    color: #fff;
    background: rgba(255, 255, 255, .08);
  }
  /* User-menu trigger sidebar alt - daha düzenli */
  .topnav .user-menu > summary {
    background: rgba(255, 255, 255, .04);
  }
  .topnav .user-menu > summary:hover {
    background: rgba(255, 255, 255, .12);
  }
}

/* ---- Empty state inside dash card ---- */
.dash-card .dash-card__body.muted {
  color: var(--color-text-muted);
  font-style: italic;
  padding: var(--space-4);
  text-align: left;
}

/* Eski Filo Genel Durum / Yaklaşan büyük kartları artık dashboard 3A'da kullanılmıyor;
   ancak başka sayfalarda kullanılabileceği için global .cards stili dokunulmadı. */


/* ==========================================================================
   FAZ UI-ERP-3B — Dashboard Visual Tightening
   --------------------------------------------------------------------------
   - Dashboard container daha geniş (1320px max)
   - Grid oranı 2fr/1fr -> 7fr/3fr (sağ kolon daha dar)
   - Bugünün Öncelikleri tablo-row layout
   - KPI eşit yükseklik
   - Sidebar active/hover premium
   - Dash-card spacing tighter
   - Data gap panel sidebar'dan alta full-width taşındı (template'de)
   ========================================================================== */

/* ---- Dashboard wider container ---- */
.dashboard--v3 {
  max-width: 1320px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  /* sidebar offset (240px) + main padding birlikte 1320 max içinde kalır */
  .main { padding: var(--space-4) 0; }
  .container { max-width: none; padding: 0 var(--space-5); }
  .dashboard--v3 { padding: 0 var(--space-2); }
}

/* ---- Grid oranı tighter ---- */
@media (min-width: 1024px) {
  .dash-grid {
    grid-template-columns: minmax(0, 7fr) minmax(280px, 3fr);
    gap: var(--space-3);
  }
}
.dash-grid__main, .dash-grid__side { gap: var(--space-3); }

/* ---- Dash-card tighter spacing ---- */
.dash-card__header {
  padding: 10px var(--space-3);
}
.dash-card__title { font-size: 11.5px; letter-spacing: .5px; }
.dash-card__body { padding: 10px var(--space-3); }
.dash-card__sub { padding: 10px var(--space-3); }
.dash-card .vd-list { padding: 4px var(--space-3); }
.dash-card .vd-list > li,
.dash-card__sub .dash-list > li,
.dash-card .dash-list > li {
  padding: 8px 0;
  font-size: 13px;
}

/* ---- Mini stats compact ---- */
.dash-mini-stat {
  padding: 10px var(--space-3);
  min-height: 64px;
}
.dash-mini-stat__value { font-size: 20px; }

/* ---- KPI band: equal heights, thinner stripe ---- */
.risk-kpi-band--compact .risk-kpi-card.kpi-card {
  min-height: 84px;
  padding: 10px 10px 10px 14px;
  align-items: flex-start;
  justify-content: center;
}
.risk-kpi-band--compact .risk-kpi-card.kpi-card .card__metric {
  font-size: 22px;
}
.risk-kpi-band--compact .risk-kpi-card.kpi-card::before { width: 3px; }

/* ---- Page header tighter ---- */
.dash-page-header { padding-bottom: 10px; margin-bottom: var(--space-3); }
.dash-meta-strip { gap: var(--space-3); }
.dash-meta-strip__value { font-size: 18px; }
.dash-meta-strip__label { font-size: 9.5px; }

/* ---- Bugünün Öncelikleri TABLE-ROW layout ---- */
.priority-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.priority-row {
  display: grid;
  grid-template-columns: 56px minmax(72px, auto) 1fr auto auto;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border);
  background: transparent;
  font-size: 12.5px;
  border-left: none;
  border-radius: 0;
  margin: 0;
}
.priority-row:last-child { border-bottom: none; }
.priority-row > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.priority-row .priority-row__title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-text-muted);
}
.priority-row .priority-row__date,
.priority-row .priority-row__days {
  font-size: 11.5px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.priority-row strong { font-weight: 600; }
.priority-row strong a { color: var(--color-text); text-decoration: none; }
.priority-row strong a:hover { color: var(--color-primary); }
/* Severity sadece sol ince border vurgu */
.priority-row--critical { border-left: 3px solid var(--color-danger); padding-left: 9px; }
.priority-row--warning  { border-left: 3px solid var(--color-warning); padding-left: 9px; }
.priority-row--ok       { border-left: 3px solid transparent; padding-left: 9px; }
/* Module badge daha küçük ve sade */
.priority-module-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .4px;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  text-transform: uppercase;
  min-width: 48px;
}
.priority-module-badge--insurance { background: #e6ecf8; color: #3a4664; }
.priority-module-badge--inspection { background: #e8e3fb; color: #3f2882; }
.priority-module-badge--mtv { background: #fff3cd; color: #806100; }
.priority-module-badge--fine { background: #fde2e2; color: #7a1e1e; }

/* ---- Vehicle risk row tighter ---- */
.vehicle-risk-list { list-style: none; margin: 0; padding: 0; }
.vehicle-risk-row {
  display: grid;
  grid-template-columns: 36px minmax(72px, auto) 1fr;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border);
  font-size: 12.5px;
}
.vehicle-risk-row:last-child { border-bottom: none; }
.vehicle-risk-score {
  font-weight: 700;
  font-size: 14px;
  color: var(--color-danger);
  font-variant-numeric: tabular-nums;
}
.vehicle-risk-row__items { font-size: 11px; color: var(--color-text-muted); }
.vehicle-risk-row .role-badge {
  font-size: 10px;
  padding: 1px 5px;
  margin-right: 2px;
  background: var(--color-surface-sunken);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
}

/* ---- Risk section header daha sade (sidebar içinde) ---- */
.dash-card--side .risk-section,
.dash-card--side .risk-section > * { padding: 0; margin: 0; }
.dash-card--side .risk-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px var(--space-3);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-soft);
}
.dash-card--side .risk-section__header .dashboard__section-title {
  margin: 0;
  font-size: 11.5px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--color-text);
  font-weight: 700;
}
.dash-card--side .risk-section__header small.muted { font-size: 11px; }
.dash-card--side .priority-list,
.dash-card--side .vehicle-risk-list { padding: 0; }
.dash-card--side .empty.empty--inline { padding: 14px var(--space-3); margin: 0; font-size: 12.5px; }
.dash-card--side .risk-section__header .btn { padding: 4px 10px; font-size: 11px; }

/* ---- Data gap panel — tam genişlik altta ---- */
.dash-grid + .dash-data-gap-section {
  margin-top: var(--space-3);
}
.dash-data-gap-section .risk-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-soft);
}
.dash-data-gap-section .risk-section__header .dashboard__section-title {
  margin: 0;
  font-size: 11.5px;
  letter-spacing: .5px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-text);
}
.dash-data-gap-section .risk-section { padding: 0; }
.dash-data-gap-section .risk-section__subtitle {
  font-size: 11px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 600;
  margin: 12px var(--space-4) 6px;
}
.dash-data-gap-section .data-gap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-2);
  padding: 0 var(--space-4) 12px;
}
.dash-data-gap-section .data-gap-card {
  padding: 10px 12px;
  font-size: 12.5px;
}
.dash-data-gap-section .data-gap-card h4 {
  font-size: 12px;
  margin: 0 0 4px;
  font-weight: 600;
}
.dash-data-gap-section .data-gap-card .card__metric {
  font-size: 18px;
  margin: 2px 0;
}
.dash-data-gap-section .data-gap-card .muted { font-size: 11px; }

/* ---- Sidebar active state premium (URL bazlı, request varsa) ---- */
@media (min-width: 1024px) {
  .topnav a.is-active,
  .topnav a[aria-current="page"] {
    background: rgba(255, 215, 61, .14);
    color: #fff;
    border-left-color: var(--color-accent);
    font-weight: 600;
  }
  .topnav a {
    transition: background var(--transition-fast),
                color var(--transition-fast),
                border-left-color var(--transition-fast);
  }
  .brand__logo {
    background: var(--color-accent);
    color: var(--color-primary-dark);
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm);
    font-weight: 800; font-size: 12px; letter-spacing: .5px;
  }
}

/* ---- Sub-card list (MTV ödenmesi) tabular-nums ---- */
.dash-card .dash-list > li {
  font-variant-numeric: tabular-nums;
}

/* ---- Hover daha premium ---- */
.dash-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-sm);
}
.dash-card { transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }


/* ==========================================================================
   FAZ UI-ERP-3C — Premium Visual Polish (final tightening)
   ========================================================================== */

/* ---- Sidebar premium: active marker + spacing ---- */
@media (min-width: 1024px) {
  .topnav a {
    position: relative;
    padding-left: 28px;
    letter-spacing: .15px;
  }
  .topnav a::before {
    content: "·";
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,.25);
    font-size: 14px;
    font-weight: 700;
  }
  .topnav a.is-active::before,
  .topnav a[aria-current="page"]::before {
    content: "▸";
    color: var(--color-accent);
    font-size: 11px;
  }
  .topnav .sidebar__group-title {
    margin-top: var(--space-3);
    border-top: 1px solid rgba(255,255,255,.06);
    padding-top: 12px;
  }
  .topnav .sidebar__group-title:first-of-type {
    border-top: none;
    margin-top: 0;
    padding-top: var(--space-1);
  }
  .topnav .user-menu {
    border-top: 1px solid rgba(255,255,255,.12);
    padding-top: var(--space-3);
    margin-top: auto;
  }
  .topnav .user-menu > summary { padding: 10px var(--space-4); }
  .topnav .user-menu__avatar {
    width: 28px; height: 28px;
    font-size: 12px;
    background: var(--color-accent);
    color: var(--color-primary-dark);
    font-weight: 700;
  }
  .topnav .user-menu__name { font-size: 13px; }
  .topnav .user-menu__role { font-size: 10.5px; opacity: .7; }
  .brand { padding-bottom: 14px; }
}

/* ---- Page-header alignment ---- */
.dash-page-header {
  align-items: center;
  border-bottom: 1px solid var(--color-border);
}
.dash-page-header > div { flex: 1; min-width: 200px; }
.dash-meta-strip { padding-bottom: 0; }
.dash-meta-strip li { padding-left: var(--space-4); }
.dash-meta-strip li:first-child { padding-left: 0; }

/* ---- Bugünün Öncelikleri sabit kolon ---- */
@media (min-width: 600px) {
  .priority-row {
    grid-template-columns: 64px 88px 1fr 96px 64px;
    min-height: 36px;
    align-items: center;
  }
}
.priority-row .priority-row__title { color: var(--color-text); font-size: 12.5px; }
.priority-row .priority-row__date { text-align: right; }
.priority-row .priority-row__days { text-align: right; font-weight: 600; }
.priority-row--critical .priority-row__days { color: var(--color-danger); }
.priority-row--warning .priority-row__days { color: var(--color-warning); }

/* ---- Dash-card vd-list grid ---- */
.dash-card .vd-list > li {
  display: grid;
  grid-template-columns: minmax(80px, auto) 1fr auto;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 0;
}
.dash-card .vd-list > li > .vd-list__title { padding: 0; }
.dash-card .vd-list > li > .vd-list__meta {
  font-size: 11.5px;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.dash-card .vd-list > li > .badge {
  justify-self: end;
  white-space: nowrap;
  font-size: 10.5px;
  padding: 2px 8px;
}

.dash-card .dash-list > li {
  font-size: 12.5px;
  padding: 6px 0;
}

/* ---- Eksik Veri Paneli kompakt kartlar ---- */
.dash-data-gap-section .data-gap-card {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  min-height: 120px;
  gap: 4px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  box-shadow: none;
  border-left-width: 3px;
}
.dash-data-gap-section .data-gap-card--info { border-left-color: var(--color-info); }
.dash-data-gap-section .data-gap-card--warning { border-left-color: var(--color-warning); }
.dash-data-gap-section .data-gap-card--critical { border-left-color: var(--color-danger); }
.dash-data-gap-section .data-gap-card h4 {
  font-size: 11.5px;
  margin: 0;
  font-weight: 600;
  letter-spacing: .2px;
  color: var(--color-text);
  line-height: 1.3;
}
.dash-data-gap-section .data-gap-card .card__metric {
  font-size: 22px;
  font-weight: 700;
  margin: 2px 0 4px;
  color: var(--color-text);
  line-height: 1.1;
  letter-spacing: -.3px;
}
.dash-data-gap-section .data-gap-card .muted {
  font-size: 11px;
  line-height: 1.35;
  color: var(--color-text-muted);
  flex: 1;
}
.dash-data-gap-section .data-gap-card p:last-child {
  margin: auto 0 0;
  padding-top: 6px;
}
.dash-data-gap-section .data-gap-card .btn {
  font-size: 11px;
  padding: 4px 10px;
  min-height: 0;
}
.dash-data-gap-section .risk-section__subtitle {
  margin: 8px var(--space-4) 6px;
  font-size: 10.5px;
}

/* ---- MTV/Fines sub-row tighter ---- */
.dash-card .dashboard-mtv-rows .dashboard-mtv-row {
  display: grid;
  grid-template-columns: minmax(80px, auto) 1fr auto auto auto;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 0;
  font-size: 12px;
  border-bottom: 1px solid var(--color-border);
}
.dash-card .dashboard-mtv-rows .dashboard-mtv-row:last-child { border-bottom: none; }
.dash-card .dashboard-mtv-rows .mtv-amount {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ---- Quick bar polish ---- */
.dash-quick-bar {
  padding: 10px var(--space-4);
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
}
.dash-quick-bar .btn--sm {
  font-size: 12px;
  padding: 5px 12px;
  min-height: 30px;
}

/* ---- Footer sade ---- */
.footer { padding: var(--space-3) 0; font-size: 11px; }

/* ---- Mini stats border refinement ---- */
.dash-card .dash-mini-stats { border-bottom: 1px solid var(--color-border); }
.dash-card .dash-mini-stats:last-child { border-bottom: none; }


/* ==========================================================================
   FAZ UI-ERP-3D — Executive Dashboard (hero row + side col 2 + accordion)
   ========================================================================== */

/* ---- Quick-bar üstte (executive görünürlük) ---- */
.dash-quick-bar--top {
  margin-top: 0;
  margin-bottom: var(--space-3);
  padding: 8px var(--space-3);
}
.dash-quick-bar--top .dash-quick-bar__label { margin-right: var(--space-2); }

/* ---- Hero Row 2-kolon (>=1024px) ---- */
.dash-hero-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
@media (min-width: 1024px) {
  .dash-hero-row {
    grid-template-columns: minmax(0, 7fr) minmax(280px, 4fr);
  }
}
.dash-hero-row__main { min-width: 0; }
.dash-hero-row__side { min-width: 0; display: flex; flex-direction: column; }

/* Hero row sol: today_priorities partial wrap içinde */
.dash-hero-row__main .risk-section {
  padding: 0;
  margin: 0;
}
.dash-hero-row__main .risk-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px var(--space-3);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-soft);
}
.dash-hero-row__main .risk-section__header .dashboard__section-title {
  margin: 0;
  font-size: 12px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--color-text);
  font-weight: 700;
}
.dash-hero-row__main .priority-list { padding: 0; }
.dash-hero-row__main .priority-row {
  padding: 9px 12px;
}
.dash-hero-row__main .empty.empty--inline {
  padding: 18px var(--space-3);
  margin: 0;
  font-size: 13px;
  color: var(--color-text-muted);
}
@media (min-width: 1024px) {
  /* Hero row geniş alanda priority-row için title daha rahat */
  .dash-hero-row__main .priority-row {
    grid-template-columns: 64px 96px 1fr 110px 80px;
  }
}

/* ---- Hero row sağ: Eksik Veri özet 3-pill ---- */
.dash-data-summary {
  padding: var(--space-3) var(--space-3) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.dash-data-summary__pills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dash-data-summary__pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  font-size: 12px;
}
.dash-data-summary__pill--info { border-left-color: var(--color-info); }
.dash-data-summary__pill--warning { border-left-color: var(--color-warning); }
.dash-data-summary__pill--critical { border-left-color: var(--color-danger); }
.dash-data-summary__pill-label {
  color: var(--color-text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-data-summary__pill-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-left: var(--space-2);
}
.dash-data-summary__hint {
  font-size: 11px;
  margin: 0;
  line-height: 1.4;
}

/* ---- Eksik Veri Detayı: <details> accordion ---- */
.dash-data-gap-collapsed {
  margin-top: var(--space-3);
  padding: 0;
}
.dash-data-gap-collapsed > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-surface-soft);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-fast);
}
.dash-data-gap-collapsed > summary::-webkit-details-marker { display: none; }
.dash-data-gap-collapsed > summary::marker { content: ""; }
.dash-data-gap-collapsed > summary::before {
  content: "▸ ";
  margin-right: var(--space-2);
  color: var(--color-primary);
  font-weight: 700;
  display: inline-block;
  transition: transform var(--transition-fast);
}
.dash-data-gap-collapsed[open] > summary::before { content: "▾ "; }
.dash-data-gap-collapsed[open] > summary { border-bottom-color: var(--color-border); }
.dash-data-gap-collapsed > summary .dash-card__title { flex: 1; }
.dash-data-gap-collapsed__hint {
  font-size: 11px;
  color: var(--color-text-muted);
}

/* ---- Side kolonu 2-widget hizalama ---- */
.dash-grid__side--two {
  /* 2 widget — gap ve flow korundu, ek özel kural yok */
}

/* ---- Mobile/tablet hero row dikey stack ---- */
@media (max-width: 1023px) {
  .dash-hero-row { grid-template-columns: 1fr; }
  .dash-hero-row__side { margin-top: 0; }
}

/* ---- _data_gap_panel inline pills (accordion içinde de görünür) ---- */
.dash-data-summary__pills--inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 var(--space-4) var(--space-2);
  padding: 0;
}
.dash-data-summary__pills--inline .dash-data-summary__pill {
  flex: 1 1 200px;
  min-width: 200px;
}


/* ==========================================================================
   FAZ UI-ERP-3E — Deep Navy Color Palette Alignment
   --------------------------------------------------------------------------
   Sidebar/marka aksini koyu lacivert karaktere getirir.
   Icerik (main) alani ve KPI/dash-card light theme AYNEN korunur.
   Layout, spacing, component yapisi DOKUNULMAZ.
   ========================================================================== */

:root {
  --navy-950: #081633;
  --navy-900: #0A1B44;
  --navy-850: #0D2452;
  --navy-800: #12306A;
  --navy-700: #1A3E82;
  --navy-text: #F7FAFF;
  --navy-muted: #8FA4D1;
  --navy-border: rgba(255, 255, 255, 0.08);
  --navy-border-strong: rgba(255, 255, 255, 0.14);
  --navy-accent: #F2C94C;
}

/* Topbar/sidebar zemini her viewport'ta navy */
.topbar {
  background: var(--navy-900);
  color: var(--navy-text);
}

.brand { color: var(--navy-text); }
.brand:hover { color: var(--navy-text); }
.brand__name { color: var(--navy-text); }
.brand__logo {
  background: var(--navy-accent);
  color: var(--navy-950);
}

.topnav a { color: var(--navy-muted); }
.topnav a:hover {
  background: var(--navy-800);
  color: var(--navy-text);
}

/* Mobile hamburger toggle */
.topnav-toggle__summary {
  color: var(--navy-text);
  border-color: var(--navy-border-strong);
}
.topnav-toggle__summary:hover {
  background: var(--navy-border);
  border-color: var(--navy-border-strong);
}

/* Mobile dropdown panel acik */
@media (max-width: 599px) {
  .topnav-toggle__checkbox:checked ~ .topnav {
    background: var(--navy-850);
  }
}

/* Desktop sidebar (>=1024px) — premium navy */
@media (min-width: 1024px) {
  .topbar { background: var(--navy-900); }

  .topnav a {
    color: var(--navy-muted);
    border-left-color: transparent;
  }
  .topnav a:hover {
    background: var(--navy-800);
    color: var(--navy-text);
  }
  .topnav a::before {
    color: var(--navy-muted);
    opacity: .55;
  }

  /* Active item navy-700 + accent border */
  .topnav a.is-active,
  .topnav a[aria-current="page"] {
    background: var(--navy-700);
    color: var(--navy-text);
    border-left-color: var(--navy-accent);
  }
  .topnav a.is-active::before,
  .topnav a[aria-current="page"]::before {
    color: var(--navy-accent);
    opacity: 1;
  }

  /* Group titles */
  .topnav .sidebar__group-title {
    color: var(--navy-muted);
    border-top-color: var(--navy-border);
    opacity: .85;
  }

  /* User-menu */
  .topnav .user-menu {
    border-top-color: var(--navy-border-strong);
  }
  .topnav .user-menu > summary { background: transparent; }
  .topnav .user-menu > summary:hover { background: var(--navy-800); }
  .topnav .user-menu__avatar {
    background: var(--navy-accent);
    color: var(--navy-950);
  }
  .topnav .user-menu__name { color: var(--navy-text); }
  .topnav .user-menu__role { color: var(--navy-muted); }
  .topnav .user-menu__caret { color: var(--navy-muted); }

  /* Brand alt subtle border */
  .brand { border-bottom-color: var(--navy-border); }
}

/* Skip-link focus navy uyumu */
.skip-link:focus { background: var(--navy-900); color: var(--navy-text); }


/* ==========================================================================
   FAZ UI-ERP-1E — Detail + Form Template Polish (CSS-only)
   --------------------------------------------------------------------------
   Mevcut detail/form template DOM yapısı dokunulmadı.
   Sadece mevcut class'lara (.form-page, .form-fieldset, .field, .vd-back,
   .vd-section, .*-detail-card, .vehicle-detail) ERP polish katmanı eklendi.
   FINE-UI-1 data-fine-discount-auto JS hook'u dokunulmadı.
   ========================================================================== */

/* ---- Form page genel container ---- */
.form-page {
  max-width: 920px;
  margin: 0 auto;
}
.form-page__header {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.form-page__header h1 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.2px;
  margin: var(--space-1) 0 var(--space-1);
  color: var(--color-text);
}
.form-page__header .vd-back {
  font-size: 12px;
  color: var(--color-text-muted);
  text-decoration: none;
  display: inline-block;
  margin-bottom: var(--space-2);
}
.form-page__header .vd-back:hover { color: var(--color-primary); text-decoration: none; }
.form-page__header .form-page__lead {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: var(--space-1) 0 0;
}

/* ---- Form fieldset (section) ---- */
.form-fieldset {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  box-shadow: none;
}
.form-fieldset > legend {
  font-size: 11px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 700;
  padding: 0 var(--space-2);
  margin-bottom: var(--space-2);
}

/* ---- Form fields (label + input + error/help) ---- */
.field {
  margin-bottom: var(--space-3);
}
.field > label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2px;
  color: var(--color-text);
  margin-bottom: 4px;
}
.field__required { color: var(--color-danger); margin-left: 2px; }
.field input,
.field select,
.field textarea,
.model-form input:not([type="checkbox"]):not([type="radio"]),
.model-form select,
.model-form textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: var(--font-size-base);  /* iOS zoom-safe 16px */
  background: var(--color-surface-raised);
  color: var(--color-text);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.field input:focus,
.field select:focus,
.field textarea:focus,
.model-form input:focus,
.model-form select:focus,
.model-form textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}
.field .help, .field p.help {
  font-size: 11.5px;
  color: var(--color-text-muted);
  margin: 4px 0 0;
}
.field .errorlist,
.field ul.errorlist {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  font-size: 11.5px;
  color: var(--color-danger);
}

/* ---- Form actions bar ---- */
.form-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-top: var(--space-3);
}
.form-actions--reverse { flex-direction: row-reverse; }
.form-actions .btn { font-size: 13px; }

/* ---- Detail page back link ---- */
.vd-back {
  display: inline-block;
  font-size: 12px;
  color: var(--color-text-muted);
  text-decoration: none;
  margin-bottom: var(--space-3);
}
.vd-back:hover { color: var(--color-primary); text-decoration: none; }

/* ---- Detail card (vehicle/policy/inspection/fine) ---- */
.vehicle-detail,
.policy-detail,
.inspection-detail,
.fine-detail {
  max-width: 1180px;
  margin: 0 auto;
}
.policy-detail-card,
.inspection-detail-card,
.fine-detail-card {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  box-shadow: var(--shadow-xs);
}
.policy-detail-card--critical,
.inspection-detail-card--critical,
.fine-detail-card--critical { border-left-color: var(--color-danger); }
.policy-detail-card--warning,
.inspection-detail-card--warning,
.fine-detail-card--warning { border-left-color: var(--color-warning); }
.policy-detail-card--ok,
.inspection-detail-card--ok,
.fine-detail-card--ok { border-left-color: var(--color-success); }
.policy-detail-card--lost,
.fine-detail-card--lost { border-left-color: var(--color-danger); }

/* Detail card head: title + status pill */
.mtv-card__head,
.fine-detail-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}
.mtv-card__head h1,
.fine-detail-card__head h1 {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -.2px;
}

/* ---- VD sections (vehicle detail içindeki bilgi blokları) ---- */
.vd-header {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  box-shadow: var(--shadow-xs);
}
.vd-header__main { display: flex; flex-direction: column; gap: var(--space-1); }
.vd-section {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}
.vd-section h2,
.vd-section h3 {
  font-size: 12px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 700;
  margin: 0 0 var(--space-2);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
}

/* Vehicle plate badge */
.plate--big {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--color-text);
  margin: 0;
}

/* ---- Detail rows / vd-grid (label-value pairs) ---- */
.vd-grid {
  display: grid;
  gap: 6px var(--space-3);
  font-size: 13px;
}
.vd-grid > dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--color-text-muted);
  font-weight: 600;
  padding-top: 4px;
}
.vd-grid > dd {
  margin: 0;
  color: var(--color-text);
}

/* ---- Status pills (existing classes polish) ---- */
.policy-status-pill,
.inspection-status-pill,
.mtv-status-pill,
.fine-discount-pill {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  letter-spacing: .2px;
  white-space: nowrap;
}

/* ---- Upload / file input box ---- */
input[type="file"] {
  font-size: 13px;
  padding: 6px 8px;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface-soft);
  cursor: pointer;
}
input[type="file"]:hover { background: var(--color-surface-sunken); }

/* ---- Mobile stack ---- */
@media (max-width: 600px) {
  .form-page { padding: 0 var(--space-3); }
  .form-fieldset { padding: var(--space-3); }
  .form-actions { flex-direction: column; align-items: stretch; }
  .form-actions .btn { width: 100%; justify-content: center; }
  .mtv-card__head,
  .fine-detail-card__head { flex-direction: column; align-items: flex-start; }
  .vd-header { padding: var(--space-3); }
  .vd-section { padding: var(--space-3); }
  .plate--big { font-size: 22px; }
}

/* ---- ERP page util (additive, ileride DOM bağlanırsa) ---- */
.erp-page { max-width: 1180px; margin: 0 auto; }
.erp-page__header {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.erp-page__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ==========================================================================
   FAZ UI-ERP-2L — List Screens Full Conversion to Claude Design
   Compact ERP table + KPI strip + toolbar pattern, uniform across modules.
   Mevcut .vehicles__table, .mtv-card, .fine-chips altyapısı korunur;
   bu blok yeni .erp-list hiyerarşisi getirir ve list template'leri dönüşür.
   ========================================================================== */

.erp-list { max-width: 1320px; margin: 0 auto; }

/* Page header */
.erp-list__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.erp-list__header-main h1 {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
  color: var(--color-text-strong, #111827);
}
.erp-list__header-lead {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0;
}
.erp-list__header-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 4px;
}
.erp-list__header-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* KPI strip — equal cells, compact ERP look */
.erp-kpi-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.erp-kpi-strip--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.erp-kpi-strip--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.erp-kpi {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 68px;
  position: relative;
  overflow: hidden;
}
.erp-kpi::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--color-border);
}
.erp-kpi__label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
}
.erp-kpi__value {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text-strong, #111827);
  margin: 0;
  line-height: 1.1;
}
.erp-kpi__hint {
  font-size: 11px;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.3;
}
.erp-kpi--critical::before { background: #DC2626; }
.erp-kpi--critical .erp-kpi__value { color: #DC2626; }
.erp-kpi--warning::before { background: #D97706; }
.erp-kpi--warning .erp-kpi__value { color: #B45309; }
.erp-kpi--horizon::before { background: #2563EB; }
.erp-kpi--horizon .erp-kpi__value { color: #1D4ED8; }
.erp-kpi--lost::before { background: #6B7280; }
.erp-kpi--lost .erp-kpi__value { color: #4B5563; }
.erp-kpi--ok::before { background: #059669; }
.erp-kpi--ok .erp-kpi__value { color: #047857; }
.erp-kpi--total::before { background: var(--navy-700, #1A3E82); }

/* Toolbar (chip row) */
.erp-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--space-2);
}
.erp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface, #fff);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  transition: background-color 0.12s, border-color 0.12s;
}
.erp-chip:hover {
  background: var(--color-surface-soft, #F9FAFB);
  border-color: #D1D5DB;
}
.erp-chip.is-active {
  background: var(--navy-900, #0A1B44);
  color: #fff;
  border-color: var(--navy-900, #0A1B44);
}
.erp-chip--critical.is-active { background: #DC2626; border-color: #DC2626; }
.erp-chip--warning.is-active { background: #D97706; border-color: #D97706; }
.erp-chip--lost.is-active { background: #6B7280; border-color: #6B7280; }
.erp-chip--cancelled.is-active { background: #6B7280; border-color: #6B7280; }

/* Filterbar — single row, compact */
.erp-filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  margin-bottom: var(--space-3);
}
.erp-filterbar input[type="search"],
.erp-filterbar input[type="text"],
.erp-filterbar input[type="date"],
.erp-filterbar input[type="number"],
.erp-filterbar select {
  height: 34px;
  padding: 0 10px;
  font-size: 13px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: #fff;
  color: var(--color-text);
}
.erp-filterbar input[type="search"] {
  flex: 1 1 220px;
  min-width: 180px;
}
.erp-filterbar select { min-width: 130px; }
.erp-filterbar input[type="date"] { min-width: 130px; }
.erp-filterbar .erp-filterbar__check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--color-text);
  white-space: nowrap;
}
.erp-filterbar .btn { height: 34px; padding: 0 14px; font-size: 13px; }

/* Compact ERP table */
.erp-table-wrap {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
}
.erp-table-wrap--scroll { overflow-x: auto; }
.erp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.erp-table thead th {
  padding: 10px 12px;
  text-align: left;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--color-surface-soft, #F9FAFB);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.erp-table tbody td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--color-border-soft, #F3F4F6);
  vertical-align: middle;
  color: var(--color-text);
}
.erp-table tbody tr:last-child td { border-bottom: none; }
.erp-table tbody tr:hover td { background: var(--color-surface-soft, #FAFBFC); }
.erp-table .erp-table__plate {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 13.5px;
}
.erp-table .erp-table__plate a { color: var(--navy-900, #0A1B44); text-decoration: none; }
.erp-table .erp-table__plate a:hover { text-decoration: underline; }
.erp-table .erp-table__num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.erp-table .erp-table__num--right { text-align: right; }
.erp-table .erp-table__sub { color: var(--color-text-muted); font-size: 11.5px; display: block; margin-top: 1px; }
.erp-table .erp-table__actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.erp-table .erp-table__actions .btn { padding: 4px 10px; font-size: 12px; height: auto; }
.erp-table th.is-right, .erp-table td.is-right { text-align: right; }
.erp-table th.is-center, .erp-table td.is-center { text-align: center; }

/* Group sections (vehicles owner groups) */
.erp-table__group-title {
  padding: 10px 12px;
  background: var(--navy-900, #0A1B44);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.erp-table__group-title .erp-table__group-meta {
  font-weight: 400;
  font-size: 11.5px;
  opacity: 0.85;
  text-transform: none;
  letter-spacing: 0;
}
.erp-list__group + .erp-list__group { margin-top: var(--space-3); }

/* Uniform pill */
.erp-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: #F3F4F6;
  color: #374151;
  white-space: nowrap;
  border: 1px solid transparent;
}
.erp-pill--ok { background: #DCFCE7; color: #166534; }
.erp-pill--critical { background: #FEE2E2; color: #991B1B; }
.erp-pill--warning { background: #FEF3C7; color: #92400E; }
.erp-pill--horizon { background: #DBEAFE; color: #1E40AF; }
.erp-pill--lost { background: #E5E7EB; color: #4B5563; }
.erp-pill--cancelled { background: #E5E7EB; color: #6B7280; text-decoration: line-through; }
.erp-pill--paid { background: #D1FAE5; color: #065F46; }
.erp-pill--unpaid { background: #FEF3C7; color: #92400E; }
.erp-pill--overdue { background: #FEE2E2; color: #991B1B; }
.erp-pill--draft { background: #F3F4F6; color: #6B7280; }
.erp-pill--renewed { background: #DBEAFE; color: #1E40AF; }
.erp-pill--expired { background: #FEE2E2; color: #991B1B; }
/* expiry_class filter modifiers (1day/3days/7days/warn/unknown) */
.erp-pill--1day { background: #FEE2E2; color: #991B1B; }
.erp-pill--3days { background: #FEE2E2; color: #B91C1C; }
.erp-pill--7days { background: #FEF3C7; color: #92400E; }
.erp-pill--warn { background: #FEF3C7; color: #B45309; }
.erp-pill--unknown { background: #F3F4F6; color: #6B7280; }

/* Empty state inside list */
.erp-empty {
  padding: var(--space-5) var(--space-3);
  background: var(--color-surface, #fff);
  border: 1px dashed var(--color-border);
  border-radius: 8px;
  text-align: center;
  color: var(--color-text-muted);
}
.erp-empty strong { color: var(--color-text); display: block; margin-bottom: 6px; font-size: 14px; }
.erp-empty .erp-empty__actions {
  margin-top: var(--space-3);
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
}

/* Chat inbox polish — list view, ERP feel */
.erp-inbox-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
}
.erp-inbox-item {
  border-bottom: 1px solid var(--color-border-soft, #F3F4F6);
}
.erp-inbox-item:last-child { border-bottom: none; }
.erp-inbox-item__link {
  display: block;
  padding: 12px 14px;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.12s;
}
.erp-inbox-item__link:hover { background: var(--color-surface-soft, #FAFBFC); }
.erp-inbox-item--unread .erp-inbox-item__link { background: #F0F7FF; }
.erp-inbox-item--unread .erp-inbox-item__link:hover { background: #E6F0FB; }
.erp-inbox-item__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.erp-inbox-item__subject {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-strong, #111827);
  margin: 0;
}
.erp-inbox-item__date {
  font-size: 11.5px;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.erp-inbox-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 4px 0;
}
.erp-inbox-item__snippet {
  font-size: 12.5px;
  color: var(--color-text-muted);
  margin: 4px 0 0;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.erp-inbox-item__sender { font-weight: 600; color: var(--color-text); }
.erp-inbox-badge-new {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--navy-700, #1A3E82);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-left: 6px;
}

/* Mobile stack */
@media (max-width: 900px) {
  .erp-kpi-strip,
  .erp-kpi-strip--5,
  .erp-kpi-strip--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .erp-kpi-strip--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .erp-list__header {
    flex-direction: column;
    align-items: stretch;
  }
  .erp-list__header-actions { justify-content: flex-start; }
  .erp-filterbar { flex-direction: column; align-items: stretch; }
  .erp-filterbar input,
  .erp-filterbar select,
  .erp-filterbar .btn { width: 100%; }
  .erp-table-wrap { overflow-x: auto; }
  .erp-table { min-width: 720px; }
  .erp-toolbar { gap: 4px; }
  .erp-chip { font-size: 11.5px; padding: 5px 10px; }
}

/* ==========================================================================
   SIDEBAR-FIX-1 — Desktop sidebar alignment hotfix
   --------------------------------------------------------------------------
   Root cause: >=1024px desktop sidebar bloğunda .topbar__inner
   flex-direction:column + height:100% verir AMA base'deki flex-wrap:wrap
   (.topbar__inner satır 160 ve .topnav satır 192) ile margin-left:auto
   (.topnav satır 188) reset edilmemişti. Nav içeriği viewport yüksekliğini
   aşınca flex kolonu İKİNCİ bir kolona sarıyor → "sidebar iki kolona
   bölünmüş" + grup başlığı kesiliyor + içerik sağa kayıyor.
   Çözüm: yalnız >=1024'te no-wrap tek kolon + auto margin sıfırlama +
   group-title ellipsis. DOM/JS/permission/dashboard/list dokunulmaz.
   Rollback: bu blok silinince SIDEBAR-FIX-1 öncesi davranış döner.
   ========================================================================== */
@media (min-width: 1024px) {
  .topbar__inner {
    flex-wrap: nowrap;
    max-width: none;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
  }
  .topnav {
    flex-wrap: nowrap;
    margin-left: 0;
    box-sizing: border-box;
  }
  .topnav a {
    width: 100%;
    box-sizing: border-box;
  }
  .topnav .sidebar__group-title {
    width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .topnav .user-menu {
    margin-left: 0;
    width: 100%;
    box-sizing: border-box;
  }
}

/* ==========================================================================
   PROFILE-MENU-FIX-1 — Sidebar user profile dropdown visibility hotfix
   --------------------------------------------------------------------------
   Root cause: desktop sidebar .topbar { overflow-y:auto } (UI-ERP-1C, satır
   3599) -> CSS spec geregi diger eksen de 'auto' olur, .topbar her iki
   eksende clip yapar. .topnav .user-menu__panel (satır 3656)
   position:absolute; left:var(--sidebar-width)(=240px); bottom:0 — yani
   240px genisligindeki topbar'in DISINDA konumlaniyor -> panel render
   ediliyor ama .topbar overflow'u tarafindan tamamen kirpiliyor. <details>
   aciliyor (caret donuyor) ama menu gorunmuyor + sidebar altinda bos alan.
   Cozum: yalniz >=1024'te paneli position:fixed yapip TUM ancestor
   overflow clip'inden kacirmak; sidebar ile hizali, yukari dogru acilan,
   ic-scroll'lu, yuksek z-index. Logout form/CSRF/URL ve <details>
   mekanizmasi DOKUNULMADI. <1024 (mobil/tablet) etkilenmez.
   Rollback: bu blok silinince PROFILE-MENU-FIX-1 oncesi davranis doner.
   ========================================================================== */
@media (min-width: 1024px) {
  .topnav .user-menu { position: static; }
  .topnav .user-menu__panel {
    position: fixed;
    left: var(--space-2);
    right: auto;
    top: auto;
    bottom: var(--space-2);
    width: calc(var(--sidebar-width) - (var(--space-2) * 2));
    min-width: 0;
    max-width: none;
    max-height: calc(100vh - (var(--space-2) * 2));
    overflow-y: auto;
    margin: 0;
    z-index: 200;
  }
}

/* ==========================================================================
   UX-POLISH-1 — Directory (Rehber) ERP list polish
   --------------------------------------------------------------------------
   QA-ORCH-1 NOTE-1: /rehber/ eski .directory card-grid -> erp-list/erp-table
   diline cekildi. Bu blok yalniz rehber'e ozel iki kucuk ek davranis:
   pasif satir soluk + aksiyon hucresindeki toggle formunun inline durmasi.
   Diger erp-* kurallari UI-ERP-2L'den miras; backend/DOM/JS dokunulmadi.
   Rollback: bu blok + directory/list.html eski haline donerse onceki davranis.
   ========================================================================== */
.erp-table tbody tr.directory-row--inactive td { opacity: .55; }
.erp-table .erp-table__actions .directory-toggle-form {
  margin: 0;
  padding: 0;
  display: inline-flex;
}

/* ==========================================================================
   MOBILE-QA-FIX-1 — Mobile filterbar control normalization
   --------------------------------------------------------------------------
   Root cause: .erp-filterbar input[type="search"] = flex:1 1 220px (satir
   5321). @media (max-width:640px) (satir 5547) .erp-filterbar'i
   flex-direction:column yapar AMA arama input'unun flex'ini reset etmez.
   Kolon flex'te flex-basis ana-eksen=YUKSEKLIK olur ve CSS spec geregi
   flex-basis(220px) height:34px'i override eder -> arama kutusu ~220px
   yukseklige siser (iPhone Safari'de buyuk textarea/kart gorunumu).
   Ek: .erp-filterbar kontrol font-size 13px < 16px -> iOS focus zoom riski.
   Cozum: yalniz <=640'ta tum filterbar kontrollerini flex:0 0 auto +
   sabit 44px yukseklik + 16px font (iOS zoom-safe) + box-sizing.
   Desktop >=641 ve diger bilesenler etkilenmez; DOM/JS/backend dokunulmadi.
   Rollback: bu blok silinince MOBILE-QA-FIX-1 oncesi davranis doner.
   ========================================================================== */
@media (max-width: 640px) {
  .erp-filterbar input[type="search"],
  .erp-filterbar input[type="text"],
  .erp-filterbar input[type="date"],
  .erp-filterbar input[type="number"],
  .erp-filterbar select,
  .erp-filterbar .btn {
    flex: 0 0 auto;
    width: 100%;
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    line-height: 1.2;
    font-size: 16px;
    box-sizing: border-box;
  }
  .erp-filterbar input[type="search"] { min-width: 0; }
  .erp-filterbar .erp-filterbar__check {
    min-height: 44px;
    font-size: 14px;
  }
}

/* ==========================================================================
   MOBILE-QA-FIX-2 — Mobile date filter visibility
   --------------------------------------------------------------------------
   Sorun: <input type="date"> bos value ile iOS Safari'de bos beyaz kutu
   gibi gorunur (HTML spec: date input placeholder yok; aria-label/title
   gorsel degil). Kullanici tarih filtresi oldugunu anlamiyor.
   Cozum: her date input'u .erp-date-field label'i ile sarmala + mobil-only
   gorunur .erp-date-field__label (Baslangic / Bitis). Desktop'ta wrapper
   display:contents -> layout DEGISMEZ (bare input gibi davranir, label
   gizli). Mobilde grid + label gorunur. input name/value/type/form
   submit/query param DEGISMEDI; MOBILE-QA-FIX-1 (44px/16px) descendant
   selector oldugu icin korunur.
   Rollback: bu blok + 4 template wrap geri alinirsa onceki davranis.
   ========================================================================== */
.erp-filterbar .erp-date-field { display: contents; }
.erp-filterbar .erp-date-field__label { display: none; }
@media (max-width: 640px) {
  .erp-filterbar .erp-date-field {
    display: grid;
    gap: 4px;
    width: 100%;
  }
  .erp-filterbar .erp-date-field__label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-text-muted, #667085);
  }
}

/* ==========================================================================
   PROFILE-MENU-FIX-2 — user profile dropdown close UX
   --------------------------------------------------------------------------
   PROFILE-MENU-FIX-1 paneli gorunur yapti ama kapatma yolu netti degildi.
   Bu blok yalnız panel icine sag-ust [×] kapatma butonunu stilize eder.
   Davranis (outside click + ESC + buton click) `static/js/user-menu.js`
   ile saglanir; native <details> re-click toggle korunur. Logout form /
   CSRF / DOM yapisi degismedi.
   ========================================================================== */
.user-menu__panel { position: relative; }
.user-menu__close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-muted, #6c727b);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 0.12s, color 0.12s;
  z-index: 1;
}
.user-menu__close:hover {
  background: var(--color-surface-alt, #f4f6f9);
  color: var(--color-text, #1b1f24);
}
.user-menu__close:focus-visible {
  outline: 2px solid var(--color-primary, #0b3d91);
  outline-offset: -2px;
}
.user-menu__header { padding-right: 36px; }

/* ==========================================================================
   CHAT-SEED-1B — Chat UI visual polish (template + CSS + JS only)
   --------------------------------------------------------------------------
   CHAT-SEED-1A audit'in SAFE_NOW sınıfı: date separator, bubble polish,
   empty state, smart-scroll new-message pill, sender color palette,
   mobile dvh+safe-area. Backend / model / migration / view / permission
   DOKUNULMADI. CHAT-1B'nin mevcut .chat-* selector'ları korundu, üzerine
   additive polish eklendi.
   Rollback: bu blok silinince CHAT-1B davranışı döner.
   ========================================================================== */

/* Stream layout — desktop max-height korunur, mobile dvh + safe-area */
.chat-detail.chat-page { display: flex; flex-direction: column; }
.chat-stream {
  scroll-behavior: smooth;
  position: relative;
}

/* Date separator — Bugün/Dün/DD.MM.YYYY pill */
.chat-date-sep {
  text-align: center;
  margin: 14px 0 6px;
  position: relative;
}
.chat-date-sep span {
  display: inline-block;
  background: #dde6ee;
  color: #52606d;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 999px;
  letter-spacing: .02em;
  line-height: 1.6;
}

/* Bubble polish — sender color via CSS var, smoother corners */
.chat-bubble {
  border-radius: 14px;
  padding: 10px 14px;
  line-height: 1.5;
  transition: box-shadow .12s, transform .12s;
}
.chat-bubble--own {
  background: var(--color-primary, #0b3d91);
  color: #fff;
  border-color: transparent;
  border-bottom-right-radius: 4px;
}
.chat-bubble--own .chat-bubble__sender,
.chat-bubble--own .chat-bubble__time,
.chat-bubble--own .chat-bubble__edited {
  color: rgba(255,255,255,.9);
}
.chat-bubble--own .chat-bubble__sender { color: #fff; }
.chat-bubble--other {
  background: #fff;
  border-color: #e0e6eb;
  border-bottom-left-radius: 4px;
  /* Sender accent: per-bubble CSS var --chat-sender-color set by JS */
  border-left: 3px solid var(--chat-sender-color, #94a3b8);
}
.chat-bubble--deleted {
  opacity: .65;
  font-style: italic;
  background: #f4f6fa !important;
  color: #6b7280 !important;
  border-color: #e0e6eb !important;
  border-left-color: #e0e6eb !important;
}
.chat-bubble--deleted .chat-bubble__body::before {
  content: "🚫 ";
  opacity: .7;
}

/* Other-bubble sender highlight (CSS var for sender label color) */
.chat-bubble--other .chat-bubble__sender {
  color: var(--chat-sender-color, #1a5276);
}

/* Action buttons: smaller + dimmer until hover */
.chat-bubble__actions {
  opacity: .55;
  transition: opacity .12s;
  margin-top: 6px;
}
.chat-bubble:hover .chat-bubble__actions,
.chat-bubble:focus-within .chat-bubble__actions {
  opacity: 1;
}
.chat-bubble__actions .btn--small {
  padding: 2px 8px;
  font-size: 0.72rem;
}
.chat-bubble--own .chat-bubble__actions .btn--ghost-light {
  background: rgba(255,255,255,.18);
  color: #fff;
  border-color: rgba(255,255,255,.3);
}
.chat-bubble--own .chat-bubble__actions .btn--ghost-light:hover {
  background: rgba(255,255,255,.28);
}

/* Inline reply preview inside bubble */
.chat-reply-preview--inline {
  background: rgba(0,0,0,.04);
  border-left: 3px solid #94a3b8;
  border-radius: 6px;
  padding: 5px 9px;
  margin: 2px 0 6px;
  font-size: 0.82rem;
  color: #4b5563;
}
.chat-bubble--own .chat-reply-preview--inline {
  background: rgba(255,255,255,.16);
  border-left-color: rgba(255,255,255,.5);
  color: rgba(255,255,255,.92);
}

/* Empty states (thread detail + inbox) */
.chat-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 24px;
  text-align: center;
  color: #6b7280;
}
.chat-empty-state__icon {
  font-size: 42px;
  line-height: 1;
  opacity: .55;
}
.chat-empty-state__title {
  font-size: 1rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0;
}
.chat-empty-state__lead {
  margin: 0;
  font-size: 0.9rem;
  max-width: 380px;
  line-height: 1.55;
}

/* "Yeni mesaj" pill (smart scroll) — pinned bottom-center over stream */
.chat-newmsg-pill {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  background: var(--color-primary, #0b3d91);
  color: #fff;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  cursor: pointer;
  border: 0;
  z-index: 5;
  display: none;
  letter-spacing: .02em;
}
.chat-newmsg-pill.is-visible { display: inline-block; }
.chat-newmsg-pill:hover { filter: brightness(1.05); }

/* Composer polish — safe-area + better spacing */
.chat-composer {
  padding: 12px 14px;
  padding-bottom: max(12px, calc(env(safe-area-inset-bottom, 0px) + 8px));
}
.chat-composer textarea {
  min-height: 44px;
  font-size: 16px; /* iOS zoom-safe */
  border-radius: 10px;
  padding: 10px 12px;
}
.chat-composer textarea:focus {
  border-color: var(--color-primary, #0b3d91);
  outline: 2px solid rgba(11, 61, 145, .12);
  outline-offset: 1px;
}

/* Reply preview bar (over composer textarea) — clearer affordance */
.chat-composer .chat-reply-preview {
  background: rgba(11, 61, 145, .06);
  border-left: 3px solid var(--color-primary, #0b3d91);
  border-radius: 6px;
  padding: 6px 10px;
  margin-bottom: 6px;
  font-size: 0.82rem;
  color: #1f2937;
}
.chat-composer .chat-reply-preview .btn { padding: 2px 8px; font-size: 0.75rem; }

/* Edit modal polish (mevcut details element, CSS-only zaten) */
.chat-edit-modal[open] {
  border-color: var(--color-primary, #0b3d91);
  box-shadow: 0 6px 24px rgba(11,61,145, .15);
}
.chat-edit-modal summary {
  font-weight: 700;
  cursor: pointer;
  padding: 6px 0;
}

/* Inbox polish — unread-aware row + chip color + meta layout */
.erp-inbox-item--unread {
  border-left: 4px solid var(--color-primary, #0b3d91);
  background: rgba(11, 61, 145, .03);
}
.erp-inbox-badge-new {
  display: inline-block;
  background: var(--color-primary, #0b3d91);
  color: #fff;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.66rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 700;
  margin-left: 6px;
  vertical-align: middle;
}
.erp-inbox-item__sender {
  font-weight: 600;
  color: #1f2937;
  margin-right: 2px;
}

/* Mobile polish — dvh + safe-area */
@media (max-width: 720px) {
  .chat-stream {
    max-height: 50vh;
    max-height: 50dvh;
  }
  .chat-bubble { max-width: 88%; padding: 9px 12px; }
  .chat-bubble__actions .btn--small { padding: 4px 8px; min-height: 28px; }
  .chat-composer textarea { font-size: 16px; }
  .chat-newmsg-pill { bottom: 8px; font-size: 0.72rem; padding: 5px 12px; }
}

/* Per-sender hue palette (used via JS apply-class on bubble: .chat-bubble--hue-N) */
.chat-bubble--hue-0 { --chat-sender-color: #b45309; }  /* amber */
.chat-bubble--hue-1 { --chat-sender-color: #1d4ed8; }  /* blue */
.chat-bubble--hue-2 { --chat-sender-color: #be185d; }  /* pink */
.chat-bubble--hue-3 { --chat-sender-color: #047857; }  /* emerald */
.chat-bubble--hue-4 { --chat-sender-color: #6d28d9; }  /* violet */
.chat-bubble--hue-5 { --chat-sender-color: #c2410c; }  /* orange */
.chat-bubble--hue-6 { --chat-sender-color: #4338ca; }  /* indigo */

/* ==========================================================================
   CHAT-SEED-1C — Visual tightening + reply/edit/revoke UX polish
   --------------------------------------------------------------------------
   Kullanıcı feedback'i (canlı ekran): chat hâlâ "premium" değil; bubble çok
   geniş (stream 1632px → bubble 1127px), reply preview sarı boş şerit, pill
   browser-default, action buttons ham, composer ham, inbox düz.
   Bu blok 1B üzerine *additive* visual sıkılaştırma:
     - chat shell max-width 980/1100px centered → premium dar konsol görünüm
     - bubble max-width clamp(260, 60%, 520) absolute cap
     - reply preview → neutral primary-bordered quote card
     - date sep → ortada ince çizgi + pill
     - pill button-reset (appearance:none + font-family:inherit)
     - action buttons pill style + hover micro-interaction
     - composer card-style + larger radius, accent send button
     - inbox thread row hover + initial-letter avatar (CSS-only)
   Backend / model / view / URL / permission / polling JSON / send/edit/revoke
   DOKUNULMADI.
   Rollback: bu blok silinince 1B davranışı döner.
   ========================================================================== */

/* Chat sayfa kabugu — kısıtlı genişlik, ortalanmış (her iki sayfa için) */
.chat-page {
  max-width: 1080px;
  margin: 0 auto;
}
.chat-page.erp-list { padding: var(--space-3, 12px) var(--space-3, 12px); }

/* Inbox: list ve kart polish */
.chat-page .erp-list__header { margin-bottom: var(--space-3, 12px); }
.chat-page .erp-inbox-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.chat-page .erp-inbox-item {
  background: #fff;
  border: 1px solid #e0e6eb;
  border-radius: 12px;
  padding: 0;
  transition: box-shadow .14s, border-color .14s, transform .12s;
}
.chat-page .erp-inbox-item:hover {
  border-color: rgba(11, 61, 145, .35);
  box-shadow: 0 4px 14px rgba(11, 61, 145, .08);
}
.chat-page .erp-inbox-item__link {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
  align-items: start;
}
/* CSS-only initial-letter avatar from data-initial; fallback boş gri */
.chat-page .erp-inbox-item__link::before {
  content: attr(data-initial);
  grid-row: 1 / span 3;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0b3d91 0%, #1d54a8 100%);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  flex-shrink: 0;
  letter-spacing: .02em;
}
.chat-page .erp-inbox-item__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
  grid-column: 2 / 3;
}
.chat-page .erp-inbox-item__subject {
  font-size: 0.96rem;
  font-weight: 700;
  color: #1f2937;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-page .erp-inbox-item__date {
  font-size: 0.74rem;
  color: #6b7280;
  white-space: nowrap;
  grid-column: 3 / 4;
  align-self: start;
}
.chat-page .erp-inbox-item__meta {
  grid-column: 2 / 4;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 4px;
}
.chat-page .erp-inbox-item__snippet {
  grid-column: 2 / 4;
  margin: 0;
  font-size: 0.84rem;
  color: #4b5563;
  line-height: 1.45;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.chat-page .erp-inbox-item--unread .erp-inbox-item__subject { color: #0b3d91; }
.chat-page .erp-inbox-item--unread .erp-inbox-item__link::before {
  box-shadow: 0 0 0 3px rgba(11, 61, 145, .18);
}

/* Chat detail header polish */
.chat-page .chat-detail__header {
  background: #fff;
  border: 1px solid #e0e6eb;
  border-radius: 12px;
  padding: 12px 16px;
  margin: 0 0 12px;
}
.chat-page .chat-detail__header h1 {
  font-size: 1.05rem;
  margin: 4px 0;
  color: #1f2937;
}
.chat-page .vd-back {
  display: inline-block;
  font-size: 0.82rem;
  color: #4b5563;
  text-decoration: none;
  margin-bottom: 6px;
}
.chat-page .vd-back:hover { color: #0b3d91; }

/* Stream: card panel, kısıtlı yükseklik (mevcut), iç padding */
.chat-page .chat-stream {
  background: #f7f9fc;
  border: 1px solid #e0e6eb;
  border-radius: 12px;
  padding: 16px;
  max-height: 64vh;
  max-height: 64dvh;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 12px;
}

/* Bubble: tight max-width with absolute cap (premium chat width) */
.chat-page .chat-bubble {
  max-width: clamp(260px, 60%, 520px);
  padding: 10px 14px;
  border-radius: 14px;
  position: relative;
}
.chat-page .chat-bubble--own {
  background: #0b3d91;
  color: #fff;
  border: 0;
  border-bottom-right-radius: 4px;
  margin-left: auto;
  box-shadow: 0 1px 2px rgba(11, 61, 145, .12);
}
.chat-page .chat-bubble--other {
  background: #fff;
  color: #1f2937;
  border: 1px solid #e0e6eb;
  border-bottom-left-radius: 4px;
  border-left: 3px solid var(--chat-sender-color, #94a3b8);
  margin-right: auto;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.chat-page .chat-bubble--deleted {
  background: #f3f5f8 !important;
  border: 1px dashed #cdd5dd !important;
  border-left-color: #cdd5dd !important;
  color: #6b7280 !important;
  opacity: .85;
  font-style: italic;
  max-width: clamp(220px, 50%, 440px) !important;
}
.chat-page .chat-bubble--deleted .chat-bubble__body { font-size: 0.88rem; }
.chat-page .chat-bubble--deleted .chat-bubble__body::before { content: "🚫 "; opacity: .7; }
.chat-page .chat-bubble--deleted .chat-bubble__actions { display: none; }

.chat-page .chat-bubble__head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
  font-size: 0.74rem;
}
.chat-page .chat-bubble__sender { font-size: 0.78rem; font-weight: 700; }
.chat-page .chat-bubble--own .chat-bubble__sender,
.chat-page .chat-bubble--own .chat-bubble__time,
.chat-page .chat-bubble--own .chat-bubble__edited { color: rgba(255, 255, 255, .82); }
.chat-page .chat-bubble--own .chat-bubble__sender { color: #fff; }
.chat-page .chat-bubble__body {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  word-break: break-word;
}

/* Inline reply preview inside bubble — neutral quote card */
.chat-page .chat-reply-preview--inline {
  background: rgba(0, 0, 0, .045);
  border: 0;
  border-left: 3px solid #94a3b8;
  border-radius: 6px;
  padding: 5px 9px;
  margin: 4px 0 6px;
  font-size: 0.78rem;
  color: #4b5563;
  display: block;
}
.chat-page .chat-bubble--own .chat-reply-preview--inline {
  background: rgba(255, 255, 255, .14);
  border-left-color: rgba(255, 255, 255, .55);
  color: rgba(255, 255, 255, .94);
}

/* Action buttons — pill, subtle until hover */
.chat-page .chat-bubble__actions {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  opacity: .55;
  transition: opacity .12s;
}
.chat-page .chat-bubble:hover .chat-bubble__actions,
.chat-page .chat-bubble:focus-within .chat-bubble__actions { opacity: 1; }
.chat-page .chat-bubble__actions .btn {
  appearance: none;
  border: 1px solid transparent;
  background: rgba(0, 0, 0, .035);
  color: #4b5563;
  padding: 3px 10px;
  font-size: 0.72rem;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1.6;
  transition: background .12s, color .12s, border-color .12s;
}
.chat-page .chat-bubble__actions .btn:hover {
  background: rgba(0, 0, 0, .07);
  color: #1f2937;
}
.chat-page .chat-bubble--own .chat-bubble__actions .btn {
  background: rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .94);
}
.chat-page .chat-bubble--own .chat-bubble__actions .btn:hover {
  background: rgba(255, 255, 255, .22);
  color: #fff;
}
.chat-page .chat-bubble__actions .chat-revoke-btn:hover {
  color: #b91c1c;
  background: rgba(185, 28, 28, .08);
}
.chat-page .chat-bubble--own .chat-bubble__actions .chat-revoke-btn:hover {
  color: #fff;
  background: rgba(244, 90, 90, .26);
}

/* Date separator — orta pill + ince çizgi (hairline) */
.chat-page .chat-date-sep {
  position: relative;
  text-align: center;
  margin: 18px 0 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.chat-page .chat-date-sep::before,
.chat-page .chat-date-sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(15, 23, 42, .08);
}
.chat-page .chat-date-sep span {
  flex: 0 0 auto;
  background: #fff;
  border: 1px solid #e0e6eb;
  color: #4b5563;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
}

/* "Yeni mesaj" pill — button reset + premium look */
.chat-page .chat-newmsg-pill {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  background: #0b3d91;
  color: #fff;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: .02em;
  box-shadow: 0 4px 14px rgba(11, 61, 145, .28);
  cursor: pointer;
  border: 0;
  z-index: 5;
  display: none;
}
.chat-page .chat-newmsg-pill.is-visible { display: inline-block; }
.chat-page .chat-newmsg-pill:hover { background: #093275; filter: none; }

/* Composer — card footer style, modern input bar */
.chat-page .chat-composer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #fff;
  border: 1px solid #e0e6eb;
  border-radius: 12px;
  padding: 12px 14px;
  padding-bottom: max(12px, calc(env(safe-area-inset-bottom, 0px) + 8px));
  box-shadow: 0 -1px 0 rgba(0, 0, 0, .02);
}
.chat-page .chat-composer textarea {
  width: 100%;
  min-height: 44px;
  max-height: 160px;
  padding: 10px 12px;
  border: 1px solid #d0d7de;
  border-radius: 10px;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  resize: vertical;
  outline: 0;
  transition: border-color .12s, box-shadow .12s;
}
.chat-page .chat-composer textarea:focus {
  border-color: #0b3d91;
  box-shadow: 0 0 0 3px rgba(11, 61, 145, .14);
}
.chat-page .chat-composer .chat-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.chat-page .chat-composer .btn--primary {
  background: #0b3d91;
  border-color: #0b3d91;
  border-radius: 10px;
  padding: 8px 18px;
  font-weight: 700;
  letter-spacing: .02em;
}

/* Reply preview composer bar — quote card (sarı yerine primary border-left) */
.chat-page .chat-composer .chat-reply-preview {
  background: rgba(11, 61, 145, .05);
  border: 1px solid rgba(11, 61, 145, .14);
  border-left: 3px solid #0b3d91;
  border-radius: 8px;
  padding: 8px 10px;
  margin: 0;
  font-size: 0.82rem;
  color: #1f2937;
  display: flex;
  align-items: center;
  gap: 8px;
}
.chat-page .chat-composer .chat-reply-preview[hidden] { display: none !important; }
.chat-page .chat-composer .chat-reply-preview .muted {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #4b5563;
}
.chat-page .chat-composer .chat-reply-preview .btn {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 0.9rem;
  color: #6b7280;
  cursor: pointer;
  line-height: 1;
}
.chat-page .chat-composer .chat-reply-preview .btn:hover {
  background: rgba(11, 61, 145, .1);
  color: #0b3d91;
}

/* Read-only note */
.chat-page .chat-readonly-note {
  background: #f8fafc;
  border: 1px dashed #cdd5dd;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.84rem;
  color: #4b5563;
}

/* Edit modal polish */
.chat-page .chat-edit-modal {
  background: #fff;
  border: 1px solid #e0e6eb;
  border-radius: 12px;
  padding: 12px 14px;
  margin: 8px 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
}
.chat-page .chat-edit-modal[open] {
  border-color: #0b3d91;
  box-shadow: 0 6px 22px rgba(11, 61, 145, .18);
}
.chat-page .chat-edit-modal summary {
  font-weight: 700;
  cursor: pointer;
  padding: 4px 0;
  font-size: 0.92rem;
  color: #1f2937;
}
.chat-page .chat-edit-modal textarea {
  width: 100%;
  min-height: 64px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 0.94rem;
  border: 1px solid #d0d7de;
  border-radius: 10px;
  margin-top: 8px;
}

/* Empty state polish (kullanan inbox + thread) */
.chat-page .chat-empty-state {
  background: #fff;
  border: 1px solid #e0e6eb;
  border-radius: 12px;
  padding: 56px 24px;
  margin: 8px 0;
}
.chat-page .chat-empty-state__icon { font-size: 48px; opacity: .55; }

/* Participants / vehicle chip header polish */
.chat-page .chat-participant-chip {
  background: #eef2f7;
  color: #1f2937;
  font-size: 0.72rem;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 600;
}
.chat-page .chat-vehicle-chip {
  background: rgba(11, 61, 145, .08);
  color: #0b3d91;
  font-size: 0.72rem;
  padding: 3px 10px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
}

/* Mobile */
@media (max-width: 720px) {
  .chat-page { max-width: 100%; padding: 8px; }
  .chat-page .chat-bubble { max-width: clamp(220px, 80%, 88vw); }
  .chat-page .chat-bubble--deleted { max-width: clamp(200px, 70%, 80vw) !important; }
  .chat-page .chat-stream { max-height: 56vh; max-height: 56dvh; padding: 12px; }
  .chat-page .erp-inbox-item__link { grid-template-columns: 36px 1fr auto; gap: 10px; padding: 12px; }
  .chat-page .erp-inbox-item__link::before { width: 36px; height: 36px; font-size: 0.92rem; }
  .chat-page .chat-newmsg-pill { bottom: 10px; font-size: 0.72rem; padding: 6px 14px; }
  .chat-page .chat-composer .chat-actions .btn--primary { width: 100%; }
}

/* ==========================================================================
   CHAT-SEED-1E-MVP — Floating chat launcher (template + CSS only, JS yok)
   --------------------------------------------------------------------------
   Sag-alt kose chat launcher; mevcut chat_unread context processor degerini
   badge olarak kullanir. Chat sayfasinda (resolver_match.app_name=="chat")
   render edilmez (templates/chat/_launcher.html template-level guard).
   Polling / send / panel / backend YOK.
   PROFILE-MENU-FIX-2 sag-ust panel ile cakismaz (z-index 150 < menu 200).
   Rollback: bu blok + template/include silinince eski davranis doner.
   ========================================================================== */
.chat-launcher {
  position: fixed;
  right: max(16px, env(safe-area-inset-right, 16px));
  bottom: max(16px, env(safe-area-inset-bottom, 16px));
  z-index: 150;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px 10px 14px;
  min-height: 52px;
  min-width: 52px;
  background: #0b3d91;
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 0 6px 18px rgba(11, 61, 145, .28), 0 2px 4px rgba(0, 0, 0, .06);
  transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease;
  -webkit-tap-highlight-color: transparent;
}
.chat-launcher:hover {
  background: #093275;
  color: #fff;
  text-decoration: none;
}
@media (hover: hover) {
  .chat-launcher:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(11, 61, 145, .34), 0 3px 6px rgba(0, 0, 0, .08);
  }
}
.chat-launcher:focus-visible {
  outline: 3px solid rgba(255, 255, 255, .85);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(11, 61, 145, .55);
}
.chat-launcher__icon {
  font-size: 1.1rem;
  line-height: 1;
}
.chat-launcher__text {
  white-space: nowrap;
  font-size: 0.84rem;
}
.chat-launcher__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: #dc2626;
  color: #fff;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px #fff;
  line-height: 1;
}
/* Mobil: text gizlenir, sadece icon + badge */
@media (max-width: 640px) {
  .chat-launcher {
    padding: 0;
    width: 52px;
    height: 52px;
    min-height: 52px;
    justify-content: center;
  }
  .chat-launcher__text { display: none; }
  .chat-launcher__icon { font-size: 1.4rem; }
  .chat-launcher__badge { top: -2px; right: -2px; }
}
/* Prefers reduced motion: hover transform kaldir */
@media (prefers-reduced-motion: reduce) {
  .chat-launcher,
  .chat-launcher:hover { transition: none; transform: none; }
}
/* Print: tamamen gizle */
@media print {
  .chat-launcher { display: none !important; }
}

/* ==========================================================================
   CHAT-ATTACH-2C — Chat dosya eki (composer dosya-seç + balon ek render)
   --------------------------------------------------------------------------
   Ekler protected download URL'inden gelir (participant kontrollü).
   Rollback: bu blok + thread_detail file input + _message_bubble ek bloğu
   geri alinirsa CHAT-COMPOSER-2A composer'a doner.
   ========================================================================== */

/* Composer dosya-seç butonu (ataç) */
.chat-page .chat-attach-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #eef2f7;
  color: #4b5563;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background-color .12s;
  align-self: flex-end;
}
.chat-page .chat-attach-btn:hover { background: #e2e8f0; }

/* Seçilen dosya önizleme şeridi (composer üstünde) */
.chat-page .chat-attach-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.chat-page .chat-attach-chip {
  background: rgba(11, 61, 145, .08);
  color: #0b3d91;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.78rem;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Mesaj balonunda ek render */
.chat-page .chat-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 2px;
}
.chat-page .chat-attachment {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  text-decoration: none;
  border-radius: 8px;
}
.chat-page .chat-attachment--file {
  background: rgba(0, 0, 0, .05);
  color: #1f2937;
  padding: 6px 10px;
  font-size: 0.82rem;
}
.chat-page .chat-bubble--own .chat-attachment--file {
  background: rgba(255, 255, 255, .16);
  color: #fff;
}
.chat-page .chat-attachment--file:hover { filter: brightness(.97); }
.chat-page .chat-attachment__icon { font-size: 1.1rem; line-height: 1; }
.chat-page .chat-attachment__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}
.chat-page .chat-attachment--image {
  flex-direction: column;
  gap: 2px;
  max-width: 160px;
}
.chat-page .chat-attachment__thumb {
  max-width: 160px;
  max-height: 160px;
  border-radius: 8px;
  object-fit: cover;
  display: block;
}
.chat-page .chat-attachment--image .chat-attachment__name {
  font-size: 0.72rem;
  color: #6b7280;
  max-width: 160px;
}
.chat-page .chat-bubble--own .chat-attachment--image .chat-attachment__name {
  color: rgba(255, 255, 255, .85);
}
@media (max-width: 640px) {
  .chat-page .chat-attach-btn { width: 40px; height: 40px; }
  .chat-page .chat-attachment__thumb { max-width: 130px; max-height: 130px; }
}

/* ==========================================================================
   CHAT-VOICE-2E — Mikrofon kaydı (composer butonu + kayıt-aktif + ses balonu)
   --------------------------------------------------------------------------
   Mic butonu attach (ataç) ile aynı boyut/şekil. Kayıt sırasında kırmızı +
   pulse + canlı sayaç. Balonda native <audio controls> (süre/seek tarayıcıdan).
   Rollback: bu blok + thread_detail mic butonu + chat.js MediaRecorder bloğu
   + _message_bubble audio dalı geri alinirsa CHAT-ATTACH-2C'ye doner.
   ========================================================================== */
.chat-page .chat-mic-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  height: 44px;
  padding: 0 10px;
  border: none;
  border-radius: 10px;
  background: #eef2f7;
  color: #4b5563;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background-color .12s, color .12s;
  align-self: flex-end;
}
.chat-page .chat-mic-btn:hover { background: #e2e8f0; }
.chat-page .chat-mic-btn.is-recording {
  background: #dc2626;
  color: #fff;
  animation: chatMicPulse 1.2s ease-in-out infinite;
}
.chat-page .chat-mic-btn__timer {
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: .02em;
}
@keyframes chatMicPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .45); }
  50%      { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .chat-page .chat-mic-btn.is-recording { animation: none; }
}

/* Mesaj balonunda ses eki — native player */
.chat-page .chat-attachment--audio {
  background: rgba(0, 0, 0, .05);
  padding: 6px 8px;
  border-radius: 10px;
  max-width: 100%;
}
.chat-page .chat-bubble--own .chat-attachment--audio {
  background: rgba(255, 255, 255, .16);
}
.chat-page .chat-attachment__audio {
  height: 36px;
  max-width: 240px;
  vertical-align: middle;
}
@media (max-width: 640px) {
  .chat-page .chat-mic-btn { min-width: 40px; height: 40px; }
  .chat-page .chat-attachment__audio { max-width: 180px; }
}

/* ==========================================================================
   CHAT-PRIORITY-2F — Mesaj önceliği (composer ⚡ seçici + rozet + balon vurgu)
   --------------------------------------------------------------------------
   SCOPE: yalnız GÖRSEL. Rozet metin+renk birlikte (renk körü erişilebilirlik).
   NORMAL'da rozet/vurgu YOK (gürültü olmasın). URGENT/CRITICAL balonda şerit
   (own=sağ, other=sol). Bildirim/escalation YOK.
   Rollback: bu blok + composer/edit ⚡ select + _message_bubble rozeti + chat.js
   renderBubble priority dali + migration 0003 geri alinirsa CHAT-VOICE-2E'ye doner.
   ========================================================================== */
/* Composer + edit öncelik seçici (⚡) */
.chat-page .chat-prio-picker {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 44px;
  padding: 0 8px;
  border-radius: 10px;
  background: #eef2f7;
  align-self: flex-end;
}
.chat-page .chat-prio-picker__icon { font-size: 1rem; line-height: 1; }
.chat-page .chat-prio-picker__select {
  border: none;
  background: transparent;
  font-size: 0.85rem;
  color: #374151;
  cursor: pointer;
  padding: 4px 2px;
  max-width: 96px;
}
.chat-page .chat-prio-picker--edit {
  height: auto;
  margin: 6px 0;
  width: fit-content;
}

/* Öncelik rozeti (balon başlığında) */
.chat-page .chat-priority {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: .02em;
  vertical-align: middle;
  white-space: nowrap;
}
.chat-page .chat-priority--important { background: #f59e0b; color: #1f2937; }
.chat-page .chat-priority--urgent { background: #dc2626; color: #fff; }
.chat-page .chat-priority--critical {
  background: #7f1d1d;
  color: #fff;
  box-shadow: 0 0 0 2px rgba(127, 29, 29, .25);
}

/* Balon vurgu şeridi (own=sağ, other=sol kenar). IMPORTANT şeritsiz (rozet yeter). */
.chat-page .chat-bubble--urgent { border-left: 4px solid #dc2626; }
.chat-page .chat-bubble--own.chat-bubble--urgent { border-left: 0; border-right: 4px solid #dc2626; }
.chat-page .chat-bubble--critical { border-left: 5px solid #7f1d1d; }
.chat-page .chat-bubble--own.chat-bubble--critical { border-left: 0; border-right: 5px solid #7f1d1d; }

@media (max-width: 640px) {
  .chat-page .chat-prio-picker { height: 40px; padding: 0 6px; }
  .chat-page .chat-prio-picker__select { max-width: 76px; font-size: 0.8rem; }
}

/* --------------------------------------------------------------------------
   CHAT-PRIORITY-SORT — inbox kartı öncelik şeridi (okunmamış URGENT/CRITICAL)
   Sıralama queryset'te (get_inbox_threads annotate). Burada yalnız görsel:
   sol şerit (2F balon renkleriyle TUTARLI) + satırdaki "⚠ Acil"/"‼ Kritik"
   rozeti (.chat-priority, metin+renk → erişilebilir). NORMAL/Önemli'de yok.
   -------------------------------------------------------------------------- */
.chat-page .erp-inbox-item--urgent { border-left: 4px solid #dc2626; }
.chat-page .erp-inbox-item--critical { border-left: 5px solid #7f1d1d; }
/* öncelik rozeti inbox satırında subject yanında biraz nefes alsın */
.chat-page .erp-inbox-item__subject .chat-priority { margin-left: 6px; }

/* ==========================================================================
   CHAT-COMPOSER-2A — Composer shell + thread layout UX polish
   --------------------------------------------------------------------------
   Composer'i referans operasyonel chat ekranina yaklastirir: reply preview
   tam satir + tek-satir input bar (textarea flex + sag-da belirgin send
   butonu). Attachment / mic / priority EKLENMEDI (backend yok; CHAT-SEED-1H
   roadmap). Sahte/disabled buton YOK. Form action/method/CSRF + body/
   reply_to_id field isimleri DEGISMEDI; chat.js polling/send davranisi
   DOKUNULMADI.
   Rollback: bu blok + thread_detail.html .chat-composer__row wrapper geri
   alinirsa CHAT-SEED-1C composer'a doner.
   ========================================================================== */

/* Composer: reply preview tam satir, altinda tek-satir input bar */
.chat-page .chat-composer {
  flex-wrap: wrap;
}
.chat-page .chat-composer .chat-reply-preview {
  flex-basis: 100%;
  order: -1;
}
.chat-page .chat-composer__row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  width: 100%;
}
.chat-page .chat-composer__row textarea {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}
.chat-page .chat-composer .chat-actions {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
}

/* Send button — belirgin lacivert, ikon + etiket.
   Specificity: 4-class (`.chat-page .chat-composer .chat-actions
   .chat-send-btn`) — CHAT-SEED-1C'nin `.chat-page .chat-composer
   .chat-actions .btn--primary` kuralini guvenli override eder. */
.chat-page .chat-composer .chat-actions .chat-send-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #0b3d91;
  border: 0;
  border-radius: 12px;
  padding: 0 18px;
  height: 44px;
  width: auto;
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background-color .14s ease, transform .12s ease;
  white-space: nowrap;
}
.chat-page .chat-composer .chat-actions .chat-send-btn:hover { background: #093275; }
.chat-page .chat-composer .chat-actions .chat-send-btn:active { transform: scale(.97); }
.chat-page .chat-composer .chat-actions .chat-send-btn:focus-visible {
  outline: 3px solid rgba(11, 61, 145, .35);
  outline-offset: 2px;
}
.chat-page .chat-send-btn__icon {
  font-size: 1rem;
  line-height: 1;
  transform: translateY(1px);
}

/* Stream — composer ile gorsel butunluk: alt kenar paylasimi */
.chat-page .chat-stream {
  margin-bottom: 10px;
}

/* Mobile: send button ikon-only daire, composer satiri sikisik.
   4-class specificity ile CHAT-SEED-1C mobil `btn--primary{width:100%}`
   kurali guvenle override edilir. */
@media (max-width: 640px) {
  .chat-page .chat-composer__row { gap: 8px; }
  .chat-page .chat-composer .chat-actions .chat-send-btn {
    padding: 0;
    width: 44px;
    min-width: 44px;
    justify-content: center;
    border-radius: 50%;
  }
  .chat-page .chat-send-btn__label { display: none; }
  .chat-page .chat-send-btn__icon { transform: none; font-size: 1.15rem; }
}

/* =========================================================================
   GECE-1 PAKET-A1/M1 — Erişilebilirlik + dokunma hedefi sertleştirmesi
   Kaynak bulgular: UIUX_FINDINGS UX-A1 (focus görünmez), MOBILE_REPORT M-2
   (dokunma hedefleri 18-32px), M-3 (etkileşimli fontlar 11-12px).
   TASARIM KURALI: görsel boyut korunur; dokunma alanı padding ile büyür.
   ⚠️ Sabah deploy sonrası Chrome'da doğrulanacak (gece görsel doğrulama yapılamadı).
   ========================================================================= */

/* A1 — focus halkası kapsamını genişlet: liste/filtre kontrolleri de dahil.
   (Mevcut blok yalnız .btn / .topnav a / .vd-nav a / .brand kapsıyordu.) */
.erp-chip:focus-visible,
.user-menu__item:focus-visible,
.erp-table a:focus-visible,
.erp-filterbar input:focus-visible,
.erp-filterbar select:focus-visible,
.chat-bubble__actions .btn:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--focus-color);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* A1 — sr-only checkbox (mobil menü toggle) masaüstünde klavye odağını YUTMAMALI.
   Sorun: Tab ile odak görünmez checkbox'a gidiyordu (UX-A1 kanıtı).
   ≥1024px'te hamburger görünmediği için tab sırasından çıkarılır. */
@media (min-width: 1024px) {
  .topnav-toggle__checkbox { display: none; }
}

/* M1/M2 — mobilde dokunma hedefleri en az 44px (WCAG 2.5.5 / Apple HIG).
   Görsel yüksekliği padding ile büyütür; font ve renk değişmez. */
@media (max-width: 640px) {
  .erp-chip {
    min-height: 44px;
    font-size: 13px;          /* M-3: 11.5px → 13px (etkileşimli alt sınır) */
  }
  .btn--small,
  .btn--sm {
    min-height: 44px;
    font-size: 13px;
  }
  .chat-bubble__actions .btn--small {
    min-height: 44px;         /* 28px idi (app.css:6003) */
    padding: 6px 10px;
  }
  .erp-table__actions a,
  .erp-table__actions .btn {
    min-height: 44px;
  }
}