@media (max-width: 1400px) {
    .form-adauga-proiect .form-left .grid-col3 {grid-template-columns: repeat(2, 1fr);}
}


@media (max-width: 1200px) {
    .grid-col4 {grid-template-columns: repeat(3, 1fr);}
    .form-adauga-proiect .grid-col2 {grid-template-columns: repeat(1, 1fr);}
    .modal-dialog {width: calc(100% - 100px);}
    .popover {top: 114px; right: 41px;}
} /* end 1200px */


@media (max-width: 992px) {
    .grid-col4 {grid-template-columns: repeat(2, 1fr);}
    .grid-col3 {grid-template-columns: repeat(2, 1fr);}
    .modal-800 .modal-dialog {width: calc(100% - 40px); margin: 20px auto;}
   
} /* end 992px */


@media (max-width: 768px) {
    .modal-dialog {width: calc(100% - 30px);}
    .app-header-fixed .app-header {background: var(--menu);}
    .navbar-header {width: 100%;}

    .collapse.pos-rlt.navbar-collapse.box-shadow.bg-white-only {
        margin-top: 0; padding: 15px 15px 0px 15px !important;
    }
    /* Sigla din bara de sus: bara fixa are 50px, dar brandul mostenea margin-top:15px din
       app1.css, asa ca sigla cobora si cuvantul "DUVIANA" ramanea sub bara. O ridicam,
       o centram pe verticala si ii limitam inaltimea ca sa incapa intreaga in bara.
       Latimea vine inline din setari (logo_header_width), deci trebuie suprascrisa cu !important. */
    .navbar-brand.text-lt {
        height: 50px !important;
        display: flex;
        align-items: center;
        line-height: 1;
        padding: 0 0 0 12px;
        margin: 0;
    }
    .navbar-brand.text-lt img {
        width: auto !important;
        height: auto !important;
        max-width: 132px;
        max-height: 40px;
        margin: 0;
    }
    .navbar-header > button > i {
        font-size: 26px;
        color: var(--mov);
        margin: 5px 0 0 0;
    }

    /* ---- antetul de pe telefon: o bandă mai înaltă, cu totul centrat pe verticală ----
       Avea exact 50px, cât `.navbar-brand.text-lt` și `.navbar-header > button`, iar sigla și
       cele patru butoane stăteau înghesuite în ea, fiecare cu propriul `padding-top` ca să
       ajungă pe aceeași linie. Acum banda are 66px, iar fiecare copil e la fel de înalt cât ea
       și își centrează singur desenul — nu mai există decalaje de reglat la fiecare buton.
       Înălțimea reală o măsoară js/perp/menu-hover.js în `--mt-header`, de unde o iau meniul
       de pe telefon și bara „Acces rapid"; nu e scrisă fix nicăieri. */
    .app-header .navbar-header { min-height: 66px; }
    .navbar-brand.text-lt { height: 66px !important; padding-left: 14px; }
    .navbar-brand.text-lt img { max-height: 46px; max-width: 150px; }
    .navbar-header > button,
    .navbar-header > a.nav-bell-m {
        height: 66px;
        display: flex; align-items: center; justify-content: center;
        padding-top: 0; padding-bottom: 0;
    }
    .navbar-header > button > i { margin: 0; }
    /* desenele nu mai au nevoie de împinsul de 5px de dinainte: le centrează butonul */
    .navbar-header .nav-bell-m .nav-svg-bell,
    .navbar-header .nav-mic-btn .nav-svg-mic { margin-top: 0; }
    /* cifra notificărilor rămâne în colțul din dreapta-sus al clopoțelului, acum coborât */
    .nav-bell-m .nav-notif-badge { top: 15px; right: 2px; }

    /* Butonul de meniu: desenul propriu (img/ui/hamburger.svg). Imagine de fundal, nu mască:
       are culorile lui — barele turcoaz și bulina roșie din siglă. */
    .nav-ico-menu {
        display: block; width: 32px; height: 19px; /* raportul desenului: 187x110 */
        background: url('../img/ui/hamburger.svg') center / contain no-repeat;
    }
    .app-aside.hidden-xs.bg-dark.collapse.show {
		position: fixed;
		top: 30px;
		bottom: 0;
		z-index: 1010;
		display: block !important;
		width: 75%;
		overflow-x: hidden;
		overflow-y: auto;
		visibility: visible;
	}

    .header-h1 {
        height: initial;
        padding: 80px 0 25px 0;
    }

    .tabul {margin: 0 0 20px 0;}

    /* Fișa fără titlu de pagină (taburile „Dashboard" și „Date publice", care au antetul
       firmei): nimic nu mai coboară conținutul sub bara de sus, care e `position: fixed` —
       o făcea `padding: 80px` de pe `.header-h1`. Înălțimea reală o scrie
       `js/perp/menu-hover.js` în `--mt-header`; 66px e valoarea măsurată, doar ca plasă dacă
       scriptul n-a rulat.
       ⚠️ Scrisă cu două clase și DUPĂ `.tabul`: regula de mai sus e `margin` prescurtat, deci
       ar fi readus `margin-top: 0` — aceeași specificitate, dar mai jos în fișier. */
    .tabul.fisa-sub-bara, .alert.fisa-sub-bara { margin-top: var(--mt-header, 66px); }
    .tabel-flex {border: 0; border-radius: 0px;}
    .tfl-header {display: none !important;}
    .tabel-flex-linie {
        position: relative;
        flex-wrap: wrap;
        border: 1px solid #d0d4e4;
        border-radius: 10px;
        padding: 10px;
        margin: 0 0 15px 0;
        overflow: hidden;
    }
    .tabel-flex-linie > span {
        flex: initial !important;
        flex-direction: column;
        align-items: start;
        width: 100% !important;
        border: 0;
        padding: 0;
        margin: 0 0 15px 0;
        order: 30;
        overflow: visible;
        white-space: normal;
    }
    .titlu-mob {
        display: block; width: 100%;
        font: 500 11px / 1 encode;
        text-transform: uppercase;
        margin: 0 0 4px 0;
        color: #89a0b4;
    }
    .tabel-flex-linie > span.span-nr {
        position: absolute; top: 0; right: 0;
        width: initial !important; min-width: 25px;
        justify-content: center; align-items: center;
        text-align: center;
        border-left: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        border-radius: 0 0 0 5px;
        padding: 5px;
        background: antiquewhite;
    }
    .tabel-flex-linie > span.gol {display: none;}
    .gol {display: none !important;}

    .but-icon-fara-text {height: 28px;}
    .but-icon-fara-text span {display: none;}

    .filtru-produse {flex-direction: column;}
    .filtru-produse .form-grup {margin: 0 0 15px 0;}

    
    .grid-col4 {grid-template-columns: repeat(1, 1fr);}
    .grid-col3 {grid-template-columns: repeat(1, 1fr);}
    .grid-col2 {grid-template-columns: repeat(1, 1fr);}

    .dashboard-cards {gap: 20px;}

    .status-culoare {width: 100%; margin: 0 0 5px 0;}
    .mesaj-predefinit , .mesaj-mare {
        width: 100%;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 10px;
    }
    .span2, .span3 {grid-column: initial;}

    .tabel-flex-linie > span.span-task {position: static; grid-column: 1/-1;}

    .tabel-flex-linie > span.span-client {grid-column: 1/-1;}
    .tabel-flex-linie > span.span-tasknr .titlu-mob {
        display: inline-flex; width: initial;
        margin: 0 5px 0 0;
    }
    .tabel-flex .tabel-flex-linie > span:last-of-type {margin: 0;}

    .tabel-balanta .tabel-flex-linie, 
    .grid-col2-mob {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0 20px;
    }
    .paginatie li a {
        height: 28px;
        font: 500 14px/1 encode;
        padding: 0px 7px; margin: 0;
    }
    .paginatie li a .mso {font-size: 20px;}
    .tabel-flex .tabel-flex-linie > span.span-edit-delete {flex-direction: row;}
    .form-grup:first-of-type {margin: 0 0 15px 0;}

    .but-icon-adauga {margin: 15px 0;}
    .but-icon-adauga + .but-icon-adauga {margin: 0 0 15px 0;}

    .but-adauga-absolute {
        position: static;
        border-radius: 10px;
        margin: 0 0 15px 0;
    }
    .reset-export {position: static; margin: 15px 0 0 0;}
    .flex-direction-row {flex-direction: row !important;}
    .flex-direction-row .titlu-mob {width: initial; margin: 0 7px 0 0;}
    .form-adauga-proiect .form-left .grid-col3 {grid-template-columns: repeat(1, 1fr);}
    .form-cu-data {padding: 0;}

    .termen-depasit {left: initial; right: -24px; z-index: 1;}
    .termen-depasit:before {
        font: 600 80px/1 var(--mso);
        margin: 0;
        opacity: 0.2;
    }

    .total-partial {
        border-radius: 5px; border: 0;
        margin: 0 0 15px 0; padding: 10px 15px;
    }

    .tema-dark .tabel-flex .tabel-flex-linie {border-color: var(--tabel-border-dark);}

    .form-adauga h3 .but-icon-adauga {
        position: static;
        margin: 10px 0 !important;
        width: 100%;
    }
    .culoare .material-symbols-outlined {top: -5px; left: 200px; font-size: 26px;}

    .tabel-totaluri {background: none;}
    .tabel-totaluri .tabel-flex-linie {background: #ccfbdd;}

    .buzunar-tabel {margin-top: -30px; padding-top: 30px;}
    .tabel-flex-linie:hover {background: #fff;}
    .tabel-flex-linie:last-child {border-bottom: 1px solid #ccc;}
    .modal-report-user h3 {font-size: 26px;}
    .mob {display: block;}
    .tabel-flex h4 {
        font: 700 14px/1.2 encode;
        padding: 0; margin: 0;
        border: 0;
    }

    .tabel-flex-linie .span-price-ron {flex-direction: row;}

    .dash-costuri {
        display: block;
        padding: 0; border: 0; border-radius: 0;
    }
    .dash-costuri .but {width: 100%; margin: 0 0 10px 0;}
    .dash-costuri h4 {width: 100%;}
    .dash-costuri label {width: 100%;}
    #preferencesform, #preferencesformcosts {display: block;}
    .bootstrap-switch {margin: 10px 0;}
    .interceptor-news .but-icon-adauga {top: -15px;}
    .input-okay {width: 100px;}

    .ips-grid2 .text-right {text-align: left !important; margin: 0 0 10px 0;}
    .ips-grid2 .text-right a {margin: 5px 0;}

    .span-ok .titlu-mob br {display: none;}
    .token p {padding: 0 0 10px 0;}
    .token strong {display: block; padding: 0 0 0 30px;}
    .tok-linie span {width: calc(100% - 30px);}

    .nav-pills {display: block;  border-bottom:0;}
    .nav-pills .nav-item {display: inline-block;}
    .nav-pills .nav-link {
        border-radius: 5px;
        border-bottom-color: #ccc;
        margin: 0 3px 5px 0;
    }

    .butoane-sus > div {display: inline-flex; flex-wrap: wrap; align-items: center;}
    .butoane-sus .text-right {text-align: left !important;}

    .header-print span {
        margin: 0;
        font-family: ubuntu700;
        font-size: 40px;
        line-height: 1;
        text-align: left;
        float: none;
    }
    #myElementId {margin: 0px;}
    .title-oferta {
        font-size: 30px;
        margin: 80px 0 0 0;
        text-align: left !important;
    }

    .legenda-sus-dr {position: static; margin: 0 0 20px 0;}
    .legenda-sus-dr em {margin: 0 10px 0 0;}
    .cu-sageata {padding: 0;}

    .div-reset {padding: 0 0 15px 0;}
    .mesajul {
        margin: -20px 0 20px 0;
        border-radius: 0px 0px 10px 10px;
    }
    .form-grup.text-right {text-align: left !important;}

    .caseta-login {width: 100%; border-radius: 0;}
    .pagina-login .sigla-ccf {display: block;}

    .modal-full {margin: 20px auto; max-width: calc(100% - 30px);}

    .modal-mesaj-interceptor .modal-header {padding: 10px 20px;}
    .modal-mesaj-interceptor .modal-body {padding: 20px;}
    .modal-mesaj-interceptor .modal-footer {padding: 10px 20px;}
    h4.modal-title {font-size: 18px;}
    textarea { min-height: 100px;}
    .total-fara-tva {margin: 0 0 10px 0;}
    .buttons-three {text-align: left !important;}

    .tabel-flex .listing-messages {padding: 0px !important;}
    .text-cu-scroll {max-height: 300px;}

    .tabel-structura-meniu {margin: 0;}
    .categorychoose {margin-right: 0;}
    .nivel-0 {padding: 17px 0;}
    .nivel-1 {margin-left: 20px;}
    .nivel-2 {margin-left: 40px;}
    .nivel-3 {margin-left: 60px;}

    .meniu-alege > div {padding: 7px;}
    .ma-buton .but {width: 100%;}
    .contactperson-information {margin: 0 0 20px 0 !important;}
    .modal-dialog[style="width: 800px;"] {width: calc(100% - 15px) !important;}
 

} /* end 768px */

@media (max-width: 576px) {
    .app-content-body {padding: 0 0px 50px 0px;}
    .tabul {border-radius: 0;}

    /* Notificări — coloane mai mici pe mobile */
    .notificarea {
        grid-template-columns: 34px 1fr auto;
        gap: 0 9px;
        padding: 9px 10px 9px 9px;
    }
    .notif-icon-wrap { width: 32px; height: 32px; }
    .notif-icon-wrap .mso { font-size: 17px !important; }
    .notif-right { min-width: 58px; }
    .notif-badge-tip { font-size: 9px; padding: 1px 5px; }
    .notif-sender { display: none; }
}

/* footer-in-flux — Pe telefon footer-ul NU mai sta peste pagina.
   Pe desktop (app1.css) e `position: absolute; bottom: 0` cu `z-index: 1005`, iar continutul ii
   rezerva un spatiu FIX de 50px (`padding-bottom` pe `.app-content-body`). Pe telefon textul
   footer-ului se rupe pe doua randuri (64px) sau mai multe (ecrane inguste, font marit din
   setarile telefonului), deci acoperea ultimul rand al paginii — in fisa clientului, butonul
   „Salveaza". Aici footer-ul curge dupa continut, oricat de inalt ar fi, iar pe paginile scurte
   ramane lipit de marginea de jos: `.app` e coloana flex, iar continutul ia tot spatiul liber.
   Doar sub 768px: acolo bara laterala e ascunsa (`hidden-xs`) sau deschisa ca strat fix
   (`.off-screen`), deci nu intra in coloana; de la 768px in sus ea e in pagina si layout-ul ramane
   cel vechi. */
@media (max-width: 767px) {
    .app {display: flex; flex-direction: column;}
    .app > .app-content {flex: 1 0 auto;}
    .app > .app-footer {position: relative; flex: 0 0 auto;}
    .app .app-content-body {padding-bottom: 20px;}
}