.sys-html-container {
    background: rgba(255,255,255,0.03);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 1px 2px rgba(0,0,0,0.30), 0 4px 12px rgba(0,0,0,0.20);
}

/* Alert danger pour thèmes foncés */
.skin-sysimple-dark .content-wrapper .alert-danger,
.skin-sysimple-vs .content-wrapper .alert-danger,
.skin-sysimple-midnight .content-wrapper .alert-danger {
    background-color: rgba(220,53,69,0.15) !important;
    border-color: rgba(220,53,69,0.45) !important;
    color: #ff6b7a !important;
}

/* bouton X */
.skin-sysimple-dark .alert-danger .close,
.skin-sysimple-vs .alert-danger .close,
.skin-sysimple-midnight .alert-danger .close {
    color: #ff6b7a;
    opacity: 0.8;
}

    .skin-sysimple-dark .alert-danger .close:hover,
    .skin-sysimple-vs .alert-danger .close:hover,
    .skin-sysimple-midnight .alert-danger .close:hover {
        opacity: 1;
    }
/* Alert validation Sysimple (thèmes foncés) */
.skin-sysimple-dark #MKSMSGVALBusinessValidation,
.skin-sysimple-vs #MKSMSGVALBusinessValidation,
.skin-sysimple-midnight #MKSMSGVALBusinessValidation {
    background: rgba(220,53,69) !important;
    border: 1px solid rgba(220,53,69,0.45) !important;
    color: #ff6b7a !important;
}

    .skin-sysimple-dark #MKSMSGVALBusinessValidation .close,
    .skin-sysimple-vs #MKSMSGVALBusinessValidation .close,
    .skin-sysimple-midnight #MKSMSGVALBusinessValidation .close {
        color: #ff6b7a;
    }

/* Labels en erreur */
.skin-sysimple-dark .has-error label,
.skin-sysimple-vs .has-error label,
.skin-sysimple-midnight .has-error label {
    color: #ff6b7a !important;
}

/* Input en erreur */
.skin-sysimple-dark .has-error .form-control,
.skin-sysimple-vs .has-error .form-control,
.skin-sysimple-midnight .has-error .form-control {
    border-color: #ff4d5e !important;
}

    /* focus */
    .skin-sysimple-corporate .has-error .form-control:focus,
    .skin-sysimple-dark .has-error .form-control:focus,
    .skin-sysimple-vs .has-error .form-control:focus,
    .skin-sysimple-midnight .has-error .form-control:focus {
        border-color: #ff4d5e !important;
        box-shadow: 0 0 0 2px rgba(255,77,94,0.25);
    }

/* Form-controls moins ronds en thèmes foncés */
.skin-sysimple-corporate .form-control,
.skin-sysimple-dark .form-control,
.skin-sysimple-vs .form-control,
.skin-sysimple-midnight .form-control,
.skin-sysimple-dark .input-group-addon,
.skin-sysimple-corporate .input-group-addon,
.skin-sysimple-vs .input-group-addon,
.skin-sysimple-midnight .input-group-addon {
    border-radius: 0px !important;
}
/* Form-controls moins ronds en thèmes foncés */
.skin-sysimple-corporate .btn,
.skin-sysimple-dark .btn,
.skin-sysimple-vs .btn,
.skin-sysimple-midnight .btn {
    border-radius: 2px !important;
}

/* Erreurs: un seul contour, pas de double frame */
.skin-sysimple-dark .has-error .form-control,
.skin-sysimple-corporate .has-error .form-control,
.skin-sysimple-vs .has-error .form-control,
.skin-sysimple-midnight .has-error .form-control {
    box-shadow: 0 0 0 2px rgba(255,77,94,0.22) !important;
    outline: none !important;
    border-color: #ff4d5e !important;
}

    /* Focus en erreur: halo propre */
    .skin-sysimple-dark .has-error .form-control:focus,
    .skin-sysimple-corporate .has-error .form-control:focus,
    .skin-sysimple-vs .has-error .form-control:focus,
    .skin-sysimple-midnight .has-error .form-control:focus {
        box-shadow: 0 0 0 4px rgba(255,77,94,0.22) !important;
    }

/* =========================================================
   Dropdowns (bootstrap-select) : même look que form-control
   Thèmes foncés: dark / vs / midnight
   ========================================================= */

/* 1) Bouton dropdown (bootstrap-select) */
.skin-sysimple-dark .bootstrap-select > .dropdown-toggle,
.skin-sysimple-corporate .bootstrap-select > .dropdown-toggle,
.skin-sysimple-vs .bootstrap-select > .dropdown-toggle,
.skin-sysimple-midnight .bootstrap-select > .dropdown-toggle {
    border-radius: 0px !important; /* au lieu de rond */
    box-shadow: none !important;
}

/* 2) Erreur sur bootstrap-select (le conteneur reçoit has-error) */
.skin-sysimple-dark .has-error .bootstrap-select > .dropdown-toggle,
.skin-sysimple-corporate .has-error .bootstrap-select > .dropdown-toggle,
.skin-sysimple-vs .has-error .bootstrap-select > .dropdown-toggle,
.skin-sysimple-midnight .has-error .bootstrap-select > .dropdown-toggle {
    border-color: #ff4d5e !important;
    box-shadow: 0 0 0 2px rgba(255,77,94,0.22) !important;
    outline: none !important;
}

    /* 3) Focus en erreur sur dropdown */
    .skin-sysimple-corporate .has-error .bootstrap-select.open > .dropdown-toggle,
    .skin-sysimple-corporate .has-error .bootstrap-select > .dropdown-toggle:focus,
    .skin-sysimple-dark .has-error .bootstrap-select.open > .dropdown-toggle,
    .skin-sysimple-vs .has-error .bootstrap-select.open > .dropdown-toggle,
    .skin-sysimple-midnight .has-error .bootstrap-select.open > .dropdown-toggle,
    .skin-sysimple-dark .has-error .bootstrap-select > .dropdown-toggle:focus,
    .skin-sysimple-vs .has-error .bootstrap-select > .dropdown-toggle:focus,
    .skin-sysimple-midnight .has-error .bootstrap-select > .dropdown-toggle:focus {
        box-shadow: 0 0 0 4px rgba(255,77,94,0.22) !important;
    }

