/* Panel escale. Kolory i typografia wziete ze strony escale.pl,
   zeby panel wygladal jak ta sama firma, a nie jak doklejone narzedzie. */

:root {
  --tlo: #0A0A10;
  --tlo-2: #12121b;
  --tlo-3: #1a1a26;
  --obrys: #24243340;
  --obrys-jasny: #2e2e40;
  --tekst: #f2f2f7;
  --tekst-cichy: #9a9ab0;
  --tekst-slaby: #6a6a80;
  --blekit: #47D6E8;
  --fiolet: #A855F7;
  --chaber: #7C8CFF;
  --niebieski: #3D66E0;
  --gradient: linear-gradient(120deg, #47D6E8 0%, #7C8CFF 48%, #A855F7 100%);
  --zielony: #34d399;
  --czerwony: #f87171;
  --zolty: #fbbf24;
  --cien: 0 2px 8px rgba(0,0,0,.4);
  --zaokr: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--tlo);
  color: var(--tekst);
  font: 15px/1.6 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .znak {
  font-family: "Space Grotesk", Inter, system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -.02em;
  margin: 0 0 .6rem;
}
h1 { font-size: 1.7rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }

a { color: var(--blekit); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ------------------------------------------------------------ szkielet -- */
.uklad { display: flex; min-height: 100vh; }

.bok {
  width: 240px;
  flex: 0 0 240px;
  background: var(--tlo-2);
  border-right: 1px solid var(--obrys-jasny);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.znak {
  font-size: 1.5rem;
  padding: 1.1rem 1.2rem .9rem;
  display: block;
  color: var(--tekst);
}
.znak:hover { text-decoration: none; }
.kropka {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.menu { padding: 0 .6rem; flex: 1; }
.menu-grupa {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--tekst-slaby);
  padding: 1rem .7rem .35rem;
}
.menu a {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .7rem;
  border-radius: 9px;
  color: var(--tekst-cichy);
  font-size: .9rem;
}
.menu a:hover { background: var(--tlo-3); color: var(--tekst); text-decoration: none; }
.menu a.tu {
  background: var(--tlo-3);
  color: var(--tekst);
  box-shadow: inset 3px 0 0 var(--blekit);
}
.menu .ikona { width: 18px; text-align: center; opacity: .85; }
.odznaka {
  margin-left: auto;
  background: var(--niebieski);
  color: #fff;
  font-size: .68rem;
  padding: .1rem .4rem;
  border-radius: 20px;
  min-width: 19px;
  text-align: center;
}

.stopka-boku {
  padding: .8rem 1rem;
  border-top: 1px solid var(--obrys-jasny);
  font-size: .82rem;
  color: var(--tekst-cichy);
}
.stopka-boku a { color: var(--tekst-slaby); }

.tresc { flex: 1; padding: 1.6rem 2rem 3rem; max-width: 1500px; min-width: 0; }
.naglowek { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.4rem; flex-wrap: wrap; }
.naglowek h1 { margin: 0; }
.naglowek .podtytul { color: var(--tekst-cichy); font-size: .9rem; }
.naglowek .obok { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }

/* -------------------------------------------------------------- karty --- */
.karta {
  background: var(--tlo-2);
  border: 1px solid var(--obrys-jasny);
  border-radius: var(--zaokr);
  padding: 1.1rem 1.2rem;
  margin-bottom: 1rem;
}
.karta h2, .karta h3 { margin-top: 0; }
.siatka { display: grid; gap: 1rem; }
.s2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.s3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.s4 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

.licznik { text-align: left; }
.licznik .duza {
  font-family: "Space Grotesk", sans-serif;
  font-size: 2.1rem;
  font-weight: 600;
  line-height: 1.1;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.licznik .opis { color: var(--tekst-cichy); font-size: .82rem; margin-top: .2rem; }
.licznik.zwykly .duza { background: none; color: var(--tekst); }

/* ------------------------------------------------------------ elementy -- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .95rem;
  border-radius: 10px;
  border: 1px solid var(--obrys-jasny);
  background: var(--tlo-3);
  color: var(--tekst);
  font: inherit;
  font-size: .88rem;
  cursor: pointer;
  transition: .15s;
}
.btn:hover { border-color: var(--chaber); text-decoration: none; }
.btn.glowny {
  background: var(--gradient);
  border: none;
  color: #0A0A10;
  font-weight: 600;
}
.btn.glowny:hover { filter: brightness(1.08); }
.btn.maly { padding: .28rem .6rem; font-size: .78rem; }
.btn.czerwony:hover { border-color: var(--czerwony); color: var(--czerwony); }

input, textarea, select {
  width: 100%;
  padding: .55rem .75rem;
  background: var(--tlo);
  border: 1px solid var(--obrys-jasny);
  border-radius: 10px;
  color: var(--tekst);
  font: inherit;
  font-size: .9rem;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--chaber);
}
textarea { resize: vertical; min-height: 80px; }
label { display: block; font-size: .8rem; color: var(--tekst-cichy); margin: .7rem 0 .25rem; }
.pole-rzad { display: flex; gap: .6rem; flex-wrap: wrap; }
.pole-rzad > * { flex: 1; min-width: 150px; }

table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th {
  text-align: left;
  padding: .5rem .6rem;
  border-bottom: 1px solid var(--obrys-jasny);
  color: var(--tekst-cichy);
  font-weight: 500;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}
td { padding: .55rem .6rem; border-bottom: 1px solid var(--obrys); vertical-align: top; }
tr:hover td { background: #ffffff05; }

.plakietka {
  display: inline-block;
  padding: .12rem .5rem;
  border-radius: 20px;
  font-size: .72rem;
  background: var(--tlo-3);
  color: var(--tekst-cichy);
  white-space: nowrap;
}
.p-zielona { background: #34d39922; color: var(--zielony); }
.p-czerwona { background: #f8717122; color: var(--czerwony); }
.p-zolta { background: #fbbf2422; color: var(--zolty); }
.p-niebieska { background: #3D66E033; color: var(--chaber); }

.pasek { height: 6px; background: var(--tlo-3); border-radius: 20px; overflow: hidden; }
.pasek i { display: block; height: 100%; background: var(--gradient); }

.cichy { color: var(--tekst-cichy); }
.slaby { color: var(--tekst-slaby); font-size: .82rem; }
.pusto { color: var(--tekst-slaby); text-align: center; padding: 2rem 1rem; font-size: .9rem; }

/* ------------------------------------------------------------- kanaly --- */
.rozmowa { display: flex; flex-direction: column; height: calc(100vh - 3.2rem); }
.strumien { flex: 1; overflow-y: auto; padding-right: .5rem; }
.wiad { display: flex; gap: .7rem; padding: .45rem 0; }
.awatar {
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: 50%;
  background: var(--gradient);
  color: #0A0A10;
  display: grid; place-items: center;
  font-weight: 700; font-size: .85rem;
}
.wiad .kto { font-weight: 600; font-size: .88rem; }
.wiad .czas { color: var(--tekst-slaby); font-size: .74rem; margin-left: .4rem; }
.wiad .tekst { white-space: pre-wrap; word-break: break-word; }
.pisanie { display: flex; gap: .6rem; padding-top: .8rem; border-top: 1px solid var(--obrys-jasny); }

/* ---------------------------------------------------------- kalendarz --- */
.miesiac { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--obrys-jasny); border: 1px solid var(--obrys-jasny); border-radius: var(--zaokr); overflow: hidden; }
.miesiac .glowa { background: var(--tlo-3); padding: .5rem; text-align: center; font-size: .75rem; color: var(--tekst-cichy); text-transform: uppercase; letter-spacing: .05em; }
.dzien { background: var(--tlo-2); min-height: 96px; padding: .4rem; }
.dzien.obcy { background: var(--tlo); opacity: .45; }
.dzien.dzis { box-shadow: inset 0 0 0 2px var(--blekit); }
.dzien .nr { font-size: .8rem; color: var(--tekst-cichy); }
.dzien .wyd { font-size: .72rem; padding: .12rem .35rem; border-radius: 5px; margin-top: .2rem; background: var(--niebieski); color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* -------------------------------------------------------------- arkusz -- */
.arkusz-obszar { overflow: auto; max-height: 68vh; border: 1px solid var(--obrys-jasny); border-radius: var(--zaokr); }
.arkusz-obszar table { font-size: .84rem; border-collapse: collapse; }
.arkusz-obszar th { position: sticky; top: 0; background: var(--tlo-3); z-index: 2; }
.arkusz-obszar td { border: 1px solid var(--obrys); padding: 0; }
.arkusz-obszar td input { border: none; border-radius: 0; background: transparent; padding: .35rem .5rem; font-size: .84rem; min-width: 110px; }
.arkusz-obszar td input:focus { background: var(--tlo-3); box-shadow: inset 0 0 0 2px var(--chaber); }
.arkusz-obszar .rog { background: var(--tlo-3); position: sticky; left: 0; z-index: 3; }
.arkusz-obszar .nrw { background: var(--tlo-3); position: sticky; left: 0; z-index: 1; color: var(--tekst-slaby); font-size: .72rem; text-align: center; padding: .3rem .5rem; }

/* ------------------------------------------------------------ logowanie -- */
.brama { display: grid; place-items: center; min-height: 100vh; padding: 1rem; }
.brama .pudlo { width: 100%; max-width: 380px; }
.brama .znak { text-align: center; font-size: 2.4rem; padding: 0 0 .3rem; }
.brama .pod { text-align: center; color: var(--tekst-cichy); margin-bottom: 1.6rem; font-size: .9rem; }
.blad { background: #f8717118; border: 1px solid #f8717140; color: #fca5a5; padding: .6rem .8rem; border-radius: 10px; font-size: .85rem; margin-bottom: .8rem; }
.info { background: #47D6E815; border: 1px solid #47D6E840; color: #a5e9f2; padding: .6rem .8rem; border-radius: 10px; font-size: .85rem; margin-bottom: .8rem; }

/* ---------------------------------------------------------------- telefon */
.menu-przycisk { display: none; }
@media (max-width: 900px) {
  .uklad { flex-direction: column; }
  .bok { width: auto; flex: none; height: auto; position: static; border-right: none; border-bottom: 1px solid var(--obrys-jasny); }
  .bok:not(.otwarty) .menu, .bok:not(.otwarty) .stopka-boku { display: none; }
  .menu-przycisk { display: block; position: absolute; right: 1rem; top: 1rem; }
  .tresc { padding: 1rem 1rem 3rem; }
  .rozmowa { height: auto; min-height: 60vh; }
  .dzien { min-height: 62px; }
}