/**
 * Design ERP SaaS Premium — Thème Apple
 * Sidebar + header sombres, contenu structuré, responsive, sans blanc dominant
 */

/* ========== Tokens (coquille sombre type SaaS) ========== */
:root {
    --erp-sidebar: #0f172a;
    --erp-sidebar-hover: rgba(255, 255, 255, 0.06);
    --erp-sidebar-active: rgba(0, 113, 227, 0.2);
    --erp-sidebar-text: #e2e8f0;
    --erp-sidebar-text-dim: #94a3b8;
    --erp-header: #1e293b;
    --erp-header-text: #f1f5f9;
    --erp-page: #f1f5f9;
    --erp-surface: #ffffff;
    --erp-surface-elevated: #ffffff;
    --erp-border: #e2e8f0;
    --erp-text: #0f172a;
    --erp-text-secondary: #475569;
    --erp-accent: #2563eb;
    --erp-accent-hover: #1d4ed8;
    --erp-radius: 10px;
    --erp-radius-sm: 6px;
    --erp-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    --erp-shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --erp-shadow-card-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
}

/* ========== Base ========== */
body {
    background: var(--erp-page) !important;
    color: var(--erp-text) !important;
}

h1, h2, h3, h4, h5, h6 { color: var(--erp-text) !important; }
h1 { font-size: 1.5rem !important; line-height: 1.3 !important; font-weight: 600 !important; }
h2 { font-size: 1.125rem !important; line-height: 1.35 !important; font-weight: 600 !important; }

/* ========== Zone contenu (fond gris, pas blanc) ========== */
#content {
    background: var(--erp-page) !important;
    padding: 0 1.5rem 2rem !important;
    min-height: calc(100vh - 56px);
}
#content .row,
#content .col-lg-12,
#content .col-md-12,
#content .col-sm-12 {
    background: transparent !important;
}

/* ========== Top bar premium — dimensionnée, boutons pro et cohérents ========== */
.navbar {
    background: var(--erp-header) !important;
    background-image: none !important;
    border: none !important;
    min-height: 56px !important;
    height: 56px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
}
.navbar .container {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 56px !important;
    width: 100% !important;
    max-width: 100% !important;
}
.navbar a { color: var(--erp-header-text) !important; }

a.navbar-brand {
    display: flex !important;
    align-items: center !important;
    /*padding: 0 1rem 0 0 !important;*/
    margin-right: 1rem !important;
    flex-shrink: 0 !important;
}
.btn-visible-sm.visible-xs { flex-shrink: 0 !important; }
a.navbar-brand span {
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 1.125rem !important;
    letter-spacing: -0.02em !important;
}
.btn-visible-sm .btn { color: var(--erp-header-text) !important; }

/* Groupe boutons header : à l'extrême droite de la top bar */
.header-nav {
    background: transparent !important;
    color: var(--erp-header-text) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-direction: row-reverse !important;
    gap: 0 !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    flex-shrink: 0 !important;
}
.header-nav .nav.navbar-nav.pull-right {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.header-nav .nav > li { display: flex !important; align-items: center !important; margin: 0 !important; }
.header-nav .nav > li > a { margin: 0 1px !important; }
.header-nav .nav > li:last-child > a { margin-right: 0 !important; }

/* Tous les boutons top bar : même hauteur, style cohérent */
.header-nav a.btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 12px !important;
    margin: 0 2px !important;
    background: transparent !important;
    color: var(--erp-header-text) !important;
    border: 1px solid transparent !important;
    border-radius: var(--erp-radius-sm) !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    transition: background 0.15s, color 0.15s, border-color 0.15s !important;
}
.header-nav a.btn i {
    font-size: 1rem !important;
}
.header-nav a.btn span:not(.number):not(.badge) {
    margin-left: 6px !important;
}
/* Ghost hover pour tous */
.header-nav a.btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border-color: transparent !important;
}
/* Un seul bouton primaire (APPEL CLIENT) */
.header-nav a.btn.bdarkGreen {
    background: var(--erp-accent) !important;
    color: #fff !important;
    border-color: var(--erp-accent) !important;
    padding: 0 14px !important;
}
.header-nav a.btn.bdarkGreen:hover {
    background: var(--erp-accent-hover) !important;
    border-color: var(--erp-accent-hover) !important;
    color: #fff !important;
}
/* POS et autres boutons colorés → style secondaire (bordure légère) */
.header-nav a.btn.bblue {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}
.header-nav a.btn.bblue:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}
/* Alertes (vendeurs, produits) : ghost + badge */
.header-nav a.btn.blightOrange {
    background: transparent !important;
    border-color: transparent !important;
}
.header-nav a.btn.blightOrange:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}
.header-nav a.btn .number {
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    line-height: 18px !important;
    border-radius: 9px !important;
    background: #ef4444 !important;
    color: #fff !important;
}

