:root {
    /* === POLICES === */
    --font-display: "Lexend Exa", system-ui, sans-serif;  /* Branding, titres, accueil */
    --font-interface: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;  /* Interfaces de travail */
    
    /* === COULEURS === */
    --color-primary:#6bb442;            /* Vert logo principal */
    --color-primary-hover:#3d9970;      /* Vert logo foncé */
    --color-accent:#595959;             /* Gris logo */
    --color-bg:#ffffff;
    --color-surface:#ffffff;
    --color-border:#e8f1e8;
    --color-border-strong:#d1d5db;      /* Bordure plus visible */
    --color-text:#1f2937;               /* Texte plus contrasté */
    --color-text-muted:#6b7280;         /* Texte secondaire plus visible */
    --color-danger:#dc2626;
    --color-warning:#d97706;
    --color-success:#059669;
    
    /* === ESPACEMENTS === */
    --radius-sm:6px;
    --radius-md:8px;
    --radius-lg:14px;
    --shadow-sm:0 1px 3px rgba(0,0,0,.1);
    --shadow-md:0 4px 15px rgba(0,0,0,.15);
    --transition:200ms ease;
    
    /* Police par défaut : Lexend Exa pour branding */
    font-family: var(--font-display);
}

/* === GLOBAL RESPONSIVE CONTAINER RULES === */
html { 
    scroll-behavior:smooth; 
    overflow-x:hidden !important;
    max-width:100% !important;
}

