/* WYGLĄD MODUŁU RECEPT.
   Zasada: lekarz ma wystawić receptę w kilkanaście sekund, na laptopie i na telefonie.
   Stąd duże pola (na telefonie 16 px, inaczej iPhone sam przybliża ekran), jeden słupek treści,
   wyraźna kolejność: pacjent → leki → wystaw. Kolory spokojne, medyczne; kolorem oznaczamy
   TYLKO to, co niesie znaczenie (zielony = zrobione, czerwony = błąd, bursztyn = uwaga). */

/* KOLORY TAKIE, JAK W PROGRAMIE FINANSE CEM I NA MATERIAŁACH CENTRUM OCENY ZDROWIA
   (Piotr, 3.09.2026: „zrób jasne kolory jak kolory CEM i COZ").
   Wzięte wprost z tamtych plików: niebieski #2563eb i granat #1b4f9c z wydruków Biovisu,
   szarości z rodziny #0f172a / #64748b / #e2e8f0, tła #f8fafc.
   CIEMNEGO MOTYWU NIE MA -- ma być jasno, tak jak prosił. */
:root {
  color-scheme: light;

  --tlo: #f8fafc;
  --karta: #ffffff;
  --karta-cien: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 24px rgba(15, 23, 42, .06);
  --tekst: #0f172a;
  --pod: #64748b;
  --linia: #e2e8f0;
  --linia-mocna: #cbd5e1;

  --akcent: #2563eb;            /* ten sam niebieski, co w programie Finanse CEM */
  --akcent-ciemny: #1d4ed8;
  --akcent-tlo: #eff5ff;
  --granat: #1b4f9c;            /* granat z wydruków Centrum Oceny Zdrowia */

  --dobrze: #15803d;
  --dobrze-tlo: #f0fdf4;
  --blad: #b91c1c;
  --blad-tlo: #fef2f2;
  --uwaga: #a16207;
  --uwaga-tlo: #fffbeb;

  --r: 14px;
  --odstep: 16px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  background: var(--tlo);
  color: var(--tekst);
  padding-bottom: env(safe-area-inset-bottom);
}

h1 { font-size: 28px; margin: 0 0 6px; letter-spacing: -.02em; }
h2 { font-size: 17px; margin: 0 0 14px; letter-spacing: -.01em; display: flex;
  align-items: center; gap: 8px; color: var(--granat); }
h2::before {
  content: ""; width: 4px; height: 18px; border-radius: 2px; background: var(--akcent);
  display: inline-block;
}
.pod { color: var(--pod); font-size: 14px; margin: 4px 0 14px; }

/* --- pola ------------------------------------------------------------------------------------ */
label { display: block; margin: 0 0 14px; font-size: 13px; font-weight: 600; color: var(--pod);
  letter-spacing: .01em; }
