/*
 * LUMA Creative — identita 2026, značka B · Vzostup.
 *
 * Jediný zdroj farieb, značky a spoločných prvkov pre iTask, iLead, iProject,
 * iServers a rozcestník iLuma. Appky si tento súbor linkujú PRED vlastným
 * styles.css a na tieto tokeny si mapujú svoje premenné — vlastné CSS sa tak
 * nemusí prepisovať a farby zostanú v celej rodine rovnaké.
 *
 * ZDROJ PRAVDY je `iTask/shared/`. Do ostatných appiek sa kopíruje skriptom
 * `iTask/scripts/sync-shared.sh` — needituj kópie, prepíšu sa.
 *
 * Manuál značky: Nova Identita/manualy/LUMA_Logo_B_Vzostup_manual.pdf
 */

:root {
  /* ===== Paleta ===== */
  --luma-ink: #0e1116;          /* podklad značky, tmavé plochy */
  --luma-ink-2: #171c23;        /* o stupeň svetlejšia — hover, karty na tmavom */
  --luma-ink-3: #1e2530;        /* linky a okraje na tmavom */
  --luma-gold: #d9a13b;         /* značka, akcenty, primárne tlačidlá */
  --luma-gold-light: #f0c97a;   /* presvietený stĺpec a iskra NA TMAVOM */
  --luma-gold-dark: #a87a26;    /* to isté NA SVETLOM podklade */
  --luma-paper: #f7f4ef;        /* svetlý podklad */
  --luma-white: #ffffff;
  --luma-grey: #8a8f99;         /* sekundárny text na tmavom */
  --luma-grey-2: #5e6672;       /* popisky, kóty */

  /* Zlatá na svetlom podklade musí byť tmavá — svetlá je na papieri nečitateľná. */
  --luma-gold-na-svetlom: var(--luma-gold-dark);
  --luma-gold-na-tmavom: var(--luma-gold-light);

  /* ===== Stavové farby ===== */
  --luma-ok: #4f8a5b;
  --luma-varovanie: #d9a13b;
  --luma-chyba: #c2533f;
  --luma-info: #5e6672;

  /* ===== Text a linky na svetlom ===== */
  --luma-text: #1c1f24;
  --luma-text-tlmeny: #6e7480;
  --luma-linka: #e6e1d7;

  /* ===== Tvar ===== */
  --luma-radius: 14px;
  --luma-radius-sm: 10px;
  --luma-radius-pill: 999px;
  --luma-tien: 0 18px 50px -28px rgba(14, 17, 22, 0.45);
  --luma-tien-sm: 0 6px 22px -14px rgba(14, 17, 22, 0.4);

  /* ===== Písmo ===== */
  /* Wordmark je Avenir Next (systémový na macOS); Inter je bezplatná náhrada,
     tvarovo blízka — na strojoch bez Avenir Next značka nezmení charakter. */
  --luma-font: "Inter", "Avenir Next", system-ui, -apple-system, sans-serif;
  --luma-font-znacka: "Avenir Next", "Inter", system-ui, sans-serif;
}

/* ===================================================================
   ZNAČKA
   Zostava sa skladá v HTML z glyfu (SVG) a wordmarku (text), nie z obrázka —
   ostrá je v každej veľkosti a farby berie z tokenov vyššie.
   =================================================================== */

.luma-znacka {
  display: inline-flex;
  align-items: center;
  gap: 0.62em;
  text-decoration: none;
  line-height: 1;
  /* Veľkosť celej zostavy sa riadi jediným rozmerom — font-size rodiča. */
  font-size: 26px;
  font-family: var(--luma-font-znacka);
}

.luma-znacka__glyf {
  display: block;
  width: 1.32em;
  height: 1.32em;
  flex-shrink: 0;
}

.luma-znacka__text {
  display: flex;
  flex-direction: column;
  gap: 0.18em;
}

.luma-znacka__meno {
  display: flex;
  align-items: baseline;
  gap: 0.28em;
  white-space: nowrap;
}

