/*
 * Charte graphique Notipush (NP-006).
 * Source unique des couleurs/typo partagées par les 3 vues.
 * Voir docs/charte-graphique.md pour la justification des choix.
 */
:root {
    --np-ink: #1B2340;       /* marque, titres, header */
    --np-text: #2B2F3A;      /* texte courant */
    --np-muted: #6B7280;     /* texte secondaire */
    --np-accent: #FF5A36;    /* CTA, badges, signal "push" */
    --np-accent-dark: #E14A28;
    --np-success-bg: #E6F4EA;
    --np-success-text: #1E7E34;
    --np-danger: #DC2626;
    --np-danger-bg: #FDECEA;
    --np-warning-bg: #FEF3C7;
    --np-warning-text: #92400E;
    --np-border: #E5E7EB;
    --np-surface: #FFFFFF;
    --np-bg: #FAFAFB;
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    max-width: 640px;
    margin: 60px auto;
    padding: 0 20px;
    color: var(--np-text);
    background: var(--np-bg);
}

a { color: var(--np-accent-dark); }

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}
.brand img { width: 30px; height: 30px; flex: none; }
.brand span {
    font-size: 22px;
    font-weight: 700;
    color: var(--np-ink);
    letter-spacing: -0.02em;
}

h1 { color: var(--np-ink); }

.card {
    background: var(--np-surface);
    border: 1px solid var(--np-border);
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
}

.error {
    background: var(--np-danger-bg);
    color: var(--np-danger);
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 20px;
}

.warning {
    color: var(--np-warning-text);
    background: var(--np-warning-bg);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    margin-top: 10px;
}

.btn {
    display: inline-block;
    background: var(--np-accent);
    color: #fff;
    padding: 12px 24px;
    border-radius: 6px;
    border: none;
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
}
.btn.secondary { background: var(--np-muted); }
.btn.danger { background: var(--np-danger); }

.badge {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
}
.badge.active, .badge:not(.inactive) {
    background: var(--np-success-bg);
    color: var(--np-success-text);
}
.badge.inactive {
    background: #EEE;
    color: #666;
}

table { width: 100%; border-collapse: collapse; margin-top: 16px; }
th, td { text-align: left; padding: 8px; border-bottom: 1px solid var(--np-border); font-size: 14px; }

code { background: #F1F1F1; padding: 2px 6px; border-radius: 4px; }