/* ======================================================
   Planning2 Login - Blueprint Playful (override overlay)
   Include this AFTER template-login.css
   ====================================================== */

/* ---------- Theme tokens (facili da ritoccare) ---------- */
:root{
    --bp-bg: #eaf5f6;

    --bp-ink: rgba(15,23,42,.86);
    --bp-ink-soft: rgba(15,23,42,.72);
    --bp-ink-muted: rgba(15,23,42,.55);

    --bp-accent: rgba(31,74,168,.55);
    --bp-accent-ring: rgba(31,74,168,.15);

    --bp-grid-1: rgba(10,60,120,.06);
    --bp-grid-2: rgba(10,60,120,.08);

    --bp-card-bg: rgba(255,255,255,.52);
    --bp-card-border: rgba(255,255,255,.55);

    --bp-input-bg: rgba(255,255,255,.62);
    --bp-input-border: rgba(255,255,255,.55);

    --bp-shadow: 0 24px 80px rgba(15,23,42,.18);
}

/* ---------- Page background ---------- */
#main{
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px 16px;

    background:
            radial-gradient(1100px 800px at 20% 15%, rgba(31,74,168,.14), transparent 58%),
            radial-gradient(1200px 900px at 80% 70%, rgba(0,190,170,.10), transparent 60%),
            linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0)),
            var(--bp-bg) !important;
}

/* Blueprint grid overlay */
#main::before{
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;

    background-image:
            linear-gradient(var(--bp-grid-1) 1px, transparent 1px),
            linear-gradient(90deg, var(--bp-grid-1) 1px, transparent 1px),
            linear-gradient(var(--bp-grid-2) 2px, transparent 2px),
            linear-gradient(90deg, var(--bp-grid-2) 2px, transparent 2px);

    background-size:
            48px 48px,
            48px 48px,
            192px 192px,
            192px 192px;

    opacity: 1;
}

/* ---------- Card (glass) ---------- */
#main #login{
    width: min(520px, 100%);

    background: var(--bp-card-bg) !important;
    border: 1px solid var(--bp-card-border) !important;
    border-radius: 22px !important;

    box-shadow:
            var(--bp-shadow),
            inset 0 1px 0 rgba(255,255,255,.55) !important;

    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);

    position: relative;
    isolation: isolate;
    overflow: hidden;
}

/* Specular highlight and soft color blobs inside the card
   z-index: 0 so it stays BEHIND content (logo stays crisp) */
#main #login::after{
    content:"";
    position:absolute;
    inset: 0;
    z-index: 0;
    pointer-events:none;

    background:
            radial-gradient(1200px 380px at 50% 0%, rgba(255,255,255,.55), transparent 60%),
            radial-gradient(900px 500px at 90% 10%, rgba(31,74,168,.18), transparent 62%),
            radial-gradient(900px 500px at 10% 30%, rgba(0,190,170,.14), transparent 65%);

    opacity: .9;
}

/* Content sits above highlight */
#main #login > *{
    position: relative;
    z-index: 1;
}

/* ---------- Headings / logo ---------- */
#main #login h1 img{
    display: block;
    margin: 8px auto !important;
    width: min(340px, 78%) !important;
    height: auto;
    transition: transform .18s ease, filter .18s ease;
}

#main #login h1 img:hover{
    transform: translateY(-1px);
    filter: saturate(1.06);
}

#main #login h2{
    margin: 0 0 14px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: var(--bp-ink-soft) !important;
}

/* ---------- Labels ---------- */
#main #login label{
    display: block;
    margin: 14px 0 6px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    color: rgba(15,23,42,.78) !important;
}

/* ---------- Inputs (glass light) ---------- */
#main #login input[type="text"],
#main #login input[type="password"]{
    background: var(--bp-input-bg) !important;
    border: 1px solid var(--bp-input-border) !important;

    box-shadow:
            inset 0 1px 0 rgba(255,255,255,.55),
            0 10px 24px rgba(15,23,42,.08);

    backdrop-filter: blur(10px) saturate(1.15);
    -webkit-backdrop-filter: blur(10px) saturate(1.15);
}

