/*
|--------------------------------------------------------------------------
| Root Variables
|--------------------------------------------------------------------------
*/

:root{

    --kmg-primary:#E18C08;

    --kmg-primary-hover:#c77700;

    --kmg-dark:#000000;

    --kmg-white:#ffffff;

    --kmg-border:#e5e7eb;

    --kmg-text:#111827;

    --kmg-text-light:#6b7280;

    --kmg-bg:#f5f7fa;

    --kmg-card-bg:#ffffff;

    --kmg-radius:12px;

    --kmg-shadow:
            0 2px 10px rgba(0,0,0,0.05);

    --kmg-transition:0.2s ease;

}
/*
|--------------------------------------------------------------------------
| Icône Menu
|--------------------------------------------------------------------------
 */

#toplevel_page_kmg-club .wp-menu-image img {
    width: 20px;
    height: 20px;
    opacity: 1 !important;
}

.kmg-separator {
    display:block;
    height:2px;
    background:#2c2c2c;
    margin:5px 0;
    pointer-events:none;
}
/*
|--------------------------------------------------------------------------
| Avatar
|--------------------------------------------------------------------------
*/

.kmg-avatar{

    object-fit:contain;
    display:block;
    padding: 0px 0px;

}

.kmg-avatar-sm{
    width:40px;
    height:auto;

}

.kmg-avatar-md{

    width:70px;
    height:auto;

}

.kmg-avatar-lg{

    width:120px;
    height:auto;
    margin-bottom: 15px;

}
.kmg-patch{

    object-fit:contain;
    display:block;

}
/*
|--------------------------------------------------------------------------
| Card
|--------------------------------------------------------------------------
*/

.kmg-card{

    background:var(--kmg-card-bg);

    border-radius:var(--kmg-radius);

    box-shadow:var(--kmg-shadow);

    margin-bottom:20px;

    overflow:hidden;

}

.kmg-card-head{

    padding:20px 24px;

    border-bottom:1px solid var(--kmg-border);

}

.kmg-card-title{

    margin:0;

    font-size:18px;

    font-weight:600;

    color:var(--kmg-text);

}

.kmg-card-subtitle{

    margin-top:5px;

    color:var(--kmg-text-light);

    font-size:13px;

}
.kmg-card-value{
    font-size: 60px;
    font-weight: bold;
    margin-bottom: 25px;
    text-align: center;
}

.kmg-card-body{

    padding:24px;

}
.kmg-card-body1{

    padding:24px;
    font-size: 16px;
    line-height: 1.5;
    display: flex;
    flex-direction: column;

}
.kmg-card-body2{

    padding:24px;
    font-size: 16px;
    line-height: 1.5;
    flex: 1;

}
.kmg-card-subtitle2{

    margin-top:5px;

    color:var(--kmg-text-light);

    font-size:18px;

    font-weight:600;

    text-align: center;

}

.kmg-card-footer{

    padding:5px 0px;

}
.kmg-card-event{
    text-align: center;
    height : 100px;
}
.kmg-card-event h1{
    font-weight: bold;
    font-size: 35px;
}
.kmg-card-event-button{
    margin-bottom: 20px;
    margin-top : 25px;

}
/*
|--------------------------------------------------------------------------
| Grid
|--------------------------------------------------------------------------
*/

.kmg-grid{

    display:grid;

    gap:20px;

    align-items:start;

}

.kmg-grid-2{

    grid-template-columns:1fr 1fr;

}

.kmg-grid-3{

    grid-template-columns:repeat(3,1fr);

}

.kmg-grid-4{

    grid-template-columns:repeat(4,1fr);

}

.kmg-grid-5{

    grid-template-columns: repeat(5, 1fr);
    align-items: stretch;

}

.kmg-grid-5 .kmg-card {

    height: 100%;

    display: flex;

    flex-direction: column;

}
.kmg-col{

    display:flex;

    flex-direction:column;

    gap:10px;

}
/*
|--------------------------------------------------------------------------
| Profile Header
|--------------------------------------------------------------------------
*/

