{
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}

html {
    scroll-padding-top: 6rem; /* 96px for the sticky header */
}

[id^="controller-content-section-"] {
    scroll-margin-top: 6rem;
}

.prose a.external-link-style,
.dark .prose-invert a.external-link-style {
    color: #10b981; /* Tailwind green-500 */
}

    .prose a.external-link-style:hover,
    .dark .prose-invert a.external-link-style:hover {
        color: #059669; /* Tailwind green-600 */
    }
.btn-retr {
    /* variables */
    --bs-btn-color: #fff;
    --bs-btn-bg: #088f8f;
    --bs-btn-border-color: #088f8f;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #077979;
    --bs-btn-hover-border-color: #077979;
    --bs-btn-focus-shadow-rgb: 64, 229, 184;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #077979;
    --bs-btn-active-border-color: #17a881;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(16, 25, 36, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #088f8f;
    --bs-btn-disabled-border-color: #088f8f;
    /* consume variables - reduced height: smaller padding + slightly smaller font */
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border: 1px solid var(--bs-btn-border-color);
    font-weight: 800;
    font-size: 1rem; /* reduced from 1.125rem */
    padding: 0.5rem 1rem; /* reduced vertical padding to decrease height */
    border-radius: 9999px;
    box-shadow: 0 8px 18px rgba(6, 95, 70, 0.18); /* slightly reduced shadow */
    display: block;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
    pointer-events: auto;
    z-index: 9999;
    text-align: center;
    line-height: 1; /* ensure compact height */
    transition: background-color .12s ease, transform .12s ease, box-shadow .12s ease;
}

    .btn-retr:hover {
        color: var(--bs-btn-hover-color);
        background-color: var(--bs-btn-hover-bg);
        border-color: var(--bs-btn-hover-border-color);
        transform: translateY(-1px);
    }

    .btn-retr:focus {
        outline: none;
        box-shadow: 0 0 0 .25rem rgba(var(--bs-btn-focus-shadow-rgb), .25);
    }

    .btn-retr:active {
        color: var(--bs-btn-active-color);
        background-color: var(--bs-btn-active-bg);
        border-color: var(--bs-btn-active-border-color);
        box-shadow: var(--bs-btn-active-shadow);
    }

    .btn-retr:disabled,
    .btn-retr.disabled {
        color: var(--bs-btn-disabled-color);
        background-color: var(--bs-btn-disabled-bg);
        border-color: var(--bs-btn-disabled-border-color);
        opacity: 0.65;
        cursor: not-allowed;
        pointer-events: none;
    }

/* Reduce height of social auth buttons inside the login component without changing markup */
.login-card a[href^="/sso/"] {
    padding: 0.5rem 1rem; /* smaller vertical padding */
    line-height: 1;
    min-height: 40px; /* ensure clickable area remains usable */
    box-shadow: 0 6px 12px rgba(0,0,0,0.04);
}

    .login-card a[href^="/sso/"] img {
        height: 20px;
        width: 20px;
    }


.mobile-flyout-menu {
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
}

    .mobile-flyout-menu.open {
        transform: translateX(0);
    }

.mobile-flyout-backdrop {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s;
}

    .mobile-flyout-backdrop.open {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.3s ease-in-out, visibility 0s linear 0s;
    }

.modal-backdrop {
    background: rgba(0,0,0,0.5);
}

.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
}


.bs-form {
    font-family: inherit;
    color: inherit;
}


.bs-form .form-group {
    margin-bottom: 1rem; /* match Bootstrap .mb-3 (16px) */
}


.bs-form .form-label {
    display: block;
    margin-bottom: .5rem; /* bootstrap label spacing */
    margin-bottom: .5rem; /* bootstrap label spacing */
    font-size: .875rem;
    font-weight: 500; /* slightly less heavy than 600 to match bootstrap feel */
    color: #0f172a;
    line-height: 1.25;
}

.dark .bs-form .form-label {
    color: #e6eef0;
}