#main #login input[type="text"]:focus,
#main #login input[type="password"]:focus{
    border-color: rgba(31,74,168,.55) !important;
    box-shadow:
            0 0 0 4px rgba(31,74,168,.15),
            0 14px 28px rgba(15,23,42,.10);

    transform: translateY(-1px);
}

/* ---------- Password eye toggle ---------- */
#main #login .pw-wrap{
    position: relative;
}

#main #login .pw-wrap input{
    padding-right: 52px !important;
}

#main #login .pw-toggle{
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;

    width: 36px !important;
    height: 36px !important;

    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;

    border-radius: 12px !important;
    background: transparent !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    line-height: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;

    cursor: pointer;
    color: rgba(15,23,42,.55) !important;

    transition: background .15s ease, color .15s ease;
}

#main #login .pw-toggle:hover{
    background: rgba(15,23,42,.06) !important;
    color: rgba(15,23,42,.80) !important;
}

/* Neutralize any global hover transforms */
#main #login .pw-toggle:hover,
#main #login .pw-toggle:active,
#main #login .pw-toggle:focus{
    transform: translateY(-50%) !important;
}

#main #login .pw-icon{
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    fill: currentColor !important;
}

/* ---------- Login button (classic, no grain) ---------- */
#main #login #loginBtn{
    width: 100% !important;
    margin-top: 18px !important;
    height: 50px !important;

    border: 0 !important;
    border-radius: 14px !important;

    background: linear-gradient(180deg, #1f4aa8, #163c8f) !important;
    color: #fff !important;

    font-size: 15px !important;
    font-weight: 900 !important;

    cursor: pointer;

    box-shadow: 0 14px 28px rgba(31,74,168,.22) !important;

    position: relative;
    overflow: hidden;

    transition: transform .06s ease, filter .15s ease, box-shadow .15s ease;
}

#main #login #loginBtn:hover{
    filter: brightness(1.05);
    box-shadow: 0 18px 34px rgba(31,74,168,.26) !important;
}

#main #login #loginBtn:active{
    transform: translateY(1px);
}

/* Sheen */
#main #login #loginBtn::after{
    content: "";
    position: absolute;
    top: -30%;
    left: -40%;
    width: 40%;
    height: 160%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
    transform: rotate(18deg);
    transition: left .35s ease;
}

#main #login #loginBtn:hover::after{
    left: 120%;
}

/* ---------- Positioning: slightly higher on desktop ---------- */
#main #login{
    transform: translateY(-3vh);
}

@media (max-height: 800px){
    #main #login{ transform: translateY(-2vh); }
}

/* Mobile: align a bit higher, no translate */
@media (max-width: 520px){
    #main{
        place-items: start center;
        padding-top: calc(32px + env(safe-area-inset-top));
        padding-bottom: 22px;
    }
    #main #login{ transform: none; }
}

/* ---------- Wrong state ---------- */
#main #login.wrong{
    border-color: rgba(255,132,119,.9) !important;
}

/* ---------- Fallback if backdrop-filter not supported ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
    #main #login{
        background: rgba(255,255,255,.92) !important;
    }
    #main #login input[type="text"],
    #main #login input[type="password"]{
        background: rgba(255,255,255,.98) !important;
    }
}

/* ---------- Reduce motion ---------- */
@media (prefers-reduced-motion: reduce){
    #main #login *{
        transition: none !important;
        animation: none !important;
    }
}

.login-theme-toggle-wrap{
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 20;
    padding: 8px 10px;
    border-radius: 999px !important;
    background: rgba(255,255,255,.48);
    border: 1px solid rgba(255,255,255,.55);
    box-shadow: 0 14px 34px rgba(15,23,42,.12);
    backdrop-filter: blur(12px) saturate(1.15);
    -webkit-backdrop-filter: blur(12px) saturate(1.15);
}

