/* ==============================
   SYSIMPLE - FORMS THEME (VS DARK)
   Scope: .sys-theme-form-vs
   Base: sys-theme-form-dark (mêmes règles, palette VS)
   ============================== */

/* ========= Root / backgrounds ========= */
.sys-theme-form-vs,
.sys-theme-form-vs .content-wrapper,
.sys-theme-form-vs .right-side {
    background: #1e1e1e !important;
    color: #d4d4d4 !important;
}

    /* Typo */
    .sys-theme-form-vs,
    .sys-theme-form-vs .content-wrapper {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

        /* Backgrounds principaux */
        .sys-theme-form-vs .content,
        .sys-theme-form-vs .content > .row,
        .sys-theme-form-vs .container,
        .sys-theme-form-vs .container-fluid {
            background: #1e1e1e !important;
            color: #d4d4d4 !important;
        }

        /* Wrappers Sysimple (au cas où) */
        .sys-theme-form-vs #div-main-form,
        .sys-theme-form-vs .page-shadow,
        .sys-theme-form-vs .page-shadow > * {
            background: transparent !important;
        }

        /* ========= Cards / Panels / Boxes ========= */
        .sys-theme-form-vs .box,
        .sys-theme-form-vs .panel,
        .sys-theme-form-vs .well,
        .sys-theme-form-vs .nav-tabs-custom,
        .sys-theme-form-vs .callout,
        .sys-theme-form-vs .info-box {
            background: #252526 !important;
            border: 1px solid rgba(255,255,255,0.10) !important;
            border-radius: 10px;
            color: #d4d4d4 !important;
            box-shadow: 0 10px 24px rgba(0,0,0,0.35);
        }

            /* Headers un cran plus clair */
            .sys-theme-form-vs .box-header,
            .sys-theme-form-vs .panel-heading,
            .sys-theme-form-vs .nav-tabs-custom > .nav-tabs {
                background: #2d2d30 !important;
                border-bottom: 1px solid rgba(255,255,255,0.10) !important;
                color: #ffffff !important;
            }

        /* ========= Text / Titles ========= */
        .sys-theme-form-vs h1,
        .sys-theme-form-vs h2,
        .sys-theme-form-vs h3,
        .sys-theme-form-vs h4,
        .sys-theme-form-vs h5,
        .sys-theme-form-vs h6,
        .sys-theme-form-vs .box-title {
            color: #ffffff !important;
            letter-spacing: .2px;
        }

        .sys-theme-form-vs label,
        .sys-theme-form-vs .control-label {
            color: rgba(212,212,212,0.92) !important;
            /* font-weight: 600;*/
        }

        .sys-theme-form-vs .help-block,
        .sys-theme-form-vs .text-muted,
        .sys-theme-form-vs small {
            color: rgba(212,212,212,0.70) !important;
        }

        /* Fix bootstrap */
        .sys-theme-form-vs .text-black {
            color: #d4d4d4 !important;
        }

        .sys-theme-form-vs .text-gray,
        .sys-theme-form-vs .text-muted {
            color: rgba(212,212,212,0.70) !important;
        }

        /* Links */
        .sys-theme-form-vs a {
            color: #7fbaf0;
        }

            .sys-theme-form-vs a:hover,
            .sys-theme-form-vs a:focus {
                color: #a7d6ff;
            }

        /* ========= Inputs ========= */
        .sys-theme-form-vs .form-control,
        .sys-theme-form-vs input.form-control,
        .sys-theme-form-vs textarea.form-control,
        .sys-theme-form-vs select.form-control {
            background: #2d2d30 !important;
            color: #d4d4d4 !important;
            border: 1px solid rgba(255,255,255,0.12) !important;
            border-radius: 10px;
            box-shadow: none !important;
            transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
        }

            .sys-theme-form-vs .form-control::placeholder {
                color: rgba(212,212,212,0.55) !important;
            }

            .sys-theme-form-vs .form-control:focus {
                background: #2d2d30 !important;
                border-color: #569cd6 !important;
                box-shadow: 0 0 0 3px rgba(86,156,214,0.22) !important;
                color: #ffffff !important;
            }

            /* Readonly/disabled */
            .sys-theme-form-vs .form-control[disabled],
            .sys-theme-form-vs .form-control[readonly],
            .sys-theme-form-vs fieldset[disabled] .form-control {
                background: rgba(255,255,255,0.05) !important;
                color: rgba(212,212,212,0.70) !important;
            }

        /* Chrome autofill (évite le blanc) */
        .sys-theme-form-vs input:-webkit-autofill,
        .sys-theme-form-vs textarea:-webkit-autofill,
        .sys-theme-form-vs select:-webkit-autofill {
            -webkit-text-fill-color: #d4d4d4 !important;
            transition: background-color 9999s ease-out 0s;
            box-shadow: 0 0 0px 1000px #2d2d30 inset !important;
            border: 1px solid rgba(255,255,255,0.12) !important;
        }

        /* Quand un input est “valide” */
        .sys-theme-form-vs input:valid,
        .sys-theme-form-vs textarea:valid {
            color: #d4d4d4 !important;
            background: #2d2d30 !important;
        }

        /* Input-group */
        .sys-theme-form-vs .input-group-addon {
            background: #2d2d30 !important;
            border: 1px solid rgba(255,255,255,0.12) !important;
            color: rgba(212,212,212,0.78) !important;
            border-radius: 10px;
        }

        /* ========= Buttons ========= */
        .sys-theme-form-vs .btn {
            border-radius: 10px;
        }

            .sys-theme-form-vs .btn-default,
            .sys-theme-form-vs .btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info) {
                background: #2d2d30 !important;
                border: 1px solid rgba(255,255,255,0.12) !important;
                color: #d4d4d4 !important;
                transition: all .15s ease;
            }

                .sys-theme-form-vs .btn-default:hover,
                .sys-theme-form-vs .btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):hover {
                    background: #3c3c3c !important;
                    border-color: rgba(255,255,255,0.18) !important;
                    color: #ffffff !important;
                }

        .sys-theme-form-vs .btn-primary {
            background: #569cd6 !important;
            border-color: #569cd6 !important;
            color: #ffffff !important;
            font-weight: 700;
        }

            .sys-theme-form-vs .btn-primary:hover {
                background: #4f8cc5 !important;
                border-color: #4f8cc5 !important;
            }

        /* ========= Tabs ========= */
        .sys-theme-form-vs .nav-tabs {
            border-bottom: 1px solid rgba(255,255,255,0.10) !important;
        }

            .sys-theme-form-vs .nav-tabs > li > a {
                color: rgba(212,212,212,0.82) !important;
                border: 1px solid transparent;
                border-radius: 10px 10px 0 0;
            }

                .sys-theme-form-vs .nav-tabs > li > a:hover {
                    background: rgba(255,255,255,0.04) !important;
                    color: #ffffff !important;
                }

            .sys-theme-form-vs .nav-tabs > li.active > a,
            .sys-theme-form-vs .nav-tabs > li.active > a:hover,
            .sys-theme-form-vs .nav-tabs > li.active > a:focus {
                background: #252526 !important;
                color: #ffffff !important;
                border: 1px solid rgba(255,255,255,0.10) !important;
                border-bottom-color: transparent !important;
            }

        .sys-theme-form-vs .tab-content,
        .sys-theme-form-vs .nav-tabs-custom > .tab-content {
            background: #252526 !important;
            border: 1px solid rgba(255,255,255,0.10) !important;
            border-top: 0 !important;
            border-radius: 0 0 10px 10px;
        }

        /* ========= Tables / Grids ========= */
        .sys-theme-form-vs .table {
            background: transparent !important;
            color: #d4d4d4 !important;
        }

            .sys-theme-form-vs .table > thead > tr > th {
                background: #2d2d30 !important;
                color: #ffffff !important;
                border-bottom: 1px solid rgba(255,255,255,0.12) !important;
                border-top: 1px solid rgba(255,255,255,0.06) !important;
                font-weight: 700;
                letter-spacing: .2px;
            }

            /* Bordures de colonnes (subtiles) */
            .sys-theme-form-vs .table > thead > tr > th,
            .sys-theme-form-vs .table > tbody > tr > td {
                border-right: 1px solid rgba(255,255,255,0.05) !important;
            }

                .sys-theme-form-vs .table > thead > tr > th:last-child,
                .sys-theme-form-vs .table > tbody > tr > td:last-child {
                    border-right: none !important;
                }

            .sys-theme-form-vs .table > tbody > tr > td {
                border-top: 1px solid rgba(255,255,255,0.08) !important;
                color: #d4d4d4 !important;
                background: transparent !important;
            }

        /* Zebra */
        .sys-theme-form-vs .table-striped > tbody > tr:nth-of-type(odd) > td {
            background: rgba(255,255,255,0.03) !important;
        }

        .sys-theme-form-vs .table-striped > tbody > tr:nth-of-type(even) > td {
            background: rgba(255,255,255,0.01) !important;
        }

        /* Hover + selected */
        .sys-theme-form-vs .table-hover > tbody > tr:hover > td {
            background: rgba(86,156,214,0.10) !important;
        }

        .sys-theme-form-vs .table > tbody > tr.active > td,
        .sys-theme-form-vs .table > tbody > tr.selected > td {
            background: rgba(86,156,214,0.16) !important;
        }

        /* DataTables */
        .sys-theme-form-vs table.dataTable thead th,
        .sys-theme-form-vs table.dataTable thead td {
            background: #2d2d30 !important;
            color: #ffffff !important;
            border-bottom: 1px solid rgba(255,255,255,0.12) !important;
        }

        .sys-theme-form-vs .dataTables_wrapper .dataTables_filter input,
        .sys-theme-form-vs .dataTables_wrapper .dataTables_length select {
            background: #2d2d30 !important;
            color: #d4d4d4 !important;
            border: 1px solid rgba(255,255,255,0.12) !important;
            border-radius: 10px;
        }

        /* Pagination */
        .sys-theme-form-vs .pagination > li > a,
        .sys-theme-form-vs .pagination > li > span {
            background: #2d2d30 !important;
            border: 1px solid rgba(255,255,255,0.10) !important;
            color: #d4d4d4 !important;
        }

            .sys-theme-form-vs .pagination > li > a:hover {
                background: #3c3c3c !important;
            }

        .sys-theme-form-vs .pagination > .active > a,
        .sys-theme-form-vs .pagination > .active > span {
            background: rgba(86,156,214,0.18) !important;
            border-color: #569cd6 !important;
            color: #ffffff !important;
        }

        /* ========= Dropdown menus ========= */
        .sys-theme-form-vs .dropdown-menu {
            background: #252526 !important;
            border: 1px solid rgba(255,255,255,0.10) !important;
            border-radius: 10px;
        }

            .sys-theme-form-vs .dropdown-menu > li > a {
                color: #d4d4d4 !important;
            }

                .sys-theme-form-vs .dropdown-menu > li > a:hover {
                    background: rgba(86,156,214,0.12) !important;
                    color: #ffffff !important;
                }

            .sys-theme-form-vs .dropdown-menu .divider {
                background: rgba(255,255,255,0.08) !important;
            }

        /* ========= Modals ========= */
        .sys-theme-form-vs .modal-content {
            background: #252526 !important;
            color: #d4d4d4 !important;
            border: 1px solid rgba(255,255,255,0.10) !important;
            border-radius: 10px;
        }

        .sys-theme-form-vs .modal-header {
            border-bottom: 1px solid rgba(255,255,255,0.08) !important;
        }

        .sys-theme-form-vs .modal-footer {
            border-top: 1px solid rgba(255,255,255,0.08) !important;
        }

        /* ========= Alerts / badges ========= */
        .sys-theme-form-vs .badge {
            background: rgba(255,255,255,0.12) !important;
            color: #ffffff !important;
        }

        .sys-theme-form-vs .alert {
            border-radius: 10px;
            border: 1px solid rgba(255,255,255,0.10) !important;
            background: #252526 !important;
            color: #d4d4d4 !important;
        }

        /* ========= Scrollbars ========= */
        .sys-theme-form-vs * {
            scrollbar-width: thin;
            scrollbar-color: rgba(255,255,255,0.22) rgba(255,255,255,0.06);
        }

        .sys-theme-form-vs ::-webkit-scrollbar {
            height: 12px;
            width: 12px;
        }

        .sys-theme-form-vs ::-webkit-scrollbar-track {
            background: rgba(255,255,255,0.06);
            border-radius: 12px;
        }

        .sys-theme-form-vs ::-webkit-scrollbar-thumb {
            background: rgba(255,255,255,0.20);
            border-radius: 12px;
            border: 2px solid rgba(0,0,0,0);
            background-clip: padding-box;
        }

            .sys-theme-form-vs ::-webkit-scrollbar-thumb:hover {
                background: rgba(86,156,214,0.30);
            }

        .sys-theme-form-vs ::-webkit-scrollbar-corner {
            background: rgba(255,255,255,0.06);
        }

        /* ========= Select fermé (options) ========= */
        .sys-theme-form-vs select.form-control,
        .sys-theme-form-vs .form-control select {
            background: #2d2d30 !important;
            color: #d4d4d4 !important;
            border: 1px solid rgba(255,255,255,0.12) !important;
        }

            .sys-theme-form-vs select.form-control option,
            .sys-theme-form-vs select option {
                background: #252526;
                color: #d4d4d4;
            }

        /* ========= Select2 ========= */
        .sys-theme-form-vs .select2-container--default .select2-selection--single {
            background: #2d2d30 !important;
            border: 1px solid rgba(255,255,255,0.12) !important;
            border-radius: 10px !important;
            height: 30px;
        }

            .sys-theme-form-vs .select2-container--default .select2-selection--single .select2-selection__rendered {
                color: #d4d4d4 !important;
                line-height: 28px;
            }

            .sys-theme-form-vs .select2-container--default .select2-selection--single .select2-selection__arrow {
                height: 28px;
            }

        .sys-theme-form-vs .select2-dropdown {
            background: #252526 !important;
            border: 1px solid rgba(255,255,255,0.10) !important;
            border-radius: 10px !important;
        }

        .sys-theme-form-vs .select2-results__option {
            color: #d4d4d4 !important;
        }

        .sys-theme-form-vs .select2-results__option--highlighted[aria-selected] {
            background: rgba(86,156,214,0.12) !important;
            color: #ffffff !important;
        }

        .sys-theme-form-vs .select2-results__option[aria-selected="true"] {
            background: rgba(86,156,214,0.18) !important;
        }

        /* ========= BOOTSTRAP-SELECT (fix selected blanc) ========= */
        .sys-theme-form-vs .bootstrap-select .dropdown-toggle {
            background: #2d2d30 !important;
            color: #d4d4d4 !important;
            border: 1px solid rgba(255,255,255,0.12) !important;
            border-radius: 10px !important;
        }

            .sys-theme-form-vs .bootstrap-select.open .dropdown-toggle,
            .sys-theme-form-vs .bootstrap-select .dropdown-toggle:focus,
            .sys-theme-form-vs .bootstrap-select .dropdown-toggle:hover {
                background: #2d2d30 !important;
                color: #ffffff !important;
                border-color: rgba(86,156,214,0.60) !important;
                box-shadow: 0 0 0 3px rgba(86,156,214,0.14) !important;
            }

        .sys-theme-form-vs .bootstrap-select .dropdown-menu {
            background: #252526 !important;
            border: 1px solid rgba(255,255,255,0.10) !important;
            border-radius: 10px !important;
            padding: 6px !important;
        }

            .sys-theme-form-vs .bootstrap-select .dropdown-menu.inner {
                background: transparent !important;
            }

            .sys-theme-form-vs .bootstrap-select .dropdown-menu > li > a {
                color: #d4d4d4 !important;
                background: transparent !important;
                border-radius: 8px;
            }

                .sys-theme-form-vs .bootstrap-select .dropdown-menu > li > a:hover,
                .sys-theme-form-vs .bootstrap-select .dropdown-menu > li > a:focus {
                    background: rgba(86,156,214,0.12) !important;
                    color: #ffffff !important;
                }

            /* ✅ Selected / active (le bug blanc) */
            .sys-theme-form-vs .bootstrap-select .dropdown-menu > li.selected > a,
            .sys-theme-form-vs .bootstrap-select .dropdown-menu > li.selected > a:hover,
            .sys-theme-form-vs .bootstrap-select .dropdown-menu > li.selected > a:focus,
            .sys-theme-form-vs .bootstrap-select .dropdown-menu > li.active > a,
            .sys-theme-form-vs .bootstrap-select .dropdown-menu > li.active > a:hover,
            .sys-theme-form-vs .bootstrap-select .dropdown-menu > li.active > a:focus {
                background: rgba(86,156,214,0.18) !important;
                color: #ffffff !important;
            }

                .sys-theme-form-vs .bootstrap-select .dropdown-menu > li > a .check-mark,
                .sys-theme-form-vs .bootstrap-select .dropdown-menu > li.selected > a .check-mark {
                    color: #7fbaf0 !important;
                }

        /* Searchbox bootstrap-select */
        .sys-theme-form-vs .bootstrap-select .bs-searchbox input.form-control {
            background: #2d2d30 !important;
            color: #d4d4d4 !important;
            border: 1px solid rgba(255,255,255,0.12) !important;
            border-radius: 10px !important;
        }
        /* =========================================
   VS THEME - FIX colonnes DataTables claires
   (sorting_1/2/3 + highlight warning/yellow)
   ========================================= */

        /* 1) DataTables: la colonne triée (souvent éclaircie par défaut) */
        .sys-theme-form-vs table.dataTable tbody td.sorting_1,
        .sys-theme-form-vs table.dataTable tbody td.sorting_2,
        .sys-theme-form-vs table.dataTable tbody td.sorting_3,
        .sys-theme-form-vs table.dataTable.display tbody td.sorting_1,
        .sys-theme-form-vs table.dataTable.display tbody td.sorting_2,
        .sys-theme-form-vs table.dataTable.display tbody td.sorting_3 {
            background: rgba(255,255,255,0.03) !important; /* doux, VS-like */
            color: #d4d4d4 !important;
        }

        /* 2) Si tu veux que ce soit "jaune transparent" (comme ton indicateur) */
        .sys-theme-form-vs table.dataTable tbody td.bg-warning,
        .sys-theme-form-vs table.dataTable tbody td.bg-yellow,
        .sys-theme-form-vs .table tbody td.bg-warning,
        .sys-theme-form-vs .table tbody td.bg-yellow {
            background: rgba(238, 193, 13, 0.17) !important; /* jaune transparent */
            color: #fff !important;
        }

        /* 3) Si une lib met carrément du blanc sur TD/TH */
        .sys-theme-form-vs .table > tbody > tr > td[style*="background"],
        .sys-theme-form-vs .table > tbody > tr > th[style*="background"] {
            background: inherit !important;
        }

        /* 4) Optionnel: la ligne "selected/active" ne doit jamais devenir blanche */
        .sys-theme-form-vs .table > tbody > tr.active > td,
        .sys-theme-form-vs .table > tbody > tr.selected > td {
            background: rgba(86,156,214,0.16) !important;
            color: #fff !important;
        }