.bs-form .form-control {
    display: block;
    width: 100%;
    padding: .5rem .75rem;
    font-size: 1rem;
    line-height: 1.25;
    color: #0f172a;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #d1d5db;
    border-radius: .375rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.dark .bs-form .form-control {
    color: #e6eef0;
    background-color: #0f1724;
    border-color: #374151;
}

.bs-form .form-control:focus {
    outline: none;
    border-color: #10b981;
    box-shadow: 0 0 0 .125rem rgba(16,185,129,.12);
}

.bs-form .form-text {
    display: block;
    margin-top: .25rem;
    font-size: .875rem;
    color: #6b7280;
}

.dark .bs-form .form-text {
    color: #9ca3af;
}

.bs-form .form-row,
.bs-form .form-check {
    margin-bottom: .75rem;
}

.bs-form .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .5rem .75rem;
    font-size: .9375rem;
    font-weight: 600;
    border-radius: .375rem;
    border: 1px solid transparent;
    cursor: pointer;
}

    .bs-form .btn:focus {
        outline: none;
        box-shadow: 0 0 0 .125rem rgba(16,185,129,.12);
    }

.bs-form .btn-primary {
    color: var(--bs-btn-color, #fff);
    background-color: var(--bs-btn-bg, #088f8f);
    border-color: var(--bs-btn-border-color, #088f8f);
    box-shadow: 0 8px 18px rgba(6,95,70,0.16);
}

    .bs-form .btn-primary:hover {
        background-color: var(--bs-btn-hover-bg, #077979);
        border-color: var(--bs-btn-hover-border-color, #077979);
    }

.bs-form .btn-outline {
    background: transparent;
    border-color: #e5e7eb;
    color: #111827;
}

.dark .bs-form .btn-outline {
    border-color: #374151;
    color: #e6eef0;
}

.bs-form .btn-social {
    border-radius: 9999px;
    padding: .4rem .75rem;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.bs-form a.btn, .bs-form button.btn {
    text-decoration: none;
}

.bs-form .btn-block {
    display: block;
    width: 66%;
    margin-left: auto;
    margin-right: auto;
}

.bs-form .social-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
}

/* Link styling: make all anchors inside form look clickable */
.bs-form a {
    color: #0ea5a4;
    text-decoration: underline;
    cursor: pointer;
}

    .bs-form a:hover {
        color: #059669;
        text-decoration: underline;
    }

    .bs-form a:focus {
        outline: none;
        box-shadow: 0 0 0 .125rem rgba(16,185,129,.12);
    }

/* Password form specific styles (professional, Bootstrap-like) */
#login-with-password {
    background: transparent;
    padding: .5rem; /* reduced padding so the panel appears higher */
    border-radius: .5rem;
    margin-top: 0; /* tighten the top so header sits at same vertical level as Email label */
}

    #login-with-password .password-card {
        background: rgba(255,255,255,0.02);
        padding-top: 0;
        padding-bottom: .5rem;
        border-radius: .5rem;
    }

.password-note {
    font-size: .9rem;
    color: #6b7280;
    text-align: center;
    margin-bottom: .5rem; /* reduced */
}

.dark .password-note {
    color: #9ca3af;
}

/* label row: place label on left and forgot link on right, aligned with the label baseline */
.bs-form .label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .5rem; /* ensure Bootstrap-like spacing between label row and the control below */
}

    .bs-form .label-row .form-label {
        margin-bottom: 0; /* label-row provides spacing so label itself stays inline */
    }

.bs-form .forgot-link {
    font-size: .875rem;
    color: #0ea5a4;
    margin-left: 1rem;
    text-decoration: underline;
}

    .bs-form .forgot-link:hover {
        color: #059669;
    }

#login-with-password .form-check {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .9rem;
    color: #374151;
}

.dark #login-with-password .form-check {
    color: #d1d5db;
}

#login-with-password .form-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

/* full width, slightly rounded primary action for password form */
#login-with-password .btn-primary.btn-full {
    width: 100%;
    border-radius: .5rem;
    padding: .5rem .75rem;
    font-size: 1rem;
}

