/**
 * CommissionV2 Module - Main CSS Stylesheet
 * @author NashWeb
 * @version 2.0.1
 */

/* ========================================
   Variables CSS pour personnalisation
   ======================================== */
:root {
    --commission-primary: #667eea;
    --commission-primary-dark: #764ba2;
    --commission-success: #11998e;
    --commission-success-light: #38ef7d;
    --commission-danger: #eb3349;
    --commission-danger-light: #f45c43;
    --commission-warning: #feca57;
    --commission-warning-light: #ff9ff3;
    --commission-info: #3498db;
    --commission-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --commission-shadow-hover: 0 6px 20px rgba(102, 126, 234, 0.4);
    --commission-radius: 8px;
    --commission-radius-large: 12px;
    --commission-transition: all 0.3s ease;
}

/* ========================================
   Reset spécifique au module
   ======================================== */
.commissionv2-module *,
.commissionv2-module *::before,
.commissionv2-module *::after {
    box-sizing: border-box;
}

/* ========================================
   Boutons principaux - ULTRA LIMITÉS
   ======================================== */
.commissionv2-module .commission-filters .butAction,
.commissionv2-module .commission-filters input[type="submit"],
.commissionv2-module .commission-filters .button,
.commissionv2-module .commission-filters a.button,
.commissionv2-module .commission-mass-actions .butAction,
.commissionv2-module .commission-mass-actions .butActionDelete,
.commissionv2-module .commission-mass-actions a.butAction,
.commissionv2-module .commission-mass-actions a.butActionDelete,
.commissionv2-module .commission-setup-section .button-save,
.commissionv2-module .center .butAction,
.commissionv2-module .center a.butAction,
.commissionv2-module a.butAction[onclick*="LoadPreviousMonth"] {
    background: -webkit-linear-gradient(135deg, var(--commission-primary) 0%, var(--commission-primary-dark) 100%) !important;
    background: -moz-linear-gradient(135deg, var(--commission-primary) 0%, var(--commission-primary-dark) 100%) !important;
    background: linear-gradient(135deg, var(--commission-primary) 0%, var(--commission-primary-dark) 100%) !important;
    color: white !important;
    border: none !important;
    padding: 10px 24px !important;
    border-radius: var(--commission-radius) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    box-shadow: var(--commission-shadow) !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: var(--commission-transition) !important;
    line-height: 20px !important;
    margin: 2px 4px !important;
    position: relative !important;
    overflow: hidden !important;
}

.commissionv2-module .commission-filters .butAction:hover,
.commissionv2-module .commission-filters input[type="submit"]:hover,
.commissionv2-module .commission-filters .button:hover,
.commissionv2-module .commission-filters a.button:hover,
.commissionv2-module .commission-mass-actions .butAction:hover,
.commissionv2-module .commission-mass-actions a.butAction:hover,
.commissionv2-module .commission-setup-section .button-save:hover,
.commissionv2-module .center .butAction:hover,
.commissionv2-module .center a.butAction:hover,
.commissionv2-module a.butAction[onclick*="LoadPreviousMonth"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--commission-shadow-hover) !important;
}

/* Boutons Delete spécifiques */
.commissionv2-module .commission-mass-actions .butActionDelete,
.commissionv2-module .commission-mass-actions a.butActionDelete {
    background: -webkit-linear-gradient(135deg, var(--commission-danger) 0%, var(--commission-danger-light) 100%) !important;
    background: -moz-linear-gradient(135deg, var(--commission-danger) 0%, var(--commission-danger-light) 100%) !important;
    background: linear-gradient(135deg, var(--commission-danger) 0%, var(--commission-danger-light) 100%) !important;
}

/* ========================================
   Formulaires - ULTRA LIMITÉS
   ======================================== */
