/**
 * Suniar UX Consistency Layer
 * Unifies spacing, radius, controls, skeletons, loading, and responsive shell.
 * Brand: royal blue #204098 + gold #F8B810 (logo). Operator-safe: cool neutrals, soft motion.
 * Load AFTER liquid-glass.css.
 */

/* ═══════════════════════════════════════════
   SHELL — single geometry for mobile chrome
   ═══════════════════════════════════════════ */
:root {
  --glass-nav-height: var(--app-nav-height, 4.875rem);
  --glass-nav-safe: var(--app-nav-safe, env(safe-area-inset-bottom, 0px));
  --taskbar-height: var(--app-nav-height, 4.875rem);
  --lg-dock-radius: var(--radius-dock, 1.75rem);
  --app-nav-height: 4.875rem;
  --app-nav-inset: 0.5rem;
  --app-nav-bottom: 0.4rem;
  --app-nav-pad: 0.5rem;
  --app-nav-safe: env(safe-area-inset-bottom, 0px);
  --app-content-pad-x: 0.75rem;
  --app-content-pad-bottom: calc(var(--app-nav-height) + var(--app-nav-safe) + 0.75rem);
  --radius-dock: 1.75rem;
}

@media (max-width: 760px) {
  body.app-mobile-shell #main-content,
  body[data-page="dashboard"] #main-content {
    padding-left: var(--app-content-pad-x) !important;
    padding-right: var(--app-content-pad-x) !important;
    padding-bottom: var(--app-content-pad-bottom) !important;
  }

  /* Geometry tokens only — visual chrome lives in app-nav.css */
  .app-bottom-nav,
  .app-bottom-nav--taskbar {
    inset-inline: var(--app-nav-inset) !important;
    bottom: calc(var(--app-nav-bottom) + var(--app-nav-safe)) !important;
  }

  body.app-mobile-shell .app-header,
  body.app-mobile-shell .dashboard-topbar,
  body.app-mobile-shell .app-header.liquidGlass-wrapper,
  body.app-mobile-shell .dashboard-topbar.liquidGlass-wrapper {
    margin-inline: 0.75rem !important;
    margin-top: 0 !important;
    padding: 0.4rem 0.55rem !important;
    border-radius: 1.35rem !important;
  }

  body.app-mobile-shell .app-header-shell,
  body.app-mobile-shell .dashboard-topbar-shell,
  body.app-mobile-shell .dashboard-topbar--ops .dashboard-topbar-shell {
    gap: var(--space-1) var(--space-2);
    padding-block: 0;
  }

  body.app-mobile-shell .app-header-toolbar,
  body.app-mobile-shell .dashboard-topbar-main-actions {
    gap: var(--space-1);
  }

  body.app-mobile-shell .app-header-brand,
  body.app-mobile-shell .dashboard-topbar-brand {
    gap: var(--space-2);
  }

  body.app-mobile-shell .dashboard-panel,
  body[data-page="dashboard"] .dashboard-panel {
    padding: var(--app-card-pad) !important;
    border-radius: var(--radius-lg) !important;
  }

  body.app-mobile-shell .dashboard-panel-header,
  body[data-page="dashboard"] .dashboard-panel-header {
    gap: var(--space-2);
    margin-bottom: var(--space-3);
  }

  body.app-mobile-shell .dashboard-panel--devices .device-tile-grid {
    gap: var(--app-tile-gap) !important;
  }

  body.app-mobile-shell .dashboard-panel--devices .device-tile {
    padding: var(--space-2) var(--space-3) !important;
    gap: var(--space-2) !important;
  }
}

/* Extra-small phones */
@media (max-width: 380px) {
  :root {
    --app-content-pad-x: var(--space-2);
    --app-nav-inset: 0.35rem;
    --app-card-pad: var(--space-3);
  }

  .app-bottom-nav__label {
    font-size: 0.58rem !important;
  }
}

/* Tablet density (nav still mobile ≤760; content can breathe) */
@media (min-width: 761px) and (max-width: 1024px) {
  #main-content {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .dashboard-bento {
    gap: var(--space-4);
  }
}

/* ═══════════════════════════════════════════
   COMPONENT SPACING — tokenized
   ═══════════════════════════════════════════ */
.dashboard-metric-card {
  gap: var(--space-4) !important;
  padding: var(--space-5) !important;
  border-radius: var(--radius-md) !important;
}

.dashboard-panel-header {
  gap: var(--space-3);
}

.dashboard-panel-controls,
.dashboard-events-header-actions {
  gap: var(--space-2);
}

