/*
   ViyaBook Skeleton Loading    skeleton.css
   ── ONE shared loading system for every page ──
   Light + dark colours come from CSS variables, so the SAME shimmer,
   speed and shape appear everywhere. Do not add per-page skeleton CSS.
    */

/*  Theme tokens (single source of truth for skeleton colours)  */
:root {
  --viya-skel-base: #e8edf5;   /* shimmer base   */
  --viya-skel-hi:   #f4f7fc;   /* shimmer highlight */
  --viya-skel-card: #ffffff;   /* card surface while loading */
  --viya-skel-page: #f5f8fd;   /* page background while loading */
}
html.viya-dv {
  --viya-skel-base: #1d2839;
  --viya-skel-hi:   #27344a;
  --viya-skel-card: #0f1830;
  --viya-skel-page: #0a0f1e;
}

/*  Shimmer keyframe  */
@keyframes viya-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/*  Base shimmer cell (used by JS-injected elements + generic markup)  */
.skel-cell,
.skel,
.skel-line {
  background: linear-gradient(90deg, var(--viya-skel-base) 25%, var(--viya-skel-hi) 50%, var(--viya-skel-base) 75%);
  background-size: 200% 100%;
  animation: viya-shimmer 1.55s ease-in-out infinite;
  border-radius: 5px;
  display: block;
}

/* Generic block shimmer (e.g. dashboard KPI values) */
.skel { color: transparent !important; border-radius: 8px; overflow: hidden; }
/* Generic text line shimmer (e.g. dashboard card lists) */
.skel-line { height: 14px; margin: 10px 0; border-radius: 7px; }

html,
body {
  background: var(--viya-skel-page);
}

html.viya-loading body {
  background: var(--viya-skel-page) !important;
}

