/*
 * Oxford empty states — Metronic sigma-1 / sketchy-1 illustrations.
 * Rendered by <x-empty-state> (Blade) and window.oxEmptyState() (JS / AJAX / DataTables).
 * Light/dark: each state ships both images; the inactive one is hidden for
 * Metronic (html[data-bs-theme]) and the parent portal (html[data-theme]).
 */
.ox-empty {
    --ox-empty-h: 170px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: .35rem;
    padding: 2rem 1rem;
    width: 100%;
    animation: oxEmptyIn .45s cubic-bezier(.2, .8, .2, 1) both;
}

.ox-empty--xs { --ox-empty-h: 80px;  padding: .75rem .5rem; gap: .2rem; }
.ox-empty--sm { --ox-empty-h: 120px; padding: 1.25rem .75rem; }
.ox-empty--lg { --ox-empty-h: 230px; padding: 3rem 1rem; }

.ox-empty__art {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .6rem;
}

/* Soft halo behind the sticker */
.ox-empty__art::before {
    content: "";
    position: absolute;
    inset: 12% 8% 4%;
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--ox-empty-halo, rgba(27, 132, 255, .10)), transparent);
    z-index: 0;
}

.ox-empty__img {
    position: relative;
    z-index: 1;
    display: inline-block;
    max-width: min(100%, calc(var(--ox-empty-h) * 1.45));
    max-height: var(--ox-empty-h);
    width: auto;
    height: auto;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    animation: oxEmptyFloat 6s ease-in-out infinite;
}

.ox-empty__img--dark { display: none; }

html[data-bs-theme="dark"] .ox-empty__img--light,
html[data-theme="dark"] .ox-empty__img--light { display: none; }

html[data-bs-theme="dark"] .ox-empty__img--dark,
html[data-theme="dark"] .ox-empty__img--dark { display: inline-block; }

html[data-bs-theme="dark"] .ox-empty,
html[data-theme="dark"] .ox-empty { --ox-empty-halo: rgba(114, 57, 234, .16); }

.ox-empty__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--bs-gray-800, #3f4254);
}

.ox-empty__text {
    margin: 0;
    max-width: 420px;
    font-size: .9rem;
    line-height: 1.6;
    color: var(--bs-gray-500, #99a1b7);
}

.ox-empty--xs .ox-empty__title { font-size: .9rem; }
.ox-empty--xs .ox-empty__text  { font-size: .8rem; }
.ox-empty--sm .ox-empty__title { font-size: .95rem; }
.ox-empty--sm .ox-empty__text  { font-size: .85rem; }

.ox-empty__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-top: .75rem;
}

/* Parent portal palette */
html[data-theme] .ox-empty__title { color: var(--pp-text, inherit); }
html[data-theme] .ox-empty__text  { color: var(--pp-muted, inherit); }
html[data-theme] .ox-empty { --ox-empty-halo: rgba(253, 200, 0, .16); }

/* Inside tables (DataTables + plain <td colspan>) */
td.dataTables_empty:has(.ox-empty),
td.ox-empty-cell {
    padding: 0 !important;
    background: transparent !important;
    border-bottom: 0 !important;
}

table td .ox-empty { padding-block: 1.75rem; }

@keyframes oxEmptyIn {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

@keyframes oxEmptyFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
    .ox-empty,
    .ox-empty__img { animation: none; }
}

@media print {
    .ox-empty__art { display: none; }
}

/* Containers that already pad / frame their empty message */
.shuttle-empty .ox-empty,
.roster-empty .ox-empty,
.ox-gcard-empty .ox-empty { padding: 0; }