/* ══════════════════════════════════════════════════════════════
   Planning Module — Vertical Sidebar Navigation
   ══════════════════════════════════════════════════════════════ */

/* Hide page-navigation tab buttons (sidebar replaces them on desktop) */
.pl-tab-board,
.pl-tab-planning,
.pl-tab-gantt,
.pl-tab-orderbook,
.pl-tab-infoboard,
.pl-tab-tracking,
.pl-tab-completed,
.pl-tab-downtime,
.pl-tab-info { display: none !important; }

/* Exception: Ops Log + Downtime shown in Info Board nav context (right-side buttons) */
.pl-infoboard-actions .pl-tab-tracking,
.pl-infoboard-actions .pl-tab-downtime { display: inline-block !important; }

/* ── Sidebar shell ── */
#pl-sidebar {
    position: fixed;
    left: 0;
    top: 46px;          /* JS auto-detects; 46px = fallback for single Dolibarr nav bar */
    bottom: 0;
    width: 48px;
    background: #0f1623;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width 0.2s ease;
    box-shadow: 2px 0 16px rgba(0,0,0,0.5);
    border-right: 1px solid rgba(255,255,255,0.06);
    border-radius: 0 12px 12px 0;
}

#pl-sidebar:hover {
    width: 200px;
}

/* ── Logo area ── */
.pl-sb-logo {
    display: flex;
    align-items: center;
    height: 48px;
    padding: 0 12px;
    gap: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
    text-decoration: none !important;
    overflow: hidden;
    white-space: nowrap;
    color: #e2e8f0 !important;
    background: #0f1623;
}
.pl-sb-logo:hover { background: #1a2235 !important; color: #fff !important; }

.pl-sb-logo-icon {
    width: 24px;
    min-width: 24px;
    height: 24px;
    border-radius: 6px;
    background: rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #94a3b8;
    flex-shrink: 0;
    transition: background 0.12s, color 0.12s;
}
.pl-sb-logo:hover .pl-sb-logo-icon {
    background: rgba(255,255,255,0.15);
    color: #f1f5f9;
}

.pl-sb-logo-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #e2e8f0;
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
    white-space: nowrap;
}
#pl-sidebar:hover .pl-sb-logo-label { opacity: 1; }

/* ── Nav items ── */
.pl-sb-item {
    display: flex;
    align-items: center;
    padding: 0 12px;
    height: 40px;
    color: #94a3b8 !important;
    text-decoration: none !important;
    white-space: nowrap;
    border-left: 2px solid transparent;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    gap: 12px;
    flex-shrink: 0;
    overflow: hidden;
    margin: 1px 0;
}

.pl-sb-item:hover {
    background: rgba(255,255,255,0.06) !important;
    color: #f1f5f9 !important;
    text-decoration: none !important;
    border-left-color: rgba(255,255,255,0.15);
}

.pl-sb-item.pl-sb-active {
    border-left-color: #3b82f6 !important;
    background: rgba(59,130,246,0.15) !important;
    color: #93c5fd !important;
}

/* ── Icon wrapper ── */
.pl-sb-icon {
    width: 24px;
    min-width: 24px;
    text-align: center;
    font-size: 14px;
    flex-shrink: 0;
    opacity: 0.8;
}
.pl-sb-item:hover .pl-sb-icon,
.pl-sb-item.pl-sb-active .pl-sb-icon { opacity: 1; }

