/* OCHNIK HOME — prototyp (max potential)
   Zasada: mobile-first, offline, zero zależności zewnętrznych.
*/

:root{
  --bg: #f6f2ee;
  --card: #ffffff;
  --ink: #2b1f1d;
  --muted: #635653;          /* WCAG AA >=4.5:1 na #f6f2ee (było #7a6a67 ~3.5:1) */
  --line: rgba(43,31,29,0.12);

  --brand: #9a6a63;      /* ciepły róż/bordo */
  --brand-2: #3b2a27;    /* głęboki brąz */
  --accent: #2f5bff;     /* niebieski akcent (powiadomienia) */

  --ok: #0f7a4b;
  --warn: #b36a00;
  --danger: #b02a2a;

  --shadow: 0 14px 40px rgba(0,0,0,0.14);
  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 26px;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --serif: ui-serif, Georgia, "Times New Roman", Times, serif;

  --transition-page: 250ms ease-out;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background: radial-gradient(1200px 600px at 50% -10%, rgba(154,106,99,0.20), transparent 60%), var(--bg);
  color:var(--ink);
  font-family:var(--sans);
}

a{color:inherit;text-decoration:none;}
button{font-family:inherit;}

/* Skip to content (a11y) */
.skip-to-content{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
  z-index:100;
  background:var(--brand-2);
  color:#fff;
  padding:12px 16px;
  border-radius:0 0 12px 0;
  font-weight:700;
  text-decoration:none;
}
.skip-to-content:focus{
  position:fixed;
  left:0;
  top:0;
  width:auto;
  height:auto;
  overflow:visible;
}

.app-shell{
  height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:0;
  gap:0;
  overflow:hidden;
}
@media (min-width: 600px){
  .app-shell{
    padding:22px 12px 30px;
    height:100dvh;
  }
}

.device{
  width:100%;
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  background: linear-gradient(180deg, rgba(154,106,99,0.06), transparent 22%), var(--bg);
  border:none;
  border-radius:0;
  box-shadow:none;
  overflow:hidden;
  position:relative;
}
@media (min-width: 600px){
  .device{
    width:min(430px, 100%);
    flex:1;
    max-height:920px;
    border:1px solid rgba(43,31,29,0.12);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
  }
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 14px 10px;
  border-bottom:1px solid var(--line);
  background: rgba(246,242,238,0.86);
  backdrop-filter: blur(10px);
  position:sticky;
  top:0;
  z-index:10;
}

.ghost{
  border:0;
  background:transparent;
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 6px;
  border-radius:12px;
  cursor:pointer;
  text-align:left;
}
.ghost:hover{background:rgba(154,106,99,0.08);}

.mono-badge{
  width:34px;height:34px;
  border-radius:12px;
  display:grid;place-items:center;
  background: var(--brand-2);
  color:#fff;
  font-weight:700;
  letter-spacing:0.6px;
}

.topbar-title{display:flex;flex-direction:column;line-height:1.15;}
.topbar-sub{font-size:12px;color:var(--muted);}
.topbar-main{font-size:14px;font-weight:650;}
.chev{color:var(--muted);padding-left:2px}

