/* =========================================================
   INVESTITIONAL - PORTOFOLII PROTEJATE
   LAYOUT FINAL 2 COLOANE
   DESIGN EVOLUTIE CONFIRMAT PRIN DOM
   30 AUGUST 2026

   PUBLICUL NU ESTE ATINS.

   STRUCTURA CONFIRMATA:

   .inv-stock-portfolio
       .mod-abstockportfolio
       .inv-portfolio-evolution
           .inv-evolution-title
           .inv-evolution-tabs
           .inv-evolution-chart
           .inv-evolution-summary
           .inv-methodology-toggle
           .inv-methodology-text
   ========================================================= */


:root{
    --inv-protected-gold:#D4AF37;
    --inv-protected-gold-dark:#B88A23;

    --inv-protected-black:#111111;
    --inv-protected-black-soft:#191919;

    --inv-protected-text:#292929;

    --inv-protected-bg:#F7F5EF;
    --inv-protected-white:#FFFFFF;

    --inv-protected-border:#D8D1C1;

    --inv-protected-green:#168A38;
    --inv-protected-red:#C92A2A;
}


/* =========================================================
   1. PAGINA PROTEJATA - LATIME COMPLETA
   ========================================================= */

body:has(.inv-portfolio-evolution) #sp-component{
    flex:0 0 100% !important;

    width:100% !important;
    max-width:100% !important;
}


body:has(.inv-portfolio-evolution) #sp-left,
body:has(.inv-portfolio-evolution) #sp-right{
    display:none !important;
}


body:has(.inv-portfolio-evolution)
#sp-main-body .container{
    width:100% !important;
    max-width:1380px !important;

    margin-left:auto !important;
    margin-right:auto !important;

    padding-left:24px !important;
    padding-right:24px !important;

    box-sizing:border-box !important;
}


body:has(.inv-portfolio-evolution)
#sp-main-body .container > .row{
    width:100% !important;

    margin-left:0 !important;
    margin-right:0 !important;
}


body:has(.inv-portfolio-evolution)
.com-content-article,

body:has(.inv-portfolio-evolution)
.article-details,

body:has(.inv-portfolio-evolution)
.item-page,

body:has(.inv-portfolio-evolution)
[itemprop="articleBody"]{
    width:100% !important;
    max-width:none !important;
}


/* =========================================================
   2. CONTAINER TABEL + EVOLUTIE
   ========================================================= */

body:has(.inv-portfolio-evolution)
.inv-stock-portfolio{
    display:grid !important;

    grid-template-columns:
        minmax(0, 2fr)
        minmax(310px, 1fr) !important;

    gap:18px !important;

    align-items:start !important;

    width:100% !important;
    max-width:100% !important;

    margin:0 !important;

    padding:14px !important;

    background:var(--inv-protected-bg) !important;

    border:1px solid rgba(30,30,30,.30) !important;
    border-radius:8px !important;

    box-sizing:border-box !important;

    overflow:visible !important;
}


/* =========================================================
   3. MODUL TABEL - STANGA
   ========================================================= */

body:has(.inv-portfolio-evolution)
.inv-stock-portfolio
> .mod-abstockportfolio,

body:has(.inv-portfolio-evolution)
.inv-stock-portfolio
> [class*="mod-abstockportfolio"]{

    grid-column:1 !important;
    grid-row:1 !important;

    width:100% !important;
    max-width:100% !important;

    min-width:0 !important;

    margin:0 !important;
    padding:0 !important;

    box-sizing:border-box !important;
}


body:has(.inv-portfolio-evolution)
.inv-stock-portfolio
> div:empty{
    display:none !important;
}


body:has(.inv-portfolio-evolution)
.inv-stock-portfolio table{
    width:100% !important;
    max-width:100% !important;

    table-layout:fixed !important;

    box-sizing:border-box !important;
}


/* =========================================================
   4. CARD EVOLUTIE - DREAPTA
   ========================================================= */

