/* Offline: status bar (a button now), the sync centre, and the quiet note on screens showing saved data. */
button.conn-bar { border: 0; font: inherit; font-weight: 700; cursor: pointer; }
.conn-warn { background: rgba(170, 90, 20, .95); }
.conn-bar:hover { filter: brightness(1.08); }
.conn-bar:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.sc-overlay { z-index: 450; }
.sc-card { width: min(520px, calc(100vw - 24px)); max-height: min(86dvh, 720px); display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 22px; background: var(--panel); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 30px 80px -20px rgba(0,0,0,.65); }
.sc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sc-head h3 { margin: 0; font-size: 1.15rem; }
.sc-status { padding: 4px 12px; border-radius: 999px; font-size: .8rem; font-weight: 700; color: #fff; }
.sc-status.on { background: rgba(40,140,80,.95); }
.sc-status.off { background: rgba(190,60,60,.95); }
.sc-last, .sc-note { margin: 0; font-size: .84rem; color: var(--ink-dim); line-height: 1.7; }
.sc-list { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 60px; padding-block: 4px; }
.sc-row { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 14px; background: color-mix(in srgb, var(--ink) 5%, transparent); box-shadow: inset 0 0 0 1px var(--line); }
.sc-row.bad { box-shadow: inset 0 0 0 1px rgba(210,90,60,.7); background: rgba(210,90,60,.08); }
.sc-ic { font-size: 1.1rem; flex: none; }
.sc-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sc-mid b { font-size: .92rem; overflow-wrap: anywhere; }
.sc-mid small { color: var(--ink-dim); font-size: .78rem; overflow-wrap: anywhere; }
.sc-acts { display: flex; gap: 6px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.sc-acts button { min-height: 34px; padding: 4px 12px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.sc-acts button.danger { color: #e0705a; border-color: rgba(224,112,90,.5); }
.sc-empty { margin: 8px 0; text-align: center; color: var(--ink-dim); line-height: 1.8; }
.sc-foot { display: flex; gap: 10px; }
.sc-foot .primary-btn { flex: 1; }
/* a screen that is showing the last saved data says so, once, at the top */
html.nx-offline .app-main .view.active:not(#view-pos)::before { grid-column: 1 / -1; display: block; margin-bottom: 14px; padding: 10px 14px; border-radius: 14px; font-size: .86rem; font-weight: 600; line-height: 1.6; color: var(--ink); background: rgba(190, 60, 60, .14); box-shadow: inset 0 0 0 1px rgba(190, 60, 60, .45); content: "📴 بدون إنترنت — تُعرض آخر بيانات محفوظة، وما تسجّله يُحفظ ويُرسل عند عودة الاتصال."; }
html.nx-offline:lang(en) .app-main .view.active:not(#view-pos)::before { content: "📴 Offline — showing the last saved data. What you record is kept and sent when the connection returns."; }

/* the status pill sits in the corner opposite the page title so it never covers it */
@media (min-width: 821px) {
  .conn-bar { inset-inline-start: auto; inset-inline-end: 18px; transform: none !important; max-width: 420px; border-radius: 16px; font-size: .82rem; text-align: start; }
}