/* =========================================================
   SYSIMPLE SKIN - VISUAL STUDIO (Header + Sidebar)
   Scope: body.skin-sysimple-vs
   ========================================================= */

body.skin-sysimple-vs {
    --vs-bg: #1e1e1e; /* fond principal VS */
    --vs-card: #252526; /* surface (sidebar/topbar) */
    --vs-soft: #2d2d30; /* hover / headers */
    --vs-border: rgba(255,255,255,0.10);
    --vs-text: #d4d4d4;
    --vs-muted: rgba(212,212,212,0.72);
    --vs-accent: #569cd6; /* bleu VS */
}

    /* ===== TOP BAR ===== */
    body.skin-sysimple-vs .main-header,
    body.skin-sysimple-vs .main-header .navbar {
        background: var(--vs-card) !important;
        border-bottom: 1px solid var(--vs-border) !important;
    }

        body.skin-sysimple-vs .main-header .logo {
            background: var(--vs-card) !important;
            color: var(--vs-text) !important;
            border-right: 1px solid var(--vs-border) !important;
        }

    /* items topbar */
    body.skin-sysimple-vs .navbar-nav > li > a,
    body.skin-sysimple-vs .navbar .nav > li > a {
        color: var(--vs-text) !important;
    }

        body.skin-sysimple-vs .navbar-nav > li > a:hover,
        body.skin-sysimple-vs .navbar .nav > li > a:hover {
            background: var(--vs-soft) !important;
            color: #fff !important;
        }

    /* bouton toggle */
    body.skin-sysimple-vs .sidebar-toggle:hover {
        background: var(--vs-soft) !important;
    }

    /* dropdown topbar */
    body.skin-sysimple-vs .navbar-nav > .dropdown > .dropdown-menu {
        background: var(--vs-card) !important;
        border: 1px solid var(--vs-border) !important;
        border-radius: 10px;
    }

        body.skin-sysimple-vs .navbar-nav > .dropdown > .dropdown-menu > li > a {
            color: var(--vs-text) !important;
            border-radius: 8px;
        }

            body.skin-sysimple-vs .navbar-nav > .dropdown > .dropdown-menu > li > a:hover {
                background: rgba(86,156,214,0.14) !important;
                color: #fff !important;
            }

    /* ===== SIDEBAR ===== */
    body.skin-sysimple-vs .main-sidebar,
    body.skin-sysimple-vs .left-side,
    body.skin-sysimple-vs .sidebar {
        background: var(--vs-card) !important;
        border-right: 1px solid var(--vs-border) !important;
    }

        /* texte des liens */
        body.skin-sysimple-vs .sidebar a {
            color: var(--vs-text) !important;
        }

    /* section headers (si tu utilises .header dans le menu AdminLTE) */
    body.skin-sysimple-vs .sidebar-menu .header {
        background: var(--vs-card) !important;
        color: var(--vs-muted) !important;
        border-top: 1px solid rgba(255,255,255,0.06);
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }

    /* hover + active */
    body.skin-sysimple-vs .sidebar-menu > li > a {
        border-left: 3px solid transparent !important;
    }

    body.skin-sysimple-vs .sidebar-menu > li:hover > a {
        background: var(--vs-soft) !important;
        color: #fff !important;
    }

    body.skin-sysimple-vs .sidebar-menu > li.active > a {
        background: rgba(86,156,214,0.14) !important;
        border-left-color: var(--vs-accent) !important;
        color: #fff !important;
    }

    /* sous-menus */
    body.skin-sysimple-vs .treeview-menu {
        background: rgba(0,0,0,0.10) !important;
    }

        body.skin-sysimple-vs .treeview-menu > li > a {
            color: var(--vs-muted) !important;
        }

            body.skin-sysimple-vs .treeview-menu > li.active > a,
            body.skin-sysimple-vs .treeview-menu > li > a:hover {
                color: #fff !important;
                background: rgba(86,156,214,0.10) !important;
                border-radius: 6px;
            }

    /* ===== CONTENT WRAPPER (pour matcher VS) ===== */
    body.skin-sysimple-vs .content-wrapper,
    body.skin-sysimple-vs .right-side {
        background: var(--vs-bg) !important;
    }
