.gpp-app-scope {

    --primary-color: #4361ee;

    --secondary-color: #3f37c9;

    --accent-color: #4895ef;

    --success-color: #4cc9f0;

    --warning-color: #f72585;

    --info-color: #7209b7;

    --light-color: #f8f9fa;

    --dark-color: #212529;

    --gray-color: #6c757d;

    --light-gray: #e9ecef;

    --sidebar-width: 280px;

    --header-height: 80px;

    --border-radius: 16px;

    --box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}

.gpp-app-scope * {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}

.gpp-app-scope body {

    background: linear-gradient(135deg, #f5f7fb 0%, #e4e8f0 100%);

    color: var(--dark-color);

    line-height: 1.6;

    min-height: 100vh;

}

.gpp-app-scope .dashboard-container {

    display: flex;

    min-height: 100vh;

}/* ===== SIDEBAR MODERNE ===== */
.gpp-app-scope .sidebar {

    width: var(--sidebar-width);

    background: linear-gradient(180deg, var(--primary-color), var(--secondary-color));

    color: white;

    position: fixed;

    height: 100vh;

    overflow-y: auto;

    transition: var(--transition);

    z-index: 1000;

    box-shadow: 2px 0 30px rgba(0, 0, 0, 0.2);

}

.gpp-app-scope .sidebar-header {

    padding: 30px 25px;

    text-align: center;

    border-bottom: 2px solid rgba(255, 255, 255, 0.15);

    background: rgba(0, 0, 0, 0.1);

}

.gpp-app-scope .sidebar-header h2 {

    font-size: 1.8rem;

    margin-bottom: 8px;

    font-weight: 700;

    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

}

.gpp-app-scope .sidebar-header p {

    font-size: 1rem;

    opacity: 0.9;

    font-weight: 300;

}

.gpp-app-scope .sidebar-menu {

    padding: 25px 0;

}

.gpp-app-scope .menu-item {

    padding: 18px 25px;

    display: flex;

    align-items: center;

    transition: var(--transition);

    cursor: pointer;

    border-left: 4px solid transparent;

    margin: 5px 15px;

    border-radius: 12px;

    position: relative;

}

.gpp-app-scope .menu-item:hover {

    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.1));

    border-left-color: var(--accent-color);

    transform: translateX(8px);

}

.gpp-app-scope .menu-item.active {

    background: linear-gradient(135deg, var(--accent-color), var(--primary-color));

    border-left-color: white;

    box-shadow: 0 5px 15px rgba(67, 97, 238, 0.4);

}

.gpp-app-scope .menu-item i {

    margin-right: 18px;

    font-size: 1.4rem;

    width: 28px;

    text-align: center;

}

.gpp-app-scope .menu-label {

    flex: 1;

    font-size: 1.05rem;

    font-weight: 500;

}

.gpp-app-scope .menu-badge {

    background: linear-gradient(135deg, var(--warning-color), var(--accent-color));

    padding: 6px 12px;

    border-radius: 20px;

    font-size: 0.85rem;

    font-weight: 600;

    box-shadow: 0 3px 10px rgba(247, 37, 133, 0.3);

}

.gpp-app-scope .submenu {

    max-height: 0;

    overflow: hidden;

    transition: max-height 0.4s ease;

    background: rgba(0, 0, 0, 0.1);

    margin: 0 15px;

    border-radius: 0 0 12px 12px;

}

.gpp-app-scope .submenu.open {

    max-height: 400px;

}

.gpp-app-scope .submenu-item {

    padding: 16px 25px 16px 70px;

    display: block;

    transition: var(--transition);

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

    text-decoration: none;

    font-size: 0.95rem;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}

.gpp-app-scope .submenu-item:last-child {

    border-bottom: none;

}

.gpp-app-scope .submenu-item:hover {

    background: rgba(255, 255, 255, 0.1);

    color: white;

    padding-left: 75px;

}

.gpp-app-scope .submenu-item i {

    font-size: 1.1rem;

    margin-right: 12px;

}/* ===== CONTENU PRINCIPAL ===== */
.gpp-app-scope .main-content {

    flex: 1;

    margin-left: var(--sidebar-width);

    padding: 30px;

    min-height: 100vh;

    background: transparent;

}/* ===== HEADER AM�LIOR� ===== */
.gpp-app-scope .header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    background: linear-gradient(135deg, #ffffff, #f8f9fa);

    padding: 25px 30px;

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

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

    margin-bottom: 30px;

    border: 1px solid rgba(255, 255, 255, 0.8);

}

