/*
 * Pages « Mon abonnement » et « Profil de l'entreprise » de l'espace entreprise (/master) — mise en forme uniquement.
 * Portée : .acct (wrapper posé dans la vue). Pourquoi ce fichier : le CSS compilé de Filament ne contient que les
 * classes utilitaires utilisées par Filament lui-même ; les teintes danger/warning, les grilles responsives et
 * certaines variantes `dark:` n'y existent pas, d'où des bandeaux sans fond et des textes illisibles en mode sombre.
 */

.acct {
    --acct-text: #344054;
    --acct-muted: #667085;
    --acct-line: rgba(16, 24, 40, 0.12);
    --acct-danger-bg: #fef3f2;
    --acct-danger-line: #fda29b;
    --acct-danger-text: #b42318;
    --acct-warning-bg: #fffaeb;
    --acct-warning-line: #fec84b;
    --acct-warning-text: #93370d;
    --acct-success: #12b76a;
}

.dark .acct {
    --acct-text: #d0d5dd;
    --acct-muted: #98a2b3;
    --acct-line: rgba(255, 255, 255, 0.14);
    --acct-danger-bg: rgba(240, 68, 56, 0.12);
    --acct-danger-line: rgba(240, 68, 56, 0.5);
    --acct-danger-text: #fda29b;
    --acct-warning-bg: rgba(247, 144, 9, 0.12);
    --acct-warning-line: rgba(247, 144, 9, 0.5);
    --acct-warning-text: #fec84b;
    --acct-success: #32d583;
}

.acct .acct-body {
    color: var(--acct-text);
    font-size: 0.875rem;
    line-height: 1.375rem;
}

.acct .acct-muted {
    color: var(--acct-muted);
    font-size: 0.875rem;
}

.acct .acct-alert {
    padding: 0.75rem 1rem;
    border: 1px solid var(--acct-line);
    border-radius: 0.75rem;
    font-size: 0.875rem;
}

.acct .acct-alert--danger {
    border-color: var(--acct-danger-line);
    background: var(--acct-danger-bg);
    color: var(--acct-danger-text);
}

.acct .acct-alert--warning {
    border-color: var(--acct-warning-line);
    background: var(--acct-warning-bg);
    color: var(--acct-warning-text);
}

.acct .acct-pending {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.acct .acct-pending__title {
    font-weight: 600;
}

.acct .acct-pending__text {
    font-size: 0.875rem;
}

.acct .acct-tile {
    padding: 1rem;
    border: 1px solid var(--acct-line);
    border-radius: 0.75rem;
}

.acct .acct-tile--danger {
    border-color: var(--acct-danger-line);
    background: var(--acct-danger-bg);
}

.acct .acct-tile__limit {
    font-weight: 400;
}

.acct .acct-tile__flag {
    margin-top: 0.25rem;
    color: var(--acct-danger-text);
    font-size: 0.75rem;
    font-weight: 600;
}

.acct .acct-features {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: 1fr;
}

.acct .acct-feature {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--acct-text);
    font-size: 0.875rem;
}

.acct .acct-check {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--acct-success);
}

.acct .acct-offers {
    border: 1px solid var(--acct-line);
    border-radius: 0.75rem;
    overflow: hidden;
}

.acct .acct-offer {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
}

.acct .acct-offer + .acct-offer {
    border-top: 1px solid var(--acct-line);
}

.acct .acct-offer__desc {
    margin-top: 0.25rem;
}

.acct .acct-offer__limits {
    margin-top: 0.5rem;
}

.acct .acct-offer__buy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.acct .acct-offer__buy > div {
    text-align: right;
}

.acct .acct-offer__due {
    font-size: 0.75rem;
}

@media (min-width: 640px) {
    .acct .acct-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .acct .acct-pending {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

@media (min-width: 1024px) {
    .acct .acct-features {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .acct .acct-offer {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .acct .acct-offer__buy {
        justify-content: flex-end;
        min-width: max-content;
    }
}