/* =========================================================
   ALIGNEMENT HEADER / SIDEBAR - SYSIMPLE VS
   Le <section class="sidebar"> est en position fixed dans le
   layout public. Sa largeur pouvait alors se réduire au contenu,
   tandis que le logo du header conservait la largeur AdminLTE.
   On verrouille les quatre éléments de structure à 230 px.
   ========================================================= */
@media (min-width: 768px) {
    body.skin-sysimple-vs:not(.sidebar-collapse) .main-header > .logo {
        width: 230px !important;
        box-sizing: border-box;
    }

    body.skin-sysimple-vs:not(.sidebar-collapse) .main-header > .navbar {
        margin-left: 230px !important;
    }

    body.skin-sysimple-vs:not(.sidebar-collapse) .main-sidebar,
    body.skin-sysimple-vs:not(.sidebar-collapse) .left-side,
    body.skin-sysimple-vs:not(.sidebar-collapse) .main-sidebar > .sidebar,
    body.skin-sysimple-vs:not(.sidebar-collapse) .left-side > .sidebar {
        width: 230px !important;
        box-sizing: border-box;
    }

    body.skin-sysimple-vs:not(.sidebar-collapse) .content-wrapper,
    body.skin-sysimple-vs:not(.sidebar-collapse) .right-side,
    body.skin-sysimple-vs:not(.sidebar-collapse) .main-footer {
        margin-left: 230px !important;
    }
}