/* dormek'e özgü eklemeler.
   theme.css önceden derlenmiş Tailwind olduğundan yalnızca temada kullanılan yardımcı sınıfları içerir;
   burada tanımlananlar onda olmayan parçalardır. Temadaki gibi `utilities` katmanında durur, böylece
   kaynak sırası (theme.css → site.css) her zaman geçerli olur. */

@layer utilities {
  .break-all {
    word-break: break-all;
  }

  .break-words {
    overflow-wrap: anywhere;
  }

  /* Tabloda metnin yanındaki etiket için küçük boşluk */
  .pill-gap {
    margin-left: 6px;
  }

  /* Derlenmiş tema CSS'inde olmayan responsive gösterim sınıfı (md = 768px, tema ile aynı). */
  @media (min-width: 768px) {
    .md\:block {
      display: block;
    }
  }

  /* Telefonda dokunulacak satır (tel:/mailto: bağlantıları) en az 36px yüksekliğinde olsun. */
  .tap-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
  }

  /* Tema, telefonlarda girdileri 16px yapar (iOS odaklanınca yakınlaştırmasın); ancak `.form-select` ve
     `.form-textarea` daha yüksek özgüllükle 14px'te kalıyordu. */
  @media (max-width: 575.98px) {
    .form-select,
    .form-textarea {
      font-size: 16px;
    }
  }

  /* Kenar çubuğu üst köşedeki marka kutusu */
  .brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--radius-lg);
    background: var(--color-primary);
    color: #ffffff;
  }

  /* Kenar çubuğundaki kullanıcı baş harfi */
  .avatar-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
  }

  /* Form doğrulama hatası (asp-validation-for / validation-summary) */
  .form-error {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--color-danger);
  }

  /* Form üstündeki genel hata kutusu (validation-summary). Hata yokken ASP.NET ayrı bir sınıfla gizletir. */
  .form-summary {
    padding: 12px 16px;
    border-radius: var(--radius-xl);
    border: 1px solid color-mix(in srgb, var(--color-danger) 30%, transparent);
    background: var(--color-danger-soft);
    color: var(--color-danger);
    font-size: 14px;
  }
  .form-summary.validation-summary-valid {
    display: none;
  }

  /* Sayfa üstü bildirim (TempData) */
  .alert-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--radius-xl);
    border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
    font-size: 14px;
  }
  .alert-success {
    color: var(--color-success);
    background: var(--color-success-soft);
  }
  .alert-danger {
    color: var(--color-danger);
    background: var(--color-danger-soft);
  }

  /* Rol kartlarındaki modül etiketi */
  .module-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    background: var(--color-subtle);
    color: var(--color-text);
    font-size: 11.5px;
    font-weight: 500;
  }

  /* Fiş formu: ürün satırı (arama | adet | mevcut stok | sil) ve arama sonuç listesi */
  .line-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px 110px auto;
    gap: 8px;
    align-items: center;
  }
  @media (max-width: 767.98px) {
    .line-row {
      grid-template-columns: 1fr 1fr auto;
    }
    .line-row .picker {
      grid-column: 1 / -1;
    }
    .line-row .line-stock {
      grid-column: 1 / -1;
      order: 5;
    }
  }
  .picker {
    position: relative;
  }
  .picker-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 30;
    max-height: 320px;
    overflow-y: auto;
    padding: 6px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    background: var(--color-w1);
    box-shadow: 0 10px 24px -8px rgba(15, 23, 42, 0.25);
  }
  .picker-results[hidden] {
    display: none;
  }
  .picker-item {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border-radius: var(--radius-lg);
    text-align: left;
    cursor: pointer;
  }
  .picker-item:hover,
  .picker-item.is-active {
    background: var(--color-subtle);
  }
  .picker-code {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--color-muted);
  }
  .picker-name {
    display: block;
    font-size: 13.5px;
    color: var(--color-heading);
    word-break: break-word;
  }
  .picker-spec {
    display: block;
    font-size: 12px;
    color: var(--color-muted);
  }
  .picker-empty {
    padding: 10px;
    font-size: 13px;
    color: var(--color-muted);
  }
  .line-stock {
    font-size: 12px;
    color: var(--color-muted);
    white-space: nowrap;
  }
  .line-stock.is-over {
    color: var(--color-danger);
    font-weight: 600;
  }

  /* Ürün formu: ek özellik satırı (ad | değer | kaldır) */
  .attr-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 8px;
    align-items: center;
  }
  @media (max-width: 575.98px) {
    .attr-row {
      grid-template-columns: 1fr auto;
    }
    .attr-row [data-name] {
      grid-column: 1 / -1;
    }
  }

  /* Tablo içi küçük butonlar. `.btn-*` bileşenleri kendi rengini/yüksekliğini ezdiği için
     aynı özgüllükte ve daha sonra tanımlanır. */
  .btn-primary.btn-sm,
  .btn-ghost.btn-sm {
    height: 32px;
    padding: 0 12px;
    font-size: 13px;
    border-radius: var(--radius-md);
  }
  /* Temanın .btn-primary'sinde ikon-metin boşluğu var, .btn-ghost'ta yok. */
  .btn-ghost {
    gap: 8px;
  }
  .btn-ghost.btn-danger {
    color: var(--color-danger);
  }
  .btn-ghost.btn-danger:hover {
    color: var(--color-danger);
    border-color: var(--color-danger);
  }
}

