/* /Layout/MainLayout.razor.rz.scp.css */
.brand-logo[b-naacpbf7tv] {
    height: 38px;
    width: auto;
    flex-shrink: 0;
}

.profile-avatar[b-naacpbf7tv] {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--rz-primary);
    color: var(--rz-on-primary, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    flex-shrink: 0;
}
/* /Pages/Login.razor.rz.scp.css */
.login-page[b-1oyuaeiuqq] {
    /* The login page always uses this dark palette regardless of the app's light/dark
       toggle — these are plain CSS custom properties, so they cascade through the DOM to
       every Radzen component nested inside (RadzenCard, RadzenTextBox, ...) without needing
       ::deep selectors for each one. */
    --rz-base-background-color: #131318;
    --rz-text-color: #e5e5ea;
    --rz-text-title-color: #ffffff;
    --rz-text-secondary-color: #9ca3af;
    --rz-border-base-300: 1px solid rgba(255, 255, 255, 0.14);
    /* The empty-state floating label (where "Nama Pengguna"/"Kata Sandi" sit like a
       placeholder) actually reads its color from --rz-input-placeholder-color, not
       --rz-form-field-label-color — that one's only used once focused/filled, which is why
       overriding just the label-color var didn't visibly change anything. */
    --rz-form-field-label-color: #ffffff;
    --rz-input-placeholder-color: var(--rz-primary, #10b981);

    position: relative;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #0a0a0f url('images/high_tech_modern_mining_operations_center_at_twilight_autonomous_haul_trucks.png') center / cover no-repeat;
}

.login-page[b-1oyuaeiuqq]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(9, 9, 14, 0.72);
    pointer-events: none;
}

.login-page[b-1oyuaeiuqq]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(9, 9, 14, 0.96) 0%, rgba(9, 9, 14, 0.35) 45%, transparent 100%);
    pointer-events: none;
}

.login-glow[b-1oyuaeiuqq] {
    position: absolute;
    z-index: 1;
    bottom: -14rem;
    left: 50%;
    transform: translateX(-50%);
    width: 140vw;
    height: 34rem;
    border-radius: 50%;
    background: radial-gradient(circle, oklch(69.6% .17 162.48 / 55%) 0%, rgba(6, 182, 212, 0.28) 45%, transparent 75%);
    filter: blur(100px);
    pointer-events: none;
}

.login-header[b-1oyuaeiuqq] {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem 2rem;
}

.login-header-logo[b-1oyuaeiuqq] {
    height: 2rem;
    width: 2rem;
    object-fit: contain;
    border-radius: 0.5rem;
}

.login-header-brand[b-1oyuaeiuqq] {
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #ffffff;
    font-size: 1rem;
}

.login-content[b-1oyuaeiuqq] {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.5rem 2rem;
}

/* RadzenCard's rendered root <div> never receives this file's scope attribute (that only
   happens for elements literally written in Login.razor's own markup, and RadzenCard's root
   is rendered by RadzenCard's own component code) — so a plain `.login-card { }` rule silently
   never matched anything at all (width/padding/border/backdrop-filter/radius were *all*
   actually coming from Radzen's own default card theme this whole time, not from here).
   Scoping through the literal ancestor .login-content with ::deep is what makes this rule
   actually reach the card. */
.login-content[b-1oyuaeiuqq]  .login-card {
    width: 100%;
    max-width: 420px;
    padding: 2.5rem;
    background: rgba(19, 19, 24, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    border-radius: 1rem;
}

.login-page[b-1oyuaeiuqq]  .login-form-fields {
    padding: 0.75rem;
}

/* Radzen adds a "valid" class to an input once it passes validation, which carries its own
   green outline — separate from the field wrapper's border, which already turns green only
   while actually focused. That outline stays after the field is blurred, so it needs its own
   override to not linger once a value has been entered. */
.login-page[b-1oyuaeiuqq]  input.valid {
    outline: none;
}

/* Browsers force a white/yellow background + black text on autofilled inputs, overriding
   any normal background/color styling — this is the standard workaround: paint over it with
   an inset box-shadow the size of the field, and push the background-color transition out far
   enough that it never visibly kicks in. */
.login-page[b-1oyuaeiuqq]  input:-webkit-autofill,
.login-page[b-1oyuaeiuqq]  input:-webkit-autofill:hover,
.login-page[b-1oyuaeiuqq]  input:-webkit-autofill:focus,
.login-page[b-1oyuaeiuqq]  input:-webkit-autofill:active {
    -webkit-text-fill-color: #e5e5ea;
    -webkit-box-shadow: 0 0 0 1000px #131318 inset;
    box-shadow: 0 0 0 1000px #131318 inset;
    caret-color: #e5e5ea;
    border: none;
    outline: none;
    transition: background-color 5000s ease-in-out 0s;
}

.login-icon-badge[b-1oyuaeiuqq] {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.75rem;
    padding: 0.5rem;
}

.login-logo[b-1oyuaeiuqq] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.login-heading[b-1oyuaeiuqq] {
    text-align: center;
}

.login-title[b-1oyuaeiuqq] {
    font-weight: 700;
    font-size: 1.35rem;
    color: #ffffff;
}

.login-subtitle[b-1oyuaeiuqq] {
    margin-top: 0.35rem;
    font-size: 0.85rem;
    color: #9ca3af;
}

.login-page[b-1oyuaeiuqq]  .login-field-icon {
    color: var(--rz-primary, #10b981);
}

/* Radzen's own .rz-form-field-label rule doesn't resolve through either of the CSS custom
   properties above in the empty/unfocused ("placeholder") state — it falls back to Radzen's
   hardcoded default text color — so it needs a direct, scoped override instead. Scoped under
   .login-page (rather than a bare ::deep) so this doesn't leak green labels onto every other
   RadzenFormField in the app. */
.login-page[b-1oyuaeiuqq]  .rz-form-field-label {
    color: var(--rz-primary, #10b981) !important;
}

.login-page[b-1oyuaeiuqq]  .login-submit-button {
    text-transform: none;
}

.login-submit-content[b-1oyuaeiuqq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.login-submit-icon[b-1oyuaeiuqq] {
    width: 1rem;
    height: 1rem;
}

.login-footer[b-1oyuaeiuqq] {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 1rem 1.25rem;
    font-size: 0.75rem;
    color: #9ca3af;
}