/* ------------------------------------------------------------
   Page skeleton overlay (navigation + page-level refresh)
   - Does NOT cover the navbar (starts below --uw-nav-h)
   - Template is selected via data-active-template on #uw-skel-overlay
   ------------------------------------------------------------ */

.uw-skel-overlay {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  top: calc(var(--uw-nav-h, 64px) + env(safe-area-inset-top));
  bottom: 0;
  z-index: 5500; /* below navbar dropdowns (~6002) */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: rgba(13, 17, 23, 0.94); /* match Darkly vibe */
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  padding: 12px 12px 20px;
}

body.uw-skel-on #uw-skel-overlay { display: block; }

.uw-skel-template { display: none; }
#uw-skel-overlay[data-active-template="default"] .uw-skel-template[data-template="default"] { display: block; }
#uw-skel-overlay[data-active-template="auth_login"] .uw-skel-template[data-template="auth_login"] { display: block; }
#uw-skel-overlay[data-active-template="auth_register"] .uw-skel-template[data-template="auth_register"] { display: block; }
#uw-skel-overlay[data-active-template="change_password"] .uw-skel-template[data-template="change_password"] { display: block; }
#uw-skel-overlay[data-active-template="groups"] .uw-skel-template[data-template="groups"] { display: block; }
#uw-skel-overlay[data-active-template="group"] .uw-skel-template[data-template="group"] { display: block; }
#uw-skel-overlay[data-active-template="group_debts"] .uw-skel-template[data-template="group_debts"] { display: block; }
#uw-skel-overlay[data-active-template="receipt_edit"] .uw-skel-template[data-template="receipt_edit"] { display: block; }
#uw-skel-overlay[data-active-template="receipt_view"] .uw-skel-template[data-template="receipt_view"] { display: block; }
#uw-skel-overlay[data-active-template="drink"] .uw-skel-template[data-template="drink"] { display: block; }
#uw-skel-overlay[data-active-template="drink_view"] .uw-skel-template[data-template="drink_view"] { display: block; }
#uw-skel-overlay[data-active-template="balances"] .uw-skel-template[data-template="balances"] { display: block; }
#uw-skel-overlay[data-active-template="storage"] .uw-skel-template[data-template="storage"] { display: block; }
#uw-skel-overlay[data-active-template="storage_add"] .uw-skel-template[data-template="storage_add"] { display: block; }

/* ---- shimmer blocks ---- */

.uw-skel-block {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(255,255,255,0.10);
}

.uw-skel-block::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-60%);
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04),
    rgba(255,255,255,0.14),
    rgba(255,255,255,0.04)
  );
  animation: uw-skel-shimmer 1.2s linear infinite;
}

@keyframes uw-skel-shimmer {
  0% { transform: translateX(-60%); }
  100% { transform: translateX(60%); }
}

/* sizes */
.uw-skel-h1 { height: 28px; width: 58%; }
.uw-skel-h2 { height: 18px; width: 42%; border-radius: 10px; }
.uw-skel-line { height: 14px; width: 90%; border-radius: 10px; }
.uw-skel-line-sm { height: 12px; width: 65%; border-radius: 10px; }
.uw-skel-btn { height: 38px; width: 132px; border-radius: 12px; }
.uw-skel-btn-sm { height: 34px; width: 96px; border-radius: 12px; }
.uw-skel-card { height: 86px; width: 100%; border-radius: 16px; }
.uw-skel-card-tall { height: 170px; width: 100%; border-radius: 16px; }
.uw-skel-card-xl { height: 240px; width: 100%; border-radius: 16px; }
.uw-skel-chip { height: 24px; width: 84px; border-radius: 999px; }

.uw-skel-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.uw-skel-spacer { flex: 1; }

.uw-skel-stack { display: grid; gap: 12px; }
.uw-skel-gap-8 { display: grid; gap: 8px; }

.uw-skel-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 992px) {
  .uw-skel-grid-2 { grid-template-columns: 1fr 1fr; }
}

/* container width similar to page content */
.uw-skel-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 6px;
}

/* Smaller pages (login / change password) shouldn't render an XL skeleton on wide screens */
#uw-skel-overlay[data-active-template="auth_login"] .uw-skel-page,
#uw-skel-overlay[data-active-template="auth_register"] .uw-skel-page {
  max-width: 520px;
}

#uw-skel-overlay[data-active-template="change_password"] .uw-skel-page {
  max-width: 620px;
}

/* ------------------------------------------------------------
   Offline banner + "unstable connection" panel
   ------------------------------------------------------------ */

.uw-offline-banner {
  position: fixed;
  left: 0;
  right: 0;
  top: calc(var(--uw-nav-h, 64px) + env(safe-area-inset-top));
  z-index: 5600; /* below navbar dropdowns but above skeleton */
  display: none;
  padding: 10px 12px;
  background: rgba(180, 40, 40, 0.92);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

body.uw-offline .uw-offline-banner { display: block; }

.uw-offline-banner .uw-offline-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.uw-offline-banner .uw-offline-text {
  font-weight: 600;
}

.uw-unstable-panel {
  position: fixed;
  left: 0;
  right: 0;
  top: calc(var(--uw-nav-h, 64px) + env(safe-area-inset-top));
  bottom: 0;
  z-index: 5605;
  display: none;
  padding: 16px 12px;
  background: rgba(0,0,0,0.35);
}

body.uw-unstable-on .uw-unstable-panel { display: flex; align-items: flex-start; justify-content: center; }

.uw-unstable-card {
  width: min(560px, 96vw);
  border-radius: 18px;
  padding: 14px 14px 12px;
  background: rgba(20, 24, 32, 0.96);
  box-shadow: 0 10px 32px rgba(0,0,0,0.6);
}

.uw-unstable-title { font-weight: 700; font-size: 1.05rem; margin-bottom: 6px; }
.uw-unstable-desc { color: rgba(255,255,255,0.78); font-size: 0.95rem; margin-bottom: 12px; }

.uw-unstable-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

#uw-skel-overlay[data-active-template="auth_login"] .uw-skel-page,
#uw-skel-overlay[data-active-template="auth_register"] .uw-skel-page {
  margin-top: 3rem;
}

#uw-skel-overlay[data-active-template="auth_login"] .uw-skel-card-xl,
#uw-skel-overlay[data-active-template="auth_register"] .uw-skel-card-xl {
  height: 420px;
}