/*
 * ============================================================
 *  BODECOR — Brand CSS Global (Backoffice)
 *  Balloon & Party Store · Giftstore · Events · Party Rental
 *  Design System : Fête · Coral · Violet · Blue · Or · Mint
 *  Override AdminLTE / Bootstrap — 2026
 * ============================================================
 */

/* ============================================================
   1. VARIABLES CSS GLOBALES
============================================================ */
:root {
    --bdc-rose:          #E8693A;
    --bdc-rose-light:    #F5A07A;
    --bdc-rose-dark:     #C44F22;
    --bdc-violet:        #8B6FD9;
    --bdc-violet-dark:   #6A50B9;
    --bdc-cyan:          #3ABCDF;
    --bdc-cyan-dark:     #2A9CBF;
    --bdc-or:            #F5C840;
    --bdc-or-dark:       #D4A820;
    --bdc-mint:          #3DC5B0;
    --bdc-mint-dark:     #2AA594;
    --bdc-nuit:          #0D0920;
    --bdc-nuit2:         #18122A;
    --bdc-blanc:         #FFFFFF;
    --bdc-cream:         #F8F5FF;
    --bdc-muted:         #7A6A9A;
    --bdc-border:        rgba(139,111,217,0.13);
    --bdc-text:          #18122A;
    --bdc-error:         #DC3545;
    --bdc-success:       #28A745;
    --bdc-warning:       #F5C840;
    --bdc-info:          #3ABCDF;

    /* Sidebar */
    --bdc-sidebar-bg:          #0D0920;
    --bdc-sidebar-item:        rgba(255,255,255,0.65);
    --bdc-sidebar-active-bg:   rgba(139,111,217,0.18);
    --bdc-sidebar-active-text: #B8A5E8;
    --bdc-sidebar-hover-bg:    rgba(139,111,217,0.09);

    /* Header */
    --bdc-header-bg:     #0D0920;
    --bdc-header-border: rgba(139,111,217,0.28);
}

/* ============================================================
   2. TYPOGRAPHIE GLOBALE
============================================================ */
body,
.content-wrapper,
.main-sidebar,
.main-header {
    font-family: 'Nunito', 'Poppins', system-ui, sans-serif !important;
}

.box-title,
.content-header h1,
.box-header .box-title,
.modal-title {
    font-family: 'Nunito', 'Poppins', sans-serif !important;
    font-weight: 700 !important;
}

.content-wrapper h1 { font-size: 1.3rem  !important; }
.content-wrapper h2 { font-size: 1.15rem !important; }
.content-wrapper h3 { font-size: 1rem    !important; }
.content-wrapper h4 { font-size: 0.9rem  !important; }

/* ============================================================
   3. HEADER / NAVBAR PRINCIPALE
============================================================ */
.main-header,
.skin-black .main-header,
.skin-black-light .main-header,
.skin-blue .main-header,
.skin-blue-light .main-header {
    background: var(--bdc-header-bg) !important;
    border-bottom: 2px solid var(--bdc-rose) !important;
    box-shadow: 0 2px 12px rgba(13,9,32,0.45) !important;
}

.main-header .navbar,
.skin-black .main-header .navbar,
.skin-blue .main-header .navbar {
    background: transparent !important;
    border: none !important;
}

/* Logo dans le header */
.main-header .logo,
.skin-black .main-header .logo,
.skin-blue .main-header .logo {
    background: rgba(0,0,0,0.2) !important;
    border-right: 1px solid var(--bdc-header-border) !important;
    color: var(--bdc-rose-light) !important;
    font-family: 'Nunito', sans-serif !important;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
}

.main-header .logo:hover,
.skin-black .main-header .logo:hover {
    background: rgba(0,0,0,0.3) !important;
}

/* Liens header */
.main-header .navbar .nav > li > a,
.skin-black .main-header .navbar .nav > li > a {
    color: rgba(255,255,255,0.75) !important;
    transition: color 0.2s !important;
}

.main-header .navbar .nav > li > a:hover,
.skin-black .main-header .navbar .nav > li > a:hover {
    color: var(--bdc-rose-light) !important;
    background: rgba(139,111,217,0.1) !important;
}

/* Sidebar toggle */
.main-header .navbar .sidebar-toggle,
.skin-black .main-header .navbar .sidebar-toggle {
    color: rgba(255,255,255,0.65) !important;
}