input, select, textarea {
  display: block; width: 100%; margin-top: 6px;
  padding: 12px 14px;
  font: inherit; font-size: 16px; font-weight: 400;   /* 16 px = telefon nie przybliża ekranu */
  color: var(--tekst); background: var(--karta);
  border: 1px solid var(--linia-mocna); border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
  min-height: 46px;
}
input::placeholder { color: var(--pod); opacity: .6; }
input:hover, select:hover { border-color: var(--akcent); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--akcent);
  /* Dwie linie celowo: gdyby przeglądarka nie znała `color-mix`, zostaje pierwsza.
     Bez tego cała reguła przepadałaby i nie byłoby widać, w którym polu stoi kursor. */
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .20);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--akcent) 22%, transparent);
}
select { appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2364748b' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
input[type="file"] { padding: 10px; background: var(--tlo); }

/* --- przyciski ------------------------------------------------------------------------------- */
button {
  font: inherit; font-size: 15px; font-weight: 600;
  padding: 11px 18px; min-height: 46px;
  border-radius: 10px; border: 1px solid var(--linia-mocna);
  background: var(--karta); color: var(--tekst);
  cursor: pointer; transition: background .15s, border-color .15s, transform .05s;
}
button:hover { background: var(--akcent-tlo); border-color: var(--akcent); }
button:active { transform: translateY(1px); }
button:focus-visible { outline: 3px solid rgba(37, 99, 235, .45); outline-offset: 2px; }
button:focus-visible { outline: 3px solid color-mix(in srgb, var(--akcent) 40%, transparent);
  outline-offset: 2px; }
button.glowny { background: var(--akcent); border-color: var(--akcent); color: #fff; }
button.glowny:hover { background: var(--akcent-ciemny); border-color: var(--akcent-ciemny); }
button.cichy { border: none; background: none; color: var(--akcent); min-height: 0; padding: 2px 6px; }
button.male { font-size: 13px; padding: 7px 12px; min-height: 38px; }
button[disabled] { background: var(--tlo); border-color: var(--linia); color: var(--pod);
  cursor: default; }
button[disabled]:hover { background: var(--tlo); border-color: var(--linia); }

/* --- logowanie ------------------------------------------------------------------------------- */
.ekran-logowania { display: grid; place-items: center; min-height: 100dvh; padding: 20px; }
.ekran-logowania .karta { width: min(420px, 100%); }
.ekran-logowania h1 { text-align: center; }
.ekran-logowania .pod { text-align: center; }
.ekran-logowania button { width: 100%; }

/* --- nagłówek i zakładki --------------------------------------------------------------------- */
header {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px; background: var(--karta);
  border-bottom: 1px solid var(--linia);
  position: sticky; top: 0; z-index: 20;
}
header > strong { font-size: 17px; letter-spacing: -.01em; white-space: nowrap; }
header nav { display: flex; gap: 6px; flex: 1; overflow-x: auto; scrollbar-width: none; }
header nav::-webkit-scrollbar { display: none; }
header nav button {
  white-space: nowrap; border: none; background: none; color: var(--pod);
  padding: 8px 14px; min-height: 40px; border-radius: 999px;
}
header nav button:hover { background: var(--akcent-tlo); color: var(--akcent); }
header nav button.aktywna { background: var(--akcent); color: #fff; }

main { max-width: 780px; margin: 20px auto 96px; padding: 0 16px; }

/* --- karty ------------------------------------------------------------------------------------ */
.karta {
  background: var(--karta); border: 1px solid var(--linia); border-radius: var(--r);
  box-shadow: var(--karta-cien); padding: 20px; margin: 0 0 var(--odstep);
}
.rzad { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 14px; }
.rzad-przyciskow { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 8px; }

/* --- komunikaty -------------------------------------------------------------------------------- */
.blad { color: var(--blad); font-size: 14px; margin-top: 10px; min-height: 20px; }
.blad:not(:empty) { background: var(--blad-tlo); border-radius: 8px; padding: 10px 12px; }
.dobrze { color: var(--dobrze); }
.blad:has(.dobrze) { background: var(--dobrze-tlo); color: var(--dobrze); }
/* Gdyby przeglądarka nie znała `:has()`, komunikat o sukcesie i tak jest zielonym tekstem
   -- traci tylko zielone tło. */
.pasek { background: var(--uwaga-tlo); color: var(--uwaga); border-bottom: 1px solid var(--linia);
  padding: 10px 16px; font-size: 14px; text-align: center; }

/* --- wyszukiwarka leków ------------------------------------------------------------------------ */
.wynik { border: 1px solid var(--linia); border-radius: 12px; padding: 14px; margin-bottom: 10px;
  transition: border-color .15s, background .15s; }
.wynik:hover { border-color: var(--akcent); background: var(--akcent-tlo); }
.wynik b { font-size: 16px; }
.wynik .meta { color: var(--pod); font-size: 13px; margin-top: 2px; }
.wynik .opak { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.wynik .opak button { font-size: 13px; padding: 8px 12px; min-height: 40px; }

/* --- pozycje recepty --------------------------------------------------------------------------- */
.pozycja { border: 1px solid var(--linia); border-left: 4px solid var(--akcent);
  border-radius: 12px; padding: 14px; margin-bottom: 12px; background: var(--karta); }
.pozycja .gora { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.pozycja .gora b { font-size: 16px; }
.pozycja .gora button { min-height: 38px; padding: 6px 12px; font-size: 13px; }
.pozycja .pola { display: grid; grid-template-columns: 1fr 110px 170px; gap: 0 12px; }
.pola-recepty { display: grid; grid-template-columns: 1fr 110px 110px; gap: 0 12px; }
/* ODPLATNOSC: wszystkie mozliwosci widoczne naraz, jedno klikniecie zamiast rozwijania listy. */
.odplatnosci { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.odplatnosci button.wybrana { background: var(--akcent); border-color: var(--akcent); color: #fff; }
.wyliczenie { background: var(--dobrze-tlo); color: var(--dobrze); border-radius: 8px;
  padding: 8px 12px; font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.meta.pod b { color: var(--akcent); font-weight: 700; }

/* --- lista wystawionych ------------------------------------------------------------------------- */
.recepta { border: 1px solid var(--linia); border-radius: 12px; padding: 16px; margin-bottom: 12px; }
.recepta .naglowek { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  align-items: flex-start; }
.recepta .naglowek button { margin-left: 6px; }
.znacznik { display: inline-block; font-size: 12px; font-weight: 700; padding: 5px 10px;
  border-radius: 999px; background: var(--uwaga-tlo); color: var(--uwaga); }
table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; }
th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--pod); }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--linia); vertical-align: top; }
tr:last-child td { border-bottom: none; }

/* --- podpis i certyfikaty ------------------------------------------------------------------------ */
.podpis { border: 1px solid var(--linia); border-top: 3px solid var(--granat);
  padding: 16px; margin: 8px 0 14px; background: var(--akcent-tlo); border-radius: 12px;
  line-height: 1.8; font-size: 15px; text-align: center; }
.podpis b { display: block; font-size: 16px; }
.cert { border: 1px solid var(--linia); border-radius: 12px; padding: 16px; margin-bottom: 12px; }
.cert .stan { font-size: 14px; font-weight: 600; margin: 4px 0 8px; }
.wybor-miasta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: -6px 0 14px; }

/* --- telefon -------------------------------------------------------------------------------------- */
@media (max-width: 680px) {
  main { padding: 0 12px; margin-bottom: 110px; }
  .karta { padding: 16px; border-radius: 12px; }
  h1 { font-size: 24px; }
  .pozycja .pola { grid-template-columns: 1fr; }
  .pola-recepty { grid-template-columns: 1fr 1fr; }
  .pola-recepty label:first-child { grid-column: 1 / -1; }
  header { padding: 8px 12px; gap: 8px; }
  header > strong { font-size: 15px; }
  header nav button { padding: 8px 12px; font-size: 14px; }
  /* NAJWAZNIEJSZY PRZYCISK ZAWSZE POD KCIUKIEM -- na telefonie "Wystaw receptę" nie ucieka
     na dół długiej strony, tylko stoi na dole ekranu. */
  #wystaw { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 30; width: auto; box-shadow: 0 6px 20px rgba(37, 99, 235, .32); }
  #zakladka-nowa { padding-bottom: 8px; }
}
@media (min-width: 681px) {
  #wystaw { width: 100%; font-size: 16px; }
}

/* --- wydruk ------------------------------------------------------------------------------------------ */
@media print {
  header, .pasek, #zakladka-nowa, #zakladka-certyfikaty, #zakladka-ustawienia, button {
    display: none !important;
  }
  body { background: #fff; }
  .karta, .recepta { border: none; box-shadow: none; }
}

/* SCHOWANE ZNACZY SCHOWANE. Klasa z `display:grid` jest mocniejsza niż domyślna reguła
   przeglądarki dla atrybutu `hidden` -- bez tego ekran logowania zostawał na wierzchu
   po zalogowaniu (zgłoszone przez Piotra 3.09.2026). */
[hidden] { display: none !important; }

/* Opakowanie z refundacja -- zielona ramka, zeby bylo widac je od razu na liscie wynikow. */
.wynik .opak button.refundowany { border-color: var(--dobrze); background: var(--dobrze-tlo); }
.wynik .opak button.refundowany:hover { background: #dcf5e6; }