/* =====================================================================
   reports_responsive.css
   CSS suplimentar pentru reports_embed.php
   Foloseste EXACT clasele existente din modul:
     .left_reportfilter (coloana filtre), .delimiter_reportfilter (spatiu),
     .center_reportfilter (coloana rezultate), .technology/.thelanguage
     (accordion filtre), #nomdata (tabel DataTables), .buttonwrapper,
     .encart, .params ...
   Nu modifica logica; doar adauga reguli responsive.
   Se include dupa CSS-ul DataTables / dupa <style>-ul din pagina.
   ===================================================================== */

/* ---- Containere fluide ---- */
#container,
#content,
#main {
    max-width: 100%;
    box-sizing: border-box;
}

/* tabelul de rezultate cu scroll orizontal daca e cazul, nu rupe layout */
.center_reportfilter #main,
.center_reportfilter {
    max-width: 100%;
    box-sizing: border-box;
}

table.display,
table#nomdata {
    width: 100% !important;
    table-layout: auto;
}

table.display tbody td {
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* linkurile catre documente nu forteaza latime */
#nomdata a,
.thelanguage label {
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* chips-urile cu filtre selectate (years_selected etc) sa curga pe randuri */
.buttonwrapper,
.buttonwrapper .encart,
.buttonwrapper .params {
    max-width: 100%;
    box-sizing: border-box;
}
.buttonwrapper .encart {
    float: none !important;
    display: inline-block;
    vertical-align: top;
}

/* butonul "Filtre" (injectat de JS) - vizibil INTOTDEAUNA, sus si centrat */
#mobileFilterToggle {
    display: block;
    width: 100%;
    max-width: 320px;
    padding: 12px;
    margin: 0 auto 14px auto;   /* centrat orizontal */
    background: rgba(85,78,122,1);
    color: #fff;
    border: none;
    font: normal 16px 'Open Sans', Arial, sans-serif;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
}
#mobileFilterToggle:after {
    content: " \25BC";          /* sageata jos, langa text */
}
#mobileFilterToggle.open:after {
    content: " \25B2";          /* sageata sus */
}

/* coloana de filtre: ascunsa implicit PESTE TOT; se deschide din buton */
.left_reportfilter {
    display: none !important;
}
/* cand se deschide: bloc pe TOATA latimea, DEASUPRA rezultatelor */
.left_reportfilter.mobile-open {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 18px 0 !important;
    border: 1px solid #ccc;
    padding: 12px !important;
    box-sizing: border-box;
    float: none !important;
}

/* layout-ul e un tabel cu 3 celule (filtre | spatiu | rezultate) pe acelasi rand.
   Le stivuim ca blocuri: filtrele (cand deschise) sus 100%, rezultatele dedesubt 100%.
   ATENTIE: NU punem display pe .left_reportfilter aici, ca sa nu anulam
   ascunderea implicita; afisarea ei e controlata doar de .mobile-open. */
.delimiter_reportfilter,
.center_reportfilter {
    display: block !important;
    width: 100% !important;
    float: none !important;
    box-sizing: border-box;
}
.left_reportfilter {
    width: 100% !important;
    float: none !important;
    box-sizing: border-box;
}

/* delimitatorul de 40px nu mai are sens cand sunt stivuite */
.delimiter_reportfilter {
    display: none !important;
}

/* rezultatele pe toata latimea */
.center_reportfilter {
    width: 100% !important;
}

/* imaginea spacer de 200px din coloana filtre - inutila acum */
.left_reportfilter img[src*="vid.gif"] {
    display: none;
}

/* filtrele dispuse pe randuri ca sa umple latimea (accordion full width) */
.left_reportfilter table {
    width: 100% !important;
}

/* =====================================================================
   TABLETE  (<= 1024px)
   ===================================================================== */
@media (max-width: 1024px) {
    .technology,
    .openlanguage,
    .closedlanguage {
        font-size: 15px !important;
    }
}

/* =====================================================================
   MOBIL  (<= 768px)
   Layout-ul e un tabel cu 3 celule (filtre | spatiu | rezultate).
   Le facem sa se stivuiasca: filtrele sus, rezultatele jos.
   ===================================================================== */
@media (max-width: 768px) {

    /* tabelul-container de layout devine bloc (rezultatele pe latime completa).
       NU includem .left_reportfilter ca sa nu anulam ascunderea implicita;
       afisarea ei e controlata doar de .mobile-open. */
    .delimiter_reportfilter,
    .center_reportfilter {
        display: block !important;
        width: 100% !important;
        float: none !important;
        box-sizing: border-box;
    }

    /* facem ca celula de rezultate sa nu aiba padding lateral mare */
    .center_reportfilter {
        padding: 0 !important;
    }

    /* delimitatorul de 40px nu are sens pe mobil */
    .delimiter_reportfilter {
        display: none !important;
    }

    /* #mobileFilterToggle deja full pe mobil din regula globala */

    /* imaginea spacer de 200px din coloana filtre - inutila pe mobil */
    .left_reportfilter img[src*="vid.gif"] {
        display: none;
    }

    /* headerele accordionului de filtre */
    .technology,
    .openlanguage,
    .closedlanguage {
        font-size: 15px !important;
        padding: 10px !important;
    }

    /* checkbox-urile de filtru: mai mari pentru atingere */
    .thelanguage input[type="checkbox"] {
        width: 18px;
        height: 18px;
        vertical-align: middle;
    }
    .thelanguage label {
        font-size: 14px !important;
        line-height: 26px;
    }

    /* tabelele interne de filtre pe latime completa */
    .left_reportfilter table {
        width: 100% !important;
    }

    /* zona titlu / link "vezi arhiva" */
    .bg56 {
        text-align: left !important;
        font-size: 14px;
    }

    /* DataTables: paginare + info stivuite */
    .dataTables_length,
    .dataTables_info,
    .dataTables_paginate,
    .dataTables_filter {
        float: none !important;
        text-align: left !important;
        width: 100%;
        margin: 6px 0;
        box-sizing: border-box;
    }
    .dataTables_filter input {
        width: 100% !important;
        box-sizing: border-box;
        margin: 4px 0;
    }
    .dataTables_paginate .fg-button,
    .dataTables_paginate .paginate_button {
        padding: 6px 10px;
        display: inline-block;
    }

    table.display tbody td {
        font-size: 13px;
        padding: 8px 6px;
    }
}

/* =====================================================================
   MOBIL MIC  (<= 480px)
   ===================================================================== */
@media (max-width: 480px) {
    .technology,
    .openlanguage,
    .closedlanguage {
        font-size: 14px !important;
    }
    .thelanguage label {
        font-size: 13px !important;
    }
    table.display tbody td {
        font-size: 12px;
    }
    #mobileFilterToggle {
        font-size: 15px;
        padding: 10px;
    }
}