/**
 * Universal Empty State Components
 *
 * The single source of truth for empty states across the app. Renders the
 * Elite Tactician "card" look: a surface card (matching .card-v2 / cards-v3)
 * with a circular icon badge, title, description, and centered actions.
 *
 * Loaded globally (base.html.twig + chromeless.html.twig). Do NOT redefine
 * `.empty-state*` in section stylesheets — style here so every page stays
 * consistent.
 *
 * Resilient to three markup shapes found across legacy templates:
 *   1. Classed API (preferred):
 *        <div class="empty-state">
 *          <i class="fas fa-x empty-state-icon"></i>     (or a wrapping <div>)
 *          <h3 class="empty-state-title">…</h3>
 *          <p class="empty-state-description">…</p>
 *          <div class="empty-state-actions"><a class="btn btn-primary">…</a></div>
 *        </div>
 *   2. Raw elements (<h3>/<p>/<i>/<svg>) — covered by the zero-specificity
 *      :where(:not(.classed)) fallbacks, so they never fight the classed rules.
 *   3. Aliases (.empty-icon, .empty-state-text) — mapped alongside the classed rules.
 */

/* ===========================================
   EMPTY STATE BASE — surface card (Elite Tactician)
   =========================================== */

.empty-state {
    text-align: center;
    padding: var(--space-8, 2rem) var(--space-6, 1.5rem);
    background: var(--et-surface-container-lowest, #ffffff);
    border-radius: var(--radius-2xl, 1rem);
    color: var(--et-on-surface-variant, #4b5563);
}

/* Optional hairline for contexts that need separation from a like-colored bg */
.empty-state-bordered {
    border: 1px solid var(--et-outline-variant, #e5e7eb);
}

/* ===========================================
   EMPTY STATE ICON — circular badge
   Works whether the class is on the <i> itself or a wrapping element.
   =========================================== */

.empty-state-icon,
.empty-state .empty-icon {
    width: 4rem;
    height: 4rem;
    margin: 0 auto var(--space-4, 1rem);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: var(--et-surface-container, #f1f5f9);
    color: var(--et-on-surface-variant, #4b5563);
    font-size: 1.75rem;
    line-height: 1;
}

/* Icon color variants */
.empty-state-icon-primary { color: var(--et-primary, var(--color-primary)); }
.empty-state-icon-success { color: var(--et-success, var(--color-success)); }
.empty-state-icon-warning { color: var(--et-warning, var(--color-warning)); }
.empty-state-icon-danger  { color: var(--et-error, var(--color-danger)); }

/* ===========================================
   EMPTY STATE TEXT
   =========================================== */

.empty-state-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: var(--space-1, 0.25rem);
    color: var(--et-on-surface, #111827);
}

.empty-state-description,
.empty-state-text {
    font-size: 0.875rem;
    color: var(--et-on-surface-variant, #4b5563);
    margin-bottom: var(--space-6, 1.5rem);
    max-width: 28rem;
    margin-left: auto;
    margin-right: auto;
    line-height: var(--leading-relaxed, 1.625);
}

/* ===========================================
   EMPTY STATE ACTIONS
   =========================================== */

.empty-state-actions {
    display: flex;
    gap: var(--space-3, 0.75rem);
    justify-content: center;
    flex-wrap: wrap;
}

/* ===========================================
   RAW-ELEMENT FALLBACKS
   Zero specificity (:where) AND scoped to elements WITHOUT the classed API
   (:not), so templates that use bare <i>/<svg>/<h*>/<p> still render correctly
   while never overriding the classed rules above — regardless of source order.
   =========================================== */

.empty-state :where(> i:not(.empty-state-icon), > svg:not(.empty-state-icon), > .fas:not(.empty-state-icon), > .far:not(.empty-state-icon), > .fab:not(.empty-state-icon)) {
    display: block;
    margin: 0 auto var(--space-4, 1rem);
    font-size: 2.5rem;
    color: var(--et-on-surface-variant, #4b5563);
    opacity: 0.55;
}

.empty-state :where(h1:not(.empty-state-title), h2:not(.empty-state-title), h3:not(.empty-state-title), h4:not(.empty-state-title)) {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: var(--space-1, 0.25rem);
    color: var(--et-on-surface, #111827);
}

.empty-state :where(p:not(.empty-state-description):not(.empty-state-text)) {
    font-size: 0.875rem;
    color: var(--et-on-surface-variant, #4b5563);
    margin-bottom: var(--space-6, 1.5rem);
    max-width: 28rem;
    margin-left: auto;
    margin-right: auto;
    line-height: var(--leading-relaxed, 1.625);
}

/* ===========================================
   VARIANTS
   =========================================== */

/* Compact — for small panels */
.empty-state-compact {
    padding: var(--space-6, 1.5rem);
}

.empty-state-compact .empty-state-icon,
.empty-state-compact .empty-icon {
    width: 3rem;
    height: 3rem;
    font-size: 1.25rem;
    margin-bottom: var(--space-3, 0.75rem);
}

.empty-state-compact .empty-state-title {
    font-size: 1rem;
}

.empty-state-compact .empty-state-description,
.empty-state-compact .empty-state-text {
    font-size: 0.8125rem;
    margin-bottom: var(--space-4, 1rem);
}

/* Large — hero empty states */
.empty-state-large {
    padding: var(--space-12, 3rem) var(--space-8, 2rem);
}

.empty-state-large .empty-state-icon,
.empty-state-large .empty-icon {
    width: 5.5rem;
    height: 5.5rem;
    font-size: 2.5rem;
    margin-bottom: var(--space-6, 1.5rem);
}

.empty-state-large .empty-state-title {
    font-size: 1.5rem;
}

.empty-state-large .empty-state-description,
.empty-state-large .empty-state-text {
    font-size: 1rem;
}

/* Inline — transparent, for nesting inside an existing card/section */
.empty-state-inline {
    padding: var(--space-6, 1.5rem);
    background: transparent;
    border-radius: 0;
}

.empty-state-inline .empty-state-icon,
.empty-state-inline .empty-icon {
    width: 3rem;
    height: 3rem;
    font-size: 1.25rem;
    margin-bottom: var(--space-2, 0.5rem);
}

.empty-state-inline .empty-state-title {
    font-size: 1rem;
}

/* ===========================================
   WITH IMAGE
   =========================================== */

.empty-state-image {
    max-width: 200px;
    height: auto;
    margin: 0 auto var(--space-4, 1rem);
    opacity: 0.8;
}

.empty-state-large .empty-state-image {
    max-width: 300px;
    margin-bottom: var(--space-6, 1.5rem);
}

/* ===========================================
   SEARCH / ERROR STATES (badge tinting only)
   =========================================== */

.empty-state-search .empty-state-icon,
.empty-state-search .empty-icon {
    color: var(--et-warning, var(--color-warning));
}

.empty-state-error .empty-state-icon,
.empty-state-error .empty-icon {
    color: var(--et-error, var(--color-danger));
}

.empty-state-error .empty-state-title {
    color: var(--et-error, var(--color-danger));
}

/* ===========================================
   RESPONSIVE
   =========================================== */

@media (max-width: 768px) {
    .empty-state {
        padding: var(--space-6, 1.5rem) var(--space-4, 1rem);
    }

    .empty-state-actions {
        flex-direction: column;
        width: 100%;
    }

    .empty-state-actions .btn {
        width: 100%;
    }
}

/* ===========================================
   ACCESSIBILITY
   =========================================== */

.empty-state-sr-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}