html {
  font-size: 13px;
  /* Sayfa-arasi navigasyon flash'i engelle (rapor §6.8 FOUC fix):
     Browser default beyaz arka plani yerine projenin koyu temasiyla uyumlu
     bir base verir. Light tema body class'i geldikten sonra ezilebilir. */
  background-color: #0c0f1a;
  /* TEK DEĞERLİ olmalı (2026-09-06): eskiden "dark light" yazıyordu ve iki değerli
     bildirim seçimi İŞLETİM SİSTEMİNE bırakır — uygulama koyu temadayken OS açık
     temadaysa native <select> açılır paneli, checkbox ve scrollbar beyaz çiziliyordu.
     Buradaki değer, hemen üstündeki koyu FOUC arka planıyla tutarlı olan "dark";
     tema sınıfı geldiğinde aşağıdaki kurallar ezer. */
  color-scheme: dark;
}
html.light, html:has(body.app-theme-light) {
  background-color: #f8fafc;
  color-scheme: light;
}

/* ═══════════════════════════════════════════════════════════════════
   Gereksiz caret bastırma (PageComment Seq 40, screenKey "/", 2026-07-26)
   ---------------------------------------------------------------------
   Metin girişi OLMAYAN yüzeylerde (buton, label, div, tıklanabilir
   satır/kart) tıklanınca yanıp sönen metin imleci (caret) görünmesin.
   caret-color MİRAS ALINAN bir özelliktir — yalnız "*:not(input)..."
   kuralı YETMEZ: gerçek bir <input>/<textarea>/[contenteditable] her
   zaman bir sarmalayıcı <div> içindedir; sarmalayıcıdaki transparent
   değer miras yoluyla input'a da siner ve gerçek giriş alanlarının
   caret'i de kaybolur. Bu yüzden 2. kural input/textarea/select/
   [contenteditable] üzerinde caret-color'u AÇIKÇA auto'ya DÖNDÜRÜR
   (elemanın kendi üzerine deklare edilen değer miras zincirini keser).
   [contenteditable] * (editör içindeki <p>/<strong>/<span> vb.) ayrıca
   ana kuraldan HARİÇ TUTULUR ki Notes/Tiptap zengin metin editörünün
   içeriği de miras yoluyla auto alsın — yoksa editörde yazarken caret
   kaybolur (bkz. ClientApp/src/components/NotesWorkspace, .tiptap kökü
   contenteditable="true"). ShopFloor.cshtml (fabrika kiosk ekranı) bu
   dosyayı değil yalnız tokens.css'i yüklüyor — AYNI kural orada da
   tutuluyor (drift'e izin verme, ikisini birlikte değiştir).
   ═══════════════════════════════════════════════════════════════════ */
*:not(input):not(textarea):not(select):not([contenteditable]):not([contenteditable] *) {
  caret-color: transparent;
}
input, textarea, select, [contenteditable] {
  caret-color: auto;
}

/* ── Button design tokens (rapor §6.5) ───────────────────────────────────
   3 farkli buton naming (ca-btn--*, smartcard-kitt__btn--*, btn-primary) tek
   token set uzerinde birlestiriliyor. Mevcut class'lar ALIAS olarak kullanir;
   yeni kod .cb-btn .cb-btn--primary kullanir.

   Token'lar tema bazli override edilir (dark/midnight/light).
*/
:root {
  --cb-btn-radius:        8px;
  --cb-btn-padding-y:     8px;
  --cb-btn-padding-x:     16px;
  --cb-btn-font-size:     13px;
  --cb-btn-font-weight:   600;
  --cb-btn-border:        1px solid transparent;
  --cb-btn-transition:    background .15s, color .15s, border-color .15s, box-shadow .15s;

  --cb-btn-primary-bg:      #6366f1;
  --cb-btn-primary-fg:      #ffffff;
  --cb-btn-primary-border:  #4f46e5;
  --cb-btn-primary-hover:   #4f46e5;

  --cb-btn-secondary-bg:     transparent;
  --cb-btn-secondary-fg:     #475569;
  --cb-btn-secondary-border: #cbd5e1;
  --cb-btn-secondary-hover:  rgba(99, 102, 241, 0.08);

  --cb-btn-danger-bg:      transparent;
  --cb-btn-danger-fg:      #ef4444;
  --cb-btn-danger-border:  rgba(239, 68, 68, 0.35);
  --cb-btn-danger-hover:   rgba(239, 68, 68, 0.10);

  --cb-btn-ghost-bg:      transparent;
  --cb-btn-ghost-fg:      #64748b;
  --cb-btn-ghost-border:  transparent;
  --cb-btn-ghost-hover:   rgba(99, 102, 241, 0.08);
}
body.app-theme-dark, body.app-theme-midnight {
  --cb-btn-secondary-fg:     #cbd5e1;
  --cb-btn-secondary-border: rgba(255, 255, 255, 0.15);
  --cb-btn-secondary-hover:  rgba(255, 255, 255, 0.08);
  --cb-btn-ghost-fg:         #94a3b8;
}

/* Unified button base + variant'lar */
.cb-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: var(--cb-btn-padding-y) var(--cb-btn-padding-x);
  border-radius: var(--cb-btn-radius);
  font-size: var(--cb-btn-font-size);
  font-weight: var(--cb-btn-font-weight);
  border: var(--cb-btn-border);
  cursor: pointer;
  transition: var(--cb-btn-transition);
  text-decoration: none;
  user-select: none;
}
.cb-btn:disabled, .cb-btn[disabled] { opacity: 0.55; cursor: not-allowed; }

.cb-btn--primary {
  background: var(--cb-btn-primary-bg);
  color: var(--cb-btn-primary-fg);
  border-color: var(--cb-btn-primary-border);
}
.cb-btn--primary:hover:not(:disabled) { background: var(--cb-btn-primary-hover); color: var(--cb-btn-primary-fg); }

.cb-btn--secondary {
  background: var(--cb-btn-secondary-bg);
  color: var(--cb-btn-secondary-fg);
  border-color: var(--cb-btn-secondary-border);
}
.cb-btn--secondary:hover:not(:disabled) { background: var(--cb-btn-secondary-hover); }

.cb-btn--danger {
  background: var(--cb-btn-danger-bg);
  color: var(--cb-btn-danger-fg);
  border-color: var(--cb-btn-danger-border);
}
.cb-btn--danger:hover:not(:disabled) { background: var(--cb-btn-danger-hover); }

.cb-btn--ghost {
  background: var(--cb-btn-ghost-bg);
  color: var(--cb-btn-ghost-fg);
  border-color: var(--cb-btn-ghost-border);
}
.cb-btn--ghost:hover:not(:disabled) { background: var(--cb-btn-ghost-hover); }

.cb-btn--sm { padding: 4px 10px; font-size: 11.5px; }
.cb-btn--lg { padding: 10px 22px; font-size: 14px; }

/* ── Skeleton loading (rapor §6.8) ───────────────────────────────────────
   Buyuk gridler (CalibraLineItemsGrid) ve liste sayfalarinda spinner yerine
   shimmer-animasyonlu satir iskeleti.

   Kullanim:
     <div class="cb-skeleton cb-skeleton-row" style="width:80%;"></div>
     <div class="cb-skeleton cb-skeleton-rect" style="height:80px;"></div>
*/
.cb-skeleton {
  display: inline-block;
  background: linear-gradient(90deg,
    rgba(148, 163, 184, 0.10) 0%,
    rgba(148, 163, 184, 0.18) 50%,
    rgba(148, 163, 184, 0.10) 100%);
  background-size: 200% 100%;
  animation: cb-skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: 4px;
}
.cb-skeleton-row {
  width: 100%; height: 14px; margin: 6px 0;
}
.cb-skeleton-rect {
  width: 100%; height: 60px; border-radius: 8px;
}
.cb-skeleton-circle {
  width: 36px; height: 36px; border-radius: 50%;
}
body.app-theme-dark .cb-skeleton, body.app-theme-midnight .cb-skeleton {
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.10) 50%,
    rgba(255, 255, 255, 0.05) 100%);
  background-size: 200% 100%;
}
@keyframes cb-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Validation gorsel sistemi (rapor §6.1) ──────────────────────────────
   Form input/select/textarea hatali ise kullaniciya gorsel feedback:
   kirmizi border + hafif kirmizi background + ekran okuyucu icin aria-invalid.

   Kullanim (Razor):
       <input asp-for="Email" class="form-control" />
       <span asp-validation-for="Email" class="cb-field-error"></span>
   ASP.NET Core ModelState invalid ise input'a otomatik "input-validation-error"
   class'i ekler — biz buna .is-invalid alias'i veriyoruz + kendi gorsel kuralimiz.

   Manuel JS:
       inputEl.classList.add('is-invalid');
       inputEl.setAttribute('aria-invalid', 'true');
*/
.is-invalid,
.input-validation-error {
  border-color: #ef4444 !important;
  background-color: rgba(239, 68, 68, 0.04) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.10) !important;
}
.is-invalid:focus,
.input-validation-error:focus {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18) !important;
}
.cb-field-error,
.field-validation-error {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #dc2626;
  font-weight: 500;
}
body.app-theme-dark .cb-field-error,
body.app-theme-dark .field-validation-error,
body.app-theme-midnight .cb-field-error,
body.app-theme-midnight .field-validation-error {
  color: #fca5a5;
}
.cb-validation-summary,
.validation-summary-errors {
  margin-bottom: 16px;
  padding: 12px 16px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  color: #dc2626;
}
body.app-theme-dark .cb-validation-summary,
body.app-theme-dark .validation-summary-errors,
body.app-theme-midnight .cb-validation-summary,
body.app-theme-midnight .validation-summary-errors {
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
}
.cb-validation-summary ul,
.validation-summary-errors ul {
  margin: 4px 0 0 18px;
  padding: 0;
  font-size: 13px;
}
/* Required indicator — required attribute olan input label'ında asterisk */
.cb-field-required::after {
  content: ' *';
  color: #ef4444;
  font-weight: 700;
}

/* ── Global utility: Sticky form toolbar ─────────────────────────────────
   Page-level scroll'lu formlarda (workspace-frame-body pattern'i kullanmayan
   admin formlari) Save/Iptal butonlarinin scroll edince kaybolmamasi icin
   opt-in utility class. CLAUDE.md rapor §6.2 cozumu.

   Kullanim (Razor):
       <div class="cb-sticky-toolbar cb-sticky-toolbar--top">
         <button class="btn-primary">Kaydet</button>
         <button class="btn-secondary">Vazgec</button>
       </div>
   veya bottom:
       <div class="cb-sticky-toolbar cb-sticky-toolbar--bottom">...</div>
*/
.cb-sticky-toolbar {
  display: flex; gap: 8px; align-items: center;
  padding: 10px 16px;
  background: rgba(248, 250, 252, 0.92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  z-index: 50;
}
.cb-sticky-toolbar--top {
  position: sticky; top: 0;
  border-bottom: 1px solid var(--app-border, #e2e8f0);
  margin: 0 0 12px;
}
.cb-sticky-toolbar--bottom {
  position: sticky; bottom: 0;
  border-top: 1px solid var(--app-border, #e2e8f0);
  margin: 12px 0 0;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.04);
}
body.app-theme-dark .cb-sticky-toolbar,
body.app-theme-midnight .cb-sticky-toolbar {
  background: rgba(15, 23, 42, 0.92);
  border-color: rgba(255, 255, 255, 0.08);
}
body.app-theme-dark .cb-sticky-toolbar--bottom,
body.app-theme-midnight .cb-sticky-toolbar--bottom {
  box-shadow: 0 -2px 12px rgba(0,0,0,0.4);
}

/* ── A11y: global :focus-visible kurali ───────────────────────────────────
   149 yerde "outline: none" reset'i var (mouse kullaniciya temiz gorunum saglar).
   Buna karsilik klavye kullanicilari (Tab tusu) icin :focus-visible kurali
   her elementte gorunur bir fokus halkasi saglar. WCAG 2.1 a11y gerekligi.
   Mouse tiklayinca :focus-visible degil :focus tetiklenir — outline gorunmez kalir. */
*:focus-visible {
  outline: 2px solid var(--focus-color, #6366f1);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Bazi form elementlerinde outline-offset zaten kotu calisir (border'a yapisik) — onlara box-shadow ile fokus halkasi */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible {
  outline: 2px solid var(--focus-color, #6366f1);
  outline-offset: 2px;
}
/* Dark/midnight tema icin daha parlak fokus rengi */
body.app-theme-dark,
body.app-theme-midnight {
  --focus-color: #a78bfa;
}

/* ── Global: etiketler ve menü öğeleri seçilemez ── */
label, .form-label, .sqe-label, .compact-form-field .form-label,
.side-item, .side-subitem, .side-toggle, .admin-nav-item,
.settings-link, .menu-text, .menu-icon, .side-group > summary,
.admin-group > summary, .workspace-tab__link,
h1, h2, h3, h4, h5, h6,
.btn, button, .nav-link, .tab-btn, .sqe-tab-btn, .wiz-btn-nav {
  user-select: none;
  -webkit-user-select: none;
}

/* ── Profile Dropdown Switch (Language & Theme) ─────────── */
.profile-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  gap: 12px;
}
.profile-switch-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748b;
}
.profile-switch-icon {
  width: 14px;
  height: 14px;
  color: #94a3b8;
}
.profile-switch {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
}
.profile-switch-track {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 56px;
  height: 26px;
  border-radius: 999px;
  background: #e2e8f0;
  border: 1px solid #cbd5e1;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.profile-switch.is-on .profile-switch-track {
  background: #6366f1;
  border-color: #4f46e5;
}
.profile-switch-opt {
  position: relative;
  z-index: 2;
  flex: 1;
  text-align: center;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #475569;
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-switch-opt--left {
  color: #334155;
}
.profile-switch-opt--right {
  color: #94a3b8;
}
.profile-switch.is-on .profile-switch-opt--left {
  color: rgba(255, 255, 255, 0.55);
}
.profile-switch.is-on .profile-switch-opt--right {
  color: #ffffff;
}
.profile-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 20px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}
.profile-switch.is-on .profile-switch-thumb {
  transform: translateX(28px);
}
.profile-switch:hover .profile-switch-track {
  filter: brightness(1.05);
}

/* ── Dark theme sync: body.app-theme-dark → html.dark ──── */
body.app-theme-dark ~ * .profile-switch-track,
body.app-theme-dark .profile-switch-track {
  background: #1e293b;
  border-color: #334155;
}
body.app-theme-dark .profile-switch.is-on .profile-switch-track {
  background: #6366f1;
  border-color: #4f46e5;
}
body.app-theme-dark .profile-switch-opt--left,
body.app-theme-dark .profile-switch-opt--right {
  color: #94a3b8;
}
body.app-theme-dark .profile-switch-label {
  color: #cbd5e1;
}
body.app-theme-dark .profile-switch-icon {
  color: #64748b;
}

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

@media (min-width: 768px) {
  html {
    font-size: 14px;
  }
}

body {
  margin: 0;
  height: 100dvh;
  overflow: hidden;
  background: #f3f6fb;
  color: #1f2937;
  line-height: 1.35;
  font-family: "Inter", sans-serif;
}

/* ── Dark tema canvas: en dis katman (body + html) tamamen koyu ──
   React Shell root'u `bg-[#0a0d17]` ile doldursa da yuvarlak kose
   kartlarin (Header, TabBar, Sidebar) arkasindan parent body'nin
   acik `#f3f6fb` rengi sizabilir ("Corner Peeking" hatasi). Bunu
   onlemek icin body.app-theme-dark ve icindeki tum iframe wrapper'lar
   (layout-body / dashboard-body / workspace-frame-body) dark'ta
   tamamen `#0a0d17`'a boyanir. Light tema davranisi degismez. */
html.dark,
html.dark body,
body.app-theme-dark,
body.app-theme-dark .layout-body,
body.app-theme-dark .dashboard-body,
body.app-theme-dark.workspace-frame-body,
body.app-theme-dark .workspace-frame-body {
  background-color: #0a0d17 !important;
  background-image: none;
  color: #e2e8f0;
}

:root {
  --nav-bg-start: #080b14;
  --nav-bg-end: #0c1021;
  --nav-border: rgba(99, 102, 241, 0.15);
  --nav-text: #e2e8f0;
  --nav-text-muted: #64748b;
  --nav-accent: #6366f1;
  --nav-accent-soft: rgba(99, 102, 241, 0.12);
  --nav-accent-glow: rgba(99, 102, 241, 0.25);
  --nav-quick: #22d3ee;
  --layout-header-height: 66px;
  --layout-footer-height: 44px;
  --sidebar-open-width: 280px;
  --sidebar-collapsed-width: 86px;
  --layout-motion-duration: 0.3s;
  --layout-motion-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --workspace-tabs-sticky-height: 46px;
}

.layout-body {
  height: 100dvh;
  overflow: hidden;
  padding-top: var(--layout-header-height);
  padding-bottom: var(--layout-footer-height);
}

.layout-body.has-side-rail {
  padding-left: var(--sidebar-open-width);
  transition: padding-left var(--layout-motion-duration) var(--layout-motion-ease);
}

.layout-body.has-side-rail.app-side-collapsed {
  padding-left: 0;
}

.main-nav {
  background: linear-gradient(90deg, #0f172a, #1e3a8a);
}

.app-topbar {
  min-height: var(--layout-header-height);
  height: var(--layout-header-height);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
  z-index: 1060;
  left: 0;
  width: 100%;
}

.app-topbar .container-fluid {
  min-height: 100%;
}

.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.app-side-collapsed .brand-logo {
  outline: 1.5px solid rgba(99, 102, 241, 0.35);
  border-radius: 6px;
  padding: 2px 8px;
  transition: outline-color 0.15s;
}
.app-side-collapsed .brand-logo:hover {
  outline-color: rgba(99, 102, 241, 0.7);
}

.brand-logo img {
  height: 28px;
  width: auto;
  object-fit: contain;
}

.profile-dropdown .dropdown-toggle::after {
  margin-left: 6px;
}

.profile-trigger {
  border: 1px solid rgba(203, 213, 225, 0.35);
  background: rgba(255, 255, 255, 0.12);
  color: #f8fafc;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 4px 10px 4px 4px;
}

.profile-trigger:hover,
.profile-trigger:focus {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(203, 213, 225, 0.55);
}

/* ── Topbar sağ üst — kurumsal yuvarlak simge butonları ── */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Temel yuvarlak simge butonu (Açık Sayfalar, Mesajlar) */
.topbar-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.50);
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  padding: 0;
  flex-shrink: 0;
  line-height: 1;
}
.topbar-icon-btn:hover,
.topbar-icon-btn:focus {
  background: rgba(255, 255, 255, 0.30);
  border-color: rgba(255, 255, 255, 0.75);
  color: #fff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.14);
}
.topbar-icon-btn svg { flex-shrink: 0; }

/* Badge — topbar-icon-btn köşesinin dışında, ikonu kapatmaz */
.topbar-icon-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 0.58rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
  pointer-events: none;
  border: 2px solid #1e3a8a;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

/* Profil yuvarlak buton — baş harfler */
.topbar-profile-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.28);
  background: var(--accent-color, #2563eb);
  color: #fff;
  cursor: pointer;
  padding: 0;
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  transition: border-color 0.15s, box-shadow 0.15s;
  flex-shrink: 0;
}
.topbar-profile-btn::after { display: none !important; }
.topbar-profile-btn:hover,
.topbar-profile-btn:focus {
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
  outline: none;
}

/* Eski open-windows-btn — geriye uyumluluk için tutuldu */
.open-windows-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid rgba(203, 213, 225, 0.35);
  background: rgba(255, 255, 255, 0.12);
  color: #f8fafc;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.open-windows-btn:hover,
.open-windows-btn:focus {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(203, 213, 225, 0.55);
  color: #ffffff;
}
.open-windows-btn svg { flex-shrink: 0; opacity: 0.85; }
.open-windows-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #ef4444;
  color: #fff;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
}

.profile-avatar,
.profile-avatar-image {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: #dbeafe;
}

.profile-avatar-lg,
.profile-avatar-image-lg {
  width: 34px;
  height: 34px;
}

.profile-menu {
  min-width: 220px;
  max-width: 240px;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
}

.profile-menu-header {
  padding: 10px 12px 8px 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

/* Profile-menu içindeki baş harf dairesi — açık tema */
.profile-menu-header .topbar-profile-btn {
  border-color: rgba(37,99,235,0.3);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.10);
}

.profile-menu-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: #0f172a;
}

.profile-menu-email {
  font-size: 0.78rem;
  color: #64748b;
  word-break: break-word;
}

/* Profil menüsü — aksiyon öğeleri (Açık Sayfalar, Mesajlar) */
.profile-menu-action-item {
  display: flex !important;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  padding: 7px 14px !important;
  color: #334155;
}
.profile-menu-action-item svg {
  flex-shrink: 0;
  opacity: 0.7;
}
.profile-menu-action-item span:not(.profile-menu-badge) {
  flex: 1 1 auto;
}
.profile-menu-action-item:hover {
  background: #f1f5f9;
  color: #1e40af;
}
.profile-menu-action-item:hover svg {
  opacity: 1;
}

/* Profil menüsü badge (okunmamış sayısı) */
.profile-menu-badge {
  flex-shrink: 0;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 18px;
  text-align: center;
}

#openWindowsBadge {
  background: #22c55e;
}

.app-shell {
  display: flex;
  overflow: hidden;
  height: calc(100dvh - var(--layout-header-height) - var(--layout-footer-height));
}

.app-sidebar {
  position: fixed;
  top: var(--layout-header-height);
  bottom: var(--layout-footer-height);
  left: 0;
  width: var(--sidebar-open-width);
  display: flex;
  flex-direction: column;
  /* overflow:clip clips visual overflow without creating a scroll container,
     so child .side-nav scroll container stays fully functional */
  overflow: clip;
  z-index: 1050;
  transition: width var(--layout-motion-duration) var(--layout-motion-ease);
  will-change: width;
}

.app-main {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  padding: 0;
}

.side-nav,
.admin-nav {
  background: rgba(8, 11, 20, 0.92) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(99, 102, 241, 0.08) !important;
  border-radius: 0 0 10px 0;
  border-top: 0 !important;
  padding: 0 6px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  transition: transform var(--layout-motion-duration) var(--layout-motion-ease);
  will-change: transform;
  color: #e2e8f0 !important;
}

/* Flex children must NOT shrink — expanding groups overflow the container
   so overflow-y:auto kicks in and scrolls instead of compressing items */
.side-nav > *,
.admin-nav > * {
  flex-shrink: 0;
}

/* ── İç içe alt menü grubu (örn. Belge → alt türler) ── */
.side-subgroup {
  flex-shrink: 0;
}
.side-subgroup__summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 14px;
  font-size: 0.82rem;
  color: var(--nav-text, #94a3b8);
  cursor: pointer;
  border-radius: 7px;
  list-style: none;
  transition: background .14s, color .14s;
  user-select: none;
  outline: none;
}
.side-subgroup__summary::-webkit-details-marker { display: none; }
.side-subgroup__summary:hover {
  background: rgba(148, 163, 184, 0.08);
  color: #f8fafc;
}
.side-subgroup__summary .menu-text { flex: 1; }
.side-subgroup__chevron {
  flex-shrink: 0;
  opacity: .55;
  transition: transform .18s;
}
.side-subgroup[open] > .side-subgroup__summary .side-subgroup__chevron {
  transform: rotate(90deg);
}
.side-subgroup__items {
  padding-left: 10px;
}
/* Deep (2nd level) subitems — indented, smaller */
.side-subitem--deep {
  padding-left: 18px !important;
  font-size: 0.79rem !important;
}
.side-subitem--deep .menu-icon { display: none; }

.side-nav::-webkit-scrollbar,
.admin-nav::-webkit-scrollbar {
  width: 10px;
}

.side-nav::-webkit-scrollbar-track,
.admin-nav::-webkit-scrollbar-track {
  background: transparent;
}

.side-nav::-webkit-scrollbar-thumb,
.admin-nav::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.15);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.side-nav::-webkit-scrollbar-thumb:hover,
.admin-nav::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.3);
  background-clip: padding-box;
}

.side-toggle,
.side-item,
.side-subitem,
.admin-nav-item,
.settings-link {
  display: flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  color: var(--nav-text);
  border-radius: 8px;
  padding: 3px 10px 3px 12px;
  border: 1px solid transparent;
  background: transparent;
  font-weight: 500;
  font-size: 0.78rem;
  line-height: 1.3;
  transition: all 0.15s ease;
}

.menu-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px;
  align-items: center;
}

.menu-entry .side-item,
.menu-entry .side-subitem,
.menu-entry .admin-nav-item,
.menu-entry .settings-link {
  min-width: 0;
  flex: 1;
}

.menu-text {
  display: inline-block;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity var(--layout-motion-duration) var(--layout-motion-ease),
    transform var(--layout-motion-duration) var(--layout-motion-ease),
    width var(--layout-motion-duration) var(--layout-motion-ease);
}

.favorite-toggle {
  width: 28px;
  min-width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(99, 102, 241, 0.1);
  background: rgba(255, 255, 255, 0.02);
  color: var(--nav-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-left: auto;
  opacity: 0.55;
  transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.favorite-toggle svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
}

.menu-entry.is-favorite .favorite-toggle {
  color: var(--nav-quick);
  border-color: rgba(16, 182, 166, 0.46);
  box-shadow: 0 0 0 1px rgba(16, 182, 166, 0.18), 0 0 14px rgba(16, 182, 166, 0.28);
  opacity: 1;
}

.menu-entry:hover .favorite-toggle {
  opacity: 1;
}

.side-nav-header {
  position: sticky;
  top: 0;
  z-index: 10;
  margin: 0 -6px;
  padding: 6px 6px 10px;
  background: linear-gradient(180deg, rgba(8, 11, 20, 0.55) 0%, rgba(8, 11, 20, 0.35) 70%, rgba(8, 11, 20, 0) 100%) !important;
  backdrop-filter: blur(14px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
  box-shadow: none !important;
}
/* Header'daki input ve butonlar etkilesebilir kalsin (mask icerik uzerinde opak) */
.side-nav-header > * {
  pointer-events: auto;
}


.menu-search-wrap {
  padding: 1px 0 2px 0;
}

.menu-search-input {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(99, 102, 241, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: #e2e8f0;
  padding: 8px 12px;
  font-size: 0.82rem;
  transition: all 0.2s ease;
}

.menu-search-input::placeholder {
  color: #475569;
}

.menu-search-input:focus {
  outline: none;
  border-color: rgba(99, 102, 241, 0.35);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.08), 0 0 20px rgba(99, 102, 241, 0.06);
}

.favorites-panel {
  border: 1px solid rgba(34, 211, 238, 0.15);
  background: rgba(34, 211, 238, 0.04);
  border-radius: 10px;
  padding: 8px 6px 6px 6px;
}

.favorites-title {
  font-size: 0.7rem;
  color: #67e8f9;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin: 0 4px 6px 4px;
}

.favorites-list {
  display: grid;
  gap: 5px;
}

.side-toggle {
  width: 100%;
  color: #e2e8f0;
  border-color: rgba(99, 102, 241, 0.12);
  background: rgba(99, 102, 241, 0.06);
  border-radius: 10px;
}

.side-toggle:hover,
.side-item:hover,
.side-subitem:hover,
.admin-nav-item:hover,
.settings-link:hover,
.favorite-toggle:hover {
  color: #ffffff !important;
  background: rgba(99, 102, 241, 0.08) !important;
}

.side-item.active,
.side-subitem.active,
.admin-nav-item.active,
.settings-link.active {
  color: #ffffff !important;
  border-color: rgba(99, 102, 241, 0.3) !important;
  background: linear-gradient(90deg, rgba(99, 102, 241, 0.12), rgba(99, 102, 241, 0.04)) !important;
  box-shadow: inset 3px 0 0 #6366f1, 0 0 16px rgba(99, 102, 241, 0.15) !important;
}

.menu-icon {
  width: 18px;
  min-width: 18px;
  height: 18px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #a5b4fc;
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.15);
  position: relative;
  transition: all 0.2s ease;
}

.menu-icon svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.side-group,
.admin-group {
  border: 1px solid rgba(99, 102, 241, 0.08);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.3);
  transition: border-color 0.2s ease;
}

.side-group:hover,
.admin-group:hover {
  border-color: rgba(99, 102, 241, 0.15);
}

.side-group > summary,
.admin-group > summary {
  list-style: none;
  cursor: pointer;
  color: var(--nav-text);
  padding: 2px 8px 2px 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 400;
  font-size: 0.78rem;
  line-height: 1.2;
  user-select: none;
  -webkit-user-select: none;
}

.side-group > summary::-webkit-details-marker,
.admin-group > summary::-webkit-details-marker {
  display: none;
}

.side-group > summary::after,
.admin-group > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 1.5px solid rgba(99, 102, 241, 0.3);
  border-bottom: 1.5px solid rgba(99, 102, 241, 0.3);
  transform: rotate(45deg);
  margin-left: auto;
  transition: transform var(--layout-motion-duration) var(--layout-motion-ease);
}

.side-group[open] > summary,
.admin-group[open] > summary {
  background: rgba(99, 102, 241, 0.06);
}

.side-group[open] > summary::after,
.admin-group[open] > summary::after {
  transform: rotate(225deg);
}

.menu-group-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--layout-motion-duration) var(--layout-motion-ease);
}

.side-group[open] > .menu-group-content,
.admin-group[open] > .menu-group-content {
  grid-template-rows: 1fr;
}

.menu-group-content-inner {
  overflow: hidden;
  display: grid;
  gap: 6px;
  padding: 0 6px 7px 6px;
  opacity: 0;
  transform: translate3d(0, -6px, 0);
  transition:
    opacity var(--layout-motion-duration) var(--layout-motion-ease),
    transform var(--layout-motion-duration) var(--layout-motion-ease);
  will-change: transform, opacity;
}

.side-group[open] > .menu-group-content > .menu-group-content-inner,
.admin-group[open] > .menu-group-content > .menu-group-content-inner {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.side-subitem,
.admin-group .admin-nav-item {
  background: rgba(15, 23, 42, 0.45);
  font-weight: 500;
}

.admin-group-nested {
  margin: 0;
  border-color: rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.35);
}

.side-group-nested {
  border-color: rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.35);
}

.admin-group-nested > summary {
  padding: 7px 9px;
  font-size: 0.82rem;
}

.side-group-nested > summary {
  padding: 7px 9px;
  font-size: 0.82rem;
}

.admin-group-nested .admin-nav-item,
.side-group-nested .side-subitem {
  background: rgba(6, 14, 28, 0.68);
}

.side-bottom {
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px solid rgba(148, 163, 184, 0.28);
}

.settings-icon {
  width: 20px;
  min-width: 20px;
  height: 20px;
  display: inline-flex;
}

.settings-icon svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.hero {
  background: linear-gradient(120deg, #e0e7ff, #f8fafc);
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
}

.hero h1 {
  margin-bottom: 8px;
  font-size: 1.6rem;
}

.cards {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.module-card {
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: var(--app-surface);
  padding: 10px;
}

.module-card h3 {
  margin: 0 0 4px 0;
  font-size: 1rem;
}

.module-card p {
  margin: 0 0 8px 0;
  color: var(--app-text-muted);
  font-size: 0.84rem;
}

.module-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.module-link {
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  text-decoration: none;
  font-size: 0.78rem;
  line-height: 1;
  padding: 5px 9px;
}

.module-link:hover {
  background: #dbeafe;
  color: #1e40af;
}

.home-favorites-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
  margin-bottom: 6px;
}

.home-favorite-link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #1e293b;
  border: 1px solid #dbe2ef;
  border-radius: 8px;
  background: #ffffff;
  padding: 7px 9px;
}

.home-favorite-link:hover {
  border-color: #93c5fd;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.18);
}

.home-favorite-link .menu-icon {
  width: 18px;
  min-width: 18px;
  height: 18px;
}

.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #ffffff;
  border: 1px solid #dbe2ef;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12);
}

.panel {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
  margin: 0 auto 32px auto;
  max-width: 1200px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

.footer {
  padding: 10px 0;
  color: #475569;
  border-top: 1px solid #dbe2ef;
  margin-top: 16px;
}

.admin-shell {
  display: block;
}

.admin-sidebar {
  position: fixed;
  top: var(--layout-header-height);
  bottom: var(--layout-footer-height);
  left: 0;
  width: var(--sidebar-open-width);
  display: flex;
  flex-direction: column;
  overflow: clip;
  z-index: 1050;
  transition: width var(--layout-motion-duration) var(--layout-motion-ease);
  will-change: width;
}

.admin-content {
  min-width: 0;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px 40px 24px;
}

.integrator-dashboard {
  --integrator-bg: #edf2f7;
  --integrator-card-bg: var(--app-surface, #ffffff);
  --integrator-border: var(--app-border, #d4dfeb);
  --integrator-text: var(--app-text, #0f172a);
  --integrator-muted: var(--app-text-muted, #57677d);
  --integrator-blue: #1d67da;
  --integrator-blue-hover: #1758bc;
  --integrator-blue-soft: var(--theme-accent-soft, #e8f1ff);
  --integrator-success: #15803d;
  --integrator-success-soft: #e8f7ef;
  --integrator-danger: #b42318;
  --integrator-danger-soft: #fdeceb;
}

.integrator-dashboard .admin-sidebar {
  padding: 10px 0 12px 8px;
}

.integrator-dashboard .admin-sidebar .admin-nav {
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(22, 48, 86, 0.86), rgba(15, 33, 62, 0.78));
  border: 1px solid rgba(149, 176, 215, 0.3);
  box-shadow: 12px 0 36px rgba(15, 23, 42, 0.14);
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
}

.integrator-dashboard__content {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  min-height: calc(100vh - var(--layout-header-height) - var(--layout-footer-height));
  padding: 32px 24px 40px 24px;
  background: transparent;
  border-left: none;
  font-family: "Inter", sans-serif;
  color: var(--integrator-text);
}

.integrator-dashboard__content::before {
  display: none;
}

.integrator-dashboard__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 26px;
  margin-bottom: 24px;
}

.integrator-dashboard__header h1 {
  margin: 0 0 6px 0;
  font-size: 1.625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--integrator-text);
}

.integrator-dashboard__subtitle {
  margin: 0;
  color: var(--integrator-muted);
  font-size: 0.94rem;
}

.integrator-dashboard__stats {
  display: none !important;
  grid-template-columns: repeat(3, minmax(126px, 1fr));
  gap: 12px;
}

.integrator-stat {
  border: 1px solid var(--integrator-border);
  border-radius: 12px;
  background: var(--integrator-card-bg);
  padding: 12px 15px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
  display: grid;
  gap: 4px;
}

.integrator-stat__label {
  font-size: 0.74rem;
  color: #64748b;
  letter-spacing: 0.04em;
}

.integrator-stat__value {
  font-size: 1.18rem;
  line-height: 1;
  color: #0b2240;
}

.integrator-alert {
  border-radius: 12px;
  border-width: 1px;
  margin-bottom: 16px;
  font-weight: 500;
}

.integrator-dashboard__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}

.integrator-dashboard__group {
  display: grid;
  gap: 12px;
  min-height: 0;
}

.integrator-section-label {
  margin-left: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--integrator-muted);
}

.integrator-card {
  background: var(--integrator-card-bg);
  border: 1px solid var(--integrator-border);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.integrator-card--form {
  background: var(--integrator-card-bg);
}

.integrator-collapsible-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--integrator-border);
  background: var(--app-muted-surface);
}

.integrator-collapsible-card__title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--integrator-text);
  letter-spacing: 0.01em;
}

.integrator-collapsible-card__actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.integrator-collapsible-card__action {
  width: 30px;
  min-width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--integrator-border);
  background: var(--integrator-card-bg);
  color: var(--integrator-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.integrator-collapsible-card__action svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}

.integrator-collapsible-card__action:hover,
.integrator-collapsible-card__action:focus {
  color: var(--theme-accent);
  background: var(--theme-accent-soft);
  border-color: color-mix(in srgb, var(--theme-accent) 22%, var(--integrator-border) 78%);
}

.integrator-collapsible-card.is-collapsed [data-collapsible-toggle] svg {
  transform: rotate(-90deg);
}

.integrator-collapsible-card.is-pinned [data-collapsible-pin] {
  color: var(--theme-accent);
  background: var(--theme-accent-soft);
  border-color: color-mix(in srgb, var(--theme-accent) 30%, var(--integrator-border) 70%);
}

.integrator-collapsible-card__content[hidden] {
  display: none !important;
}

.integrator-collapsible-card__header--actions-only {
  justify-content: flex-end;
  padding: 8px 12px;
}

.integrator-card__header {
  border-bottom: 1px solid var(--integrator-border);
  padding: 20px 24px 16px 24px;
}

.integrator-card__title-wrap {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.integrator-card__icon {
  width: 34px;
  min-width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--theme-accent) 25%, var(--integrator-border) 75%);
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.integrator-card__icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.integrator-card__header h2 {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--integrator-text);
}

.integrator-card__header p {
  margin: 4px 0 0 0;
  color: var(--integrator-muted);
  font-size: 0.9rem;
}

.integrator-form {
  padding: 24px 24px 24px 24px;
}

.integrator-form-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.integrator-form-section {
  border: 1px solid var(--integrator-border);
  border-radius: 12px;
  background: var(--integrator-card-bg);
  padding: 18px;
}

.integrator-form-section--runtime {
  margin-top: 18px;
}

.integrator-form-section h3 {
  margin: 0 0 10px 0;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  color: var(--integrator-muted);
}

.integrator-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.integrator-form-grid--runtime {
  align-items: end;
}

.integrator-form-grid--property {
  grid-template-columns: 220px 220px minmax(280px, 1fr);
}

.integrator-field--full {
  grid-column: 1 / -1;
}

