/*
 * Squelette de ChurchPlanning (design brief, « Principes d'interface ») : barre supérieure (logo, sélecteur d'organisation
 * et d'espace, menu du compte), menu latéral de 15 rem à gauche, contenu à droite. Sous 48 rem (768 px), le sélecteur
 * prend toute la largeur sur deux lignes et le menu latéral devient une rangée d'icônes au-dessus du contenu.
 */

/* La page occupe au moins toute la hauteur de la fenêtre : le filet du menu latéral descend jusqu'en bas. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-subtle);
    border-bottom: var(--border);
}

.topbar__brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-text);
    font-size: var(--font-size-large);
    font-weight: 600;
    white-space: nowrap;
}

.topbar__brand:hover { text-decoration: none; }
.topbar__logo { display: block; width: 32px; height: 32px; }

/* Cadre : menu latéral (optionnel) et contenu. */
.shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    flex: 1 0 auto;
}

.shell--with-sidebar {
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
}

.sidebar {
    padding: var(--space-4) var(--space-3);
    border-right: var(--border);
}

.nav-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-list > li + li { margin-top: var(--space-1); }

.nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius);
    color: var(--color-text);
}

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

/* Élément courant : fond gris, texte en gras et liseré bleu de 3 px. Le liseré est une barre droite, en retrait du haut
   et du bas de l'élément, indépendante de ses coins arrondis (jamais un border-left, qui ferait un croissant). */
.nav-link.is-active {
    background: var(--color-bg-neutral);
    font-weight: 600;
}

.nav-link.is-active::before {
    content: "";
    position: absolute;
    top: var(--space-2);
    bottom: var(--space-2);
    left: calc(-1 * var(--space-3) + var(--space-1));
    width: var(--marker-width);
    background: var(--color-primary);
}

.content {
    min-width: 0;
    padding: var(--space-5) var(--space-4);
}

/* Pages sans menu latéral (connexion, installation, erreurs) : contenu centré. */
.shell:not(.shell--with-sidebar) .content {
    width: 100%;
    max-width: 64rem;
    margin: 0 auto;
}

/* Sélecteur d'organisation et d'espace : accent d'identité vert ; le texte prend la variante foncée (contraste AA). */
.space-switcher,
.account-menu {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
}

.account-menu { margin-left: auto; }

.space-switcher__summary,
.account-menu__summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    border-radius: var(--radius);
    cursor: pointer;
    list-style: none;
}

.space-switcher__summary::-webkit-details-marker,
.account-menu__summary::-webkit-details-marker { display: none; }

.space-switcher__summary {
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-brand);
    background: var(--color-bg);
    color: var(--color-brand-fg);
    font-weight: 600;
}

.space-switcher__label {
    display: flex;
    align-items: baseline;
    min-width: 0;
}

/* Seul le nom de l'organisation peut être tronqué ; le nom de l'espace reste toujours entier. */
.space-switcher__organisation {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.space-switcher__separator,
.space-switcher__space { flex: none; white-space: nowrap; }

.space-switcher__menu,
.account-menu__menu {
    position: absolute;
    top: calc(100% + var(--space-1));
    left: 0;
    z-index: 50;
    min-width: 18rem;
    max-width: calc(100vw - 2 * var(--space-4));
    padding: var(--space-2);
    border: var(--border);
    border-radius: var(--radius);
    background: var(--color-bg);
    box-shadow: var(--shadow-menu);
}

.account-menu__menu { left: auto; right: 0; }

/* Un menu fermé ne prend aucune place (certains navigateurs mettent en page le contenu d'un <details> fermé). */
.space-switcher:not([open]) > .space-switcher__menu,
.account-menu:not([open]) > .account-menu__menu { display: none; }

.space-switcher__title {
    margin: 0;
    padding: var(--space-1) var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
}

.space-switcher__list { margin: 0; padding: 0; list-style: none; }

.space-switcher__item {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--space-2);
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
    border-radius: var(--radius);
    color: var(--color-text);
}

.space-switcher__item:hover { background: var(--color-bg-subtle); text-decoration: none; }
.space-switcher__item.is-current { font-weight: 600; }

/* Repère de l'entrée courante : barre verte droite, comme dans le menu latéral. */
.space-switcher__item.is-current::before {
    content: "";
    position: absolute;
    top: var(--space-2);
    bottom: var(--space-2);
    left: 0;
    width: var(--marker-width);
    background: var(--color-brand);
}

.space-switcher__item-organisation { flex-basis: 100%; }
.space-switcher__item-space { color: var(--color-text-muted); font-size: var(--font-size-small); font-weight: 400; }
/* Sans organisation (Administration), l'espace est le libellé principal de l'entrée. */
.space-switcher__item-space:first-child { color: var(--color-text); font-size: var(--font-size-base); font-weight: inherit; }

/* Menu du compte : initiales dans une pastille, nom, chevron. */
.account-menu__summary {
    padding: var(--space-1) var(--space-2) var(--space-1) var(--space-1);
    color: var(--color-text);
}

.account-menu__summary:hover { background: var(--color-bg-neutral); }

.avatar {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: var(--border);
    border-radius: 50%;
    background: var(--color-bg-neutral);
    color: var(--color-text);
    font-size: var(--font-size-small);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.account-menu__name { white-space: nowrap; }

.account-menu__identity {
    margin: 0;
    padding: var(--space-1) var(--space-2) var(--space-2);
    border-bottom: var(--border);
}

.account-menu__email { display: block; color: var(--color-text-muted); font-size: var(--font-size-small); overflow-wrap: anywhere; }

.account-menu__form { margin: var(--space-2) 0 0; }

.account-menu__action {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2);
    border: 0;
    border-radius: var(--radius);
    background: none;
    color: var(--color-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

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

/* Mobile : une colonne. Le sélecteur passe sur sa propre ligne, pleine largeur, organisation et espace sur deux lignes ;
   le menu latéral devient une rangée d'icônes seules (libellé dans aria-label et title), onglet actif souligné en vert. */
@media (max-width: 48rem) {
    .topbar { padding: var(--space-3) var(--space-4); }

    .space-switcher {
        order: 3;
        flex-basis: 100%;
    }

    .space-switcher__summary {
        flex: 1;
        min-height: var(--touch-target);
        padding: var(--space-2) var(--space-3);
    }

    .space-switcher__summary > .octicon:last-child { margin-left: auto; }

    .space-switcher__label {
        flex-direction: column;
        align-items: flex-start;
    }

    .space-switcher__organisation { max-width: 100%; }
    .space-switcher__separator { display: none; }
    .space-switcher__organisation ~ .space-switcher__space { font-weight: 400; }
    .space-switcher__menu { right: 0; min-width: 0; }

    .account-menu__name,
    .account-menu__chevron { display: none; }

    /* Une colonne : la rangée d'icônes garde sa hauteur, le contenu prend le reste. */
    .shell--with-sidebar {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto 1fr;
    }

    .sidebar {
        padding: 0 var(--space-4);
        border-right: 0;
        border-bottom: var(--border);
    }

    .nav-list { display: flex; }
    .nav-list > li { flex: 1; }
    .nav-list > li + li { margin-top: 0; }

    .nav-link {
        justify-content: center;
        min-height: var(--touch-target);
        padding: var(--space-3) var(--space-2);
        border-radius: 0;
    }

    .nav-link__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .nav-link.is-active { background: none; }

    .nav-link.is-active::before {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        height: var(--marker-width);
        background: var(--color-brand);
    }
}