/*
|--------------------------------------------------------------------------
| Mobile Modules Professional V3
|--------------------------------------------------------------------------
| Objetivo:
| - CERO desplazamiento horizontal en vistas administrativas.
| - Nada de comprimir tablas hasta volverlas ilegibles.
| - Listados se convierten en tarjetas modernas en móvil.
| - Formularios y vistas detalle respetan el ancho del teléfono.
|--------------------------------------------------------------------------
*/

@media (max-width: 767.98px) {
    html,
    body {
        width:100%;
        max-width:100%;
        overflow-x:hidden !important;
    }

    .app-shell,
    .main-content,
    .content-area,
    .page-content,
    .content-wrapper,
    .container,
    .container-fluid {
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        overflow-x:hidden !important;
    }

    .content-area {
        padding-left:10px !important;
        padding-right:10px !important;
    }

    .page-header {
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        gap:10px !important;
    }

    .page-header > * {
        width:100%;
        min-width:0;
    }

    .page-header .btn,
    .page-header a.btn,
    .page-header button {
        max-width:100%;
    }

    .topbar {
        max-width:100%;
        overflow:hidden;
    }

    .topbar-left,
    .topbar-right {
        min-width:0;
    }

    .topbar-user {
        max-width:145px;
    }

    .topbar-user-name {
        max-width:95px !important;
    }

    input,
    select,
    textarea,
    .form-control,
    .form-select {
        width:100%;
        max-width:100% !important;
        min-width:0 !important;
    }

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

    .card,
    .table-card,
    .invoice-index-card,
    .sa-panel,
    .box,
    .cardx {
        max-width:100% !important;
        min-width:0 !important;
    }

    /*
    |--------------------------------------------------------------------------
    | FACTURAS
    | Esta vista YA tiene diseño móvil nativo.
    |--------------------------------------------------------------------------
    */
    body.route-invoices-index .invoice-table-wrap {
        display:none !important;
    }

    body.route-invoices-index .invoice-mobile-list {
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:12px !important;
        width:100%;
        max-width:100%;
    }

    body.route-invoices-index .invoice-mobile-item {
        width:100%;
        min-width:0;
        max-width:100%;
    }

    body.route-invoices-index .invoice-search-form {
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:8px !important;
        width:100% !important;
        max-width:100% !important;
    }

    body.route-invoices-index .invoice-search-form .btn {
        width:100%;
    }

    /*
    |--------------------------------------------------------------------------
    | COTIZACIONES
    |--------------------------------------------------------------------------
    */
    body.route-quotations-index .table-responsive {
        overflow:visible !important;
    }

    body.route-quotations-index table {
        display:block !important;
        width:100% !important;
        min-width:0 !important;
    }

    body.route-quotations-index table thead {
        display:none !important;
    }

    body.route-quotations-index table tbody {
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:10px;
    }

    body.route-quotations-index table tr {
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:8px 12px;
        width:100% !important;
        min-width:0 !important;
        padding:14px;
        border:1px solid #e5eaf1;
        border-radius:16px;
        background:#fff;
        box-shadow:0 5px 18px rgba(15,23,42,.045);
    }

    body.route-quotations-index table td {
        display:block !important;
        width:auto !important;
        min-width:0 !important;
        max-width:none !important;
        padding:0 !important;
        border:0 !important;
        white-space:normal !important;
        overflow:visible !important;
        text-overflow:clip !important;
        overflow-wrap:anywhere !important;
    }

    body.route-quotations-index table td:nth-child(1),
    body.route-quotations-index table td:nth-child(2),
    body.route-quotations-index table td:last-child {
        grid-column:1 / -1;
    }

    body.route-quotations-index table td:last-child > div {
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:7px !important;
        width:100%;
    }

    body.route-quotations-index table td:last-child a,
    body.route-quotations-index table td:last-child button,
    body.route-quotations-index table td:last-child form {
        width:100% !important;
    }

    body.route-quotations-index table td:last-child .btn {
        display:flex !important;
        align-items:center;
        justify-content:center;
        min-height:39px;
        width:100% !important;
    }

    body.route-quotations-index form.d-flex {
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:8px !important;
    }

    body.route-quotations-index form.d-flex .btn {
        width:100%;
    }

    /*
    |--------------------------------------------------------------------------
    | PLANTILLAS
    |--------------------------------------------------------------------------
    */
    body.route-invoice-templates-index .table-responsive {
        overflow:visible !important;
    }

    body.route-invoice-templates-index table {
        display:block !important;
        width:100% !important;
        min-width:0 !important;
    }

    body.route-invoice-templates-index table thead {
        display:none !important;
    }

    body.route-invoice-templates-index table tbody {
        display:grid !important;
        gap:10px;
    }

    body.route-invoice-templates-index table tr {
        display:block !important;
        width:100%;
        padding:14px;
        border:1px solid #e5eaf1;
        border-radius:16px;
        background:#fff;
        box-shadow:0 5px 18px rgba(15,23,42,.045);
    }

    body.route-invoice-templates-index table td {
        display:block !important;
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
        padding:5px 0 !important;
        border:0 !important;
        white-space:normal !important;
        overflow:visible !important;
        overflow-wrap:anywhere !important;
    }

    body.route-invoice-templates-index table td:last-child {
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:7px;
        margin-top:7px;
    }

    /*
    |--------------------------------------------------------------------------
    | INFORMES
    |--------------------------------------------------------------------------
    */
    body.route-reports-index .table-responsive {
        overflow:visible !important;
    }

    body.route-reports-index table {
        display:block !important;
        width:100% !important;
        min-width:0 !important;
    }

    body.route-reports-index table thead {
        display:none !important;
    }

    body.route-reports-index table tbody {
        display:grid !important;
        gap:10px;
    }

    body.route-reports-index table tr {
        display:block !important;
        width:100%;
        padding:14px;
        border:1px solid #e5eaf1;
        border-radius:16px;
        background:#fff;
        box-shadow:0 5px 18px rgba(15,23,42,.045);
    }

    body.route-reports-index table td {
        display:block !important;
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
        padding:5px 0 !important;
        border:0 !important;
        white-space:normal !important;
        overflow:visible !important;
        overflow-wrap:anywhere !important;
    }

    body.route-reports-index table td:last-child {
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:7px;
        margin-top:7px;
        text-align:left !important;
    }

    body.route-reports-index table td:last-child .btn,
    body.route-reports-index table td:last-child form {
        width:100% !important;
    }

    /*
    |--------------------------------------------------------------------------
    | SUPERADMIN
    |--------------------------------------------------------------------------
    */
    body.route-superadmin-index .sa-panels {
        grid-template-columns:1fr !important;
    }

    body.route-superadmin-index .sa-table-wrap {
        overflow:visible !important;
    }

    body.route-superadmin-index .sa-table {
        width:100% !important;
        min-width:0 !important;
        table-layout:fixed !important;
    }

    body.route-superadmin-index .sa-table th,
    body.route-superadmin-index .sa-table td {
        white-space:normal !important;
        overflow-wrap:anywhere !important;
    }

    /*
    |--------------------------------------------------------------------------
    | VISTAS DETALLE
    |--------------------------------------------------------------------------
    */
    body.route-invoices-show .table-responsive,
    body.route-quotations-show .table-responsive {
        overflow:visible !important;
    }

    body.route-invoices-show table,
    body.route-quotations-show table {
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
        table-layout:fixed !important;
    }

    body.route-invoices-show table th,
    body.route-invoices-show table td,
    body.route-quotations-show table th,
    body.route-quotations-show table td {
        white-space:normal !important;
        overflow-wrap:anywhere !important;
        word-break:normal !important;
        padding:7px 5px !important;
    }

    /*
    |--------------------------------------------------------------------------
    | FORMULARIOS CREAR / EDITAR
    |--------------------------------------------------------------------------
    */
    body.route-invoices-create .table-responsive,
    body.route-invoices-edit .table-responsive,
    body.route-quotations-create .table-responsive,
    body.route-quotations-edit .table-responsive {
        overflow:visible !important;
    }

    body.route-invoices-create .row,
    body.route-invoices-edit .row,
    body.route-quotations-create .row,
    body.route-quotations-edit .row,
    body.route-admin-users-create .row,
    body.route-admin-users-edit .row,
    body.route-reports-create .row,
    body.route-reports-edit .row {
        max-width:100% !important;
        margin-left:0 !important;
        margin-right:0 !important;
    }

    body.route-invoices-create [class*="col-"],
    body.route-invoices-edit [class*="col-"],
    body.route-quotations-create [class*="col-"],
    body.route-quotations-edit [class*="col-"],
    body.route-admin-users-create [class*="col-"],
    body.route-admin-users-edit [class*="col-"],
    body.route-reports-create [class*="col-"],
    body.route-reports-edit [class*="col-"] {
        min-width:0 !important;
        max-width:100% !important;
    }

    /*
    |--------------------------------------------------------------------------
    | MODALES
    |--------------------------------------------------------------------------
    */
    .modal-dialog {
        width:auto !important;
        max-width:calc(100vw - 20px) !important;
        margin:10px auto !important;
    }

    .modal-content {
        max-width:100%;
        overflow:hidden;
    }
}

@media (max-width: 430px) {
    body.route-quotations-index table tr {
        grid-template-columns:1fr !important;
    }

    body.route-quotations-index table td:last-child > div,
    body.route-invoice-templates-index table td:last-child,
    body.route-reports-index table td:last-child {
        grid-template-columns:1fr !important;
    }

    body.route-admin-users-index table tr,
    body.route-team-index table tr {
        grid-template-columns:46px minmax(0,1fr) !important;
        padding:12px;
        gap:6px 10px;
    }
}