/*
 * Copyright (c) SupportSystem s.r.o. Všechna práva vyhrazena.
 * Autoři: Petr Marek, Jan Kučera
 *
 * @uses-design-tokens-v2
 * @fileoverview Button (ui-v2) — moderní base tlačítko (PPP_UKOL_199).
 *
 * Plně oddělené od starého `public/css/dashboard/modal-base.css` (modal-button-*).
 * Pouze design tokens v2 (`--ui-*` z `design-tokens.css`).
 *
 * Density je řízena přes body.density-{compact|cozy|roomy} selektory.
 *
 * Selektor: `.btn-v2` + modifikátor `.btn-v2--<typ>` + element `.btn-v2__icon` / `.btn-v2__label`.
 */

/* ─── BASE ────────────────────────────────────────────────────────────────── */

.btn-v2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ui-spacing-xs);
    padding: 0 var(--ui-spacing-md);
    height: 36px;
    font-family: var(--ui-font-base);
    font-size: var(--ui-text-size-label);
    font-weight: var(--ui-text-weight-medium);
    line-height: 1;
    border: 1px solid transparent;
    border-radius: var(--ui-radius-medium);
    cursor: pointer;
    user-select: none;
    transition: var(--ui-transition-fast);
    box-sizing: border-box;
    white-space: nowrap;
}

/* Density override (applies via body.density-* selector).
   PPP_UKOL_212 — sjednocení density logiky:
   - primary/secondary/danger: fixní 32px (command-bar style PPP v1)
   - topbar: fixní 36px (designerova V5+ Topbar prava cast soubor v dokumentaci)
   - icon-only: má vlastní density override níže (řešeno per-modifier)
   - default + custom: density-aware (28/32/36 dle preference)
   Density rule tedy platí jen na "default" buttony (žádná modifier class). */
body.density-compact .btn-v2:not(.btn-v2--primary):not(.btn-v2--secondary):not(.btn-v2--danger):not(.btn-v2--topbar):not(.btn-v2--icon-only) {
    height: var(--ui-density-compact-field-height);
    font-size: var(--ui-density-compact-text-body);
}

body.density-cozy .btn-v2:not(.btn-v2--primary):not(.btn-v2--secondary):not(.btn-v2--danger):not(.btn-v2--topbar):not(.btn-v2--icon-only) {
    height: var(--ui-density-cozy-field-height);
    font-size: var(--ui-density-cozy-text-body);
}

body.density-roomy .btn-v2:not(.btn-v2--primary):not(.btn-v2--secondary):not(.btn-v2--danger):not(.btn-v2--topbar):not(.btn-v2--icon-only) {
    height: var(--ui-density-roomy-field-height);
    font-size: var(--ui-density-roomy-text-body);
}

/* PPP v1 standard pro main akce (Uložit / Storno / Smazat …) — uppercase + semibold + 32px.
   Designer V5+ jde mírně dál (bold 700), ale ponecháváme v1 standard (semibold 600). */
.btn-v2--primary,
.btn-v2--secondary,
.btn-v2--danger {
    height: 32px;
    min-width: 92px;
    padding: 0 var(--ui-spacing-lg);
    font-weight: var(--ui-text-weight-semibold);
    text-transform: uppercase;
}

.btn-v2:disabled,
.btn-v2[disabled] {
    cursor: not-allowed;
    background: var(--ui-button-disabled-bg);
    color: var(--ui-button-disabled-text);
    border-color: var(--ui-button-disabled-border);
}

.btn-v2:focus-visible {
    outline: 2px solid var(--ui-button-focus-ring);
    outline-offset: 2px;
}

.btn-v2__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.btn-v2__icon svg {
    display: block;
}

.btn-v2__label {
    display: inline-block;
}

.btn-v2.is-loading {
    cursor: wait;
    opacity: 0.7;
}

/* ─── PRIMARY ─────────────────────────────────────────────────────────────── */

.btn-v2--primary {
    background: var(--ui-button-primary-default-bg);
    color: var(--ui-button-primary-default-text);
    border-color: var(--ui-button-primary-default-border);
}

.btn-v2--primary:hover:not(:disabled) {
    background: var(--ui-button-primary-hover-bg);
    color: var(--ui-button-primary-hover-text);
    border-color: var(--ui-button-primary-hover-border);
}

.btn-v2--primary:active:not(:disabled) {
    background: var(--ui-button-primary-active-bg);
    color: var(--ui-button-primary-active-text);
    border-color: var(--ui-button-primary-active-border);
}

/* ─── SECONDARY ───────────────────────────────────────────────────────────── */

.btn-v2--secondary {
    background: var(--ui-button-secondary-default-bg);
    color: var(--ui-button-secondary-default-text);
    border-color: var(--ui-button-secondary-default-border);
}

.btn-v2--secondary:hover:not(:disabled) {
    background: var(--ui-button-secondary-hover-bg);
    color: var(--ui-button-secondary-hover-text);
    border-color: var(--ui-button-secondary-hover-border);
}

.btn-v2--secondary:active:not(:disabled) {
    background: var(--ui-button-secondary-active-bg);
    color: var(--ui-button-secondary-active-text);
    border-color: var(--ui-button-secondary-active-border);
}

/* ─── DANGER ──────────────────────────────────────────────────────────────── */

.btn-v2--danger {
    background: var(--ui-button-danger-default-bg);
    color: var(--ui-button-danger-default-text);
    border-color: var(--ui-button-danger-default-border);
}

.btn-v2--danger:hover:not(:disabled) {
    background: var(--ui-button-danger-hover-bg);
    color: var(--ui-button-danger-hover-text);
    border-color: var(--ui-button-danger-hover-border);
}

