/* =====================================================================
   SmartMirrorHotel Yonetim Paneli — BILESEN KATMANI (theme.css)
   ---------------------------------------------------------------------
   Kaynak: docs/design/panel-tasarim-sartnamesi.md — B (bilesen sartnamesi),
   C (ekran duzenleri) ve D (animasyon tablosu).

   Token tanimlari tokens.css'tedir; bu dosya SABIT RENK YAZMAZ, yalnizca
   token okur. Bootstrap 5.3 uzerine biner, Bootstrap'i degistirmez.

   Icindekiler:
      1. Tipografi ve temel
      2. Hareket katmani (D tablosu)
      3. Uygulama iskeleti: sidebar (256px), ust bar (56px), sayfa basligi
      4. Kartlar ve KPI metrik karti (B.1)
      5. Veri tablosu (B.2)
      6. Formlar (B.3)
      7. Butonlar (B.4)
      8. Bos durum (B.7), sayfalama, rozet (B.10), toast (B.9), iskelet (B.8)
      9. Grafik bilesenleri + ilerleme cubugu / yigin / bullet / sparkline
     10. Oda durum panosu (C.3)
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. TIPOGRAFI VE TEMEL
   Govde varsayilani 14/20 (yonetim paneli bilgi yogunlugu).
   --------------------------------------------------------------------- */

body {
  background-color: var(--sm-bg-canvas);
  color: var(--sm-text-primary);
  font-family: var(--sm-font-sans);
  font-size: var(--sm-fs-body);
  line-height: var(--sm-lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, .h1 { font-size: var(--sm-fs-h1); line-height: var(--sm-lh-h1); font-weight: 600; letter-spacing: -0.01em; }
h2, .h2 { font-size: var(--sm-fs-h2); line-height: var(--sm-lh-h2); font-weight: 600; letter-spacing: -0.01em; }
h3, .h3 { font-size: var(--sm-fs-h3); line-height: var(--sm-lh-h3); font-weight: 600; }
h4, .h4 { font-size: var(--sm-fs-h4); line-height: var(--sm-lh-h4); font-weight: 600; }
h5, .h5, h6, .h6 { font-size: var(--sm-fs-h4); font-weight: 600; }

.sm-overline {
  font-size: var(--sm-fs-overline);
  line-height: var(--sm-lh-overline);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sm-text-muted);
}
.sm-caption { font-size: var(--sm-fs-caption); line-height: var(--sm-lh-caption); color: var(--sm-text-muted); }
.sm-mono, code, kbd, samp {
  font-family: var(--sm-font-mono);
  font-size: var(--sm-fs-mono);
  font-variant-numeric: tabular-nums;
}

/* Bootstrap yardimci siniflarini token'lara bagla */
.text-muted { color: var(--sm-text-muted) !important; }
.text-secondary { color: var(--sm-text-secondary) !important; }
.small, small { font-size: var(--sm-fs-caption); }

/* Sayilar daima tabular — sutun hizasi icin ZORUNLU */
.table td, .table th, .sm-tabular, .sm-num, .sm-kpi-value {
  font-variant-numeric: tabular-nums;
}

/* Odak gostergesi — WCAG 2.4.11: >= 2px kalinlik, 3:1 kontrast */
:focus-visible {
  outline: 2px solid var(--sm-focus-color);
  outline-offset: 2px;
  border-radius: var(--sm-radius-xs);
}
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.page-link:focus-visible {
  outline: 2px solid var(--sm-focus-color);
  outline-offset: 2px;
  box-shadow: var(--sm-focus-ring);
}

/* Tiklanabilir hedef tabani — WCAG 2.5.8 (24x24); pratikte 32-40px */
.btn-sm, .sm-icon-btn { min-height: 32px; }

code {
  background-color: var(--sm-bg-subtle);
  padding: 0.12em 0.38em;
  border-radius: var(--sm-radius-xs);
  color: var(--sm-text-secondary);
}

/* ---------------------------------------------------------------------
   2. HAREKET KATMANI — D tablosundaki sure/easing degerleri birebir.
   YASAKLAR: sayac (count-up) animasyonu, tablo satiri kademeli (stagger)
   girisi, grafik cubugunun sifirdan yukselmesi / cizginin cizilmesi,
   sayfa gecisinde tam sayfa fade/slide, hata titremesi (shake),
   500ms'yi gecen hicbir arayuz animasyonu.
   --------------------------------------------------------------------- */

@keyframes sm-shimmer {          /* D-22: 1400ms ease-in-out sonsuz */
  from { background-position: -180% 0; }
  to   { background-position: 180% 0; }
}
@keyframes sm-spin {             /* D-23: 800ms linear sonsuz */
  to { transform: rotate(360deg); }
}
@keyframes sm-toast-in {         /* D-15: 200ms decelerate */
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes sm-pop-in {           /* D-11: modal/dropdown acilma */
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
@keyframes sm-row-flash {        /* D-26: yeni kayit vurgusu, 600ms ease-out */
  from { background-color: var(--sm-brand-surface); }
  to   { background-color: transparent; }
}
@keyframes sm-sticky-up {        /* D-29: sticky kaydet bari, 200ms decelerate */
  from { transform: translateY(100%); }
  to   { transform: none; }
}

/* D-7 dropdown acilma 150ms decelerate */
.dropdown-menu.show { animation: sm-pop-in var(--sm-dur-150) var(--sm-ease-decelerate) both; }
/* D-11/12 modal */
.modal.fade .modal-dialog {
  transition: transform var(--sm-dur-200) var(--sm-ease-emph-decelerate),
              opacity var(--sm-dur-200) var(--sm-ease-emph-decelerate);
}
/* D-17 accordion / collapse 200ms standard */
.collapsing { transition: height var(--sm-dur-200) var(--sm-ease-standard); }

/* Yeni gelen canli kayit vurgusu (Siparisler/Talepler gibi otomatik
   yenilenen ekranlarda; tablo satiri GIRIS animasyonu DEGILDIR) */
.sm-row-new > * { animation: sm-row-flash var(--sm-dur-600) ease-out both; }

/* D-21: sayfa gecisi — ustte 2px ilerleme cizgisi (tam sayfa fade YOK) */
.sm-progress-line {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  background-color: var(--sm-brand);
  transform-origin: left center;
  z-index: 2000;
  transition: transform var(--sm-dur-200) linear, opacity var(--sm-dur-150) linear;
}

/* prefers-reduced-motion: transform ve height animasyonlari kaldirilir,
   yalnizca opacity gecisleri 100ms'ye inerek korunur. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-property: opacity, color, background-color, border-color !important;
    transition-duration: 100ms !important;
    scroll-behavior: auto !important;
  }
  .sm-skeleton { animation: none !important; background-image: none !important; }
  .sm-spinner { animation: none !important; }
}

/* ---------------------------------------------------------------------
   3. UYGULAMA ISKELETI
   Sidebar 256px · ust bar 56px (sticky) · icerik yan boslugu 24px
   --------------------------------------------------------------------- */

.admin-shell { min-height: 100vh; background-color: var(--sm-bg-canvas); }

/* --- Sol menu (B.5) --- */
.admin-sidebar,
.admin-sidebar-mobile {
  background-color: var(--sm-bg-surface);
  color: var(--sm-text-secondary);
  border-right: 1px solid var(--sm-border-default);
}
:root[data-theme="dark"] .admin-sidebar,
:root[data-theme="dark"] .admin-sidebar-mobile {
  background-color: #0f172a;
  border-right-color: #1e293b;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .admin-sidebar,
  :root:where(:not([data-theme="light"])) .admin-sidebar-mobile {
    background-color: #0f172a;
    border-right-color: #1e293b;
  }
}
.admin-sidebar {
  width: var(--sm-sidebar-w);
  flex-shrink: 0;
  min-height: 100vh;
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
  scrollbar-width: thin;
  padding: 0 !important;
}
.admin-sidebar-mobile { border-bottom: 1px solid var(--sm-border-default); }

/* Logo alani: 56px — ust bar ile hizali, altinda 1px ayrac */
.admin-brand {
  height: var(--sm-topbar-h);
  display: flex;
  align-items: center;
  gap: var(--sm-space-5);
  padding: 0 var(--sm-space-6);
  margin: 0 0 var(--sm-space-4) !important;
  border-bottom: 1px solid var(--sm-border-default);
  color: var(--sm-text-primary);
  text-decoration: none;
  font-size: var(--sm-fs-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: background-color var(--sm-dur-120) var(--sm-ease-standard);
}
.admin-brand:hover, .admin-brand:focus { color: var(--sm-text-primary); background-color: var(--sm-bg-hover); }
.admin-brand small { color: var(--sm-text-muted); font-weight: 400; font-size: var(--sm-fs-caption); }
.admin-brand-mark {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: var(--sm-radius-md);
  background-color: var(--sm-brand-600);
  display: grid;
  place-items: center;
  color: #ffffff;
}
.admin-brand-mark svg { width: 18px; height: 18px; }
.auth-card .admin-brand-mark { width: 44px; height: 44px; border-radius: var(--sm-radius-lg); }
.auth-card .admin-brand-mark svg { width: 22px; height: 22px; }

/* Grup basligi — overline */
.admin-nav-group {
  color: var(--sm-text-muted);
  text-transform: uppercase;
  font-size: var(--sm-fs-overline);
  line-height: var(--sm-lh-overline);
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: var(--sm-space-6) var(--sm-space-7) var(--sm-space-2);
  margin: 0;
}

.admin-nav { padding-inline: var(--sm-space-4); }
.admin-nav .nav-link {
  min-height: var(--sm-sidebar-item-h);
  color: var(--sm-text-secondary);
  border-radius: var(--sm-radius-md);
  margin-bottom: 2px;
  padding: var(--sm-space-4) var(--sm-space-5);
  font-size: var(--sm-fs-body);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: var(--sm-space-5);
  position: relative;
  transition: background-color var(--sm-dur-120) var(--sm-ease-standard),
              color var(--sm-dur-120) var(--sm-ease-standard);
}
.admin-nav .nav-link svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--sm-text-muted); }
.admin-nav .nav-link:hover:not(.disabled),
.admin-nav .nav-link:focus-visible:not(.disabled) {
  background-color: var(--sm-bg-hover);
  color: var(--sm-text-primary);
}
.admin-nav .nav-link:hover svg { color: var(--sm-text-secondary); }

/* Aktif durum: zemin + metin/ikon rengi + SOL 3px serit (renk tek tasiyici degil) */
.admin-nav .nav-link.active {
  background-color: var(--sm-brand-surface);
  color: var(--sm-brand-700);
  font-weight: 600;
}
:root[data-theme="dark"] .admin-nav .nav-link.active { color: var(--sm-brand-400); }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .admin-nav .nav-link.active { color: var(--sm-brand-400); }
}
.admin-nav .nav-link.active svg { color: currentColor; }
.admin-nav .nav-link.active::before {
  content: "";
  position: absolute;
  inset-block: 6px;
  left: -4px;
  width: 3px;
  border-radius: var(--sm-radius-full);
  background-color: var(--sm-brand-600);
}
.admin-nav .nav-link.disabled { color: var(--sm-text-disabled); cursor: not-allowed; }

/* Alt oge (grup ici alt-menu): ikonsuz, ana ogenin METNIYLE hizali girinti.
   Ornek: "Odalar" altinda Kat / Oda Tipleri / Kat Plani. Sol serit + aktif
   renk ana ogeyle ayni desende kalir (renk tek tasiyici degildir). */
.admin-nav .nav-link--child {
  min-height: calc(var(--sm-sidebar-item-h) - 8px);
  padding-block: var(--sm-space-3);
  padding-left: calc(var(--sm-space-5) + 18px + var(--sm-space-5));
  font-size: var(--sm-fs-caption);
}

/* Sayisal rozet — pill, 18px, sagda */
.admin-nav .sm-nav-badge {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--sm-radius-full);
  font-size: var(--sm-fs-overline);
  font-weight: 600;
  display: inline-grid;
  place-items: center;
  background-color: var(--sm-bg-subtle);
  color: var(--sm-text-secondary);
  font-variant-numeric: tabular-nums;
}
.admin-nav .sm-nav-badge--urgent { background-color: var(--sm-danger-fill); color: #ffffff; }

.admin-sidebar-foot {
  color: var(--sm-text-muted);
  font-size: var(--sm-fs-caption);
  border-top: 1px solid var(--sm-border-default);
  padding: var(--sm-space-5) var(--sm-space-6);
}

/* --- Ust bar (B.6) — 56px, sticky --- */
.admin-topbar {
  min-height: var(--sm-topbar-h);
  padding-block: 0;
  background-color: var(--sm-bg-surface);
  border-bottom: 1px solid var(--sm-border-default);
  position: sticky;
  top: 0;
  z-index: 1020;
}
.admin-topbar .container-fluid { min-height: var(--sm-topbar-h); padding-inline: var(--sm-space-8); }
.admin-topbar .navbar-brand,
.admin-topbar .navbar-text { color: var(--sm-text-primary); font-size: var(--sm-fs-body); }
.admin-topbar .navbar-toggler {
  border-color: var(--sm-border-strong);
  color: var(--sm-text-primary);
  padding: var(--sm-space-3) var(--sm-space-4);
  border-radius: var(--sm-radius-md);
}

/* Kullanici rozeti (avatar 32px) */
.sm-user-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sm-space-4);
  padding: var(--sm-space-2) var(--sm-space-5) var(--sm-space-2) var(--sm-space-2);
  border-radius: var(--sm-radius-full);
  background-color: var(--sm-bg-subtle);
  border: 1px solid var(--sm-border-default);
  font-size: var(--sm-fs-body-sm);
  font-weight: 600;
  color: var(--sm-text-primary);
  max-width: 220px;
}
.sm-user-chip .sm-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--sm-radius-full);
  background-color: var(--sm-brand-600);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: var(--sm-fs-caption);
  font-weight: 700;
  flex: 0 0 auto;
}
.sm-user-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tema anahtari — 32x32 hedef */
.sm-theme-toggle {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--sm-radius-md);
  border: 1px solid var(--sm-border-default);
  background-color: var(--sm-bg-surface);
  color: var(--sm-text-secondary);
  padding: 0;
  transition: background-color var(--sm-dur-120) var(--sm-ease-standard),
              color var(--sm-dur-120) var(--sm-ease-standard);
}
.sm-theme-toggle:hover { color: var(--sm-text-primary); background-color: var(--sm-bg-hover); }
.sm-theme-toggle svg { width: 16px; height: 16px; }
.sm-theme-toggle .sm-icon-sun { display: none; }
:root[data-theme="dark"] .sm-theme-toggle .sm-icon-sun { display: block; }
:root[data-theme="dark"] .sm-theme-toggle .sm-icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .sm-theme-toggle .sm-icon-sun { display: block; }
  :root:where(:not([data-theme="light"])) .sm-theme-toggle .sm-icon-moon { display: none; }
}