/* =====================================================
   DATERANGEPICKER - Fix "cases blanches" + ghosted
   (Sysimple dark/vs/midnight)
   ===================================================== */

.skin-sysimple-dark .daterangepicker,
.skin-sysimple-vs .daterangepicker,
.skin-sysimple-midnight .daterangepicker {
    background: #252526 !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: #d4d4d4 !important;
}

    /* ✅ Les 2 champs blancs (input-mini) + tout input dans le picker */
    .skin-sysimple-dark .daterangepicker input,
    .skin-sysimple-vs .daterangepicker input,
    .skin-sysimple-midnight .daterangepicker input,
    .skin-sysimple-dark .daterangepicker .input-mini,
    .skin-sysimple-vs .daterangepicker .input-mini,
    .skin-sysimple-midnight .daterangepicker .input-mini {
        background: rgba(255,255,255,0.06) !important; /* ghost */
        color: #d4d4d4 !important;
        border: 1px solid rgba(255,255,255,0.14) !important;
        box-shadow: none !important;
        border-radius: 8px !important;
    }

        /* placeholder (au cas où) */
        .skin-sysimple-dark .daterangepicker input::placeholder,
        .skin-sysimple-vs .daterangepicker input::placeholder,
        .skin-sysimple-midnight .daterangepicker input::placeholder {
            color: rgba(212,212,212,0.60) !important;
        }

    /* ✅ Les blocs blancs internes (calendar-table / th/td) */
    .skin-sysimple-dark .daterangepicker .calendar-table,
    .skin-sysimple-vs .daterangepicker .calendar-table,
    .skin-sysimple-midnight .daterangepicker .calendar-table {
        background: transparent !important;
        border: 0 !important;
    }

    .skin-sysimple-dark .daterangepicker th,
    .skin-sysimple-dark .daterangepicker td,
    .skin-sysimple-vs .daterangepicker th,
    .skin-sysimple-vs .daterangepicker td,
    .skin-sysimple-midnight .daterangepicker th,
    .skin-sysimple-midnight .daterangepicker td {
        background: transparent !important;
        color: #d4d4d4 !important;
    }

        /* hover + active */
        .skin-sysimple-dark .daterangepicker td.available:hover,
        .skin-sysimple-vs .daterangepicker td.available:hover,
        .skin-sysimple-midnight .daterangepicker td.available:hover {
            background: rgba(255,255,255,0.08) !important;
        }

        .skin-sysimple-dark .daterangepicker td.active,
        .skin-sysimple-vs .daterangepicker td.active,
        .skin-sysimple-midnight .daterangepicker td.active {
            background: #007acc !important;
            color: #fff !important;
        }

        /* jours hors mois */
        .skin-sysimple-dark .daterangepicker td.off,
        .skin-sysimple-vs .daterangepicker td.off,
        .skin-sysimple-midnight .daterangepicker td.off {
            color: rgba(255,255,255,0.25) !important;
        }

    /* ✅ si tu as l'heure (dropdowns) */
    .skin-sysimple-dark .daterangepicker select,
    .skin-sysimple-vs .daterangepicker select,
    .skin-sysimple-midnight .daterangepicker select {
        background: rgba(255,255,255,0.06) !important;
        color: #d4d4d4 !important;
        border: 1px solid rgba(255,255,255,0.14) !important;
    }

/* Drag zone - rester gris pâle dans les thèmes foncés */
.skin-sysimple-dark .drag-info,
.skin-sysimple-vs .drag-info,
.skin-sysimple-midnight .drag-info {
    background: rgba(255,255,255,0.06) !important; /* gris ghost */
    border: 1px dashed rgba(255,255,255,0.25) !important;
    color: #d4d4d4 !important;
}

    /* Optionnel : hover pour mieux voir la zone */
    .skin-sysimple-dark .drag-info:hover,
    .skin-sysimple-vs .drag-info:hover,
    .skin-sysimple-midnight .drag-info:hover {
        background: rgba(255,255,255,0.10) !important;
    }

/* ===== Right panel (recent) ===== */
.sys-recent-panel {
    position: fixed;
    top: 0;
    right: -360px; /* caché */
    width: 360px;
    height: 100vh;
    z-index: 1055;
    background: #ffffff;
    border-left: 1px solid rgba(0,0,0,0.10);
    box-shadow: -14px 0 28px rgba(0,0,0,0.25);
    transition: right .18s ease;
    display: flex;
    flex-direction: column;
}

    .sys-recent-panel.is-open {
        right: 0;
    }

.sys-recent-header {
    padding: 12px 12px;
    border-bottom: 1px solid rgba(0,0,0,0.10);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sys-recent-title {
    font-weight: 700;
}

.sys-recent-close {
    border: 0;
    background: transparent;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    opacity: .7;
}

    .sys-recent-close:hover {
        opacity: 1;
    }

.sys-recent-body {
    padding: 10px;
    overflow: auto;
    flex: 1;
}

.sys-recent-list .sys-recent-item {
    display: block;
    padding: 10px 10px;
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,0.08);
    margin-bottom: 8px;
    text-decoration: none;
    color: inherit;
}

    .sys-recent-list .sys-recent-item:hover {
        background: rgba(0,0,0,0.04);
    }

