/* KagoPay — styles globaux */

.page-content {
    padding: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Sidebar nav active */
.mdl-navigation__link {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 4px;
    transition: background .2s;
}
.mdl-navigation__link:hover,
.active-nav {
    background: rgba(63, 81, 181, .12);
    color: #3F51B5 !important;
}

/* KPI cards */
.kpi-card {
    min-height: 100px;
}
.kpi-card .kpi-value {
    font-size: 2rem;
    font-weight: 700;
    color: #3F51B5;
}
.kpi-card .kpi-label {
    font-size: .85rem;
    color: #757575;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.kpi-card .kpi-icon {
    font-size: 2.5rem;
    opacity: .25;
    float: right;
    margin-top: -10px;
}

/* Status badges */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.badge-pending  { background: #FFF9C4; color: #F57F17; }
.badge-success  { background: #E8F5E9; color: #2E7D32; }
.badge-failed   { background: #FFEBEE; color: #C62828; }
.badge-refunded { background: #E3F2FD; color: #1565C0; }

/* API Key copy box */
.api-key-box {
    font-family: monospace;
    background: #F5F5F5;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: .9rem;
    word-break: break-all;
}

/* Auth pages — design unifié */
.auth-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #E8EAF6;
    padding: 32px 16px;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}
.auth-card {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,.15);
    overflow: hidden;
}
.auth-card.auth-card--wide { max-width: 520px; }
.auth-header {
    background: linear-gradient(135deg, #3F51B5 0%, #283593 100%);
    color: #fff;
    padding: 28px 32px;
    text-align: center;
}
.auth-header .material-icons { font-size: 2.8rem; opacity: .9; display: block; }
.auth-header h1 { margin: 8px 0 4px; font-size: 1.7rem; font-weight: 700; }
.auth-header p  { margin: 0; opacity: .85; font-size: .9rem; }
.auth-body { padding: 28px 32px 32px; }
/* Legacy — garder auth-logo pour compatibilité */
.auth-logo { text-align: center; margin-bottom: 24px; }
.auth-logo .material-icons { font-size: 3rem; color: #3F51B5; }
.auth-logo h1 { font-size: 1.6rem; color: #3F51B5; margin: 8px 0 4px; }
.auth-logo p  { color: #757575; font-size: .9rem; margin: 0; }

/* Alertes */
.alert {
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 16px;
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.alert-error   { background: #FFEBEE; color: #C62828; border-left: 4px solid #EF5350; }
.alert-success { background: #E8F5E9; color: #2E7D32; border-left: 4px solid #4CAF50; }
.alert-info    { background: #E3F2FD; color: #1565C0; border-left: 4px solid #42A5F5; }

/* Layout sans drawer (pages auth) */
.no-drawer .mdl-layout__drawer { display: none !important; }
.no-drawer .mdl-layout__content { margin-left: 0 !important; }
.no-drawer .mdl-layout__header { display: none !important; }

/* Section titre de page */
.page-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}
.page-header .ph-icon {
    background: #3F51B5;
    color: #fff;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-header h2 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 600;
    color: #212121;
}
.page-header p {
    margin: 2px 0 0;
    font-size: .85rem;
    color: #757575;
}