/* compact input text style for readonly username */
#UserNameReadonly.form-control {
    background-color: #f8fafc;
    border-color: #e6edf0;
}

.dark #UserNameReadonly.form-control {
    background-color: #07151a;
    border-color: #223033;
}

/* validation / error styling */
.field-error {
    color: #b91c1c;
    font-size: .875rem;
    margin-top: .25rem;
}

/*
                          FORCE password panel hidden by CSS by default -- JS will show it explicitly.
                        */
#login-with-password[data-password-hidden="true"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

#login-with-password.show-password {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
}

#formCheckEmail[data-hidden="true"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.alert {
    padding: .75rem 1rem;
    border-radius: .375rem;
    border: 1px solid transparent;
    font-weight: 600;
    /* do not set display here — allow the 'hidden' utility to control visibility */
}

.alert-danger {
    background-color: #fff1f2; /* light red background */
    color: #991b1b; /* strong red text */
    border-color: #fca5a5; /* light red border */
    box-shadow: 0 6px 18px rgba(153,27,27,0.08);
}

#errorMessage.hidden {
    display: none !important;
}

#errorMessage:not(.hidden) {
    display: block;
}

/* added social-row positioning and spacing */
.bs-form .social-row {
    display: flex;
    gap: .75rem; /* spacing between buttons */
    margin-top: 2rem; /* increased top margin (doubled from 1rem) */
    flex-wrap: wrap; /* allow stacking on small screens */
    align-items: center;
    width: 100%;
}

/* push Microsoft to the left and Google to the right */
.bs-form .social-left {
    margin-right: auto;
}

.bs-form .social-right {
    margin-left: auto;
}

/* Small overrides to tighten password panel top spacing and increase vertical rhythm
                   between checkbox, login button and the "Not ... Sign in with a different account" line.
                   Place this near the end of the existing <style> block so it overrides earlier rules. */
#login-with-password {
    margin-top: .25rem; /* reduce large gap above the password panel */
}

    #login-with-password .password-card {
        padding-top: .5rem;
        padding-bottom: .6rem;
    }

    #login-with-password .password-note {
        margin-top: .25rem; /* less space above the note */
        margin-bottom: .5rem;
    }

    /* increase spacing between checkbox row and the Login button */
    #login-with-password .form-row {
        margin-bottom: 1.25rem; /* ~20px */
    }

    /* ensure form groups in the password panel match Bootstrap spacing */
    #login-with-password .form-group {
        margin-bottom: 1rem; /* ~16px */
    }

    /* increase gap between Login button and the "Not ... Sign in with a different account" line */
    #login-with-password .mt20 {
        margin-top: 1.25rem !important;
    }

/* Reset heading defaults inside the password panel and match label rhythm */
#login-with-password {
    margin-top: 0; /* ensure container isn't pushed down */
}

    #login-with-password .password-card {
        padding-top: 0; /* remove extra card top padding */
    }

        /* h4 has default top margin — remove it and make the note match .form-label */
        #login-with-password .password-note,
        #login-with-password h4.password-note,
        #login-with-password .password-card h4 {
            margin: 0 0 0.5rem 0; /* no top margin, bottom = .5rem like .form-label */
            font-size: .875rem; /* match .form-label */
            font-weight: 500; /* match .form-label */
            line-height: 1.25; /* match .form-label */
            color: #6b7280;
            text-align: left; /* align like labels */
            display: block;
        }

.chev {
    transition: transform 150ms ease;
    display: inline-block;
    margin-top:5px;
}

.user-open .chev {
    transform: rotate(180deg);
}

#UserNameForPassword[disabled],
input.form-control[disabled] {
    background-color: #f1f5f9; /* Tailwind bg-zinc-100 */
    color: #6b7280; /* Tailwind text-zinc-500 */
    border-color: #e6edf0; /* Tailwind border-zinc-200 */
    cursor: not-allowed;
    opacity: 0.95;
}