/* --- Sayfa basligi + breadcrumb --- */
.admin-content { background-color: var(--sm-bg-canvas); }
.admin-content > main { padding: var(--sm-space-8) var(--sm-content-pad) !important; }
@media (max-width: 1199.98px) { .admin-content > main { padding-inline: var(--sm-space-6) !important; } }
@media (max-width: 767.98px) { .admin-content > main { padding-inline: var(--sm-space-5) !important; } }

.sm-page-head { margin-bottom: var(--sm-space-8); }
.sm-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sm-space-3);
  font-size: var(--sm-fs-body-sm);
  line-height: var(--sm-lh-body-sm);
  color: var(--sm-text-muted);
  margin-bottom: var(--sm-space-2);
  padding: 0;
  list-style: none;
}
.sm-breadcrumb li { display: inline-flex; align-items: center; gap: var(--sm-space-3); }
.sm-breadcrumb li + li::before { content: "/"; color: var(--sm-border-strong); }
.sm-breadcrumb a { color: var(--sm-text-muted); text-decoration: none; }
.sm-breadcrumb a:hover { color: var(--sm-brand); text-decoration: underline; }
.sm-breadcrumb [aria-current="page"] { color: var(--sm-text-primary); font-weight: 600; }

.sm-page-title {
  font-size: var(--sm-fs-h1);
  line-height: var(--sm-lh-h1);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}
.sm-page-subtitle {
  color: var(--sm-text-muted);
  font-size: var(--sm-fs-body);
  margin: var(--sm-space-2) 0 0;
  max-width: 68ch;
}
.sm-page-actions { display: flex; flex-wrap: wrap; gap: var(--sm-space-4); align-items: center; }

.admin-footer {
  background-color: var(--sm-bg-surface);
  border-top: 1px solid var(--sm-border-default);
  color: var(--sm-text-muted);
  font-size: var(--sm-fs-caption);
}

/* ---------------------------------------------------------------------
   4. KARTLAR + KPI METRIK KARTI (B.1)
   Kart varsayilani: radius 12px + 1px kenarlik + shadow-xs.
   KPI anatomisi (SABIT SIRA): Etiket → Deger → Delta + donem → Sparkline
   --------------------------------------------------------------------- */

.card {
  background-color: var(--sm-bg-surface);
  border: 1px solid var(--sm-border-default);
  border-radius: var(--sm-radius-lg);
  box-shadow: var(--sm-shadow-xs);
  color: var(--sm-text-primary);
  transition: box-shadow var(--sm-dur-120) var(--sm-ease-standard),
              border-color var(--sm-dur-120) var(--sm-ease-standard);
}
.card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--sm-border-default);
  padding: var(--sm-space-5) var(--sm-space-8);
  font-size: var(--sm-fs-h3);
  font-weight: 600;
  color: var(--sm-text-primary);
  border-radius: var(--sm-radius-lg) var(--sm-radius-lg) 0 0;
}
.card-footer {
  background-color: var(--sm-bg-subtle);
  border-top: 1px solid var(--sm-border-default);
  padding: var(--sm-space-5) var(--sm-space-8);
  border-radius: 0 0 var(--sm-radius-lg) var(--sm-radius-lg);
}
.card-body { padding: var(--sm-space-8); }

