/* ============================================================
   Perga Design System — pg-panel.css
   UI-S05-T03: Slide-in detail panel
   ============================================================ */

.pg-panel {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    z-index: var(--pg-z-dropdown, 110);
    pointer-events: none;
}

.pg-panel__sheet {
    width: 420px;
    margin-top: var(--pg-header-height, 48px);
    height: calc(100vh - var(--pg-header-height, 48px));
    background: var(--pg-color-surface);
    border-left: 1px solid var(--pg-color-border);
    box-shadow: var(--pg-shadow-xl, -8px 0 24px rgba(0,0,0,0.12));
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--pg-t-slow, 250ms ease), opacity var(--pg-t-fast, 180ms ease);
    pointer-events: auto;
}

.pg-panel--open .pg-panel__sheet {
    transform: translateX(0);
}

.pg-panel--dialog {
    justify-content: center;
    align-items: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.28);
    backdrop-filter: blur(6px);
    pointer-events: auto;
}

.pg-panel--dialog .pg-panel__sheet {
    width: min(680px, calc(100vw - 32px));
    max-height: min(78vh, 760px);
    height: auto;
    margin-top: 0;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 20px;
    box-shadow: 0 28px 60px rgba(15, 23, 42, 0.18);
    transform: translateY(16px) scale(0.98);
    opacity: 0;
}

.pg-panel--dialog.pg-panel--open .pg-panel__sheet {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* ── Header ────────────────────────────────────────────────── */
.pg-panel__header {
    display: flex;
    align-items: center;
    gap: var(--pg-sp-3);
    padding: var(--pg-sp-4) var(--pg-sp-5);
    border-bottom: 1px solid var(--pg-color-border);
    background: var(--pg-color-bg);
    flex-shrink: 0;
}

.pg-panel__title {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: var(--pg-color-text);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pg-panel__close {
    flex-shrink: 0;
}

/* ── Body ──────────────────────────────────────────────────── */
.pg-panel__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--pg-sp-5);
}

.pg-panel__section {
    margin-bottom: var(--pg-sp-5);
}

.pg-panel__section-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--pg-color-text-tertiary);
    margin: 0 0 var(--pg-sp-3);
}

.pg-panel__dl {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: var(--pg-sp-2) var(--pg-sp-3);
    font-size: 13px;
}

.pg-panel__dt {
    color: var(--pg-color-text-secondary);
    font-weight: 500;
}

.pg-panel__dd {
    color: var(--pg-color-text);
    margin: 0;
}

.pg-panel__actions {
    display: flex;
    gap: var(--pg-sp-2);
    padding: var(--pg-sp-4) var(--pg-sp-5);
    border-top: 1px solid var(--pg-color-border);
    background: var(--pg-color-bg);
    flex-shrink: 0;
}

/* ── Main content shrinks when panel is open ───────────────── */
.has-panel {
    margin-right: 420px;
    transition: margin-right var(--pg-t-slow, 250ms ease);
}

/* ── Kanban card hover (UI-S05-T04) ────────────────────────── */
.kanban-card {
    transition: transform var(--pg-t-normal, 150ms ease),
                box-shadow var(--pg-t-normal, 150ms ease);
}

.kanban-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--pg-shadow-md, 0 4px 12px rgba(0,0,0,0.12));
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 900px) {
    .pg-panel__sheet {
        width: 100%;
    }
    .has-panel {
        margin-right: 0;
    }
    .pg-panel--dialog {
        padding: 12px;
    }
    .pg-panel--dialog .pg-panel__sheet {
        width: 100%;
        max-height: calc(100vh - 24px);
    }
}