:root {
  --cervena: #d64545;
  --oranzova: #e0902c;
  --zelena: #2f9e56;
  --sivá: #6b7280;
  --pozadie: #f7f7f8;
  --karta: #ffffff;
  --text: #1f2328;
  --okraj: #e2e2e6;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--pozadie);
  color: var(--text);
}

.hlavicka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: #1b375f;
  position: sticky;
  top: 0;
  z-index: 30;
}

.hlavicka .logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.hlavicka .logo-obrazok { height: 24px; width: auto; display: block; }

.tlacidlo-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 9px;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
  padding: 0;
}
.tlacidlo-menu:hover { background: rgba(255, 255, 255, 0.12); }

.prekryv-menu {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  z-index: 40;
}
.prekryv-menu.viditelny { opacity: 1; pointer-events: auto; }

.bocne-menu {
  position: fixed;
  top: 66px;
  right: 24px;
  min-width: 230px;
  max-height: calc(100vh - 88px);
  overflow-y: auto;
  background: var(--karta);
  border: 1px solid var(--okraj);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 50;
}
.bocne-menu.otvorene { opacity: 1; transform: translateY(0); pointer-events: auto; }

.bocne-menu a,
.bocne-menu .forma-odhlasit button {
  display: block;
  width: 100%;
  text-align: left;
  text-decoration: none;
  color: var(--text);
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  box-sizing: border-box;
}
.bocne-menu a:hover,
.bocne-menu .forma-odhlasit button:hover { background: var(--pozadie); }
.bocne-menu a.aktivny { background: #eef2f7; font-weight: 600; }
.bocne-menu a.zvyraznene { background: #1b375f; color: #fff; margin-top: 6px; }
.bocne-menu a.zvyraznene:hover { background: #142a4a; }
.bocne-menu .forma-odhlasit {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--okraj);
}
.bocne-menu .forma-odhlasit button { color: var(--sivá); }

body.menu-otvorene { overflow: hidden; }

.obsah {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px;
}

.karty {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 16px 0 24px;
}

.karta {
  background: var(--karta);
  border: 1px solid var(--okraj);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.karta .popis { font-size: 13px; color: var(--sivá); }
.karta .hodnota { font-size: 22px; font-weight: 700; }
.karta-cervena .hodnota { color: var(--cervena); }
.karta-oranzova .hodnota { color: var(--oranzova); }

.upozornenie-na-kontrolu {
  margin-bottom: 24px;
}
.upozornenie-na-kontrolu a {
  display: inline-block;
  background: #fff4e5;
  border: 1px solid var(--oranzova);
  color: #8a5300;
  padding: 10px 14px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
}

.firma-blok { margin-bottom: 20px; }
.tabulka-projekty { width: 100%; border-collapse: collapse; }
.tabulka-projekty td { padding: 6px 0; border-bottom: 1px solid var(--okraj); }
.tabulka-projekty td.suma { text-align: right; font-weight: 600; }

.prazdne { color: var(--sivá); }

.stav-po_splatnosti { color: var(--cervena); font-weight: 600; }
.stav-do_7_dni { color: var(--oranzova); font-weight: 600; }
.stav-zaplatene { color: var(--zelena); font-weight: 600; }
.stav-na_kontrolu { color: #8a5300; font-weight: 600; }
.stav-ostatne { color: var(--text); }

/* Filtre */
.filtre {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  background: var(--karta);
  border: 1px solid var(--okraj);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
}
.filtre select, .filtre input[type="text"], .filtre input[type="date"] {
  padding: 6px 8px;
  border: 1px solid var(--okraj);
  border-radius: 6px;
  font-size: 14px;
}
.filtre label { font-size: 13px; color: var(--sivá); display: flex; gap: 4px; align-items: center; }
.filtre button { padding: 7px 14px; border-radius: 6px; border: 1px solid var(--text); background: var(--text); color: #fff; cursor: pointer; }
.filtre a { font-size: 13px; color: var(--sivá); }

.export-odkazy { margin-bottom: 16px; display: flex; gap: 14px; }
.export-odkazy a {
  font-size: 13px;
  text-decoration: none;
  color: var(--text);
  border: 1px solid var(--okraj);
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--karta);
}

/* Tabuľka faktúr */
.tabulka-faktur { width: 100%; border-collapse: collapse; background: var(--karta); border: 1px solid var(--okraj); border-radius: 10px; overflow: hidden; }
.tabulka-faktur th, .tabulka-faktur td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--okraj); font-size: 14px; }
.tabulka-faktur th { background: #fafafb; font-weight: 600; color: var(--sivá); font-size: 12px; text-transform: uppercase; }
.tabulka-faktur td.suma, .tabulka-faktur th.suma { text-align: right; white-space: nowrap; }
.tabulka-faktur a { color: var(--text); text-decoration: none; font-weight: 600; }
.tabulka-faktur .dovod { font-size: 13px; color: #8a5300; }

.riadok-po_splatnosti { background: #fdecec; }
.riadok-do_7_dni { background: #fff6e8; }
.riadok-zaplatene { background: #ecf8f0; }
.riadok-na_kontrolu { background: #fff4e5; }

/* Detail faktúry */
.box-problem {
  background: #fff4e5;
  border: 1px solid var(--oranzova);
  color: #8a5300;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.detail-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(340px, 1.2fr);
  gap: 20px;
  align-items: start;
}

.pdf-nahlad {
  width: 100%;
  height: 80vh;
  border: 1px solid var(--okraj);
  border-radius: 10px;
  background: #fff;
}
.obrazok-nahlad { width: 100%; border-radius: 10px; border: 1px solid var(--okraj); }

.detail-formular fieldset {
  border: 1px solid var(--okraj);
  border-radius: 10px;
  margin-bottom: 14px;
  padding: 12px 14px;
  background: var(--karta);
}
.detail-formular legend { font-size: 12px; text-transform: uppercase; color: var(--sivá); padding: 0 6px; }
.detail-formular label { display: block; font-size: 13px; margin-bottom: 8px; color: var(--sivá); }
.detail-formular input, .detail-formular textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 7px 9px;
  border: 1px solid var(--okraj);
  border-radius: 6px;
  font-size: 14px;
  color: var(--text);
  font-family: inherit;
}
.detail-formular label.checkbox { display: flex; align-items: center; gap: 8px; }
.detail-formular label.checkbox input { width: auto; margin: 0; }

.tlacidlo-primarne {
  background: var(--text);
  color: #fff;
  border: none;
  padding: 9px 16px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 14px;
  text-decoration: none;
  display: inline-block;
}
.tlacidlo-zaplatit { background: var(--zelena); color: #fff; border: none; padding: 9px 16px; border-radius: 7px; cursor: pointer; }
.akcie-platba { margin-top: 10px; }
.akcie-platba form { display: flex; gap: 10px; align-items: center; }

/* Projekty */
.tabulka-projekty-sprava { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.tabulka-projekty-sprava td { padding: 8px 6px; border-bottom: 1px solid var(--okraj); vertical-align: middle; }
.tabulka-projekty-sprava tr.archivovany { opacity: 0.5; }
.tabulka-projekty-sprava .priecinok { font-size: 12px; color: var(--sivá); }
.forma-riadok { display: flex; gap: 8px; align-items: center; }
.forma-riadok input[type="text"] { padding: 6px 8px; border: 1px solid var(--okraj); border-radius: 6px; }

/* Nahrať faktúru */
.formular-nahrat {
  max-width: 480px;
  background: var(--karta);
  border: 1px solid var(--okraj);
  border-radius: 10px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.formular-nahrat label { font-size: 14px; color: var(--sivá); display: flex; flex-direction: column; gap: 6px; }
.formular-nahrat select,
.formular-nahrat input[type="file"] {
  padding: 10px;
  border: 1px solid var(--okraj);
  border-radius: 6px;
  font-size: 15px;
  color: var(--text);
}

/* Mobil */
@media (max-width: 700px) {
  .hlavicka { padding: 12px 16px; }
  .obsah { padding: 16px; }
  .detail-grid { grid-template-columns: 1fr; }
  .pdf-nahlad { height: 60vh; }
  .karty { grid-template-columns: repeat(2, 1fr); }
  .tabulka-faktur { display: block; overflow-x: auto; white-space: nowrap; }

  .bocne-menu {
    top: 0;
    right: 0;
    bottom: 0;
    min-width: 0;
    width: 78vw;
    max-width: 320px;
    border-radius: 0;
    border: none;
    border-left: 1px solid var(--okraj);
    box-shadow: -16px 0 40px rgba(15, 23, 42, 0.2);
    padding: 20px 14px;
    padding-top: max(20px, env(safe-area-inset-top));
    transform: translateX(100%);
    justify-content: flex-start;
  }
  .bocne-menu.otvorene { transform: translateX(0); }
  .bocne-menu a,
  .bocne-menu .forma-odhlasit button { font-size: 16px; padding: 14px 12px; }
  .prepinac-firiem a { font-size: 14px; padding: 10px 12px; }
}

/* Prihlásenie */
.prihlasovacia-stranka {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  background: #1b375f;
  padding: 24px;
}
.prihlasenie-logo { width: 180px; height: auto; }
.prihlasovacia-karta {
  width: 100%;
  max-width: 340px;
  background: #ffffff;
  border-radius: 16px;
  padding: 32px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}
.prihlasovacia-karta form { text-align: left; }
.prihlasovacia-karta .tlacidlo-primarne {
  width: 100%;
  text-align: center;
  margin-top: 4px;
  background: #1b375f;
}

/* Prepínač firiem v menu */
.prepinac-firiem {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--okraj);
}
.prepinac-firiem a {
  font-size: 13px;
  color: var(--sivá);
  padding: 8px 12px;
  border-radius: 8px;
  text-decoration: none;
}
.prepinac-firiem a:hover { background: var(--pozadie); }
.prepinac-firiem a.aktivny { background: #eef2f7; color: var(--text); font-weight: 600; }

/* Značky (firma, stav) */
.znacka-firmy {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: #1b375f;
  background: #e8edf5;
  padding: 3px 9px;
  border-radius: 999px;
}
.znacka-stavu {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--pozadie);
  color: var(--sivá);
}
.znacka-stavu-aktivny { background: #e6f4ea; color: var(--zelena); }
.znacka-stavu-planovany { background: #eef2f7; color: #3b5c85; }
.znacka-stavu-dokonceny { background: #f1f1f3; color: var(--sivá); }
.znacka-archivovany { background: #fdecec; color: var(--cervena); }
.znacka-priorita { font-size: 11px; font-weight: 700; color: var(--oranzova); text-transform: uppercase; }

/* Karty projektov */
.mriezka-projektov {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.karta-projektu {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--karta);
  border: 1px solid var(--okraj);
  border-radius: 12px;
  padding: 16px;
  text-decoration: none;
  color: var(--text);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.karta-projektu:hover { box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1); transform: translateY(-2px); }
.karta-projektu-hlavicka { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.nazov-projektu { font-weight: 700; font-size: 16px; }
.karta-projektu-cisla { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.karta-projektu-cisla .popis { font-size: 12px; color: var(--sivá); display: block; }
.karta-projektu-cisla .hodnota { font-size: 15px; font-weight: 600; }
.po-termine { color: var(--cervena); font-weight: 600; }

/* Detail projektu */
.hlavicka-projektu { margin-bottom: 12px; }
.hlavicka-projektu h1 { margin-bottom: 8px; }
.hlavicka-projektu-znacky { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.opis-projektu { color: var(--sivá); font-size: 14px; max-width: 640px; }

.zalozky {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--okraj);
  margin-bottom: 20px;
}
.zalozky a {
  padding: 10px 16px;
  text-decoration: none;
  color: var(--sivá);
  font-size: 14px;
  font-weight: 600;
  border-bottom: 2px solid transparent;
}
.zalozky a.aktivna { color: #1b375f; border-bottom-color: #1b375f; }
.zalozky a:hover { color: var(--text); }

.zoznam-uloh-strucny { list-style: none; padding: 0; margin: 8px 0 20px; }
.zoznam-uloh-strucny li { padding: 6px 0; border-bottom: 1px solid var(--okraj); font-size: 14px; }

/* Rýchle pridanie úlohy */
.forma-rychle-pridanie {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.forma-rychle-pridanie input[type="text"],
.forma-rychle-pridanie select {
  padding: 10px 12px;
  border: 1px solid var(--okraj);
  border-radius: 8px;
  font-size: 14px;
}
.forma-rychle-pridanie input[type="text"] { flex: 1; min-width: 200px; }

/* Zoznam úloh */
.zoznam-uloh { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.zoznam-uloh li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--karta);
  border: 1px solid var(--okraj);
  border-radius: 10px;
  padding: 12px 14px;
}
.zoznam-uloh li.po-termine-riadok { border-color: var(--cervena); }
.zoznam-uloh li.dokoncena-riadok { opacity: 0.6; }
.forma-uloha-stav { margin: 0; padding-top: 2px; }
.zaskrtavatko {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--okraj);
  background: #fff;
  cursor: pointer;
  padding: 0;
  color: transparent;
  font-size: 13px;
  line-height: 1;
}
.zaskrtavatko:hover { border-color: var(--zelena); }
.zaskrtavatko.zaskrtnute { background: var(--zelena); border-color: var(--zelena); color: #fff; }
.obsah-ulohy { display: flex; flex-direction: column; gap: 3px; }
.nazov-ulohy { font-weight: 600; font-size: 14px; }
.popis-ulohy { font-size: 13px; color: var(--sivá); }
.meta-ulohy { font-size: 12px; color: var(--sivá); }
.meta-ulohy a { color: inherit; }

/* Nastavenia */
.mriezka-nastaveni {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.karta-nastavenia {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--karta);
  border: 1px solid var(--okraj);
  border-radius: 12px;
  padding: 16px;
  text-decoration: none;
  color: var(--text);
}
.karta-nastavenia:hover { box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1); }

.forma-uprava-projektu { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.forma-uprava-projektu input[type="text"],
.forma-uprava-projektu select {
  padding: 6px 8px;
  border: 1px solid var(--okraj);
  border-radius: 6px;
  font-size: 13px;
}