/*
 * Boot skeleton. It draws the shape of the page that is about to load, so the app appears to
 * fill in rather than replacing a splash screen. Vue replaces it when it mounts into #app.
 * The inline script in app.blade.php picks the layout (admin, pos, kds or plain) from the URL.
 */
#loading-bg {
  --boot-bg: #f5f4f3;
  --boot-surface: #fff;
  --boot-block: #ececee;
  --boot-shine: rgb(255 255 255 / 70%);
  --boot-line: #e7e7ea;
  --boot-dot: rgb(17 17 19 / 7%);
  --boot-glow-1: rgb(255 196 160 / 55%);
  --boot-glow-2: rgb(206 192 255 / 50%);

  position: fixed;
  z-index: 9999;
  box-sizing: border-box;
  overflow: hidden;
  background:
    radial-gradient(38rem 28rem at 12% -6%, var(--boot-glow-1), transparent 65%),
    radial-gradient(34rem 26rem at 92% 4%, var(--boot-glow-2), transparent 65%),
    radial-gradient(var(--boot-dot) 1px, transparent 1.5px) 0 0 / 22px 22px,
    var(--boot-bg);
  inset: 0;
}

html[data-loader-theme='dark'] #loading-bg {
  --boot-bg: #070b18;
  --boot-surface: #0e1426;
  --boot-block: #1a2340;
  --boot-shine: rgb(160 180 255 / 8%);
  --boot-line: #1e2742;
  --boot-dot: rgb(160 180 255 / 6%);
  --boot-glow-1: rgb(255 138 76 / 12%);
  --boot-glow-2: rgb(76 92 255 / 22%);
}

@media (prefers-color-scheme: dark) {
  html[data-loader-theme='system'] #loading-bg {
    --boot-bg: #070b18;
    --boot-surface: #0e1426;
    --boot-block: #1a2340;
    --boot-shine: rgb(160 180 255 / 8%);
    --boot-line: #1e2742;
    --boot-dot: rgb(160 180 255 / 6%);
    --boot-glow-1: rgb(255 138 76 / 12%);
    --boot-glow-2: rgb(76 92 255 / 22%);
  }
}

#loading-bg *,
#loading-bg *::before,
#loading-bg *::after {
  box-sizing: border-box;
}

/* Fast loads show only the canvas; the skeleton fades in after a short pause. */
.boot {
  display: none;
  block-size: 100%;
  animation: boot-in 0.25s ease-out 0.3s both;
}

html[data-boot='admin'] .boot--admin,
html[data-boot='pos'] .boot--pos,
html[data-boot='kds'] .boot--kds,
html[data-boot='plain'] .boot--plain {
  display: flex;
}

.boot-card {
  border: 1px solid var(--boot-line);
  border-radius: 20px;
  background: var(--boot-surface);
}

/* A grey bar with a slow highlight passing over it. */
.boot-bar {
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  background: var(--boot-block);
  block-size: 12px;
}

.boot-bar::after {
  position: absolute;
  background: linear-gradient(90deg, transparent, var(--boot-shine), transparent);
  content: '';
  inset: 0;
  transform: translateX(-100%);
  animation: boot-shimmer 1.6s ease-in-out infinite;
}

.boot-bar--title {
  block-size: 26px;
  inline-size: 220px;
  border-radius: 10px;
}

.boot-bar--value {
  block-size: 22px;
  inline-size: 60%;
  border-radius: 8px;
}

.boot-bar--icon {
  flex: none;
  block-size: 34px;
  inline-size: 34px;
  border-radius: 10px;
}

.boot-bar--pill {
  flex: none;
  block-size: 40px;
  inline-size: 120px;
}

.boot-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.boot-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Admin: rail, menu card, then the page with a KPI row and two panels. */
.boot--admin {
  gap: 12px;
  padding: 12px;
}

.boot-rail {
  flex: 0 0 68px;
  padding: 14px;
}

.boot-menu {
  flex: 0 0 248px;
  padding: 22px 16px;
}

.boot-main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 12px;
  min-inline-size: 0;
  padding: 8px 4px;
}

.boot-kpis {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.boot-kpi {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px 20px;
}

.boot-panels {
  display: grid;
  flex: 1 1 auto;
  gap: 12px;
  grid-template-columns: 2fr 1fr;
}

/* POS: top bar, then catalogue, ticket and side panels. */
.boot--pos,
.boot--kds {
  flex-direction: column;
  gap: 10px;
  padding: 12px;
}

.boot-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-block-size: 44px;
}

.boot-pos-panels {
  display: grid;
  flex: 1 1 auto;
  gap: 10px;
  grid-template-columns: 1.08fr 1fr 0.88fr;
}

.boot-pos-panel {
  padding: 14px;
}

.boot-tiles {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  margin-block-start: 14px;
}

.boot-tile {
  block-size: 110px;
  border-radius: 16px;
}

/* KDS: status tabs, then a grid of tickets. */
.boot-tickets {
  display: grid;
  flex: 1 1 auto;
  align-content: start;
  gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  padding-block-start: 8px;
}

.boot-ticket {
  min-block-size: 360px;
  padding: 18px;
}

/* Anything else: the logo mark alone. */
.boot--plain {
  align-items: center;
  justify-content: center;
}

.boot-logo {
  display: grid;
  overflow: hidden;
  border-radius: 18px;
  background: var(--boot-surface);
  block-size: 64px;
  box-shadow: 0 8px 24px rgb(17 17 19 / 8%);
  inline-size: 64px;
  place-items: center;
  animation: boot-breathe 1.8s ease-in-out infinite;
}

.boot-logo img {
  block-size: 44px;
  inline-size: 44px;
  object-fit: contain;
}

.boot-sr {
  position: absolute;
  overflow: hidden;
  block-size: 1px;
  clip-path: inset(50%);
  inline-size: 1px;
  white-space: nowrap;
}

@media (max-width: 1279px) {
  .boot-rail,
  .boot-menu {
    display: none;
  }
}

@media (max-width: 959px) {
  .boot-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .boot-panels,
  .boot-pos-panels {
    grid-template-columns: minmax(0, 1fr);
  }

  .boot-pos-panel + .boot-pos-panel,
  .boot-panels > :last-child {
    display: none;
  }
}

@keyframes boot-in {
  from {
    opacity: 0;
  }
}

@keyframes boot-shimmer {
  to {
    transform: translateX(100%);
  }
}

@keyframes boot-breathe {
  50% {
    transform: scale(0.96);
  }
}

@media (prefers-reduced-motion: reduce) {
  .boot,
  .boot-bar::after,
  .boot-logo {
    animation: none;
  }

  .boot-bar::after {
    display: none;
  }
}