/**
 * Mediometro - Fullwidth Responsive Override
 * Optimized for horizontal computer/laptop screens using 98% of viewport width.
 * Responsive on tablets (orientation-aware) and mobile.
 *
 * Bootstrap 5.3 / Cassiopeia compatible.
 * Loaded by plg_system_fullwidth on every frontend page.
 *
 * @package     Mediometro
 * @version     1.0.0
 * @author      Lic. Joel Salazar Ramirez
 */

/* ========================================
   DESKTOP / LAPTOP (>= 992px) - 98% width
   ======================================== */

@media (min-width: 992px) {
    /* Bootstrap 5 container overrides */
    .container,
    .container-lg,
    .container-xl,
    .container-xxl {
        max-width: 98vw !important;
        width: 98% !important;
        margin-left: auto;
        margin-right: auto;
        padding-left: 1vw;
        padding-right: 1vw;
    }

    /* Cassiopeia template overrides */
    .grid-child.container-component {
        max-width: 98vw !important;
        width: 98% !important;
        margin-left: auto;
        margin-right: auto;
        padding-left: 1vw;
        padding-right: 1vw;
    }

    /* Site grid wrapper */
    .site-grid {
        max-width: 98vw !important;
        width: 98% !important;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Extra-wide screens (>= 1920px) - cap at 1900px for readability */
@media (min-width: 1920px) {
    .container,
    .container-lg,
    .container-xl,
    .container-xxl,
    .grid-child.container-component,
    .site-grid {
        max-width: 1900px !important;
        width: 98% !important;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ========================================
   TABLET LANDSCAPE (992px - 1199px, landscape)
   ======================================== */

@media (min-width: 992px) and (max-width: 1199.98px) and (orientation: landscape) {
    .container,
    .container-lg,
    .container-xl,
    .grid-child.container-component,
    .site-grid {
        max-width: 96vw !important;
        width: 96% !important;
        padding-left: 2vw;
        padding-right: 2vw;
    }
}

/* ========================================
   TABLET PORTRAIT (768px - 991px, portrait)
   ======================================== */

@media (min-width: 768px) and (max-width: 991.98px) and (orientation: portrait) {
    .container,
    .container-md,
    .grid-child.container-component,
    .site-grid {
        max-width: 94vw !important;
        width: 94% !important;
        padding-left: 3vw;
        padding-right: 3vw;
    }
}

/* ========================================
   TABLET LANDSCAPE (768px - 991px, landscape)
   Slightly wider than portrait
   ======================================== */

@media (min-width: 768px) and (max-width: 991.98px) and (orientation: landscape) {
    .container,
    .container-md,
    .grid-child.container-component,
    .site-grid {
        max-width: 96vw !important;
        width: 96% !important;
        padding-left: 2vw;
        padding-right: 2vw;
    }
}

/* ========================================
   MOBILE (< 768px) - Full width
   Bootstrap default handles this, but ensure no horizontal scroll
   ======================================== */

@media (max-width: 767.98px) {
    .container,
    .container-sm,
    .container-md,
    .grid-child.container-component,
    .site-grid {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 4vw;
        padding-right: 4vw;
    }

    /* Prevent horizontal scroll on mobile */
    html,
    body {
        overflow-x: clip;
    }
}

/* ========================================
   COMPONENT-SPECIFIC OVERRIDES
   Ensure dashboards and data views use full width
   ======================================== */

/* Grafos dashboards */
.grafos-impact-dashboard,
.grafos-networks,
.grafos-burst-dashboard,
.grafos-chord-dashboard,
.grafos-credibility-dashboard,
.grafos-emotion-dashboard,
.grafos-echochambers-dashboard,
.grafos-propagation-dashboard,
.grafos-sentiment-dashboard,
.grafos-stackedarea-dashboard,
.grafos-treemap-dashboard,
.grafos-dexradar-dashboard {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
}

/* Mediometro dashboards */
.mediometro-dashboard,
.mediometro-ecografia,
.mediometro-omision,
.mediometro-campo,
.mediometro-radio,
.mediometro-replica,
.mediometro-tirada,
.mediometro-golpeteo {
    width: 100%;
    max-width: 100%;
}

/* Fiscalia dashboards */
.fiscalia-dashboard,
.fiscalia-comparador,
.fiscalia-disarmmap,
.fiscalia-electoral,
.fiscalia-evasion,
.fiscalia-expedientes,
.fiscalia-fondeo,
.fiscalia-incentivos,
.fiscalia-lavado,
.fiscalia-puertasgiratorias,
.fiscalia-rupturas,
.fiscalia-sistematicidad {
    width: 100%;
    max-width: 100%;
}

/* Audiencias */
.audiencias-panel,
.audiencias-concesionaria {
    width: 100%;
    max-width: 100%;
}

/* Historicidad */
.historicidad-timeline,
.historicidad-story,
.historicidad-thematic {
    width: 100%;
    max-width: 100%;
}

/* Manipulacion mediatica */
.manipulacion-dashboard,
.manipulacion-analytics,
.manipulacion-campaigns,
.manipulacion-coverage,
.manipulacion-events,
.manipulacion-geoalerts {
    width: 100%;
    max-width: 100%;
}

/* Geometria */
.geometria-clusters,
.geometria-expediente,
.geometria-field,
.geometria-genealogy,
.geometria-timeline {
    width: 100%;
    max-width: 100%;
}

/* ========================================
   CHART / VISUALIZATION CONTAINERS
   Ensure D3/Chart.js/vis.js visualizations fill width
   ======================================== */

.grafos-impact-dashboard svg,
.grafos-burst-dashboard svg,
.grafos-chord-dashboard svg,
.grafos-credibility-dashboard svg,
.grafos-emotion-dashboard svg,
.grafos-echochambers-dashboard svg,
.grafos-propagation-dashboard svg,
.grafos-sentiment-dashboard svg,
.grafos-stackedarea-dashboard svg,
.grafos-treemap-dashboard svg,
.grafos-dexradar-dashboard svg {
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* Chart containers */
.chart-container,
.d3-chart,
.vis-network,
#network-canvas,
#timeline-canvas,
#chord-canvas,
#treemap-canvas,
#burst-canvas,
#emotion-canvas,
#sentiment-canvas,
#stackedarea-canvas,
#propagation-canvas {
    width: 100% !important;
    max-width: 100% !important;
}

/* ========================================
   CARD GRIDS - Take advantage of wider screen
   ======================================== */

@media (min-width: 1400px) {
    /* Auto-fit grids that benefit from wider screens */
    .mm-tw-grid,
    .network-card-grid,
    .dashboard-card-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    }

    /* 4-column grids on very wide screens */
    .mm-capability-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .mm-tier-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* ========================================
   PRINT - Revert to Bootstrap defaults
   ======================================== */

@media print {
    .container,
    .container-lg,
    .container-xl,
    .container-xxl,
    .grid-child.container-component,
    .site-grid {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}