/* ---------- Yerleşim: masaüstünde tüm genişliği kullanan akışkan ızgaralar ---------- */
@layer utilities {
  [hidden] {
    display: none !important;
  }

  /* Sayfa sütunları: mobilde tek sütun; masaüstünde 2–3 sütun. Kartlar sütun içinde alt alta dizilir (col-stack). */
  .cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: start;
  }
  .col-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
  }
  @media (min-width: 992px) {
    .cols {
      gap: 20px;
    }
    .cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .cols-3 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .cols-main {
      grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }
    .cols-side {
      grid-template-columns: minmax(300px, 1fr) minmax(0, 2fr);
    }
    .col-stack {
      gap: 20px;
    }
  }
  @media (min-width: 1400px) {
    .cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  /* Alan ızgarası: sığdığı kadar sütun, hepsi akışkan genişlikte. */
  .fields {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
    align-items: start;
  }
  .fields > .span-all {
    grid-column: 1 / -1;
  }

  /* Kart ızgarası (kategori ağacı gibi bağımsız kartlar): masaüstünde yan yana. */
  .cards-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
    align-items: start;
  }
  @media (min-width: 992px) {
    .cards-grid {
      gap: 20px;
    }
  }

  /* Özet kartları */
  .stat-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 176px), 1fr));
  }
  @media (min-width: 992px) {
    .stat-grid {
      gap: 20px;
    }
  }

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

  .filter-label {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    color: var(--color-muted);
  }

  /* Marka adı: küçük harf, kalın değil */
  .brand-name {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.01em;
    text-transform: none;
    color: #ffffff;
    white-space: nowrap;
  }
  .brand-name-lg {
    font-size: 22px;
  }
  .hero-title {
    font-size: 30px;
    line-height: 1.2;
    font-weight: 400;
    color: #ffffff;
  }

  /* Kategori formu: özellik tanımı satırı */
  .attr-def {
    padding: 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-subtle);
  }
  .attr-def-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
  }

  /* Müşteri/tedarikçi seçimi: seçilen kayıt kartı */
  .party-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-subtle);
  }
  .party-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-heading);
    overflow-wrap: anywhere;
  }
  .party-meta {
    font-size: 12px;
    color: var(--color-muted);
    overflow-wrap: anywhere;
  }
  .party-meta:empty {
    display: none;
  }
}
@layer utilities {
  /* Alan ızgarasında, etiketi olmayan onay kutusunu girdilerle aynı hizaya oturtur. */
  .fields > .field-check {
    align-self: end;
    min-height: 40px;
  }
}
/* ---------- PWA, bildirim, altbilgi, gizlilik metni, log ekranları ---------- */
@layer utilities {
  /* Altbilgi: her sayfanın en altında telif satırı */
  .app-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    flex-wrap: wrap;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--color-border-subtle, var(--color-border));
    font-size: 12px;
    color: var(--color-muted);
  }
  .app-footer a {
    color: var(--color-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .app-footer a:hover {
    color: var(--color-heading);
  }
  @media (min-width: 768px) {
    .app-footer {
      padding-left: 20px;
      padding-right: 20px;
    }
  }

  .public-header {
    display: flex;
    align-items: center;
    height: 64px;
    padding: 0 16px;
    border-bottom: 1px solid var(--color-border);
  }
  .brand-name-dark {
    color: var(--color-heading);
  }
  .public-content {
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
  }

  /* Zil simgesi ve okunmamış sayacı */
  .bell-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--color-danger);
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
  }

  /* Bildirim kutusu */
  .notif-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    transition: background-color 0.15s;
  }
  .notif-row:hover {
    background: var(--color-subtle);
  }
  .notif-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-top: 7px;
    border-radius: 999px;
    background: transparent;
  }
  .notif-row.is-unread .notif-dot {
    background: var(--color-primary);
  }
  .notif-row.is-unread {
    background: color-mix(in srgb, var(--color-primary) 6%, transparent);
  }

  /* Bu cihazda anlık bildirim durumu */
  .push-state {
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-subtle);
    font-size: 14px;
    color: var(--color-text);
  }
  .push-state[data-tone="ok"] {
    color: var(--color-success);
    background: var(--color-success-soft);
  }
  .push-state[data-tone="warn"] {
    color: var(--color-danger);
    background: var(--color-danger-soft);
  }

  /* Dolu oranı çubuğu */
  .meter {
    height: 8px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-subtle);
  }
  .meter > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--color-primary);
  }

  /* Kayıtlar (log) listesi */
  .log-summary {
    display: grid;
    grid-template-columns: 150px 84px minmax(140px, 220px) minmax(100px, 190px) minmax(0, 1fr);
    gap: 4px 12px;
    align-items: center;
    padding: 10px 16px;
    font-size: 13px;
    cursor: pointer;
    list-style: none;
  }
  .log-summary::-webkit-details-marker {
    display: none;
  }
  .log-row:hover .log-summary,
  .log-row[open] .log-summary {
    background: var(--color-subtle);
  }
  .log-time {
    font-size: 12px;
    color: var(--color-muted);
    white-space: nowrap;
  }
  .log-event {
    font-weight: 500;
    color: var(--color-heading);
    overflow-wrap: anywhere;
  }
  .log-user {
    font-size: 12px;
    color: var(--color-muted);
    overflow-wrap: anywhere;
  }
  .log-message {
    overflow: hidden;
    color: var(--color-text);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  @media (max-width: 991.98px) {
    .log-summary {
      grid-template-columns: 1fr auto;
    }
    .log-event,
    .log-user,
    .log-message {
      grid-column: 1 / -1;
    }
    .log-message {
      white-space: normal;
    }
  }
  .log-detail {
    padding: 4px 16px 16px;
  }
  .log-pre {
    max-height: 260px;
    margin-top: 12px;
    padding: 12px;
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-subtle);
    font-size: 12px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
  .log-pre-error {
    color: var(--color-danger);
  }

  /* Gizlilik ve kullanım koşulları metni */
  .legal {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .legal-toc ol {
    columns: 2 280px;
    column-gap: 32px;
    padding-left: 0;
    list-style: none;
    font-size: 14px;
  }
  .legal-toc li {
    padding: 3px 0;
    break-inside: avoid;
  }
  .legal-toc a {
    color: var(--color-text);
    text-decoration: none;
  }
  .legal-toc a:hover {
    color: var(--color-primary);
  }
  .legal-section {
    scroll-margin-top: 80px;
    font-size: 14px;
    line-height: 1.75;
    color: var(--color-text);
  }
  .legal-section h2 {
    margin-bottom: 10px;
    font-size: 17px;
    font-weight: 600;
    color: var(--color-heading);
  }
  .legal-section h3 {
    margin: 18px 0 6px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--color-heading);
  }
  .legal-section p {
    margin-bottom: 10px;
  }
  .legal-section ul {
    margin: 0 0 10px;
    padding-left: 22px;
    list-style: disc;
  }
  .legal-section li {
    margin-bottom: 6px;
  }
  .legal-contact {
    display: grid;
    gap: 10px 24px;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    margin: 12px 0;
  }
  .legal-contact dt {
    font-size: 12px;
    color: var(--color-muted);
  }
  .legal-contact dd {
    font-weight: 500;
    color: var(--color-heading);
    overflow-wrap: anywhere;
  }
  .legal-copy {
    margin-top: 14px;
    font-size: 12px;
    color: var(--color-muted);
  }
}
@layer utilities {
  .legal-head {
    margin-bottom: 2px;
  }
}
/* ---------- Marka yazısı, sayfa başlığı ikonu, kenar çubuğu kullanıcı menüsü ---------- */
@layer utilities {
  /* "dormek panel": d, m ve p harfleri kalın, gerisi normal */
  .brand-name b,
  .hero-title b {
    font-weight: 700;
  }

  /* Sayfa başlığının solunda modül ikonu: açık temada koyu (kenar çubuğu rengi), koyu temada açık */
  .page-title {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 11px;
    background: var(--color-sidebar);
    color: #ffffff;
    font-size: 20px;
  }
  .dark .title-icon {
    background: #e6edf1;
    color: #0e1f16;
  }

  .user-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 10px;
    color: var(--color-muted);
    transition: background-color 0.15s, color 0.15s;
  }
  .user-dots:hover,
  .user-dots[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
  }
  .user-menu {
    position: fixed;
    z-index: 95;
    width: 256px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: var(--color-w1);
    box-shadow: 0 20px 40px -12px rgba(15, 23, 42, 0.35);
    color: var(--color-text);
  }
}
/* ---------- Panel (Genel Bakış / Depo özeti) ---------- */
@layer components {
  .kpi-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  }
  @media (min-width: 992px) {
    .kpi-grid {
      gap: 20px;
    }
  }

  /* Dönem seçici (segmentli sekmeler) */
  .seg {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-subtle);
  }
  .seg-item {
    padding: 5px 12px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-muted);
    white-space: nowrap;
    transition: background-color 0.15s, color 0.15s;
  }
  .seg-item:hover {
    color: var(--color-heading);
  }
  .seg-item.is-active {
    background: var(--color-w1);
    color: var(--color-heading);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
  }

  /* İlerleme çubuğu */
  .bar-track {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--color-subtle);
  }
  .bar-track > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--color-chart-green);
  }
  .bar-track > .bar-green { background: var(--color-chart-green); }
  .bar-track > .bar-blue { background: var(--color-chart-blue); }
  .bar-track > .bar-amber { background: var(--color-chart-yellow); }
  .bar-track > .bar-red { background: var(--color-chart-red); }
}