.commissionv2-module .commission-filters select.flat,
.commissionv2-module .commission-filters input.flat,
.commissionv2-module .commission-setup-section select.flat,
.commissionv2-module .commission-setup-section input.flat {
    border: 2px solid #e9ecef !important;
    border-radius: var(--commission-radius) !important;
    padding: 10px 14px !important;
    background: white !important;
    font-size: 14px !important;
    transition: var(--commission-transition) !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.commissionv2-module .commission-filters select.flat:focus,
.commissionv2-module .commission-filters input.flat:focus,
.commissionv2-module .commission-setup-section select.flat:focus,
.commissionv2-module .commission-setup-section input.flat:focus {
    border-color: var(--commission-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
}

/* ========================================
   Conteneurs principaux
   ======================================== */
.commissionv2-module {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.commissionv2-module .commission-filters {
    background: white !important;
    padding: 24px !important;
    border-radius: var(--commission-radius-large) !important;
    margin-bottom: 24px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06) !important;
}

.commissionv2-module .commission-month-section {
    background: #ffffff !important;
    border-radius: var(--commission-radius-large) !important;
    margin-bottom: 24px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    overflow: hidden !important;
    border: 1px solid #e9ecef !important;
    -webkit-animation: fadeInUp 0.3s ease-out;
    -moz-animation: fadeInUp 0.3s ease-out;
    animation: fadeInUp 0.3s ease-out;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@-moz-keyframes fadeInUp {
    from {
        opacity: 0;
        -moz-transform: translateY(20px);
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        -moz-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.commissionv2-module .commission-month-header {
    background: -webkit-linear-gradient(135deg, var(--commission-primary) 0%, var(--commission-primary-dark) 100%) !important;
    background: -moz-linear-gradient(135deg, var(--commission-primary) 0%, var(--commission-primary-dark) 100%) !important;
    background: linear-gradient(135deg, var(--commission-primary) 0%, var(--commission-primary-dark) 100%) !important;
    color: #ffffff !important;
    padding: 24px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

.commissionv2-module .commission-month-title {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.commissionv2-module .commission-month-title .badge {
    background: rgba(255, 255, 255, 0.2) !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    font-size: 14px !important;
    font-weight: normal !important;
}

.commissionv2-module .commission-month-total {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
}

/* ========================================
   Info Boxes - SPÉCIFIQUES AU MODULE
   ======================================== */
.commissionv2-module .info-box {
    background: #ffffff !important;
    border-radius: var(--commission-radius-large) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    padding: 0 !important;
    overflow: hidden !important;
    min-height: 120px !important;
    display: flex !important;
    align-items: stretch !important;
    margin-bottom: 20px !important;
    transition: var(--commission-transition) !important;
    border: 1px solid #e9ecef !important;
}

.commissionv2-module .info-box:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

.commissionv2-module .info-box-icon {
    background: -webkit-linear-gradient(135deg, var(--commission-primary) 0%, var(--commission-primary-dark) 100%) !important;
    background: -moz-linear-gradient(135deg, var(--commission-primary) 0%, var(--commission-primary-dark) 100%) !important;
    background: linear-gradient(135deg, var(--commission-primary) 0%, var(--commission-primary-dark) 100%) !important;
    width: 80px !important;
    min-width: 80px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 28px !important;
    color: #ffffff !important;
}

.commissionv2-module .info-box-icon.warning {
    background: -webkit-linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
    background: -moz-linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
}

.commissionv2-module .info-box-icon.info {
    background: -webkit-linear-gradient(135deg, #fa709a 0%, #fee140 100%) !important;
    background: -moz-linear-gradient(135deg, #fa709a 0%, #fee140 100%) !important;
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%) !important;
}

.commissionv2-module .info-box-icon.success {
    background: -webkit-linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
    background: -moz-linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
}

.commissionv2-module .info-box-content {
    padding: 20px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.commissionv2-module .info-box-text {
    color: #6c757d !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 8px !important;
}

.commissionv2-module .info-box-number {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #2c3e50 !important;
}

/* ========================================
   Tables - SPÉCIFIQUES AU MODULE
   ======================================== */
.commissionv2-module .commission-table {
    background: #ffffff !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    width: 100% !important;
    border-collapse: collapse !important;
}

.commissionv2-module .commission-table .liste_titre {
    background: #f8f9fa !important;
    border-bottom: 2px solid #e9ecef !important;
}

.commissionv2-module .commission-table .liste_titre th {
    color: #2c3e50 !important;
    font-weight: 600 !important;
    padding: 16px 12px !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    letter-spacing: 0.5px !important;
    border: none !important;
}

.commissionv2-module .commission-table tr.oddeven {
    transition: background-color 0.2s ease !important;
}

.commissionv2-module .commission-table tr.oddeven:hover {
    background-color: #f8f9fa !important;
}

.commissionv2-module .commission-table td {
    padding: 14px 12px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    vertical-align: middle !important;
}

/* ========================================
   Badges - RENOMMÉS POUR ÉVITER CONFLITS
   ======================================== */
.commissionv2-module .commission-badge {
    display: inline-block !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: var(--commission-transition) !important;
}

.commissionv2-module .commission-badge-paid {
    background: -webkit-linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%) !important;
    background: -moz-linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%) !important;
    background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%) !important;
    color: #0c5d3e !important;
}

.commissionv2-module .commission-badge-unpaid {
    background: -webkit-linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%) !important;
    background: -moz-linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%) !important;
    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%) !important;
    color: #8b4513 !important;
}

/* ========================================
   Boutons Commission spécifiques
   ======================================== */
.commissionv2-module .commission-btn {
    padding: 8px 16px !important;
    border-radius: var(--commission-radius) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: var(--commission-transition) !important;
    border: none !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
}

.commissionv2-module .commission-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--commission-shadow-hover) !important;
}

.commissionv2-module .commission-btn-success {
    background: -webkit-linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%) !important;
    background: -moz-linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%) !important;
    background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%) !important;
    color: #ffffff !important;
}

