/* ============================================================================
   LogiFlotte — coquille applicative : sidebar fixe + colonne main + topbar.
   Structure :
     .app-shell        (flex horizontal)
       .sidebar        (240px fixe)
       .app-main       (colonne flex, largeur restante)
         .topbar
         .app-content  (scroll)
   ============================================================================ */

.app-shell {
    display: flex;
    min-height: 100vh;
}

.app-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;                    /* évite le débordement des tableaux larges */
    margin-left: var(--sidebar-width);
    background: var(--color-bg);
}

.app-content {
    flex: 1;
    padding: var(--space-6);
    max-width: var(--content-max-width);
    width: 100%;
    margin: 0 auto;
}

.app-content > section + section,
.app-content > .card + .card,
.app-content > .card + section,
.app-content > section + .card {
    margin-top: var(--space-6);
}

/* -- Bandeau "page-title" autonome (fallback quand le topbar n'est pas rendu) */
.page-title {
    font-size: var(--font-size-2xl);
    margin: 0;
    color: var(--color-text);
}

/* -- Bandeau d'impersonation (super-admin visitant une société cliente) -- */
.impersonate-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-6);
    background: var(--color-warning-light);
    color: #78350f;
    border-bottom: 1px solid #fcd34d;
    font-size: var(--font-size-sm);
    line-height: 1.35;
}
.impersonate-banner strong {
    color: #92400e;
    font-weight: 600;
}
.impersonate-banner .btn {
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .impersonate-banner {
        flex-direction: column;
        align-items: flex-start;
        padding: var(--space-3) var(--space-4);
    }
}

/* -- Mobile : la sidebar slide, le main reprend toute la largeur -- */
@media (max-width: 768px) {
    .app-main {
        margin-left: 0;
        padding-top: var(--topbar-height);
    }
    .app-content {
        padding: var(--space-4);
    }
}