/*
 * Settings page styles — shared by every app's /settings.
 * Loaded via main.css @import; symlinked into every app via SHARED_PATHS.
 *
 * Owns:
 *   .settings-xref-card       cross-reference card (deep-link to other app)
 *   .logo-section             central tenant-logo card (managed in xorizo)
 *
 * Per-app duplicates (airfact-custom.css, xorizo organization.css) were
 * removed in Phase 5d so this file is the single source.
 */

/* ── Cross-reference card ─────────────────────────────────────────────── */
.settings-xref-card {
    display: flex; align-items: center; gap: var(--space-4);
    padding: var(--space-4); border: 1px solid var(--border);
    border-radius: 8px; background: var(--color-surface-2);
    margin-bottom: var(--space-3);
}
.settings-xref-card__body { flex: 1; min-width: 0; }
.settings-xref-card__title { font-weight: 600; font-size: .9rem; margin-bottom: 2px; }
.settings-xref-card__value { font-size: .95rem; color: var(--text-primary); margin-bottom: 4px; }
.settings-xref-card__desc  { font-size: .8rem;  color: var(--text-secondary); line-height: 1.4; }

/* ── Section separator — used between sections in settings tab views ─── */
.settings-sep {
    border: 0;
    border-top: 1px solid var(--border);
    margin: var(--space-6) 0;
}

/* ── Logo section (managed in xorizo) ─────────────────────────────────── */
.logo-section { display: flex; flex-direction: column; gap: var(--space-4); }
.logo-section--compact { flex-direction: row; align-items: center; gap: var(--space-3); }
.logo-preview { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.tenant-logo  { max-width: 100%; max-height: 120px; object-fit: contain; border-radius: 6px; }
.logo-placeholder {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
    padding: var(--space-6); background: var(--color-surface-2);
    border: 2px dashed var(--border); border-radius: 8px;
    color: var(--text-secondary); text-align: center;
}
.logo-actions { display: flex; gap: var(--space-2); justify-content: center; }
.logo-recommendations h4 { font-size: .8rem; font-weight: 600; margin-bottom: .4rem; color: var(--text-secondary); }
.logo-recommendations ul { font-size: .8rem; color: var(--text-secondary); padding-left: 1.2rem; margin: 0; }
.logo-recommendations li { margin-bottom: .2rem; }

/* ── Sous-titre d'une section de réglages ─────────────────────────────────
 *
 * Le texte gris sous un `section_header()` : ce que la section décide, en une
 * phrase. Il était écrit à la main dans CHAQUE vue —
 * `<p class="text-secondary text-sm" style="margin:.2rem 0 var(--space-4)">` —
 * et mesuré le 14-09-2026 sur /settings : QUATRE marges différentes pour un
 * seul rôle (`--space-4` ×11, `--space-3` ×3, `0 0 --space-4`, `--space-5`).
 * Un rôle, une classe ; la valeur retenue est la majoritaire.
 *
 * ⚠ Elle porte AUSSI la couleur et la taille : `.text-secondary.text-sm` sur
 * chaque paragraphe, c'est trois classes pour dire « sous-titre » — et rien
 * n'empêchait d'en oublier une. Ici le rôle se nomme une fois.
 */
.settings-hint {
    margin: .2rem 0 var(--space-4);
    font-size: .875rem;
    color: var(--text-secondary);
    line-height: 1.5;
}
/* Un sous-titre qui précède IMMÉDIATEMENT une table respire un cran de moins :
   le cadre du tableau porte déjà son propre bord haut. */
.settings-hint--table { margin-bottom: var(--space-3); }

/* ── L'INTRO D'UN PANNEAU D'ONGLET ────────────────────────────────────────
 *
 * Pas un sous-titre de section : la phrase qui ouvre TOUT un onglet, avant le
 * premier bloc, et qui dit à quoi sert cette intégration. Elle respire un cran
 * de plus, parce que ce qui la suit est un bloc entier (une alerte, un cadre de
 * tableau, un formulaire), pas une rangée de champs.
 *
 * Mesuré sur `/integrations` le 15-09-2026 : les CINQ panneaux la rendaient à
 * la main, `<p class="text-secondary text-sm" style="margin:0 0 var(--space-5)">`
 * — la même valeur recopiée cinq fois, et trois classes pour dire « intro ».
 */
.settings-hint--panneau { margin: 0 0 var(--space-5); }

/* Le même rôle DANS une pile qui espace déjà (`.form-layout`, `.form`) : la
 * gouttière vient du conteneur, la note ne doit rien ajouter. Sans ce cran, le
 * seul recours était `style="margin:0"` — soit un quatrième endroit où la
 * valeur se décide. La règle du socle : le rôle se nomme, l'espacement se
 * choisit parmi des crans NOMMÉS, jamais en ligne. */
.settings-hint--nu { margin: 0; }