body.modern-ui { 
    background:linear-gradient(145deg,#fefefe,#f8faf8); 
    color:var(--color-text); 
    min-height:100vh; 
    margin:0;
    overflow-x:hidden !important;
    max-width:100% !important;
}

/* Force container-fluid to respect viewport width on all breakpoints */
.container-fluid {
    max-width:100% !important;
    width:100% !important;
    overflow-x:hidden !important;
    box-sizing:border-box !important;
}

/* Desktop: standard padding */
@media (min-width: 1200px) {
    .container-fluid {
        padding-left:1.5rem !important;
        padding-right:1.5rem !important;
    }
}

/* Tablet: reduced padding */
@media (max-width: 1199px) and (min-width: 768px) {
    .container-fluid {
        padding-left:1rem !important;
        padding-right:1rem !important;
    }
}

/* Mobile: minimal padding */
@media (max-width: 767px) {
    .container-fluid {
        padding-left:0.75rem !important;
        padding-right:0.75rem !important;
    }
}

/* Very small screens: ultra-compact */
@media (max-width: 576px) {
    .container-fluid {
        padding-left:0.5rem !important;
        padding-right:0.5rem !important;
    }
}

/* Layout shell */
.app-shell { min-height:100vh; display:flex; flex-direction:column; }
.app-header { 
    background:linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(107,180,66,0.08) 50%, rgba(61,153,112,0.12) 100%);
    backdrop-filter:saturate(1.2) blur(20px);
    border-bottom:1px solid rgba(107,180,66,0.15);
    color:var(--color-text);
    position:sticky;
    top:0;
    z-index:1000;
    box-shadow:0 1px 20px rgba(89,89,89,0.06);
}
.app-header-inner { max-width:100%; margin:0 auto; display:flex; align-items:center; gap:1rem; padding:.6rem 1.2rem; }
.brand { display:flex; align-items:center; gap:.75rem; text-decoration:none; color:#fff; font-weight:600; letter-spacing:.5px; }
.brand img { max-height:42px; width:auto; height:auto; object-fit:contain; }
 .navbar a { 
    color:var(--color-text); 
    text-decoration:none; 
    font-size:.9rem; 
    padding:.55rem .75rem; 
    line-height:1; 
    position:relative; 
    display:inline-flex; 
    align-items:center; 
    gap:.4rem; 
    background:transparent; 
    border-radius:6px;
    transition:all 200ms ease;
 }
 .navbar a:hover { 
    background:linear-gradient(135deg, rgba(107,180,66,0.12), rgba(61,153,112,0.08));
    color:var(--color-primary-hover);
    transform:translateY(-1px);
 }
 .navbar a:focus-visible { outline:2px solid var(--color-primary); outline-offset:2px; }
 .navbar a.active-link { 
    font-weight:600; 
    background:linear-gradient(135deg, rgba(107,180,66,0.15), rgba(61,153,112,0.10));
    color:var(--color-primary-hover);
 }
 .nav-right { display:flex; align-items:center; gap:.6rem; }
 .user-chip { 
    background:linear-gradient(135deg, rgba(255,255,255,0.9), rgba(107,180,66,0.05)); 
    color:var(--color-primary); 
    padding:.45rem .9rem; 
    border-radius:50rem; 
    font-size:.78rem; 
    font-weight:600; 
    box-shadow:var(--shadow-sm); 
    text-decoration:none; 
    display:inline-flex; 
    align-items:center; 
    gap:.45rem;
    border:1px solid rgba(107,180,66,0.2);
    transition:all 200ms ease;
 }
 .user-chip:hover { 
    background:linear-gradient(135deg, rgba(107,180,66,0.08), rgba(61,153,112,0.05));
    transform:translateY(-1px);
    box-shadow:var(--shadow-md);
 }
 .user-menu { position:relative; }
 .user-menu .user-chip { cursor:pointer; border:1px solid #e2e9e2; background:#fff; color:var(--color-primary); }
 .user-menu .user-chip:hover { background:#f5fff5; }
 .user-dropdown { position:absolute; top:110%; right:0; min-width:190px; background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-md); padding:.4rem .45rem; box-shadow:var(--shadow-md); display:none; animation:fadeSlide .18s ease; }
 .user-dropdown.open { display:block; }
 .user-dropdown a, .user-dropdown button.logout-btn { all:unset; display:flex; width:100%; padding:.45rem .55rem; border-radius:var(--radius-sm); font-size:.7rem; cursor:pointer; color:var(--color-text); gap:.45rem; align-items:center; }
 .user-dropdown button.logout-btn { color:var(--color-danger); }
 .user-dropdown button.logout-btn:hover { background:#fdecea; color:#8a1f11; }
 .btn-primary { 
    background:linear-gradient(135deg, var(--color-primary), var(--color-primary-hover)); 
    border:2px solid var(--color-primary); 
    color:#ffffff; 
    padding:.8rem 1.2rem; 
    border-radius:var(--radius-md); 
    font-size:.85rem; 
    font-weight:600; 
    cursor:pointer; 
    transition:var(--transition); 
    text-decoration:none; 
    display:inline-flex; 
    align-items:center; 
    gap:.5rem;
    box-shadow:var(--shadow-sm);
    min-height:44px;
    box-sizing:border-box;
 }
 .btn-primary:hover { 
    background:linear-gradient(135deg, var(--color-primary-hover), var(--color-primary));
    transform:translateY(-2px);
    box-shadow:var(--shadow-md);
 }
 .btn-outline { 
    background:#ffffff; 
    border:2px solid var(--color-border-strong); 
    color:var(--color-text); 
    padding:.8rem 1.2rem; 
    border-radius:var(--radius-md); 
    font-size:.85rem; 
    font-weight:500; 
    cursor:pointer; 
    transition:var(--transition); 
    text-decoration:none; 
    display:inline-flex; 
    align-items:center; 
    gap:.5rem;
    box-shadow:var(--shadow-sm);
    min-height:44px;
    box-sizing:border-box;
 }
 
 /* Bootstrap button variants compatible with modern.css */
 .btn, a.btn, button.btn {
    padding:.8rem 1.2rem;
    border-radius:var(--radius-md);
    font-size:.85rem;
    font-weight:600;
    cursor:pointer;
    transition:var(--transition);
    text-decoration:none !important;
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    box-shadow:var(--shadow-sm);
    min-height:44px;
    box-sizing:border-box;
    border:2px solid transparent;
 }
 
 .btn-sm, a.btn-sm, button.btn-sm {
    padding:.5rem .9rem;
    font-size:.8rem;
    min-height:36px;
 }
 
 .btn-outline-secondary, a.btn-outline-secondary, button.btn-outline-secondary {
    background:#ffffff;
    border:2px solid var(--color-border-strong);
    color:var(--color-text);
 }
 .btn-outline-secondary:hover, a.btn-outline-secondary:hover, button.btn-outline-secondary:hover {
    background:var(--color-accent);
    border-color:var(--color-accent);
    color:#ffffff;
    transform:translateY(-2px);
    box-shadow:var(--shadow-md);
 }
 
 .btn-outline-primary, a.btn-outline-primary, button.btn-outline-primary {
    background:#ffffff;
    border:2px solid var(--color-primary);
    color:var(--color-primary);
 }
 .btn-outline-primary:hover, a.btn-outline-primary:hover, button.btn-outline-primary:hover {
    background:var(--color-primary);
    border-color:var(--color-primary);
    color:#ffffff;
    transform:translateY(-2px);
    box-shadow:var(--shadow-md);
 }
 
 .btn-success, a.btn-success, button.btn-success {
    background:var(--color-success);
    border:2px solid var(--color-success);
    color:#ffffff;
 }
 .btn-success:hover, a.btn-success:hover, button.btn-success:hover {
    background:#047857;
    border-color:#047857;
    transform:translateY(-2px);
    box-shadow:var(--shadow-md);
 }
 
 .btn-danger, a.btn-danger, button.btn-danger {
    background:var(--color-danger);
    border:2px solid var(--color-danger);
    color:#ffffff;
 }
 .btn-danger:hover, a.btn-danger:hover, button.btn-danger:hover {
    background:#b91c1c;
    border-color:#b91c1c;
    transform:translateY(-2px);
    box-shadow:var(--shadow-md);
 }
 
 .btn-warning, a.btn-warning, button.btn-warning {
    background:var(--color-warning);
    border:2px solid var(--color-warning);
    color:#ffffff;
 }
 .btn-warning:hover, a.btn-warning:hover, button.btn-warning:hover {
    background:#b45309;
    border-color:#b45309;
    transform:translateY(-2px);
    box-shadow:var(--shadow-md);
 }

main.app-main { flex:1 1 auto; width:100%; max-width:100%; margin:0 auto 2.2rem; padding:0 1.2rem; }
.surface { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:1.25rem 1.35rem; box-shadow:var(--shadow-sm); }
.surface + .surface { margin-top:1rem; }

.table-responsive { width:100%; overflow-x:auto; }
.table-modern { width:100%; border-collapse:separate; border-spacing:0 6px; }
.table-modern thead th { text-align:left; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; padding:.55rem .9rem; color:var(--color-text-muted); font-weight:600; }
.table-modern tbody tr { background:var(--color-surface); box-shadow:var(--shadow-sm); }
.table-modern tbody tr.archived { opacity:.55; }
.table-modern tbody td { padding:.7rem .9rem; font-size:.8rem; border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border); }
.table-modern tbody tr td:first-child { border-left:1px solid var(--color-border); border-top-left-radius:var(--radius-md); border-bottom-left-radius:var(--radius-md); }
.table-modern tbody tr td:last-child { border-right:1px solid var(--color-border); border-top-right-radius:var(--radius-md); border-bottom-right-radius:var(--radius-md); }

.badge { display:inline-block; font-size:.6rem; letter-spacing:.05em; padding:.3rem .5rem; border-radius:50rem; background:#e4f2e4; color:var(--color-primary); font-weight:600; }
.badge-muted { background:#e9ecef; color:#555; }

.form-grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); }
.form-grid .field { display:flex; flex-direction:column; gap:.35rem; }
.form-grid label { font-size:.75rem; letter-spacing:.05em; font-weight:600; color:var(--color-text); margin-bottom:.3rem; }
.form-grid input, .form-grid select, .form-grid textarea { 
    padding:.8rem .9rem; 
    border:2px solid #d1d5db; 
    border-radius:var(--radius-md); 
    font-size:.85rem; 
    background:#ffffff; 
    color:var(--color-text); 
    transition:var(--transition); 
    box-shadow:0 1px 3px rgba(0,0,0,0.1);
    min-height:44px;
    box-sizing:border-box;
}
.form-grid input::placeholder, .form-grid select::placeholder, .form-grid textarea::placeholder { 
    color:#9ca3af; 
    opacity:1; 
}
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { 
    outline:none; 
    border-color:var(--color-primary); 
    box-shadow:0 0 0 3px rgba(107,180,66,0.2), 0 1px 3px rgba(0,0,0,0.1); 
    background:#ffffff;
}
.form-grid input:hover, .form-grid select:hover, .form-grid textarea:hover { 
    border-color:#9ca3af; 
}
.form-grid select { 
    cursor:pointer; 
    appearance:none;
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position:right 0.5rem center;
    background-repeat:no-repeat;
    background-size:1.5em 1.5em;
    padding-right:2.5rem;
}

.actions-bar { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:space-between; align-items:center; margin-bottom:.9rem; }
.search-box input { border:1px solid var(--color-border-strong); border-radius:50rem; padding:.5rem .9rem; min-width:240px; font-size:.75rem; }

.alert { 
    padding:.75rem 1rem; 
    border-radius:var(--radius-md); 
    font-size:.8rem; 
    font-weight:500; 
    border-left:4px solid;
    margin:.5rem 0;
}
.alert-success { 
    background:#f0f9f0; 
    color:#166534; 
    border-color:var(--color-success);
}
.alert-error, .alert-danger { 
    background:#fef2f2; 
    color:#dc2626; 
    border-color:var(--color-danger);
}
.alert-warning { 
    background:#fffbeb; 
    color:#d97706; 
    border-color:var(--color-warning);
}

/* Help text styling */
.account-management small.text-muted {
    font-size:.75rem !important;
    color:var(--color-text-muted) !important;
    margin-top:.3rem !important;
    display:block !important;
    line-height:1.4 !important;
}

/* Required field indicator */
.account-management .field label::after {
    content:" *";
    color:var(--color-danger);
    font-weight:bold;
}

.account-management .field:has(input:not([required])) label::after,
.account-management .field:has(select:not([required])) label::after,
.account-management .field:has(textarea:not([required])) label::after {
    display:none;
}

.footer-modern { 
    background:linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(89,89,89,0.08) 50%, rgba(107,180,66,0.06) 100%);
    border-top:1px solid rgba(107,180,66,0.15);
    padding:.8rem 0;
    color:var(--color-text);
    margin-top:auto;
    backdrop-filter:saturate(1.1) blur(10px);
}
.footer-inner { max-width:100%; margin:0 auto; padding:0 1.2rem; display:flex; flex-wrap:wrap; gap:1.5rem; align-items:center; justify-content:space-between; font-size:.7rem; }

/* Global container widening on large screens, keep centered */
@media (min-width: 1200px) {
    .container, .container-lg, .container-xl, .container-xxl {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}
.footer-inner a { 
    color:var(--color-text-muted); 
    text-decoration:none; 
    margin-right:1rem;
    transition:color 200ms ease;
}
.footer-inner a:hover { 
    color:var(--color-primary); 
    text-decoration:underline; 
}

/* Mobile navigation */
.nav-toggle { display:none; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:#fff; padding:.55rem .7rem; border-radius:var(--radius-sm); cursor:pointer; }
.nav-toggle:focus-visible { outline:2px solid #fff; }
@media (max-width:880px){
  .navbar { 
    display:none; 
    position:absolute; 
    top:100%; 
    right:0; 
    flex-direction:column; 
    background:linear-gradient(135deg, rgba(255,255,255,0.95), rgba(107,180,66,0.08));
    backdrop-filter:blur(20px);
    padding:.65rem .75rem; 
    border:1px solid rgba(107,180,66,0.2); 
    border-radius:var(--radius-md); 
    box-shadow:var(--shadow-md); 
    min-width:220px; 
  }
  .navbar.open { display:flex; animation:fadeSlide .25s ease; }
  .nav-toggle { display:inline-flex; }
  .navbar a { width:100%; border-radius:var(--radius-sm); justify-content:flex-start; }
}
@keyframes fadeSlide { from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:translateY(0);} }

/* Utility */
.mt-1{margin-top:.25rem;} .mt-2{margin-top:.5rem;} .mt-3{margin-top:1rem;} .mb-1{margin-bottom:.25rem;} .mb-2{margin-bottom:.5rem;} .mb-3{margin-bottom:1rem;} .text-end{text-align:right;} .text-muted{color:var(--color-text-muted);} .flex{display:flex;} .gap-1{gap:.5rem;} .justify-between{justify-content:space-between;} .align-center{align-items:center;}

/* Modern overrides for legacy tables inside management templates */
.account-management table.table { width:100%; border-collapse:separate; border-spacing:0 6px; }
.account-management table.table thead th { background:transparent; border:none; font-size:.65rem; text-transform:uppercase; letter-spacing:.06em; color:var(--color-text-muted); }
.account-management table.table tbody tr { background:var(--color-surface); box-shadow:var(--shadow-sm); }
.account-management table.table tbody td { font-size:.75rem; border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border); }
.account-management table.table tbody tr td:first-child { border-left:1px solid var(--color-border); border-top-left-radius:var(--radius-md); border-bottom-left-radius:var(--radius-md); }
.account-management table.table tbody tr td:last-child { border-right:1px solid var(--color-border); border-top-right-radius:var(--radius-md); border-bottom-right-radius:var(--radius-md); }
.account-management .btn { font-size:.65rem; }

/* Enhanced table styles for better readability */
.table-modern tbody tr:hover { 
    box-shadow:0 4px 20px rgba(107,180,66,0.15); 
    transform:translateY(-1px); 
    transition:all 200ms ease; 
}
.table-modern tbody tr.archived:hover { 
    opacity:.75; 
    box-shadow:0 2px 10px rgba(89,89,89,0.1); 
}
.table-modern tbody td { 
    vertical-align:middle; 
    line-height:1.4; 
}
.table-modern code { 
    font-family:'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace; 
    font-weight:500; 
}

/* Improved form styling for search and filters */
.account-management .search-box input { 
    transition:all 200ms ease; 
    box-shadow:var(--shadow-sm); 
}
.account-management .search-box input:focus { 
    box-shadow:0 0 0 3px rgba(107,180,66,0.15), var(--shadow-sm); 
    transform:translateY(-1px); 
}

/* Better button styling */
.account-management .btn-outline { 
    border:1px solid var(--color-border); 
    background:var(--color-surface); 
    color:var(--color-text); 
    transition:all 200ms ease; 
    box-shadow:var(--shadow-sm); 
}
.account-management .btn-outline:hover { 
    border-color:var(--color-primary); 
    background:rgba(107,180,66,0.05); 
    color:var(--color-primary); 
    transform:translateY(-1px); 
    box-shadow:var(--shadow-md); 
}

/* Enhanced checkbox and form control styling */
.account-management input[type="checkbox"] {
    width:16px !important;
    height:16px !important;
    accent-color:var(--color-primary) !important;
    cursor:pointer !important;
    margin-right:.5rem !important;
    vertical-align:middle !important;
    flex-shrink:0 !important;
    transform:translateY(1px) !important; /* Align with text */
}

/* Hide all checkbox containers and make them transparent */
.account-management .checkbox-container,
.account-management .checkbox-wrapper,
.account-management .checkbox-group,
.account-management input[type="checkbox"]:not(.toggle input[type="checkbox"]) {
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
}

/* Ensure Django widget containers are also invisible */
.account-management .form-grid .field div:has(> ul),
.account-management .form-grid .field div:has(> input[type="checkbox"]) {
    background:transparent !important;
    border:none !important;
    padding:0 !important;
    margin:0 !important;
}

/* New structured checkbox blocks (client form) */
.account-management .checkbox-field-group {
    margin-top:.25rem !important;
    margin-bottom:.25rem !important;
}

/* Toggle switches */
.account-management .toggle-field-group { align-items:center !important; }
.account-management .toggle-field { display:flex !important; flex-direction:column !important; gap:.3rem !important; }
.account-management .toggle { display:inline-flex !important; align-items:center !important; gap:.7rem !important; cursor:pointer !important; user-select:none !important; font-size:.85rem !important; font-weight:500 !important; }
.account-management .toggle input[type="checkbox"] { position:absolute !important; opacity:0 !important; width:0 !important; height:0 !important; }
.account-management .toggle-track { position:relative !important; width:42px !important; height:22px !important; background:#d3d8dd !important; border-radius:999px !important; transition:background .25s ease !important; box-shadow:inset 0 0 0 1px rgba(0,0,0,0.07) !important; display:inline-block !important; }
.account-management .toggle-knob { position:absolute !important; top:3px !important; left:3px !important; width:16px !important; height:16px !important; background:#fff !important; border-radius:50% !important; box-shadow:0 1px 3px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.08) !important; transition:transform .25s ease, box-shadow .25s ease !important; }
.account-management .toggle input[type="checkbox"]:focus-visible + .toggle-track { outline:2px solid var(--color-primary) !important; outline-offset:2px !important; }
.account-management .toggle input[type="checkbox"]:checked + .toggle-track { background:var(--color-primary) !important; }
.account-management .toggle input[type="checkbox"]:checked + .toggle-track .toggle-knob { transform:translateX(20px) !important; }
.account-management .toggle:hover .toggle-track { background:#c5ccd2 !important; }
.account-management .toggle input[type="checkbox"]:checked:hover + .toggle-track { background:var(--color-primary-hover,#5ea548) !important; }
.account-management .toggle-label { line-height:1.15 !important; }
.account-management .toggle input[type="checkbox"]:checked ~ .toggle-label { color:var(--color-primary) !important; font-weight:600 !important; }
.account-management .toggle input[type="checkbox"][disabled] + .toggle-track { filter:grayscale(.5) brightness(.9) !important; cursor:not-allowed !important; }
.account-management .toggle input[type="checkbox"][disabled] ~ .toggle-label { opacity:.5 !important; cursor:not-allowed !important; }

.account-management .checkbox-block {
    flex:0 0 auto !important;
    background:transparent !important;
    border:none !important;
    border-radius:0 !important;
    padding:0 !important;
    display:inline-flex !important;
    align-items:center !important;
    gap:.45rem !important;
    min-height:auto !important;
    position:relative !important;
}
.account-management .checkbox-block--compact { /* legacy alias now same */
    padding:0 !important;
}
.account-management .checkbox-block:hover { background:transparent !important; }
.account-management .checkbox-block input[type="checkbox"] {
    margin-right:.6rem !important;
    position:relative !important;
    top:0 !important;
}
.account-management .checkbox-block .checkbox-input-wrapper {
    display:flex !important;
    align-items:center !important;
}
.account-management .checkbox-block label {
    margin:0 !important;
    font-size:.8rem !important;
    font-weight:600 !important;
    cursor:pointer !important;
    line-height:1.1 !important;
}
/* legacy checkbox-block emphasis removed (toggles in use) */

/* Modules list wrapper - Hidden container */
.account-management .modules-field .modules-list {
    border:none !important;
    background:transparent !important;
    border-radius:0 !important;
    padding:0 !important;
    max-width:none !important;
}

/* Transform checkbox modules into toggles via CSS */
.account-management .modules-field .toggle-modules ul {
    display:block !important; /* Override the hide rule */
}

.account-management .modules-field .toggle-modules ul li {
    position:relative !important;
    padding:.5rem .75rem !important;
}

.account-management .modules-field .toggle-modules ul li input[type="checkbox"] {
    position:absolute !important;
    opacity:0 !important;
    width:0 !important;
    height:0 !important;
}

.account-management .modules-field .toggle-modules ul li label {
    position:relative !important;
    display:flex !important;
    align-items:center !important;
    gap:.7rem !important;
    font-size:.8rem !important;
    font-weight:500 !important;
    cursor:pointer !important;
    padding-left:42px !important; /* Space for toggle track */
}

.account-management .modules-field .toggle-modules ul li label::before {
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    width:36px !important;
    height:18px !important;
    background:#d3d8dd !important;
    border-radius:999px !important;
    transition:background .25s ease !important;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,0.07) !important;
}

.account-management .modules-field .toggle-modules ul li label::after {
    content:"" !important;
    position:absolute !important;
    left:3px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    width:12px !important;
    height:12px !important;
    background:#fff !important;
    border-radius:50% !important;
    box-shadow:0 1px 3px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.08) !important;
    transition:transform .25s ease, box-shadow .25s ease !important;
}

.account-management .modules-field .toggle-modules ul li input[type="checkbox"]:checked + label::before {
    background:var(--color-primary) !important;
}

.account-management .modules-field .toggle-modules ul li input[type="checkbox"]:checked + label::after {
    transform:translateY(-50%) translateX(18px) !important;
}

.account-management .modules-field .toggle-modules ul li input[type="checkbox"]:checked + label {
    color:var(--color-primary) !important;
    font-weight:600 !important;
}

.account-management .modules-field .toggle-modules ul li:hover label::before {
    background:#c5ccd2 !important;
}

.account-management .modules-field .toggle-modules ul li input[type="checkbox"]:checked:hover + label::before {
    background:var(--color-primary-hover,#5ea548) !important;
}
/* Default checkbox list styles (when not using toggle-modules) - Completely transparent */
.account-management .modules-field ul:not(.toggle-modules) {
    border:none !important;
    background:transparent !important;
    max-height:unset !important;
    padding:0 !important;
    margin:0 !important;
    list-style:none !important;
}
.account-management .modules-field ul:not(.toggle-modules) li {
    border:none !important;
    padding:.4rem 0 !important;
    background:transparent !important;
    display:flex !important;
    align-items:center !important;
    line-height:1.1 !important;
}

.account-management .form-grid .field label {
    font-size:.75rem !important;
    font-weight:600 !important;
    color:var(--color-text) !important;
    cursor:pointer !important;
    display:block !important;
    margin-bottom:.3rem !important;
}

/* Special styling for checkbox groups (like modules field) - Clean styling */
.account-management .form-grid .field ul {
    list-style:none !important;
    padding:0 !important;
    margin:.5rem 0 !important;
    border:none !important;
    border-radius:0 !important;
    background:transparent !important;
    max-height:200px !important;
    overflow-y:auto !important;
}

.account-management .form-grid .field ul li {
    padding:.5rem 0 !important;
    border-bottom:none !important;
    display:flex !important;
    align-items:center !important;
    transition:background-color 0.2s ease !important;
}

.account-management .form-grid .field ul li:last-child {
    border-bottom:none !important;
}

.account-management .form-grid .field ul li:hover {
    background-color:rgba(107,180,66,0.05) !important;
    border-radius:var(--radius-sm) !important;
}

.account-management .form-grid .field ul li label {
    font-size:.85rem !important;
    font-weight:normal !important;
    margin:0 !important;
    cursor:pointer !important;
    display:flex !important;
    align-items:center !important;
    width:100% !important;
    gap:.5rem !important;
}

/* Single checkbox styling (for is_active, is_archived) - Clean style */
.account-management .form-grid .field > label:has(input[type="checkbox"]) {
    display:flex !important;
    align-items:center !important;
    gap:.5rem !important;
    font-size:.85rem !important;
    font-weight:500 !important;
    margin:0 !important;
    padding:.25rem 0 !important;
    background:transparent !important;
    border:none !important;
    border-radius:0 !important;
    cursor:pointer !important;
    transition:all 0.2s ease !important;
}

.account-management .form-grid .field > label:has(input[type="checkbox"]):hover {
    background:transparent !important;
    border:none !important;
    color:var(--color-primary) !important;
}

.account-management .form-grid .field > label:has(input[type="checkbox"]:checked) {
    background:transparent !important;
    border:none !important;
    color:var(--color-primary) !important;
    font-weight:600 !important;
}

/* Ensure proper styling inside checkbox lists */
.account-management .form-grid .field ul li input[type="checkbox"] {
    margin-right:.5rem !important;
    margin-left:0 !important;
}

.account-management .form-grid .field ul li input[type="checkbox"]:checked + * {
    font-weight:600 !important;
    color:var(--color-primary) !important;
}

/* Fix any browser-specific checkbox rendering issues */
.account-management input[type="checkbox"] {
    -webkit-appearance:checkbox !important;
    -moz-appearance:checkbox !important;
    appearance:auto !important;
}

/* Hide legacy enabled_modules field if accidentally rendered */
.account-management .field:has([name="enabled_modules"]) {
    display:none !important;
}

/* Ensure only one modules field is visible */
.account-management .field:has([name="modules"]) {
    position:relative !important;
}

/* Password field styling */
.account-management input[type="password"] {
    font-family:monospace !important;
    letter-spacing:.1em !important;
}

/* Action button variants */
.account-management .btn-reactivate { 
    color:var(--color-primary); 
    border-color:var(--color-primary); 
}
.account-management .btn-reactivate:hover { 
    background:rgba(107,180,66,0.1); 
}
.account-management .btn-archive { 
    color:var(--color-warning); 
    border-color:var(--color-warning); 
}
.account-management .btn-archive:hover { 
    background:rgba(217,119,6,0.1); 
}

/* Utility classes for better layout */
.d-flex { display:flex; }
.flex-column { flex-direction:column; }
.flex-wrap { flex-wrap:wrap; }
.align-items-center { align-items:center; }
.justify-content-end { justify-content:flex-end; }
.gap-1 { gap:.25rem; }
.gap-2 { gap:.5rem; }

/* Forms inside management */
.account-management form .form-label { 
    font-size:.75rem; 
    font-weight:600; 
    letter-spacing:.02em; 
    color:var(--color-text); 
    margin-bottom:.4rem;
    display:block;
}
.account-management form input, .account-management form select, .account-management form textarea { 
    font-size:.85rem; 
    transition:all 200ms ease; 
    border:2px solid var(--color-border-strong) !important;
    background:#ffffff !important;
    color:var(--color-text) !important;
    padding:.8rem .9rem !important;
    border-radius:var(--radius-md) !important;
    box-shadow:0 1px 3px rgba(0,0,0,0.1) !important;
    min-height:44px !important;
    box-sizing:border-box !important;
}
.account-management form input::placeholder, .account-management form select::placeholder, .account-management form textarea::placeholder { 
    color:#9ca3af !important; 
    opacity:1 !important; 
}
.account-management form input:focus, .account-management form select:focus, .account-management form textarea:focus { 
    outline:none !important;
    border-color:var(--color-primary) !important;
    box-shadow:0 0 0 3px rgba(107,180,66,0.2), 0 1px 3px rgba(0,0,0,0.1) !important; 
    background:#ffffff !important;
    transform:none !important;
}
.account-management form input:hover, .account-management form select:hover, .account-management form textarea:hover { 
    border-color:#9ca3af !important; 
}
.account-management form select { 
    cursor:pointer !important; 
    appearance:none !important;
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
    background-position:right 0.5rem center !important;
    background-repeat:no-repeat !important;
    background-size:1.5em 1.5em !important;
    padding-right:2.5rem !important;
}

/* Assigned actions (NC) – make "Répondre" button responsive
   - Button uses remaining space; if row is tight, it wraps to next line and stays bottom-right of the action cell. */
#actor-assigned-actions-card .action-header {
    flex-wrap: wrap;              /* allow wrapping when content is tight */
    gap: .5rem;                   /* small gap between blocks */
}
#actor-assigned-actions-card .action-header-main {
    flex: 1 1 18rem;              /* grow but also allow shrink with a sensible base */
    min-width: 0;                 /* let text wrap instead of overflowing */
}
#actor-assigned-actions-card .action-header-main h5 {
    word-break: break-word;       /* long titles never overflow */
    margin-bottom: .35rem;
}
#actor-assigned-actions-card .action-header-main .d-flex.flex-wrap {
    gap: .4rem .5rem;             /* nicer wrapping for badges */
}
#actor-assigned-actions-card .action-reply-btn {
    flex: 0 0 auto;               /* keep natural size */
    margin-left: auto;            /* align to right of its line */
    white-space: nowrap;          /* keep label on one line */
    max-width: 100%;              /* never exceed container */
}

/* On very narrow screens, keep a bit more room for content but still align the button right */
@media (max-width: 640px) {
    #actor-assigned-actions-card .action-header-main { flex-basis: 14rem; }
}