/* Tiklanabilir kart: hover'da shadow-sm + guclu kenarlik (yukselme YOK) */
.sm-card-interactive { cursor: default; }
a.sm-card-interactive, .sm-card-interactive[role="button"] { cursor: pointer; }
.sm-card-interactive:hover { box-shadow: var(--sm-shadow-sm); border-color: var(--sm-border-strong); }

/* --- KPI karti --- */
.sm-stat { position: relative; }
.sm-stat .card-body {
  display: flex;
  flex-direction: column;
  gap: var(--sm-space-4);
  padding: var(--sm-space-7);
  min-height: 116px;
}
.sm-stat.sm-stat--spark .card-body { min-height: 148px; }
.sm-stat-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sm-space-5); }

/* Etiket: overline 11/16 600 uppercase */
.sm-stat-label {
  font-size: var(--sm-fs-overline);
  line-height: var(--sm-lh-overline);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sm-text-muted);
  margin: 0;
}
/* Kart ustu ikon: 20px, sag ust, text-muted (renkli kutu YOK) */
.sm-stat-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: var(--sm-text-muted);
  background: none;
}
.sm-stat-icon svg { width: 20px; height: 20px; }

/* Deger: metric-lg 28/32 700, tabular-nums, ANINDA yazilir (sayac animasyonu yok) */
.sm-stat-value, .sm-kpi-value {
  font-size: var(--sm-fs-metric-lg);
  line-height: var(--sm-lh-metric-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--sm-text-primary);
  font-variant-numeric: tabular-nums;
}
.sm-stat-value.is-empty { color: var(--sm-text-muted); font-weight: 500; }
.sm-stat-value .sm-stat-unit { font-size: var(--sm-fs-body); font-weight: 500; color: var(--sm-text-muted); }
.sm-stat-note {
  font-size: var(--sm-fs-caption);
  line-height: var(--sm-lh-caption);
  color: var(--sm-text-muted);
  margin: 0;
}

/* Delta rozeti: ok ikonu + isaret + renkli pill.
   RENK YONE GORE DEGIL HEDEFE GORE verilir → .is-good / .is-bad siniflari
   sunucuda "iyiYon" alanina bakilarak secilir. */
.sm-delta {
  display: inline-flex;
  align-items: center;
  gap: var(--sm-space-2);
  padding: 2px var(--sm-space-4);
  border-radius: var(--sm-radius-full);
  font-size: var(--sm-fs-body-sm);
  line-height: var(--sm-lh-label);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.sm-delta svg { width: 12px; height: 12px; }
.sm-delta.is-good { background-color: var(--sm-success-bg); color: var(--sm-success-text); }
.sm-delta.is-bad { background-color: var(--sm-danger-bg); color: var(--sm-danger-text); }
.sm-delta.is-neutral { background-color: var(--sm-bg-subtle); color: var(--sm-text-secondary); }
.sm-delta-period { font-size: var(--sm-fs-caption); color: var(--sm-text-muted); }
.sm-stat-delta-row { display: flex; align-items: center; gap: var(--sm-space-4); flex-wrap: wrap; }

/* Ton siniflari — 1. turdan devir; artik yalnizca ikon/vurgu rengini etkiler */
.sm-tone-good     { --sm-stat-tone: var(--sm-success-text); }
.sm-tone-warning  { --sm-stat-tone: var(--sm-warning-text); }
.sm-tone-critical { --sm-stat-tone: var(--sm-danger-text); }
.sm-tone-accent   { --sm-stat-tone: var(--sm-brand); }
.sm-tone-good .sm-stat-icon,
.sm-tone-warning .sm-stat-icon,
.sm-tone-critical .sm-stat-icon,
.sm-tone-accent .sm-stat-icon { color: var(--sm-stat-tone); }

/* ---------------------------------------------------------------------
   5. VERI TABLOSU (B.2)
   Yatay ayrac YALNIZCA; dikey cizgi yok. Zebra varsayilan KAPALI.
   Sayi sutunlari saga hizali + tabular-nums. Baslik ASLA kirpilmaz.
   --------------------------------------------------------------------- */

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--sm-text-primary);
  color: var(--sm-text-primary);
  margin-bottom: 0;
  border-color: var(--sm-border-default);
  font-size: var(--sm-fs-body);
}
.table > thead { background-color: var(--sm-bg-subtle); }
.table > thead th {
  font-size: var(--sm-fs-body-sm);
  line-height: var(--sm-lh-label);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;             /* buyuk harf gurultusu kaldirildi */
  color: var(--sm-text-secondary);
  border-bottom: 1px solid var(--sm-border-default);
  padding: 10px var(--sm-space-6);
  white-space: nowrap;              /* baslik asla kirpilmaz */
  background-color: var(--sm-bg-subtle);
  vertical-align: middle;
}
.table > tbody > tr > td {
  padding: 10px var(--sm-space-6);
  border-bottom-color: var(--sm-border-default);
  vertical-align: middle;
  color: var(--sm-text-primary);
  height: 40px;                     /* Normal yogunluk: 40px satir */
}
.table > tbody > tr:last-child > td { border-bottom: 0; }

/* Sayi sutunu: hem hucre hem BASLIK saga hizali */
.table th.text-end, .table td.text-end { text-align: right; }

/* Hucre kirpma — yalnizca govde hucresinde */
.sm-cell-truncate {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

/* Sticky baslik — ust barin (56px) altinda */
.sm-table-sticky > thead th { position: sticky; top: var(--sm-topbar-h); z-index: 2; }

/* Zebra: varsayilan kapali; yalnizca .table-striped verildiginde */
.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: transparent;
  background-color: var(--sm-bg-subtle);
  color: var(--sm-text-primary);
}

/* D-4: satir hover 100ms standard */
.table-hover > tbody > tr { transition: background-color var(--sm-dur-100) var(--sm-ease-standard); }
.table-hover > tbody > tr:hover > * {
  --bs-table-accent-bg: transparent;
  background-color: var(--sm-bg-hover);
  color: var(--sm-text-primary);
}

/* Secili satir: brand zemin + sol 3px serit */
.table > tbody > tr.sm-row-selected > * { background-color: var(--sm-brand-surface); }
.table > tbody > tr.sm-row-selected > td:first-child { box-shadow: inset 3px 0 0 var(--sm-brand-600); }

/* Yogunluk modlari (B.2) */
.sm-table-compact > tbody > tr > td { padding: 6px var(--sm-space-5); height: 32px; font-size: var(--sm-fs-body-sm); }
.sm-table-compact > thead th { padding: 6px var(--sm-space-5); }
.sm-table-comfortable > tbody > tr > td { padding: 14px var(--sm-space-6); height: 48px; }
.sm-table-comfortable > thead th { padding: 14px var(--sm-space-6); }
.sm-table-tall > tbody > tr > td { padding: 12px var(--sm-space-6); height: 64px; }
.sm-table-tall > thead th { padding: 12px var(--sm-space-6); }

/* Bootstrap .table-sm ile ayni yogunlukta kalsin */
.table-sm > tbody > tr > td, .table-sm > thead th { padding: 6px var(--sm-space-5); }
.table-sm > tbody > tr > td { height: 32px; font-size: var(--sm-fs-body-sm); }

/* Tablo kart icindeyken kose tasmasi */
.card > .table-responsive { border-radius: 0 0 var(--sm-radius-lg) var(--sm-radius-lg); }
.card > .table-responsive:first-child { border-radius: var(--sm-radius-lg) var(--sm-radius-lg) 0 0; }

/* Vurgulu satir (SLA asimi vb.) — renk + sol serit */
.table > tbody > tr.table-danger > * {
  --bs-table-accent-bg: transparent;
  background-color: var(--sm-danger-bg);
  color: var(--sm-text-primary);
}
.table > tbody > tr.table-danger > td:first-child { box-shadow: inset 3px 0 0 var(--sm-danger-fill); }

/* Tablo arac cubugu (B.2) — 56px, 16px ic bosluk */
.sm-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sm-space-4);
  min-height: var(--sm-topbar-h);
  padding: var(--sm-space-4) var(--sm-space-6);
  border-bottom: 1px solid var(--sm-border-default);
}
.sm-toolbar-end { margin-left: auto; display: flex; align-items: center; gap: var(--sm-space-4); }
.sm-toolbar .sm-search { width: 240px; max-width: 100%; }

/* Filtre chip'i — tek tikla kaldirilabilir */
.sm-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sm-space-3);
  height: 24px;
  padding: 0 var(--sm-space-4);
  border-radius: var(--sm-radius-sm);
  background-color: var(--sm-bg-subtle);
  border: 1px solid var(--sm-border-default);
  color: var(--sm-text-secondary);
  font-size: var(--sm-fs-caption);
  font-weight: 600;
  text-decoration: none;
}
.sm-chip:hover { background-color: var(--sm-bg-active); color: var(--sm-text-primary); }

