/* =========================================

MPDS JYOTISH STUDIO

Version : 1.1.0

Layout Engine

========================================= */

:root{

--bg:#F8F7F2;

--sidebar:#23395B;

--accent:#D79B2A;

--card:#FFFFFF;

--text:#333333;

--radius:18px;

--shadow:0 12px 30px rgba(0,0,0,.08);

}

*{

margin:0;

padding:0;

box-sizing:border-box;

}

body{

background:var(--bg);

font-family:Poppins,sans-serif;

color:var(--text);

}
.app{

display:flex;

min-height:100vh;

}

.sidebar{

width:240px;

background:var(--sidebar);

color:white;

padding:25px;

position:fixed;

left:0;

top:0;

bottom:0;

overflow:auto;

}

.logo{

text-align:center;

margin-bottom:35px;

}

.logo h2{

margin-top:10px;

font-size:32px;

font-weight:700;

}

.sidebar ul{

list-style:none;

}

.sidebar li{

padding:14px;

margin-bottom:8px;

border-radius:10px;

cursor:pointer;

transition:.30s;

}

.sidebar li:hover{

background:rgba(255,255,255,.12);

padding-left:22px;

}

.active{

background:var(--accent);

color:white;

}

main{

margin-left:240px;

width:100%;

}

.topbar{

background:white;

padding:22px 35px;

box-shadow:var(--shadow);

}

.workspace{

padding:40px;

}

.workspace h2{

font-size:36px;

margin-bottom:20px;

color:var(--sidebar);

}

.workspace p{

font-size:20px;

line-height:1.8;

}

@media(max-width:900px){

.sidebar{

width:70px;

}

.sidebar h2{

display:none;

}

main{

margin-left:70px;

}

}

/* ==========================
   TOPBAR
========================== */

.topbar{

display:flex;

align-items:center;

justify-content:space-between;

gap:20px;

}

.topbar-left{

min-width:250px;

}

.topbar-center{

flex:1;
position:relative;

}

#globalSearch{

width:100%;

padding:12px 18px;

border:none;

border-radius:12px;

font-size:16px;

outline:none;

background:#f5f5f5;

transition:.3s;

}

#globalSearch:focus{

background:white;

box-shadow:0 0 0 3px rgba(215,155,42,.25);

}

.topbar-right{

font-size:22px;

cursor:pointer;

white-space:nowrap;

}

/* ==========================
   DASHBOARD CARDS
========================== */

#dashboardCards{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:25px;

margin-top:30px;

}

.dash-card{

background:white;

padding:25px;

border-radius:16px;

box-shadow:0 10px 25px rgba(0,0,0,.08);

transition:.3s;

cursor:pointer;

text-align:center;

}

.dash-card:hover{

transform:translateY(-6px);

box-shadow:0 15px 35px rgba(0,0,0,.15);

}

.dash-card h3{

font-size:45px;

margin-bottom:10px;

}

.dash-card h2{

font-size:24px;

color:#23395B;

margin-bottom:10px;

}

.dash-card p{

font-size:36px;

font-weight:bold;

color:#D79B2A;

}

/* ==========================
   SEARCH RESULTS
========================== */

#searchResults{

    position:absolute;

    top:105%;

    left:0;

    width:100%;

    background:white;

    border-radius:12px;

    box-shadow:0 12px 30px rgba(0,0,0,.12);

    overflow:hidden;

    display:none;

    z-index:999;

}

.search-item{

    padding:14px 18px;

    cursor:pointer;

    transition:.25s;

    border-bottom:1px solid #eee;

}

.search-item:last-child{

    border-bottom:none;

}

.search-item:hover{

    background:#f4f7fb;

}

/* ===========================
Knowledge Card
=========================== */

.knowledge-card{

max-width:1000px;

margin:auto;

}

.card-header{

.alt-name{

    margin-top:6px;

    font-size:15px;

    color:#666;

    font-style:italic;

    text-align:center;

}    

margin-bottom:30px;

}