.integrator-field .form-label {
  margin-bottom: 7px;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--integrator-text);
}

.integrator-field__pseudo-label {
  display: inline-block;
}

.integrator-field--switch {
  display: grid;
  gap: 7px;
}

.integrator-form .form-control,
.integrator-form .form-select {
  min-height: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--integrator-border);
  background: var(--integrator-card-bg);
  color: var(--integrator-text);
  padding: 0 14px;
  font-size: 0.89rem;
}

.integrator-form .form-control:focus,
.integrator-form .form-select:focus {
  border-color: var(--theme-accent);
  box-shadow: 0 0 0 3px var(--theme-accent-soft);
}

.integrator-form .text-danger {
  display: inline-block;
  margin-top: 7px;
  font-size: 0.76rem;
}

.integrator-switch {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  min-height: 44px;
  width: fit-content;
  border: 1px solid var(--integrator-border);
  border-radius: 10px;
  background: var(--app-muted-surface);
  padding: 0 12px;
}

.integrator-switch .form-check-input {
  margin-top: 0;
}

.integrator-switch__label {
  font-size: 0.87rem;
  color: var(--integrator-text);
  font-weight: 500;
}

.integrator-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 24px;
}

.integrator-tabsheet {
  overflow: hidden;
}

.integrator-tabsheet__nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid #dbe8f7;
  background: #f7fbff;
}

.integrator-tab-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #2b4362;
  padding: 14px 16px;
  border-right: 1px solid #dbe8f7;
  transition: background 0.2s ease, color 0.2s ease;
}

.integrator-tab-link:last-child {
  border-right: none;
}

.integrator-tab-link__step {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid #9fb8dc;
  color: #2c4e80;
  background: #edf4ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.77rem;
  font-weight: 600;
}

.integrator-tab-link__content {
  display: grid;
  gap: 2px;
}

.integrator-tab-link__content strong {
  font-size: 0.86rem;
  font-weight: 600;
}

.integrator-tab-link__content small {
  color: var(--integrator-muted);
  font-size: 0.74rem;
}

.integrator-tab-link:hover,
.integrator-tab-link:focus {
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
}

.integrator-tab-link.is-active {
  background: var(--integrator-card-bg);
  color: var(--theme-accent);
}

.integrator-tab-link.is-active .integrator-tab-link__step {
  border-color: var(--theme-accent);
  background: var(--theme-accent);
  color: #ffffff;
}

.integrator-tabsheet__body {
  background: var(--integrator-card-bg);
}

.integrator-form--compact-width,
.integrator-inline-form--compact-width {
  max-width: 1100px;
}

.integrator-form--compact-width {
  padding-top: 16px;
}

.integrator-form-columns--compact {
  align-items: start;
}

.integrator-tab-panel {
  display: grid;
  gap: 0;
}

.integrator-inline-form {
  padding: 16px 24px 0 24px;
}

.integrator-inline-form__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: end;
}

.integrator-inline-form__actions {
  display: flex;
  justify-content: flex-end;
}

.integrator-form-hint {
  margin: 0;
  font-size: 0.8rem;
  color: var(--integrator-muted);
}

.integrator-empty-note {
  margin: 18px 24px 24px 24px;
  border: 1px dashed color-mix(in srgb, var(--theme-accent) 24%, var(--integrator-border) 76%);
  border-radius: 10px;
  background: color-mix(in srgb, var(--theme-accent-soft) 78%, var(--integrator-card-bg) 22%);
  color: var(--integrator-text);
  font-size: 0.87rem;
  padding: 14px 16px;
}

.integrator-btn-primary {
  min-height: 44px;
  background: var(--theme-accent);
  border-color: var(--theme-accent);
  color: #ffffff;
  border-radius: 10px;
  padding: 0 18px;
  font-weight: 600;
}

.integrator-btn-primary:hover,
.integrator-btn-primary:focus {
  background: var(--theme-accent-strong);
  border-color: var(--theme-accent-strong);
  color: #ffffff;
}

.integrator-btn-secondary,
.integrator-btn-tertiary {
  min-height: 44px;
  border-radius: 10px;
  padding: 0 18px;
  font-weight: 500;
}

.integrator-btn-secondary {
  border-color: var(--integrator-border);
  color: var(--integrator-text);
  background: var(--integrator-card-bg);
}

.integrator-btn-secondary:hover,
.integrator-btn-secondary:focus {
  background: var(--app-muted-surface);
  color: var(--integrator-text);
  border-color: color-mix(in srgb, var(--theme-accent) 24%, var(--integrator-border) 76%);
}

.integrator-table-wrap {
  padding: 18px 18px 18px 18px;
  overflow-x: auto;
}

.integrator-table {
  width: 100%;
  margin: 0;
  min-width: 980px;
  border: 1px solid var(--integrator-border);
  border-radius: 12px;
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--integrator-card-bg);
}

.integrator-table--compact {
  min-width: 0;
}

.integrator-table thead th {
  background: var(--app-muted-surface);
  border-bottom: 1px solid var(--integrator-border);
  color: var(--integrator-muted);
  font-size: 0.73rem;
  letter-spacing: 0.05em;
  font-weight: 600;
  white-space: nowrap;
  padding: 12px 14px;
}

.integrator-table tbody td {
  border-bottom: 1px solid var(--integrator-border);
  color: var(--integrator-text);
  padding: 14px;
  vertical-align: middle;
  font-size: 0.87rem;
}

.integrator-table tbody tr:last-child td {
  border-bottom: none;
}

.integrator-table tbody tr:hover td {
  background: color-mix(in srgb, var(--theme-accent-soft) 62%, var(--integrator-card-bg) 38%);
}

.integrator-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  min-width: 78px;
  border-radius: 999px;
  padding: 0.2rem 0.54rem;
  border: 1px solid transparent;
  font-size: 0.73rem;
  font-weight: 600;
}

.integrator-status-pill__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
}

.integrator-status-pill.is-active {
  background: var(--integrator-success-soft);
  color: var(--integrator-success);
  border-color: #b8e1c8;
}

.integrator-status-pill.is-active .integrator-status-pill__dot {
  box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.14);
}

.integrator-status-pill.is-inactive {
  background: var(--integrator-danger-soft);
  color: var(--integrator-danger);
  border-color: #f2b8b3;
}

.integrator-status-pill.is-inactive .integrator-status-pill__dot {
  box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.12);
}

.integrator-row-menu {
  display: inline-flex;
}

.integrator-row-menu__trigger {
  width: 32px;
  min-width: 32px;
  height: 32px;
  border-radius: 9px;
  border: 1px solid #bed1eb;
  background: #edf4ff;
  color: #23508a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.integrator-row-menu__trigger svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.integrator-row-menu__trigger:hover,
.integrator-row-menu__trigger:focus {
  color: #173e70;
  background: #dbe9ff;
  border-color: #8cacd7;
}

.integrator-row-menu__list {
  border-radius: 10px;
  border: 1px solid #d7e3f2;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.1);
  padding: 4px;
}

.integrator-row-menu__list .dropdown-item {
  border-radius: 7px;
  font-size: 0.82rem;
  padding: 0.38rem 0.55rem;
}

.integrator-table__empty {
  text-align: center;
  color: #64748b;
  padding: 34px 12px !important;
}

.integrator-data-stack {
  display: grid;
  gap: 20px;
  padding: 24px;
}

.integrator-data-block {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

.integrator-data-block h3 {
  margin: 0;
  padding: 13px 16px;
  border-bottom: 1px solid #e4eef9;
  background: #f7fbff;
  color: #21466f;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.integrator-data-block .integrator-table-wrap {
  padding: 0;
}

.integrator-table-search {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}

.integrator-table-search__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  flex: 1;
}

.integrator-table-search .form-control {
  min-height: 44px;
  height: 44px;
}

.integrator-detail-btn {
  white-space: nowrap;
  padding: 0.36rem 0.72rem;
}

.integrator-detail-modal .modal-content {
  border-radius: 12px;
  border: 1px solid #d7e4f4;
}

.integrator-detail-modal .modal-header {
  border-bottom: 1px solid #e3edf8;
  padding: 12px 14px;
}

.integrator-detail-modal .modal-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #163659;
}

.integrator-detail-modal .modal-body {
  display: grid;
  gap: 12px;
  padding: 12px 14px 14px 14px;
}

.integrator-detail-modal__section {
  border: 1px solid #dce8f6;
  border-radius: 10px;
  background: #f9fbff;
  padding: 10px;
}

.integrator-detail-modal__section h6 {
  margin: 0 0 8px 0;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: #365676;
}

.integrator-detail-modal__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.integrator-detail-modal__list li {
  border: 1px solid #d8e6f8;
  border-radius: 8px;
  background: #ffffff;
  padding: 8px 9px;
  display: grid;
  gap: 2px;
}

.integrator-detail-modal__list li strong {
  font-size: 0.82rem;
  color: #1d466f;
}

.integrator-detail-modal__list li span {
  font-size: 0.8rem;
  color: #334e6c;
}

.integrator-detail-modal__list li small {
  font-size: 0.74rem;
  color: #5e7793;
}

.integrator-detail-modal__empty {
  margin: 0;
  font-size: 0.82rem;
  color: #5f7894;
}

.integrator-dashboard--compact .integrator-dashboard__content {
  padding: 32px 24px 40px 24px;
}

.integrator-dashboard--compact .integrator-dashboard__header {
  margin-bottom: 24px;
}

.integrator-dashboard--compact .integrator-dashboard__grid {
  gap: 32px;
}

.integrator-dashboard,
.admin-content.integrator-dashboard {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.integrator-dashboard__content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.integrator-dashboard__grid {
  flex: 1 1 auto;
  min-height: 0;
}

.integrator-card--table,
.integrator-card--table .integrator-collapsible-card__content,
.integrator-card--table .integrator-data-stack,
.integrator-card--table .integrator-data-block {
  min-height: 0;
}

.integrator-card--table {
  display: flex;
  flex-direction: column;
}

@media (min-width: 992px) {
  .integrator-dashboard,
  .admin-content.integrator-dashboard {
    min-height: 0;
  }
}

.integrator-dashboard--compact .integrator-card__header {
  padding: 20px 24px 16px 24px;
}

.integrator-dashboard--compact .integrator-form {
  padding: 24px;
}

.integrator-dashboard--compact .integrator-form-section {
  padding: 18px;
}

.integrator-dashboard--compact .integrator-form-grid {
  gap: 18px;
}

.integrator-dashboard--compact .integrator-form .form-control,
.integrator-dashboard--compact .integrator-form .form-select {
  min-height: 44px;
  height: 44px;
  padding: 0 14px;
}

.integrator-dashboard--compact .integrator-inline-form {
  padding: 16px 24px 0 24px;
}

.integrator-dashboard--compact .integrator-empty-note {
  margin: 18px 24px 24px 24px;
  padding: 14px 16px;
}

.integrator-dashboard--compact .integrator-form-actions {
  margin-top: 24px;
  gap: 12px;
}

.integrator-dashboard--compact .integrator-data-stack {
  gap: 20px;
  padding: 24px;
}

.integrator-dashboard--wide .integrator-dashboard__content {
  max-width: none;
  padding-left: 28px;
  padding-right: 28px;
}

.integrator-dashboard--wide .integrator-form--compact-width,
.integrator-dashboard--wide .integrator-inline-form--compact-width {
  max-width: none;
}

.integrator-dashboard--material .integrator-dashboard__grid {
  gap: 14px;
}

.integrator-dashboard--material .integrator-form {
  padding: 10px 12px;
}

.integrator-dashboard--material .integrator-form-section {
  padding: 8px 10px;
}

.integrator-dashboard--material .integrator-form-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 10px;
}

.integrator-dashboard--material .integrator-form .form-control,
.integrator-dashboard--material .integrator-form .form-select {
  min-height: 34px;
  height: 34px;
  padding: 0 10px;
  font-size: 0.82rem;
}

.integrator-dashboard--material .integrator-field .form-label {
  margin-bottom: 4px;
  font-size: 0.76rem;
}

.integrator-dashboard--material .integrator-form-actions {
  margin-top: 10px;
  gap: 8px;
}

.integrator-dashboard--material .integrator-data-stack {
  gap: 14px;
  padding: 14px;
}

.integrator-dashboard--material .integrator-table-wrap {
  padding: 12px;
}

.integrator-dashboard--material .integrator-table thead th {
  padding: 8px 10px;
  font-size: 0.78rem;
}

.integrator-dashboard--material .integrator-table tbody td {
  padding: 8px 10px;
  font-size: 0.8rem;
}

.material-form-sheet {
  background: #f8fbff;
  border: 1px solid #dbe7f5;
  border-radius: 8px;
}

.material-form-card-grid {
  display: grid;
  gap: 8px;
}

.material-form-card {
  border: 1px solid #d6e3f3;
  border-radius: 8px;
  background: #ffffff;
  padding: 8px 10px;
}

.material-form-card__title {
  margin: 0 0 6px 0;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: #345273;
}

.material-form-config {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.material-form-config .integrator-btn-secondary {
  min-height: 34px;
  padding: 0 12px;
}

.material-form-config .integrator-btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.material-config-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #1f3f66;
  white-space: nowrap;
}

.material-config-toggle input[type="checkbox"] {
  margin: 0;
}

.material-card-toggle-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #d8e2ef;
  border-radius: 10px;
  background: #f8fbff;
}

.material-card-toggle-field .integrator-field__pseudo-label {
  margin-bottom: 0;
  font-size: 0.83rem;
  font-weight: 600;
  color: #1f324d;
}

.material-uom-field .form-select {
  max-width: 180px;
}

.material-textarea {
  min-height: 64px;
  height: auto !important;
  padding: 6px 10px !important;
}

.material-property-summary {
  font-size: 0.8rem;
  color: #355577;
  font-weight: 500;
}

.material-property-modal__list {
  display: grid;
  gap: 8px;
}

.material-property-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  border: 1px solid #d7e4f4;
  border-radius: 9px;
  background: #f9fbff;
  padding: 8px 10px;
  font-size: 0.82rem;
  color: #1f3f66;
}

.material-property-check input[type="checkbox"] {
  margin: 0;
}

.material-property-check input[type="checkbox"]:disabled + span {
  opacity: 0.55;
}

.material-property-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.material-property-empty {
  margin: 8px 0 0 0;
  font-size: 0.8rem;
  color: #577493;
}

.material-type-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid #b9cde7;
  background: #edf4ff;
  color: #1a4676;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.17rem 0.56rem;
  white-space: nowrap;
}

.material-linked-property-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.material-linked-property-card {
  display: inline-flex;
  align-items: center;
  border: 1px solid #d1def0;
  background: #f6f9ff;
  color: #294d75;
  border-radius: 8px;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.2rem 0.44rem;
}

.product-feature-stock-panel {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #d7e4f4;
  border-radius: 12px;
  background: #f8fbff;
}

.product-feature-stock-panel__content {
  display: grid;
  gap: 4px;
}

.product-feature-stock-panel .btn {
  flex-shrink: 0;
}

.product-feature-stock-modal__summary {
  margin: 4px 0 0 0;
  font-size: 0.83rem;
  color: #4a6789;
}

.product-feature-stock-modal__search {
  margin-bottom: 12px;
}

.product-feature-stock-modal__list {
  max-height: 340px;
  overflow: auto;
  padding-right: 4px;
}

.material-row-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}

.material-row-actions .integrator-btn-secondary,
.material-row-actions .integrator-btn-tertiary {
  min-height: 36px;
}

.integrator-table__row--selected {
  --bs-table-bg: inherit;
  --bs-table-accent-bg: inherit;
}

.material-code-select {
  border: 0;
  background: transparent;
  color: #0f3f74;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.material-code-select:hover,
.material-code-select:focus {
  color: #0a2f58;
}

.material-row-selected > td {
  background: #edf4ff !important;
}

.integrator-permission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 12px;
}

.integrator-permission-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  border: 1px solid #dbe7f5;
  border-radius: 10px;
  background: #f8fbff;
  padding: 8px 10px;
  font-size: 0.82rem;
  color: #253b57;
  cursor: pointer;
}

.integrator-permission-item .form-check-input {
  margin-top: 2px;
}

.integrator-permissions-text {
  max-width: 360px;
  white-space: normal;
}

.integrator-permission-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.integrator-permission-tag {
  display: inline-flex;
  align-items: center;
  border: 1px solid #c9dbf1;
  border-radius: 999px;
  background: #eef5ff;
  color: #214871;
  font-size: 0.74rem;
  font-weight: 500;
  padding: 0.16rem 0.5rem;
}

.integrator-permission-tag.is-empty {
  border-color: #d7deea;
  background: #f4f7fc;
  color: #5f7086;
}

.pagefooter {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--layout-footer-height);
  z-index: 1035;
  background: #0f172a;
  border-top: 1px solid rgba(148, 163, 184, 0.28);
  color: #e2e8f0;
}

.layout-body.has-side-rail .pagefooter,
.layout-body.has-side-rail.app-side-collapsed .pagefooter {
  left: 0;
}

.pagefooter-inner {
  min-height: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.78rem;
}

.toast-root {
  position: fixed;
  z-index: 9999;
  top: auto;
  bottom: 24px;
  right: 20px;
  left: auto;
  transform: none;
  width: min(350px, calc(100vw - 24px));
  max-height: calc(100vh - 40px);
  overflow: hidden;
  display: grid;
  gap: 10px;
  justify-items: stretch;
  align-content: end;
  pointer-events: none;
  font-family: "Inter", sans-serif;
}

.toast-root--top-center {
  left: 50%;
  right: auto;
  bottom: 24px;
  top: auto;
  transform: translateX(-50%);
  width: min(350px, calc(100vw - 24px));
}

.toast-root--top-right {
  left: auto;
  right: 20px;
  bottom: 24px;
  top: auto;
  transform: none;
  width: min(350px, calc(100vw - 24px));
}

.calibra-toast {
  --toast-accent: #16a34a;
  --toast-accent-soft: rgba(22, 163, 74, 0.12);
  --toast-progress-track: rgba(22, 163, 74, 0.16);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  position: relative;
  color: #16324f;
  border: 1px solid rgba(148, 163, 184, 0.36);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 11px 12px 13px 12px;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.15);
  pointer-events: auto;
  opacity: 0;
  transform: translateX(18px);
  animation: toast-enter 220ms ease forwards;
}

.calibra-toast.is-closing {
  animation: toast-exit 220ms ease forwards;
}

.calibra-toast__icon {
  width: 22px;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid var(--toast-accent);
  background: var(--toast-accent-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--toast-accent);
}

.calibra-toast__icon svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.calibra-toast__message {
  font-size: 0.86rem;
  line-height: 1.38;
  color: #1c314b;
  word-break: break-word;
  letter-spacing: 0.005em;
}

.calibra-toast__close {
  width: 30px;
  min-width: 30px;
  height: 30px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #57708d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}

.calibra-toast__close svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
}

.calibra-toast__close:hover,
.calibra-toast__close:focus {
  color: #26486f;
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.18);
}

.calibra-toast__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 0 0 12px 12px;
  background: var(--toast-progress-track);
  overflow: hidden;
}

.calibra-toast__progress::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: left center;
  background: var(--toast-accent);
  animation: toast-progress var(--toast-duration-ms, 5000ms) linear forwards;
}

.calibra-toast--success {
  --toast-accent: #16a34a;
  --toast-accent-soft: rgba(22, 163, 74, 0.12);
  --toast-progress-track: rgba(22, 163, 74, 0.18);
  border-color: rgba(22, 163, 74, 0.42);
}

.calibra-toast--error {
  --toast-accent: #dc2626;
  --toast-accent-soft: #fdecec;
  --toast-progress-track: rgba(220, 38, 38, 0.18);
  border-color: #f0c5c5;
}

.calibra-toast--warning {
  --toast-accent: #d97706;
  --toast-accent-soft: #fff4e5;
  --toast-progress-track: rgba(217, 119, 6, 0.18);
  border-color: #f4d6b0;
}

.calibra-toast--info {
  --toast-accent: #2563eb;
  --toast-accent-soft: #eaf1ff;
  --toast-progress-track: rgba(37, 99, 235, 0.18);
  border-color: #cbdcf8;
}

@keyframes toast-enter {
  from {
    opacity: 0;
    transform: translateX(18px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes toast-exit {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(14px);
  }
}

@keyframes toast-progress {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

.status-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}

.status-run-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.6px;
  line-height: 1.6;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.status-run-badge--dev {
  background: rgba(234, 179, 8, 0.15);
  color: #92400e;
  border: 1px solid rgba(234, 179, 8, 0.4);
}
.status-run-badge--svc {
  background: rgba(99, 102, 241, 0.12);
  color: #3730a3;
  border: 1px solid rgba(99, 102, 241, 0.35);
}
body.app-theme-dark .status-run-badge--dev {
  background: rgba(234, 179, 8, 0.15);
  color: #fbbf24;
  border-color: rgba(234, 179, 8, 0.35);
}
body.app-theme-dark .status-run-badge--svc {
  background: rgba(99, 102, 241, 0.15);
  color: #a5b4fc;
  border-color: rgba(99, 102, 241, 0.35);
}

.admin-content .cards .card-link h3 {
  margin: 0;
  font-size: 1.8rem;
}

.admin-content .cards .card-link p {
  margin: 4px 0 0 0;
}

.permission-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px 12px;
}

.login-page {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  background: #e2e8f0;
}

/* Login ve Setup sayfalarında html elementindeki scrollbar gutter'ı kapat —
   both-edges sol kenarda beyaz boşluk bırakır, login/setup'ta gerek yok */
html:has(body.login-page),
html:has(body.setup-page) {
  scrollbar-gutter: auto;
  overflow: hidden;
}

.login-shell {
  height: 100vh;
  display: grid;
  /* 2026-06-06: 5/2 oran — sol panel resme genişlik verir, sağ giriş kartı rahat sığar. */
  grid-template-columns: 5fr 2fr;
  overflow: hidden;
}

.login-hero {
  position: relative;
  overflow: hidden;
  min-height: 0;
  display: flex; align-items: center; justify-content: center;
  /* 2026-06-06: Padding sıfır — resim paneli tamamen kaplasın. */
  padding: 0;
  background: linear-gradient(145deg, #0a0d17, #14193a);
}

/* Resim frame'i — paneli tamamen kaplar, max boyut yok. */
.login-hero-frame {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 0;
  overflow: hidden;
  /* Köşe gölgesi yok — frame tüm paneli kapladığı için kenarlık görünmüyor. */
}

.login-hero-frame img {
  /* 2026-06-06: object-fit:cover + object-position:left top — resim sol-üst
     hizalı büyütülür, sağ-alt köşedeki sparkle filigranı doğal olarak kırpılır.
     "PRECISION. MEASUREMENT. CONTROL." metni resmin alt-orta tarafında olduğu
     için sol-üst hizalı cover'da görünür kalır. */
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: left top;
  filter: saturate(1.05);
}

/* Sağ alt köşedeki sparkle filigranını ek güvence olarak maskele —
   cover + left-top hizalama zaten kırpıyor; bu daha büyük gradient overlay
   resim oranı değişse bile filigranın görünmemesini garanti eder. */
.login-hero-frame::after {
  content: '';
  position: absolute;
  right: 0; bottom: 0;
  width: 140px; height: 140px;
  background: radial-gradient(circle at bottom right,
              #0a0d17 0%,
              #0a0d17 35%,
              rgba(10,13,23,0.85) 55%,
              transparent 80%);
  pointer-events: none;
  z-index: 1;
}

/* Geriye dönük uyum: legacy img doğrudan .login-hero altında olursa */
.login-hero > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.05);
}

.login-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: linear-gradient(145deg, #f8fafc, #e2e8f0);
  overflow-y: auto;
  min-height: 0;
}

.login-card {
  width: min(380px, 100%);
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12);
}

.login-card h1 {
  margin-bottom: 8px;
  font-size: 1.55rem;
  color: #1e293b;
}

.login-card .form-label {
  color: #334155;
  font-weight: 500;
}

.login-card .form-control,
.login-card .form-select {
  background-color: #ffffff !important;
  color: #1e293b !important;
  border-color: #cbd5e1 !important;
}

.login-card .form-control:focus,
.login-card .form-select:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

.login-card .form-control::placeholder {
  color: #94a3b8 !important;
}

/* ─── Modern floating label (baslik stili) — form-floating customizasyonu ─── */
.login-card .login-field.form-floating {
  position: relative;
}
.login-card .login-field > .form-control,
.login-card .login-field > .form-select {
  height: 54px;
  padding: 18px 14px 6px;
  border-radius: 10px;
  border: 1px solid #d7dee8;
  background: #f8fafc !important;
  font-size: 0.92rem;
  font-weight: 500;
  color: #1e293b !important;
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.login-card .login-field > .form-control:hover,
.login-card .login-field > .form-select:hover {
  border-color: #a9b5c6;
  background: #ffffff !important;
}
.login-card .login-field > .form-control:focus,
.login-card .login-field > .form-select:focus {
  background: #ffffff !important;
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 4px rgba(99,102,241,0.14) !important;
}
.login-card .login-field > label {
  color: #94a3b8 !important;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  padding: 16px 14px !important;
  opacity: 1 !important;
  transition: color .18s, transform .18s, opacity .18s;
  transform-origin: top left;
}
/* Bootstrap floating label — focus veya dolu iken kucul + yukari cik */
.login-card .login-field > .form-control:focus ~ label,
.login-card .login-field > .form-control:not(:placeholder-shown) ~ label,
.login-card .login-field > .form-select ~ label {
  color: #4f46e5 !important;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-size: 0.7rem !important;
  opacity: 0.9 !important;
  transform: scale(1) translateY(-8px) !important;
}
.login-card .login-field > .form-select {
  /* Select her zaman "dolu" sayilir; label ustte kalsin */
  padding-top: 20px;
}
/* Placeholder'ini siradan boyu ile koru */
.login-card .login-field > .form-control::placeholder {
  color: transparent !important;
}

/* Giris Yap butonu — input alanlariyla ayni yukseklik (54px) ve radius (10px).
   Bootstrap default .btn yuksekligi ~38px idi; floating-label input ile uyumsuzdu. */
.login-card .btn-primary,
.login-card button[type="submit"] {
  height: 46px;
  border-radius: 10px;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding-top: 0;
  padding-bottom: 0;
}

/* ─── Dark tema — login floating-label overrides (yuksek specificity) ─── */
body.app-theme-dark .login-card .login-field > .form-control,
body.app-theme-dark .login-card .login-field > .form-select {
  background: rgba(17, 24, 39, 0.55) !important;
  border-color: rgba(148, 163, 184, 0.20) !important;
  color: #e5e7eb !important;
}
body.app-theme-dark .login-card .login-field > .form-control:hover,
body.app-theme-dark .login-card .login-field > .form-select:hover {
  background: rgba(30, 41, 59, 0.68) !important;
  border-color: rgba(148, 163, 184, 0.35) !important;
}
body.app-theme-dark .login-card .login-field > .form-control:focus,
body.app-theme-dark .login-card .login-field > .form-select:focus {
  background: rgba(30, 41, 59, 0.78) !important;
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.22) !important;
}
body.app-theme-dark .login-card .login-field > label {
  color: rgba(148, 163, 184, 0.85) !important;
}
body.app-theme-dark .login-card .login-field > .form-control:focus ~ label,
body.app-theme-dark .login-card .login-field > .form-control:not(:placeholder-shown) ~ label,
body.app-theme-dark .login-card .login-field > .form-select ~ label {
  color: #a5b4fc !important;
}
body.app-theme-dark .login-card .login-field > .form-select option {
  background: #0c0f1a !important;
  color: #e5e7eb !important;
}

.login-card .form-check-label {
  color: #475569;
}

.login-card .text-muted {
  color: #64748b !important;
}

.login-remember-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.login-remember-label {
  font-size: 0.85rem;
  color: #475569;
  user-select: none;
  cursor: pointer;
}

.login-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}

.login-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.login-switch-track {
  position: absolute;
  inset: 0;
  background: #cbd5e1;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s;
}

.login-switch-track::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: transform 0.2s;
}

.login-switch input:checked + .login-switch-track {
  background: #2563eb;
}

.login-switch input:checked + .login-switch-track::after {
  transform: translateX(16px);
}

.login-hint {
  border-top: 1px dashed #d1d5db;
  padding-top: 8px;
}

.login-card .btn.btn-primary {
  height: 46px;
  border-radius: 10px;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.auth-panel {
  max-width: 560px;
}

.app-side-collapsed .app-sidebar,
.app-side-collapsed .admin-sidebar {
  width: 0;
}

.app-side-collapsed .side-nav,
.app-side-collapsed .admin-nav {
  width: 100%;
}

.app-side-collapsed .menu-text {
  opacity: 0;
  transform: translate3d(-8px, 0, 0);
  width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.app-side-collapsed .menu-search-wrap {
  display: none;
}

.app-side-collapsed .favorites-panel {
  display: none;
}

.app-side-collapsed .menu-entry {
  grid-template-columns: 1fr;
}

.app-side-collapsed .favorite-toggle {
  display: none;
}

.app-side-collapsed .side-toggle,
.app-side-collapsed .side-item,
.app-side-collapsed .side-subitem,
.app-side-collapsed .admin-nav-item,
.app-side-collapsed .settings-link {
  justify-content: center;
  padding: 7px;
}

.app-side-collapsed .menu-entry.is-favorite .menu-icon::after {
  content: "";
  position: absolute;
  right: -2px;
  top: -2px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--nav-quick);
  box-shadow: 0 0 0 3px rgba(16, 182, 166, 0.2);
}

.app-side-collapsed .side-group > summary,
.app-side-collapsed .admin-group > summary {
  justify-content: center;
}

.app-side-collapsed .side-group > summary::after,
.app-side-collapsed .admin-group > summary::after {
  display: none;
}

.app-side-collapsed .side-bottom {
  border-top: none;
  padding-top: 0;
}

h1,
h2,
h3 {
  line-height: 1.25;
}

h1 {
  font-size: 1.45rem;
  margin-bottom: 8px;
}

h2 {
  font-size: 1.15rem;
  margin-bottom: 8px;
}

h3 {
  font-size: 1rem;
  margin-bottom: 6px;
}

.form-control,
.form-select {
  min-height: calc(1.4em + 0.62rem + 2px);
  padding: 0.31rem 0.55rem;
  font-size: 0.88rem;
  background-color: var(--app-surface, #ffffff);
  color: var(--app-text, inherit);
}

.compact-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 9px;
}

.compact-form-field .form-label {
  margin-bottom: 1px;
  font-size: 0.8rem;
  font-weight: 500;
}

.compact-form .form-control,
.compact-form .form-select {
  min-height: 32px;
  height: 32px;
  padding: 0.2rem 0.46rem;
  font-size: 14px;
}

.compact-table th,
.compact-table td {
  padding-top: 0.22rem;
  padding-bottom: 0.22rem;
}

.form-check-input {
  margin-top: 0.14rem;
}

.btn {
  font-size: 0.84rem;
  padding: 0.3rem 0.58rem;
}

.table th,
.table td {
  padding: 0.42rem 0.54rem;
}

@media (max-width: 1400px) {
  .integrator-dashboard__header {
    flex-direction: column;
  }

  .integrator-dashboard__stats {
    width: 100%;
    max-width: 760px;
  }

  .compact-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991px) {
  .app-shell,
  .admin-shell {
    display: block;
  }

  .layout-body.has-side-rail,
  .layout-body.has-side-rail.app-side-collapsed {
    padding-left: 0;
  }

  .layout-body.has-side-rail .app-topbar,
  .layout-body.has-side-rail.app-side-collapsed .app-topbar {
    left: 0;
    width: 100%;
  }

  .layout-body.has-side-rail .pagefooter,
  .layout-body.has-side-rail.app-side-collapsed .pagefooter {
    left: 0;
  }

  .app-sidebar,
  .admin-sidebar {
    position: static;
    width: auto;
    height: auto;
  }

  .side-nav,
  .admin-nav {
    min-height: auto;
    width: 100%;
    border-radius: 10px;
  }

  .login-shell {
    grid-template-columns: 1fr;
  }

  .login-hero {
    min-height: 220px;
  }

  .pagefooter-inner {
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 4px;
    padding-bottom: 4px;
    row-gap: 4px;
  }

  .status-item {
    white-space: normal;
  }

  .app-side-collapsed .menu-text {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    width: auto;
    overflow: visible;
  }

  .compact-form-grid {
    grid-template-columns: 1fr;
  }

  .integrator-dashboard .admin-sidebar {
    padding: 0;
  }

  .integrator-dashboard__content {
    padding: 16px;
  }

  .integrator-dashboard--wide .integrator-dashboard__content {
    padding-left: 16px;
    padding-right: 16px;
  }

  .integrator-dashboard__content::before {
    display: none;
  }

  .integrator-dashboard__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .integrator-card__header,
  .integrator-form,
  .integrator-table-wrap {
    padding-left: 14px;
    padding-right: 14px;
  }

  .integrator-inline-form {
    padding-left: 14px;
    padding-right: 14px;
  }

  .integrator-form-columns {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .integrator-form-section {
    padding: 14px;
  }

  .integrator-form-grid {
    grid-template-columns: 1fr;
  }

  .integrator-tabsheet__nav {
    grid-template-columns: 1fr;
  }

  .integrator-tab-link {
    border-right: none;
    border-bottom: 1px solid #dbe8f7;
  }

  .integrator-tab-link:last-child {
    border-bottom: none;
  }

  .integrator-inline-form__grid {
    grid-template-columns: 1fr;
  }

  .material-form-config {
    align-items: flex-start;
  }

  .material-uom-field .form-select {
    max-width: none;
  }

  .material-config-toggle {
    justify-content: flex-start;
  }

  .integrator-inline-form__actions {
    justify-content: flex-start;
  }

  .integrator-table-search {
    flex-direction: column;
    align-items: stretch;
  }

  .integrator-table-search__fields {
    grid-template-columns: 1fr;
  }

  .integrator-empty-note {
    margin-left: 14px;
    margin-right: 14px;
  }

  .integrator-data-stack {
    padding: 14px;
  }

  .integrator-switch {
    width: 100%;
  }

  .integrator-permission-grid {
    grid-template-columns: 1fr;
  }

  .integrator-permissions-text {
    max-width: none;
  }

  .toast-root {
    top: auto;
    bottom: 16px;
    right: 12px;
    width: min(350px, calc(100vw - 24px));
  }

  .calibra-toast {
    padding: 11px 12px 13px 12px;
  }
}

@media (max-width: 600px) {
  .integrator-dashboard__stats {
    grid-template-columns: 1fr;
  }
}

.integrator-settings-modern .integrator-dashboard__content {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 16px 18px 24px 18px;
}

.integrator-settings-modern .integrator-dashboard__grid {
  gap: 16px;
}

.integrator-settings-modern .integrator-dashboard__group {
  gap: 8px;
}

.integrator-settings-modern .integrator-collapsible-card__header {
  padding: 10px 14px;
}

.integrator-settings-modern .integrator-collapsible-card__content {
  padding: 14px;
}

.integrator-settings-modern .integrator-settings-modern__page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--integrator-border);
  padding-bottom: 8px;
  margin-bottom: 12px;
}

.integrator-settings-modern .integrator-settings-modern__page-header h1 {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--integrator-text);
  letter-spacing: -0.01em;
}

.integrator-settings-modern .integrator-settings-modern__header-btn {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  border-color: var(--integrator-border);
  color: var(--integrator-text);
  background: var(--integrator-card-bg);
  font-size: 0.82rem;
}

.integrator-settings-modern .integrator-settings-modern__header-btn:hover,
.integrator-settings-modern .integrator-settings-modern__header-btn:focus {
  border-color: color-mix(in srgb, var(--theme-accent) 24%, var(--integrator-border) 76%);
  color: var(--theme-accent);
  background: var(--theme-accent-soft);
}

.integrator-settings-modern .integrator-settings-modern__form {
  max-width: none;
  margin: 0;
  padding: 0;
}

.integrator-settings-modern .integrator-settings-modern__form-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.integrator-settings-modern .integrator-settings-modern__section-card {
  border: 1px solid var(--integrator-border);
  border-radius: 10px;
  background: var(--integrator-card-bg);
  padding: 14px;
}

.integrator-settings-modern .integrator-settings-modern__section-title {
  margin: 0 0 10px 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--integrator-text);
}

.integrator-settings-modern .integrator-settings-modern__segment-grid {
  display: grid;
  gap: 10px;
}

.integrator-settings-modern .integrator-settings-modern__segment {
  border: 1px solid var(--integrator-border);
  border-radius: 9px;
  padding: 10px;
  background: var(--integrator-card-bg);
}

.integrator-settings-modern .integrator-settings-modern__segment-title {
  margin: 0 0 8px 0;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--integrator-muted);
}

.integrator-settings-modern .integrator-settings-modern__field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.integrator-settings-modern .integrator-settings-modern__field-span-2 {
  grid-column: 1 / -1;
}

.integrator-settings-modern .integrator-field:not(.integrator-field--switch) {
  display: grid;
  grid-template-columns: minmax(104px, 124px) minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
  row-gap: 2px;
}

.integrator-settings-modern .integrator-field .form-label,
.integrator-settings-modern .integrator-field__pseudo-label {
  color: var(--integrator-text);
  font-weight: 600;
  margin-bottom: 0;
  font-size: 0.79rem;
}

.integrator-settings-modern .integrator-field .form-control,
.integrator-settings-modern .integrator-field .form-select {
  min-height: 34px;
  height: 34px;
  padding: 0 9px;
  border-radius: 8px;
  border: 1px solid var(--integrator-border);
  background: var(--integrator-card-bg);
  color: var(--integrator-text);
  box-shadow: none;
  font-size: 13px;
  line-height: 1.2;
}

.integrator-settings-modern .integrator-field:not(.integrator-field--switch) .form-control,
.integrator-settings-modern .integrator-field:not(.integrator-field--switch) .form-select {
  grid-column: 2;
}

