:root {
    --envoy-navy: #16323F;
    --envoy-teal: #2D5F6F;
    --envoy-bg: #F7F8F9;
    --envoy-border: #DDE3E6;
    --envoy-text: #1A1F22;
    --envoy-active: #3E8E7E;

    /* Sampled directly from the reference screenshot's nav panel */
    --envoy-panel-blue: #C4D7EC;
    --envoy-panel-blue-hover: #B7CCE3;
    --envoy-panel-navy-text: #0E2745;

    /* Sampled from the Builder Information form screenshot */
    --envoy-panel-pale: #F2F9FE;

    /* Sampled from the empty designer canvas in the nav screenshot */
    --envoy-canvas-gray: #EBEDEE;
}

body {
    background-color: var(--envoy-bg);
    color: var(--envoy-text);
    font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
}

h1, h2, h3, h4, h5, .display-4 {
    font-family: "IBM Plex Serif", Georgia, serif;
    font-weight: 600;
    color: var(--envoy-navy);
}

code, .envoy-mono {
    font-family: "IBM Plex Mono", monospace;
}

/* ── Top nav ─────────────────────────────────────────── */
.envoy-navbar {
    background-color: #ffffff;
    border-bottom: 1px solid var(--envoy-border);
}

.envoy-wordmark {
    font-family: "IBM Plex Serif", serif;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--envoy-navy);
    letter-spacing: 0.02em;
}

/* ── Workspace card: the signature element ──────────────
   Every tenant's uploaded logo gets framed consistently here,
   regardless of the logo's own colors/shape/aspect ratio. */
.envoy-workspace-card {
    background: #ffffff;
    border: 1px solid var(--envoy-navy);
    border-radius: 4px;
    padding: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2rem;
}

.envoy-workspace-logo {
    max-height: 90px;
    max-width: 280px;
    object-fit: contain;
}

.envoy-workspace-placeholder {
    height: 90px;
    width: 280px;
    border: 1px dashed var(--envoy-border);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8a9599;
    font-size: 0.85rem;
    text-align: center;
    padding: 0.5rem;
}

.envoy-workspace-meta {
    text-align: right;
}

.envoy-workspace-meta h2 {
    margin-bottom: 0.15rem;
}

.envoy-workspace-meta .envoy-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.7rem;
    color: var(--envoy-teal);
    font-weight: 600;
}

/* ── Stat cards ──────────────────────────────────────── */
.envoy-stat-card {
    background: #ffffff;
    border: 1px solid var(--envoy-border);
    border-radius: 4px;
    padding: 1.25rem 1.5rem;
}

.envoy-stat-card .envoy-stat-value {
    font-family: "IBM Plex Serif", serif;
    font-size: 2rem;
    font-weight: 600;
    color: var(--envoy-navy);
    line-height: 1;
}

.envoy-stat-card .envoy-stat-label {
    font-size: 0.8rem;
    color: var(--envoy-teal);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 0.35rem;
}

/* ── Quick links ─────────────────────────────────────── */
.envoy-quicklink {
    display: block;
    background: #ffffff;
    border: 1px solid var(--envoy-border);
    border-radius: 4px;
    padding: 1rem 1.25rem;
    text-decoration: none;
    color: var(--envoy-text);
    transition: border-color 0.15s ease;
}

.envoy-quicklink:hover {
    border-color: var(--envoy-navy);
    color: var(--envoy-navy);
}

.envoy-quicklink .envoy-quicklink-title {
    font-weight: 600;
    color: var(--envoy-navy);
}

/* ── Focus visibility (accessibility floor) ─────────────── */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
    outline: 2px solid var(--envoy-teal);
    outline-offset: 2px;
}

/* ── App shell: sidebar + content ───────────────────────
   Signature nav pattern carried over from the desktop app —
   grouped, collapsible categories rather than a flat top nav. */
.envoy-app-shell {
    display: flex;
    align-items: flex-start;
    gap: 0;
}

.envoy-sidebar {
    width: 260px;
    flex-shrink: 0;
    background: #ffffff;
    border-right: 1px solid var(--envoy-border);
    min-height: calc(100vh - 64px);
}

.envoy-sidebar-group-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: var(--envoy-panel-blue);
    border-bottom: 1px solid var(--envoy-panel-blue-hover);
    border-top: 1px solid #ffffff;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--envoy-panel-navy-text);
    cursor: pointer;
    text-decoration: none;
}

.envoy-sidebar-group-header:hover {
    background: var(--envoy-panel-blue-hover);
    color: var(--envoy-panel-navy-text);
}

.envoy-sidebar-group-header .bi {
    color: var(--envoy-panel-navy-text);
}

