/*
 * Ajustari responsive peste Dashforge (telefon + tableta/iPad).
 * Incarcat dupa dashforge.css si skin in snippets/header.blade.php. NU se compileaza din Sass:
 * se editeaza direct aici (vezi CLAUDE.md - nu rula npm run production doar pentru asta).
 *
 * Breakpoint-uri Bootstrap 5: <576 telefon, <768 telefon mare, <992 tableta (iPad portrait/landscape mic),
 * >=992 meniul Dashforge este deja desktop.
 */

/* ---------- Baza (toate ecranele) ---------- */

/* nicio pagina nu trebuie sa scrolleze orizontal; tabelele scrolleaza in .table-responsive */
html, body { max-width: 100%; }

img, canvas, video, svg { max-width: 100%; }

/* text lung (email-uri, SKU, URL-uri) nu mai lateste cardurile/modalele */
.modal-body, .popover-body { overflow-wrap: anywhere; }

.table-responsive { -webkit-overflow-scrolling: touch; }

/* select2 nu depaseste containerul */
.select2-container { max-width: 100%; }

/* iOS face zoom automat pe campurile cu font < 16px: pe ecrane tactile le aducem la 16px */
@media (pointer: coarse) {
    input.form-control, select.form-select, textarea.form-control,
    .form-control-sm, .form-select-sm, .select2-search__field {
        font-size: 16px;
    }
    /* tinte de atingere mai late pentru butoanele mici din tabele */
    .btn-xs, .btn-sm { min-height: 32px; }
    .table-dashboard td .btn-xs { min-width: 30px; }
}

/* ---------- Tableta (< 992px) ---------- */
@media (max-width: 991.98px) {
    /* header fix: logo-ul de 200px ocupa prea mult langa burger */
    .navbar-header .navbar-brand img { max-width: 160px; height: auto; }

    /* tab-uri: o singura linie, se deruleaza cu degetul */
    .nav-line, .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .nav-line::-webkit-scrollbar, .nav-tabs::-webkit-scrollbar { display: none; }
    .nav-line .nav-item, .nav-tabs .nav-item { flex: 0 0 auto; }

    /* antete de card cu butoane: se aseaza pe mai multe randuri */
    .card-header.d-flex { flex-wrap: wrap; gap: 8px; }
    .card-header.d-flex > .btn-group, .card-header.d-flex > .d-flex { flex-wrap: wrap; }

    /* bara de unelte / filtre */
    .card-body.d-flex.flex-wrap .mg-l-auto { margin-left: 0 !important; }

    .pagination { flex-wrap: wrap; justify-content: center; }
    .breadcrumb { flex-wrap: wrap; }

    /* modale: ocupa aproape tot ecranul, fara margini mari */
    .modal-dialog:not(.modal-sm) { margin: .75rem auto; max-width: calc(100vw - 1.5rem); }
    .modal-dialog.modal-xl, .modal-dialog.modal-lg { max-width: calc(100vw - 1.5rem); }
}

/* ---------- Telefon (< 768px) ---------- */
@media (max-width: 767.98px) {
    .container { padding-left: 10px !important; padding-right: 10px !important; }

    /* titlul paginii + butoane: unul sub altul, butoanele pe toata latimea */
    .d-sm-flex.align-items-center.justify-content-between > div + div { margin-top: 10px; }
    h4.tx-spacing--1 { font-size: 20px; }

    /* tabele mai compacte */
    .table-dashboard th, .table-dashboard td,
    .table-dashboard-two th, .table-dashboard-two td {
        padding: 8px 10px;
    }
    .table-dashboard th { font-size: 10px; }

    /* carduri: padding mai mic */
    .card-body { padding: 12px; }
    .card-header { padding: 10px 12px; }

    /* butoane din bara de unelte: pot trece pe rand nou, nu se taie */
    .btn { white-space: normal; }
    .btn-group { flex-wrap: wrap; }

    /* dropdown-uri/popover-e nu depasesc ecranul */
    .dropdown-menu, .popover { max-width: calc(100vw - 20px); }
    .dropdown-menu[style*="min-width"], .popover[style*="min-width"] { min-width: 0 !important; }
    .popover { width: calc(100vw - 20px); }

    /* modale: tot ecranul pe latime, butoanele din footer se aseaza frumos */
    .modal-dialog:not(.modal-sm) { margin: .5rem auto; max-width: calc(100vw - 1rem); }
    .modal-footer { flex-wrap: wrap; gap: 6px; }
    .modal-footer > * { margin: 0; }

    /* campuri cu latime fixa inline (style="width: 150px") devin 100% in barele de filtre */
    .form-control[style*="width"]:not([style*="auto"]),
    .form-select[style*="width"]:not([style*="auto"]),
    input.form-control[style*="max-width"]:not(.form-control-color) {
        width: 100% !important;
        max-width: 100% !important;
    }
    .pos-relative:has(> input.form-control[style*="width"]) { width: 100%; }

    /* sectiuni de setari cu max-width: 640px raman la 100% */
    [style*="max-width: 640px"], [style*="max-width: 420px"] { max-width: 100% !important; }

    /* carduri statistice: iconita mai mica */
    .wd-40.ht-40 { width: 34px !important; height: 34px !important; }
}

/* ---------- Telefon mic (< 576px) ---------- */
@media (max-width: 575.98px) {
    /* grupuri de butoane din barele de actiuni: coloana, 100% */
    .card-body.d-flex.flex-wrap > .btn,
    .card-body.d-flex.flex-wrap > .dropdown > .btn { width: 100%; }

    /* bare de filtre: fiecare camp/select pe randul lui */
    .card-body.d-flex.flex-wrap > .form-select,
    .card-body.d-flex.flex-wrap > .form-control,
    .card-body.d-flex.flex-wrap > div > .form-select,
    .card-body.d-flex.flex-wrap > .pos-relative { width: 100% !important; }
    .card-body.d-flex.flex-wrap > .d-flex.mg-l-auto { width: 100%; justify-content: space-between; }

    /* randuri "text la stanga + control la dreapta" (setari): controlul coboara sub text, pe toata latimea */
    .d-flex.justify-content-between:has(> .flex-shrink-0) { flex-wrap: wrap; gap: 8px; }
    .d-flex.justify-content-between > .flex-shrink-0 { margin-left: 0 !important; width: 100%; }
    .d-flex.justify-content-between > .flex-shrink-0 > .form-select,
    .d-flex.justify-content-between > .flex-shrink-0 > .form-control { flex: 1 1 auto; min-width: 0 !important; width: auto !important; }

    /* label + valoare in randuri strans */
    dl.row dt, dl.row dd { width: 100%; }
}

/* ---------- iPad landscape / laptop mic (992-1399px): meniul desktop trebuie sa incapa pe un singur rand ---------- */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .navbar-header .navbar-menu { max-width: none; flex-wrap: nowrap; }
    .navbar-header .navbar-menu .nav-item + .nav-item { margin-left: 14px; }
    .navbar-header .navbar-menu .nav-link { font-size: 13px; white-space: nowrap; }
    .navbar-header .navbar-brand img { max-width: 150px; height: auto; }
}