body:has(.inv-portfolio-evolution)
.inv-stock-portfolio
> .inv-portfolio-evolution{

    grid-column:2 !important;
    grid-row:1 !important;

    align-self:start !important;

    width:100% !important;
    max-width:100% !important;

    min-width:0 !important;

    margin:0 !important;

    padding:0 10px 10px !important;

    background:var(--inv-protected-bg) !important;

    border:1px solid rgba(30,30,30,.34) !important;
    border-radius:7px !important;

    overflow:hidden !important;

    box-sizing:border-box !important;

    box-shadow:none !important;
}


/* =========================================================
   5. HEADER NEGRU EVOLUTIE
   ========================================================= */

body:has(.inv-portfolio-evolution)
.inv-evolution-title{

    display:block !important;

    width:calc(100% + 20px) !important;

    min-height:48px !important;

    margin:
        0
        -10px
        10px !important;

    padding:13px 14px !important;

    background:var(--inv-protected-black) !important;

    color:var(--inv-protected-gold) !important;

    border:0 !important;

    font-size:16px !important;
    line-height:22px !important;

    font-weight:700 !important;

    box-sizing:border-box !important;
}


/* =========================================================
   6. TABURI - 3 SUS + 2 JOS
   ========================================================= */

body:has(.inv-portfolio-evolution)
.inv-evolution-tabs{

    display:grid !important;

    grid-template-columns:
        repeat(3, minmax(0,1fr)) !important;

    gap:6px !important;

    width:100% !important;

    margin:0 0 10px !important;

    padding:0 !important;

    box-sizing:border-box !important;
}


body:has(.inv-portfolio-evolution)
.inv-evolution-tabs button{

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    width:100% !important;
    min-width:0 !important;

    min-height:38px !important;

    margin:0 !important;

    padding:7px 5px !important;

    background:#FFFFFF !important;

    color:#292929 !important;

    border:1px solid #D8D2C7 !important;
    border-radius:4px !important;

    font-size:11px !important;
    line-height:14px !important;

    font-weight:700 !important;

    text-align:center !important;

    box-shadow:none !important;

    box-sizing:border-box !important;

    cursor:pointer !important;
}


/* ACTIV */

body:has(.inv-portfolio-evolution)
.inv-evolution-tabs button.active,

body:has(.inv-portfolio-evolution)
.inv-evolution-tabs button[aria-selected="true"]{

    background:var(--inv-protected-black) !important;

    color:var(--inv-protected-gold) !important;

    border-color:var(--inv-protected-black) !important;
}


/* HOVER */

body:has(.inv-portfolio-evolution)
.inv-evolution-tabs button:hover{

    background:var(--inv-protected-black) !important;

    color:var(--inv-protected-gold) !important;

    border-color:var(--inv-protected-gold) !important;
}


/* =========================================================
   7. SUB-CARD GRAFIC
   ========================================================= */

body:has(.inv-portfolio-evolution)
.inv-evolution-chart{

    display:block !important;

    width:100% !important;

    margin:0 0 10px !important;

    padding:14px 12px 12px !important;

    background:var(--inv-protected-white) !important;

    border:1px solid #E1DDD3 !important;
    border-radius:5px !important;

    box-sizing:border-box !important;

    text-align:center !important;
}


/* cifra principala */

body:has(.inv-portfolio-evolution)
.inv-evolution-chart > strong:first-child{

    display:block !important;

    margin:0 0 4px !important;

    font-size:28px !important;
    line-height:34px !important;

    font-weight:800 !important;
}


/* SVG */

body:has(.inv-portfolio-evolution)
.inv-evolution-chart svg{

    display:block !important;

    width:100% !important;
    max-width:100% !important;

    height:auto !important;

    margin:12px 0 0 !important;

    overflow:visible !important;
}


/* =========================================================
   8. SUMMARY - DOUA CASETE
   ========================================================= */

body:has(.inv-portfolio-evolution)
.inv-evolution-summary{

    display:grid !important;

    grid-template-columns:
        repeat(2, minmax(0,1fr)) !important;

    gap:8px !important;

    width:100% !important;

    margin:0 0 10px !important;

    padding:0 !important;

    box-sizing:border-box !important;
}