.gpp-app-scope .page-title h1 {

    font-size: 2.2rem;

    color: var(--dark-color);

    font-weight: 700;

    margin-bottom: 8px;

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}

.gpp-app-scope .page-title p {

    color: var(--gray-color);

    font-size: 1.1rem;

    font-weight: 400;

}

.gpp-app-scope .header-actions {

    display: flex;

    align-items: center;

    gap: 20px;

}

.gpp-app-scope .search-box {

    position: relative;

}

.gpp-app-scope .search-box input {

    padding: 14px 20px 14px 45px;

    border: 2px solid var(--light-gray);

    border-radius: 30px;

    width: 280px;

    font-size: 1rem;

    background: white;

    transition: var(--transition);

}

.gpp-app-scope .search-box input:focus {

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

    box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);

    outline: none;

}

.gpp-app-scope .search-box i {

    position: absolute;

    left: 20px;

    top: 50%;

    transform: translateY(-50%);

    color: var(--gray-color);

    font-size: 1.1rem;

}

.gpp-app-scope .user-profile {

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 12px 20px;

    background: white;

    border-radius: 30px;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);

    transition: var(--transition);

}

.gpp-app-scope .user-profile:hover {

    transform: translateY(-2px);

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);

}

.gpp-app-scope .user-avatar {

    width: 50px;

    height: 50px;

    border-radius: 50%;

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    font-weight: bold;

    font-size: 1.2rem;

    box-shadow: 0 4px 15px rgba(67, 97, 238, 0.3);

}

.gpp-app-scope .user-info {

    display: flex;

    flex-direction: column;

}

.gpp-app-scope .user-name {

    font-weight: 700;

    font-size: 1.1rem;

    color: var(--dark-color);

}

.gpp-app-scope .user-role {

    font-size: 0.9rem;

    color: var(--gray-color);

    font-weight: 400;

}/* ===== Dashboard EN GRANDE TAILLE ===== */
.gpp-app-scope .dashboard-content {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));

    gap: 25px;

    margin-bottom: 35px;

}

.gpp-app-scope .card {

    background: linear-gradient(135deg, #ffffff, #fafbff);

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

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

    padding: 30px;

    transition: var(--transition);

    border: 1px solid rgba(255, 255, 255, 0.8);

    position: relative;

    overflow: hidden;

}

.gpp-app-scope .card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 4px;

    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));

}

.gpp-app-scope .card:hover {

    transform: translateY(-8px);

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);

}

.gpp-app-scope .card-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    margin-bottom: 25px;

}

.gpp-app-scope .card-title {

    font-size: 1.3rem;

    font-weight: 600;

    color: var(--dark-color);

}

.gpp-app-scope .card-icon {

    width: 60px;

    height: 60px;

    border-radius: 16px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    font-size: 1.8rem;

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);

}

.gpp-app-scope .card-icon.blue {

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

}