#header-bg {
    background-color: transparent;
    transition: background-color 180ms ease, box-shadow 180ms ease, border-bottom-color 180ms ease;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    /* Force its own stacking context and hardware-accelerate rendering */
    transform: translateZ(0);
    will-change: transform, background-color;
    z-index: 99999999; /* very high so nothing can sit above it */
    position: fixed; /* defensive: ensure fixed positioning */
    top: 0;
    left: 0;
    right: 0;
}

    #header-bg.header-scrolled {
        background-color: #ffffff;
        box-shadow: 0 1px 6px rgba(2,6,23,0.06);
        border-bottom: 1px solid rgba(15,23,42,0.04);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
    }

/* dark mode scrolled */
html.dark #header-bg.header-scrolled,
.dark #header-bg.header-scrolled {
    background-color: #0f1724;
    box-shadow: 0 1px 6px rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

/* background layer for header: transparent by default, becomes solid only over content area on scroll */
#header-bg .bg-layer {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: transparent;
    transition: background-color 180ms ease, box-shadow 180ms ease, border-bottom-color 180ms ease;
    z-index: 0; /* sits under header content (which is z-10) but above page content */
}

/* When header gets scrolled class make the layer solid (light/dark variants) */
#header-bg.header-scrolled .bg-layer {
    background-color: #ffffff;
    box-shadow: 0 1px 6px rgba(2,6,23,0.06);
    border-bottom: 1px solid rgba(15,23,42,0.04);
}

/* dark mode */
html.dark #header-bg.header-scrolled .bg-layer,
.dark #header-bg.header-scrolled .bg-layer {
    background-color: #0f1724;
    box-shadow: 0 1px 6px rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

/* On large screens constrain the layer to the main content area (leave left sidebar/logo uncovered) */
@media (min-width: 1024px) {
    /* lg: leave 18rem (72) left offset so sidebar/logo remain visible */
    #header-bg .bg-layer {
        left: 18rem; /* matches lg:left-72 used in header markup */
    }
}

/* On extra-large keep in sync with xl:left-80 */
@media (min-width: 1280px) {
    #header-bg .bg-layer {
        left: 20rem; /* matches xl:left-80 (80 -> 20rem) */
    }
}

/* Ensure left-side header (logo/title) always sits above the top bar background */
.left-header {
    position: relative; /* create stacking context */
    z-index: 100000000; /* higher than #header-bg (99999999) */
    pointer-events: auto;
}

/* Ensure any alert inside the content-inner fills the content area */
#content-inner [role="alert"] {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
}
    /* Ensure the immediate inner alert container also spans full width */
    #content-inner [role="alert"] > div {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box;
    }

/* Explicit, solid backgrounds for the submission/errors panel so it is never transparent */
#submission-errors {
    background-color: #FEE2E2;
    border: 1px solid rgba(127,29,29,0.08);
    color: #7f1d1d;
}

@media (prefers-color-scheme: dark) {
    #submission-errors {
        background-color: rgba(220,53,69,0.12);
        border: 1px solid rgba(139,27,35,0.12);
    }
}

/* Small helper to ensure logo images sit centered inside their flex container */
.logo-img-self-center {
    align-self: center;
}

/*
         Mobile flyout behavior & header fixes
         1) mobile header background: make bg-layer opaque on small screens so content doesn't show through
         2) mobile flyout menu hidden by default (translateX) and shown when .open exists
         3) backdrop visibility controlled by .open
         4) ensure login modal backdrop sits above header/sidebar
        */

/* header background stronger on mobile to avoid showing content through */
@media (max-width: 1023px) {
    #header-bg .bg-layer {
        background-color: rgba(255,255,255,0.96) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    html.dark #header-bg .bg-layer,
    .dark #header-bg .bg-layer {
        background-color: rgba(6,10,15,0.96) !important;
    }
}

/* mobile flyout: start hidden (translated left) and reveal when .open class is added */
.mobile-flyout-menu {
    transform: translateX(-100%);
    transition: transform 280ms cubic-bezier(.2,.9,.2,1);
    will-change: transform;
    /* ensure offscreen doesn't block clicks */
    pointer-events: none;
}

    .mobile-flyout-menu.open {
        transform: translateX(0);
        pointer-events: auto;
    }