/* „LUMA" — Demi Bold, plná farba. */
.luma-znacka__luma {
  font-weight: 650;
  letter-spacing: 0.01em;
  color: var(--luma-white);
}

/* „Creative" — Light, zlatá. Kontrast tučné/tenké nesie celý wordmark. */
.luma-znacka__creative {
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--luma-gold-na-tmavom);
}

/* Tagline — voliteľný, pod 40 px sa vynecháva (viď kompaktná zostava). */
.luma-znacka__tagline {
  font-size: 0.3em;
  font-weight: 400;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--luma-grey);
  white-space: nowrap;
}

/* Na svetlom podklade sa prehodí wordmark aj zlatá. */
.luma-znacka--na-svetlom .luma-znacka__luma { color: var(--luma-ink); }
.luma-znacka--na-svetlom .luma-znacka__creative { color: var(--luma-gold-na-svetlom); }
.luma-znacka--na-svetlom .luma-znacka__tagline { color: var(--luma-text-tlmeny); }

/* Kompaktná zostava — bez taglinu, pre úzke miesta a menšie veľkosti. */
.luma-znacka--kompaktna .luma-znacka__tagline { display: none; }

/* Ochranná zóna = šírka stĺpca (x). Glyf má 3 stĺpce a 2 medzery na 1,32em,
   takže x ≈ 0,3em — odtiaľ padding. */
.luma-znacka--so-zonou { padding: 0.3em; }

/* ===================================================================
   PREPÍNAČ APLIKÁCIÍ
   Rovnaký v každej appke — odtiaľ sa skáče medzi iTask, iLead, iProject,
   iServers a späť na rozcestník iLuma.
   =================================================================== */

.luma-prepinac { position: relative; }

.luma-prepinac__tlacidlo {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  font-family: var(--luma-font);
  font-size: 13px;
  font-weight: 500;
  color: rgba(247, 244, 239, 0.72);
  background: transparent;
  border: 1px solid var(--luma-ink-3);
  border-radius: var(--luma-radius-sm);
  cursor: pointer;
  transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}
.luma-prepinac__tlacidlo:hover {
  color: var(--luma-paper);
  border-color: var(--luma-gold-dark);
  background: var(--luma-ink-2);
}
.luma-prepinac__sipka { margin-left: auto; opacity: 0.6; font-size: 10px; }

.luma-prepinac__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 6px);
  z-index: 60;
  padding: 6px;
  background: var(--luma-ink-2);
  border: 1px solid var(--luma-ink-3);
  border-radius: var(--luma-radius);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.7);
}
.luma-prepinac__panel[hidden] { display: none; }

/* Panel nad tlačidlom v sidebari, pod ním v hornej lište. */
.luma-prepinac--dole .luma-prepinac__panel { top: calc(100% + 6px); bottom: auto; }

.luma-prepinac__polozka {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--luma-radius-sm);
  color: rgba(247, 244, 239, 0.78);
  text-decoration: none;
  font-size: 13px;
  transition: background 0.12s ease, color 0.12s ease;
}
.luma-prepinac__polozka:hover { background: rgba(217, 161, 59, 0.14); color: var(--luma-paper); }
.luma-prepinac__polozka--aktivna { color: var(--luma-gold-light); cursor: default; }
.luma-prepinac__polozka--aktivna:hover { background: transparent; }

.luma-prepinac__ikona {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  flex-shrink: 0;
  border-radius: 8px;
  background: rgba(217, 161, 59, 0.16);
  color: var(--luma-gold-light);
  font-size: 13px;
}
.luma-prepinac__nazov { font-weight: 550; }
.luma-prepinac__popis { display: block; font-size: 11px; color: var(--luma-grey); font-weight: 400; }

.luma-prepinac__oddelovac {
  height: 1px; margin: 6px 4px;
  background: var(--luma-ink-3);
}

/* ===================================================================
   PRÁZDNE STAVY
   Po odchode maskota ich nesie typografia a glyf značky — tichšie, ale
   stále to nie je len holý text.
   =================================================================== */

.luma-prazdno {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 56px 24px;
  text-align: center;
}

