/* =====================================================================================
   B-HOOD panel — continutul update-urilor (.bh-u) + push-ul de pe prima pagina (.bh-push)
   07.10.2026. Familia „liquid glass” (tokenii --g-* din bh-glass.css, cu valori de rezerva
   pentru aspectul clasic). Clasele bh-u-* sunt singurele permise de server (App\Support\UpdateHtml).
   Update-urile vechi (fara clase) primesc doar tipografia de baza: aceleasi tag-uri, aceleasi culori inline.
   ===================================================================================== */

/* ---------- 1. tipografia de baza (vechi + nou) ---------- */
.bh-u {
    --u-strong: var(--g-strong, #fff);
    --u-text: var(--g-text, #e6ecea);
    --u-muted: var(--g-muted, #8f9d98);
    --u-green: var(--g-green-text, #8ff0b8);
    --u-gold: #f3bd3e;
    --u-red: #ff6b79;
    --u-cyan: #4fe0d4;
    --u-purple: #b99bff;
    --u-edge: var(--g-edge, rgba(255, 255, 255, .085));
    --u-tint: var(--g-tint, rgba(255, 255, 255, .045));
    font-size: .95rem;
    line-height: 1.7;
    color: var(--u-text);
    overflow-wrap: anywhere;
}
html.bh-glass[data-bh-theme="light"] .bh-u,
.bh-u[data-u-theme="light"] {
    --u-gold: #a86500;
    --u-red: #c8263d;
    --u-cyan: #0b7f77;
    --u-purple: #6a3fd6;
}
.bh-u > :first-child { margin-top: 0 !important; }
.bh-u > :last-child { margin-bottom: 0 !important; }
.bh-u p { margin: 0 0 .65em; }
.bh-u h1, .bh-u h2, .bh-u h3, .bh-u h4, .bh-u h5, .bh-u h6 {
    color: var(--u-strong);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.01em;
    margin: 1.05em 0 .45em;
}
.bh-u h1 { font-size: 1.85rem; }
.bh-u h2 { font-size: 1.55rem; }
.bh-u h3 { font-size: 1.25rem; }
.bh-u h4 { font-size: 1.1rem; }
.bh-u h5 { font-size: 1rem; }
.bh-u h6 { font-size: .95rem; }
.bh-u a { color: var(--g-link, #6fe3a1); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.bh-u a:hover { color: var(--g-link-hover, #a5f0c4); }
.bh-u ul, .bh-u ol { margin: 0 0 .8em; padding-left: 1.35em; }
.bh-u li { margin: .18em 0; padding-left: .15em; }
.bh-u li::marker { color: var(--u-green); font-weight: 800; }
/* tema panelului scoate bulinele (li { list-style: none }); update-urile vechi isi scriu singure „- ”,
   deci bulinele apar doar pe listele facute in compozitor (clasa bh-u-l) */
.bh-u ul.bh-u-l > li { list-style-type: disc; }
.bh-u ol.bh-u-l > li { list-style-type: decimal; }
.bh-u ul.bh-u-l ul > li { list-style-type: circle; }
.bh-u img { max-width: 100%; height: auto; border-radius: 14px; vertical-align: middle; }
.bh-u hr {
    height: 2px;
    margin: 1.4em 0;
    border: 0;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--u-green) 20%, var(--u-cyan) 80%, transparent);
    opacity: .55;
}
.bh-u blockquote {
    margin: 0 0 .9em;
    padding: .55em 1em;
    border-left: 3px solid var(--u-edge);
    color: var(--u-text);
}
.bh-u code {
    padding: .1em .4em;
    border-radius: 6px;
    font-size: .88em;
    background: var(--u-tint);
    border: 1px solid var(--u-edge);
}
.bh-u table { width: 100%; margin: 0 0 1em; border-collapse: collapse; }
.bh-u th, .bh-u td { padding: .45em .6em; border: 1px solid var(--u-edge); }

/* ---------- 2. ce pune compozitorul (doar continutul nou are clasele) ---------- */
/* titlul mare: gradient verde -> turcoaz (culoare simpla unde nu exista background-clip) */
.bh-u h2.bh-u-h {
    font-size: clamp(1.55rem, 1.1rem + 1.4vw, 2.15rem);
    font-weight: 900;
    letter-spacing: -.025em;
    line-height: 1.12;
    margin: .9em 0 .4em;
    color: var(--u-strong);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .bh-u h2.bh-u-h {
        background: linear-gradient(100deg, var(--u-strong) 0%, var(--u-strong) 35%, var(--u-green) 70%, var(--u-cyan) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    /* textul colorat din titlu ramane colorat */
    .bh-u h2.bh-u-h [class*="bh-u-c-"], .bh-u h2.bh-u-h font, .bh-u h2.bh-u-h [style*="color"] { -webkit-text-fill-color: currentColor; }
}
/* titlul mediu: bara de accent in stanga */
.bh-u h3.bh-u-h {
    position: relative;
    padding-left: 14px;
    font-size: 1.28rem;
    font-weight: 850;
}
.bh-u h3.bh-u-h::before {
    content: "";
    position: absolute;
    left: 0;
    top: .18em;
    bottom: .18em;
    width: 4px;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--u-green), var(--u-cyan));
}
.bh-u h3.bh-u-h[style*="center"], .bh-u h3.bh-u-h[style*="right"] { padding-left: 0; }
.bh-u h3.bh-u-h[style*="center"]::before, .bh-u h3.bh-u-h[style*="right"]::before { display: none; }

/* marimi, majuscule */
.bh-u .bh-u-xl { font-size: 1.22em; font-weight: 650; line-height: 1.45; color: var(--u-strong); }
.bh-u .bh-u-sm { font-size: .82em; color: var(--u-muted); }
.bh-u .bh-u-up { text-transform: uppercase; letter-spacing: .045em; }

/* culorile din paleta temei */
.bh-u .bh-u-c-green { color: var(--u-green); }
.bh-u .bh-u-c-gold { color: var(--u-gold); }
.bh-u .bh-u-c-red { color: var(--u-red); }
.bh-u .bh-u-c-cyan { color: var(--u-cyan); }
.bh-u .bh-u-c-purple { color: var(--u-purple); }
.bh-u .bh-u-c-muted { color: var(--u-muted); }

/* blocul evidentiat */
.bh-u .bh-u-callout {
    --co: var(--u-green);
    position: relative;
    margin: 0 0 1em;
    padding: .85em 1.1em .85em 1.2em;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--co) 34%, transparent);
    border-left: 4px solid var(--co);
    background:
        radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--co) 16%, transparent), transparent 60%),
        var(--u-tint);
    color: var(--u-text);
}
.bh-u .bh-u-callout--gold { --co: var(--u-gold); }
.bh-u .bh-u-callout--red { --co: var(--u-red); }
.bh-u .bh-u-callout > :last-child { margin-bottom: 0; }