/* Siralama basligi — 3 durum (asc → desc → sirasiz) */
.sm-sort {
  display: inline-flex;
  align-items: center;
  gap: var(--sm-space-2);
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.sm-sort:hover { color: var(--sm-text-primary); }
.sm-sort[aria-sort="ascending"], .sm-sort[aria-sort="descending"] { color: var(--sm-text-primary); }
.sm-sort svg { width: 12px; height: 12px; opacity: 0.65; }
.sm-sort[aria-sort="ascending"] svg, .sm-sort[aria-sort="descending"] svg { opacity: 1; }

/* ---------------------------------------------------------------------
   6. FORMLAR (B.3)
   Etiket daima USTTE. Hata mesaji yardim metninin YERINE gecer, satir ici.
   Zorunlu alan yildizi YOK — opsiyonel alanlar "(opsiyonel)" ile isaretlenir.
   --------------------------------------------------------------------- */

.form-label {
  font-size: var(--sm-fs-label);
  line-height: var(--sm-lh-label);
  font-weight: 600;
  color: var(--sm-text-primary);
  margin-bottom: var(--sm-space-3);
}
.form-label .sm-optional { font-weight: 400; color: var(--sm-text-muted); font-size: var(--sm-fs-caption); }

.form-control,
.form-select {
  min-height: 40px;
  padding: var(--sm-space-4) var(--sm-space-5);
  background-color: var(--sm-bg-surface);
  border: 1px solid var(--sm-border-strong);
  border-radius: var(--sm-radius-md);
  color: var(--sm-text-primary);
  font-size: var(--sm-fs-body);
  line-height: var(--sm-lh-body);
  /* D-6: input odak 150ms */
  transition: border-color var(--sm-dur-150) var(--sm-ease-standard),
              box-shadow var(--sm-dur-150) var(--sm-ease-standard);
}
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select { background-color: var(--sm-bg-subtle); }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .form-control,
  :root:where(:not([data-theme="light"])) .form-select { background-color: var(--sm-bg-subtle); }
}
.form-control-sm, .form-select-sm { min-height: 32px; padding: var(--sm-space-3) var(--sm-space-4); font-size: var(--sm-fs-body-sm); }
.form-control-lg, .form-select-lg { min-height: 48px; font-size: var(--sm-fs-body-lg); }

.form-control::placeholder { color: var(--sm-text-disabled); opacity: 1; }
.form-control:hover:not(:disabled):not(:focus),
.form-select:hover:not(:disabled):not(:focus) { border-color: var(--sm-neutral-400); }
.form-control:focus,
.form-select:focus {
  background-color: var(--sm-bg-surface);
  border-color: var(--sm-brand-600);
  box-shadow: var(--sm-focus-ring);
  color: var(--sm-text-primary);
}
.form-control:disabled,
.form-select:disabled {
  background-color: var(--sm-bg-subtle);
  color: var(--sm-text-disabled);
  cursor: not-allowed;
}
.form-control[readonly] { border-color: transparent; background-color: var(--sm-bg-subtle); }
.form-text { font-size: var(--sm-fs-caption); line-height: var(--sm-lh-caption); color: var(--sm-text-muted); margin-top: var(--sm-space-3); }

/* D-5: checkbox/radio 150ms */
.form-check-input {
  transition: background-color var(--sm-dur-150) var(--sm-ease-standard),
              border-color var(--sm-dur-150) var(--sm-ease-standard);
  border-color: var(--sm-border-strong);
}
.form-check-input:focus { box-shadow: var(--sm-focus-ring); }
.form-check-input:checked { background-color: var(--sm-brand-600); border-color: var(--sm-brand-600); }
.input-group-text {
  background-color: var(--sm-bg-subtle);
  border-color: var(--sm-border-strong);
  color: var(--sm-text-secondary);
  font-size: var(--sm-fs-body);
}

/* Dogrulama — kenarlik degisir, ZEMIN kirmiziya boyanmaz */
.form-control.input-validation-error,
.form-select.input-validation-error,
.was-validated .form-control:invalid {
  border-color: var(--sm-danger-fill);
  box-shadow: none;
}
.field-validation-error,
.validation-summary-errors {
  color: var(--sm-danger-text);
  font-size: var(--sm-fs-caption);
  line-height: var(--sm-lh-caption);
  font-weight: 500;
}
.field-validation-error {
  display: inline-flex;
  align-items: center;
  gap: var(--sm-space-3);
  margin-top: var(--sm-space-3);
}
/* Kirmizi "!" rozeti YALNIZCA gercekten hatali alanda cizilir.
   ":not(.field-validation-valid)" savunma amaclidir: asp-validation-for tag helper'i
   span'i "field-validation-valid" ile uretir, jQuery unobtrusive dogrulama alan
   hatali oldugunda bu sinifi kaldirip "field-validation-error" ekler. Sinif ELLE
   yazildiginda ise iki sinif AYNI ANDA bulunur ve rozet, hic hata yokken bile
   basilirdi — form ilk acilista her alani kirmizi rozetle gosterirdi (POI ekranlarinda
   yasanan bozukluk). Bu kural o durumu kaynaginda engeller. */
.field-validation-error:not(.field-validation-valid)::before {
  content: "!";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-radius: var(--sm-radius-full);
  background-color: var(--sm-danger-fill);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  display: grid;
  place-items: center;
  line-height: 1;
}
.validation-summary-errors ul { margin: 0; padding-left: var(--sm-space-7); }

/* Form yerlesimi: tek sutun, maks 640px */
.sm-form-narrow { max-width: 640px; }
.sm-form-section {
  border-top: 1px solid var(--sm-border-default);
  padding-top: var(--sm-space-8);
  margin-top: var(--sm-space-9);
}
.sm-form-section:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.sm-form-section-title {
  font-size: var(--sm-fs-overline);
  line-height: var(--sm-lh-overline);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sm-text-muted);
  margin-bottom: var(--sm-space-5);
}

/* Filtre cubugu */
.sm-filterbar {
  background-color: var(--sm-bg-surface);
  border: 1px solid var(--sm-border-default);
  border-radius: var(--sm-radius-lg);
  padding: var(--sm-space-5) var(--sm-space-6);
  box-shadow: var(--sm-shadow-xs);
  margin-bottom: var(--sm-space-6);
}

/* Sticky kaydet bari (C.9) */
.sm-save-bar {
  position: sticky;
  bottom: 0;
  z-index: 1010;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sm-space-5);
  padding: var(--sm-space-5) var(--sm-space-8);
  background-color: var(--sm-bg-surface);
  border-top: 1px solid var(--sm-border-default);
  box-shadow: var(--sm-shadow-lg);
  animation: sm-sticky-up var(--sm-dur-200) var(--sm-ease-decelerate) both;
}

/* ---------------------------------------------------------------------
   7. BUTONLAR (B.4)
   40px (md) / 32px (sm) / 48px (lg) · radius 8px · 14/20 600
   "Basma" (transform) animasyonu YOK.
   --------------------------------------------------------------------- */

.btn {
  --bs-btn-border-radius: var(--sm-radius-md);
  min-height: 40px;
  padding: var(--sm-space-4) var(--sm-space-6);
  font-size: var(--sm-fs-body);
  line-height: var(--sm-lh-body);
  font-weight: 600;
  border-radius: var(--sm-radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sm-space-4);
  /* D-1: hover 120ms standard */
  transition: background-color var(--sm-dur-120) var(--sm-ease-standard),
              border-color var(--sm-dur-120) var(--sm-ease-standard),
              color var(--sm-dur-120) var(--sm-ease-standard);
}
.btn:active { transition-duration: var(--sm-dur-80); transform: none; }
.btn svg { width: 16px; height: 16px; }
.btn-sm { min-height: 32px; padding: var(--sm-space-3) var(--sm-space-5); }
.btn-lg { min-height: 48px; padding: var(--sm-space-5) var(--sm-space-7); font-size: var(--sm-fs-body-lg); }
.btn:disabled, .btn.disabled { opacity: 0.5; }

