/* --- GLOBAL --- */
img { max-width: 100%; height: auto; }

/* --- TABLE RESPONSIVE --- */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 767.98px) {
    .table-responsive table { min-width: 600px; }
    .table td, .table th {
        white-space: nowrap;
        font-size: 13px;
        padding: 8px 10px;
    }

    /* Cards spacing */
    .card { margin-bottom: 12px; }
    .card-body { padding: 12px; }

    /* Forms */
    .form-group label { font-size: 13px; }
    .form-control { font-size: 14px; }

    /* Action buttons in tables */
    .action-buttons { display: flex; gap: 3px; }
    .action-buttons .btn { padding: 4px 8px; font-size: 12px; }

    /* Image upload */
    .image-preview, .photo-preview { max-width: 100%; height: auto; }
    .image-cropper-container { max-width: 100%; overflow: hidden; }

    /* Select2 */
    .select2-container { width: 100% !important; }

    /* Froala editor toolbar */
    .fr-box .fr-toolbar { flex-wrap: wrap; }
    .fr-box .fr-toolbar .fr-btn-grp { margin: 2px; }
}

/* --- DASHBOARD: force cards full width on mobile --- */
@media (max-width: 575.98px) {
    .col-md-6.col-xl-4,
    .col-12.col-md-6.col-xl-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Pagination */
    .pagination { flex-wrap: wrap; justify-content: center; }
    .pagination .page-link { padding: 5px 10px; font-size: 13px; }

    /* Breadcrumb */
    .page-title-box { padding: 8px 12px; }
    .page-title-box h4 { font-size: 13px !important; }

    /* Modal */
    .modal-dialog { margin: 10px; }
}

/* --- AI EDITOR PANEL --- */
@media (max-width: 991.98px) {
    .ai-editor-panel, #ai-analysis-panel {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 15px;
    }
}

/* --- ANALYTICS CHARTS --- */
@media (max-width: 991.98px) {
    .analytics-chart-container { overflow-x: auto; }
    .analytics-chart-container canvas { min-width: 500px; }
}

/* --- LOGO: scale down on tablet when sidebar collapsed --- */
@media (max-width: 991.98px) {
    .navbar-brand-box .logo-lg img {
        height: 30px !important;
    }
}

/* --- DATEPICKER --- */
@media (max-width: 575.98px) {
    .daterangepicker {
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
    }
    .daterangepicker .drp-calendar {
        max-width: 100%;
        float: none !important;
    }
}

/* --- FIXED WIDTH OVERRIDES --- */
@media (max-width: 767.98px) {
    [style*="width: 260px"],
    [style*="width: 225px"],
    [style*="width: 190px"] {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* --- PRINT --- */
@media print {
    .navbar-menu, #page-topbar, .page-title-box,
    .btn, .action-buttons { display: none !important; }
    .main-content { margin-left: 0 !important; }
    .page-content { padding: 0 !important; }
    .table td, .table th { font-size: 11px; padding: 4px; }
}

/* ============================
   DASHBOARD CHART RESPONSIVE
   ============================ */

.chart-responsive {
    width: 100%;
    min-height: 280px;
}

/* --- TABLET (768 - 991px) --- */
@media (min-width: 768px) and (max-width: 991px) {
    .chart-responsive {
        min-height: 260px;
    }

    .card .card-header h4 {
        font-size: 15px;
    }

    .card .card-body {
        padding: 12px;
    }
}

/* --- MOBILE (< 768px) --- */
@media (max-width: 767px) {
    .chart-responsive {
        min-height: 240px;
    }

    .card {
        margin-bottom: 12px;
    }

    .card .card-header {
        padding: 10px 15px;
    }

    .card .card-header h4 {
        font-size: 14px;
        margin: 0;
    }

    .card .card-body {
        padding: 10px;
    }

    /* ApexCharts legend di mobile */
    .apexcharts-legend {
        padding: 5px 0 !important;
    }

    .apexcharts-legend-text {
        font-size: 11px !important;
    }

    /* Bar chart x-axis labels rotasi lebih */
    .apexcharts-xaxis-label {
        font-size: 10px !important;
    }

    /* Top Articles spacing */
    .card-body div[style*="margin-bottom:10px"] strong {
        font-size: 13px;
        line-height: 1.4;
    }

    /* Row spacing */
    .row.mt-4 {
        margin-top: 12px !important;
    }
}

/* --- SMALL MOBILE (< 576px) --- */
@media (max-width: 575px) {
    .chart-responsive {
        min-height: 220px;
    }

    /* Pie/donut chart: legend ke bawah */
    .apexcharts-legend {
        justify-content: center !important;
    }

    .apexcharts-legend-series {
        margin: 2px 6px !important;
    }
}


/* AI Panel paragraph spacing */
.ai-section-content p { margin-bottom: 1rem; }