/* etichetele de sectiune (Nou / Reparat / Schimbat / Eliminat / Eveniment) */
.bh-u .bh-u-sec {
    --sc: var(--u-green);
    display: flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    max-width: 100%;
    margin: 1.5em 0 .6em;
    padding: .38em .95em .38em .75em;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 900;
    letter-spacing: .1em;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--sc);
    background: color-mix(in srgb, var(--sc) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--sc) 40%, transparent);
}
.bh-u .bh-u-sec::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sc);
    box-shadow: 0 0 10px var(--sc);
}
.bh-u .bh-u-sec[style*="center"] { margin-left: auto; margin-right: auto; }
.bh-u .bh-u-sec--new { --sc: var(--u-green); }
.bh-u .bh-u-sec--fix { --sc: var(--u-cyan); }
.bh-u .bh-u-sec--change { --sc: var(--u-gold); }
.bh-u .bh-u-sec--removed { --sc: var(--u-red); }
.bh-u .bh-u-sec--event { --sc: var(--u-purple); }
.bh-u .bh-u-sec--fix + ul li::marker, .bh-u .bh-u-sec--fix + ol li::marker { color: var(--u-cyan); }
.bh-u .bh-u-sec--change + ul li::marker, .bh-u .bh-u-sec--change + ol li::marker { color: var(--u-gold); }
.bh-u .bh-u-sec--removed + ul li::marker, .bh-u .bh-u-sec--removed + ol li::marker { color: var(--u-red); }
.bh-u .bh-u-sec--event + ul li::marker, .bh-u .bh-u-sec--event + ol li::marker { color: var(--u-purple); }

