/* ============ FOOTER STATUS BAR ============ */
.app-footer {
  height: var(--footer-h);
  background: linear-gradient(90deg, #0d1b3e, #1a3a6e);
  display: flex; align-items: center; padding: 0 16px;
  padding-bottom: max(0px, env(safe-area-inset-bottom));
  gap: 16px; font-size: 12px; color: rgba(255,255,255,0.7);
  border-top: 1px solid rgba(255,255,255,0.1);
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
}
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green-main); box-shadow: 0 0 6px var(--green-main); }
.status-dot.red { background: var(--red); box-shadow: 0 0 6px var(--red); }

#net-indicator { display:flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:2px 8px; border-radius:20px; transition:all 0.4s; }
#net-indicator.online  { background:rgba(34,197,94,0.15);  color:#4ade80; }
#net-indicator.offline { background:rgba(239,68,68,0.2);   color:#f87171; animation: net-pulse 1.5s infinite; }
#sync-pending { font-size:10px; color:#f97316; font-weight:700; display:none; }

@keyframes net-pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }
.footer-sep { color: rgba(255,255,255,0.3); }
.footer-label { color: rgba(255,255,255,0.5); }
.footer-val { color: white; font-weight: 600; }
.footer-val.green { color: var(--green-main); }

/* ── Responsive footer ─────────────────────────────────────── */
@media (max-width: 768px) {
  .app-footer { font-size: 10px; gap: 8px; padding: 0 8px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .app-footer::-webkit-scrollbar { display: none; }
  #footer-clock { display: none; }
}

@media (max-width: 600px) {
  .app-footer { padding-bottom: env(safe-area-inset-bottom, 0px) !important; height: auto !important; min-height: var(--footer-h, 36px); }
  .footer-label, .footer-val, .footer-sep { display: none !important; }
  #net-indicator { display: flex !important; }
  #footer-clock  { display: none !important; }
}