.gpp-app-scope .card-icon.green {

    background: linear-gradient(135deg, var(--success-color), #2ecc71);

}

.gpp-app-scope .card-icon.pink {

    background: linear-gradient(135deg, var(--warning-color), #e74c3c);

}

.gpp-app-scope .card-icon.purple {

    background: linear-gradient(135deg, var(--info-color), #9b59b6);

}

.gpp-app-scope .card-value {

    font-size: 2.8rem;

    font-weight: 800;

    margin-bottom: 10px;

    background: linear-gradient(135deg, var(--dark-color), var(--gray-color));

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}

.gpp-app-scope .card-text {

    color: var(--gray-color);

    font-size: 1.1rem;

    margin-bottom: 15px;

    font-weight: 400;

}

.gpp-app-scope .card-trend {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 1rem;

    font-weight: 500;

}

.gpp-app-scope .trend-up {

    color: #27ae60;

}

.gpp-app-scope .trend-down {

    color: #e74c3c;

}

.gpp-app-scope .card-chart {

    margin-top: 20px;

    height: 80px;

    background: linear-gradient(135deg, rgba(67, 97, 238, 0.1), rgba(73, 149, 239, 0.1));

    border-radius: 12px;

    padding: 15px;

}/* ===== TRANSACTIONS R�CENTES ===== */
.gpp-app-scope .recent-transactions {

    background: linear-gradient(135deg, #ffffff, #fafbff);

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

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

    padding: 30px;

    margin-bottom: 30px;

    border: 1px solid rgba(255, 255, 255, 0.8);

}

.gpp-app-scope .section-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 25px;

}

.gpp-app-scope .section-title {

    font-size: 1.6rem;

    font-weight: 700;

    color: var(--dark-color);

}

.gpp-app-scope .view-all {

    color: var(--primary-color);

    text-decoration: none;

    font-weight: 600;

    font-size: 1rem;

    display: flex;

    align-items: center;

    gap: 8px;

    transition: var(--transition);

}

.gpp-app-scope .view-all:hover {

    gap: 12px;

    color: var(--secondary-color);

}

.gpp-app-scope .transaction-table {

    width: 100%;

    border-collapse: separate;

    border-spacing: 0;

}

.gpp-app-scope .transaction-table th {

    background: linear-gradient(135deg, var(--light-gray), #f1f3f9);

    padding: 18px 20px;

    text-align: left;

    font-weight: 600;

    color: var(--dark-color);

    font-size: 1.1rem;

    border-bottom: 2px solid var(--light-gray);

}

.gpp-app-scope .transaction-table td {

    padding: 20px;

    border-bottom: 1px solid var(--light-gray);

    font-size: 1.05rem;

}

.gpp-app-scope .transaction-table tr:last-child td {

    border-bottom: none;

}

.gpp-app-scope .transaction-table tr:hover {

    background: linear-gradient(135deg, rgba(67, 97, 238, 0.05), rgba(73, 149, 239, 0.05));

}

.gpp-app-scope .status {

    padding: 8px 16px;

    border-radius: 20px;

    font-size: 0.95rem;

    font-weight: 600;

    display: inline-block;

}

.gpp-app-scope .status.completed {

    background: linear-gradient(135deg, #e6f7ee, #d4f5e4);

    color: #27ae60;

}

.gpp-app-scope .status.pending {

    background: linear-gradient(135deg, #fff3cd, #ffeaa7);

    color: #f39c12;

}

.gpp-app-scope .status.failed {

    background: linear-gradient(135deg, #f8d7da, #f5c6cb);

    color: #e74c3c;

}/* ===== ACTIONS RAPIDES ===== */
.gpp-app-scope .quick-actions {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

    gap: 20px;

}

.gpp-app-scope .action-button {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg, #ffffff, #fafbff);

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

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

    padding: 30px 20px;

    transition: var(--transition);

    cursor: pointer;

    text-decoration: none;

    color: var(--dark-color);

    border: 1px solid rgba(255, 255, 255, 0.8);

    position: relative;

    overflow: hidden;

}

.gpp-app-scope .action-button::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 4px;

    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));

    opacity: 0;

    transition: var(--transition);

}

.gpp-app-scope .action-button:hover {

    transform: translateY(-6px);

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);

    color: var(--primary-color);

}

.gpp-app-scope .action-button:hover::before {

    opacity: 1;

}

.gpp-app-scope .action-icon {

    width: 70px;

    height: 70px;

    border-radius: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 15px;

    font-size: 2rem;

    color: white;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);

    transition: var(--transition);

}

.gpp-app-scope .action-button:hover .action-icon {

    transform: scale(1.1);

}

.gpp-app-scope .action-icon.deposit {

    background: linear-gradient(135deg, #27ae60, #2ecc71);

}

.gpp-app-scope .action-icon.withdraw {

    background: linear-gradient(135deg, #e74c3c, #ff6b6b);

}

.gpp-app-scope .action-icon.transfer {

    background: linear-gradient(135deg, var(--accent-color), var(--primary-color));

}

.gpp-app-scope .action-icon.history {

    background: linear-gradient(135deg, #9b59b6, #8e44ad);

}

.gpp-app-scope .action-icon.bank-transfer {

    background: linear-gradient(135deg, #f39c12, #e67e22);

}

.gpp-app-scope .action-icon.my-transfers {

    background: linear-gradient(135deg, #34495e, #2c3e50);

}

.gpp-app-scope .action-text {

    font-weight: 700;

    text-align: center;

    font-size: 1.1rem;

    transition: var(--transition);

}/* ===== BOUTON TOGGLE MOBILE ===== */
.gpp-app-scope .sidebar-toggle {

    display: none;

    position: fixed;

    bottom: 30px;

    right: 30px;

    z-index: 1001;

    width: 60px;

    height: 60px;

    border-radius: 50%;

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    color: white;

    border: none;

    box-shadow: 0 8px 25px rgba(67, 97, 238, 0.4);

    cursor: pointer;

    align-items: center;

    justify-content: center;

    font-size: 1.8rem;

    transition: var(--transition);

}

.gpp-app-scope .sidebar-toggle:hover {

    transform: scale(1.1);

    box-shadow: 0 12px 30px rgba(67, 97, 238, 0.5);

}



/* ===== RESPONSIVE DESIGN ===== */

@media (max-width: 1200px) {.gpp-app-scope .dashboard-content {

        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

    }

.gpp-app-scope .search-box input {

        width: 220px;

    }

}

@media (max-width: 992px) {.gpp-app-scope .sidebar {

        width: 80px;

    }

.gpp-app-scope .sidebar-header h2, .gpp-app-scope .menu-label, .gpp-app-scope .menu-badge, .gpp-app-scope .submenu-item {

        display: none;

    }

.gpp-app-scope .menu-item {

        justify-content: center;

        padding: 20px;

        margin: 5px 10px;

    }

.gpp-app-scope .menu-item i {

        margin-right: 0;

        font-size: 1.6rem;

    }

.gpp-app-scope .main-content {

        margin-left: 80px;

    }

.gpp-app-scope .card-value {

        font-size: 2.4rem;

    }

}

@media (max-width: 768px) {.gpp-app-scope .dashboard-content {

        grid-template-columns: 1fr;

    }

.gpp-app-scope .header {

        flex-direction: column;

        text-align: center;

        gap: 20px;

        padding: 20px;

    }

.gpp-app-scope .header-actions {

        flex-direction: column;

        gap: 15px;

    }

.gpp-app-scope .search-box input {

        width: 100%;

    }

.gpp-app-scope .user-info {

        display: none;

    }

.gpp-app-scope .card {

        padding: 25px;

    }

.gpp-app-scope .card-value {

        font-size: 2.2rem;

    }

.gpp-app-scope .quick-actions {

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

    }

}

@media (max-width: 576px) {.gpp-app-scope .sidebar {

        transform: translateX(-100%);

        width: 280px;

    }

.gpp-app-scope .sidebar.open {

        transform: translateX(0);

    }

.gpp-app-scope .main-content {

        margin-left: 0;

        padding: 20px;

    }

.gpp-app-scope .sidebar-toggle {

        display: flex;

    }

.gpp-app-scope .menu-label, .gpp-app-scope .menu-badge, .gpp-app-scope .submenu-item {

        display: block;

    }

.gpp-app-scope .menu-item {

        justify-content: flex-start;

        padding: 18px 25px;

    }

.gpp-app-scope .menu-item i {

        margin-right: 18px;

        font-size: 1.4rem;

    }

.gpp-app-scope .quick-actions {

        grid-template-columns: 1fr;

    }

.gpp-app-scope .card-value {

        font-size: 2rem;

    }

}



/* ===== ANIMATIONS ET EFFETS ===== */

@keyframes fadeInUp {

    from {

        opacity: 0;

        transform: translateY(30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

.gpp-app-scope .card {

    animation: fadeInUp 0.6s ease;

}

.gpp-app-scope .card:nth-child(2) { animation-delay: 0.1s; }

.gpp-app-scope .card:nth-child(3) { animation-delay: 0.2s; }

.gpp-app-scope .card:nth-child(4) { animation-delay: 0.3s; }/* ===== SCROLLBAR PERSONNALIS�E ===== */
.gpp-app-scope .sidebar::-webkit-scrollbar {

    width: 6px;

}

.gpp-app-scope .sidebar::-webkit-scrollbar-track {

    background: rgba(255, 255, 255, 0.1);

    border-radius: 3px;

}

.gpp-app-scope .sidebar::-webkit-scrollbar-thumb {

    background: rgba(255, 255, 255, 0.3);

    border-radius: 3px;

}

.gpp-app-scope .sidebar::-webkit-scrollbar-thumb:hover {

    background: rgba(255, 255, 255, 0.5);

}

.gpp-app-scope #sidebar {

    height: 100vh;

    position: fixed;

    top: 0;

    left: 0;

    overflow-y: auto;

    z-index: 40;

}

.gpp-app-scope .gpp-field-error {

    border-color: #dc3232 !important;

    box-shadow: 0 0 0 1px #dc3232 !important;

}

.gpp-app-scope .gpp-alert {

    padding: 12px 15px;

    margin: 15px 0;

    border-radius: 4px;

    border-left: 4px solid;

}

.gpp-app-scope .gpp-alert-success {

    background: #f0f9f0;

    border-color: #46b450;

    color: #2e5c2e;

}

.gpp-app-scope .gpp-alert-error {

    background: #fdf0f0;

    border-color: #dc3232;

    color: #8a1a1a;

}

.gpp-app-scope .loading {

    opacity: 0.7;

    pointer-events: none;

}

.gpp-app-scope .gpp-spinning {

    animation: gpp-spin 1s linear infinite;

}

@keyframes gpp-spin {

    0% { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }

}

.gpp-app-scope .gpp-btn-primary, .gpp-app-scope .gpp-btn-secondary {

    padding: 10px 20px;

    border: none;

    border-radius: 4px;

    cursor: pointer;

    font-size: 14px;

    transition: all 0.3s ease;

}

.gpp-app-scope .gpp-btn-primary {

    background: #007cba;

    color: white;

}

.gpp-app-scope .gpp-btn-primary:hover {

    background: #005a87;

}

.gpp-app-scope .gpp-btn-secondary {

    background: #6c757d;

    color: white;

}

.gpp-app-scope .gpp-btn-secondary:hover {

    background: #545b62;

}

.gpp-app-scope .gpp-form-control {

    width: 100%;

    padding: 8px 12px;

    border: 1px solid #ddd;

    border-radius: 4px;

    font-size: 14px;

}/* ===== ISOLATION DES STYLES POUR ÉVITER LES CONFLITS ===== */
/* Protection du menu admin WordPress */
.gpp-app-scope #adminmenuback, .gpp-app-scope #adminmenuwrap, .gpp-app-scope #adminmenu, .gpp-app-scope #adminmenu *, .gpp-app-scope .wp-menu, .gpp-app-scope .wp-submenu, .gpp-app-scope .wp-submenu *, .gpp-app-scope #wpadminbar, .gpp-app-scope #wpadminbar * {

    all: revert !important;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;

    color: #f0f0f1 !important;

    background: transparent !important;

}/* Styles spécifiques pour le menu admin principal */
.gpp-app-scope #adminmenu {

    background-color: #1d2327 !important;

}

.gpp-app-scope #adminmenu li {

    background: transparent !important;

}

.gpp-app-scope #adminmenu a {

    color: #f0f0f1 !important;

    background: transparent !important;

}

.gpp-app-scope #adminmenu .wp-has-current-submenu .wp-submenu, .gpp-app-scope #adminmenu .wp-has-current-submenu .wp-submenu.sub-open, .gpp-app-scope #adminmenu .wp-has-current-submenu.opensub .wp-submenu, .gpp-app-scope #adminmenu a.wp-has-current-submenu:focus + .wp-submenu, .gpp-app-scope .no-js li.wp-has-submenu:hover .wp-submenu {

    background-color: #2c3338 !important;

}

.gpp-app-scope #adminmenu .wp-submenu li {

    background: transparent !important;

}

.gpp-app-scope #adminmenu .wp-submenu a {

    color: #f0f0f1 !important;

    background: transparent !important;

}

.gpp-app-scope #adminmenu .wp-submenu a:hover {

    color: #ffffff !important;

    background: #3c434a !important;

}/* Protection de la barre d'admin en haut */
.gpp-app-scope #wpadminbar {

    background: #1d2327 !important;

    color: #f0f0f1 !important;

}

