/* Phase 82.7.6.38.5.8.1.28 · Dashboard / Data Visualization / Empty & Loading Foundation
   Presentation only. Builds on .1.24 UI + .1.25 responsive + .1.26 components + .1.27 forms.
   Scope: platform console, tenant admin dashboard/report/data surfaces, standalone employee/admin metrics.
   Customer ordering, POS and legacy KDS are intentionally excluded. */

:root {
  --ui-data-gap:14px;
  --ui-data-card-min:112px;
  --ui-data-number:clamp(1.55rem,2.2vw,2rem);
  --ui-track:#E2E8F0;
  --ui-chart:#0F766E;
  --ui-chart-soft:#CCFBF1;
  --ui-skeleton-a:#F1F5F9;
  --ui-skeleton-b:#E2E8F0;
}

/* ---------- KPI / metric language ---------- */
html:not(.legacy-kds-view) .admin-shell :where(.metric-grid,.report-metrics,.compact-metrics,.inventory-metrics,.media-storage-metrics,.availability-status-grid),
.platform-shell .platform-metrics,
.ui-foundation-page .metrics {
  display:grid;
  gap:var(--ui-data-gap);
  align-items:stretch;
}
html:not(.legacy-kds-view) .admin-shell .metric-grid,
html:not(.legacy-kds-view) .admin-shell :where(.report-metrics,.compact-metrics,.inventory-metrics,.media-storage-metrics,.availability-status-grid),
.platform-shell .platform-metrics {
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.ui-foundation-page .metrics { grid-template-columns:repeat(5,minmax(0,1fr)); }

html:not(.legacy-kds-view) .admin-shell :where(.metric-grid,.report-metrics,.compact-metrics,.inventory-metrics,.media-storage-metrics,.availability-status-grid) > *,
.platform-shell .platform-metrics > *,
.ui-foundation-page .metrics > .metric {
  position:relative;
  min-width:0;
  min-height:var(--ui-data-card-min);
  overflow:hidden;
  padding:17px 18px;
  border:1px solid var(--ui-border,#E2E8F0);
  border-radius:16px;
  background:var(--ui-surface,#fff);
  box-shadow:var(--ui-shadow-card,0 1px 2px rgba(15,23,42,.03),0 8px 24px rgba(15,23,42,.05));
}
html:not(.legacy-kds-view) .admin-shell .metric-grid > article::before,
.platform-shell .platform-metrics > article::before,
.ui-foundation-page .metrics > .metric::before {
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:var(--ui-primary,#0F766E);
  opacity:.8;
}
html:not(.legacy-kds-view) .admin-shell .metric-grid > article.accent {
  border-color:#99F6E4;
  background:linear-gradient(145deg,#FFFFFF 0%,#F0FDFA 100%);
}
html:not(.legacy-kds-view) .admin-shell :where(.metric-grid,.report-metrics,.compact-metrics,.inventory-metrics,.media-storage-metrics) :where(p,span,small):not(.status-chip),
.platform-shell .platform-metrics :where(span,small),
.ui-foundation-page .metrics .metric :where(span,small,.sub) {
  color:var(--ui-muted,#64748B);
}
html:not(.legacy-kds-view) .admin-shell :where(.metric-grid,.report-metrics,.compact-metrics,.inventory-metrics,.media-storage-metrics) strong,
.platform-shell .platform-metrics strong,
.ui-foundation-page .metrics .metric strong {
  display:block;
  margin-top:6px;
  color:var(--ui-text,#0F172A);
  font-size:var(--ui-data-number);
  line-height:1.08;
  letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;
}
html:not(.legacy-kds-view) .admin-shell .metric-grid > article > span:first-child {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  margin-bottom:10px;
  border-radius:9px;
  color:var(--ui-primary,#0F766E);
  background:var(--ui-primary-soft,#E6F5F3);
  font-size:11px;
  font-weight:850;
}

/* ---------- Dashboard / report composition ---------- */
html:not(.legacy-kds-view) .admin-shell .report-grid {
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);
  gap:18px;
  align-items:start;
}
html:not(.legacy-kds-view) .admin-shell .report-grid > .panel:first-child { grid-row:span 2; }
html:not(.legacy-kds-view) .admin-shell :where(.report-grid,.operations-grid,.inventory-page,.expense-layout) > * { min-width:0; }

html:not(.legacy-kds-view) .admin-shell .report-list { display:grid; }
html:not(.legacy-kds-view) .admin-shell .report-list > article {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:58px;
  padding:12px 18px;
  border-bottom:1px solid var(--ui-border,#E2E8F0);
}
html:not(.legacy-kds-view) .admin-shell .report-list > article:last-of-type { border-bottom:0; }
html:not(.legacy-kds-view) .admin-shell .report-list > article > div { min-width:0; }
html:not(.legacy-kds-view) .admin-shell .report-list > article strong { color:var(--ui-text,#0F172A); }
html:not(.legacy-kds-view) .admin-shell .report-list > article small { display:block; margin-top:3px; color:var(--ui-muted,#64748B); }
html:not(.legacy-kds-view) .admin-shell .report-list > article > span {
  flex:0 0 auto;
  color:var(--ui-text,#0F172A);
  font-weight:800;
  font-variant-numeric:tabular-nums;
}

/* Existing daily report bars become a consistent, scroll-safe micro chart. */
html:not(.legacy-kds-view) .admin-shell .daily-bars {
  display:flex;
  align-items:flex-end;
  gap:8px;
  min-height:248px;
  padding:22px 18px 18px;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scrollbar-width:thin;
}
html:not(.legacy-kds-view) .admin-shell .daily-bars > article {
  flex:1 0 42px;
  min-width:42px;
  display:grid;
  grid-template-rows:auto 150px auto;
  gap:7px;
  align-items:end;
  text-align:center;
}
html:not(.legacy-kds-view) .admin-shell .daily-bars > article > div {
  position:relative;
  height:150px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  overflow:hidden;
  border-radius:10px;
  background:linear-gradient(to top,#F8FAFC,#FFFFFF);
  border:1px solid #F1F5F9;
}
html:not(.legacy-kds-view) .admin-shell .daily-bars > article > div > i {
  display:block;
  width:min(22px,62%);
  min-height:3px;
  border-radius:7px 7px 3px 3px;
  background:linear-gradient(to top,var(--ui-primary,#0F766E),#2DD4BF);
  box-shadow:0 0 0 1px rgba(15,118,110,.05);
}
html:not(.legacy-kds-view) .admin-shell .daily-bars small { color:var(--ui-muted,#64748B); font-size:11px; }
html:not(.legacy-kds-view) .admin-shell .daily-bars strong {
  overflow:hidden;
  text-overflow:ellipsis;
  color:var(--ui-text-soft,#334155);
  font-size:11px;
  font-variant-numeric:tabular-nums;
}

/* ---------- Empty states ---------- */
html:not(.legacy-kds-view) .admin-shell :where(.empty-state,.mini-empty),
.ui-foundation-page :where(.empty-state,.mini-empty) {
  width:100%;
  color:var(--ui-muted,#64748B);
  text-align:center;
}
html:not(.legacy-kds-view) .admin-shell .empty-state,
.ui-foundation-page .empty-state {
  display:grid;
  place-items:center;
  align-content:center;
  min-height:210px;
  padding:32px 20px;
}
html:not(.legacy-kds-view) .admin-shell .empty-state > span:first-child,
.ui-foundation-page .empty-state > span:first-child {
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  margin-bottom:10px;
  border:1px solid #CCFBF1;
  border-radius:15px;
  color:var(--ui-primary,#0F766E);
  background:#F0FDFA;
  font-size:22px;
  font-weight:800;
}
html:not(.legacy-kds-view) .admin-shell .empty-state h3,
.ui-foundation-page .empty-state h3 {
  margin:2px 0 5px;
  color:var(--ui-text,#0F172A);
  font-size:16px;
}
html:not(.legacy-kds-view) .admin-shell .empty-state p,
.ui-foundation-page .empty-state p { max-width:460px; margin:0; line-height:1.55; }
html:not(.legacy-kds-view) .admin-shell .mini-empty,
.ui-foundation-page .mini-empty { min-height:92px; display:grid; place-items:center; margin:0; padding:20px; }

/* ---------- Loading / skeleton language ---------- */
html:not(.legacy-kds-view) .admin-shell .loading-panel,
.platform-shell .app-loader,
.ui-foundation-page .loading-panel {
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
html:not(.legacy-kds-view) .admin-shell .loading-panel,
.ui-foundation-page .loading-panel {
  min-height:190px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:26px 24px;
  color:var(--ui-muted,#64748B);
  font-size:13px;
  font-weight:700;
}
html:not(.legacy-kds-view) .admin-shell .loading-panel::before,
.ui-foundation-page .loading-panel::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:24px;
  border-radius:12px;
  background:
    linear-gradient(90deg,transparent 0 7%,rgba(255,255,255,.72) 17%,transparent 28%) 0 0/220% 100%,
    linear-gradient(var(--ui-skeleton-b),var(--ui-skeleton-b)) 0 0/34% 16px no-repeat,
    linear-gradient(var(--ui-skeleton-a),var(--ui-skeleton-a)) 0 34px/78% 12px no-repeat,
    linear-gradient(var(--ui-skeleton-a),var(--ui-skeleton-a)) 0 58px/62% 12px no-repeat,
    linear-gradient(var(--ui-skeleton-a),var(--ui-skeleton-a)) 0 92px/100% 38px no-repeat;
  animation:ui-data-shimmer 1.4s linear infinite;
}
.platform-shell .app-loader > span {
  width:34px;
  height:34px;
  border:3px solid var(--ui-track,#E2E8F0);
  border-top-color:var(--ui-primary,#0F766E);
  border-radius:999px;
  animation:ui-data-spin .8s linear infinite;
}
.platform-shell .app-loader p { color:var(--ui-muted,#64748B); font-weight:700; }
@keyframes ui-data-shimmer { to { background-position:-220% 0,0 0,0 34px,0 58px,0 92px; } }
@keyframes ui-data-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) {
  html:not(.legacy-kds-view) .admin-shell .loading-panel::before,
  .ui-foundation-page .loading-panel::before,
  .platform-shell .app-loader > span { animation:none; }
}

/* ---------- Progress / usage language ---------- */
.platform-shell .tenant-usage { gap:10px; }
.platform-shell .tenant-usage > span {
  position:relative;
  min-width:0;
  padding:9px 10px;
  border:1px solid var(--ui-border,#E2E8F0);
  border-radius:10px;
  background:#F8FAFC;
  color:var(--ui-muted,#64748B);
  font-size:12px;
}
.platform-shell .tenant-usage b { color:var(--ui-text,#0F172A); font-variant-numeric:tabular-nums; }

/* Standalone operational dashboards inherit the same KPI/data rhythm. */
.ui-foundation-page :where(.card,.step) { min-width:0; }
.ui-foundation-page .step em,
.ui-foundation-page .metric .sub { line-height:1.45; }
.ui-foundation-page table td :where(.status,.role) { white-space:nowrap; }

/* ---------- Responsive data priorities ---------- */
@media (max-width:1099px) {
  html:not(.legacy-kds-view) .admin-shell :where(.metric-grid,.report-metrics,.compact-metrics,.inventory-metrics,.media-storage-metrics,.availability-status-grid),
  .platform-shell .platform-metrics,
  .ui-foundation-page .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  html:not(.legacy-kds-view) .admin-shell .report-grid { grid-template-columns:1fr; }
  html:not(.legacy-kds-view) .admin-shell .report-grid > .panel:first-child { grid-row:auto; }
}
@media (max-width:767px) {
  html:not(.legacy-kds-view) .admin-shell :where(.metric-grid,.report-metrics,.compact-metrics,.inventory-metrics,.media-storage-metrics,.availability-status-grid),
  .platform-shell .platform-metrics,
  .ui-foundation-page .metrics { gap:10px; }
  html:not(.legacy-kds-view) .admin-shell :where(.metric-grid,.report-metrics,.compact-metrics,.inventory-metrics,.media-storage-metrics,.availability-status-grid) > *,
  .platform-shell .platform-metrics > *,
  .ui-foundation-page .metrics > .metric { min-height:102px; padding:14px; }
  html:not(.legacy-kds-view) .admin-shell :where(.metric-grid,.report-metrics,.compact-metrics,.inventory-metrics,.media-storage-metrics) strong,
  .platform-shell .platform-metrics strong,
  .ui-foundation-page .metrics .metric strong { font-size:1.45rem; }
  html:not(.legacy-kds-view) .admin-shell .daily-bars { min-height:220px; padding-inline:12px; }
  html:not(.legacy-kds-view) .admin-shell .daily-bars > article { flex-basis:38px; min-width:38px; grid-template-rows:auto 130px auto; }
  html:not(.legacy-kds-view) .admin-shell .daily-bars > article > div { height:130px; }
  html:not(.legacy-kds-view) .admin-shell .report-list > article { padding-inline:14px; }
  html:not(.legacy-kds-view) .admin-shell .empty-state,
  .ui-foundation-page .empty-state { min-height:170px; padding:24px 16px; }
  html:not(.legacy-kds-view) .admin-shell .loading-panel,
  .ui-foundation-page .loading-panel { min-height:160px; }
}
@media (min-width:1600px) {
  html:not(.legacy-kds-view) .admin-shell .metric-grid,
  .platform-shell .platform-metrics { gap:16px; }
  html:not(.legacy-kds-view) .admin-shell .report-grid { grid-template-columns:minmax(0,1.5fr) minmax(360px,.75fr); gap:20px; }
}

/* Customer/store, POS and KDS selectors are deliberately absent below this line. */