/* Workspace colour-mode bridge.
 * Loaded after the base Workspace and shared database-dialog styles so the
 * module can follow the central theme without altering its markup or actions. */
:root {
    --workspace-canvas: var(--pp-app-bg, #f4f7fb);
    --workspace-surface: var(--pp-surface, #ffffff);
    --workspace-surface-soft: var(--pp-surface-soft, #f8fafc);
    --workspace-border: var(--pp-border, #dbe3ee);
    --workspace-border-hover: #c7d2fe;
    --workspace-text: var(--pp-text, #172033);
    --workspace-muted: var(--pp-text-muted, #64748b);
    --workspace-link: #4f46e5;
    --workspace-link-hover: #3730a3;
    --workspace-shadow: rgba(30, 41, 59, .08);
    --workspace-tooltip-bg: #ffffff;
    --workspace-tooltip-text: #172033;
    --workspace-tooltip-border: #dbe3ee;
    --workspace-hero-start: #0f172a;
    --workspace-hero-middle: #172554;
    --workspace-hero-end: #7c3aed;
    --workspace-hero-text: #f8fafc;
    --workspace-hero-muted: #dbeafe;
    --workspace-hero-accent: #93c5fd;
    --workspace-hero-kicker: #bfdbfe;
    --workspace-hero-border: rgba(147, 197, 253, .22);
    --workspace-hero-panel: rgba(255, 255, 255, .09);
    --workspace-hero-panel-hover: rgba(255, 255, 255, .14);
    --workspace-hero-panel-border: rgba(255, 255, 255, .18);
    --workspace-hero-ring: #67e8f9;
    --workspace-hero-ring-track: rgba(255, 255, 255, .16);
    --workspace-hero-ring-core: #293283;
    --workspace-hero-glow-one: #38bdf8;
    --workspace-hero-glow-two: #f0abfc;
    --workspace-hero-chip: rgba(15, 23, 42, .28);
    --workspace-hero-action-bg: #ffffff;
    --workspace-hero-action-text: #172033;
}

html[data-pp-theme="dark"] {
    --workspace-canvas: var(--pp-app-bg, #0b1120);
    --workspace-surface: var(--pp-surface, #111827);
    --workspace-surface-soft: var(--pp-surface-soft, #141d2e);
    --workspace-border: var(--pp-border, #2b3a52);
    --workspace-border-hover: #536a91;
    --workspace-text: var(--pp-text, #e7edf7);
    --workspace-muted: var(--pp-text-muted, #9cabc1);
    --workspace-link: #8fb8ff;
    --workspace-link-hover: #b8d2ff;
    --workspace-shadow: rgba(0, 0, 0, .3);
    --workspace-tooltip-bg: #243147;
    --workspace-tooltip-text: #f1f5f9;
    --workspace-tooltip-border: #41516b;
    --workspace-hero-start: #080d17;
    --workspace-hero-middle: #111d38;
    --workspace-hero-end: #1d4ed8;
    --workspace-hero-text: #f8fafc;
    --workspace-hero-muted: #bfdbfe;
    --workspace-hero-accent: #93c5fd;
    --workspace-hero-kicker: #bfdbfe;
    --workspace-hero-border: rgba(96, 165, 250, .3);
    --workspace-hero-panel: rgba(17, 24, 39, .38);
    --workspace-hero-panel-hover: rgba(30, 41, 59, .52);
    --workspace-hero-panel-border: rgba(147, 197, 253, .24);
    --workspace-hero-ring: #60a5fa;
    --workspace-hero-ring-track: rgba(156, 171, 193, .2);
    --workspace-hero-ring-core: #172033;
    --workspace-hero-glow-one: #2563eb;
    --workspace-hero-glow-two: #38bdf8;
    --workspace-hero-chip: rgba(8, 13, 23, .5);
    --workspace-hero-action-bg: #e7edf7;
    --workspace-hero-action-text: #111827;
}

html[data-pp-theme-choice="dracula"] {
    --workspace-hero-start: #21222c;
    --workspace-hero-middle: #282a36;
    --workspace-hero-end: #44345f;
    --workspace-hero-text: #f8f8f2;
    --workspace-hero-muted: #c4c6d0;
    --workspace-hero-accent: #bd93f9;
    --workspace-hero-kicker: #8be9fd;
    --workspace-hero-border: rgba(189, 147, 249, .36);
    --workspace-hero-panel: rgba(68, 71, 90, .58);
    --workspace-hero-panel-hover: rgba(98, 114, 164, .46);
    --workspace-hero-panel-border: rgba(189, 147, 249, .3);
    --workspace-hero-ring: #bd93f9;
    --workspace-hero-ring-track: rgba(248, 248, 242, .16);
    --workspace-hero-ring-core: #282a36;
    --workspace-hero-glow-one: #8be9fd;
    --workspace-hero-glow-two: #ff79c6;
    --workspace-hero-chip: rgba(33, 34, 44, .58);
    --workspace-hero-action-bg: #f8f8f2;
    --workspace-hero-action-text: #282a36;
}

html[data-pp-theme-choice="gruvbox"] {
    --workspace-hero-start: #1d2021;
    --workspace-hero-middle: #282828;
    --workspace-hero-end: #504945;
    --workspace-hero-text: #fbf1c7;
    --workspace-hero-muted: #d5c4a1;
    --workspace-hero-accent: #fabd2f;
    --workspace-hero-kicker: #83a598;
    --workspace-hero-border: rgba(250, 189, 47, .34);
    --workspace-hero-panel: rgba(60, 56, 54, .62);
    --workspace-hero-panel-hover: rgba(80, 73, 69, .78);
    --workspace-hero-panel-border: rgba(235, 219, 178, .24);
    --workspace-hero-ring: #fabd2f;
    --workspace-hero-ring-track: rgba(235, 219, 178, .17);
    --workspace-hero-ring-core: #282828;
    --workspace-hero-glow-one: #d79921;
    --workspace-hero-glow-two: #fe8019;
    --workspace-hero-chip: rgba(29, 32, 33, .62);
    --workspace-hero-action-bg: #ebdbb2;
    --workspace-hero-action-text: #282828;
}

.workspace-main,
.workspace-scroll {
    background: var(--workspace-canvas) !important;
    color: var(--workspace-text);
}

.workspace-welcome { color: var(--workspace-text); }

.workspace-hero {
    border: 1px solid var(--workspace-hero-border);
    background: linear-gradient(125deg,
        var(--workspace-hero-start) 0%,
        var(--workspace-hero-middle) 48%,
        var(--workspace-hero-end) 100%) !important;
    color: var(--workspace-hero-text);
    box-shadow: 0 20px 45px color-mix(in srgb, var(--workspace-shadow) 82%, transparent);
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.workspace-hero .hero-glow-one { background: var(--workspace-hero-glow-one); }
.workspace-hero .hero-glow-two { background: var(--workspace-hero-glow-two); }
.workspace-hero .welcome-kicker { color: var(--workspace-hero-kicker); }
.workspace-hero h1,
.workspace-hero .progress-ring strong,
.workspace-hero .database-pill strong { color: var(--workspace-hero-text); }
.workspace-hero h1 span { color: var(--workspace-hero-accent); }
.workspace-hero p,
.workspace-hero .progress-ring small,
.workspace-hero .database-pill small,
.workspace-hero .database-target { color: var(--workspace-hero-muted); }

.workspace-hero .hero-actions .btn-light {
    border-color: color-mix(in srgb, var(--workspace-hero-action-bg) 72%, transparent);
    background: var(--workspace-hero-action-bg);
    color: var(--workspace-hero-action-text);
}
.workspace-hero .hero-actions .btn-light:hover {
    border-color: var(--workspace-hero-accent);
    background: color-mix(in srgb, var(--workspace-hero-action-bg) 86%, var(--workspace-hero-accent));
    color: var(--workspace-hero-action-text);
}
.workspace-hero .hero-actions .btn-outline-light {
    border-color: color-mix(in srgb, var(--workspace-hero-text) 58%, transparent);
    background: color-mix(in srgb, var(--workspace-hero-panel) 72%, transparent);
    color: var(--workspace-hero-text);
}
.workspace-hero .hero-actions .btn-outline-light:hover {
    border-color: var(--workspace-hero-accent);
    background: var(--workspace-hero-panel-hover);
    color: var(--workspace-hero-text);
}

.workspace-hero .hero-status {
    border-color: var(--workspace-hero-panel-border);
    background: var(--workspace-hero-panel);
    color: var(--workspace-hero-text);
}
.workspace-hero .hero-status:hover {
    border-color: color-mix(in srgb, var(--workspace-hero-accent) 68%, transparent);
    background: var(--workspace-hero-panel-hover);
    box-shadow: 0 14px 32px color-mix(in srgb, var(--workspace-shadow) 84%, transparent);
}
.workspace-hero .hero-status:focus-visible { outline-color: color-mix(in srgb, var(--workspace-hero-accent) 76%, transparent); }
.workspace-hero .progress-ring {
    background: conic-gradient(var(--workspace-hero-ring) var(--progress-angle), var(--workspace-hero-ring-track) 0);
}
.workspace-hero .progress-ring::before { background: var(--workspace-hero-ring-core); }
.workspace-hero .database-manage-hint {
    background: var(--workspace-hero-chip);
    color: var(--workspace-hero-text);
}
.workspace-hero .hero-status:hover .database-manage-hint {
    background: color-mix(in srgb, var(--workspace-hero-chip) 68%, var(--workspace-hero-accent));
}

.stat-item,
.workspace-section,
.capability-card,
.build-path {
    border-color: var(--workspace-border) !important;
    background: var(--workspace-surface) !important;
    color: var(--workspace-text) !important;
}

.stat-item,
.workspace-section,
.capability-card,
.build-path,
.workspace-main,
.workspace-scroll {
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.stat-item small,
.capability-card p,
.path-title small { color: var(--workspace-muted) !important; }

.section-heading span,
.section-heading > a,
.path-title > i { color: var(--workspace-link) !important; }
.section-heading > a:hover { color: var(--workspace-link-hover) !important; }

/* Hover glows tint toward each tile/card's own hue (--tile, set in workspace.css),
   falling back to the theme accent — theme-safe in light, dark, dracula, gruvbox. */
.stat-item:hover {
    border-color: color-mix(in srgb, var(--tile, var(--workspace-link)) 55%, var(--workspace-border)) !important;
    box-shadow: 0 12px 26px color-mix(in srgb, var(--tile, var(--workspace-link)) 22%, transparent) !important;
}
.capability-card:hover {
    border-color: color-mix(in srgb, var(--tile, var(--workspace-link)) 60%, var(--workspace-border)) !important;
    color: var(--workspace-text) !important;
    box-shadow: 0 12px 26px color-mix(in srgb, var(--tile, var(--workspace-link)) 22%, transparent) !important;
}
.capability-card:focus-visible,
.section-heading > a:focus-visible,
.path-steps a:focus-visible {
    outline: 3px solid rgba(96, 165, 250, .42);
    outline-offset: 3px;
}
.capability-card > .bi { color: var(--workspace-muted); }

.build-path { background: var(--workspace-surface-soft) !important; }
.path-steps a { color: var(--workspace-text) !important; }
.path-steps a:hover {
    color: var(--workspace-link) !important;
    background: color-mix(in srgb, var(--workspace-link) 12%, var(--workspace-surface));
}
.path-steps > i { color: var(--workspace-border-hover); }
.path-steps b {
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    box-shadow: 0 2px 6px color-mix(in srgb, #6366f1 42%, transparent);
}

/* Keep the four semantic icon colours recognizable without leaving glaring
   light tiles in dark mode. */
html[data-pp-theme="dark"] .stat-icon.blue,
html[data-pp-theme="dark"] .capability-card.data .capability-icon { color: #7db4ff; background: #172b4d; }
html[data-pp-theme="dark"] .stat-icon.violet,
html[data-pp-theme="dark"] .capability-card.pages .capability-icon { color: #c4b5fd; background: #2e2250; }
html[data-pp-theme="dark"] .stat-icon.pink,
html[data-pp-theme="dark"] .capability-card.logic .capability-icon { color: #f9a8d4; background: #421b36; }
html[data-pp-theme="dark"] .stat-icon.green,
html[data-pp-theme="dark"] .capability-card.ship .capability-icon { color: #6ee7b7; background: #123a32; }

/* Bootstrap tooltip used by the connection status card. */
.tooltip.workspace-tooltip .tooltip-inner {
    max-width: 270px;
    padding: .48rem .64rem;
    border: 1px solid var(--workspace-tooltip-border);
    border-radius: .55rem;
    background: var(--workspace-tooltip-bg) !important;
    color: var(--workspace-tooltip-text) !important;
    box-shadow: 0 10px 25px var(--workspace-shadow);
    font-size: .69rem;
    line-height: 1.4;
    text-align: left;
}
.bs-tooltip-top.workspace-tooltip .tooltip-arrow::before { border-top-color: var(--workspace-tooltip-bg) !important; }
.bs-tooltip-bottom.workspace-tooltip .tooltip-arrow::before { border-bottom-color: var(--workspace-tooltip-bg) !important; }
.bs-tooltip-start.workspace-tooltip .tooltip-arrow::before { border-left-color: var(--workspace-tooltip-bg) !important; }
.bs-tooltip-end.workspace-tooltip .tooltip-arrow::before { border-right-color: var(--workspace-tooltip-bg) !important; }

@media (prefers-reduced-motion: reduce) {
    .stat-item,
    .workspace-section,
    .capability-card,
    .build-path,
    .workspace-main,
    .workspace-scroll,
    .workspace-hero { transition: none !important; }
}

/* ── Standalone (database-free) project + flash message ─────────────────── */
.workspace-flash {
    display: flex; align-items: center; gap: .6rem; margin: 0 0 1rem;
    padding: .7rem 1rem; border-radius: .7rem; font-size: .9rem; line-height: 1.4;
    background: color-mix(in srgb, var(--workspace-link) 12%, var(--workspace-surface));
    border: 1px solid color-mix(in srgb, var(--workspace-link) 38%, var(--workspace-border));
    color: var(--workspace-text);
}
.workspace-flash i { color: var(--workspace-link); font-size: 1.05rem; flex: 0 0 auto; }
.workspace-flash span { flex: 1; }
.workspace-flash-x { border: 0; background: transparent; color: var(--workspace-muted); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 .2rem; border-radius: .4rem; }
.workspace-flash-x:hover { color: var(--workspace-text); }
.welcome-sa-tag {
    display: inline-flex; align-items: center; gap: .35rem; margin-left: .5rem;
    padding: .1rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 700;
    background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .3);
}
.hero-status.hero-status-static { cursor: default; }