/* Avatar circle */
.skel-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Skeleton table row */
.skel-row {
  pointer-events: none;
}
.skel-row td {
  padding: 13px 16px !important;
  border-bottom: 1px solid #f0f4fa;
  vertical-align: middle;
}
html.viya-dv .skel-row td { border-bottom-color: #1b2740; }

/* Skeleton list item */
.skel-list-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #f0f4fa;
  pointer-events: none;
}
html.viya-dv .skel-list-item { border-bottom-color: #1b2740; }

/*  data-skel inline shimmer spans  */
[data-skel] .skel-val,
span.skel-val {
  display: inline-block;
  background: linear-gradient(90deg, var(--viya-skel-base) 25%, var(--viya-skel-hi) 50%, var(--viya-skel-base) 75%);
  background-size: 200% 100%;
  animation: viya-shimmer 1.55s ease-in-out infinite;
  border-radius: 5px;
  color: transparent;
}

/*
   CSS-driven skeleton: html.viya-loading

   These selectors cover all ViyaBook page types
   without needing per-element HTML changes.
    */

/* Common shimmer mixin applied via class */
html.viya-loading .viya-skel-target,
html.viya-loading .kpis .kpi-value,
html.viya-loading .kpis .kpi-note,
html.viya-loading .summary-grid .summary strong,
html.viya-loading .summary-grid .summary p.sub,
html.viya-loading .summary-tile strong,
html.viya-loading .closing-row strong,
html.viya-loading .summary-item strong,
html.viya-loading .page-head h1,
html.viya-loading .page-head .subtitle,
html.viya-loading .main-head h1,
html.viya-loading .main-head p,
html.viya-loading .dashboard-title,
html.viya-loading .dashboard-subtitle,
html.viya-loading .topbar input,
html.viya-loading .dashboard-topbar input,
html.viya-loading .viya-app-title,
html.viya-loading .card h2,
html.viya-loading .card h3,
html.viya-loading [data-skel] {
  color: transparent !important;
  background: linear-gradient(90deg, var(--viya-skel-base) 25%, var(--viya-skel-hi) 50%, var(--viya-skel-base) 75%) !important;
  background-size: 200% 100% !important;
  animation: viya-shimmer 1.55s ease-in-out infinite !important;
  border-radius: 5px !important;
  display: inline-block;
  min-width: 64px;
  /* Hide child content */
  position: relative;
}

/* Force minimum width on small values */
html.viya-loading .kpis .kpi-value { min-width: 100px; min-height: 28px; }
html.viya-loading .kpis .kpi-note  { min-width: 80px;  min-height: 14px; margin-top: 4px; }
html.viya-loading .summary-grid .summary strong { min-width: 90px; min-height: 22px; }
html.viya-loading .summary-grid .summary p.sub  { min-width: 120px; min-height: 13px; }
html.viya-loading .summary-tile strong  { min-width: 80px; min-height: 20px; }
html.viya-loading .closing-row strong   { min-width: 80px; min-height: 18px; }
html.viya-loading .summary-item strong  { min-width: 36px; min-height: 18px; }
html.viya-loading .page-head h1,
html.viya-loading .main-head h1,
html.viya-loading .dashboard-title { min-width: 180px; min-height: 32px; }
html.viya-loading .page-head .subtitle,
html.viya-loading .main-head p,
html.viya-loading .dashboard-subtitle { min-width: 260px; min-height: 14px; }
html.viya-loading .topbar input,
html.viya-loading .dashboard-topbar input { min-height: 42px; width: 100%; }

/* Hide icons/labels inside shimmer containers so they don't show through */
html.viya-loading .kpis .kpi-icon { opacity: 0.3; }

/*  Sidebar skeleton (sidebar is dark in both themes → translucent shimmer)  */
html.viya-loading .sidebar .biz-name,
html.viya-loading .sidebar .biz-type,
html.viya-loading .sidebar .nav-link span,
html.viya-loading .sidebar nav a,
html.viya-loading .viya-sidebar nav a,
html.viya-loading [id="sidebarBizName"],
html.viya-loading [id="sidebarBizType"] {
  color: transparent !important;
  background: linear-gradient(90deg, rgba(255,255,255,.08) 25%, rgba(255,255,255,.16) 50%, rgba(255,255,255,.08) 75%) !important;
  background-size: 200% 100% !important;
  animation: viya-shimmer 1.55s ease-in-out infinite !important;
  border-radius: 4px !important;
  display: inline-block;
  min-width: 80px;
}

html.viya-loading .sidebar .nav-link span,
html.viya-loading .sidebar nav a,
html.viya-loading .viya-sidebar nav a {
  min-height: 14px;
  min-width: 108px;
}

html.viya-loading .card,
html.viya-loading .summary,
html.viya-loading .summary-tile,
html.viya-loading .stat-card,
html.viya-loading .mini-card {
  background-color: var(--viya-skel-card) !important;
}

/*  Settings skeleton  */
html.viya-loading .field input:not([type=checkbox]):not([type=radio]),
html.viya-loading .field select,
html.viya-loading .field textarea {
  color: transparent !important;
  background: linear-gradient(90deg, var(--viya-skel-base) 25%, var(--viya-skel-hi) 50%, var(--viya-skel-base) 75%) !important;
  background-size: 200% 100% !important;
  animation: viya-shimmer 1.55s ease-in-out infinite !important;
  border-radius: 8px !important;
}

/*  Staff stats  */
html.viya-loading .stat-value,
html.viya-loading [class*="stat-card"] strong,
html.viya-loading [class*="stats-card"] strong {
  color: transparent !important;
  background: linear-gradient(90deg, var(--viya-skel-base) 25%, var(--viya-skel-hi) 50%, var(--viya-skel-base) 75%) !important;
  background-size: 200% 100% !important;
  animation: viya-shimmer 1.55s ease-in-out infinite !important;
  border-radius: 5px !important;
  display: inline-block;
  min-width: 48px;
}

/*
   Timeout banner
    */
#viyaSkelBar {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  background: #0f2549;
  color: #fff;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
}
#viyaSkelBar.visible { display: flex; }
#viyaSkelBar button {
  background: #0b72ff;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 4px 14px;
  font: inherit;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  flex-shrink: 0;
}
#viyaSkelBar button:hover { background: #0057e0; }

/*
   Page-leave fade (prevents white flash between pages)
    */