.device-wallboard-header {
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.device-tile-grid {
  gap: var(--space-3);
}

.weather-card,
.dashboard-insight-card,
.dashboard-status-card,
.linear-stat-card,
.linear-kpi-card,
.analytics-kpi-card,
.maintenance-stat-card {
  padding: var(--space-4) !important;
  gap: var(--space-3);
}

.linear-panel,
.linear-card {
  padding: var(--app-panel-padding);
}

.linear-grid {
  gap: var(--space-4) !important;
}

.app-header-datetime,
.dashboard-topbar-datetime {
  padding: var(--space-1) var(--space-3) !important;
  border-radius: var(--radius-sm) !important;
  min-height: var(--app-control-height-sm);
}

.dashboard-select-like-export,
.dashboard-select-small,
.linear-select,
.dashboard-range-btn,
.device-page-btn {
  min-height: var(--app-control-height-sm) !important;
  padding-inline: var(--space-3) !important;
  border-radius: var(--radius-pill) !important;
  font-size: 0.875rem;
}

.dashboard-topbar-icon-button,
.dashboard-topbar-theme-toggle,
.app-bottom-nav__icon-wrap,
.dashboard-section-nav__icon-wrap {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.875rem !important;
}

.app-bottom-nav__icon-wrap--fab {
  width: 3.15rem;
  height: 3.15rem;
  border-radius: 1.125rem !important;
}

/* Brand accent fallback — never sky #0ea5e9 */
.dashboard-notification-header-link,
.notification-loading-indicator {
  color: var(--app-accent, var(--brand-blue)) !important;
}

/* ═══════════════════════════════════════════
   SKELETONS — one system for all panels
   ═══════════════════════════════════════════ */
.app-skeleton {
  border-radius: var(--radius-sm) !important;
  background: color-mix(in srgb, var(--brand-blue) 8%, var(--surface-2)) !important;
}

html.dark .app-skeleton {
  background: color-mix(in srgb, var(--brand-gold) 10%, var(--surface)) !important;
}

.app-skeleton::after {
  background: linear-gradient(
    100deg,
    transparent 20%,
    color-mix(in srgb, var(--brand-blue) 12%, rgba(255, 255, 255, 0.45)) 50%,
    transparent 80%
  ) !important;
  animation-duration: 1.4s !important;
}

html.dark .app-skeleton::after {
  background: linear-gradient(
    100deg,
    transparent 20%,
    color-mix(in srgb, var(--brand-gold) 14%, rgba(255, 255, 255, 0.1)) 50%,
    transparent 80%
  ) !important;
}

.app-skeleton-stack {
  gap: var(--space-3) !important;
  width: 100%;
}

.app-skeleton-stack__title {
  height: var(--space-5);
  width: min(100%, 12rem);
  border-radius: var(--radius-sm) !important;
}

.app-skeleton-stack__line {
  height: var(--space-3);
  border-radius: var(--radius-sm) !important;
}

.app-skeleton-stack__panel {
  height: 10rem;
  border-radius: var(--radius-md) !important;
}

.app-skeleton-stack--chart .app-skeleton-stack__panel {
  height: clamp(10rem, 32dvh, 16rem);
}

.app-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: var(--space-3);
  width: 100%;
}

.app-skeleton-grid--tiles .app-skeleton {
  min-height: 5.5rem;
  border-radius: var(--radius-md) !important;
}

.app-skeleton-grid--weather {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.app-skeleton-grid--weather .app-skeleton {
  min-height: 4.5rem;
}

.app-skeleton-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
}

.app-skeleton-list .app-skeleton {
  height: 3rem;
  border-radius: var(--radius-sm) !important;
}

.app-loading-label {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}

/* Panel loading states → skeleton layout */
.chart-loading,
.weather-loading,
.device-tiles-loading,
.alarm-feed-loading,
.dashboard-events-loading {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: var(--space-3);
  min-height: 9rem;
  padding: var(--space-2) 0;
  color: var(--text-secondary);
  text-align: center;
}

.dashboard-events-loading {
  min-height: 0;
  align-items: stretch;
}

.chart-loading .dashboard-loading-bar,
.weather-loading .dashboard-loading-bar,
.device-tiles-loading .dashboard-loading-bar,
.dashboard-events-loading .dashboard-loading-bar {
  display: none;
}

/* Inline busy pill (controls only) */
.dashboard-loading-bar {
  width: 2rem;
  height: 0.5rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--brand-blue) 28%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--brand-blue) 18%, var(--border));
}

html.dark .dashboard-loading-bar {
  background: color-mix(in srgb, var(--brand-gold) 22%, var(--surface));
  border-color: color-mix(in srgb, var(--brand-gold) 20%, var(--border));
}

/* Overlay loaders — brand, not cyan */
.app-loading-overlay,
.htmx-indicator.absolute,
.power-loading-indicator {
  background: color-mix(in srgb, var(--brand-blue-950) 52%, transparent) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
}

.app-loading-overlay svg,
.htmx-indicator.absolute svg,
.power-loading-indicator svg,
.app-spinner {
  color: var(--brand-gold) !important;
}