.main-header .navbar .sidebar-toggle:hover,
.skin-black .main-header .navbar .sidebar-toggle:hover {
    color: var(--bdc-rose-light) !important;
    background: rgba(139,111,217,0.1) !important;
}

/* Notification badges */
.main-header .navbar .nav > li > .label,
.main-header .navbar .nav > li > a > .label {
    background-color: var(--bdc-or) !important;
    color: var(--bdc-nuit) !important;
    font-weight: 700 !important;
}

/* ============================================================
   4. SIDEBAR
============================================================ */
.main-sidebar,
.left-side,
.skin-black .main-sidebar,
.skin-blue .main-sidebar {
    background: var(--bdc-sidebar-bg) !important;
    border-right: 1px solid rgba(139,111,217,0.12) !important;
    box-shadow: 2px 0 14px rgba(13,9,32,0.4) !important;
}

/* En-têtes de section sidebar */
.sidebar-menu > .header,
.sidebar > .user-panel,
.skin-black .sidebar-menu > .header {
    color: rgba(184,165,232,0.6) !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(139,111,217,0.12) !important;
    font-size: 0.63rem !important;
    letter-spacing: 2.5px !important;
    font-weight: 700 !important;
}

/* Items sidebar */
.sidebar-menu > li > a,
.skin-black .sidebar-menu > li > a {
    color: var(--bdc-sidebar-item) !important;
    font-size: 0.83rem !important;
    font-weight: 500 !important;
    border-left: 3px solid transparent !important;
    transition: all 0.2s !important;
}

.sidebar-menu > li > a:hover,
.skin-black .sidebar-menu > li > a:hover {
    color: #fff !important;
    background: var(--bdc-sidebar-hover-bg) !important;
    border-left-color: var(--bdc-rose) !important;
}

/* Item actif */
.sidebar-menu > li.active > a,
.sidebar-menu > li.menu-open > a,
.skin-black .sidebar-menu > li.active > a {
    color: var(--bdc-sidebar-active-text) !important;
    background: var(--bdc-sidebar-active-bg) !important;
    border-left-color: var(--bdc-rose) !important;
    font-weight: 600 !important;
}

/* Icônes sidebar */
.sidebar-menu > li > a > .fa,
.sidebar-menu > li > a > .fas,
.sidebar-menu > li > a > .far,
.sidebar-menu > li > a > .fab {
    color: rgba(139,111,217,0.7) !important;
    margin-right: 8px !important;
}

.sidebar-menu > li.active > a > .fa,
.sidebar-menu > li.active > a > .fas {
    color: var(--bdc-rose-light) !important;
}

/* Treeview sous-menus */
.treeview-menu {
    background: rgba(0,0,0,0.2) !important;
}

.treeview-menu > li > a {
    color: rgba(255,255,255,0.55) !important;
    font-size: 0.79rem !important;
    padding-left: 30px !important;
    font-weight: 400 !important;
}

.treeview-menu > li > a:hover,
.treeview-menu > li.active > a {
    color: var(--bdc-rose-light) !important;
    background: transparent !important;
}

/* Scrollbar sidebar */
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(139,111,217,0.25); border-radius: 2px; }

/* ============================================================
   5. CONTENU — WRAPPER PRINCIPAL
============================================================ */
.content-wrapper {
    background: var(--bdc-cream) !important;
}

.content-header {
    padding: 14px 20px 8px !important;
    border-bottom: 1px solid var(--bdc-border) !important;
    background: #fff !important;
}

.content-header h1 {
    font-size: 1.15rem !important;
    color: var(--bdc-nuit) !important;
    font-weight: 700 !important;
    font-family: 'Nunito', sans-serif !important;
}

.content-header h1 small {
    font-family: 'Nunito', sans-serif !important;
    font-size: 0.75rem !important;
    color: var(--bdc-muted) !important;
}

.breadcrumb {
    background: transparent !important;
    padding: 4px 0 !important;
}

.breadcrumb > li + li::before {
    color: var(--bdc-rose) !important;
}

.breadcrumb > .active {
    color: var(--bdc-rose-dark) !important;
}

/* ============================================================
   6. BOXES / CARDS (AdminLTE)
============================================================ */
.box {
    border-top: 3px solid var(--bdc-rose) !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 6px rgba(232,105,58,0.1) !important;
}

.box-header {
    border-bottom: 1px solid var(--bdc-border) !important;
    background: #fff !important;
    color: var(--bdc-text) !important;
}

.box-header .box-title {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: var(--bdc-nuit) !important;
    font-family: 'Nunito', sans-serif !important;
}

