/* =============================================================================
   PLANNING V2 — Point d'entrée CSS
   Importe les partitions dans l'ordre logique.
   ============================================================================= */

@import url('../planning/tokens.css');
@import url('../planning/toolbar.css');
@import url('../planning/panel.css');
@import url('../planning/grid.css');
@import url('../planning/segments.css');
@import url('../planning/modals.css');
@import url('../planning/extras.css');

/* ── Container racine ───────────────────────────────────────────────────────── */
.p2-container {
    background: var(--bg-body);
    color: var(--text-main);
    font-family: var(--font-sans);
    height: calc(100vh - 45px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

/* ── Loading state ──────────────────────────────────────────────────────────── */
.p2-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-body);
    z-index: 50;
    flex-direction: column;
    gap: 12px;
}
.p2-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-panel);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: p2-spin .7s linear infinite;
}
@keyframes p2-spin { to { transform: rotate(360deg); } }
.p2-loading-text { font-size: var(--text-sm); color: var(--text-muted); }

/* ── Empty state ────────────────────────────────────────────────────────────── */
.p2-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px;
    color: var(--text-muted);
}
.p2-empty i { font-size: 36px; opacity: .3; }
.p2-empty p { font-size: var(--text-sm); }

/* ── Transitions Vue ────────────────────────────────────────────────────────── */
.p2-fade-enter-active,
.p2-fade-leave-active { transition: opacity var(--trans-base); }
.p2-fade-enter-from,
.p2-fade-leave-to { opacity: 0; }

.p2-slide-up-enter-active,
.p2-slide-up-leave-active { transition: all var(--trans-slow); }
.p2-slide-up-enter-from,
.p2-slide-up-leave-to { opacity: 0; transform: translateY(8px); }