.gpp-app-scope #wpadminbar .ab-item, .gpp-app-scope #wpadminbar a.ab-item, .gpp-app-scope #wpadminbar > #wp-toolbar span.ab-label, .gpp-app-scope #wpadminbar > #wp-toolbar span.noticon {

    color: #f0f0f1 !important;

    background: transparent !important;

}/* Isolation de votre contenu GPP */
.gpp-app-scope .gpp-header-container, .gpp-app-scope .gpp-header-container * {

    /* Vos styles existants restent ici */

    /* Mais ils ne s'appliqueront pas au menu admin */

}/* Reset pour le contenu principal WordPress */
.gpp-app-scope #wpcontent, .gpp-app-scope #wpfooter {

    margin-left: 0 !important;

    padding-left: 0 !important;

}/* Correction pour le body admin */
.gpp-app-scope body.wp-admin {

    background: #f1f1f1 !important;

}/* Protection des boutons admin */
.gpp-app-scope .wp-core-ui .button, .gpp-app-scope .wp-core-ui .button-primary, .gpp-app-scope .wp-core-ui .button-secondary {

    background: #2271b1 !important;

    border-color: #2271b1 !important;

    color: #ffffff !important;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;

}/* Styles pour les pages GPP uniquement */
.gpp-app-scope body.gpp-client-page .gpp-header-container, .gpp-app-scope body.gpp-client-page .gpp-header-container * {

    /* Vos styles s'appliquent normalement ici */

}/* Protection renforcée pour le menu */
.gpp-app-scope #adminmenu .wp-menu-arrow, .gpp-app-scope #adminmenu .wp-menu-arrow div, .gpp-app-scope #adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after {

    border: none !important;

    background: transparent !important;

}/* Bleu royal */
.gpp-app-scope .main-header-menu .menu-item > a, .gpp-app-scope .ast-nav-menu .menu-item > a {

    color: #4361ee !important;

}/* Ou bleu foncé */
.gpp-app-scope .main-header-menu .menu-item > a, .gpp-app-scope .ast-nav-menu .menu-item > a {

    color: #1e40af !important;

}/* Ou bleu primaire */
.gpp-app-scope .main-header-menu .menu-item > a, .gpp-app-scope .ast-nav-menu .menu-item > a {

    color: #3b82f6 !important;

}/* ===== CORRECTION DE L'ORDRE ET DE LA SUPÉRIORITÉ DES SECTIONS ===== */
/* Organisation du contenu du dashboard */
.gpp-app-scope .dashboard-content {

    display: flex;

    flex-direction: column;

    gap: 30px;

    position: relative;

    z-index: 1;

}/* Statistics Cards - Section 1 */
.gpp-app-scope .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {

    order: 1;

    position: relative;

    z-index: 10;

}/* Credit Cards Section - Section 2 */
.gpp-app-scope .gpp-card-section {

    order: 2;

    position: relative;

    z-index: 9;

    margin: 0 !important;

    background: white !important;

    border-radius: 12px;

    padding: 25px;

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

    border: 1px solid #e5e7eb;

}/* Correction spécifique pour la superposition */
.gpp-app-scope .gpp-card-section.bg-blue {

    background: white !important;

    position: relative;

    width: 100%;

    clear: both;

}/* Bank Transfers Section - Section 3 */
.gpp-app-scope .bank-transfers-section {

    order: 3;

    position: relative;

    z-index: 8;

}/* Quick Actions - Section 4 */
.gpp-app-scope .quick-actions {

    order: 4;

    position: relative;

    z-index: 7;

    margin-top: 0 !important;

}/* Styles spécifiques pour la grille des cartes de crédit */
.gpp-app-scope .credit-cards-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

    gap: 20px;

    margin: 20px 0;

}

