
:root { --sidebar-width: 250px; --topbar-height: 56px; --left-panel-width: 280px; }
body { background-color: #f5f6fa; overflow: hidden; }
.navbar-top { height: var(--topbar-height); z-index: 1030; }

/* ── Project top-toolbar polish (the bar stays dark in every theme) ── */
#projectToolbarDesktop .btn { transition: background-color .15s, border-color .15s, box-shadow .15s; }
.pp-nav-group .btn { border-color: rgba(255, 255, 255, .22); }
.pp-nav-group .pp-page-btn { min-width: 112px; font-weight: 600; }
.pp-nav-group .pp-page-btn > span { display: inline-block; overflow: hidden; text-overflow: ellipsis; }
.pp-toolbar-sep { display: inline-block; width: 1px; height: 20px; flex: 0 0 auto;
    margin: 0 .6rem; background: rgba(255, 255, 255, .18); }
.pp-icon-btn { display: inline-flex; align-items: center; justify-content: center; }
/* Outline-light buttons hover to a subtle light overlay with white text so the
   label always stays readable on the dark bar (Bootstrap's default light fill
   made white-on-white text). Applies to the nav group, Version History & Close. */
#projectToolbarDesktop .btn-outline-light {
    --bs-btn-hover-bg: rgba(255, 255, 255, .14);
    --bs-btn-hover-border-color: rgba(255, 255, 255, .5);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: rgba(255, 255, 255, .22);
    --bs-btn-active-border-color: rgba(255, 255, 255, .55);
    --bs-btn-active-color: #fff;
}
#projectToolbarDesktop .btn-success:hover,
#projectToolbarDesktop .btn-primary:hover { box-shadow: 0 3px 10px rgba(0, 0, 0, .28); }
/* Animated icons on hover — each motion suits the button's job */
#projectToolbarDesktop .btn i { display: inline-block; transition: transform .25s ease; }
/* Close: the X spins & grows (sweeps through a + mid-turn) */
#btnCloseProject:hover i { transform: rotate(90deg) scale(1.18); }
/* Version History: the clock rewinds, counter-clockwise (going back in time) */
[data-vh-open]:hover i { animation: pp-ic-rewind .7s ease; }
@keyframes pp-ic-rewind { from { transform: rotate(0); } to { transform: rotate(-360deg); } }
/* Save: the disk dips down, like it's tucking your work away */
#btnSaveProject:hover i { animation: pp-ic-save .45s ease; }
@keyframes pp-ic-save { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(2px) scale(.9); } }
/* Build: the hammer taps, like it's assembling your app */
#btnBuildProject:hover i { animation: pp-ic-hammer .5s ease; transform-origin: 60% 65%; }
@keyframes pp-ic-hammer { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-24deg); } 58% { transform: rotate(9deg); } }

.main-area {
    /* The in-project SPA-page sidebar is retired — navigation lives in the
       top toolbar (page dropdown + prev/next). Content spans the full width. */
    margin-left: 0;
    margin-top: var(--topbar-height);
    height: calc(100vh - var(--topbar-height));
    display: flex;
    transition: margin-left 0.3s;
}
.main-area.expanded { margin-left: 0; }

/* Hide the module-list sidebar and its toggles on all in-project pages. */
#sidebarDesktop,
#sidebarToggle,
[data-bs-target="#sidebarOffcanvas"] { display: none !important; }