.box-body {
    background: #fff !important;
}

.box-footer {
    background: var(--bdc-cream) !important;
    border-top: 1px solid var(--bdc-border) !important;
}

/* Box solid */
.box.box-solid > .box-header {
    background: var(--bdc-rose-dark) !important;
    border-bottom-color: var(--bdc-rose) !important;
}

.box.box-solid > .box-header .box-title {
    color: #fff !important;
}

.box.box-solid > .box-header .box-tools .btn {
    color: rgba(255,255,255,0.8) !important;
}

.box.box-solid > .box-header > .box-header {
    background: transparent !important;
}
.box.box-solid > .box-header > .box-header .box-title {
    color: #fff !important;
}

/* Small boxes (stats) */
.small-box {
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 10px rgba(232,105,58,0.12) !important;
}

.small-box > .inner {
    padding: 14px !important;
}

.small-box h3 {
    font-family: 'Nunito', sans-serif !important;
    font-weight: 800 !important;
    font-size: 1.6rem !important;
}

.small-box:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(232,105,58,0.2) !important;
    transition: all 0.25s !important;
}

/* ============================================================
   7. BOUTONS
============================================================ */
.btn {
    border-radius: 5px !important;
    font-family: 'Nunito', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.3px !important;
    transition: all 0.22s !important;
}

.btn-primary {
    background: var(--bdc-rose) !important;
    border-color: var(--bdc-rose-dark) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--bdc-rose-dark) !important;
    border-color: #5A40A9 !important;
    color: #fff !important;
    box-shadow: 0 3px 12px rgba(232,105,58,0.4) !important;
}

.btn-success {
    background: var(--bdc-success) !important;
    border-color: #1e7e34 !important;
    color: #fff !important;
}

.btn-warning {
    background: var(--bdc-or) !important;
    border-color: var(--bdc-or-dark) !important;
    color: var(--bdc-nuit) !important;
    font-weight: 700 !important;
}

.btn-warning:hover {
    background: var(--bdc-or-dark) !important;
    border-color: #B08010 !important;
    color: #fff !important;
}

.btn-danger {
    background: var(--bdc-error) !important;
    border-color: #bd2130 !important;
    color: #fff !important;
}

.btn-default {
    background: #fff !important;
    border-color: var(--bdc-border) !important;
    color: var(--bdc-text) !important;
}

.btn-default:hover {
    background: var(--bdc-cream) !important;
    border-color: var(--bdc-rose-light) !important;
    color: var(--bdc-rose-dark) !important;
}

.btn-info {
    background: var(--bdc-cyan) !important;
    border-color: var(--bdc-cyan-dark) !important;
    color: #fff !important;
}

/* ============================================================
   8. FORMULAIRES
============================================================ */
.form-control {
    border: 1.5px solid var(--bdc-border) !important;
    border-radius: 5px !important;
    font-family: 'Nunito', sans-serif !important;
    font-size: 0.85rem !important;
    color: var(--bdc-text) !important;
    background: #fff !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}

.form-control:focus {
    border-color: var(--bdc-rose) !important;
    box-shadow: 0 0 0 3px rgba(232,105,58,0.12) !important;
    background: #fff !important;
    outline: none !important;
}

.form-control::placeholder {
    color: #9A8AB8 !important;
    font-weight: 400 !important;
}

.control-label,
label {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: var(--bdc-text) !important;
}

/* Select2 */
.select2-container--default .select2-selection--single {
    border: 1.5px solid var(--bdc-border) !important;
    border-radius: 5px !important;
    background: #fff !important;
    height: 34px !important;
}

.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--bdc-rose) !important;
    box-shadow: 0 0 0 3px rgba(232,105,58,0.12) !important;
}

.select2-container--default .select2-results__option--highlighted {
    background: var(--bdc-rose) !important;
}

/* ============================================================
   9. TABLEAUX (DataTables)
============================================================ */
.table > thead > tr > th {
    background: var(--bdc-nuit) !important;
    color: #fff !important;
    font-family: 'Nunito', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    border-bottom: 2px solid var(--bdc-rose-dark) !important;
    white-space: nowrap !important;
    padding: 10px 12px !important;
}

.table > thead > tr > th a,
.table > thead > tr > th a:hover {
    color: #fff !important;
}

table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
    color: rgba(255,255,255,0.55) !important;
}