/* Birincil */
.btn-primary {
  --bs-btn-bg: var(--sm-brand-600);
  --bs-btn-border-color: var(--sm-brand-600);
  --bs-btn-color: #ffffff;
  --bs-btn-hover-bg: var(--sm-brand-700);
  --bs-btn-hover-border-color: var(--sm-brand-700);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-bg: var(--sm-brand-800);
  --bs-btn-active-border-color: var(--sm-brand-800);
  --bs-btn-disabled-bg: var(--sm-brand-600);
  --bs-btn-disabled-border-color: var(--sm-brand-600);
}
/* Ikincil (outline-secondary bu rolu tasiyor) */
.btn-outline-secondary {
  --bs-btn-color: var(--sm-text-primary);
  --bs-btn-border-color: var(--sm-border-strong);
  --bs-btn-bg: var(--sm-bg-surface);
  --bs-btn-hover-bg: var(--sm-bg-hover);
  --bs-btn-hover-border-color: var(--sm-border-strong);
  --bs-btn-hover-color: var(--sm-text-primary);
  --bs-btn-active-bg: var(--sm-bg-active);
  --bs-btn-active-color: var(--sm-text-primary);
  --bs-btn-active-border-color: var(--sm-border-strong);
}
.btn-outline-primary {
  --bs-btn-color: var(--sm-brand);
  --bs-btn-border-color: var(--sm-border-strong);
  --bs-btn-bg: var(--sm-bg-surface);
  --bs-btn-hover-bg: var(--sm-brand-surface);
  --bs-btn-hover-color: var(--sm-brand);
  --bs-btn-hover-border-color: var(--sm-brand-600);
  --bs-btn-active-bg: var(--sm-brand-surface);
  --bs-btn-active-color: var(--sm-brand);
  --bs-btn-active-border-color: var(--sm-brand-600);
}
/* Tehlike + tehlike-sessiz */
.btn-danger {
  --bs-btn-bg: var(--sm-danger-fill);
  --bs-btn-border-color: var(--sm-danger-fill);
  --bs-btn-color: #ffffff;
}
.btn-outline-danger {
  --bs-btn-color: var(--sm-danger-text);
  --bs-btn-border-color: var(--sm-border-strong);
  --bs-btn-bg: var(--sm-bg-surface);
  --bs-btn-hover-bg: var(--sm-danger-bg);
  --bs-btn-hover-color: var(--sm-danger-text);
  --bs-btn-hover-border-color: var(--sm-danger-border);
}
.btn-outline-warning {
  --bs-btn-color: var(--sm-warning-text);
  --bs-btn-border-color: var(--sm-border-strong);
  --bs-btn-bg: var(--sm-bg-surface);
  --bs-btn-hover-bg: var(--sm-warning-bg);
  --bs-btn-hover-color: var(--sm-warning-text);
  --bs-btn-hover-border-color: var(--sm-warning-border);
}
/* Sessiz (ghost) */
.btn-ghost {
  --bs-btn-color: var(--sm-text-secondary);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: var(--sm-bg-hover);
  --bs-btn-hover-color: var(--sm-text-primary);
  --bs-btn-hover-border-color: transparent;
}
/* Yalnizca ikonlu kare buton */
.sm-icon-btn {
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border-radius: var(--sm-radius-md);
}

/* Yukleniyor durumu: spinner ikonun yerini alir, ETIKET KALIR */
.sm-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--sm-radius-full);
  animation: sm-spin 800ms linear infinite;
  display: inline-block;
}

/* ---------------------------------------------------------------------
   8. BOS DURUM (B.7) · SAYFALAMA · ROZET (B.10) · TOAST (B.9) · ISKELET (B.8)
   --------------------------------------------------------------------- */

/* --- Bos durum: 5 tur, ayni bilesen farkli icerik --- */
.sm-empty {
  background-color: var(--sm-bg-surface);
  border: 1px solid var(--sm-border-default);
  border-radius: var(--sm-radius-xl);
  padding: var(--sm-space-12) var(--sm-space-8);
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.sm-empty--page { min-height: 400px; }
.sm-empty-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--sm-space-6);
  display: grid;
  place-items: center;
  color: var(--sm-neutral-300);
  background: none;
  border: 0;
}
.sm-empty-icon svg { width: 64px; height: 64px; stroke-width: 1.2; }
/* Tur bazli ikon tonu (renk + metin birlikte; renk tek tasiyici degil) */
.sm-empty--first .sm-empty-icon { color: var(--sm-brand-400); }
.sm-empty--nofilter .sm-empty-icon { color: var(--sm-neutral-400); }
.sm-empty--done .sm-empty-icon { color: var(--sm-success-fill); }
.sm-empty--error .sm-empty-icon { color: var(--sm-danger-fill); }
.sm-empty--denied .sm-empty-icon { color: var(--sm-neutral-400); }

.sm-empty-title {
  font-size: var(--sm-fs-h3);
  line-height: var(--sm-lh-h3);
  font-weight: 600;
  color: var(--sm-text-primary);
  margin: var(--sm-space-6) 0 0;
}
.sm-empty-text {
  font-size: var(--sm-fs-body);
  line-height: var(--sm-lh-body);
  color: var(--sm-text-secondary);
  margin: var(--sm-space-4) auto 0;
  max-width: 420px;
}
.sm-empty-actions {
  margin-top: var(--sm-space-7);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sm-space-4);
  justify-content: center;
}
.sm-empty-code { font-size: var(--sm-fs-caption); color: var(--sm-text-muted); margin-top: var(--sm-space-4); }

/* --- Sayfalama --- */
.sm-pagination-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sm-space-4);
  min-height: 52px;
  padding: var(--sm-space-4) var(--sm-space-6);
  background-color: var(--sm-bg-subtle);
  font-size: var(--sm-fs-body-sm);
  color: var(--sm-text-secondary);
}
.pagination { --bs-pagination-border-radius: var(--sm-radius-md); }
.page-link {
  min-width: 32px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--sm-bg-surface);
  border-color: var(--sm-border-default);
  color: var(--sm-text-secondary);
  font-size: var(--sm-fs-body-sm);
  transition: background-color var(--sm-dur-120) var(--sm-ease-standard),
              color var(--sm-dur-120) var(--sm-ease-standard);
}
.page-link:hover { background-color: var(--sm-bg-hover); color: var(--sm-text-primary); }
.page-item.active .page-link {
  background-color: var(--sm-brand-600);
  border-color: var(--sm-brand-600);
  color: #ffffff;
}
.page-item.disabled .page-link { background-color: var(--sm-bg-subtle); color: var(--sm-text-disabled); }

/* --- Rozet / durum etiketi (B.10) --- */
.badge {
  height: 22px;
  padding: 2px var(--sm-space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--sm-space-3);
  font-size: var(--sm-fs-caption);
  line-height: var(--sm-lh-caption);
  font-weight: 600;
  letter-spacing: 0;
  border-radius: var(--sm-radius-full);
}
.badge.rounded-0, .sm-badge-cat { border-radius: var(--sm-radius-sm); }
.sm-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--sm-radius-full);
  background-color: currentColor;
  flex: 0 0 auto;
}
/* Zeminli (soft) varyantlar — varsayilan */
.text-bg-success { background-color: var(--sm-success-bg) !important; color: var(--sm-success-text) !important; }
.text-bg-warning { background-color: var(--sm-warning-bg) !important; color: var(--sm-warning-text) !important; }
.text-bg-danger  { background-color: var(--sm-danger-bg) !important;  color: var(--sm-danger-text) !important; }
.text-bg-info    { background-color: var(--sm-info-bg) !important;    color: var(--sm-info-text) !important; }
.text-bg-primary { background-color: var(--sm-brand-100) !important;  color: var(--sm-brand-800) !important; }
.text-bg-secondary, .text-bg-light { background-color: var(--sm-bg-subtle) !important; color: var(--sm-text-secondary) !important; }
.text-bg-dark { background-color: var(--sm-neutral-700) !important; color: #ffffff !important; }
:root[data-theme="dark"] .text-bg-primary { background-color: rgba(96, 165, 250, 0.16) !important; color: var(--sm-brand-300) !important; }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .text-bg-primary {
    background-color: rgba(96, 165, 250, 0.16) !important;
    color: var(--sm-brand-300) !important;
  }
}

/* --- Uyari kutulari --- */
.alert {
  border-radius: var(--sm-radius-lg);
  border: 1px solid var(--sm-border-default);
  padding: var(--sm-space-5) var(--sm-space-6);
  font-size: var(--sm-fs-body);
  border-left-width: 3px;
}
.alert-success { background-color: var(--sm-success-bg); color: var(--sm-success-text); border-left-color: var(--sm-success-fill); }
.alert-danger  { background-color: var(--sm-danger-bg);  color: var(--sm-danger-text);  border-left-color: var(--sm-danger-fill); }
.alert-warning { background-color: var(--sm-warning-bg); color: var(--sm-warning-text); border-left-color: var(--sm-warning-fill); }
.alert-info    { background-color: var(--sm-info-bg);    color: var(--sm-info-text);    border-left-color: var(--sm-info-fill); }
.alert-light   { background-color: var(--sm-bg-surface); color: var(--sm-text-secondary); }

