/**
 * Copyright (c) SupportSystem s.r.o. Všechna práva vyhrazena.
 * Autoři: Petr Marek, Jan Kučera
 */

/**
 * @uses-design-tokens-v2
 *
 * DÁME NÁKUP — placeholder stránky (admin i veřejný e-shop) v2
 * Implementováno v rámci LUPA_AI/300071 (kostra modulu Dáme Nákup).
 *
 * Sdílený soubor pro `views/dn-v2/admin-placeholder-v2.ejs` a
 * `views/dn-v2/public-placeholder-v2.ejs` — obě stránky mají stejnou strukturu
 * karty na středu obrazovky, liší se jen obsahem.
 *
 * Žádný designerský drop pro Dáme Nákup zatím neexistuje, takže tady VĚDOMĚ
 * nevzniká žádná vizuální koncepce e-shopu — jen neutrální karta ze
 * existujících `--ui-*` tokenů, aby bylo na produkci vidět, že host routing
 * a session fungují. Až designer dodá podklady, tenhle soubor se zahodí
 * a nahradí skutečným layoutem.
 *
 * Žádné nové role do designer katalogu, žádné hardcoded barvy, každý `*-bg`
 * má svůj párový `*-text` (validátor A10).
 */

/* ── Box model reset scoped na stránky modulu ─────────────────────────
   Bez něj by padding nafoukl kartu nad zadanou max-width. */
.dn-placeholder-page-v2 *,
.dn-placeholder-page-v2 *::before,
.dn-placeholder-page-v2 *::after {
    box-sizing: border-box;
}

.dn-placeholder-page-v2 {
    margin: 0;
    min-height: 100vh;
    background: var(--ui-surface-app-bg);
    color: var(--ui-surface-app-text);
    font-family: var(--ui-font-base);
    font-size: var(--ui-density-cozy-text-body);
}

.dn-placeholder-stage-v2 {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ui-spacing-xl);
}

.dn-placeholder-card-v2 {
    width: 100%;
    max-width: 460px;
    background: var(--ui-surface-card-bg);
    color: var(--ui-surface-card-text);
    border: 1px solid var(--ui-border-default);
    border-radius: var(--ui-radius-large);
    box-shadow: var(--ui-shadow-card);
    padding: var(--ui-spacing-2xl);
}

/* ── Hlavička s ikonou ────────────────────────────────────────────── */

.dn-placeholder-brand-v2 {
    display: flex;
    align-items: center;
    gap: var(--ui-spacing-md);
    margin-bottom: var(--ui-spacing-xl);
}

.dn-placeholder-brand-mark-v2 {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ui-action-primary-bg);
    color: var(--ui-action-primary-text);
    border-radius: var(--ui-radius-large);
}

.dn-placeholder-brand-name-v2 {
    font-weight: var(--ui-text-weight-semibold);
    color: var(--ui-text-primary);
}

.dn-placeholder-brand-sub-v2 {
    color: var(--ui-text-tertiary);
}

/* ── Obsah ────────────────────────────────────────────────────────── */

.dn-placeholder-title-v2 {
    margin: 0 0 var(--ui-spacing-sm) 0;
    color: var(--ui-text-primary);
}

.dn-placeholder-text-v2 {
    margin: 0 0 var(--ui-spacing-lg) 0;
    color: var(--ui-text-secondary);
}

/* Informační panel — např. rozpoznaný host a subdoména zákazníka. */
.dn-placeholder-info-v2 {
    background: var(--ui-feedback-info-bg);
    color: var(--ui-feedback-info-text);
    border: 1px solid var(--ui-feedback-info-border);
    border-radius: var(--ui-radius-small);
    padding: var(--ui-spacing-md);
    margin-bottom: var(--ui-spacing-lg);
}

.dn-placeholder-info-row-v2 {
    display: flex;
    justify-content: space-between;
    gap: var(--ui-spacing-md);
}

.dn-placeholder-info-row-v2 + .dn-placeholder-info-row-v2 {
    margin-top: var(--ui-spacing-2xs);
}

.dn-placeholder-info-value-v2 {
    font-weight: var(--ui-text-weight-semibold);
}

/* ── Patička ──────────────────────────────────────────────────────── */

.dn-placeholder-footer-v2 {
    display: flex;
    justify-content: space-between;
    gap: var(--ui-spacing-md);
    padding-top: var(--ui-spacing-md);
    border-top: 1px solid var(--ui-border-subtle);
    color: var(--ui-text-tertiary);
}

.dn-placeholder-footer-v2 a {
    color: var(--ui-action-primary-bg);
}