/* ZUŠ Rakúsy — verziovací TOP BAR (náhľad dizajnových návrhov) */
:root { --vswitch-h: 46px; }
html { scroll-padding-top: var(--vswitch-h); }
body { padding-top: var(--vswitch-h); }

.vswitch-bar{
  position: fixed; top: 0; left: 0; right: 0; height: var(--vswitch-h);
  z-index: 99999;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 0 14px;
  background: #0d0d12; color: #fff;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 13px; line-height: 1;
  box-shadow: 0 2px 14px rgba(0,0,0,.35);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.vswitch-brand{ display:flex; align-items:center; gap:9px; font-weight:600; letter-spacing:.2px; min-width:0; }
.vswitch-brand b{ color:#ffd23f; font-weight:700; }
.vswitch-brand span{ opacity:.6; font-weight:400; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vswitch-dot{ width:8px; height:8px; border-radius:50%; background:#ffd23f; flex:0 0 auto; box-shadow:0 0 0 0 rgba(255,210,63,.6); animation: vswitchPulse 2.2s infinite; }
@keyframes vswitchPulse{ 0%{box-shadow:0 0 0 0 rgba(255,210,63,.5);} 70%{box-shadow:0 0 0 7px rgba(255,210,63,0);} 100%{box-shadow:0 0 0 0 rgba(255,210,63,0);} }

.vswitch{ position: relative; flex:0 0 auto; }
.vswitch summary{
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; gap:8px;
  padding:7px 12px; border-radius:999px;
  background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  font-weight:600; color:#fff; transition: background .15s;
}
.vswitch summary::-webkit-details-marker{ display:none; }
.vswitch summary:hover{ background: rgba(255,255,255,.18); }
.vswitch summary .chev{ transition: transform .2s; opacity:.8; }
.vswitch[open] summary .chev{ transform: rotate(180deg); }
.vswitch-menu{
  position:absolute; top:calc(100% + 8px); right:0;
  background:#15151c; border:1px solid rgba(255,255,255,.12); border-radius:14px;
  padding:6px; box-shadow:0 16px 44px rgba(0,0,0,.5);
  /* 2 stĺpce po 10 — vypĺňa sa po stĺpcoch (v1–v10 vľavo, v11–v20 vpravo) */
  display:grid; grid-auto-flow:column; grid-template-rows:repeat(10, auto);
  grid-auto-columns:minmax(212px, 1fr); gap:2px 6px;
  max-width:calc(100vw - 24px); max-height:calc(100vh - 64px); overflow:auto;
}
.vswitch-menu a{
  display:flex; align-items:center; gap:10px; text-decoration:none;
  color:#e6e6ee; padding:9px 11px; border-radius:9px; font-size:13px;
  transition: background .12s;
}
.vswitch-menu a:hover{ background: rgba(255,255,255,.08); }
.vswitch-menu a.active{ background: rgba(255,210,63,.16); color:#ffd23f; font-weight:600; }
.vswitch-menu a b{ display:block; font-weight:600; }
.vswitch-menu a small{ display:block; opacity:.55; font-size:11.5px; font-weight:400; margin-top:1px; }
.vswitch-menu a .vnum{
  flex:0 0 auto; width:26px; height:26px; border-radius:8px; display:grid; place-items:center;
  background: rgba(255,255,255,.08); font-weight:700; font-size:12px;
}
.vswitch-menu a.active .vnum{ background: rgba(255,210,63,.25); color:#ffd23f; }
@media (max-width:560px){
  .vswitch-brand span{ display:none; }
  /* zachová 2 stĺpce po 10, len užšie bunky a menšie popisky */
  .vswitch-menu{ grid-auto-columns:minmax(140px, 1fr); gap:2px 4px; padding:5px; }
  .vswitch-menu a{ padding:7px 8px; gap:7px; }
  .vswitch-menu a small{ display:none; }
  .vswitch-menu a .vnum{ width:22px; height:22px; font-size:11px; }
}