/* 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: 1.04 !important;
    --login-bg-contrast: 1.12 !important;
    --login-bg-saturate: 1.16 !important;
    --login-bg-overlay: .015 !important;
    --login-bg-glow: .045 !important;
    --login-card-alpha-top: .24 !important;
    --login-card-alpha-bottom: .12 !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(circle at 50% 30%, rgba(255,255,255,var(--login-bg-glow)), rgba(255,255,255,var(--login-bg-overlay)) 34%, transparent 62%),
        linear-gradient(180deg, rgba(255,255,255,.025), rgba(7,67,87,.035)) !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 {
    background: linear-gradient(180deg, rgba(247,253,255,var(--login-card-alpha-top)), rgba(190,225,234,var(--login-card-alpha-bottom))) !important;
    border-color: var(--login-card-border) !important;
    box-shadow: 0 30px 72px rgba(5,30,45,.12), inset 0 1px 0 rgba(255,255,255,.50) !important;
    backdrop-filter: blur(var(--login-card-blur)) saturate(110%) !important;
    -webkit-backdrop-filter: blur(var(--login-card-blur)) saturate(110%) !important;
}

html body .logo-plate {
    width: var(--login-logo-width) !important;
    height: var(--login-logo-height) !important;
    background: transparent !important;
    box-shadow: none !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 .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;
    }
}