/* ==========================================
   SCRAP REPORT RESPONSIVE STYLES
   ========================================== */

/* Slightly smaller but still clear charts on desktop */
canvas {
    max-width: 100%;
    height: 290px !important; /* ↓ reduced from 400px */
    margin: 0 auto;
    display: block;
}

/* Make table, chart, and header responsive */
@media (max-width: 1024px) {
    .fichecenter {
        flex-direction: column !important;
        align-items: center !important;
    }

    .fichehalfright, .fichehalfleft {
        width: 100% !important;
        text-align: center;
    }

    .scrapfilter {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .scrapfilter input,
    .scrapfilter select,
    .scrapfilter .button,
    .scrapfilter .butAction {
        width: 100% !important;
        box-sizing: border-box;
    }

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

    .div-table-responsive table {
        width: 100%;
        border-collapse: collapse;
    }

    .centered {
        text-align: center !important;
    }

    /* Slightly smaller charts on tablets */
    canvas {
        height: 240px !important;
    }
}

/* Small mobile view (phones < 768px) */
@media (max-width: 768px) {
    body {
        font-size: 13px !important;
        margin: 0 auto;
    }

    .fichecenter {
        padding: 0 5px;
    }

    h3, h4, .titre {
        text-align: center !important;
        font-size: 16px !important;
    }

    .scrapfilter {
        flex-direction: column !important;
        align-items: stretch;
    }

    .scrapfilter input[type="date"],
    .scrapfilter select,
    .scrapfilter .button,
    .scrapfilter .butAction {
        width: 100% !important;
    }

    .div-table-responsive {
        margin-top: 10px;
    }

    .centered {
        text-align: center;
    }

    /* Compact chart for small phones */
    canvas {
        height: 220px !important; /* ↓ reduced from 320px */
    }

    /* Avoid horizontal overflow */
    table.noborder {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}