/* ===========================================================================
   DuoCare Kids — demo aplikacji mobilnej.

   Dokument samodzielny, celowo poza aplikacją Reacta sklepu: ma własny zestaw
   tokenów w :root, który zderzyłby się z tokenami sklepu, i własny przełącznik
   motywu. Serwowany jako plik statyczny z web/public/demo/.

   Wartości tokenów, wymiary i teksty pochodzą wprost ze specyfikacji.
   =========================================================================== */

:root{
  --background:#EAEFEC; --surface:#FFFFFF; --surface-alt:#F3F6F4; --surface-sunken:#E7ECE9;
  --primary:#2E7D6B; --primary-dark:#1F5D4E; --primary-strong:#1F5D4E;
  --primary-soft:#DCEDE6; --primary-tint:#EAF4F0;
  --accent:#9B87C4; --accent-soft:#ECE6F4; --accent-dark:#5A4A7A;
  --text-primary:#1E322C; --text-secondary:#71827C; --text-muted:#A6B1AC; --text-inverse:#FFFFFF;
  --border:#E1E7E3; --border-strong:#CBD5CF;
  --danger:#D9765F; --warning:#D9A65F; --success:#3E9E7E;
  --shadow:rgba(31,56,46,.14);
  --chart-teal:#2E7D6B; --chart-green:#3E9E7E; --chart-blue:#5B8CB8; --chart-purple:#9B87C4;

  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:28px; --r-pill:999px;
  --s-xs:6px; --s-sm:10px; --s-base:16px; --s-lg:24px; --pad:22px;
}
:root[data-theme="dark"]{
  --background:#111815; --surface:#1B2320; --surface-alt:#232C29; --surface-sunken:#0D1311;
  --primary:#4FB79A; --primary-dark:#8FDEC2; --primary-strong:#2E7D6B;
  --primary-soft:#1E3A33; --primary-tint:#172621;
  --accent:#B9A6E0; --accent-soft:#282142; --accent-dark:#CFC0EE;
  --text-primary:#E8EDEA; --text-secondary:#9AA8A2; --text-muted:#6C7A75; --text-inverse:#0E1512;
  --border:#2C3733; --border-strong:#3E4B46;
  --danger:#E58A73; --warning:#E8BE7C; --success:#52C79E;
  --shadow:rgba(0,0,0,.45);
  --chart-teal:#4FB79A; --chart-green:#5FC9A2; --chart-blue:#7FB4E0; --chart-purple:#B9A6E0;
}

*{box-sizing:border-box;margin:0;padding:0}
button,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}