.commissionv2-module .commission-btn-danger {
    background: -webkit-linear-gradient(135deg, var(--commission-danger) 0%, var(--commission-danger-light) 100%) !important;
    background: -moz-linear-gradient(135deg, var(--commission-danger) 0%, var(--commission-danger-light) 100%) !important;
    background: linear-gradient(135deg, var(--commission-danger) 0%, var(--commission-danger-light) 100%) !important;
    color: #ffffff !important;
}

.commissionv2-module .commission-btn-warning {
    background: -webkit-linear-gradient(135deg, var(--commission-warning) 0%, var(--commission-warning-light) 100%) !important;
    background: -moz-linear-gradient(135deg, var(--commission-warning) 0%, var(--commission-warning-light) 100%) !important;
    background: linear-gradient(135deg, var(--commission-warning) 0%, var(--commission-warning-light) 100%) !important;
    color: #ffffff !important;
}

/* ========================================
   Actions de masse
   ======================================== */
.commissionv2-module .commission-mass-actions {
    background: #f8f9fa !important;
    padding: 20px !important;
    border-radius: 0 0 var(--commission-radius-large) var(--commission-radius-large) !important;
    text-align: center !important;
    border-top: 1px solid #e9ecef !important;
}

/* ========================================
   Setup page
   ======================================== */
.commissionv2-module .commission-setup-section {
    background: white !important;
    padding: 24px !important;
    border-radius: var(--commission-radius-large) !important;
    margin-bottom: 20px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06) !important;
}

.commissionv2-module .commission-setup-section h3 {
    color: #2c3e50 !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    margin-bottom: 20px !important;
    margin-top: 0 !important;
}

/* ========================================
   Pagination - RENOMMÉE
   ======================================== */
.commissionv2-module .commission-pagination {
    text-align: center !important;
    margin-top: 20px !important;
}

.commissionv2-module .commission-pagination a,
.commissionv2-module .commission-pagination span {
    padding: 10px 16px !important;
    margin: 0 4px !important;
    border-radius: 8px !important;
    border: 2px solid #e9ecef !important;
    background: white !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: var(--commission-transition) !important;
    display: inline-block !important;
}

.commissionv2-module .commission-pagination a:hover {
    background: var(--commission-info) !important;
    color: white !important;
    border-color: var(--commission-info) !important;
}

.commissionv2-module .commission-pagination span.active {
    background: -webkit-linear-gradient(135deg, var(--commission-primary) 0%, var(--commission-primary-dark) 100%) !important;
    background: -moz-linear-gradient(135deg, var(--commission-primary) 0%, var(--commission-primary-dark) 100%) !important;
    background: linear-gradient(135deg, var(--commission-primary) 0%, var(--commission-primary-dark) 100%) !important;
    color: white !important;
    border: none !important;
}

/* ========================================
   Modal Export - SPÉCIFIQUE
   ======================================== */
#commissionv2-export-modal>div {
    background: white !important;
    padding: 30px !important;
    border-radius: var(--commission-radius-large) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

/* ========================================
   Responsive
   ======================================== */
@media (max-width: 768px) {
    .commissionv2-module .commission-month-header {
        flex-direction: column !important;
        gap: 12px !important;
        text-align: center !important;
    }

    .commissionv2-module .filter-group {
        display: block !important;
        margin-bottom: 16px !important;
    }

    .commissionv2-module .commission-table {
        font-size: 12px !important;
    }

    .commissionv2-module .commission-btn {
        padding: 6px 12px !important;
        font-size: 12px !important;
    }

    .commissionv2-module .info-box {
        flex-direction: column !important;
    }

    .commissionv2-module .info-box-icon {
        width: 100% !important;
        height: 60px !important;
    }

    .commissionv2-module .commission-pagination a,
    .commissionv2-module .commission-pagination span {
        padding: 8px 12px !important;
        margin: 0 2px !important;
        font-size: 14px !important;
    }
}