.topbar-actions{display:flex;align-items:center;gap:6px;}
.iconbtn{
  width:44px;height:44px;        /* min touch target WCAG (było 38px) */
  border-radius:14px;
  border:1px solid rgba(43,31,29,0.12);
  background: rgba(255,255,255,0.6);
  cursor:pointer;
  display:grid;place-items:center;
  position:relative;
}
.iconbtn:hover{background:#fff;}
.iconbtn svg{width:18px;height:18px;fill:var(--brand-2);}

/* Notification dot + count badge */
.dot{
  width:10px;height:10px;
  background: var(--accent);
  border-radius:50%;
  position:absolute;
  transform: translate(12px, -10px);
  box-shadow: 0 0 0 4px rgba(47,91,255,0.15);
  display:none;
}
.notif-count{
  position:absolute;
  top:2px; right:2px;
  min-width:18px; height:18px;
  padding:0 5px;
  border-radius:999px;
  background:var(--accent);
  color:#fff;
  font-size:11px;
  font-weight:800;
  display:none;
  place-items:center;
  line-height:18px;
  text-align:center;
}

.screen{
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding:14px 14px 92px;
  /* Page transition */
  animation: fadeIn var(--transition-page) both;
}

@keyframes fadeIn{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}

/* Components — Semantic headings */
h1, .h1{
  font-family:var(--serif);
  font-size:24px;
  letter-spacing:0.2px;
  margin:8px 0 6px;
  font-weight:normal;
}
h2, .h2{
  font-family:var(--serif);
  font-size:18px;
  margin:14px 0 8px;
  font-weight:normal;
}
.p{color:var(--muted);font-size:14px;line-height:1.45;margin:0 0 10px;}
.muted{color:var(--muted);}

.card{
  background: var(--card);
  border:1px solid rgba(43,31,29,0.12);
  border-radius: var(--radius);
  padding:14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

.card + .card{margin-top:12px;}

.row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.col{display:flex;flex-direction:column;gap:6px;}
.badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(43,31,29,0.12);
  background: rgba(154,106,99,0.08);
  color: var(--brand-2);
  font-weight:600;
}
.badge.blue{background:rgba(47,91,255,0.10); color:var(--accent);}
.badge.ok{background:rgba(15,122,75,0.10); color:var(--ok);}
.badge.warn{background:rgba(179,106,0,0.12); color:var(--warn);}
.badge.danger{background:rgba(176,42,42,0.10); color:var(--danger);}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 12px;
  border-radius: 14px;
  border:1px solid rgba(43,31,29,0.12);
  background: var(--brand-2);
  color:#fff;
  font-weight:650;
  cursor:pointer;
  text-decoration:none;
  font-size:14px;
}
.btn:hover{filter:brightness(1.03);}
.btn.secondary{
  background: rgba(255,255,255,0.86);
  color: var(--brand-2);
}
.btn.small{padding:8px 10px;border-radius:12px;font-size:13px;}
.btn.full{width:100%;}
.btn.danger-btn{background:var(--danger);color:#fff;border-color:var(--danger);}

/* Back button — consistent on all sub-screens */
.back-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:44px;      /* touch target WCAG */
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(43,31,29,0.12);
  background: rgba(154,106,99,0.08);
  color: var(--brand-2);
  font-weight:600;
  font-size:13px;
  text-decoration:none;
  cursor:pointer;
}
.back-btn:hover{background:rgba(154,106,99,0.14);}

.divider{height:1px;background:var(--line);margin:12px 0;}