/* Panelde kullanılan, önceden derlenmiş temada bulunmayan yardımcı sınıflar */
@layer utilities {
  .bg-chart-red { background-color: var(--color-chart-red); }
  .bg-chart-yellow { background-color: var(--color-chart-yellow); }
  .bg-faint { background-color: var(--color-faint); }
  .h-\[150px\] { height: 150px; }
  .h-\[220px\] { height: 220px; }
  .h-\[260px\] { height: 260px; }
  .h-\[280px\] { height: 280px; }
  .h-\[300px\] { height: 300px; }
  .pt-0\.5 { padding-top: 2px; }
  .-ml-1\.5 { margin-left: -6px; }
}

@layer utilities {
  .h-\[56px\] { height: 56px; }
  .h-\[160px\] { height: 160px; }
  .mb-2 { margin-bottom: 8px; }
  @media (min-width: 992px) {
    .cols.cols-eq { align-items: stretch; }
  }
}
/* Satırın tamamı tıklanabilir liste öğeleri */
@layer utilities {
  .row-link {
    cursor: pointer;
  }
  @media (max-width: 767px) {
    .row-link:active {
      background: var(--color-subtle);
    }
  }

  /* Pano: iki bağımsız sütun yığını (kartlar arasında boşluk kalmaz); dar ekranda tek sütun */
  .dash-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: start;
  }
  @media (min-width: 992px) {
    .dash-cols {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 20px;
    }
    .dash-cols > .col-stack {
      gap: 20px;
    }
  }
  @media (min-width: 1400px) {
    .dash-cols {
      grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    }
  }
}

