/* ============================================================================
   giderlerim — Dialog System
   Slideover ve modal component'lerinin görsel pattern'i.

   FELSEFE:
     - Tek bir CSS dosyası, iki variant (slideover + modal)
     - Tokens.css'e dayalı, tüm renkler/spacing/radius semantic token'lardan
     - Marketing site `.mock-card` pattern'iyle uyumlu (elevated surface,
       subtle border, generous padding, smooth transitions)
     - Tailwind utility'lerinden bağımsız — class'lar semantic isimli

   KULLANIM:
     base.html'de tokens.css'ten SONRA yüklenir:
     <link rel="stylesheet" href="{% static 'css/dialog.css' %}" />

   YAPI:
     1. Overlay (backdrop)
     2. Container (pozisyon belirler: center vs right)
     3. Card (görsel kabuk: surface, border, shadow, radius)
     4. Header, Body, Footer (içerik bölgeleri)
     5. Transition class'ları (Alpine x-transition için)
     6. Size variants (sm/md/lg/xl)
     7. Modal-specific variants (confirm/danger için ikon alanı)
   ============================================================================ */


/* ============================================================================
   OVERLAY — Backdrop
   ============================================================================ */

.dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 99998;
  background-color: var(--bg-overlay);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.dialog-overlay[data-state="open"] {
  animation: dialog-fade-in var(--dur-base) var(--ease) forwards;
}

.dialog-overlay[data-state="closed"] {
  animation: dialog-fade-out var(--dur-fast) var(--ease) forwards;
}


/* ============================================================================
   CONTAINER — Pozisyon (slideover vs modal)
   ============================================================================ */

.dialog-container {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  pointer-events: none; /* card pointer-events: auto alır */
}

/* Slideover — right-anchored, full-height */
.dialog-container--slideover {
  align-items: stretch;
  justify-content: flex-end;
}

/* Modal — centered, both axes */
.dialog-container--modal {
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}


/* ============================================================================
   CARD — Görsel kabuk
   ============================================================================ */

.dialog-card {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  overflow: hidden; /* corner radius'unu garanti et */
}

/* Slideover — full-height, right edge */
.dialog-card--slideover {
  width: 100%;
  max-width: var(--slideover-width); /* default 480px */
  height: 100vh;
  border-radius: 0;
  border-top: 0;
  border-right: 0;
  border-bottom: 0; /* sadece left border */
}

/* Modal — auto-height, centered, rounded */
.dialog-card--modal {
  width: 100%;
  max-width: 480px; /* default md */
  max-height: calc(100vh - var(--space-8));
  border-radius: var(--radius-2xl); /* 16px */
}


/* ============================================================================
   SIZE VARIANTS
   ============================================================================ */

.dialog-card--sm {
  max-width: 360px;
}

.dialog-card--md {
  /* default — slideover 480px, modal 480px */
  max-width: 480px;
}

.dialog-card--lg.dialog-card--slideover {
  max-width: var(--slideover-width-lg); /* 640px */
}

.dialog-card--lg.dialog-card--modal {
  max-width: 640px;
}

.dialog-card--xl.dialog-card--slideover {
  max-width: 800px;
}

.dialog-card--xl.dialog-card--modal {
  max-width: 720px;
}


/* ============================================================================
   HEADER
   ============================================================================ */

.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.dialog-title {
  font-size: var(--text-lg);
  line-height: var(--lh-lg);
  font-weight: 600;
  color: var(--fg1);
  letter-spacing: var(--track-snug);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0; /* truncate desteği */
}

.dialog-title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dialog-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  border-radius: var(--radius-md);
  color: var(--fg3);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}

.dialog-close:hover {
  background-color: var(--bg-sunken);
  color: var(--fg1);
}

.dialog-close:focus-visible {
  outline: 0;
  box-shadow: var(--shadow-focus);
}


/* ============================================================================
   BODY
   ============================================================================ */

.dialog-body {
  padding: var(--space-5);
  overflow-y: auto;
  flex: 1 1 auto;
  color: var(--fg2);
  line-height: var(--lh-base);
}

/* Slideover body scroll, modal kompakt kalır */
.dialog-card--slideover .dialog-body {
  /* scrollable middle; max-height implicit */
}

