/* =====================================================================================
   B-HOOD panel — finisaje globale (01.10.2026)
   1. schelet de incarcare reutilizabil (.bh-skel*)
   2. indicatorul DataTables „processing” cu bara de progres
   3. cifre animate (bh-polish.js): ascunse doar cat dureaza pornirea animatiei
   4. bannerul de eveniment (partials/event-banner)
   Merge cu tema „liquid glass” (variabilele --g-*) si cu aspectul clasic (fallback-urile din var()).
   ===================================================================================== */

/* ---------- 1. schelet ---------- */
.bh-skel,
.bh-skel-line,
.bh-skel-circle,
.bh-skel-block {
    --sk-a: var(--g-tint, rgba(255, 255, 255, .05));
    --sk-b: var(--g-tint-2, rgba(255, 255, 255, .1));
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 8px;
    background: var(--sk-a);
    background-image: linear-gradient(100deg, transparent 20%, var(--sk-b) 50%, transparent 80%);
    background-size: 220% 100%;
    background-repeat: no-repeat;
    animation: bhSkel 1.5s ease-in-out infinite;
    color: transparent !important;
    user-select: none;
    pointer-events: none;
}
.bh-skel-line { height: .78em; margin: .5em 0; width: 100%; }
.bh-skel-line.is-short { width: 42%; }
.bh-skel-line.is-mid { width: 68%; }
.bh-skel-line.is-title { height: 1.15em; width: 55%; margin-bottom: .8em; }
.bh-skel-circle { width: 42px; height: 42px; border-radius: 50%; flex: none; }
.bh-skel-block { height: 120px; border-radius: var(--g-r, 12px); }

.bh-skel-card {
    display: block;
    padding: 16px;
    border-radius: var(--g-r, 12px);
    border: 1px solid var(--g-edge, rgba(255, 255, 255, .085));
    background: var(--g-pane-in, rgba(255, 255, 255, .03));
}
.bh-skel-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 2px;
}
.bh-skel-row + .bh-skel-row { border-top: 1px solid var(--g-line, rgba(255, 255, 255, .06)); }
.bh-skel-row__body { flex: 1; min-width: 0; }
.bh-skel-row__body .bh-skel-line { margin: .35em 0; }
.bh-skel-list { display: block; }
.bh-skel-sr {
    position: absolute !important;
    width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

@keyframes bhSkel {
    0% { background-position: 120% 0; }
    100% { background-position: -120% 0; }
}

/* ---------- 2. DataTables: „Se incarca…” cu bara de progres ---------- */
.dataTables_wrapper .dataTables_processing {
    overflow: hidden;
}
.dataTables_wrapper .dataTables_processing::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--g-green, #17c964), transparent);
    background-size: 40% 100%;
    background-repeat: no-repeat;
    animation: bhSkelBar 1.1s ease-in-out infinite;
}
@keyframes bhSkelBar {
    0% { background-position: -40% 0; }
    100% { background-position: 140% 0; }
}

/* ---------- 3. cifre animate: ascunse cel mult pana porneste animatia (bh-polish.js) ---------- */
html.bh-cu-wait [data-bh-count] { opacity: 0; }