.navbar #search {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: var(--erp-radius-sm) !important;
}
.navbar #search input { color: #fff !important; }
.navbar #search i { color: rgba(255, 255, 255, 0.7) !important; }

/* ========== Sidebar — différence premium menu vs sous-menu ========== */
.lt td.sidebar-con {
    background: var(--erp-sidebar) !important;
    border: none !important;
   /* width: 260px !important;*/
}
#sidebar-left {
    background: var(--erp-sidebar) !important;
    /*padding: 1rem 0 1.5rem !important;*/
   /* min-width: 260px !important;*/
    border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
}
/* Mode minimisé : s’inspirer du style de base (style.css) — largeurs 40px + comportement identique */
.sidebar-minified .lt td.sidebar-con {
    width: 40px !important;
    min-width: 40px !important;
    overflow: visible !important;
}
#sidebar-left.minified {
    width: 40px !important;
    min-width: 40px !important;
}
/* Liens et icônes : comme en base — strip 40px, pas de padding qui fait déborder */
#sidebar-left.minified .nav.main-menu > li > a,
#sidebar-left.minified .sidebar-nav > ul > li > a {
    width: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    text-align: center !important;
}
#sidebar-left.minified .nav.main-menu > li > a > i,
#sidebar-left.minified .sidebar-nav > ul > li > a > i {
    width: 40px !important;
    margin: 0 !important;
    text-align: center !important;
}
/* Flyouts (label + sous-menus au survol) : couleurs Apple au lieu de #000 / #222 du base */
#sidebar-left.minified .sidebar-nav > ul > li > a .text,
#sidebar-left.minified .sidebar-nav > ul > li:hover > a .text {
    background: var(--erp-sidebar) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--erp-sidebar-text) !important;
}
#sidebar-left.minified .sidebar-nav > ul > li:hover > ul {
    background: var(--erp-sidebar) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
#sidebar-left.minified .sidebar-nav > ul > li.active > a .text {
    background: var(--erp-sidebar-active) !important;
    border-color: var(--erp-accent) !important;
    color: var(--erp-sidebar-text) !important;
}

/* Bloc Profil / Déconnexion en bas du menu latéral */
.sidebar-menu-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin-top: 12px !important;
    padding: 12px 0 0 !important;
}
.sidebar-menu-footer .nav li a {
    color: var(--erp-sidebar-text-dim) !important;
    padding: 10px 1rem 10px 2.5rem !important;
    font-size: 0.8125rem !important;
}
.sidebar-menu-footer .nav li a:hover {
    color: var(--erp-sidebar-text) !important;
    background: var(--erp-sidebar-hover) !important;
}
.sidebar-menu-footer .divider {
    background: rgba(255, 255, 255, 0.06) !important;
}
.sidebar-menu-footer .dropdown-header {
    color: var(--erp-sidebar-text-dim) !important;
    font-size: 0.6875rem !important;
}

.sidebar-nav > ul {
    padding: 0 0.5rem !important;
    margin: 0 !important;
}