.btn-v2--danger:active:not(:disabled) {
    background: var(--ui-button-danger-active-bg);
    color: var(--ui-button-danger-active-text);
    border-color: var(--ui-button-danger-active-border);
}

/* ─── ICON ONLY (square — využívá ghost variant) ──────────────────────────── */

.btn-v2--icon-only {
    width: 36px;
    height: 36px;
    padding: 0;
    background: var(--ui-button-ghost-default-bg);
    color: var(--ui-button-ghost-default-text);
    border-color: var(--ui-button-ghost-default-border);
}

body.density-compact .btn-v2--icon-only {
    width: var(--ui-density-compact-field-height);
    height: var(--ui-density-compact-field-height);
}

body.density-cozy .btn-v2--icon-only {
    width: var(--ui-density-cozy-field-height);
    height: var(--ui-density-cozy-field-height);
}

body.density-roomy .btn-v2--icon-only {
    width: var(--ui-density-roomy-field-height);
    height: var(--ui-density-roomy-field-height);
}

.btn-v2--icon-only:hover:not(:disabled) {
    background: var(--ui-button-ghost-hover-bg);
    color: var(--ui-button-ghost-hover-text);
    border-color: var(--ui-button-ghost-hover-border);
}

.btn-v2--icon-only:active:not(:disabled) {
    background: var(--ui-button-ghost-active-bg);
    color: var(--ui-button-ghost-active-text);
    border-color: var(--ui-button-ghost-active-border);
}

/* ─── TOPBAR (designer .lp-tbtn — bg-card + border, hover overlay) ────────── */
/* Implementace 1:1 dle designeru lupa-shared.jsx řádek 147-157 (.lp-tbtn) */

.btn-v2--topbar {
    background: var(--ui-surface-card-bg);
    color: var(--ui-text-secondary);
    border-color: var(--ui-border-default);
}

.btn-v2--topbar:hover:not(:disabled) {
    background: var(--ui-overlay-hover-bg);
    color: var(--ui-text-primary);
    border-color: var(--ui-border-strong);
}

.btn-v2--topbar:active:not(:disabled) {
    background: var(--ui-overlay-active-bg);
}

/* ════════════════════════════════════════════════════════════════════
 * PPP_UKOL_220 — rozšíření: info + ghost typy + tone modifiers
 * ════════════════════════════════════════════════════════════════════ */

/* ─── INFO — modré soft tlačítko pro „SPUSTIT" (univerzální) ──────── */

.btn-v2--info {
    background: var(--ui-button-info-default-bg, #ff0000);
    color: var(--ui-button-info-default-text, #ff0000);
    border: 1px solid var(--ui-button-info-default-border, #ff0000);
    border-bottom-color: var(--ui-button-info-default-edge, #ff0000);
    border-bottom-width: 2px;
}

.btn-v2--info:hover:not(:disabled) {
    background: var(--ui-button-info-hover-bg, #ff0000);
    color: var(--ui-button-info-hover-text, #ff0000);
    border-color: var(--ui-button-info-hover-border, #ff0000);
}

.btn-v2--info:active:not(:disabled) {
    background: var(--ui-button-info-active-bg, #ff0000);
    color: var(--ui-button-info-active-text, #ff0000);
    border-color: var(--ui-button-info-active-border, #ff0000);
}

/* ─── GHOST — transparent bg, accent text, accent-soft hover ──────── */

.btn-v2--ghost {
    background: var(--ui-button-ghost-default-bg, transparent);
    color: var(--ui-button-ghost-default-text, #ff0000);
    border: 1px solid var(--ui-button-ghost-default-border, transparent);
}

.btn-v2--ghost:hover:not(:disabled) {
    background: var(--ui-button-ghost-hover-bg, #ff0000);
    color: var(--ui-button-ghost-hover-text, #ff0000);
    border-color: var(--ui-button-ghost-hover-border, transparent);
}

.btn-v2--ghost:active:not(:disabled) {
    background: var(--ui-button-ghost-active-bg, #ff0000);
    color: var(--ui-button-ghost-active-text, #ff0000);
    border-color: var(--ui-button-ghost-active-border, transparent);
}

/* ─── TONE MODIFIERS — sémantické barvy pro ghost/iconOnly ────────── */
/* Aplikují color (text + ikona dědí currentColor) + hover background.
   NEPŘEBÍJÍ default ghost styly, jen color a hover. */

.btn-v2--tone-amber {
    color: var(--ui-status-amber-text, #ff0000);
}

.btn-v2--tone-amber:hover:not(:disabled) {
    background: var(--ui-status-amber-bg, #ff0000);
    color: var(--ui-status-amber-text, #ff0000);
}

.btn-v2--tone-rose {
    color: var(--ui-status-rose-text, #ff0000);
}

.btn-v2--tone-rose:hover:not(:disabled) {
    background: var(--ui-status-rose-bg, #ff0000);
    color: var(--ui-status-rose-text, #ff0000);
}

.btn-v2--tone-mint {
    color: var(--ui-status-mint-text, #ff0000);
}

.btn-v2--tone-mint:hover:not(:disabled) {
    background: var(--ui-status-mint-bg, #ff0000);
    color: var(--ui-status-mint-text, #ff0000);
}

.btn-v2--tone-accent {
    color: var(--ui-action-primary-bg, #ff0000);
}

.btn-v2--tone-accent:hover:not(:disabled) {
    background: var(--ui-action-primary-soft-bg, #ff0000);
    color: var(--ui-action-primary-bg, #ff0000);
}