/* ==========================================================================
   My MCPaaS — custom styles layered over Bootstrap 5.3
   --------------------------------------------------------------------------
   Same structural approach as ReadyTrack (Bootstrap from CDN + one stylesheet,
   no build step), with its own palette: indigo rather than ReadyTrack's red,
   so the two products read as siblings but never get mistaken for each other.

   Bootstrap's own CSS variables are overridden where possible so utility
   classes (.btn-primary, .text-primary, .bg-primary) inherit the brand without
   a parallel set of custom classes to remember.
   ========================================================================== */

:root {
    --mcp-indigo: #4f46e5;
    --mcp-indigo-dark: #4338ca;
    --mcp-indigo-light: #818cf8;
    --mcp-cyan: #06b6d4;
    --mcp-ink: #0f172a;
    --mcp-slate: #64748b;

    --bs-primary: var(--mcp-indigo);
    --bs-primary-rgb: 79, 70, 229;
    --bs-link-color: var(--mcp-indigo);
    --bs-link-color-rgb: 79, 70, 229;
    --bs-link-hover-color: var(--mcp-indigo-dark);
    --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Surfaces. Redefined under [data-bs-theme=dark] below rather than being
       referenced through Bootstrap's own tokens, because several of these
       (the hero gradient, the sidebar) have no Bootstrap equivalent. */
    --mcp-surface: #ffffff;
    --mcp-surface-alt: #f8fafc;
    --mcp-border: #e2e8f0;
    --mcp-muted: #64748b;
    --mcp-sidebar-bg: #0f172a;
    --mcp-sidebar-fg: #cbd5e1;
    --mcp-sidebar-active: rgba(129, 140, 248, 0.16);
}

[data-bs-theme="dark"] {
    --mcp-surface: #131a2b;
    --mcp-surface-alt: #0d1322;
    --mcp-border: #26304a;
    --mcp-muted: #94a3b8;
    --mcp-sidebar-bg: #0a0f1c;
    --mcp-sidebar-fg: #cbd5e1;

    --bs-link-color: var(--mcp-indigo-light);
    --bs-link-color-rgb: 129, 140, 248;
    --bs-link-hover-color: #a5b4fc;
    --bs-body-bg: #0b1020;
}

body {
    background-color: var(--mcp-surface-alt);
}

/* --- Buttons ------------------------------------------------------------- */

.btn-primary {
    --bs-btn-bg: var(--mcp-indigo);
    --bs-btn-border-color: var(--mcp-indigo);
    --bs-btn-hover-bg: var(--mcp-indigo-dark);
    --bs-btn-hover-border-color: var(--mcp-indigo-dark);
    --bs-btn-active-bg: var(--mcp-indigo-dark);
    --bs-btn-active-border-color: var(--mcp-indigo-dark);
    --bs-btn-disabled-bg: var(--mcp-indigo);
    --bs-btn-disabled-border-color: var(--mcp-indigo);
}

.btn-outline-primary {
    --bs-btn-color: var(--mcp-indigo);
    --bs-btn-border-color: var(--mcp-indigo);
    --bs-btn-hover-bg: var(--mcp-indigo);
    --bs-btn-hover-border-color: var(--mcp-indigo);
    --bs-btn-active-bg: var(--mcp-indigo-dark);
    --bs-btn-active-border-color: var(--mcp-indigo-dark);
}

[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-color: var(--mcp-indigo-light);
    --bs-btn-border-color: var(--mcp-indigo-light);
}

/* --- Brand mark ---------------------------------------------------------- */

/* The wordmark is CSS rather than an image so it stays crisp at any size and
   recolours itself in dark mode. Swap for a real logo file when one exists. */
.mcp-wordmark {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-decoration: none;
    font-size: 1.15rem;
}

.mcp-wordmark__glyph {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.6rem;
    background: linear-gradient(135deg, var(--mcp-indigo) 0%, var(--mcp-cyan) 100%);
    color: #fff;
    font-size: 1.05rem;
    flex: 0 0 auto;
}

.mcp-wordmark__text {
    color: var(--mcp-ink);
}

[data-bs-theme="dark"] .mcp-wordmark__text {
    color: #e2e8f0;
}

.public-nav .mcp-wordmark__text,
.mcp-footer .mcp-wordmark__text {
    color: #f8fafc;
}

/* --- Public site --------------------------------------------------------- */

.public-nav {
    background-color: #0f172a;
    padding-block: 0.85rem;
}

