/* ─────────────────────────────────────────────────────────────────────
   ORION SKELETON — içerik gelene kadar iskelet (shimmer) gösterimi
   ─────────────────────────────────────────────────────────────────────
   Amaç: grid/panel/kart içeriği JS ile sonradan dolan sayfalarda önce
   bomboş bir alan görünüp sonra içeriğin "patlaması" yerine, yüklenirken
   yerini tutan gri iskelet göstermek.

   İki katman vardır:

   1) CSS-only (`:empty`) — DOM'a HİÇ dokunmaz. Boş kaba sadece sınıf
      eklenir; kap dolduğu anda `:empty` eşleşmesi düşer ve iskelet
      kendiliğinden kaybolur. JS'in `innerHTML`/`children.length`
      mantığını bozmaz. (orion-skeleton.js işaretler.)

   2) Tabulator gövdesi (`.orion-sk-loading`) — grid DOM'u hemen kurulur
      ama verisi sonra gelir; gövde arka planına satır iskeleti çizilir.

   3) DOM overlay (`.orion-sk-ov`) — kendi DOM'unu yeniden çizip
      temizlemeyen bileşenler için elle kullanılabilen genel API.

   Kapatma: elemana (veya üstündeki bir kaba) `data-orion-skeleton="off"`,
   ya da `orion-sk-off` sınıfı. JS "settle" anında geride kalan bütün
   iskeletleri `orion-sk-off` ile söndürür.
   ───────────────────────────────────────────────────────────────────── */

:root {
  --orion-sk-base: #e6e7ea;
  --orion-sk-strong: #dcdee3;
  --orion-sk-shine: rgba(255, 255, 255, 0.72);
  --orion-sk-radius: 10px;
  --orion-sk-speed: 1.45s;
}

:root[data-bs-theme="dark"] {
  --orion-sk-base: #353432;
  --orion-sk-strong: #3f3e3c;
  --orion-sk-shine: rgba(255, 255, 255, 0.07);
}

@keyframes orion-sk-shimmer {
  from {
    background-position: 180% 0;
  }
  to {
    background-position: -80% 0;
  }
}

/* ── 1) CSS-only iskelet: yalnızca BOŞ kaplarda ───────────────────── */

.orion-sk-auto:empty {
  --sk-bar: 12px; /* çubuk yüksekliği */
  --sk-pitch: 36px; /* satır aralığı  */
  --sk-top: 0px; /* çubukların başladığı yer */
  --sk-min: 132px; /* boşken ayrılan yer */

  position: relative;
  overflow: hidden;
  min-height: var(--sk-min);
  border-radius: var(--orion-sk-radius);
  background-color: transparent;
  background-repeat: no-repeat;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--orion-sk-base) 0,
    var(--orion-sk-base) var(--sk-bar),
    transparent var(--sk-bar),
    transparent var(--sk-pitch)
  );
  background-size: 100% calc(100% - var(--sk-top));
  background-position: 0 var(--sk-top);
}

/* Shimmer — `:empty` kuralını bozmaz (pseudo-element çocuk sayılmaz). */
.orion-sk-auto:empty::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(
    100deg,
    transparent 25%,
    var(--orion-sk-shine) 50%,
    transparent 75%
  );
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: orion-sk-shimmer var(--orion-sk-speed) linear infinite;
}

/* Varyantlar ------------------------------------------------------- */

/* Tablo/grid: üstte başlık şeridi + altında satırlar */
.orion-sk-auto.orion-sk-v-grid:empty {
  --sk-bar: 12px;
  --sk-pitch: 38px;
  --sk-top: 52px;
  --sk-min: 340px;
  background-image:
    linear-gradient(var(--orion-sk-strong), var(--orion-sk-strong)),
    repeating-linear-gradient(
      to bottom,
      var(--orion-sk-base) 0,
      var(--orion-sk-base) var(--sk-bar),
      transparent var(--sk-bar),
      transparent var(--sk-pitch)
    );
  background-size:
    100% 34px,
    100% calc(100% - var(--sk-top));
  background-position:
    0 0,
    0 var(--sk-top);
}

/* Araç çubuğu / komut şeridi */
.orion-sk-auto.orion-sk-v-bar:empty {
  --sk-bar: 22px;
  --sk-pitch: 22px;
  --sk-min: 34px;
  border-radius: 999px;
  background-image: linear-gradient(var(--orion-sk-base), var(--orion-sk-base));
  background-size: 42% 22px;
  background-position: 0 6px;
}