.gpp-app-scope .credit-card-item {

    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);

    border: 1px solid #e2e8f0;

    padding: 20px;

    border-radius: 12px;

    transition: all 0.3s ease;

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

}

.gpp-app-scope .credit-card-item:hover {

    transform: translateY(-3px);

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);

    border-color: #3b82f6;

}

.gpp-app-scope .card-type {

    font-weight: 700;

    color: #1e40af;

    margin-bottom: 8px;

    font-size: 16px;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}

.gpp-app-scope .card-number {

    font-family: 'Courier New', monospace;

    font-size: 18px;

    font-weight: 600;

    margin-bottom: 8px;

    letter-spacing: 2px;

    color: #1e293b;

}

.gpp-app-scope .card-expiry {

    color: #64748b;

    font-size: 14px;

    margin-bottom: 15px;

    font-weight: 500;

}

.gpp-app-scope .card-actions {

    margin-top: 15px;

}



/* Styles responsifs */

@media (max-width: 1024px) {.gpp-app-scope .credit-cards-grid {

        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

        gap: 15px;

    }

}

@media (max-width: 768px) {.gpp-app-scope .dashboard-content {

        gap: 20px;

    }

.gpp-app-scope .credit-cards-grid {

        grid-template-columns: 1fr;

        gap: 15px;

    }

.gpp-app-scope .credit-card-item {

        padding: 15px;

    }

}/* Assurer que toutes les sections ont une largeur correcte */
.gpp-app-scope .gpp-card-section, .gpp-app-scope .bank-transfers-section, .gpp-app-scope .quick-actions {

    width: 100%;

    box-sizing: border-box;

}/* Correction pour les éléments flex/grid enfants */
.gpp-app-scope .dashboard-content > * {

    min-width: 0; /* Empêche le débordement */

}/* Reset des styles problématiques */
.gpp-app-scope .gpp-card-section * {

    box-sizing: border-box;

}