/* ——— Niveau 1 : MENU PRINCIPAL (premium, bien mis en avant) ——— */
.nav.main-menu > li > a {
    background: transparent !important;
    color: var(--erp-sidebar-text) !important;
    border: none !important;
    height: 44px !important;
/*    padding: 0 0 0 14px !important;*/
    line-height: 44px !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    border-radius: var(--erp-radius-sm) !important;
    transition: background 0.15s, color 0.15s, border-color 0.15s !important;
    border-left: 3px solid transparent !important;
}
.nav.main-menu > li > a > i {
    width: 40px !important;
    margin: 0 !important;
    text-align: center !important;
    font-size: 1.125rem !important;
    opacity: 0.95 !important;
}
.nav.main-menu > li > a:hover {
    background: var(--erp-sidebar-hover) !important;
    color: #fff !important;
}
.nav.main-menu > li.active > a,
.nav.main-menu > li.active > a:hover {
    background: var(--erp-sidebar-active) !important;
    color: #fff !important;
    border-left-color: var(--erp-accent) !important;
}
.nav.main-menu > li > a .chevron {
    opacity: 0.8 !important;
}
.nav.main-menu > li > a .chevron.closed:after,
.nav.main-menu > li > a .chevron.opened:after {
    color: var(--erp-sidebar-text-dim) !important;
}

/* ——— Niveau 2+ : SOUS-MENUS (clairement différenciés, plus discrets) ——— */
.nav.main-menu > li > ul {
    background: rgba(0, 0, 0, 0.15) !important;
    border-radius: 0 0 var(--erp-radius-sm) var(--erp-radius-sm) !important;
    margin: 0 0 4px 0 !important;
    padding: 6px 0 !important;
    border-left: 3px solid rgba(255, 255, 255, 0.08) !important;
}
.nav.main-menu > li > ul > li > a,
.nav.main-menu > li > ul > li > ul > li > a,
.nav.main-menu > li > ul > li > ul > li > ul > li > a {
    background: transparent !important;
    color: var(--erp-sidebar-text-dim) !important;
    border: none !important;
    height: 36px !important;
    padding: 0 0 0 2.5rem !important;
    line-height: 36px !important;
    font-size: 0.8125rem !important;
    font-weight: 400 !important;
    border-radius: 4px !important;
    margin: 0 6px !important;
    transition: background 0.15s, color 0.15s !important;
}
.nav.main-menu > li > ul > li > a > i,
.nav.main-menu > li > ul > li > ul > li > a > i {
    width: 28px !important;
    font-size: 0.875rem !important;
    opacity: 0.75 !important;
}
.nav.main-menu > li > ul > li > a:hover,
.nav.main-menu > li > ul > li > ul > li > a:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--erp-sidebar-text) !important;
}
.nav.main-menu > li > ul > li.active > a {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--erp-sidebar-text) !important;
    font-weight: 500 !important;
}
.nav.main-menu > li > ul > li > ul > li > a {
    padding-left: 3.25rem !important;
    font-size: 0.75rem !important;
}
.nav.main-menu > li > ul > li > ul > li > ul > li > a {
    padding-left: 4rem !important;
    font-size: 0.75rem !important;
}
.nav.main-menu > li > ul > li > a .chevron.closed:after,
.nav.main-menu > li > ul > li > a .chevron.opened:after {
    color: var(--erp-sidebar-text-dim) !important;
    font-size: 0.625rem !important;
}

a#main-menu-toggle { color: var(--erp-sidebar-text) !important; }
a#main-menu-act i {
    background: var(--erp-sidebar-hover) !important;
    color: var(--erp-sidebar-text) !important;
}

/* Minified layout (largeurs, colonne) géré par style.css ; couleurs éventuelles par light/blue */