/* Grafik / harita gibi tek blok alanlar */
.orion-sk-auto.orion-sk-v-chart:empty {
  --sk-min: 240px;
  background-image: linear-gradient(var(--orion-sk-base), var(--orion-sk-base));
  background-size: 100% 100%;
  background-position: 0 0;
}

/* Kart / panel içeriği */
.orion-sk-auto.orion-sk-v-block:empty {
  --sk-bar: 12px;
  --sk-pitch: 30px;
  --sk-min: 118px;
}

/* Tek satırlık küçük alanlar (rozet, sayaç, başlık) */
.orion-sk-auto.orion-sk-v-line:empty {
  --sk-bar: 12px;
  --sk-pitch: 12px;
  --sk-min: 14px;
  border-radius: 999px;
  background-image: linear-gradient(var(--orion-sk-base), var(--orion-sk-base));
  background-size: 60% 12px;
  background-position: 0 1px;
}

/* Grid kapları için sınıf gerekmeden çalışan güvenlik ağı: sayfa
   boyanır boyanmaz iskelet görünsün (JS henüz çalışmamış olabilir). */
.orion-grid-host:empty:not(.orion-sk-off):not([data-orion-skeleton="off"]) {
  min-height: 340px;
  border-radius: var(--orion-sk-radius);
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--orion-sk-strong), var(--orion-sk-strong)),
    repeating-linear-gradient(
      to bottom,
      var(--orion-sk-base) 0,
      var(--orion-sk-base) 12px,
      transparent 12px,
      transparent 38px
    );
  background-size:
    100% 34px,
    100% calc(100% - 52px);
  background-position:
    0 0,
    0 52px;
}

/* Söndürme ---------------------------------------------------------- */

.orion-sk-off:empty,
.orion-sk-off.orion-sk-auto:empty,
[data-orion-skeleton="off"].orion-sk-auto:empty {
  min-height: 0;
  background-image: none;
  border: 0;
}

.orion-sk-off.orion-sk-auto:empty::after,
[data-orion-skeleton="off"].orion-sk-auto:empty::after {
  content: none;
}

/* ── 2) Tabulator: veri gelene kadar gövde iskeleti ───────────────
   Tabulator kendi DOM'unu kurar ve yeniden çizerken kabın çocuklarını
   temizler; bu yüzden içine overlay DÜĞÜM koymak işe yaramaz (eklenir
   eklenmez siliniyor). Bunun yerine gövdeye sınıfla arka plan çiziyoruz —
   Tabulator ne kadar yeniden çizerse çizsin sınıf yerinde kalır. */

.orion-sk-loading .tabulator-tableholder {
  position: relative;
  min-height: 280px;
  background-repeat: no-repeat;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--orion-sk-base) 0,
    var(--orion-sk-base) 12px,
    transparent 12px,
    transparent 38px
  );
  background-size: 100% 100%;
  background-position: 0 14px;
}

.orion-sk-loading .tabulator-tableholder::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(
    100deg,
    transparent 25%,
    var(--orion-sk-shine) 50%,
    transparent 75%
  );
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: orion-sk-shimmer var(--orion-sk-speed) linear infinite;
}

/* Yükleniyor yazısı iskeletin üstünde ikinci bir gürültü olmasın. */
.orion-sk-loading .tabulator-alert,
.orion-sk-loading .tabulator-placeholder {
  opacity: 0;
}

/* ── 3) DOM overlay iskeleti (kendi DOM'unu silmeyen bileşenler) ─── */

.orion-sk-busy {
  position: relative;
}

.orion-sk-ov {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 16px;
  background: var(--orion-surface, #fff);
  border-radius: inherit;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.18s ease;
}

.orion-sk-ov.orion-sk-ov-out {
  opacity: 0;
}

.orion-sk-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.orion-sk-line {
  position: relative;
  overflow: hidden;
  height: 12px;
  flex: 1 1 auto;
  border-radius: 999px;
  background: var(--orion-sk-base);
}

.orion-sk-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    100deg,
    transparent 25%,
    var(--orion-sk-shine) 50%,
    transparent 75%
  );
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: orion-sk-shimmer var(--orion-sk-speed) linear infinite;
}

.orion-sk-row.orion-sk-head .orion-sk-line {
  height: 14px;
  background: var(--orion-sk-strong);
}

/* Hareket duyarlılığı ---------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .orion-sk-auto:empty::after,
  .orion-sk-line::after {
    animation: none;
  }
}