/**
 * Platform styles, layered on Bootstrap 5.3.
 *
 * The palette arrives as CSS custom properties on :root, injected per tenant
 * from TenantBranding. Everything here reads those variables rather than
 * hard-coded colours, which is what makes white-labelling a data change
 * instead of a rebuild.
 *
 * The --vp-* fallbacks below are the SecureNetics defaults, so the stylesheet
 * still renders correctly if the branding block is ever absent.
 */

:root {
    --vp-primary: #1B4965;
    --vp-secondary: #5FA8D3;
    --vp-accent: #62B6CB;
    --vp-background: #F7F9FB;
    --vp-text: #1A1A1A;

    /* Derived from the palette so a tenant sets five colours, not fifteen. */
    --vp-border: rgba(27, 73, 101, .12);
    --vp-surface: #ffffff;
    --vp-muted: #5A6672;

    --vp-radius: .5rem;
    --vp-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
    --vp-shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 8px 24px rgba(16, 24, 40, .06);
}

/* Bootstrap's own theme variables, pointed at the tenant palette. Overriding
   these rather than restyling each component means .btn-primary, .badge and
   the rest follow the tenant's colours without a per-component rule. */
[data-bs-theme="light"] {
    --bs-primary: var(--vp-primary);
    --bs-primary-rgb: 27, 73, 101;
    --bs-link-color: var(--vp-primary);
    --bs-link-hover-color: var(--vp-accent);
    --bs-body-bg: var(--vp-background);
    --bs-body-color: var(--vp-text);
    --bs-border-color: var(--vp-border);
}

/* ==========================================================================
   Layout
   ========================================================================== */

.vp-body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--vp-background);
    color: var(--vp-text);
}

.vp-main {
    flex: 1 0 auto;
}

.vp-skip-link {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 1080;
    padding: .5rem 1rem;
    background: var(--vp-primary);
    color: #fff;
    border-radius: var(--vp-radius);
    text-decoration: none;
}

.vp-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--vp-border);
    background: var(--vp-surface);
}

.vp-footer a {
    color: var(--vp-muted);
    text-decoration: none;
}

.vp-footer a:hover {
    color: var(--vp-primary);
    text-decoration: underline;
}

/* ==========================================================================
   Navbar
   ========================================================================== */

.vp-navbar {
    background: var(--vp-primary);
    box-shadow: var(--vp-shadow-sm);
}

.vp-navbar .navbar-brand,
.vp-navbar .nav-link {
    color: rgba(255, 255, 255, .88);
}

.vp-navbar .nav-link:hover,
.vp-navbar .nav-link:focus,
.vp-navbar .nav-link.active {
    color: #fff;
}

.vp-navbar .navbar-brand {
    font-weight: 600;
}

.vp-navbar-logo {
    max-height: 28px;
    width: auto;
}

.vp-navbar .navbar-toggler {
    border-color: rgba(255, 255, 255, .3);
}

/* Bootstrap's toggler icon is a background SVG in a fixed dark colour; on the
   navy navbar it is invisible. Inlined here in white. */
.vp-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.vp-tenant-switch {
    text-align: left;
}

.vp-tenant-label {
    display: block;
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .7;
    line-height: 1.2;
}

/* ==========================================================================
   Auth pages
   ========================================================================== */

.vp-auth-body {
    background: linear-gradient(160deg, var(--vp-primary) 0%, #0F2E42 100%);
}

.vp-auth-main {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.vp-auth-card {
    width: 100%;
    max-width: 26rem;
}

.vp-auth-brand {
    text-align: center;
    margin-bottom: 1.5rem;
}

.vp-auth-logo {
    max-height: 48px;
    max-width: 100%;
}

.vp-auth-wordmark {
    color: #fff;
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -.01em;
}

.vp-auth-card .card {
    border: none;
    border-radius: var(--vp-radius);
    box-shadow: var(--vp-shadow);
}

.vp-auth-footer {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: center;
}

.vp-auth-footer a {
    color: rgba(255, 255, 255, .75);
    font-size: .8125rem;
    text-decoration: none;
}

.vp-auth-footer a:hover {
    color: #fff;
    text-decoration: underline;
}

.vp-auth-footer .vp-language-select {
    width: auto;
    background-color: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .2);
    color: #fff;
}

/* The dropdown list renders in the OS palette, so its options need readable
   colours rather than the white-on-transparent used for the closed control. */
.vp-auth-footer .vp-language-select option {
    color: var(--vp-text);
    background: #fff;
}

.vp-muted-link {
    color: var(--vp-muted);
    font-size: .875rem;
    text-decoration: none;
}

.vp-muted-link:hover {
    color: var(--vp-primary);
    text-decoration: underline;
}

.vp-auth-card .vp-muted-link {
    color: rgba(255, 255, 255, .75);
}

.vp-auth-card .vp-muted-link:hover {
    color: #fff;
}

/* ==========================================================================
   MFA
   ========================================================================== */

.vp-qr {
    border: 1px solid var(--vp-border);
    border-radius: var(--vp-radius);
    padding: .5rem;
    background: #fff;
    max-width: 220px;
}

.vp-secret {
    display: inline-block;
    padding: .5rem .75rem;
    background: #F0F3F6;
    border-radius: .25rem;
    font-size: .9375rem;
    letter-spacing: .08em;
    word-break: break-all;
}

.vp-steps {
    padding-left: 1.25rem;
    color: var(--vp-muted);
}

.vp-steps li {
    margin-bottom: .5rem;
}

.vp-recovery-codes {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: .5rem;
}

.vp-recovery-codes code {
    display: block;
    padding: .5rem;
    background: #F0F3F6;
    border-radius: .25rem;
    text-align: center;
    font-size: 1rem;
    letter-spacing: .06em;
    color: var(--vp-text);
}

/* ==========================================================================
   Tenant selector
   ========================================================================== */

.vp-tenant-list {
    border-radius: var(--vp-radius);
    overflow: hidden;
}

.vp-tenant-button {
    display: block;
    width: 100%;
    padding: 1rem;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.vp-tenant-button:hover,
.vp-tenant-button:focus-visible {
    background: rgba(95, 168, 211, .1);
}

.vp-tenant-name {
    display: block;
    font-weight: 600;
    color: var(--vp-text);
}

.vp-tenant-meta {
    display: block;
    font-size: .8125rem;
    color: var(--vp-muted);
}

.vp-tenant-host {
    display: block;
    font-size: .75rem;
    color: var(--vp-muted);
    opacity: .8;
    margin-top: .125rem;
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

/* Bootstrap's default focus ring is its own blue, which disappears against a
   tenant that has chosen a blue primary. Keyed to the tenant's accent instead,
   and never removed — an invisible focus ring makes the whole app
   unusable by keyboard. */
:focus-visible {
    outline: 3px solid var(--vp-accent);
    outline-offset: 2px;
}

.btn:focus-visible,
.form-control:focus,
.form-select:focus {
    box-shadow: 0 0 0 .25rem rgba(98, 182, 203, .35);
    border-color: var(--vp-accent);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   Print — recovery codes are the page people actually print
   ========================================================================== */

@media print {
    .vp-navbar,
    .vp-footer,
    .btn,
    .alert-dismissible .btn-close {
        display: none !important;
    }

    body {
        background: #fff;
    }

    .card {
        border: 1px solid #ccc !important;
        box-shadow: none !important;
    }
}