/* Base layer: layout tokens, reset, and the shared component classes.
   Extracted verbatim from the old inline <style> in templates/base.html (U1).
   Color tokens live in themes.css; ad-hoc helpers live in utilities.css. */

:root { --content-maxw: 1400px; --maxw: 100rem; --radius: 14px; }

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.55;
}
a { color: var(--brand); }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 1rem; }
.wrap { max-width: var(--content-maxw); margin: 0 auto; padding: 0 1.5rem; }
header.site {
  background: var(--surface); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
header.site .bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .8rem 1.5rem; max-width: var(--content-maxw); margin: 0 auto;
}
/* back-office wide variant — must out-specify `header.site .bar` (U1 C, was inline). */
header.site .bar.bar-wide { max-width: var(--maxw); }
header.site .brand {
  display: flex; align-items: center; gap: .55rem;
  font-weight: 600; font-size: 1.05rem; text-decoration: none; color: var(--text);
}
header.site .brand .logo {
  width: 30px; height: 30px; border-radius: 9px; background: var(--brand);
  color: var(--brand-contrast); display: flex; align-items: center; justify-content: center;
}
nav.top { display: flex; align-items: center; flex-wrap: wrap; gap: .2rem; }
nav.top a { margin-left: 1rem; text-decoration: none; color: var(--muted); }
nav.top a:hover { color: var(--text); }
.nav-ic { vertical-align: -3px; margin-right: .35rem; }
nav.top a.nav-active { color: var(--text); font-weight: 500; }
nav.top a.btn { color: var(--brand-contrast); }
nav.top a.btn.ghost { color: var(--text); }
nav.top details.lang { position: relative; margin-left: 1rem; }
nav.top details.lang > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); border: 1px solid var(--border); border-radius: 8px; padding: .35rem .7rem; font-size: .9rem; }
nav.top details.lang > summary::-webkit-details-marker { display: none; }
nav.top details.lang[open] > summary { color: var(--text); }
.lang-menu { position: absolute; right: 0; top: calc(100% + .35rem); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: .3rem; min-width: 9rem; z-index: 30; }
.lang-menu a { display: block; margin: 0; padding: .45rem .6rem; border-radius: 6px; text-decoration: none; color: var(--text); }
.lang-menu a:hover { background: var(--surface-2); }
.lang-menu a.on { color: var(--brand); font-weight: 500; }
main { padding: 2rem 0; min-height: 60vh; }
main.flush { padding: 0; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; }
.btn {
  display: inline-block; background: var(--brand); color: var(--brand-contrast);
  padding: .6rem 1.1rem; border-radius: 10px; text-decoration: none;
  border: 1px solid transparent;  /* reserve border space so solid + ghost buttons match height */
  cursor: pointer; font: inherit; line-height: 1.2;
}
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn.ghost.tab-active { background: var(--brand); color: var(--brand-contrast); border-color: var(--brand); }  /* filter-tab active (was inline) */

/* Form controls inherit the page font (native file inputs otherwise render in
   the UA font, which looks out of place next to the rest of the UI). */
input, select, textarea, button { font: inherit; }

/* Styled file picker: a .btn ghost label wrapping a visually-hidden file input,
   with the chosen filename echoed next to it (see the handler in the footer).
   The label renders as a normal inline-block .btn so its height matches the
   sibling submit buttons exactly. */
.file-field { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .5rem; }
.file-pick > input[type=file] { position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.file-pick-name { color: var(--muted); font-size: .9rem; }

/* Role picker (Nastavení → Uživatelé): a radio list styled as full-width rows,
   so the WHOLE row highlights on hover / when selected — a native <select>
   popup can't (the option highlight is drawn by the OS). */
.role-choices { display: flex; flex-direction: column; gap: .4rem; margin: .3rem 0 1rem; }
.role-choices label { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem;
  border: 1px solid var(--border); border-radius: 10px; cursor: pointer; font-weight: normal; }
.role-choices label:hover { background: var(--surface-2); }
.role-choices input[type=radio] { accent-color: var(--brand); margin: 0; }
.role-choices label:has(input:checked) { border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 14%, var(--surface)); }
.role-choices label:has(input:disabled) { cursor: default; opacity: .85; }

/* News tags — solid colored pills, white text, readable in light + dark. */
.tag { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: .75rem; color: #fff; line-height: 1.7; }
.tag--gray { background: #64748b; } .tag--red { background: #dc2626; }
.tag--orange { background: #ea580c; } .tag--amber { background: #b45309; }
.tag--green { background: #16a34a; } .tag--teal { background: #0d9488; }
.tag--blue { background: #2563eb; } .tag--indigo { background: #4f46e5; }
.tag--purple { background: #7c3aed; } .tag--pink { background: #db2777; }
.tag--yellow { background: #f5c518; color: #3a2e05; }

/* Footer (Design 1: three columns + a bottom bar). */
footer.site { border-top: 1px solid var(--border); color: var(--muted); background: var(--surface); margin-top: 3rem; }
footer.site .footer-cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2rem; padding: 2.5rem 0; }
footer.site h4 { color: var(--text); font-size: .95rem; margin: 0 0 .8rem; }
footer.site .footer-cols a { display: block; color: var(--muted); text-decoration: none; margin: .35rem 0; }
footer.site .footer-cols a:hover { color: var(--text); }
footer.site .footer-cols a.brand { margin-bottom: .7rem; }  /* was inline; must beat .footer-cols a */
footer.site .footer-bar {
  border-top: 1px solid var(--border); font-size: .85rem;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem; align-items: center;
  padding: 1rem 0;
}
#theme-toggle { background: transparent; color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: .3rem .6rem; cursor: pointer; }

/* Back-office two-column layout: sidebar + content. */
.layout {
  display: grid; grid-template-columns: 13.5rem 1fr; gap: 1.5rem;
  max-width: var(--maxw); margin: 0 auto; padding: 0 1rem;
}
aside.side { padding-top: 1.5rem; }
aside.side .group { margin-bottom: 1.1rem; }
aside.side .group h3 {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin: 0 0 .35rem; padding-left: .6rem;
}
aside.side a {
  display: block; padding: .2rem .6rem; border-radius: 8px;
  text-decoration: none; color: var(--text); font-size: .95rem;
}
aside.side a:hover { background: var(--surface-2); }
aside.side a.active { background: var(--brand); color: var(--brand-contrast); }
#nav-toggle {
  display: none; background: transparent; color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; padding: .35rem .6rem; cursor: pointer;
}
@media (max-width: 820px) {
  .layout { grid-template-columns: 1fr; }
  aside.side { display: none; padding-top: .5rem; border-bottom: 1px solid var(--border); }
  body.nav-open aside.side { display: block; }
  #nav-toggle { display: inline-block; }
  footer.site .footer-cols { grid-template-columns: 1fr; gap: 1.2rem; }
}
@media (max-width: 640px) { nav.top a { margin-left: .6rem; font-size: .9rem; } }
a.skip { position: absolute; left: -999px; }
a.skip:focus { left: 1rem; top: 1rem; background: var(--surface); padding: .5rem; }
/* Loading state for any submit button (added on form submit — see script below). */
.btn.is-loading { position: relative; pointer-events: none; opacity: .8; padding-right: 2rem !important; }
.btn.is-loading::after {
  content: ""; position: absolute; right: .6rem; top: 50%; margin-top: -.45rem;
  width: .85rem; height: .85rem; border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: btnspin .6s linear infinite;
}
@keyframes btnspin { to { transform: rotate(360deg); } }