.sys-recent-item .t1 {
    font-weight: 700;
}

.sys-recent-item .t2 {
    font-size: 12px;
    opacity: .75;
    margin-top: 2px;
}

.sys-recent-actions {
    padding-top: 8px;
}

/* overlay */
.sys-recent-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 1050;
    display: none;
}

    .sys-recent-overlay.is-open {
        display: block;
    }

/* ===== Dark skins: rendre le panel dark ===== */
.skin-sysimple-dark .sys-recent-panel,
.skin-sysimple-vs .sys-recent-panel,
.skin-sysimple-midnight .sys-recent-panel {
    background: #252526;
    color: #d4d4d4;
    border-left: 1px solid rgba(255,255,255,0.10);
}

.skin-sysimple-dark .sys-recent-header,
.skin-sysimple-vs .sys-recent-header,
.skin-sysimple-midnight .sys-recent-header {
    border-bottom: 1px solid rgba(255,255,255,0.10);
}

.skin-sysimple-dark .sys-recent-list .sys-recent-item,
.skin-sysimple-vs .sys-recent-list .sys-recent-item,
.skin-sysimple-midnight .sys-recent-list .sys-recent-item {
    border: 1px solid rgba(255,255,255,0.10);
}

    .skin-sysimple-dark .sys-recent-list .sys-recent-item:hover,
    .skin-sysimple-vs .sys-recent-list .sys-recent-item:hover,
    .skin-sysimple-midnight .sys-recent-list .sys-recent-item:hover {
        background: rgba(255,255,255,0.06);
    }

/* === Dropdown "Derniers dossiers" (compact + propre) === */
.sys-recent-dropdown .dropdown-menu {
    right: 0;
    left: auto;
    width: 420px; /* ajuste 360-520 */
    max-width: calc(100vw - 20px);
    padding: 8px;
    border-radius: 10px;
    overflow: hidden; /* pour les coins */
}

/* zone liste scrollable */
#sysRecentList {
    max-height: 340px; /* ajuste */
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
}

