/* ============================================
   OPTIMISATION CSS - CHARGEMENT RAPIDE
   Version compacte et optimisée
   ============================================ */

/* Variables */
:root{--primary:#2d6cdf;--primary-dark:#1a4fa8;--secondary:#6c757d;--success:#28a745;--danger:#dc3545;--warning:#ffc107;--info:#17a2b8;--light:#f8f9fa;--dark:#343a40}

/* Reset */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;background:#f4f6f9;color:#333;min-height:100vh}

/* ============================================
   NAVBAR
   ============================================ */
.navbar{background:linear-gradient(135deg,var(--primary),var(--primary-dark));padding:1rem 0;box-shadow:0 2px 10px rgba(0,0,0,0.1)}
.navbar-brand{font-weight:700;font-size:1.5rem;color:#fff!important}
.navbar-nav .nav-link{color:rgba(255,255,255,0.8)!important;transition:color .3s}
.navbar-nav .nav-link:hover{color:#fff!important}

/* ============================================
   HERO
   ============================================ */
.hero-section{background:linear-gradient(135deg,var(--primary),#1a4fa8);padding:100px 0 80px;position:relative;overflow:hidden}
.hero-section::before{content:'';position:absolute;top:-50%;right:-20%;width:70%;height:200%;background:rgba(255,255,255,0.05);transform:rotate(35deg)}

/* ============================================
   CARDS
   ============================================ */
.card{border:none;border-radius:12px;transition:transform .3s,box-shadow .3s}
.card:hover{transform:translateY(-5px);box-shadow:0 10px 30px rgba(0,0,0,0.1)}
.feature-icon{width:70px;height:70px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;font-size:2rem;border-radius:50%;margin:0 auto 1rem}

/* ============================================
   BUTTONS
   ============================================ */
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-dark));border:none;padding:.75rem 2rem;border-radius:8px;font-weight:600;transition:all .3s}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 5px 20px rgba(45,108,223,0.4)}
.btn-outline-light{border:2px solid rgba(255,255,255,0.5);color:#fff}
.btn-outline-light:hover{background:#fff;color:var(--primary)}

/* ============================================
   FORMS
   ============================================ */
.form-control{border-radius:8px;padding:.75rem 1rem;border:2px solid #e1e5eb;transition:border-color .3s}
.form-control:focus{border-color:var(--primary);box-shadow:0 0 0 .2rem rgba(45,108,223,0.25)}
.form-control.is-invalid{border-color:var(--danger)}

/* ============================================
   SIDEBAR
   ============================================ */
.sidebar{background:#fff;min-height:100vh;border-right:1px solid #e1e5eb;padding:2rem 0}
.sidebar .nav-link{color:#6c757d;padding:.75rem 1.5rem;border-radius:8px;margin:.25rem .5rem;transition:all .3s}
.sidebar .nav-link:hover,.sidebar .nav-link.active{background:var(--primary);color:#fff}
.sidebar .nav-link i{width:24px;margin-right:10px}

/* ============================================
   STAT CARDS
   ============================================ */
.stat-card{background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 2px 10px rgba(0,0,0,0.05);transition:transform .3s;height:100%}
.stat-card:hover{transform:translateY(-3px)}
.stat-card .stat-icon{width:50px;height:50px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.5rem}
.stat-card .stat-number{font-size:2rem;font-weight:700;margin:.5rem 0}
.stat-card .stat-label{color:#6c757d;font-size:.9rem}

/* ============================================
   TABLES
   ============================================ */
.table{background:#fff;border-radius:12px;overflow:hidden}
.table thead th{background:#f8f9fa;border-bottom:2px solid #e1e5eb;font-weight:600;padding:1rem}
.table tbody td{padding:1rem;vertical-align:middle}

/* ============================================
   PAYSLIP
   ============================================ */
.payslip{background:#fff;padding:2rem;border-radius:12px;box-shadow:0 2px 20px rgba(0,0,0,0.05)}
.payslip-header{border-bottom:3px solid var(--primary);padding-bottom:1.5rem;margin-bottom:1.5rem}
.payslip-table{width:100%;border-collapse:collapse}
.payslip-table td,.payslip-table th{padding:.75rem 1rem;border-bottom:1px solid #e1e5eb}

/* ============================================
   NOTIFICATIONS
   ============================================ */
.notification-badge{position:relative}
.notification-badge .badge{position:absolute;top:-5px;right:-10px;font-size:.7rem;padding:.25rem .5rem}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideIn{from{transform:translateX(100px);opacity:0}to{transform:translateX(0);opacity:1}}
.fade-in{animation:fadeIn .5s ease-out}
.slide-in{animation:slideIn .4s ease-out}

/* ============================================
   TOAST
   ============================================ */
.toast-container .toast{min-width:300px;border-radius:12px;animation:slideIn .3s ease-out}

/* ============================================
   SCROLLBAR
   ============================================ */
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}
::-webkit-scrollbar-thumb{background:var(--primary);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:var(--primary-dark)}

/* ============================================
   2FA
   ============================================ */
.two-factor-container{max-width:400px;margin:2rem auto;padding:2rem;background:#fff;border-radius:12px;box-shadow:0 2px 20px rgba(0,0,0,0.05)}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width:768px){
.hero-section{padding:60px 0 40px}
.sidebar{min-height:auto;border-right:none;border-bottom:1px solid #e1e5eb}
.stat-card .stat-number{font-size:1.5rem}
.toast-container .toast{min-width:250px}
}

@media (max-width:576px){
.toast-container .toast{min-width:200px;font-size:.9rem}
.toast-container .toast .toast-body{padding:.5rem .75rem}
}

/* ============================================
   DARK MODE SUPPORT (optionnel)
   ============================================ */
[data-theme="dark"] body{background:#1a1a2e;color:#e0e0e0}
[data-theme="dark"] .card,[data-theme="dark"] .stat-card,[data-theme="dark"] .sidebar,[data-theme="dark"] .table,[data-theme="dark"] .payslip{background:#2d2d44}
[data-theme="dark"] .sidebar .nav-link{color:#adb5bd}
[data-theme="dark"] .sidebar .nav-link:hover{background:#3d3d5c;color:#fff}
[data-theme="dark"] .table thead th{background:#3d3d5c;color:#e0e0e0}
[data-theme="dark"] .table tbody td{color:#e0e0e0}
[data-theme="dark"] .form-control{background:#3d3d5c;border-color:#4d4d6c;color:#e0e0e0}
[data-theme="dark"] .form-control:focus{background:#3d3d5c}
[data-theme="dark"] .stat-card .stat-label{color:#adb5bd}
[data-theme="dark"] .two-factor-container{background:#2d2d44}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print{
.navbar,.sidebar,.footer-modern,.btn,.no-print{display:none!important}
body{background:#fff!important}
.card,.stat-card,.payslip{box-shadow:none!important;border:1px solid #ddd!important}

/* Gestion des rôles - styles supplémentaires */
.role-card {
    transition: transform 0.2s, box-shadow 0.2s;
}

.role-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.permission-group {
    border-left: 3px solid #2d6cdf;
    padding-left: 15px;
    margin-bottom: 15px;
}

.permission-group .permission-item {
    padding: 5px 0;
}

.permission-group .permission-item:hover {
    background-color: #f8f9fa;
}

/* Badge de rôle */
.role-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.role-badge-system {
    background-color: #ffc107;
    color: #333;
}

.role-badge-custom {
    background-color: #28a745;
    color: #fff;
}

.role-badge-super {
    background-color: #dc3545;
    color: #fff;
}

/* Checkbox stylisée */
.permission-checkbox-wrapper {
    display: flex;
    align-items: center;
    padding: 4px 0;
}

.permission-checkbox-wrapper input[type="checkbox"] {
    margin-right: 8px;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.permission-checkbox-wrapper label {
    cursor: pointer;
    font-size: 14px;
}

.permission-checkbox-wrapper .permission-desc {
    font-size: 12px;
    color: #6c757d;
    margin-left: 24px;
    display: block;
}

}