/* ==========================================================================
   AVEBASE DESIGN SYSTEM — COMPONENTS
   Tot ce e vizual vine din tokens.css. Nicio culoare hardcodată aici.
   Convenții:
   - .av-*            = componentele noului design
   - .avebase-ui .x   = re-skin pentru clasele Bootstrap pe care JS-ul
                        existent (select2, modale, etc.) le generează.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Bază & tipografie
   -------------------------------------------------------------------------- */
/* GARDĂ: atributul [hidden] bate ORICE regulă de display din temă —
   altfel reguli ca .input-group{display:flex} ar dezvălui elemente ascunse */
.avebase-ui [hidden] { display: none !important; }

.avebase-ui {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--text-primary);
    background-color: var(--bg-body);
    -webkit-font-smoothing: antialiased;
}

.avebase-ui h1, .avebase-ui h2, .avebase-ui h3,
.avebase-ui .av-h1, .avebase-ui .av-h2, .avebase-ui .av-h3 {
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    color: var(--text-heading);
}
.avebase-ui h1, .avebase-ui .av-h1 { font-size: var(--fs-3xl); }
.avebase-ui h2, .avebase-ui .av-h2 { font-size: var(--fs-2xl); }
.avebase-ui h3, .avebase-ui .av-h3 { font-size: var(--fs-xl); }
.avebase-ui h4, .avebase-ui h5, .avebase-ui h6 {
    font-family: var(--font-body);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
}
@media (min-width: 992px) {
    .avebase-ui h1, .avebase-ui .av-h1 { font-size: var(--fs-4xl); }
}

.avebase-ui a { color: var(--link); text-decoration: none; transition: color var(--transition-fast); }
.avebase-ui a:hover { color: var(--link-hover); }

.av-text-secondary { color: var(--text-secondary) !important; }
.av-text-muted     { color: var(--text-muted) !important; }
.av-text-emerald   { color: var(--color-emerald-deep) !important; }
.av-text-navy      { color: var(--color-navy) !important; }

/* Cuvânt-cheie evidențiat în headline (navy pe light, emerald pe dark/emerald) */
.av-hl { color: var(--color-emerald-deep); }
.av-headline-onyx .av-hl,
.av-on-inverse .av-hl { color: var(--color-emerald); }

/* --------------------------------------------------------------------------
   Butoane
   -------------------------------------------------------------------------- */
.av-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.65rem 1.4rem;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    line-height: 1.3;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color var(--transition-fast), color var(--transition-fast),
                border-color var(--transition-fast), transform var(--transition-fast);
}
.av-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--focus-ring); }
.av-btn:disabled, .av-btn.disabled { opacity: 0.55; pointer-events: none; }

.av-btn--sm { padding: 0.4rem 0.9rem; font-size: var(--fs-sm); border-radius: var(--radius-sm); }
.av-btn--lg { padding: 0.85rem 2rem; font-size: var(--fs-lg); border-radius: var(--radius-lg); }
.av-btn--block { display: flex; width: 100%; }

/* CTA principal — amber, EXCLUSIV pentru acțiuni */
.av-btn--cta {
    background-color: var(--cta-bg);
    color: var(--cta-text);
}
.av-btn--cta:hover { background-color: var(--cta-bg-hover); color: var(--cta-text); }

/* CTA "cutie 3D" — extruzia de cutie din creativele Avebase (AD 1/AD 3/Social 6):
   butonul amber e fața din față a unei cutii văzute izometric; corpul cutiei se
   extinde în spate, spre STÂNGA-SUS, desenat doar din muchii subțiri:
   muchia de sus + muchia din stânga a feței din spate, plus 3 diagonale de colț
   (stânga-sus, dreapta-sus, stânga-jos). Fața amber are și ea contur propriu.
   Geometrie: fața din spate = fața din față translatată cu (-d, -d), d = --bx.
   Folosire: <span class="av-box3d"><button class="av-btn av-btn--cta">…</button></span> */
