*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:#f4f7fb;color:#182235}.layout{display:flex;min-height:100vh}.sidebar{position:fixed;left:0;top:0;bottom:0;width:250px;padding:18px 14px;background:linear-gradient(180deg,#09285f,#1769d2);overflow-y:auto}.side-logo{display:block;width:100%;height:105px;object-fit:contain;background:transparent;border-radius:0;padding:0;margin:0 auto 22px}.sidebar nav a{display:block;color:#edf6ff;text-decoration:none;padding:12px 14px;border-radius:11px;margin:5px 0;font-weight:600}.sidebar nav a:hover{background:#ffffff1c}.main{margin-left:250px;width:calc(100% - 250px)}.topbar{height:68px;background:#fff;border-bottom:1px solid #e7edf5;display:flex;align-items:center;justify-content:space-between;padding:0 30px}.content{max-width:1300px;padding:28px;margin:auto}.hero{border-radius:20px;padding:27px;color:white;background:linear-gradient(120deg,#123e91,#159bd3);box-shadow:0 12px 30px #1769d230}.hero h1{margin:0 0 7px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:20px 0}.stat{background:#fff;border-radius:16px;padding:20px;box-shadow:0 6px 22px #17365d0b}.stat span{font-size:25px}.stat small{display:block;color:#667085;margin-top:8px}.stat b{font-size:32px;display:block;margin-top:5px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}.panel{background:#fff;border-radius:16px;padding:22px;box-shadow:0 6px 22px #17365d0b}.panel h2{margin-top:0}.list{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:1px solid #edf1f6}.list small{display:block;color:#718096;margin-top:4px}.list a{color:#1769d2}.quick{display:grid;grid-template-columns:1fr 1fr;gap:12px}.quick a{padding:17px;border-radius:12px;background:#f0f6ff;color:#1453a6;text-decoration:none;font-weight:700}.form-row{display:flex;gap:10px;flex-wrap:wrap;margin:15px 0}.form-row input,.form-row select,.form-grid input,.form-grid select,.form-grid textarea{padding:12px;border:1px solid #d8e0eb;border-radius:9px;min-width:150px;flex:1;background:#fff}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-grid textarea{grid-column:1/-1;min-height:110px}.btn{border:0;border-radius:9px;padding:12px 18px;font-weight:700;cursor:pointer}.primary{background:#1769d2;color:white}.full{width:100%;margin-top:14px}.table-wrap{overflow:auto;margin-top:18px}table{width:100%;border-collapse:collapse;min-width:650px}th,td{text-align:left;padding:12px;border-bottom:1px solid #edf1f6}th{background:#f7f9fc}.alert{padding:12px;border-radius:10px;margin:10px 0}.success{background:#e8f8ef;color:#146c3a}.danger{background:#ffe8e8;color:#a20d0d}.notice{padding:14px;background:#eef6ff;border-radius:10px;color:#174c88}.login{min-height:100vh;height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#09285f,#178bd0,#cceeff);padding:12px;overflow:hidden}.login-box{width:min(440px,100%);max-height:calc(100vh - 24px);background:white;border-radius:24px;padding:22px 40px;box-shadow:0 25px 70px #0003;text-align:center;overflow:hidden}.login-logo{width:220px;max-width:72%;height:auto;display:block;margin:0 auto}.login-box h1{font-size:22px;margin:8px 0 4px}.login-box p{color:#718096;margin:8px 0 10px}.login-box form{text-align:left}.login-box label{display:block;font-weight:700;margin:10px 0 6px}.login-box input{width:100%;padding:12px;border:1px solid #d8e0eb;border-radius:10px}.demo{font-size:13px;color:#667085;margin-top:18px}@media(max-width:850px){.sidebar{width:72px}.side-logo{height:55px;padding:4px}.sidebar nav a{font-size:0;text-align:center;padding:12px 4px}.sidebar nav a:first-letter{font-size:19px}.main{margin-left:72px;width:calc(100% - 72px)}.topbar{padding:0 15px}.content{padding:16px}.stats{grid-template-columns:1fr 1fr}.grid2{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.form-grid textarea{grid-column:auto}}@media(max-width:480px){.stats,.quick{grid-template-columns:1fr}.hero{padding:20px}.login-box{padding:18px 22px;border-radius:20px}.login-logo{width:175px;max-width:68%}.login-box h1{font-size:20px}.login-box label{margin-top:8px}.login-box input{padding:11px}.full{margin-top:12px}}
.user-mini{display:flex;align-items:center;gap:10px}.avatar{border-radius:50%;overflow:hidden;display:grid;place-items:center;background:linear-gradient(135deg,#123e91,#159bd3);color:#fff;font-weight:800;flex:0 0 auto}.avatar img{width:100%;height:100%;object-fit:cover;display:block}.avatar-sm{width:40px;height:40px;font-size:14px}.avatar-md{width:48px;height:48px;font-size:15px}.photo-upload{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid #d8e0eb;border-radius:9px;background:#fff;font-weight:600;color:#475467;cursor:pointer}.photo-upload input{max-width:210px}.muted{color:#667085;font-size:13px;margin-top:-5px}.side-profile{display:flex;align-items:center;gap:10px;padding:8px 10px 14px;color:#fff}.side-profile .avatar{background:#fff;color:#1453a6}.side-profile small{display:block;opacity:.85;margin-top:2px}@media(max-width:850px){.user-mini span{display:none}.photo-upload{width:100%}.photo-upload input{max-width:100%}}


/* === Zea E-Learning: sidebar logo highlight === */
.sidebar .sidebar-logo,
.sidebar .logo-wrap,
.sidebar .brand-logo,
.sidebar .brand {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
}

.sidebar .sidebar-logo img,
.sidebar .logo-wrap img,
.sidebar .brand-logo img,
.sidebar .brand img {
    display: block;
    width: auto;
    max-width: 150px;
    max-height: 82px;
    object-fit: contain;
    background: transparent !important;
}

/* If the existing sidebar uses a plain image/container, give only the logo a subtle frame. */
.sidebar-logo,
.logo-wrap,
.brand-logo {
    width: calc(100% - 24px);
    min-height: 96px;
    margin: 12px auto 18px;
    padding: 8px 12px;
    border: 1px solid rgba(255,255,255,.38);
    border-radius: 14px;
    box-sizing: border-box;
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
}


/* === FINAL UI: sidebar logo white outline + slimmer login card === */
.sidebar .side-logo{
    width: 190px !important;
    max-width: calc(100% - 18px) !important;
    height: 96px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 6px auto 20px !important;
    padding: 7px !important;
    background: transparent !important;
    border: 2px solid rgba(255,255,255,.92) !important;
    border-radius: 13px !important;
    box-shadow: 0 3px 12px rgba(0,0,0,.16) !important;
}

/* Sidebar frame remains the same blue as the sidebar. */
.sidebar .side-logo:hover{
    border-color:#fff !important;
    box-shadow:0 4px 16px rgba(0,0,0,.20) !important;
}

/* Login card: narrower, but still tall enough for the button without scrolling. */
.login-box{
    width: min(380px, calc(100vw - 28px)) !important;
    max-width: 380px !important;
    padding: 18px 28px !important;
    border-radius: 21px !important;
}

.login-logo{
    width: 190px !important;
    max-width: 70% !important;
    margin: 0 auto 2px !important;
}

.login-box h1{
    font-size: 21px !important;
    margin: 6px 0 3px !important;
}

.login-box p{
    margin: 6px 0 8px !important;
}

.login-box label{
    margin: 8px 0 5px !important;
}

.login-box input{
    padding: 11px !important;
}

.login-box .full{
    margin-top: 11px !important;
}

@media(max-width:850px){
    .sidebar .side-logo{
        width:58px !important;
        height:58px !important;
        max-width:none !important;
        padding:4px !important;
        border-width:2px !important;
        border-radius:10px !important;
        margin:2px auto 15px !important;
    }
}

@media(max-width:480px){
    .login-box{
        width: calc(100vw - 24px) !important;
        max-width: 380px !important;
        padding: 15px 21px !important;
    }
    .login-logo{
        width: 160px !important;
        max-width: 66% !important;
    }
}


/* === FINAL: LOGO SIDEBAR PLAIN === */
.sidebar .side-logo{
    border: 0 !important;
    outline: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    padding: 0 !important;
}

.btn.danger{background:#dc2626!important;color:#fff!important;border-color:#dc2626!important}.btn{display:inline-block;text-decoration:none;cursor:pointer}