.integrator-settings-modern .integrator-field:not(.integrator-field--switch) .text-danger {
  grid-column: 2;
  margin-top: 1px;
  font-size: 0.7rem;
}

.integrator-settings-modern .integrator-field .form-control::placeholder,
.integrator-settings-modern .integrator-field .form-select::placeholder {
  color: var(--integrator-muted);
}

.integrator-settings-modern .integrator-field .form-control:focus,
.integrator-settings-modern .integrator-field .form-select:focus {
  border-color: var(--theme-accent);
  box-shadow: 0 0 0 3px var(--theme-accent-soft);
}

.integrator-settings-modern .integrator-field .integrator-switch {
  border: 1px solid var(--integrator-border);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--app-muted-surface);
}

.integrator-settings-modern .integrator-settings-modern__toggle-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--integrator-border);
  border-radius: 8px;
  background: var(--app-muted-surface);
  padding: 8px 9px;
}

.integrator-settings-modern .integrator-settings-modern__toggle-info {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.integrator-settings-modern .integrator-settings-modern__toggle-row .integrator-field__pseudo-label {
  margin-bottom: 0;
}

.integrator-settings-modern .integrator-settings-modern__toggle-desc {
  font-size: 0.76rem;
  color: var(--integrator-text);
  line-height: 1.25;
}

.integrator-key-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  min-width: 98px;
  justify-content: flex-end;
}

.integrator-key-switch__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.integrator-key-switch__slider {
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--app-muted-surface) 72%, var(--integrator-border) 28%);
  border: 1px solid var(--integrator-border);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.integrator-key-switch__slider::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--integrator-card-bg);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.22);
  transition: transform 0.2s ease;
}

.integrator-key-switch__state {
  min-width: 34px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--integrator-muted);
  text-align: right;
}

.integrator-key-switch__state::before {
  content: "Kapali";
}

.integrator-key-switch__input:checked + .integrator-key-switch__slider {
  background: var(--theme-accent);
  border-color: var(--theme-accent);
}

.integrator-key-switch__input:checked + .integrator-key-switch__slider::after {
  transform: translateX(18px);
}

.integrator-key-switch__input:checked + .integrator-key-switch__slider + .integrator-key-switch__state {
  color: var(--theme-accent);
}

.integrator-key-switch__input:checked + .integrator-key-switch__slider + .integrator-key-switch__state::before {
  content: "Acik";
}

.integrator-key-switch__input:focus-visible + .integrator-key-switch__slider {
  box-shadow: 0 0 0 3px var(--theme-accent-soft);
}

.integrator-settings-modern .integrator-settings-modern__action-bar {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--integrator-border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.integrator-settings-modern .integrator-settings-modern__btn-neutral,
.integrator-settings-modern .integrator-settings-modern__pull-btn {
  min-height: 34px;
  border-radius: 8px;
  padding: 0 10px;
  border-color: var(--integrator-border);
  color: var(--integrator-text);
  background: var(--app-muted-surface);
  font-size: 0.8rem;
}

.integrator-settings-modern .integrator-settings-modern__btn-neutral:hover,
.integrator-settings-modern .integrator-settings-modern__pull-btn:hover,
.integrator-settings-modern .integrator-settings-modern__btn-neutral:focus,
.integrator-settings-modern .integrator-settings-modern__pull-btn:focus {
  border-color: color-mix(in srgb, var(--theme-accent) 24%, var(--integrator-border) 76%);
  color: var(--theme-accent);
  background: var(--theme-accent-soft);
}

.integrator-settings-modern .integrator-settings-modern__btn-primary {
  min-height: 34px;
  border-radius: 8px;
  padding: 0 14px;
  border-color: var(--theme-accent);
  background: var(--theme-accent);
  font-size: 0.8rem;
}

.integrator-settings-modern .integrator-settings-modern__btn-primary:hover,
.integrator-settings-modern .integrator-settings-modern__btn-primary:focus {
  border-color: var(--theme-accent-strong);
  background: var(--theme-accent-strong);
}

.integrator-settings-modern .integrator-settings-modern__inline-action-form {
  margin: 0;
}

.integrator-settings-modern .integrator-settings-modern__list-header-actions {
  gap: 6px;
}

.integrator-settings-modern__list-toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-bottom: 1px solid var(--app-border);
}

.integrator-settings-modern .integrator-table thead th {
  padding: 9px 10px;
  font-size: 0.67rem;
}

.integrator-settings-modern .integrator-table tbody td {
  padding: 9px 10px;
  font-size: 0.8rem;
}

@media (max-width: 1100px) {
  .integrator-settings-modern .integrator-settings-modern__form-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .integrator-settings-modern .integrator-collapsible-card__header,
  .integrator-settings-modern .integrator-collapsible-card__content {
    padding: 10px;
  }

  .integrator-settings-modern .integrator-settings-modern__page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .integrator-settings-modern .integrator-settings-modern__field-grid {
    grid-template-columns: 1fr;
  }

  .integrator-settings-modern .integrator-field:not(.integrator-field--switch) {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .integrator-settings-modern .integrator-field:not(.integrator-field--switch) .form-control,
  .integrator-settings-modern .integrator-field:not(.integrator-field--switch) .form-select,
  .integrator-settings-modern .integrator-field:not(.integrator-field--switch) .text-danger {
    grid-column: 1;
  }

  .integrator-settings-modern .integrator-settings-modern__toggle-row {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .integrator-settings-modern .integrator-settings-modern__section-card {
    padding: 10px;
  }

  .integrator-settings-modern .integrator-settings-modern__action-bar {
    justify-content: stretch;
    flex-direction: column;
    align-items: stretch;
  }
}

.dashboard-body {
  min-height: 100vh;
  background: #f7f9fc;
  color: #111827;
}

.dashboard-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 292px minmax(0, 1fr);
  background: #f7f9fc;
}

.dashboard-shell__sidebar {
  background: #ffffff;
  border-right: 1px solid #e7ecf3;
  padding: 24px 20px;
}

.dashboard-shell__content {
  min-width: 0;
  padding: 32px 36px 40px;
}

.dashboard-sidebar {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 22px;
}

.dashboard-sidebar__brand {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.dashboard-sidebar__brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #eff6ff, #dbeafe);
  border: 1px solid #bfdbfe;
  color: #2563eb;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.dashboard-sidebar__eyebrow,
.enterprise-dashboard__eyebrow,
.dashboard-card__eyebrow {
  margin: 0 0 6px;
  color: #94a3b8;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.dashboard-sidebar__title {
  margin: 0;
  color: #111827;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.dashboard-sidebar__subtitle {
  margin: 6px 0 0;
  color: #6b7280;
  font-size: 0.84rem;
  line-height: 1.5;
}

.dashboard-sidebar__search {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #f9fafb;
  padding: 0 12px;
}

.dashboard-sidebar__search svg,
.dashboard-nav-item svg,
.dashboard-focus-item__icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dashboard-sidebar__search svg {
  flex: none;
  color: #9ca3af;
}

.dashboard-sidebar__search input {
  width: 100%;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: #1f2937;
  font-size: 0.88rem;
  outline: none;
}

.dashboard-sidebar__search input::placeholder {
  color: #9ca3af;
}

.dashboard-sidebar__search:focus-within {
  border-color: #bfdbfe;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08);
}

.dashboard-sidebar__menu {
  display: grid;
  gap: 6px;
}

.dashboard-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 16px;
  padding: 12px 14px;
  border: 1px solid transparent;
  text-decoration: none;
  color: #374151;
  font-size: 0.92rem;
  font-weight: 600;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-nav-item:hover,
.dashboard-nav-item:focus {
  color: #111827;
  background: #f8fafc;
  border-color: #e5e7eb;
}

.dashboard-nav-item.is-active {
  color: #1d4ed8;
  background: #eff6ff;
  border-color: #dbeafe;
  box-shadow: inset 3px 0 0 #2563eb;
}

.dashboard-sidebar__insight {
  align-self: end;
  border: 1px solid #e2e8f0;
  border-radius: 22px;
  padding: 18px;
  background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
}

.dashboard-sidebar__insight-label {
  margin: 0 0 8px;
  color: #94a3b8;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.dashboard-sidebar__insight-value {
  margin: 0;
  color: #0f172a;
  font-size: 1rem;
  font-weight: 700;
}

.dashboard-sidebar__insight-copy {
  margin: 10px 0 14px;
  color: #64748b;
  font-size: 0.84rem;
  line-height: 1.55;
}

.dashboard-sidebar__insight-link,
.dashboard-card__link {
  color: #2563eb;
  font-size: 0.84rem;
  font-weight: 600;
  text-decoration: none;
}

.dashboard-sidebar__insight-link:hover,
.dashboard-sidebar__insight-link:focus,
.dashboard-card__link:hover,
.dashboard-card__link:focus {
  color: #1d4ed8;
}

.dashboard-sidebar__footer {
  display: grid;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid #eef2f7;
}

.dashboard-sidebar__user {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.dashboard-sidebar__avatar {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eaf2ff;
  color: #2563eb;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.dashboard-sidebar__user-name {
  margin: 0;
  color: #111827;
  font-size: 0.88rem;
  font-weight: 600;
}

.dashboard-sidebar__user-email {
  margin: 4px 0 0;
  color: #6b7280;
  font-size: 0.8rem;
  word-break: break-word;
}

.dashboard-sidebar__settings-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border: 1px solid #dbe3ee;
  border-radius: 16px;
  background: #ffffff;
  color: #1f2937;
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 600;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.dashboard-sidebar__settings-link:hover,
.dashboard-sidebar__settings-link:focus {
  border-color: #bfdbfe;
  color: #1d4ed8;
  background: #f8fbff;
}

.enterprise-dashboard {
  max-width: 1380px;
  margin: 0 auto;
  display: grid;
  gap: 20px;
}

.enterprise-dashboard__hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.enterprise-dashboard__headline {
  max-width: 720px;
}

.enterprise-dashboard__headline h1 {
  margin: 0;
  color: #0f172a;
  font-size: clamp(2rem, 3vw, 2.55rem);
  font-weight: 700;
  letter-spacing: -0.04em;
}

.enterprise-dashboard__intro {
  margin: 14px 0 0;
  color: #64748b;
  font-size: 1rem;
  line-height: 1.65;
}

.enterprise-dashboard__hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.enterprise-dashboard__status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid #dce6f3;
  border-radius: 999px;
  background: #ffffff;
  color: #334155;
  font-size: 0.86rem;
  font-weight: 600;
}

.enterprise-dashboard__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.16);
}

.enterprise-dashboard__primary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 16px;
  background: #2563eb;
  color: #ffffff;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: 0 14px 24px rgba(37, 99, 235, 0.18);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.enterprise-dashboard__primary-action:hover,
.enterprise-dashboard__primary-action:focus {
  color: #ffffff;
  background: #1d4ed8;
  transform: translateY(-1px);
}

.dashboard-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.dashboard-stat-card,
.dashboard-card {
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.04);
}

.dashboard-stat-card {
  padding: 20px;
}

.dashboard-stat-card__label {
  margin: 0;
  color: #94a3b8;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.dashboard-stat-card__value-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}

.dashboard-stat-card__value {
  color: #0f172a;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.dashboard-stat-card__trend {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #f8fafc;
  color: #475569;
  font-size: 0.76rem;
  font-weight: 600;
}

.dashboard-stat-card__trend.is-positive {
  background: #eff6ff;
  color: #2563eb;
}

.dashboard-stat-card__meta {
  margin: 14px 0 0;
  color: #64748b;
  font-size: 0.84rem;
  line-height: 1.5;
}

.dashboard-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.95fr);
  gap: 18px;
  align-items: start;
}

.dashboard-content-grid__primary,
.dashboard-content-grid__secondary {
  display: grid;
  gap: 18px;
}

.dashboard-card {
  padding: 24px;
}

.dashboard-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.dashboard-card__header h2 {
  margin: 0;
  color: #0f172a;
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.dashboard-card__badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 0.76rem;
  font-weight: 600;
}

.dashboard-chart {
  display: grid;
  gap: 20px;
}

.dashboard-chart__summary {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.dashboard-chart__label {
  margin: 0 0 8px;
  color: #94a3b8;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.dashboard-chart__amount {
  margin: 0;
  color: #0f172a;
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.dashboard-chart__copy {
  max-width: 320px;
  margin: 0;
  color: #64748b;
  font-size: 0.86rem;
  line-height: 1.55;
  text-align: right;
}

.dashboard-chart__bars {
  height: 260px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
  padding: 14px;
  border-radius: 22px;
  background: linear-gradient(180deg, #f8fbff 0%, #fdfefe 100%);
  border: 1px solid #edf2f7;
}

.dashboard-chart__bar-group {
  display: grid;
  justify-items: center;
  gap: 10px;
}

.dashboard-chart__bar {
  width: 100%;
  max-width: 42px;
  border-radius: 16px 16px 10px 10px;
  background: linear-gradient(180deg, #dbeafe 0%, #93c5fd 100%);
}

.dashboard-chart__bar.is-highlighted {
  background: linear-gradient(180deg, #60a5fa 0%, #2563eb 100%);
}

.dashboard-chart__day {
  color: #94a3b8;
  font-size: 0.78rem;
  font-weight: 600;
}

.dashboard-table {
  display: grid;
  gap: 2px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #edf2f7;
}

.dashboard-table__head,
.dashboard-table__row {
  display: grid;
  grid-template-columns: 1.3fr 1fr 0.8fr 0.7fr;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
}

.dashboard-table__head {
  background: #f8fafc;
  color: #94a3b8;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.dashboard-table__row {
  color: #1f2937;
  font-size: 0.88rem;
  background: #ffffff;
}

.dashboard-table__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
}

.dashboard-table__status.is-success {
  background: #edfdf3;
  color: #15803d;
}

.dashboard-table__status.is-warning {
  background: #fff7ed;
  color: #c2410c;
}

.dashboard-table__status.is-neutral {
  background: #eff4fb;
  color: #475569;
}

.dashboard-pipeline {
  display: grid;
  gap: 16px;
}

.dashboard-pipeline__item {
  display: grid;
  gap: 8px;
}

.dashboard-pipeline__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #334155;
  font-size: 0.88rem;
}

.dashboard-pipeline__topline strong {
  color: #0f172a;
  font-weight: 700;
}

.dashboard-pipeline__track {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: #eaf0f7;
  overflow: hidden;
}

.dashboard-pipeline__track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #93c5fd 0%, #2563eb 100%);
}

.dashboard-pipeline__track span.is-alert {
  background: linear-gradient(90deg, #fda4af 0%, #fb7185 100%);
}

.dashboard-focus-list {
  display: grid;
  gap: 14px;
}

.dashboard-focus-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  padding: 16px;
  border: 1px solid #edf2f7;
  border-radius: 20px;
  background: #fcfdff;
}

.dashboard-focus-item__icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eff6ff;
  color: #2563eb;
}

.dashboard-focus-item h3 {
  margin: 0;
  color: #0f172a;
  font-size: 0.96rem;
  font-weight: 700;
}

.dashboard-focus-item p {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 0.84rem;
  line-height: 1.55;
}

@media (max-width: 1280px) {
  .dashboard-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-content-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .dashboard-shell {
    grid-template-columns: 1fr;
  }

  .dashboard-shell__sidebar {
    border-right: 0;
    border-bottom: 1px solid #e7ecf3;
  }

  .dashboard-shell__content {
    padding: 24px 20px 28px;
  }

  .enterprise-dashboard__hero,
  .dashboard-chart__summary {
    flex-direction: column;
    align-items: flex-start;
  }

  .enterprise-dashboard__hero-actions {
    justify-content: flex-start;
  }

  .dashboard-chart__copy {
    max-width: none;
    text-align: left;
  }
}

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

  .dashboard-card,
  .dashboard-stat-card {
    border-radius: 20px;
  }

  .dashboard-table__head {
    display: none;
  }

  .dashboard-table__row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .dashboard-chart__bars {
    gap: 8px;
    height: 220px;
    padding: 12px 10px;
  }
}

:root {
  --page-bg: #f3f6fb;
  --page-text: #1f2937;
  --topbar-bg-start: #ffffff;
  --topbar-bg-end: #f8fbff;
  --topbar-border: #e2e8f0;
  --topbar-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
  --topbar-foreground: #0f172a;
  --topbar-profile-bg: #ffffff;
  --topbar-profile-border: #d6e0eb;
  --topbar-profile-hover-bg: #eff6ff;
  --topbar-profile-hover-border: #bfdbfe;
  --nav-accent-ring: rgba(37, 99, 235, 0.14);
  --dashboard-body-bg: #f7f9fc;
  --dashboard-sidebar-bg: #ffffff;
  --dashboard-sidebar-border: #e7ecf3;
  --dashboard-surface: #ffffff;
  --dashboard-surface-muted: #f8fbff;
  --dashboard-border: #e2e8f0;
  --dashboard-text-strong: #0f172a;
  --dashboard-text: #1f2937;
  --dashboard-text-muted: #64748b;
  --dashboard-accent: #2563eb;
  --dashboard-accent-strong: #1d4ed8;
  --dashboard-accent-soft: #eff6ff;
  --dashboard-accent-ring: rgba(37, 99, 235, 0.16);
  --dashboard-shadow: 0 14px 30px rgba(15, 23, 42, 0.04);
}

body.app-theme-graphite {
  --page-bg: #eef2f7;
  --topbar-bg-start: #334155;
  --topbar-bg-end: #475569;
  --topbar-border: rgba(148, 163, 184, 0.26);
  --topbar-shadow: 0 10px 26px rgba(15, 23, 42, 0.16);
  --topbar-foreground: #f8fafc;
  --topbar-profile-bg: rgba(255, 255, 255, 0.12);
  --topbar-profile-border: rgba(203, 213, 225, 0.35);
  --topbar-profile-hover-bg: rgba(255, 255, 255, 0.2);
  --topbar-profile-hover-border: rgba(203, 213, 225, 0.55);
  --nav-bg-start: #080b14;
  --nav-bg-end: #0c1021;
  --nav-border: rgba(99, 102, 241, 0.15);
  --nav-text: #e2e8f0;
  --nav-text-muted: #64748b;
  --nav-accent: #6366f1;
  --nav-accent-soft: rgba(99, 102, 241, 0.12);
  --nav-accent-glow: rgba(99, 102, 241, 0.25);
  --nav-quick: #22d3ee;
  --nav-accent-ring: rgba(99, 102, 241, 0.14);
  --dashboard-body-bg: #f2f5f9;
  --dashboard-sidebar-bg: #fcfdff;
  --dashboard-sidebar-border: #d8e1ec;
  --dashboard-surface: #ffffff;
  --dashboard-surface-muted: #f5f7fb;
  --dashboard-border: #dde5ef;
  --dashboard-accent: #334155;
  --dashboard-accent-strong: #1f2937;
  --dashboard-accent-soft: #e2e8f0;
  --dashboard-accent-ring: rgba(51, 65, 85, 0.14);
  --dashboard-shadow: 0 16px 32px rgba(51, 65, 85, 0.07);
}

body {
  background: var(--page-bg);
  color: var(--page-text);
}

.main-nav {
  background: linear-gradient(90deg, var(--topbar-bg-start), var(--topbar-bg-end));
  border-bottom: 1px solid var(--topbar-border);
}

.app-topbar {
  box-shadow: var(--topbar-shadow);
}

.main-nav .navbar-brand,
.main-nav .navbar-brand:hover,
.main-nav .navbar-brand:focus {
  color: var(--topbar-foreground);
}

.profile-trigger {
  border-color: var(--topbar-profile-border);
  background: var(--topbar-profile-bg);
  color: var(--topbar-foreground);
}

.profile-trigger:hover,
.profile-trigger:focus {
  color: var(--topbar-foreground);
  background: var(--topbar-profile-hover-bg);
  border-color: var(--topbar-profile-hover-border);
}

.side-nav,
.admin-nav {
  box-shadow: 12px 0 32px rgba(0, 0, 0, 0.3) !important;
}

.side-toggle,
.side-item,
.side-subitem,
.admin-nav-item,
.settings-link,
.side-group > summary,
.admin-group > summary {
  color: #e2e8f0 !important;
}

.side-toggle {
  border-color: rgba(99, 102, 241, 0.12) !important;
  background: rgba(99, 102, 241, 0.06) !important;
}

.favorite-toggle {
  border-color: rgba(99, 102, 241, 0.1) !important;
  background: rgba(255, 255, 255, 0.02) !important;
  color: #64748b !important;
  box-shadow: none !important;
}

.menu-entry.is-favorite .favorite-toggle {
  color: #22d3ee !important;
  border-color: #22d3ee !important;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.12) !important;
}

.menu-search-input {
  border-color: rgba(99, 102, 241, 0.1) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  color: #e2e8f0 !important;
}

.menu-search-input::placeholder {
  color: #475569 !important;
}

.favorites-panel {
  border-color: rgba(34, 211, 238, 0.15) !important;
  background: rgba(34, 211, 238, 0.04) !important;
}

.favorites-title {
  color: #67e8f9 !important;
}

.side-group,
.admin-group {
  border-color: rgba(99, 102, 241, 0.08) !important;
  background: rgba(15, 23, 42, 0.3) !important;
}

.menu-icon {
  color: #a5b4fc !important;
  background: rgba(99, 102, 241, 0.1) !important;
  border-color: rgba(99, 102, 241, 0.15) !important;
}

.side-toggle:hover,
.side-item:hover,
.side-subitem:hover,
.admin-nav-item:hover,
.settings-link:hover,
.favorite-toggle:hover {
  color: #ffffff !important;
  background: rgba(99, 102, 241, 0.08) !important;
}

.side-item.active,
.side-subitem.active,
.admin-nav-item.active,
.settings-link.active {
  color: #ffffff !important;
  border-color: rgba(99, 102, 241, 0.3) !important;
  background: linear-gradient(90deg, rgba(99, 102, 241, 0.12), rgba(99, 102, 241, 0.04)) !important;
  box-shadow: inset 3px 0 0 #6366f1, 0 0 16px rgba(99, 102, 241, 0.15) !important;
}

.dashboard-body {
  background: var(--dashboard-body-bg);
  color: var(--dashboard-text);
}

.dashboard-shell {
  background: var(--dashboard-body-bg);
}

.dashboard-shell__sidebar {
  background: var(--dashboard-sidebar-bg);
  border-right-color: var(--dashboard-sidebar-border);
}

