@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root{--sidebar-w:270px;--bg:#f4f7fb;--surface:#fff;--surface-2:#f8fafc;--text:#152238;--muted:#6b7a90;--border:#e4eaf2;--primary:#056a83;--primary-2:#0b8aa4;--accent:#13a68d;--danger:#dc4453;--warning:#d79b24;--shadow:0 14px 35px rgba(19,37,63,.08);--shadow-sm:0 6px 18px rgba(19,37,63,.07)}
[data-bs-theme="dark"]{--bg:#0d1520;--surface:#121d2a;--surface-2:#172433;--text:#edf5fb;--muted:#9fb0c2;--border:#233446;--primary:#35a7c1;--primary-2:#54bed4;--accent:#41c3a9;--shadow:0 14px 35px rgba(0,0,0,.28);--shadow-sm:0 6px 18px rgba(0,0,0,.22)}
*{box-sizing:border-box}html,body{min-height:100%}body{margin:0;font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);transition:background .25s ease,color .25s ease}a{text-decoration:none}
.app-sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar-w);background:linear-gradient(180deg,#062d3b 0%,#07394b 48%,#062b38 100%);color:#fff;z-index:1050;display:flex;flex-direction:column;box-shadow:14px 0 38px rgba(0,0,0,.12);overflow:hidden}.app-sidebar:before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:rgba(74,210,201,.08);top:-80px;right:-80px;pointer-events:none}
.brand-box{height:82px;display:flex;align-items:center;gap:13px;padding:0 20px;border-bottom:1px solid rgba(255,255,255,.09);position:relative}.brand-mark{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#20b8b0,#0d879f);font-size:20px;box-shadow:0 8px 20px rgba(0,0,0,.18)}.brand-title{font-size:15px;font-weight:800;letter-spacing:.2px}.brand-subtitle{font-size:12px;opacity:.74;margin-top:1px}.sidebar-close{margin-left:auto;border:0;background:rgba(255,255,255,.08);color:#fff;width:36px;height:36px;border-radius:10px}
.org-box{display:flex;gap:11px;margin:18px 16px 8px;padding:13px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:14px}.org-icon{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.09);display:grid;place-items:center;flex:0 0 auto}.org-box strong{font-size:12px;display:block}.org-box span{font-size:10.5px;opacity:.68}
.sidebar-nav{padding:10px 12px;display:flex;flex-direction:column;gap:5px;overflow:auto}.sidebar-link{position:relative;color:rgba(255,255,255,.76);display:flex;align-items:center;gap:13px;padding:11px 13px;border-radius:12px;font-size:13px;font-weight:600;transition:.18s ease}.sidebar-link i{width:20px;text-align:center;font-size:15px}.sidebar-link:hover{color:#fff;background:rgba(255,255,255,.08);transform:translateX(2px)}.sidebar-link.active{color:#fff;background:linear-gradient(90deg,rgba(44,196,187,.26),rgba(25,154,178,.14));box-shadow:inset 3px 0 0 #48d7cd}
.sidebar-footer{margin-top:auto;padding:16px;border-top:1px solid rgba(255,255,255,.08)}.user-mini{display:flex;align-items:center;gap:10px;margin-bottom:10px}.user-avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#1fb7ad,#0b829c);font-weight:800}.user-mini-data{min-width:0}.user-mini-data strong,.user-mini-data span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-mini-data strong{font-size:12px}.user-mini-data span{font-size:10.5px;opacity:.65;margin-top:2px}.sidebar-logout{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:#ffd9dd;font-size:12px;font-weight:600}.sidebar-logout:hover{background:rgba(222,75,90,.14);color:#fff}
.app-shell{margin-left:var(--sidebar-w);min-height:100vh}.topbar{height:82px;position:sticky;top:0;z-index:1000;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 28px}.topbar-left,.topbar-actions{display:flex;align-items:center;gap:12px}.topbar-title{font-size:17px;font-weight:800}.topbar-subtitle{font-size:11px;color:var(--muted);margin-top:2px}.icon-btn{width:40px;height:40px;border-radius:12px;border:1px solid var(--border);background:var(--surface);color:var(--text);display:grid;place-items:center;transition:.18s ease}.icon-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}.role-pill{height:40px;padding:0 14px;border:1px solid var(--border);border-radius:12px;background:var(--surface);display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--muted)}
.app-main{padding:28px;max-width:1700px;margin:0 auto;animation:fadeUp .38s ease both}.page-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#0b5065,#087d90 58%,#12a38f);border-radius:22px;padding:28px;color:#fff;box-shadow:var(--shadow);margin-bottom:24px}.page-hero:after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-70px;top:-100px;background:rgba(255,255,255,.09)}.page-hero h1{font-size:27px;font-weight:800;margin:0 0 7px}.page-hero p{margin:0;max-width:760px;font-size:13px;opacity:.88}.hero-badge{display:inline-flex;align-items:center;gap:8px;margin-bottom:13px;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.13);font-size:11px;font-weight:700}
.metric-card{position:relative;overflow:hidden;min-height:145px;border-radius:19px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm);padding:20px;display:flex;gap:15px;align-items:flex-start;transition:.22s ease;animation:fadeUp .45s ease both}.metric-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.metric-icon{width:49px;height:49px;border-radius:15px;display:grid;place-items:center;font-size:20px;flex:0 0 auto}.metric-content{display:flex;flex-direction:column}.metric-label{color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.45px}.metric-value{font-size:28px;line-height:1.15;margin-top:8px}.metric-content small{color:var(--muted);font-size:10.5px;margin-top:5px}.metric-teal .metric-icon{background:rgba(19,166,141,.13);color:#11957f}.metric-blue .metric-icon{background:rgba(5,106,131,.13);color:#087c9a}.metric-red .metric-icon{background:rgba(220,68,83,.12);color:#d84756}.metric-gold .metric-icon{background:rgba(215,155,36,.14);color:#c38a19}.metric-glow{position:absolute;width:110px;height:110px;border-radius:50%;right:-42px;bottom:-48px;background:currentColor;opacity:.035}
.card{border:1px solid var(--border);border-radius:17px;background:var(--surface);box-shadow:var(--shadow-sm);color:var(--text)}.card-header{background:transparent;border-bottom:1px solid var(--border);font-weight:800;padding:16px 18px}.card-body{padding:18px}.table{--bs-table-bg:transparent;--bs-table-color:var(--text);--bs-table-striped-bg:color-mix(in srgb,var(--surface-2) 75%,transparent);margin-bottom:0}.table thead th{font-size:10.5px;text-transform:uppercase;letter-spacing:.45px;color:var(--muted);border-bottom-color:var(--border);padding:13px 14px}.table td{padding:13px 14px;border-bottom-color:var(--border);vertical-align:middle;font-size:12px}.form-label{font-size:11px;font-weight:700;color:var(--muted)}.form-control,.form-select{border-radius:11px;border:1px solid var(--border);background:var(--surface);color:var(--text);min-height:42px;font-size:12px}.form-control:focus,.form-select:focus{border-color:var(--primary-2);box-shadow:0 0 0 .2rem rgba(11,138,164,.12)}.required:after{content:" *";color:var(--danger)}.btn{border-radius:11px;font-weight:700;font-size:12px;padding:.65rem .95rem}.btn-primary{background:linear-gradient(135deg,#08758e,#0f9eaa);border:0}.btn-primary:hover{filter:brightness(1.04);transform:translateY(-1px)}.btn-outline-secondary{border-color:var(--border);color:var(--muted)}.alert-modern{border-radius:14px;border:0;box-shadow:var(--shadow-sm);font-size:12px}
.quick-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.quick-link{background:var(--surface);border:1px solid var(--border);border-radius:17px;padding:17px;color:var(--text);display:flex;align-items:center;gap:13px;box-shadow:var(--shadow-sm);transition:.2s ease}.quick-link:hover{color:var(--text);transform:translateY(-3px);box-shadow:var(--shadow)}.quick-link .q-icon{width:43px;height:43px;border-radius:13px;display:grid;place-items:center;background:var(--surface-2);color:var(--primary);font-size:17px}.quick-link strong{font-size:12px}.quick-link span{display:block;font-size:10px;color:var(--muted);margin-top:2px}

/* ===== LOGIN PROFESIONAL ===== */
.auth-page{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:32px 20px;
    overflow:hidden;
    background:linear-gradient(135deg,#061b26 0%,#07374a 46%,#0b6f7e 100%);
}

.auth-bg{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
    opacity:.16;
}

.auth-bg-one{
    width:520px;
    height:520px;
    background:#4ed8c7;
    left:-180px;
    top:-190px;
}

.auth-bg-two{
    width:430px;
    height:430px;
    background:#53b4d1;
    right:-150px;
    bottom:-160px;
}

.login-wrapper{
    position:relative;
    z-index:2;
    width:100%;
    display:flex;
    justify-content:center;
}

.login-card{
    width:100%;
    max-width:470px;
    background:var(--surface);
    color:var(--text);
    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;
    padding:34px;
    box-shadow:0 30px 90px rgba(0,0,0,.32);
    animation:fadeUp .45s ease both;
}

.login-card:before{
    content:"";
    display:block;
    height:5px;
    margin:-34px -34px 28px;
    background:linear-gradient(90deg,#19aa99,#087e98);
    border-radius:22px 22px 0 0;
}

.login-brand{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:30px;
}

.login-logo{
    width:54px;
    height:54px;
    flex:0 0 54px;
    display:grid;
    place-items:center;
    border-radius:16px;
    background:linear-gradient(135deg,#18b5a7,#087f99);
    color:#fff;
    font-size:23px;
    box-shadow:0 10px 24px rgba(8,127,153,.25);
}

.login-brand>div:last-child{
    min-width:0;
}

.login-system{
    display:block;
    margin-bottom:2px;
    color:var(--primary);
    font-size:11px;
    font-weight:800;
    letter-spacing:.6px;
    text-transform:uppercase;
}

.login-brand strong{
    display:block;
    font-size:14px;
    line-height:1.3;
}

.login-brand small{
    display:block;
    margin-top:2px;
    color:var(--muted);
    font-size:11px;
}

.login-heading{
    margin-bottom:25px;
}

.login-kicker{
    display:inline-block;
    margin-bottom:8px;
    color:var(--accent);
    font-size:10px;
    font-weight:800;
    letter-spacing:1.2px;
}

.login-heading h1{
    margin:0 0 7px;
    font-size:28px;
    font-weight:800;
    letter-spacing:-.6px;
}

.login-heading p{
    margin:0;
    color:var(--muted);
    font-size:12px;
    line-height:1.6;
}

.login-form .form-label{
    margin-bottom:7px;
}

.input-icon-wrap{
    position:relative;
}

.input-icon-wrap>i{
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    z-index:2;
    color:var(--muted);
    font-size:13px;
    pointer-events:none;
}

.input-icon-wrap .form-control{
    width:100%;
    min-height:50px;
    padding-left:42px;
    padding-right:42px;
    border-radius:13px;
    font-size:13px;
}

.input-icon-wrap .form-control::placeholder{
    color:color-mix(in srgb,var(--muted) 65%,transparent);
}

.password-toggle{
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border:0;
    border-radius:9px;
    background:transparent;
    color:var(--muted);
}

.password-toggle:hover{
    background:var(--surface-2);
    color:var(--text);
}

.login-submit{
    width:100%;
    min-height:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    font-size:13px;
    border-radius:13px;
    box-shadow:0 10px 22px rgba(8,117,142,.20);
}

.login-footer{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    margin-top:24px;
    padding-top:19px;
    border-top:1px solid var(--border);
    color:var(--muted);
    font-size:10px;
}

@media(max-width:575px){
    .auth-page{
        padding:20px 14px;
    }

    .login-card{
        max-width:100%;
        padding:26px 22px;
        border-radius:18px;
    }

    .login-card:before{
        margin:-26px -22px 24px;
        border-radius:18px 18px 0 0;
    }

    .login-heading h1{
        font-size:24px;
    }

    .login-brand strong{
        font-size:13px;
    }
}

.sidebar-overlay{display:none}@keyframes fadeUp{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}@media(max-width:1199px){.quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:991.98px){.app-sidebar{transform:translateX(-105%);transition:.22s ease}.app-sidebar.open{transform:translateX(0)}.app-shell{margin-left:0}.sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,.38);z-index:1040}.sidebar-overlay.show{display:block}.topbar{padding:0 16px}.app-main{padding:20px 16px}.topbar-subtitle{display:none}}@media(max-width:575px){.quick-grid{grid-template-columns:1fr}.page-hero{padding:22px}.page-hero h1{font-size:22px}.role-pill span{display:none}.metric-card{min-height:128px}}