/* header du dropdown */
.sys-recent-dd-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 6px 10px 6px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    margin-bottom: 8px;
}

    .sys-recent-dd-hdr .t {
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* item */
.sys-recent-item {
    display: block;
    padding: 8px;
    border-radius: 10px;
    text-decoration: none !important;
}

    .sys-recent-item:hover {
        background: rgba(255,255,255,.06);
    }

    /* layout interne item */
    .sys-recent-item .rowx {
        display: flex;
        gap: 10px;
        align-items: center;
    }

    /* thumbnail */
    .sys-recent-item .thumb {
        width: 78px;
        height: 50px;
        border-radius: 8px;
        overflow: hidden;
        flex: 0 0 auto;
        background: rgba(255,255,255,.06);
        border: 1px solid rgba(255,255,255,.10);
    }

        .sys-recent-item .thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

    /* texte */
    .sys-recent-item .txt {
        min-width: 0; /* IMPORTANT pour ellipsis */
        flex: 1 1 auto;
    }

    .sys-recent-item .t1 {
        font-weight: 700;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* 2 lignes max */
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.2;
    }

    .sys-recent-item .t2 {
        opacity: .75;
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* supprimer le cadre interne du bootstrap-select uniquement pour les skins sombres */
.skin-sysimple-dark .bootstrap-select .dropdown-menu.inner,
.skin-sysimple-vs .bootstrap-select .dropdown-menu.inner,
.skin-sysimple-midnight .bootstrap-select .dropdown-menu.inner {
    border: none !important;
    box-shadow: none !important;
    background-image: none !important;
}

/* menu dropdown */
.skin-sysimple-dark .bootstrap-select .dropdown-menu,
.skin-sysimple-vs .bootstrap-select .dropdown-menu,
.skin-sysimple-midnight .bootstrap-select .dropdown-menu {
    border: 1px solid rgba(255,255,255,0.08);
    background-color: #0f1c2e;
    box-shadow: none !important;
}

    /* hover item */
    .skin-sysimple-dark .bootstrap-select .dropdown-menu li a:hover,
    .skin-sysimple-vs .bootstrap-select .dropdown-menu li a:hover,
    .skin-sysimple-midnight .bootstrap-select .dropdown-menu li a:hover {
        background-color: rgba(255,255,255,0.08);
    }

    /* item sélectionné */
    .skin-sysimple-dark .bootstrap-select .dropdown-menu li.selected a,
    .skin-sysimple-vs .bootstrap-select .dropdown-menu li.selected a,
    .skin-sysimple-midnight .bootstrap-select .dropdown-menu li.selected a {
        background-color: #1f4e79;
        color: #fff;
    }
/* =========================
   FULLCALENDAR - DARK SKINS
   ========================= */
.skin-sysimple-dark .fc,
.skin-sysimple-vs .fc,
.skin-sysimple-midnight .fc {
    color: rgba(255,255,255,0.85);
}

    /* Enlève les fonds blancs des headers (colonnes) */
    .skin-sysimple-dark .fc .fc-widget-header,
    .skin-sysimple-vs .fc .fc-widget-header,
    .skin-sysimple-midnight .fc .fc-widget-header,
    .skin-sysimple-dark .fc th,
    .skin-sysimple-vs .fc th,
    .skin-sysimple-midnight .fc th {
        background: rgba(255,255,255,0.04) !important;
        color: rgba(255,255,255,0.85) !important;
        border-color: rgba(255,255,255,0.10) !important;
    }

    /* Grille (td) + borders */
    .skin-sysimple-dark .fc td,
    .skin-sysimple-vs .fc td,
    .skin-sysimple-midnight .fc td,
    .skin-sysimple-dark .fc .fc-widget-content,
    .skin-sysimple-vs .fc .fc-widget-content,
    .skin-sysimple-midnight .fc .fc-widget-content {
        border-color: rgba(255,255,255,0.08) !important;
        background: transparent !important;
    }

    /* Numéro du jour (top-right) lisible */
    .skin-sysimple-dark .fc .fc-day-number,
    .skin-sysimple-vs .fc .fc-day-number,
    .skin-sysimple-midnight .fc .fc-day-number {
        color: rgba(255,255,255,0.70) !important;
    }

    /* Jour "aujourd'hui" (si tu veux un léger ghost aussi) */
    .skin-sysimple-dark .fc .fc-today,
    .skin-sysimple-vs .fc .fc-today,
    .skin-sysimple-midnight .fc .fc-today {
        background: rgba(255,255,255,0.05) !important;
    }

    /* =========================
   SELECTION GHOSTED
   (FullCalendar selectable -> .fc-highlight)
   ========================= */
    .skin-sysimple-dark .fc .fc-highlight,
    .skin-sysimple-vs .fc .fc-highlight,
    .skin-sysimple-midnight .fc .fc-highlight {
        background: rgba(255,255,255,0.08) !important; /* ghost */
        border: 1px solid rgba(255,255,255,0.12) !important;
    }

    /* Si ton "selected day" utilise plutôt .fc-state-highlight */
    .skin-sysimple-dark .fc .fc-state-highlight,
    .skin-sysimple-vs .fc .fc-state-highlight,
    .skin-sysimple-midnight .fc .fc-state-highlight {
        background: rgba(255,255,255,0.08) !important;
    }

    /* Optionnel : jours hors mois (gris plus sombre) */
    .skin-sysimple-dark .fc .fc-other-month,
    .skin-sysimple-vs .fc .fc-other-month,
    .skin-sysimple-midnight .fc .fc-other-month {
        background: rgba(0,0,0,0.10) !important;
    }

/* hover pour améliorer contraste */
.skin-sysimple-dark .fc-event:hover,
.skin-sysimple-midnight .fc-event:hover,
.skin-sysimple-vs .fc-event:hover {
    filter: brightness(1.15);
}

/* Le conteneur dans le mois */
.fc-day-grid-event .sys-cal-event {
    display: block;
    line-height: 1.15;
}

.sys-cal-top {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0; /* important pour ellipsis */
}

.sys-cal-badge {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
    opacity: .9;
}

/* registration + name : ellipsis */
.sys-cal-reg {
    font-weight: 600;
    flex: 0 0 auto;
    opacity: .95;
}

.sys-cal-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.sys-cal-sub {
    font-size: 12px;
    opacity: .75;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
}

/* Popover desc */
.sys-cal-desc .sys-cal-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 2px 0;
}

.sys-cal-desc .sys-cal-label {
    opacity: .7;
}

.sys-cal-desc .sys-cal-text {
    margin-top: 6px;
}

.sys-cal-desc .sys-cal-subtext {
    margin-top: 4px;
    opacity: .8;
    font-size: 12px;
}

/* ===== Tooltips Bootstrap (AdminLTE / BS3) - seulement thèmes foncés ===== */
.skin-sysimple-dark .tooltip.in,
.skin-sysimple-midnight .tooltip.in,
.skin-sysimple-vs .tooltip.in {
    opacity: 1 !important; /* enlève l'effet transparent */
    filter: alpha(opacity=100) !important;
}

.skin-sysimple-corporate .tooltip.in {
    opacity: 1 !important; /* enlève l'effet transparent */
    filter: alpha(opacity=100) !important;
}

.skin-sysimple-dark .tooltip .tooltip-inner,
.skin-sysimple-midnight .tooltip .tooltip-inner,
.skin-sysimple-vs .tooltip .tooltip-inner {
    background: rgba(20, 22, 26, 0.98) !important; /* plus opaque */
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    padding: 10px 12px !important;
    font-size: 12.5px !important;
    line-height: 1.25 !important;
    max-width: 360px !important; /* plus large */
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55) !important;
    border-radius: 8px !important;
}

/* Flèche (selon placement) */
.skin-sysimple-dark .tooltip.top .tooltip-arrow,
.skin-sysimple-midnight .tooltip.top .tooltip-arrow,
.skin-sysimple-vs .tooltip.top .tooltip-arrow {
    border-top-color: rgba(20, 22, 26, 0.98) !important;
}

.skin-sysimple-dark .tooltip.bottom .tooltip-arrow,
.skin-sysimple-midnight .tooltip.bottom .tooltip-arrow,
.skin-sysimple-vs .tooltip.bottom .tooltip-arrow {
    border-bottom-color: rgba(20, 22, 26, 0.98) !important;
}

.skin-sysimple-dark .tooltip.left .tooltip-arrow,
.skin-sysimple-midnight .tooltip.left .tooltip-arrow,
.skin-sysimple-vs .tooltip.left .tooltip-arrow {
    border-left-color: rgba(20, 22, 26, 0.98) !important;
}

.skin-sysimple-dark .tooltip.right .tooltip-arrow,
.skin-sysimple-midnight .tooltip.right .tooltip-arrow,
.skin-sysimple-vs .tooltip.right .tooltip-arrow {
    border-right-color: rgba(20, 22, 26, 0.98) !important;
}