.table > tbody > tr > td {
    font-size: 0.83rem !important;
    color: var(--bdc-text) !important;
    vertical-align: middle !important;
    border-color: var(--bdc-border) !important;
    padding: 8px 12px !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background: rgba(248,245,255,0.8) !important;
}

.table > tbody > tr:hover > td {
    background: rgba(139,111,217,0.05) !important;
}

/* DataTables wrapper */
.dataTables_wrapper .dataTables_filter input {
    border: 1.5px solid var(--bdc-border) !important;
    border-radius: 5px !important;
    padding: 4px 10px !important;
    font-family: 'Nunito', sans-serif !important;
    font-size: 0.82rem !important;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--bdc-rose) !important;
    box-shadow: 0 0 0 2px rgba(232,105,58,0.12) !important;
    outline: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--bdc-rose) !important;
    color: #fff !important;
    border-color: var(--bdc-rose-dark) !important;
    border-radius: 5px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--bdc-rose-light) !important;
    color: var(--bdc-nuit) !important;
    border-color: var(--bdc-rose) !important;
    border-radius: 5px !important;
}

.dataTables_wrapper .dataTables_info {
    font-size: 0.8rem !important;
    color: var(--bdc-muted) !important;
}

/* ============================================================
   10. BADGES & LABELS
============================================================ */
.badge,
.label {
    font-family: 'Nunito', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.68rem !important;
    border-radius: 4px !important;
}

.badge-primary,
.label-primary {
    background: var(--bdc-rose) !important;
    color: #fff !important;
}

.badge-success,
.label-success {
    background: var(--bdc-success) !important;
    color: #fff !important;
}

.badge-warning,
.label-warning {
    background: var(--bdc-or) !important;
    color: var(--bdc-nuit) !important;
}

.badge-danger,
.label-danger {
    background: var(--bdc-error) !important;
    color: #fff !important;
}

.badge-info,
.label-info {
    background: var(--bdc-cyan) !important;
    color: #fff !important;
}

/* ============================================================
   11. ALERTS
============================================================ */
.alert {
    border-radius: 5px !important;
    border: none !important;
    border-left: 4px solid !important;
    font-size: 0.85rem !important;
    font-family: 'Nunito', sans-serif !important;
}

.alert-success {
    background: rgba(40,167,69,0.08) !important;
    border-left-color: var(--bdc-success) !important;
    color: #155724 !important;
}

.alert-warning {
    background: rgba(245,200,66,0.1) !important;
    border-left-color: var(--bdc-or) !important;
    color: #856404 !important;
}

.alert-danger {
    background: rgba(220,53,69,0.08) !important;
    border-left-color: var(--bdc-error) !important;
    color: #721c24 !important;
}

.alert-info {
    background: rgba(108,197,207,0.1) !important;
    border-left-color: var(--bdc-cyan) !important;
    color: #0c5460 !important;
}

/* ============================================================
   12. MODALES
============================================================ */
.modal-header {
    background: var(--bdc-nuit) !important;
    border-bottom: 2px solid var(--bdc-rose) !important;
    border-radius: 6px 6px 0 0 !important;
}

.modal-title {
    color: #fff !important;
    font-family: 'Nunito', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
}

.modal-header .close {
    color: rgba(255,255,255,0.75) !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

.modal-header .close:hover {
    color: var(--bdc-rose-light) !important;
}

.modal-footer {
    background: var(--bdc-cream) !important;
    border-top: 1px solid var(--bdc-border) !important;
}

/* ============================================================
   13. TABS (nav-tabs)
============================================================ */
.nav-tabs > li > a {
    color: var(--bdc-muted) !important;
    font-size: 0.83rem !important;
    font-weight: 600 !important;
    border-radius: 5px 5px 0 0 !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
    color: var(--bdc-nuit) !important;
    border-color: var(--bdc-border) var(--bdc-border) transparent !important;
    border-top: 3px solid var(--bdc-rose) !important;
}

/* ============================================================
   14. FOOTER
============================================================ */
.main-footer {
    background: #fff !important;
    border-top: 1px solid var(--bdc-border) !important;
    color: var(--bdc-muted) !important;
    font-size: 0.76rem !important;
    font-family: 'Nunito', sans-serif !important;
}

/* ============================================================
   15. SCROLLBAR GLOBALE
============================================================ */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bdc-cream);
}

::-webkit-scrollbar-thumb {
    background: rgba(139,111,217,0.3);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(139,111,217,0.55);
}