.av-box3d {
    --bx: 10px;                    /* adâncimea cutiei */
    --bxc: var(--cta-outline);     /* culoarea muchiilor: onyx pe deschis, alb pe închis */
    --bxw: 1.5px;                  /* grosimea muchiilor */
    position: relative;
    display: inline-block;
    padding: var(--bx) 0 0 var(--bx); /* loc pentru extruzia stânga-sus */
}
.av-box3d > .av-btn {
    position: relative;
    z-index: 1;
    border: var(--bxw) solid var(--bxc);
    border-radius: 6px;            /* colțuri aproape drepte, ca în creative */
    transition: transform var(--transition-fast), background-color var(--transition-fast);
}
/* fața din spate: doar muchiile vizibile (sus + stânga) — restul e ocluzat de buton */
.av-box3d::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: var(--bx);
    bottom: var(--bx);
    border-top: var(--bxw) solid var(--bxc);
    border-left: var(--bxw) solid var(--bxc);
    border-top-left-radius: 6px;
    pointer-events: none;
}
/* diagonalele de colț (segmente la 45°, lungime d·√2):
   stânga-sus și stânga-jos ancorate de buton, dreapta-sus de wrapper */
.av-box3d > .av-btn::before,
.av-box3d > .av-btn::after,
.av-box3d::after {
    content: "";
    position: absolute;
    width: calc(var(--bx) * 1.414);
    height: 0;
    border-top: var(--bxw) solid var(--bxc);
    transform: rotate(45deg);
    transform-origin: 0 0;
    pointer-events: none;
    transition: width var(--transition-fast), left var(--transition-fast), top var(--transition-fast);
}
.av-box3d > .av-btn::before {  /* colț stânga-sus: din spate spre față */
    left: calc(-1 * var(--bx));
    top: calc(-1 * var(--bx));
}
.av-box3d > .av-btn::after {   /* colț stânga-jos */
    left: calc(-1 * var(--bx));
    top: calc(100% - var(--bx));
}
.av-box3d::after {             /* colț dreapta-sus (în coordonatele wrapper-ului) */
    left: calc(100% - var(--bx));
    top: 0;
}
/* Hover: capacul se ridică spre privitor (jos-dreapta în proiecția izometrică),
   extruzia crește cu 2px; diagonalele rămân lipite de colțuri */
.av-box3d:hover > .av-btn { transform: translate(2px, 2px); }
.av-box3d:hover > .av-btn::before {
    left: calc(-1 * var(--bx) - 2px);
    top: calc(-1 * var(--bx) - 2px);
    width: calc((var(--bx) + 2px) * 1.414);
}
.av-box3d:hover > .av-btn::after {
    left: calc(-1 * var(--bx) - 2px);
    top: calc(100% - var(--bx) - 2px);
    width: calc((var(--bx) + 2px) * 1.414);
}
.av-box3d:hover::after {
    width: calc((var(--bx) + 2px) * 1.414);
}

/* Pe fundal emerald / dark, muchiile cutiei devin albe (ca în ads) */
.av-on-emerald .av-box3d, .av-on-inverse .av-box3d { --bxc: var(--color-white); }

/* Buton secundar — navy */
.av-btn--primary {
    background-color: var(--btn2-bg);
    color: var(--btn2-text);
}
.av-btn--primary:hover { background-color: var(--btn2-bg-hover); color: var(--btn2-text); }