.app-spinner {
  width: 2rem;
  height: 2rem;
  animation: app-spin 0.85s linear infinite;
}

@keyframes app-spin {
  to { transform: rotate(360deg); }
}

.loading-spinner {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid color-mix(in srgb, var(--brand-blue) 25%, transparent);
  border-top-color: var(--brand-gold);
  border-radius: 50%;
  animation: app-spin 0.75s linear infinite;
}

html.dark .loading-spinner {
  border-color: color-mix(in srgb, var(--brand-gold) 20%, transparent);
  border-top-color: var(--brand-gold);
}

/* ═══════════════════════════════════════════
   OPERATOR COLOR — reduce fatigue
   ═══════════════════════════════════════════ */
body[data-theme-root] {
  color: var(--text);
}

/* Soften harsh sky leftovers */
[style*="#0ea5e9"],
[style*="#0EA5E9"] {
  /* cannot override inline easily — JS not needed; CSS class fixes below */
}

.text-cyan-400,
.text-sky-400,
.text-sky-500 {
  color: var(--brand-gold) !important;
}

.bg-cyan-500,
.bg-sky-500 {
  background-color: var(--brand-blue) !important;
}

/* KPI / pill density */
.dashboard-stat-pill {
  padding: var(--space-2) var(--space-3) !important;
  gap: var(--space-1);
  border-radius: var(--radius-sm) !important;
}

.dashboard-meta-chip,
.dashboard-panel-badge,
.linear-chip {
  padding: 0.2rem var(--space-2) !important;
  border-radius: var(--radius-pill) !important;
  font-size: 0.6875rem;
  font-weight: 700;
}

/* Bento gap unified */
.dashboard-bento {
  gap: var(--space-4);
}

@media (min-width: 1025px) {
  .dashboard-bento {
    gap: var(--space-5);
  }
}

/* Prefer reduced motion — calm ops rooms */
@media (prefers-reduced-motion: reduce) {
  .app-skeleton::after,
  .dashboard-loading-bar::after,
  .app-spinner,
  .loading-spinner {
    animation: none !important;
  }

  .app-skeleton::after {
    opacity: 0.35;
    transform: none;
  }
}

/* Modal / alarm detail loading — brand spinner + calm skeleton cue */
.dashboard-modal-loading-card {
  background: transparent !important;
  box-shadow: none !important;
  border-color: var(--lg-border, var(--border)) !important;
}

.alarm-detail-loading {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-4) 0;
  text-align: start;
  color: var(--text-secondary);
  font-size: 0.8125rem;
  font-weight: 600;
}

.alarm-detail-loading::before {
  content: "";
  display: block;
  height: 2.75rem;
  margin-bottom: 6.5rem;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--brand-blue) 8%, var(--surface-2));
  box-shadow:
    0 3.5rem 0 0 color-mix(in srgb, var(--brand-blue) 8%, var(--surface-2)),
    0 7rem 0 0 color-mix(in srgb, var(--brand-blue) 8%, var(--surface-2));
}

html.dark .alarm-detail-loading::before {
  background: color-mix(in srgb, var(--brand-gold) 10%, var(--surface));
  box-shadow:
    0 3.5rem 0 0 color-mix(in srgb, var(--brand-gold) 10%, var(--surface)),
    0 7rem 0 0 color-mix(in srgb, var(--brand-gold) 10%, var(--surface));
}

/* ═══════════════════════════════════════════
   MOBILE NAV — liquid glass + clear active page
   ═══════════════════════════════════════════ */