/* ============================================================
   16. SweetAlert2 — thème Bodecor
============================================================ */
.swal2-popup {
    border-radius: 8px !important;
    font-family: 'Nunito', sans-serif !important;
}

.swal2-title {
    font-family: 'Nunito', sans-serif !important;
    color: var(--bdc-nuit) !important;
    font-weight: 700 !important;
}

.swal2-confirm {
    background: var(--bdc-rose) !important;
    color: #fff !important;
    border-radius: 5px !important;
}

.swal2-confirm:hover {
    background: var(--bdc-rose-dark) !important;
}

.swal2-cancel {
    background: #fff !important;
    color: var(--bdc-text) !important;
    border: 1px solid var(--bdc-border) !important;
    border-radius: 5px !important;
}

/* ============================================================
   17. USER PANEL SIDEBAR
============================================================ */
.user-panel {
    border-bottom: 1px solid rgba(139,111,217,0.15) !important;
    padding: 12px 16px !important;
}

.user-panel .info {
    color: rgba(255,255,255,0.75) !important;
}

.user-panel .info a {
    color: var(--bdc-rose-light) !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
}

.user-panel .info p {
    font-size: 0.72rem !important;
    color: rgba(255,255,255,0.5) !important;
    margin: 0 !important;
}

/* ============================================================
   18. NAVBAR DROPDOWN MENUS
============================================================ */
.navbar-nav > .open > .dropdown-menu,
.main-header .navbar .open .dropdown-menu {
    background: var(--bdc-nuit) !important;
    border: 1px solid var(--bdc-header-border) !important;
    box-shadow: 0 4px 18px rgba(13,9,32,0.45) !important;
}

.navbar-nav > .open > .dropdown-menu > li > a,
.main-header .navbar .open .dropdown-menu > li > a {
    color: rgba(255,255,255,0.75) !important;
    font-size: 0.83rem !important;
}

.navbar-nav > .open > .dropdown-menu > li > a:hover,
.main-header .navbar .open .dropdown-menu > li > a:hover {
    background: rgba(139,111,217,0.1) !important;
    color: var(--bdc-rose-light) !important;
}

/* ============================================================
   19. USER MENU DROPDOWN
============================================================ */
.navbar-nav > .user-menu > .dropdown-menu > li.user-header {
    background: var(--bdc-nuit) !important;
    border-bottom: 2px solid var(--bdc-rose) !important;
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-header p {
    color: rgba(255,255,255,0.7) !important;
}

.navbar-nav > .user-menu > .dropdown-menu > .user-footer {
    background: var(--bdc-rose-dark) !important;
}

.navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn-default {
    background: transparent !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
}

.navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn-default:hover {
    background: rgba(255,255,255,0.15) !important;
    color: #fff !important;
}

/* ============================================================
   20. STOCK VENTE — Couleurs thématiques Bodecor
============================================================ */
/* En-tête bloc Quantités — Violet Bodecor */
.stock-qty-header {
    background: var(--bdc-violet) !important;
    color: #fff !important;
}

/* En-tête bloc Valeurs — Cyan Bodecor */
.stock-val-header {
    background: var(--bdc-cyan-dark) !important;
    color: #fff !important;
}

/* En-tête Marge — Or Bodecor */
.stock-margin-header {
    background: var(--bdc-or-dark) !important;
    color: #fff !important;
}

/* Badge "Stock Vente" dans la navigation */
.bdc-badge-vente {
    display: inline-block;
    background: linear-gradient(135deg, var(--bdc-rose), var(--bdc-violet));
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    letter-spacing: 0.5px;
    vertical-align: middle;
    margin-left: 4px;
}

/* ============================================================
   21. COMPOSANTS BODECOR SPÉCIAUX
============================================================ */

/* Couleur accent pour filtres / pill actif */
.filter-section .box {
    border-top-color: var(--bdc-violet) !important;
}

/* Bouton flottant Stock Consultation */
.bdc-fab {
    background: linear-gradient(135deg, var(--bdc-rose), var(--bdc-rose-dark)) !important;
    box-shadow: 0 4px 16px rgba(232,105,58,0.45) !important;
}

/* Dashboard petites stats */
.bg-bodecor-rose  { background: var(--bdc-rose)   !important; }
.bg-bodecor-violet{ background: var(--bdc-violet)  !important; }
.bg-bodecor-cyan  { background: var(--bdc-cyan)    !important; }
.bg-bodecor-or    { background: var(--bdc-or)      !important; color: var(--bdc-nuit) !important; }