.kmg-profile-head{

    display:flex;

    gap:24px;

    align-items:center;

}

.kmg-profile-avatar{

    flex-shrink:0;

}

.kmg-profile-content{

    border-left: 1px solid var(--kmg-border);
    padding-left: 24px;

}

.kmg-profile-content h1{

    margin:0;

    font-size:28px;

}

.kmg-profile-meta{

    margin-top:10px;

    color:var(--kmg-text-light);

}

.kmg-profile-role{

    display:inline-block;

    background:var(--kmg-primary);

    color:#fff;

    padding:4px 10px;

    border-radius:999px;

    font-size:12px;

    font-weight:600;

    margin-bottom:10px;

}
/*
|--------------------------------------------------------------------------
| Form Modern
|--------------------------------------------------------------------------
*/

.kmg-field{

    margin-bottom:20px;

}

.kmg-field label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

    color:var(--kmg-text);

}

.kmg-field input[type="text"],
.kmg-field input[type="email"],
.kmg-field input[type="date"],
.kmg-field input[type="time"],
.kmg-field input[type="url"],
.kmg-field input[type="number"],
.kmg-field textarea,
.kmg-field select{

    width:100%;

    max-width:100%;

    border:1px solid var(--kmg-border);

    border-radius:8px;

    padding:10px 12px;

    min-height:42px;

    line-height: 1.5;

}

.kmg-field textarea{

    min-height:100px;

}
.kmg-checkboxes{

    border:1px solid var(--kmg-border);

    border-radius:8px;

    padding:10px 12px;

}
/*
|--------------------------------------------------------------------------
| Notices
|--------------------------------------------------------------------------
*/

.kmg-club-wrap .notice:not(.kmg-alert){

    display:none !important;

}
.kmg-alert{

    padding:0px 20px;
    border-radius:10px;
    margin:20px 0;
    font-weight:500;
    transition:all .4s ease;

}

.kmg-alert-success{

    background:#dcfce7;
    color:#166534;
    border:1px solid #bbf7d0;

}

.kmg-alert-error{

    background:#fee2e2;
    color:#991b1b;
    border:1px solid #fecaca;

}

.kmg-alert-warning{

    background:#fef3c7;
    color:#92400e;
    border:1px solid #fde68a;

}

.kmg-alert-hide{

    opacity:0;
    transform:translateY(-10px);

}
/*
|--------------------------------------------------------------------------
| Hero
|--------------------------------------------------------------------------
*/

.kmg-club-wrap{

    padding-right:10px;

    box-sizing:border-box;

}
.kmg-club-hero-card{

    background:var(--kmg-dark);

    border-radius:8px;

    padding:15px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:20px;

    box-shadow:var(--kmg-shadow);



}
.kmg-club-hero-left{

    display:flex;

    flex-direction:row;
    align-items: center;

}
.kmg-club-title{

    margin:0;

    color:var(--kmg-white);

    font-size:28px;

    font-weight:700;

    line-height:1.2;

    padding: 0px!important;

    vertical-align: middle!important;


}
.kmg-club-subtitle{

    margin-top:8px;

    color:rgba(255,255,255,0.7);

    font-size:14px;

}
.kmg-club-hero-right{

    display:flex;

    align-items:center;

    gap:12px;

    margin-left: 15px;

}
.kmg-profile-meta{

    margin-top:10px;

    color:#64748b;

    font-size:14px;

}
.kmg-profile-head{

    display:flex;

    gap:24px;

    align-items:center;

}
.kmg-club-hero-actions{
    vertical-align: center;
    margin-left : 20px;
}

.kmg-profile-avatar{

    flex-shrink:0;

}
/*
|--------------------------------------------------------------------------
| Hero Buttons
|--------------------------------------------------------------------------
*/

.kmg-club-btn{

    background:var(--kmg-primary) !important;

    color:#fff !important;

    border:none !important;

    border-radius:8px !important;

    padding:5px 15px !important;

    font-weight:600 !important;

    text-decoration:none !important;

    transition:all var(--kmg-transition);

    box-shadow:none !important;

    font-size: 18px!important;

}

