/* GiroFatura PWA: update/install toasts and the offline page. Kept apart from app.css so template builds do not overwrite it. */
.pwa-toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1090;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 420px;
  padding: 12px 12px 12px 16px;
  color: #1f2937;
  font-size: 0.9rem;
  line-height: 1.4;
  background: #fff;
  border: 1px solid rgba(0, 38, 132, 0.15);
  border-left: 4px solid #002684;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
  animation: pwa-toast-in 0.2s ease-out;
}
.pwa-toast + .pwa-toast { bottom: 96px; }
.pwa-toast__text { flex: 1 1 auto; }
.pwa-toast__actions { display: flex; flex: 0 0 auto; align-items: center; gap: 4px; }
.pwa-toast__close {
  width: 32px;
  height: 32px;
  padding: 0;
  color: #6b7280;
  font-size: 1.25rem;
  line-height: 1;
  background: transparent;
  border: 0;
  border-radius: 6px;
}
.pwa-toast__close:hover, .pwa-toast__close:focus-visible { color: #111827; background: #f3f4f6; }
@keyframes pwa-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pwa-toast { animation: none; } }
@media (max-width: 575.98px) {
  .pwa-toast { right: 16px; left: 16px; max-width: none; }
}
@media print { .pwa-toast { display: none !important; } }