.dashboard-sidebar {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.dashboard-sidebar__title,
.enterprise-dashboard__headline h1,
.dashboard-card__header h2,
.dashboard-stat-card__value,
.dashboard-chart__amount,
.dashboard-pipeline__topline strong,
.dashboard-focus-item h3,
.dashboard-sidebar__insight-value,
.dashboard-sidebar__user-name {
  color: var(--dashboard-text-strong);
}

.dashboard-sidebar__subtitle,
.enterprise-dashboard__intro,
.dashboard-stat-card__meta,
.dashboard-chart__copy,
.dashboard-pipeline__topline,
.dashboard-focus-item p,
.dashboard-sidebar__insight-copy,
.dashboard-sidebar__user-email {
  color: var(--dashboard-text-muted);
}

.dashboard-sidebar__search {
  border-color: var(--dashboard-sidebar-border);
  background: var(--dashboard-surface-muted);
}

.dashboard-sidebar__search input {
  color: var(--dashboard-text);
}

.dashboard-sidebar__search:focus-within {
  border-color: var(--dashboard-accent);
  box-shadow: 0 0 0 4px var(--dashboard-accent-ring);
}

.dashboard-nav-item {
  color: var(--dashboard-text);
}

.dashboard-nav-item:hover,
.dashboard-nav-item:focus {
  color: var(--dashboard-text-strong);
  background: var(--dashboard-surface-muted);
  border-color: var(--dashboard-sidebar-border);
}

.dashboard-nav-item.is-active {
  color: var(--dashboard-accent-strong);
  background: var(--dashboard-accent-soft);
  border-color: var(--dashboard-sidebar-border);
  box-shadow: inset 3px 0 0 var(--dashboard-accent);
}

.dashboard-sidebar__insight {
  margin-top: auto;
  border-color: var(--dashboard-border);
  background: var(--dashboard-surface-muted);
}

.dashboard-sidebar__insight-link,
.dashboard-card__link,
.dashboard-sidebar__settings-link:hover,
.dashboard-sidebar__settings-link:focus {
  color: var(--dashboard-accent);
}

.dashboard-sidebar__settings-link {
  border-color: var(--dashboard-sidebar-border);
  background: var(--dashboard-surface);
  color: var(--dashboard-text);
}

.dashboard-sidebar__settings-link:hover,
.dashboard-sidebar__settings-link:focus {
  background: var(--dashboard-surface-muted);
}

.enterprise-dashboard__status-pill,
.dashboard-card__badge,
.dashboard-focus-item__icon,
.dashboard-sidebar__avatar {
  background: var(--dashboard-accent-soft);
  color: var(--dashboard-accent);
}

.enterprise-dashboard__status-pill {
  border-color: var(--dashboard-sidebar-border);
}

.enterprise-dashboard__primary-action {
  background: var(--dashboard-accent);
  box-shadow: 0 14px 24px var(--dashboard-accent-ring);
}

.enterprise-dashboard__primary-action:hover,
.enterprise-dashboard__primary-action:focus {
  background: var(--dashboard-accent-strong);
}

.dashboard-stat-card,
.dashboard-card {
  border-color: var(--dashboard-border);
  background: var(--dashboard-surface);
  box-shadow: var(--dashboard-shadow);
}

.dashboard-chart__bars,
.dashboard-focus-item,
.dashboard-table,
.dashboard-sidebar__insight {
  border-color: var(--dashboard-border);
}

.dashboard-chart__bars,
.dashboard-focus-item {
  background: var(--dashboard-surface-muted);
}

.dashboard-shortcuts-source {
  border-top: 1px solid var(--dashboard-sidebar-border);
  padding-top: 4px;
}

.dashboard-shortcuts-source .side-nav {
  min-height: auto;
  height: auto;
  padding: 0;
  gap: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.dashboard-shortcuts-source .side-toggle,
.dashboard-shortcuts-source .menu-search-wrap,
.dashboard-shortcuts-source > .side-nav > .menu-entry,
.dashboard-shortcuts-source > .side-nav > details,
.dashboard-shortcuts-source > .side-nav > .side-bottom {
  display: none;
}

.dashboard-shortcuts-source .favorites-panel {
  padding: 0;
  border: 0;
  background: transparent;
}

.dashboard-shortcuts-source .favorites-title {
  margin: 0 0 10px;
  color: var(--dashboard-text-muted);
  font-size: 0.73rem;
  letter-spacing: 0.08em;
}

.dashboard-shortcuts-source .favorites-list {
  gap: 8px;
}

.dashboard-shortcuts-source .quick-access-entry {
  gap: 8px;
  align-items: center;
}

.dashboard-shortcuts-source .quick-access-entry .side-item,
.dashboard-shortcuts-source .quick-access-entry .side-subitem,
.dashboard-shortcuts-source .quick-access-entry .settings-link {
  padding: 10px 12px 10px 14px;
  border: 1px solid var(--dashboard-sidebar-border);
  border-radius: 14px;
  background: var(--dashboard-surface);
  color: var(--dashboard-text);
}

.dashboard-shortcuts-source .quick-access-entry .menu-icon {
  background: var(--dashboard-accent-soft);
  border-color: transparent;
  color: var(--dashboard-accent);
}

.dashboard-shortcuts-source .quick-access-entry .favorite-toggle {
  border-color: var(--dashboard-sidebar-border);
  background: var(--dashboard-surface);
  color: var(--dashboard-text-muted);
  opacity: 1;
  box-shadow: none;
}

.dashboard-shortcuts-source .quick-access-entry .favorite-toggle:hover {
  color: var(--dashboard-accent);
  background: var(--dashboard-accent-soft);
}

.admin-appearance-page {
  max-width: none;
}

.admin-appearance-page__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.admin-appearance-grid,
.admin-appearance-filter {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: end;
}

.admin-appearance-page__section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}

.admin-appearance-page__actions {
  display: flex;
  align-items: end;
}

.admin-appearance-page__actions .btn {
  min-height: 44px;
}

.admin-appearance-table {
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  overflow: hidden;
  background: #ffffff;
}

.admin-appearance-table__head,
.admin-appearance-table__row {
  display: grid;
  grid-template-columns: minmax(140px, 0.7fr) minmax(220px, 1fr) minmax(260px, 1.2fr);
  gap: 18px;
  align-items: start;
  padding: 16px 18px;
}

.admin-appearance-table__head {
  background: #f8fafc;
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.admin-appearance-table__row + .admin-appearance-table__row {
  border-top: 1px solid #edf2f7;
}

.admin-appearance-table__cell {
  color: #0f172a;
  font-size: 0.9rem;
}

.admin-appearance-table__cell--default {
  color: #64748b;
  line-height: 1.55;
}

.admin-appearance-table__cell--input .form-control {
  min-height: 44px;
}

body.app-theme-graphite .dashboard-sidebar__brand-mark {
  background: linear-gradient(145deg, #e2e8f0, #cbd5e1);
  border-color: #cbd5e1;
  color: #334155;
}

body.app-theme-graphite .dashboard-chart__bar {
  background: linear-gradient(180deg, #cbd5e1 0%, #94a3b8 100%);
}

body.app-theme-graphite .dashboard-chart__bar.is-highlighted,
body.app-theme-graphite .dashboard-pipeline__track span {
  background: linear-gradient(180deg, #94a3b8 0%, #334155 100%);
}

@media (max-width: 980px) {
  .admin-appearance-page__section-head {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-appearance-grid,
  .admin-appearance-filter {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .admin-appearance-table__head {
    display: none;
  }

  .admin-appearance-table__row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

:root {
  --page-bg: #f8f9fa;
  --page-text: #333333;
  --topbar-bg-start: #ffffff;
  --topbar-bg-end: #ffffff;
  --topbar-border: #e0e0e0;
  --topbar-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
  --topbar-foreground: #333333;
  --topbar-profile-bg: #ffffff;
  --topbar-profile-border: #e0e0e0;
  --topbar-profile-hover-bg: #f7f9fb;
  --topbar-profile-hover-border: #d6dde5;
  --nav-bg-start: #080b14;
  --nav-bg-end: #0c1021;
  --nav-border: rgba(99, 102, 241, 0.15);
  --nav-text: #e2e8f0;
  --nav-text-muted: #64748b;
  --nav-accent: #6366f1;
  --nav-accent-soft: rgba(99, 102, 241, 0.12);
  --nav-accent-glow: rgba(99, 102, 241, 0.25);
  --nav-quick: #22d3ee;
  --dashboard-accent: #2563eb;
  --dashboard-accent-strong: #1d4ed8;
  --dashboard-accent-soft: rgba(37, 99, 235, 0.08);
  --dashboard-accent-ring: rgba(37, 99, 235, 0.1);
  --dashboard-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}

/* --dashboard-* nötrleri merkezî --app-* token'larindan turetilir.
   DIKKAT — bu blok BODY'ye baglidir, :root'a DEGIL: tema override'lari
   (body.app-theme-dark) --app-* degiskenlerini BODY uzerinde tanimlar.
   Bu turetme :root'ta (html) yapilirsa var() html'in kendi (light) degerini
   cozer ve pano ekranlari koyu temada acik renkte kalir — bu tam olarak
   yasandi (2026-08-05). body'de tanimlaninca body'nin tema-ozel degerleri
   kullanilir. Sonraki body.app-theme-graphite blogu bunlari yine ezebilir. */
body {
  --dashboard-body-bg: var(--app-content-bg);
  --dashboard-sidebar-bg: var(--app-sidebar-bg);
  --dashboard-sidebar-border: var(--app-border);
  --dashboard-surface: var(--app-surface);
  --dashboard-surface-muted: var(--app-muted-surface);
  --dashboard-border: var(--app-border);
  --dashboard-text-strong: var(--app-text);
  --dashboard-text: var(--app-text);
  --dashboard-text-muted: var(--app-text-muted);
}

body.app-theme-graphite {
  --nav-accent: #6366f1;
  --nav-accent-soft: rgba(99, 102, 241, 0.12);
  --nav-accent-glow: rgba(99, 102, 241, 0.25);
  --nav-quick: #22d3ee;
  --dashboard-accent: #475569;
  --dashboard-accent-strong: #334155;
  --dashboard-accent-soft: rgba(71, 85, 105, 0.08);
  --dashboard-accent-ring: rgba(71, 85, 105, 0.1);
}

body,
.layout-body,
.dashboard-body,
.dashboard-shell,
.dashboard-shell__content,
.admin-page-root,
.admin-content {
  background: #f8f9fa;
  color: #333333;
}

.main-nav {
  background: #ffffff;
}

.profile-menu {
  min-width: 320px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 0;
  box-shadow: 0 10px 24px rgba(17, 24, 39, 0.06);
}

.profile-menu-header {
  padding: 12px 14px 10px;
}

.profile-menu-name {
  color: #333333;
}

.profile-menu-email {
  color: #4f4f4f;
}

.profile-preferences-form {
  padding: 8px 12px;
  display: grid;
  gap: 8px;
}

.profile-preferences-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.profile-preferences-label {
  display: block;
  margin-bottom: 4px;
  color: var(--app-text-muted, #4f4f4f);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.profile-preferences-select {
  min-height: 32px;
  border: 1px solid var(--app-border, #e0e0e0);
  border-radius: 6px;
  background: var(--app-surface, #ffffff);
  color: var(--app-text, #333333);
  box-shadow: none;
  font-size: 0.82rem;
}

.profile-preferences-select:focus {
  border-color: #cbd5e1;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.profile-preferences-submit {
  min-height: 38px;
  border-radius: 8px;
  font-weight: 600;
}

.app-sidebar,
.admin-sidebar {
  background: #ffffff;
}

.side-nav,
.admin-nav {
  background: #ffffff;
  border: 0;
  border-right: 1px solid #e0e0e0;
  border-radius: 0;
  padding: 16px 12px;
  gap: 2px;
  box-shadow: none;
}

.menu-search-wrap {
  padding: 4px 0 10px;
}

.menu-search-input {
  min-height: 40px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #ffffff;
  color: #333333;
}

.menu-search-input::placeholder {
  color: #9b9b9b;
}

.favorites-panel {
  border: 0;
  background: transparent;
  padding: 6px 0 10px;
}

.favorites-title {
  margin: 0 0 6px;
  padding: 0 12px;
  color: #4f4f4f;
  font-size: 0.72rem;
}

.menu-entry {
  gap: 4px;
}

.side-toggle {
  margin-bottom: 6px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #ffffff;
  color: #4f4f4f;
  padding: 8px 10px;
}

.side-toggle:hover,
.side-toggle:focus {
  background: #f8f9fa;
  color: #333333;
}

.side-group,
.admin-group {
  border: 0;
  background: transparent;
}

.side-group > summary,
.admin-group > summary {
  padding: 8px 10px;
  color: #4f4f4f;
  font-weight: 600;
  border-radius: 8px;
}

.side-group > summary:hover,
.admin-group > summary:hover {
  background: #f8f9fa;
}

.menu-group-content-inner {
  display: grid;
  gap: 2px;
  margin-left: 10px;
  padding-left: 8px;
  border-left: 1px solid #efefef;
}

.side-item,
.side-subitem,
.admin-nav-item,
.settings-link {
  border-radius: 8px;
  padding: 9px 12px;
  color: #333333;
  font-weight: 500;
}

.menu-icon {
  width: 18px;
  min-width: 18px;
  height: 18px;
  background: transparent;
  border: 0;
  color: #4f4f4f;
}

.menu-icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.7;
}

.favorite-toggle {
  width: 26px;
  min-width: 26px;
  height: 26px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #b0b0b0;
  box-shadow: none;
  opacity: 0;
}

.menu-entry:hover .favorite-toggle,
.menu-entry.is-favorite .favorite-toggle {
  opacity: 1;
}

.side-item:hover,
.side-subitem:hover,
.admin-nav-item:hover,
.settings-link:hover {
  background: #f8f9fa;
  color: #333333;
}

.side-item.active,
.side-subitem.active,
.admin-nav-item.active,
.settings-link.active {
  background: rgba(37, 99, 235, 0.08);
  color: var(--nav-accent);
  box-shadow: inset 2px 0 0 var(--nav-accent);
  border-color: transparent;
}

.menu-entry.is-favorite .favorite-toggle {
  color: var(--nav-accent);
  box-shadow: none;
}

.dashboard-shell__sidebar {
  background: #ffffff;
  border-right: 1px solid #e0e0e0;
  padding: 20px 18px;
}

.dashboard-shell__content {
  padding: 28px 32px 36px;
}

.dashboard-sidebar__brand-mark {
  border-radius: 8px;
  background: #f4f7ff;
  border: 1px solid #dbe5f3;
  color: var(--dashboard-accent);
}

.dashboard-sidebar__search {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #ffffff;
}

.dashboard-sidebar__search input::placeholder {
  color: #9b9b9b;
}

.dashboard-sidebar__menu {
  gap: 2px;
}

.dashboard-nav-item {
  padding: 10px 12px;
  border-radius: 8px;
  color: #333333;
  font-weight: 500;
}

.dashboard-nav-item:hover,
.dashboard-nav-item:focus {
  background: #f8f9fa;
  color: #333333;
}

.dashboard-nav-item.is-active {
  background: rgba(37, 99, 235, 0.08);
  color: var(--dashboard-accent);
  border-color: transparent;
  box-shadow: inset 2px 0 0 var(--dashboard-accent);
}

.dashboard-sidebar__insight {
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}

.dashboard-sidebar__settings-link {
  justify-content: flex-start;
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: #4f4f4f;
  font-weight: 600;
}

.dashboard-sidebar__settings-link:hover,
.dashboard-sidebar__settings-link:focus {
  background: transparent;
  color: var(--dashboard-accent);
}

.dashboard-shortcuts-source {
  border-top: 1px solid #e0e0e0;
  padding-top: 10px;
}

.dashboard-shortcuts-source .favorites-title {
  padding: 0;
}

.dashboard-shortcuts-source .quick-access-entry .side-item,
.dashboard-shortcuts-source .quick-access-entry .side-subitem,
.dashboard-shortcuts-source .quick-access-entry .settings-link {
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
}

.dashboard-shortcuts-source .quick-access-entry .side-item:hover,
.dashboard-shortcuts-source .quick-access-entry .side-subitem:hover,
.dashboard-shortcuts-source .quick-access-entry .settings-link:hover {
  background: #f8f9fa;
}

.dashboard-shortcuts-source .quick-access-entry .favorite-toggle {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.dashboard-shortcuts-source .quick-access-entry .menu-icon {
  color: #4f4f4f;
}

.panel,
.card-link,
.home-favorite-link,
.dashboard-card,
.dashboard-stat-card {
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}

.dashboard-chart__bars,
.dashboard-focus-item,
.dashboard-table,
.dashboard-sidebar__insight {
  border-color: #e0e0e0;
  background: #ffffff;
  box-shadow: none;
}

.dashboard-focus-item {
  border-radius: 12px;
}

.dashboard-focus-item__icon {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #ffffff;
  color: var(--dashboard-accent);
}

.enterprise-dashboard__status-pill {
  border: 1px solid #e0e0e0;
  background: #ffffff;
  color: #4f4f4f;
  box-shadow: none;
}

.dashboard-card__badge {
  border: 1px solid #e0e0e0;
  background: #ffffff;
  color: #4f4f4f;
}

.home-favorite-link:hover,
.card-link:hover {
  border-color: #d6dde5;
  box-shadow: 0 2px 6px rgba(17, 24, 39, 0.05);
}


.app-sidebar,
.admin-sidebar,
.dashboard-shell__sidebar {
  background: #ffffff;
}

.dashboard-shell {
  grid-template-columns: 308px minmax(0, 1fr);
}

.dashboard-shell__sidebar {
  padding: 0;
  overflow: hidden;
}

.app-side-collapsed .dashboard-shell {
  grid-template-columns: minmax(0, 1fr);
}

.side-nav,
.admin-nav {
  background: #f3f4f6;
  border: 0;
  border-right: 1px solid #e0e0e0;
  border-radius: 0;
  padding: 0 8px 12px;
  gap: 0;
  box-shadow: none;
}

.menu-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 74px;
  margin: 0 -8px 10px;
  padding: 0 18px;
  background: #2e55d4;
  color: #ffffff;
  text-decoration: none;
}

.menu-brand:hover,
.menu-brand:focus {
  color: #ffffff;
}

.menu-brand__mark {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.menu-brand__wordmark {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.app-side-collapsed .menu-brand {
  justify-content: center;
  padding: 0;
}

.app-side-collapsed .menu-brand__wordmark {
  display: none;
}

.side-toggle {
  justify-content: center;
  min-height: 34px;
  margin: 0 8px 10px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: #e5e7eb;
  color: #6b7280;
}

.side-toggle .menu-text {
  display: none;
}

.side-toggle .menu-icon {
  width: 16px;
  min-width: 16px;
  height: 16px;
  color: #6b7280;
}

.side-toggle .menu-icon svg {
  width: 16px;
  height: 16px;
}

.app-side-collapsed .side-toggle .menu-icon svg {
  transform: rotate(180deg);
}

.menu-search-wrap {
  padding: 0 8px 12px;
}

.menu-search-input {
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: #e6eaf0;
  color: #4f4f4f;
  padding: 8px 12px;
}

.menu-search-input::placeholder {
  color: #7b8794;
}

.menu-search-input:focus {
  border-color: #c9d1dc;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.06);
}

.favorites-panel {
  padding: 0 8px 8px;
}

.favorites-title {
  padding: 0 4px;
  margin: 0 0 6px;
  color: #7b8794;
}

.menu-entry {
  gap: 4px;
}

.side-item,
.side-subitem,
.admin-nav-item,
.settings-link,
.side-group > summary,
.admin-group > summary {
  padding: 9px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #4f4f4f;
  font-size: 0.92rem;
  font-weight: 500;
}

.side-group,
.admin-group,
.side-group-nested,
.admin-group-nested {
  border: 0;
  background: transparent;
  border-radius: 0;
}

.side-group > summary,
.admin-group > summary {
  position: relative;
}

.side-group > summary::after,
.admin-group > summary::after {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid #7b8794;
  border-bottom: 1.5px solid #7b8794;
}

.side-group > summary:hover,
.admin-group > summary:hover,
.side-item:hover,
.side-subitem:hover,
.admin-nav-item:hover,
.settings-link:hover {
  background: #eceff3;
  color: #333333;
}

.side-group-nested > summary,
.admin-group-nested > summary {
  font-size: 0.92rem;
  color: #4f4f4f;
}

.side-group-nested[open] > summary,
.admin-group-nested[open] > summary {
  color: #2563eb;
}

.side-group-nested[open] > summary::after,
.admin-group-nested[open] > summary::after {
  border-right-color: #2563eb;
  border-bottom-color: #2563eb;
}

.menu-group-content-inner {
  gap: 2px;
  margin-left: 14px;
  padding: 0 0 4px;
  border-left: 0;
}

.side-subitem,
.admin-group .admin-nav-item {
  background: transparent;
}

.side-group-nested .side-subitem,
.admin-group-nested .admin-nav-item {
  padding-left: 12px;
  font-size: 0.9rem;
}

.side-item.active,
.side-subitem.active,
.admin-nav-item.active,
.settings-link.active {
  background: rgba(37, 99, 235, 0.08);
  color: #2563eb;
  box-shadow: inset 2px 0 0 #2563eb;
}

.menu-icon {
  width: 18px;
  min-width: 18px;
  height: 18px;
  background: transparent;
  border: 0;
  color: #8b96a5;
}

.side-item.active .menu-icon,
.side-subitem.active .menu-icon,
.admin-nav-item.active .menu-icon,
.settings-link.active .menu-icon,
.side-group-nested[open] > summary .menu-icon,
.admin-group-nested[open] > summary .menu-icon {
  color: #2563eb;
}

.menu-icon svg {
  width: 17px;
  height: 17px;
  stroke-width: 1.65;
}

.favorite-toggle {
  width: 24px;
  min-width: 24px;
  height: 24px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #c0c7d1;
  opacity: 0;
}

.menu-entry:hover .favorite-toggle,
.menu-entry.is-favorite .favorite-toggle {
  opacity: 1;
}

.menu-entry.is-favorite .favorite-toggle {
  color: #2563eb;
}

.favorites-list .menu-entry .side-item,
.favorites-list .menu-entry .side-subitem,
.favorites-list .menu-entry .admin-nav-item,
.favorites-list .menu-entry .settings-link {
  background: #eef2f7;
}

.dashboard-sidebar--menu {
  height: 100%;
}

.dashboard-sidebar--menu .side-nav {
  min-height: 100%;
}

.dashboard-shortcuts-source,
.dashboard-sidebar__insight,
.dashboard-sidebar__footer,
.dashboard-sidebar__menu,
.dashboard-sidebar__search,
.dashboard-sidebar__brand {
  display: none !important;
}

@media (max-width: 980px) {
  .dashboard-shell {
    grid-template-columns: 1fr;
  }

  .dashboard-shell__sidebar {
    border-right: 0;
    border-bottom: 1px solid #e0e0e0;
  }
}

body.app-theme-light {
  --theme-accent: #2563eb;
  --theme-accent-strong: #1d4ed8;
  --theme-accent-soft: rgba(37, 99, 235, 0.08);
  --theme-brand: #2e55d4;
  --app-surface: #ffffff;
  --app-content-bg: #eef1f6;
  --app-muted-surface: #e9edf3;
  color-scheme: light;
}

/* Native <select>/option paneli ve scrollbar OS-level render edilir — body'de
   color-scheme: dark olmazsa koyu tema aktif olsa bile dropdown'lar beyaz gelir. */
body.app-theme-dark,
body.app-theme-graphite {
  color-scheme: dark;
}

body.app-theme-graphite {
  --theme-accent: #475569;
  --theme-accent-strong: #334155;
  --theme-accent-soft: rgba(71, 85, 105, 0.08);
  --theme-brand: #475569;
  --app-surface: #f9fafb;
  --app-content-bg: #f4f6f8;
  --app-muted-surface: #edf0f3;
}

body.app-theme-sky {
  --theme-accent: #0284c7;
  --theme-accent-strong: #0369a1;
  --theme-accent-soft: rgba(2, 132, 199, 0.08);
  --theme-brand: #0f7ac8;
  --app-surface: #f8fbff;
  --app-content-bg: #f0f7fd;
  --app-muted-surface: #e4f0fa;
}

body.app-theme-indigo {
  --theme-accent: #4f46e5;
  --theme-accent-strong: #4338ca;
  --theme-accent-soft: rgba(79, 70, 229, 0.08);
  --theme-brand: #4f46e5;
  --app-surface: #f9f8ff;
  --app-content-bg: #f3f1fe;
  --app-muted-surface: #eae7fc;
}

body.app-theme-violet {
  --theme-accent: #7c3aed;
  --theme-accent-strong: #6d28d9;
  --theme-accent-soft: rgba(124, 58, 237, 0.08);
  --theme-brand: #7c3aed;
  --app-surface: #faf8ff;
  --app-content-bg: #f5f0fe;
  --app-muted-surface: #ede6fc;
}

body.app-theme-cobalt {
  --theme-accent: #1e40af;
  --theme-accent-strong: #1e3a8a;
  --theme-accent-soft: rgba(30, 64, 175, 0.08);
  --theme-brand: #1e40af;
  --app-surface: #f8faff;
  --app-content-bg: #eff4ff;
  --app-muted-surface: #e3ecfd;
}

body.app-theme-forest {
  --theme-accent: #2f855a;
  --theme-accent-strong: #276749;
  --theme-accent-soft: rgba(47, 133, 90, 0.08);
  --theme-brand: #2f855a;
  --app-surface: #f7fdf9;
  --app-content-bg: #eef9f2;
  --app-muted-surface: #e2f5e9;
}

body.app-theme-pine {
  --theme-accent: #15803d;
  --theme-accent-strong: #166534;
  --theme-accent-soft: rgba(21, 128, 61, 0.08);
  --theme-brand: #15803d;
  --app-surface: #f6fef8;
  --app-content-bg: #ecfdf3;
  --app-muted-surface: #dcfce7;
}

body.app-theme-teal {
  --theme-accent: #0f766e;
  --theme-accent-strong: #115e59;
  --theme-accent-soft: rgba(15, 118, 110, 0.08);
  --theme-brand: #0f766e;
  --app-surface: #f5fcfb;
  --app-content-bg: #ecf9f7;
  --app-muted-surface: #ddf4f1;
}

body.app-theme-ocean {
  --theme-accent: #0e7490;
  --theme-accent-strong: #155e75;
  --theme-accent-soft: rgba(14, 116, 144, 0.08);
  --theme-brand: #0e7490;
  --app-surface: #f5fbfd;
  --app-content-bg: #ecf8fc;
  --app-muted-surface: #d8f1f8;
}

body.app-theme-rose {
  --theme-accent: #e11d48;
  --theme-accent-strong: #be123c;
  --theme-accent-soft: rgba(225, 29, 72, 0.08);
  --theme-brand: #e11d48;
  --app-surface: #fff8f9;
  --app-content-bg: #fff0f2;
  --app-muted-surface: #fde4e8;
}

body.app-theme-crimson {
  --theme-accent: #dc2626;
  --theme-accent-strong: #b91c1c;
  --theme-accent-soft: rgba(220, 38, 38, 0.08);
  --theme-brand: #dc2626;
  --app-surface: #fff8f8;
  --app-content-bg: #fef0f0;
  --app-muted-surface: #fde3e3;
}

body.app-theme-sand {
  --theme-accent: #b7791f;
  --theme-accent-strong: #975a16;
  --theme-accent-soft: rgba(183, 121, 31, 0.08);
  --theme-brand: #b7791f;
  --app-surface: #fefcf8;
  --app-content-bg: #faf7ee;
  --app-muted-surface: #f5eedb;
}

body.app-theme-amber {
  --theme-accent: #d97706;
  --theme-accent-strong: #b45309;
  --theme-accent-soft: rgba(217, 119, 6, 0.08);
  --theme-brand: #d97706;
  --app-surface: #fffcf5;
  --app-content-bg: #fef8e8;
  --app-muted-surface: #fdf0cc;
}

body.app-theme-ember {
  --theme-accent: #dd6b20;
  --theme-accent-strong: #c05621;
  --theme-accent-soft: rgba(221, 107, 32, 0.08);
  --theme-brand: #dd6b20;
  --app-surface: #fefaf6;
  --app-content-bg: #fdf4eb;
  --app-muted-surface: #fae8d4;
}

body.app-theme-slate {
  --theme-accent: #475569;
  --theme-accent-strong: #334155;
  --theme-accent-soft: rgba(71, 85, 105, 0.08);
  --theme-brand: #64748b;
  --app-surface: #f8f9fb;
  --app-content-bg: #f1f3f7;
  --app-muted-surface: #e8ecf2;
}

body.app-theme-dusk {
  --app-topbar-bg: #1c1917;
  --app-sidebar-bg: #18181b;
  --app-content-bg: #1c1917;
  --app-surface: #272320;
  --app-muted-surface: #302b28;
  --app-border: #3d3530;
  --app-text: #e7e5e4;
  --app-text-muted: #a8a29e;
  --theme-accent: #fb923c;
  --theme-accent-strong: #f97316;
  --theme-accent-soft: rgba(251, 146, 60, 0.18);
  --theme-brand: #ea580c;
}

.dashboard-body {
  padding-top: var(--layout-header-height);
}

.dashboard-shell {
  min-height: calc(100vh - var(--layout-header-height));
}

.main-nav {
  border-bottom: 1px solid #e0e0e0;
}

.profile-trigger,
.profile-trigger:hover,
.profile-trigger:focus {
  color: #333333;
}

.profile-trigger:focus,
.profile-preferences-select:focus {
  box-shadow: 0 0 0 3px var(--theme-accent-soft);
}

.menu-brand {
  background: var(--theme-brand);
}

.side-item.active,
.side-subitem.active,
.admin-nav-item.active,
.settings-link.active,
.dashboard-nav-item.is-active {
  color: var(--theme-accent);
  background: var(--theme-accent-soft);
  box-shadow: inset 2px 0 0 var(--theme-accent);
}

.side-item.active .menu-icon,
.side-subitem.active .menu-icon,
.admin-nav-item.active .menu-icon,
.settings-link.active .menu-icon,
.side-group-nested[open] > summary .menu-icon,
.admin-group-nested[open] > summary .menu-icon,
.side-group-nested[open] > summary,
.admin-group-nested[open] > summary,
.menu-entry.is-favorite .favorite-toggle,
.dashboard-card__link,
.dashboard-sidebar__settings-link:hover,
.dashboard-sidebar__settings-link:focus {
  color: var(--theme-accent);
}

.side-group-nested[open] > summary::after,
.admin-group-nested[open] > summary::after {
  border-right-color: var(--theme-accent);
  border-bottom-color: var(--theme-accent);
}

.profile-preferences-submit,
.enterprise-dashboard__primary-action,
.btn-primary {
  background: var(--theme-accent);
  border-color: var(--theme-accent);
}

.profile-preferences-submit:hover,
.profile-preferences-submit:focus,
.enterprise-dashboard__primary-action:hover,
.enterprise-dashboard__primary-action:focus,
.btn-primary:hover,
.btn-primary:focus {
  background: var(--theme-accent-strong);
  border-color: var(--theme-accent-strong);
}

/* Açık tema taban tonları (2026-08-05 kademe ayarı): büyük yüzeyler saf beyazdı
   ve toplamda göz yorucu bir parlaklık veriyordu. Sayfa zemini / sol menü / üst
   şerit bir basamak yumuşatıldı; KART yüzeyi (--app-surface) bilinçli olarak
   beyaz bırakıldı — kartların zeminden ayrışması bu kontrasta bağlı. */
:root {
  --layout-header-height: 74px;
  --app-topbar-bg: #fbfcfe;
  --app-sidebar-bg: #f7f9fc;
  --app-content-bg: #eef1f6;
  --app-surface: #ffffff;
  --app-muted-surface: #e9edf3;
  --app-border: #dbe1ea;
  /* --app-border-light: daha silik ayirici (ic cizgi, satir arasi). Eskiden
     yalnizca body.app-theme-dark'ta tanimliydi; light tarafta karsiligi yoktu
     ve var(--app-border-light) kullanan kurallar acik temada renksiz kaliyordu. */
  --app-border-light: #e9edf3;
  --app-text: #333333;
  --app-text-muted: #4f4f4f;
  --theme-accent: #2563eb;
  --theme-accent-strong: #1d4ed8;
  --theme-accent-soft: rgba(37, 99, 235, 0.08);
}

body.app-theme-light {
  --theme-accent: #2563eb;
  --theme-accent-strong: #1d4ed8;
  --theme-accent-soft: rgba(37, 99, 235, 0.08);
  --theme-brand: #2e55d4;
  --app-surface: #ffffff;
  --app-content-bg: #eef1f6;
  --app-muted-surface: #e9edf3;
  color-scheme: light;
}

/* Native <select>/option paneli ve scrollbar OS-level render edilir — body'de
   color-scheme: dark olmazsa koyu tema aktif olsa bile dropdown'lar beyaz gelir. */
body.app-theme-dark,
body.app-theme-graphite {
  color-scheme: dark;
}

/* Dark tema CSS değişkenleri — var(--app-surface, #fff) gibi fallback'li view'ların
   dark modda doğru renk alması için. :root'un #ffffff default'unu override eder. */
/* Koyu tema taban tonları (2026-08-05 kademe ayarı): eski değerler neredeyse
   siyaha yakındı (#0a0d17 / #080b14) ve uzun kullanımda yorucuydu. Taban bir
   basamak yukarı alındı — hue korundu, yalnız aydınlık seviyesi yükseldi.
   Referans: bu dosyadaki app-theme-midnight paleti (yumuşak slate koyu).
   Tüm ekranların bu değişimden etkilenmesi bu token'ları KULLANMASINA bağlıdır;
   kendi hex'ini yazan bileşen buradan etkilenmez (bkz. token migrasyonu). */
body.app-theme-dark {
  --app-topbar-bg: #151c2c;
  --app-sidebar-bg: #0e1421;
  --app-content-bg: #121826;
  --app-surface: #151c2c;
  --app-muted-surface: #1b2334;
  --app-border: rgba(255, 255, 255, 0.10);
  --app-border-light: rgba(255, 255, 255, 0.06);
  --app-text: #e2e8f0;
  --app-text-muted: #94a3b8;
  --theme-accent: #6366f1;
  --theme-accent-strong: #4f46e5;
  --theme-accent-soft: rgba(99, 102, 241, 0.16);
  --theme-brand: #6366f1;
  /* Bootstrap 5 dark variables — BS bileşenleri (dropdown, tab, modal vb.) için */
  --bs-body-bg:         #121826;
  --bs-body-color:      #e2e8f0;
  --bs-border-color:    rgba(255, 255, 255, 0.12);
  --bs-secondary-bg:    #151c2c;
  --bs-tertiary-bg:     #1b2334;
  --bs-secondary-color: #94a3b8;
  --bs-emphasis-color:  #f1f5f9;
  --bs-link-color:      #818cf8;
  --bs-link-hover-color: #a5b4fc;
}

body.app-theme-graphite {
  --theme-accent: #475569;
  --theme-accent-strong: #334155;
  --theme-accent-soft: rgba(71, 85, 105, 0.08);
  --theme-brand: #475569;
  --app-surface: #f9fafb;
  --app-content-bg: #f4f6f8;
  --app-muted-surface: #edf0f3;
}

body.app-theme-sky {
  --theme-accent: #0284c7;
  --theme-accent-strong: #0369a1;
  --theme-accent-soft: rgba(2, 132, 199, 0.08);
  --theme-brand: #0f7ac8;
  --app-surface: #f8fbff;
  --app-content-bg: #f0f7fd;
  --app-muted-surface: #e4f0fa;
}

body.app-theme-indigo {
  --theme-accent: #4f46e5;
  --theme-accent-strong: #4338ca;
  --theme-accent-soft: rgba(79, 70, 229, 0.08);
  --theme-brand: #4f46e5;
  --app-surface: #f9f8ff;
  --app-content-bg: #f3f1fe;
  --app-muted-surface: #eae7fc;
}

body.app-theme-violet {
  --theme-accent: #7c3aed;
  --theme-accent-strong: #6d28d9;
  --theme-accent-soft: rgba(124, 58, 237, 0.08);
  --theme-brand: #7c3aed;
  --app-surface: #faf8ff;
  --app-content-bg: #f5f0fe;
  --app-muted-surface: #ede6fc;
}

body.app-theme-cobalt {
  --theme-accent: #1e40af;
  --theme-accent-strong: #1e3a8a;
  --theme-accent-soft: rgba(30, 64, 175, 0.08);
  --theme-brand: #1e40af;
  --app-surface: #f8faff;
  --app-content-bg: #eff4ff;
  --app-muted-surface: #e3ecfd;
}

body.app-theme-forest {
  --theme-accent: #2f855a;
  --theme-accent-strong: #276749;
  --theme-accent-soft: rgba(47, 133, 90, 0.08);
  --theme-brand: #2f855a;
  --app-surface: #f7fdf9;
  --app-content-bg: #eef9f2;
  --app-muted-surface: #e2f5e9;
}

body.app-theme-pine {
  --theme-accent: #15803d;
  --theme-accent-strong: #166534;
  --theme-accent-soft: rgba(21, 128, 61, 0.08);
  --theme-brand: #15803d;
  --app-surface: #f6fef8;
  --app-content-bg: #ecfdf3;
  --app-muted-surface: #dcfce7;
}

body.app-theme-teal {
  --theme-accent: #0f766e;
  --theme-accent-strong: #115e59;
  --theme-accent-soft: rgba(15, 118, 110, 0.08);
  --theme-brand: #0f766e;
  --app-surface: #f5fcfb;
  --app-content-bg: #ecf9f7;
  --app-muted-surface: #ddf4f1;
}

body.app-theme-ocean {
  --theme-accent: #0e7490;
  --theme-accent-strong: #155e75;
  --theme-accent-soft: rgba(14, 116, 144, 0.08);
  --theme-brand: #0e7490;
  --app-surface: #f5fbfd;
  --app-content-bg: #ecf8fc;
  --app-muted-surface: #d8f1f8;
}

body.app-theme-rose {
  --theme-accent: #e11d48;
  --theme-accent-strong: #be123c;
  --theme-accent-soft: rgba(225, 29, 72, 0.08);
  --theme-brand: #e11d48;
  --app-surface: #fff8f9;
  --app-content-bg: #fff0f2;
  --app-muted-surface: #fde4e8;
}

body.app-theme-crimson {
  --theme-accent: #dc2626;
  --theme-accent-strong: #b91c1c;
  --theme-accent-soft: rgba(220, 38, 38, 0.08);
  --theme-brand: #dc2626;
  --app-surface: #fff8f8;
  --app-content-bg: #fef0f0;
  --app-muted-surface: #fde3e3;
}

body.app-theme-sand {
  --theme-accent: #b7791f;
  --theme-accent-strong: #975a16;
  --theme-accent-soft: rgba(183, 121, 31, 0.08);
  --theme-brand: #b7791f;
  --app-surface: #fefcf8;
  --app-content-bg: #faf7ee;
  --app-muted-surface: #f5eedb;
}

body.app-theme-amber {
  --theme-accent: #d97706;
  --theme-accent-strong: #b45309;
  --theme-accent-soft: rgba(217, 119, 6, 0.08);
  --theme-brand: #d97706;
  --app-surface: #fffcf5;
  --app-content-bg: #fef8e8;
  --app-muted-surface: #fdf0cc;
}

body.app-theme-ember {
  --theme-accent: #dd6b20;
  --theme-accent-strong: #c05621;
  --theme-accent-soft: rgba(221, 107, 32, 0.08);
  --theme-brand: #dd6b20;
  --app-surface: #fefaf6;
  --app-content-bg: #fdf4eb;
  --app-muted-surface: #fae8d4;
}

body.app-theme-slate {
  --theme-accent: #475569;
  --theme-accent-strong: #334155;
  --theme-accent-soft: rgba(71, 85, 105, 0.08);
  --theme-brand: #64748b;
  --app-surface: #f8f9fb;
  --app-content-bg: #f1f3f7;
  --app-muted-surface: #e8ecf2;
}

body.app-theme-midnight {
  --app-topbar-bg: #111827;
  --app-sidebar-bg: #0f172a;
  --app-content-bg: #111827;
  --app-surface: #172033;
  --app-muted-surface: #1f2937;
  --app-border: #253047;
  --app-text: #e5e7eb;
  --app-text-muted: #cbd5e1;
  --theme-accent: #60a5fa;
  --theme-accent-strong: #3b82f6;
  --theme-accent-soft: rgba(96, 165, 250, 0.16);
}

body.app-theme-dusk {
  --app-topbar-bg: #1c1917;
  --app-sidebar-bg: #18181b;
  --app-content-bg: #1c1917;
  --app-surface: #272320;
  --app-muted-surface: #302b28;
  --app-border: #3d3530;
  --app-text: #e7e5e4;
  --app-text-muted: #a8a29e;
  --theme-accent: #fb923c;
  --theme-accent-strong: #f97316;
  --theme-accent-soft: rgba(251, 146, 60, 0.18);
  --theme-brand: #ea580c;
}

body,
.layout-body,
.dashboard-body,
.admin-page-root,
.dashboard-shell,
.dashboard-shell__content,
.app-main,
.admin-content {
  background: var(--app-content-bg);
  color: var(--app-text);
}

.app-topbar {
  min-height: var(--layout-header-height);
  height: var(--layout-header-height);
  background: var(--app-topbar-bg);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.brand-logo {
  gap: 12px;
}

.brand-logo img {
  height: 38px;
}

.main-nav .navbar-brand,
.main-nav .navbar-brand:hover,
.main-nav .navbar-brand:focus,
.profile-name {
  color: var(--app-text);
}

.profile-trigger {
  background: transparent;
  border: 1px solid var(--app-border);
  color: var(--app-text);
}

.profile-trigger:hover,
.profile-trigger:focus {
  background: var(--app-muted-surface);
  border-color: var(--app-border);
  color: var(--app-text);
}

.profile-menu,
.panel,
.card-link,
.home-favorite-link,
.dashboard-card,
.dashboard-stat-card,
.dashboard-focus-item,
.dashboard-chart__bars,
.dashboard-table,
.dashboard-sidebar__insight,
.login-card {
  background: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-text);
}

.profile-menu {
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

.profile-menu-name,
.dashboard-card__header h2,
.dashboard-stat-card__value,
.dashboard-chart__amount,
.dashboard-focus-item h3,
.dashboard-sidebar__insight-value,
.dashboard-sidebar__user-name,
.dashboard-table__row,
.panel h1,
.panel h2,
.card-link h3 {
  color: var(--app-text);
}

.profile-menu-email,
.dashboard-sidebar__user-email,
.dashboard-focus-item p,
.dashboard-stat-card__meta,
.dashboard-chart__copy,
.dashboard-sidebar__insight-copy,
.card-link p,
.text-muted {
  color: var(--app-text-muted) !important;
}

.form-control,
.form-select,
.menu-search-input,
.dashboard-sidebar__search input {
  background: var(--app-muted-surface);
  border-color: var(--app-border);
  color: var(--app-text);
}

.form-control::placeholder,
.form-select::placeholder,
.menu-search-input::placeholder,
.dashboard-sidebar__search input::placeholder {
  color: var(--app-text-muted);
}

.pagefooter {
  background: var(--app-topbar-bg);
  border-top: 1px solid var(--app-border);
  color: var(--app-text-muted);
}

.status-item {
  color: var(--app-text-muted);
}

.app-sidebar,
.admin-sidebar,
.dashboard-shell__sidebar {
  background: var(--app-sidebar-bg);
}

.side-nav,
.admin-nav {
  background: var(--app-sidebar-bg);
  border-right: 1px solid var(--app-border);
  padding: 10px 10px 14px;
}

.menu-brand {
  display: none !important;
}

.side-toggle {
  margin: 0 2px 8px;
  background: transparent;
  border: 0;
  color: var(--app-text-muted);
}

.side-toggle:hover,
.side-toggle:focus {
  background: var(--app-muted-surface);
  color: var(--app-text);
}

.favorites-panel {
  background: transparent;
  border: 0;
  padding: 0 4px 10px;
}

.favorites-title {
  color: var(--app-text-muted);
}

.side-group,
.admin-group,
.side-group-nested,
.admin-group-nested {
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.side-group > summary,
.admin-group > summary,
.side-group-nested > summary,
.admin-group-nested > summary,
.menu-group-label,
.side-item,
.side-subitem,
.admin-nav-item,
.settings-link {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--app-text-muted);
  padding: 8px 12px;
}

.side-group > summary,
.admin-group > summary {
  font-weight: 600;
  color: var(--app-text);
}

.menu-group-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--app-text);
}

.side-group > summary::after,
.admin-group > summary::after {
  border-right-color: var(--app-text-muted);
  border-bottom-color: var(--app-text-muted);
}

.side-group[open] > summary,
.admin-group[open] > summary,
.side-group-nested[open] > summary,
.admin-group-nested[open] > summary {
  background: transparent !important;
  color: var(--theme-accent);
}

.side-group[open] > summary::after,
.admin-group[open] > summary::after,
.side-group-nested[open] > summary::after,
.admin-group-nested[open] > summary::after {
  border-right-color: var(--theme-accent);
  border-bottom-color: var(--theme-accent);
}

.menu-group-content-inner {
  gap: 1px;
  margin-left: 18px;
  padding: 0 0 4px;
  border: 0;
}

.side-item:hover,
.side-subitem:hover,
.admin-nav-item:hover,
.settings-link:hover,
.side-group > summary:hover,
.admin-group > summary:hover,
.side-group-nested > summary:hover,
.admin-group-nested > summary:hover {
  background: transparent !important;
  color: var(--theme-accent);
}

.side-item.active,
.side-subitem.active,
.admin-nav-item.active,
.settings-link.active {
  background: transparent !important;
  color: var(--theme-accent) !important;
  box-shadow: inset 2px 0 0 var(--theme-accent) !important;
}

.menu-icon {
  width: 18px;
  min-width: 18px;
  height: 18px;
  background: transparent !important;
  border: 0 !important;
  color: inherit;
}

.menu-icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.65;
}

.favorite-toggle {
  background: transparent !important;
  border: 0 !important;
  color: var(--app-text-muted);
}

.menu-entry.is-favorite .favorite-toggle,
.menu-entry:hover .favorite-toggle {
  color: var(--theme-accent);
}

.dashboard-body {
  padding-top: var(--layout-header-height);
}

.dashboard-shell {
  min-height: calc(100vh - var(--layout-header-height));
}

.dashboard-shell__sidebar {
  border-right: 1px solid var(--app-border);
}

.dashboard-sidebar--menu .side-nav {
  min-height: 100%;
  background: var(--app-sidebar-bg);
}

.dashboard-chart__bars,
.dashboard-table__head {
  background: var(--app-muted-surface);
}

.dashboard-table__head,
.dashboard-stat-card__label,
.dashboard-chart__label,
.dashboard-chart__day,
.dashboard-card__eyebrow,
.enterprise-dashboard__eyebrow {
  color: var(--app-text-muted);
}

.dashboard-card__badge,
.enterprise-dashboard__status-pill,
.dashboard-stat-card__trend,
.dashboard-focus-item__icon {
  background: var(--app-muted-surface);
  border: 1px solid var(--app-border);
  color: var(--app-text-muted);
  box-shadow: none;
}

.dashboard-sidebar__status-dot,
.enterprise-dashboard__status-dot {
  background: var(--theme-accent);
}

body.app-theme-midnight .main-nav,
body.app-theme-midnight .pagefooter,
body.app-theme-midnight .profile-menu,
body.app-theme-dusk .main-nav,
body.app-theme-dusk .pagefooter,
body.app-theme-dusk .profile-menu {
  background: var(--app-topbar-bg);
}

body.app-theme-midnight .brand-logo span,
body.app-theme-midnight .main-nav .navbar-brand,
body.app-theme-midnight .main-nav .navbar-brand:hover,
body.app-theme-midnight .main-nav .navbar-brand:focus,
body.app-theme-midnight .profile-name,
body.app-theme-midnight .pagefooter,
body.app-theme-midnight .status-item,
body.app-theme-dusk .brand-logo span,
body.app-theme-dusk .main-nav .navbar-brand,
body.app-theme-dusk .main-nav .navbar-brand:hover,
body.app-theme-dusk .main-nav .navbar-brand:focus,
body.app-theme-dusk .profile-name,
body.app-theme-dusk .pagefooter,
body.app-theme-dusk .status-item {
  color: var(--app-text);
}

body.app-theme-midnight .profile-trigger,
body.app-theme-midnight .profile-trigger:hover,
body.app-theme-midnight .profile-trigger:focus,
body.app-theme-dusk .profile-trigger,
body.app-theme-dusk .profile-trigger:hover,
body.app-theme-dusk .profile-trigger:focus {
  background: var(--app-muted-surface);
  border-color: var(--app-border);
  color: var(--app-text);
}

body.app-theme-midnight .side-nav,
body.app-theme-midnight .admin-nav,
body.app-theme-midnight .dashboard-sidebar--menu .side-nav,
body.app-theme-dusk .side-nav,
body.app-theme-dusk .admin-nav,
body.app-theme-dusk .dashboard-sidebar--menu .side-nav {
  background: var(--app-sidebar-bg);
  border-right-color: var(--app-border);
}

body.app-theme-midnight .side-group > summary,
body.app-theme-midnight .admin-group > summary,
body.app-theme-midnight .side-group-nested > summary,
body.app-theme-midnight .admin-group-nested > summary,
body.app-theme-midnight .side-item,
body.app-theme-midnight .side-subitem,
body.app-theme-midnight .admin-nav-item,
body.app-theme-midnight .settings-link,
body.app-theme-midnight .favorites-title,
body.app-theme-dusk .side-group > summary,
body.app-theme-dusk .admin-group > summary,
body.app-theme-dusk .side-group-nested > summary,
body.app-theme-dusk .admin-group-nested > summary,
body.app-theme-dusk .side-item,
body.app-theme-dusk .side-subitem,
body.app-theme-dusk .admin-nav-item,
body.app-theme-dusk .settings-link,
body.app-theme-dusk .favorites-title {
  color: var(--app-text-muted);
}

body.app-theme-midnight .side-group > summary,
body.app-theme-midnight .admin-group > summary,
body.app-theme-dusk .side-group > summary,
body.app-theme-dusk .admin-group > summary {
  color: var(--app-text);
}

body.workspace-tabs-visible .workspace-tabs {
  display: block !important;
}

.workspace-tabs {
  --workspace-tab-width: 188px;
  position: relative;
  top: auto;
  flex: 0 0 auto;
  z-index: 5;
  padding: 14px 16px 0;
  background: linear-gradient(180deg, rgba(248, 249, 250, 0.98), rgba(248, 249, 250, 0.82));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.workspace-tabs::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 1px;
  background: var(--app-border);
}

.workspace-tabs__scroller {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 2px 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.45) transparent;
}

.workspace-tabs__scroller::-webkit-scrollbar {
  height: 8px;
}

.workspace-tabs__scroller::-webkit-scrollbar-track {
  background: transparent;
}

.workspace-tabs__scroller::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.45);
  border-radius: 999px;
}

.workspace-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: var(--workspace-tab-width);
  min-width: var(--workspace-tab-width);
  max-width: var(--workspace-tab-width);
  flex: 0 0 var(--workspace-tab-width);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 14px 14px 0 0;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
  overflow: hidden;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background-color 160ms ease;
  user-select: none;
  -webkit-user-select: none;
}

.workspace-tab + .workspace-tab {
  margin-left: -1px;
}

.workspace-tab::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 0;
  height: 3px;
  border-radius: 999px;
  background: var(--theme-accent);
  opacity: 0;
  transform: scaleX(0.55);
  transform-origin: center;
  transition: opacity 160ms ease, transform 160ms ease;
}

.workspace-tab:hover {
  transform: translateY(-1px);
  border-color: rgba(59, 130, 246, 0.22);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
}

.workspace-tab.is-active {
  background: #ffffff;
  border-color: rgba(59, 130, 246, 0.28);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.1);
}

.workspace-tab.is-active::before {
  opacity: 1;
  transform: scaleX(1);
}

.workspace-tab__link {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  padding: 10px 34px 11px 12px;
  color: var(--app-text-muted);
  text-decoration: none;
  font-size: var(--workspace-tab-title-size, 0.89rem);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.workspace-tab__link:hover,
.workspace-tab__link:focus {
  color: var(--theme-accent);
}

.workspace-tab.is-active .workspace-tab__link {
  color: var(--theme-accent);
}

.workspace-tab__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  right: 6px;
  width: 24px;
  height: 24px;
  margin-right: 0;
  padding: 0;
  background: rgba(148, 163, 184, 0.08);
  border: 0;
  border-radius: 999px;
  color: var(--app-text-muted);
  flex-shrink: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
  transition: background-color 160ms ease, color 160ms ease, opacity 140ms ease;
}

.workspace-tab:hover .workspace-tab__close,
.workspace-tab:focus-within .workspace-tab__close {
  opacity: 1;
  pointer-events: auto;
}

.workspace-tab__close svg {
  width: 13px;
  height: 13px;
  stroke-width: 1.8;
}

.workspace-tab__close:hover,
.workspace-tab__close:focus {
  background: rgba(59, 130, 246, 0.12);
  color: var(--theme-accent);
}

/* ── workspace-tabs dark theme overrides ── */
body.app-theme-dark .workspace-tabs {
  background: linear-gradient(180deg, rgba(13, 19, 35, 0.98), rgba(8, 12, 23, 0.92));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body.app-theme-dark .workspace-tab {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow: none;
}
body.app-theme-dark .workspace-tab:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(99, 102, 241, 0.25);
}
body.app-theme-dark .workspace-tab.is-active {
  background: rgba(13, 19, 35, 0.95);
  border-color: rgba(99, 102, 241, 0.35);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
body.app-theme-dark .workspace-tab__close:hover,
body.app-theme-dark .workspace-tab__close:focus {
  background: rgba(99, 102, 241, 0.15);
}

.entity-form-toolbar {
  position: sticky;
  top: 0;
  z-index: 22;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 10px 16px;
  border: 0;
  border-bottom: 1px solid var(--app-border);
  border-radius: 0;
  background: var(--app-surface);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body.app-theme-dark .entity-form-toolbar {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.entity-form-toolbar--floating {
  position: sticky;
  top: 0;
  z-index: 22;
}

.entity-form-toolbar .btn {
  min-width: 92px;
  min-height: 36px;
  padding: 0 14px;
  font-weight: 600;
  border-radius: 8px;
  box-shadow: none;
}

.entity-form-card {
  position: relative;
  overflow: visible;
}

.entity-form-toolbar-placeholder {
  display: block;
  width: 100%;
  height: 0;
  min-height: 0;
  flex: 0 0 auto;
}

.entity-form-card > .material-form-card__title {
  margin: 0;
  padding: 18px 24px 0;
}

.entity-form-card .integrator-form {
  padding-top: 6px;
}

.integrator-settings-modern .integrator-settings-modern__action-bar.entity-form-toolbar {
  margin: 0;
  padding: 10px 16px;
  border-top: 0;
  justify-content: flex-start;
  gap: 8px;
}

.layout-body,
.dashboard-body {
  padding-top: var(--layout-header-height);
}

.app-topbar {
  top: 0;
}

.app-sidebar,
.admin-sidebar {
  top: var(--layout-header-height);
}

.dashboard-shell,
.app-shell {
  min-height: calc(100vh - var(--layout-header-height) - var(--layout-footer-height));
}

.workspace-tabs {
  top: var(--layout-header-height);
}

body.app-theme-midnight .workspace-tabs {
  background: linear-gradient(180deg, rgba(9, 14, 28, 0.94), rgba(9, 14, 28, 0.72));
}

body.app-theme-midnight .workspace-tab {
  background: rgba(20, 29, 48, 0.9);
  border-color: rgba(96, 122, 168, 0.28);
  box-shadow: 0 10px 28px rgba(2, 6, 23, 0.28);
}

body.app-theme-midnight .workspace-tab.is-active {
  background: var(--app-panel-bg);
  border-color: rgba(96, 165, 250, 0.35);
}

body.app-theme-midnight .workspace-tab__close {
  background: rgba(148, 163, 184, 0.1);
}

body.app-theme-midnight .entity-form-toolbar {
  border-bottom-color: rgba(71, 85, 105, 0.78);
  background: rgba(15, 23, 42, 0.96);
  box-shadow: 0 2px 6px rgba(2, 6, 23, 0.35);
}

.collaboration-lock-banner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
  margin-left: auto;
  padding: 0 0 0 14px;
  border: 0;
  background: transparent;
  flex: 1 1 320px;
}

/* Floating varyant: hidden marker form senaryosu icin (banner host bulunamadiginda).
   Aksiyon seridi altinda kompakt bir chip olarak gozukur — sayfa ustunde buyuk
   yer kaplamaz. */
.collaboration-lock-banner--floating {
  position: fixed;
  top: 12px;
  right: 16px;
  z-index: 9500;
  flex: 0 0 auto;
  margin: 0;
  padding: 6px 12px;
  background: rgba(15, 23, 42, 0.92);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  gap: 10px;
}
.collaboration-lock-banner--floating .collaboration-lock-banner__body {
  justify-items: end;
  gap: 4px;
}
.collaboration-lock-banner--floating .collaboration-lock-banner__message {
  font-size: 0.78rem;
  color: rgba(241, 245, 249, 0.88);
}
.collaboration-lock-banner--floating .collaboration-lock-banner__status {
  font-size: 0.66rem;
  padding: 0 7px;
  min-height: 18px;
}
.collaboration-lock-banner--floating .btn-outline-primary {
  font-size: 0.74rem;
  padding: 3px 10px;
  background: rgba(99, 102, 241, 0.16);
  border-color: rgba(129, 140, 248, 0.55);
  color: #c7d2fe;
}
.collaboration-lock-banner--floating .btn-outline-primary:hover {
  background: rgba(99, 102, 241, 0.28);
  color: #fff;
}

.collaboration-lock-banner.is-owned {
  background: transparent;
}

.collaboration-lock-banner.is-readonly {
  background: transparent;
}

.collaboration-lock-banner__body {
  display: grid;
  gap: 2px;
  min-width: 0;
  justify-items: end;
}

.collaboration-lock-banner__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #9a3412;
  background: rgba(249, 115, 22, 0.12);
}

.collaboration-lock-banner.is-owned .collaboration-lock-banner__status {
  color: #1d4ed8;
  background: rgba(37, 99, 235, 0.12);
}

.collaboration-lock-banner__message {
  font-size: 0.9rem;
  color: var(--app-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.collaboration-lock-banner__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.collaboration-widget {
  position: fixed;
  right: 18px;
  bottom: calc(var(--layout-footer-height) + 18px);
  z-index: 140;
}

.collaboration-launcher {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--app-border);
  border-radius: 12px;
  background: var(--app-surface);
  color: var(--app-text);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

.collaboration-launcher__icon {
  width: 18px;
  height: 18px;
  color: var(--theme-accent);
}

.collaboration-launcher__icon svg,
.collaboration-panel__close svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.collaboration-launcher__label {
  font-size: 0.9rem;
  font-weight: 600;
}

.collaboration-launcher__badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #dc2626;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.collaboration-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  width: 360px;
  max-width: calc(100vw - 24px);
  border: 1px solid var(--app-border);
  border-radius: 16px;
  background: var(--app-surface);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
  overflow: hidden;
}

.collaboration-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--app-border);
  background: var(--app-muted-surface);
}

.collaboration-panel__header h2 {
  margin: 0;
  font-size: 1rem;
  color: var(--app-text);
}

.collaboration-panel__header p {
  margin: 4px 0 0;
  font-size: 0.8rem;
  color: var(--app-text-muted);
}

.collaboration-panel__close {
  width: 32px;
  min-width: 32px;
  height: 32px;
  border: 1px solid var(--app-border);
  border-radius: 10px;
  background: var(--app-surface);
  color: var(--app-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.collaboration-panel__body {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0;
  max-height: min(70vh, 620px);
}

.collaboration-presence,
.collaboration-thread {
  padding: 14px 16px;
}

.collaboration-presence {
  border-bottom: 1px solid var(--app-border);
  background: var(--app-muted-surface);
}

.collaboration-section-title {
  margin-bottom: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--app-text-muted);
  letter-spacing: 0.04em;
}

.collaboration-user-list {
  display: grid;
  gap: 8px;
}

.collaboration-user {
  width: 100%;
  display: grid;
  gap: 2px;
  position: relative;
  padding: 10px 38px 10px 12px;
  border: 1px solid var(--app-border);
  border-radius: 10px;
  background: var(--app-surface);
  color: var(--app-text);
  text-align: left;
}

.collaboration-user.is-active {
  border-color: rgba(37, 99, 235, 0.32);
  background: rgba(37, 99, 235, 0.06);
}

.collaboration-user__title {
  font-size: 0.9rem;
  font-weight: 600;
}

.collaboration-user__meta {
  font-size: 0.76rem;
  color: var(--app-text-muted);
}

.collaboration-user__badge {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--theme-accent);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.collaboration-empty-state {
  padding: 10px 0;
  font-size: 0.82rem;
  color: var(--app-text-muted);
}

.collaboration-thread {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
  min-height: 320px;
}

.collaboration-message-list {
  display: grid;
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
  padding-right: 4px;
}

.collaboration-message {
  max-width: 86%;
  padding: 10px 12px;
  border: 1px solid var(--app-border);
  border-radius: 12px 12px 12px 4px;
  background: var(--app-muted-surface);
}

.collaboration-message.is-outgoing {
  margin-left: auto;
  border-radius: 12px 12px 4px 12px;
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.18);
}

.collaboration-message__meta {
  margin-bottom: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--app-text-muted);
}

.collaboration-message__text {
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--app-text);
  white-space: pre-wrap;
}

.collaboration-compose {
  display: grid;
  gap: 8px;
}

.collaboration-compose .form-control {
  resize: vertical;
  min-height: 84px;
}

body.app-theme-midnight .collaboration-lock-banner {
  background: transparent;
}

body.app-theme-midnight .collaboration-lock-banner.is-readonly {
  background: transparent;
}

body.app-theme-midnight .collaboration-lock-banner__message,
body.app-theme-midnight .collaboration-panel__header h2,
body.app-theme-midnight .collaboration-user__title,
body.app-theme-midnight .collaboration-message__text {
  color: #e5e7eb;
}

body.app-theme-midnight .collaboration-lock-banner__status,
body.app-theme-midnight .collaboration-panel__header p,
body.app-theme-midnight .collaboration-user__meta,
body.app-theme-midnight .collaboration-empty-state,
body.app-theme-midnight .collaboration-message__meta {
  color: #cbd5e1;
}

body.app-theme-midnight .collaboration-lock-banner__status {
  background: rgba(249, 115, 22, 0.18);
}

body.app-theme-midnight .collaboration-lock-banner.is-owned .collaboration-lock-banner__status {
  background: rgba(96, 165, 250, 0.18);
}

body.app-theme-midnight .collaboration-launcher,
body.app-theme-midnight .collaboration-panel,
body.app-theme-midnight .collaboration-user,
body.app-theme-midnight .collaboration-panel__close,
body.app-theme-midnight .collaboration-message {
  border-color: rgba(71, 85, 105, 0.78);
  background: #0f172a;
  color: #e5e7eb;
}

body.app-theme-midnight .collaboration-panel__header,
body.app-theme-midnight .collaboration-presence {
  border-bottom-color: rgba(71, 85, 105, 0.78);
  background: #111827;
}

body.app-theme-midnight .collaboration-message.is-outgoing {
  background: rgba(96, 165, 250, 0.18);
  border-color: rgba(96, 165, 250, 0.28);
}

/* body.app-theme-midnight kurallari yukarida artik canli tema kodu degil (bkz.
   themeService.js — gercek koyu tema class'i sadece body.app-theme-dark). Asagidaki
   blok, sohbet/presence (collaboration) ailesinin GERCEK koyu tema karsiligidir.
   Renkler --app-surface/--app-border/--app-text/--app-text-muted (site.css ~6290) ve
   --accent-soft-*/--warning-soft-*/--ring-color (tokens.css ~281-323) degiskenlerinden
   turetildi — sabit hex uydurulmadi. */
body.app-theme-dark .collaboration-launcher {
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.45);
}

body.app-theme-dark .collaboration-panel {
  box-shadow: 0 18px 42px rgba(2, 6, 23, 0.55);
}

/* Durum rozeti (readonly=turuncu / owned=mavi) — vurgu rengi degistirilmedi,
   yalnizca dark yuzeyde okunurlugu bozan sabit koyu metin/dusuk-alfa arka plan
   tokens.css'in hazir dark soft-bg/fg cifti ile degistirildi. */
body.app-theme-dark .collaboration-lock-banner__status {
  color: var(--warning-soft-fg);
  background: var(--warning-soft-bg);
}

body.app-theme-dark .collaboration-lock-banner.is-owned .collaboration-lock-banner__status {
  color: var(--accent-soft-fg);
  background: var(--accent-soft-bg);
}

/* "Benim" mesaj balonu (is-outgoing) karsi tarafin balonundan (yukaridaki
   muted-surface) ayirt edilebilir kalmasi icin tokens.css'in dark accent-soft
   cifti kullanildi — sabit rgba(37,99,235,...) dark yuzeyde neredeyse
   gorunmuyordu (siyaha yakin, ayirt edilemiyordu). */
body.app-theme-dark .collaboration-message.is-outgoing {
  background: var(--accent-soft-bg);
  border-color: var(--ring-color);
}

.material-delete-modal .modal-dialog {
  max-width: 420px;
}

.material-delete-modal .modal-content {
  border: 1px solid var(--app-border);
  border-radius: 20px;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.14);
  overflow: hidden;
}

.material-delete-modal .modal-body {
  padding: 28px 28px 24px;
  text-align: center;
}

.material-delete-modal__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  margin: 0 auto 16px;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

.material-delete-modal__icon svg {
  width: 28px;
  height: 28px;
  stroke-width: 1.8;
}

.material-delete-modal__title {
  margin: 0 0 8px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--app-text);
}

