/* Vrchný panel aplikácie — jeden riadok, ktorý drží na každej obrazovke.
   Súbor je zámerne zdieľaný medzi vlastnými pohľadmi a Django adminom
   ("nastavenie"), aby sa panel pri prekliknutí nemenil. */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=IBM+Plex+Mono:wght@400;500&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --ink:#0B1F33;--orange:#FF5D00;--teal:#2DD4BF;--bg-a:#F6F9FC;--bg-b:#ECF2F8;
  --head:#313C4D;--body:#4A5768;--body-dark:#93A7BC;--line:rgba(11,31,51,.10);
  --f-head:"Archivo Black","Arial Black",sans-serif;
  --f-body:Inter,Helvetica,Arial,sans-serif;
  --f-mono:"IBM Plex Mono","Courier New",monospace;
  --hlavicka-v:54px;
}

/* Panel je fixný, nie sticky: v admine je obsah v kontajneri s height:100%
   a sticky by sa po jednej obrazovke odlepilo. */
.hlavicka{position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--hlavicka-v);
  background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:0 20px;font-family:var(--f-body);font-size:14px;
  box-shadow:0 1px 0 rgba(255,255,255,.06),0 2px 12px rgba(11,31,51,.18);}
body{padding-top:var(--hlavicka-v);}

.hlavicka-vlavo{display:flex;align-items:center;gap:6px;min-width:0;}
.hlavicka .znacka{font-family:var(--f-head);font-style:italic;font-size:18px;
  text-transform:lowercase;color:#fff;text-decoration:none;margin-right:12px;flex:none;}

/* Značka appky — „smeny" prečiarknuté, pod tým oprava „zmeny" (zadanie 80). */
.znacka-vtip{display:inline-flex;flex-direction:column;line-height:1.05;
  font-family:var(--f-head);font-style:italic;text-transform:lowercase;}
.znacka-vtip .stare{font-size:.52em;text-decoration:line-through;opacity:.5;}
.znacka-vtip .nove{font-size:1em;}
.znacka-vtip--velka{font-size:34px;color:var(--head);}
.hlavicka nav{display:flex;align-items:center;gap:4px;min-width:0;overflow:hidden;}
.hlavicka nav a{font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--body-dark);text-decoration:none;white-space:nowrap;
  padding:7px 11px;border-radius:8px;border:1px solid transparent;}
.hlavicka nav a:hover{color:#fff;background:rgba(255,255,255,.08);}
.hlavicka nav a.je-tu{color:#fff;background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.14);box-shadow:inset 0 -2px 0 var(--orange);}

/* ---------------------------------------------------------- profil */
.profil{position:relative;flex:none;}
.profil > summary{display:flex;align-items:center;gap:9px;cursor:pointer;list-style:none;
  padding:5px 11px 5px 5px;border-radius:999px;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.05);color:#fff;}
.profil > summary::-webkit-details-marker{display:none;}
.profil > summary:hover{background:rgba(255,255,255,.12);}
.profil .iniciala{width:28px;height:28px;border-radius:999px;flex:none;
  background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.04em;color:#fff;}
.profil .kto{font-size:13px;font-weight:600;max-width:180px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.profil .sipka{font-size:10px;color:var(--body-dark);}
.profil[open] > summary{background:rgba(255,255,255,.14);}

.profil-menu{position:absolute;right:0;top:calc(100% + 9px);min-width:262px;z-index:1001;
  background:#fff;color:var(--body);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 12px 32px rgba(11,31,51,.20);padding:7px;}
.profil-menu .hlava{padding:10px 11px 12px;border-bottom:1px solid var(--line);margin-bottom:6px;}
.profil-menu .hlava strong{display:block;color:var(--head);font-size:14px;font-weight:600;}
.profil-menu .hlava .mail{display:block;font-size:12px;color:var(--body);word-break:break-all;}
.profil-menu .hlava .rola{display:inline-block;margin-top:7px;font-family:var(--f-mono);
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;border-radius:999px;
  background:var(--bg-b);color:var(--head);}
.profil-menu a,.profil-menu button{display:flex;align-items:center;gap:9px;width:100%;
  text-align:left;font-family:var(--f-body);font-size:13px;color:var(--head);text-decoration:none;
  padding:9px 11px;border-radius:8px;border:0;background:none;cursor:pointer;}
.profil-menu a:hover,.profil-menu button:hover{background:var(--bg-b);}
/* Položka, na ktorej stránke práve stojíš (dnes len príručka). */
.profil-menu a.je-tu{background:var(--bg-b);font-weight:600;}
.profil-menu .oddel{height:1px;background:var(--line);margin:6px 4px;}
.profil-menu form{margin:0;}
.profil-menu button.odhlasit{color:#b3261e;}
.profil-menu .znak{font-family:var(--f-mono);font-size:12px;color:var(--body-dark);width:14px;
  text-align:center;flex:none;}

/* ---------------------------------------------------- poznámka testera */
/* Tlačidlo v paneli a vyskakovací formulár — správa sa ako menu profilu
   (details, zatvára sa klikom mimo a klávesom Escape), preto zdieľa triedu
   .profil a len dopĺňa vzhľad. */
.hlavicka-vpravo{display:flex;align-items:center;gap:8px;flex:none;}
.profil.poznamka > summary{padding:5px 12px;gap:7px;border-color:rgba(255,93,0,.55);}
.profil.poznamka > summary .znak{font-size:14px;color:var(--orange);}
.profil.poznamka > summary .kto{font-family:var(--f-mono);font-size:11px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;}
.poznamka-form{width:min(380px,calc(100vw - 24px));padding:7px 11px 11px;}
.poznamka-form .hlava{margin-bottom:10px;}
.poznamka-form label{display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--body);margin-bottom:9px;}
.poznamka-form input,.poznamka-form textarea{display:block;width:100%;margin-top:4px;
  box-sizing:border-box;font-family:var(--f-body);font-size:13px;color:var(--head);
  background:#fff;border:1px solid var(--line);border-radius:6px;padding:8px 10px;
  letter-spacing:0;text-transform:none;}
.poznamka-form textarea{resize:vertical;min-height:96px;}
.poznamka-form button.btn{display:inline-flex;width:auto;background:var(--orange);color:#fff;
  font-weight:600;font-size:13px;padding:8px 14px;border-radius:8px;border:0;cursor:pointer;
  font-family:var(--f-body);}
.poznamka-form button.btn:hover{background:#d94e00;}
.poznamka-form .poznamka-stav{display:block;margin-top:8px;font-size:12px;color:var(--body);}

.hlavicka .prihlasit{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;text-decoration:none;padding:7px 12px;border-radius:8px;
  border:1px solid rgba(255,255,255,.18);}

@media (max-width:640px){
  .hlavicka{padding:0 12px;gap:8px;}
  .hlavicka .znacka{margin-right:4px;}
  .hlavicka nav a{padding:7px 8px;letter-spacing:.06em;}
  .profil .kto{display:none;}
  .profil.poznamka > summary .kto{display:none;}
  .hlavicka-vpravo{gap:6px;}
}