.luma-prazdno__glyf {
  width: 40px;
  height: 40px;
  opacity: 0.42;
  margin-bottom: 4px;
}

.luma-prazdno__nadpis {
  font-size: 17px;
  font-weight: 600;
  color: var(--luma-text);
}

.luma-prazdno__text {
  font-size: 14px;
  color: var(--luma-text-tlmeny);
  max-width: 46ch;
  line-height: 1.55;
}

/* Prázdny stav na tmavom podklade (prihlasovacia obrazovka, sidebar). */
.luma-prazdno--na-tmavom .luma-prazdno__nadpis { color: var(--luma-paper); }
.luma-prazdno--na-tmavom .luma-prazdno__text { color: var(--luma-grey); }

/* ===================================================================
   SPRÁVA POUŽÍVATEĽOV
   Doplnok k tabuľke, ktorú si každá appka štýluje sama (.user-tab) —
   tu je len to, čo pribudlo so spoločnými kontami: stĺpec s prístupmi.
   =================================================================== */

/* Modál si modul kreslí sám a štýluje sa tu, nie v CSS appky — inak by správa
   kont vyzerala v každej appke inak. Selektory sú preto zapuzdrené do .luma-modal
   a appkové .btn / .field im do toho nehovoria. */

.luma-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 18px;
  overflow-y: auto;
  background: rgba(14, 17, 22, 0.58);
  backdrop-filter: blur(3px);
}

.luma-modal__karta {
  width: 100%;
  max-width: 760px;
  background: var(--luma-white);
  color: var(--luma-text);
  border-radius: 20px;
  box-shadow: 0 50px 120px -40px rgba(0, 0, 0, 0.65);
  overflow: hidden;
  font-family: var(--luma-font);
  animation: luma-modal-in 0.16s ease-out;
}
.luma-modal__karta--uzka { max-width: 440px; }

@keyframes luma-modal-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .luma-modal__karta { animation: none; }
}

.luma-modal .modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 28px 18px;
  border-bottom: 1px solid var(--luma-linka);
}
.luma-modal .modal-head h2 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: 23px;
  letter-spacing: -0.01em;
}
.luma-modal .eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--luma-gold-dark);
  margin-bottom: 5px;
}
.luma-modal .modal-close {
  font-family: inherit;
  font-size: 22px;
  line-height: 1;
  color: var(--luma-text-tlmeny);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 8px;
}
.luma-modal .modal-close:hover { background: var(--luma-linka); color: var(--luma-text); }

.luma-modal .modal-body { padding: 22px 28px 26px; }
.luma-modal .modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 28px 22px;
  border-top: 1px solid var(--luma-linka);
  background: #fbfaf7;
}

.luma-modal .muted { color: var(--luma-text-tlmeny); font-size: 13.5px; line-height: 1.55; }
.luma-modal .users-sub {
  font-size: 15px;
  font-weight: 600;
  margin: 26px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--luma-linka);
}

/* Polia */
.luma-modal .field { display: block; margin-bottom: 14px; flex: 1; min-width: 0; }
.luma-modal .field-row { display: flex; gap: 12px; flex-wrap: wrap; }
.luma-modal .field label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--luma-text-tlmeny);
  margin-bottom: 6px;
}
.luma-modal .field input,
.luma-modal .field select {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  color: var(--luma-text);
  background: var(--luma-white);
  border: 1px solid var(--luma-linka);
  border-radius: var(--luma-radius-sm);
  padding: 10px 12px;
  outline: none;
  transition: border-color 0.14s ease;
}
.luma-modal .field input:focus,
.luma-modal .field select:focus { border-color: var(--luma-gold); }