.envoy-sidebar-group-header .bi-chevron-down {
    margin-left: auto;
    transition: transform 0.15s ease;
    font-size: 0.75rem;
}

.envoy-sidebar-group-header[aria-expanded="true"] .bi-chevron-down {
    transform: rotate(180deg);
}

.envoy-sidebar-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem 0.4rem 2rem;
    font-size: 0.85rem;
    color: var(--envoy-panel-navy-text);
    text-decoration: none;
    background: #ffffff;
}

.envoy-sidebar-item:hover {
    background: var(--envoy-panel-blue);
    color: var(--envoy-panel-navy-text);
}

.envoy-sidebar-item.disabled {
    color: #a9b7c4;
    pointer-events: none;
    cursor: default;
}

.envoy-sidebar-item .bi {
    font-size: 0.8rem;
    width: 1rem;
    color: var(--envoy-teal);
}

.envoy-sidebar-item.disabled .bi {
    color: #c3cdd6;
}

.envoy-content {
    flex: 1;
    min-width: 0;
    padding: 1.5rem;
}

/* ── Restore standard Bootstrap floating-label behavior ──
   The default ASP.NET Core site.css template shows the placeholder
   as a visible, right-aligned hint next to the floating label —
   which renders as overlapping/stacked text instead of separated. */
.form-floating > .form-control::placeholder,
.form-floating > .form-control-plaintext::placeholder {
    color: transparent;
    text-align: start;
}

/* Bigger, more substantial floating-label fields (default Bootstrap
   sizing reads as cramped for a standalone login/register page). */
.form-floating > .form-control {
    height: 4.5rem;
    padding: 1.625rem 1rem 0.625rem;
    font-size: 1.05rem;
}

.form-floating > label {
    padding: 1.1rem 1rem;
}

/* ── Auth page shell: form card + decorative panel ──────
   Splits logged-out pages (Login/Register) into a narrow form
   column and a textured panel filling the remaining space,
   instead of a form floating alone in a sea of gray. */
.envoy-auth-shell {
    display: flex;
    align-items: stretch;
    min-height: calc(100vh - 64px);
}

.envoy-auth-card {
    width: 600px;
    flex-shrink: 0;
    padding: 3rem 3rem;
    background: var(--envoy-bg);
}

.envoy-auth-decor {
    flex: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--envoy-canvas-gray);
    background-image:
        repeating-linear-gradient(0deg, rgba(45, 95, 111, 0.08) 0, rgba(45, 95, 111, 0.08) 1px, transparent 1px, transparent 48px),
        repeating-linear-gradient(90deg, rgba(45, 95, 111, 0.08) 0, rgba(45, 95, 111, 0.08) 1px, transparent 1px, transparent 48px);
}

.envoy-auth-house-svg {
    width: 60%;
    max-width: 380px;
    height: auto;
    stroke: var(--envoy-navy);
    opacity: 0.55;
}

@media (max-width: 900px) {
    .envoy-auth-decor {
        display: none;
    }
    .envoy-auth-card {
        width: 100%;
    }
}

/* ── Content panels (Builders page, modals) ─────────────
   Pale blue matches the old app's form panels; dark blue-lavender
   header bars tie back to the sidebar for a consistent theme. */
.envoy-page-panel {
    background: var(--envoy-panel-pale);
    border: 1px solid var(--envoy-panel-blue-hover);
    border-radius: 4px;
    padding: 1.5rem;
}

.envoy-table-header th {
    background: var(--envoy-panel-blue);
    color: var(--envoy-panel-navy-text);
    font-weight: 600;
    border-bottom: 2px solid var(--envoy-panel-blue-hover);
}

.envoy-table-panel tbody tr {
    background: var(--envoy-panel-pale);
}

.envoy-table-panel tbody tr:hover {
    background: var(--envoy-panel-blue-hover);
}

.envoy-modal-header {
    background: var(--envoy-panel-blue);
    color: var(--envoy-panel-navy-text);
    border-bottom: 1px solid var(--envoy-panel-blue-hover);
}

.envoy-modal-body {
    background: var(--envoy-panel-pale);
}

/* ── Home canvas: the empty gray space where the tenant's
   uploaded logo lives ─────────────────────────────────── */
.envoy-canvas {
    background: var(--envoy-canvas-gray);
    border: 1px solid var(--envoy-border);
    min-height: calc(100vh - 140px);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.envoy-canvas-logo {
    max-width: 60%;
    max-height: 320px;
    object-fit: contain;
}

.envoy-canvas-empty {
    color: #8a9599;
    font-size: 0.95rem;
    text-align: center;
}

.envoy-canvas-upload {
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    background: #ffffff;
    border: 1px solid var(--envoy-border);
    border-radius: 4px;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}