.sidebar{z-index:1000;background:#111827;flex-direction:column;width:fit-content;padding:24px;transition:left .3s;display:flex;position:fixed;top:0;bottom:0;left:0}.logo{align-items:center;gap:10px;display:flex}.logo-image{object-fit:contain;width:46px;height:46px}.logo h2{color:#fff;margin:0;font-size:26px}.sidebar nav{flex-direction:column;gap:15px;margin-top:40px;display:flex}.sidebar a{color:#fff;align-items:center;gap:10px;padding:12px;text-decoration:none;display:flex}.logout-btn{color:#9ca3af;font:inherit;cursor:pointer;background:0 0;border:none;align-items:center;gap:10px;margin-top:auto;padding:12px;display:flex}.logout-btn:hover{color:#fff}.profile{color:#fff;align-items:center;gap:12px;margin-top:auto;display:flex}.profile-image{object-fit:cover;border-radius:50%;flex-shrink:0;width:52px;height:52px}.profile-info strong{color:#fff;font-size:14px;display:block}.profile-info p{color:#fff;margin:3px 0 0;font-size:12px}@media (width<=1024px) and (width>=701px){.sidebar{align-items:center;width:80px;padding:24px 12px}.logo h2{display:none}.sidebar a{justify-content:center}.sidebar a span,.profile-info{display:none}}@media (width<=700px){.menu-btn{z-index:1200;cursor:pointer;background:#fff;border:none;border-radius:8px;padding:8px;display:flex;position:fixed;top:15px;left:15px}.sidebar{width:260px;height:100vh;left:-300px}.sidebar.open{left:0}.logo h2{display:block}.sidebar a span{display:inline}.profile-info{display:block}}.sidebar{overflow-y:auto}.sidebar a.active{background:#ffffff1a;border-radius:10px}.topbar{justify-content:flex-end;margin-bottom:24px;display:flex}.topbar-date{color:#52514e;background:#fff;border:1px solid #e5e7eb;border-radius:10px;align-items:center;gap:10px;padding:8px 14px;font-size:13px;display:flex}.topbar-date input{color:#0b0b0b;background:0 0;border:none;outline:none;font-size:14px}.login-page{background:#f3f4f6;justify-content:center;align-items:center;min-height:100vh;display:flex}.login-card{text-align:center;background:#fff;border-radius:20px;width:380px;padding:40px;box-shadow:0 20px 50px #00000014}.logo{color:#2563eb;margin-bottom:20px;font-size:32px;font-weight:800}.login-card h2{margin-bottom:15px}.login-card p{color:#6b7280;margin-bottom:30px}.login-card input{border:1px solid #ddd;border-radius:10px;width:100%;margin-bottom:15px;padding:14px;font-size:15px}.login-card button{color:#fff;cursor:pointer;background:#2563eb;border:none;border-radius:10px;width:100%;padding:14px;font-size:16px;font-weight:600}.login-card button:hover{background:#1d4ed8}*{box-sizing:border-box}body{background:#f9fafb;margin:0;font-family:Arial,sans-serif}.layout{min-height:100vh;display:flex}main{flex:1;margin-left:260px;padding:30px}.menu-btn{display:none}@media (width<=1024px) and (width>=701px){.sidebar{align-items:center;width:80px;padding:24px 12px}.logo{justify-content:center;display:flex}.logo h2{display:none}.logo-image{width:42px;height:42px}.sidebar nav{width:100%}.sidebar a{justify-content:center}.sidebar a span{display:none}.profile{justify-content:center;width:100%}.profile div{display:none}}@media (width<=700px){.main-content,main{margin-left:0;padding:15px}.menu-btn{z-index:1200;background:#fff;border:none;border-radius:8px;padding:8px;display:flex;position:fixed;top:15px;left:15px}.sidebar{width:260px;height:100vh;transition:left .3s;left:-300px}.sidebar.open{left:0}.sidebar a span{display:inline}}