.kpi{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.kpi .tile{
  border-radius: 16px;
  border:1px solid rgba(43,31,29,0.12);
  background: linear-gradient(180deg, rgba(154,106,99,0.10), rgba(255,255,255,0.6));
  padding:12px;
}
.kpi .num{font-size:20px;font-weight:800;}
.kpi .lbl{font-size:12px;color:var(--muted);margin-top:3px;}

/* Progress bar with ARIA + animation */
.progressbar{
  width:100%;
  height:10px;
  border-radius: 999px;
  background: rgba(43,31,29,0.10);
  overflow:hidden;
}
.progressbar > div{
  height:100%;
  border-radius:999px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  transition: width 600ms ease-out;
  animation: progressGrow 600ms ease-out;
}

@keyframes progressGrow{
  from{ transform: scaleX(0); transform-origin: left; }
  to{ transform: scaleX(1); transform-origin: left; }
}

/* Lists — semantic ul/li support */
.list{display:flex;flex-direction:column;gap:10px; list-style:none; padding:0; margin:0;}
ul.list{list-style:none;}
.listitem{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(43,31,29,0.12);
  background: rgba(255,255,255,0.80);
}
/* Clickable items get chevron + hover */
a.listitem:hover, button.listitem:hover, .listitem.clickable:hover{background:#fff;cursor:pointer;}
/* Static items — no hover change */
.listitem.static{cursor:default;}
.listitem.static:hover{background: rgba(255,255,255,0.80);}
.li-title{font-weight:750;}
.li-sub{font-size:13px;color:var(--muted);margin-top:2px;}
.li-right{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
.chevron-right{color:var(--muted);font-size:14px;margin-left:4px;}
.pill{
  font-size:12px;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid rgba(43,31,29,0.12);
  background: rgba(43,31,29,0.04);
}

.thumb{
  width:54px;height:54px;border-radius:14px;
  border:1px solid rgba(43,31,29,0.12);
  background: linear-gradient(135deg, rgba(154,106,99,0.25), rgba(59,42,39,0.10));
  overflow:hidden;
  flex: 0 0 auto;
  display:grid;place-items:center;
}
.thumb img{width:100%;height:100%;object-fit:cover;}

.bottomnav{
  position:absolute;
  left:0; right:0; bottom:0;
  background: rgba(246,242,238,0.92);
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  padding:9px 6px 12px;
  backdrop-filter: blur(10px);
}
.navitem{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  padding:8px 6px;
  border-radius:14px;
  color:var(--muted);
}
.navitem:hover{background:rgba(154,106,99,0.08); color:var(--brand-2);}
.navitem.active{
  background: rgba(154,106,99,0.10);
  color: var(--brand-2);
}
.navicon svg{width:20px;height:20px;fill:currentColor;}
.navlabel{font-size:12px;font-weight:650;}   /* było 11px — na granicy czytelności */

/* No-chrome mode (welcome/login/onboarding/select) */
.device.no-chrome .topbar,
.device.no-chrome .bottomnav { display:none; }
.device.no-chrome .screen { padding-bottom:14px; }

/* Lucide icons */
.lucide-icon{
  width:22px;
  height:22px;
  stroke:currentColor;
  stroke-width:2;
  fill:none;
}
.thumb .lucide-icon{
  width:24px;
  height:24px;
  opacity:0.6;
}
.empty-state .lucide-icon{
  width:36px;
  height:36px;
  opacity:0.5;
}
.ind-icon .lucide-icon{
  width:20px;
  height:20px;
}
.onboarding-icon .lucide-icon{
  width:48px;
  height:48px;
  opacity:0.7;
}
.celebration-icon .lucide-icon{
  width:40px;
  height:40px;
}
.copy-btn .lucide-icon{
  width:14px;
  height:14px;
}

/* Overlays */
.overlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,0.42);
  display:grid;
  place-items:end center;
  z-index:50;
  padding:14px;
  animation: overlayFadeIn 200ms ease-out;
}
.overlay.hidden{display:none;}

@keyframes overlayFadeIn{
  from{opacity:0;}
  to{opacity:1;}
}

.sheet{
  width:min(430px, 100%);
  background: rgba(246,242,238,0.98);
  border:1px solid rgba(255,255,255,0.22);
  border-radius: 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.28);
  overflow:hidden;
  animation: sheetSlideUp 250ms ease-out;
}
@keyframes sheetSlideUp{
  from{transform:translateY(20px);opacity:0;}
  to{transform:translateY(0);opacity:1;}
}
.sheet-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 14px 10px;
  border-bottom:1px solid var(--line);
}
.sheet-title{font-weight:850;}
.sheet-body{padding:12px 14px; display:flex; flex-direction:column; gap:10px;}
.sheet-footer{padding:12px 14px; border-top:1px solid var(--line); display:flex; gap:10px; justify-content:flex-end;}

.menulink{
  padding:12px 12px;
  border-radius: 16px;
  border:1px solid rgba(43,31,29,0.12);
  background: rgba(255,255,255,0.75);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.menulink:hover{background:#fff;}
.menulink.danger{
  border-color: rgba(176,42,42,0.18);
  background: rgba(176,42,42,0.06);
  color: var(--danger);
  width:100%;
  cursor:pointer;
}
.menulink.danger:hover{
  background: rgba(176,42,42,0.10);
}
.tag{
  font-size:11px;
  padding:4px 8px;
  border-radius:999px;
  background: rgba(47,91,255,0.10);
  color: var(--accent);
  font-weight:750;
}

/* Toast */
.toast{
  width:min(430px, 100%);
  background: rgba(255,255,255,0.94);
  border:1px solid rgba(43,31,29,0.18);
  border-radius: 22px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.30);
  padding:14px;
  animation: sheetSlideUp 250ms ease-out;
}
.toast-title{font-weight:900;}
.toast-body{color:var(--muted);margin-top:4px;font-size:14px;line-height:1.35;}
.toast-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:12px;}

