/* ==========================================================================
   Backend Responsive — Panel Propietario
   Mejoras responsive globales para el backend de Livantra (rol owner).
   Se carga después de staycreative.css en master.blade.php.
   ========================================================================== */

/* 1A. Quitar max-width del .container interno dentro de .card-body
   Todas las vistas owner tienen .container dentro de .card-body que
   limita el ancho innecesariamente (ya existe container-xxl en el layout). */
.card-body > .container {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* 1C. Activar layout label/input side-by-side desde tablet (768px)
   El patrón col-lg-4 / col-lg-8 solo actúa a 992px. Esto lo activa a 768px. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .fv-row .row > [class*="col-lg-4"]:first-child {
        width: 33.333%;
        flex: 0 0 auto;
    }
    .fv-row .row > [class*="col-lg-8"] {
        width: 66.667%;
        flex: 0 0 auto;
    }
}

/* ==========================================================================
   Mobile (< 768px)
   ========================================================================== */
@media (max-width: 767.98px) {

    /* 1B. Reducir spacing entre campos */
    .fv-row.mb-10 {
        margin-bottom: 1.25rem !important;
    }

    /* 1D. Reducir padding de radio cards (stay, visibility, cancelation_policy) */
    [data-kt-buttons] .btn.p-6 {
        padding: 1rem !important;
    }
    [data-kt-buttons] .btn h2.fs-3 {
        font-size: 1rem !important;
    }

    /* 1E. Card body padding reducido */
    .card-body {
        padding: 1rem !important;
    }

    /* 1F. Tablas scroll horizontal */
    .table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .power-grid-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 1G. Botón submit sticky en formularios largos */
    .card-body form > button.btn-primary[type="submit"] {
        position: sticky;
        bottom: 0;
        z-index: 10;
        width: 100%;
        border-radius: 0;
        padding: 0.875rem;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
    }
}

/* ==========================================================================
   Extra small (< 576px)
   ========================================================================== */
@media (max-width: 575.98px) {

    /* 1H. Mapa altura reducida en mobile (basics) */
    #map-property {
        height: 250px !important;
    }
}

/* ==========================================================================
   Avatares — evitar distorsion con imagenes rectangulares
   ==========================================================================
   Algunos owners suben logos rectangulares (ej. Dickinson Villas). Sin
   object-fit la imagen se estira para llenar el contenedor y se ve feo.
   Con object-fit:contain la imagen mantiene su aspecto y aparece centrada
   con espacio blanco si hace falta — prefiere mostrar todo el logo aunque
   quede con padding, a recortar parte del texto.
*/

/* Avatares redondos en sidebar/header (Metronic .symbol > img) */
.symbol > img {
    object-fit: contain !important;
    background-color: #f5f5f5;
}

/* Image-input-wrapper del editor de perfil */
.image-input .image-input-wrapper {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-color: #f5f5f5;
}