html{ box-sizing: border-box; }
*,*::before,*::after{ box-sizing: inherit; }

/* FONT */
:root { --tap: 44px; }

/* Tapeta: formaty nowej generacji */
body{
  background:
    image-set(
      url("wallpaper.avif") type("image/avif"),
      url("wallpaper.webp") type("image/webp"),
      url("wallpaper.jpg") type("image/jpeg")
    ) no-repeat center center fixed;
  background-size: cover;
}



/* Elementy klikalne ≥44px */
.controls select, .controls button, aside .nav-btn { min-height: var(--tap); }

/* Canvas skaluje się do szerokości kontenera */
canvas{ display:block; width:100%; max-width:100%; }
.card canvas{ height:350px !important; }

/* Mobile layout */
@media (max-width: 768px){
  .container{ flex-direction: column; }
  aside{ width: auto; margin-bottom: 12px; }
  main{ margin-left: 0; padding: 24px; }
  body{ background-attachment: scroll; }
  body::before{ position: absolute; }
 #overlay{
  z-index:1000;
  top: var(--header-h);
  height: calc(100dvh - var(--header-h));
}
  aside#sideNav{
  z-index:1001;
  top: var(--header-h);
  height: calc(100dvh - var(--header-h));
  padding-top: 16px;           /* żeby nic nie wchodziło pod górną krawędź */
}
}

main { content-visibility: auto; contain-intrinsic-size: 800px; }

body {
  font-family: 'Inter', sans-serif;
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
 
  position: relative;
}

/* Overlay na tapetę */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.3); /* przyciemnienie */
  z-index: -1;
}

/* HEADER */
header, footer {
  background: rgba(37, 99, 235, 0.4);
  color: #fff;
  padding: 14px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  border-radius: 0 0 12px 12px;
}

.logo {
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 20px;
  color: #fff; /* biały */
}

.controls {
  display: flex;
  gap: 12px;
}

.controls select, .controls button {
  padding: 8px 12px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-weight: 500;
  background: #fff;
  color: #1e293b;
  transition: 0.2s;
}

.controls button:hover, .controls select:hover {
  background: #f1f5f9;
}

/* LAYOUT */
.container {
  display: flex;
  flex: 1;
  margin: 20px;
}

/* SIDEBAR */
aside {
  width: 220px;
  background: rgba(30, 41, 59, 0.5);
  color: #fff;
  padding: 24px 16px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

aside h2 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 14px;
  opacity: 0.9;
}

aside ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

aside li {
  margin-bottom: 8px;
}

aside .nav-btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: #cbd5e1;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: 0.3s;
  font-size: 15px;
}

aside .nav-btn:hover {
  background: #334155;
  color: #fff;
}

aside .nav-btn.active {
  background: #2563eb;
  color: #fff;
  font-weight: 600;
}

/* MAIN */
main {
  flex: 1;
  margin-left: 20px;
  background: rgba(255,255,255,0.4);
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
  padding: 40px;
}

/* CARD */
.card {
  background: #fff;
  padding: 28px;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  margin-bottom: 20px;
}

.card h2 {
  margin-top: 0;
  font-size: 18px;
  font-weight: 600;
  color: #2563eb;
}

.card label {
  display: block;
  margin-top: 14px;
  font-weight: 500;
  font-size: 14px;
}

.card input, .card button{
  width: 100%;
  box-sizing: border-box;   /* ← klucz */
  display: block;
  padding: 12px;
  margin-top: 6px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  font-size: 15px;
  transition: .2s;
}

.card input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37,99,235,0.3);
}