/* Confirmation dialog */
.confirm-dialog{
  width:min(380px, 92%);
  background: rgba(255,255,255,0.98);
  border:1px solid rgba(43,31,29,0.18);
  border-radius: 22px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.30);
  padding:18px;
  text-align:center;
  animation: sheetSlideUp 250ms ease-out;
}
.confirm-dialog .confirm-title{font-weight:900;font-size:16px;}
.confirm-dialog .confirm-body{color:var(--muted);margin-top:6px;font-size:14px;line-height:1.4;}
.confirm-dialog .confirm-actions{display:flex;gap:10px;margin-top:16px;justify-content:center;}
.confirm-dialog .confirm-actions .btn{flex:1;}

/* Inline feedback (for star rating etc.) */
.inline-feedback{
  font-size:13px;
  color:var(--ok);
  font-weight:650;
  padding:6px 0;
  animation: fadeIn 300ms ease-out;
}

/* Coming soon badge (dead-end replacement) */
.coming-soon{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  padding:6px 12px;
  border-radius:999px;
  border:1px dashed rgba(43,31,29,0.22);
  background: rgba(43,31,29,0.04);
  color:var(--muted);
  font-weight:600;
}

/* Forms */
.field{display:flex;flex-direction:column;gap:6px;}
label{font-size:12px;color:var(--muted);font-weight:650;}
input, textarea, select{
  width:100%;
  border-radius: 14px;
  border:1px solid rgba(43,31,29,0.16);
  background: rgba(255,255,255,0.9);
  padding:12px 12px;
  font-size:14px;
  outline:none;
}
textarea{min-height:88px;resize:vertical;}
input:focus, textarea:focus, select:focus{
  border-color: rgba(47,91,255,0.55);
  box-shadow: 0 0 0 6px rgba(47,91,255,0.12);
}

/* Field error (inline validation) */
.field-error{
  font-size:12px;
  color:var(--danger);
  font-weight:600;
  margin-top:2px;
  animation: fadeIn 200ms ease-out;
}
input.error, textarea.error, select.error{
  border-color:var(--danger);
  box-shadow: 0 0 0 4px rgba(176,42,42,0.10);
}

/* Rating — WCAG 44x44 touch targets + keyboard accessible */
.stars{
  display:flex;
  gap:6px;
}
.stars[role="radiogroup"]{outline:none;}
.star{
  width:44px;height:44px;     /* min touch target WCAG (było 28px) */
  border-radius: 12px;
  border:1px solid rgba(43,31,29,0.18);
  background: rgba(43,31,29,0.04);
  display:grid;place-items:center;
  cursor:pointer;
}
.star:hover{background:rgba(154,106,99,0.12);}
.star.active{
  background: rgba(154,106,99,0.18);
  border-color: rgba(154,106,99,0.42);
}
.star svg{width:20px;height:20px;fill:var(--brand-2);}

/* Status at a Glance */
.glance-card{
  background: linear-gradient(135deg, var(--brand-2), rgba(154,106,99,0.95));
  color:#fff;
  border:none;
  border-radius: var(--radius);
  padding:18px;
  box-shadow: 0 14px 40px rgba(59,42,39,0.22);
}
.glance-card .glance-greeting{
  font-family:var(--serif);
  font-size:22px;
  margin-bottom:4px;
}
.glance-card .glance-sub{
  font-size:13px;
  opacity:0.8;
  margin-bottom:14px;
}
.glance-indicators{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:8px;
}
.glance-ind{
  background:rgba(255,255,255,0.14);
  border-radius:14px;
  padding:10px;
  text-align:center;
}
.glance-ind .ind-icon{font-size:18px;margin-bottom:4px;}
.glance-ind .ind-label{font-size:11px;opacity:0.8;}
.glance-ind .ind-value{font-size:13px;font-weight:800;margin-top:2px;}
.glance-ind.status-ok{background:rgba(255,255,255,0.92);color:var(--brand-2);}
.glance-ind.status-ok .ind-label{opacity:0.6;}
.glance-ind.status-warn{background:rgba(179,106,0,0.25);}
.glance-ind.status-danger{background:rgba(176,42,42,0.25);}