/* =========================
   FULLCALENDAR v3 - DARK SKINS
   version sécuritaire
   ========================= */

.skin-sysimple-dark #calendar .fc,
.skin-sysimple-vs #calendar .fc,
.skin-sysimple-midnight #calendar .fc {
    color: rgba(255,255,255,0.85);
}

    .skin-sysimple-dark #calendar .fc-widget-header,
    .skin-sysimple-vs #calendar .fc-widget-header,
    .skin-sysimple-midnight #calendar .fc-widget-header,
    .skin-sysimple-dark #calendar .fc th,
    .skin-sysimple-vs #calendar .fc th,
    .skin-sysimple-midnight #calendar .fc th {
        background: rgba(255,255,255,0.04) !important;
        color: rgba(255,255,255,0.85) !important;
        border-color: rgba(255,255,255,0.10) !important;
    }

    .skin-sysimple-dark #calendar .fc td,
    .skin-sysimple-vs #calendar .fc td,
    .skin-sysimple-midnight #calendar .fc td,
    .skin-sysimple-dark #calendar .fc-widget-content,
    .skin-sysimple-vs #calendar .fc-widget-content,
    .skin-sysimple-midnight #calendar .fc-widget-content {
        border-color: rgba(255,255,255,0.08) !important;
        background: transparent !important;
    }

.skin-sysimple-dark #calendar .fc-day-number,
.skin-sysimple-vs #calendar .fc-day-number,
.skin-sysimple-midnight #calendar .fc-day-number {
    color: rgba(255,255,255,0.70) !important;
}

.skin-sysimple-dark #calendar .fc-today,
.skin-sysimple-vs #calendar .fc-today,
.skin-sysimple-midnight #calendar .fc-today {
    background: rgba(255,255,255,0.05) !important;
}

.skin-sysimple-dark #calendar .fc-highlight,
.skin-sysimple-vs #calendar .fc-highlight,
.skin-sysimple-midnight #calendar .fc-highlight,
.skin-sysimple-dark #calendar .fc-state-highlight,
.skin-sysimple-vs #calendar .fc-state-highlight,
.skin-sysimple-midnight #calendar .fc-state-highlight {
    background: rgba(255,255,255,0.08) !important;
}

.skin-sysimple-dark #calendar .fc-other-month,
.skin-sysimple-vs #calendar .fc-other-month,
.skin-sysimple-midnight #calendar .fc-other-month {
    background: rgba(0,0,0,0.10) !important;
}

.skin-sysimple-dark #calendar .fc-event,
.skin-sysimple-vs #calendar .fc-event,
.skin-sysimple-midnight #calendar .fc-event {
    color: #f5f7fa !important;
    font-weight: 500;
}

    .skin-sysimple-dark #calendar .fc-event .fc-title,
    .skin-sysimple-vs #calendar .fc-event .fc-title,
    .skin-sysimple-midnight #calendar .fc-event .fc-title {
        color: #fff !important;
    }

    .skin-sysimple-dark #calendar .fc-event .fc-time,
    .skin-sysimple-vs #calendar .fc-event .fc-time,
    .skin-sysimple-midnight #calendar .fc-event .fc-time {
        color: rgba(255,255,255,0.85) !important;
    }

.skin-sysimple-dark #calendar .fc-axis,
.skin-sysimple-vs #calendar .fc-axis,
.skin-sysimple-midnight #calendar .fc-axis {
    color: rgba(255,255,255,0.78) !important;
    background: rgba(255,255,255,0.03) !important;
    border-color: rgba(255,255,255,0.08) !important;
}

/*DATATABLE*/
/* =========================================================
   SYS GRID / TABLES - FORM SKINS DARK / VS / MIDNIGHT
   ========================================================= */