.material-delete-modal__text {
  margin: 0;
  color: var(--app-text-muted);
}

.material-delete-modal__record {
  margin: 14px 0 22px;
  padding: 12px 14px;
  border: 1px solid var(--app-border);
  border-radius: 12px;
  background: var(--app-muted-surface);
  color: var(--app-text);
  font-weight: 600;
  word-break: break-word;
}

.material-delete-modal__status {
  margin: -8px 0 18px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.05);
  color: var(--app-text-muted);
  font-size: 0.92rem;
}

.material-delete-modal__actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.material-delete-modal__actions .btn {
  min-width: 110px;
}

body.app-theme-midnight .material-delete-modal .modal-content {
  background: var(--app-panel-bg);
}

body.app-theme-midnight .material-delete-modal__icon {
  background: rgba(248, 113, 113, 0.16);
  color: #fca5a5;
}

.material-delete-modal.is-success .material-delete-modal__icon {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
}

.material-delete-modal.is-success .material-delete-modal__status {
  background: rgba(34, 197, 94, 0.12);
  color: #166534;
}

.material-delete-modal.is-error .material-delete-modal__status {
  background: rgba(239, 68, 68, 0.1);
  color: #b91c1c;
}

body.app-theme-midnight .material-delete-modal.is-success .material-delete-modal__icon {
  background: rgba(34, 197, 94, 0.18);
  color: #86efac;
}

body.app-theme-midnight .material-delete-modal.is-success .material-delete-modal__status {
  background: rgba(34, 197, 94, 0.16);
  color: #bbf7d0;
}

body.app-theme-midnight .material-delete-modal.is-error .material-delete-modal__status {
  background: rgba(248, 113, 113, 0.16);
  color: #fecaca;
}

@media (max-width: 991px) {
  .workspace-tabs {
    --workspace-tab-width: 164px;
    padding: 12px 12px 0;
  }

  .workspace-tabs::after {
    left: 12px;
    right: 12px;
  }

  .material-delete-modal .modal-dialog {
    max-width: calc(100vw - 24px);
  }

  .entity-form-toolbar {
    justify-content: flex-start;
    gap: 8px;
    padding: 10px 12px;
  }

  .entity-form-toolbar .btn {
    flex: 0 0 auto;
    min-width: 88px;
  }

  .collaboration-widget {
    right: 12px;
    bottom: calc(var(--layout-footer-height) + 12px);
  }

  .collaboration-lock-banner {
    flex-basis: 100%;
    justify-content: flex-start;
    margin-left: 0;
    padding-left: 0;
  }

  .collaboration-lock-banner__body {
    justify-items: start;
  }

  .collaboration-lock-banner__message {
    white-space: normal;
  }

  .collaboration-launcher__label {
    display: none;
  }

  .collaboration-panel {
    width: min(360px, calc(100vw - 24px));
  }

}