/* fara color-mix (browsere vechi): fundal neutru */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .bh-u .bh-u-sec { background: var(--u-tint); border-color: var(--u-edge); }
    .bh-u .bh-u-callout { border-color: var(--u-edge); border-left-color: var(--co); background: var(--u-tint); }
}

/* ---------- 3. pagina unui update ---------- */
.bh-upd-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
}
.bh-upd-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: .86rem; color: var(--g-muted, #8f9d98); }
.bh-upd-head__meta b, .bh-upd-head__meta a { color: var(--g-strong, #fff); font-weight: 800; }
.bh-upd-type {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--g-green-text, #8ff0b8);
    background: var(--g-green-soft, rgba(23, 201, 100, .14));
    border: 1px solid var(--g-green-edge, rgba(23, 201, 100, .38));
}
.bh-upd-head__rate { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: .86rem; }
.bh-upd-body { padding: 26px 30px !important; }
.bh-upd-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--g-line, rgba(255, 255, 255, .06)); }
.bh-upd-tools form { margin: 0; }
.bh-upd-tools .ml-auto { margin-left: auto; }
@media (max-width: 575.98px) {
    .bh-upd-body { padding: 18px 16px !important; }
    .bh-u { font-size: .93rem; }
}

/* lista de update-uri: butonul de postare */
.bh-upd-new {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 11px 18px;
    border-radius: 14px;
    font-weight: 900;
    color: #04130a !important;
    text-decoration: none !important;
    background: linear-gradient(180deg, #3ee08a, var(--g-green-d, #13b653));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 24px -12px rgba(23, 201, 100, .7);
    transition: transform .12s ease, filter .15s ease;
}
.bh-upd-new:hover { filter: brightness(1.06); }
.bh-upd-new:active { transform: translateY(1px); }

/* ---------- 4. push-ul de pe prima pagina ---------- */
.bh-push {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px 16px;
    margin: 0 0 18px;
    padding: 9px 10px 9px 9px;
    border-radius: 999px;
    overflow: hidden;
    isolation: isolate;
    color: var(--g-text, #e6ecea);
    background:
        radial-gradient(80% 220% at 0% 50%, rgba(23, 201, 100, .22), transparent 60%),
        radial-gradient(60% 220% at 100% 50%, rgba(63, 210, 199, .14), transparent 65%),
        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-green-edge, rgba(23, 201, 100, .38));
    box-shadow: var(--g-hi, inset 0 1px 0 rgba(255, 255, 255, .1)), 0 14px 34px -16px rgba(23, 201, 100, .45);
    animation: bhPushIn .55s var(--g-ease, cubic-bezier(.2, .8, .2, 1)) backwards;
}
/* o lumina care trece de doua ori peste banda, apoi se opreste (fara animatie continua) */
.bh-push::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .13) 50%, transparent 65%);
    transform: translateX(-110%);
    animation: bhPushSheen 2.4s ease-in-out .7s 2 backwards;
}
.bh-push__label {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 13px 8px 11px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .11em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
    color: #04130a;
    background: linear-gradient(135deg, #8ff7bd, #17c964 55%, #3fd2c7);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 20px -2px rgba(23, 201, 100, .55);
}
.bh-push__label i { font-size: 1rem; line-height: 1; }
.bh-push__text {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 1.04rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.005em;
    color: var(--g-strong, #fff);
    overflow-wrap: anywhere;
}
.bh-push__text b { font-weight: 900; }
.bh-push__up { text-transform: uppercase; letter-spacing: .05em; font-weight: 900; }
.bh-push__acc { font-weight: 850; color: #4fe6a0; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .bh-push__acc {
        background: linear-gradient(90deg, #6ff0a8, #3fd2c7);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}
.bh-push__btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 999px;
    font-weight: 900;
    font-size: .86rem;
    white-space: nowrap;
    text-decoration: none !important;
    color: #04130a !important;
    background: linear-gradient(180deg, #3ee08a, var(--g-green-d, #13b653));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
    transition: transform .12s ease, filter .15s ease;
}
.bh-push__btn:hover { filter: brightness(1.07); }
.bh-push__btn:active { transform: translateY(1px); }
.bh-push__btn i { transition: transform .15s ease; }
.bh-push__btn:hover i { transform: translateX(2px); }
.bh-push__x {
    flex: none;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    font-size: 1.15rem;
    color: var(--g-muted, #8f9d98);
    background: transparent;
    cursor: pointer;
}
.bh-push__x:hover, .bh-push__x:focus-visible { color: var(--g-strong, #fff); background: var(--g-tint-2, rgba(255, 255, 255, .085)); }
.bh-push__staff {
    flex: none;
    display: inline-flex;
    gap: 2px;
}
.bh-push__staff a, .bh-push__staff button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    font-size: 1rem;
    color: var(--g-muted, #8f9d98) !important;
    background: transparent;
    cursor: pointer;
}
.bh-push__staff a:hover, .bh-push__staff button:hover { color: var(--g-strong, #fff) !important; background: var(--g-tint-2, rgba(255, 255, 255, .085)); }
.bh-push__staff form { margin: 0; display: inline-flex; }

html.bh-glass[data-bh-theme="light"] .bh-push {
    background:
        radial-gradient(80% 220% at 0% 50%, rgba(19, 182, 83, .16), transparent 60%),
        radial-gradient(60% 220% at 100% 50%, rgba(63, 180, 210, .12), transparent 65%),
        linear-gradient(135deg, var(--g-pane-a), var(--g-pane-b));
    box-shadow: var(--g-hi), 0 14px 30px -18px rgba(19, 140, 70, .45);
}
html.bh-glass[data-bh-theme="light"] .bh-push::before { background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .8) 50%, transparent 65%); }
html.bh-glass[data-bh-theme="light"] .bh-push__acc { color: #0b8a43; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    html.bh-glass[data-bh-theme="light"] .bh-push__acc { background: linear-gradient(90deg, #0b8a43, #0b7f77); -webkit-background-clip: text; background-clip: text; }
}

@keyframes bhPushIn {
    from { opacity: 0; transform: translateY(-8px) scale(.985); }
}
@keyframes bhPushSheen {
    0% { transform: translateX(-110%); }
    100% { transform: translateX(110%); }
}

@media (max-width: 767.98px) {
    .bh-push {
        flex-wrap: wrap;
        border-radius: 20px;
        padding: 12px 12px 12px 12px;
        gap: 10px;
    }
    .bh-push__text { flex: 1 1 100%; order: 3; font-size: 1rem; }
    .bh-push__btn { order: 4; flex: 1 1 auto; justify-content: center; }
    .bh-push__label { order: 1; }
    .bh-push__staff { order: 2; margin-left: auto; }
    .bh-push__x { order: 2; margin-left: auto; }
    .bh-push__staff + .bh-push__x { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .bh-push, .bh-push::before { animation: none; }
    .bh-push::before { display: none; }
    .bh-push__btn, .bh-push__btn i { transition: none; }
}