@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Inter',sans-serif;
}

html{
    width:100%;
    overflow-x:hidden;
}

body{
    background:
        linear-gradient(90deg, rgba(248,251,255,0.76) 0%, rgba(248,251,255,0.6) 48%, rgba(248,251,255,0.46) 100%),
        url('/static/images/latestDashboard.png') no-repeat center center / cover;
    font-size:12px;
    margin:0;
    min-height:100vh;
    height:100vh;
    overflow:hidden;
    overflow-x:hidden;
    position:relative;
    isolation:isolate;
}

body::before {
    content:"";
    position:fixed;
    inset:0;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.04) 100%),
        linear-gradient(90deg, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0.14) 55%, rgba(255,255,255,0.04) 100%);
    opacity:1;
    z-index:-1;
    pointer-events:none;
}

.main-container{
    width:min(calc(100% - 48px), 1160px);
    height:100vh;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:24px;
    padding:0;
}
/* =========================================
   LEFT PANEL
========================================= */

.governance-panel{
    flex:0 1 820px;
    min-width:0;
    height:min(620px, calc(100vh - 112px));
    position:relative;
    background:transparent;
    border:0;
    border-radius:0;
    padding:0;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    overflow:visible;
    box-shadow:none;
}

.governance-panel::before{
    display:none;
}

.governance-panel::after{
    display:none;
}

.governance-content{
    width:100%;
    position:relative;
    z-index:2;
    max-width:820px;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    padding-top:0;
}

.governance-fixed{
    flex:0 0 auto;
    animation:contentEnter 650ms ease both;
}

.mini-logo{
    font-size:10px;
    font-weight:800;
    color:#1d4ed8;
    margin-bottom:13px;
    letter-spacing:0.08em;
    text-transform:uppercase;
}

.governance-content h1{
    max-width:760px;
    font-size:35px;
    line-height:1.08;
    letter-spacing:0;
    color:#020817;
    font-weight:800;
    margin-bottom:16px;
    text-shadow:0 1px 18px rgba(255,255,255,0.86);
    overflow-wrap:break-word;
}

.governance-content p{
    max-width:720px;
    font-size:12.5px;
    line-height:1.75;
    color:#233047;
    text-shadow:0 1px 16px rgba(255,255,255,0.82);
    overflow-wrap:break-word;
}

.platform-flow{
    margin-top:36px;
}

.capability-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:26px 32px;
    max-width:780px;
}

.capability-item{
    display:grid;
    grid-template-columns:42px minmax(0, 1fr);
    gap:14px;
    align-items:start;
    min-width:0;
    opacity:1;
    transform:none;
    animation:contentEnter 640ms ease backwards;
    text-shadow:0 1px 14px rgba(255,255,255,0.8);
}

.capability-item > div{
    min-width:0;
}

.capability-item:nth-child(1){
    animation-delay:120ms;
}

.capability-item:nth-child(2){
    animation-delay:220ms;
}

.capability-item:nth-child(3){
    animation-delay:320ms;
}

.capability-item:nth-child(4){
    animation-delay:420ms;
}

.capability-item:nth-child(5){
    animation-delay:520ms;
}

.capability-platform{
    grid-column:1 / -1;
    max-width:760px;
}

.capability-item .material-symbols-rounded{
    width:42px;
    height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(148,163,184,0.28);
    border-radius:50%;
    background:rgba(255,255,255,0.66);
    color:#1e3a8a;
    font-size:21px;
    box-shadow:0 12px 28px rgba(15,23,42,0.08);
    animation:capabilitySignal 900ms ease-out both;
}

.capability-item:nth-child(3) .material-symbols-rounded{
    color:#047857;
    animation-delay:0.4s;
}

.capability-item:nth-child(4) .material-symbols-rounded{
    color:#7c3aed;
    animation-delay:0.8s;
}

.capability-item:nth-child(5) .material-symbols-rounded{
    color:#b45309;
    animation-delay:1.2s;
}

.capability-item strong{
    display:block;
    margin-bottom:5px;
    color:#020817;
    font-size:14px;
    line-height:1.25;
    overflow-wrap:break-word;
}

.capability-item small{
    display:block;
    color:#1f2a3d;
    font-size:10.5px;
    line-height:1.55;
    font-weight:500;
    overflow-wrap:break-word;
}

@keyframes contentEnter{
    from{
        transform:translateY(24px);
    }
    to{
        transform:translateY(0);
    }
}

@keyframes capabilitySignal{
    0%, 100%{
        transform:translateY(0);
        box-shadow:0 12px 28px rgba(15,23,42,0.08);
    }
    50%{
        transform:translateY(-3px);
        box-shadow:0 16px 34px rgba(29,78,216,0.14);
    }
}

/* =========================================
   RIGHT SECTION
========================================= */

.auth-section{
    width:288px;
    flex:0 0 288px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    z-index:4;
}

.auth-card{
    width:100%;
    height:494px;
    min-height:0;

    background:#ffffff;

    border:1px solid #edf1f5;

    border-radius:14px;

    padding:22px 27px;
    box-shadow:0 22px 60px rgba(15,23,42,0.08);
}

/* =========================================
   HEADINGS
========================================= */

.auth-card h2{
    text-align:center;

    font-size:16px;
    font-weight:700;

    color:#0f172a;

    margin-bottom:7px;
}


.subtitle{
    text-align:center;

    font-size:9px;
    color:#94a3b8;

    margin-bottom:15px;
}

/* =========================================
   LABELS
========================================= */

label{
    display:block;

    font-size:9px;
    font-weight:600;

    color:#334155;
}

/* =========================================
   INPUTS
========================================= */

