/* ================================================================
   responsive-modern.css
   Global responsive fixes and modern UI utilities.
   Loaded after solar-overrides.css — all rules are mobile-safe.
   ================================================================ */

/* ── Modal responsiveness ── */

@media (max-width: 480px) {
    .modal-dialog .dialog-container {
        width: calc(100vw - 16px);
        min-width: 0;
        max-width: none;
        margin: 8px;
        border-radius: 12px;
    }

    .modal-dialog .dialog-container .dialog-body {
        padding: 0.5em 0.75em 0.75em;
    }

    .modal-dialog .dialog-container .dialog-body .dialog-content form {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    .modal-dialog .dialog-container {
        width: 94%;
        min-width: 0;
        max-width: 44em;
    }
}

/* ── Responsive table wrapper ── */

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

.pv-table-responsive > table {
    min-width: 600px;
}

@media (max-width: 767px) {
    table.table,
    .data-grid table,
    .report-table,
    #grid-data {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ── Responsive images, SVG, canvas ── */

img,
svg:not(.pv-custom-gauge) {
    max-width: 100%;
    height: auto;
}

canvas {
    max-width: 100%;
}

/* ── Touch-friendly interactive elements ── */

@media (pointer: coarse) {
    .btn,
    .x-btn,
    a.icon-btn,
    .chart-button,
    .pv-zoom-btn {
        min-height: 44px;
        min-width: 44px;
    }

    .sidebar-menu > li > a {
        min-height: 48px;
    }

    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ── Typography scaling ── */

@media (max-width: 575px) {
    .box-title,
    .pv-chart-card .box-title,
    .pv-energy-card .box-title {
        font-size: 16px;
    }

    .pv-kpi-title,
    .pv-stat-title {
        font-size: 12px;
        margin-bottom: 4px;
    }
}

/* ── Utility classes ── */

.pv-overflow-hidden {
    overflow: hidden !important;
}

.pv-text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Prevent horizontal overflow globally ── */

html {
    overflow-x: hidden;
}

.content-wrapper,
.container-full,
.pv-page-host {
    max-width: 100vw;
    overflow-x: hidden;
}

/* ── Fix Bootstrap 3 grid gutters on mobile ── */

@media (max-width: 575px) {
    .row {
        margin-left: -6px;
        margin-right: -6px;
    }

    .row > [class*='col-'] {
        padding-left: 6px;
        padding-right: 6px;
    }
}

/* ── Improved form controls across breakpoints ── */

.x-form .x-form-group {
    flex-wrap: wrap;
}

@media (max-width: 575px) {
    .x-form .x-form-group .x-field-label {
        flex: 1 1 100%;
        margin-bottom: 2px;
    }

    .x-form .x-form-group .x-field-content {
        flex: 1 1 100%;
    }
}

/* ── Date picker mobile fixes ── */

@media (max-width: 575px) {
    .bootstrap-datetimepicker-widget.dropdown-menu {
        width: auto;
        min-width: 240px;
        max-width: calc(100vw - 20px);
        left: 0 !important;
        right: auto !important;
    }
}

/* ── Chart responsive helpers ── */

.chart-content svg,
.chart-content-popup svg {
    display: block;
    max-width: 100%;
}

/* ── Filter bar / toolbar responsive ── */

@media (max-width: 767px) {
    .filter-bar,
    .pv-chart-topbar,
    .toolbar,
    .pv-master-toolbar {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* ── Safe box-sizing ── */

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ── Print safety ── */

@media print {
    .main-sidebar,
    .main-header,
    .main-footer,
    .pv-mobile-menu-wrap,
    .pv-sidebar-backdrop {
        display: none !important;
    }

    .content-wrapper {
        margin: 0 !important;
        padding: 0 !important;
    }
}