/* Zil: son bildirimler paneli */
@layer utilities {
  .bell-panel {
    position: fixed;
    left: 8px;
    right: 8px;
    top: 68px;
    z-index: 60;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: var(--color-w1);
    box-shadow: 0 20px 40px -12px rgba(15, 23, 42, 0.35);
    overflow: hidden;
  }
  @media (min-width: 640px) {
    .bell-panel {
      position: absolute;
      left: auto;
      right: 0;
      top: calc(100% + 12px);
      width: 380px;
    }
  }
  .bell-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
  }
  .bell-list {
    max-height: min(60vh, 420px);
    overflow-y: auto;
  }
  .bell-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border-subtle, var(--color-border));
    transition: background-color 0.15s;
  }
  .bell-item:last-child {
    border-bottom: 0;
  }
  .bell-item:hover {
    background: var(--color-subtle);
  }
  .bell-item .notif-dot {
    background: var(--color-primary);
  }
  .bell-empty {
    padding: 28px 16px;
    text-align: center;
    font-size: 13px;
    color: var(--color-muted);
  }
  .notif-go {
    flex-shrink: 0;
    align-self: center;
    color: var(--color-faint);
  }
  .notif-row:hover .notif-go {
    color: var(--color-primary);
  }
}

/* Oturum bitti uyarısı (heartbeat.js) */
@layer utilities {
  .session-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 10px 16px;
    background: var(--color-danger);
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
  }
  .session-banner a {
    padding: 4px 12px;
    border-radius: 8px;
    background: rgb(255 255 255 / 0.2);
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
  }
}