/* Outline & ghost */
.av-btn--outline {
    background-color: transparent;
    border-color: var(--border-strong);
    color: var(--text-primary);
}
.av-btn--outline:hover { border-color: var(--color-navy); color: var(--color-navy); }
.av-btn--ghost { background-color: transparent; color: var(--link); }
.av-btn--ghost:hover { background-color: var(--bg-subtle); color: var(--link-hover); }
.av-btn--danger { background-color: var(--color-danger); color: var(--color-white); }
.av-btn--danger:hover { background-color: #b73434; color: var(--color-white); }

/* --------------------------------------------------------------------------
   Forme decorative de brand (clapă de cutie, chevron)
   Elemente absolute, doar decorative: aria-hidden="true"
   -------------------------------------------------------------------------- */
.av-deco { position: absolute; pointer-events: none; user-select: none; }

/* Clapa de cutie: dreptunghi rotunjit rotit, emerald-soft pe emerald */
.av-deco--flap {
    width: 220px;
    height: 220px;
    border-radius: var(--radius-2xl);
    background-color: var(--color-emerald-soft);
    transform: rotate(45deg);
    opacity: 0.7;
}

/* Chevron dublu » (de pe coperta brandbook) */
.av-deco--chevron {
    width: 180px;
    height: 180px;
    background-color: var(--color-emerald-soft);
    opacity: 0.7;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M14 10 h18 a6 6 0 0 1 4.6 2.2 L66 50 36.6 87.8 A6 6 0 0 1 32 90 H14 a4 4 0 0 1-3.2-6.5 L37 50 10.8 16.5 A4 4 0 0 1 14 10 Z' fill='%23000'/%3E%3Cpath d='M52 10 h18 a6 6 0 0 1 4.6 2.2 L104 50 74.6 87.8 A6 6 0 0 1 70 90 H52 a4 4 0 0 1-3.2-6.5 L75 50 48.8 16.5 A4 4 0 0 1 52 10 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M14 10 h18 a6 6 0 0 1 4.6 2.2 L66 50 36.6 87.8 A6 6 0 0 1 32 90 H14 a4 4 0 0 1-3.2-6.5 L37 50 10.8 16.5 A4 4 0 0 1 14 10 Z' fill='%23000'/%3E%3Cpath d='M52 10 h18 a6 6 0 0 1 4.6 2.2 L104 50 74.6 87.8 A6 6 0 0 1 70 90 H52 a4 4 0 0 1-3.2-6.5 L75 50 48.8 16.5 A4 4 0 0 1 52 10 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Secțiuni de brand pe care plutesc decorațiunile */
.av-section { position: relative; overflow: hidden; padding: var(--space-8) 0; }
.av-section--emerald { background-color: var(--bg-section-bold); color: var(--text-on-emerald); }
.av-section--emerald-light { background-color: var(--bg-section); }
.av-section--inverse { background-color: var(--bg-inverse); color: var(--text-on-inverse); }
.av-section--inverse h1, .av-section--inverse h2, .av-section--inverse h3 { color: var(--text-on-inverse); }
.av-section--emerald h1, .av-section--emerald h2, .av-section--emerald h3 { color: var(--color-navy); }

/* --------------------------------------------------------------------------
   Carduri
   -------------------------------------------------------------------------- */
.av-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}
.av-card__header {
    padding: var(--space-5) var(--space-5) 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}
.av-card__title {
    font-family: var(--font-heading);
    font-size: var(--fs-xl);
    font-weight: var(--fw-semibold);
    color: var(--text-heading);
    margin: 0;
}
.av-card__body { padding: var(--space-5); }
.av-card--flat { box-shadow: none; }
.av-card--hover { transition: box-shadow var(--transition-base), transform var(--transition-base); }
.av-card--hover:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* Card de statistică (dashboard) */
.av-stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-5);
}
.av-stat__label { font-size: var(--fs-sm); color: var(--text-muted); }
.av-stat__value {
    font-family: var(--font-heading);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-semibold);
    color: var(--text-heading);
}
.av-stat__delta { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.av-stat__delta--up   { color: var(--color-success); }
.av-stat__delta--down { color: var(--color-danger); }

/* --------------------------------------------------------------------------
   Formulare (.av-* + re-skin .form-control/.form-select pt. JS-ul existent)
   -------------------------------------------------------------------------- */
.av-label, .avebase-ui .form-label {
    display: inline-block;
    margin-bottom: var(--space-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
}

.av-input, .av-select, .av-textarea,
.avebase-ui .form-control, .avebase-ui .form-select {
    display: block;
    width: 100%;
    padding: 0.65rem 1rem;
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    color: var(--input-text);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.av-input::placeholder, .av-textarea::placeholder,
.avebase-ui .form-control::placeholder { color: var(--input-placeholder); }
.av-input:focus, .av-select:focus, .av-textarea:focus,
.avebase-ui .form-control:focus, .avebase-ui .form-select:focus {
    outline: none;
    border-color: var(--color-emerald);
    box-shadow: 0 0 0 4px var(--focus-ring);
}
.av-select, .avebase-ui .form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%236e7a72' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.6rem;
}
.av-input--lg, .avebase-ui .form-control-big {
    padding: 0.9rem 1.2rem;
    font-size: var(--fs-lg);
    border-radius: var(--radius-lg);
}

/* --------------------------------------------------------------------------
   FORM-FLOATING (Bootstrap) — re-skin-ul generic de mai sus îi strica
   padding-ul și înălțimea → label-ul se suprapunea peste valoare/placeholder.
   Pattern unic Avebase: label mic gri SUS în interiorul chenarului, valoarea
   sub el. Placeholder-ul e invizibil când există label.
   -------------------------------------------------------------------------- */
.avebase-ui .form-floating > .form-control,
.avebase-ui .form-floating > .form-select {
    height: calc(3.6rem + 2px);
    min-height: calc(3.6rem + 2px);
    padding: 1.65rem 1rem 0.55rem;
    line-height: 1.25;
}
/* label-ul e ÎNTOTDEAUNA mic, sus, în interiorul chenarului — un singur
   pattern, fără stări care să se poată suprapune */
.avebase-ui .form-floating > label {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    height: auto;
    padding: 1rem 1rem 0;
    color: var(--text-muted);
    pointer-events: none;
    transform-origin: 0 0;
    transform: scale(.78) translateY(-0.45rem) translateX(0.18rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 127%;
    opacity: 1;
}
/* placeholder-ul nu se afișează niciodată în floating (label-ul spune deja ce e câmpul) */
.avebase-ui .form-floating > .form-control::placeholder { color: transparent !important; }
/* select2 în form-floating: widget-ul preia padding-ul de floating */
.avebase-ui .form-floating > .select2-container--bootstrap5 .select2-selection {
    min-height: calc(3.6rem + 2px);
    padding-top: 1.55rem;
}
.avebase-ui .form-floating > .select2-container--bootstrap5 ~ label {
    transform: scale(.78) translateY(-0.45rem) translateX(0.18rem);
}

/* --------------------------------------------------------------------------
   INPUT-GROUP (sufixe kg/cm/Lei) — re-skin-ul generic (width:100%) împingea
   addon-ul pe rândul următor. Inputul redevine flexibil, sufixul stă ÎN
   același chenar vizual, fără wrap.
   -------------------------------------------------------------------------- */
.avebase-ui .input-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
}
.avebase-ui .input-group > .form-control,
.avebase-ui .input-group > .form-select,
.avebase-ui .input-group > .form-floating {
    width: 1% !important;
    flex: 1 1 auto;
    min-width: 0;
}
.avebase-ui .input-group > .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.avebase-ui .input-group > .form-floating > .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; width: 100% !important; }
.avebase-ui .input-group-text {
    display: flex;
    align-items: center;
    padding: 0.65rem 0.9rem;
    background-color: var(--bg-subtle);
    border: 1px solid var(--input-border);
    border-left: none;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    white-space: nowrap;
}
.avebase-ui .input-group > .input-group-text:first-child {
    border-left: 1px solid var(--input-border);
    border-right: none;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}
.avebase-ui .input-group > .input-group-text:first-child + .form-control { border-radius: 0 var(--radius-md) var(--radius-md) 0; }

.av-check { display: flex; align-items: center; gap: var(--space-2); }
/* doar checkbox/radio SIMPLE — nu și switch-urile (form-switch are pill propriu) */
.avebase-ui input[type="checkbox"]:not(.form-check-input), .avebase-ui input[type="radio"]:not(.form-check-input) {
    accent-color: var(--color-emerald-dark);
    width: 1.1rem;
    height: 1.1rem;
}
/* checkbox-urile Bootstrap păstrează dimensiunile BS; doar accentul devine emerald */
.avebase-ui .form-check-input:checked {
    background-color: var(--color-emerald-dark);
    border-color: var(--color-emerald-dark);
}
.avebase-ui .form-check-input:focus {
    border-color: var(--color-emerald);
    box-shadow: 0 0 0 3px var(--focus-ring);
}
/* switch-ul: pill-ul Bootstrap, dimensionat corect */
.avebase-ui .form-switch .form-check-input {
    width: 2.5rem;
    height: 1.35rem;
    border-radius: var(--radius-pill);
}

.av-field + .av-field { margin-top: var(--space-4); }
.av-form-hint { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--space-1); }
.av-form-error { font-size: var(--fs-sm); color: var(--color-danger); margin-top: var(--space-1); }