.gpp-app-scope .alert {

            padding: 15px;

            margin-bottom: 20px;

            border: 1px solid transparent;

            border-radius: 4px;

        }

.gpp-app-scope .alert-danger {

            color: #a94442;

            background-color: #f2dede;

            border-color: #ebccd1;

        }

.gpp-app-scope .alert-warning {

            color: #8a6d3b;

            background-color: #fcf8e3;

            border-color: #faebcc;

        }

.gpp-app-scope .form-control {

            display: block;

            width: 100%;

            height: 34px;

            padding: 6px 12px;

            font-size: 14px;

            line-height: 1.42857143;

            color: #555;

            background-color: #fff;

            border: 1px solid #ccc;

            border-radius: 4px;

            margin-bottom: 15px;

        }

.gpp-app-scope .btn {

            display: inline-block;

            padding: 6px 12px;

            margin-bottom: 0;

            font-size: 14px;

            font-weight: 400;

            line-height: 1.42857143;

            text-align: center;

            white-space: nowrap;

            vertical-align: middle;

            cursor: pointer;

            border: 1px solid transparent;

            border-radius: 4px;

        }

.gpp-app-scope .btn-primary {

            color: #fff;

            background-color: #337ab7;

            border-color: #2e6da4;

        }

.gpp-app-scope .btn-block {

            display: block;

            width: 100%;

        }

