:root {
  --ps-bg: #10253f;
  --ps-accent: #ee7a2a;
  --ps-text: #ffffff;
  --ps-max-width: 1200px;
}

#status-navigation,
#status-navigation * { box-sizing: border-box; }
#power-header { min-height: 72px; }
#status-navigation { min-height: 63px; background: var(--ps-bg); }
#status-navigation .ps-header { background: var(--ps-bg); color: var(--ps-text); }
#status-navigation .ps-header-inner {
  max-width: var(--ps-max-width);
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 16px 24px;
  min-height: 52px;
}
#status-navigation .ps-brand { color: var(--ps-text); text-decoration: none; font-weight: 700; font-size: 1.05rem; }
#status-navigation .ps-toggle { margin-left: auto; background: none; border: 0; color: var(--ps-text); font-size: 1.25rem; display: none; }
#status-navigation .ps-nav { margin-left: auto; }
#status-navigation .ps-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 24px; align-items: center; }
#status-navigation .ps-link { color: var(--ps-text); text-decoration: none; padding: 8px 0; display: inline-block; border-bottom: 3px solid transparent; transition: border-color .15s ease; }
#status-navigation .ps-link:hover { opacity: 0.95; }
#status-navigation .ps-active { border-bottom-color: var(--ps-accent); }

/* Responsive */
@media (max-width: 880px) {
  #status-navigation { min-height: 52px; }
  #status-navigation .ps-toggle { display: block; }
  #status-navigation .ps-nav { position: absolute; top: 100%; right: 16px; background: var(--ps-bg); padding: 12px; border-radius: 6px; box-shadow: 0 8px 20px rgba(0,0,0,0.25); display: none; }
  #status-navigation .ps-nav.open { display: block; }
  #status-navigation .ps-links { flex-direction: column; gap: 8px; }
}

/* Global loading overlay */
#ps-global-loading-overlay {
  position: fixed;
  inset: 0;
  display: none; /* start hidden until showGlobalLoading() is called */
  align-items: center;
  justify-content: center;
  background: rgba(16,37,63,0.06);
  z-index: 99999;
}
.ps-global-loading-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--ps-text);
  color: var(--ps-bg);
  border-radius: 8px;
  box-shadow: 0 12px 36px rgba(16,37,63,0.12);
  border: 1px solid rgba(16,37,63,0.06);
}
.ps-spinner { animation: ps-rotate 1s linear infinite; transform-origin: center; }
@keyframes ps-rotate { to { transform: rotate(360deg); } }
.ps-global-loading-msg { font-weight: 700; color: var(--ps-bg); }

/* Skeleton shimmer for aria-busy regions */
@keyframes ps-skeleton { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
#status-navigation [aria-busy="true"] .sp-service-card,
#status-navigation [aria-busy="true"] .av-table-card,
#status-navigation [aria-busy="true"] .av-provider-card,
#status-navigation [aria-busy="true"] .sp-service-section {
  position: relative;
  overflow: hidden;
}
#status-navigation [aria-busy="true"] .sp-service-card::before,
#status-navigation [aria-busy="true"] .av-table-card::before,
#status-navigation [aria-busy="true"] .av-provider-card::before,
#status-navigation [aria-busy="true"] .sp-service-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #f5f7fa 25%, #eef4fb 37%, #f5f7fa 63%);
  background-size: 400% 100%;
  animation: ps-skeleton 1.2s ease-in-out infinite;
  z-index: -1; /* keep shimmer behind content so content remains readable */
  pointer-events: none;
}