body.skin-sys-theme-form-dark .sys-html-container,
body.skin-sys-theme-form-vs .sys-html-container,
body.skin-sys-theme-form-midnight .sys-html-container {
    background: rgba(255,255,255,0.03) !important;
    color: #d4d4d4 !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
}

    /* wrappers fréquents */
    body.skin-sys-theme-form-dark .sys-html-container .box,
    body.skin-sys-theme-form-dark .sys-html-container .box-body,
    body.skin-sys-theme-form-dark .sys-html-container .table-responsive,
    body.skin-sys-theme-form-dark .sys-html-container .dataTables_wrapper,
    body.skin-sys-theme-form-dark .sys-html-container .dataTables_scroll,
    body.skin-sys-theme-form-dark .sys-html-container .dataTables_scrollHead,
    body.skin-sys-theme-form-dark .sys-html-container .dataTables_scrollBody,
    body.skin-sys-theme-form-vs .sys-html-container .box,
    body.skin-sys-theme-form-vs .sys-html-container .box-body,
    body.skin-sys-theme-form-vs .sys-html-container .table-responsive,
    body.skin-sys-theme-form-vs .sys-html-container .dataTables_wrapper,
    body.skin-sys-theme-form-vs .sys-html-container .dataTables_scroll,
    body.skin-sys-theme-form-vs .sys-html-container .dataTables_scrollHead,
    body.skin-sys-theme-form-vs .sys-html-container .dataTables_scrollBody,
    body.skin-sys-theme-form-midnight .sys-html-container .box,
    body.skin-sys-theme-form-midnight .sys-html-container .box-body,
    body.skin-sys-theme-form-midnight .sys-html-container .table-responsive,
    body.skin-sys-theme-form-midnight .sys-html-container .dataTables_wrapper,
    body.skin-sys-theme-form-midnight .sys-html-container .dataTables_scroll,
    body.skin-sys-theme-form-midnight .sys-html-container .dataTables_scrollHead,
    body.skin-sys-theme-form-midnight .sys-html-container .dataTables_scrollBody {
        background: transparent !important;
        color: #d4d4d4 !important;
        border-color: rgba(255,255,255,0.08) !important;
    }

    /* table */
    body.skin-sys-theme-form-dark .sys-html-container table,
    body.skin-sys-theme-form-vs .sys-html-container table,
    body.skin-sys-theme-form-midnight .sys-html-container table {
        background: transparent !important;
        color: #d4d4d4 !important;
    }

        /* head */
        body.skin-sys-theme-form-dark .sys-html-container table thead th,
        body.skin-sys-theme-form-vs .sys-html-container table thead th,
        body.skin-sys-theme-form-midnight .sys-html-container table thead th {
            background: rgba(255,255,255,0.04) !important;
            color: rgba(255,255,255,0.88) !important;
            border-color: rgba(255,255,255,0.10) !important;
        }

        /* rows / cells */
        body.skin-sys-theme-form-dark .sys-html-container table tbody tr,
        body.skin-sys-theme-form-dark .sys-html-container table tbody td,
        body.skin-sys-theme-form-vs .sys-html-container table tbody tr,
        body.skin-sys-theme-form-vs .sys-html-container table tbody td,
        body.skin-sys-theme-form-midnight .sys-html-container table tbody tr,
        body.skin-sys-theme-form-midnight .sys-html-container table tbody td {
            background: transparent !important;
            color: #d4d4d4 !important;
            border-color: rgba(255,255,255,0.06) !important;
        }

    /* si bootstrap met du striped clair */
    body.skin-sys-theme-form-dark .sys-html-container .table-striped > tbody > tr:nth-of-type(odd),
    body.skin-sys-theme-form-vs .sys-html-container .table-striped > tbody > tr:nth-of-type(odd),
    body.skin-sys-theme-form-midnight .sys-html-container .table-striped > tbody > tr:nth-of-type(odd) {
        background-color: rgba(255,255,255,0.02) !important;
    }

    body.skin-sys-theme-form-dark .sys-html-container .table-hover > tbody > tr:hover,
    body.skin-sys-theme-form-dark .sys-html-container .table-hover > tbody > tr:hover > td,
    body.skin-sys-theme-form-vs .sys-html-container .table-hover > tbody > tr:hover,
    body.skin-sys-theme-form-vs .sys-html-container .table-hover > tbody > tr:hover > td,
    body.skin-sys-theme-form-midnight .sys-html-container .table-hover > tbody > tr:hover,
    body.skin-sys-theme-form-midnight .sys-html-container .table-hover > tbody > tr:hover > td {
        background: rgba(255,255,255,0.05) !important;
    }

    /* inputs de recherche */
    body.skin-sys-theme-form-dark .sys-html-container input[type="search"],
    body.skin-sys-theme-form-vs .sys-html-container input[type="search"],
    body.skin-sys-theme-form-midnight .sys-html-container input[type="search"] {
        background: rgba(255,255,255,0.05) !important;
        color: #d4d4d4 !important;
        border: 1px solid rgba(255,255,255,0.12) !important;
    }

    /* pagination */
    body.skin-sys-theme-form-dark .sys-html-container .pagination > li > a,
    body.skin-sys-theme-form-dark .sys-html-container .pagination > li > span,
    body.skin-sys-theme-form-vs .sys-html-container .pagination > li > a,
    body.skin-sys-theme-form-vs .sys-html-container .pagination > li > span,
    body.skin-sys-theme-form-midnight .sys-html-container .pagination > li > a,
    body.skin-sys-theme-form-midnight .sys-html-container .pagination > li > span {
        background: rgba(255,255,255,0.03) !important;
        color: #d4d4d4 !important;
        border-color: rgba(255,255,255,0.08) !important;
    }

    body.skin-sys-theme-form-dark .sys-html-container .pagination > .active > a,
    body.skin-sys-theme-form-dark .sys-html-container .pagination > .active > span,
    body.skin-sys-theme-form-vs .sys-html-container .pagination > .active > a,
    body.skin-sys-theme-form-vs .sys-html-container .pagination > .active > span,
    body.skin-sys-theme-form-midnight .sys-html-container .pagination > .active > a,
    body.skin-sys-theme-form-midnight .sys-html-container .pagination > .active > span {
        background: #007acc !important;
        color: #fff !important;
        border-color: #007acc !important;
    }

    body.skin-sys-theme-form-dark .sys-html-container *,
    body.skin-sys-theme-form-vs .sys-html-container *,
    body.skin-sys-theme-form-midnight .sys-html-container * {
        background-color: transparent !important;
    }

/*Button calendrier*/

/* =========================================================
   FULLCALENDAR BUTTONS - DARK SKINS
   ========================================================= */