.kmg-club-btn:hover{

    background:var(--kmg-primary-hover) !important;

    color:#fff !important;

    transform:translateY(-1px);

}
.kmg-club-btn-head{
    background:var(--kmg-primary) !important;

    color:#fff !important;

    border:none !important;

    border-radius:8px !important;

    padding:10px 25px !important;

    font-weight:600 !important;

    text-decoration:none !important;

    transition:all var(--kmg-transition);

    box-shadow:none !important;

    font-size: 14px!important;
}

.kmg-club-btn-head:hover{
    background:var(--kmg-primary-hover) !important;

    color:#fff !important;

    transform:translateY(-1px);
}

.kmg-btn-primary {
    background:var(--kmg-primary) !important;

    color:#fff!important;

    border:none !important;

    border-radius:8px !important;

    padding:10px 20px !important;

    font-weight:600 !important;

    text-decoration:none !important;
}

.kmg-btn-primary:hover {
    background:var(--kmg-primary-hover) !important;

    color:#fff !important;

    transform:translateY(-1px);
}

.kmg-btn-danger{

    background:#ef4444;

    color:#fff!important;

    border:none !important;

    border-radius:8px !important;

    padding:10px 20px !important;

    font-weight:600 !important;

    text-decoration:none !important;

}

.kmg-btn-danger:hover{

    background:#dc2626;

    color:#fff!important;

    transform:translateY(-1px);
}

/*
|--------------------------------------------------------------------------
| Table Align
|--------------------------------------------------------------------------
*/
.kmg-table{
    width: 100%;
}

.kmg-table td,
.kmg-table th{

    vertical-align:middle;

}
.kmg-table td {

    padding: 8px 10px;
}
.kmg-table th {
    background: #f8fafc;
    font-weight: 600;
    text-align: left;
}

.kmg-table tbody tr{

    transition:background .2s ease;

}

.kmg-table tbody tr:hover{

    background:#fafafa;

}
.kmg-table-my-account {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}
.kmg-table-my-account td,
.kmg-table-my-account th{

    vertical-align:middle;
    padding: 10px;
    border: 1px solid #e5e7eb;

}
.kmg-table-my-account tr:nth-child(even) {
    background: #fafafa;
}
.kmg-table-my-account  th {
    background: #f8fafc;
    font-weight: 600;
    text-align: left;
}

.kmg-table-my-account  tbody tr{

    transition:background .2s ease;

}

.kmg-table-my-account  tbody tr:hover{

    background:#fafafa;

}
/*
|--------------------------------------------------------------------------
| LARGEURS COLONNES
|--------------------------------------------------------------------------
*/

.wp-list-table .column-cb {
    min-width: 40px!important;
}

.wp-list-table .column-id {
    width: 60px!important;
}

.wp-list-table .column-name {
    min-width: 220px!important;
}

.wp-list-table .column-club_name {
    min-width: 220px!important;
}

.wp-list-table .column-actions {
    width: 210px!important;
}

/*
|--------------------------------------------------------------------------
| Instructor Clubs
|--------------------------------------------------------------------------
*/

.kmg-club-row{

    display:flex;

    gap:20px;

    align-items:center;

    padding:20px;

    border:1px solid var(--kmg-border);

    border-radius:12px;

    background:#fafafa;

    margin-bottom:15px;

    transition:all .2s ease;

}

.kmg-club-row:hover{

    border-color:var(--kmg-primary);

    background:#fff;

    box-shadow:0 2px 8px rgba(0,0,0,0.04);

}

.kmg-club-row select{

    width:380px;

    min-width:380px;

    border:1px solid var(--kmg-border);

    border-radius:8px;

    padding:10px 12px;

    min-height:42px;

}

.kmg-club-roles{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    flex:1;

    padding-top:5px;

}

