:root{
    --mup-orange: #2563eb;
    --mup-orange-soft: #eff6ff;
    --mup-black: #0f172a;
    --mup-dark: #111827;
    --mup-muted: #64748b;
    --mup-line: #e5e7eb;
    --mup-bg: #f8fafc;
    --mup-white: #ffffff;
    --mup-radius: 22px;
    --mup-shadow: 0 22px 60px rgba(15,23,42,.08);

    --mup-success: #16a34a;
    --mup-warning: #f59e0b;
    --mup-danger: #dc2626;
    --mup-info: #0ea5e9;

    --mup-card-bg: #ffffff;
    --mup-card-radius: 22px;

    --mup-sidebar-bg: #0f172a;
    --mup-sidebar-text: #ffffff;

    --mup-topbar-bg: #ffffff;
    --mup-topbar-text: #111827;

    --mup-menu-hover-bg: #eff6ff;
    --mup-gradient-start: #0f172a;
    --mup-gradient-end: #2563eb;

    --mup-login-bg-overlay: linear-gradient(120deg, rgba(15,23,42,.72), rgba(37,99,235,.28));
    --mup-login-left-overlay: linear-gradient(180deg, rgba(15,23,42,.10), rgba(15,23,42,.84));
}
// :root{
    // --mup-orange:#ff7900;
    // --mup-orange-soft:#fff3e6;
    // --mup-black:#050505;
    // --mup-dark:#111827;
    // --mup-muted:#6b7280;
    // --mup-line:#e5e7eb;
    // --mup-bg:#f6f7fb;
    // --mup-white:#ffffff;
    // --mup-radius:22px;
    // --mup-shadow:0 22px 60px rgba(15,23,42,.08);
// }

body{
    background:var(--mup-bg) !important;
    color:var(--mup-dark) !important;
    font-family:"Open Sans", Arial, sans-serif;
}