.gpp-app-scope .btn-lg {

            padding: 10px 16px;

            font-size: 18px;

            line-height: 1.3333333;

            border-radius: 6px;

        }/* Styles pour l'affichage horizontal des devises */
.gpp-app-scope .currency-symbol {

    font-size: 1.5rem;

    font-weight: bold;

    margin-right: 2px;

    display: inline-block;

}

.gpp-app-scope .currency-amount {

    font-size: 2rem;

    font-weight: bold;

    display: inline-block;

}/* Ajustements pour les cartes de statistiques */
.gpp-app-scope .bg-blue-200 .currency-symbol, .gpp-app-scope .bg-white .currency-symbol {

    font-size: 1.8rem;

    vertical-align: middle;

}

.gpp-app-scope .bg-blue-200 .currency-amount, .gpp-app-scope .bg-white .currency-amount {

    font-size: 2.2rem;

    vertical-align: middle;

}/* S'assurer que tout reste sur la même ligne */
.gpp-app-scope .text-2xl {

    white-space: nowrap;

    line-height: 1.2;

}/* Ajustements pour les montants colorés */
.gpp-app-scope .text-green-600 .currency-symbol, .gpp-app-scope .text-red-600 .currency-symbol, .gpp-app-scope .text-purple-600 .currency-symbol {

    color: inherit;

    font-size: 1.6rem;

}

