:root {
  --selection-bg: #dbdbdb;
  --selection-moz-bg: #dbdbdb;
  --bg-gradient: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  --left-bg: rgba(255, 255, 255, 0.85); /* Glassmorphism */
  --left-shadow: rgba(0,0,0,0.05); /* Softer shadow */
  --right-bg: #2b3035; /* Darker accent */
  --right-shadow: rgba(0,0,0,0.1);
  --right-text: #F1F1F2;
  --label-color: #5a6474;
  --input-text: #2c3e50;
  --submit-color: #707075;
  --submit-focus: #575757;
  --submit-active: #4d4d4d;
  --primary-color: #2363c3;
}

::selection { background: var(--selection-bg); }
::-webkit-selection { background: var(--selection-bg); }
::-moz-selection { background: var(--selection-moz-bg); }

/* REMOVED body styles that break titlebar layout (display: flex, center, etc) */
/* Instead, we style the page container to center content inside the main content area */
.page {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  min-height: 100vh; /* Full screen height now that titlebar is hidden */
  position: relative;
}

/* Gradient background applied to body via style.css or separate logic, 
   but since this login.css is likely scoped or loaded on login page, 
   we can set background on .page or keep it on body if safe. 
   To be safe and avoid breaking layout, we set background on body 
   but NOT layout properties. */
body {
    background: var(--bg-gradient);
    /* No display:flex here to avoid squishing the titlebar */
}

.container {
  height: 480px; /* Increased height */
  margin: 0 auto;
  width: 800px; /* Increased width */
  display: flex;
  background: transparent;
  align-items: center;
  justify-content: center;
  position: relative;
}

@media (max-width: 767px) {
  .container {
    flex-direction: column;
    height: auto;
    width: 90%;
  }
}

.left {
  background: var(--left-bg);
  height: 380px;
  position: absolute;
  left: 50px; /* Overlap effect */
  width: 400px;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 767px) {
  .left {
    position: relative;
    width: 100%;
    left: 0;
    margin-bottom: 20px;
    height: auto;
    padding: 40px 0;
  }
}

.right {
  position: absolute;
  right: 0;
  top: 0;
  width: 400px; /* Fixed width for stability */
  height: 100%;
  background: var(--right-bg);
  box-shadow: 0 8px 32px 0 var(--right-shadow);
  color: var(--right-text);
  border-radius: 20px;
  z-index: 1; /* Behind left card */
  display: flex; /* Ensure content centering */
  align-items: center;
  justify-content: center;
}

/* Desktop language toggle — fixed to viewport so no stacking context can bury it */
.desktop-lang-toggle {
    position: fixed;
    top: 1.1rem;
    inset-inline-end: 1.25rem; /* logical: right in LTR, left in RTL */
    right: 1.25rem;            /* physical fallback for older browsers */
    left: auto;
    z-index: 1100;             /* above any panel stacking context */
}

