/*
 * Page-scoped styles for /<locale>/liftler — extracted from
 * legacy/uludaginfocom-v1/liftler.html. Selectors here are
 * intentionally scoped via `[data-page="liftler"]` ancestor or via
 * lift-specific class names (`.lift-scroll-bg`, `.lt`, `.lcode` ...)
 * so they don't leak into other routes.
 *
 * Mounted from apps/web/src/app/layout.tsx alongside pistler.css.
 */

/* ===== critical-css (responsive lift table hides) ===== */
@media (max-width: 480px) {
  .lt thead th:nth-child(3),
  .lt thead th:nth-child(7) {
    display: none;
  }
  .lt {
    font-size: 13px;
  }
}

/* ===== Scroll-bound chairlift background animation ===== */
.lift-scroll-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  /* Bug Report 02.06 (2. takip) — arka plan gondol/kablo daha transparan
     olsun (0.78 fazla baskındı, içeriği gölgeliyordu). */
  opacity: 0.45;
}
.lift-scroll-bg .lsb-cable {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.lift-scroll-bg .lsb-chair {
  position: absolute;
  width: 58px;
  height: 92px;
  top: 0;
  left: 0;
  /* Path: from (0, 7vh) to (100vw, 83vh) following the cable.
     madde 3 (02.06) — start'ı site-header'ın hemen bittiği noktaya (~7vh,
     header altı) çektik (önceki 25vh); SVG kablo y1=16/240≈6.7vh ile hizalı.
     Subtract half-width (29px) to centre the gondola on the cable X,
     and subtract the hook offset (16% of 92px ≈ 15px) so the
     attachment point lands on the cable instead of the top-left corner. */
  transform: translate3d(
    calc(var(--lsb-t, 0) * (100vw - 58px) - 29px),
    calc(7vh + var(--lsb-t, 0) * 76vh - 15px),
    0
  );
  will-change: transform;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.18));
}
.lift-scroll-bg .lsb-chair-1 { --lsb-offset: 0; }
.lift-scroll-bg .lsb-chair-2 { --lsb-offset: -0.33; }
.lift-scroll-bg .lsb-chair-3 { --lsb-offset: -0.66; }
.lift-scroll-bg .lsb-chair img {
  width: 100%;
  height: 100%;
  display: block;
  transform-origin: 50% 16%;
  animation: lsb-sway 3.4s ease-in-out infinite;
}
@keyframes lsb-sway {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}

/* Anchor real page content above the background. Scoped to sections +
 * footer only so it doesn't break sticky header or fixed drawer.
 * Mirrors V1 body[data-page="liftler"] scoping via the same attribute. */
body[data-page="liftler"] > section,
body[data-page="liftler"] > footer {
  position: relative;
  z-index: 1;
}
body[data-page="liftler"] .site-header { z-index: 60; }

/* ===== Responsive overrides (V1 Burak 2026-05-18) ===== */
@media (max-width: 1024px) {
  .lift-stat.total { display: none; }
  .filter-bar .search-in { display: none; }
}

/* Tablet (<=768): leave only Kod, Ad, Tip, Bolge, Durum. */
@media (max-width: 768px) {
  /* Cells + headers, column indices (1-based) per the <thead> order:
   * 1: Kod  2: Ad  3: Tip  4: Kapasite  5: Uzunluk  6: Dusey
   * 7: Bolge  8: Bagli Pist  9: Durum  10: arrow */
  .lt thead th:nth-child(4),  .lt tbody td:nth-child(4),
  .lt thead th:nth-child(5),  .lt tbody td:nth-child(5),
  .lt thead th:nth-child(6),  .lt tbody td:nth-child(6),
  .lt thead th:nth-child(8),  .lt tbody td:nth-child(8),
  .lt thead th:nth-child(10), .lt tbody td:nth-child(10) {
    display: none;
  }
}

/* Mobile (<=480): only Kod, Ad, Durum. */
@media (max-width: 480px) {
  .lt thead th:nth-child(3), .lt tbody td:nth-child(3),
  .lt thead th:nth-child(7), .lt tbody td:nth-child(7) {
    display: none;
  }
  .lt { font-size: 13px; }
  .lt .lcode { font-size: 12px; padding: 3px 7px; }
  .lt .ln { font-size: 14px; }
}

/* Bug Report 02.06 (2. takip) — DURUM filtresi: desktop'ta segment butonlar,
   mobilde (<=768) dropdown. Segment 5 buton dar ekrana sığmıyordu. */
.fb-status-dd { display: none; }
@media (max-width: 768px) {
  #segStatus { display: none; }
  .fb-status-dd { display: block; }
}
/* Bug Report 06.15 — mobilde "Tümü" dropdown'unda ÇİFT ok görünüyordu:
   native <select> chevron + .fb-status-dd içindeki açık SVG chevron üst
   üste biniyordu. Native chevron'u bastır (appearance:none), tek temiz ok
   olarak JSX'teki SVG kalsın. Global .dd select kuralına dokunmadan sadece
   bu select'e scope edilir. */
