/* === DESIGN SYSTEM VARIABLES ===
 * Les variables CSS globales sont centralisées dans global-variables.css.
 * Ce fichier est le point d'entrée principal — il importe les variables,
 * puis définit les règles de layout et composants.
 */
@import url("global-variables.4792583d7b12.css");

/* === 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;
}

/* === Account management (clients / users) === */
.account-management .mgmt-shell {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 0 1.5rem;
}

.account-management .mgmt-page-header {
    margin-bottom: 1rem;
}

.account-management .mgmt-page-title {
    margin: 0 0 0.65rem;
    color: var(--color-primary);
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.25;
}

.account-management .mgmt-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.account-management .mgmt-subnav__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: var(--transition);
}

.account-management .mgmt-subnav__link:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.account-management .mgmt-subnav__link.is-active {
    border-color: var(--color-primary);
    background: rgba(107, 180, 66, 0.08);
    color: var(--color-primary);
    font-weight: 600;
}

.account-management .mgmt-messages {
    margin-bottom: 0.75rem;
}

.account-management .mgmt-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.account-management .mgmt-toolbar--stack {
    align-items: flex-start;
}

.account-management .mgmt-toolbar__meta,
.account-management .mgmt-toolbar__actions,
.account-management .mgmt-row-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.account-management .mgmt-btn-sm {
    font-size: 0.8rem !important;
    padding: 0.45rem 0.8rem !important;
    line-height: 1.2;
}

.account-management .mgmt-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.account-management .mgmt-filter-check {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0.35rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

.account-management .mgmt-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1rem 1.1rem;
    margin-bottom: 0.85rem;
    box-shadow: var(--shadow-sm);
}

.account-management .mgmt-card--table {
    padding: 0;
    overflow: hidden;
}

.account-management .mgmt-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--color-border);
    background: #f8faf8;
}

.account-management .mgmt-card__title {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #4a564a;
}

.account-management .mgmt-card__count {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-primary);
    background: rgba(107, 180, 66, 0.1);
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
}

.account-management .mgmt-client-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.account-management .mgmt-card--span-all {
    grid-column: 1 / -1;
}

.account-management .mgmt-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.65rem;
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

.account-management .mgmt-breadcrumb a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
}

.account-management .mgmt-breadcrumb a:hover {
    text-decoration: underline;
}

.account-management .mgmt-breadcrumb__sep {
    opacity: 0.5;
}

.account-management .mgmt-client-banner {
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
    padding: 1rem 1.15rem;
    margin-bottom: 0.85rem;
    background: linear-gradient(135deg, #f8fbf8 0%, #ffffff 55%, #f4f8f4 100%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.account-management .mgmt-client-banner__logo {
    flex: 0 0 160px;
    width: 160px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: #fff;
    overflow: hidden;
}

.account-management .mgmt-client-banner__logo img {
    display: block;
    width: 160px;
    height: 90px;
    max-width: 160px;
    max-height: 90px;
    object-fit: contain;
    object-position: center;
}

.account-management .mgmt-client-banner__logo-fallback {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
}

.account-management .mgmt-client-banner__main {
    flex: 1;
    min-width: 0;
}

.account-management .mgmt-client-banner__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.45rem;
}

.account-management .mgmt-client-banner__name {
    margin: 0 0 0.35rem;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text);
}

.account-management .mgmt-client-banner__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.account-management .mgmt-client-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    flex-shrink: 0;
}

.account-management .mgmt-client-banner__desc {
    margin: 0 0 0.55rem;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--color-text);
}

.account-management .mgmt-client-banner__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

.account-management .mgmt-client-banner__stats strong {
    color: var(--color-text);
}

.account-management .mgmt-client-panels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    margin-bottom: 0.85rem;
}

.account-management .mgmt-module-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.account-management .mgmt-module-list__item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #fafbfa;
}

.account-management .mgmt-module-list__key {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-sm);
    background: #e4f2e4;
    color: var(--color-primary);
}

.account-management .mgmt-module-list__name {
    font-size: 0.88rem;
    color: var(--color-text);
}

@media (max-width: 900px) {
    .account-management .mgmt-client-layout,
    .account-management .mgmt-client-panels {
        grid-template-columns: 1fr;
    }

    .account-management .mgmt-client-banner {
        flex-direction: column;
    }

    .account-management .mgmt-client-banner__top {
        flex-direction: column;
    }
}