body.viya-leaving {
  opacity: 0 !important;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

/* Content fade-in after skeleton done */
.viya-content-ready {
  animation: viya-fadein 0.25s ease forwards;
}
@keyframes viya-fadein {
  from { opacity: 0.6; }
  to   { opacity: 1; }
}

/*
   Responsive: skeleton works on all breakpoints
    */
@media (max-width: 768px) {
  html.viya-loading .kpis .kpi-value { min-width: 70px; }
  html.viya-loading .summary-grid .summary strong { min-width: 60px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   STANDARD SKELETON OVERLAY  (#viyaSkelStd / .viya-skel-std)
   One self-contained, full-screen loading skeleton injected by skeleton.js so
   EVERY data page shows the exact same shape regardless of its own markup:
   fake sidebar lines · header (title + subtitle + pill + top-right button) ·
   a row of 4 KPI cards · a content card (4 tab pills + 6 full-width row bars).
   `.vss-simple` drops the KPI cards + tab pills (paper/form pages such as
   invoice-detail, checkout) → plain shimmer bars only.
   All colours are theme-aware via the --viya-skel-* tokens (light + dark), and
   the overlay is removed on data-ready / empty / error / 10s-timeout.
   ══════════════════════════════════════════════════════════════════════════ */
.viya-skel-std {
  position: fixed;
  inset: 0;
  z-index: 9990;
  display: flex;
  background: var(--viya-skel-page);
  overflow: hidden;
  opacity: 1;
  transition: opacity .28s ease;
}
.viya-skel-std.viya-skel-hide { opacity: 0; pointer-events: none; }

/* Shared shimmer bar (theme-aware) */
.viya-skel-std .vss-bar {
  background: linear-gradient(90deg, var(--viya-skel-base) 25%, var(--viya-skel-hi) 50%, var(--viya-skel-base) 75%);
  background-size: 200% 100%;
  animation: viya-shimmer 1.55s ease-in-out infinite;
  border-radius: 8px;
}

/* Fake sidebar — dark in both themes (matches the real ViyaBook sidebar) */
.viya-skel-std .vss-side {
  width: 244px;
  flex-shrink: 0;
  background: #101a30;
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.viya-skel-std .vss-side .vss-logo,
.viya-skel-std .vss-side .vss-nav {
  background: linear-gradient(90deg, rgba(255,255,255,.07) 25%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.07) 75%);
  background-size: 200% 100%;
  animation: viya-shimmer 1.55s ease-in-out infinite;
  border-radius: 7px;
}
.viya-skel-std .vss-side .vss-logo { height: 34px; width: 140px; margin-bottom: 16px; }
.viya-skel-std .vss-side .vss-nav  { height: 13px; }

/* Main column */
.viya-skel-std .vss-main {
  flex: 1;
  min-width: 0;
  padding: 26px 30px;
  overflow: hidden;
}

/* Header: title bar + subtitle + small pill + top-right button pill */
.viya-skel-std .vss-head  { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 26px; }
.viya-skel-std .vss-htext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 11px; }
.viya-skel-std .vss-title { height: 30px; width: 240px; max-width: 55%; }
.viya-skel-std .vss-sub   { height: 14px; width: 330px; max-width: 78%; }
.viya-skel-std .vss-pill  { height: 20px; width: 92px; border-radius: 999px; }
.viya-skel-std .vss-btn   { height: 42px; width: 150px; border-radius: 11px; flex-shrink: 0; }

/* Row of 4 KPI-card skeletons */
.viya-skel-std .vss-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 22px; }
.viya-skel-std .vss-kpi {
  background: var(--viya-skel-card);
  border: 1px solid rgba(148,163,184,.16);
  border-radius: 14px;
  padding: 17px 18px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.viya-skel-std .vss-kpi .k1 { height: 13px; width: 52%; }
.viya-skel-std .vss-kpi .k2 { height: 26px; width: 72%; }
.viya-skel-std .vss-kpi .k3 { height: 11px; width: 40%; }

/* Content card: 4 tab-pill skeletons + full-width row bars */
.viya-skel-std .vss-card {
  background: var(--viya-skel-card);
  border: 1px solid rgba(148,163,184,.16);
  border-radius: 16px;
  padding: 18px 20px;
}
.viya-skel-std .vss-tabs { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.viya-skel-std .vss-tab  { height: 32px; width: 94px; border-radius: 999px; }
.viya-skel-std .vss-rows { display: flex; flex-direction: column; gap: 16px; }
.viya-skel-std .vss-row  { height: 15px; width: 100%; }
.viya-skel-std .vss-row:nth-child(even) { width: 94%; }

/* SIMPLE variant → no KPI cards, no tab pills, just plain shimmer bars */
.viya-skel-std.vss-simple .vss-kpis,
.viya-skel-std.vss-simple .vss-tabs { display: none; }
.viya-skel-std.vss-simple .vss-card { padding: 26px 24px; }
.viya-skel-std.vss-simple .vss-rows { gap: 18px; }
.viya-skel-std.vss-simple .vss-row  { height: 17px; }

/* Mobile: drop the fake sidebar, full-width main below the safe area, KPIs 2-up */
@media (max-width: 768px) {
  .viya-skel-std .vss-side  { display: none; }
  .viya-skel-std .vss-main  { padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px 18px; }
  .viya-skel-std .vss-kpis  { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .viya-skel-std .vss-title { max-width: 70%; }
  .viya-skel-std .vss-btn   { width: 46px; }
}