.card button {
  margin-top: 20px;
  background: #2563eb;
  color: white;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

.card button:hover {
  background: #1e40af;
}

/* Number inputs: bez strzałek i bez nadmiaru po prawej */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

/* FOOTER */
footer {
  text-align: center;
  font-size: 14px;
  border-radius: 12px 12px 0 0;
  margin: 20px;
}

/* DARK MODE */
body.dark main {
  background: rgba(30,41,59,0.4);
  color: #e2e8f0;
}

body.dark .card {
  background: #1e293b;
  color: #e2e8f0;
}

body.dark .card input {
  background: #334155;
  color: #fff;
  border: 1px solid #475569;
}

body.dark .card button {
  background: #3b82f6;
}

/* 🔹 Główne nagłówki */
h1, h2 {
  color: #2563eb; /* niebieski akcent */
  font-weight: 700;
}

/* 🔹 Podtytuły i sekcje */
h3, h4 {
  color: #1e293b; /* ciemny szary */
  font-weight: 600;
}

/* 🔹 Zwykły tekst */
p, label, span {
  color: #334155; /* neutralny grafit */
}

/* 🔹 Napis powitalny ("Wybierz kalkulator z menu") */
#welcome h2 {
  color: #2563eb;
  text-align: center;
  font-size: 20px;
  margin-top: 20px;
}

/* 🔹 Linki */
a {
  color: #2563eb;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* 🔹 DARK MODE */
body.dark h1, body.dark h2 {
  color: #38bdf8; /* jasny błękit */
}
body.dark h3, body.dark h4 {
  color: #e2e8f0;
}
body.dark p, body.dark label, body.dark span {
  color: #cbd5e1;
}
body.dark a {
  color: #38bdf8;
}

/* 🔹 Sekcja wyników */
.results {
  margin-top: 20px;
  padding: 20px;
  border-radius: 12px;
  background: #f8fafc;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.05);
  text-align: center;
}

/* 🔹 Duża liczba wyniku */
.results .value {
  font-size: 28px;
  font-weight: 700;
  color: #2563eb;
  margin: 10px 0;
}

/* 🔹 Opis pod wynikiem */
.results .label {
  font-size: 14px;
  color: #64748b;
}

/* 🔹 Dark mode */
body.dark .results {
  background: #1e293b;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.3);
}
body.dark .results .value {
  color: #38bdf8;
}
body.dark .results .label {
  color: #94a3b8;
}

#siteName {
  color: #ffffff; /* biały */
}

body.dark #siteName {
  color: #38bdf8;
}

/* DARK MODE dla header i footer */
body.dark header, 
body.dark footer {
  background: rgba(30, 41, 59, 0.7);
  color: #e2e8f0;
}

@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; }
}

/* Burger */
.burger{ display:none; width:44px; height:44px; border:0; background:transparent; cursor:pointer; margin-right:8px; }
.burger span{ display:block; height:2px; margin:6px 8px; background:#fff; transition:transform .2s, opacity .2s; }
body.dark .burger span{ background:#e2e8f0; }

/* Overlay */
#overlay{ position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:98; }
#overlay[hidden]{ display:none; }

/* Off-canvas aside na mobile */
@media (max-width: 768px){
  header { position: sticky; top:0; z-index:1100;
  border-radius:0;            /* bez zaokrągleń na mobile */
} 
#overlay{
  z-index:1000;
  top: var(--header-h);
  height: calc(100svh - var(--header-h));
}
  .burger{ display:inline-block; }
  .container{ position:relative; }
  aside#sideNav{
    position:fixed; z-index:99; top:0; left:0; bottom:0; width:280px;
    background: rgba(30,41,59,0.97); backdrop-filter: blur(6px);
    transform: translateX(-100%); transition: transform .25s ease;
    padding:24px 16px; border-radius:0; box-shadow: 0 8px 24px rgba(0,0,0,.4);
    z-index:1001;
  top: var(--header-h);
  height: calc(100svh - var(--header-h));
  padding-top: 12px;
  }
  body.menu-open aside#sideNav{ transform: translateX(0); }
  body.menu-open { overflow:hidden; }
}

footer a{ color:#fff; text-decoration:underline }
body.dark footer a{ color:#e2e8f0 }
footer .sep{ margin:0 8px; opacity:.7 }

.burger-text{display:none;margin-left:8px;color:#fff;font-weight:600}
body.dark .burger-text{color:#e2e8f0}
@media (max-width:768px){ .burger-text{display:inline-block} }

@media (max-width:768px){
  .logo{ margin-left:50px; }
}