/* --- Toast (B.9): sag ust, 380px, 16px aralik, maks 4 --- */
.sm-toast-region {
  position: fixed;
  top: calc(var(--sm-topbar-h) + var(--sm-space-6));
  right: var(--sm-space-6);
  z-index: 1080;
  display: flex;
  flex-direction: column;
  gap: var(--sm-space-6);
  width: 380px;
  max-width: calc(100vw - 32px);
  pointer-events: none;
}
.sm-toast {
  pointer-events: auto;
  display: flex;
  gap: var(--sm-space-5);
  padding: var(--sm-space-6);
  background-color: var(--sm-bg-surface-raised);
  border: 1px solid var(--sm-border-default);
  border-left: 3px solid var(--sm-text-muted);
  border-radius: var(--sm-radius-lg);
  box-shadow: var(--sm-shadow-lg);
  animation: sm-toast-in var(--sm-dur-200) var(--sm-ease-decelerate) both;
}
.sm-toast--success { border-left-color: var(--sm-success-fill); }
.sm-toast--info    { border-left-color: var(--sm-info-fill); }
.sm-toast--warning { border-left-color: var(--sm-warning-fill); }
.sm-toast--error   { border-left-color: var(--sm-danger-fill); }
.sm-toast-icon { flex: 0 0 auto; width: 20px; height: 20px; }
.sm-toast--success .sm-toast-icon { color: var(--sm-success-text); }
.sm-toast--info .sm-toast-icon { color: var(--sm-info-text); }
.sm-toast--warning .sm-toast-icon { color: var(--sm-warning-text); }
.sm-toast--error .sm-toast-icon { color: var(--sm-danger-text); }
.sm-toast-title { font-size: var(--sm-fs-body); font-weight: 600; margin: 0; color: var(--sm-text-primary); }
.sm-toast-body { font-size: var(--sm-fs-body-sm); color: var(--sm-text-secondary); margin: var(--sm-space-2) 0 0; }
.sm-toast .btn-close { width: 32px; height: 32px; margin-left: auto; flex: 0 0 auto; }

/* --- Iskelet (B.8) --- */
.sm-skeleton {
  background-color: var(--sm-neutral-200);
  background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  background-size: 180% 100%;
  border-radius: var(--sm-radius-xs);
  animation: sm-shimmer var(--sm-dur-shimmer) ease-in-out infinite;
  color: transparent !important;
  -webkit-user-select: none;
  user-select: none;
  min-height: 1em;
}
:root[data-theme="dark"] .sm-skeleton {
  background-color: var(--sm-bg-surface-raised);
  background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .sm-skeleton {
    background-color: var(--sm-bg-surface-raised);
    background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
  }
}
.sm-skeleton--text { height: 14px; margin-block: 3px; }
.sm-skeleton--caption { height: 12px; }
.sm-skeleton--metric { height: 24px; }
.sm-skeleton--last { width: 60%; }
.sm-skeleton--title { height: 20px; width: 40%; }
.sm-skeleton--block { height: 100%; min-height: 120px; border-radius: var(--sm-radius-lg); }
.sm-skeleton--avatar { width: 32px; height: 32px; border-radius: var(--sm-radius-full); }

/* Kimlik dogrulama sayfalari */
.auth-body { background-color: var(--sm-bg-canvas); color: var(--sm-text-primary); }

/* ---------------------------------------------------------------------
   9. GRAFIK BILESENLERI
   Cizim: wwwroot/lib/smartmirror-charts (SVG). Renkler yalnizca --dv-*
   slotlarindan CSS degiskeni olarak okunur; SVG'ye sabit hex yazilmaz.
   DONUT / PASTA / GAUGE YOKTUR (sartname yasagi).
   --------------------------------------------------------------------- */

.sm-chart { position: relative; width: 100%; }
.sm-chart-canvas { position: relative; width: 100%; }
.sm-chart svg { display: block; width: 100%; height: auto; overflow: visible; }

.sm-chart .viz-grid { stroke: var(--dv-grid); stroke-width: 1; shape-rendering: crispEdges; }
.sm-chart .viz-axis { stroke: var(--dv-axis); stroke-width: 1; shape-rendering: crispEdges; }
.sm-chart .viz-reference { stroke: var(--dv-reference); stroke-width: 1; stroke-dasharray: 4 3; }
.sm-chart .viz-tick {
  fill: var(--sm-text-muted);
  font-size: 11px;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}
.sm-chart .viz-label { fill: var(--sm-text-secondary); font-size: 12px; font-weight: 500; font-family: inherit; }
.sm-chart .viz-value {
  fill: var(--sm-text-primary);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}
.sm-chart .viz-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.sm-chart .viz-dot { stroke: var(--dv-surface); stroke-width: 2; }
.sm-chart .viz-track { fill: var(--dv-track); }
.sm-chart .viz-target { stroke: var(--dv-target); stroke-width: 2; }

/* D-24: grafik ilk cizim YALNIZCA opacity 0→1, 250ms decelerate.
   Cubuk buyumesi / cizgi cizilmesi YOK. */
.sm-chart .viz-mark { opacity: 0; transition: opacity var(--sm-dur-250) var(--sm-ease-decelerate); }
.is-drawn .viz-mark { opacity: 1; }
.sm-chart svg.is-hovering .viz-mark:not(.is-active) { opacity: 0.45; }

/* Hover disi zayiflatma icin gecis (D-25 ile ayni butcede) */
@media (prefers-reduced-motion: reduce) {
  .sm-chart .viz-mark { opacity: 1 !important; transition: none !important; }
}

/* Aciklama (legend) */
.sm-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sm-space-3) var(--sm-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--sm-fs-body-sm);
  color: var(--sm-text-secondary);
}
.sm-legend li { display: inline-flex; align-items: center; gap: var(--sm-space-3); }
.sm-legend .sm-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: 0 0 auto;
  background-color: var(--sm-legend-color, var(--dv-1));
}
.sm-legend .sm-legend-value { color: var(--sm-text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Ipucu (tooltip) — koyu zemin, radius 8px, shadow-md, tabular-nums */
.sm-chart-tip {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  background-color: var(--sm-neutral-900);
  color: var(--sm-neutral-50);
  border: 1px solid var(--sm-neutral-700);
  border-radius: var(--sm-radius-md);
  box-shadow: var(--sm-shadow-md);
  padding: var(--sm-space-4) var(--sm-space-5);
  font-size: var(--sm-fs-caption);
  line-height: 1.4;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -110%);
  /* D-9: tooltip 120ms belirme, 200ms gecikme */
  transition: opacity var(--sm-dur-120) var(--sm-ease-decelerate) var(--sm-dur-200);
  font-variant-numeric: tabular-nums;
}
.sm-chart-tip.is-visible { opacity: 1; }
.sm-chart-tip .sm-tip-name { display: inline-flex; align-items: center; gap: var(--sm-space-3); font-weight: 600; }
.sm-chart-tip .sm-tip-swatch { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }
.sm-chart-tip .sm-tip-value { color: var(--sm-neutral-300); }

/* Veri tablosu esdegeri — her grafik icin ZORUNLU erisilebilirlik kanali */
.sm-chart-table { margin-top: var(--sm-space-5); }
.sm-chart-table > summary {
  cursor: pointer;
  font-size: var(--sm-fs-caption);
  color: var(--sm-text-muted);
  padding: var(--sm-space-2) 0;
  border-radius: var(--sm-radius-xs);
}
.sm-chart-table > summary:hover { color: var(--sm-brand); }
.sm-chart-table table { width: 100%; font-size: var(--sm-fs-body-sm); margin-top: var(--sm-space-4); }
.sm-chart-table th, .sm-chart-table td { padding: var(--sm-space-3) var(--sm-space-4); border-bottom: 1px solid var(--sm-border-default); }
.sm-chart-table th { text-align: left; color: var(--sm-text-muted); font-weight: 600; }
.sm-chart-table td:last-child, .sm-chart-table th:last-child { text-align: right; font-variant-numeric: tabular-nums; }

.sm-chart-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sm-space-4);
  margin-bottom: var(--sm-space-5);
}
.sm-chart-title { font-size: var(--sm-fs-h3); line-height: var(--sm-lh-h3); font-weight: 600; color: var(--sm-text-primary); margin: 0; }
.sm-chart-sub { font-size: var(--sm-fs-caption); color: var(--sm-text-muted); margin: var(--sm-space-1) 0 0; }

/* Veri yoksa grafik alani KORUNUR (layout kaymasi olmaz) */
.sm-chart-empty {
  display: grid;
  place-items: center;
  min-height: 140px;
  color: var(--sm-text-muted);
  font-size: var(--sm-fs-body);
  text-align: center;
  border: 1px dashed var(--sm-border-default);
  border-radius: var(--sm-radius-md);
  padding: var(--sm-space-6);
}

/* --- Yatay ilerleme cubugu (doluluk/tamamlanma yuzdesi icin ZORUNLU form) --- */
.sm-meter {
  height: 12px;
  border-radius: var(--sm-radius-full);
  background-color: var(--dv-track);
  overflow: hidden;
  position: relative;
}
.sm-meter > span {
  display: block;
  height: 100%;
  border-radius: var(--sm-radius-full);
  background-color: var(--sm-brand-600);
}
.sm-meter--sm { height: 6px; }
.sm-meter--xs { height: 4px; }
/* Hedef cizgisi: cubugun uzerinde 2px dikey isaret */
.sm-meter-target {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background-color: var(--dv-target);
}
/* Metrik + cubuk blogu */
.sm-metric-block { display: flex; flex-direction: column; gap: var(--sm-space-4); }
.sm-metric-value {
  font-size: var(--sm-fs-metric-lg);
  line-height: var(--sm-lh-metric-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--sm-text-primary);
}
.sm-metric-value--xl { font-size: var(--sm-fs-metric-xl); line-height: var(--sm-lh-metric-xl); }
.sm-metric-caption { font-size: var(--sm-fs-caption); color: var(--sm-text-muted); }