.mobile-flyout-backdrop {
    opacity: 0;
    visibility: hidden;
    transition: opacity 180ms ease, visibility 180ms ease;
    pointer-events: none;
}

    .mobile-flyout-backdrop.open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

/* ensure backdrop and menu appear above other UI (but below login modal which we set higher) */
.mobile-flyout-menu {
    z-index: 60;
}

.mobile-flyout-backdrop {
    z-index: 55;
}

/* ensure login modal backdrop is above header/sidebar (header uses very large inline z-index) */
#loginModalBackdrop {
    z-index: 100000000 !important;
    background-color: rgba(2,6,23,0.6);
}

#loginModal {
    z-index: 100000001 !important;
}

/* Remove the vertical divider (lg:border-r) in the header area so the top header shows without the sidebar's right border */
header .lg\:border-r {
    border-right: 0 !important;
    /* remove subtle border color rules coming from dark variant */
    box-shadow: none !important;
}

/* Also ensure the header's left content area does not draw a left border (safety) */
header #header-bg,
header .bg-layer {
    border-left: 0 !important;
}

/* Hide the vertical divider that belongs to the sidebar when the header sits above content.
       Use a broad attribute selector so we don't have to replicate Tailwind's escaped class name. */
header [class*="lg:border-r"] {
    border-right: 0 !important;
    box-shadow: none !important;
}

/* Also ensure the header background layer fully covers the top so the sidebar border doesn't show through while scrolling */
#header-bg .bg-layer {
    left: 0 !important;
    right: 0 !important;
}

.sso-label {
    font-size: 14px !important;
    line-height: 1;
}

@media (max-width: 1023px) {
    .sso-label {
        font-size: 11px !important;
    }
}

.hide-on-mobile {
    display: block !important;
}

@media (max-width: 1023px) {
    .hide-on-mobile {
        display: none !important;
    }
}

/* Stack & center social buttons on mobile; keep desktop unchanged */
.social-stack {
    /* desktop: maintain existing spacing */
    display: block;
}

/* Mobile: column layout, centered */
@media (max-width: 1023px) {
    .social-stack {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.75rem; /* space between buttons */
        margin-left: 0;
        margin-right: 0;
    }

        /* make buttons narrower than full width but large enough to tap */
        .social-stack .btn {
            width: 86%;
            max-width: 420px;
        }

            /* center the inline content inside the button */
            .social-stack .btn .microsoft-text {
                display: inline-block;
                text-align: center;
                width: calc(100% - 44px); /* leave room for the icon */
            }

            .social-stack .btn .microsoft-logo img {
                width: 20px;
                height: 20px;
            }
}

/* FORCE: stack & center social SSO buttons on mobile
   Placed at end of site.css so it overrides other rules.
*/
@media (max-width: 1023px) {
  /* Make the social-row a vertical column and center its items */
  .bs-form .social-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.75rem !important;
    width: 100% !important;
    margin-top: 1rem !important;
  }

  /* Ensure each immediate child centers its content */
  .bs-form .social-row > div {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  /* Force buttons to a comfortable tap width and center them */
  .bs-form .social-row a.btn,
  .bs-form .social-row .btn,
  .bs-form .social-row a.btn-microsoft {
    width: 86% !important;
    max-width: 420px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Prevent left/right auto margins from pushing them to edges */
  .bs-form .social-left,
  .bs-form .social-right {
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
  }

  /* Slightly reduce icon size to match compact mobile button */
  .bs-form .social-row .microsoft-logo img,
  .bs-form .social-row .microsoft-logo,
  .bs-form .social-row .social-icon {
    width: 18px !important;
    height: 18px !important;
    margin-right: 10px !important;
    display: inline-block !important;
  }

  /* Center text inside the button */
  .bs-form .social-row .microsoft-text {
    text-align: center !important;
  }
}