.page-content-wrap{
    padding:22px !important;
    background:
        radial-gradient(circle at top left, rgba(255,121,0,.08), transparent 26%),
        linear-gradient(180deg,#f8fafc 0%,#eef2f7 100%) !important;
    min-height:100vh;
}

.breadcrumb{
    background:#fff !important;
    border:1px solid rgba(15,23,42,.06) !important;
    border-radius:18px !important;
    padding:14px 18px !important;
    box-shadow:0 10px 28px rgba(15,23,42,.05) !important;
}

.breadcrumb li,
.breadcrumb li a{
    color:var(--mup-dark) !important;
    font-weight:800 !important;
}

.panel,
.block,
.well,
.dataTables_wrapper{
    border:1px solid rgba(15,23,42,.06) !important;
    border-radius:var(--mup-radius) !important;
    box-shadow:var(--mup-shadow) !important;
    background:#fff !important;
}

.panel-heading{
    background:#fff !important;
    border-bottom:1px solid #eef2f7 !important;
    border-radius:var(--mup-radius) var(--mup-radius) 0 0 !important;
    padding:18px 22px !important;
}

.panel-title,
.panel-title-box h3,
legend{
    color:var(--mup-dark) !important;
    font-weight:950 !important;
}

.panel-body{
    padding:22px !important;
}

.form-control{
    height:52px !important;
    border-radius:18px !important;
    border:1px solid #dbe3ef !important;
    background:#fff !important;
    color:var(--mup-dark) !important;
    font-weight:700 !important;
    box-shadow:none !important;
}

.form-control:focus{
    border-color:var(--mup-orange) !important;
    box-shadow:0 0 0 4px rgba(255,121,0,.14) !important;
}

label{
    color:var(--mup-dark) !important;
    font-size:13px !important;
    font-weight:900 !important;
}

.input-group-addon{
    border:1px solid #dbe3ef !important;
    background:#fff !important;
    border-radius:0 18px 18px 0 !important;
}

.nav-tabs{
    border:0 !important;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    background:#f3f4f6;
    padding:8px;
    border-radius:22px;
}

.nav-tabs > li{
    margin:0 !important;
}

.nav-tabs > li > a{
    border:0 !important;
    border-radius:16px !important;
    color:var(--mup-muted) !important;
    font-weight:900 !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus{
    background:linear-gradient(135deg,var(--mup-black),var(--mup-orange)) !important;
    color:#fff !important;
    box-shadow:0 14px 34px rgba(255,121,0,.24);
}

.btn{
    border-radius:999px !important;
    border:0 !important;
    min-height:44px;
    font-weight:900 !important;
    transition:.2s ease;
}

.btn:hover{
    transform:translateY(-1px);
}

.btn-success,
.btn-primary{
    background:linear-gradient(135deg,var(--mup-black),var(--mup-orange)) !important;
    color:#fff !important;
    box-shadow:0 16px 38px rgba(255,121,0,.24);
}

.btn-danger{
    background:#fff1f2 !important;
    color:#be123c !important;
}

.btn-warning{
    background:#fff7ed !important;
    color:#c2410c !important;
}

.table{
    border-collapse:separate !important;
    border-spacing:0 10px !important;
}

.table thead th{
    background:var(--mup-black) !important;
    color:var(--mup-orange) !important;
    border:0 !important;
    font-size:12px !important;
    font-weight:950 !important;
    text-transform:uppercase;
}

.table tbody tr{
    background:#fff !important;
    box-shadow:0 8px 22px rgba(15,23,42,.05);
}

.table tbody tr:nth-child(even){
    background:var(--mup-orange-soft) !important;
}

.table tbody tr:hover{
    background:#ffe4bd !important;
}

.table tbody td{
    border-top:1px solid #f1f5f9 !important;
    border-bottom:1px solid #f1f5f9 !important;
    color:var(--mup-dark) !important;
    font-weight:700 !important;
    vertical-align:middle !important;
}

.table tbody td:first-child{
    border-left:4px solid var(--mup-orange) !important;
}

.modal-content{
    border:0 !important;
    border-radius:28px !important;
    overflow:hidden;
    box-shadow:0 35px 100px rgba(0,0,0,.25) !important;
}

.modal-header{
    background:linear-gradient(135deg,var(--mup-black),var(--mup-orange)) !important;
    color:#fff !important;
    border:0 !important;
}

.modal-title{
    font-weight:950 !important;
}

.modal-footer{
    border:0 !important;
}

.img-thumbnail{
    border-radius:22px !important;
    border:1px solid #edf2f7 !important;
    box-shadow:0 16px 40px rgba(15,23,42,.08);
}

.label,
.badge{
    border-radius:999px !important;
    padding:6px 10px !important;
    font-weight:900 !important;
}

.widget{
    border-radius:26px !important;
    border:1px solid rgba(15,23,42,.06) !important;
    box-shadow:var(--mup-shadow) !important;
    background:#fff !important;
}

.widget .widget-item-left{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:22px !important;
}

@media(max-width:768px){
    .page-content-wrap{
        padding:12px !important;
    }

    .panel-body{
        padding:16px !important;
    }

    .nav-tabs{
        flex-direction:column;
    }

    .btn{
        width:100%;
        margin-bottom:8px;
    }

    .table-responsive{
        border:0 !important;
    }
}

/* =========================================================
   FIX SELECT MULTI-LIGNES / LISTBOX
========================================================= */

select[multiple],
select[size]{
    height:auto !important;
    min-height:220px !important;
    padding:10px !important;
    overflow-y:auto !important;
}

/* style des options */
select[multiple] option,
select[size] option{
    padding:10px 12px !important;
    border-radius:10px !important;
    margin-bottom:2px !important;
    font-weight:700 !important;
}

/* option sélectionnée */
select[multiple] option:checked,
select[size] option:checked{
    background:linear-gradient(
        135deg,
        var(--mup-black),
        var(--mup-orange)
    ) !important;

    color:#fff !important;
}

/* hover option */
select[multiple] option:hover,
select[size] option:hover{
    background:var(--mup-orange-soft) !important;
    color:var(--mup-dark) !important;
}

/* optgroup */
select optgroup{
    font-weight:900 !important;
    color:var(--mup-orange) !important;
    background:#f8fafc !important;
}