body{
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  background:#DDE4E0;color:var(--text-primary);
  min-height:100vh;display:flex;flex-direction:column;align-items:center;
  gap:18px;padding:26px 16px 40px;
}
:root[data-theme="dark"] body{background:#0A0F0D}

.mockbar{
  background:repeating-linear-gradient(135deg,#10262b,#10262b 12px,#17343a 12px,#17343a 24px);
  color:#cfe3e6;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  text-align:center;padding:8px 14px;font-weight:600;border-radius:var(--r-sm);
  max-width:620px;line-height:1.4;
}
.backlink{font-size:13px;color:var(--text-secondary);text-decoration:none}
.backlink:hover{text-decoration:underline}

/* --- rama telefonu ------------------------------------------------------- */
.phone{
  width:402px;min-width:360px;height:864px;position:relative;
  background:var(--background);border-radius:var(--r-xl);
  border:1px solid var(--border-strong);
  box-shadow:0 24px 60px rgba(0,0,0,.22);overflow:hidden;
}
/* Bez paska stanu — aplikacja go nie rysuje. */
.screens{height:100%;position:relative}

.screen{
  position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;
  padding:26px var(--pad) 34px;
  display:none;flex-direction:column;gap:var(--s-base);
}
.screen.on{display:flex;animation:slide .18s ease}
@keyframes slide{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}

.screen.center{justify-content:center;text-align:center;align-items:center}

/* --- komponenty ---------------------------------------------------------- */
.card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:0 8px 24px var(--shadow);
  padding:var(--s-lg);
}
.card.tight{padding:0}

.btn{
  height:54px;border-radius:var(--r-md);font-weight:600;font-size:15px;width:100%;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .15s ease,background .15s ease,opacity .15s ease;
}
.btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-fill{background:var(--primary);color:var(--text-inverse)}
.btn-fill:not([disabled]):hover{filter:brightness(.88)}
.btn-accent{background:var(--accent);color:var(--text-inverse)}
.btn-line{
  background:transparent;border:1.5px solid var(--border-strong);color:var(--text-primary);
}
.btn-line:hover{background:var(--surface-alt)}

.field{display:flex;flex-direction:column;gap:6px}
.field > label{font-size:13px;font-weight:500;color:var(--text-secondary)}
.box{
  height:52px;border-radius:var(--r-md);background:var(--surface-alt);
  border:1px solid var(--border);display:flex;align-items:center;gap:9px;padding:0 14px;
  transition:border-color .15s;
}
.box:focus-within{border:1.6px solid var(--primary)}
.box input{flex:1;background:none;border:0;outline:0;font-size:15px;min-width:0}
.box input::placeholder{color:var(--text-muted)}
.box .gly{font-size:15px;opacity:.85}
.box .rev{padding:2px 4px;font-size:15px;opacity:.7}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.seclabel{
  text-transform:uppercase;font-size:13px;font-weight:700;letter-spacing:.5px;
  color:var(--text-primary);display:flex;align-items:center;gap:7px;margin-top:var(--s-xs);
}

.fhead{display:flex;flex-direction:column;gap:var(--s-sm)}
.fhead .toprow{display:flex;align-items:center;justify-content:space-between;gap:12px}
.back{
  width:40px;height:40px;border-radius:13px;background:var(--surface);
  border:1px solid var(--border);display:grid;place-items:center;
  font-size:22px;line-height:1;color:var(--text-primary);flex-shrink:0;
}
.dots{display:flex;gap:6px;align-items:center}
.dot{width:8px;height:8px;border-radius:var(--r-pill);background:var(--border-strong)}
.dot.act{width:22px;background:var(--primary)}
.h-title{font-size:26px;font-weight:700;letter-spacing:-.4px;line-height:1.2}
.h-sub{font-size:15px;color:var(--text-secondary);line-height:1.45}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{
  height:124px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:0 8px 24px var(--shadow);
  padding:14px;display:flex;flex-direction:column;justify-content:space-between;
  position:relative;text-align:left;transition:transform .15s ease;
}
.tile:active{transform:scale(.97)}
.chip{width:46px;height:46px;border-radius:14px;display:grid;place-items:center}
.tile .t{font-size:19px;font-weight:600;line-height:1.15}
.tile .s{font-size:12px;color:var(--text-secondary);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.badge{
  position:absolute;top:12px;right:12px;border-radius:var(--r-pill);
  padding:2px 9px;font-size:12px;font-weight:700;
}

.sw{width:46px;height:27px;border-radius:var(--r-pill);background:var(--border-strong);
  position:relative;transition:background .15s;flex-shrink:0}
.sw i{position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;
  background:#fff;transition:left .15s ease}
.sw.on i{left:22px}

.pill{border-radius:var(--r-pill);padding:4px 12px;font-size:12px;font-weight:600;display:inline-block}
.note{border-radius:var(--r-md);padding:14px 16px;font-size:13px;line-height:1.5;
  display:flex;gap:9px;align-items:flex-start}
.note.info{background:var(--primary-tint);color:var(--primary-dark)}

.err{display:none;gap:8px;align-items:center;color:var(--danger);font-size:13px}
.err.on{display:flex}

.list > * + *{border-top:1px solid var(--border)}
.lrow{display:flex;align-items:center;gap:12px;padding:14px var(--s-lg)}
.lrow:first-child{padding-top:var(--s-lg)}
.lrow:last-child{padding-bottom:var(--s-lg)}
.lrow .grow{flex:1;min-width:0}
.lrow .k{font-size:15px;font-weight:500}
.lrow .v{font-size:12px;color:var(--text-secondary)}
.lrow .right{font-size:15px;font-weight:700;white-space:nowrap}

.divider{display:flex;align-items:center;gap:12px;color:var(--text-muted);font-size:13px}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--border)}

.muted{color:var(--text-muted);font-size:12px;line-height:1.5}
.link{color:var(--primary);font-weight:600;cursor:pointer}
.center-txt{text-align:center}
.opt{transition:border-color .15s,background .15s}
.opt .radio{width:22px;height:22px;border-radius:50%;border:2px solid var(--border-strong);flex-shrink:0;
  display:grid;place-items:center;transition:border-color .15s}
.opt.sel .radio::after{content:"";width:11px;height:11px;border-radius:50%;background:currentColor}

.chk{display:flex;gap:11px;align-items:flex-start;font-size:13px;line-height:1.5;cursor:pointer}
.chk input{width:20px;height:20px;flex-shrink:0;accent-color:var(--primary);margin-top:1px}

.seg{display:flex;background:var(--surface-alt);border:1px solid var(--border);
  border-radius:var(--r-md);padding:4px;gap:4px}
.seg button{flex:1;height:40px;border-radius:12px;font-size:13px;font-weight:600;
  color:var(--text-secondary);transition:background .15s,color .15s}
.seg button.on{color:var(--text-inverse)}

.statcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:0 8px 24px var(--shadow);padding:16px}
.statcard .l{font-size:12px;color:var(--text-secondary);line-height:1.3;min-height:2.6em}
.statcard .v{font-size:26px;font-weight:700;line-height:1.15;margin-top:6px}
.statcard .u{font-size:12px;color:var(--text-secondary);margin-left:4px;font-weight:500}