.fb-status-dd select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.fb-status-dd select::-ms-expand { display: none; }

/* ===== Status badges for PLANNED_OPENING + PENDING (added 2026-05-19) =====
 *
 * The base .badge-s + .d styles live in styles.css next to .badge-open and
 * .badge-closed. The two new badges share the same shape; only the colour
 * scheme differs:
 *   .badge-planned → sky blue  (operational state: "Açılması Planlanıyor")
 *   .badge-pending → amber/yellow (operational state: "Beklemede")
 * Colours avoid collision with the existing green/fuchsia pair.
 */
.badge-planned {
  background: rgba(44, 139, 180, 0.12);
  color: var(--u-blue);
}
.badge-planned .d {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--u-blue);
  box-shadow: 0 0 0 3px rgba(44, 139, 180, 0.18);
}
.badge-pending {
  background: rgba(212, 168, 0, 0.14);
  color: #8a6a00;
}
.badge-pending .d {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d4a800;
  box-shadow: 0 0 0 3px rgba(212, 168, 0, 0.22);
}

/* ===== Toplam saatlik taşıma kapasitesi box — sprint-1 UI bundle
 * (2026-05-20). 4th stat tile in .liftler-stats grid. Blue icon
 * matches V1 stat-pill .s-blue. Uses the same .lift-stat base
 * (in styles.css) for layout + typography. */
.lift-stat.capacity .icn { background: var(--u-blue); color: #fff; }

/* Center-align the surviving copy in the capacity box after the .lab
 * label was removed (Fix L5, 2026-05-21). With just .num + .delta
 * left, the previous left-aligned layout looked off-balance. */
.lift-stat.capacity > div:last-child {
  text-align: center;
}

/* Bug Report 02.06 (2. takip) — mobilde "kişi/saat" kapasite box'ı kaldır;
   sadece Açık + Kapalı tile'ları kalsın ve ekran genişliğine göre ortalansın.
   (.total zaten <=1024 gizli; <=768 grid 4-kolon'dan 2-kolona düşer ve
   max-width ile ortalanır.) */
@media (max-width: 768px) {
  .lift-stat.capacity { display: none; }
  .liftler-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ===== Drawer status badge override (Fix L1, 2026-05-21) =====
 * Base styles.css positions `.drawer .dimg .badge-s` at top:14px,
 * left:14px. That collides with the "Teknik Özellikler" h3 inside
 * the drawer body (the image rail is short on mobile so the badge
 * visually overlaps the heading). Move the badge to the top-right
 * corner of the image rail. */
.drawer .dimg .badge-s {
  left: auto;
  right: 14px;
}

/* ===== 03.06 — Drawer status badge'i lift GENEL sayfasındaki PILL gibi yap.
 * SORUN: pill stilleri (display:inline-flex + padding + border-radius:999px +
 * nokta boyutu) sadece `.lt .badge-s`'e (tablo) scope'luydu. Drawer `.lt`
 * içinde DEĞİL → badge düz yazı + soluk dikdörtgen olarak çıkıyordu (yuvarlak
 * hap ve renkli nokta yoktu). Tam pill stilini drawer'a da veriyoruz +
 * görselde okunsun diye OPAK pale arka plan (12% renk over white blend). */
.drawer .dimg .badge-s {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px; border: 0;
  font-family: 'Mark Pro'; font-weight: 700; font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.drawer .dimg .badge-s .d { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.drawer .dimg .badge-open { background: #e4f3eb; color: var(--u-green); }
.drawer .dimg .badge-open .d { background: var(--u-green); }
.drawer .dimg .badge-closed { background: #fce3ed; color: var(--u-fuchsia); }
.drawer .dimg .badge-closed .d { background: var(--u-fuchsia); }
.drawer .dimg .badge-planned { background: #e3eff5; color: var(--u-blue); }
.drawer .dimg .badge-planned .d { background: var(--u-blue); }
.drawer .dimg .badge-pending { background: #fbf3df; color: #8a6a00; }
.drawer .dimg .badge-pending .d { background: #d4a800; }

/* ===== .lift-scroll-bg header offset (Fix L3, 2026-05-21) =====
 * Cable SVG used to start from y:0 of the viewport, which slid
 * under the sticky header. Anchor the background below the header
 * so the cable visually starts where the page content does. The
 * header is content-sized (~72px on desktop); use a value that
 * comfortably clears it. */
.lift-scroll-bg {
  top: 80px;
}
@media (max-width: 768px) {
  .lift-scroll-bg { top: 64px; }
}