/* Login-only visual controls. Keep these values easy to tune from one place. */
html body .lotus-login-scene {
    --login-bg-image: url("/img/login-hr-dashboard-bg.png?v=20260605l") !important;
    --login-bg-size: cover !important;
    --login-bg-position-x: center !important;
    --login-bg-position-y: 50% !important;
    --login-bg-scale: 1.02 !important;
    --login-bg-brightness: .96 !important;
    --login-bg-contrast: 1.08 !important;
    --login-bg-saturate: 1.16 !important;
    --login-bg-overlay: .10 !important;
    --login-bg-glow: .16 !important;
    --login-card-alpha-top: .20 !important;
    --login-card-alpha-bottom: .10 !important;
    --login-card-blur: 5px !important;
    --login-card-border: rgba(255, 255, 255, .82) !important;
    --login-logo-width: 286px !important;
    --login-logo-height: 172px !important;
    --login-title-size: 36px !important;
    --login-title-weight: 790 !important;
    --chart-layer-opacity: .92 !important;
    --chart-panel-blur: 0px !important;
    --chart-panel-border: rgba(181, 246, 255, .54) !important;
    --chart-panel-fill: rgba(13, 95, 121, .045) !important;
    --chart-line-color: rgba(214, 252, 255, .92) !important;
    --chart-primary: #39d6dc !important;
    --chart-secondary: #8fe2ff !important;
    --chart-coral: #f07f86 !important;
    --chart-left-x: 3vw !important;
    --chart-left-y: 5vh !important;
    --chart-text-color: rgba(228, 252, 255, .90) !important;
    --chart-left-width: min(30vw, 540px) !important;
    --chart-org-height: 31vh !important;
    --chart-bars-height: 28vh !important;
    --chart-right-x: 4vw !important;
    --chart-right-y: 5vh !important;
    --chart-right-width: min(31vw, 580px) !important;
    --chart-kpi-height: 24vh !important;
    --chart-heatmap-height: 28vh !important;
}

html body .lotus-login-scene::before {
    background-image: var(--login-bg-image) !important;
    background-size: var(--login-bg-size) !important;
    background-position: var(--login-bg-position-x) var(--login-bg-position-y) !important;
    transform: scale(var(--login-bg-scale)) !important;
    filter:
        brightness(var(--login-bg-brightness))
        contrast(var(--login-bg-contrast))
        saturate(var(--login-bg-saturate)) !important;
}

html body .login-vignette {
    background:
        radial-gradient(ellipse at 50% 31%, rgba(45, 124, 148, var(--login-bg-glow)), rgba(46, 133, 157, var(--login-bg-overlay)) 36%, transparent 64%),
        linear-gradient(180deg, rgba(7, 40, 58, .08), rgba(7, 67, 87, .12)) !important;
}

html body .login-glass-card,
html body .lotus-login-scene main.login-glass-card,
html body.dark .lotus-login-scene main.login-glass-card {
    width: min(392px, calc(100vw - 54px)) !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: visible !important;
}