/* Uyarı bantları (satış/sevk) ve satış formu */
@layer utilities {
  .alert-warning {
    color: var(--color-warning);
    background: color-mix(in srgb, var(--color-warning) 10%, transparent);
  }
  .alert-info {
    color: var(--color-info, var(--color-primary));
    background: color-mix(in srgb, var(--color-info, var(--color-primary)) 10%, transparent);
  }
  .alert-box > div p {
    margin: 0;
  }

  /* Satış formu: ürün satırı (arama | adet | birim fiyat | tutar | sil) */
  .sale-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 100px 130px 130px auto;
    gap: 8px;
    align-items: center;
  }
  .sale-row .sale-hint {
    grid-column: 1 / -1;
    font-size: 12px;
    color: var(--color-muted);
  }
  .sale-row .sale-hint.is-short {
    color: var(--color-danger);
    font-weight: 600;
  }
  .sale-row .sale-total {
    text-align: right;
    font-weight: 600;
    color: var(--color-heading);
    white-space: nowrap;
  }
  @media (max-width: 767.98px) {
    .sale-row {
      grid-template-columns: 1fr 1fr auto;
    }
    .sale-row .picker {
      grid-column: 1 / -1;
    }
    .sale-row .sale-total {
      text-align: left;
    }
  }
  .sale-summary {
    display: grid;
    gap: 6px;
    min-width: 260px;
    margin-left: auto;
    font-size: 14px;
  }
  .sale-summary > div {
    display: flex;
    justify-content: space-between;
    gap: 24px;
  }
  .sale-summary .grand {
    padding-top: 8px;
    border-top: 1px solid var(--color-border);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-heading);
  }
  .radio-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
  }
  .radio-card:has(input:checked) {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 6%, transparent);
  }
  .status-info {
    color: var(--color-info, var(--color-primary));
  }
  .ship-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--color-subtle);
    overflow: hidden;
  }
  .ship-bar > span {
    display: block;
    height: 100%;
    background: var(--color-chart-green);
  }
}
@layer utilities {
  .link-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
  }
}

/* Satış/sevk ekranlarında kullanılan, önceden derlenmiş temada bulunmayan yardımcı sınıflar */
@layer utilities {
  .hover\:underline:hover { text-decoration: underline; }
  .list-disc { list-style: disc; }
  .pl-5 { padding-left: 20px; }
  .mr-1 { margin-right: 4px; }
  .pt-3 { padding-top: 12px; }
  @media (min-width: 640px) {
    .sm\:max-w-\[160px\] { max-width: 160px; }
  }
  @media (min-width: 768px) {
    .md\:pt-5 { padding-top: 20px; }
  }
}
@layer utilities {
  textarea.form-input {
    min-height: 96px;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 1.5;
  }
}