.back-btn{

    display:inline-flex;
    align-items:center;
    gap:8px;

    background:#1f3b64;
    color:#fff;

    border:none;

    padding:12px 22px;

    border-radius:12px;

    cursor:pointer;

    font-size:15px;

    font-weight:600;

    margin-bottom:28px;

    transition:all .25s ease;

    box-shadow:0 6px 18px rgba(31,59,100,.18);

}

.back-btn:hover{

    transform:translateY(-2px);

    background:#284b7d;

    box-shadow:0 10px 24px rgba(31,59,100,.25);

}
.subtitle{

color:#777;

margin-top:-10px;

}

.info-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:15px;

margin:30px 0;

}

.info-box{

background:white;

padding:18px;

border-radius:10px;

box-shadow:0 3px 10px rgba(0,0,0,.08);

}

.section{

background:white;

padding:20px;

border-radius:10px;

margin-top:20px;

box-shadow:0 3px 10px rgba(0,0,0,.08);

}

.tags{

display:flex;

flex-wrap:wrap;

gap:10px;

margin-top:15px;

}

.tag{

background:#1f3b64;

color:white;

padding:8px 15px;

border-radius:30px;

font-size:14px;

}

/* ======================================
   Premium Bottom Navigation
====================================== */

.navigation-bar{

    display:flex;
    justify-content:center;
    align-items:center;
    gap:18px;

    margin:40px 0 20px;
    flex-wrap:wrap;

}

.nav-btn,
.home-btn{

    min-width:170px;

    padding:13px 22px;

    border-radius:12px;

    border:none;

    cursor:pointer;

    font-size:15px;

    font-weight:600;

    transition:all .25s ease;

    box-shadow:0 6px 18px rgba(0,0,0,.12);

}

.nav-btn{

    background:#ffffff;

    color:#1f3b64;

    border:2px solid #d8e2ef;

}

.nav-btn:hover{

    background:#1f3b64;

    color:#fff;

    transform:translateY(-3px);

}

.home-btn{

    background:#1f3b64;

    color:white;

}

.home-btn:hover{

    background:#2c4f81;

    transform:translateY(-3px);

}

.nav-btn:disabled{

    opacity:.45;

    cursor:not-allowed;

    transform:none;

}

/* ======================================
   MPDS Information Row
====================================== */

.info-row{

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:10px 14px;

    border-bottom:1px solid #e5e5e5;

}

.info-label{

    font-weight:600;
    color:#444;

}

.info-value{

    font-weight:500;
    color:#111;
    text-align:right;

}

/* ==========================================
   MPDS PASSWORD LOGIN
   ========================================== */

body.login-locked .app {
    display: none;
}

#loginScreen {
    position: fixed;
    inset: 0;

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

    background: var(--bg);

    z-index: 99999;
}

.loginBox {
    width: 380px;
    max-width: 90%;

    background: white;

    padding: 40px;

    border-radius: 18px;

    box-shadow: 0 15px 40px rgba(0,0,0,.15);

    text-align: center;
}

.loginLogo {
    font-size: 52px;
    margin-bottom: 10px;
}

.loginBox h1 {
    color: var(--sidebar);
    margin-bottom: 10px;
    font-size: 27px;
}

.loginBox p {
    font-size: 15px;
    color: #666;
    margin-bottom: 20px;
}

#loginPassword {
    width: 100%;

    padding: 13px 15px;

    border: 1px solid #ddd;
    border-radius: 10px;

    font-size: 16px;

    outline: none;

    margin-bottom: 15px;
}

#loginPassword:focus {
    border-color: var(--accent);

    box-shadow:
        0 0 0 3px rgba(215,155,42,.18);
}

.loginBox button {
    width: 100%;

    padding: 13px;

    border: none;
    border-radius: 10px;

    background: var(--accent);
    color: white;

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

    cursor: pointer;
}

.loginBox button:hover {
    opacity: .9;
}

#loginError {
    min-height: 22px;

    margin-top: 12px;

    color: #d9534f;

    font-size: 14px;
}