/* Offline-Erfassung von Zählerständen (assets/offline.js) */
.offline-bar {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 900;
  max-width: 760px; margin: 0 auto; padding: 10px 14px;
  background: #252525; color: #fff; border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .25); font-size: .92rem;
}
.offline-bar[hidden] { display: none; }
.offline-bar.is-offline { background: #5b4a1f; }
.offline-bar.needs-action { border-left: 5px solid #d4731f; }
.offline-bar-head { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.offline-bar-text { flex: 1 1 260px; }
.offline-bar-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.offline-bar-actions [hidden] { display: none; }
.offline-list { list-style: none; margin: 10px 0 0; padding: 0; max-height: 45vh; overflow-y: auto; }
.offline-list[hidden] { display: none; }
.offline-item { padding: 8px 10px; margin-top: 6px; background: rgba(255, 255, 255, .08); border-radius: 8px; }
.offline-item.is-blocked { background: rgba(212, 115, 31, .25); }
.offline-item .muted { color: #ddd; }
.offline-item-actions { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.offline-note { margin: 8px 0 0; padding: 8px 10px; border-radius: 8px; font-size: .9rem; }
.offline-note.is-ok { background: #e7f4ea; color: #1f5f2e; }
.offline-note.is-queued { background: #fff4e0; color: #6b4a00; }
.offline-note.is-error { background: #fde8e6; color: #8a1f12; }
.offline-highlight { outline: 2px solid #d4731f; outline-offset: 3px; border-radius: 4px; }
@media (max-width: 600px) { .offline-bar { left: 8px; right: 8px; bottom: 8px; } }