/* --- Tek satir yatay yigilmis cubuk (kategorik dagilim) --- */
.sm-stack {
  display: flex;
  width: 100%;
  height: 16px;
  border-radius: var(--sm-radius-full);
  overflow: hidden;
  background-color: var(--dv-track);
}
.sm-stack > span { display: block; height: 100%; }
.sm-stack > span + span { box-shadow: inset 2px 0 0 var(--dv-surface); }

/* ---------------------------------------------------------------------
   10. ODA DURUM PANOSU (C.3) + ODA DURUM ROZETI (A.6)
   Her durum UC sinyal: renk + kod + ikon. OOO/OOS'ta ayrica 45 derece
   capraz tarama deseni (renkten bagimsiz ikinci sinyal).
   --------------------------------------------------------------------- */

.sm-rs {
  display: inline-flex;
  align-items: center;
  gap: var(--sm-space-3);
  height: 22px;
  padding: 2px var(--sm-space-4);
  border-radius: var(--sm-radius-full);
  font-size: var(--sm-fs-caption);
  line-height: var(--sm-lh-caption);
  font-weight: 600;
  background-color: var(--sm-rs-bg, var(--sm-bg-subtle));
  color: var(--sm-rs-ink, var(--sm-text-secondary));
  white-space: nowrap;
}
.sm-rs svg { width: 12px; height: 12px; flex: 0 0 auto; }
.sm-rs-code { font-weight: 700; letter-spacing: 0.02em; }
.sm-rs-dot { width: 6px; height: 6px; border-radius: var(--sm-radius-full); background-color: var(--sm-rs-ink); flex: 0 0 auto; }

.sm-rs--vc  { --sm-rs-ink: var(--rs-vc);  --sm-rs-bg: var(--rs-vc-bg); }
.sm-rs--vi  { --sm-rs-ink: var(--rs-vi);  --sm-rs-bg: var(--rs-vi-bg); }
.sm-rs--vd  { --sm-rs-ink: var(--rs-vd);  --sm-rs-bg: var(--rs-vd-bg); }
.sm-rs--oc  { --sm-rs-ink: var(--rs-oc);  --sm-rs-bg: var(--rs-oc-bg); }
.sm-rs--od  { --sm-rs-ink: var(--rs-od);  --sm-rs-bg: var(--rs-od-bg); }
.sm-rs--ooo { --sm-rs-ink: var(--rs-ooo); --sm-rs-bg: var(--rs-ooo-bg); }
.sm-rs--oos { --sm-rs-ink: var(--rs-oos); --sm-rs-bg: var(--rs-oos-bg); }
.sm-rs--arr { --sm-rs-ink: var(--rs-arr); --sm-rs-bg: var(--rs-arr-bg); }
.sm-rs--dep { --sm-rs-ink: var(--rs-dep); --sm-rs-bg: var(--rs-dep-bg); }
.sm-rs--dnd { --sm-rs-ink: var(--rs-dnd); --sm-rs-bg: var(--rs-dnd-bg); }