.kmg-club-roles label{

    display:flex;

    align-items:center;

    gap:8px;

    padding:8px 12px;

    border-radius:8px;

    background:#fff;

    border:1px solid var(--kmg-border);

    cursor:pointer;

    transition:all .2s ease;

    font-weight:500;

    margin:0;

}

.kmg-club-roles label:hover{

    border-color:var(--kmg-primary);

    background:rgba(225,140,8,0.08);

}

.kmg-club-roles input[type="checkbox"]{

    margin:0;

}
.kmg-club-badge{

    display:inline-block;

    background:#f3f4f6;

    border:1px solid var(--kmg-border);

    border-radius:8px;

    padding:4px 10px;

    margin:2px;

    font-size:12px;

    font-weight:500;

    color:var(--kmg-text);

}

#kmg-add-club-row{

    margin-top:10px !important;

    background:var(--kmg-primary) !important;

    border:none !important;

    color:#fff !important;

    border-radius:8px !important;

    padding:8px 16px !important;

    font-weight:600;

    transition:all .2s ease;

}

#kmg-add-club-row:hover{

    background:var(--kmg-primary-hover) !important;

    transform:translateY(-1px);

}
.kmg-remove-club-row .dashicons{

    width:auto;

    height:auto;

    font-size:16px;

    line-height:1;

    display:flex;

    align-items:center;

    justify-content:center;

}
.kmg-remove-club-row{

    width:36px;

    height:36px;

    border:none;

    border-radius:10px;

    background:#ef4444;

    color:#fff;

    cursor:pointer;

    font-size:18px;

    font-weight:700;

    transition:all .2s ease;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0 !important;

}

.kmg-remove-club-row:hover{

    background:#dc2626;

    transform:translateY(-1px);

}

/*
|--------------------------------------------------------------------------
| Pending notice
|--------------------------------------------------------------------------
*/
.kmg-pending-notice {

    display:flex;
    flex-direction: row;
    gap:12px;
    justify-content: space-between;

    padding:14px 18px;

    margin-bottom:20px;

    border-left:4px solid #E18C08;

    background:#fff8ec;

    border-radius:10px;

    color:#7a4b00;

    font-size:14px;

    line-height:1.5;

}
.kmg-pending-notice-right {
    display:flex;
    flex-direction: row;
    gap:12px;
    align-items: center;
}


.kmg-pending-notice-right .dashicons {

    color:#E18C08;

    font-size:20px;

    width:20px;

    height:20px;

}

/*
|--------------------------------------------------------------------------
| WP LIST TABLE
|--------------------------------------------------------------------------
*/

.wp-list-table a {
    color: #E18C08;
}

.wp-list-table a:hover {
    color: #c77700;
}

.wp-list-table .sorting-indicators {
    color: #E18C08;
}

.wp-list-table .sortable a,
.wp-list-table .sorted a {
    color: #111827 !important;
}

.tablenav .button,
.tablenav .button-secondary {
    border-color: #E18C08;
    color: #ffffff;
}

.tablenav .button:hover,
.tablenav .button-secondary:hover {
    border-color: #c77700;
    color: #ffffff;
}

.wp-core-ui .button-primary {
    background: #E18C08;
    border-color: #E18C08;
}

.wp-core-ui .button-primary:hover {
    background: #c77700;
    border-color: #c77700;
}
.wp-list-table {

    table-layout: auto;
    width: 100%;
    border: 1px solid #e5e7eb;

}

.wp-list-table th {

    font-weight: 600;

}

.wp-list-table tbody tr:hover {

    background: #f9fafb;

}

.wp-list-table .column-name strong {

    color: #111827;

}

/*
|--------------------------------------------------------------------------
| SEARCH BUTTON
|--------------------------------------------------------------------------
*/

.wp-core-ui .button,
.wp-core-ui .button-secondary {

    border-color: #E18C08;
    color: #ffffff;
    border-radius: 8px;

}

.wp-core-ui .button:hover,
.wp-core-ui .button-secondary:hover {

    border-color: #c77700;
    color: #ffffff;

}
.wp-core-ui .button,
.wp-core-ui .button-secondary {

    background: #E18C08;
    border-color: #E18C08;
    color: #fff;
    border-radius: 8px;

}

