﻿/* =========================================================
 * LAF_Dialog  (M udDialog + M udDialogProvider muadili)
 * ---------------------------------------------------------
 * ÖNEMLİ: Bu dosya index.html'de yuklenmeli VEYA bu blok mevcut
 * laf.css'inin icine yapistirilmalidir. Yuklenmezse dialog'un
 * arka plani / flex yerlesimi olusmaz; icerik buzulur, arkadaki
 * sayfa gorunur ve autosize dikine buyur.
 *
 * Tema renkleri --LAF-palette-* uzerinden.
 *
 * SCRIM NOTU:
 * Karartma artik overlay'in background'u ile DEGIL, dialog'un
 * dis box-shadow'u (0 0 0 100vmax) ile yapilir. Dis golge yalnizca
 * border-box'in DISINA cizildigi icin dialog'un tam arkasi
 * kararmaz; glass/blur yuzey temiz gorunur. Golge border-radius'a
 * uyar, drag/resize'da kendiliginden dialog'u takip eder.
 * Overlay yerinde kalir (seffaf): tiklamayi engeller, backdrop
 * click'i yakalar ve dialog'u ortalar.
 *
 * DIKKAT: LAFDialog.razor -> DialogStyle icindeki inline
 * "box-shadow:var(--LAF-default-dialog-shadow);" satiri
 * KALDIRILMALIDIR, aksi halde bu kurali ezer.
 * --LAF-default-dialog-shadow hicbir temada "none" olmamali
 * (gerekirse "0 0 0 transparent" kullanin).
 * ========================================================= */

/* ── OVERLAY (M udDialogProvider muadili) ──
   Sadece tiklama yakalar + ortalar; karartmaz. */
.laf-dlg-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

/* ── DIALOG SHELL ── */
.laf-dlg {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: auto;
    min-width: 320px;
    max-width: 95vw;
    max-width: 95dvw;
    max-height: 90vh;
    max-height: 90dvh;
    background: var(--LAF-palette-surface);
    color: var(--LAF-palette-text);
    overflow: hidden;
    border-radius: 12px;
    /* 1. katman: dialog'un kendi golgesi
       2. katman: scrim (dialog'un arkasi haric her yeri karartir) */
    box-shadow: var(--LAF-default-dialog-shadow), 0 0 0 100vmax var(--LAF-palette-overlay);
    animation: laf-dlg-in .12s ease-out;
}

/* Scrim istenmeyen dialoglarda yalnizca normal golge */
.laf-dlg-overlay.laf-dlg-no-scrim .laf-dlg {
    box-shadow: var(--LAF-default-dialog-shadow);
}

@keyframes laf-dlg-in {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── LAYOUT BÖLÜMLERİ ──
   .mud-dialog-content override'inla birebir: overflow:hidden + padding:0.
   Boylece .laf2-root (height:100%) definite yukseklik alir, footer dibe oturur,
   scrollbar hic cikmaz, autosize dongusu olusmaz. */
.laf-dlg-titlebar {
    flex: 0 0 auto;
    min-width: 0;
}

.laf-dlg-content {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    padding: 0;
}

.laf-dlg-actions {
    flex: 0 0 auto;
    min-width: 0;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 8px 8px;
}

/* Title / Action yoksa o alani tamamen kaldir */
.laf-dialog-no-title .laf-dlg-titlebar {
    display: none;
}

.laf-dialog-no-action .laf-dlg-actions {
    display: none;
}



/* ── NATIVE BUTONLAR (eski M udButton text-button gorunumu) ── */
.laf-dlg-btn {
    border: none;
    background: transparent;
    color: var(--LAF-palette-text);
    font: inherit;
    cursor: pointer;
    border-radius: 8px;
    padding: 8px 16px;
    text-transform: none;
    transition: background-color .12s ease;
}

    .laf-dlg-btn:hover {
        background: var(--LAF-palette-hover);
    }

.laf-dlg-btn-primary {
    color: var(--LAF-palette-primary);
    font-weight: 600;
}

/* ── BODY SCROLL LOCK ── */
body.laf-dlg-scroll-lock {
    overflow: hidden;
}

/**TOAST*/

.laf-toast {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    max-width: min(90vw, 480px);
    padding: 12px 20px;
    border-radius: var(--LAF-default-border-radius);
    font-size: 1rem;
    line-height: 1.4;
    text-align: center;
    color: #fff;
    background: var(--mud-palette-dark, #323232);
    box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12);
    pointer-events: none;
    white-space: pre-wrap;
    word-break: break-word;
    animation: laf-toast-in 200ms ease-out;
}

@keyframes laf-toast-in {
    from {
        opacity: 0;
        transform: translate(-50%, 12px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%);
    }
}

.laf-toast-info {
    background: var(--LAF-palette-info);
}

.laf-toast-success {
    background: var(--LAF-palette-success);
}

.laf-toast-error {
    background: var(--LAF-palette-error);
}

.laf-toast-normal {
    background: var(--LAF-palette-primary);
}



/* ── LAFDialog başlık çubuğu (drag handle) ── */
.laf-dialog-root .laf-dialog-title {
    cursor: move;
    user-select: none;
    padding: 6px 16px;
    border-bottom: 1px solid var(--LAF-palette-lines);
    display: flex;
    align-items: center;
    /*    line-height:1.75;*/
}

/* ── OPT-IN SCROLL ──
   Sadece icerigi .laf-dlg-scroll ile sarilan dialoglarda devreye girer.
   Diger dialoglarin .laf-dlg-content davranisi degismez. */
.laf-dlg-content:has(> .laf-dlg-scroll) {
    display: flex;
    flex-direction: column;
}

.laf-dlg-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

/* ── OPT-IN FILL ──
   Sadece icerigi .laf-dlg-fill ile sarilan dialoglarda devreye girer:
   icerik dialog'un kalan yuksekligini doldurur, resize ile buyur/kuculur.
   Diger dialoglarin .laf-dlg-content davranisi degismez. */
.laf-dlg-content:has(> .laf-dlg-fill) {
    display: flex;
    flex-direction: column;
}

.laf-dlg-fill {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