.skin-sysimple-dark .fc-button,
.skin-sysimple-vs .fc-button,
.skin-sysimple-midnight .fc-button,
.skin-sys-theme-form-dark .fc-button,
.skin-sys-theme-form-vs .fc-button,
.skin-sys-theme-form-midnight .fc-button {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    color: #d4d4d4 !important;
    box-shadow: none !important;
}

    /* hover */
    .skin-sysimple-dark .fc-button:hover,
    .skin-sysimple-vs .fc-button:hover,
    .skin-sysimple-midnight .fc-button:hover,
    .skin-sys-theme-form-dark .fc-button:hover,
    .skin-sys-theme-form-vs .fc-button:hover,
    .skin-sys-theme-form-midnight .fc-button:hover {
        background: rgba(255,255,255,0.12) !important;
        border-color: rgba(255,255,255,0.30) !important;
    }

    /* bouton actif */
    .skin-sysimple-dark .fc-button.fc-state-active,
    .skin-sysimple-vs .fc-button.fc-state-active,
    .skin-sysimple-midnight .fc-button.fc-state-active,
    .skin-sys-theme-form-dark .fc-button.fc-state-active,
    .skin-sys-theme-form-vs .fc-button.fc-state-active,
    .skin-sys-theme-form-midnight .fc-button.fc-state-active {
        background: #007acc !important;
        border-color: #007acc !important;
        color: #fff !important;
    }

    /* bouton disabled */
    .skin-sysimple-dark .fc-button:disabled,
    .skin-sysimple-vs .fc-button:disabled,
    .skin-sysimple-midnight .fc-button:disabled,
    .skin-sys-theme-form-dark .fc-button:disabled,
    .skin-sys-theme-form-vs .fc-button:disabled,
    .skin-sys-theme-form-midnight .fc-button:disabled {
        opacity: 0.4;
    }

/*Radio*/
/* =========================================================
   RADIO CUSTOM - SYSIMPLE
   ========================================================= */

.skin-sysimple-corporate input[type="radio"],
.skin-sysimple-dark input[type="radio"],
.skin-sysimple-vs input[type="radio"],
.skin-sysimple-midnight input[type="radio"],
.skin-sys-theme-form-dark input[type="radio"],
.skin-sys-theme-form-vs input[type="radio"],
.skin-sys-theme-form-midnight input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    margin: 0;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    outline: none;
    vertical-align: middle;
    box-shadow: none !important;
    margin-right: 10px;
}

/* dark / vs / midnight */
.skin-sysimple-dark input[type="radio"],
.skin-sysimple-vs input[type="radio"],
.skin-sysimple-midnight input[type="radio"],
.skin-sys-theme-form-dark input[type="radio"],
.skin-sys-theme-form-vs input[type="radio"],
.skin-sys-theme-form-midnight input[type="radio"] {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.28);
}

/* corporate */
.skin-sysimple-corporate input[type="radio"] {
    background: rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.22);
}

    /* point intérieur */
    .skin-sysimple-corporate input[type="radio"]::after,
    .skin-sysimple-dark input[type="radio"]::after,
    .skin-sysimple-vs input[type="radio"]::after,
    .skin-sysimple-midnight input[type="radio"]::after,
    .skin-sys-theme-form-dark input[type="radio"]::after,
    .skin-sys-theme-form-vs input[type="radio"]::after,
    .skin-sys-theme-form-midnight input[type="radio"]::after {
        content: "";
        position: absolute;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0);
        transition: transform .12s ease;
        background: #fff;
    }

    /* checked */
    .skin-sysimple-corporate input[type="radio"]:checked,
    .skin-sysimple-dark input[type="radio"]:checked,
    .skin-sysimple-vs input[type="radio"]:checked,
    .skin-sysimple-midnight input[type="radio"]:checked,
    .skin-sys-theme-form-dark input[type="radio"]:checked,
    .skin-sys-theme-form-vs input[type="radio"]:checked,
    .skin-sys-theme-form-midnight input[type="radio"]:checked {
        background: #007acc;
        border-color: #007acc;
    }

        .skin-sysimple-corporate input[type="radio"]:checked::after,
        .skin-sysimple-dark input[type="radio"]:checked::after,
        .skin-sysimple-vs input[type="radio"]:checked::after,
        .skin-sysimple-midnight input[type="radio"]:checked::after,
        .skin-sys-theme-form-dark input[type="radio"]:checked::after,
        .skin-sys-theme-form-vs input[type="radio"]:checked::after,
        .skin-sys-theme-form-midnight input[type="radio"]:checked::after {
            transform: translate(-50%, -50%) scale(1);
        }

    /* hover */
    .skin-sysimple-corporate input[type="radio"]:hover,
    .skin-sysimple-dark input[type="radio"]:hover,
    .skin-sysimple-vs input[type="radio"]:hover,
    .skin-sysimple-midnight input[type="radio"]:hover,
    .skin-sys-theme-form-dark input[type="radio"]:hover,
    .skin-sys-theme-form-vs input[type="radio"]:hover,
    .skin-sys-theme-form-midnight input[type="radio"]:hover {
        border-color: #007acc;
    }

    /* focus */
    .skin-sysimple-corporate input[type="radio"]:focus,
    .skin-sysimple-dark input[type="radio"]:focus,
    .skin-sysimple-vs input[type="radio"]:focus,
    .skin-sysimple-midnight input[type="radio"]:focus,
    .skin-sys-theme-form-dark input[type="radio"]:focus,
    .skin-sys-theme-form-vs input[type="radio"]:focus,
    .skin-sys-theme-form-midnight input[type="radio"]:focus {
        box-shadow: 0 0 0 3px rgba(0,122,204,0.18) !important;
    }

    /* disabled */
    .skin-sysimple-corporate input[type="radio"]:disabled,
    .skin-sysimple-dark input[type="radio"]:disabled,
    .skin-sysimple-vs input[type="radio"]:disabled,
    .skin-sysimple-midnight input[type="radio"]:disabled,
    .skin-sys-theme-form-dark input[type="radio"]:disabled,
    .skin-sys-theme-form-vs input[type="radio"]:disabled,
    .skin-sys-theme-form-midnight input[type="radio"]:disabled {
        opacity: .45;
        cursor: not-allowed;
    }

