/* i6-share PWA – small additions on top of style.css */

/* app bar status dots need contrast on the purple / dark bar */
.app-bar .status-dot--on { background: #69f0ae; }
.app-bar .status-dot--busy { background: #ffd180; }
.app-bar .status-dot--off { background: #ff8a80; }

/* staged files */
.staged__header { display: flex; align-items: flex-start; gap: 8px; padding-right: 4px; padding-bottom: 8px; }
.staged__header .icon-btn { margin-top: -4px; }
.thumb--file { display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.thumb__ext { font-size: 11px; font-weight: 500; max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thumb--more { font-size: 16px; font-weight: 500; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 16px; }
.chips .chip { max-width: 100%; }

/* computers list */
.hub__status { gap: 6px; min-width: 0; }
.hub__done { color: var(--success); }
.hub__progress:empty { display: none; }
.computers__hint { padding: 0 16px; }
.computers + .computers__hint + .card__actions, .computers + .card__actions { padding-top: 0; }

.pair-card__setup { margin-top: 8px; }

/* banners */
.banner__title { color: var(--on-surface); margin-bottom: 4px; }
.banner__actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0 -8px; }

/* empty state */
.empty__title { color: var(--on-surface); }
.empty p { max-width: 420px; }
.empty .btn .icon { width: 18px; height: 18px; opacity: 1; }

/* QR scanner */
.scanner { position: relative; width: min(100%, 360px); aspect-ratio: 1; margin: 0 auto; border-radius: 4px; overflow: hidden; background: #000; }
.scanner__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.scanner__frame {
  position: absolute; inset: 15%; border: 3px solid rgba(255, 255, 255, .85); border-radius: 12px;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, .3); pointer-events: none;
}

/* settings */
.dialog .list { padding: 0; }
.settings__hubs .list-item { min-height: 56px; padding: 4px 0; gap: 12px; }
.settings__section .list-subheader { padding: 0; height: 32px; line-height: 32px; }
.dialog .text-field__label { background: var(--surface-24); }