/* Legacy hero aliases (keep img constrained if old markup cached) */
.account-management .mgmt-client-hero {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.account-management .mgmt-client-hero__logo {
    flex: 0 0 160px;
    width: 160px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: #fff;
    overflow: hidden;
}

.account-management .mgmt-client-hero__logo img {
    display: block;
    width: 160px;
    height: 90px;
    max-width: 160px;
    max-height: 90px;
    object-fit: contain;
}

.account-management .mgmt-dl {
    margin: 0;
}

.account-management .mgmt-dl__row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 0.75rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--color-border);
    align-items: start;
}

.account-management .mgmt-dl__row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.account-management .mgmt-dl__row dt {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.account-management .mgmt-dl__row dd {
    margin: 0;
    font-size: 0.9rem;
}

.account-management .mgmt-code {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    font-size: 0.8rem;
    font-weight: 600;
    background: #eef6ee;
    color: var(--color-primary);
    border: 1px solid rgba(107, 180, 66, 0.2);
    padding: 0.2rem 0.45rem;
    border-radius: var(--radius-sm);
}

.account-management .mgmt-pill {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    line-height: 1.2;
}

.account-management .mgmt-pill--success {
    background: #e6f6e6;
    color: #195a19;
}

.account-management .mgmt-pill--warning {
    background: #fff4e0;
    color: #7a4d00;
}

.account-management .mgmt-pill--muted {
    background: #eceff1;
    color: #5f6b7a;
}

.account-management .mgmt-pill-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.account-management .mgmt-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

.account-management .mgmt-chip-list--compact .mgmt-chip {
    font-size: 0.68rem;
    padding: 0.15rem 0.4rem;
}

.account-management .mgmt-chip {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.45rem;
    border-radius: var(--radius-sm);
    background: #e4f2e4;
    color: var(--color-primary);
}

.account-management .mgmt-chip--domain {
    background: #eef2ff;
    color: #3949ab;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    font-weight: 500;
}

.account-management .mgmt-color-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-family: monospace;
}

.account-management .mgmt-color-chip__swatch {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.12);
}

.account-management .mgmt-muted {
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.account-management .mgmt-link {
    color: inherit;
    text-decoration: none;
}

.account-management .mgmt-link:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.account-management .mgmt-client-cell {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 200px;
}

.account-management .mgmt-client-cell__logo {
    width: 44px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
    font-size: 0.7rem;
    color: #999;
}

.account-management .mgmt-client-cell__logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.account-management .mgmt-client-cell__name {
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.9rem;
}

.account-management .mgmt-client-cell__name:hover {
    text-decoration: underline;
}

.account-management .mgmt-client-cell__desc {
    margin-top: 0.1rem;
    font-size: 0.78rem;
    color: var(--color-text-muted);
    line-height: 1.3;
}

/* Flat tables: dense rows instead of card-per-row */
.account-management .table-modern.table-modern--flat {
    border-collapse: collapse;
    border-spacing: 0;
}

.account-management .table-modern.table-modern--flat thead th {
    font-size: 0.72rem;
    padding: 0.55rem 0.85rem;
    background: #f4f7f4;
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 1;
}

.account-management .table-modern.table-modern--flat tbody tr {
    background: transparent;
    box-shadow: none;
}

.account-management .table-modern.table-modern--flat tbody tr:hover {
    background: rgba(107, 180, 66, 0.04);
    transform: none;
    box-shadow: none;
}

.account-management .table-modern.table-modern--flat tbody td {
    padding: 0.55rem 0.85rem;
    font-size: 0.875rem;
    border: none;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0 !important;
    vertical-align: middle;
}

.account-management .table-modern.table-modern--flat tbody tr td:first-child,
.account-management .table-modern.table-modern--flat tbody tr td:last-child {
    border-left: none;
    border-right: none;
    border-radius: 0 !important;
}

.account-management .mgmt-table-empty {
    text-align: center;
    padding: 1.25rem !important;
    color: var(--color-text-muted);
}

.account-management .mgmt-form {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.account-management .mgmt-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.account-management .mgmt-form-span-all {
    grid-column: 1 / -1;
}

.account-management .mgmt-toggle-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 0.75rem;
}

.account-management .mgmt-logo-field {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: start;
}

.account-management .mgmt-logo-field__preview {
    width: 200px;
    min-height: 112px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: #fafbfa;
    padding: 0.5rem;
}

.account-management .mgmt-logo-field__preview img {
    max-width: 100%;
    max-height: 100px;
    object-fit: contain;
    border-radius: 4px;
}

.account-management .mgmt-logo-field__preview img.is-hidden {
    display: none;
}

.account-management .mgmt-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding-top: 0.25rem;
}