/*Checkbox*/
/* Checkbox style Sysimple */

input[type="checkbox"] {
    accent-color: #007acc; /* couleur principale */
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin-right: 10px;
}

    input[type="checkbox"]:focus {
        outline: 2px solid rgba(0,122,204,0.35);
        outline-offset: 2px;
    }

.skin-sysimple-corporate input[type="checkbox"],
.skin-sysimple-dark input[type="checkbox"],
.skin-sysimple-vs input[type="checkbox"],
.skin-sysimple-midnight input[type="checkbox"],
.skin-sys-theme-form-dark input[type="checkbox"],
.skin-sys-theme-form-vs input[type="checkbox"],
.skin-sys-theme-form-midnight input[type="checkbox"] {
    accent-color: #007acc;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.bootstrap-select .filter-option-inner-inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
}

    .bootstrap-select .filter-option-inner-inner .sys-selected-html-item {
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
    }

        .bootstrap-select .filter-option-inner-inner .sys-selected-html-item span {
            vertical-align: middle;
        }

/* =========================================================
   HR - THEMES SYSIMPLE
   ========================================================= */

/* Corporate (clair) */
.skin-sysimple-corporate hr,
.skin-sys-theme-form-corporate hr {
    border: none;
    height: 1px;
    background: rgba(0,0,0,0.15);
}

/* Dark / VS / Midnight */
.skin-sysimple-dark hr,
.skin-sysimple-vs hr,
.skin-sysimple-midnight hr,
.skin-sys-theme-form-dark hr,
.skin-sys-theme-form-vs hr,
.skin-sys-theme-form-midnight hr {
    border: none;
    height: 1px;
    background: rgba(255,255,255,0.12);
}

/* =========================================================
   TIMELINE - THEMES FONCÉS
   ========================================================= */

.skin-sysimple-dark .timeline > li > .timeline-item,
.skin-sysimple-vs .timeline > li > .timeline-item,
.skin-sysimple-midnight .timeline > li > .timeline-item,
.skin-sys-theme-form-dark .timeline > li > .timeline-item,
.skin-sys-theme-form-vs .timeline > li > .timeline-item,
.skin-sys-theme-form-midnight .timeline > li > .timeline-item {
    background: #252526 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: #d4d4d4 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.35) !important;
}

    /* header */
    .skin-sysimple-dark .timeline > li > .timeline-item > .timeline-header,
    .skin-sysimple-vs .timeline > li > .timeline-item > .timeline-header,
    .skin-sysimple-midnight .timeline > li > .timeline-item > .timeline-header,
    .skin-sys-theme-form-dark .timeline > li > .timeline-item > .timeline-header,
    .skin-sys-theme-form-vs .timeline > li > .timeline-item > .timeline-header,
    .skin-sys-theme-form-midnight .timeline > li > .timeline-item > .timeline-header {
        color: #ffffff !important;
        border-bottom: 1px solid rgba(255,255,255,0.08) !important;
        background: transparent !important;
    }

    /* time */
    .skin-sysimple-dark .timeline > li > .timeline-item .time,
    .skin-sysimple-vs .timeline > li > .timeline-item .time,
    .skin-sysimple-midnight .timeline > li > .timeline-item .time,
    .skin-sys-theme-form-dark .timeline > li > .timeline-item .time,
    .skin-sys-theme-form-vs .timeline > li > .timeline-item .time,
    .skin-sys-theme-form-midnight .timeline > li > .timeline-item .time {
        color: rgba(255,255,255,0.55) !important;
    }

    /* body */
    .skin-sysimple-dark .timeline > li > .timeline-item > .timeline-body,
    .skin-sysimple-vs .timeline > li > .timeline-item > .timeline-body,
    .skin-sysimple-midnight .timeline > li > .timeline-item > .timeline-body,
    .skin-sys-theme-form-dark .timeline > li > .timeline-item > .timeline-body,
    .skin-sys-theme-form-vs .timeline > li > .timeline-item > .timeline-body,
    .skin-sys-theme-form-midnight .timeline > li > .timeline-item > .timeline-body {
        color: #d4d4d4 !important;
        background: transparent !important;
    }

    /* footer */
    .skin-sysimple-dark .timeline > li > .timeline-item > .timeline-footer,
    .skin-sysimple-vs .timeline > li > .timeline-item > .timeline-footer,
    .skin-sysimple-midnight .timeline > li > .timeline-item > .timeline-footer,
    .skin-sys-theme-form-dark .timeline > li > .timeline-item > .timeline-footer,
    .skin-sys-theme-form-vs .timeline > li > .timeline-item > .timeline-footer,
    .skin-sys-theme-form-midnight .timeline > li > .timeline-item > .timeline-footer {
        border-top: 1px solid rgba(255,255,255,0.06) !important;
        background: transparent !important;
    }

/* ligne verticale */
.skin-sysimple-dark .timeline:before,
.skin-sysimple-vs .timeline:before,
.skin-sysimple-midnight .timeline:before,
.skin-sys-theme-form-dark .timeline:before,
.skin-sys-theme-form-vs .timeline:before,
.skin-sys-theme-form-midnight .timeline:before {
    background: rgba(255,255,255,0.15) !important;
}

.sys-filterable-menu {
    max-height: 320px;
    overflow-y: auto;
}

    .sys-filterable-menu .sys-dropdown-search {
        position: sticky;
        top: 0;
        z-index: 2;
        background: inherit;
        list-style: none;
    }

        .sys-filterable-menu .sys-dropdown-search .form-control {
            width: 100%;
        }

    .sys-filterable-menu li > a {
        white-space: normal;
    }