.public-nav .nav-link {
    color: #cbd5e1;
    font-size: 0.94rem;
}

.public-nav .nav-link:hover,
.public-nav .nav-link:focus {
    color: #fff;
}

.public-nav .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.25);
}

.public-nav .navbar-toggler-icon {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.mcp-hero {
    background:
        radial-gradient(1200px 500px at 15% -10%, rgba(79, 70, 229, 0.45) 0%, transparent 60%),
        radial-gradient(900px 400px at 90% 10%, rgba(6, 182, 212, 0.28) 0%, transparent 55%),
        #0f172a;
    color: #f1f5f9;
    padding-block: 5.5rem 5rem;
}

.mcp-hero h1 {
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.mcp-hero .lead {
    color: #cbd5e1;
    max-width: 34rem;
}

.mcp-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--mcp-indigo-light);
}

/* Terminal-style panel used in the hero to show what a connection looks like.
   Deliberately not a real terminal — it's illustrative copy. */
.mcp-codecard {
    background: rgba(2, 6, 23, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 0.9rem;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.82rem;
    line-height: 1.75;
    color: #cbd5e1;
    overflow-x: auto;
}

.mcp-codecard__bar {
    display: flex;
    gap: 0.4rem;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.mcp-codecard__dot {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: rgba(148, 163, 184, 0.35);
}

.mcp-codecard__body {
    padding: 1rem 1.1rem;
    white-space: pre;
}

.mcp-codecard .tok-key { color: #818cf8; }
.mcp-codecard .tok-str { color: #34d399; }
.mcp-codecard .tok-com { color: #64748b; }

.mcp-section {
    padding-block: 4.5rem;
}

.mcp-section--alt {
    background-color: var(--mcp-surface);
    border-block: 1px solid var(--mcp-border);
}

.mcp-card {
    background-color: var(--mcp-surface);
    border: 1px solid var(--mcp-border);
    border-radius: 0.85rem;
    height: 100%;
}

.mcp-card__icon {
    display: inline-grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.7rem;
    background: rgba(79, 70, 229, 0.12);
    color: var(--mcp-indigo);
    font-size: 1.25rem;
}

[data-bs-theme="dark"] .mcp-card__icon {
    background: rgba(129, 140, 248, 0.16);
    color: var(--mcp-indigo-light);
}

.mcp-step-number {
    display: inline-grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--mcp-indigo);
    color: #fff;
    font-weight: 600;
    flex: 0 0 auto;
}

.mcp-muted {
    color: var(--mcp-muted);
}

/* --- Pricing ------------------------------------------------------------- */

.mcp-plan {
    background-color: var(--mcp-surface);
    border: 1px solid var(--mcp-border);
    border-radius: 0.9rem;
    height: 100%;
}

.mcp-plan--featured {
    border-color: var(--mcp-indigo);
    box-shadow: 0 0 0 1px var(--mcp-indigo);
}

.mcp-plan__price {
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}

/* --- Footer -------------------------------------------------------------- */

.mcp-footer {
    background-color: #0f172a;
    color: #94a3b8;
    padding-block: 2.5rem;
    font-size: 0.9rem;
}

.mcp-footer a {
    color: #cbd5e1;
    text-decoration: none;
}

.mcp-footer a:hover {
    color: #fff;
}

/* --- Portal shell -------------------------------------------------------- */

.mcp-sidebar {
    background-color: var(--mcp-sidebar-bg);
    color: var(--mcp-sidebar-fg);
    width: 250px;
    flex: 0 0 250px;

    /* `align-self: flex-start` is load-bearing. As a flex child the sidebar
       defaults to `align-items: stretch`, which sizes it to the full document
       height — leaving nothing to stick, so it scrolled away with the content.
       Pinning it to the top of the flex line lets height:100vh + sticky hold it
       in place while the right-hand column scrolls. `overflow-y:auto` keeps a
       long nav reachable on short viewports. */
    align-self: flex-start;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* The offcanvas clone must not inherit the pinning above — Bootstrap positions
   it itself, and a 100vh sticky element inside breaks the slide-in. */
.offcanvas.mcp-sidebar {
    align-self: auto;
    position: fixed;
    height: 100%;
}

.mcp-sidebar .nav-link {
    color: var(--mcp-sidebar-fg);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.93rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.mcp-sidebar .nav-link:hover {
    background-color: rgba(148, 163, 184, 0.12);
    color: #fff;
}

.mcp-sidebar .nav-link.active {
    background-color: var(--mcp-sidebar-active);
    color: #fff;
    font-weight: 600;
}

.mcp-sidebar .nav-link .badge {
    font-size: 0.65rem;
    font-weight: 500;
}

.mcp-sidebar__section {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.68rem;
    color: #64748b;
    padding: 0 0.75rem;
    margin-bottom: 0.35rem;
}

.mcp-sidebar__version {
    font-size: 0.72rem;
    color: #64748b;
    padding: 0.75rem;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.mcp-topbar {
    background-color: var(--mcp-surface);
    border-bottom: 1px solid var(--mcp-border);
    padding: 0.7rem 1.25rem;
}

.mcp-content {
    padding: 1.5rem 1.25rem 3rem;
}

/* Environment pill. Production is visually distinct on purpose — knowing which
   environment you're acting in is a safety property, not decoration. */
.mcp-env-pill {
    font-size: 0.76rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    border: 1px solid transparent;
}

.mcp-env-pill--development {
    background: rgba(100, 116, 139, 0.14);
    color: var(--mcp-slate);
    border-color: rgba(100, 116, 139, 0.3);
}

.mcp-env-pill--production {
    background: rgba(217, 119, 6, 0.14);
    color: #b45309;
    border-color: rgba(217, 119, 6, 0.35);
}

[data-bs-theme="dark"] .mcp-env-pill--development {
    color: #cbd5e1;
}

[data-bs-theme="dark"] .mcp-env-pill--production {
    color: #fbbf24;
}

/* --- Portal content ------------------------------------------------------ */

.mcp-panel {
    background-color: var(--mcp-surface);
    border: 1px solid var(--mcp-border);
    border-radius: 0.75rem;
}

.mcp-panel__header {
    padding: 0.9rem 1.15rem;
    border-bottom: 1px solid var(--mcp-border);
    font-weight: 600;
}

.mcp-panel__body {
    padding: 1.15rem;
}

.mcp-stat {
    background-color: var(--mcp-surface);
    border: 1px solid var(--mcp-border);
    border-radius: 0.75rem;
    padding: 1.1rem 1.25rem;
    height: 100%;
}

.mcp-stat__value {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.mcp-stat__label {
    font-size: 0.82rem;
    color: var(--mcp-muted);
}

/* Setup checklist on the dashboard. */
.mcp-step {
    display: flex;
    gap: 0.9rem;
    padding: 0.95rem 0;
    border-bottom: 1px solid var(--mcp-border);
}

.mcp-step:last-child {
    border-bottom: 0;
}

.mcp-step__marker {
    display: inline-grid;
    place-items: center;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 50%;
    flex: 0 0 auto;
    font-size: 0.85rem;
    border: 2px solid var(--mcp-border);
    color: var(--mcp-muted);
}

.mcp-step__marker--done {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}

/* Empty states carry a lot of the product's explanatory weight in early
   milestones, so they get real styling rather than a bare paragraph. */
.mcp-empty {
    text-align: center;
    padding: 3rem 1.5rem;
}

.mcp-empty__icon {
    display: inline-grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    background: rgba(79, 70, 229, 0.1);
    color: var(--mcp-indigo);
    font-size: 1.6rem;
    margin-bottom: 1rem;
}

[data-bs-theme="dark"] .mcp-empty__icon {
    background: rgba(129, 140, 248, 0.14);
    color: var(--mcp-indigo-light);
}

/* --- Auth screens -------------------------------------------------------- */

.mcp-auth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background:
        radial-gradient(900px 400px at 20% 0%, rgba(79, 70, 229, 0.18) 0%, transparent 60%),
        var(--mcp-surface-alt);
}

.mcp-auth__card {
    background-color: var(--mcp-surface);
    border: 1px solid var(--mcp-border);
    border-radius: 1rem;
    padding: 2rem;
}

/* --- Tables -------------------------------------------------------------- */

.mcp-table {
    --bs-table-bg: transparent;
    margin-bottom: 0;
}

.mcp-table th {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mcp-muted);
    font-weight: 600;
    border-bottom-width: 1px;
}

.mcp-table td {
    vertical-align: middle;
}

.mcp-mono {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.85em;
}

@media (max-width: 991.98px) {
    .mcp-hero {
        padding-block: 3.5rem;
    }

    .mcp-section {
        padding-block: 3rem;
    }
}