/*
 * Composants (design brief, « Composants ») : ceux de ChurchPlanning, sans changement, et ceux propres à MyHR.
 * Chaque composant est montré sur la page /design.
 */

/* Boutons : un seul bouton principal (bleu) par écran ; le rouge ne sert qu'aux actions destructrices. */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 5px var(--space-4);
    background: var(--color-bg-subtle);
    border: var(--border);
    border-radius: var(--radius);
    color: var(--color-text);
    font: inherit;
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
    cursor: pointer;
}

.button:hover { background: var(--color-bg-neutral); text-decoration: none; }

.button--primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-primary);
}

.button--primary:hover { background: var(--color-primary-hover); }

.button--danger {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: var(--color-on-danger);
}

.button--danger:hover { background: var(--color-danger-hover); }

.button--small {
    padding: 1px var(--space-3);
    font-size: var(--font-size-small);
}

/* Cible tactile de 44 px (espace des employés, sur mobile) */
.button--touch { min-height: var(--touch-target); }

.button:disabled,
.button[aria-disabled="true"] {
    opacity: 0.6;
    cursor: not-allowed;
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

/* Badges d'état : toujours un libellé, jamais la couleur seule. */
.badge {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-1);
    padding: 0 var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: 2em;
    background: var(--color-bg-neutral);
    color: var(--color-text);
    font-size: var(--font-size-small);
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
}

.badge .octicon { width: 0.95em; height: 0.95em; align-self: center; }
.badge--info { background: var(--color-info-bg); border-color: var(--color-info-border); color: var(--color-info-fg); }
.badge--success { background: var(--color-success-bg); border-color: var(--color-success-border); color: var(--color-success-fg); }
.badge--attention { background: var(--color-attention-bg); border-color: var(--color-attention-border); color: var(--color-attention-fg); }
.badge--danger { background: var(--color-danger-bg); border-color: var(--color-danger-border); color: var(--color-danger-fg); }

/* Messages et bandeaux : un mot d'état puis une phrase, avec une icône. */
.flash {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.flash__text { margin: 0; }
/* L'icône se centre sur la première ligne du texte. */
.flash > .octicon { margin-top: calc((var(--line-height) * 1em - 16px) / 2); }
.flash--success { background: var(--color-success-bg); border-color: var(--color-success-border); color: var(--color-success-fg); }
.flash--info { background: var(--color-info-bg); border-color: var(--color-info-border); color: var(--color-info-fg); }
.flash--warning { background: var(--color-attention-bg); border-color: var(--color-attention-border); color: var(--color-attention-fg); }
.flash--error { background: var(--color-danger-bg); border-color: var(--color-danger-border); color: var(--color-danger-fg); }

/* Tableau dense : défile horizontalement au lieu de s'écraser. */
/* position: relative : les libellés masqués (positionnés en absolu) restent dans la zone qui défile. */
.table-wrapper { position: relative; overflow-x: auto; border: var(--border); border-radius: var(--radius); }

.table {
    width: 100%;
    border-collapse: collapse;
}

.table th,
.table td {
    padding: var(--space-2) var(--space-3);
    border-bottom: var(--border);
    text-align: left;
    vertical-align: middle;
}

.table th {
    background: var(--color-bg-subtle);
    font-weight: 600;
}

.table tbody tr:last-child td,
.table tbody tr:last-child th { border-bottom: 0; }

.table .is-danger td { background: var(--color-danger-bg); }
.table__actions { text-align: right; white-space: nowrap; }
.table-wrapper + .form__actions,
.table-wrapper + .button-row { margin-top: var(--space-3); }

/* Formulaires */
.form { max-width: 32rem; margin-bottom: var(--space-5); }
.field { margin-bottom: var(--space-4); }
.field__label { display: block; margin-bottom: var(--space-1); font-weight: 600; }
.field__help { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: var(--font-size-small); }

.field__error {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin: var(--space-1) 0 0;
    color: var(--color-danger-fg);
    font-size: var(--font-size-small);
    font-weight: 600;
}

.field--inline { display: flex; align-items: center; gap: var(--space-2); }
.field--inline .field__label { margin: 0; font-weight: 400; }

.input {
    display: block;
    width: 100%;
    padding: 5px var(--space-3);
    background: var(--color-bg);
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius);
    color: var(--color-text);
    font: inherit;
    line-height: 20px;
}

.field--invalid .input { border-color: var(--color-danger); }
.form__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* État vide */
.empty-state {
    padding: var(--space-6) var(--space-4);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg-subtle);
    text-align: center;
}

.empty-state__icon { display: block; margin-bottom: var(--space-2); color: var(--color-text-muted); }
.empty-state__title { margin-bottom: var(--space-2); }
.empty-state__message { margin: 0 auto var(--space-3); max-width: 32rem; color: var(--color-text-muted); }
.empty-state__message:last-child { margin-bottom: 0; }

/* Boîte de confirmation : la question nomme l'objet et la conséquence. */
.dialog {
    max-width: 28rem;
    padding: var(--space-5);
    border: var(--border);
    border-radius: var(--radius);
    background: var(--color-bg);
    color: var(--color-text);
}