.login-theme-toggle-wrap .theme-toggle{
    margin: 0 !important;
    float: none !important;
}

@media (max-width: 820px), (pointer: coarse){
    .login-theme-toggle-wrap{
        display: none !important;
    }
}

html.theme-dark #main{
    background:
            radial-gradient(1100px 800px at 20% 15%, rgba(255,255,255,.06), transparent 58%),
            radial-gradient(1200px 900px at 80% 70%, rgba(127,133,141,.09), transparent 60%),
            linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)),
            #1f1f1f !important;
}

html.theme-dark .login-theme-toggle-wrap{
    background: rgba(35,36,37,.72);
    border-color: rgba(255,255,255,.08);
    box-shadow: 0 16px 38px rgba(0,0,0,.28);
}

html.theme-dark #main::before{
    background-image:
            linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
            linear-gradient(rgba(255,255,255,.05) 2px, transparent 2px),
            linear-gradient(90deg, rgba(255,255,255,.05) 2px, transparent 2px);
    opacity: .55;
}

html.theme-dark #main #login{
    background: rgba(40,41,43,.78) !important;
    border-color: rgba(255,255,255,.08) !important;
    box-shadow:
            0 24px 80px rgba(0,0,0,.42),
            inset 0 1px 0 rgba(255,255,255,.05) !important;
}

html.theme-dark #main #login h1 img{
    filter: brightness(1.02) contrast(1.04);
}

html.theme-dark #main #login::after{
    background:
            radial-gradient(1200px 380px at 50% 0%, rgba(255,255,255,.06), transparent 60%),
            radial-gradient(900px 500px at 90% 10%, rgba(255,255,255,.05), transparent 62%),
            radial-gradient(900px 500px at 10% 30%, rgba(127,133,141,.10), transparent 65%);
    opacity: .9;
}

html.theme-dark #main #login h1,
html.theme-dark #main #login h2,
html.theme-dark #main #login label,
html.theme-dark #main #login .login-help,
html.theme-dark #main #login .greenText,
html.theme-dark #main #login .redText{
    color: #ececec !important;
}

html.theme-dark #main #login h2,
html.theme-dark #main #login .login-help{
    color: #b8bcc1 !important;
}

html.theme-dark #main #login .caps-warn{
    color: #f0b26f !important;
}

html.theme-dark #main #login input[type="text"],
html.theme-dark #main #login input[type="password"]{
    background: rgba(28,29,31,.92) !important;
    border-color: rgba(255,255,255,.10) !important;
    color: #ececec !important;
    box-shadow:
            inset 0 1px 0 rgba(255,255,255,.02),
            0 10px 24px rgba(0,0,0,.22);
}

html.theme-dark #main #login input[type="text"]:focus,
html.theme-dark #main #login input[type="password"]:focus{
    border-color: rgba(140,145,151,.75) !important;
    box-shadow:
            0 0 0 4px rgba(127,133,141,.18),
            0 14px 28px rgba(0,0,0,.24);
}

html.theme-dark #main #login input::placeholder{
    color: rgba(236,236,236,.34) !important;
}

html.theme-dark #main #login .pw-toggle{
    color: rgba(236,236,236,.58) !important;
}

html.theme-dark #main #login .pw-toggle:hover{
    background: rgba(255,255,255,.06) !important;
    color: rgba(236,236,236,.84) !important;
}

html.theme-dark #main #login #loginBtn{
    background: linear-gradient(180deg, #666b72, #474b50) !important;
    box-shadow: 0 14px 28px rgba(0,0,0,.34) !important;
}

html.theme-dark #main #login #loginBtn:hover{
    filter: brightness(1.04);
    box-shadow: 0 18px 34px rgba(0,0,0,.38) !important;
}

html.theme-dark #main #login.wrong{
    border-color: rgba(240,138,138,.75) !important;
}

html.theme-dark #main #login .greenText{
    color: #8fd6a0 !important;
}

html.theme-dark #main #login .redText{
    color: #f09a9a !important;
}