/*
   Motorul folosește elemente interne pentru cele două valori.
*/

body:has(.inv-portfolio-evolution)
.inv-evolution-summary > *{

    min-width:0 !important;

    padding:10px 9px !important;

    background:#F0ECE3 !important;

    border-radius:4px !important;

    box-sizing:border-box !important;

    line-height:1.3 !important;
}


/* Valorile */

body:has(.inv-portfolio-evolution)
.inv-evolution-summary strong,

body:has(.inv-portfolio-evolution)
.inv-evolution-summary b{

    display:block !important;

    margin-top:3px !important;

    font-size:15px !important;

    font-weight:800 !important;
}


/* =========================================================
   9. BUTON METODOLOGIE
   ========================================================= */

body:has(.inv-portfolio-evolution)
.inv-methodology-toggle{

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    width:100% !important;

    min-height:38px !important;

    margin:0 !important;

    padding:8px 12px !important;

    background:transparent !important;

    color:#8A6814 !important;

    border:1px solid var(--inv-protected-gold) !important;
    border-radius:4px !important;

    font-size:11px !important;
    line-height:16px !important;

    font-weight:700 !important;

    text-align:center !important;

    cursor:pointer !important;

    box-sizing:border-box !important;

    box-shadow:none !important;
}


body:has(.inv-portfolio-evolution)
.inv-methodology-toggle:hover{

    background:var(--inv-protected-gold) !important;

    color:#111111 !important;
}


/* =========================================================
   10. TEXT METODOLOGIE
   ========================================================= */

body:has(.inv-portfolio-evolution)
.inv-methodology-text{

    width:100% !important;

    margin:10px 0 0 !important;

    padding:12px !important;

    background:#FFFFFF !important;

    border:1px solid #E1DDD3 !important;
    border-radius:4px !important;

    color:var(--inv-protected-text) !important;

    font-size:12px !important;
    line-height:1.5 !important;

    box-sizing:border-box !important;
}


/*
   Respectăm display:none setat de motor când este închis.
*/

body:has(.inv-portfolio-evolution)
.inv-methodology-text[style*="display: none"]{
    display:none !important;
}


/* =========================================================
   11. VALORI VERZI / ROSII
   ========================================================= */

body:has(.inv-portfolio-evolution)
.inv-portfolio-evolution .positive,

body:has(.inv-portfolio-evolution)
.inv-portfolio-evolution .is-positive{
    color:var(--inv-protected-green) !important;
}


body:has(.inv-portfolio-evolution)
.inv-portfolio-evolution .negative,

body:has(.inv-portfolio-evolution)
.inv-portfolio-evolution .is-negative{
    color:var(--inv-protected-red) !important;
}


/* =========================================================
   12. TABLETA / IPAD
   ========================================================= */

@media(max-width:1100px){

    body:has(.inv-portfolio-evolution)
    #sp-main-body .container{

        max-width:100% !important;

        padding-left:16px !important;
        padding-right:16px !important;
    }


    body:has(.inv-portfolio-evolution)
    .inv-stock-portfolio{

        grid-template-columns:
            minmax(0, 2fr)
            minmax(300px, 1fr) !important;

        gap:16px !important;

        padding:12px !important;
    }


    body:has(.inv-portfolio-evolution)
    .inv-evolution-title{

        font-size:15px !important;
    }


    body:has(.inv-portfolio-evolution)
    .inv-evolution-tabs button{

        min-height:36px !important;

        padding:6px 4px !important;

        font-size:10px !important;
    }
}


/* =========================================================
   13. MOBIL
   ========================================================= */

@media(max-width:760px){

    body:has(.inv-portfolio-evolution)
    #sp-main-body .container{

        padding-left:10px !important;
        padding-right:10px !important;
    }


    body:has(.inv-portfolio-evolution)
    .inv-stock-portfolio{

        display:block !important;

        padding:10px !important;
    }


    body:has(.inv-portfolio-evolution)
    .inv-stock-portfolio
    > .inv-portfolio-evolution{

        width:100% !important;

        margin-top:16px !important;
    }


    body:has(.inv-portfolio-evolution)
    .inv-evolution-tabs{

        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;
    }
}