.account-management.superadmin-shell .superadmin-page-header__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.account-management.superadmin-shell .superadmin-page-header__brand {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.account-management.superadmin-shell .superadmin-page-header__icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff4e8;
    color: #b45309;
    font-size: 1.2rem;
    flex-shrink: 0;
    border: 1px solid #f3d9bf;
}

.account-management.superadmin-shell .superadmin-page-header__subtitle {
    margin: 0.15rem 0 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.account-management.superadmin-shell .superadmin-tabs-wrap {
    margin-top: 0.85rem;
}

.account-management.superadmin-shell .superadmin-tabs .nav-link {
    text-decoration: none;
}

.account-management.superadmin-shell .superadmin-section-intro {
    margin: 0 0 0.85rem;
    color: var(--color-text-muted);
    font-size: 0.88rem;
}

@media (max-width: 720px) {
    .account-management .mgmt-form-grid {
        grid-template-columns: 1fr;
    }

    .account-management .mgmt-logo-field {
        grid-template-columns: 1fr;
    }

    .account-management .mgmt-dl__row {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
}

/* 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 */
}

/* ========================================
   === QMS STYLES UNIFIÉS (NC + DÉROGATIONS) ===
   ======================================== */

/* === Container principal QMS === */
.container-fluid.content-medium {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0.75rem;
}

/* === Card styles unifiés QMS === */
.qms-card {
    background: var(--qms-bg-surface);
    border: 1px solid var(--qms-border-color);
    border-radius: var(--qms-radius-sm);
    box-shadow: var(--qms-shadow-sm);
    overflow: hidden;
    margin-bottom: 1rem;
    transition: all 0.2s ease;
}

.qms-card:hover {
    box-shadow: var(--qms-shadow-md);
    border-color: var(--qms-border-color-strong);
}

.qms-card-header {
    background: linear-gradient(90deg, var(--qms-bg-gradient-start), var(--qms-bg-gradient-end));
    border-bottom: 1px solid var(--qms-border-color-strong);
    padding: 1rem 1.25rem;
    font-weight: 600;
    color: var(--qms-text-primary);
    font-size: 1rem;
    margin: 0;
}

.qms-card-header h5,
.qms-card-header h6 {
    margin: 0;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--qms-text-primary);
    line-height: 1.5;
}

.qms-card-header i {
    margin-right: 0.5rem;
    color: var(--qms-primary);
}

.qms-card-body {
    padding: 1.25rem;
}

/* === Form section card QMS === */
.qms-form-section-card {
    background: var(--qms-bg-surface);
    border: 1px solid var(--qms-border-color);
    border-radius: var(--qms-radius-sm);
    margin-bottom: 1rem;
    box-shadow: var(--qms-shadow-sm);
    overflow: hidden;
    transition: all 0.2s ease;
}

.qms-form-section-card:hover {
    box-shadow: var(--qms-shadow-md);
    border-color: var(--qms-border-color-strong);
}

.qms-form-section-card .qms-card-body {
    padding: 0;
}

.qms-form-section-card .qms-card-title {
    background: linear-gradient(90deg, var(--qms-bg-gradient-start), var(--qms-bg-gradient-end));
    border-bottom: 1px solid var(--qms-border-color-strong);
    padding: 1rem 1.25rem;
    margin: 0;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--qms-text-primary);
    line-height: 1.5;
}

/* === Info grid QMS === */
.qms-info-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    margin-left: 0;
    margin-right: 0;
}

.qms-info-item {
    background: var(--qms-bg-surface);
    border: 1px solid var(--qms-border-color);
    border-radius: var(--qms-radius-md);
    padding: 0.85rem 0.9rem;
    position: relative;
    box-shadow: var(--qms-shadow-sm);
    transition: 0.15s border-color, 0.15s box-shadow;
}