/* --------------------------------------------------------------------------
   Tabele
   -------------------------------------------------------------------------- */
.av-table-wrap {
    background-color: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow-x: auto;
}
.av-table, .avebase-ui .table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
    color: var(--text-primary);
    margin: 0;
}
.av-table thead th, .avebase-ui .table thead th {
    background-color: var(--bg-subtle);
    color: var(--text-secondary);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: var(--fs-xs);
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    white-space: nowrap;
}
.av-table tbody td, .avebase-ui .table tbody td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.av-table tbody tr:last-child td, .avebase-ui .table tbody tr:last-child td { border-bottom: none; }
.av-table tbody tr:hover td, .avebase-ui .table-hover tbody tr:hover td { background-color: var(--bg-subtle); }

/* --------------------------------------------------------------------------
   Badge-uri
   -------------------------------------------------------------------------- */
.av-badge, .avebase-ui .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.3em 0.75em;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    line-height: 1.4;
    background-color: var(--bg-subtle);
    color: var(--text-secondary);
}
.av-badge--success { background-color: var(--color-success-bg); color: var(--color-success); }
.av-badge--danger  { background-color: var(--color-danger-bg);  color: var(--color-danger); }
.av-badge--warning { background-color: var(--color-warning-bg); color: var(--color-warning); }
.av-badge--info    { background-color: var(--color-info-bg);    color: var(--color-info); }
.av-badge--navy    { background-color: var(--color-navy);       color: var(--color-white); }
.av-badge--emerald { background-color: var(--color-emerald);    color: var(--color-onyx); }