/* Tlačidlá */
.luma-modal .btn {
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 550;
  border-radius: var(--luma-radius-sm);
  padding: 10px 18px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter 0.14s ease, background 0.14s ease, border-color 0.14s ease;
}
.luma-modal .btn-sm { padding: 6px 12px; font-size: 12.5px; }
.luma-modal .btn-gold {
  color: var(--luma-ink);
  background: linear-gradient(135deg, var(--luma-gold-light), var(--luma-gold));
}
.luma-modal .btn-gold:hover { filter: brightness(1.06); }
.luma-modal .btn-ghost {
  color: var(--luma-text);
  background: transparent;
  border-color: var(--luma-linka);
}
.luma-modal .btn-ghost:hover { background: #f4f1ea; border-color: var(--luma-gold-dark); }
.luma-modal .btn-danger { color: var(--luma-white); background: var(--luma-chyba); }
.luma-modal .btn-danger:hover { filter: brightness(1.08); }

/* Tabuľka kont */
.luma-modal .user-tab { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.luma-modal .user-tab th {
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--luma-text-tlmeny);
  font-weight: 600;
  padding: 0 10px 9px 0;
  border-bottom: 1px solid var(--luma-linka);
}
.luma-modal .user-tab td {
  padding: 11px 10px 11px 0;
  border-bottom: 1px solid var(--luma-linka);
  vertical-align: middle;
}
.luma-modal .user-tab tr:last-child td { border-bottom: none; }

.luma-modal .role-tag,
.luma-modal .utype-tag {
  display: inline-block;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 550;
  border-radius: var(--luma-radius-pill);
  background: #f0ece3;
  color: var(--luma-text-tlmeny);
  white-space: nowrap;
}
/* Admin je zlatý — je to jediná rola, ktorá smie meniť ostatné kontá. */
.luma-modal .role-tag.admin { background: rgba(217, 161, 59, 0.2); color: #8a6317; }

.luma-uz-apps { max-width: 260px; }

.luma-uz-app,
.luma-uz-vsade {
  display: inline-block;
  margin: 1px 3px 1px 0;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  border-radius: var(--luma-radius-pill);
  background: rgba(217, 161, 59, 0.14);
  color: var(--luma-gold-dark);
  white-space: nowrap;
}
.luma-uz-vsade {
  background: rgba(94, 102, 114, 0.14);
  color: var(--luma-text-tlmeny);
  font-style: italic;
}

.luma-uz-appbox {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.luma-uz-appvolba {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  font-size: 13px;
  border: 1px solid var(--luma-linka);
  border-radius: var(--luma-radius-sm);
  cursor: pointer;
  user-select: none;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.luma-uz-appvolba:hover { border-color: var(--luma-gold); }
.luma-uz-appvolba:has(input:checked) {
  border-color: var(--luma-gold);
  background: rgba(217, 161, 59, 0.09);
}
.luma-uz-appvolba input { accent-color: var(--luma-gold-dark); cursor: pointer; }

/* ===================================================================
   MOBIL
   Spoločné komponenty musia obstáť na 360 px rovnako ako appky okolo nich.
   Najcitlivejšia je tabuľka kont — päť stĺpcov sa na telefón nezmestí,
   preto sa tam mení na kartičky.
   =================================================================== */

@media (max-width: 640px) {
  /* Safari na iPhone pri kliknutí do poľa s písmom pod 16 px priblíži celú
     stránku a používateľ potom hľadá, kam sa layout podel. Platí pre všetky
     appky naraz — identitu si linkuje každá. */
  input,
  select,
  textarea { font-size: 16px; }

  .luma-modal { padding: 12px 10px; align-items: flex-start; }
  .luma-modal__karta { border-radius: 16px; }

  .luma-modal .modal-head { padding: 20px 18px 14px; }
  .luma-modal .modal-head h2 { font-size: 20px; }
  .luma-modal .modal-body { padding: 18px 18px 20px; }
  .luma-modal .modal-foot { padding: 14px 18px 18px; flex-wrap: wrap; }
  .luma-modal .modal-foot .btn { flex: 1 1 auto; }

  /* Polia vedľa seba sa na telefóne stlačia na nečitateľné — pod seba. */
  .luma-modal .field-row { flex-direction: column; gap: 0; }
  .luma-modal .field[style*="max-width"] { max-width: none !important; }

  /* Tabuľka kont → kartičky. Hlavička zmizne, každý údaj si nesie vlastný
     popisok cez data-popis, inak by riadky boli len zoznam hodnôt bez významu. */
  .luma-modal .user-tab thead { display: none; }
  .luma-modal .user-tab,
  .luma-modal .user-tab tbody,
  .luma-modal .user-tab tr,
  .luma-modal .user-tab td { display: block; width: 100%; }

  .luma-modal .user-tab tr {
    padding: 12px 0;
    border-bottom: 1px solid var(--luma-linka);
  }
  .luma-modal .user-tab td {
    padding: 3px 0;
    border: none;
  }
  .luma-modal .user-tab td:first-child {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 4px;
  }
  .luma-modal .user-tab td[data-popis]::before {
    content: attr(data-popis) ": ";
    color: var(--luma-text-tlmeny);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-right: 6px;
  }
  .luma-modal .user-tab td:last-child {
    text-align: left !important;
    margin-top: 8px;
    display: flex;
    gap: 8px;
  }
  .luma-modal .user-tab td:last-child .btn { flex: 1; }
  .luma-uz-apps { max-width: none; }

  /* Voľby aplikácií na celú šírku — ťuknúť sa má do čoho. */
  .luma-uz-appvolba { flex: 1 1 calc(50% - 4px); }

  /* Prepínač appiek: na mobile je sidebar cez celú obrazovku, panel sa preto
     otvára nadol a nemusí sa vtesnávať nad tlačidlo. */
  .luma-prepinac__panel { max-height: 60vh; overflow-y: auto; }
  .luma-prepinac__popis { display: none; }

  .luma-prazdno { padding: 40px 16px; }
  .luma-prazdno__text { font-size: 13.5px; }
}

/* Veľmi úzke telefóny (do 380 px) — voľby appiek pod seba. */
@media (max-width: 380px) {
  .luma-uz-appvolba { flex: 1 1 100%; }
}

/* ===================================================================
   STAVOVÁ BODKA
   Malý indikátor „beží / pracuje sa / nedostupné". Rovnaká škála ako badge,
   len v rozmere, kde sa text nezmestí.
   =================================================================== */

.luma-stav {
  display: inline-block;
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--luma-grey-2);
  box-shadow: 0 0 0 3px rgba(94, 102, 114, 0.16);
}
.luma-stav[data-stav="ok"] { background: var(--luma-ok); box-shadow: 0 0 0 3px rgba(79, 138, 91, 0.18); }
.luma-stav[data-stav="nasadzuje"] {
  background: var(--luma-gold);
  box-shadow: 0 0 0 3px rgba(217, 161, 59, 0.22);
  animation: luma-tep 1.4s ease-in-out infinite;
}
.luma-stav[data-stav="chyba"] { background: var(--luma-chyba); box-shadow: 0 0 0 3px rgba(194, 83, 63, 0.18); }

@keyframes luma-tep {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
  .luma-stav[data-stav="nasadzuje"] { animation: none; }
}

/* ===================================================================
   NAČÍTAVANIE
   Stúpajúce stĺpce ako v značke — vzostup je aj tu, len sa hýbe.
   =================================================================== */

.luma-nacitavam {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 44px 20px;
}

.luma-stlpce {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 26px;
}
.luma-stlpce span {
  display: block;
  width: 6px;
  border-radius: 3px;
  background: var(--luma-gold);
  animation: luma-vzostup 1.05s ease-in-out infinite;
}
.luma-stlpce span:nth-child(1) { height: 30%; animation-delay: 0s; }
.luma-stlpce span:nth-child(2) { height: 52%; animation-delay: 0.12s; }
.luma-stlpce span:nth-child(3) { height: 74%; animation-delay: 0.24s; }
.luma-stlpce span:nth-child(4) { height: 100%; animation-delay: 0.36s; background: var(--luma-gold-light); }

@keyframes luma-vzostup {
  0%, 100% { transform: scaleY(0.55); opacity: 0.65; }
  50%      { transform: scaleY(1);    opacity: 1; }
}
.luma-stlpce span { transform-origin: bottom; }

/* Kto má v systéme vypnuté animácie, nech nedostane skákajúci graf. */
@media (prefers-reduced-motion: reduce) {
  .luma-stlpce span { animation: none; opacity: 0.85; }
}