/* bottom-sheet — aşağıdan qalxan vərəq: modal pəncərənin mobil qarşılığı.
 *
 * 🔴 MODAL SİYASƏTİ: backdrop kliki, ESC, timeout ilə bağlanma QADAĞANDIR.
 * `.bottom-sheet__overlay`-də heç bir interaktiv davranış yoxdur - yalnız
 * vizual qaranlıqlaşdırma. Bağlanma başlıqdakı X və "Ləğv et" düymələri
 * ilədir (bax: index.tsx `onClose` / `onCancel`).
 */

/* `fixed`, `relative` DEYİL: vərəq üst qatdır, səhifə axınının bir hissəsi yox.
 * Əvvəl `position: relative; min-height: 100dvh` idi - tək halda düzgün
 * görünürdü, amma qabıqla birlikdə yığılanda ya panel aşağı sürüşürdü, ya da
 * ekrandan kənarda ikinci "səhifə" kimi qalırdı. `fixed` hər iki halda eyni
 * işləyir: tək preview-də də viewport-u örtür, kompozisiyada da üstə çıxır. */
.bottom-sheet {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  align-items: end;
  font-family: var(--font-body);
}

/* --- Fon qaranlıqlaşdırma (interaktiv deyil) */

.bottom-sheet__overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay);
  /* `--overlay` tam qeyri-şəffaf rəngdir - şəffaflıq burada verilir
     (app/modal ilə eyni qayda). Onsuz altdakı ekran tamamilə itir. */
  opacity: 0.55;
}

/* --- Vərəq paneli */

.bottom-sheet__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 85vh;
  background: var(--surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
  padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
}

.bottom-sheet__grabber {
  width: 2.5rem;
  height: 0.25rem;
  margin: var(--space-3) auto var(--space-2);
  border-radius: var(--radius-full);
  background: var(--border-strong);
  flex-shrink: 0;
}

/* --- Başlıq */

.bottom-sheet__header {
  display: grid;
  grid-template-columns: 1fr 2.75rem;
  align-items: start;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--border);
}

.bottom-sheet__heading {
  min-width: 0;
}

.bottom-sheet__title {
  margin: 0 0 var(--space-1);
  font-size: var(--size-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  color: var(--text);
}

.bottom-sheet__desc {
  margin: 0;
  font-size: var(--size-sm);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}

.bottom-sheet__close {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.bottom-sheet__close .icon { width: 1.25rem; height: 1.25rem; }

.bottom-sheet__close:hover { background: var(--hover-veil); }

.bottom-sheet__close:focus-visible,
.bottom-sheet__row:focus-visible,
.bottom-sheet__cancel:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

/* --- Əməliyyat sətirləri */

.bottom-sheet__actions {
  display: flex;
  flex-direction: column;
  padding: var(--space-2) var(--space-2);
}

.bottom-sheet__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-2);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text);
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
  text-align: start;
  cursor: pointer;
}

.bottom-sheet__row:hover { background: var(--hover-veil); }

.bottom-sheet__row-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text-muted);
}

.bottom-sheet__row-icon .icon { width: 1.125rem; height: 1.125rem; }

.bottom-sheet__row-label { flex: 1 1 auto; }

/* Təhlükəli əməliyyat (sil) - danger rəngi */

.bottom-sheet__row--danger { color: var(--danger); }

.bottom-sheet__row--danger .bottom-sheet__row-icon {
  background: var(--danger-subtle);
  color: var(--danger);
}

/* --- Ləğv et düyməsi */

.bottom-sheet__cancel {
  margin: var(--space-2) var(--space-4) 0;
  min-height: 2.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font-size: var(--size-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.bottom-sheet__cancel:hover { background: var(--hover-veil); }

/* Planşet və yuxarı: vərəq tam eni tutmur, mərkəzdə telefon eninə
   məhdudlaşır ki, geniş ekranda əsassız uzanmasın. */
@media (min-width: 40rem) {
  .bottom-sheet__panel {
    max-width: 26rem;
    margin-inline: auto;
  }
}