/* PWA / offline status UI (pwa.css) — theme-aware, no layout impact when online */

.net-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px; flex-shrink: 0;
    font-size: 11px; font-weight: 700; line-height: 1; white-space: nowrap;
    border: 1px solid var(--border, rgba(148,163,184,.35));
    background: var(--surface-2, transparent); color: var(--text-muted, #94a3b8);
    transition: background .2s, color .2s, border-color .2s;
}
.net-badge .net-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.5); }
.net-badge[data-state="offline"] { color: #f59e0b; border-color: rgba(245,158,11,.5); background: rgba(245,158,11,.12); }
.net-badge[data-state="offline"] .net-dot { background: #f59e0b; }
.net-badge[data-state="syncing"] { color: #3b82f6; border-color: rgba(59,130,246,.45); background: rgba(59,130,246,.12); }
.net-badge[data-state="syncing"] .net-dot { background: #3b82f6; animation: net-pulse 1.1s infinite; }
@keyframes net-pulse { 0% { box-shadow: 0 0 0 0 rgba(59,130,246,.6); } 100% { box-shadow: 0 0 0 7px rgba(59,130,246,0); } }

/* Phones: dot only, to save navbar space */
@media (max-width: 600px) {
    .net-badge { padding: 6px; }
    .net-badge .net-label { display: none; }
}
@media (prefers-reduced-motion: reduce) { .net-badge .net-dot { animation: none !important; } }

/* Offline banner used by the POS terminal */
.offline-banner {
    display: none; align-items: center; gap: 8px; padding: 7px 14px; font-size: 12px; font-weight: 600;
    background: rgba(245,158,11,.14); color: #f59e0b; border-bottom: 1px solid rgba(245,158,11,.35);
}
html.is-offline .offline-banner { display: flex; }

/* ── Connection popup + reminder bar ─────────────────────────── */
.net-pop {
    position: fixed; top: 14px; left: 50%; z-index: 2147483000;
    transform: translate(-50%, -16px); opacity: 0; pointer-events: none;
    display: flex; align-items: flex-start; gap: 12px;
    width: min(94vw, 440px); padding: 13px 14px; border-radius: 14px;
    background: var(--surface, #1e293b); color: var(--text, #f1f5f9);
    border: 1px solid var(--border, rgba(148,163,184,.3)); border-left-width: 5px;
    box-shadow: 0 14px 40px rgba(0,0,0,.35);
    transition: opacity .25s, transform .25s;
}
.net-pop.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.net-pop.is-off { border-left-color: #f59e0b; }
.net-pop.is-on  { border-left-color: #22c55e; }
.net-pop-icon { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.net-pop.is-off .net-pop-icon { background: rgba(245,158,11,.15); color: #f59e0b; }
.net-pop.is-on  .net-pop-icon { background: rgba(34,197,94,.15);  color: #22c55e; }
.net-pop-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.net-pop-text strong { font-size: 14px; }
.net-pop-text span { font-size: 12.5px; line-height: 1.45; color: var(--text-muted, #94a3b8); }
.net-pop-x { background: none; border: none; color: var(--text-muted, #94a3b8); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px; }
.net-pop-x:hover { color: var(--text, #fff); }

.net-bar {
    --net-bar-h: 34px;
    position: fixed; left: 0; right: 0; top: 0; height: var(--net-bar-h); z-index: 2147482000;
    display: flex; align-items: center; justify-content: center; padding: 0 12px; text-align: center;
    font: 600 12px/1.3 system-ui, sans-serif; background: #b45309; color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
/* The bar sits at the very top. Everything that is pinned to the top of the window moves down by its height,
   and the page itself is pushed down, so nothing is covered (admin / member / employee layouts and the POS). */
html.net-bar-on { --net-bar-h: 34px; }
html.net-bar-on body { padding-top: var(--net-bar-h); }
html.net-bar-on .sidebar { top: var(--net-bar-h); }
html.net-bar-on .app-navbar { top: var(--net-bar-h); }
html.net-bar-on .pos-cart { top: var(--net-bar-h); }
@media (max-width: 600px) { .net-bar { font-size: 11px; line-height: 1.2; } }
@media (prefers-reduced-motion: reduce) { .net-pop { transition: none; } }

/* While offline, write actions are blocked (pwa.js) — make that visible */
html.is-offline form[method="post" i] button[type="submit"],
html.is-offline form[method="post" i] input[type="submit"] { cursor: not-allowed; opacity: .55; }
.sim-state { font-size: 10px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: rgba(148,163,184,.2); margin-left: auto; }
[data-pwa-sim].is-on .sim-state { background: rgba(245,158,11,.22); color: #f59e0b; }

/* ── Company / branch switching needs the server: make that visible while offline ── */
.offline-switch-note { display: none; margin: 4px 8px 6px; padding: 7px 10px; border-radius: 9px; font-size: 11.5px; font-weight: 600; line-height: 1.35;
    background: rgba(245,158,11,.14); color: #f59e0b; border: 1px solid rgba(245,158,11,.35); }
html.is-offline .offline-switch-note { display: block; }
html.is-offline form[action$="/companies/switch"] .dropdown-item,
html.is-offline form[action$="/companies/switch-branch"] .dropdown-item,
html.is-offline form[action$="/switch"] button[type="submit"],
html.is-offline #co-switch-form select { opacity: .45; cursor: not-allowed; }