/* Dodatki nowej wersji (iPad + komputer). Styl jak w public/app.css. */
body { padding-bottom: env(safe-area-inset-bottom); }
.topbar { padding-top: env(safe-area-inset-top); }

/* stan synchronizacji z Dyskiem — opis słowny, rozróżnienie obrysem (nie samym kolorem) */
.syncbar { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 50;
  display: flex; gap: 14px; align-items: center; background: #fff; color: var(--ink); border: 1px solid var(--line-strong);
  padding: 10px 14px; font: 400 .85rem/1.2 var(--f-sans); max-width: calc(100vw - 32px); }
.syncbar[data-state="login"], .syncbar[data-state="blad"] { border: 2px solid var(--ink); font-weight: 500; }
.syncbar[data-state="offline"] { border-style: dashed; }
.syncbar .link { font-size: .85rem; }
body:has(.login) .syncbar { display: none; }

.login .check { display: flex; gap: 12px; align-items: flex-start; color: rgba(255,255,255,.85); font-size: .95rem; line-height: 1.45; }
.login .check input { width: 22px; height: 22px; min-height: 0; margin-top: 2px; flex: none; accent-color: #fff; }

.pwa-block { border-top: 1px solid var(--line); padding-top: 28px; margin-top: 28px; max-width: 860px; }
.pwa-block h2 { margin-bottom: 14px; }
.pwa-block .btn { margin: 6px 8px 6px 0; display: inline-flex; align-items: center; cursor: pointer; }

/* iPad: większe pola dotyku */
@media (pointer: coarse) {
  .btn, input, select { min-height: 52px; }
  .topbar nav a, .topbar nav button { padding: 16px 12px; }
}
@media print { .syncbar { display: none; } }

/* powiadomienie (np. o nowej wersji) — u góry ekranu, nad treścią */
.notice { position: fixed; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); z-index: 60; width: min(420px, calc(100vw - 32px));
  background: #fff; color: var(--ink); border: 2px solid var(--ink); padding: 18px 20px; box-shadow: 0 12px 30px rgba(15,15,14,.12); animation: notice-in .25s ease-out; }
.notice p { margin: 0 0 14px; font-size: .95rem; line-height: 1.5; }
.notice-act { display: flex; gap: 10px; flex-wrap: wrap; }
@keyframes notice-in { from { transform: translateY(-12px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .notice { animation: none; } }