.gpp-app-scope .text-green-600 .currency-amount, .gpp-app-scope .text-red-600 .currency-amount, .gpp-app-scope .text-purple-600 .currency-amount {

    color: inherit;

    font-size: 2rem;

}/* Styles spécifiques pour les devises */
.gpp-app-scope .currency-symbol {

    display: inline-block;

    vertical-align: middle;

    font-size: 1.3rem;

    font-weight: bold;

    margin-right: 3px;

}

.gpp-app-scope .currency-amount {

    display: inline-block;

    vertical-align: middle;

    font-size: 1.8rem;

    font-weight: bold;

}/* Ajustements pour les différentes devises */
.gpp-app-scope .currency-symbol-usd, .gpp-app-scope .currency-symbol-cad, .gpp-app-scope .currency-symbol-gbp, .gpp-app-scope .currency-symbol-jpy {

    font-size: 1.4rem;

}

.gpp-app-scope .currency-amount-usd, .gpp-app-scope .currency-amount-cad, .gpp-app-scope .currency-amount-gbp, .gpp-app-scope .currency-amount-jpy {

    font-size: 2rem;

}/* Pour les devises où le symbole vient après */
.gpp-app-scope .currency-symbol-eur, .gpp-app-scope .currency-symbol-xof, .gpp-app-scope .currency-symbol-chf {

    font-size: 1.4rem;

    margin-left: 5px;

    margin-right: 0;

}

.gpp-app-scope .currency-amount-eur, .gpp-app-scope .currency-amount-xof, .gpp-app-scope .currency-amount-chf {

    font-size: 2rem;

}/* Assurez que tout tient dans la largeur */
.gpp-app-scope .text-2xl {

    max-width: 100%;

    overflow: hidden;

}



/* Ajustements responsive */

@media (max-width: 768px) {.gpp-app-scope .currency-symbol {

        font-size: 1.1rem;

    }

.gpp-app-scope .currency-amount {

        font-size: 1.5rem;

    }

.gpp-app-scope .bg-blue-200 > .flex.justify-between.items-start, .gpp-app-scope .bg-white > .flex.justify-between.items-start {

        padding-right: 60px;

    }

.gpp-app-scope .bg-white.bg-opacity-40, .gpp-app-scope .bg-green-100, .gpp-app-scope .bg-red-100, .gpp-app-scope .bg-purple-100 {

        padding: 10px;

        right: 10px;

    }

}/* Styles pour les cartes de statistiques */
.gpp-app-scope .grid > div {

    min-height: 110px;

    display: flex;

    align-items: center;

}

.gpp-app-scope .flex.justify-between.items-start {

    width: 100%;

    align-items: center;

}/* Ajustements pour les montants réduits */
.gpp-app-scope .text-sm {

    margin-bottom: 8px !important;

    display: block;

}/* Pour les titres des montants */
.gpp-app-scope .font-bold {

    min-height: 40px;

    display: flex;

    align-items: center;

}/* Style inline pour les montants (alternative) */
.gpp-app-scope .amount-container {

    display: inline-flex;

    align-items: baseline;

    flex-wrap: nowrap;

    max-width: 100%;

}

.gpp-app-scope .currency-symbol-small {

    font-size: 0.9rem !important;

    margin-right: 2px;

    vertical-align: middle;

}

.gpp-app-scope .currency-amount-small {

    font-size: 1.2rem !important;

    vertical-align: middle;

    font-weight: bold;

}



/* Pour les grands nombres, réduire encore plus */

@media (max-width: 1200px) {.gpp-app-scope .currency-symbol-small {

        font-size: 0.8rem !important;

    }

.gpp-app-scope .currency-amount-small {

        font-size: 1.1rem !important;

    }

}



/* Ajustement pour les écrans mobiles */

@media (max-width: 768px) {.gpp-app-scope .grid > div {

        min-height: 100px;

        padding: 15px !important;

    }

.gpp-app-scope .currency-symbol-small {

        font-size: 0.75rem !important;

    }

.gpp-app-scope .currency-amount-small {

        font-size: 1rem !important;

    }

.gpp-app-scope .bg-white.bg-opacity-40, .gpp-app-scope .bg-green-100, .gpp-app-scope .bg-red-100, .gpp-app-scope .bg-purple-100 {

        padding: 8px !important;

        margin-left: 5px !important;

    }

.gpp-app-scope .fas.text-lg {

        font-size: 1rem !important;

    }

}