*{box-sizing:border-box}
html{font-size:16px}
body{margin:0;font-family:"Segoe UI",Arial,sans-serif;color:#111735}
a{text-decoration:none;color:inherit}

/* ORGANIZATION PORTAL */
.portal{background:#f7f6f9;min-height:100vh;padding-left:250px;font-size:14px}

.portal>aside{
    position:fixed;left:0;top:0;bottom:0;width:250px;
    background:#0d1934;color:#eaf0fa;padding:24px 16px;
    display:flex;flex-direction:column;overflow:auto;z-index:20
}
.logo{font-size:25px;font-weight:900;padding:5px 8px 23px;line-height:1}
.logo b{color:#8612b5}
.logo small{display:block;font-size:9px;line-height:1.3;color:#9faec9;margin-top:5px;font-weight:600}

.org{
    padding:16px 13px;border:1px solid rgba(255,255,255,.08);
    border-radius:11px;background:rgba(255,255,255,.035)
}
.org small{display:block;font-size:10px;letter-spacing:.12em;color:#7e91b8;font-weight:700}
.org strong{display:block;font-size:14px;line-height:1.35;margin:8px 0 5px}
.org span{display:block;font-size:11px;line-height:1.4;color:#aeb9ce}

.portal nav label{
    display:block;margin:23px 10px 9px;
    font-size:10px;letter-spacing:.13em;color:#7789ae;font-weight:700
}
.portal nav a{
    display:flex;align-items:center;gap:10px;
    min-height:43px;padding:11px 12px;border-radius:9px;
    font-size:14px;line-height:1.25;margin:3px 0
}
.portal nav a:hover,.portal nav a.active{background:#10c778;color:#fff}
.nav-icon{width:17px;text-align:center;font-size:14px}

.user{
    margin-top:auto;display:flex;align-items:center;gap:10px;
    border-top:1px solid rgba(255,255,255,.08);padding-top:18px
}
.user i{
    width:39px;height:39px;border-radius:50%;background:#35425f;
    display:grid;place-items:center;font-style:normal;font-size:14px;font-weight:900;flex:0 0 39px
}
.user div{min-width:0}
.user strong{display:block;font-size:12px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user small{display:block;font-size:10px;line-height:1.3;color:#9ca9c0;margin-top:2px}
.user>a{margin-left:auto;font-size:16px}

.portal main{min-height:100vh}
.portal main>header{
    height:68px;background:#fff;border-bottom:1px solid #e7e3ea;
    padding:0 32px;display:flex;align-items:center;justify-content:space-between;
    position:sticky;top:0;z-index:10
}
.portal main>header>b{font-size:14px}
.top-actions{display:flex;align-items:center;gap:15px}
.portal main>header span{
    background:#f4edf8;color:#7c11a8;padding:8px 12px;
    border-radius:20px;font-size:11px;font-weight:700
}
.portal main>header a{font-size:12px;font-weight:600}

.content{padding:34px 32px;max-width:1700px;margin:0 auto}

.heading{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}
.heading>div>small{
    color:#8612b5;font-weight:900;letter-spacing:.12em;font-size:11px
}
.heading h1{font-size:32px;line-height:1.15;margin:10px 0 8px}
.heading p{color:#7d8293;font-size:14px;line-height:1.5;margin:0}
.heading em{
    font-style:normal;background:#f2e9f6;color:#7d11a8;
    padding:9px 14px;border-radius:20px;font-size:11px;font-weight:900;white-space:nowrap
}

.warning{
    padding:14px 16px;border-radius:10px;background:#fff5e6;
    color:#855810;font-size:13px;line-height:1.5;margin-top:20px
}

.kpis{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    gap:15px;margin:28px 0 24px
}
.kpis article{
    background:#fff;border:1px solid #e7e3eb;border-radius:14px;
    padding:20px;min-height:124px
}
.kpis small{
    display:block;font-size:10px;font-weight:800;letter-spacing:.035em;color:#858a9a
}
.kpis b{display:block;font-size:31px;line-height:1.1;margin:11px 0 9px}
.kpis span{display:block;font-size:11px;line-height:1.45;color:#858a9a}

.panel{
    background:#fff;border:1px solid #e7e3eb;border-radius:14px;padding:22px
}
.panel h2{font-size:20px;line-height:1.3;margin:0 0 6px}
.panel>p{font-size:12px;line-height:1.5;color:#898e9e;margin:0}

.modules{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;margin-top:20px
}
.modules>a{
    border:1px solid #e8e3ec;border-radius:12px;padding:19px;
    min-height:155px;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease
}
.modules>a:hover{
    border-color:#caa8da;box-shadow:0 10px 28px rgba(56,27,72,.07);transform:translateY(-2px)
}
.modules small{
    display:block;font-size:9px;letter-spacing:.05em;color:#8612b5;font-weight:900
}
.modules h3{font-size:16px;line-height:1.3;margin:13px 0 8px}
.modules p{
    font-size:12px;line-height:1.55;color:#7f8495;
    min-height:38px;margin:0 0 10px
}
.modules b{display:inline-block;font-size:12px;color:#7d11a8}

/* Login styles retained because login.php uses the same stylesheet */
.login-page{min-height:100vh;background:linear-gradient(135deg,#fffaf6,#f8f3fc);padding:40px}
.login-wrap{max-width:1000px;margin:auto}
.brand{font-size:23px;font-weight:900}.brand b{color:#8612b5}
.login-card{margin-top:25px;display:grid;grid-template-columns:.9fr 1.1fr;background:#fff;border:1px solid #e6e1ea;border-radius:22px;overflow:hidden;box-shadow:0 25px 70px #24153318}
.login-side{padding:50px;background:linear-gradient(150deg,#151633,#68109b);color:#fff}
.login-side>small{color:#55dfa4;font-weight:900;letter-spacing:.12em}
.login-side h1{font-size:38px}.login-side p{color:#d8d1e1;line-height:1.7}
.login-side div{font-size:12px;margin:25px 0}
.login-form{padding:50px}.login-form>small{color:#8612b5;font-weight:900;letter-spacing:.12em;font-size:10px}
.login-form h2{font-size:28px;margin-bottom:5px}.login-form>p{color:#7d8293;font-size:13px;margin-bottom:25px}
.login-form label{display:block;font-size:10px;font-weight:900;margin:15px 0 6px}
.login-form input{width:100%;height:44px;border:1px solid #ddd7e5;border-radius:9px;padding:0 11px;font-size:14px}
.pw{position:relative}.pw input{padding-right:60px}.pw button{position:absolute;right:6px;top:6px;height:32px;border:0;border-radius:6px;color:#7910a6}
.primary{width:100%;height:44px;border:0;border-radius:9px;background:#8612b5;color:#fff;font-weight:900;margin-top:20px}
.login-form footer{text-align:center;font-size:11px;color:#7d8293;margin-top:20px}.login-form footer a{color:#8612b5;font-weight:900}
.error{padding:12px;border-radius:9px;background:#fff0f0;color:#a73535;font-size:12px}

/* Generic protected module placeholder */
.placeholder{min-height:100vh;display:grid;place-items:center;background:#faf7fc;padding:25px}
.placeholder>div{max-width:650px;background:#fff;border:1px solid #e5dfeb;border-radius:18px;padding:40px}
.placeholder>div>a{font-size:12px;color:#7d11a8;font-weight:900}
.placeholder>div>small{display:block;margin-top:35px;color:#8612b5;font-size:10px;font-weight:900}
.placeholder>div>h1{font-size:32px}.placeholder>div>p{font-size:14px;line-height:1.55;color:#7d8293}
.placeholder section{margin-top:25px;background:#f7f3f9;border-radius:10px;padding:16px;font-size:13px;line-height:1.7}

/* Responsive */
@media(max-width:1100px){
    .portal{padding-left:230px}
    .portal>aside{width:230px}
    .portal nav a{font-size:13px}
    .kpis{grid-template-columns:repeat(2,1fr)}
    .modules{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
    .login-page{padding:18px}.login-card{grid-template-columns:1fr}
    .login-side,.login-form{padding:30px}
    .portal{padding-left:0}.portal>aside{display:none}
    .content{padding:22px 18px}.portal main>header{padding:0 18px}
    .heading{display:block}.heading em{display:inline-block;margin-top:12px}
}
@media(max-width:520px){
    .kpis,.modules{grid-template-columns:1fr}
    .heading h1{font-size:28px}
}