/* ========== Fil d'Ariane (breadcrumb) — design premium ========== */
.breadcrumb {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    background: var(--erp-surface) !important;
    background-image: none !important;
    border: 1px solid var(--erp-border) !important;
    border-radius: var(--erp-radius-sm) !important;
    color: var(--erp-text) !important;
    min-height: 48px !important;
    padding: 0 1.25rem !important;
    margin-bottom: 1.25rem !important;
    box-shadow: var(--erp-shadow) !important;
    font-size: 0.875rem !important;
    list-style: none !important;
}
.breadcrumb > li {
    display: inline-flex !important;
    align-items: center !important;
}
.breadcrumb > li:not(.right_log) + li:not(.right_log)::before {
    content: "\f054" !important;
    font-family: "FontAwesome" !important;
    padding: 0 0.5rem !important;
    color: var(--erp-text-secondary) !important;
    font-size: 0.625rem !important;
    opacity: 0.8 !important;
}
.breadcrumb > li a {
    color: var(--erp-text-secondary) !important;
    text-decoration: none !important;
    transition: color 0.15s !important;
}
.breadcrumb > li a:hover { color: var(--erp-accent) !important; }
.breadcrumb > .active {
    color: var(--erp-text) !important;
    font-weight: 600 !important;
}
.breadcrumb .right_log {
    margin-left: auto !important;
    color: var(--erp-text-secondary) !important;
    font-size: 0.75rem !important;
    font-weight: 400 !important;
}

/* ========== Box / Cartes (blanc sur gris, ombre nette) ========== */
.box {
    margin-bottom: 1.5rem !important;
    border-radius: var(--erp-radius) !important;
    box-shadow: var(--erp-shadow-card) !important;
    overflow: hidden !important;
    border: 1px solid var(--erp-border) !important;
    background: var(--erp-surface) !important;
    transition: box-shadow 0.2s !important;
}
.box:hover { box-shadow: var(--erp-shadow-card-hover) !important; }

.box .box-header {
    background: var(--erp-surface) !important;
    background-image: none !important;
    color: var(--erp-text) !important;
    border-bottom: 1px solid var(--erp-border) !important;
    height: 52px !important;
    padding: 0 1.25rem !important;
}
.box .box-header h2,
.box .box-header h2.blue {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 52px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--erp-text) !important;
}
.box .box-header h2 i {
    margin: 0 0.5rem 0 0 !important;
    color: var(--erp-text-secondary) !important;
}
.box .box-content {
    padding: 1.25rem !important;
    background: var(--erp-surface) !important;
}
.box .box-content p.introtext {
    background: var(--erp-page) !important;
    border-bottom: 1px solid var(--erp-border) !important;
    padding: 0.75rem 1.25rem !important;
    margin: -1.25rem -1.25rem 1.25rem -1.25rem !important;
    color: var(--erp-text-secondary) !important;
    font-size: 0.875rem !important;
}

/* ========== Quick buttons (sobres : accent + neutres) ========== */
.quick-button,
.quick-button.small {
    border-radius: var(--erp-radius) !important;
    box-shadow: var(--erp-shadow) !important;
    transition: box-shadow 0.2s, transform 0.15s, background 0.2s !important;
    border: 1px solid var(--erp-border) !important;
    font-weight: 500 !important;
}
.quick-button:hover,
.quick-button.small:hover {
    box-shadow: var(--erp-shadow-card) !important;
    text-decoration: none !important;
    transform: translateY(-2px);
}
.quick-button.small.bblue,
.quick-button.small.bdarkGreen {
    background: var(--erp-accent) !important;
    border-color: var(--erp-accent) !important;
    color: #fff !important;
}
.quick-button.small.bblue:hover,
.quick-button.small.bdarkGreen:hover {
    background: var(--erp-accent-hover) !important;
    border-color: var(--erp-accent-hover) !important;
    color: #fff !important;
}
.quick-button.small.blightOrange,
.quick-button.small.bred,
.quick-button.small.bpink,
.quick-button.small.blightBlue,
.quick-button.small.bgrey {
    background: var(--erp-surface) !important;
    border-color: var(--erp-border) !important;
    color: var(--erp-text) !important;
}
.quick-button.small.blightOrange:hover,
.quick-button.small.bred:hover,
.quick-button.small.bpink:hover,
.quick-button.small.blightBlue:hover,
.quick-button.small.bgrey:hover {
    background: var(--erp-page) !important;
    color: var(--erp-text) !important;
}
.quick-button.small .white,
.quick-button.small p { color: inherit !important; }
.quick-button.small p { font-size: 0.6875rem !important; }

