/* =============================================================================
   Envanter Takip — PWA & gezinme deneyimi stilleri
   -----------------------------------------------------------------------------
   Sahip: Ajan P1.  app.css'e DOKUNULMAZ; bu dosya app.css'ten SONRA yüklenir.
   İçerik:
     1. Belgeler arası görünüm geçişleri (View Transitions)
     2. Üst ince ilerleme çubuğu
     3. "Uygulamayı yükle" çubuğu
   Tüm hareketler prefers-reduced-motion: reduce altında kapatılır.
   ========================================================================== */

/* ==========================================================================
   1. Belgeler arası görünüm geçişleri
   Destekleyen tarayıcılarda (Chrome/Edge 126+) sayfalar arası beyaz "flash"
   kaybolur. Desteklemeyen tarayıcılar bu kuralı görmezden gelir.
   ========================================================================== */
@view-transition {
  navigation: auto;
}

/* Kök geçiş: kısa ve sade çapraz geçiş. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 180ms;
  animation-timing-function: cubic-bezier(.2, 0, .2, 1);
}

@media (prefers-reduced-motion: no-preference) {
  /* Sayfalar arasında SABİT kalan kabuk parçalarına kararlı ad ver:
     böylece yeniden çizilmek yerine "aynı öğe" gibi davranır ve titremez.
     Not: `.app-sidebar-fixed` yalnız masaüstü sütununda; offcanvas kopyası
     adsız bırakılır (aynı ad iki kez kullanılamaz). */
  .app-sidebar-fixed { view-transition-name: app-sidebar; }
  .app-topbar        { view-transition-name: app-topbar; }
  .app-content       { view-transition-name: app-content; }

  /* Sidebar ve topbar: hiç animasyon yok — yerinde duruyormuş gibi görünsün. */
  ::view-transition-old(app-sidebar),
  ::view-transition-new(app-sidebar),
  ::view-transition-old(app-topbar),
  ::view-transition-new(app-topbar) {
    animation: none;
    mix-blend-mode: normal;
  }

  /* İçerik alanı: çok kısa bir yukarı kayma + solma. */
  ::view-transition-old(app-content) {
    animation: pwa-content-out 140ms cubic-bezier(.4, 0, 1, 1) both;
  }
  ::view-transition-new(app-content) {
    animation: pwa-content-in 220ms cubic-bezier(0, 0, .2, 1) both;
  }
}

@keyframes pwa-content-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-4px); }
}

@keyframes pwa-content-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-old(app-content),
  ::view-transition-new(app-content),
  ::view-transition-old(app-sidebar),
  ::view-transition-new(app-sidebar),
  ::view-transition-old(app-topbar),
  ::view-transition-new(app-topbar) {
    animation: none !important;
  }
}

/* ==========================================================================
   2. Üst ilerleme çubuğu
   pwa.js, gezinme başladığında `.is-active` ekler; sayfa yüklenince tamamlar.
   ========================================================================== */
.pwa-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 2147483000;            /* topbar (1020) ve offcanvas (1045) üstünde */
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease;
}

.pwa-progress.is-active {
  opacity: 1;
}

.pwa-progress-bar {
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--app-primary, #0f766e), var(--app-accent, #d97706));
  box-shadow: 0 0 8px rgba(15, 118, 110, .45);
  transition: transform 220ms cubic-bezier(.25, .8, .3, 1);
  will-change: transform;
}

/* Yazdırmada görünmesin. */
@media print {
  .pwa-progress,
  .pwa-install-bar { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .pwa-progress { transition: none; }
  .pwa-progress-bar { transition: none; }
}

/* ==========================================================================
   3. "Uygulamayı yükle" çubuğu
   ========================================================================== */
.pwa-install-bar {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 1090;                  /* toast yığınının (2000) altında kalır */
  margin-inline: auto;
  max-width: 560px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--app-surface, #fff);
  color: var(--app-text, #0f172a);
  border: 1px solid var(--app-border, #e3e8ef);
  border-radius: var(--app-radius, 12px);
  box-shadow: var(--app-shadow, 0 4px 16px rgba(15, 23, 42, .12));
  animation: pwa-bar-in 260ms cubic-bezier(0, 0, .2, 1) both;
}

.pwa-install-bar[hidden] { display: none !important; }

.pwa-install-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--app-radius-sm, 8px);
  background: var(--app-primary-soft, #ccfbf1);
  color: var(--app-primary, #0f766e);
  font-size: 19px;
}

.pwa-install-text {
  flex: 1 1 auto;
  min-width: 0;
}

.pwa-install-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

.pwa-install-hint {
  margin: 2px 0 0;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--app-text-muted, #64748b);
}

.pwa-install-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* iOS yönergesi tek satıra sığmaz; o modda aksiyonlar alta iner. */
.pwa-install-bar.is-ios {
  flex-wrap: wrap;
}
.pwa-install-bar.is-ios .pwa-install-actions {
  margin-left: auto;
}

@media (max-width: 575.98px) {
  .pwa-install-bar {
    flex-wrap: wrap;
    left: 12px;
    right: 12px;
    bottom: 12px;
  }
  .pwa-install-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

@keyframes pwa-bar-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .pwa-install-bar { animation: none; }
}