/* =========================================================
   14. FIX COMUN TABEL + EVOLUTIE (2026-09-01)
   Grila apartine continutului articolului, nu articolului complet.
   ========================================================= */

body:has(.inv-portfolio-evolution)
.article-details.inv-stock-portfolio{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    margin:10px 0 !important;
    padding:10px !important;
    background:var(--inv-protected-bg) !important;
    border:0 !important;
    border-radius:0 !important;
    box-sizing:border-box !important;
    overflow:visible !important;
}

body:has(.inv-portfolio-evolution)
.article-details.inv-stock-portfolio
[itemprop="articleBody"]{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
}

body:has(.inv-portfolio-evolution)
.article-details.inv-stock-portfolio
[itemprop="articleBody"] > div:not(.inv-article-like){
    display:grid !important;
    grid-template-columns:minmax(0,2fr) minmax(310px,1fr) !important;
    gap:18px !important;
    align-items:start !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:14px !important;
    background:var(--inv-protected-bg) !important;
    border:1px solid rgba(30,30,30,.30) !important;
    border-radius:8px !important;
    overflow:visible !important;
    box-sizing:border-box !important;
}

body:has(.inv-portfolio-evolution)
.article-details.inv-stock-portfolio
[itemprop="articleBody"] > div:not(.inv-article-like) > .mod-abstockportfolio{
    grid-column:1 !important;
    grid-row:1 !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    overflow-x:auto !important;
    box-sizing:border-box !important;
}

body:has(.inv-portfolio-evolution)
.article-details.inv-stock-portfolio
[itemprop="articleBody"] > div:not(.inv-article-like) > .inv-portfolio-evolution{
    grid-column:2 !important;
    grid-row:1 !important;
    align-self:start !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 10px 10px !important;
    background:var(--inv-protected-bg) !important;
    border:1px solid rgba(30,30,30,.34) !important;
    border-radius:7px !important;
    box-sizing:border-box !important;
}

body:has(.inv-portfolio-evolution)
.inv-evolution-chart{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-height:230px !important;
    overflow:hidden !important;
}

body:has(.inv-portfolio-evolution)
.inv-evolution-chart > div{
    width:100% !important;
}

body:has(.inv-portfolio-evolution)
.inv-evolution-chart svg{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:155px !important;
    margin:8px 0 0 !important;
    overflow:visible !important;
}

@media(max-width:1100px) and (min-width:761px){
    body:has(.inv-portfolio-evolution)
    .article-details.inv-stock-portfolio
    [itemprop="articleBody"] > div:not(.inv-article-like){
        grid-template-columns:minmax(0,2fr) minmax(300px,1fr) !important;
        gap:14px !important;
        padding:12px !important;
    }

    body:has(.inv-portfolio-evolution)
    .inv-evolution-chart{
        min-height:220px !important;
    }
}

@media(max-width:760px){
    body:has(.inv-portfolio-evolution)
    .article-details.inv-stock-portfolio{
        padding:10px !important;
    }

    body:has(.inv-portfolio-evolution)
    .article-details.inv-stock-portfolio
    [itemprop="articleBody"] > div:not(.inv-article-like){
        display:block !important;
        width:100% !important;
        padding:10px !important;
    }

    body:has(.inv-portfolio-evolution)
    .article-details.inv-stock-portfolio
    [itemprop="articleBody"] > div:not(.inv-article-like) > .inv-portfolio-evolution{
        width:100% !important;
        margin-top:16px !important;
    }

    body:has(.inv-portfolio-evolution)
    .inv-evolution-chart{
        min-height:210px !important;
    }

    body:has(.inv-portfolio-evolution)
    .inv-evolution-chart svg{
        height:135px !important;
    }
}