/* Topbar: güncel kur rozeti (üst sağ en solda) */
@layer utilities {
  .rate-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 12px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    transition: background-color 0.15s, border-color 0.15s;
  }
  .rate-badge:hover {
    background: var(--color-subtle);
    border-color: var(--color-primary);
  }
  .rate-badge-item {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    tabular-nums: 1;
    font-variant-numeric: tabular-nums;
  }
  .rate-badge-cur {
    color: var(--color-muted);
    font-weight: 500;
  }
  .rate-badge-src {
    padding: 1px 6px;
    border-radius: var(--radius-full);
    background: var(--color-subtle);
    color: var(--color-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
  }

  /* ── dormek AI: sohbet mesajlarında Markdown gösterimi (js/markdown-mini.js) ── */
  .ai-md-content {
    line-height: 1.55;
  }
  .ai-md-content > *:first-child {
    margin-top: 0;
  }
  .ai-md-content > *:last-child {
    margin-bottom: 0;
  }
  .ai-md-p {
    margin: 6px 0;
  }
  .ai-md-h {
    font-weight: 600;
    margin: 10px 0 6px;
    color: var(--color-heading);
  }
  .ai-md-list {
    margin: 6px 0;
    padding-left: 20px;
    list-style-position: outside;
  }
  .ai-md-list.ai-md-list {
    list-style-type: disc;
  }
  ol.ai-md-list.ai-md-list {
    list-style-type: decimal;
  }
  .ai-md-list li {
    display: list-item;
    margin: 2px 0;
  }
  .ai-md-hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 10px 0;
  }
  .ai-md-content code {
    background: color-mix(in srgb, var(--color-text) 10%, transparent);
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    font-size: 12.5px;
  }
  .ai-md-pre {
    background: color-mix(in srgb, var(--color-text) 6%, transparent);
    border-radius: var(--radius-lg);
    padding: 10px 12px;
    overflow-x: auto;
    margin: 8px 0;
  }
  .ai-md-pre code {
    background: none;
    padding: 0;
  }
  .ai-md-table-wrap {
    overflow-x: auto;
    margin: 8px 0;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
  }
  .ai-md-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
  }
  .ai-md-table th,
  .ai-md-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    white-space: nowrap;
  }
  .ai-md-table thead th {
    background: var(--color-subtle);
    font-weight: 600;
    color: var(--color-heading);
  }
  .ai-md-table tbody tr:last-child td {
    border-bottom: none;
  }

  /* ── dormek AI: sohbet listesi (sidebar) ── */
  .ai-conv-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 8px 8px 10px;
    border-radius: var(--radius-lg);
    cursor: pointer;
  }
  .ai-conv-item:hover {
    background: var(--color-subtle);
  }
  .ai-conv-active {
    background: var(--color-primary-soft);
  }
  .ai-conv-hide-btn {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    color: var(--color-faint);
    opacity: 0;
    transition: opacity var(--transition-fast, 0.15s);
  }
  .ai-conv-item:hover .ai-conv-hide-btn,
  .ai-conv-item:focus-within .ai-conv-hide-btn {
    opacity: 1;
  }
  .ai-conv-hide-btn:hover {
    background: var(--color-danger-soft);
    color: var(--color-danger);
  }

  /* "dormek AI düşünüyor…" balonu: nabız gibi atan ikon + sırayla yanıp sönen üç nokta. */
  .ai-thinking-icon {
    display: inline-block;
    color: var(--color-primary);
    animation: ai-thinking-pulse 1.2s ease-in-out infinite;
  }
  @keyframes ai-thinking-pulse {
    0%, 100% { transform: scale(1); opacity: 0.55; }
    50% { transform: scale(1.2); opacity: 1; }
  }
  .ai-thinking-dots span {
    opacity: 0;
    animation: ai-thinking-dot 1.4s infinite;
  }
  .ai-thinking-dots span:nth-child(1) { animation-delay: 0s; }
  .ai-thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
  .ai-thinking-dots span:nth-child(3) { animation-delay: 0.4s; }
  @keyframes ai-thinking-dot {
    0%, 80%, 100% { opacity: 0; }
    40% { opacity: 1; }
  }

  /* Telefonda sohbet listesi, "Sohbetler" düğmesiyle chat kartının üstüne kaplama olarak açılır. */
  @media (max-width: 767.98px) {
    .ai-sidebar-open {
      display: flex !important;
      position: fixed;
      top: 4rem;
      left: 0;
      right: 0;
      bottom: 0;
      width: auto;
      z-index: 40;
      border-radius: 0;
    }
  }
}