/* --------------------------------------------------------------------------
   Alerte
   -------------------------------------------------------------------------- */
.av-alert, .avebase-ui .alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    font-size: var(--fs-sm);
    margin-bottom: var(--space-4);
}
.av-alert--success, .avebase-ui .alert-success { background-color: var(--color-success-bg); border-color: var(--color-success); color: var(--color-success); }
.av-alert--danger,  .avebase-ui .alert-danger  { background-color: var(--color-danger-bg);  border-color: var(--color-danger);  color: var(--color-danger); }
.av-alert--warning, .avebase-ui .alert-warning { background-color: var(--color-warning-bg); border-color: var(--color-warning); color: var(--color-warning); }
.av-alert--info,    .avebase-ui .alert-info    { background-color: var(--color-info-bg);    border-color: var(--color-info);    color: var(--color-info); }

/* Notice „facturi neachitate / sold" — banner Avebase (înlocuiește alertele Metronic vechi) */
.avebase-ui .av-bill-alert {
    display: flex; align-items: center; gap: 16px;
    background: var(--color-warning-bg); border: 1px solid var(--color-warning);
    border-left: 4px solid var(--color-warning);
    border-radius: var(--radius-lg); padding: 14px 18px; margin-bottom: 20px;
}
.avebase-ui .av-bill-alert--danger { background: var(--color-danger-bg); border-color: var(--color-danger); border-left-color: var(--color-danger); }
.avebase-ui .av-bill-alert__icon {
    flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(233,138,21,.16); color: var(--color-amber-dark); font-size: 19px;
}
.avebase-ui .av-bill-alert--danger .av-bill-alert__icon { background: rgba(216,62,72,.14); color: var(--color-danger); }
.avebase-ui .av-bill-alert__body { flex: 1; min-width: 0; }
.avebase-ui .av-bill-alert__body strong { display: block; font-family: var(--font-heading); color: var(--text-heading); font-size: 15px; line-height: 1.3; }
.avebase-ui .av-bill-alert__body span { display: block; font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.avebase-ui .av-bill-alert__body b { color: var(--color-amber-dark); font-family: var(--font-heading); }
.avebase-ui .av-bill-alert__btn {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px;
    background: var(--color-amber-dark); color: #fff !important; border-radius: var(--radius-md);
    font-weight: 700; font-size: 13px; padding: 9px 16px; white-space: nowrap;
}
.avebase-ui .av-bill-alert__btn:hover { background: var(--color-amber); color: #fff !important; }
.avebase-ui .av-bill-alert--danger .av-bill-alert__btn { background: var(--color-danger); }
.avebase-ui .av-bill-alert--danger .av-bill-alert__btn:hover { filter: brightness(1.08); }
@media (max-width: 575.98px) {
    .avebase-ui .av-bill-alert { flex-wrap: wrap; }
    .avebase-ui .av-bill-alert__btn { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   Daterangepicker (calendar popup) — temă Avebase. Popup-ul e atașat la <body>
   (care are .avebase-ui), deci scoparea îl prinde și nu afectează UI-ul vechi.
   -------------------------------------------------------------------------- */
.avebase-ui .daterangepicker {
    font-family: var(--font-body, inherit);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 32px rgba(13,13,13,.14);
    padding: 0; overflow: hidden; color: var(--text-primary);
}
.avebase-ui .daterangepicker:before, .avebase-ui .daterangepicker:after { display: none; }
.avebase-ui .daterangepicker .drp-calendar { padding: 12px; max-width: none; }
.avebase-ui .daterangepicker .calendar-table { border: 0; background: transparent; }
.avebase-ui .daterangepicker th, .avebase-ui .daterangepicker td { font-size: 12px; }
.avebase-ui .daterangepicker th.month { font-family: var(--font-heading); font-weight: 700; color: var(--text-heading); font-size: 13px; }
.avebase-ui .daterangepicker th.next span, .avebase-ui .daterangepicker th.prev span { border-color: var(--text-muted); }
.avebase-ui .daterangepicker th.next:hover, .avebase-ui .daterangepicker th.prev:hover { background: var(--color-emerald-light); border-radius: var(--radius-sm, 6px); }
.avebase-ui .daterangepicker td.available { border-radius: 8px; }
.avebase-ui .daterangepicker td.available:hover,
.avebase-ui .daterangepicker th.available:hover { background: var(--color-emerald-light); color: var(--color-emerald-deep); border-radius: 8px; }
.avebase-ui .daterangepicker td.off, .avebase-ui .daterangepicker td.off.in-range, .avebase-ui .daterangepicker td.off.start-date, .avebase-ui .daterangepicker td.off.end-date { color: var(--gray-300); background: transparent; }
.avebase-ui .daterangepicker td.in-range { background: var(--color-emerald-light); color: var(--color-emerald-deep); border-radius: 0; }
.avebase-ui .daterangepicker td.active,
.avebase-ui .daterangepicker td.active:hover { background: var(--color-emerald); color: #fff; border-radius: 8px; }
.avebase-ui .daterangepicker td.start-date { border-radius: 8px 0 0 8px; }
.avebase-ui .daterangepicker td.end-date { border-radius: 0 8px 8px 0; }
.avebase-ui .daterangepicker td.start-date.end-date { border-radius: 8px; }
.avebase-ui .daterangepicker select.monthselect, .avebase-ui .daterangepicker select.yearselect,
.avebase-ui .daterangepicker .hourselect, .avebase-ui .daterangepicker .minuteselect, .avebase-ui .daterangepicker .secondselect, .avebase-ui .daterangepicker .ampmselect {
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm, 6px); padding: 3px 6px; font-size: 12px; background: var(--bg-surface); color: var(--text-primary);
}
.avebase-ui .daterangepicker .drp-buttons { border-top: 1px solid var(--border); padding: 10px 12px; }
.avebase-ui .daterangepicker .drp-selected { font-size: 12px; color: var(--text-muted); }
.avebase-ui .daterangepicker .drp-buttons .btn { font-size: 12.5px; font-weight: 700; border-radius: var(--radius-md); padding: 7px 16px; }
.avebase-ui .daterangepicker .drp-buttons .applyBtn { background: var(--cta-bg); border-color: var(--cta-bg); color: var(--cta-text); }
.avebase-ui .daterangepicker .drp-buttons .applyBtn:hover { background: var(--cta-bg-hover); border-color: var(--cta-bg-hover); }
.avebase-ui .daterangepicker .drp-buttons .cancelBtn { background: var(--bg-surface); border: 1px solid var(--border-strong); color: var(--text-primary); }
.avebase-ui .daterangepicker .drp-buttons .cancelBtn:hover { background: var(--gray-100); }
.avebase-ui .daterangepicker .ranges { padding: 6px; }
.avebase-ui .daterangepicker .ranges li { font-size: 12.5px; border-radius: var(--radius-md); padding: 8px 12px; color: var(--text-primary); }
.avebase-ui .daterangepicker .ranges li:hover { background: var(--color-emerald-light); color: var(--color-emerald-deep); }
.avebase-ui .daterangepicker .ranges li.active { background: var(--color-emerald); color: #fff; }

/* --------------------------------------------------------------------------
   Notice campanie „design nou" (feedback like/dislike + mesaj)
   -------------------------------------------------------------------------- */
.avebase-ui .av-dnotice {
    position: relative;
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    background: linear-gradient(135deg, var(--color-navy) 0%, #0a4f86 70%, var(--color-emerald-deep) 150%);
    color: #fff; border-radius: var(--radius-lg); padding: 16px 44px 16px 18px; margin-bottom: 20px;
}
.avebase-ui .av-dnotice__icon { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; font-size: 19px; color: #fff; }
.avebase-ui .av-dnotice__body { flex: 1; min-width: 220px; }
.avebase-ui .av-dnotice__body strong { display: block; font-family: var(--font-heading); font-size: 15.5px; line-height: 1.3; }
.avebase-ui .av-dnotice__body span { display: block; font-size: 12.5px; color: rgba(255,255,255,.8); margin-top: 2px; }
.avebase-ui .av-dnotice__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.avebase-ui .av-dnotice__vote {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); color: #fff;
    border-radius: var(--radius-md); font-weight: 700; font-size: 13px; padding: 9px 15px; transition: background .12s ease, border-color .12s ease;
}
.avebase-ui .av-dnotice__vote:hover { background: rgba(255,255,255,.22); }
.avebase-ui .av-dnotice__vote.is-active { background: #fff; color: var(--color-navy); border-color: #fff; }
.avebase-ui .av-dnotice__vote.is-active.av-dnotice__vote--up { color: var(--color-emerald-deep); }
.avebase-ui .av-dnotice__vote.is-active.av-dnotice__vote--down { color: var(--color-danger); }
.avebase-ui .av-dnotice__close {
    position: absolute; top: 10px; right: 12px; width: 26px; height: 26px; border: 0; cursor: pointer;
    background: rgba(255,255,255,.12); color: #fff; border-radius: 50%; font-size: 13px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
}
.avebase-ui .av-dnotice__close:hover { background: rgba(255,255,255,.25); }
.avebase-ui .av-dnotice__form { flex-basis: 100%; display: none; gap: 8px; align-items: flex-start; margin-top: 4px; }
.avebase-ui .av-dnotice__form.is-open { display: flex; }
.avebase-ui .av-dnotice__form textarea {
    flex: 1; min-height: 42px; max-height: 120px; resize: vertical; border-radius: var(--radius-md);
    border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.95); color: var(--text-primary);
    font-size: 13px; padding: 9px 12px; font-family: var(--font-body, inherit);
}
.avebase-ui .av-dnotice__form textarea:focus { outline: none; border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.25); }
.avebase-ui .av-dnotice__send {
    flex-shrink: 0; background: var(--cta-bg); color: var(--cta-text) !important; border: 0; cursor: pointer;
    border-radius: var(--radius-md); font-weight: 700; font-size: 13px; padding: 10px 16px; white-space: nowrap;
}
.avebase-ui .av-dnotice__send:hover { background: var(--cta-bg-hover); }
.avebase-ui .av-dnotice__thanks { font-family: var(--font-heading); font-size: 15px; }
@media (max-width: 767.98px) {
    .avebase-ui .av-dnotice { padding: 16px 16px 16px 16px; }
    .avebase-ui .av-dnotice__actions { width: 100%; }
    .avebase-ui .av-dnotice__vote { flex: 1; justify-content: center; }
}

/* --------------------------------------------------------------------------
   Tab-uri (ex. calculatorul: România / Străinătate)
   -------------------------------------------------------------------------- */
.av-tabs {
    display: inline-flex;
    gap: var(--space-1);
    padding: var(--space-1);
    background-color: var(--bg-subtle);
    border-radius: var(--radius-pill);
}
.av-tab {
    padding: 0.5rem 1.25rem;
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
.av-tab:hover { color: var(--text-primary); }
.av-tab.active {
    background-color: var(--color-navy);
    color: var(--color-white);
}

/* --------------------------------------------------------------------------
   Modale (compatibile cu markup-ul Bootstrap pe care îl folosește JS-ul)
   -------------------------------------------------------------------------- */
.avebase-ui .modal-content {
    background-color: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}
.avebase-ui .modal-header {
    border-bottom: 1px solid var(--border);
    padding: var(--space-5);
}
.avebase-ui .modal-title {
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    color: var(--text-heading);
}
.avebase-ui .modal-body { padding: var(--space-5); }
.avebase-ui .modal-footer { border-top: 1px solid var(--border); padding: var(--space-4) var(--space-5); }

/* --------------------------------------------------------------------------
   Select2 re-skin (JS-ul existent îl folosește intens)
   -------------------------------------------------------------------------- */
.avebase-ui .select2-container--default .select2-selection--single,
.avebase-ui .select2-container--bootstrap5 .select2-selection {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-md);
    min-height: 46px;
}
.avebase-ui .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--input-text); line-height: 44px; padding-left: 1rem; }
.avebase-ui .select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px; }
.avebase-ui .select2-dropdown {
    background-color: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    color: var(--text-primary);
}
.avebase-ui .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--color-emerald-light);
    color: var(--text-primary);
}
.avebase-ui .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   Hover butoane — specificitate întărită ca să bată hover-ul generic de link
   (.avebase-ui a:hover ar colora în navy textul CTA-urilor <a>).
   Varianta A: pe amber, hover = fundal amber închis + text/icon ALB, peste tot.
   -------------------------------------------------------------------------- */