.qms-info-item:hover {
    border-color: var(--qms-border-color-strong);
    box-shadow: var(--qms-shadow-md);
}

.qms-info-item .qms-info-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.55px;
    font-weight: 600;
    color: var(--qms-text-secondary);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
}

.qms-info-item .qms-info-label i {
    font-size: 0.75rem;
    opacity: 0.8;
}

.qms-info-item .qms-info-value {
    font-size: 0.85rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: var(--qms-text-primary);
}

.qms-info-item.qms-info-wide {
    grid-column: 1 / -1;
}

/* === Layout QMS avec sidebar === */
.qms-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto;
    column-gap: 1.5rem;
    row-gap: 0;
    align-items: flex-start;
}

.qms-main {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    min-width: 0;
}

.qms-sidebar {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    max-width: 350px;
}

/* === Sidebar card QMS === */
.qms-sidebar-card {
    background: var(--qms-bg-surface);
    border: 1px solid var(--qms-border-color);
    border-radius: var(--qms-radius-sm);
    margin-bottom: 1rem;
    overflow: hidden;
    box-shadow: var(--qms-shadow-sm);
    transition: all 0.2s ease;
}

.qms-sidebar-card:hover {
    box-shadow: var(--qms-shadow-md);
    border-color: var(--qms-border-color-strong);
}