/* Koyu temada rozet metni acilir (kontrast) */
:root[data-theme="dark"] .sm-rs--vc  { --sm-rs-ink: #4ade80; }
:root[data-theme="dark"] .sm-rs--vi  { --sm-rs-ink: #4ade80; }
:root[data-theme="dark"] .sm-rs--vd  { --sm-rs-ink: #f87171; }
:root[data-theme="dark"] .sm-rs--oc  { --sm-rs-ink: #60a5fa; }
:root[data-theme="dark"] .sm-rs--od  { --sm-rs-ink: #fbbf24; }
:root[data-theme="dark"] .sm-rs--ooo { --sm-rs-ink: #94a3b8; }
:root[data-theme="dark"] .sm-rs--oos { --sm-rs-ink: #cbd5e1; }
:root[data-theme="dark"] .sm-rs--arr { --sm-rs-ink: #a78bfa; }
:root[data-theme="dark"] .sm-rs--dep { --sm-rs-ink: #67e8f9; }
:root[data-theme="dark"] .sm-rs--dnd { --sm-rs-ink: #f9a8d4; }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .sm-rs--vc  { --sm-rs-ink: #4ade80; }
  :root:where(:not([data-theme="light"])) .sm-rs--vi  { --sm-rs-ink: #4ade80; }
  :root:where(:not([data-theme="light"])) .sm-rs--vd  { --sm-rs-ink: #f87171; }
  :root:where(:not([data-theme="light"])) .sm-rs--oc  { --sm-rs-ink: #60a5fa; }
  :root:where(:not([data-theme="light"])) .sm-rs--od  { --sm-rs-ink: #fbbf24; }
  :root:where(:not([data-theme="light"])) .sm-rs--ooo { --sm-rs-ink: #94a3b8; }
  :root:where(:not([data-theme="light"])) .sm-rs--oos { --sm-rs-ink: #cbd5e1; }
  :root:where(:not([data-theme="light"])) .sm-rs--arr { --sm-rs-ink: #a78bfa; }
  :root:where(:not([data-theme="light"])) .sm-rs--dep { --sm-rs-ink: #67e8f9; }
  :root:where(:not([data-theme="light"])) .sm-rs--dnd { --sm-rs-ink: #f9a8d4; }
}

/* Capraz tarama deseni — OOO / OOS (renkten bagimsiz ikinci sinyal) */
.sm-rs--ooo, .sm-rs--oos, .sm-room-card.is-hatched {
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0 4px,
    color-mix(in srgb, var(--sm-rs-ink, #64748b) 22%, transparent) 4px 6px
  );
}

/* --- Oda kartlari izgarasi (C.3) --- */
.sm-room-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: var(--sm-space-5);
}
.sm-room-card {
  position: relative;
  min-height: 92px;
  padding: var(--sm-space-4) var(--sm-space-4) var(--sm-space-4) var(--sm-space-5);
  border: 1px solid var(--sm-border-default);
  border-radius: var(--sm-radius-md);
  background-color: var(--sm-bg-surface);
  display: flex;
  flex-direction: column;
  gap: var(--sm-space-3);
  text-decoration: none;
  color: var(--sm-text-primary);
  transition: box-shadow var(--sm-dur-120) var(--sm-ease-standard),
              border-color var(--sm-dur-120) var(--sm-ease-standard);
}
.sm-room-card::before {           /* sol 3px durum seridi — konum sinyali */
  content: "";
  position: absolute;
  inset-block: -1px;
  left: -1px;
  width: 3px;
  border-radius: var(--sm-radius-md) 0 0 var(--sm-radius-md);
  background-color: var(--sm-rs-ink, var(--sm-text-muted));
}
.sm-room-card:hover { box-shadow: var(--sm-shadow-sm); border-color: var(--sm-border-strong); }
.sm-room-no {
  font-size: var(--sm-fs-metric-sm);
  line-height: var(--sm-lh-metric-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sm-room-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sm-space-3); }
.sm-room-type { font-size: var(--sm-fs-caption); color: var(--sm-text-muted); margin-top: auto; }

/* Durum lejanti — yatay serit */
.sm-legend-status {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sm-space-4) var(--sm-space-6);
  padding: var(--sm-space-5) var(--sm-space-6);
  background-color: var(--sm-bg-surface);
  border: 1px solid var(--sm-border-default);
  border-radius: var(--sm-radius-lg);
  margin-bottom: var(--sm-space-6);
  list-style: none;
  font-size: var(--sm-fs-body-sm);
}
.sm-legend-status li { display: inline-flex; align-items: center; gap: var(--sm-space-3); }
.sm-legend-status .sm-legend-count { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--sm-text-primary); }

/* Zorunlu renk modu */
@media (forced-colors: active) {
  .sm-chart .viz-mark { forced-color-adjust: none; }
  .sm-legend .sm-legend-swatch { border: 1px solid CanvasText; }
  .sm-room-card::before { forced-color-adjust: none; }
}

/* ---------------------------------------------------------------------
   KAT PLANI TUVALI (harita editoru)
   Noktalar 0-1 NORMALIZE oranla saklanir; tuval oranini kat ayari belirler.
   Harici harita/diyagram kutuphanesi YOKTUR — saf CSS + kucuk bir surukleme
   betigi (wwwroot/js/floor-map-editor.js).
   Isaretciler renk TEK TASIYICI olmayacak sekilde daima ETIKET tasir; tur
   ayrimi ayrica ikon/bas harf ile verilir.
   --------------------------------------------------------------------- */

.sm-plan {
  position: relative;
  width: 100%;
  aspect-ratio: var(--sm-plan-ratio, 1.6);
  background-color: var(--sm-bg-subtle);
  border: 1px solid var(--sm-border-default);
  border-radius: var(--sm-radius-lg);
  overflow: hidden;
  touch-action: none;                 /* surukleme sirasinda sayfa kaymasin */
  cursor: crosshair;
}
.sm-plan.is-readonly { cursor: default; }

/* Kat plani pafta gorseli (Floors.PlanImagePath).
   background-size 100% 100% BILINCLIDIR: pafta tuvali TAM olarak doldurur, boylece
   0-1 normalize koordinat ile pafta uzerindeki konum birebir ortusur (letterbox kaymasi
   olmaz). Pafta en/boy orani PlanAspectRatio ile ayni verildiginde deformasyon olusmaz. */
.sm-plan.has-plan-image {
  background-image: var(--sm-plan-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* Yerlestirme izgarasi — konum tahmini icin gorsel referans (10x10) */
.sm-plan::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--sm-border-default) 1px, transparent 1px),
    linear-gradient(to bottom, var(--sm-border-default) 1px, transparent 1px);
  background-size: 10% 10%;
  opacity: 0.5;
  pointer-events: none;
}

/* Pafta varken izgara yalnizca ince bir yerlestirme yardimcisidir; cizimi bastirmasin. */
.sm-plan.has-plan-image::before { opacity: 0.14; }

.sm-plan-point {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: var(--sm-space-3);
  max-width: 40%;
  padding: 2px var(--sm-space-4);
  border: 1px solid var(--sm-border-strong);
  border-radius: var(--sm-radius-full);
  background-color: var(--sm-bg-surface);
  color: var(--sm-text-primary);
  font-size: var(--sm-fs-caption);
  font-weight: 600;
  line-height: var(--sm-lh-caption);
  white-space: nowrap;
  cursor: grab;
  /* D-1: yalnizca renk gecisi; tasima sirasinda transform ANIMASYONU YOK */
  transition: background-color var(--sm-dur-120) var(--sm-ease-standard),
              border-color var(--sm-dur-120) var(--sm-ease-standard);
}
.sm-plan-point:hover { background-color: var(--sm-bg-hover); border-color: var(--sm-brand-600); }
.sm-plan-point:focus-visible { outline: var(--sm-focus); outline-offset: 2px; box-shadow: var(--sm-focus-ring); }
.sm-plan-point.is-dragging { cursor: grabbing; box-shadow: var(--sm-shadow-md); z-index: 3; }
.sm-plan-point.is-selected {
  background-color: var(--sm-brand-surface);
  border-color: var(--sm-brand-600);
  color: var(--sm-brand-700);
  z-index: 2;
}
.sm-plan-point.is-inactive { opacity: 0.55; border-style: dashed; }
.sm-plan-point svg { width: 14px; height: 14px; flex: none; }
.sm-plan-point .sm-plan-label { overflow: hidden; text-overflow: ellipsis; }

/* Tikla-ekle onizlemesi: henuz kaydedilmemis konum */
.sm-plan-ghost {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  border: 2px dashed var(--sm-brand-600);
  border-radius: var(--sm-radius-full);
  background-color: color-mix(in srgb, var(--sm-brand-600) 20%, transparent);
  pointer-events: none;
}
.sm-plan-ghost[hidden] { display: none; }

.sm-plan-hint {
  display: block;
  margin-top: var(--sm-space-4);
  font-size: var(--sm-fs-caption);
  line-height: var(--sm-lh-caption);
  color: var(--sm-text-muted);
}

/* ---------------------------------------------------------------------
   CONCIERGE SOHBET (iki bolmeli operasyon ekrani)
   Sol: sohbet kuyrugu · Sag: mesaj gorunumu + yanit kutusu.
   --------------------------------------------------------------------- */

.sm-chat-list { max-height: 640px; overflow-y: auto; }
.sm-chat-item {
  display: block;
  width: 100%;
  padding: var(--sm-space-5) var(--sm-space-6);
  border: 0;
  border-bottom: 1px solid var(--sm-border-default);
  background: none;
  color: inherit;
  text-align: start;
  text-decoration: none;
  transition: background-color var(--sm-dur-100) var(--sm-ease-standard);
}
.sm-chat-item:hover { background-color: var(--sm-bg-hover); color: inherit; }
.sm-chat-item.is-active {
  background-color: var(--sm-brand-surface);
  box-shadow: inset 3px 0 0 var(--sm-brand-600);   /* renk tek tasiyici degil: konum sinyali */
}
.sm-chat-item:last-child { border-bottom: 0; }

.sm-chat-thread {
  display: flex;
  flex-direction: column;
  gap: var(--sm-space-5);
  max-height: 520px;
  overflow-y: auto;
  padding: var(--sm-space-6);
}
.sm-chat-msg {
  max-width: 78%;
  padding: var(--sm-space-5) var(--sm-space-6);
  border: 1px solid var(--sm-border-default);
  border-radius: var(--sm-radius-lg);
  background-color: var(--sm-bg-subtle);
  font-size: var(--sm-fs-body);
  line-height: var(--sm-lh-body);
  overflow-wrap: anywhere;
}
.sm-chat-msg--staff {
  align-self: flex-end;
  background-color: var(--sm-brand-surface);
  border-color: var(--sm-brand-200, var(--sm-border-strong));
}
.sm-chat-msg--system {
  align-self: center;
  max-width: 100%;
  background-color: transparent;
  border-style: dashed;
  color: var(--sm-text-muted);
  font-size: var(--sm-fs-caption);
}
/* Yapay zeka yaniti: otel tarafindadir (saga hizali) ama PERSONEL mesaji DEGILDIR.
   Ayirt edici uc sinyal: bilgi tonlu zemin + sol kenar seridi + rozet METNI (B.10;
   renk tek tasiyici olamaz). */
.sm-chat-msg--ai {
  align-self: flex-end;
  background-color: var(--sm-info-bg);
  border-color: var(--sm-info-fill);
  border-left-width: 3px;
}
.sm-chat-msg-tag {
  display: inline-block;
  margin-bottom: var(--sm-space-3);
  font-size: var(--sm-fs-caption);
  line-height: var(--sm-lh-caption);
}
.sm-chat-msg-meta {
  display: block;
  margin-top: var(--sm-space-3);
  font-size: var(--sm-fs-caption);
  line-height: var(--sm-lh-caption);
  color: var(--sm-text-muted);
  font-variant-numeric: tabular-nums;
}

/* Demo saglayici uyari seridi — islevsel sinir bildirimi, kapatilamaz */
.sm-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--sm-space-5);
  padding: var(--sm-space-5) var(--sm-space-6);
  border: 1px solid var(--sm-warning-border);
  border-left-width: 3px;
  border-radius: var(--sm-radius-md);
  background-color: var(--sm-warning-bg);
  color: var(--sm-text-primary);
  font-size: var(--sm-fs-body-sm);
  line-height: var(--sm-lh-body-sm);
}
.sm-notice svg { width: 18px; height: 18px; flex: none; color: var(--sm-warning-text); }

/* ---------------------------------------------------------------------
   Gorsel + video secici (_MediaPicker.cshtml)

   Onizleme kutusu SABIT yukseklikte tutulur: dosya yuklendiginde kutu
   buyuyup formun geri kalanini asagi itmez (yerinden oynayan arayuz
   kullaniciyi yaniltir ve yanlis dugmeye basmaya yol acar).
   --------------------------------------------------------------------- */

.sm-media-slot {
  border: 1px solid var(--sm-border-default);
  border-radius: var(--sm-radius-md);
  background-color: var(--sm-bg-subtle);
  padding: var(--sm-space-5);
}

.sm-media-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  max-height: 220px;
  overflow: hidden;
  border-radius: var(--sm-radius-sm);
  background-color: var(--sm-bg-surface);
  border: 1px dashed var(--sm-border-default);
}

.sm-media-preview img,
.sm-media-preview video {
  max-width: 100%;
  max-height: 210px;
  object-fit: contain;
  border-radius: var(--sm-radius-sm);
}

.sm-media-empty {
  margin: 0;
  color: var(--sm-text-muted);
  font-size: var(--sm-fs-body-sm);
  line-height: var(--sm-lh-body-sm);
}

.sm-media-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sm-space-4);
  margin-top: var(--sm-space-5);
}

/* Hata metni: renk TEK TASIYICI degildir — metnin kendisi sorunu yazar. */
.sm-media-error {
  margin-top: var(--sm-space-4);
  margin-bottom: 0;
  color: var(--sm-danger-text);
  font-size: var(--sm-fs-body-sm);
  line-height: var(--sm-lh-body-sm);
}

/* ---------------------------------------------------------------------
   Responsive duzeltmeler
   --------------------------------------------------------------------- */

@media (max-width: 991.98px) {
  .sm-page-title { font-size: var(--sm-fs-h2); }
  .sm-table-sticky > thead th { top: 0; }
}

@media (max-width: 575.98px) {
  .card-body { padding: var(--sm-space-6); }
  .table > thead th, .table > tbody > tr > td { padding-inline: var(--sm-space-5); }
  .sm-empty { padding: var(--sm-space-9) var(--sm-space-6); }
  .sm-page-actions { width: 100%; }
  .sm-toast-region { width: auto; left: var(--sm-space-6); }
}

/* Yazdirma */
@media print {
  .admin-sidebar, .admin-topbar, .admin-footer, .sm-page-actions, .sm-filterbar, .sm-toolbar { display: none !important; }
  .card { box-shadow: none; border-color: #999; }
  .sm-chart-table[open] > summary { display: none; }
}