.wp-core-ui .button:hover,
.wp-core-ui .button-secondary:hover {

    background: #c77700;
    border-color: #c77700;
    color: #fff;

}
.wp-list-table .tablenav {

    margin: 15px 0;

}

.wp-list-table input[type="search"] {

    border-color: #d1d5db;
    min-height: 36px;

}

.wp-list-table select {

    min-height: 36px;

}
/*
|--------------------------------------------------------------------------
| ACTIONS
|--------------------------------------------------------------------------
*/

.column-actions {

    width: 180px;

}

.kmg-table-actions {

    display: flex;
    gap: 8px;
    align-items: center;

}

.kmg-btn-sm {

    padding: 4px 10px;
    font-size: 12px;
    min-height: auto;

}

/*
|--------------------------------------------------------------------------
| ÉTAT DES ÉVÉNEMENTS
|--------------------------------------------------------------------------
*/

.kmg-status{

    display:inline-block;

    padding:4px 10px;

    border-radius:4px;

    font-size:12px;

    font-weight:600;
}

/*
|--------------------------------------------------------------------------
| À VENIR
|--------------------------------------------------------------------------
*/

.kmg-status.upcoming{

    background:#e7f5ff;

    color:#1971c2;
}

/*
|--------------------------------------------------------------------------
| EN COURS
|--------------------------------------------------------------------------
*/

.kmg-status.running{

    background:#e6fcf5;

    color:#087f5b;
}

/*
|--------------------------------------------------------------------------
| TERMINÉ
|--------------------------------------------------------------------------
*/

.kmg-status.finished{

    background:#f1f3f5;

    color:#495057;
}

/*
|--------------------------------------------------------------------------
| COMPLET
|--------------------------------------------------------------------------
*/

.kmg-status.full{

    background:#fff5f5;

    color:#c92a2a;
}

/*
|--------------------------------------------------------------------------
| MODULE EVENTS - BARRE DE PROGRESSION
|--------------------------------------------------------------------------
*/

.kmg-progress{

    width:100%;

    height:10px;

    background:#e9ecef;

    border-radius:20px;

    overflow:hidden;

    margin-bottom:6px;
}

.kmg-progress-bar{

    height:100%;

    background:#f39200;

    border-radius:20px;

    transition:width .3s ease;
}

.kmg-progress-label{

    font-size:12px;

    color:#666;

    text-align:center;
}

/*
|--------------------------------------------------------------------------
| MODULE EVENTS - PUBLICATION
|--------------------------------------------------------------------------
*/

.kmg-status-publication{

    display:inline-block;

    padding:4px 10px;

    border-radius:4px;

    font-size:12px;

    font-weight:600;
}

.kmg-status-publication.draft{

    background:#fff3bf;

    color:#e67700;
}

.kmg-status-publication.published{

    background:#d3f9d8;

    color:#2b8a3e;
}

.kmg-status-publication.archived{

    background:#f1f3f5;

    color:#495057;
}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media(max-width:1200px){

    .kmg-grid-2{

        grid-template-columns: repeat(2, 1fr);

    }

    .kmg-grid-5{

        grid-template-columns: repeat(2, 1fr);

    }

    .kmg-profile-head{

        flex-direction:column;

        align-items:flex-start;

    }
    .kmg-table-responsive {

        width: 100%;
        overflow-x: auto;

    }

    .kmg-table-responsive table {

        min-width: 1100px;

    }

}

@media(max-width:782px){

    .kmg-grid-2{

        grid-template-columns:1fr;

    }

    .kmg-grid-5{

        grid-template-columns:1fr;

    }

    .kmg-profile-head{

        flex-direction:column;

        align-items:flex-start;

    }
    .kmg-table-responsive {

        width: 100%;
        overflow-x: auto;

    }

    .kmg-table-responsive table {

        min-width: 1100px;

    }
}