/* =========================================================
   AJUS empty state
   Centered placeholder for "no data", "no result" and error pages.
   Every listing renders one of these instead of a blank area.

       <div class="ajus-empty">
           <span class="ajus-empty__icon"><i class="fas fa-inbox" aria-hidden="true"></i></span>
           <p class="ajus-empty__title">No invoices yet</p>
           <p class="ajus-empty__text">Invoices you create will appear here.</p>
           <div class="ajus-empty__actions">
               <button type="button" class="ajus-btn ajus-btn-primary">New invoice</button>
           </div>
       </div>

   Modifiers: --sm (dense blocks), --plain (inside a card / table cell),
   --danger (error tone), plus `.ajus-empty__code` for an error number.
   ========================================================= */

.ajus-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 2.5rem 1.25rem;
    text-align: center;
    color: var(--color-text-muted);
}

.ajus-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: 0.25rem;
    border-radius: 50%;
    background: var(--color-bg-surface-soft);
    color: var(--color-text-soft);
    font-size: 1.35rem;
    line-height: 1;
}

.ajus-empty__code {
    font-size: clamp(2.4rem, 6vw, 4rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--color-text-main);
}

.ajus-empty__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--color-text-main);
}

.ajus-empty__text {
    margin: 0;
    max-width: 42ch;
    font-size: 0.94rem;
    line-height: 1.6;
    color: var(--color-text-muted);
}

.ajus-empty__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 0.6rem;
}

.ajus-empty--sm {
    padding: 1.5rem 1rem;
}

.ajus-empty--sm .ajus-empty__icon {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.05rem;
}

.ajus-empty--plain {
    padding: 1.25rem 0.75rem;
}

.ajus-empty--danger .ajus-empty__icon {
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

/* Inside a table body the empty state replaces a row cell. */
td.ajus-empty {
    display: table-cell;
}