/* Per-item accent colors (icon only) */
.pl-sb-item[data-key="board"]     .pl-sb-icon { color: #60a5fa; }
.pl-sb-item[data-key="planning"]  .pl-sb-icon { color: #34d399; }
.pl-sb-item[data-key="gantt"]     .pl-sb-icon { color: #a78bfa; }
.pl-sb-item[data-key="orderbook"] .pl-sb-icon { color: #fb923c; }
.pl-sb-item[data-key="infoboard"] .pl-sb-icon { color: #38bdf8; }
.pl-sb-item[data-key="opslog"]    .pl-sb-icon { color: #f472b6; }
.pl-sb-item[data-key="downtime"]  .pl-sb-icon { color: #facc15; }
.pl-sb-item[data-key="completed"] .pl-sb-icon { color: #4ade80; }

/* Active accent colors match the item's own color */
.pl-sb-item.pl-sb-active[data-key="board"]     { border-left-color: #60a5fa !important; background: rgba(96,165,250,0.12) !important; }
.pl-sb-item.pl-sb-active[data-key="planning"]  { border-left-color: #34d399 !important; background: rgba(52,211,153,0.12) !important; }
.pl-sb-item.pl-sb-active[data-key="gantt"]     { border-left-color: #a78bfa !important; background: rgba(167,139,250,0.12) !important; }
.pl-sb-item.pl-sb-active[data-key="orderbook"] { border-left-color: #fb923c !important; background: rgba(251,146,60,0.12) !important; }
.pl-sb-item.pl-sb-active[data-key="infoboard"] { border-left-color: #38bdf8 !important; background: rgba(56,189,248,0.12) !important; }
.pl-sb-item.pl-sb-active[data-key="opslog"]    { border-left-color: #f472b6 !important; background: rgba(244,114,182,0.12) !important; }
.pl-sb-item.pl-sb-active[data-key="downtime"]  { border-left-color: #facc15 !important; background: rgba(250,204,21,0.12) !important; }
.pl-sb-item.pl-sb-active[data-key="completed"] { border-left-color: #4ade80 !important; background: rgba(74,222,128,0.12) !important; }

/* ── Label ── */
.pl-sb-label {
    font-size: 13px;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
    white-space: nowrap;
}
#pl-sidebar:hover .pl-sb-label { opacity: 1; }

/* ── Divider ── */
.pl-sb-divider {
    height: 1px;
    background: rgba(255,255,255,0.07);
    margin: 4px 10px;
    flex-shrink: 0;
}

/* ── Sub-items (Downtime, Completed) ── */
.pl-sb-item.pl-sb-sub {
    height: 36px;
}
.pl-sb-item.pl-sb-sub .pl-sb-icon { font-size: 12px; }
.pl-sb-item.pl-sb-sub .pl-sb-label { font-size: 12px; }

/* ══════════════════════════════════════════════════════════════
   Content area shift
   ══════════════════════════════════════════════════════════════ */
#id-right {
    margin-left: 48px !important;
    transition: margin-left 0.2s ease;
}
body.pl-sb-expanded #id-right {
    margin-left: 200px !important;
}

/* ── Responsive: hide sidebar on small/medium screens, restore tab nav ── */
@media (max-width: 1024px) {
    #pl-sidebar { display: none !important; }
    #id-right   { margin-left: 0 !important; }
    body.pl-sb-expanded #id-right { margin-left: 0 !important; }

    /* Restore horizontal tab buttons hidden by sidebar CSS */
    .pl-tab-board,
    .pl-tab-planning,
    .pl-tab-gantt,
    .pl-tab-orderbook,
    .pl-tab-infoboard,
    .pl-tab-tracking,
    .pl-tab-completed,
    .pl-tab-downtime,
    .pl-tab-info { display: inline-block !important; }
}

/* ══════════════════════════════════════════════════════════════
   Page transition animations
   ══════════════════════════════════════════════════════════════ */

/* ── Keyframes — enter ── */
@keyframes pl-sidebar-in {
    0%   { transform: translateX(-100%); opacity: 0; box-shadow: none; }
    70%  { transform: translateX(4px);   opacity: 1; }
    100% { transform: translateX(0);     opacity: 1; }
}
@keyframes pl-content-in {
    0%   { transform: translateX(80px); opacity: 0; }
    100% { transform: translateX(0);    opacity: 1; }
}
@keyframes pl-item-in {
    0%   { transform: translateX(-28px); opacity: 0; }
    60%  { transform: translateX(4px);   opacity: 1; }
    100% { transform: translateX(0);     opacity: 1; }
}

/* ── Keyframes — exit ── */
@keyframes pl-sidebar-out {
    from { transform: translateX(0);     opacity: 1; }
    to   { transform: translateX(-110%); opacity: 0; }
}
@keyframes pl-content-out {
    from { transform: translateY(0)  scale(1);    opacity: 1; filter: blur(0px); }
    to   { transform: translateY(20px) scale(0.96); opacity: 0; filter: blur(3px); }
}

/* ── Enter: sidebar bounces in from left ── */
#pl-sidebar {
    animation: pl-sidebar-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── Enter: content slides in from right ── */
#id-right {
    animation: pl-content-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both;
}

/* ── Enter: sidebar items stagger in with overshoot ── */
#pl-sidebar .pl-sb-back                { animation: pl-item-in 0.45s cubic-bezier(0.22,1,0.36,1) 0.18s both; }
#pl-sidebar .pl-sb-item:nth-of-type(1) { animation: pl-item-in 0.45s cubic-bezier(0.22,1,0.36,1) 0.25s both; }
#pl-sidebar .pl-sb-item:nth-of-type(2) { animation: pl-item-in 0.45s cubic-bezier(0.22,1,0.36,1) 0.31s both; }
#pl-sidebar .pl-sb-item:nth-of-type(3) { animation: pl-item-in 0.45s cubic-bezier(0.22,1,0.36,1) 0.37s both; }
#pl-sidebar .pl-sb-item:nth-of-type(4) { animation: pl-item-in 0.45s cubic-bezier(0.22,1,0.36,1) 0.43s both; }
#pl-sidebar .pl-sb-item:nth-of-type(5) { animation: pl-item-in 0.45s cubic-bezier(0.22,1,0.36,1) 0.49s both; }
#pl-sidebar .pl-sb-item:nth-of-type(6) { animation: pl-item-in 0.45s cubic-bezier(0.22,1,0.36,1) 0.55s both; }
#pl-sidebar .pl-sb-item:nth-of-type(7)  { animation: pl-item-in 0.45s cubic-bezier(0.22,1,0.36,1) 0.61s both; }
#pl-sidebar .pl-sb-item:nth-of-type(8)  { animation: pl-item-in 0.45s cubic-bezier(0.22,1,0.36,1) 0.67s both; }
#pl-sidebar .pl-sb-item:nth-of-type(9)  { animation: pl-item-in 0.45s cubic-bezier(0.22,1,0.36,1) 0.73s both; }
#pl-sidebar .pl-sb-item:nth-of-type(10) { animation: pl-item-in 0.45s cubic-bezier(0.22,1,0.36,1) 0.79s both; }

/* ── Exit: triggered by body.pl-exit (JS adds on Back to System click) ── */
body.pl-exit #pl-sidebar {
    animation: pl-sidebar-out 0.32s cubic-bezier(0.55, 0, 1, 0.45) both !important;
}
body.pl-exit #id-right {
    animation: pl-content-out 0.32s cubic-bezier(0.55, 0, 1, 0.45) both !important;
}

/* ── Tab switch: body opacity fade on exit, pl-content-in slides new page from right ── */