.qms-sidebar-title {
    background: linear-gradient(90deg, var(--qms-bg-gradient-start), var(--qms-bg-gradient-end));
    border-bottom: 1px solid var(--qms-border-color-strong);
    padding: 1rem 1.25rem;
    font-weight: 600;
    color: var(--qms-text-primary);
    font-size: 1rem;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* === Responsive QMS === */
@media (max-width: 991.98px) {
    .qms-layout {
        display: flex !important;
        flex-direction: column;
        gap: 1rem;
        margin-top: 1rem;
    }
    
    .qms-main,
    .qms-sidebar {
        width: 100% !important;
        max-width: 100% !important;
    }

    .container-fluid.content-medium {
        padding: 0.5rem;
    }
}

@media (max-width: 768px) {
    .qms-info-grid {
        grid-template-columns: 1fr;
    }
    
    .qms-info-item .qms-info-label {
        font-size: 0.6rem;
    }
    
    .qms-info-item .qms-info-value {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .container-fluid.content-medium {
        padding: 0.25rem;
    }
}
#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; }
}

/* === Form Styles (merged from forms.css) === */

/* Global, consistent form styling across modules (inspired by Quality/QMS) */
/* Scope defaults to the whole site; tuned to work with base_standard and modern.css */

:root {
  /* Fallbacks if module variables are missing */
  --form-text: var(--module-text, var(--color-text, #1f2937));
  --form-text-muted: var(--module-text-light, var(--color-text-muted, #6b7280));
  --form-primary: var(--module-primary, var(--color-primary, #6bb442));
  --form-primary-rgb: var(--module-primary-rgb, 107, 180, 66);
  --form-border: var(--color-border-strong, #d1d5db);
  --form-bg: #ffffff;
  --form-radius: 8px;
  --form-shadow: 0 1px 3px rgba(0,0,0,0.08);
  --form-shadow-focus: 0 0 0 3px rgba(var(--form-primary-rgb), 0.2), 0 1px 3px rgba(0,0,0,0.1);
}

/* Surfaces used as form sections (“bubbles”) */
.surface,
.form-surface,
.form-bubble {
  background: var(--form-bg);
  border: 1px solid var(--color-border, var(--form-border));
  border-radius: var(--form-radius);
  box-shadow: var(--form-shadow);
}

.surface h2,
.form-surface h2,
.form-bubble h2 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--form-text);
}

/* Labels */
form label,
.form-label {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--form-text);
  margin-bottom: 0.35rem;
}

/* Inputs, selects, textareas (generic so it works without widget classes) */
form input[type="text"],
form input[type="number"],
form input[type="email"],
form input[type="password"],
form input[type="url"],
form input[type="search"],
form input[type="tel"],
form input[type="date"],
form input[type="time"],
form input[type="datetime-local"],
form select,
form textarea,
/* common class-based fallbacks */
.form-control,
.form-select,
textarea.form-control {
  width: 100%;
  background: var(--form-bg) !important;
  color: var(--form-text) !important;
  border: 2px solid var(--form-border) !important;
  border-radius: var(--form-radius) !important;
  padding: 0.75rem 0.9rem !important;
  font-size: 0.9rem !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
  box-shadow: var(--form-shadow) !important;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease !important;
}

/* Multi-selects: give them some height */
form select[multiple] {
  min-height: 140px !important;
}

/* Placeholder color */
form input::placeholder,
form textarea::placeholder {
  color: #9ca3af !important;
  opacity: 1 !important;
}

/* Hover/focus states */
form input:hover,
form select:hover,
form textarea:hover,
.form-control:hover,
.form-select:hover {
  border-color: #a3a9b3 !important;
}

form input:focus,
form select:focus,
form textarea:focus,
.form-control:focus,
.form-select:focus {
  outline: none !important;
  border-color: var(--form-primary) !important;
  box-shadow: var(--form-shadow-focus) !important;
}

/* Small muted helper text */
small.text-muted,
.form-text,
.helptext {
  display: block !important;
  margin-top: 0.25rem !important;
  color: var(--form-text-muted) !important;
  font-size: 0.75rem !important;
  line-height: 1.35 !important;
}

/* Error list from Django forms */
ul.errorlist {
  margin: 0.25rem 0 0.5rem 0;
  padding-left: 1rem;
  color: #b91c1c;
  font-size: 0.8rem;
}
ul.errorlist li { list-style: disc; }

/* Inline creation panels/toggles */
.inline-panel,
#new_comp_block,
#new_proc_block {
  background: var(--form-bg);
  border: 1px dashed rgba(var(--form-primary-rgb), 0.35);
  border-radius: var(--form-radius);
}

/* Action row */
.form-actions,
form .actions,
form .text-end {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
}

/* Family filter/select sizing */
#competence_family_filter {
  min-width: 220px;
}

/* Bubbles grid helper (optional) */
.bubbles-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .bubbles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .bubbles-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Buttons: rely on base_standard buttons, but keep tiny normalization for inline btns */
.btn,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  line-height: 1.1;
}

/* Centered form page helper */
.form-page {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

/* Chips used for selected items */
.form-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.form-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  color: var(--form-text);
  border-radius: 999px;
  padding: .25rem .6rem;
  font-size: .8rem;
}
.form-chip button.remove {
  background: none;
  border: none;
  color: var(--form-text-muted);
  padding: 0 .15rem;
  line-height: 1;
  cursor: pointer;
}
.form-chip button.remove:hover {
  color: var(--form-primary);
}

/* Align with Quality 'create' card layout */
.form-section-card {
  border: 1px solid var(--color-border, var(--form-border));
  border-radius: var(--form-radius);
  background-color: var(--form-bg);
  box-shadow: var(--form-shadow);
  margin-bottom: 1rem;
}

/* ═══════════════════════════════════════════
   MODULE HERO — composant réutilisable
   Usage : {% include 'shared/module_hero.html' %}
   Variables attendues : hero_bg, hero_eyebrow, hero_title,
                         hero_title_suffix, hero_desc, hero_pills
   ═══════════════════════════════════════════ */
.module-hero {
  border-radius: 20px;
  padding: 36px 44px;
  color: #fff;
  position: relative;
  overflow: hidden;
  margin-bottom: 0;
  display: flex;
  align-items: stretch;
  gap: 48px;
  background: var(
    --module-hero-gradient,
    linear-gradient(
      135deg,
      var(--module-hero-start, var(--module-primary, #6366f1)) 0%,
      var(--module-hero-mid, var(--module-primary, #6366f1)) 55%,
      var(--module-hero-end, var(--module-secondary, #4f46e5)) 100%
    )
  );
  box-shadow: 0 4px 22px rgba(var(--module-primary-rgb, 99, 102, 241), 0.22);
}
.module-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
  pointer-events: none;
}
.module-hero-eyebrow {
  font-size: 0.7rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 8px;
}
.module-hero-left {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.module-hero-title {
  font-size: 1.6rem !important; font-weight: 900 !important; margin: 0 0 10px !important;
  letter-spacing: -.03em; line-height: 1.15 !important; color: #fff !important;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif !important;
}
.module-hero-title span { color: rgba(255,255,255,.55) !important; font-weight: 500 !important; }
.module-hero-desc {
  font-size: 0.88rem !important; color: rgba(255,255,255,.82) !important; line-height: 1.65 !important;
  max-width: 760px; margin: 0 !important;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif !important;
}
.module-hero-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr; gap: 6px;
  flex: 0 0 38%;
  align-self: stretch;
  justify-content: center;
  border-left: 1px solid rgba(255,255,255,.15);
  padding-left: 32px;
}
.module-hero-list li {
  font-size: 0.79rem; color: rgba(255,255,255,.78); line-height: 1.5;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  padding-left: 1em; position: relative;
}
.module-hero-list li::before {
  content: '›'; position: absolute; left: 0;
  color: rgba(255,255,255,.45); font-weight: bold;
}
@media (max-width: 768px) {
  .module-hero { flex-direction: column; gap: 24px; }
  .module-hero-list { flex: none; border-left: none; padding-left: 0; border-top: 1px solid rgba(255,255,255,.15); padding-top: 16px; }
}
.module-hero-stat-strip {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 20px;
}
.module-hero-pill {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 50px; padding: 7px 18px;
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: #fff !important;
  transition: background .15s, transform .15s;
  backdrop-filter: blur(4px);
  cursor: pointer;
  position: relative; z-index: 1;
}
.module-hero-pill:hover {
  background: rgba(255,255,255,.25); color: #fff !important;
  text-decoration: none; transform: translateY(-1px);
}
.module-hero-pill-icon { font-size: 0.9rem; color: rgba(255,255,255,.75); }
.module-hero-pill-val  { font-size: 1.15rem; font-weight: 800; line-height: 1; color: #fff; }
.module-hero-pill-lbl  { font-size: 0.72rem; color: rgba(255,255,255,.8); font-weight: 600; letter-spacing: .02em; }
@media (max-width: 576px) {
  .module-hero { padding: 24px 20px; }
  .module-hero-title { font-size: 1.25rem; }
}
.form-section-card .card-body {
  padding: 1rem;
}
.form-section-card .card-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--form-text-muted, #6b7280);
  margin-bottom: 0.5rem;
  padding-bottom: 0.25rem;
  border-bottom: 2px solid var(--color-border, #e5e7eb);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}
.section-header-content { flex: 1; }
.section-header-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--form-text-muted, #6b7280);
  margin: 0;
}
.section-header-description {
  font-size: 0.875rem;
  color: var(--form-text-muted, #6b7280);
  margin: 0;
}

/* Dynamic container helpers (visual parity) */
.dynamic-item-container {
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 6px;
  background-color: #f9fafb;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
}
.dynamic-item-container.fixed {
  background-color: #f0fdf4; /* success light */
  border-color: #86efac;
}
.dynamic-item-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.dynamic-item-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
}
.control-select-sm { flex: 0 0 160px; min-width: 160px; }
.control-input-md { flex: 0 0 180px; min-width: 180px; }
.control-select-lg { flex: 1 1 200px; min-width: 200px; }

.action-btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: 0.25rem;
  border-width: 1px;
  transition: all .15s ease-in-out;
}
.action-btn-primary {
  background-color: var(--form-primary);
  border-color: var(--form-primary);
  color: #ffffff;
}
.action-btn-primary:hover {
  filter: brightness(0.95);
}
.action-btn-secondary {
  background-color: transparent;
  border-color: var(--form-text-muted, #6b7280);
  color: var(--form-text-muted, #6b7280);
}
.action-btn-secondary:hover {
  background-color: var(--form-text-muted, #6b7280);
  color: #ffffff;
}
.action-btn-danger {
  background-color: transparent;
  border-color: #ef4444;
  color: #ef4444;
}
.action-btn-danger:hover {
  background-color: #ef4444;
  color: #ffffff;
}
.action-btn-toggle {
  background-color: transparent;
  border-color: #64748b;
  color: #64748b;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  min-width: 32px;
}
.action-btn-toggle:hover {
  background-color: #64748b;
  color: #ffffff;
}

@media (max-width: 768px) {
  .dynamic-item-controls { flex-direction: column; align-items: stretch; }
  .control-select-sm, .control-input-md, .control-select-lg { flex: 1 1 auto; min-width: auto; }
  .dynamic-item-actions { margin-left: 0; justify-content: flex-end; }
}