.dialog-card--modal .dialog-body {
  /* modal'da body genelde küçük, scroll nadiren gerekir */
}

/* Loading state */
.dialog-body[data-loading="true"] {
  position: relative;
  min-height: 120px;
}

.dialog-body[data-loading="true"]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bg-elevated);
  opacity: 0.6;
  pointer-events: none;
}


/* ============================================================================
   FOOTER
   ============================================================================ */

.dialog-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border);
  background-color: var(--bg-elevated);
  flex-shrink: 0;
}

/* Slideover'da sticky footer önemli — scroll edilebilir body altında */
.dialog-card--slideover .dialog-footer {
  position: sticky;
  bottom: 0;
}

.dialog-footer-spacer {
  flex: 1 1 auto;
}


/* ============================================================================
   BUTTONS (dialog-button — minimal, generic. Faz 2'nin Button component'i
   yazılınca buradan çıkarılacak.)
   ============================================================================ */

.dialog-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 36px;
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}

.dialog-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.dialog-button:focus-visible {
  outline: 0;
  box-shadow: var(--shadow-focus);
}

/* Variants */
.dialog-button--primary {
  background-color: var(--accent);
  color: var(--fg-on-accent);
  border-color: var(--accent);
}

.dialog-button--primary:hover:not(:disabled) {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
}

.dialog-button--primary:active:not(:disabled) {
  background-color: var(--accent-press);
  border-color: var(--accent-press);
}

.dialog-button--ghost {
  background-color: transparent;
  color: var(--fg2);
  border-color: var(--border);
}

.dialog-button--ghost:hover:not(:disabled) {
  background-color: var(--bg-sunken);
  color: var(--fg1);
  border-color: var(--border-strong);
}

.dialog-button--danger {
  background-color: var(--neg);
  color: var(--fg-on-accent);
  border-color: var(--neg);
}

.dialog-button--danger:hover:not(:disabled) {
  filter: brightness(0.92);
}

/* Busy state — spinner ikonu desteği */
.dialog-button[data-busy="true"] {
  pointer-events: none;
  opacity: 0.75;
}


/* ============================================================================
   MODAL VARIANTS — Confirm / Danger için ikon alanı
   ============================================================================ */

.dialog-card--confirm .dialog-body,
.dialog-card--danger .dialog-body,
.dialog-card--warning .dialog-body {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-6) var(--space-5);
}

.dialog-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
}

.dialog-icon--confirm {
  background-color: var(--accent-soft);
  color: var(--accent);
}

.dialog-icon--danger {
  background-color: var(--neg-soft);
  color: var(--neg);
}

.dialog-icon--warning {
  background-color: var(--warn-soft);
  color: var(--warn);
}

.dialog-content {
  flex: 1 1 auto;
  min-width: 0;
}

.dialog-message {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--fg2);
}

.dialog-message-title {
  font-weight: 600;
  color: var(--fg1);
  margin-bottom: var(--space-1);
}


/* ============================================================================
   TRANSITIONS — Alpine x-transition için class'lar
   ============================================================================ */

/* Overlay fade */
@keyframes dialog-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes dialog-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Slideover slide-from-right */
.dialog-card--slideover[data-state="enter-start"] {
  transform: translateX(100%);
  opacity: 1;
}

.dialog-card--slideover[data-state="enter-end"],
.dialog-card--slideover[data-state="leave-start"] {
  transform: translateX(0);
}

.dialog-card--slideover[data-state="leave-end"] {
  transform: translateX(100%);
}

/* Modal scale-fade */
.dialog-card--modal[data-state="enter-start"] {
  transform: scale(0.96) translateY(8px);
  opacity: 0;
}

.dialog-card--modal[data-state="enter-end"],
.dialog-card--modal[data-state="leave-start"] {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.dialog-card--modal[data-state="leave-end"] {
  transform: scale(0.96) translateY(8px);
  opacity: 0;
}


/* ============================================================================
   BODY SCROLL LOCK — dialog.js açıkken html'e .dialog-open class ekler
   ============================================================================ */

html.dialog-open,
html.dialog-open body {
  overflow: hidden;
}


/* ============================================================================
   ACCESSIBILITY — reduce-motion desteği
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  .dialog-overlay,
  .dialog-card--slideover,
  .dialog-card--modal {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}