/* Celebration / milestone moment */
.celebration{
  text-align:center;
  padding:24px 14px;
  animation: celebratePulse 600ms ease-out;
}
.celebration .celebration-icon{font-size:40px;margin-bottom:8px;}
.celebration .celebration-title{font-family:var(--serif);font-size:20px;font-weight:700;}
.celebration .celebration-body{color:var(--muted);font-size:14px;margin-top:6px;}

@keyframes celebratePulse{
  0%{transform:scale(0.9);opacity:0;}
  60%{transform:scale(1.02);}
  100%{transform:scale(1);opacity:1;}
}

/* Onboarding — full-screen immersive */
.onboarding{
  display:flex;
  flex-direction:column;
  height:100%;
  padding:0;
}
.onboarding .onboarding-step{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 24px;
}
.onboarding .onboarding-icon{
  margin-bottom:20px;
}
.onboarding .onboarding-icon svg{
  width:48px; height:48px;
  color: var(--brand-2);
}
.onboarding .onboarding-title{
  font-family: var(--serif);
  font-size:22px;
  margin-bottom:10px;
}
.onboarding .onboarding-body{
  color:var(--muted);
  font-size:15px;
  line-height:1.5;
  max-width:320px;
}
.onboarding-footer{
  padding:14px 24px 24px;
}
.onboarding-footer .onboarding-dots{
  display:flex;
  gap:8px;
  justify-content:center;
  margin-bottom:16px;
}
.onboarding-dots .dot-step{
  width:8px;height:8px;
  border-radius:50%;
  background:rgba(43,31,29,0.18);
}
.onboarding-dots .dot-step.active{background:var(--brand-2);width:20px;border-radius:999px;}

/* Data freshness indicator */
.freshness{
  font-size:11px;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:4px;
}
.freshness::before{
  content:"";
  width:6px;height:6px;
  border-radius:50%;
  background:var(--ok);
  display:inline-block;
}

/* Collapsed section toggle */
.collapse-toggle{
  display:flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  padding:8px 0;
  font-size:13px;
  color:var(--muted);
  font-weight:600;
  background:none;
  border:none;
  font-family:inherit;
}
.collapse-toggle .toggle-icon{
  transition: transform 200ms ease;
}
.collapse-toggle.open .toggle-icon{
  transform: rotate(90deg);
}
.collapsed{display:none;}

/* Copy button (bank account) */
.copy-btn{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:6px 12px;
  border-radius:10px;
  border:1px solid rgba(43,31,29,0.16);
  background:rgba(255,255,255,0.8);
  cursor:pointer;
  font-size:12px;
  font-weight:650;
  color:var(--brand-2);
  font-family:inherit;
}
.copy-btn:hover{background:#fff;}
.copy-btn.copied{color:var(--ok);border-color:rgba(15,122,75,0.3);}

/* Focus visible (a11y) */
:focus-visible{
  outline: 3px solid rgba(47,91,255,0.5);
  outline-offset: 2px;
}
/* Remove default outline for mouse users */
:focus:not(:focus-visible){
  outline: none;
}

/* Live region for screen readers */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Empty state */
.empty-state{
  text-align:center;
  padding:30px 14px;
  color:var(--muted);
}
.empty-state .empty-icon{font-size:36px;margin-bottom:8px;opacity:0.5;}
.empty-state .empty-title{font-weight:750;font-size:15px;color:var(--ink);}
.empty-state .empty-body{font-size:13px;margin-top:4px;}

/* Utility */
.hidden{display:none;}
.center{display:grid;place-items:center;}
.spacer{height:8px;}
.small{font-size:12px;}
.right{margin-left:auto;}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .screen{animation:none;}
  .progressbar > div{animation:none;transition:none;}
}