/* ============================================================
   ui.css — sdílené UI komponenty (dialogy, varianty tlačítek).
   Barvy se berou VÝHRADNĚ z design tokenů (--color-*), takže komponenty
   fungují v light i dark tématu beze změny. Načítá se po main.css.
   Použití v JS: assets/js/ui.js  (UI.alert / UI.confirm / UI.modal).
   ============================================================ */

:root { --color-border-strong: #ddd; --color-primary-on-dark: #2F7EFF; --color-primary-on-dark-hover: #558DFF; --color-success-hover: #1a8057; }

/* ---------- Varianty tlačítek (doplňují .btn z main.css) ---------- */
.btn--secondary { background: var(--color-bg); color: var(--color-text); border-color: var(--color-border-strong); }
.btn--secondary:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn--danger { background: var(--color-error); color: #fff; }
.btn--danger:hover { filter: brightness(1.1); color: #fff; }
.btn--warning { background: var(--color-warning); color: #1a1200; }
.btn--warning:hover { filter: brightness(1.08); color: #1a1200; }
.btn--success { background: var(--color-success); color: #fff; }
.btn--success:hover { background: var(--color-success-hover, #1a8057); color: #fff; }
/* Střední tlačítko kroků průvodce (Zpět / Pokračovat / Odeslat) */
.btn--md { padding: 11px 28px; font-size: 14px; font-weight: 500; line-height: normal; border-width: 0; white-space: normal; }
.btn--md:hover { box-shadow: none; }
.btn--md.btn--secondary { padding: 11px 24px; font-weight: 400; border-width: 1px; border-style: solid; }
.btn--sm { padding: 7px 14px; font-size: var(--text-sm, 13px); }
/* Tlačítko na tmavém podkladu (hero, CTA) – jasnější modrá než --color-primary */
.btn--on-dark { background: var(--color-primary-on-dark, #2F7EFF); color: #fff; border-color: transparent; }
.btn--on-dark:hover { background: var(--color-primary-on-dark-hover, #558DFF); color: #fff; box-shadow: none; }
/* Velké CTA tlačítko (hero / výzva k akci) */
.btn--wide { display: inline-block; min-width: 220px; padding: 12px 26px; font-size: 14px; font-weight: 500; line-height: normal; border: none; text-align: center; box-sizing: border-box; white-space: normal; }
.btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ---------- Přepínač tématu v hlavičce (includes/theme.php → ui_theme_toggle()) ---------- */
.theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; border: 1.5px solid var(--color-primary); color: var(--color-primary); text-decoration: none; flex-shrink: 0; transition: background .15s, color .15s; }
.theme-btn:hover { background: var(--color-primary); color: #fff; }
.theme-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
/* Tlačítka vpravo v horní liště (Přihlásit/Odhlásit, CZE/ENG, přepínač tématu) mají stejnou výšku */
.nav-right .nav-a.btn, .nav-right .lang-btn, .nav-right .theme-btn { box-sizing: border-box; height: 32px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.nav-mobile-theme { gap: 10px; }
.nav-mobile-theme svg { flex-shrink: 0; color: var(--color-primary); }
@media (max-width: 640px) {
  .nav-right .nav-a.btn, .nav-right .lang-btn { height: 30px; }
  .nav-right .theme-btn { display: none; }   /* na mobilu je přepínač v hamburger menu */
}

/* ---------- Ikony (includes/icons.php → icon()) ---------- */
.icon-blue { color: var(--color-primary); display: inline-flex; flex-shrink: 0; }

/* ---------- Dialog (nativní <dialog>) ---------- */
dialog.ui-dialog {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 14px);
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
  padding: 0;
  margin: auto;          /* reset z main.css (*{margin:0}) jinak zruší výchozí vycentrování */
  inset: 0;
  height: fit-content;
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: hidden;
  font-family: var(--font-body);
}
dialog.ui-dialog::backdrop { background: rgba(8, 16, 32, .55); backdrop-filter: blur(2px); }
.ui-dialog__inner { display: flex; flex-direction: column; max-height: calc(100vh - 32px); }
.ui-dialog__head { padding: 18px 22px 0; font-family: var(--font-display); font-size: 17px; font-weight: 600; line-height: 1.3; }
.ui-dialog__body { padding: 12px 22px 4px; font-size: 14px; line-height: 1.6; color: var(--color-text-muted); white-space: pre-line; overflow-y: auto; overflow-x: hidden; min-height: 0; overflow-wrap: anywhere; }
.ui-dialog__head + .ui-dialog__body { padding-top: 8px; }
.ui-dialog__body:first-child { padding-top: 22px; color: var(--color-text); }
.ui-dialog__foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; padding: 16px 22px 20px; }
@media (max-width: 480px) {
  .ui-dialog__foot { flex-direction: column-reverse; }
  .ui-dialog__foot .btn { width: 100%; min-height: 46px; }
}
@media (prefers-reduced-motion: no-preference) {
  dialog.ui-dialog[open] { animation: ui-dialog-in .14s ease-out; }
  @keyframes ui-dialog-in { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
}