.input-group{
    position:relative;
    margin-bottom:9px;
}

.input-group input{
    margin-top:3px;
    width:100%;
    height:29px;

    border:1px solid #dbe2ea;
    border-radius:6px;

    background:#fafbfd;

    padding:0 34px 0 39px;

    font-size:9px;
    color:#334155;

    transition:0.2s ease;
}

.input-group input:focus{
    outline:none;

    background:#ffffff;

    border-color:#9db6f6;
}

.input-group span{
    position:absolute;

    top:50%;
    transform:translateY(-50%);

    font-size:14px;
    color:#94a3b8;
    transition:color 0.2s ease;
}

.input-group span:first-child{
    left:7px;
}

.input-group .input-icon{
    width:21px;
    height:21px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid #d7e2ef;
    border-radius:6px;
    background:#f8fafc;
    color:#2563eb;
    font-size:13px;
    transform:translateY(-43%);
}

.input-group .email-icon{
    color:#2563eb;
}

.input-group .password-icon{
    color:#475569;
}

.input-group .aadhaar-icon{
    color:#0f766e;
}

.input-group .user-icon{
    color:#475569;
}

.input-group .phone-icon{
    color:#1e3a8a;
}

.toggle-password{
    top:3px !important;
    right:0;
    cursor:pointer;
    color:#64748b;
    width:31px;
    height:29px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-left:1px solid #dbeafe;
    border-radius:0 6px 6px 0;
    background:transparent;
    line-height:1 !important;
    padding:0;
    transform:none !important;
    font-size:14px !important;
}

/* =========================================
   BUTTON
========================================= */

.primary-btn{
    width:100%;
    height:30px;

    border:none;
    border-radius:6px;

    background:#08122f;

    color:#ffffff;

    font-size:9px;
    font-weight:600;

    cursor:pointer;

    transition:0.2s ease;

    margin-top:5px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
}

.primary-btn .btn-leading-icon{
    font-size:14px;
}

.primary-btn:hover{
    background:#10204d;
}

.auth-footer-links{
    margin-top:28px;
    text-align:center;
}

.help-text{
    font-size:10px;
    color:#b6c0d1;
}

.signin-text{
    margin-top:10px;
    font-size:11px;
    color:#94a3b8;
}

.signin-text a{
    color:#0f172a;
    text-decoration:none;
    font-weight:600;
}

.signin-text a:hover{
    text-decoration:underline;
}

@media(max-width:1100px){

    body{
        overflow:auto;
        overflow-x:hidden;
        height:auto;
        min-height:100vh;
    }

    .main-container{
        flex-direction:column;
        align-items:flex-start;
        width:min(calc(100% - 32px), 920px);
        height:auto;
        min-height:100vh;
        gap:28px;
        padding:42px 0 74px;
    }

    .governance-panel{
        width:100%;
        max-width:920px;
        flex:auto;
        height:auto;
        min-height:620px;
        max-height:none;
        padding:0;
    }

    .governance-panel::before{
        display:none;
    }

    .governance-content{
        max-width:100%;
        width:100%;
    }

    .capability-grid{
        width:100%;
    }

    .auth-section{
        width:100%;
        max-width:320px;
        flex:0 0 auto;
    }

    .auth-card{
        width:100%;
    }
}

@media(max-width:720px){

    .main-container{
        width:min(calc(100% - 24px), 420px);
        padding-top:30px;
        overflow:hidden;
    }

    .governance-panel{
        min-height:650px;
        width:100%;
        max-width:100%;
    }

    .governance-content h1{
        font-size:22px;
        line-height:1.12;
        max-width:min(100%, 310px);
        width:100%;
        white-space:normal;
        overflow-wrap:anywhere;
    }

    .governance-content p{
        font-size:11px;
        max-width:min(100%, 318px);
        width:100%;
        white-space:normal;
    }

    .platform-flow{
        margin-top:30px;
    }

    .capability-grid{
        grid-template-columns:1fr;
        gap:18px;
        max-width:320px;
    }

    .capability-platform{
        grid-column:auto;
    }

    .capability-item{
        grid-template-columns:34px minmax(0, 1fr);
        gap:12px;
    }

    .capability-item .material-symbols-rounded{
        width:34px;
        height:34px;
        font-size:18px;
    }

    .login-footer{
        bottom:10px;
        width:calc(100vw - 36px);
        font-size:8.2px;
        line-height:1.4;
        white-space:normal;
    }

    .login-footer span{
        display:block;
    }
}

@media(prefers-reduced-motion:reduce){

    .governance-fixed,
    .capability-item,
    .capability-item .material-symbols-rounded{
        animation:none;
        opacity:1;
        transform:none;
    }
}

.redirect-text{
    margin-top:11px;

    text-align:center;

    font-size:9px;

    color:#94a3b8;
}

.redirect-text a{
    color:#0f172a;
    text-decoration:none;
    font-weight:600;
}

.redirect-text a:hover{
    text-decoration:underline;
}

.login-footer{
    position:fixed;
    left:50%;
    bottom:16px;
    z-index:5;
    width:min(760px, calc(100vw - 40px));
    color:#526581;
    font-size:11px;
    font-weight:600;
    line-height:1.45;
    text-align:center;
    text-shadow:0 1px 16px rgba(255,255,255,0.86);
    transform:translateX(-50%);
    pointer-events:none;
    overflow-wrap:anywhere;
}

.login-footer span{
    display:inline;
}

@media(max-width:720px){
    .login-footer{
        bottom:10px;
        width:calc(100vw - 36px);
        font-size:8.2px;
        line-height:1.4;
        white-space:normal;
    }

    .login-footer span{
        display:block;
    }
}