/* Offline page: header with the brand, the user and the status; one centred card; theme colours only. */
body.pwa-offline-page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; background: var(--gf-bg, #f4f7fb); }
.pwa-offline-header { position: sticky; top: 0; z-index: 10; background: var(--gf-surface, #fff); border-bottom: 1px solid var(--gf-border-soft, #e9eff5); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
.pwa-offline-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1200px; margin: 0 auto; padding: 10px 16px; }
.pwa-offline-header__logo { width: 150px; max-width: 40vw; height: auto; }
.pwa-offline-header__end { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pwa-offline-user { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pwa-offline-user[hidden] { display: none; }
.pwa-offline-user__avatar { display: grid; flex: 0 0 auto; place-items: center; width: 34px; height: 34px; color: var(--gf-primary, #002684); font-size: 0.78rem; font-weight: 700; background: var(--gf-primary-soft, #e8eefb); border-radius: 50%; }
.pwa-offline-user__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.pwa-offline-user__text strong, .pwa-offline-user__text small { overflow: hidden; max-width: 200px; text-overflow: ellipsis; white-space: nowrap; }
.pwa-offline-user__text strong { color: var(--gf-text, #172033); font-size: 0.85rem; }
.pwa-offline-user__text small { color: var(--gf-text-subtle, #627285); font-size: 0.75rem; }

.pwa-offline-main { display: grid; flex: 1 0 auto; place-items: center; padding: 32px 16px; }
.pwa-offline-card { width: 100%; max-width: 560px; padding: 40px 36px 32px; text-align: center; background: var(--gf-surface, #fff); border: 1px solid var(--gf-border-soft, #e9eff5); border-radius: 16px; box-shadow: 0 18px 48px rgba(15, 23, 42, 0.10); animation: pwa-offline-in 0.35s ease-out; }
.pwa-offline-art { display: block; width: 180px; max-width: 60%; height: auto; margin: 0 auto 20px; }
.pwa-offline-art__float { animation: pwa-offline-float 3.2s ease-in-out infinite; }
.pwa-offline-art__spark { animation: pwa-offline-spark 1.6s ease-in-out infinite; }
body.pwa-offline-page .pwa-offline__title { margin: 0 0 10px; color: var(--gf-primary, #002684); font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem); font-weight: 700; line-height: 1.25; }
body.pwa-offline-page .pwa-offline__text { margin: 0 auto 12px; max-width: 440px; color: var(--gf-text-secondary, #526174); font-size: 1rem; line-height: 1.55; }
.pwa-offline__reason { display: inline-block; margin: 0 0 4px; padding: 6px 12px; color: var(--gf-warning, #9a5b00); font-size: 0.85rem; background: var(--gf-warning-soft, #fff4d6); border-radius: 12px; }
.pwa-offline__reason[hidden] { display: none; }
.pwa-offline__actions { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 24px; }
.pwa-offline__actions .btn { min-width: 240px; min-height: 44px; }
.pwa-offline__actions .btn[hidden] { display: none; }
.pwa-offline__auto { min-height: 1.4em; margin: 14px 0 0; color: var(--gf-text-subtle, #627285); font-size: 0.85rem; }
.pwa-offline__note { margin: 20px 0 0; padding-top: 16px; color: var(--gf-text-subtle, #627285); font-size: 0.82rem; border-top: 1px solid var(--gf-border-soft, #e9eff5); }
.pwa-offline__note .fa-shield-halved { color: var(--gf-success, #087a55); }
.pwa-offline-footer { padding: 16px; color: var(--gf-text-subtle, #627285); font-size: 0.78rem; text-align: center; }
body.pwa-offline-page .btn:focus-visible { outline: 2px solid var(--gf-primary, #002684); outline-offset: 2px; }
body.pwa-offline-page [data-pwa-retry][aria-busy="true"] .fa-rotate-right { animation: pwa-offline-spin 0.9s linear infinite; }
@keyframes pwa-offline-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pwa-offline-float { 50% { transform: translateY(-4px); } }
@keyframes pwa-offline-spark { 50% { opacity: 0.25; } }
@keyframes pwa-offline-spin { to { transform: rotate(1turn); } }
@media (max-width: 767.98px) {
  .pwa-offline-user__text { display: none; }
}
@media (max-width: 479.98px) {
  .pwa-offline-header__retry span { display: none; }
  .pwa-offline-header__retry .me-1 { margin-right: 0 !important; }
  .pwa-offline-header__retry { min-width: 40px; min-height: 36px; }
  .pwa-offline-card { padding: 28px 20px 24px; border-radius: 14px; }
  .pwa-offline__actions .btn { width: 100%; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pwa-offline-card, .pwa-offline-art__float, .pwa-offline-art__spark, body.pwa-offline-page [data-pwa-retry][aria-busy="true"] .fa-rotate-right { animation: none; }
}

/* Offline records screen (customers, products, services) */
.ow-page { background: #f5f7fb; }
.ow-header { position: sticky; top: 0; z-index: 10; background: #fff; border-bottom: 1px solid #e5e7eb; }
.ow-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1100px; margin: 0 auto; padding: 10px 16px; }
.ow-header__logo { width: 150px; height: auto; }
.ow-main { max-width: 1100px; margin: 0 auto; padding: 20px 16px 48px; }
.ow-title { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ow-title h1 { margin: 0; color: #002684; font-size: 1.5rem; font-weight: 700; }
.ow-company { margin: 2px 0 0; color: #4b5563; }
.ow-title__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ow-scope-note { margin: 0 0 16px; color: #4b5563; font-size: 0.9rem; }
.ow-notice { margin-bottom: 12px; padding: 10px 14px; border-radius: 8px; background: #eef2ff; color: #1e3a8a; font-size: 0.92rem; }
.ow-notice[hidden] { display: none; }
.ow-notice--ok { background: #ecfdf5; color: #065f46; }
.ow-notice--pending { background: #fffbeb; color: #92400e; }
.ow-notice--warning { background: #fff7ed; color: #9a3412; }
.ow-notice--error { background: #fef2f2; color: #991b1b; }
.ow-tabs { display: flex; gap: 4px; margin-bottom: 12px; overflow-x: auto; border-bottom: 1px solid #e5e7eb; }
.ow-tab { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; color: #4b5563; font-weight: 600; white-space: nowrap; background: none; border: 0; border-bottom: 3px solid transparent; }
.ow-tab.is-active { color: #002684; border-bottom-color: #002684; }
.ow-panel { padding: 16px; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; }
.ow-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.ow-toolbar .form-control { flex: 1 1 220px; max-width: 420px; }
.ow-empty { margin: 24px 0; color: #6b7280; text-align: center; }
.ow-list, .ow-queue { margin: 0; padding: 0; list-style: none; }
.ow-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 12px 8px; text-align: left; background: none; border: 0; border-bottom: 1px solid #f1f5f9; }
.ow-item:hover, .ow-item:focus-visible { background: #f8fafc; }
.ow-item__main { display: flex; flex-direction: column; min-width: 0; }
.ow-item__main small { overflow: hidden; color: #6b7280; text-overflow: ellipsis; white-space: nowrap; }
.ow-item__meta { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.ow-badge { display: inline-block; padding: 2px 8px; color: #374151; font-size: 0.75rem; font-weight: 600; white-space: nowrap; background: #f3f4f6; border-radius: 999px; }
.ow-badge--ok { color: #065f46; background: #d1fae5; }
.ow-badge--pending { color: #92400e; background: #fef3c7; }
.ow-badge--error { color: #991b1b; background: #fee2e2; }
.ow-form-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.ow-form-head .btn-link { flex-basis: 100%; text-align: left; }
.ow-form-head h2 { margin: 0; font-size: 1.25rem; }
.ow-form fieldset { margin: 0; padding: 0; border: 0; }
.ow-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px 16px; }
.ow-field--wide { grid-column: 1 / -1; }
.ow-field[hidden] { display: none; }
.ow-field .invalid-feedback { display: block; min-height: 0; }
.ow-form-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ow-queue__item { padding: 12px 0; border-bottom: 1px solid #f1f5f9; }
.ow-queue__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.ow-queue__meta { margin: 4px 0 0; color: #6b7280; font-size: 0.85rem; }
.ow-queue__error { margin: 6px 0 0; color: #991b1b; font-size: 0.9rem; }
.ow-queue__errors { margin: 4px 0 0; padding-left: 18px; color: #991b1b; font-size: 0.88rem; }
.ow-queue__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ow-conflict { margin-top: 8px; padding: 10px; background: #fff7ed; border-radius: 8px; }
.ow-conflict p { margin-bottom: 8px; font-size: 0.9rem; }
.ow-conflict .table { margin-bottom: 8px; background: transparent; }
@media (max-width: 575.98px) {
  .ow-panel { padding: 12px; }
  .ow-item { flex-direction: column; align-items: flex-start; }
  .ow-item__meta { justify-content: flex-start; }
}

/* Logout with unsent offline changes */
.sync-dialog { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 23, 42, 0.45); }
.sync-dialog__box { width: 100%; max-width: 460px; padding: 20px; background: #fff; border-radius: 12px; box-shadow: 0 20px 40px rgba(15, 23, 42, 0.25); }
.sync-dialog__title { margin-bottom: 8px; color: #002684; font-size: 1.15rem; font-weight: 700; }
.sync-dialog__status { min-height: 1.25em; color: #92400e; font-size: 0.9rem; }
.sync-dialog__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Long sync label ("Offline — X alterações por sincronizar") wraps instead of overflowing small headers */
body.app .sync-status[data-pending]:not([data-pending="0"]) { max-width: 230px; min-height: 36px; padding-top: 3px; padding-bottom: 3px; line-height: 1.2; white-space: normal; text-align: left; }
.ow-conflict { overflow-x: auto; }
.ow-conflict td { overflow-wrap: anywhere; }

/* Offline quote drafts */
.ow-badge--offline { color: #5b21b6; background: #ede9fe; }
.ow-badge--draft { color: #1e3a8a; background: #dbeafe; }
.ow-hint { margin: 0 0 12px; color: #4b5563; font-size: 0.88rem; }
.ow-hint--draft { padding: 8px 12px; color: #5b21b6; background: #f5f3ff; border-radius: 8px; }
.ow-error-summary { margin: 0 0 12px; padding: 10px 14px 10px 28px; color: #991b1b; font-size: 0.9rem; background: #fef2f2; border-radius: 8px; }
.ow-error-summary[hidden] { display: none; }
.ow-subtitle { margin: 20px 0 8px; font-size: 1rem; font-weight: 700; }
.ow-line { margin-bottom: 10px; padding: 12px; background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 8px; }
.ow-line__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ow-totals { max-width: 360px; margin: 16px 0 0 auto; padding: 12px 14px; background: #f8fafc; border-radius: 8px; }
.ow-totals > div { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.ow-totals__grand { margin-top: 4px; padding-top: 6px !important; font-weight: 700; border-top: 1px solid #e5e7eb; }
.ow-preview-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ow-preview { position: relative; overflow: hidden; padding: 24px; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; }
.ow-preview__watermark { position: absolute; top: 40%; left: 50%; color: rgba(91, 33, 182, 0.08); font-size: clamp(2rem, 9vw, 5rem); font-weight: 800; white-space: nowrap; transform: translate(-50%, -50%) rotate(-24deg); pointer-events: none; }
.ow-preview__banner { margin-bottom: 16px; padding: 6px 10px; color: #5b21b6; font-size: 0.85rem; font-weight: 600; text-align: center; background: #f5f3ff; border: 1px dashed #a78bfa; border-radius: 6px; }
.ow-preview__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.ow-preview__title { color: #5b21b6; font-weight: 800; letter-spacing: 0.04em; }
/* Offline quote draft (offline-quotes.js). Printing is defined with the rest of the screen, at the end of this file. */
.oq-line__total { margin-left: auto; margin-right: 8px; color: var(--gf-primary, #002684); font-size: 0.85rem; font-weight: 600; }
.ow-line__head { justify-content: flex-start; gap: 8px; }
body.app .ow-form .input-group { flex-wrap: nowrap; }
body.app .ow-form .input-group > .form-select { flex: 0 0 auto; width: auto; min-width: 84px; }
body.app .ow-form .input-group > .form-control { flex: 1 1 auto; width: 1%; min-width: 0; }
.ow-form-head .btn-link { flex: 0 0 100%; justify-content: flex-start; text-align: left; }
body.ow-editing-quote .ow-stats, body.ow-editing-quote .ow-scope { display: none; }

.oq-bar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 16px -20px -20px; padding: 12px 20px; background: rgba(255, 255, 255, 0.97); border-top: 1px solid var(--gf-border-soft, #e9eff5); border-radius: 0 0 16px 16px; box-shadow: 0 -10px 24px rgba(15, 23, 42, 0.07); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .oq-bar { background: rgba(255, 255, 255, 0.88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } }
.oq-bar__total { display: flex; flex-direction: column; line-height: 1.2; }
.oq-bar__total span { color: var(--gf-text-subtle, #627285); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; }
.oq-bar__total strong { color: var(--gf-primary, #002684); font-size: 1.3rem; font-weight: 700; }
.oq-bar__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.oq-bar__actions .btn { min-height: 44px; border-radius: 12px; }

.ow-preview-actions { align-items: center; }
.ow-preview-actions .btn { min-height: 44px; border-radius: 12px; }
.ow-preview-actions__hint { color: var(--gf-text-subtle, #627285); font-size: 0.8rem; }
.oq-doc-frame { overflow-x: auto; padding: 16px; background: var(--gf-bg, #f4f7fb); border: 1px solid var(--gf-border-soft, #e9eff5); border-radius: 12px; }
/* The preview is the printed sheet: always the A4 layout, scaled down by offline-quotes.js to fit small screens. */
body.app .oq-doc { position: relative; overflow: hidden; width: 794px; max-width: none; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10); }
body.app .oq-doc .document-a4__header { display: flex; flex-direction: row; }
body.app .oq-doc .document-a4__meta { display: grid; grid-template-columns: 1fr 1fr; }
body.app .oq-doc .oq-doc__heading, body.app .oq-doc .document-a4__meta > div:last-child { text-align: right; }
body.app .oq-doc__header > .oq-doc__issuer { text-align: left; }
.oq-doc__company { color: #002684; font-size: 16px !important; }
body.app .oq-doc__heading h2 { margin: 0; color: #002684; font-size: 22px; font-weight: 700; letter-spacing: 0.04em; }
body.app .oq-doc__heading .oq-doc__draft { display: inline-block; margin: 6px 0 4px; padding: 2px 10px; color: #9a5b00; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; background: #fff4d6; border: 1px solid #efd18c; border-radius: 999px; }
.oq-doc__banner { margin: 16px 0 0; padding: 8px 12px; color: #9a5b00; font-size: 11px; text-align: center; background: #fff4d6; border: 1px dashed #efd18c; border-radius: 6px; }
.oq-doc__watermark { position: absolute; top: 45%; left: 50%; z-index: 0; color: rgba(0, 38, 132, 0.06); font-size: 120px; font-weight: 800; letter-spacing: 0.08em; white-space: nowrap; transform: translate(-50%, -50%) rotate(-28deg); pointer-events: none; user-select: none; }
.oq-doc > :not(.oq-doc__watermark) { position: relative; z-index: 1; }
body.app .oq-doc td small { display: block; margin-top: 2px; color: #627285; font-size: 10px; }
body.app .oq-doc td strong { font-weight: 600; }
.oq-doc__footer { margin-top: 24px; padding-top: 12px; color: #627285; font-size: 10px; text-align: center; border-top: 1px solid #d8e1eb; }

@media (max-width: 575.98px) {
  .oq-bar { margin: 12px -12px -14px; padding: 10px 12px; border-radius: 0 0 12px 12px; }
  .oq-bar__total { flex-direction: row; align-items: baseline; justify-content: space-between; width: 100%; }
  .oq-bar__actions { width: 100%; }
  .oq-bar__actions .btn { flex: 1 1 calc(50% - 4px); }
  .oq-bar__actions [type="submit"] { flex-basis: 100%; order: -1; }
  .oq-line__total { font-size: 0.8rem; }
  .oq-doc-frame { padding: 8px; }
}

/* Printing the draft: only the A4 document, without the screen around it (app.css hides everything but .document-a4). */
@media print {
  body.ow-previewing .ow-header, body.ow-previewing .ow-hero, body.ow-previewing .ow-notice, body.ow-previewing .ow-stats,
  body.ow-previewing .ow-scope, body.ow-previewing .ow-tabs, body.ow-previewing .ow-privacy, body.ow-previewing .ow-form-head,
  body.ow-previewing .ow-hint, body.ow-previewing .ow-preview-actions, body.ow-previewing .ow-error-summary,
  body.ow-previewing .pwa-toast, body.ow-previewing .skip-link { display: none !important; }
  body.ow-previewing, body.ow-previewing .ow-main, body.ow-previewing .ow-panel, body.ow-previewing .oq-doc-frame { margin: 0 !important; padding: 0 !important; background: #fff !important; border: 0 !important; box-shadow: none !important; }
  body.app.ow-previewing .oq-doc { position: relative; inset: auto; width: auto; min-width: 0; min-height: 0; margin: 0; padding: 6mm; box-shadow: none; zoom: 1 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .oq-doc__watermark { color: rgba(0, 38, 132, 0.07); }
}
/* Connection monitor (connectivity.js): "A verificar", the "Sem ligação" banner and its toasts. Theme colours only. */
body.app .sync-status[data-connection="checking"] { color: var(--gf-primary, #002684); background: var(--gf-primary-soft, #e8eefb); border-color: rgba(0, 38, 132, 0.2); }
body.app .sync-status[data-connection="checking"] .sync-status__dot { background: var(--gf-primary, #002684); box-shadow: none; animation: gf-conn-pulse 1s ease-in-out infinite; }
@keyframes gf-conn-pulse { 50% { opacity: 0.3; } }

.gf-conn-banner {
  position: fixed;
  left: 50%;
  bottom: 16px;
  z-index: 1085;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(640px, calc(100% - 32px));
  padding: 12px 12px 12px 16px;
  color: var(--gf-text, #172033);
  font-size: 0.9rem;
  line-height: 1.45;
  background: var(--gf-surface, #fff);
  border: 1px solid #efd18c;
  border-left: 4px solid var(--gf-warning, #9a5b00);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.14);
  transform: translateX(-50%);
  animation: gf-conn-in 0.24s ease-out;
}
.gf-conn-banner[hidden] { display: none; }
.gf-conn-banner__icon { flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; color: var(--gf-warning, #9a5b00); font-size: 1.05rem; background: var(--gf-warning-soft, #fff4d6); border-radius: 50%; }
.gf-conn-banner__text { flex: 1 1 auto; min-width: 0; }
.gf-conn-banner__text strong { color: var(--gf-warning, #9a5b00); }
.gf-conn-banner__actions { display: flex; flex: 0 0 auto; align-items: center; gap: 4px; }
.gf-conn-banner .btn { white-space: nowrap; }
.gf-conn-banner .btn:focus-visible, .gf-conn-banner .pwa-toast__close:focus-visible { outline: 2px solid var(--gf-primary, #002684); outline-offset: 2px; }
@keyframes gf-conn-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translateX(-50%); } }
/* Toasts stay above the banner while it is shown. */
html.is-server-offline .pwa-toast { bottom: 120px; }
.gf-conn-toast--success { border-left-color: var(--gf-success, #087a55); }
.gf-conn-toast--success .fa-circle-check { color: var(--gf-success, #087a55); }
.gf-conn-toast--info { border-left-color: var(--gf-primary, #002684); }

/* Without the server, sending is held with a message: the buttons say so before the click. */
html.is-server-offline .page-wrapper form[method="post" i] [type="submit"],
html.is-server-offline .page-wrapper form[method="post" i] button:not([type]) { opacity: 0.6; cursor: not-allowed; }

@media (max-width: 575.98px) {
  .gf-conn-banner { flex-wrap: wrap; bottom: 12px; width: calc(100% - 24px); }
  .gf-conn-banner__text { flex-basis: calc(100% - 48px); }
  .gf-conn-banner__actions { width: 100%; justify-content: flex-end; }
  .gf-conn-banner__actions .btn { flex: 1 1 auto; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .gf-conn-banner { animation: none; }
  body.app .sync-status[data-connection="checking"] .sync-status__dot { animation: none; }
}
@media print { .gf-conn-banner { display: none !important; } }

/* ===== Offline records screen, v2: status card, summary, scope chips and cleaner lists. Theme colours only. ===== */
.ow-page { background: var(--gf-bg, #f4f7fb); }
.ow-header { border-bottom-color: var(--gf-border-soft, #e9eff5); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
.ow-header__inner, .ow-main { max-width: 1200px; }
.ow-header__end { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ow-main { padding: 24px 16px 40px; }

.ow-hero { display: flex; align-items: center; gap: 20px; margin-bottom: 16px; padding: 22px 24px; background: var(--gf-surface, #fff); border: 1px solid var(--gf-border-soft, #e9eff5); border-left: 4px solid var(--gf-primary, #002684); border-radius: 16px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06); animation: pwa-offline-in 0.3s ease-out; }
.ow-hero__icon { display: grid; flex: 0 0 auto; place-items: center; width: 56px; height: 56px; color: var(--gf-primary, #002684); font-size: 1.4rem; background: var(--gf-primary-soft, #e8eefb); border-radius: 16px; }
.ow-hero[data-connection="offline"] { border-left-color: var(--gf-warning, #9a5b00); }
.ow-hero[data-connection="offline"] .ow-hero__icon { color: var(--gf-warning, #9a5b00); background: var(--gf-warning-soft, #fff4d6); }
.ow-hero[data-connection="online"] { border-left-color: var(--gf-secondary, #02a779); }
.ow-hero[data-connection="online"] .ow-hero__icon { color: var(--gf-success, #087a55); background: var(--gf-secondary-soft, #e6f7f2); }
.ow-hero[data-connection="checking"] .ow-hero__icon i { animation: pwa-offline-spin 1.2s linear infinite; }
.ow-hero__body { flex: 1 1 auto; min-width: 0; }
.ow-hero__eyebrow { margin: 0 0 2px; color: var(--gf-text-subtle, #627285); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; }
.ow-hero__title { margin: 0 0 4px; color: var(--gf-primary, #002684); font-size: 1.35rem; font-weight: 700; line-height: 1.25; }
.ow-hero__text { margin: 0 0 10px; max-width: 720px; color: var(--gf-text-secondary, #526174); font-size: 0.92rem; line-height: 1.5; }
.ow-hero__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; color: var(--gf-text-subtle, #627285); font-size: 0.82rem; }
.ow-hero__pending { color: var(--gf-success, #087a55); font-weight: 600; }
.ow-hero__pending:not([data-pending="0"]) { color: var(--gf-warning, #9a5b00); }
.ow-hero__pending a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ow-hero__actions { display: flex; flex: 0 0 auto; flex-direction: column; gap: 8px; }
.ow-hero__actions .btn { min-height: 44px; white-space: nowrap; }
.ow-hero__actions .btn[hidden] { display: none; }

.ow-notice { border-radius: 12px; }

.ow-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 14px; }
.ow-stats:empty { display: none; }
.ow-stat { display: flex; align-items: center; gap: 12px; padding: 14px 16px; color: var(--gf-text, #172033); text-align: left; background: var(--gf-surface, #fff); border: 1px solid var(--gf-border-soft, #e9eff5); border-radius: 14px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease; }
.ow-stat:hover { border-color: var(--gf-border, #d8e1eb); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08); transform: translateY(-1px); }
.ow-stat:focus-visible { outline: 2px solid var(--gf-primary, #002684); outline-offset: 2px; }
.ow-stat.is-active { border-color: var(--gf-primary, #002684); box-shadow: 0 0 0 3px rgba(0, 38, 132, 0.12); }
.ow-stat__icon { display: grid; flex: 0 0 auto; place-items: center; width: 40px; height: 40px; color: var(--gf-primary, #002684); background: var(--gf-primary-soft, #e8eefb); border-radius: 12px; }
.ow-stat--attention .ow-stat__icon { color: var(--gf-warning, #9a5b00); background: var(--gf-warning-soft, #fff4d6); }
.ow-stat[data-view="queue"]:not(.ow-stat--attention) .ow-stat__icon { color: var(--gf-success, #087a55); background: var(--gf-secondary-soft, #e6f7f2); }
.ow-stat__body { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.ow-stat__body strong { font-size: 1.35rem; font-weight: 700; }
.ow-stat__body span { overflow: hidden; color: var(--gf-text-subtle, #627285); font-size: 0.8rem; text-overflow: ellipsis; white-space: nowrap; }

.ow-scope { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 18px; }
.ow-scope__group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.ow-scope__title { display: inline-flex; align-items: center; gap: 6px; margin-right: 2px; font-size: 0.8rem; font-weight: 600; }
.ow-scope__group--ok .ow-scope__title { color: var(--gf-success, #087a55); }
.ow-scope__group--need .ow-scope__title { color: var(--gf-text-subtle, #627285); }
.ow-chip { display: inline-block; padding: 3px 10px; font-size: 0.76rem; font-weight: 500; white-space: nowrap; border-radius: 999px; }
.ow-scope__group--ok .ow-chip { color: var(--gf-success, #087a55); background: var(--gf-secondary-soft, #e6f7f2); }
.ow-scope__group--need .ow-chip { color: var(--gf-text-secondary, #526174); background: var(--gf-surface-muted, #f8fafc); border: 1px solid var(--gf-border-soft, #e9eff5); }

.ow-tabs { gap: 2px; margin-bottom: 0; border-bottom-color: var(--gf-border-soft, #e9eff5); scrollbar-width: none; }
.ow-tabs::-webkit-scrollbar { display: none; }
.ow-tabs:empty, .ow-panel[hidden] { display: none; }
.ow-tab { gap: 8px; padding: 12px 14px; color: var(--gf-text-secondary, #526174); border-radius: 10px 10px 0 0; transition: color 140ms ease, background 140ms ease; }
.ow-tab:hover { color: var(--gf-primary, #002684); background: var(--gf-surface, #fff); }
.ow-tab:focus-visible { outline: 2px solid var(--gf-primary, #002684); outline-offset: -2px; }
.ow-tab.is-active { color: var(--gf-primary, #002684); background: var(--gf-surface, #fff); }
.ow-tab__count { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; color: var(--gf-text-secondary, #526174); font-size: 0.72rem; font-weight: 700; background: var(--gf-surface-muted, #f8fafc); border: 1px solid var(--gf-border-soft, #e9eff5); border-radius: 999px; }
.ow-tab.is-active .ow-tab__count { color: var(--gf-primary, #002684); background: var(--gf-primary-soft, #e8eefb); border-color: transparent; }
.ow-tab__count--attention { color: var(--gf-warning, #9a5b00) !important; background: var(--gf-warning-soft, #fff4d6) !important; border-color: transparent; }

.ow-panel { padding: 20px; border-color: var(--gf-border-soft, #e9eff5); border-top: 0; border-radius: 0 0 16px 16px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05); }
.ow-toolbar { margin-bottom: 8px; }
.ow-search { position: relative; flex: 1 1 260px; max-width: 460px; margin: 0; }
.ow-search > i { position: absolute; top: 50%; left: 14px; color: var(--gf-text-subtle, #627285); font-size: 0.9rem; transform: translateY(-50%); pointer-events: none; }
body.app .ow-search .form-control { max-width: none; min-height: 44px; padding-left: 40px; border-radius: 12px; }
.ow-page .sync-status { white-space: nowrap; }
.ow-toolbar .btn { min-height: 44px; border-radius: 12px; }
.ow-list-summary { margin: 4px 0 6px; color: var(--gf-text-subtle, #627285); font-size: 0.8rem; }

.ow-item { gap: 14px; min-height: 68px; padding: 12px 10px; border-bottom-color: var(--gf-border-soft, #e9eff5); border-radius: 10px; transition: background 140ms ease; }
.ow-list li:last-child .ow-item { border-bottom: 0; }
.ow-item:hover, .ow-item:focus-visible { background: var(--gf-surface-muted, #f8fafc); }
.ow-item:focus-visible { outline: 2px solid var(--gf-primary, #002684); outline-offset: -2px; }
.ow-item__avatar { display: grid; flex: 0 0 auto; place-items: center; width: 42px; height: 42px; color: var(--gf-primary, #002684); font-size: 0.82rem; font-weight: 700; background: var(--gf-primary-soft, #e8eefb); border-radius: 50%; }
.ow-item__avatar--products, .ow-item__avatar--services { color: var(--gf-success, #087a55); background: var(--gf-secondary-soft, #e6f7f2); border-radius: 12px; }
.ow-item__main { flex: 1 1 auto; gap: 2px; }
.ow-item__main strong { color: var(--gf-text, #172033); font-size: 0.95rem; }
.ow-item__main small { color: var(--gf-text-subtle, #627285); font-size: 0.8rem; }
.ow-item__chevron { flex: 0 0 auto; color: var(--gf-border, #d8e1eb); font-size: 0.8rem; transition: color 140ms ease, transform 140ms ease; }
.ow-item:hover .ow-item__chevron { color: var(--gf-primary, #002684); transform: translateX(2px); }
.ow-synced { display: inline-grid; place-items: center; width: 24px; height: 24px; color: var(--gf-secondary, #02a779); font-size: 1rem; }

.ow-empty-state { display: flex; flex-direction: column; align-items: center; padding: 36px 16px; text-align: center; }
.ow-empty-state__icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 14px; color: var(--gf-primary, #002684); font-size: 1.5rem; background: var(--gf-primary-soft, #e8eefb); border-radius: 50%; }
.ow-empty-state__title { margin: 0 0 4px; color: var(--gf-text, #172033); font-size: 1rem; font-weight: 700; }
.ow-empty-state__text { max-width: 420px; margin: 0 0 16px; color: var(--gf-text-secondary, #526174); font-size: 0.88rem; }
.ow-empty-state .btn { min-height: 44px; }

.ow-privacy { margin: 16px 0 0; color: var(--gf-text-subtle, #627285); font-size: 0.8rem; text-align: center; }
.ow-privacy .fa-lock { color: var(--gf-success, #087a55); }

@media (max-width: 767.98px) {
  .ow-hero { flex-wrap: wrap; gap: 14px; padding: 18px; }
  .ow-hero__icon { width: 48px; height: 48px; font-size: 1.2rem; border-radius: 14px; }
  .ow-hero__body { flex-basis: calc(100% - 62px); }
  .ow-hero__actions { flex-direction: row; flex-wrap: wrap; width: 100%; }
  .ow-hero__actions .btn { flex: 1 1 180px; }
  .ow-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
@media (max-width: 575.98px) {
  .ow-main { padding: 16px 12px 32px; }
  .ow-header .pwa-offline-user { display: none; }
  .ow-hero__title { font-size: 1.15rem; }
  /* Summary and scope chips scroll sideways instead of stacking into many rows. */
  .ow-stats { display: flex; overflow-x: auto; margin: 0 -12px 14px; padding: 2px 12px 6px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .ow-stats::-webkit-scrollbar, .ow-scope__group::-webkit-scrollbar { display: none; }
  .ow-stat { flex: 0 0 142px; padding: 12px; scroll-snap-align: start; }
  .ow-stat__icon { width: 34px; height: 34px; border-radius: 10px; }
  .ow-scope { display: block; }
  .ow-scope__group { flex-wrap: nowrap; overflow-x: auto; margin: 0 -12px 8px; padding: 0 12px; scrollbar-width: none; }
  .ow-scope__title { flex: 0 0 auto; }
  .ow-panel { padding: 14px 12px; }
  .ow-toolbar .btn { width: 100%; }
  .ow-search { max-width: none; }
  .ow-item { flex-direction: row; align-items: center; }
  .ow-item__meta { flex-direction: column; align-items: flex-end; }
  .ow-item__chevron { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ow-hero, .ow-stat, .ow-item__chevron { animation: none; transition: none; }
  .ow-hero[data-connection="checking"] .ow-hero__icon i { animation: none; }
}