/* Wspólne rozszerzenia wersji 3. Plik jest lokalny, aby PWA działała bez internetu. */
html.large-text { font-size: 112.5%; }
html.large-text .btn, html.large-text button, html.large-text .input { min-height: 48px; }

.app-lock {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: color-mix(in srgb, var(--bg) 94%, #000);
}
.lock-card { width: min(420px, 100%); display: grid; gap: 16px; padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: var(--shadow); text-align: center; }
.lock-card h1, .lock-card p { margin: 0; }
.lock-mark { font-size: 42px; }
.form-message { min-height: 1.4em; color: var(--danger); }
.onboarding { line-height: 1.6; }
.onboarding ol { padding-left: 22px; }

.feature-widgets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.feature-widget { min-height: 132px; display: grid; place-content: center; gap: 5px; border: 1px solid #ffffff2b; border-radius: 14px; color: #fff; box-shadow: var(--shadow); text-align: center; }
.feature-widget strong { font-size: clamp(30px, 4vw, 44px); }
.feature-widget span { font-size: 13px; }
.feature-widget.blue { background: linear-gradient(145deg, #12698d, #073f5b); }
.feature-widget.pink { background: linear-gradient(145deg, #9c426f, #632642); }
.feature-widget.orange { background: linear-gradient(145deg, #9a5a1d, #64350b); }
.feature-widget.green { background: linear-gradient(145deg, #207859, #0c4936); }
.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.feature-card { display: grid; align-content: start; gap: 12px; padding: 20px; }
.feature-card h2, .inventory-card h2, .note-card h2 { margin: 0; font-size: 19px; }
.feature-card > .btn:last-child { justify-self: start; margin-top: auto; }
.compact-row { display: grid; grid-template-columns: minmax(70px, auto) minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.compact-row:last-of-type { border-bottom: 0; }
.compact-row small { color: var(--muted); }
.big-number { font-size: 30px; font-weight: 750; }
.big-number small { font-size: 14px; color: var(--muted); }
.big-date { font-size: 22px; font-weight: 700; }
.progress { height: 9px; overflow: hidden; border-radius: 99px; background: #ffffff18; }
.progress i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }

.meal-week { display: grid; grid-template-columns: repeat(7, minmax(165px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.meal-day { padding: 14px; }
.meal-day h2 { margin: 0 0 12px; font-size: 15px; text-transform: capitalize; }
.meal-entry { width: 100%; min-height: 76px; display: grid; gap: 4px; margin: 7px 0; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); color: var(--text); text-align: left; }
.meal-entry small, .meal-entry span { color: var(--muted); }
.meal-entry.empty-slot { border-style: dashed; opacity: .8; }

.feature-table { overflow-x: auto; }
.feature-table-row { min-width: 760px; display: grid; grid-template-columns: 105px minmax(220px, 1fr) 130px 150px 90px; align-items: center; gap: 12px; padding: 13px; border-bottom: 1px solid var(--line); }
.feature-table-row:last-child { border-bottom: 0; }
.feature-table-row small { display: block; margin-top: 4px; color: var(--muted); }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.metric-grid .metric { display: grid; gap: 6px; padding: 16px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); }
.metric-grid .metric span { color: var(--muted); font-size: 13px; }
.metric-grid .metric strong { font-size: 22px; }

.note-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.note-card { display: grid; align-content: start; gap: 12px; padding: 18px; }
.note-body { white-space: pre-wrap; line-height: 1.55; }
.note-image { width: 100%; max-height: 280px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.tall { min-height: 130px; resize: vertical; }
.avatar.has-photo { overflow: hidden; padding: 0; }
.avatar.has-photo img { width: 100%; height: 100%; object-fit: cover; }
.list-add-grid { display: grid; grid-template-columns: minmax(130px, 1fr) 90px 120px auto; gap: 8px; margin-top: 14px; }
.list-item label { display: grid; gap: 3px; }
.list-item label small { color: var(--muted); }

.common-settings { gap: 12px; }
.common-settings .field { margin-block: 5px; }
.backup-list { display: grid; gap: 6px; margin-top: 10px; }
.storage-meter { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); }
.storage-meter > div:first-child { display: flex; justify-content: space-between; gap: 8px; }
.storage-meter .progress { width: 100%; }
.qr-panel { text-align: center; }
.qr-panel img { width: min(100%, 520px); image-rendering: pixelated; border: 12px solid #fff; border-radius: 8px; }

.month-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.month-grid label, .check-label { display: flex; align-items: center; gap: 7px; min-height: 40px; }
.month-grid input, .check-label input { width: 22px; height: 22px; }
.steps { margin: 8px 0; padding-left: 24px; line-height: 1.55; }
.steps li + li { margin-top: 5px; }
.quick-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 20px; }
.quick-choice { min-height: 160px; display: grid; place-content: center; border: 1px solid #ffffff35; border-radius: 18px; background: linear-gradient(145deg, var(--accent-dark), var(--accent-darker)); color: #fff; }
.quick-choice strong { font-size: 48px; }
.quick-choice span { font-size: 16px; }
.active-timer { display: grid; justify-items: center; gap: 14px; padding: 24px; }
.timer-clock { font-size: clamp(52px, 9vw, 90px); font-variant-numeric: tabular-nums; font-weight: 800; color: var(--accent); }
.timer-clock.finished { color: var(--warn); }
.quick-task-list { width: min(760px, 100%); }
.quick-task { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border-bottom: 1px solid var(--line); }
.quick-task small { display: block; margin-top: 3px; color: var(--muted); }
.quick-task.done strong { text-decoration: line-through; opacity: .7; }
.achievement { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; opacity: .62; }
.achievement.reached { opacity: 1; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.achievement > span { font-size: 22px; color: var(--accent); }
.achievement small { display: block; color: var(--muted); }
.chart-row { display: grid; grid-template-columns: 90px minmax(0, 1fr) 75px; align-items: center; gap: 10px; }
.chart-row > div { height: 12px; overflow: hidden; border-radius: 99px; background: #ffffff17; }
.chart-row i { display: block; height: 100%; background: var(--bar, var(--accent)); border-radius: inherit; }
.inventory-card { display: grid; gap: 10px; padding: 18px; }
.inventory-card.low-stock { border-color: var(--warn); }
.photo-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.photo-compare figure { margin: 0; }
.photo-compare img { width: 100%; height: 230px; object-fit: cover; border-radius: 10px; }
.photo-compare figcaption { margin-top: 6px; text-align: center; color: var(--muted); }
.photo-placeholder { min-height: 230px; display: grid; place-items: center; padding: 15px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); text-align: center; }

html[data-app-kind="cleaning"] .task { grid-template-columns: 50px minmax(230px, 1fr) 120px 75px 110px auto auto; }

html[data-theme="light"] {
  color-scheme: light;
  --bg: #eef5f7;
  --panel: #ffffff;
  --panel-2: #f2f7f8;
  --line: #b7cbd1;
  --text: #14252c;
  --muted: #536970;
  --shadow: 0 14px 36px #25404a22;
}
html[data-theme="light"] body { background: linear-gradient(145deg, #f6fafb, #e7f0f2); }
html[data-theme="light"] .sidebar,
html[data-theme="light"] #side,
html[data-theme="light"] .topbar,
html[data-theme="light"] .top { background: #f8fbfc; color: var(--text); }
html[data-theme="light"] .nav-item,
html[data-theme="light"] #side nav button { color: #30484f; }
html[data-theme="light"] .input,
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea { color: var(--text); background: #fff; }
html[data-theme="light"] .modal { background: #fff; color: var(--text); }
html[data-theme="light"] .card,
html[data-theme="light"] .task,
html[data-theme="light"] .meal-entry,
html[data-theme="light"] .date-button,
html[data-theme="light"] .calendar-day,
html[data-theme="light"] .day,
html[data-theme="light"] .mini-task { background: #fff; color: var(--text); box-shadow: var(--shadow); }
html[data-theme="light"] .field { color: #30484f; }
html[data-theme="light"] .bottom-nav,
html[data-theme="light"] #bottom { background: #f8fbfcf5; }
html[data-theme="light"] .bottom-nav button,
html[data-theme="light"] #bottom button { color: #40575e; }
html[data-theme="light"] .scope-note { background: #dff4eb; color: #18392f; }
html[data-theme="light"] .btn.primary { background: var(--accent); color: #071b20; }

@media (max-width: 1000px) {
  .feature-widgets { grid-template-columns: repeat(2, 1fr); }
  .feature-grid { grid-template-columns: 1fr; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .month-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 900px) {
  html[data-app-kind="cleaning"] .task { grid-template-columns: 44px minmax(0, 1fr) auto auto; }
  .meal-week { grid-template-columns: repeat(7, 210px); }
}

@media (max-width: 560px) {
  .feature-widgets, .metric-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .feature-widget { min-height: 105px; }
  .feature-widget strong { font-size: 30px; }
  .compact-row { grid-template-columns: 1fr; gap: 3px; }
  .quick-picker { grid-template-columns: 1fr; gap: 10px; }
  .quick-choice { min-height: 105px; }
  .quick-choice strong { font-size: 38px; }
  .list-add-grid { grid-template-columns: 1fr 1fr; }
  .list-add-grid > :first-child { grid-column: 1 / -1; }
  .month-grid { grid-template-columns: repeat(3, 1fr); }
  .photo-compare { grid-template-columns: 1fr; }
  .photo-compare img, .photo-placeholder { min-height: 180px; height: 180px; }
}

@media print {
  .topbar, .top, .sidebar, #side, .bottom-nav, #bottom, .page-head .actions, .head .actions, button, .toast, #toast { display: none !important; }
  .content, #content { margin: 0 !important; padding: 0 !important; }
  body { background: #fff !important; color: #111 !important; }
  .card, .task, .feature-card { break-inside: avoid; background: #fff !important; color: #111 !important; border-color: #aaa !important; box-shadow: none !important; }
  .muted, small { color: #444 !important; }
}