/* X-Small devices (portrait phones, less than 576px)
No media query for `xs` since this is the default in Bootstrap */


/* Small devices (landscape phones, 576px and up) */

@media (min-width: 576px) {}


/* Medium devices (tablets, 768px and up) */

@media (min-width: 768px) {}


/* Large devices (desktops, 992px and up) */

@media (min-width: 992px) {}


/* X-Large devices (large desktops, 1200px and down) */

@media (min-width: 1200px) {
    /* ============================================================
    LOGO
    ============================================================ */
    .logo {
        height: 70px !important;
        position: absolute;
        top: 0;
        left: 0;
    }


    /* ============================================================
    UTILITIES
    ============================================================ */
    .border-right-own { border-right: 1px solid #ccc; }

    .w-xl-75  { width: 75% !important; }
    .fs-xl-4  { font-size: 1.5rem !important; }
    .fs-xl-5  { font-size: 1.25rem !important; }


    /* ============================================================
    CHARTS
    ============================================================ */
    .chart-caption    { width: 70%; text-align: center; }
    .chart-caption-2  { flex-grow: 1; text-align: left; }

    .chart-territory,
    .chart-territory-2 { width: 15%; }

    .chart-territory   { text-align: left; }
    .chart-territory-2 { text-align: right; }

    @media (max-width: 575px) {
        .chart-caption,
        .chart-caption-2,
        .chart-territory,
        .chart-territory-2 {
            width: 100%;
            text-align: center;
        }
    }
}


/* XX-Large devices (larger desktops, 1800px and down) */

@media (min-width: 2000px) {

}


/* If screen is scaled */

@media (-webkit-min-device-pixel-ratio: 1.25) {

}

@media (-webkit-min-device-pixel-ratio: 1.50) {
    
}

@media print {
    @page {
        size: landscape;
        margin: 10mm;
    }

    html,
    body {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        color: #000 !important;
        font-size: 12pt;
    }

    /* Important for Bootstrap print issues */
    body {
        min-width: auto !important;
    }

    .no-print,
    nav,
    footer,
    .btn,
    .offcanvas,
    .modal {
        display: none !important;
    }

    /* Kill Bootstrap/container width limits */
    .container,
    .container-fluid,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl,
    main,
    .content,
    .wrapper {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Grid can also keep things narrow */
    .print-full,
    .print-full > [class*="col-"] {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        flex: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .col-6-print {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }

    .col-4-print {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
        width: 33.333333% !important;
    }

    img,
    svg,
    canvas,
    table,
    tr,
    td,
    th,
    .card {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    table,
    .card,
    .print-block {
        width: 100% !important;
        max-width: none !important;
    }

    h1, h2, h3, h4 {
        break-after: avoid !important;
        page-break-after: avoid !important;
    }

    .text-print {
        color: var(--primary) !important;
    }

    .print-block {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    .print-center {
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .print-only {
        display: block !important;
    }

    /* ============================================================
    PRINT — KPI CARD (indicateur principal)
    ============================================================ */
    .kpi-card-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
    }

    .kpi-card-picto {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        flex: 0 0 auto !important;
    }

    .kpi-card-body {
        display: flex !important;
        flex-direction: column !important;
        width: auto !important;
        flex: 0 0 auto !important;
    }

    /* ============================================================
    PRINT — KPI MINI CARD (variante colonne)
    ============================================================ */
    .kpi-mini-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        margin: 0 auto !important;
    }

    .kpi-mini-picto {
        display: block !important;
        margin: 0 auto !important;
    }

    .kpi-mini-body {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: auto !important;
    }

    .kpi-mini-body .d-flex {
        display: flex !important;
        justify-content: center !important;
    }

    /* ============================================================
    PRINT — DONUT CHART
    ============================================================ */

    .donut-wrapper {
        position: relative !important;
        display: inline-block !important;
        width: 200px !important;
        height: 150px !important;
    }

    .donutchart-print {
        width: 100% !important;
        height: 100% !important;
    }

    .donut-center-label {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 2 !important;
        text-align: center !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    #donutchart, 
    #donutchart1,
    #donutchart-genre, 
    #donutchart-genre1,
    #donutchart-emploi,
    #donutchart-emploi1, 
    #donutchart-annexe,
    #donutchart1-annexe {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* ============================================================
    PRINT — CHARTS
    ============================================================ */

    .chart-inner {
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: 100% !important;
        width: 100% !important;
        height: 150px !important;
        overflow: hidden !important;
    }

    .chart-scroll-wrapper {
        overflow: hidden !important;
        width: 100% !important;
    }

    .chart-inner canvas {
        display: block !important;
        width: 100% !important;
        height: 150px !important;
        max-height: 150px !important;
        margin: 0 auto !important;
    }

    #chart-compare-vertical,
    #chart-main-vertical,
    #chart-main-1-vertical,
    #chart-emploi-compare-vertical,
    #chart-emploi-vertical,
    #chart-emploi-1-vertical,
    #chart-emp-compare-vertical,
    #chart-emp-main-vertical,
    #chart-emp-main-1-vertical, {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100% !important;
        margin: 0 auto !important;
        max-height: 200px !important;
    }

    #chart-compare-vertical > *,
    #chart-main-vertical > *,
    #chart-main-1-vertical > *,
    #chart-emploi-compare-vertical > *,
    #chart-emploi-vertical > *,
    #chart-emploi-1-vertical > *,
    #chart-emp-compare-vertical > *,
    #chart-emp-main-vertical > *,
    #chart-emp-main-1-vertical > * {
        margin-inline: auto !important;
    }

    
    #chart-compare-label,
    #chart-main-label,
    #chart-main-1-label,
    #chart-emploi-compare-label,
    #chart-emploi-label,
    #chart-emploi-1-label,
    #chart-emp-compare-label,
    #chart-emp-main-label,
    #chart-emp-main-1-label {
        width: 100% !important;
        text-align: center !important;
        margin-top: 8px;
    }
}