/* ---------- 4. bannerul de eveniment ---------- */
.bh-event {
    --ev-a: #ff8a3d;
    --ev-b: #c2410c;
    --ev-glow: rgba(255, 138, 61, .32);
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px 22px;
    flex-wrap: wrap;
    margin: 0 0 22px;
    padding: 18px 20px;
    border-radius: var(--g-r-lg, 18px);
    overflow: hidden;
    isolation: isolate;
    color: var(--g-text, #e6ecea);
    background:
        radial-gradient(120% 140% at 0% 0%, var(--ev-glow), transparent 55%),
        linear-gradient(135deg, var(--g-pane-a, rgba(255, 255, 255, .068)), var(--g-pane-b, rgba(255, 255, 255, .026)));
    border: 1px solid var(--g-edge, rgba(255, 255, 255, .085));
    box-shadow: var(--g-hi, inset 0 1px 0 rgba(255, 255, 255, .1)), var(--g-shadow, 0 12px 32px -12px rgba(0, 0, 0, .55));
}
.bh-event::before {
    /* lumina tematica discreta in dreapta, doar CSS */
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .55;
    background:
        radial-gradient(60% 120% at 100% 50%, var(--ev-glow), transparent 70%);
    pointer-events: none;
}
.bh-event.is-summer { --ev-a: #ffd166; --ev-b: #06b6d4; --ev-glow: rgba(6, 182, 212, .28); }
.bh-event.is-autumn { --ev-a: #ff8a3d; --ev-b: #c2410c; --ev-glow: rgba(255, 138, 61, .3); }
.bh-event.is-halloween { --ev-a: #f97316; --ev-b: #7c3aed; --ev-glow: rgba(124, 58, 237, .3); }
.bh-event.is-winter { --ev-a: #e0f2fe; --ev-b: #38bdf8; --ev-glow: rgba(56, 189, 248, .28); }
.bh-event.is-green { --ev-a: #17c964; --ev-b: #3fd2c7; --ev-glow: rgba(23, 201, 100, .26); }

.bh-event__icon {
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    color: #1a0d00;
    background: linear-gradient(160deg, var(--ev-a), var(--ev-b));
    box-shadow: 0 10px 24px -10px var(--ev-glow), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.bh-event__body { flex: 1 1 260px; min-width: 0; }
.bh-event__kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--ev-a);
    margin-bottom: 2px;
}
.bh-event__title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.25;
    color: var(--g-strong, #fff) !important;
}
.bh-event__text { margin: 4px 0 0; font-size: .88rem; color: var(--g-text-2, #c3cdc9); overflow-wrap: anywhere; }
.bh-event__side { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bh-event__count {
    display: flex;
    gap: 6px;
    font-variant-numeric: tabular-nums;
}
.bh-event__count > span {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 50px;
    padding: 6px 8px;
    border-radius: 12px;
    background: var(--g-tint, rgba(255, 255, 255, .045));
    border: 1px solid var(--g-edge, rgba(255, 255, 255, .085));
}
.bh-event__count b { font-size: 1.15rem; font-weight: 800; line-height: 1.1; color: var(--g-strong, #fff); }
.bh-event__count small { font-size: .66rem; font-weight: 700; color: var(--g-muted, #8f9d98); }
.bh-event__ended { font-size: .84rem; font-weight: 700; color: var(--g-muted, #8f9d98); }
.bh-event__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: 12px;
    font-weight: 800;
    font-size: .86rem;
    white-space: nowrap;
    text-decoration: none !important;
    color: #1a0d00 !important;
    background: linear-gradient(180deg, var(--ev-a), var(--ev-b));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
    transition: transform .12s ease, filter .15s ease;
}
.bh-event__btn:hover { filter: brightness(1.08); }
.bh-event__btn:active { transform: translateY(1px); }
.bh-event__edit {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: .74rem;
    font-weight: 700;
    color: var(--g-muted, #8f9d98) !important;
}
.bh-event__edit:hover { color: var(--g-strong, #fff) !important; }

html.bh-glass[data-bh-theme="light"] .bh-event__kicker { color: var(--ev-b); }

@media (max-width: 575.98px) {
    .bh-event { padding: 16px 14px; gap: 12px; }
    .bh-event__icon { width: 42px; height: 42px; font-size: 1.35rem; border-radius: 13px; }
    .bh-event__side { width: 100%; justify-content: space-between; }
    .bh-event__count > span { min-width: 0; flex: 1; }
    .bh-event__count { flex: 1; }
}

/* formularul admin pentru banner (in modal) */
.bh-event-form .form-group { margin-bottom: 12px; }
.bh-event-form small { color: var(--g-muted, #8f9d98); }

@media (prefers-reduced-motion: reduce) {
    .bh-skel, .bh-skel-line, .bh-skel-circle, .bh-skel-block { animation: none; }
    .dataTables_wrapper .dataTables_processing::after { animation: none; background-position: 50% 0; }
}