/* Dark stage so reversed (white) logos stay visible in the light admin UI. */
.connections-logo-stage-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.connections-logo-stage-text {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: uppercase;
}

.connections-logo-stage {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 5rem;
    padding: 0;
    border-radius: 0.75rem;
}

.fi-logo {
    margin-left: 0;
    margin-inline-start: 0;
}

.fi-sidebar-header-logo-ctn {
    padding: 2rem 0 0;
}
.connections-logo-stage--compact {
    min-height: 0;
}

.connections-logo-stage--empty {
    color: #a1a1aa;
    font-size: 0.875rem;
}

/* Explicit height: SVG marks often have only a viewBox. height/width auto
   plus max-width: 100% inside this shrink-wrapped flex stage resolves to 0×0. */
.connections-logo-stage img {
    display: block;
    flex: 0 0 auto;
    width: auto;
    height: 2.75rem;
    max-width: 100%;
    object-fit: contain;
}

.connections-logo-stage--compact img {
    height: 3.25rem;
    max-width: min(18rem, 10vw);
}

.connections-logo-upload .filepond--panel-root {
    background-color: #17171c;
}

.connections-logo-upload .filepond--drop-label {
    color: #d4d4d8;
}

.connections-logo-upload .filepond--image-preview-wrapper,
.connections-logo-upload .filepond--image-preview {
    background-color: #17171c !important;
    background-image: none !important;
}

/* Brand and map canvas pickers: a square swatch large enough to compare colors. */
.connections-color-swatch .fi-fo-color-picker-preview {
    width: 2.75rem;
    height: 2.75rem;
    margin: 0.3rem 0.7rem 0.3rem 0;
    border-radius: 0.35rem;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.16);
}

.fi-main-sidebar {
    display: flex;
    flex-direction: column;
}

.fi-sidebar-nav {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Keep z-index:-1 inside the body so the mark sits on the gray chrome, not on cards. */
.fi-body {
    isolation: isolate;
}

/* World map pinned to the chrome. Multiply drops the black field so only land shows. */
.connections-page-watermark {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: -1;
    width: min(58rem, 78vw);
    pointer-events: none;
    line-height: 0;
}

.connections-page-watermark__image {
    display: block;
    width: 100%;
    height: auto;
    opacity: 0.14;
    mix-blend-mode: screen;
}

.fi-header > div:first-child {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.7rem;
}

.fi-header .fi-breadcrumbs {
    flex: 1 0 100%;
}

.connections-page-heading-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    color: #5a5a5a;
}

.connections-page-heading-icon .fi-icon {
    width: 3.15rem;
    height: 3.15rem;
}

@media (min-width: 640px) {
    .connections-page-heading-icon .fi-icon {
        width: 4.15rem;
        height: 4.15rem;
    }
}

.fi-header-heading {
    flex: 1 1 auto;
}

.fi-header-subheading {
    flex: 1 0 100%;
}

@media (min-width: 1024px) {
    .fi-header-subheading {
        flex: 1 1 18rem;
        max-width: 28rem;
    }
}

/* Primary actions use the shared L5 blue-to-purple gradient (see connections.css). */
.fi-btn.fi-color-primary:not(.fi-outlined):not(label) {
    --bg: transparent;
    --hover-bg: transparent;
    --dark-bg: transparent;
    --dark-hover-bg: transparent;
    --text: #fff;
    --hover-text: #fff;
    --dark-text: #fff;
    --dark-hover-text: #fff;
    background-color: transparent;
    background-image: linear-gradient(90deg, #4ba5f1 0%, #4359c4 50%, #651999 100%);
    color: #fff;
    font-weight: 600;
}

.fi-btn.fi-color-primary:not(.fi-outlined):not(label):is(:hover, :focus-visible) {
    background-color: transparent;
    background-image: linear-gradient(90deg, #6bb6f6 0%, #5468d0 50%, #7a22b3 100%);
    color: #fff;
}

.connections-powered-by {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0.85rem 1rem 1.1rem;
    align-content: center;
    align-items: center;
    justify-content: space-between;
}

.connections-powered-by__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
}

.connections-powered-by--sidebar {
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.connections-powered-by--login {
    align-items: center;
    padding: 0.75rem 0 0;
}

.connections-powered-by__logo {
    display: block;
    width: auto;
    max-width: 10vw;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.92;
}

.connections-powered-by__text {
    margin: 0;
    color: #c5cada;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: uppercase;
}

.connections-powered-by__version {
    margin: 0;
    color: #8b93ab;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}