/**
 * DotOne CRM — Client / Customer portal responsive layer
 */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body.customers {
    overflow-x: clip;
}

body.customers #wrapper,
body.customers #content,
body.customers .container-fluid {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

body.customers img,
body.customers table {
    max-width: 100%;
}

body.customers .table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

body.customers .form-control,
body.customers select.form-control,
body.customers textarea.form-control,
body.customers .bootstrap-select {
    max-width: 100%;
}

/* Tablet landscape — drawer sidebar (match admin breakpoint) */
@media (max-width: 991px) {
    body.customers header,
    body.customers #header {
        left: 0 !important;
        width: 100% !important;
    }

    body.customers .sidebar {
        left: 0 !important;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    body.customers.show-sidebar .sidebar {
        transform: translateX(0) !important;
    }

    body.customers div#wrapper,
    body.customers footer {
        margin-left: 0 !important;
        width: 100% !important;
    }

    body.customers .dotone-saas-account__layout {
        grid-template-columns: 1fr !important;
    }

    body.customers .row > [class*="col-md-"],
    body.customers .row > [class*="col-lg-"] {
        width: 100%;
        float: none;
    }
}

/* Tablet portrait & mobile */
@media (max-width: 767px) {
    body.customers div#wrapper div#content {
        padding: 14px !important;
    }

    body.customers .customer-top-submenu {
        flex-direction: column;
        align-items: stretch;
    }

    body.customers .customer-top-submenu li a {
        width: 100%;
        justify-content: center;
    }

    body.customers .client-quick-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.customers .header-page-title {
        max-width: min(180px, 42vw);
    }

    body.customers .modal-dialog {
        width: calc(100% - 16px) !important;
        margin: 8px auto !important;
    }

    body.customers .modal-body {
        max-height: calc(100dvh - 160px);
        overflow-y: auto;
    }

    body.customers .nav-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    body.customers .nav-tabs > li {
        float: none;
        flex: 0 0 auto;
    }

    body.customers .nav-tabs > li > a {
        white-space: nowrap;
    }
}

@media (max-width: 479px) {
    body.customers .client-quick-actions {
        grid-template-columns: 1fr;
    }

    body.customers .dotone-saas-module-chips {
        grid-template-columns: 1fr;
    }
}