/* Live connection status (assets/js/connection.js) */
.conn-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .6rem; border-radius: 2rem; font-size: .78rem; font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer; user-select: none; border: 1px solid transparent; transition: background-color .2s, color .2s; }
.conn-pill:focus-visible { outline: 2px solid var(--ct-accent, #c9a227); outline-offset: 2px; }
.conn-pill .conn-device { font-size: .95rem; }
.conn-pill .conn-dot { width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.conn-pill.is-checking { background: #eceff3; color: #5c6370; border-color: #d5d9e0; }
.conn-pill.is-checking .conn-dot { animation: conn-blink 1s infinite; }
.conn-pill.is-online { background: #d7f5e3; color: #146c43; border-color: #a3e2bf; }
.conn-pill.is-slow { background: #fff3cd; color: #8a6100; border-color: #ffe08a; }
.conn-pill.is-slow .conn-dot { animation: conn-blink 1.4s infinite; }
.conn-pill.is-offline { background: #f8d7da; color: #a4161a; border-color: #f1aeb5; }
.conn-pill.is-unreachable { background: #ffe1cc; color: #b54708; border-color: #ffc199; }
.conn-pill.is-offline .conn-dot, .conn-pill.is-unreachable .conn-dot { animation: conn-blink .8s infinite; }
@keyframes conn-blink { 50% { opacity: .25; } }

/* Floating pill for pages without a header slot (login page) */
.conn-pill-float { position: fixed; left: .75rem; bottom: .75rem; z-index: 1070; box-shadow: 0 4px 14px rgba(0,0,0,.2); }

/* Banner while offline / server unreachable */
.conn-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 1085; display: flex; align-items: center; gap: .65rem; padding: .6rem 1rem; background: #b02a37; color: #fff; font-size: .9rem; line-height: 1.35; box-shadow: 0 4px 16px rgba(0,0,0,.3); }
.conn-banner[hidden] { display: none; }
.conn-banner > .bi { font-size: 1.3rem; flex-shrink: 0; }
.conn-banner .conn-banner-text { flex: 1; min-width: 0; }
.conn-banner .conn-retry { flex-shrink: 0; white-space: nowrap; }
body.conn-down { padding-top: var(--conn-banner-h, 0px); }
body.conn-down .topbar { top: var(--conn-banner-h, 0px); }

/* "Connected ulit" toast */
.conn-toast { position: fixed; left: 50%; bottom: 1.25rem; transform: translate(-50%, 150%); z-index: 1090; padding: .6rem 1.1rem; border-radius: 2rem; font-weight: 600; font-size: .9rem; color: #fff; background: #333; box-shadow: 0 6px 20px rgba(0,0,0,.3); opacity: 0; pointer-events: none; transition: transform .25s, opacity .25s; max-width: calc(100vw - 2rem); text-align: center; }
.conn-toast.show { transform: translate(-50%, 0); opacity: 1; }
.conn-toast.ok { background: #198754; }
.conn-toast.bad { background: #b02a37; }

/* Phones: compact pill, keep the label only when something is wrong */
@media (max-width: 575.98px) {
    .conn-pill { padding: .2rem .45rem; font-size: .72rem; }
    .conn-pill.is-online .conn-label, .conn-pill.is-checking .conn-label { display: none; }
    .conn-banner { font-size: .82rem; padding: .5rem .7rem; flex-wrap: wrap; }
    .conn-banner .conn-retry { margin-left: auto; }
}
.layout-mobile .conn-pill { padding: .2rem .45rem; font-size: .72rem; }
.layout-mobile .conn-pill.is-online .conn-label, .layout-mobile .conn-pill.is-checking .conn-label { display: none; }
@media print { .conn-pill, .conn-banner, .conn-toast { display: none !important; } }