/* Readable on any login background */
.ms-login-lang-toggle {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.ms-login-lang-toggle .lang-option {
    color: rgba(255, 255, 255, 0.8);
}

.ms-login-lang-toggle .lang-option:hover {
    color: #fff;
    opacity: 1;
}

.ms-login-lang-toggle .lang-option.active {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

@media (max-width: 767px) {
  .right {
    position: relative;
    width: 100%;
    right: 0;
    height: 250px;
  }
}

.form {
  margin: 40px;
  /* text-align: right; REMOVED to allow inheritance from body/html dir attribute */
  width: calc(100% - 80px);
}

label {
  color: var(--label-color);
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-top: 20px;
  margin-bottom: 8px;
}

input {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid #e1e8ed;
  border-radius: 8px;
  color: var(--input-text);
  font-size: 16px;
  height: 45px;
  line-height: 45px;
  outline: none !important;
  width: 100%;
  padding: 0 15px; /* Add padding */
  margin-top: 5px; /* Reduced top margin since we use padding */
  margin-bottom: 15px;
  transition: all 0.3s ease;
}

/* Fix LTR alignment when in English */
html[dir="ltr"] .form,
html[dir="ltr"] .form div,
html[dir="ltr"] .form input,
html[dir="ltr"] .form label {
    text-align: left !important;
    direction: ltr !important;
}

input:focus {
  border-color: var(--primary-color);
  background: white;
  box-shadow: 0 0 0 3px rgba(35, 99, 195, 0.1);
}

input::-moz-focus-inner { border: 0; }

#submit {
  color: white;
  margin-top: 30px;
  transition: all 0.3s;
  background-color: var(--submit-color);
  border: none;
  cursor: pointer;
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

#submit:hover { 
  background-color: var(--submit-focus); 
  transform: translateY(-2px);
}

#submit:active { transform: translateY(0); }

/* New Utility Classes for specific elements */
.login-input { 
  font-size: 18px !important; 
}
.login-submit { 
  font-size: 18px !important; 
}

.login-register-action {
  display: flex;
  justify-content: center;
}

.login-register-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.45rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  color: var(--primal_dark, var(--primary-color));
  background: rgba(var(--primal-rgb, 35, 99, 195), 0.09);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.92rem;
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.login-register-link:hover,
.login-register-link:focus-visible {
  color: var(--primal_dark, var(--primary-color));
  background: rgba(var(--primal-rgb, 35, 99, 195), 0.15);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
  outline: none;
}
/* Adaptive Frosted Plate
   A premium near-white frosted card. It gives the logo a clean, consistent
   light surface in every context: it pops with depth on dark banners/themes,
   and reads as a subtle raised card on light surfaces. This is what lets a
   single (often dark or multi-colour) logo asset look good on any theme. */
.logo-frame {
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.97) 0%, rgba(244, 247, 251, 0.9) 100%);
    backdrop-filter: blur(18px) saturate(118%);
    -webkit-backdrop-filter: blur(18px) saturate(118%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 22px;
    padding: 22px 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 rgba(15, 23, 42, 0.05),
        0 18px 40px -16px rgba(15, 23, 42, 0.45),
        0 4px 12px -6px rgba(15, 23, 42, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.logo-frame:hover {
    transform: translateY(-4px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 rgba(15, 23, 42, 0.05),
        0 26px 54px -18px rgba(15, 23, 42, 0.5),
        0 6px 16px -6px rgba(15, 23, 42, 0.24);
}

/* Logo sits on the clean light plate — keep it crisp, no washed-out shadow. */
.logo-img {
  width: 100%;
  max-width: 180px;
  opacity: 1;
  filter: none;
}

@media (max-width: 767px) {
  .logo-frame {
      /* Keeps the adaptive frosted plate from the base rule; just trims metrics. */
      padding: 15px;
      border-radius: 20px;
      margin-bottom: 20px;
  }
  
  .logo-img {
    /* Mask the image to color it with the theme color */
    -webkit-mask-image: url("/static/img/login_logo.webp");
    mask-image: url("/static/img/login_logo.webp");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    background-color: var(--primal, var(--primary-color));
    
    height: 80px; /* Explicit height for mask trick */
    width: 200px; /* Ensure width for mask */
    max-width: 100%;
    
    /* Hide the original image content so background color shows through mask */
    object-position: -99999px 0; 
  }
}

/* Language Toggle (Modern Pill Style) */
.lang-toggle-container {
    /* Removed fixed positioning to allow utility classes (relative/absolute) */
    z-index: 10;
    
    display: inline-flex; /* Changed from flex to inline-flex for better centering */
    background: rgba(0, 0, 0, 0.05);
    border-radius: 20px;
    padding: 3px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(5px);
    
    /* Prevent side-switching */
    direction: ltr !important; 
}

.lang-option {
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--label-color);
    text-decoration: none;
    border-radius: 16px;
    transition: all 0.3s ease;
    min-width: 40px;
    text-align: center;
    opacity: 0.7;
}

.lang-option:hover {
    color: var(--primary-color);
    opacity: 1;
}

.lang-option.active {
    background: var(--bg-card, #fff);
    color: var(--primary-color);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    opacity: 1;
    font-weight: 700;
}

.ms-page-alert-container {
    z-index: 2000;
}

/* Floating Error at top of page (Prevents card layout shifts) */
.ms-login-error-float {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    width: 100%;
}

.ms-login-error-float .alert {
    border-radius: 0 0 15px 15px;
    border: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    justify-content: center;
    padding: 1.25rem;
    backdrop-filter: blur(10px);
    background: rgba(220, 53, 69, 0.9);
    color: white;
}

.ms-login-error {
    display: none !important;
}

/* Field Error Styling */
.invalid-feedback {
    font-size: 0.8rem;
    color: #dc3545;
    margin-top: 0.25rem;
    font-weight: 500;
}

input.is-invalid {
    border-color: #dc3545 !important;
    background: rgba(220, 53, 69, 0.05) !important;
}

input.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1) !important;
}

/* Shake Animation */
@keyframes ms-shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.ms-shake {
    animation: ms-shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

/* Subtle input hover/focus improvements */
.login-input:hover:not(.is-invalid) {
    border-color: rgba(35, 99, 195, 0.3);
}

.login-2fa-panel {
    padding: 1rem 1rem 0.5rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(35, 99, 195, 0.08);
}

.login-2fa-actions {
    align-items: center;
}

.ms-twofa-inline-alert {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    margin-bottom: 1rem;
    padding: 0.8rem 0.95rem;
    text-align: center;
    word-break: break-word;
}

.ms-twofa-inline-alert i {
    flex: 0 0 auto;
}

.ms-twofa-trust-field {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.ms-twofa-trust-field .form-check-input {
    margin-top: 0;
    margin-inline-start: 0;
    flex: 0 0 auto;
}

.ms-twofa-trust-field .form-check-label {
    margin: 0;
    line-height: 1.45;
}

/* ─── Login Style: Centered ─────────────────────────────────────────────────
   Single card: logo badge above, form card below, all centred on the page.  */
.ms-login--centered {
    align-items: center;
    justify-content: center;
}

.ms-login--centered .container {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: min(460px, 94vw);
    height: auto;
    gap: 1.5rem;
}

.ms-login--centered .right {
    position: static;
    width: auto;
    height: auto;
    background: transparent !important;
    box-shadow: none;
    border-radius: 0;
    order: 1;
    padding: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.ms-login--centered .right .logo-frame {
    /* Inherits the adaptive frosted plate; just trim the padding/radius here. */
    padding: 1rem 1.5rem;
    border-radius: 16px;
}

.ms-login--centered .right .logo-img {
    max-width: 120px;
    height: auto;
    filter: none;
    mask-image: none;
    -webkit-mask-image: none;
    background-color: transparent;
    object-position: center;
}

.ms-login--centered .left {
    position: static;
    width: 100%;
    left: auto;
    height: auto;
    padding: 2.25rem 2rem;
    border-radius: 20px;
    order: 2;
}

/* .desktop-lang-toggle is now position:fixed globally — no per-layout override needed */

/* ─── Login Style: Minimal ───────────────────────────────────────────────────
   Floating card on a clean gradient — banner hidden entirely.               */
.ms-login--minimal {
    align-items: center;
    justify-content: center;
    padding: 0;
}

.ms-login--minimal .container {
    flex-direction: column;
    height: auto;
    width: min(420px, 92vw);
    background: transparent;
}

.ms-login--minimal .left {
    position: static;
    width: 100%;
    left: auto;
    height: auto;
    padding: 2.5rem 2rem;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.55) inset,
        0 12px 40px rgba(15, 23, 42, 0.12);
}

.ms-login--minimal .right {
    display: none !important;
}

/* .desktop-lang-toggle is now position:fixed globally — no per-layout override needed */

/* ─── Login Style: Full-Page Split ──────────────────────────────────────────
   True 50/50 split. Start = hero message. End = login form.                */
.ms-login--fullpage {
    align-items: stretch;
    justify-content: stretch;
    min-height: 100vh;
    padding: 0;
}

.ms-login--fullpage .container {
    flex-direction: row;
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    max-width: none;
    border-radius: 0;
    margin: 0;
    padding: 0;
    position: static;
}

.ms-login--fullpage .right {
    position: relative; /* anchor for the pinned hero logo */
    width: 50%;
    height: 100%;
    flex: 0 0 50%;
    border-radius: 0;
    order: 1;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 4rem 5vw;
    overflow-y: auto;
    /* Establish a single, consistent text colour for everything inside the hero panel.
       --bs-heading-color scopes Bootstrap's h1-h6 colour to match body text,
       preventing the theme's global heading colour from leaking in. */
    color: var(--right-text, #f1f1f2);
    --bs-heading-color: var(--right-text, #f1f1f2);
    --bs-link-color: var(--right-text, #f1f1f2);
}

.ms-login--fullpage .left {
    position: static;
    width: 50%;
    height: 100%;
    flex: 0 0 50%;
    left: auto;
    border-radius: 0;
    order: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 5vw;
    background: var(--left-bg);
    box-shadow: -4px 0 32px rgba(15, 23, 42, 0.06);
    overflow-y: auto;
}

.ms-login--fullpage .form {
    margin: 0;
    width: 100%;
    max-width: 380px;
}

/* .desktop-lang-toggle is now position:fixed globally — no per-layout override needed */

/* Hero message typography */
.ms-login-hero {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    /* Inherits color from .ms-login--fullpage .right — do not set it here */
}

/* Fullpage: the logo sits centered above the login form (in the .left panel). */
.ms-login--fullpage .ms-login-form-logo .logo-img {
    max-width: 140px;
}

.ms-login-hero__body {
    font-size: 1.05rem;
    line-height: 1.75;
    width: 100%;
}

.ms-login-hero__body h1,
.ms-login-hero__body h2,
.ms-login-hero__body h3 {
    font-weight: 700;
    margin-bottom: 0.6em;
    margin-top: 1.2em;
    line-height: 1.25;
    /* color resolves via --bs-heading-color scoped on the panel */
}

.ms-login-hero__body h1 { font-size: 2rem; }
.ms-login-hero__body h2 { font-size: 1.5rem; }
.ms-login-hero__body h3 { font-size: 1.2rem; }

.ms-login-hero__body p { margin-bottom: 0.9em; }

.ms-login-hero__body ul,
.ms-login-hero__body ol {
    padding-inline-start: 1.4em;
    margin-bottom: 0.9em;
}

.ms-login-hero__body li { margin-bottom: 0.3em; }

.ms-login-hero__body a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    opacity: 0.85;
}

.ms-login-hero__body a:hover { opacity: 1; }

.ms-login-hero__body strong { font-weight: 700; }
.ms-login-hero__body em { font-style: italic; }
.ms-login-hero__body s { opacity: 0.6; text-decoration: line-through; }
.ms-login-hero__body code {
    /* Override Bootstrap's default red/pink for <code> */
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: inherit;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 0.15em 0.4em;
    border-radius: 4px;
    font-size: 0.88em;
}

@media (max-width: 767px) {
    .ms-login--fullpage .container {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
    }

    .ms-login--fullpage .right,
    .ms-login--fullpage .left {
        width: 100%;
        flex: none;
        height: auto;
        min-height: 50vh;
    }

    .ms-login--fullpage .right {
        padding: 2.5rem 1.5rem;
        min-height: auto;
        order: 1;
    }

    .ms-login--fullpage .left {
        order: 2;
        padding: 2.5rem 1.5rem;
    }
}

/* ─── Login Logo Treatments ──────────────────────────────────────────────────
   Mirrors the titlebar logo treatment system for the login banner logo.     */

/* Plate — keeps the premium frosted base surface; shape variants drive the radius. */
.logo-frame[data-login-logo-treatment="plate"][data-login-logo-treatment-shape="soft"] {
    border-radius: 18px;
}

.logo-frame[data-login-logo-treatment="plate"][data-login-logo-treatment-shape="pill"] {
    border-radius: 999px;
    padding-inline: 1.2rem;
}

.logo-frame[data-login-logo-treatment="plate"][data-login-logo-treatment-shape="square"] {
    border-radius: 6px;
}

/* Halo — accent glow around the plate (the plate is opaque, so glow the frame). */
.logo-frame[data-login-logo-treatment="halo"] {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 0 0 1px rgba(var(--primal-rgb, 13, 110, 253), 0.25),
        0 0 1.4rem rgba(var(--primal-rgb, 13, 110, 253), 0.4),
        0 18px 40px -16px rgba(15, 23, 42, 0.45);
}

.logo-frame[data-login-logo-treatment="halo"]:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 0 0 1px rgba(var(--primal-rgb, 13, 110, 253), 0.3),
        0 0 1.9rem rgba(var(--primal-rgb, 13, 110, 253), 0.5),
        0 26px 54px -18px rgba(15, 23, 42, 0.5);
}

/* Contrast */
.logo-frame[data-login-logo-treatment="contrast"] .logo-img,
[data-login-logo-treatment="contrast"] .logo-img {
    filter:
        brightness(1.08)
        contrast(1.12)
        drop-shadow(0 1px 0 rgba(255, 255, 255, 0.7))
        drop-shadow(0 0.2rem 0.6rem rgba(15, 23, 42, 0.25));
}

/* Banner colour support (inline --login-banner-color set via template) */
.right[style*="--login-banner-color"] {
    background: var(--login-banner-color) !important;
}