/* ========================================
   Utilitaires - LIMITÉS AU MODULE
   ======================================== */
.commissionv2-module .margin-top {
    margin-top: 20px !important;
}

.commissionv2-module .center {
    text-align: center !important;
}

.commissionv2-module .right {
    text-align: right !important;
}

.commissionv2-module .nowraponall {
    white-space: nowrap !important;
}

/* ========================================
   Animations supplémentaires
   ======================================== */
.commissionv2-module .success-flash {
    -webkit-animation: successFlash 1s ease !important;
    -moz-animation: successFlash 1s ease !important;
    animation: successFlash 1s ease !important;
}

@-webkit-keyframes successFlash {

    0%,
    100% {
        background-color: transparent;
    }

    50% {
        background-color: rgba(132, 250, 176, 0.2);
    }
}

@-moz-keyframes successFlash {

    0%,
    100% {
        background-color: transparent;
    }

    50% {
        background-color: rgba(132, 250, 176, 0.2);
    }
}

@keyframes successFlash {

    0%,
    100% {
        background-color: transparent;
    }

    50% {
        background-color: rgba(132, 250, 176, 0.2);
    }
}

.commissionv2-module .error-shake {
    -webkit-animation: errorShake 0.6s ease !important;
    -moz-animation: errorShake 0.6s ease !important;
    animation: errorShake 0.6s ease !important;
}

@-webkit-keyframes errorShake {

    0%,
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    25% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px);
    }

    75% {
        -webkit-transform: translateX(10px);
        transform: translateX(10px);
    }
}

@-moz-keyframes errorShake {

    0%,
    100% {
        -moz-transform: translateX(0);
        transform: translateX(0);
    }

    25% {
        -moz-transform: translateX(-10px);
        transform: translateX(-10px);
    }

    75% {
        -moz-transform: translateX(10px);
        transform: translateX(10px);
    }
}

@keyframes errorShake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-10px);
    }

    75% {
        transform: translateX(10px);
    }
}

.commissionv2-module .pulse {
    -webkit-animation: pulse 0.6s ease !important;
    -moz-animation: pulse 0.6s ease !important;
    animation: pulse 0.6s ease !important;
}

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@-moz-keyframes pulse {
    0% {
        -moz-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -moz-transform: scale(1.1);
        transform: scale(1.1);
    }

    100% {
        -moz-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

/* ========================================
   États et animations de chargement
   ======================================== */
.commissionv2-module .updating {
    opacity: 0.6 !important;
    pointer-events: none !important;
}

.commissionv2-module .loading {
    opacity: 0.6 !important;
    cursor: wait !important;
}

/* ========================================
   Filtres et groupes
   ======================================== */
.commissionv2-module .filter-group {
    display: inline-flex !important;
    align-items: center !important;
    margin-right: 20px !important;
    margin-bottom: 12px !important;
}

.commissionv2-module .filter-group label {
    font-weight: 600 !important;
    margin-right: 8px !important;
    color: #2c3e50 !important;
    font-size: 14px !important;
}

/* ========================================
   Fix pour les stats
   ======================================== */
.commissionv2-module .commissionv2-stats {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    margin-bottom: 24px !important;
}

.commissionv2-module .commissionv2-stats .fichehalfleft,
.commissionv2-module .commissionv2-stats .fichehalfright {
    flex: 1 !important;
    min-width: 300px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

/* ========================================
   Graphiques
   ======================================== */
.commissionv2-module .commission-chart-container {
    background: white !important;
    padding: 20px !important;
    border-radius: var(--commission-radius-large) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06) !important;
    margin-top: 20px !important;
}

/* ========================================
   Total row
   ======================================== */
.commissionv2-module tr.liste_total {
    background: #f8f9fa !important;
    font-weight: 600 !important;
}

.commissionv2-module tr.liste_total td {
    padding: 16px 12px !important;
    border-top: 2px solid #dee2e6 !important;
}

/* ========================================
   Print styles
   ======================================== */
@media print {

    .commissionv2-module .commission-filters,
    .commissionv2-module .commission-mass-actions,
    .commissionv2-module .commission-btn,
    .commissionv2-module .butAction,
    .commissionv2-module .butActionDelete,
    .commissionv2-module .commission-pagination {
        display: none !important;
    }

    .commissionv2-module .commission-month-section {
        page-break-inside: avoid !important;
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }

    .commissionv2-module .commission-table {
        font-size: 10pt !important;
    }
}