.bar{height:6px;border-radius:var(--r-pill);background:var(--surface-sunken);overflow:hidden;flex:1}
.bar i{display:block;height:100%;border-radius:var(--r-pill)}

.tonebar{width:4px;align-self:stretch;border-radius:var(--r-pill);min-height:34px}

/* --- ekrany dodane po pierwszej wersji makiety ---------------------------- */

.gauge{display:flex;align-items:center;gap:12px;margin-top:10px}
.gauge .gl{font-size:13px;color:var(--text-secondary);width:132px;flex-shrink:0}
.gauge .gv{font-size:14px;font-weight:700;width:52px;text-align:right;
  font-variant-numeric:tabular-nums;flex-shrink:0}

.callbtn{
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  background:var(--primary);color:var(--text-inverse);
  border-radius:var(--r-pill);padding:9px 18px;font-size:14px;font-weight:600;
  transition:filter .15s;
}
.callbtn:hover{filter:brightness(.9)}
.callbtn.urgent{background:var(--danger)}

.viewfinder{
  height:210px;border-radius:var(--r-lg);border:2px dashed var(--border-strong);
  background:var(--surface-alt);color:var(--text-muted);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  font-size:13px;
}
.viewfinder svg{width:38px;height:38px}

.cal-head{text-align:center;font-size:15px;margin-bottom:12px}
.cal-dow,.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-dow span{
  text-align:center;font-size:11px;color:var(--text-muted);
  padding-bottom:6px;text-transform:lowercase;
}
.cal-d{
  aspect-ratio:1;border-radius:10px;font-size:13px;position:relative;
  color:var(--text-primary);transition:background .12s;
}
.cal-d:hover{background:var(--surface-alt)}
.cal-d.sel{background:var(--primary);color:var(--text-inverse);font-weight:700}
.cal-d i{
  position:absolute;bottom:5px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--accent);
}
.cal-d.sel i{background:var(--text-inverse)}