/* ========== Boutons & formulaires ========== */
.btn, .form-control, .input-group-addon { border-radius: var(--erp-radius-sm) !important; }
.btn { font-weight: 500 !important; }
.btn-primary {
    background: var(--erp-accent) !important;
    border-color: var(--erp-accent) !important;
}
.btn-primary:hover {
    background: var(--erp-accent-hover) !important;
    border-color: var(--erp-accent-hover) !important;
}
.btn-default {
    background: var(--erp-surface) !important;
    border: 1px solid var(--erp-border) !important;
    color: var(--erp-text) !important;
}
.form-control { border: 1px solid var(--erp-border) !important; }
.form-control:focus {
    border-color: var(--erp-accent) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

/* ========== Tableaux ========== */
.table > thead:first-child > tr:first-child > th,
.table-striped thead tr.primary:nth-child(odd) th {
    background: var(--erp-page) !important;
    color: var(--erp-text) !important;
    border-color: var(--erp-border) !important;
    font-weight: 600 !important;
    font-size: 0.6875rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td { border-color: var(--erp-border) !important; }
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
    background: var(--erp-page) !important;
}

/* Onglets */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    background: var(--erp-surface) !important;
    border-color: var(--erp-border) !important;
    color: var(--erp-accent) !important;
    font-weight: 500 !important;
}

/* ========== Panels, well, small-box ========== */
.panel, .well, .small-box {
    border-radius: var(--erp-radius) !important;
    box-shadow: var(--erp-shadow) !important;
    border: 1px solid var(--erp-border) !important;
}
.panel-heading {
    background: var(--erp-page) !important;
    border-bottom: 1px solid var(--erp-border) !important;
}

/* ========== Alertes ========== */
.alert { border-radius: var(--erp-radius-sm) !important; }
.alert-success { background: #ecfdf5 !important; border-color: #a7f3d0 !important; color: #065f46 !important; }
.alert-danger { background: #fef2f2 !important; border-color: #fecaca !important; color: #991b1b !important; }
.alert-warning { background: #fffbeb !important; border-color: #fde68a !important; color: #92400e !important; }
.alert-info { background: #eff6ff !important; border-color: #bfdbfe !important; color: #1e40af !important; }

/* ========== Dropdown ========== */
.dropdown-menu {
    border-radius: var(--erp-radius-sm) !important;
    box-shadow: var(--erp-shadow-card-hover) !important;
    border: 1px solid var(--erp-border) !important;
}
.dropdown-menu li a { color: var(--erp-text) !important; padding: 0.5rem 1rem !important; }
.dropdown-menu li a:hover { background: var(--erp-page) !important; }
.dropdown-menu .dropdown-header {
    color: var(--erp-text-secondary) !important;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

/* ========== Modales ========== */
.modal-content {
    border-radius: var(--erp-radius) !important;
    box-shadow: var(--erp-shadow-card-hover) !important;
    border: 1px solid var(--erp-border) !important;
}

/* ========== Responsive (ERP SaaS) ========== */
@media (max-width: 991px) {
    /* Uniquement les 2 cellules du layout (sidebar + contenu), pas les <td> des DataTables imbriqués */
    .lt { display: block !important; }
    .lt > tbody > tr > td,
    .lt > tr > td {
        display: block !important;
    }

    .lt td.sidebar-con {
        position: fixed !important;
        top: 56px !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 280px !important;
        max-width: 85vw !important;
        z-index: 1040 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.25s ease !important;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.2) !important;
        overflow-y: auto !important;
    }
    body.sidebar-open .lt td.sidebar-con {
        transform: translateX(0) !important;
    }
    body.sidebar-open .sidebar-backdrop {
        opacity: 1 !important;
        visibility: visible !important;
    }

    .lt td.content-con {
        width: 100% !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
    #content {
        padding: 0 1rem 1.5rem !important;
    }
    .navbar .container { width: 100% !important; }
}

/* Backdrop pour overlay menu (ajouté par JS si besoin) */
.sidebar-backdrop {
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 1035;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, visibility 0.25s;
}

@media (min-width: 992px) {
    .sidebar-backdrop { display: none !important; }
    #sidebar_menu.collapse { display: block !important; height: auto !important; visibility: visible !important; }
}

#loading { background-color: var(--erp-page) !important; }

/* ========== Pied de page (footer) — design premium ========== */
#app_wrapper footer {
    background: var(--erp-header) !important;
    color: var(--erp-header-text) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 1rem 1.5rem !important;
    margin-top: 0 !important;
    text-align: center !important;
    font-size: 0.8125rem !important;
}
#app_wrapper footer p {
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.85) !important;
}
#app_wrapper footer a {
    color: rgba(255, 255, 255, 0.9) !important;
    text-decoration: none !important;
}
#app_wrapper footer a:hover {
    color: #fff !important;
    text-decoration: underline !important;
}
#app_wrapper footer #toTop {
    color: var(--erp-accent) !important;
}
#app_wrapper footer #toTop:hover {
    color: var(--erp-accent-hover) !important;
}