.app-content-area {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

.app-content-area--standalone {
  padding-left: 0;
  padding-right: 0;
}

.workspace-tabs {
  padding: 10px 0 0;
}

.workspace-tabs::after {
  left: 0;
  right: 0;
}

.workspace-tabs__scroller {
  padding: 0 0 8px;
}

.dashboard-shell__content,
.admin-content,
.integrator-dashboard__content {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 0 20px;
}

.integrator-dashboard--compact .integrator-dashboard__content,
.integrator-dashboard--wide .integrator-dashboard__content,
.integrator-dashboard--material .integrator-dashboard__content {
  padding-left: 0;
  padding-right: 0;
}

.panel {
  max-width: none;
  margin: 0 0 18px 0;
  padding: 12px 14px;
  border-radius: 8px;
}

.integrator-dashboard__grid,
.integrator-dashboard--compact .integrator-dashboard__grid {
  gap: 12px;
}

.integrator-dashboard__group {
  gap: 8px;
}

.integrator-card__header,
.integrator-dashboard--compact .integrator-card__header {
  padding: 12px 14px 10px;
}

.integrator-form,
.integrator-dashboard--compact .integrator-form,
.integrator-dashboard--material .integrator-form {
  padding: 10px 12px 12px;
}

.integrator-inline-form,
.integrator-dashboard--compact .integrator-inline-form {
  padding: 10px 12px 0;
}

.integrator-form-columns {
  gap: 12px;
}

.integrator-form-section,
.integrator-dashboard--compact .integrator-form-section,
.integrator-dashboard--material .integrator-form-section {
  padding: 10px 12px;
  border-radius: 8px;
}

.integrator-form-section--runtime {
  margin-top: 10px;
}

.integrator-form-section h3 {
  margin: 0 0 7px 0;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
}

.integrator-form-grid,
.integrator-dashboard--compact .integrator-form-grid {
  gap: 8px 10px;
}

.integrator-field .form-label,
.panel .form-label {
  margin-bottom: 3px;
  font-size: 0.75rem;
  line-height: 1.2;
}

.integrator-form .form-control,
.integrator-form .form-select,
.integrator-inline-form .form-control,
.integrator-inline-form .form-select,
.panel .form-control,
.panel .form-select,
.integrator-dashboard--compact .integrator-form .form-control,
.integrator-dashboard--compact .integrator-form .form-select {
  min-height: 34px;
  height: 34px;
  padding: 0 10px;
  font-size: 0.81rem;
  border-radius: 6px;
}

.integrator-form textarea.form-control,
.integrator-inline-form textarea.form-control,
.panel textarea.form-control {
  min-height: 76px;
  height: auto;
  padding-top: 6px;
  padding-bottom: 6px;
}

/* ── Grid Aksiyon Butonlari (standart) ── */
.act-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 1px solid #e2e8f0; background: #fff; color: #475569; cursor: pointer; text-decoration: none; }
.act-btn:hover { background: #f1f5f9; }
.act-btn.danger { color: #dc2626; border-color: #fecaca; }
.act-btn.danger:hover { background: #fef2f2; }
.act-btn.primary { color: #2563eb; border-color: #bfdbfe; }
.act-btn.primary:hover { background: #eff6ff; }

/* ── DB Info Butonu ── */
.calibra-dbinfo-btn {
  margin-left: auto !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  border-radius: 50% !important;
  border: none !important;
  background: linear-gradient(135deg, #2dd4a8, #22b8cf, #0ea5e9) !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  box-shadow: 0 2px 6px rgba(14,165,233,0.35) !important;
}

.entity-form-toolbar {
  padding: 8px 10px;
  gap: 6px;
}

.entity-form-toolbar .btn,
.integrator-btn-primary,
.integrator-btn-secondary,
.integrator-btn-tertiary {
  min-width: 82px;
  min-height: 34px;
  height: 34px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 0.8rem;
}

.integrator-empty-note,
.integrator-dashboard--compact .integrator-empty-note {
  margin: 10px 12px 12px;
  padding: 10px 12px;
}

.integrator-table-search {
  gap: 8px;
  padding: 8px 10px;
}

.integrator-table-search .form-control {
  min-height: 34px;
  height: 34px;
}

.integrator-table-wrap,
.integrator-dashboard--material .integrator-table-wrap {
  padding: 10px;
}

.integrator-table thead th {
  padding: 8px 10px;
  font-size: 0.69rem;
}

.integrator-table tbody td {
  padding: 9px 10px;
  font-size: 0.81rem;
}

.integrator-data-stack,
.integrator-dashboard--compact .integrator-data-stack {
  gap: 12px;
  padding: 12px;
}

@media (max-width: 991px) {
  .app-content-area,
  .dashboard-shell__content,
  .admin-content,
  .integrator-dashboard__content {
    padding-bottom: 16px;
  }

  .workspace-tabs {
    padding: 10px 0 0;
  }

  .workspace-tabs::after {
    left: 0;
    right: 0;
  }

  .integrator-form,
  .integrator-inline-form,
  .integrator-form-section,
  .panel {
    padding-left: 10px;
    padding-right: 10px;
  }
}

.entity-layout-tabs {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.entity-layout-tabs__nav {
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--app-border);
  scrollbar-width: thin;
}

.entity-layout-tabs__button {
  flex: 0 0 auto;
  min-width: 132px;
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--app-text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.entity-layout-tabs__button:hover {
  color: var(--app-text);
  background: rgba(15, 23, 42, 0.03);
}

.entity-layout-tabs__button.is-active {
  color: var(--app-text);
  border-bottom-color: var(--accent-color, #2563eb);
  background: rgba(37, 99, 235, 0.05);
}

.entity-layout-tabs__panes {
  border: 1px solid var(--app-border);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: var(--app-panel-bg, #ffffff);
}

.entity-layout-tabs__pane {
  display: none;
  padding: 10px 12px;
  min-height: 300px;
  overflow-y: auto;
}

.entity-layout-tabs__pane.is-active {
  display: block;
}

.entity-layout-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 10px;
  align-items: start;
}

.entity-layout-grid .integrator-field {
  min-width: 0;
}

.layout-span-1 {
  grid-column: span 1;
}

.layout-span-2 {
  grid-column: span 2;
}

.layout-span-3 {
  grid-column: 1 / -1;
}

.entity-layout-grid textarea.form-control,
.entity-layout-grid select[multiple] {
  min-height: 92px;
  height: auto;
  padding-top: 6px;
  padding-bottom: 6px;
}

.layout-designer-table td {
  vertical-align: middle;
}

.layout-designer-table__label {
  font-weight: 600;
  color: var(--app-text);
}

.screen-design-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  width: 100%;
}

.screen-design-toolbar__form {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex: 1 1 420px;
  margin: 0;
}

.screen-design-toolbar__field {
  flex: 0 1 340px;
  min-width: 220px;
  margin-bottom: 0;
}

.screen-design-toolbar__summary {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  min-width: 180px;
  padding-bottom: 4px;
}

.screen-design-toolbar__caption {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--app-text-muted);
}

.screen-design-toolbar__screen {
  font-size: 1rem;
  color: var(--app-text);
}

.screen-design-toolbar__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

.screen-design-group-picker__controls {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.screen-design-group-picker__controls .form-select {
  flex: 1 1 auto;
}

.screen-design-group-picker__controls .btn {
  flex: 0 0 auto;
}

.screen-design-modal .modal-dialog {
  max-width: 720px;
}

.screen-design-modal .modal-content {
  border: 1px solid #dbe8f7;
  border-radius: 20px;
  box-shadow: 0 24px 54px rgba(23, 47, 82, 0.18);
}

.screen-design-modal .modal-header {
  align-items: flex-start;
  padding: 22px 22px 0;
  border-bottom: 0;
}

.screen-design-modal .modal-body {
  padding: 20px 22px 22px;
}

.screen-design-modal__subtitle {
  margin: 6px 0 0;
  font-size: 0.86rem;
  color: var(--app-text-muted);
}

.integrator-table__subtext {
  margin-top: 2px;
  font-size: 0.69rem;
  color: var(--app-text-muted);
}

.integrator-table-wrap,
.integrator-dashboard--material .integrator-table-wrap {
  overflow-x: auto;
}

.integrator-table {
  display: table;
  width: 100%;
  min-width: 100%;
  max-width: none;
  table-layout: auto;
}

.integrator-table thead th,
.integrator-table tbody td {
  white-space: nowrap;
  padding-left: 0.48rem;
  padding-right: 0.48rem;
}

.integrator-table__empty,
.integrator-table__subtext {
  white-space: normal;
}

.integrator-table .integrator-table__empty {
  width: auto;
}

.calibra-grid-wrap {
  width: 100%;
  overflow-x: auto;
}

.calibra-grid {
  display: inline-table;
  width: max-content;
  min-width: 100%;
  max-width: none;
  table-layout: auto;
}

.calibra-grid thead th,
.calibra-grid tbody td {
  width: auto;
  white-space: nowrap;
}

.calibra-grid thead th {
  position: relative;
  padding: 0.34rem 1rem 0.34rem 0.52rem;
  font-size: 0.68rem;
  line-height: 1.05;
}

.calibra-grid tbody td {
  padding: 0.26rem 0.52rem;
  font-size: 0.79rem;
  line-height: 1.08;
}

.calibra-grid .integrator-table__empty,
.calibra-grid .integrator-table__subtext {
  white-space: normal;
}

.calibra-grid tbody .form-control,
.calibra-grid tbody .form-select {
  min-height: 28px;
  height: 28px;
  padding: 0 7px;
  font-size: 0.78rem;
}

.calibra-grid tbody textarea.form-control {
  min-height: 56px;
  height: auto;
  padding-top: 4px;
  padding-bottom: 4px;
}

.calibra-grid tbody .form-check-input {
  margin-top: 0;
  width: 0.95rem;
  height: 0.95rem;
}

.calibra-grid .integrator-status-pill {
  min-width: 0;
  gap: 5px;
  padding: 0.14rem 0.42rem;
  font-size: 0.69rem;
  line-height: 1;
}

.calibra-grid .integrator-status-pill__dot {
  width: 6px;
  height: 6px;
}

.calibra-grid .material-row-actions {
  gap: 4px;
}

.calibra-grid__header-cell {
  user-select: none;
}

.calibra-grid__sort-button {
  width: calc(100% - 10px);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: inherit;
}

.calibra-grid__sort-button:hover,
.calibra-grid__sort-button:focus {
  color: #163f7a;
}

.calibra-grid__sort-button:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.3);
  outline-offset: 2px;
  border-radius: 4px;
}

.calibra-grid__sort-label {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calibra-grid__sort-indicator {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.8rem;
  color: #6b7f96;
}

.calibra-grid__sort-indicator::before {
  content: "\2195";
  font-size: 0.7rem;
  line-height: 1;
  opacity: 0.62;
}

.calibra-grid th[aria-sort="ascending"] .calibra-grid__sort-indicator::before {
  content: "\2191";
  opacity: 1;
}

.calibra-grid th[aria-sort="descending"] .calibra-grid__sort-indicator::before {
  content: "\2193";
  opacity: 1;
}

.calibra-grid__resize-handle {
  position: absolute;
  top: 4px;
  right: -5px;
  bottom: 4px;
  width: 10px;
  cursor: col-resize;
  touch-action: none;
  z-index: 2;
}

.calibra-grid__resize-handle::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: rgba(107, 127, 150, 0.38);
}

.calibra-grid thead th:hover .calibra-grid__resize-handle::after,
.calibra-grid.is-resizing .calibra-grid__resize-handle::after {
  background: rgba(22, 63, 122, 0.72);
}

body.calibra-grid-resizing,
body.calibra-grid-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}

.material-row-actions {
  gap: 6px;
}

.integrator-grid-action-btn {
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  min-height: 2rem;
  padding: 0;
  border-radius: 0.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.calibra-grid .integrator-grid-action-btn {
  width: 1.72rem;
  min-width: 1.72rem;
  height: 1.72rem;
  min-height: 1.72rem;
  border-radius: 0.46rem;
}

.integrator-grid-action-btn.btn-sm {
  width: 1.9rem;
  min-width: 1.9rem;
  height: 1.9rem;
  min-height: 1.9rem;
}

.integrator-grid-action-btn.integrator-btn-secondary,
.integrator-grid-action-btn.integrator-btn-tertiary,
.integrator-grid-action-btn.integrator-detail-btn {
  padding: 0;
}

.integrator-grid-action-btn__icon {
  width: 0.95rem;
  height: 0.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.integrator-grid-action-btn__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

:root {
  --calibra-grid-header-padding-y: 0.36rem;
  --calibra-grid-header-padding-x: 0.48rem;
  --calibra-grid-cell-padding-y: 0.44rem;
  --calibra-grid-cell-padding-x: 0.46rem;
  --calibra-grid-header-font-size: 0.67rem;
  --calibra-grid-cell-font-size: 0.77rem;
  --calibra-grid-header-line-height: 1;
  --calibra-grid-cell-line-height: 1.04;
  --calibra-grid-inline-control-height: 1.72rem;
  --calibra-grid-inline-control-padding-x: 0.4rem;
  --calibra-grid-icon-action-size: 1.72rem;
  --calibra-grid-icon-action-radius: 0.42rem;
  --calibra-grid-status-pill-font-size: 0.67rem;
  --calibra-grid-status-pill-gap: 4px;
  --calibra-grid-status-pill-padding-y: 0.12rem;
  --calibra-grid-status-pill-padding-x: 0.38rem;
}

.integrator-table-wrap,
.integrator-data-block .integrator-table-wrap,
.integrator-dashboard--material .integrator-table-wrap,
.integrator-settings-modern .integrator-table-wrap {
  padding: 0.2rem 0.5rem 0.45rem;
}

.integrator-table-search {
  gap: 0.5rem;
  padding: 0.45rem 0.5rem 0.3rem;
}

.integrator-table-search__fields {
  gap: 0.4rem;
}

.integrator-table-search .form-control {
  min-height: 1.95rem;
  height: 1.95rem;
  font-size: 0.79rem;
}

.integrator-table thead th,
.integrator-dashboard--material .integrator-table thead th,
.integrator-settings-modern .integrator-table thead th,
.calibra-grid thead th {
  padding: var(--calibra-grid-header-padding-y) var(--calibra-grid-header-padding-x);
  font-size: var(--calibra-grid-header-font-size);
  line-height: var(--calibra-grid-header-line-height);
  vertical-align: middle;
}

.integrator-table tbody td,
.integrator-dashboard--material .integrator-table tbody td,
.integrator-settings-modern .integrator-table tbody td,
.calibra-grid tbody td {
  padding: var(--calibra-grid-cell-padding-y) var(--calibra-grid-cell-padding-x);
  font-size: var(--calibra-grid-cell-font-size);
  line-height: var(--calibra-grid-cell-line-height);
  vertical-align: middle;
}

.integrator-table thead th:last-child,
.integrator-table tbody td:last-child {
  width: 1%;
  white-space: nowrap;
}

.integrator-table tbody .form-control,
.integrator-table tbody .form-select,
.calibra-grid tbody .form-control,
.calibra-grid tbody .form-select {
  min-height: var(--calibra-grid-inline-control-height);
  height: var(--calibra-grid-inline-control-height);
  padding: 0 var(--calibra-grid-inline-control-padding-x);
  font-size: var(--calibra-grid-cell-font-size);
  line-height: 1;
  margin-top: 0;
  margin-bottom: 0;
}

.integrator-table tbody textarea.form-control,
.calibra-grid tbody textarea.form-control {
  min-height: calc(var(--calibra-grid-inline-control-height) * 2);
  height: auto;
  padding-top: 4px;
  padding-bottom: 4px;
  line-height: 1.15;
}

.integrator-table tbody .form-check-input,
.calibra-grid tbody .form-check-input {
  margin-top: 0;
  width: 0.9rem;
  height: 0.9rem;
}

.integrator-table .integrator-status-pill,
.calibra-grid .integrator-status-pill {
  min-width: 0;
  gap: var(--calibra-grid-status-pill-gap);
  padding: var(--calibra-grid-status-pill-padding-y) var(--calibra-grid-status-pill-padding-x);
  font-size: var(--calibra-grid-status-pill-font-size);
  line-height: 1;
}

.integrator-table .integrator-status-pill__dot,
.calibra-grid .integrator-status-pill__dot {
  width: 6px;
  height: 6px;
}

.integrator-table .material-row-actions,
.calibra-grid .material-row-actions {
  align-items: center;
  gap: 0.2rem;
  flex-wrap: nowrap;
}

.integrator-table .integrator-grid-action-btn,
.calibra-grid .integrator-grid-action-btn {
  width: var(--calibra-grid-icon-action-size);
  min-width: var(--calibra-grid-icon-action-size);
  height: var(--calibra-grid-icon-action-size);
  min-height: var(--calibra-grid-icon-action-size);
  border-radius: var(--calibra-grid-icon-action-radius);
}

.integrator-table .integrator-grid-action-btn__icon,
.calibra-grid .integrator-grid-action-btn__icon {
  width: 0.84rem;
  height: 0.84rem;
}

.integrator-table tbody tr:nth-child(even) td,
.calibra-grid tbody tr:nth-child(even) td {
  background: color-mix(in srgb, #eef4fa 74%, #ffffff 26%);
}

.integrator-table tbody tr:nth-child(odd) td,
.calibra-grid tbody tr:nth-child(odd) td {
  background: #ffffff;
}

.integrator-table tbody tr.is-selected td,
.calibra-grid tbody tr.is-selected td {
  background: color-mix(in srgb, var(--theme-accent-soft) 56%, #dbeafe 44%) !important;
}

/* ── Koyu tema: zebra satırların dark karşılığı (2026-08-31) ──
   Yukarıdaki zebra kuralları YALNIZ açık tema değerleriyle yazılmıştı; koyu temada
   tek/çift satırlar #ffffff ve açık mavi kalıyor, üstündeki açık renk yazı okunmuyordu
   (Cari Eşleştir modalında görüldü: beyaz zemin + beyaz yazı). site.css'te bu iki kural
   için hiçbir dark override YOKTU — düzeltme kaynağa yazılır, ekran başına yamalanmaz. */
body.app-theme-dark .integrator-table tbody tr:nth-child(even) td,
body.app-theme-dark .calibra-grid tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.045);
}

body.app-theme-dark .integrator-table tbody tr:nth-child(odd) td,
body.app-theme-dark .calibra-grid tbody tr:nth-child(odd) td {
  background: transparent;
}

body.app-theme-dark .integrator-table tbody tr.is-selected td,
body.app-theme-dark .calibra-grid tbody tr.is-selected td {
  background: rgba(99, 102, 241, 0.22) !important;
}

/* Hover da yalniz acik tema degeriyle yazilmisti (color-mix ile ACIK bir mavi) —
   koyu temada satirin uzerine gelince zemin acilip beyaz yazi okunmaz oluyordu
   (kullanici bildirdi). Zebra kurallariyla ayni gerekce: dark override kaynakta. */
body.app-theme-dark .integrator-table tbody tr:hover td,
body.app-theme-dark .calibra-grid tbody tr:hover td {
  background: rgba(99, 102, 241, 0.16) !important;
  color: rgba(255, 255, 255, 0.92);
}

.integrator-table tbody tr:hover td,
.calibra-grid tbody tr:hover td {
  background: color-mix(in srgb, var(--theme-accent-soft) 62%, var(--integrator-card-bg) 38%) !important;
}

.integrator-card--table .integrator-table-wrap,
.integrator-card--table .calibra-grid-wrap,
.material-cards-native-table-wrap {
  overflow: auto;
  min-height: 0;
  max-height: clamp(18rem, 44svh, 36rem);
}

.integrator-card--table .integrator-table-wrap {
  scrollbar-gutter: stable both-edges;
}

.calibra-grid__actions-header,
.calibra-grid__actions-cell {
  width: 1%;
  min-width: 3.2rem;
  white-space: nowrap;
  text-align: left;
}

.calibra-grid__actions-cell .material-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.2rem;
  flex-wrap: nowrap;
}

.integrator-grid-action-btn[disabled] {
  opacity: 0.42;
  cursor: not-allowed;
  box-shadow: none;
}

.integrator-grid-action-btn--select {
  border-radius: 0.38rem;
  border-color: color-mix(in srgb, var(--app-border, #cbd5e1) 78%, #94a3b8 22%);
  background: #ffffff;
  color: color-mix(in srgb, var(--app-text-muted, #64748b) 82%, #334155 18%);
}

.integrator-grid-action-btn--select.is-active {
  background: color-mix(in srgb, var(--theme-accent, #2563eb) 10%, #dbeafe 90%);
  border-color: color-mix(in srgb, var(--theme-accent, #2563eb) 34%, #93c5fd 66%);
  color: color-mix(in srgb, var(--theme-accent, #2563eb) 76%, #1d4ed8 24%);
}

.calibra-grid-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0.5rem 0.55rem;
  border-top: 1px solid rgba(203, 213, 225, 0.72);
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.92), rgba(255, 255, 255, 0.98));
  flex: 0 0 auto;
  min-width: 0;
  overflow: hidden;
}

.calibra-grid-pager__summary {
  font-size: 0.74rem;
  color: #526274;
  white-space: nowrap;
}

.calibra-grid-pager__controls,
.calibra-grid-pager__nav,
.calibra-grid-pager__pages,
.calibra-grid-pager__size-form {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.calibra-grid-pager__controls {
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.calibra-grid-pager__size-label {
  font-size: 0.72rem;
  color: #607185;
  white-space: nowrap;
}

.calibra-grid-pager__size-select {
  min-width: 4.8rem;
  min-height: 1.85rem;
  height: 1.85rem;
  padding: 0 1.75rem 0 0.5rem;
  font-size: 0.75rem;
}

.calibra-grid-pager__page {
  min-width: 1.9rem;
  height: 1.85rem;
  padding: 0 0.5rem;
  border-radius: 0.48rem;
  border: 1px solid rgba(148, 163, 184, 0.42);
  background: rgba(255, 255, 255, 0.94);
  color: #27496d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
}

.calibra-grid-pager__page:hover,
.calibra-grid-pager__page:focus {
  color: #163f7a;
  border-color: rgba(96, 165, 250, 0.66);
  background: rgba(239, 246, 255, 0.96);
}

.calibra-grid-pager__page.is-active {
  color: #ffffff;
  border-color: color-mix(in srgb, var(--theme-accent, #2563eb) 80%, #1d4ed8 20%);
  background: color-mix(in srgb, var(--theme-accent, #2563eb) 88%, #1d4ed8 12%);
}

.calibra-grid-pager__page.is-disabled {
  opacity: 0.42;
  pointer-events: none;
}

@media (max-width: 767px) {
  .calibra-grid-pager {
    flex-direction: column;
    align-items: stretch;
  }

  .calibra-grid-pager__summary,
  .calibra-grid-pager__controls,
  .calibra-grid-pager__nav,
  .calibra-grid-pager__pages,
  .calibra-grid-pager__size-form {
    width: 100%;
  }

  .calibra-grid-pager__controls {
    margin-left: 0;
    justify-content: space-between;
  }

  .calibra-grid-pager__nav {
    justify-content: space-between;
  }
}

@media (max-width: 1200px) {
  .entity-layout-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .layout-span-3 {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  .screen-design-toolbar,
  .screen-design-toolbar__form,
  .screen-design-group-picker__controls {
    flex-direction: column;
    align-items: stretch;
  }

  .screen-design-toolbar__field,
  .screen-design-toolbar__summary,
  .screen-design-toolbar__actions {
    width: 100%;
  }

  .screen-design-toolbar__actions {
    margin-left: 0;
    justify-content: stretch;
  }

  .screen-design-toolbar__actions .btn,
  .screen-design-group-picker__controls .btn {
    width: 100%;
  }

  .entity-layout-tabs__button {
    min-width: 118px;
    padding: 0 12px;
  }

  .entity-layout-tabs__pane {
    min-height: 340px;
    max-height: 340px;
    padding: 10px;
  }

  .entity-layout-grid {
    grid-template-columns: 1fr;
  }

  .layout-span-2,
  .layout-span-3 {
    grid-column: span 1;
  }
}

/* Final authoritative workspace tab band styling shared by all pages. */
.workspace-tabs {
  --workspace-tab-width: 188px;
  position: sticky;
  top: var(--layout-header-height);
  z-index: 24;
  width: 100%;
  margin: 0;
  padding: 0;
  background: linear-gradient(180deg, rgba(248, 249, 250, 0.98), rgba(248, 249, 250, 0.82));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.workspace-tabs::after {
  left: 0;
  right: 0;
}

.workspace-tabs__scroller {
  padding: 0 0 8px;
}

@media (max-width: 991px) {
  .workspace-tabs {
    --workspace-tab-width: 164px;
    padding: 0;
  }

  .workspace-tabs::after {
    left: 0;
    right: 0;
  }
}

[data-workspace-shell],
.dashboard-shell__content {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.workspace-panel-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

.workspace-panel {
  display: none !important;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  width: 100%;
}

.workspace-panel.is-active {
  display: flex !important;
  height: 100%;
}

.workspace-panel--native {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.workspace-panel__frame {
  display: block;
  width: 100%;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  border: 0;
  background: transparent;
}

/* Hard fallback tab hide for Approval/Index temporary cache ghosting */
#invoiceSubTabs {
  display: none !important;
}

.workspace-frame-body {
  --layout-header-height: 0px;
  --layout-footer-height: 0px;
  --workspace-tabs-sticky-height: 0px;
  padding: 0;
  min-height: 100vh;
  min-height: 100svh;
}

.app-content-area--workspace-frame {
  min-height: 100vh;
  min-height: 100svh;
  padding: 0;
}

.workspace-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: relative;
  flex: 0 0 auto;
  z-index: 4;
  width: 100%;
  height: 46px;
  margin: 0;
  padding: 0 14px;
  background: var(--app-surface);
  border-bottom: 1px solid var(--app-border);
  border-radius: 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.workspace-action-bar[hidden] {
  display: none !important;
}

.workspace-action-bar__primary {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}

.workspace-action-bar__primary:empty::before {
  content: "";
  display: block;
  min-height: 1px;
}

.workspace-action-bar__secondary {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.workspace-action-bar__primary > .entity-form-toolbar,
.workspace-action-bar__primary > .integrator-form-actions,
.workspace-action-bar__primary > .integrator-settings-modern__action-bar {
  width: 100%;
  margin: 0;
  border-radius: 0;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  border-bottom: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Source toolbar off-screen when proxy is active — prevents flash before JS runs.
   Toolbars with [data-no-proxy] stay visible inline (AJAX pages manage their own buttons). */
html[data-workspace-proxy] .entity-form-toolbar:not(.workspace-action-bar__proxy):not([data-no-proxy]),
html[data-workspace-proxy] .integrator-form-actions:not(.workspace-action-bar__proxy):not([data-no-proxy]),
html[data-workspace-proxy] .integrator-settings-modern__action-bar:not(.workspace-action-bar__proxy):not([data-no-proxy]) {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  min-width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(100%) !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

.workspace-toolbar-source {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  min-width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(100%) !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

.workspace-action-bar__proxy.entity-form-toolbar {
  position: static;
  top: auto;
  z-index: auto;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.workspace-frame-body .workspace-action-bar {
  top: 0;
}

.workspace-frame-body .entity-form-toolbar,
.workspace-frame-body .entity-form-toolbar--floating {
  top: 0;
}

.collaboration-widget--navbar {
  position: relative;
  right: auto;
  bottom: auto;
  z-index: 1080;
}

.collaboration-widget--navbar .collaboration-launcher {
  /* Yuvarlak topbar-icon-btn görünümü */
  width: 34px;
  height: 34px;
  min-height: unset;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.50);
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.collaboration-widget--navbar .collaboration-launcher:hover,
.collaboration-widget--navbar .collaboration-launcher:focus {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.30);
  border-color: rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.14);
  outline: none;
}

.collaboration-widget--navbar .collaboration-launcher__icon {
  color: inherit;
  width: 17px;
  height: 17px;
}
.collaboration-widget--navbar .collaboration-launcher__label { display: none; }
.collaboration-widget--navbar .collaboration-launcher__badge {
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  font-size: 0.58rem;
  border: 2px solid #1e3a8a;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

.collaboration-widget--navbar .collaboration-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  bottom: auto;
}

.utility-rail {
  position: fixed;
  top: calc(var(--layout-header-height) + 10px);
  right: 0;
  bottom: calc(var(--layout-footer-height) + 10px);
  z-index: 1085;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  pointer-events: none;
  padding: 0;
  overflow: visible;
}

.utility-rail__top,
.utility-rail__bottom,
.utility-rail__dropdown,
.utility-rail .collaboration-widget {
  pointer-events: auto;
}

.utility-rail__bottom {
  display: flex;
  align-items: flex-end;
}

.utility-rail__dropdown {
  position: relative;
}

.utility-rail__button,
.utility-rail .collaboration-launcher {
  position: relative;
  width: 52px;
  min-width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid var(--app-border);
  border-right: 0;
  border-radius: 16px 0 0 16px;
  background: var(--app-surface);
  color: var(--app-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.utility-rail__button:hover,
.utility-rail__button:focus,
.utility-rail .collaboration-launcher:hover,
.utility-rail .collaboration-launcher:focus,
body.collaboration-panel-open .utility-rail .collaboration-launcher {
  color: #0f3f76;
  background: rgba(239, 246, 255, 0.98);
  border-color: rgba(96, 165, 250, 0.75);
}

.utility-rail__button.dropdown-toggle::after {
  display: none;
}

.utility-rail__button .profile-avatar-image {
  width: 30px;
  height: 30px;
  border-width: 1px;
}

.utility-rail__menu {
  margin: 0 10px 0 0;
}

.utility-rail .collaboration-widget {
  position: relative;
  right: auto;
  bottom: auto;
}

.utility-rail .collaboration-launcher {
  gap: 0;
}

.utility-rail .collaboration-launcher__label {
  display: none;
}

.utility-rail .collaboration-launcher__icon {
  width: 20px;
  height: 20px;
}

.utility-rail .collaboration-launcher__badge {
  position: absolute;
  top: 6px;
  right: 8px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font-size: 0.68rem;
}

.utility-rail .collaboration-panel {
  position: fixed;
  top: calc(var(--layout-header-height) + 10px);
  right: 52px;
  bottom: calc(var(--layout-footer-height) + 10px);
  width: min(380px, calc(100vw - 72px));
  max-width: calc(100vw - 72px);
  border-radius: 18px 0 0 18px;
  box-shadow: 0 22px 44px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
}

.utility-rail .collaboration-panel__body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

.utility-rail .collaboration-thread {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
}

.utility-rail .collaboration-message-list {
  min-height: 0;
}

@media (max-width: 767px) {
  .utility-rail {
    top: calc(var(--layout-header-height) + 8px);
    bottom: calc(var(--layout-footer-height) + 8px);
  }

  .utility-rail__button,
  .utility-rail .collaboration-launcher {
    width: 46px;
    min-width: 46px;
    height: 46px;
    border-radius: 14px 0 0 14px;
  }

  .utility-rail .collaboration-panel {
    top: calc(var(--layout-header-height) + 8px);
    right: 46px;
    bottom: calc(var(--layout-footer-height) + 8px);
    width: min(360px, calc(100vw - 58px));
    max-width: calc(100vw - 58px);
  }
}

/* .collaboration-widget--navbar (topbar icindeki varyant, ~9055-9110) BILEREK
   koyu temaya baglanmadi: o buton her zaman .main-nav'in sabit koyu gradient
   seridi (linear-gradient(90deg,#0f172a,#1e3a8a)) uzerinde durur — kardes
   sinif .topbar-icon-btn ile ayni sebeple (~line 563) tema-bagimsiz kalir. */
body.app-theme-dark .utility-rail__button,
body.app-theme-dark .utility-rail .collaboration-launcher {
  box-shadow: 0 12px 28px rgba(2, 6, 23, 0.5);
}

body.app-theme-dark .utility-rail__button:hover,
body.app-theme-dark .utility-rail__button:focus,
body.app-theme-dark .utility-rail .collaboration-launcher:hover,
body.app-theme-dark .utility-rail .collaboration-launcher:focus,
body.app-theme-dark.collaboration-panel-open .utility-rail .collaboration-launcher {
  color: var(--accent-soft-fg);
  background: var(--accent-soft-bg);
  border-color: rgba(129, 140, 248, 0.75);
}

/* ===================================================================
   CALIBRAHUB STANDARD GRID & FORM COMPLIANCE
   Talimatlar: PROJECT_INSTRUCTIONS.txt uyumluluğu
   =================================================================== */

/* --- 1. Sticky thead: grid scroll ederken başlıklar sabit kalır --- */
.integrator-card--table .integrator-table thead,
.integrator-card--table .calibra-grid thead {
  position: sticky;
  top: 0;
  z-index: 2;
}

.integrator-card--table .integrator-table thead th {
  background: var(--app-muted-surface, #f1f5f9);
  box-shadow: inset 0 -1px 0 var(--integrator-border, #e2e8f0);
}

/* --- 2. Aksiyon kolonu sola hizalı (seç/düzenle/sil ilk kolon) --- */
.integrator-table .calibra-grid-actions-first,
.calibra-grid .calibra-grid-actions-first {
  width: 1%;
  min-width: 2.5rem;
  white-space: nowrap;
  text-align: left;
  padding-left: var(--calibra-grid-cell-padding-x, 0.46rem);
}

.integrator-table thead .calibra-grid-actions-first {
  font-size: var(--calibra-grid-header-font-size, 0.67rem);
  letter-spacing: 0.05em;
  font-weight: 600;
}

.calibra-grid-actions-first .material-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.25rem;
  flex-wrap: nowrap;
}

/* Direct pencil edit button in grid rows */
.calibra-grid-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 6px;
  color: var(--bs-secondary-color, #6c757d);
  border: 1px solid transparent;
  border-radius: var(--bs-border-radius-sm, 4px);
  line-height: 1;
  transition: color .12s, background .12s, border-color .12s;
}
.calibra-grid-edit-btn:hover {
  color: var(--bs-primary, #0d6efd);
  background: color-mix(in srgb, var(--bs-primary, #0d6efd) 10%, transparent);
  border-color: color-mix(in srgb, var(--bs-primary, #0d6efd) 30%, transparent);
}

/* Ghost secondary button variant */
.btn-ghost-secondary {
  background: transparent;
  border-color: transparent;
  color: var(--bs-secondary-color, #6c757d);
}
.btn-ghost-secondary:hover {
  background: var(--bs-secondary-bg, #e9ecef);
  border-color: transparent;
  color: var(--bs-body-color, #212529);
}

/* Settings pane area overrides — form fills full width, fields stacked (label above input) */
.settings-pane-area .integrator-settings-modern__form-layout {
  grid-template-columns: 1fr;
}

.settings-pane-area .integrator-settings-modern__field-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.settings-pane-area .integrator-field:not(.integrator-field--switch) {
  grid-template-columns: 1fr;
  row-gap: 3px;
}

.settings-pane-area .integrator-field:not(.integrator-field--switch) .form-label {
  margin-bottom: 0;
}

.settings-pane-area .integrator-field:not(.integrator-field--switch) .form-control,
.settings-pane-area .integrator-field:not(.integrator-field--switch) .form-select,
.settings-pane-area .integrator-field:not(.integrator-field--switch) .text-danger {
  grid-column: 1;
}

/* span-2 still spans 2 of 3 columns in pane context */
.settings-pane-area .integrator-settings-modern__field-span-2 {
  grid-column: span 2;
}

/* span-full stretches across all columns */
.settings-pane-area .integrator-settings-modern__field-span-full {
  grid-column: 1 / -1;
}

/* Belge Isleme: 2-col toggle grid */
.settings-pane-area .integrator-settings-modern__field-grid--toggles {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* --- 3. Inline form validasyonu (alan bazında kırmızı border + mesaj) --- */
.field-validation-error {
  display: block;
  color: #dc2626;
  font-size: 0.74rem;
  font-weight: 500;
  margin-top: 3px;
  line-height: 1.25;
}

.input-validation-error {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15) !important;
}

.input-validation-error:focus {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.22) !important;
}

.integrator-field .field-validation-error {
  padding-left: 2px;
}

.integrator-field.has-error .integrator-field__label,
.integrator-field.has-error label {
  color: #dc2626;
}

.validation-summary-errors {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  color: #991b1b;
  font-size: 0.82rem;
}

.validation-summary-errors ul {
  margin: 4px 0 0;
  padding-left: 18px;
}

.validation-summary-valid {
  display: none;
}

/* --- 4. Mobil uyumluluk iyileştirmeleri --- */

/* Sidebar mobilde overlay olarak açılır, içeriği kapatmaz */
@media (max-width: 991px) {
  :root {
    --sidebar-open-width: 260px;
  }

  .layout-body.has-side-rail {
    padding-left: 0 !important;
  }

  .app-sidebar {
    position: fixed;
    top: var(--layout-header-height);
    bottom: 0;
    left: 0;
    z-index: 1050;
    width: var(--sidebar-open-width);
    transform: translateX(-100%);
    transition: transform var(--layout-motion-duration) var(--layout-motion-ease);
    box-shadow: none;
  }

  .app-sidebar.is-mobile-open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(15, 23, 42, 0.18);
  }

  .sidebar-mobile-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1049;
    background: rgba(15, 23, 42, 0.32);
  }

  .sidebar-mobile-backdrop.is-visible {
    display: block;
  }

  /* Form alanları tek kolona düşer */
  .integrator-form-columns,
  .integrator-form-section__row,
  .integrator-inline-form {
    flex-direction: column !important;
  }

  .integrator-form-columns > *,
  .integrator-form-section__row > * {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
  }

  /* Grid yatay scroll */
  .integrator-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .integrator-table {
    min-width: 640px;
  }

  /* Sticky alanlar mobilde içeriği kapatmaz */
  .workspace-action-bar {
    position: relative;
    top: auto;
  }

  .entity-form-toolbar,
  .entity-form-toolbar--floating {
    position: relative;
    top: auto;
  }

  /* Grid pager mobilde yığılır */
  .calibra-grid-pager {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.4rem;
  }
}

/* Küçük telefon ekranları */
@media (max-width: 575px) {
  html {
    font-size: 12.5px;
  }

  .app-topbar {
    min-height: 52px;
    height: 52px;
  }

  :root {
    --layout-header-height: 52px;
    --layout-footer-height: 38px;
  }

  .integrator-card {
    border-radius: 8px;
  }

  .integrator-table {
    min-width: 480px;
  }

  .integrator-form,
  .integrator-inline-form,
  .integrator-form-section,
  .panel {
    padding: 8px;
  }

  /* Grid internal scrolling daha kısa */
  .integrator-card--table .integrator-table-wrap,
  .integrator-card--table .calibra-grid-wrap,
  .material-cards-native-table-wrap {
    max-height: clamp(14rem, 38svh, 28rem);
  }

  .integrator-dashboard__grid {
    gap: 8px;
    padding: 8px;
  }

  /* Action butonları küçülür */
  .material-row-actions .btn {
    font-size: 0.72rem;
    padding: 2px 6px;
    min-height: 26px;
  }
}

/* Tablet yatay */
@media (min-width: 768px) and (max-width: 1199px) {
  .integrator-form-columns {
    flex-wrap: wrap;
  }

  .integrator-form-columns > * {
    flex: 1 1 calc(50% - 8px);
    min-width: 220px;
  }

  .entity-layout-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- 5. Yatay taşma önleme --- */
body,
html {
  overflow-x: hidden;
  max-width: 100vw;
}

.app-content-area,
.admin-content,
.dashboard-shell__content,
.integrator-dashboard__content {
  overflow-x: hidden;
  min-width: 0;
}

/* --- 6. Grid satır yüksekliği iyileştirmesi --- */
.integrator-table tbody td {
  line-height: 1.35;
}

/* Satır seçimi hover geçişi */
.integrator-table tbody tr,
.calibra-grid tbody tr {
  transition: background-color 0.12s ease;
}

/* --- 7. Performans: GPU hızlandırma scroll alanları --- */
.integrator-card--table .integrator-table-wrap {
  will-change: scroll-position;
}

/* --- 8. Form/Grid split-screen düzeni standardizasyonu --- */

/* Desktop: CRUD sayfaları viewport'a tam sığar, sayfa dışına scroll olmaz */
@media (min-width: 992px) {
  .integrator-dashboard--compact.integrator-dashboard--wide {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .integrator-dashboard--compact.integrator-dashboard--wide .integrator-dashboard__content {
    height: 100%;
    overflow: hidden;
    padding: 0 !important;
  }

  .integrator-dashboard--compact.integrator-dashboard--wide .integrator-dashboard__grid {
    height: 100%;
    overflow: hidden;
  }
}

/* Flex kolon zinciri: üstten alta her katman min-height: 0 ile geçer */
.integrator-dashboard__grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
}

/* Form kartı: auto yükseklikte, büyümez; uzunsa kendi içinde scroll */
.integrator-card--form {
  flex: 0 0 auto;
  overflow-y: auto;
}

/* Grid kartı: kalan alanı doldurur */
.integrator-card--table {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.integrator-card--table .integrator-collapsible-card__content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.integrator-card--table .integrator-data-stack {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.integrator-card--table .integrator-data-block {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.integrator-card--table .integrator-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  max-height: none;
}

/* --- 9. Print stilleri --- */
@media print {
  .app-topbar,
  .app-sidebar,
  .app-footer,
  .workspace-action-bar,
  .entity-form-toolbar,
  .utility-rail,
  .calibra-grid-pager,
  .integrator-card--form {
    display: none !important;
  }

  .layout-body.has-side-rail {
    padding-left: 0 !important;
  }

  .integrator-table-wrap {
    max-height: none !important;
    overflow: visible !important;
  }

  .integrator-table {
    min-width: 0 !important;
  }
}

/* --- Sidebar footer — daralt butonu --- */
.side-nav-footer {
  flex-shrink: 0;
  padding: 6px 6px 8px;
  border-top: 1px solid rgba(99,102,241,.08);
  margin-top: auto;
}
.side-nav-version {
  display: block;
  text-align: center;
  font-size: 0.62rem;
  color: rgba(148,163,184,.4);
  letter-spacing: .03em;
  padding: 0 0 4px;
  user-select: none;
}
.side-collapse-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(99,102,241,.12);
  background: rgba(255,255,255,.02);
  color: rgba(148,163,184,.55);
  font-size: .77rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  user-select: none;
}
.side-collapse-btn:hover {
  background: rgba(99,102,241,.08);
  border-color: rgba(99,102,241,.22);
  color: rgba(148,163,184,.85);
}
.side-collapse-btn__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  transition: transform .25s ease;
}
/* Collapsed modda ikon sağa döner, label gizlenir */
.app-side-collapsed .side-collapse-btn__icon {
  transform: rotate(180deg);
}
.app-side-collapsed .side-nav-footer {
  padding: 6px 4px 8px;
}
.app-side-collapsed .side-collapse-btn {
  justify-content: center;
  padding: 7px;
}

/* --- 9a-0. Scrollbar — dark tema --- */
body.app-theme-dark {
  scrollbar-color: rgba(255,255,255,.18) transparent; /* Firefox */
}
body.app-theme-dark ::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
body.app-theme-dark ::-webkit-scrollbar-track {
  background: transparent;
}
body.app-theme-dark ::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.15);
  border-radius: 99px;
}
body.app-theme-dark ::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.28);
}
body.app-theme-dark ::-webkit-scrollbar-corner {
  background: transparent;
}

/* --- 9a. Bootstrap bileşenleri — dark tema genel overridelar --- */

/* Butonlar */
body.app-theme-dark .btn-primary {
  background-color: #4f46e5;
  border-color:     #4338ca;
  color:            #fff;
}
body.app-theme-dark .btn-primary:hover,
body.app-theme-dark .btn-primary:focus {
  background-color: #4338ca;
  border-color:     #3730a3;
  color:            #fff;
}
body.app-theme-dark .btn-secondary {
  background-color: rgba(255,255,255,.08);
  border-color:     rgba(255,255,255,.12);
  color:            #cbd5e1;
}
body.app-theme-dark .btn-secondary:hover,
body.app-theme-dark .btn-secondary:focus {
  background-color: rgba(255,255,255,.13);
  border-color:     rgba(255,255,255,.18);
  color:            #e2e8f0;
}
body.app-theme-dark .btn-outline-secondary {
  border-color: rgba(255,255,255,.18);
  color:        #94a3b8;
}
body.app-theme-dark .btn-outline-secondary:hover {
  background-color: rgba(255,255,255,.07);
  border-color:     rgba(255,255,255,.25);
  color:            #cbd5e1;
}
body.app-theme-dark .btn-danger {
  background-color: #b91c1c;
  border-color:     #991b1b;
  color:            #fff;
}
body.app-theme-dark .btn-danger:hover {
  background-color: #991b1b;
  border-color:     #7f1d1d;
}
body.app-theme-dark .btn-success {
  background-color: #047857;
  border-color:     #065f46;
  color:            #fff;
}
body.app-theme-dark .btn-success:hover {
  background-color: #065f46;
  border-color:     #064e3b;
}
body.app-theme-dark .btn:disabled,
body.app-theme-dark .btn.disabled {
  opacity: .38;
}

/* Form kontrolleri (input, select, textarea) */
body.app-theme-dark .form-control,
body.app-theme-dark .form-select {
  background-color: rgba(255,255,255,.05);
  border-color:     rgba(255,255,255,.11);
  color:            #cbd5e1;
}
body.app-theme-dark .form-control::placeholder {
  color:   #475569;
  opacity: 1;
}
body.app-theme-dark .form-control:focus,
body.app-theme-dark .form-select:focus {
  background-color: rgba(255,255,255,.07);
  border-color:     rgba(99,102,241,.55);
  color:            #e2e8f0;
  box-shadow:       0 0 0 3px rgba(99,102,241,.18);
}
body.app-theme-dark .form-select option {
  background: #0d1323;
  color:      #cbd5e1;
}
/* 2026-05-22 Global fix — native <select>'lar (Bootstrap form-select disinda elle yazilmis
   formlar) dark mode'da option text'i okunamiyordu (default beyaz arkaplan + acik renk text).
   Tum select'ler icin geneli kapsayan kural. Ozel sayfa override edebilir (specificity dusuk). */
body.app-theme-dark select option {
  background: #1e293b;
  color:      #e2e8f0;
}

/* Date input — takvim popup'ı da koyu */
body.app-theme-dark input[type="date"].form-control {
  color-scheme: dark;
}

/* --- 9b. GridPager — dark tema --- */
body.app-theme-dark .calibra-grid-pager {
  background:  linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.015));
  border-top:  1px solid rgba(255,255,255,.07);
}
body.app-theme-dark .calibra-grid-pager__summary {
  color: #64748b;
}
body.app-theme-dark .calibra-grid-pager__size-label {
  color: #475569;
}
body.app-theme-dark .calibra-grid-pager__size-select {
  background-color: rgba(255,255,255,.05);
  border-color:     rgba(255,255,255,.10);
  color:            #cbd5e1;
}
body.app-theme-dark .calibra-grid-pager__size-select option {
  background: #0d1323;
  color: #cbd5e1;
}
body.app-theme-dark .calibra-grid-pager__page {
  background:   rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.09);
  color:        #94a3b8;
}
body.app-theme-dark .calibra-grid-pager__page:hover,
body.app-theme-dark .calibra-grid-pager__page:focus {
  background:   rgba(129,140,248,.12);
  border-color: rgba(129,140,248,.35);
  color:        #c7d2fe;
}
body.app-theme-dark .calibra-grid-pager__page.is-active {
  background:   rgba(129,140,248,.85);
  border-color: transparent;
  color:        #ffffff;
}

/* --- 10. Yeni sayfa iskeleti --- */
/* Workspace tab şeridi gizlenir; navigasyon sol menüden yapılır.
   top:0 eski sticky-offset kuralını (top:66px) sıfırlar —
   yoksa tab şeridi action-bar'ın altına kayar. */
.workspace-tabs {
  display: none !important;
  top: 0;
}

/* Tab yüksekliği sıfır; action-bar zaten navbar altına kayar */
:root {
  --workspace-tabs-sticky-height: 0px;
}

/* Tüm dashboard içerikler: tam genişlik, max-width kısıtı yok, yatay dolgu yok */
.integrator-dashboard__content {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Toast: sag alt kose, header/action-bar ile cakisma olmaz */
.toast-root {
  top: auto;
  bottom: 24px;
}

/* ─── Split-screen iç bileşen zinciri ───
   app-content-area kalan alanı flex ile aldıktan sonra
   alt bileşenler de height: 100% ile zinciri devam ettirir. */
@media (min-width: 992px) {
  .integrator-dashboard--compact.integrator-dashboard--wide {
    height: 100%;
    min-height: 0;
  }

  /* Her iki grup eşit yükseklik (50/50 split) */
  .integrator-dashboard--compact.integrator-dashboard--wide .integrator-dashboard__group {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  /* Form kartı: grubunu doldurur, flex sütun, hiç scroll yok */
  .integrator-dashboard--compact.integrator-dashboard--wide .integrator-card--form {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }

  /* Collapsible content: flex sütun, scroll yok */
  .integrator-dashboard--compact.integrator-dashboard--wide .integrator-card--form .integrator-collapsible-card__content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }

  /* Entity-form-toolbar: sabit yükseklik, büzülmez */
  .integrator-dashboard--compact.integrator-dashboard--wide .integrator-card--form .entity-form-toolbar {
    flex: 0 0 auto;
  }

  /* Sekme container: kalan alanı doldurur */
  .integrator-dashboard--compact.integrator-dashboard--wide .integrator-card--form .entity-layout-tabs {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }

  /* Sekme nav: sabit yükseklik */
  .integrator-dashboard--compact.integrator-dashboard--wide .integrator-card--form .entity-layout-tabs__nav {
    flex: 0 0 auto;
  }

  /* Sekme pane container: kalan alanı doldurur */
  .integrator-dashboard--compact.integrator-dashboard--wide .integrator-card--form .entity-layout-tabs__panes {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    border-radius: 0;
  }

  /* Aktif pane: min/max-height sıfırla, scroll yok */
  .integrator-dashboard--compact.integrator-dashboard--wide .integrator-card--form .entity-layout-tabs__pane {
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden;
  }

  .integrator-dashboard--compact.integrator-dashboard--wide .integrator-card--form .entity-layout-tabs__pane.is-active {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }

  /* Düz form (sekme olmadan): scroll yok */
  .integrator-dashboard--compact.integrator-dashboard--wide .integrator-card--form .integrator-form {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }
}

/* --- 11. Workspace frame (iframe) layout fix ---
   Sol menüden açılan sayfalar bir iframe içinde ?workspace=1 ile yüklenir.
   Bu durumda _Layout.cshtml sadece <main class="app-content-area--workspace-frame"> render eder;
   app-shell / app-main / header / footer mevcut değildir.
   Sayfa-bazlı CSS'in .page-XXX .app-shell/.app-main kuralları etkisizdir.
   Aşağıdaki kurallar iframe içinde flex/height zincirini yeniden kurar. */
html:has(body.workspace-frame-body) { height: 100dvh; overflow: hidden; }
.workspace-frame-body { height: 100dvh; overflow: hidden; }

.app-content-area--workspace-frame {
  height: 100dvh !important;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  padding: 0 !important;
}

/* İframe içinde .integrator-dashboard wrapper'ı varsa onu da doldur */
.app-content-area--workspace-frame .integrator-dashboard {
  height: 100%;
  min-height: 0;
}

/* Sayfa-bazlı 100dvh - header - footer - ... hesabı iframe'de anlamsız;
   width: 100% !important zaten Section 11'de var, sadece height'ı ezip yüzde tabanlıya çekiyoruz */
.app-content-area--workspace-frame .integrator-dashboard__content {
  height: 100% !important;
}

/* --- 12. Yatay tam genişlik — grid ve form kartları yatayda tam alanı doldurur --- */
.integrator-dashboard {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  min-width: 0;
}

.integrator-dashboard__content {
  flex: 1 1 auto;
  min-height: 0;
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  box-sizing: border-box;
}

.integrator-dashboard__grid {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.integrator-dashboard__group {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.integrator-card {
  width: 100%;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════
   SOL MENU — LIGHT THEME OVERRIDE
   body.app-theme-light aktifken koyu glassmorphism'i sifirla,
   acik glassmorphism uygula
   ═══════════════════════════════════════════════════════════ */
body.app-theme-light .side-nav,
body.app-theme-light .admin-nav {
  background: rgba(255, 255, 255, 0.82) !important;
  border: 1px solid rgba(99, 102, 241, 0.12) !important;
  color: #1e293b !important;
}
body.app-theme-light .side-nav-header {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.35) 70%, rgba(255, 255, 255, 0) 100%) !important;
  box-shadow: none !important;
}
body.app-theme-light .side-toggle,
body.app-theme-light .side-item,
body.app-theme-light .side-subitem,
body.app-theme-light .admin-nav-item,
body.app-theme-light .settings-link,
body.app-theme-light .side-group > summary,
body.app-theme-light .admin-group > summary,
body.app-theme-light .side-subgroup__summary {
  color: #334155 !important;
}
body.app-theme-light .side-toggle {
  border-color: rgba(99, 102, 241, 0.15) !important;
  background: rgba(99, 102, 241, 0.05) !important;
}
body.app-theme-light .side-toggle:hover,
body.app-theme-light .side-item:hover,
body.app-theme-light .side-subitem:hover,
body.app-theme-light .admin-nav-item:hover,
body.app-theme-light .settings-link:hover,
body.app-theme-light .favorite-toggle:hover {
  color: #0f172a !important;
  background: rgba(99, 102, 241, 0.08) !important;
}
body.app-theme-light .side-item.active,
body.app-theme-light .side-subitem.active,
body.app-theme-light .admin-nav-item.active,
body.app-theme-light .settings-link.active {
  color: #4338ca !important;
  border-color: rgba(99, 102, 241, 0.3) !important;
  background: linear-gradient(90deg, rgba(99, 102, 241, 0.12), rgba(99, 102, 241, 0.04)) !important;
  box-shadow: inset 3px 0 0 #6366f1, 0 0 12px rgba(99, 102, 241, 0.08) !important;
}
body.app-theme-light .side-group,
body.app-theme-light .admin-group {
  border-color: rgba(99, 102, 241, 0.1) !important;
  background: rgba(248, 250, 252, 0.6) !important;
}
body.app-theme-light .side-group[open] > summary,
body.app-theme-light .admin-group[open] > summary {
  background: rgba(99, 102, 241, 0.06) !important;
}
body.app-theme-light .menu-icon {
  color: #4f46e5 !important;
  background: rgba(99, 102, 241, 0.08) !important;
  border-color: rgba(99, 102, 241, 0.18) !important;
}
body.app-theme-light .menu-search-input {
  border-color: rgba(99, 102, 241, 0.15) !important;
  background: rgba(255, 255, 255, 0.6) !important;
  color: #334155 !important;
}
body.app-theme-light .menu-search-input::placeholder {
  color: #94a3b8 !important;
}
body.app-theme-light .menu-search-input:focus {
  border-color: rgba(99, 102, 241, 0.4) !important;
  background: rgba(255, 255, 255, 0.85) !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important;
}
body.app-theme-light .favorite-toggle {
  border-color: rgba(99, 102, 241, 0.12) !important;
  background: rgba(255, 255, 255, 0.5) !important;
  color: #64748b !important;
}
body.app-theme-light .favorites-panel {
  border-color: rgba(34, 211, 238, 0.25) !important;
  background: rgba(34, 211, 238, 0.06) !important;
}
body.app-theme-light .favorites-title {
  color: #0891b2 !important;
}
body.app-theme-light .side-group > summary::after,
body.app-theme-light .admin-group > summary::after {
  border-right-color: rgba(99, 102, 241, 0.4) !important;
  border-bottom-color: rgba(99, 102, 241, 0.4) !important;
}
body.app-theme-light .side-nav::-webkit-scrollbar-thumb,
body.app-theme-light .admin-nav::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.2) !important;
}

/* ═══════════════════════════════════════════════════════════
   SOL MENU — TEXT SELECTION ENGELLE
   Metin secilebilir oldugunda tarayici menusu (Google'da ara,
   Copilot'a sor vb.) cikmasini engeller. Arama kutusu haric.
   ═══════════════════════════════════════════════════════════ */
.side-nav,
.admin-nav,
.side-nav-header,
.side-item,
.side-subitem,
.side-toggle,
.admin-nav-item,
.settings-link,
.side-group > summary,
.admin-group > summary,
.menu-text,
.menu-icon,
.favorites-title,
.favorite-toggle {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

/* Arama kutusunda metin secimine izin ver */
.menu-search-input,
.menu-search-input * {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}

/* ══════════════════════════════════════════════════════════════
   PROJE STANDARDI — Gecersiz alan/zorunlu eksik uyari titreşimi
   Tüm formlarda ayni hiz/easing/border/glow kullanilir.
   Yeni kod: <input class="cb-invalid-shake"> veya JS ile class ekle.
   ══════════════════════════════════════════════════════════════ */
@keyframes cbInvalidShake {
    10%, 90% { transform: translateX(-2px); }
    20%, 80% { transform: translateX(3px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}
.cb-invalid-shake {
    animation: cbInvalidShake 0.45s cubic-bezier(.36,.07,.19,.97) both;
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239,68,68,.20) !important;
}

/* ══════════════════════════════════════════════════════════════
   PROJE STANDARDI — DbInfo tooltip tablosu (.cb-dbinfo-*)
   Inline style yerine bu sınıfları kullan. Tema-aware (light + dark).
   Razor: ViewData["DbInfo"] = @Html.Partial("_DbInfoTable", dict).ToString();
   veya doğrudan <table class="cb-dbinfo-table">… markup üret.
   ══════════════════════════════════════════════════════════════ */
.cb-dbinfo-table { width:100%; border-collapse:collapse; font-size:0.78rem; }
.cb-dbinfo-table tr { border-bottom: 1px solid #e2e8f0; }
.cb-dbinfo-table tr:last-child { border-bottom: 0; }
.cb-dbinfo-name { padding:6px 8px; font-weight:600; color:#2563eb; white-space:nowrap; vertical-align:top; }
.cb-dbinfo-desc { padding:6px 8px; color:#1e293b; }
body.app-theme-dark .cb-dbinfo-table tr { border-bottom-color: rgba(255,255,255,0.10); }
body.app-theme-dark .cb-dbinfo-name { color: #93c5fd; }
body.app-theme-dark .cb-dbinfo-desc { color: rgba(255,255,255,0.78); }

/* ══════════════════════════════════════════════════════════════
   Sayfa Yardımı — modal
   Tetikleme: Shell "İşlemler → Yardım" (aktif sekmeye göre) + F1 tuşu.
   İçerik: /Help/Content?key=… (App_Data/Help/tr/<key>.html)
   ══════════════════════════════════════════════════════════════ */
.calibra-help-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(15,23,42,0.45); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.calibra-help-box {
  background: var(--app-surface, #fff); color: var(--bs-body-color, #1e293b);
  border: 1px solid var(--app-border, #e2e8f0); border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.28);
  max-width: 720px; width: 100%; max-height: 86vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.calibra-help-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px; border-bottom: 1px solid var(--app-border, #e2e8f0); flex-shrink: 0;
}
.calibra-help-head .h-ico {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
}
.calibra-help-head .h-title { flex: 1; font-weight: 700; font-size: 0.92rem; }
.calibra-help-head .h-close {
  background: none; border: none; font-size: 1.4rem; line-height: 1;
  color: #94a3b8; cursor: pointer; padding: 0 4px;
}
/* Araç şeridi — arama + Calibo'ya sor */
.calibra-help-tools {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px; border-bottom: 1px solid var(--app-border, #e2e8f0); flex-shrink: 0;
}
.calibra-help-search {
  flex: 1; display: flex; align-items: center; gap: 7px; min-width: 0;
  height: 34px; padding: 0 10px; border-radius: 9px;
  border: 1px solid var(--app-border, #dbe2ea); background: var(--app-surface-2, #f1f5f9);
}
.calibra-help-search-ic { color: #94a3b8; display: inline-flex; flex-shrink: 0; }
.calibra-help-search-input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-size: 0.82rem; color: var(--bs-body-color, #1e293b);
}
.calibra-help-search-input::-webkit-search-cancel-button { cursor: pointer; }
.calibra-help-search-count { flex-shrink: 0; font-size: 0.72rem; color: #94a3b8; white-space: nowrap; }
.calibra-help-calibo {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 12px; border-radius: 9px; border: none; cursor: pointer;
  background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff;
  font-size: 0.78rem; font-weight: 600; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(99,102,241,0.35); transition: filter .15s ease;
}
.calibra-help-calibo:hover { filter: brightness(1.07); }
mark.calibra-help-hl { background: #fde68a; color: #7c2d12; border-radius: 3px; padding: 0 1px; }
body.app-theme-dark .calibra-help-search { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.14); }
body.app-theme-dark mark.calibra-help-hl { background: #b45309; color: #fff; }
.calibra-help-body {
  padding: 18px 22px 22px; overflow-y: auto;
  font-size: 0.83rem; line-height: 1.62; color: var(--bs-body-color, #334155);
}
.calibra-help-doc h3 { font-size: 0.9rem; font-weight: 700; margin: 18px 0 8px; color: var(--bs-body-color, #0f172a); }
.calibra-help-doc h3:first-child { margin-top: 0; }
.calibra-help-doc p { margin: 0 0 10px; }
.calibra-help-doc .help-lead { font-size: 0.88rem; color: var(--bs-secondary-color, #475569); margin-bottom: 16px; }
.calibra-help-doc ul { margin: 0 0 12px; padding-left: 20px; }
.calibra-help-doc li { margin: 4px 0; }
.calibra-help-doc kbd {
  display: inline-block; min-width: 20px; text-align: center; padding: 2px 7px;
  border-radius: 6px; border: 1px solid var(--app-border, #cbd5e1); border-bottom-width: 2px;
  background: var(--app-surface-2, #f1f5f9);
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.75rem; font-weight: 600;
}
.calibra-help-doc .help-keys { width: 100%; border-collapse: collapse; }
.calibra-help-doc .help-keys td { padding: 5px 8px; vertical-align: middle; border-bottom: 1px solid var(--app-border, #eef2f7); }
.calibra-help-doc .help-keys td:first-child { white-space: nowrap; width: 120px; }
.calibra-help-doc .help-legend { list-style: none; padding-left: 0; }
.calibra-help-doc .help-legend li { display: flex; align-items: flex-start; gap: 8px; }
.calibra-help-doc .help-dot { width: 11px; height: 11px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
.calibra-help-doc .help-dot--indigo { background: #6366f1; }
.calibra-help-doc .help-dot--amber { background: #f59e0b; }
.calibra-help-doc .help-dot--emerald { background: #10b981; }
.calibra-help-doc .help-note { font-size: 0.78rem; color: var(--bs-secondary-color, #64748b); }
body.app-theme-dark .calibra-help-doc kbd { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); }
body.app-theme-dark .calibra-help-doc .help-keys td { border-bottom-color: rgba(255,255,255,0.08); }
body.app-theme-dark .calibra-help-head .h-close { color: #64748b; }

/* ══════════════════════════════════════════════════════════════
   PROJE STANDARDI — React mount-error fallback (.cb-mount-error)
   Mount başarısız olduğunda gösterilecek hata bloğu için.
   Kullanım:
     el.innerHTML = '<div class="cb-mount-error"><div>' + msg + '</div>' +
                    '<button onclick="location.reload()">Sayfayı Yenile</button></div>';
   ══════════════════════════════════════════════════════════════ */
.cb-mount-error {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    height:100%; min-height:400px; gap:12px;
    background:#f8fafc; color:#dc2626; font-size:14px;
    padding:24px; text-align:center;
}
.cb-mount-error button {
    padding:8px 20px; border-radius:8px; border:1px solid #4338ca;
    background:#4f46e5; color:#fff; cursor:pointer; font-size:13px;
}
.cb-mount-error button:hover { background:#4f46e5; }
body.app-theme-dark .cb-mount-error {
    background:#0c0f1a; color:#f87171;
}
body.app-theme-dark .cb-mount-error button {
    background:#6366f1; border-color:#4f46e5;
}

/* ════════════════════════════════════════════════════════════════════
   UX Edit Shell — Tam ekran sol tabsheet düzeni
   (Operation/Personnel/Routing/Machine/Shift/ActivityReason vb. edit
   ekranları için ortak iskelet — dark + light tema uyumlu)
   - Üst sticky action bar (geri + başlık + Kaydet/İptal/Sil)
   - Sol sabit nav (220-260px)
   - Sağ scroll içerik
   - DynamicWidgetRenderer "stacked" modda gömülür; outer nav tek
     seviyedir ("Genel Bilgiler" + "Ek Alanlar")
   ════════════════════════════════════════════════════════════════════ */
.ux-edit-shell {
  display: flex; flex-direction: column;
  height: 100%; min-height: 0; overflow: hidden;
  background: #f1f5f9;
  color: #0f172a;
}
body.app-theme-dark .ux-edit-shell {
  background: #080c17; color: #e2e8f0;
}

.ux-edit-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 18px; flex-shrink: 0;
  background: rgba(255,255,255,0.96);
  border-bottom: 1px solid #e2e8f0;
  backdrop-filter: blur(12px);
}
body.app-theme-dark .ux-edit-bar {
  background: rgba(13,19,35,0.92); border-bottom-color: rgba(255,255,255,0.06);
}
.ux-edit-bar__left {
  display: flex; align-items: center; gap: 14px;
  min-width: 0; flex: 1 1 auto;
}
.ux-edit-bar__back {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 8px;
  border: 1px solid #e2e8f0; background: #fff;
  color: #64748b; font-size: 12.5px; text-decoration: none;
  transition: background .12s, color .12s, border-color .12s;
  flex-shrink: 0;
}
.ux-edit-bar__back:hover { background: #f1f5f9; color: #0f172a; }
body.app-theme-dark .ux-edit-bar__back {
  background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1);
  color: #94a3b8;
}
body.app-theme-dark .ux-edit-bar__back:hover {
  background: rgba(255,255,255,0.08); color: #e2e8f0;
}
.ux-edit-bar__title {
  font-size: 15px; font-weight: 700; margin: 0;
  color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.app-theme-dark .ux-edit-bar__title { color: #f1f5f9; }
.ux-edit-bar__status {
  font-size: 11px; font-weight: 600; padding: 3px 9px;
  border-radius: 999px; background: rgba(16,185,129,0.14); color: #059669;
  border: 1px solid rgba(16,185,129,0.3);
}
.ux-edit-bar__status--off {
  background: rgba(148,163,184,0.18); color: #64748b;
  border-color: rgba(148,163,184,0.3);
}
body.app-theme-dark .ux-edit-bar__status { color: #34d399; }
body.app-theme-dark .ux-edit-bar__status--off { color: #94a3b8; }

.ux-edit-bar__right {
  display: flex; gap: 8px; align-items: center; flex-shrink: 0;
}
.ux-edit-bar__btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 7px 16px; border-radius: 8px;
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  border: 1px solid #e2e8f0; background: #fff; color: #475569;
  text-decoration: none;
  transition: background .12s, color .12s, border-color .12s, filter .12s;
}
.ux-edit-bar__btn:hover:not(:disabled) {
  background: #f1f5f9; color: #0f172a; border-color: #cbd5e1;
}
.ux-edit-bar__btn:disabled { opacity: .55; cursor: not-allowed; }
.ux-edit-bar__btn--primary {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  border-color: #4338ca; color: #fff;
}
.ux-edit-bar__btn--primary:hover:not(:disabled) {
  filter: brightness(1.08); background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  color: #fff; border-color: #4338ca;
}
.ux-edit-bar__btn--danger {
  background: #fff; border-color: #fecaca; color: #dc2626;
}
.ux-edit-bar__btn--danger:hover:not(:disabled) {
  background: rgba(239,68,68,0.08); color: #b91c1c; border-color: #fca5a5;
}
body.app-theme-dark .ux-edit-bar__btn {
  background: rgba(255,255,255,0.04); color: #cbd5e1;
  border-color: rgba(255,255,255,0.1);
}
body.app-theme-dark .ux-edit-bar__btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.08); color: #f1f5f9;
}
body.app-theme-dark .ux-edit-bar__btn--primary,
body.app-theme-dark .ux-edit-bar__btn--primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  color: #fff; border-color: #4338ca;
}
body.app-theme-dark .ux-edit-bar__btn--danger {
  background: rgba(239,68,68,0.12); color: #fca5a5;
  border-color: rgba(239,68,68,0.32);
}
body.app-theme-dark .ux-edit-bar__btn--danger:hover:not(:disabled) {
  background: rgba(239,68,68,0.2); color: #fecaca;
}

.ux-edit-body {
  flex: 1 1 auto; min-height: 0; display: flex; overflow: hidden;
}
.ux-edit-nav {
  width: 240px; flex-shrink: 0;
  background: #f8fafc;
  border-right: 1px solid #e2e8f0;
  padding: 14px 8px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
}
body.app-theme-dark .ux-edit-nav {
  background: rgba(15,15,26,0.45);
  border-right-color: rgba(255,255,255,0.06);
}
/* ── Sayısal alanlarda native artırma/azaltma (spinner) oklarını kaldır —
   PROGRAM GENELİ (2026-08-03 kullanıcı isteği). Tek global kural; ekran-bazlı
   dağınık .sq-no-spinner / .pte-input / .wf-input tekrarlarının yerini alır
   (onlar zararsız kalır). Chromium/WebKit inner+outer spin-button + Firefox
   appearance:textfield. Sadece görünümü kaldırır; ok tuşu/scroll ile değer
   değiştirme (native davranış) ETKİLENMEZ. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.ux-edit-nav__group {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  color: #94a3b8;
  padding: 10px 14px 4px;
}
.ux-edit-nav__tab {
  display: flex; align-items: center; gap: 9px; width: 100%;
  text-align: left; padding: 9px 13px; margin-bottom: 2px;
  background: transparent; border: none; border-radius: 8px;
  color: #475569; font-size: 13px; font-weight: 500; cursor: pointer;
  border-left: 3px solid transparent;
  transition: background .12s, color .12s, border-color .12s;
}
.ux-edit-nav__tab:hover { background: #eef2ff; color: #1e293b; }
.ux-edit-nav__tab.is-active {
  background: #eef2ff; color: #4338ca; font-weight: 600;
  border-left-color: #6366f1;
}
.ux-edit-nav__tab:disabled { opacity: .5; cursor: not-allowed; }
.ux-edit-nav__tab:disabled:hover { background: transparent; color: #475569; }
.ux-edit-nav__icon { width: 15px; height: 15px; flex-shrink: 0; opacity: .8; }
.ux-edit-nav__tab.is-active .ux-edit-nav__icon { opacity: 1; }
/* Malzeme Kartı sol-menü paritesi (2026-07-11): ikon yerine ring→dolu+glow dot indikatör.
   ::before ile eklenir → 6 paylaşan ekran (Makine/Operasyon/Vardiya/Personel/Sebep/Proje)
   markup değişmeden dönüşür. */
.ux-edit-nav__icon { display: none; }
.ux-edit-nav__tab::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid #cbd5e1; background: transparent; transition: all .18s;
}
.ux-edit-nav__tab:hover::before { border-color: #94a3b8; }
.ux-edit-nav__tab.is-active::before {
  background: #6366f1; border-color: #6366f1; box-shadow: 0 0 7px rgba(99,102,241,.5);
}
body.app-theme-dark .ux-edit-nav__tab::before { border-color: rgba(255,255,255,.24); }
body.app-theme-dark .ux-edit-nav__tab:hover::before { border-color: rgba(255,255,255,.48); }
body.app-theme-dark .ux-edit-nav__tab.is-active::before {
  background: #6366f1; border-color: #6366f1; box-shadow: 0 0 7px rgba(99,102,241,.55);
}
.ux-edit-nav__count {
  margin-left: auto; padding: 1px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 700;
  background: rgba(99,102,241,0.12); color: #4338ca;
  border: 1px solid rgba(99,102,241,0.25);
}
body.app-theme-dark .ux-edit-nav__tab { color: #94a3b8; }
body.app-theme-dark .ux-edit-nav__tab:hover {
  background: rgba(255,255,255,0.04); color: #e2e8f0;
}
body.app-theme-dark .ux-edit-nav__tab.is-active {
  background: rgba(99,102,241,0.14); color: #a5b4fc;
  border-left-color: #6366f1;
}
body.app-theme-dark .ux-edit-nav__count {
  background: rgba(99,102,241,0.18); color: #a5b4fc;
  border-color: rgba(99,102,241,0.32);
}

.ux-edit-content {
  flex: 1 1 auto; min-width: 0; min-height: 0;
  padding: 22px 28px 28px; overflow-y: auto;
  background: #ffffff;
}
body.app-theme-dark .ux-edit-content {
  background: #0d1323;
}
.ux-edit-pane { display: none; }
.ux-edit-pane.is-active { display: block; }

/* ── Kaydirmali sayfalar (2026-09-06 kullanici istegi) ────────────────────
   Sekme yerine TEK uzun sayfa: butun paneller alt alta durur, kullanici
   asagi kaydirdikca sirayla gorur; soldan bir baslige tiklayinca sagda o
   panele kayar.
   OPT-IN: `.ux-edit-content` uzerine `ux-scroll-panes` sinifi eklenir.
   Sinifi olmayan 18 ekran BIREBIR eskisi gibi sekmeli calisir.
   Panel gorunurlugunu `is-active` degil bu kural belirledigi icin ekranlarin
   KENDI sekme JS'ine dokunmak gerekmez — `is-active` yalniz vurgu kalir. */
.ux-scroll-panes .ux-edit-pane { display: block; }
.ux-scroll-panes .ux-edit-pane + .ux-edit-pane {
  margin-top: 26px; padding-top: 22px;
  border-top: 1px solid var(--app-border, #e2e8f0);
}
/* Basliga kaydirinca panel kabin en ustune yapismasin — nefes payi. */
.ux-scroll-panes .ux-edit-pane { scroll-margin-top: 12px; }

/* Ayni davranisin BELGE ekrani (sqe-) ailesindeki karsiligi. Yukaridaki kural
   `.ux-edit-pane` sinifina bagli oldugu icin satis/alis belge ekranlarina hic
   ulasmiyordu. Panel gorunurlugunu yine `is-active` DEGIL bu kural belirler —
   ekranin kendi sekme JS'ine dokunulmaz, `is-active` yalniz vurgu icin kalir. */
.sqe-tab-content.ux-scroll-panes .sqe-tab-pane { display: block; scroll-margin-top: 12px; }
.sqe-tab-content.ux-scroll-panes .sqe-tab-pane + .sqe-tab-pane {
  margin-top: 26px; padding-top: 22px;
  border-top: 1px solid var(--app-border, #e2e8f0);
}
/* Kaydirmali sayfalarda panel basligi — calibra-scroll-panes.js uretir, metni
   sekme adidir. Yapisik (sticky) durur: uzun bir panelin ortasindayken bile
   hangi sekmede oldugun yazili kalir. Yalniz kaydirma modunda cizilir; sekmeli
   ekranlarda bu eleman hic olusmaz. */
/* ══ SAYFA KIPI — `ux-pages` (2026-09-08 kullanici istegi) ══════════════════
   Kaydirmali sayfalarin ustune eklenen OPT-IN kip: her bolum kapsayicinin TAM
   yuksekligini kaplar ve kaydirma bir sonraki bolume "otur"ur (scroll-snap);
   bolumun icerigi tasiyorsa KENDI icinde kayar, sonraki bolume gecmez.

   Neden CSS, neden JS degil: kaydirma yakalayip elle animasyon suren kod
   dokunmatikte, yatay kaydirmada ve klavye ile gezinmede bozulur; tarayicinin
   kendi snap motoru bunlarin hepsini dogru yapar ve erisilebilirligi bozmaz.

   `proximity` bilincli: `mandatory` olsaydi bir bolum ekrandan uzunken
   kullanici tam ortada birakamaz, tarayici surekli geri cekerdi.

   Kip `ux-pages` sinifi OLMADAN hicbir sey degistirmez — kaydirmali 21 ekranin
   geri kalani birebir eskisi gibi kalir. */
.ux-pages {
  /* `mandatory`: kaydirma her zaman bir sayfaya OTURUR. `proximity` iken kullanici
     sayfayi yarida birakabiliyordu; o konumda yapisik baslik da sayfayla birlikte
     yukari kayip kayboluyordu ("kaydirinca baslik kayboluyor"). Sayfalar
     kapsayicidan uzun OLAMADIGI icin (max-height + kendi ic kaydirmasi)
     mandatory'nin klasik tuzagi — icerige ulasamama — burada yok. */
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}
/* Bolum = bir sayfa. Aileler ayri sinif setleri tasidigi icin hepsi burada
   sayilir (bkz. CLAUDE.md "Ekran AILELERI"): yeni aile eklemek bir satirdir. */
.ux-pages > .ux-edit-pane,
.ux-pages > .sqe-tab-pane,
.ux-pages > .woe-pane-section,
.ux-pages > .re-pane-section,
.ux-pages > .inv-tab-pane,
.ux-pages > .ae-panel,
.ux-pages > .ste-panel,
.ux-pages > .ap-pane,
.ux-pages > .pte-pane,
.ux-pages > .mce-card,
.ux-pages > .ca-card,
.ux-pages > [data-dyn-group-id],
/* Ek alan (widget) gruplari React tarafindan SARMALAYICI icine cizilir; gruplar
   dogrudan cocuk olmadigi icin sayfa yapilamaz. Sarmalayicinin KENDISI tek bir
   "Ek Alanlar" sayfasidir, gruplar onun icinde kayar — ic ice iki snap alani
   kurmak (sayfa icinde sayfa) kaydirmayi kullanici icin ongorulemez yapardi. */
.ux-pages > #caDynamicWidgetsCard,
.ux-pages > #mceDynamicWidgetsCard {
  min-height: calc(100% - 12px);
  max-height: calc(100% - 12px);
  overflow-y: auto;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  /* Sayfalar arasi ayirici cizgiye gerek yok — her biri zaten ayri ekran. */
  margin-top: 0; padding-top: 0; border-top: 0;
}
/* Kalem gridi gibi FLEX yerlesimli paneller sayfa kipinde de flex kalmali. */
.ux-pages > .sqe-tab-pane--lines,
.ux-pages > .inv-tab-pane--lines { display: flex; }

/* Sayfa = KART. Stok kartindaki gorunum standart alindi: her bolum cerceveli
   bir kart olarak durur, boylece "nerede bitti, nerede basladi" bakisla anlasilir.
   `.mce-card` / `.ca-card` DISARIDA: onlarin kendi cercevesi zaten var, ikinci
   kez cerceve cizmek ic ice kutu gorunumu uretirdi. */
.ux-pages > .ux-edit-pane,
.ux-pages > .sqe-tab-pane,
.ux-pages > .woe-pane-section,
.ux-pages > .re-pane-section,
.ux-pages > .inv-tab-pane,
.ux-pages > .ae-panel,
.ux-pages > .ste-panel,
.ux-pages > .ap-pane,
.ux-pages > .pte-pane,
.ux-pages > #caDynamicWidgetsCard,
.ux-pages > #mceDynamicWidgetsCard {
  background: var(--app-surface, #fff);
  border: 1px solid var(--app-border, #e2e8f0);
  border-radius: 14px;
  padding: 0 18px 16px;      /* ust bosluk BASLIGA ait — bkz. asagisi */
  margin-bottom: 12px;
}


/* Sinif ya JS'in urettigi <div>'e ya da panelin KENDI basligina (h2) verilir —
   iki durumda da ayni yapisik serit. Secici .ux-scroll-panes ile baslar cunku
   ekranlarin kendi `.x-pane h2` kurallari tek sinifliktir; iki sinifla ozgulluk
   yarisini bu kural kazanir (yoksa font/margin ekranin kuralinda kalirdi). */
.ux-scroll-panes .ux-pane-title {
  position: sticky; top: 0; z-index: 3;
  margin: 0 0 12px; padding: 6px 0 8px;
  font-size: 13px; font-weight: 700; letter-spacing: .01em;
  color: var(--app-text, #0f172a);
  background: var(--app-surface, #fff);
  border-bottom: 1px solid var(--app-border, #e2e8f0);
}
body.app-theme-dark .ux-scroll-panes .ux-pane-title { color: #e2e8f0; }

/* Bolum basligi: ORTADA ve YAPISIK. Sayfa kendi icinde kaydirilirken baslik
   yerinde kalir; ancak sayfa tamamen degistiginde kaybolur (sticky, panelin
   KENDI kaydirma alanina bagli).
   Kartin ust dolgusu 0 birakildi ve baslik onu ustlendi: aksi halde icerik,
   yapisik basligin USTUNDEKI dolgu bosluguna kayip gorunur kalirdi. */
.ux-pages .ux-pane-title {
  position: sticky; top: 0; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  margin: 0 -18px 14px; padding: 12px 18px;
  background: var(--app-surface, #fff);
  border-bottom: 1px solid var(--app-border, #e2e8f0);
  border-radius: 14px 14px 0 0;
}
/* Kendi cercevesi olan kartlarda yatay tasma olmasin (dolgulari farkli). */
.ux-pages > .mce-card,
.ux-pages > .ca-card { padding-top: 0; }
.ux-pages > .mce-card > .ux-pane-title,
.ux-pages > .ca-card > .ux-pane-title { margin-left: 0; margin-right: 0; }

/* Baslik metni bir SARMALAYICININ (arac seridi) icindeyse ortak sinif seride
   verilir — araclar da baslikla birlikte yapisik kalir. O durumda ortalanmasi
   gereken sey metnin KENDISI olur. */
.ux-pages .ux-pane-title .mce-card-title,
.ux-pages .ux-pane-title .ca-card__title {
  flex: 1; text-align: center; margin: 0 !important;
  font-size: 13px; font-weight: 700; letter-spacing: .01em;
  text-transform: none; color: inherit;
}
/* Baslik SUSLERI sayfa kipinde kapatilir. `.mce-card-title::after` bir ESNEK
   dolgudur (flex:1) — kalan tum genisligi yediginden ortalama hicbir ise
   yaramiyor, baslik solda kaliyordu. `::before` renkli seritler de servis
   is emrindeki sade baslikta yok. */
.ux-pages .ux-pane-title::before,
.ux-pages .ux-pane-title::after,
.ux-pages .ux-pane-title .mce-card-title::before,
.ux-pages .ux-pane-title .mce-card-title::after,
.ux-pages .ux-pane-title .ca-card__title::before { content: none; }

/* Yazi bicimi servis is emriyle AYNI. */
.ux-pages > .mce-card > .ux-pane-title,
.ux-pages > .ca-card > .ux-pane-title {
  font-size: 13px; font-weight: 700; letter-spacing: .01em;
  text-transform: none; color: var(--app-text, #0f172a);
}
body.app-theme-dark .ux-pages > .mce-card > .ux-pane-title,
body.app-theme-dark .ux-pages > .ca-card > .ux-pane-title { color: #e2e8f0; }

/* ══ SAYFA KIPI — KAYDIRMA ERGONOMISI ════════════════════════════════════════
   2026-09-09: sayfa kipinin kaydirma HISSI kabaydi — gecis ani oturuyor, serbest
   kaydirmaya izin vermiyor, panelin kendi kaydirma cubugu yok, kullanici kacinci
   sayfada oldugunu goremiyor ve bir sayfanin dibinde jest devam edip sonraki
   sayfaya siciriyordu.

   Once `ux-pages--premium` opt-in sinifiyla YALNIZ Servis Is Emri'nde pilot
   edildi; kullanici denedikten sonra TUM sayfa kipi ekranlarina alindi ve opt-in
   sinifi kaldirildi. Kapsam artik `.ux-pages` tasiyan 23 ekran.

   KAPSAM NOTU: kurallar TABAN kuraldaki sayfa ailesi listesiyle AYNI kumeye
   uygulanir (bkz. yukaridaki ".ux-pages >" secici yigini). Liste yalniz
   `.ux-edit-pane` kalsaydi belge/ambar/is emri ekranlari sessizce kapsam disinda
   kalirdi — CLAUDE.md "Ekran AILELERI" tuzaginin ta kendisi.

   KIRMIZI CIZGI: kaydirma JS ile ELE GECIRILMEZ (gerekce yukarida, sayfa kipi
   basligindaki yorumda). Buradaki her sey tarayicinin kendi snap motorunun
   uzerine CSS ile eklenir; JS yalniz gozlem (IntersectionObserver) yapar. */

/* ── 1) Snap ergonomisi ───────────────────────────────────────────────────────
   `mandatory` KALIR: yapisik baslik ona baglidir (sayfa yarida birakilinca
   baslik da yukari kayip kayboluyordu — `proximity` bu yuzden terk edilmisti).
   Sikayetin gercek kaynagi `scroll-snap-stop: always` idi: tek jestte birden
   fazla sayfa atlamayi YASAKLIYOR, hizli savurmada tarayici kullaniciyi bir
   sonraki sayfada zorla durduruyordu. `normal` ile yavas tekerlek yine tek tek
   oturur, hizli savurma birkac sayfa gecer. */
.ux-pages > :is(.ux-edit-pane, .sqe-tab-pane, .woe-pane-section, .re-pane-section, .inv-tab-pane, .ae-panel, .am-panel, .az-panel, .ste-panel, .ap-pane, .pte-pane, .mce-card, .ca-card, [data-dyn-group-id]),
.ux-pages > #caDynamicWidgetsCard,
.ux-pages > #mceDynamicWidgetsCard { scroll-snap-stop: normal; }

/* ── 2) Kaydirma zincirlemesi ─────────────────────────────────────────────────
   Sayfanin dibine gelince ayni jest devam edip sonraki sayfaya siciriyordu;
   kullanici okurken icerik altindan kayiyordu. `contain` ile jest sayfa
   dibinde TUKENIR — devam etmek icin yeniden baslatmak gerekir. Kapsayicidaki
   kural ayrica iframe (workspace sekmesi) sinirina zincirlemeyi de keser. */
.ux-pages { overscroll-behavior: contain; }
.ux-pages > :is(.ux-edit-pane, .sqe-tab-pane, .woe-pane-section, .re-pane-section, .inv-tab-pane, .ae-panel, .am-panel, .az-panel, .ste-panel, .ap-pane, .pte-pane, .mce-card, .ca-card, [data-dyn-group-id]),
.ux-pages > #caDynamicWidgetsCard,
.ux-pages > #mceDynamicWidgetsCard { overscroll-behavior-y: contain; }

/* ── 3) Kaydirma cubugu + gutter ──────────────────────────────────────────────
   `scrollbar-gutter: stable` ASIL kazanctir, estetik ikincil: sayfa basligi
   ortalanmis (bkz. `.ux-pages .ux-pane-title`), cubuk kimi sayfada var kimi
   sayfada yokken baslik sayfa degistikce YATAYDA zipliyordu. */
.ux-pages > :is(.ux-edit-pane, .sqe-tab-pane, .woe-pane-section, .re-pane-section, .inv-tab-pane, .ae-panel, .am-panel, .az-panel, .ste-panel, .ap-pane, .pte-pane, .mce-card, .ca-card, [data-dyn-group-id]),
.ux-pages > #caDynamicWidgetsCard,
.ux-pages > #mceDynamicWidgetsCard {
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 116, 139, .28) transparent;
}
.ux-pages > :is(.ux-edit-pane, .sqe-tab-pane, .woe-pane-section, .re-pane-section, .inv-tab-pane, .ae-panel, .am-panel, .az-panel, .ste-panel, .ap-pane, .pte-pane, .mce-card, .ca-card, [data-dyn-group-id]):hover,
.ux-pages > #caDynamicWidgetsCard:hover,
.ux-pages > #mceDynamicWidgetsCard:hover {
  scrollbar-color: rgba(100, 116, 139, .55) transparent;
}
.ux-pages > :is(.ux-edit-pane, .sqe-tab-pane, .woe-pane-section, .re-pane-section, .inv-tab-pane, .ae-panel, .am-panel, .az-panel, .ste-panel, .ap-pane, .pte-pane, .mce-card, .ca-card, [data-dyn-group-id])::-webkit-scrollbar,
.ux-pages > #caDynamicWidgetsCard::-webkit-scrollbar,
.ux-pages > #mceDynamicWidgetsCard::-webkit-scrollbar { width: 8px; }
.ux-pages > :is(.ux-edit-pane, .sqe-tab-pane, .woe-pane-section, .re-pane-section, .inv-tab-pane, .ae-panel, .am-panel, .az-panel, .ste-panel, .ap-pane, .pte-pane, .mce-card, .ca-card, [data-dyn-group-id])::-webkit-scrollbar-track,
.ux-pages > #caDynamicWidgetsCard::-webkit-scrollbar-track,
.ux-pages > #mceDynamicWidgetsCard::-webkit-scrollbar-track { background: transparent; }
.ux-pages > :is(.ux-edit-pane, .sqe-tab-pane, .woe-pane-section, .re-pane-section, .inv-tab-pane, .ae-panel, .am-panel, .az-panel, .ste-panel, .ap-pane, .pte-pane, .mce-card, .ca-card, [data-dyn-group-id])::-webkit-scrollbar-thumb,
.ux-pages > #caDynamicWidgetsCard::-webkit-scrollbar-thumb,
.ux-pages > #mceDynamicWidgetsCard::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, .28);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
  transition: background-color .18s ease;
}
.ux-pages > :is(.ux-edit-pane, .sqe-tab-pane, .woe-pane-section, .re-pane-section, .inv-tab-pane, .ae-panel, .am-panel, .az-panel, .ste-panel, .ap-pane, .pte-pane, .mce-card, .ca-card, [data-dyn-group-id]):hover::-webkit-scrollbar-thumb,
.ux-pages > #caDynamicWidgetsCard:hover::-webkit-scrollbar-thumb,
.ux-pages > #mceDynamicWidgetsCard:hover::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, .55);
  background-clip: content-box;
}
body.app-theme-dark .ux-pages > :is(.ux-edit-pane, .sqe-tab-pane, .woe-pane-section, .re-pane-section, .inv-tab-pane, .ae-panel, .am-panel, .az-panel, .ste-panel, .ap-pane, .pte-pane, .mce-card, .ca-card, [data-dyn-group-id]),
.ux-pages > #caDynamicWidgetsCard,
.ux-pages > #mceDynamicWidgetsCard {
  scrollbar-color: rgba(226, 232, 240, .20) transparent;
}
body.app-theme-dark .ux-pages > :is(.ux-edit-pane, .sqe-tab-pane, .woe-pane-section, .re-pane-section, .inv-tab-pane, .ae-panel, .am-panel, .az-panel, .ste-panel, .ap-pane, .pte-pane, .mce-card, .ca-card, [data-dyn-group-id]):hover,
.ux-pages > #caDynamicWidgetsCard:hover,
.ux-pages > #mceDynamicWidgetsCard:hover {
  scrollbar-color: rgba(226, 232, 240, .42) transparent;
}
body.app-theme-dark .ux-pages > :is(.ux-edit-pane, .sqe-tab-pane, .woe-pane-section, .re-pane-section, .inv-tab-pane, .ae-panel, .am-panel, .az-panel, .ste-panel, .ap-pane, .pte-pane, .mce-card, .ca-card, [data-dyn-group-id])::-webkit-scrollbar-thumb,
.ux-pages > #caDynamicWidgetsCard::-webkit-scrollbar-thumb,
.ux-pages > #mceDynamicWidgetsCard::-webkit-scrollbar-thumb {
  background: rgba(226, 232, 240, .20);
  background-clip: content-box;
}
body.app-theme-dark .ux-pages > :is(.ux-edit-pane, .sqe-tab-pane, .woe-pane-section, .re-pane-section, .inv-tab-pane, .ae-panel, .am-panel, .az-panel, .ste-panel, .ap-pane, .pte-pane, .mce-card, .ca-card, [data-dyn-group-id]):hover::-webkit-scrollbar-thumb,
.ux-pages > #caDynamicWidgetsCard:hover::-webkit-scrollbar-thumb,
.ux-pages > #mceDynamicWidgetsCard:hover::-webkit-scrollbar-thumb {
  background: rgba(226, 232, 240, .42);
  background-clip: content-box;
}

/* ── 4) "Asagida devami var" ipucu — saf CSS, scroll dinleyicisi YOK ──────────
   `local` katman icerikle BIRLIKTE kayar; sona gelindiginde `scroll` katmandaki
   golgeyi orter. Boylece golge yalnizca gercekten devami varken gorunur ve her
   karede is yapan bir dinleyiciye gerek kalmaz.
   Ust kenara golge KONMADI: orayi zaten yapisik baslik seridi kendi alt
   cizgisiyle ayiriyor, ikinci bir golge kirli gorunurdu.

   `.mce-card` / `.ca-card` DISARIDA: onlarin kendi YARI SAYDAM cam zemini ve
   `backdrop-filter`i var; buradaki katmanli `background` onlari ezip cam
   gorunumu yok ederdi (taban kuraldaki "kart gorunumu" listesi de ayni ikisini
   disarida birakiyor). */
.ux-pages > :is(.ux-edit-pane, .sqe-tab-pane, .woe-pane-section, .re-pane-section, .inv-tab-pane, .ae-panel, .am-panel, .az-panel, .ste-panel, .ap-pane, .pte-pane, [data-dyn-group-id]),
.ux-pages > #caDynamicWidgetsCard,
.ux-pages > #mceDynamicWidgetsCard {
  background:
    linear-gradient(to top, var(--app-surface, #fff) 40%, rgba(255, 255, 255, 0))
      bottom / 100% 26px no-repeat local,
    radial-gradient(farthest-side at 50% 100%, rgba(15, 23, 42, .16), rgba(15, 23, 42, 0))
      bottom / 100% 12px no-repeat scroll,
    var(--app-surface, #fff);
}
body.app-theme-dark .ux-pages > :is(.ux-edit-pane, .sqe-tab-pane, .woe-pane-section, .re-pane-section, .inv-tab-pane, .ae-panel, .am-panel, .az-panel, .ste-panel, .ap-pane, .pte-pane, [data-dyn-group-id]),
.ux-pages > #caDynamicWidgetsCard,
.ux-pages > #mceDynamicWidgetsCard {
  background:
    linear-gradient(to top, var(--app-surface, #0d1323) 40%, rgba(13, 19, 35, 0))
      bottom / 100% 26px no-repeat local,
    radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0))
      bottom / 100% 12px no-repeat scroll,
    var(--app-surface, #0d1323);
}

/* ── 5) Sayfa gecis hissi — YALNIZ opacity ────────────────────────────────────
   KAPSAM DAR: bu kural `is-current` sinifina baglidir ve o sinifi
   calibra-scroll-panes.js basar. JS'in TANIMADIGI aileler buraya ALINMAZ, yoksa
   sinif hic gelmez ve sayfa KALICI olarak %62 solgun kalir. Iki ekran tam olarak
   boyle: Malzeme Karti (`.mce-content .mce-card`) ve Cari Karti
   (`.ca-content .ca-card`) sayfa kipini kullanir ama `ux-scroll-panes`
   TASIMAZ — JS oralarda hic calismaz. Ayni gerekceyle widget host'lari da disarida.
   (CLAUDE.md "Ekran AILELERI" tuzaginin tersi: CSS'in kapsayip JS'in kapsamadigi
   aile de sessiz bir kirilmadir.)

   `transform` BILINCLI OLARAK KULLANILMADI: transform bir "containing block"
   uretir ve panel icindeki `position: fixed` acilir menuleri (durum alt-menusu,
   rehber/otomatik tamamlama katmani) sayfanin icine hapsederdi — yanlis yerde
   cizilirlerdi. `opacity` yalniz yigin baglami uretir, fixed kacisini engellemez.
   `.is-current` sinifini calibra-scroll-panes.js'teki IntersectionObserver basar. */
.ux-pages > :is(.ux-edit-pane, .sqe-tab-pane, .woe-pane-section, .re-pane-section, .inv-tab-pane, .ae-panel, .am-panel, .az-panel, .ste-panel, .ap-pane, .pte-pane) {
  opacity: .62;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  transition: opacity .22s ease, box-shadow .22s ease;
}
/* Bölümün İÇİNDE açık bir pencere varsa bölüm solgunlaşmaz: opacity çocuklara miras kalır ve pencere
   (fixed olsa da) yarı saydam "hayalet" görünür, alttaki sayfa içinden okunurdu (2026-10-03, Parametreler → CRM düzen penceresi). */
.ux-pages > :is(.ux-edit-pane, .sqe-tab-pane, .woe-pane-section, .re-pane-section, .inv-tab-pane, .ae-panel, .am-panel, .az-panel, .ste-panel, .ap-pane, .pte-pane):has([class*="modal-backdrop"]:not([hidden])),
.ux-pages > :is(.ux-edit-pane, .sqe-tab-pane, .woe-pane-section, .re-pane-section, .inv-tab-pane, .ae-panel, .am-panel, .az-panel, .ste-panel, .ap-pane, .pte-pane).is-current {
  opacity: 1;
  box-shadow: 0 6px 20px -8px rgba(15, 23, 42, .18), 0 1px 2px rgba(15, 23, 42, .06);
}
body.app-theme-dark .ux-pages > :is(.ux-edit-pane, .sqe-tab-pane, .woe-pane-section, .re-pane-section, .inv-tab-pane, .ae-panel, .am-panel, .az-panel, .ste-panel, .ap-pane, .pte-pane).is-current {
  box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .55), 0 1px 2px rgba(0, 0, 0, .35);
}
.ux-pages > :is(.ux-edit-pane, .sqe-tab-pane, .woe-pane-section, .re-pane-section, .inv-tab-pane, .ae-panel, .am-panel, .az-panel, .ste-panel, .ap-pane, .pte-pane) > .ux-pane-title {
  transition: box-shadow .22s ease;
}
.ux-pages > :is(.ux-edit-pane, .sqe-tab-pane, .woe-pane-section, .re-pane-section, .inv-tab-pane, .ae-panel, .am-panel, .az-panel, .ste-panel, .ap-pane, .pte-pane).is-current > .ux-pane-title {
  box-shadow: 0 1px 0 var(--app-border, #e2e8f0);
}

/* ── 6) Sayfa gostergesi (nokta seridi) ───────────────────────────────────────
   Serit, KAYAN kapsayicinin DISINDA durur (`.ux-edit-body` gibi ebeveyne
   konumlanir): icine konsaydi icerikle birlikte kayardi.
   Sol nav SEKME sayar, bu serit SAYFA sayar — ikisi ayni sayida olmak zorunda
   degildir, bu yuzden mukerrer degildir.
   Noktalar gercek <button>'dir (klavye + ekran okuyucu); JS uretir. */
.ux-pages-rail-host { position: relative; }

/* Serit SADE kalir: kutu/zemin ve yazili etiket denendi, kullanici geri alinmasini
   istedi (2026-09-09) — "onceki gibi olsun, yalniz noktalar daha belirgin".
   Bu yuzden burada YALNIZ nokta var; sayfa adi fare ipucusunda (title) durur ve
   yerlesimde hic yer kaplamaz.

   Belirginlik uc yerden gelir: (1) nokta 13px ve kenari 2px — eski 8px/1.5px
   kenar zeminle neredeyse ayni tonda kaliyor ve hic gorulmuyordu; (2) kontrast
   temaya sabitlenmis slate tonu, `--app-border` DEGIL (kenarlik rengi ayrimlari
   icin secilmis, bir kontrolu one cikarmak icin degil); (3) secili nokta dolu +
   halkali, boylece "kacinci sayfadayim" uzaktan okunur.

   Tiklama alani GORSEL noktadan buyuktur (22px buton): 13px'lik bir hedefe fare
   ile isabet ettirmek zordur, dokunmatikte imkansiz. */
.ux-pages-rail {
  /* --ux-rail-offset: kaydirma cubugu genisligi + kap/icerik sag farki; JS OLCER
     (calibra-scroll-panes.js placeRail). Yoksa 0 → eski davranis (fail-open). Seq 2206. */
  position: absolute; right: calc(6px + var(--ux-rail-offset, 0px)); top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 2px;
  z-index: 5;
}
.ux-pages-rail__dot {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0;
  border: 0; background: transparent; cursor: pointer;
  border-radius: 50%;
  transition: background-color .18s ease;
}
.ux-pages-rail__pip {
  /* `border-box` ACIKCA yazilir: bu eleman global sifirlamanin disinda kaliyor ve
     content-box ile 13+2+2 = 17px cizilirdi (olculdu). Kenarlik olcuye dahil olsun
     ki yazan deger ekranda gorulen deger olsun. */
  box-sizing: border-box;
  width: 13px; height: 13px; border-radius: 50%;
  background: transparent;
  border: 2px solid rgba(100, 116, 139, .55);
  transition: background-color .18s ease, border-color .18s ease,
              box-shadow .18s ease, transform .18s ease;
}
body.app-theme-dark .ux-pages-rail__pip { border-color: rgba(226, 232, 240, .45); }

.ux-pages-rail__dot:hover { background: rgba(99, 102, 241, .10); }
.ux-pages-rail__dot:hover .ux-pages-rail__pip {
  border-color: var(--theme-accent, #6366f1);
  transform: scale(1.2);
}

/* Secili: dolu + halka. Halka `box-shadow` ile cizilir — olcuyu buyutmedigi icin
   noktalar arasi aralik sabit kalir, sayfa degistikce serit ziplamaz. */
.ux-pages-rail__dot[aria-current="true"] .ux-pages-rail__pip {
  background: var(--theme-accent, #6366f1);
  border-color: var(--theme-accent, #6366f1);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .22);
}
.ux-pages-rail__dot:focus-visible {
  outline: 2px solid var(--theme-accent, #6366f1);
  outline-offset: 1px;
}
.ux-pages-rail__dot[hidden] { display: none; }

/* ── 7) Hareket azaltma ───────────────────────────────────────────────────────
   Animasyon ve yumusak kaydirma kapanir; snap ve GORUNURLUK aynen kalir —
   bunlar dekoratif degil islevseldir (solgun sayfa okunamaz olmamali). */
@media (prefers-reduced-motion: reduce) {
  .ux-pages { scroll-behavior: auto; }
  .ux-pages > :is(.ux-edit-pane, .sqe-tab-pane, .woe-pane-section, .re-pane-section, .inv-tab-pane, .ae-panel, .am-panel, .az-panel, .ste-panel, .ap-pane, .pte-pane, .mce-card, .ca-card, [data-dyn-group-id]),
  .ux-pages > #caDynamicWidgetsCard,
  .ux-pages > #mceDynamicWidgetsCard,
  .ux-pages > :is(.ux-edit-pane, .sqe-tab-pane, .woe-pane-section, .re-pane-section, .inv-tab-pane, .ae-panel, .am-panel, .az-panel, .ste-panel, .ap-pane, .pte-pane, .mce-card, .ca-card, [data-dyn-group-id]) > .ux-pane-title,
  .ux-pages > #caDynamicWidgetsCard > .ux-pane-title,
  .ux-pages > #mceDynamicWidgetsCard > .ux-pane-title,
  .ux-pages-rail__dot,
  .ux-pages-rail__pip { transition: none; }
  .ux-pages > :is(.ux-edit-pane, .sqe-tab-pane, .woe-pane-section, .re-pane-section, .inv-tab-pane, .ae-panel, .am-panel, .az-panel, .ste-panel, .ap-pane, .pte-pane, .mce-card, .ca-card, [data-dyn-group-id]),
  .ux-pages > #caDynamicWidgetsCard,
  .ux-pages > #mceDynamicWidgetsCard { opacity: 1; }
}

.ux-edit-pane > h2 {
  margin: 0 0 4px; font-size: 15px; font-weight: 700; color: #0f172a;
}
body.app-theme-dark .ux-edit-pane > h2 { color: #f1f5f9; }
.ux-edit-pane .ux-edit-hint {
  font-size: 12px; color: #64748b; margin-bottom: 16px;
}
body.app-theme-dark .ux-edit-pane .ux-edit-hint { color: #94a3b8; }

/* ══ KOMPAKT FORM OLCULERI — TEK KAYNAK (2026-09-06) ═══════════════════════════
   Bu ucu daha once merkezi tanimi YOKTU: her kural kendi fallback'ini tasiyordu
   ve degerler surukleniyordu (ux-field kurallari 150/200 varsayarken belge
   ekranindaki tarih kurali 110px'e sabitlenmisti; yorumlar "150px standardi"
   diyordu). Olcuyu degistirmek isteyen buraya dokunur, tek yere.
   Kapsam: `ux-compact` ailesi (servis is emri + satis/alis belge ekranlari).
   calibra-datepicker.css'teki GLOBAL tarih genisligi (110px) bilincli olarak
   ayri birakildi — o, kompakt olmayan onlarca ekrani etkiler. */
html body {
  --ux-compact-label-w: 150px;   /* etiket sutunu */
  --ux-compact-date-w: 150px;    /* tarih alanlari */
  --ux-compact-code-w: 200px;    /* belge/kayit numarasi */
  --ux-compact-pick-w: 260px;    /* secim alanlari: rehber (cari/varlik) + acilir liste */
}

/* Form alanları — tam genişlik (max 560px input) */
.ux-edit-pane .ux-field { display: flex; flex-direction: column; gap: 3px; margin-bottom: 6px; max-width: 560px; }
.ux-edit-pane .ux-field--wide { max-width: 760px; }
.ux-edit-pane .ux-field--full { max-width: none; }

/* ── Kompakt form modu (2026-09-06 kullanici karari) ─────────────────────
   Her alan KENDI satirinda, satir araliklari sik. Sekme basina zaten az
   alan giriliyor; yan yana dizmek okumayi kolaylastirmiyor, goz sicratiyor.
   Opt-in: kapsayiciya `ux-compact` sinifi eklenir — sinifi olmayan ekranlar
   BIREBIR eskisi gibi kalir (14 ux-field ekrani tek tek gecirilebilsin diye).
   Alan-ailesi notu: bu kurallar `ux-field` ailesini kapsar; belge ekranlari
   (sqe- / mce- oneki) AYRI bir ailedir ve buradan etkilenmez. */
/* Etiket ALANIN SOLUNDA, ayni satirda. Ustte duran etiket alan basina ~16px
   dikey yer yiyordu; yana alinca o yer tamamen kazanilir.
   Etiket sabit genislikte: degisken genislik olsaydi her satirin girisi farkli
   yerden baslar, goz asagi inerken zikzak cizerdi. */
.ux-compact .ux-field {
  display: flex; flex-direction: row; align-items: center;
  gap: 10px; margin-bottom: 4px;
}
.ux-compact .ux-field > label {
  flex: 0 0 var(--ux-compact-label-w, 150px);
  max-width: var(--ux-compact-label-w, 150px);
  font-size: 11px; margin: 0; text-align: left;
  /* Uzun etiket kirpilmaz, alta sarar — kirpmak alanin ne oldugunu gizlerdi. */
  overflow-wrap: anywhere;
}
/* Etiketten SONRAKI her sey (input, select, sarmalayici) kalan yeri doldurur.
   max-width degiskenden gelir: Alan Yonetimi'nde alana genislik verilmisse
   duzen motoru --ux-ctl-w yazar ve KONTROL o genislikte kalir. Degisken yoksa
   alan satiri doldurur. Genislik KONTROLE uygulanir, satirin tamamina DEGIL —
   satira uygulansaydi 150px'lik etiket payi dusulup girise cok az yer kalirdi. */
.ux-compact .ux-field > label ~ * { flex: 1 1 auto; min-width: 0; max-width: var(--ux-ctl-w, none); }

/* Tarih alanlari STANDART genislikte. Global flatpickr zenginlestiricisi
   (calibra-datepicker.js, altInput: true) asil input[type=date] alanini GIZLER
   ve yanina `calibra-date-input` sinifli GORUNUR bir metin input'u koyar —
   bu yuzden secici tip degil SINIF uzerinden kurulur; input[type=date]'i
   hedeflemek gorunmeyen elemani bicimlendirmek olurdu. */
.ux-compact .ux-field > .calibra-date-input,
.ux-compact .so-daterow > .calibra-date-input,
.ux-compact .ux-field > input[type="time"] {
  flex: 0 0 auto; width: var(--ux-compact-date-w, 150px);
}

/* Belge numarasi da STANDART genislikte (tarih ile ayni mantik): icerigi sabit
   uzunlukta bir koddur, satiri doldurmasi bilgi tasimaz.
   Alan anahtari uzerinden secilir cunku ekranlar farkli adlar kullaniyor
   (orderNumber / quoteNumber); yeni bir belge turu eklenirse anahtari buraya
   yazilir. Alan Yonetimi'nden genislik verilmisse --ux-ctl-w yine KAZANIR. */
.ux-compact .ux-field[data-field-key="orderNumber"] > label ~ *,
.ux-compact .ux-field[data-field-key="quoteNumber"] > label ~ * {
  flex: 0 0 auto;
  width: var(--ux-ctl-w, var(--ux-compact-code-w, 200px));
  max-width: none;
}
/* Cok satirli alanlarda etiket ustten hizalanir — dikeyde ortalanirsa
   yuksek bir metin kutusunun ortasinda asili kalir. */
.ux-compact .ux-field:has(textarea) { align-items: flex-start; }
.ux-compact .ux-field:has(textarea) > label { padding-top: 6px; }

/* Aciklama metinleri gizlenir (2026-09-06 kullanici karari). Iki gerekce:
   (1) yer — her aciklama bir satir daha demek; (2) YAPI — satir ici etiket
   duzeninde alan ici aciklama input'un YANINA duserdi, uste degil.
   Uyari/hata mesajlari bu sinifi KULLANMAZ, etkilenmez. */
.ux-compact .ux-edit-hint { display: none; }
/* Alan satirlari tek sutuna iner; genislik sinirini koruruz (tam genislige
   yayilan input satiri okunakli degil). */
.ux-compact .ux-row2 { grid-template-columns: 1fr; gap: 8px; }
.ux-edit-pane .ux-field > label {
  display: block; font-size: 11px; font-weight: 700;
  color: #64748b; letter-spacing: 0.03em;
}
body.app-theme-dark .ux-edit-pane .ux-field > label { color: #94a3b8; }
.ux-edit-pane .ux-row2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 760px;
}
.ux-edit-pane .ux-row3 {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; max-width: 900px;
}
/* Alt-cizili (underline) gorunum — proje geneli textbox/combobox standardi
   (2026-07-27, widgetField.css .wf-/.mce-* ile ayni). Kutu yerine yalniz
   border-bottom; radius 0, transparent zemin. Sadece tip-spesifik input'lar
   (checkbox/radio HARIC → switchkey toggle'lari etkilenmez). */
.ux-edit-pane input[type="text"],
.ux-edit-pane input[type="number"],
.ux-edit-pane input[type="email"],
.ux-edit-pane input[type="time"],
.ux-edit-pane input[type="color"],
.ux-edit-pane textarea,
.ux-edit-pane select {
  /* Kompakt form standardi (2026-09-15): dikey dolgu 9px -> 4px. */
  padding: 4px 12px; border-radius: 0;
  border: none;
  border-bottom: 1px solid #e2e8f0;
  background: transparent; color: #0f172a;
  font-size: 13.5px; outline: none; font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
}
.ux-edit-pane textarea { min-height: 72px; resize: vertical; }
/* Native select chrome kaldir — appearance sifirlanmadan tarayici native
   combobox kutusunu (esp. light temada) ciziyordu, input'lar underline
   gorunse de select "eski gibi" kutu kaliyordu (2026-07-29). appearance:none
   oku da kaldirdigi icin ozel chevron background-image ile geri eklenir. */
.ux-edit-pane select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 28px;
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ux-edit-pane input[type="text"]:focus,
.ux-edit-pane input[type="number"]:focus,
.ux-edit-pane input[type="email"]:focus,
.ux-edit-pane input[type="time"]:focus,
.ux-edit-pane input[type="color"]:focus,
.ux-edit-pane textarea:focus,
.ux-edit-pane select:focus {
  border-bottom-color: #6366f1; box-shadow: 0 1px 0 0 #6366f1;
}
.ux-edit-pane .is-invalid {
  border-bottom-color: #ef4444 !important;
  box-shadow: 0 1px 0 0 #ef4444 !important;
}
body.app-theme-dark .ux-edit-pane input[type="text"],
body.app-theme-dark .ux-edit-pane input[type="number"],
body.app-theme-dark .ux-edit-pane input[type="email"],
body.app-theme-dark .ux-edit-pane input[type="time"],
body.app-theme-dark .ux-edit-pane textarea,
body.app-theme-dark .ux-edit-pane select {
  background: transparent; color: #e2e8f0;
  border-bottom-color: rgba(255,255,255,0.12);
}
body.app-theme-dark .ux-edit-pane select { color-scheme: dark; }
body.app-theme-dark .ux-edit-pane select > * { background: #0d1323; color: #e2e8f0; }
body.app-theme-dark .ux-edit-pane select {
  /* Ust satirdaki `background: transparent` shorthand'i repeat/position/size'i
     sifirliyor (repeat -> chevron doseniyordu, dalgali desen bug'i 2026-07-30).
     Dark chevron'la birlikte bu uc ozelligi de tekrar bildirmek sart. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px 6px;
}

.ux-edit-pane .ux-hint {
  font-size: 11px; color: #94a3b8; margin-top: 4px;
}

/* Switchkey (CLAUDE.md kuralı: boolean = switch) */
.ux-edit-pane .ux-switch-row { display: flex; align-items: center; gap: 10px; }
.ux-edit-pane .ux-switch { position: relative; width: 42px; height: 24px; display: inline-block; flex-shrink: 0; }
.ux-edit-pane .ux-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.ux-edit-pane .ux-switch-track {
  position: absolute; inset: 0; border-radius: 24px; cursor: pointer;
  background: #e2e8f0; transition: background .2s;
}
.ux-edit-pane .ux-switch input:checked + .ux-switch-track { background: #10b981; }
body.app-theme-dark .ux-edit-pane .ux-switch-track { background: rgba(255,255,255,0.12); }
body.app-theme-dark .ux-edit-pane .ux-switch input:checked + .ux-switch-track { background: #059669; }
.ux-edit-pane .ux-switch-track::before {
  content: ''; position: absolute; height: 18px; width: 18px;
  left: 3px; top: 3px; border-radius: 50%;
  background: #fff; transition: transform .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.ux-edit-pane .ux-switch input:checked + .ux-switch-track::before { transform: translateX(18px); }
.ux-edit-pane .ux-switch-label { font-size: 13px; font-weight: 600; color: #64748b; }
body.app-theme-dark .ux-edit-pane .ux-switch-label { color: #94a3b8; }

.ux-edit-pane .ux-err {
  margin-top: 10px; padding: 9px 13px; border-radius: 8px; font-size: 13px;
  background: rgba(239,68,68,.08); color: #dc2626; border: 1px solid rgba(239,68,68,.22);
  max-width: 560px;
}
body.app-theme-dark .ux-edit-pane .ux-err { color: #f87171; }

/* Dinamik widget'lar pane'de — stacked layout için container reset */
.ux-edit-pane .ux-dyn-widgets {
  max-width: 900px;
}
.ux-edit-pane .ux-dyn-empty {
  padding: 28px; text-align: center;
  border: 1px dashed #e2e8f0; border-radius: 10px;
  color: #94a3b8; font-size: 13px; max-width: 560px;
}
body.app-theme-dark .ux-edit-pane .ux-dyn-empty {
  border-color: rgba(255,255,255,0.1);
}

/* Alt-cizili (underline) gorunum — Bootstrap .form-control/.form-select opt-in
   sarmalayici (2026-07-31). .ux-edit-pane pattern'inin aynisi ama Bootstrap
   sinifina hedeflenir; global degil, yalniz `cb-form-underline` sinifi verilen
   konteyner icindeki form-control/form-select bundan etkilenir (arama/filtre/grid
   kutulari bu sinifi almadigi icin kutu kalir). Bootstrap'in kendi border/box-shadow'unu
   ezmek icin sadece o iki ozellikte !important kullanilir. */
.cb-form-underline .form-control,
.cb-form-underline .form-select,
.cb-form-underline textarea.form-control {
  padding: 4px 12px; /* kompakt form standardi (2026-09-15): 9px -> 4px */ border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid #e2e8f0 !important;
  background: transparent; color: #0f172a;
  font-size: 13.5px; font-family: inherit;
  box-shadow: none !important;
  transition: border-color .15s, box-shadow .15s;
}
.cb-form-underline textarea.form-control { min-height: 72px; resize: vertical; }
.cb-form-underline .form-control-sm,
.cb-form-underline .form-select-sm {
  padding: 6px 10px;
}
/* Native select chrome kaldir, .ux-edit-pane select ile ayni sebep (2026-07-29 dersi) */
.cb-form-underline .form-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 28px;
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cb-form-underline .form-control:focus,
.cb-form-underline .form-select:focus,
.cb-form-underline textarea.form-control:focus {
  border-bottom-color: #6366f1 !important;
  box-shadow: 0 1px 0 0 #6366f1 !important;
}
.cb-form-underline .is-invalid {
  border-bottom-color: #ef4444 !important;
  box-shadow: 0 1px 0 0 #ef4444 !important;
}
body.app-theme-dark .cb-form-underline .form-control,
body.app-theme-dark .cb-form-underline .form-select,
body.app-theme-dark .cb-form-underline textarea.form-control {
  background: transparent; color: #e2e8f0;
  border-bottom-color: rgba(255,255,255,0.12) !important;
}
body.app-theme-dark .cb-form-underline .form-select { color-scheme: dark; }
body.app-theme-dark .cb-form-underline .form-select > * { background: #0d1323; color: #e2e8f0; }
body.app-theme-dark .cb-form-underline .form-select {
  /* Ust satirdaki `background: transparent` shorthand'i repeat/position/size'i
     sifirliyor — dark chevron'la birlikte bu uc ozelligi de tekrar bildirmek sart
     (ayni bug .ux-edit-pane select'te 2026-07-30'da fix'lendi). */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px 6px;
}

/* Iframe (panel) modunda partial tab bar gizli, ux-edit-shell zaten full kaplar */
.workspace-frame-body .ux-edit-shell { height: 100dvh; }

/* 2026-06-06: Edit ekranlarında üst sub-tab bar (Personel/Operasyon/Makine...)
   persistent görünür. .pdt-tabs ile .ux-edit-shell sibling olduğunda
   shell yüksekliği kalan alan kadar olur, parent flex column. */
.workspace-frame-body:has(> .pdt-tabs) .app-content-area--workspace-frame,
.workspace-frame-body:has(.pdt-tabs + .ux-edit-shell) .app-content-area--workspace-frame {
  display: flex; flex-direction: column;
  height: 100dvh; min-height: 0; overflow: hidden; padding: 0;
}
.pdt-tabs + .ux-edit-shell,
.workspace-frame-body:has(.pdt-tabs) .ux-edit-shell {
  flex: 1 1 auto; min-height: 0;
  height: auto !important;
}
.pdt-tabs { flex-shrink: 0; }

/* ── Silme onay modali (ortak) ── */
.ux-modal-backdrop {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(15,23,42,0.55); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.ux-modal {
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: 14px; padding: 24px; width: 380px; max-width: 92vw;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 24px 64px rgba(0,0,0,.35);
}
body.app-theme-dark .ux-modal {
  background: #0d1323; border-color: rgba(255,255,255,0.1);
}
.ux-modal-icon { display: flex; justify-content: center; color: #ef4444; }
.ux-modal-title {
  font-size: 16px; font-weight: 700; text-align: center; color: #0f172a;
}
body.app-theme-dark .ux-modal-title { color: #f1f5f9; }
.ux-modal-msg {
  font-size: 13px; color: #64748b; text-align: center; line-height: 1.55;
}
body.app-theme-dark .ux-modal-msg { color: #94a3b8; }
.ux-modal-actions { display: flex; gap: 8px; justify-content: center; margin-top: 4px; }
.ux-modal-cancel {
  padding: 8px 22px; border-radius: 8px; font-size: 13px; font-weight: 600;
  border: 1px solid #e2e8f0; background: #fff; color: #475569; cursor: pointer;
}
.ux-modal-cancel:hover { background: #f1f5f9; }
body.app-theme-dark .ux-modal-cancel {
  background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); color: #cbd5e1;
}
.ux-modal-del {
  padding: 8px 22px; border-radius: 8px; font-size: 13px; font-weight: 600;
  border: none; background: #ef4444; color: #fff; cursor: pointer;
}
.ux-modal-del:hover:not(:disabled) { filter: brightness(1.08); }
.ux-modal-del:disabled { opacity: .5; cursor: not-allowed; }

/* ── Arama/seçim modalı (ortak) — PickerModal: düz, aranabilir liste ──
   Backdrop olarak yukarıdaki .ux-modal-backdrop paylaşılır (aynı overlay/tema);
   burada yalnızca daha geniş kart + liste satırları tanımlanır. Referans kullanım:
   Views/Logistics/MachineEdit.cshtml (Makine → Lokasyon eşleştirme, sadece
   Makine Parkuru lokasyonları, hiyerarşi göstermez). */
.ux-picker-modal {
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: 14px; width: min(560px, 92vw); max-height: 76vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,.35);
}
body.app-theme-dark .ux-picker-modal {
  background: #0d1323; border-color: rgba(255,255,255,0.1);
}
.ux-picker-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid #e2e8f0;
}
body.app-theme-dark .ux-picker-head { border-color: rgba(255,255,255,0.1); }
.ux-picker-title { font-size: 14px; font-weight: 700; color: #0f172a; flex: 0 0 auto; }
body.app-theme-dark .ux-picker-title { color: #f1f5f9; }
.ux-picker-search {
  flex: 1 1 auto; min-width: 0;
  padding: 8px 12px; border-radius: 8px;
  border: 1px solid #e2e8f0; background: #fff; color: #0f172a;
  outline: none; font-size: 13px;
}
.ux-picker-search:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
body.app-theme-dark .ux-picker-search {
  background: rgba(255,255,255,0.05); color: #e2e8f0; border-color: rgba(255,255,255,0.12);
}
.ux-picker-close {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 6px;
  border: none; background: none; color: #64748b; cursor: pointer;
  font-size: 18px; display: inline-flex; align-items: center; justify-content: center;
}
.ux-picker-close:hover { background: #f1f5f9; color: #0f172a; }
body.app-theme-dark .ux-picker-close { color: #94a3b8; }
body.app-theme-dark .ux-picker-close:hover { background: rgba(255,255,255,0.08); color: #e2e8f0; }
.ux-picker-list { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.ux-picker-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 16px; cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
}
body.app-theme-dark .ux-picker-row { border-color: rgba(255,255,255,0.05); }
.ux-picker-row:hover { background: rgba(99,102,241,.08); }
.ux-picker-row-name { font-size: 13px; font-weight: 600; color: #0f172a; }
body.app-theme-dark .ux-picker-row-name { color: #e2e8f0; }
.ux-picker-row-meta { font-size: 11px; color: #64748b; flex: 0 0 auto; }
body.app-theme-dark .ux-picker-row-meta { color: #94a3b8; }
.ux-picker-empty {
  padding: 28px; text-align: center; color: #94a3b8; font-size: 13px;
}

/* Picker tetikleyici alan (readonly input + ikon buton) — .ux-field içinde kullanılır */
.ux-edit-pane .ux-picker-group { display: flex; gap: 8px; align-items: stretch; }
.ux-edit-pane .ux-picker-group input[type="text"] { flex: 1 1 auto; cursor: pointer; }
.ux-edit-pane .ux-picker-btn {
  flex: 0 0 auto; width: 40px; border-radius: 8px;
  border: 1px solid #e2e8f0; background: #fff; color: #475569; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.ux-edit-pane .ux-picker-btn:hover { background: #f1f5f9; color: #0f172a; }
body.app-theme-dark .ux-edit-pane .ux-picker-btn {
  background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); color: #cbd5e1;
}
body.app-theme-dark .ux-edit-pane .ux-picker-btn:hover { background: rgba(255,255,255,0.1); color: #e2e8f0; }

/* Flash bildirim (genel) */
.ux-flash {
  position: fixed; top: 16px; right: 16px; z-index: 9999;
  padding: 10px 16px; border-radius: 8px; font-size: 13px;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  display: none; max-width: 360px;
}
.ux-flash.is-show { display: block; }
.ux-flash.ok  { background: #d1fae5; color: #065f46; }
.ux-flash.err { background: #fee2e2; color: #991b1b; }
body.app-theme-dark .ux-flash.ok  { background: rgba(34,197,94,.2); color: #4ade80; }
body.app-theme-dark .ux-flash.err { background: rgba(239,68,68,.2); color: #f87171; }

/* ═══════════════════════════════════════════════════════════════════════════════
   GLOBAL DARK TEMA OVERRIDE'LARI
   Hardcoded light renklere sahip bileşenlerin dark modda düzgün görünmesi için.
   ─────────────────────────────────────────────────────────────────────────────
   Kural: view-specific CSS class'ları bu bloğa eklenmez (her view kendi <style>
   bloğuna body.app-theme-dark override koyar). Bu blok SADECE site.css'in ilk
   bölümündeki genel component'leri (module-card, hero, profile menu vb.) kapsar.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Home / Dashboard — module kartlar */
body.app-theme-dark .hero {
  background: linear-gradient(120deg, rgba(99,102,241,.12), rgba(15,23,42,.6));
  border-color: rgba(255,255,255,.08);
  color: var(--app-text, #e2e8f0);
}
body.app-theme-dark .module-card {
  color: var(--app-text, #e2e8f0);
}
body.app-theme-dark .module-link {
  background: rgba(99,102,241,.12);
  border-color: rgba(99,102,241,.2);
  color: #a5b4fc;
}
body.app-theme-dark .module-link:hover { background: rgba(99,102,241,.2); color: #c7d2fe; }

/* Home page favorite link */
body.app-theme-dark .home-favorite-link {
  background: var(--app-surface, #0d1323);
  border-color: var(--app-border, rgba(255,255,255,.08));
  color: var(--app-text, #e2e8f0);
}
body.app-theme-dark .home-favorite-link:hover {
  border-color: rgba(99,102,241,.4);
  box-shadow: 0 4px 14px rgba(99,102,241,.15);
}

/* Profil menüsü action items */
body.app-theme-dark .profile-menu-action-item { color: var(--app-text-muted, #94a3b8); }
body.app-theme-dark .profile-menu-action-item:hover {
  background: var(--app-muted-surface, #111827);
  color: var(--app-text, #e2e8f0);
}

/* Generic dark table header — view'larda class-spesifik override yoksa bu devreye girer.
   View'ların kendi .xxx-thead-th kuralları varsa bu override edilir (lower specificity). */
body.app-theme-dark table thead th {
  background: var(--app-muted-surface, #111827) !important;
  color: var(--app-text-muted, #94a3b8) !important;
  border-bottom-color: var(--app-border, rgba(255,255,255,.08)) !important;
}
body.app-theme-dark table tbody tr { border-bottom-color: var(--app-border, rgba(255,255,255,.05)) !important; }
body.app-theme-dark table tbody tr:hover { background: rgba(255,255,255,.03) !important; }

/* Durum mesaj kutuları — .ok / .err light renkleri dark'ta da okunabilir olsun */
body.app-theme-dark [class*="-msg"].ok,
body.app-theme-dark [class*="-msg"].success {
  background: rgba(16,185,129,.12) !important;
  border-color: rgba(16,185,129,.25) !important;
  color: #34d399 !important;
}
body.app-theme-dark [class*="-msg"].err,
body.app-theme-dark [class*="-msg"].error {
  background: rgba(239,68,68,.12) !important;
  border-color: rgba(239,68,68,.25) !important;
  color: #fca5a5 !important;
}

/* ── Sidebar collapsed — TAM kapanma + floating expand FAB ────────────
   Mevcut `app-side-collapsed` rail davranisi kaldirilir; sidebar layout'tan
   tamamen cikar. Aciliminin yegane yolu: sol-ust kose'deki floating FAB.
   _Layout'taki ".app-shell-expand-fab" elementi sadece collapsed durumda
   gorunur, data-sidebar-toggle ile ayni handler'i tetikler.

   Not: width:0 + transform yetmez (0 * -100% = 0 = etkisiz). display:none
   layout'tan tam cikarir, brand-area/rail kalintilarini birakmaz. */
body.app-side-collapsed .app-sidebar,
body.app-side-collapsed .admin-sidebar,
body.app-side-collapsed .dashboard-shell__sidebar {
  display: none !important;
}
body.app-side-collapsed .app-shell { grid-template-columns: minmax(0, 1fr) !important; }
body.app-side-collapsed .app-main  { margin-left: 0 !important; padding-left: 0 !important; }

.app-shell-expand-fab {
  position: fixed;
  top: 12px;
  left: 12px;
  width: 36px;
  height: 36px;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--app-surface, #ffffff);
  color: var(--app-text, #0f172a);
  border: 1px solid var(--app-border, #e2e8f0);
  border-radius: 8px;
  cursor: pointer;
  z-index: 1100;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  transition: background .12s, transform .12s, box-shadow .12s;
}
.app-shell-expand-fab:hover {
  background: var(--theme-accent-soft, rgba(99,102,241,.12));
  transform: scale(1.06);
}
.app-shell-expand-fab svg { width: 18px; height: 18px; }
body.app-side-collapsed .app-shell-expand-fab { display: inline-flex; }
body.app-theme-dark .app-shell-expand-fab {
  background: #0d1323;
  color: #e2e8f0;
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
/* ═══════════════════════════════════════════════════════════════════
   Döviz uygulaması kapalı (2026-09-05 kullanıcı kararı)
   ------------------------------------------------------------------
   Şirket parametresi (Admin → Parametreler → Genel) kapalıyken hiçbir
   ekranda para birimi / kur / kur tarihi SORULMAZ. Bayrak _Layout'ta
   body'ye basılır; ekran yalnız kendi alanını data-currency-field ile
   işaretler. Tek kural olmasının sebebi: ekran başına ayrı koşul
   yazılsaydı yeni eklenen ekranda unutulur ve alan sessizce görünmeye
   devam ederdi. GİZLEME TEK BAŞINA KAPI DEĞİLDİR — sunucu tarafında
   DocumentService/CashBank/PriceList gelen döviz değerini zaten yok
   sayar (bkz. CurrencyFeatureService).
   ═══════════════════════════════════════════════════════════════════ */
body[data-currency-off="1"] [data-currency-field] {
  display: none !important;
}

/* Satis temsilcisi uygulamasi kapaliyken temsilci alanlari HIC cizilmez
   (2026-09-11, Seq 2192). Doviz kuralinin ikizidir: ekranlar yalniz alanlarini
   data-salesrep-field ile isaretler, karar _Layout'ta tek yerde okunur. */
body[data-salesrep-off="1"] [data-salesrep-field] {
  display: none !important;
}

/* Kit tanimlama kapaliyken "Kit" tipi sunulmaz (2026-09-14, Seq 2198). Sunucu da
   yeni kit tanimini reddeder; bu kural yalniz secenegi gostermez. Kayitli kit
   kartinda secili deger yine gorunur (secili <option> etiketi CSS ile gizlenmez). */
body[data-kit-off="1"] [data-kit-field] {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   Kök color-scheme — native kontrollerin (select açılır paneli, checkbox,
   date popup, scrollbar) tarayıcı tarafından çizilen kısmı (2026-09-06)
   ------------------------------------------------------------------
   Dosyanın başındaki `html { color-scheme: dark light; }` seçimi İŞLETİM
   SİSTEMİNE bırakır. Uygulama koyu temadayken OS açık temadaysa select'in
   açılır paneli BEYAZ çizilirdi — kutunun kendisi CSS ile koyu olduğu için
   fark ancak dropdown açılınca görülüyordu.

   Body'deki tema sınıfı SUNUCU tarafından basılır; bu kural onu köke taşır,
   böylece Shell'in iframe senkronu hiç çalışmasa da doğru sonucu verir
   (JS'e bağlı tek savunma bırakmamak için — bkz. Shell.jsx onLoad dalı).
   ═══════════════════════════════════════════════════════════════════ */
html:has(body.app-theme-dark)  { color-scheme: dark; }
html:has(body.app-theme-light) { color-scheme: light; }

/* ═══════════════════════════════════════════════════════════════════
   Üst bar (header) widget şeridi — TopBarWidgetsBar.jsx / compact widget'lar
   (2026-09-21). Light varsayılan + body.app-theme-dark override (CLAUDE.md).
   ═══════════════════════════════════════════════════════════════════ */
.topbar-widget__pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 8px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--app-text, #334155);
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 120ms ease-out;
}
.topbar-widget__pill:hover { background: var(--app-muted-surface, #f1f5f9); }
.topbar-widget__text {
  color: var(--app-text-muted, #64748b);
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
body.app-theme-dark .topbar-widget__pill { color: var(--app-text, #e2e8f0); }
body.app-theme-dark .topbar-widget__pill:hover { background: rgba(255,255,255,0.06); }
body.app-theme-dark .topbar-widget__text { color: var(--app-text-muted, #94a3b8); }

/* Rozet — tetikleyici butonun üzerindeki işaretli-widget sayısı. */
.topbar-widget__badge {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 13px;
  height: 13px;
  padding: 0 3px;
  border-radius: 999px;
  background: #6366f1;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 13px;
  text-align: center;
}

/* Açılır liste — ana sayfada "Üstte Göster" işaretlenen widget'lar burada
   satır satır listelenir (etiket solda, değer sağda). */
.topbar-panel {
  min-width: 260px;
  max-width: 320px;
  max-height: min(420px, calc(100vh - 96px));
  overflow-y: auto;
  border-radius: 12px;
  border: 1px solid var(--app-border, #e2e8f0);
  background: var(--app-surface, #fff);
  box-shadow: 0 12px 32px rgba(0,0,0,.16);
  padding: 6px;
}
.topbar-panel__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
}
.topbar-panel__row--static:hover { background: var(--app-muted-surface, #f1f5f9); }
.topbar-panel__label {
  flex: 1 1 auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--app-text-muted, #64748b);
}
.topbar-panel__value { color: var(--app-text, #334155); }
.topbar-panel__group { display: flex; flex-direction: column; }
.topbar-panel__group > button.topbar-panel__row {
  width: 100%;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.topbar-panel__group > button.topbar-panel__row:hover { background: var(--app-muted-surface, #f1f5f9); }
.topbar-panel__empty {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--app-text-muted, #64748b);
}
body.app-theme-dark .topbar-panel {
  border-color: rgba(255,255,255,0.1);
  background: #15182b;
  box-shadow: 0 12px 32px rgba(0,0,0,.4);
}
body.app-theme-dark .topbar-panel__row--static:hover,
body.app-theme-dark .topbar-panel__group > button.topbar-panel__row:hover { background: rgba(255,255,255,0.06); }
body.app-theme-dark .topbar-panel__label { color: var(--app-text-muted, #94a3b8); }
body.app-theme-dark .topbar-panel__value { color: var(--app-text, #e2e8f0); }
body.app-theme-dark .topbar-panel__empty { color: var(--app-text-muted, #94a3b8); }