/*
 * Panneaux latéraux Refactia (tiroirs d'actions, de filtres, de réglages).
 *
 * Structure : .app-panel > .app-panel__header (+ __title, __subtitle, bouton
 * .app-close) > .app-panel__body > .app-panel__footer (optionnel).
 * Le positionnement et l'ouverture restent portés par les classes de
 * comportement du module (.right-menu + .right-menu-visible, .right-toolMenu…) ;
 * ce fichier ne fixe que la surface et la hiérarchie interne.
 * Valeurs : foundation/tokens.css. Registre : doc/design-system/README.md
 */

.app-panel {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    min-height: 0;
    background: var(--ds-bg);
    color: var(--ds-ink);
    border-left: 1px solid var(--ds-line);
    box-shadow: var(--ds-shadow-panel);
    font-family: var(--ds-font);
}

.app-panel__header {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-12);
    box-sizing: border-box;
    min-height: 58px;
    margin: 0;
    padding: var(--ds-space-10) var(--ds-space-10) var(--ds-space-10) var(--ds-space-16);
    border-bottom: 1px solid var(--ds-line);
    background: var(--ds-surface);
}

.app-panel__titles {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--ds-space-4);
    min-width: 0;
}

.app-panel__title {
    margin: 0;
    color: var(--ds-ink);
    font-size: var(--ds-text-lg);
    font-weight: var(--ds-weight-bold);
    letter-spacing: var(--ds-tracking-tight);
    line-height: 1.3;
}

.app-panel__subtitle {
    margin: 0;
    color: var(--ds-ink-muted);
    font-size: var(--ds-text-sm);
    line-height: 1.6;
}

.app-panel__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--ds-space-10);
    box-sizing: border-box;
    min-height: 0;
    padding: var(--ds-space-14);
    padding-bottom: calc(var(--ds-space-24) + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
}

.app-panel__section-title {
    margin: var(--ds-space-6) 0 0;
    padding-top: var(--ds-space-12);
    border-top: 1px solid var(--ds-line);
    color: var(--ds-ink-muted);
    font-size: var(--ds-text-sm);
    font-weight: var(--ds-weight-bold);
    letter-spacing: var(--ds-tracking-caps);
    text-transform: uppercase;
}

/* Bloc d'information (référence : fiche du document dans le panneau de la liste). */
.app-panel__card {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-6);
    box-sizing: border-box;
    padding: var(--ds-space-12);
    border: 1px solid var(--ds-line);
    border-radius: var(--ds-radius-md);
    background: var(--ds-surface);
}

.app-panel__footer {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ds-space-8);
    padding: var(--ds-space-12) var(--ds-space-14);
    border-top: 1px solid var(--ds-line);
    background: var(--ds-surface);
}