@media (max-width: 760px) {
  /* Top navbar: fixed floating liquid glass bar */
  body.app-mobile-shell .app-header,
  body.app-mobile-shell .dashboard-topbar,
  body.app-mobile-shell .app-header.liquidGlass-wrapper,
  body.app-mobile-shell .dashboard-topbar.liquidGlass-wrapper {
    position: fixed !important;
    top: max(0.35rem, env(safe-area-inset-top, 0px)) !important;
    inset-inline: var(--app-nav-inset, 0.5rem) !important;
    z-index: 60;
    margin-inline: 0 !important;
    margin-top: 0 !important;
    padding: 0.45rem 0.55rem !important;
    border-radius: var(--radius-lg, 1.25rem) !important;
    border: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow:
      0 12px 36px color-mix(in srgb, #204098 14%, transparent),
      0 4px 14px rgba(15, 23, 42, 0.08) !important;
    overflow: visible !important;
  }

  body.app-mobile-shell .app-header-title-row {
    flex-wrap: nowrap;
    gap: 0.35rem;
    min-width: 0;
  }

  body.app-mobile-shell .app-header-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.82rem !important;
  }

  body.app-mobile-shell .app-header.liquidGlass-wrapper > .liquidGlass-effect,
  body.app-mobile-shell .dashboard-topbar.liquidGlass-wrapper > .liquidGlass-effect {
    filter: url(#glass-distortion);
    backdrop-filter: blur(4px) saturate(165%) !important;
    -webkit-backdrop-filter: blur(4px) saturate(165%) !important;
    border-radius: inherit;
  }

  body.app-mobile-shell .app-header.liquidGlass-wrapper > .liquidGlass-tint,
  body.app-mobile-shell .dashboard-topbar.liquidGlass-wrapper > .liquidGlass-tint {
    background: color-mix(in srgb, var(--brand-blue) 8%, rgba(255, 255, 255, 0.16)) !important;
  }

  html.dark body.app-mobile-shell .app-header.liquidGlass-wrapper > .liquidGlass-tint,
  html.dark body.app-mobile-shell .dashboard-topbar.liquidGlass-wrapper > .liquidGlass-tint {
    background: color-mix(in srgb, var(--brand-gold) 6%, rgba(255, 255, 255, 0.06)) !important;
  }

  /* Active page badge — always visible on phone */
  body.app-mobile-shell .app-header-page-badge,
  body.app-mobile-shell .app-header-page-badge.liquidGlass-wrapper,
  .app-header-page-badge[data-active-page-badge] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    max-width: 8.5rem;
    min-height: 1.4rem;
    padding: 0.15rem 0.55rem !important;
    margin-inline-start: 0.35rem;
    font-size: 0.62rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em;
    line-height: 1;
    color: var(--brand-blue) !important;
    border: 1px solid color-mix(in srgb, var(--brand-blue) 32%, rgba(255, 255, 255, 0.4)) !important;
    border-radius: var(--radius-pill) !important;
    background: transparent !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-blue) 12%, transparent) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.app-mobile-shell .app-header-page-badge.liquidGlass-wrapper > .liquidGlass-tint,
  .app-header-page-badge[data-active-page-badge].liquidGlass-wrapper > .liquidGlass-tint {
    background: color-mix(in srgb, var(--brand-blue) 18%, rgba(255, 255, 255, 0.28)) !important;
  }

  html.dark body.app-mobile-shell .app-header-page-badge,
  html.dark .app-header-page-badge[data-active-page-badge] {
    color: var(--brand-gold) !important;
    border-color: color-mix(in srgb, var(--brand-gold) 36%, rgba(255, 255, 255, 0.12)) !important;
  }

  html.dark body.app-mobile-shell .app-header-page-badge.liquidGlass-wrapper > .liquidGlass-tint,
  html.dark .app-header-page-badge[data-active-page-badge].liquidGlass-wrapper > .liquidGlass-tint {
    background: color-mix(in srgb, var(--brand-gold) 20%, rgba(255, 255, 255, 0.06)) !important;
  }

  /* Bottom dock active/idle chrome — owned by app-nav.css */
}

/* ═══════════════════════════════════════════
   BOTTOM NAV — hard guarantee on phones
   (fixes: display:none default + relative glass + overflow clip)
   ═══════════════════════════════════════════ */
@media (max-width: 760px) {
  /* Visibility guarantee only — layout/material in app-nav.css */
  .app-bottom-nav,
  .app-bottom-nav--taskbar,
  nav.app-bottom-nav[data-app-bottom-nav] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    z-index: 200 !important;
    transform: none !important;
    clip: auto !important;
    clip-path: none !important;
  }

  .app-bottom-nav__cluster,
  .app-bottom-nav__menu-slot,
  .app-bottom-nav__item {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

@media (min-width: 761px) {
  .app-bottom-nav,
  .app-bottom-nav--taskbar {
    display: none !important;
  }
}

/* Modal / alarm detail loading */
.dashboard-modal-loading-card {
  background: transparent !important;
  box-shadow: none !important;
  border-color: var(--lg-border, var(--border)) !important;
}

.alarm-detail-loading {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-4) 0;
  text-align: start;
  color: var(--text-secondary);
  font-size: 0.8125rem;
  font-weight: 600;
}

.alarm-detail-loading::before {
  content: "";
  display: block;
  height: 2.75rem;
  margin-bottom: 7.5rem;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--brand-blue) 8%, var(--surface-2));
  box-shadow:
    0 3.5rem 0 0 color-mix(in srgb, var(--brand-blue) 8%, var(--surface-2)),
    0 7rem 0 0 color-mix(in srgb, var(--brand-blue) 8%, var(--surface-2));
}

html.dark .alarm-detail-loading::before {
  background: color-mix(in srgb, var(--brand-gold) 10%, var(--surface));
  box-shadow:
    0 3.5rem 0 0 color-mix(in srgb, var(--brand-gold) 10%, var(--surface)),
    0 7rem 0 0 color-mix(in srgb, var(--brand-gold) 10%, var(--surface));
}