/* Projects module colour-mode bridge.
 * Loaded after every Projects stylesheet so theme corrections remain isolated
 * from other modules and do not alter any modal or JavaScript contracts. */
body {
    --projects-theme-bg: var(--pp-app-bg, #f5f6fa);
    --projects-theme-surface: var(--pp-surface, #ffffff);
    --projects-theme-surface-raised: var(--pp-surface-raised, #ffffff);
    --projects-theme-soft: var(--pp-surface-soft, #f8fafc);
    --projects-theme-muted-surface: var(--pp-surface-muted, #f1f5f9);
    --projects-theme-border: var(--pp-border, #dfe6ef);
    --projects-theme-border-strong: var(--pp-border-strong, #cbd5e1);
    --projects-theme-text: var(--pp-text, #172033);
    --projects-theme-muted: var(--pp-text-muted, #64748b);
    --projects-theme-subtle: color-mix(in srgb, var(--pp-text-muted, #64748b) 72%, transparent);
    --projects-theme-input: var(--pp-input-bg, #ffffff);
    --projects-theme-hover: var(--pp-surface-muted, #f1f5f9);
    --projects-theme-primary: var(--pp-accent, #2563eb);
    --projects-theme-primary-soft: var(--pp-accent-soft, #eef2ff);
    --projects-theme-primary-text: var(--pp-accent, #4338ca);
    --projects-theme-tooltip-bg: var(--pp-surface-raised, #ffffff);
    --projects-theme-tooltip-text: var(--pp-text, #172033);
    --projects-theme-tooltip-border: var(--pp-border, #dbe3ee);
    --projects-theme-shadow: var(--pp-shadow-color, rgba(15, 23, 42, .14));
}

html[data-pp-theme="dark"] body {
    --projects-theme-bg: var(--pp-app-bg);
    --projects-theme-surface: var(--pp-surface);
    --projects-theme-surface-raised: var(--pp-surface-raised);
    --projects-theme-soft: var(--pp-surface-soft);
    --projects-theme-muted-surface: var(--pp-surface-muted);
    --projects-theme-border: var(--pp-border);
    --projects-theme-border-strong: var(--pp-border-strong);
    --projects-theme-text: var(--pp-text);
    --projects-theme-muted: var(--pp-text-muted);
    --projects-theme-input: var(--pp-input-bg);
    --projects-theme-hover: var(--pp-surface-muted);
    --projects-theme-primary: var(--pp-accent);
    --projects-theme-primary-soft: var(--pp-accent-soft);
    --projects-theme-primary-text: var(--pp-accent);
    --projects-theme-tooltip-bg: var(--pp-surface-raised);
    --projects-theme-tooltip-text: var(--pp-text);
    --projects-theme-tooltip-border: var(--pp-border);
    --projects-theme-shadow: var(--pp-shadow-color);
}

body { background: var(--projects-theme-bg) !important; }

/* Pre-project navigation. This stylesheet only loads on the Projects hub, so
 * these rules cannot alter the separate builder sidebar used inside a project. */
#sidebarDesktop.sidebar,
#sidebarOffcanvas {
    border-right: 1px solid var(--projects-theme-border);
    background:
        linear-gradient(180deg, var(--projects-theme-surface-raised), color-mix(in srgb, var(--projects-theme-soft) 86%, var(--projects-theme-surface))) !important;
    color: var(--projects-theme-text) !important;
    box-shadow: 8px 0 26px color-mix(in srgb, var(--projects-theme-shadow) 34%, transparent);
}
#sidebarDesktop .nav-link,
#sidebarOffcanvas .nav-link {
    position: relative;
    margin: .12rem .45rem;
    padding: .62rem .9rem;
    border: 1px solid transparent;
    border-radius: .62rem;
    color: var(--projects-theme-muted) !important;
    transition: color .16s ease, background-color .16s ease, border-color .16s ease, transform .16s ease;
}
#sidebarDesktop .nav-link i,
#sidebarOffcanvas .nav-link i { color: color-mix(in srgb, var(--projects-theme-primary) 66%, var(--projects-theme-muted)); }
#sidebarDesktop .nav-link:hover,
#sidebarOffcanvas .nav-link:hover {
    border-color: var(--projects-theme-border);
    background: var(--projects-theme-hover) !important;
    color: var(--projects-theme-text) !important;
    transform: translateX(2px);
}
#sidebarDesktop .nav-link.active,
#sidebarOffcanvas .nav-link.active {
    border-color: color-mix(in srgb, var(--projects-theme-primary) 34%, var(--projects-theme-border));
    background: var(--projects-theme-primary-soft) !important;
    color: var(--projects-theme-primary) !important;
    box-shadow: inset 3px 0 0 var(--projects-theme-primary);
}
#sidebarDesktop .nav-link.active i,
#sidebarOffcanvas .nav-link.active i { color: var(--projects-theme-primary); }
#sidebarDesktop > .mt-auto { color: var(--projects-theme-muted); }
#sidebarDesktop > .mt-auto .text-muted { color: var(--projects-theme-muted) !important; }
#sidebarOffcanvas .offcanvas-header {
    border-bottom: 1px solid var(--projects-theme-border);
    color: var(--projects-theme-text);
}
#sidebarOffcanvas .offcanvas-title { color: var(--projects-theme-text) !important; }
#sidebarOffcanvas .btn-close { filter: none; opacity: .72; }
html[data-pp-theme="dark"] #sidebarOffcanvas .btn-close { filter: invert(1) grayscale(100%) brightness(180%); }

@media (prefers-reduced-motion: reduce) {
    #sidebarDesktop .nav-link,
    #sidebarOffcanvas .nav-link { transition: none; }
}

/* Portfolio command surface and actions inherit the selected application
 * palette instead of retaining the original fixed Midnight treatment. */
.projects-command {
    border: 1px solid color-mix(in srgb, var(--projects-theme-primary) 34%, var(--projects-theme-border));
    background:
        radial-gradient(circle at 82% -25%, color-mix(in srgb, var(--projects-theme-primary) 28%, transparent), transparent 40%),
        linear-gradient(128deg, var(--projects-theme-surface-raised), color-mix(in srgb, var(--projects-theme-primary) 18%, var(--projects-theme-surface)) 72%, var(--projects-theme-primary-soft)) !important;
    color: var(--projects-theme-text) !important;
    box-shadow: 0 18px 40px var(--projects-theme-shadow);
}
.projects-command::before { background: color-mix(in srgb, var(--projects-theme-primary) 18%, transparent) !important; }
.projects-command::after { background: color-mix(in srgb, var(--projects-theme-primary) 12%, transparent) !important; }
.projects-command-kicker { color: var(--projects-theme-primary) !important; }
.projects-command h1 { color: var(--projects-theme-text) !important; }
.projects-command p { color: var(--projects-theme-muted) !important; }
.projects-command-actions .btn {
    border-color: color-mix(in srgb, var(--projects-theme-primary) 46%, var(--projects-theme-border)) !important;
    background: color-mix(in srgb, var(--projects-theme-surface-raised) 88%, transparent) !important;
    color: var(--projects-theme-text) !important;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--projects-theme-shadow) 75%, transparent);
}
.projects-command-actions .btn:hover,
.projects-command-actions .btn:focus-visible {
    border-color: var(--projects-theme-primary) !important;
    background: var(--projects-theme-primary-soft) !important;
    color: var(--projects-theme-primary) !important;
    transform: translateY(-1px);
}
.projects-command-actions [data-bs-target="#newProjectModal"] {
    border-color: var(--projects-theme-primary) !important;
    background: var(--projects-theme-primary) !important;
    color: var(--projects-theme-surface) !important;
}
.projects-command-actions [data-bs-target="#newProjectModal"]:hover,
.projects-command-actions [data-bs-target="#newProjectModal"]:focus-visible {
    /* Re-assert the solid primary fill: the generic `.btn:hover` rule sets a
       pale `primary-soft` background, and this button only overrode `color`
       (surface/white) — leaving white text on a pale tint = invisible.
       Keep it a solid primary button on hover so the label stays readable
       in every theme. */
    background: var(--projects-theme-primary) !important;
    border-color: var(--projects-theme-primary) !important;
    color: var(--projects-theme-surface) !important;
    filter: brightness(1.08);
}

/* Project collection: shared surfaces, stronger hierarchy and a distinctive
 * settings affordance in both grid and list layouts. */
.project-metric,
.projects-toolbar,
.projects-empty,
.project-hub-card {
    border-color: var(--projects-theme-border) !important;
    background: var(--projects-theme-surface-raised) !important;
    color: var(--projects-theme-text) !important;
}
.projects-toolbar :where(.form-control, .form-select),
.projects-view-switch {
    border-color: var(--projects-theme-border) !important;
    background-color: var(--projects-theme-soft) !important;
    color: var(--projects-theme-text) !important;
}
.projects-view-switch button { color: var(--projects-theme-muted) !important; }
.projects-view-switch button.active { background: var(--projects-theme-primary-soft) !important; color: var(--projects-theme-primary) !important; }
.projects-tabs { border-color: var(--projects-theme-border) !important; }
.projects-tabs button { color: var(--projects-theme-muted) !important; }
.projects-tabs button span { background: var(--projects-theme-muted-surface) !important; color: var(--projects-theme-muted) !important; }
.projects-tabs button.active { border-bottom-color: var(--projects-theme-primary) !important; color: var(--projects-theme-primary) !important; }
.projects-tabs button.active span { background: var(--projects-theme-primary-soft) !important; color: var(--projects-theme-primary) !important; }
.project-hub-card {
    overflow: visible;
    box-shadow: 0 7px 22px color-mix(in srgb, var(--projects-theme-shadow) 68%, transparent) !important;
}
.project-hub-card:has(.dropdown-menu.show) { z-index: 30; }
.project-card-menu,
.project-card-menu .dropdown { position: relative; z-index: 31; }
.project-card-menu .dropdown-menu.show { z-index: 1090; }
.project-hub-card::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, var(--project-accent), transparent 72%);
    opacity: .7;
}
.project-hub-card:hover,
.project-hub-card:focus-within {
    border-color: color-mix(in srgb, var(--project-accent) 48%, var(--projects-theme-border)) !important;
    box-shadow: 0 16px 34px color-mix(in srgb, var(--projects-theme-shadow) 82%, transparent) !important;
}
.project-hub-card.is-archived { background: var(--projects-theme-soft) !important; }
.project-card-heading h2,
.project-readiness-copy strong { color: var(--projects-theme-text) !important; }
:where(.project-card-slug, .project-card-description, .project-readiness-copy, .project-activity, .projects-result-count) { color: var(--projects-theme-muted) !important; }
.project-chip { background: var(--projects-theme-muted-surface) !important; color: var(--projects-theme-muted) !important; }
.project-chip.database { background: var(--projects-theme-primary-soft) !important; color: var(--projects-theme-primary) !important; }
.project-chip.health-ready { background: color-mix(in srgb, #10b981 16%, var(--projects-theme-surface)) !important; color: color-mix(in srgb, #10b981 78%, var(--projects-theme-text)) !important; }
.project-chip.health-setup { background: color-mix(in srgb, #f59e0b 16%, var(--projects-theme-surface)) !important; color: color-mix(in srgb, #f59e0b 78%, var(--projects-theme-text)) !important; }
.project-chip.health-attention { background: color-mix(in srgb, #ef4444 15%, var(--projects-theme-surface)) !important; color: color-mix(in srgb, #ef4444 78%, var(--projects-theme-text)) !important; }
.project-chip.owner { background: color-mix(in srgb, #8b5cf6 16%, var(--projects-theme-surface)) !important; color: color-mix(in srgb, #8b5cf6 82%, var(--projects-theme-text)) !important; }
.project-progress { background: var(--projects-theme-muted-surface) !important; }
.project-progress span { background: linear-gradient(90deg, var(--project-accent), var(--projects-theme-primary)) !important; }
.project-card-footer {
    border-color: var(--projects-theme-border) !important;
    background: color-mix(in srgb, var(--projects-theme-soft) 86%, var(--projects-theme-surface-raised)) !important;
}
.project-pin,
.project-menu-toggle { color: var(--projects-theme-muted) !important; }
.project-menu-toggle {
    width: 2.35rem;
    height: 2.25rem;
    min-width: 2.35rem;
    min-height: 2.25rem;
    border: 1px solid color-mix(in srgb, var(--projects-theme-primary) 30%, var(--projects-theme-border)) !important;
    background: color-mix(in srgb, var(--projects-theme-primary) 8%, var(--projects-theme-surface-raised)) !important;
    color: var(--projects-theme-primary) !important;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--projects-theme-shadow) 60%, transparent);
}
.project-menu-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    width: 1.3rem;
    height: .8rem;
}
.project-menu-glyph > span {
    width: .27rem;
    height: .27rem;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 color-mix(in srgb, currentColor 0%, transparent);
    animation: project-menu-wave 1.65s ease-in-out infinite;
}
.project-menu-glyph > span:nth-child(2) { animation-delay: .14s; }
.project-menu-glyph > span:nth-child(3) { animation-delay: .28s; }
.project-menu-toggle:hover .project-menu-glyph > span { animation-duration: .9s; }
.project-menu-toggle[aria-expanded="true"] .project-menu-glyph > span {
    animation-play-state: paused;
    transform: translateY(0) scale(1);
    opacity: 1;
}
@keyframes project-menu-wave {
    0%, 55%, 100% { transform: translateY(0) scale(.9); opacity: .58; box-shadow: 0 0 0 0 transparent; }
    24% { transform: translateY(-.14rem) scale(1.2); opacity: 1; box-shadow: 0 .18rem .48rem color-mix(in srgb, currentColor 38%, transparent); }
}
.project-pin:hover,
.project-menu-toggle:hover { background: var(--projects-theme-hover) !important; color: var(--projects-theme-text) !important; }
.project-menu-toggle:hover,
.project-menu-toggle[aria-expanded="true"] {
    border-color: var(--projects-theme-primary) !important;
    background: var(--projects-theme-primary-soft) !important;
    color: var(--projects-theme-primary) !important;
}
.project-card-actions [data-project-action="settings"] {
    min-width: 2.25rem;
    min-height: 2.25rem;
    border-color: color-mix(in srgb, var(--projects-theme-primary) 38%, var(--projects-theme-border)) !important;
    background: var(--projects-theme-primary-soft) !important;
    color: var(--projects-theme-primary) !important;
    box-shadow: 0 5px 14px color-mix(in srgb, var(--projects-theme-primary) 15%, transparent);
}
.project-card-actions [data-project-action="settings"]:hover,
.project-card-actions [data-project-action="settings"]:focus-visible {
    border-color: var(--projects-theme-primary) !important;
    background: var(--projects-theme-primary) !important;
    color: var(--projects-theme-surface) !important;
    transform: translateY(-1px);
}
.project-card-menu .dropdown-menu {
    border-color: var(--projects-theme-border) !important;
    background: var(--projects-theme-surface-raised) !important;
    color: var(--projects-theme-text) !important;
    box-shadow: 0 14px 34px var(--projects-theme-shadow) !important;
}
.project-card-menu .dropdown-item { color: var(--projects-theme-text) !important; }
.project-card-menu .dropdown-item { gap: .55rem; }
.project-card-menu .dropdown-item > i { width: 1rem; margin-right: 0 !important; flex: 0 0 1rem; text-align: center; }
.project-card-menu .dropdown-item:hover { background: var(--projects-theme-hover) !important; }

/* Keep the result count comfortably inside the tab rail at every viewport. */
.projects-tabs { padding-right: 10px; }

/* Bootstrap and custom controller tooltips share one adaptive treatment. */
.tooltip.projects-tooltip .tooltip-inner,
.project-controller-tooltip .tooltip-inner {
    max-width: 260px;
    padding: .48rem .65rem;
    border: 1px solid var(--projects-theme-tooltip-border);
    border-radius: .55rem;
    background: var(--projects-theme-tooltip-bg) !important;
    color: var(--projects-theme-tooltip-text) !important;
    box-shadow: 0 10px 28px var(--projects-theme-shadow);
    font-size: .68rem;
    line-height: 1.42;
    text-align: left;
}
.bs-tooltip-top.projects-tooltip .tooltip-arrow::before { border-top-color: var(--projects-theme-tooltip-bg) !important; }
.bs-tooltip-bottom.projects-tooltip .tooltip-arrow::before { border-bottom-color: var(--projects-theme-tooltip-bg) !important; }
.bs-tooltip-start.projects-tooltip .tooltip-arrow::before { border-left-color: var(--projects-theme-tooltip-bg) !important; }
.bs-tooltip-end.projects-tooltip .tooltip-arrow::before { border-right-color: var(--projects-theme-tooltip-bg) !important; }

/* Unified modal frame: all Projects dialogs use the same surface hierarchy. */
:is(.project-modal, .project-settings-modal, .database-settings-modal) .modal-content {
    background: var(--projects-theme-surface-raised) !important;
    color: var(--projects-theme-text) !important;
    border: 1px solid var(--projects-theme-border) !important;
    box-shadow: 0 24px 70px var(--projects-theme-shadow) !important;
}
:is(.project-modal, .project-settings-modal, .database-settings-modal) .modal-header {
    min-height: 64px;
    align-items: center;
    gap: 1rem;
    border: 0 !important;
    background:
        radial-gradient(circle at 82% -80%, color-mix(in srgb, var(--projects-theme-primary) 55%, transparent), transparent 46%),
        linear-gradient(125deg, var(--pp-navbar-bg, #0f172a), color-mix(in srgb, var(--projects-theme-primary) 42%, var(--pp-navbar-bg, #0f172a))) !important;
    color: #fff !important;
}
:is(.project-modal, .project-settings-modal, .database-settings-modal) .modal-header .modal-title {
    color: #fff !important;
}
:is(.project-modal, .project-settings-modal, .database-settings-modal) :where(.transfer-kicker, .template-kicker, .history-kicker, .schema-kicker, .guide-kicker, .project-settings-kicker) {
    color: color-mix(in srgb, var(--projects-theme-primary) 48%, #fff) !important;
}
:is(.project-modal, .project-settings-modal, .database-settings-modal) .modal-body {
    background: var(--projects-theme-surface) !important;
    color: var(--projects-theme-text) !important;
}
:is(.project-modal, .project-settings-modal, .database-settings-modal) .modal-footer {
    border-color: var(--projects-theme-border) !important;
    background: var(--projects-theme-soft) !important;
    color: var(--projects-theme-text) !important;
}
:is(.project-modal, .project-settings-modal, .database-settings-modal) .modal-header .btn-close {
    box-sizing: border-box;
    display: grid;
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    flex: 0 0 2rem;
    align-self: center;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: .6rem;
    background-color: rgba(255, 255, 255, .1) !important;
    background-position: center !important;
    background-size: .78rem !important;
    opacity: .82;
    transition: opacity .15s, background-color .15s, transform .15s;
}
:is(.project-modal, .project-settings-modal, .database-settings-modal) .modal-header .btn-close:hover {
    background-color: rgba(255, 255, 255, .2) !important;
    opacity: 1;
    transform: scale(1.04);
}
:is(.project-modal, .project-settings-modal, .database-settings-modal) .modal-header .btn-close:focus-visible {
    outline: 3px solid rgba(191, 219, 254, .55);
    outline-offset: 2px;
    box-shadow: none;
}

html[data-pp-theme="dark"] :is(.project-modal, .project-settings-modal, .database-settings-modal) :where(.btn-light, .text-bg-light) {
    border-color: var(--projects-theme-border-strong) !important;
    background: var(--projects-theme-muted-surface) !important;
    color: var(--projects-theme-text) !important;
}
html[data-pp-theme="dark"] :is(.project-modal, .project-settings-modal, .database-settings-modal) :where(.form-control, .form-select, .input-group-text) {
    border-color: var(--projects-theme-border-strong) !important;
    background-color: var(--projects-theme-input) !important;
    color: var(--projects-theme-text) !important;
}
html[data-pp-theme="dark"] :is(.project-modal, .project-settings-modal, .database-settings-modal) :where(.form-control, textarea)::placeholder {
    color: var(--projects-theme-subtle) !important;
}
html[data-pp-theme="dark"] :is(.project-modal, .project-settings-modal, .database-settings-modal) :where(.form-label, legend) {
    color: var(--projects-theme-text) !important;
}
html[data-pp-theme="dark"] :is(.project-modal, .project-settings-modal, .database-settings-modal) :where(.form-text, .text-muted) {
    color: var(--projects-theme-muted) !important;
}
:is(.project-modal, .project-settings-modal, .database-settings-modal) .btn-primary {
    border-color: var(--projects-theme-primary) !important;
    background: var(--projects-theme-primary) !important;
    color: var(--projects-theme-surface) !important;
}
:is(.project-modal, .project-settings-modal, .database-settings-modal) .btn-primary:hover { filter: brightness(1.08); }

/* New project wizard. */
html[data-pp-theme="dark"] #newProjectModal :where(.form-section, .connection-panel) {
    border-color: var(--projects-theme-border) !important;
    background: var(--projects-theme-surface-raised) !important;
    color: var(--projects-theme-text) !important;
}
html[data-pp-theme="dark"] #newProjectModal :where(.database-option, .connection-string-panel) {
    border-color: var(--projects-theme-border) !important;
    background: var(--projects-theme-soft) !important;
    color: var(--projects-theme-text) !important;
}
html[data-pp-theme="dark"] #newProjectModal .database-option:hover:not(.is-disabled) {
    background: var(--projects-theme-hover) !important;
}
html[data-pp-theme="dark"] #newProjectModal .database-option.active {
    border-color: var(--db-color) !important;
    background: color-mix(in srgb, var(--db-color) 13%, var(--projects-theme-surface-raised)) !important;
}

/* Database connection editor. */
.database-settings-modal .modal-body { background: var(--projects-theme-surface) !important; }
.database-settings-loading { background: color-mix(in srgb, var(--projects-theme-surface) 94%, transparent); color: var(--projects-theme-text); }
.database-engine-panel {
    border-color: var(--projects-theme-border) !important;
    background: linear-gradient(180deg, var(--projects-theme-surface-raised), var(--projects-theme-soft)) !important;
}
.database-engine-choice {
    border-color: var(--projects-theme-border) !important;
    background: var(--projects-theme-surface-raised) !important;
    color: var(--projects-theme-text) !important;
}
.database-engine-choice:hover:not(:disabled),
.database-engine-choice.active {
    border-color: var(--db-color) !important;
    background: color-mix(in srgb, var(--db-color) 12%, var(--projects-theme-surface-raised)) !important;
}
.database-engine-choice-copy small,
.database-connection-heading p,
.database-unsaved-indicator { color: var(--projects-theme-muted) !important; }
.database-engine-note,
.database-advanced-body {
    border-color: var(--projects-theme-border) !important;
    background: var(--projects-theme-soft) !important;
    color: var(--projects-theme-muted) !important;
}
.database-saved-summary {
    border-color: color-mix(in srgb, var(--projects-theme-primary) 45%, var(--projects-theme-border)) !important;
    background: color-mix(in srgb, var(--projects-theme-primary) 12%, var(--projects-theme-surface)) !important;
}
.database-saved-summary span { color: var(--projects-theme-muted) !important; }
html[data-pp-theme="dark"] .database-saved-summary strong { color: var(--projects-theme-primary) !important; }
.database-fields-card,
.database-advanced {
    border-color: var(--projects-theme-border) !important;
    background: var(--projects-theme-surface-raised) !important;
    color: var(--projects-theme-text) !important;
}
.database-advanced summary { color: var(--projects-theme-text) !important; }
.database-advanced[open] summary { border-color: var(--projects-theme-border) !important; }
.database-settings-footer { border-color: var(--projects-theme-border) !important; background: var(--projects-theme-soft) !important; }
.database-test-result:not(.is-success):not(.is-error):not(.is-pending) {
    border-color: color-mix(in srgb, var(--projects-theme-primary) 38%, var(--projects-theme-border)) !important;
    background: color-mix(in srgb, var(--projects-theme-primary) 10%, var(--projects-theme-surface)) !important;
    color: var(--projects-theme-muted) !important;
}

/* Project settings. */
.project-settings-layout,
.project-settings-panels { background: var(--projects-theme-surface) !important; color: var(--projects-theme-text) !important; }
.project-settings-nav {
    border-color: var(--projects-theme-border) !important;
    background: var(--projects-theme-soft) !important;
}
.project-settings-nav button { color: var(--projects-theme-muted) !important; }
.project-settings-nav button:hover { background: var(--projects-theme-hover) !important; color: var(--projects-theme-text) !important; }
.project-settings-nav button.active { background: var(--projects-theme-primary-soft) !important; color: var(--projects-theme-primary-text) !important; }
.settings-divider { background: var(--projects-theme-border) !important; }
.project-icon-picker button,
.settings-feature-card {
    border-color: var(--projects-theme-border) !important;
    background: var(--projects-theme-surface-raised) !important;
    color: var(--projects-theme-text) !important;
}
.project-icon-picker button.active { background: var(--projects-theme-primary-soft) !important; color: var(--projects-theme-primary-text) !important; }
.settings-callout {
    border-color: color-mix(in srgb, var(--projects-theme-primary) 42%, var(--projects-theme-border)) !important;
    background: color-mix(in srgb, var(--projects-theme-primary) 11%, var(--projects-theme-surface)) !important;
    color: var(--projects-theme-primary) !important;
}
.settings-danger-zone { background: color-mix(in srgb, #ef4444 7%, var(--projects-theme-surface-raised)) !important; }
.settings-feature-card p,
.settings-danger-zone p,
.settings-save-status { color: var(--projects-theme-muted) !important; }
.project-settings-footer { border-color: var(--projects-theme-border) !important; background: var(--projects-theme-soft) !important; }

/* Import, export, duplicate and package review. */
html[data-pp-theme="dark"] :where(.transfer-choice, .transfer-check, .transfer-includes > div, .package-preview, .package-preview .preview-chips span) {
    border-color: var(--projects-theme-border) !important;
    background: var(--projects-theme-soft) !important;
    color: var(--projects-theme-text) !important;
}
html[data-pp-theme="dark"] .transfer-choice:hover { background: var(--projects-theme-hover) !important; }
html[data-pp-theme="dark"] .transfer-choice:has(input:checked) { box-shadow: 0 0 0 2px color-mix(in srgb, var(--projects-theme-primary) 28%, transparent); }
html[data-pp-theme="dark"] :where(.transfer-note, .package-identity) {
    border-color: color-mix(in srgb, var(--projects-theme-primary) 40%, var(--projects-theme-border)) !important;
    background: linear-gradient(120deg, var(--projects-theme-primary-soft), color-mix(in srgb, var(--projects-theme-primary) 15%, var(--projects-theme-surface))) !important;
    color: var(--projects-theme-text) !important;
}
html[data-pp-theme="dark"] .package-logo { background: var(--projects-theme-muted-surface) !important; color: var(--projects-theme-primary) !important; }
html[data-pp-theme="dark"] .transfer-alert,
html[data-pp-theme="dark"] .transfer-steps {
    border-color: var(--projects-theme-border) !important;
    background: var(--projects-theme-soft) !important;
    color: var(--projects-theme-muted) !important;
}
html[data-pp-theme="dark"] .package-drop {
    border-color: color-mix(in srgb, var(--projects-theme-primary) 48%, var(--projects-theme-border)) !important;
    background: linear-gradient(145deg, var(--projects-theme-soft), color-mix(in srgb, var(--projects-theme-primary) 10%, var(--projects-theme-surface))) !important;
    color: var(--projects-theme-text) !important;
}

/* Template library and template workflows. */
html[data-pp-theme="dark"] .template-library-toolbar {
    border-color: var(--projects-theme-border) !important;
    background: var(--projects-theme-soft) !important;
}
html[data-pp-theme="dark"] .template-card {
    border-color: var(--projects-theme-border) !important;
    background: var(--projects-theme-surface-raised) !important;
    color: var(--projects-theme-text) !important;
    box-shadow: 0 4px 14px var(--projects-theme-shadow) !important;
}
html[data-pp-theme="dark"] :where(.template-category-badge, .template-tags span) { background: var(--projects-theme-muted-surface) !important; color: var(--projects-theme-muted) !important; }
html[data-pp-theme="dark"] .template-card footer { border-color: var(--projects-theme-border) !important; }
html[data-pp-theme="dark"] .template-menu { color: var(--projects-theme-muted) !important; }

/* History, checkpoints and source control. */
html[data-pp-theme="dark"] :where(.history-tabs, .checkpoint-create, .comparison-panel) {
    border-color: var(--projects-theme-border) !important;
    background: var(--projects-theme-soft) !important;
}
html[data-pp-theme="dark"] .history-tabs button { color: var(--projects-theme-muted) !important; }
html[data-pp-theme="dark"] .history-tabs button.active { color: var(--projects-theme-primary) !important; }
html[data-pp-theme="dark"] :where(.checkpoint-item, .comparison-files > div, .git-settings) {
    border-color: var(--projects-theme-border) !important;
    background: var(--projects-theme-surface-raised) !important;
    color: var(--projects-theme-text) !important;
}
html[data-pp-theme="dark"] :where(.checkpoint-kind, .git-last, .git-changes) { background: var(--projects-theme-soft) !important; color: var(--projects-theme-muted) !important; }
html[data-pp-theme="dark"] .git-status-card { border-color: var(--projects-theme-border) !important; background: var(--projects-theme-soft) !important; }
html[data-pp-theme="dark"] .git-branch { background: var(--projects-theme-muted-surface) !important; color: var(--projects-theme-primary) !important; }

/* Schema and structure comparison. */
html[data-pp-theme="dark"] .schema-summary {
    border-color: var(--projects-theme-border) !important;
    background: var(--projects-theme-soft) !important;
}
html[data-pp-theme="dark"] :where(.schema-summary > div, .schema-column, .schema-object) {
    border-color: var(--projects-theme-border) !important;
    background: var(--projects-theme-surface-raised) !important;
    color: var(--projects-theme-text) !important;
}
html[data-pp-theme="dark"] .schema-conflict { border-color: #845b2c !important; background: rgba(146, 64, 14, .12) !important; }
html[data-pp-theme="dark"] .schema-conflict-summary span { background: var(--projects-theme-soft) !important; color: var(--projects-theme-muted) !important; }

/* Projects guide. */
html[data-pp-theme="dark"] :where(.guide-searchbar, .guide-nav) {
    border-color: var(--projects-theme-border) !important;
    background: var(--projects-theme-soft) !important;
}
html[data-pp-theme="dark"] :where(.guide-content, .guide-panel, .guide-steps article, .guide-card-grid article, .guide-table > div) {
    border-color: var(--projects-theme-border) !important;
    background: var(--projects-theme-surface) !important;
    color: var(--projects-theme-text) !important;
}
html[data-pp-theme="dark"] .guide-nav button { color: var(--projects-theme-muted) !important; }
html[data-pp-theme="dark"] .guide-nav button.active { background: var(--projects-theme-primary-soft) !important; color: var(--projects-theme-primary-text) !important; }
html[data-pp-theme="dark"] .guide-hero {
    border-color: color-mix(in srgb, var(--projects-theme-primary) 40%, var(--projects-theme-border)) !important;
    background: linear-gradient(135deg, var(--projects-theme-primary-soft), color-mix(in srgb, var(--projects-theme-primary) 14%, var(--projects-theme-surface))) !important;
}
html[data-pp-theme="dark"] :where(.guide-panel > p, .guide-hero p, .guide-steps span, .guide-card-grid span, .guide-table span, .guide-list, .guide-small, .guide-footer) { color: var(--projects-theme-muted) !important; }

@media (max-width: 767.98px) {
    :is(.project-modal, .project-settings-modal, .database-settings-modal) .modal-header {
        min-height: 58px;
        padding: .75rem 1rem !important;
    }
    :is(.project-modal, .project-settings-modal, .database-settings-modal) .modal-header .btn-close {
        width: 1.9rem;
        height: 1.9rem;
        min-width: 1.9rem;
        flex-basis: 1.9rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(.project-modal, .project-settings-modal, .database-settings-modal) .modal-header .btn-close { transition: none; }
    .project-menu-glyph > span { animation: none; opacity: 1; }
}

/* Sandbox test-database expiry chips — theme-aware (amber / red over surface) */
.project-chip.sandbox { background: color-mix(in srgb, #f59e0b 14%, var(--projects-theme-surface)) !important; color: color-mix(in srgb, #f59e0b 80%, var(--projects-theme-text)) !important; }
.project-chip.sandbox-soon { background: color-mix(in srgb, #f59e0b 24%, var(--projects-theme-surface)) !important; color: color-mix(in srgb, #f59e0b 84%, var(--projects-theme-text)) !important; }
.project-chip.sandbox-expired { background: color-mix(in srgb, #ef4444 16%, var(--projects-theme-surface)) !important; color: color-mix(in srgb, #ef4444 82%, var(--projects-theme-text)) !important; }

/* Guide "Choose a path" cards — dark. */
html[data-pp-theme="dark"] .guide-path { border-color: var(--projects-theme-border) !important; }
html[data-pp-theme="dark"] .guide-path.is-db { background: linear-gradient(160deg, color-mix(in srgb,#3b82f6 16%,transparent), color-mix(in srgb,#4f46e5 12%,transparent)) !important; }
html[data-pp-theme="dark"] .guide-path.is-site { background: linear-gradient(160deg, color-mix(in srgb,#8b5cf6 18%,transparent), color-mix(in srgb,#a855f7 12%,transparent)) !important; }
html[data-pp-theme="dark"] .guide-path-head h5 { color: var(--projects-theme-text) !important; }
html[data-pp-theme="dark"] .guide-path li, html[data-pp-theme="dark"] .guide-path .gp-best { color: var(--projects-theme-muted) !important; }
html[data-pp-theme="dark"] .guide-path .gp-best { border-top-color: var(--projects-theme-border) !important; }

/* ============================================================================
   LANDING POLISH PASS (2026-08-22) — refines the Projects hub, the app's
   landing page. Appended last so it wins the cascade; every colour flows through
   the --projects-theme-* tokens so it adapts to light & dark. Pure CSS — no
   markup or JS hooks touched.
   ============================================================================ */

/* — KPI metric strip: premium tiles with per-hue, theme-aware icon chips — */
.projects-overview { gap: .85rem; }
.project-metric {
    position: relative;
    gap: .85rem;
    padding: .95rem 1.05rem !important;
    border-radius: 1rem !important;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.project-metric.blue   { --metric-solid: #3b82f6; }
.project-metric.violet { --metric-solid: #8b5cf6; }
.project-metric.green  { --metric-solid: #10b981; }
.project-metric.slate  { --metric-solid: #64748b; }
.project-metric::after {                 /* faint hue wash sweeping from the corner */
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
    background: radial-gradient(130% 150% at 100% 0,
        color-mix(in srgb, var(--metric-solid, var(--projects-theme-primary)) 13%, transparent), transparent 58%);
}
.project-metric:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--metric-solid, var(--projects-theme-primary)) 42%, var(--projects-theme-border)) !important;
    box-shadow: 0 14px 30px color-mix(in srgb, var(--projects-theme-shadow) 82%, transparent) !important;
}
.project-metric .project-metric-icon {   /* !important: beats the 3-class hub rule + fixes dark mode */
    position: relative; z-index: 1;
    width: 2.5rem; height: 2.5rem; border-radius: .82rem; font-size: 1.05rem;
    background: color-mix(in srgb, var(--metric-solid) 16%, var(--projects-theme-surface)) !important;
    color: color-mix(in srgb, var(--metric-solid) 82%, var(--projects-theme-text)) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--metric-solid) 22%, transparent);
}
.project-metric-copy { position: relative; z-index: 1; }
.project-metric-copy strong { font-size: 1.38rem; font-weight: 850; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.project-metric-copy span { margin-top: .1rem; font-size: .67rem; font-weight: 600; }
/* clickable KPI tiles (wired in projectPolish.js) */
.project-metric.is-actionable { cursor: pointer; }
.project-metric.is-actionable:active { transform: translateY(0); }
.project-metric.is-actionable:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--metric-solid, var(--projects-theme-primary)) 50%, transparent);
    outline-offset: 2px;
}
.project-metric.is-actionable::before {   /* tiny cue that fades in on hover */
    content: "\2197"; position: absolute; top: .55rem; right: .75rem; z-index: 1;
    font-size: .8rem; font-weight: 700; line-height: 1; color: var(--metric-solid, var(--projects-theme-primary));
    opacity: 0; transform: translate(-2px, 2px); transition: opacity .16s ease, transform .16s ease;
}
.project-metric.is-actionable:hover::before,
.project-metric.is-actionable:focus-visible::before { opacity: .8; transform: none; }

/* — Toolbar: rounder surface + a proper accent focus ring on search — */
.projects-toolbar { border-radius: 1rem !important; padding: .7rem !important; }
.projects-search .form-control { border-radius: .72rem; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.projects-search .form-control:focus {
    border-color: var(--projects-theme-primary) !important;
    background: var(--projects-theme-surface) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--projects-theme-primary) 18%, transparent) !important;
}
.projects-toolbar .form-select { border-radius: .72rem; }
.projects-toolbar .form-select:focus {
    border-color: var(--projects-theme-primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--projects-theme-primary) 16%, transparent) !important;
}

/* — Tabs: soft hover pill + a gentle active tint above the underline — */
.projects-tabs button { border-radius: .55rem .55rem 0 0; transition: color .15s ease, background-color .15s ease; }
.projects-tabs button:hover { background: var(--projects-theme-hover) !important; color: var(--projects-theme-text) !important; }
.projects-tabs button.active { background: color-mix(in srgb, var(--projects-theme-primary) 9%, transparent) !important; }

/* — Project cards/rows: smoother lift, glossier mark, clearer readiness — */
.project-hub-card { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.project-hub-card:hover { transform: translateY(-3px); }
.project-card-mark { box-shadow: 0 7px 16px color-mix(in srgb, var(--project-accent) 26%, transparent), inset 0 1px 0 rgba(255,255,255,.28); }
.project-readiness-copy { font-size: .63rem; }
.project-progress { height: 6px !important; }
.project-progress span { box-shadow: 0 1px 3px color-mix(in srgb, var(--project-accent) 45%, transparent); }
.project-card-actions .btn-primary {
    box-shadow: 0 6px 16px color-mix(in srgb, var(--projects-theme-primary) 30%, transparent);
    transition: transform .15s ease, box-shadow .15s ease;
}
.project-card-actions .btn-primary:hover { transform: translateY(-1px); }

/* — Hero: slightly softer frame + tighter display type — */
.projects-command { border-radius: 1.25rem !important; }
.projects-command h1 { letter-spacing: -.04em; }
.projects-command-kicker { letter-spacing: .1em; }

/* — Gentle staggered entrance for the collection (auto-disabled under
     prefers-reduced-motion by the global rule in projectPolish.css) — */
@media (prefers-reduced-motion: no-preference) {
    .projects-collection > .project-hub-card { animation: hubCardIn .4s cubic-bezier(.4, 0, .2, 1) both; }
    .projects-collection > .project-hub-card:nth-child(1) { animation-delay: .02s; }
    .projects-collection > .project-hub-card:nth-child(2) { animation-delay: .06s; }
    .projects-collection > .project-hub-card:nth-child(3) { animation-delay: .10s; }
    .projects-collection > .project-hub-card:nth-child(4) { animation-delay: .14s; }
    .projects-collection > .project-hub-card:nth-child(5) { animation-delay: .18s; }
    .projects-collection > .project-hub-card:nth-child(6) { animation-delay: .22s; }
    .projects-collection > .project-hub-card:nth-child(n+7) { animation-delay: .26s; }
    .project-metric { animation: hubCardIn .4s cubic-bezier(.4, 0, .2, 1) both; }
    .project-metric:nth-child(1) { animation-delay: .02s; }
    .project-metric:nth-child(2) { animation-delay: .06s; }
    .project-metric:nth-child(3) { animation-delay: .10s; }
    .project-metric:nth-child(4) { animation-delay: .14s; }
}
@keyframes hubCardIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ============================================================================
   HERO AURORA + DENSITY TOGGLE + SAVED VIEWS (2026-08-22)
   ============================================================================ */

/* — Animated aurora hero: drifting theme-coloured blobs + a slow sheen. The
     static gradient still shows under prefers-reduced-motion. — */
.projects-command { position: relative; overflow: hidden; }
.projects-command::before, .projects-command::after { display: none; }   /* replaced by the aurora layer */
.projects-command-aurora { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.projects-command-aurora span { position: absolute; border-radius: 50%; filter: blur(40px); opacity: .5; will-change: transform; }
.projects-command-aurora span:nth-child(1) { width: 340px; height: 340px; top: -150px; right: 4%;
    background: radial-gradient(circle, color-mix(in srgb, var(--projects-theme-primary) 60%, transparent), transparent 70%); }
.projects-command-aurora span:nth-child(2) { width: 260px; height: 260px; bottom: -160px; left: 24%;
    background: radial-gradient(circle, color-mix(in srgb, #8b5cf6 48%, transparent), transparent 70%); }
.projects-command-aurora span:nth-child(3) { width: 230px; height: 230px; top: 14%; left: -100px;
    background: radial-gradient(circle, color-mix(in srgb, #38bdf8 42%, transparent), transparent 70%); }
.projects-command-aurora::after { content: ""; position: absolute; top: 0; left: -45%; width: 42%; height: 100%;
    background: linear-gradient(100deg, transparent, color-mix(in srgb, #ffffff 22%, transparent), transparent);
    transform: skewX(-18deg); opacity: 0; }
.projects-command-copy, .projects-command-actions { position: relative; z-index: 1; }

@media (prefers-reduced-motion: no-preference) {
    .projects-command-aurora span:nth-child(1) { animation: pcDrift1 19s ease-in-out infinite; }
    .projects-command-aurora span:nth-child(2) { animation: pcDrift2 23s ease-in-out infinite; }
    .projects-command-aurora span:nth-child(3) { animation: pcDrift3 27s ease-in-out infinite; }
    .projects-command-aurora::after { animation: pcSheen 8s ease-in-out 1.2s infinite; }
    .projects-command-copy > *, .projects-command-actions > * { animation: pcCopyIn .55s cubic-bezier(.4, 0, .2, 1) both; }
    .projects-command-kicker { animation-delay: .04s; }
    .projects-command h1 { animation-delay: .11s; }
    .projects-command p { animation-delay: .18s; }
    .projects-command-actions > *:nth-child(1) { animation-delay: .20s; }
    .projects-command-actions > *:nth-child(2) { animation-delay: .25s; }
    .projects-command-actions > *:nth-child(3) { animation-delay: .30s; }
    .projects-command-actions > *:nth-child(4) { animation-delay: .35s; }
    .projects-command-actions > *:nth-child(5) { animation-delay: .40s; }
}
@keyframes pcDrift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-32px,26px) scale(1.12); } }
@keyframes pcDrift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(34px,-22px) scale(1.09); } }
@keyframes pcDrift3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(42px,18px) scale(1.15); } }
@keyframes pcSheen  { 0% { left: -45%; opacity: 0; } 12% { opacity: .55; } 55%,100% { left: 130%; opacity: 0; } }
@keyframes pcCopyIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

/* — Density toggle (mirrors the view switch) — */
.projects-density-switch { display: flex; padding: .2rem; border: 1px solid var(--projects-theme-border); border-radius: .65rem; background: var(--projects-theme-soft); }
.projects-density-switch button { width: 2rem; height: 1.95rem; display: grid; place-items: center; border: 0; border-radius: .45rem; background: transparent; color: var(--projects-theme-muted); transition: background-color .14s ease, color .14s ease; }
.projects-density-switch button.active { background: var(--projects-theme-primary-soft); color: var(--projects-theme-primary); box-shadow: 0 1px 4px color-mix(in srgb, var(--projects-theme-shadow) 60%, transparent); }

/* — Saved views bar — */
.projects-views { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin-top: .85rem; }
.projects-views .pv-label { display: inline-flex; align-items: center; gap: .35rem; font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--projects-theme-muted); }
.projects-views .pv-label i { color: var(--projects-theme-primary); font-size: .82rem; }
.pv-chips { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.pv-chip { display: inline-flex; align-items: center; gap: .38rem; padding: .26rem .34rem .26rem .62rem; border: 1px solid var(--projects-theme-border);
    border-radius: 999px; background: var(--projects-theme-surface-raised); color: var(--projects-theme-text); font-size: .72rem; font-weight: 650; cursor: pointer;
    transition: border-color .14s ease, background-color .14s ease, color .14s ease, transform .14s ease; }
.pv-chip i { color: var(--projects-theme-primary); font-size: .7rem; }
.pv-chip:hover, .pv-chip:focus-visible { border-color: var(--projects-theme-primary); background: var(--projects-theme-primary-soft); color: var(--projects-theme-primary); transform: translateY(-1px); outline: none; }
.pv-chip:hover i, .pv-chip:focus-visible i { color: var(--projects-theme-primary); }
.pv-chip.is-active { border-color: var(--projects-theme-primary); background: var(--projects-theme-primary-soft); color: var(--projects-theme-primary); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--projects-theme-primary) 35%, transparent); }
.pv-chip .pv-del { display: grid; place-items: center; width: 1.15rem; height: 1.15rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; opacity: .5; font-size: .9rem; line-height: 1; cursor: pointer; }
.pv-chip .pv-del:hover { opacity: 1; background: color-mix(in srgb, #ef4444 18%, transparent); color: #ef4444; }
.pv-empty { font-size: .7rem; color: var(--projects-theme-muted); }
.pv-save { display: inline-flex; align-items: center; gap: .3rem; margin-left: auto; padding: .3rem .72rem; border: 1px dashed color-mix(in srgb, var(--projects-theme-primary) 45%, var(--projects-theme-border));
    border-radius: 999px; background: transparent; color: var(--projects-theme-primary); font-size: .7rem; font-weight: 750; cursor: pointer; transition: background-color .14s ease, border-color .14s ease; }
.pv-save:hover, .pv-save:focus-visible { background: var(--projects-theme-primary-soft); border-style: solid; outline: none; }

/* — Compact density overrides (id + class beats hub/list rules) — */
#projectsCollection.density-compact { gap: .5rem; }
#projectsCollection.density-compact .project-hub-card { min-height: 0; }
#projectsCollection.density-compact .project-card-main { padding: .7rem .85rem .55rem 1rem; }
#projectsCollection.density-compact .project-card-header { gap: .55rem; }
#projectsCollection.density-compact .project-card-mark { width: 2.1rem; height: 2.1rem; font-size: .95rem; border-radius: .68rem; }
#projectsCollection.density-compact .project-card-heading h2 { font-size: .86rem; }
#projectsCollection.density-compact .project-card-description { margin: .4rem 0; min-height: 0; -webkit-line-clamp: 1; }
#projectsCollection.density-compact .project-readiness { padding-top: .5rem; }
#projectsCollection.density-compact .project-card-footer { padding: .45rem .85rem .45rem 1rem; }
#projectsCollection.density-compact.view-list .project-card-main { padding: .45rem .7rem; }
#projectsCollection.density-compact.view-list .project-card-mark { width: 1.9rem; height: 1.9rem; }
#projectsCollection.density-compact.view-list .project-card-footer { padding: .45rem .7rem; }

@media (max-width: 767.98px) {
    .projects-views .pv-save { margin-left: 0; }
    .pv-empty { display: none; }
}

/* SweetAlert "Save view" dialog inherits the app surface in dark mode. */
html[data-pp-theme="dark"] .swal2-popup.projects-swal { background: var(--projects-theme-surface-raised); color: var(--projects-theme-text); }
html[data-pp-theme="dark"] .swal2-popup.projects-swal .swal2-input { background: var(--projects-theme-input); color: var(--projects-theme-text); border-color: var(--projects-theme-border); }
