/* Rozloženie: hlavička, tri stĺpce, menu, pomocník, tabuľky, prihlásenie. */
body { display: flex; flex-direction: column; }

.top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  min-height: 40px;
  height: auto;
  padding: 4px 8px;
  border-bottom: 2px solid var(--red);
  background: var(--top);
}

a.brand-lockup { text-decoration: none; }
.brand-lockup { display: flex; align-items: center; line-height: 0; }
.brand-lockup .logo-light,
.brand-lockup .logo-dark { height: 34px; width: auto; }
.brand-lockup .logo-dark { display: none; }
html[data-theme="black"] .brand-lockup .logo-light { display: none; }
html[data-theme="black"] .brand-lockup .logo-dark { display: block; }
.login .brand-lockup .logo-light,
.login .brand-lockup .logo-dark { height: auto; width: 100%; }
.paths { display: flex; flex-wrap: wrap; gap: 12px; }
.lang { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.lang select { min-height: 28px; }
dialog.mail { width: min(440px, calc(100vw - 48px)); border: 1px solid var(--line); padding: 16px; }
dialog.mail label { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
dialog.mail textarea, dialog.mail input { width: 100%; }
.who { margin-left: auto; color: var(--muted); }
.top form { margin: 0; }

.frame {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 300px;
  flex: 1;
  min-height: 0;
}

aside, main {
  padding: 12px;
  overflow: auto;
}

#side, .right {
  background: var(--panel);
  border-right: 1px solid var(--line);
}

.right {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 0;
  border-left: 1px solid var(--line);
}
.right .guide-scroll { flex: 1; min-height: 0; overflow: auto; }
.right .guide-scroll > h2:first-child { margin-top: 0; }
.right .version-mark {
  flex: none;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 11px;
}
.right form { margin: 0 0 4px; }
.right input { width: 100%; }
.hint { color: var(--muted); }
.guide { margin: 0 0 8px; padding-left: 16px; color: var(--muted); }
.guide li { margin: 0 0 4px; }
abbr[title] {
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  cursor: help;
}
.hits { list-style: none; margin: 0; padding: 0; }
.hits li { padding: 4px 0; border-bottom: 1px solid var(--line); }
.kind { color: var(--muted); }

body.menu-closed .frame { grid-template-columns: 0 minmax(0, 1fr) 300px; }
body.menu-closed #side { padding: 0; overflow: hidden; border: 0; }

details { border-bottom: 1px solid var(--line); padding: 6px 0; }
#side details details { margin-left: 8px; }
#side summary a, #side .plain a { color: inherit; text-decoration: none; }
#side a[aria-current="page"] { color: var(--red); }
.crumbs { color: var(--muted); }
table.sheet { max-width: none; }
table.sheet th { white-space: nowrap; }
main:has(.sheet-scroll) { display: flex; flex-direction: column; }
.sheet-scroll { flex: 1; min-height: 0; overflow: auto; }
table.sheet.head { border-collapse: separate; border-spacing: 0; border-left: 1px solid var(--line); }
table.sheet.head th,
table.sheet.head td { border-right: 1px solid var(--line); padding: 4px 8px; }
table.sheet.head .split { border-left: 2px solid var(--text); }
table.sheet.head thead { position: sticky; top: 0; z-index: 2; }
table.sheet.head thead th {
  position: relative;
  z-index: 3;
  background: var(--bg);
  box-shadow: inset 0 -1px 0 var(--line);
}
summary { cursor: pointer; }
main details.fold > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 650;
  list-style: none;
}
main details.fold > summary::-webkit-details-marker { display: none; }
main details.fold > summary::before { content: "▸"; width: 1em; }
main details.fold[open] > summary::before { content: "▾"; }
main details.fold > summary .cta { margin-left: auto; }
main details.fold > .sheet { margin-top: 8px; }
main details.fold + .page-head { margin-top: 16px; }
.empty, .plain { color: var(--muted); margin: 6px 0 0; padding-left: 16px; }
.plain { list-style: disc; }

table { border-collapse: collapse; width: 100%; }
select { font: inherit; color: inherit; background: var(--panel); border: 1px solid var(--line); padding: 4px 8px; }
th, td { text-align: left; border-bottom: 1px solid var(--line); padding: 4px 8px 4px 0; }

.login-body {
  display: grid;
  place-items: center;
  height: 100%;
}

.login {
  width: 280px;
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.login h1 { color: var(--red); }
.login .tagline { margin: 0; }
.login .tagline strong { font-weight: 700; }
.login-version {
  position: fixed;
  left: 12px;
  bottom: 12px;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}