/* ========== Page Login — design premium (split, glass, typo, micro-animations) ========== */
body.login-page {
    background: #0a0f1a !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    min-height: 100vh !important;
}
body.login-page .page-back {
    background: linear-gradient(145deg, #0a0f1a 0%, #0f172a 35%, #1e293b 70%, #334155 100%) !important;
    padding: 0 !important;
    min-height: 100vh !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: stretch !important;
    position: relative !important;
    overflow: hidden !important;
}
body.login-page .page-back::before {
    content: '' !important;
    position: absolute !important;
    top: -40% !important;
    right: -20% !important;
    width: 80% !important;
    height: 80% !important;
    background: radial-gradient(ellipse, rgba(37, 99, 235, 0.12) 0%, transparent 60%) !important;
    pointer-events: none !important;
}
body.login-page .login-apple-wrap {
    display: flex !important;
    flex: 1 !important;
    min-height: 100vh !important;
    position: relative !important;
    z-index: 1 !important;
}
/* Panneau gauche : branding avec motif et orbe décoratif */
body.login-page .login-apple-branding {
    flex: 0 0 42% !important;
    background: linear-gradient(165deg, rgba(15, 23, 42, 0.98) 0%, rgba(30, 41, 59, 0.96) 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 3rem !important;
    border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
    position: relative !important;
}
body.login-page .login-apple-branding::before {
    content: '' !important;
    position: absolute !important;
    bottom: 10% !important;
    left: -10% !important;
    width: 60% !important;
    height: 50% !important;
    background: radial-gradient(ellipse, rgba(59, 130, 246, 0.08) 0%, transparent 70%) !important;
    pointer-events: none !important;
}
body.login-page .login-apple-branding::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.03) 1px, transparent 0) !important;
    background-size: 28px 28px !important;
    pointer-events: none !important;
}
body.login-page .login-apple-branding-inner {
    max-width: 360px !important;
    position: relative !important;
    z-index: 1 !important;
    text-align: center !important;
}
body.login-page .login-apple-logo-wrap {
    margin-bottom: 1.75rem !important;
    padding: 1rem 0 !important;
}
body.login-page .login-apple-logo {
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
    filter: drop-shadow(0 0 24px rgba(255,255,255,0.12)) drop-shadow(0 4px 16px rgba(0,0,0,0.25)) brightness(1.08) contrast(1.05) !important;
}
body.login-page .login-apple-site-name {
    color: #f0f4f8 !important;
    font-size: 1.875rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.2 !important;
    text-shadow: 0 0 20px rgba(255,255,255,0.15), 0 2px 8px rgba(0,0,0,0.2) !important;
}
body.login-page .login-apple-tagline {
    color: #e2e8f0 !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    padding: 0 0.5rem !important;
    font-weight: 400 !important;
    text-align: center !important;
    letter-spacing: 0.02em !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.15) !important;
}
/* Panneau droit : fond léger + carte glass */
body.login-page .login-apple-form {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2rem !important;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
    position: relative !important;
}
body.login-page .login-apple-form::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-image: radial-gradient(circle at 2px 2px, rgba(0,0,0,0.04) 1px, transparent 0) !important;
    background-size: 24px 24px !important;
    pointer-events: none !important;
}
body.login-page #login .container {
    width: 100% !important;
    max-width: 420px !important;
    position: relative !important;
    z-index: 1 !important;
}
body.login-page .login-form-div {
    max-width: 100% !important;
}
/* Carte formulaire : effet glass + ombre premium + animation d'entrée */
body.login-page .login-content,
body.login-page .reg-content {
    background: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    padding: 2.5rem 2.25rem !important;
    border-radius: 20px !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.6) inset,
                0 32px 64px -12px rgba(0, 0, 0, 0.12),
                0 8px 24px -8px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    animation: login-card-in 0.5s ease-out !important;
}
@keyframes login-card-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
body.login-page .div-title {
    margin-bottom: 1.75rem !important;
}
body.login-page .div-title h3 {
    color: var(--erp-text) !important;
    font-weight: 600 !important;
    font-size: 1.5rem !important;
    margin: 0 !important;
    letter-spacing: -0.02em !important;
}
body.login-page .text-primary { color: var(--erp-accent) !important; }
body.login-page .input-group .input-group-addon {
    background: rgba(248, 250, 252, 0.9) !important;
    border: 1px solid var(--erp-border) !important;
    border-right: none !important;
    border-radius: var(--erp-radius-sm) 0 0 var(--erp-radius-sm) !important;
    color: var(--erp-text-secondary) !important;
    padding: 0.65rem 1rem !important;
}
body.login-page .input-group .form-control {
    border-radius: 0 var(--erp-radius-sm) var(--erp-radius-sm) 0 !important;
    padding: 0.65rem 1rem !important;
    min-height: 44px !important;
    border-color: var(--erp-border) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
body.login-page .input-group .form-control:focus {
    border-color: var(--erp-accent) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
    outline: none !important;
}
body.login-page .btn,
body.login-page .form-control {
    border-radius: var(--erp-radius-sm) !important;
}
body.login-page .btn-primary,
body.login-page .btn-success {
    background: var(--erp-accent) !important;
    border-color: var(--erp-accent) !important;
    font-weight: 500 !important;
    padding: 0.6rem 1.25rem !important;
    transition: background 0.2s ease, transform 0.15s ease !important;
}
body.login-page .btn-primary:hover,
body.login-page .btn-success:hover {
    background: var(--erp-accent-hover) !important;
    border-color: var(--erp-accent-hover) !important;
    transform: translateY(-1px) !important;
}
body.login-page .login-form-links {
    background: transparent !important;
    border-radius: var(--erp-radius-sm) !important;
    box-shadow: none !important;
    border: none !important;
    padding: 1.5rem 0 0 !important;
    margin-top: 1.25rem !important;
    border-top: 1px solid var(--erp-border) !important;
}
body.login-page .login-form-links h4 {
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.35rem !important;
}
body.login-page .registration-form-div {
    background: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-radius: 20px !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.6) inset,
                0 32px 64px -12px rgba(0, 0, 0, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
}
/* Forgot password / Register */
body.login-page #forgot_password .login-content,
body.login-page #register .reg-content {
    background: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    padding: 2.5rem 2.25rem !important;
    border-radius: 20px !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.6) inset,
                0 32px 64px -12px rgba(0, 0, 0, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
}
body.login-page #forgot_password .container,
body.login-page #register .container {
    max-width: 420px !important;
    margin: 0 auto !important;
}

/* Mobile : une seule colonne */
@media (max-width: 767px) {
    body.login-page .login-apple-wrap { flex-direction: column !important; }
    body.login-page .login-apple-branding {
        flex: none !important;
        min-height: 180px !important;
        padding: 2rem 1.5rem !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    }
    body.login-page .login-apple-form { padding: 1.5rem 1rem !important; }
    body.login-page .login-content,
    body.login-page .reg-content {
        padding: 2rem 1.5rem !important;
    }
}