.dialog::backdrop { background: var(--color-overlay); }
.dialog__title { padding: 0; border: 0; font-size: var(--font-size-large); }
.dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }

/* Liste de cartes ; carte document : icône, titre, date de publication, badge, bouton « Télécharger ». */
.card-list { margin: 0; padding: 0; list-style: none; border: var(--border); border-radius: var(--radius); }
.card-list__item + .card-list__item { border-top: var(--border); }
.card-list__link { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); color: var(--color-text); }
.card-list__link:hover { background: var(--color-bg-subtle); text-decoration: none; }
.card-list__name { flex: 1; font-weight: 600; }

.document-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
}

.document-card__icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: var(--border);
    border-radius: var(--radius);
    background: var(--color-bg-subtle);
    color: var(--color-text-muted);
}

.document-card__body { flex: 1; min-width: 0; }
.document-card__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); margin: 0; font-size: var(--font-size-base); font-weight: 600; }
.document-card__meta { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-small); }
.document-card__action { flex: none; }

/* Liste de détails */
.details { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-5); margin: 0 0 var(--space-4); }
.details dt { color: var(--color-text-muted); }
.details dd { margin: 0; }

/* En-tête de page avec action, lien de retour */
.page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.page-header h1 { margin: 0; }
.back-link-row { margin: 0 0 var(--space-3); }

.back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-left: calc(-1 * var(--space-2));
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius);
    color: var(--color-text-muted);
}

.back-link:hover { background: var(--color-bg-subtle); color: var(--color-text); text-decoration: none; }

/* Pages de connexion et d'installation */
.auth-card { max-width: 26rem; margin: var(--space-5) auto; }
.qr-code { display: block; max-width: 100%; height: auto; margin: 0 0 var(--space-4); border: var(--border); border-radius: var(--radius); }
.secret { word-break: break-all; }
.recovery-codes { columns: 2; padding-left: var(--space-5); font-size: var(--font-size-large); font-variant-numeric: tabular-nums; }

/* Pages d'erreur : le grand code d'état prend la variante foncée du vert (texte). */
.error-page { padding: var(--space-6) 0; text-align: center; }

.error-page__status {
    margin: 0;
    color: var(--color-brand-fg);
    font-size: 3rem;
    font-weight: 700;
}

/* Page /design : sections, nuancier et échelles */
.demo { margin-bottom: var(--space-6); scroll-margin-top: var(--space-4); }
.demo > h3 { margin-top: var(--space-4); }
.demo-toc { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: 0 0 var(--space-5); padding: 0; list-style: none; }

.swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: var(--space-3);
    margin: 0 0 var(--space-4);
    padding: 0;
    list-style: none;
}

.swatch { display: flex; align-items: center; gap: var(--space-3); }
.swatch__chip { flex: none; width: 40px; height: 40px; border: var(--border); border-radius: var(--radius); }
.swatch__name { display: block; font-weight: 600; }
.swatch__value { display: block; color: var(--color-text-muted); font-size: var(--font-size-small); }

.swatch__chip--bg { background: var(--color-bg); }
.swatch__chip--bg-subtle { background: var(--color-bg-subtle); }
.swatch__chip--bg-neutral { background: var(--color-bg-neutral); }
.swatch__chip--border { background: var(--color-border); }
.swatch__chip--border-input { background: var(--color-border-input); }
.swatch__chip--text { background: var(--color-text); }
.swatch__chip--text-muted { background: var(--color-text-muted); }
.swatch__chip--primary { background: var(--color-primary); }
.swatch__chip--brand { background: var(--color-brand); }
.swatch__chip--brand-fg { background: var(--color-brand-fg); }
.swatch__chip--danger { background: var(--color-danger); }
.swatch__chip--success { background: var(--color-success); }
.swatch__chip--info { background: var(--color-info-bg); border-color: var(--color-info-border); }
.swatch__chip--attention { background: var(--color-attention-bg); border-color: var(--color-attention-border); }

.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--space-2) var(--space-3); margin: 0; padding: 0; list-style: none; }
.icon-grid li { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text); }
.icon-grid code { color: var(--color-text-muted); }

/* Échelle des titres reproduite sans balises de titre, pour garder la hiérarchie de la page. */
.type-h1 { font-size: 1.5rem; font-weight: 600; line-height: 1.25; }
.type-h2 { padding-bottom: var(--space-2); border-bottom: var(--border); font-size: 1.25rem; font-weight: 600; line-height: 1.25; }

/* Démonstration d'un menu déroulant ouvert, dans le flux de la page. */
.space-switcher--demo { flex-direction: column; align-items: stretch; gap: var(--space-1); max-width: 30rem; }
.demo-menu { position: static; width: 100%; min-width: 0; box-shadow: none; }
.demo-nav { max-width: var(--sidebar-width); padding-left: var(--space-3); }

@media (max-width: 48rem) {
    .document-card { flex-wrap: wrap; }
    .document-card__action { flex-basis: 100%; }
    .document-card__action .button { width: 100%; min-height: var(--touch-target); }
}