/* =========================================================
   DACO BI - RESPONSIVE PREMIUM
========================================================= */

/* =========================================================
   RESET RESPONSIVE
========================================================= */

html,
body {

    overflow-x: hidden;

    max-width: 100%;

    -webkit-tap-highlight-color: transparent;
}

* {

    box-sizing: border-box;
}

img,
canvas {

    max-width: 100%;

    height: auto;
}

/* =========================================================
   LAYOUT GLOBAL
========================================================= */

main {

    width: 100%;

    min-height: 100vh;

    transition:
    margin-left 0.3s ease,
    width 0.3s ease;
}

/* =========================================================
   TABLETTE
========================================================= */

@media (max-width: 1024px) {

    aside {

        width: 250px !important;
    }

    main {

        margin-left: 250px !important;
    }

    .grid-cols-4 {

        grid-template-columns:
        repeat(2, minmax(0,1fr)) !important;
    }

    .grid-cols-3 {

        grid-template-columns:
        repeat(2, minmax(0,1fr)) !important;
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    body {

        overflow-x: hidden;
    }

    /* =========================
       SIDEBAR
    ========================= */

    aside {

        position: fixed !important;

        top: 0;
        left: 0;

        transform: translateX(-110%);

        width: 280px !important;

        height: 100vh;

        z-index: 99999 !important;

        overflow-y: auto;

        transition:
        transform 0.3s ease;

        will-change: transform;

        backdrop-filter: blur(12px);
    }

    aside.mobile-open {

        transform: translateX(0) !important;
    }

    /* =========================
       OVERLAY
    ========================= */

    .mobile-overlay {

        position: fixed;

        inset: 0;

        background:
        rgba(0,0,0,0.65);

        backdrop-filter: blur(3px);

        z-index: 99990;

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
    }

    .mobile-overlay.active {

        opacity: 1;

        visibility: visible;

        pointer-events: auto;
    }

    /* =========================
       MAIN
    ========================= */

    main {

        width: 100% !important;

        margin-left: 0 !important;

        padding: 14px !important;

        position: relative;

        z-index: 1;
    }

    /* =========================
       HEADER
    ========================= */

    header {

        display: flex !important;

        align-items: center !important;

        justify-content: space-between !important;

        gap: 12px;

        margin-bottom: 20px;

        flex-wrap: nowrap !important;

        position: relative;

        z-index: 20;
    }

    header h1 {

        font-size: 1.9rem !important;

        line-height: 1.1;

        margin: 0;
    }

    /* =========================
       MOBILE HEADER LEFT
    ========================= */

    .mobile-header-left {

        display: flex;

        align-items: center;

        gap: 14px;

        min-width: 0;
    }

    /* =========================
       TOPBAR RIGHT
    ========================= */

    .top-icons {

        display: flex;

        align-items: center;

        gap: 10px;

        flex-shrink: 0;
    }

    .top-icons button,
    .top-icons div {

        width: 46px;

        height: 46px;

        min-width: 46px;

        display: flex;

        align-items: center;

        justify-content: center;

        border-radius: 999px;
    }

    /* =========================
       MENU BUTTON
    ========================= */

    .mobile-menu-btn {

        width: 46px;

        height: 46px;

        min-width: 46px;

        display: flex !important;

        align-items: center;

        justify-content: center;

        border-radius: 12px;

        position: relative;

        z-index: 100000;

        cursor: pointer;
    }

    /* =========================
       KPI
    ========================= */

    .grid-cols-4,
    .grid-cols-3,
    .grid-cols-2 {

        display: grid !important;

        grid-template-columns:
        repeat(1, minmax(0,1fr)) !important;

        gap: 18px !important;
    }

    .kpi-card {

        border-radius: 24px;

        padding: 22px !important;

        min-height: 180px;

        display: flex;

        flex-direction: column;

        justify-content: space-between;
    }

    .kpi-card h3 {

        font-size: 18px;

        line-height: 1.4;
    }

    .kpi-card .value {

        font-size: 42px !important;
    }

    /* =========================
       CARDS
    ========================= */

    .card,
    .glass-card,
    .chart-card {

        border-radius: 24px !important;

        padding: 18px !important;

        overflow: hidden;
    }

    /* =========================
       CHARTS
    ========================= */

    .chart-card {

        overflow-x: auto;
    }

    canvas {

        width: 100% !important;

        max-width: 100% !important;

        height: auto !important;
    }

    /* =========================
       DASHBOARD STACK
    ========================= */

    .dashboard-grid {

        display: flex !important;

        flex-direction: column !important;

        gap: 18px;
    }

    /* =========================
       FORMULAIRES
    ========================= */

    input,
    select,
    textarea {

        width: 100%;

        font-size: 16px !important;

        min-height: 50px;

        border-radius: 14px;
    }

    textarea {

        min-height: 120px;
    }

    /* =========================
       BOUTONS
    ========================= */

    button {

        min-height: 48px;

        border-radius: 14px;

        font-size: 15px;
    }

    /* =========================
       TABLES RESPONSIVE
    ========================= */

    .table-container {

        overflow: visible !important;
    }

    table,
    thead,
    tbody,
    th,
    td,
    tr {

        display: block;
    }

    thead {

        display: none;
    }

    tbody {

        display: flex;

        flex-direction: column;

        gap: 16px;
    }

    tr {

        background:
        rgba(30,41,59,0.92);

        border-radius: 20px;

        padding: 18px;

        border:
        1px solid rgba(255,255,255,0.06);

        box-shadow:
        0 10px 30px rgba(0,0,0,0.25);
    }

    td {

        display: flex;

        justify-content: space-between;

        align-items: center;

        gap: 12px;

        padding: 10px 0 !important;

        border: none !important;

        font-size: 14px;

        text-align: right;
    }

    td::before {

        content: attr(data-label);

        font-weight: 700;

        color: #94a3b8;

        min-width: 110px;

        text-align: left;
    }

    td:last-child {

        padding-bottom: 0 !important;
    }

    td button {

        width: 100%;
    }

    /* =========================
       MODALS
    ========================= */

    .modal-content {

        width: 100% !important;

        max-width: 100% !important;

        border-radius: 22px;

        padding: 20px;
    }

    /* =========================
       TITRES
    ========================= */

    h1 {

        font-size: 1.8rem !important;
    }

    h2 {

        font-size: 1.4rem !important;
    }

    h3 {

        font-size: 1.1rem !important;
    }
}

/* =========================================================
   PETITS SMARTPHONES
========================================================= */

@media (max-width: 480px) {

    main {

        padding: 10px !important;
    }

    .kpi-card {

        min-height: 165px;

        padding: 18px !important;
    }

    .kpi-card .value {

        font-size: 34px !important;
    }

    header h1 {

        font-size: 1.6rem !important;
    }

    td {

        font-size: 13px;
    }

    td::before {

        min-width: 90px;
    }
}

/* =========================================================
   IOS FIX
========================================================= */

@supports (-webkit-touch-callout: none) {

    body {

        min-height: -webkit-fill-available;
    }

    aside {

        height: -webkit-fill-available;
    }
}

/* =========================================================
   SMOOTH SCROLL
========================================================= */

html {

    scroll-behavior: smooth;
}