html body .lotus-login-scene main.login-glass-card.login-glass-card,
html body.dark .lotus-login-scene main.login-glass-card.login-glass-card {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html body .login-brand {
    position: relative !important;
    z-index: 3 !important;
    margin: 0 auto !important;
    pointer-events: none !important;
}

html body .logo-plate {
    width: var(--login-logo-width) !important;
    height: var(--login-logo-height) !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: drop-shadow(0 8px 18px rgba(4, 35, 52, .18)) !important;
}

html body .logo-plate img {
    width: var(--login-logo-width) !important;
    height: var(--login-logo-height) !important;
    object-fit: contain !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body .laptop-login-panel {
    position: relative !important;
    z-index: 2 !important;
    width: min(100%, 340px) !important;
    margin: clamp(104px, 17vh, 146px) auto 0 !important;
    transform: translateX(-16px) !important;
    padding: 0 2px 6px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html body .laptop-login-panel::before {
    content: "" !important;
    position: absolute !important;
    inset: -10px -8px 10px !important;
    z-index: -1 !important;
    border-radius: 22px !important;
    background:
        radial-gradient(ellipse at 50% 24%, rgba(214, 249, 255, .16), transparent 58%),
        linear-gradient(180deg, rgba(55, 168, 191, .10), rgba(18, 116, 142, .12)) !important;
    box-shadow: 0 20px 54px rgba(4, 42, 60, .14) !important;
    pointer-events: none !important;
}

html body .laptop-login-panel .login-form,
html body .laptop-login-panel .new-account,
html body .laptop-login-panel .social-copy,
html body .laptop-login-panel .social-actions {
    width: min(100%, 324px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

html body .laptop-login-panel .field-shell,
html body .laptop-login-panel .login-submit {
    width: 100% !important;
    max-width: 324px !important;
}

html body .laptop-login-panel .login-title-wrap,
html body .laptop-login-panel .social-copy,
html body .laptop-login-panel .social-actions {
    display: none !important;
}

html body .laptop-login-panel .login-form {
    gap: 12px !important;
}

html body .laptop-login-panel .field-shell {
    min-height: 44px !important;
}

html body .laptop-login-panel .form-row {
    margin: 0 auto 2px !important;
    width: min(100%, 324px) !important;
}

html body .laptop-login-panel .login-submit {
    min-height: 50px !important;
    margin-top: 4px !important;
}

html body .laptop-login-panel .new-account {
    margin-top: 16px !important;
    margin-bottom: 0 !important;
}

html body .login-title-wrap h1 {
    font-family: "Inter", "Manrope", "Segoe UI", Arial, sans-serif !important;
    font-size: 34px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    color: #071b30 !important;
    line-height: 1 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.28) !important;
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    -webkit-text-stroke: 0 !important;
}

html body .login-title-wrap {
    gap: 12px !important;
    margin: 16px 0 16px !important;
}

html body .title-line {
    height: 1px !important;
    border: 0 !important;
    background: rgba(7, 27, 48, .72) !important;
}

html body .login-dashboard-layer {
    display: block !important;
    opacity: var(--chart-layer-opacity) !important;
    filter: blur(var(--chart-panel-blur)) !important;
}

html body .dash-panel {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body .chart-label,
html body .chart-number,
html body .kpi-stat b,
html body .kpi-stat small {
    position: relative;
    z-index: 3;
    color: var(--chart-text-color) !important;
    font-family: "Inter", "Segoe UI", Arial, sans-serif !important;
    text-shadow: 0 1px 8px rgba(3, 35, 48, .42) !important;
}

html body .chart-label {
    position: absolute;
    left: 18px;
    top: 14px;
    font-size: 13px;
    font-weight: 750;
    letter-spacing: .2px;
}

html body .chart-number {
    position: absolute;
    right: 20px;
    top: 13px;
    font-size: 28px;
    font-weight: 820;
}

html body .chart-number-org {
    right: 22px;
    top: 14px;
}

html body .chart-number-heat {
    right: 22px;
    top: 14px;
}

html body .org-panel {
    left: var(--chart-left-x) !important;
    top: var(--chart-left-y) !important;
    width: var(--chart-left-width) !important;
    height: var(--chart-org-height) !important;
}

html body .bars-panel {
    left: var(--chart-left-x) !important;
    width: var(--chart-left-width) !important;
    height: var(--chart-bars-height) !important;
}

html body .kpi-panel {
    right: var(--chart-right-x) !important;
    top: var(--chart-right-y) !important;
    width: var(--chart-right-width) !important;
    height: var(--chart-kpi-height) !important;
}

html body .heatmap-panel {
    right: var(--chart-right-x) !important;
    width: var(--chart-right-width) !important;
    height: var(--chart-heatmap-height) !important;
}

html body .org-root,
html body .org-row span,
html body .bar-chart span {
    display: none !important;
}

html body .org-panel::before,
html body .org-panel::after,
html body .org-row span::before {
    display: none !important;
}

html body .donut-chart {
    display: none !important;
}

html body .bar-chart {
    display: none !important;
}

html body .kpi-panel {
    align-items: center !important;
}

html body .kpi-stat {
    display: grid !important;
    align-content: center !important;
    justify-items: center !important;
    min-width: 0 !important;
    min-height: 70px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
}

html body .kpi-stat b {
    font-size: 22px !important;
    line-height: 1.1 !important;
}

html body .kpi-stat small {
    margin-top: 10px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-align: center !important;
    line-height: 1.15 !important;
}

html body .heatmap-panel span {
    display: none !important;
}

@media (max-width: 640px) {
    html body .lotus-login-scene {
        --login-logo-width: 236px !important;
        --login-logo-height: 142px !important;
        --login-title-size: 31px !important;
        --chart-layer-opacity: .72 !important;
        --chart-left-width: 68vw !important;
        --chart-right-width: 68vw !important;
    }
}