.avebase-ui .av-btn--cta, .avebase-ui .av-btn--cta:hover, .avebase-ui .av-btn--cta:focus {
    color: var(--cta-text);
}
.avebase-ui .av-btn--cta:hover { background-color: var(--cta-bg-hover); }
.avebase-ui .av-btn--primary, .avebase-ui .av-btn--primary:hover, .avebase-ui .av-btn--primary:focus {
    color: var(--btn2-text);
}
.avebase-ui .av-btn--primary:hover { background-color: var(--btn2-bg-hover); }
.avebase-ui .av-btn--outline:hover { border-color: var(--color-navy); color: var(--color-navy); }
.avebase-ui .av-btn--ghost:hover { background-color: var(--bg-subtle); color: var(--link-hover); }
.avebase-ui .av-btn--danger, .avebase-ui .av-btn--danger:hover { color: var(--color-white); }
.avebase-ui .av-btn--danger:hover { background-color: #b73434; }

/* --------------------------------------------------------------------------
   Utilitare de dimensiune Metronic folosite de template-urile existente
   (h-20px etc. nu există în Bootstrap vanilla — fără ele imaginile de steag
   se randează la dimensiune naturală)
   -------------------------------------------------------------------------- */
.avebase-ui .h-15px { height: 15px !important; }
.avebase-ui .h-20px { height: 20px !important; }
.avebase-ui .h-25px { height: 25px !important; }
.avebase-ui .h-30px { height: 30px !important; }
.avebase-ui .h-40px { height: 40px !important; }
.avebase-ui .h-50px { height: 50px !important; }
.avebase-ui .w-20px { width: 20px !important; }
.avebase-ui .w-30px { width: 30px !important; }

/* Siguranță: orice imagine din select2 (selection sau dropdown) limitată la rând */
.avebase-ui .select2-selection img,
.avebase-ui .select2-results img,
.avebase-ui .select2-dropdown img {
    max-height: 22px !important;
    max-width: 22px !important;
    vertical-align: middle;
    margin-right: 6px;
    object-fit: cover;
}

/* --------------------------------------------------------------------------
   Indicator de loading pe butoane (pattern-ul Metronic folosit de JS-ul
   existent: data-kt-indicator="on" comută label <-> progress)
   -------------------------------------------------------------------------- */
.avebase-ui .indicator-progress { display: none; }
.avebase-ui [data-kt-indicator="on"] .indicator-label { display: none; }
.avebase-ui [data-kt-indicator="on"] .indicator-progress { display: inline-block; }

/* --------------------------------------------------------------------------
   Diverse
   -------------------------------------------------------------------------- */
.av-divider { border: none; border-top: 1px solid var(--border); margin: var(--space-5) 0; }

.av-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-pill);
    background-color: var(--color-emerald-light);
    color: var(--color-emerald-deep);
    font-weight: var(--fw-bold);
    overflow: hidden;
}
.av-avatar img { width: 100%; height: 100%; object-fit: cover; }

.av-skeleton {
    background: linear-gradient(90deg, var(--bg-subtle) 25%, var(--gray-100) 50%, var(--bg-subtle) 75%);
    background-size: 200% 100%;
    animation: av-skeleton 1.4s infinite;
    border-radius: var(--radius-sm);
}
@keyframes av-skeleton { to { background-position: -200% 0; } }