.sidebar {
    position: fixed; top: var(--topbar-height); left: 0; bottom: 0;
    width: var(--sidebar-width); background: #1e293b; color: #cbd5e1;
    transition: width 0.3s; overflow-x: hidden; z-index: 1020;
}
.sidebar.collapsed { width: 0; }
.sidebar .nav-link { color: #cbd5e1; padding: 0.6rem 1.5rem; white-space: nowrap; }
.sidebar .nav-link:hover, .sidebar .nav-link.active { background-color: rgba(255,255,255,0.08); color: #fff; }


.left-panel {
    width: var(--left-panel-width);
    background: #fff;
    border-right: 1px solid #dee2e6;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.left-panel .panel-header {
    padding: 0.4rem 0.5rem;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    font-weight: 600;
    font-size: 0.85rem;
}
.left-panel .table-list {
    flex: 1;
    overflow-y: auto;
    list-style: none;
    padding: 0;
    margin: 0;
}
.left-panel .table-list li {
    padding: 0.3rem 0.5rem;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.15s;
    font-size: 0.8rem;
}
.left-panel .table-list li:hover { background: #e9ecef; }
.left-panel .table-list li.active { background: #0d6efd; color: #fff; }

.right-workspace {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.toolbar {
    padding: 0.3rem 0.5rem;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}
.toolbar .btn-sm {
    font-size: 0.75rem;
    padding: 0.2rem 0.4rem;
}
.workspace-content {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}

@media (max-width: 991.98px) {
    .sidebar { display: none; }
    .main-area, .main-area.expanded { margin-left: 0; }
    .left-panel { width: 100%; }
}





/* ── SPA screen switcher — command-palette style dropdown ─────────────────── */
.pp-page-btn { display: inline-flex; align-items: center; gap: .4rem; }
.pp-page-btn-ico { font-size: .95em; opacity: .92; }

#spaPageMenu.pp-spa-menu {
    --pp-spa-surface: var(--pp-surface-raised, var(--pp-surface, #fff));
    min-width: 320px;
    max-width: 360px;
    padding: 0;
    border: 1px solid var(--pp-border, #e3e9f1);
    border-radius: 14px;
    background: var(--pp-spa-surface);
    box-shadow: 0 18px 44px var(--pp-shadow-color, rgba(15, 23, 42, .20)), 0 2px 6px rgba(15, 23, 42, .06);
    overflow: hidden;
}

#spaPageMenu .pp-spa-search {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .7rem;
    background: var(--pp-spa-surface);
    border-bottom: 1px solid var(--pp-border, #e3e9f1);
}
#spaPageMenu .pp-spa-search > .bi { color: var(--pp-text-muted, #94a3b8); font-size: .9rem; }
#spaPageMenu .pp-spa-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--pp-text, #172033);
    font-size: .84rem;
    font-weight: 500;
}
#spaPageMenu .pp-spa-input::placeholder { color: var(--pp-text-muted, #94a3b8); }
#spaPageMenu .pp-spa-kbd {
    flex: 0 0 auto;
    padding: .1rem .4rem;
    border: 1px solid var(--pp-border, #e3e9f1);
    border-radius: 6px;
    background: var(--pp-surface-muted, #f1f5f9);
    color: var(--pp-text-muted, #94a3b8);
    font-size: .6rem;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: .04em;
}

#spaPageMenu .pp-spa-list {
    max-height: min(64vh, 460px);
    overflow-y: auto;
    padding: .4rem;
    overscroll-behavior: contain;
}
#spaPageMenu .pp-spa-list::-webkit-scrollbar { width: 9px; }
#spaPageMenu .pp-spa-list::-webkit-scrollbar-thumb { background: var(--pp-border-strong, #cbd5e1); border-radius: 9px; border: 2px solid var(--pp-spa-surface); }

#spaPageMenu .pp-spa-group {
    padding: .55rem .55rem .25rem;
    color: var(--pp-text-muted, #94a3b8);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#spaPageMenu .pp-spa-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .55rem;
    border-radius: 10px;
    color: var(--pp-text, #172033);
    text-decoration: none;
    cursor: pointer;
    transition: background .13s ease, color .13s ease;
}
#spaPageMenu .pp-spa-ico {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--pp-surface-muted, #f1f5f9);
    color: var(--pp-text-muted, #64748b);
    font-size: .95rem;
    transition: background .13s ease, color .13s ease;
}
#spaPageMenu .pp-spa-lbl { flex: 1 1 auto; min-width: 0; font-size: .84rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#spaPageMenu .pp-spa-check { color: var(--pp-accent, #4f46e5); font-size: .95rem; opacity: 0; transition: opacity .13s ease; }
#spaPageMenu .pp-spa-lock { color: var(--pp-text-muted, #94a3b8); font-size: .78rem; }

#spaPageMenu .pp-spa-item:hover { background: var(--pp-surface-muted, #f1f5f9); }
#spaPageMenu .pp-spa-item:hover .pp-spa-ico { color: var(--pp-text, #334155); }
#spaPageMenu .pp-spa-item:focus-visible { outline: 2px solid var(--pp-accent, #4f46e5); outline-offset: 1px; }

#spaPageMenu .pp-spa-item.active {
    background: var(--pp-accent-soft, #eef2ff);
    color: var(--pp-accent, #4338ca);
}
#spaPageMenu .pp-spa-item.active::before {
    content: '';
    position: absolute;
    left: -.4rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    border-radius: 0 3px 3px 0;
    background: var(--pp-accent, #4f46e5);
}
#spaPageMenu .pp-spa-item.active .pp-spa-ico { background: var(--pp-accent, #4f46e5); color: var(--pp-accent-contrast, #fff); }
#spaPageMenu .pp-spa-item.active .pp-spa-lbl { font-weight: 800; }
#spaPageMenu .pp-spa-item.active .pp-spa-check { opacity: 1; }

#spaPageMenu .pp-spa-item.is-locked { opacity: .55; cursor: not-allowed; }
#spaPageMenu .pp-spa-item.is-locked:hover { background: transparent; }

#spaPageMenu .pp-spa-empty { padding: 1rem .6rem 1.1rem; text-align: center; color: var(--pp-text-muted, #94a3b8); font-size: .8rem; }

@media (prefers-reduced-motion: reduce) {
    #spaPageMenu .pp-spa-item, #spaPageMenu .pp-spa-ico, #spaPageMenu .pp-spa-check { transition: none; }
}

/* ── SPA switcher: keyboard-shortcut hints + footer + highlight ──────────── */
#spaPageMenu .pp-spa-kbd-combo { display: inline-flex; gap: 3px; margin-left: auto; }
#spaPageMenu .pp-spa-kbd-combo kbd,
#spaPageMenu .pp-spa-foot kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border: 1px solid var(--pp-border, #e3e9f1);
    border-bottom-width: 2px;
    border-radius: 5px;
    background: var(--pp-surface-muted, #f1f5f9);
    color: var(--pp-text-muted, #64748b);
    font-family: inherit;
    font-size: .62rem;
    font-weight: 700;
    line-height: 1;
}
/* the trailing area holds either the shortcut (default) or the check (active) */
#spaPageMenu .pp-spa-check { display: none; opacity: 1; margin-left: auto; }
#spaPageMenu .pp-spa-item.active .pp-spa-kbd-combo { display: none; }
#spaPageMenu .pp-spa-item.active .pp-spa-check { display: inline-block; }
#spaPageMenu .pp-spa-item:hover .pp-spa-kbd-combo kbd,
#spaPageMenu .pp-spa-item.is-hl .pp-spa-kbd-combo kbd {
    border-color: var(--pp-accent, #6366f1);
    color: var(--pp-accent, #4f46e5);
}

/* arrow-key highlight mirrors hover */
#spaPageMenu .pp-spa-item.is-hl { background: var(--pp-surface-muted, #f1f5f9); }
#spaPageMenu .pp-spa-item.is-hl .pp-spa-ico { color: var(--pp-text, #334155); }

#spaPageMenu .pp-spa-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .9rem;
    padding: .55rem .75rem;
    border-top: 1px solid var(--pp-border, #e3e9f1);
    background: var(--pp-surface-muted, #f8fafc);
    color: var(--pp-text-muted, #94a3b8);
    font-size: .64rem;
}
#spaPageMenu .pp-spa-foot span { display: inline-flex; align-items: center; gap: .3rem; }


/* ── SPA switcher: colorful, animated icons ─────────────────────────────── */
/* Each screen carries its own hue; the chip tints to it and the glyph wears it. */
.pp-spa-item[data-page="/workspace"], [data-nav="/workspace"] { --ico: #6366f1; }
.pp-spa-item[data-page="/tables"], [data-nav="/tables"] { --ico: #3b82f6; }
.pp-spa-item[data-page="/query"], [data-nav="/query"] { --ico: #06b6d4; }
.pp-spa-item[data-page="/pages"], [data-nav="/pages"] { --ico: #8b5cf6; }
.pp-spa-item[data-page="/fields"], [data-nav="/fields"] { --ico: #0ea5e9; }
.pp-spa-item[data-page="/designer"], [data-nav="/designer"] { --ico: #ec4899; }
.pp-spa-item[data-page="/style"], [data-nav="/style"] { --ico: #a855f7; }
.pp-spa-item[data-page="/events"], [data-nav="/events"] { --ico: #f59e0b; }
.pp-spa-item[data-page="/notifications"], [data-nav="/notifications"] { --ico: #f43f5e; }
.pp-spa-item[data-page="/security"], [data-nav="/security"] { --ico: #10b981; }
.pp-spa-item[data-page="/misc"], [data-nav="/misc"] { --ico: #7c8aa5; }
.pp-spa-item[data-page="/custom-files"], [data-nav="/custom-files"] { --ico: #f97316; }
.pp-spa-item[data-page="/output"], [data-nav="/output"] { --ico: #14b8a6; }
.pp-spa-item[data-page="/finished"], [data-nav="/finished"] { --ico: #22c55e; }
.pp-spa-item[data-page="/deploy"], [data-nav="/deploy"] { --ico: #0284c7; }

#spaPageMenu .pp-spa-ico {
    background: color-mix(in srgb, var(--ico, #6366f1) 16%, transparent);
    color: var(--ico, #6366f1);
    transition: transform .18s cubic-bezier(.22, 1, .36, 1), background .13s ease, color .13s ease;
}
#spaPageMenu .pp-spa-ico i { display: inline-block; transform-origin: center; }
/* keep the hue on hover / arrow-highlight (overrides the neutral hover rule above) */
#spaPageMenu .pp-spa-item:hover .pp-spa-ico,
#spaPageMenu .pp-spa-item.is-hl .pp-spa-ico { color: var(--ico, #6366f1); transform: scale(1.09); background: color-mix(in srgb, var(--ico, #6366f1) 24%, transparent); }

/* active screen: a filled chip in its own hue with a gentle breathing glow */
#spaPageMenu .pp-spa-item.active .pp-spa-ico {
    background: var(--ico, #6366f1);
    color: #fff;
    animation: spa-activeGlow 2.8s ease-in-out infinite;
}
#spaPageMenu .pp-spa-item.active::before { background: var(--ico, #4f46e5); }

@keyframes spa-activeGlow {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ico, #6366f1) 45%, transparent); }
    50%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--ico, #6366f1) 5%, transparent); }
}

/* Per-icon flourishes on hover — each animates the glyph in a way that fits it. */
@keyframes spa-swing  { 15% { transform: rotate(15deg); } 32% { transform: rotate(-12deg); } 50% { transform: rotate(8deg); } 68% { transform: rotate(-5deg); } 85% { transform: rotate(2deg); } 100% { transform: rotate(0); } }
@keyframes spa-flash  { 0%, 100% { opacity: 1; transform: scale(1); } 35% { opacity: .45; transform: scale(1.22); } 42% { opacity: 1; } }
@keyframes spa-spin   { to { transform: rotate(360deg); } }
@keyframes spa-wiggle { 25% { transform: rotate(-17deg); } 55% { transform: rotate(12deg); } 80% { transform: rotate(-5deg); } 100% { transform: rotate(0); } }
@keyframes spa-float  { 50% { transform: translateY(-3px); } }
@keyframes spa-slide  { 50% { transform: translateX(3px); } }
@keyframes spa-blink  { 0%, 100% { opacity: 1; } 45% { opacity: .3; } 55% { opacity: 1; } }
@keyframes spa-beat   { 25% { transform: scale(1.2); } 50% { transform: scale(.94); } 75% { transform: scale(1.12); } 100% { transform: scale(1); } }

#spaPageMenu .pp-spa-item[data-page="/notifications"] .pp-spa-ico i { transform-origin: 50% 15%; }
#spaPageMenu .pp-spa-item[data-page="/notifications"]:hover .pp-spa-ico i { animation: spa-swing .7s ease; }
#spaPageMenu .pp-spa-item[data-page="/events"]:hover .pp-spa-ico i       { animation: spa-flash .6s ease; }
#spaPageMenu .pp-spa-item[data-page="/designer"]:hover .pp-spa-ico i     { animation: spa-spin .7s ease; }
#spaPageMenu .pp-spa-item[data-page="/style"]:hover .pp-spa-ico i        { animation: spa-wiggle .6s ease; }
#spaPageMenu .pp-spa-item[data-page="/deploy"]:hover .pp-spa-ico i,
#spaPageMenu .pp-spa-item[data-page="/pages"]:hover .pp-spa-ico i        { animation: spa-float .6s ease; }
#spaPageMenu .pp-spa-item[data-page="/output"]:hover .pp-spa-ico i       { animation: spa-slide .5s ease; }
#spaPageMenu .pp-spa-item[data-page="/query"]:hover .pp-spa-ico i        { animation: spa-blink .7s ease; }
#spaPageMenu .pp-spa-item[data-page="/security"]:hover .pp-spa-ico i,
#spaPageMenu .pp-spa-item[data-page="/finished"]:hover .pp-spa-ico i     { animation: spa-beat .6s ease; }

@media (prefers-reduced-motion: reduce) {
    #spaPageMenu .pp-spa-item.active .pp-spa-ico { animation: none; }
    #spaPageMenu .pp-spa-item:hover .pp-spa-ico i,
    #spaPageMenu .pp-spa-item.is-hl .pp-spa-ico i { animation: none !important; }
    #spaPageMenu .pp-spa-ico, #spaPageMenu .pp-spa-item:hover .pp-spa-ico { transition: none; }
}

/* ── Colorful animated icons in the sidebar + mobile menus ───────────────── */
/* Leading nav icons wear their screen's hue (same --ico map as the switcher). */
.sidebar .nav-link .pp-nav-ico,
.offcanvas .nav-link .pp-nav-ico,
.dropdown-menu .dropdown-item .pp-nav-ico {
    color: var(--ico, currentColor);
    display: inline-block;
    transform-origin: center;
    transition: transform .18s cubic-bezier(.22, 1, .36, 1);
}
/* keep the hue on hover/active (the sidebar sets the link text white on hover) */
.sidebar .nav-link:hover .pp-nav-ico,
.sidebar .nav-link.active .pp-nav-ico,
.offcanvas .nav-link:hover .pp-nav-ico,
.dropdown-menu .dropdown-item:hover .pp-nav-ico { color: var(--ico, currentColor); transform: scale(1.16); }

/* the active sidebar item's icon gets the gentle breathing glow */
.sidebar .nav-link.active .pp-nav-ico { animation: spa-activeGlow 2.8s ease-in-out infinite; border-radius: 50%; }

/* per-icon hover flourishes (reuse the switcher keyframes), across all menus */
[data-nav="/notifications"] .pp-nav-ico { transform-origin: 50% 12%; }
[data-nav="/notifications"]:hover .pp-nav-ico { animation: spa-swing .7s ease; }
[data-nav="/events"]:hover .pp-nav-ico       { animation: spa-flash .6s ease; }
[data-nav="/designer"]:hover .pp-nav-ico     { animation: spa-spin .7s ease; }
[data-nav="/style"]:hover .pp-nav-ico        { animation: spa-wiggle .6s ease; }
[data-nav="/deploy"]:hover .pp-nav-ico,
[data-nav="/pages"]:hover .pp-nav-ico        { animation: spa-float .6s ease; }
[data-nav="/output"]:hover .pp-nav-ico       { animation: spa-slide .5s ease; }
[data-nav="/query"]:hover .pp-nav-ico        { animation: spa-blink .7s ease; }
[data-nav="/security"]:hover .pp-nav-ico,
[data-nav="/finished"]:hover .pp-nav-ico     { animation: spa-beat .6s ease; }

@media (prefers-reduced-motion: reduce) {
    .sidebar .nav-link.active .pp-nav-ico { animation: none; }
    .sidebar .nav-link .pp-nav-ico, .offcanvas .nav-link .pp-nav-ico,
    .dropdown-menu .dropdown-item .pp-nav-ico { transition: none; }
    [data-nav]:hover .pp-nav-ico { animation: none !important; }
}

/* The dropdown theme-bridge colors .dropdown-item glyphs; keep our per-screen hue. */
.dropdown-menu .dropdown-item .pp-nav-ico { color: var(--ico, currentColor) !important; }
.dropdown-menu .dropdown-item:hover .pp-nav-ico { color: var(--ico, currentColor) !important; }
