/* Kasa – gotówka, karta, przelew.
   Kolor = forma płatności. Te cztery barwy znaczą to samo na każdej stronie. */
:root {
  --tlo: #eceff2;
  --papier: #ffffff;
  --tusz: #14202b;
  --szary: #5b6875;
  --linia: #d5dbe1;
  --gotowka: #1f7a55;
  --karta: #2a5caa;
  --przelew: #b4730c;
  --roznica: #c0392b;
  --gotowka-t: #e3f2ea;
  --karta-t: #e4ecf8;
  --przelew-t: #f8eddb;
  --roznica-t: #f9e3e0;
  --font: "Bahnschrift", "DIN Alternate", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--tlo); color: var(--tusz);
  font: 16px/1.5 var(--font); font-variant-numeric: tabular-nums;
}
a { color: var(--karta); text-underline-offset: 2px; }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible {
  outline: 3px solid #f2b705; outline-offset: 2px;
}

/* pasek nawigacji */
.gora {
  display: flex; align-items: center; gap: 1.25rem; padding: .6rem 1rem;
  background: var(--tusz); color: #fff; position: sticky; top: 0; z-index: 5;
}
.marka { color: #fff; font-weight: 700; font-size: 1.25rem; text-decoration: none; letter-spacing: .02em; }
.gora nav { display: flex; gap: .25rem; overflow-x: auto; flex: 1; scrollbar-width: none; }
.gora nav a {
  color: #c9d3dc; text-decoration: none; padding: .35rem .7rem; border-radius: 4px; white-space: nowrap;
}
.gora nav a:hover { color: #fff; }
.gora nav a[aria-current="page"] { color: #fff; box-shadow: inset 0 -3px 0 #f2b705; border-radius: 0; }
.wyloguj { color: #c9d3dc; font-size: .9rem; text-decoration: none; white-space: nowrap; }
.wyloguj:hover { color: #fff; }

main { max-width: 1120px; margin: 0 auto; padding: 1.25rem 1rem 4rem; }
h1 { font-size: 2rem; line-height: 1.15; margin: 0 0 .25rem; font-weight: 700; }
h2 { font-size: 1.2rem; margin: 2rem 0 .6rem; font-weight: 700; }
h3 { font-size: 1rem; margin: 0 0 .4rem; }
.opis { color: var(--szary); margin: 0 0 1rem; max-width: 62ch; }
.mala { color: var(--szary); font-size: .875rem; }

.pierwszy { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1rem; }
.okres { display: flex; align-items: center; gap: .5rem; }
.okres label { color: var(--szary); }
select, input[type=text], input[type=date], input[type=password], input[type=file], input[type=number] {
  font: inherit; padding: .45rem .6rem; border: 1px solid #aab4be; border-radius: 4px; background: #fff; color: var(--tusz);
  min-height: 44px;
}
input.kwota { text-align: right; width: 100%; min-width: 7rem; font-variant-numeric: tabular-nums; }
button, .przycisk {
  font: inherit; font-weight: 600; padding: .5rem 1rem; min-height: 44px; border-radius: 4px;
  border: 1px solid var(--tusz); background: var(--tusz); color: #fff; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center;
}
button:hover, .przycisk:hover { background: #26384a; }
button.drugi, .przycisk.drugi { background: #fff; color: var(--tusz); }
button.drugi:hover, .przycisk.drugi:hover { background: #eef1f4; }
button.maly { min-height: 36px; padding: .25rem .7rem; font-size: .9rem; }

/* komunikaty */
.komunikat { padding: .7rem .9rem; border-left: 5px solid var(--gotowka); background: var(--gotowka-t); margin: 0 0 1rem; }
.k-blad { border-color: var(--roznica); background: var(--roznica-t); }
.k-info { border-color: var(--karta); background: var(--karta-t); }

/* pulpit: podział sprzedaży */
.podzial { margin: 1rem 0 0; }
.pasek { display: flex; height: 2.75rem; background: #dfe4e9; overflow: hidden; border-radius: 3px; }
.pasek i { display: block; height: 100%; }
.pasek.cienki { height: .85rem; min-width: 90px; }
.s-gotowka { background: var(--gotowka); }
.s-karta { background: var(--karta); }
.s-przelew { background: var(--przelew); }
.s-roznica { background: var(--roznica); background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.35) 0 4px, transparent 4px 8px); }

.formy { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: .9rem 0 0; }
.formy > div { padding: .1rem 1rem .1rem .75rem; border-left: 6px solid; }
.formy dt { color: var(--szary); font-size: .95rem; }
.formy dd { margin: 0; font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
.formy dd small { font-size: .95rem; font-weight: 400; color: var(--szary); margin-left: .25rem; }
.formy .gotowka { border-color: var(--gotowka); }
.formy .karta { border-color: var(--karta); }
.formy .przelew { border-color: var(--przelew); }
.formy .roznica { border-color: var(--roznica); }
.formy .roznica.zero dd { color: var(--szary); }
.formy.trzy { grid-template-columns: repeat(3, 1fr); }

.razem-linia { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin: 1.25rem 0 0; padding: .75rem 0; border-top: 1px solid var(--linia); }
.razem-linia span { color: var(--szary); }
.razem-linia b { margin-left: .3rem; color: var(--tusz); }

.uwaga { border-left: 5px solid var(--roznica); background: var(--roznica-t); padding: .8rem 1rem; margin: 1.5rem 0 0; }
.uwaga p { margin: 0 0 .3rem; font-weight: 700; }
.uwaga ul { margin: 0; padding-left: 1.1rem; }

/* tabele */
.tabela { overflow-x: auto; background: var(--papier); border: 1px solid var(--linia); }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { padding: .5rem .75rem; text-align: right; border-bottom: 1px solid var(--linia); white-space: nowrap; }
th:first-child, td:first-child, th.l, td.l { text-align: left; }
td.wrap { white-space: normal; min-width: 14rem; }
th { font-weight: 600; color: var(--szary); background: #f6f8fa; position: sticky; top: 0; }
tbody tr:hover { background: #f6f8fa; }
tfoot td { font-weight: 700; border-top: 2px solid var(--tusz); background: #f6f8fa; }
td a { font-weight: 600; }
.g { color: var(--gotowka); } .k { color: var(--karta); } .p { color: var(--przelew); }
.r { color: var(--roznica); font-weight: 700; }
tr.dzien-blad td { background: var(--roznica-t); }
.zero { color: #9aa5b0; }

/* znaczniki */
.chip { display: inline-block; padding: .05rem .5rem; border-radius: 3px; font-size: .85rem; font-weight: 600; border: 1px solid; }
.f-gotowka { color: var(--gotowka); background: var(--gotowka-t); border-color: #b9dcc9; }
.f-karta { color: var(--karta); background: var(--karta-t); border-color: #bcd0ec; }
.f-przelew { color: var(--przelew); background: var(--przelew-t); border-color: #e8cf9f; }
.f-inne { color: var(--szary); background: #eef1f4; border-color: var(--linia); }
.stan { font-weight: 600; white-space: nowrap; }
.stan::before { content: ""; display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .4rem; background: currentColor; }
.st-ok { color: var(--gotowka); } .st-drobna { color: var(--przelew); } .st-blad { color: var(--roznica); }
.st-po { color: var(--roznica); } .st-wterminie { color: var(--karta); } .st-zaplacone { color: var(--gotowka); }

/* formularze */
.formularz { background: var(--papier); border: 1px solid var(--linia); padding: 1rem; }
.siatka { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .75rem 1rem; margin-bottom: 1rem; }
.siatka label { display: grid; gap: .25rem; color: var(--szary); font-size: .9rem; }
.filtry { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; margin: 0 0 1rem; }
.filtry label { display: grid; gap: .2rem; color: var(--szary); font-size: .875rem; }
.zakladki { display: flex; gap: .25rem; margin: 0 0 1rem; border-bottom: 1px solid var(--linia); }
.zakladki a { padding: .5rem 1rem; text-decoration: none; color: var(--szary); font-weight: 600; }
.zakladki a[aria-current="page"] { color: var(--tusz); box-shadow: inset 0 -3px 0 var(--tusz); }
.strony { display: flex; gap: .5rem; align-items: center; margin-top: .75rem; }

.logowanie { max-width: 22rem; margin: 12vh auto 0; padding: 0 1rem; }
.logowanie form { display: grid; gap: .75rem; background: var(--papier); border: 1px solid var(--linia); padding: 1.25rem; }
.logowanie h1 { text-align: left; }

@media (max-width: 760px) {
  h1 { font-size: 1.6rem; }
  .formy, .formy.trzy { grid-template-columns: 1fr 1fr; row-gap: 1rem; }
  .formy.trzy { grid-template-columns: 1fr; }
  .formy > div { padding-right: .25rem; min-width: 0; }
  .formy dd { font-size: 1.3rem; }
  .formy dd small { display: block; margin-left: 0; }
  .gora { flex-wrap: wrap; gap: .1rem .75rem; padding: .5rem .75rem 0; }
  .marka { order: 1; }
  .wyloguj { order: 2; margin-left: auto; }
  .gora nav { order: 3; flex: 0 0 100%; margin: 0 -.25rem; }
  .ukryj-mobilnie { display: none; }
  th, td { padding: .45rem .55rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .pasek i { transition: width .4s ease; }
}