html,body{margin:0;padding:0;height:100vh;width:100vw;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:#f4f6f9;overflow:hidden}.app-container{display:flex;width:100vw;height:100vh;overflow:hidden;position:relative}.sidebar-overlay{display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;background:#0f172a66;z-index:998;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.sidebar{width:260px;min-width:260px;height:100%;background-color:#fff;border-right:1px solid #e0e0e0;display:flex;flex-direction:column;padding:20px;box-sizing:border-box;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:999}.sidebar .logo-section{display:flex;align-items:center;gap:10px;margin-bottom:30px}.sidebar .logo-section h2{margin:0;color:#0056b3;font-size:1.2rem}.sidebar .logo-section small{color:#6c757d}.sidebar .sidebar-scroll-content{flex:1;overflow-y:auto;padding-right:5px}.sidebar .sidebar-scroll-content::-webkit-scrollbar{width:4px}.sidebar .sidebar-scroll-content::-webkit-scrollbar-thumb{background:#e0e0e0;border-radius:4px}.sidebar .menu-title{font-size:.8rem;text-transform:uppercase;color:#a0a0a0;margin:20px 0 10px;font-weight:700;white-space:nowrap}.sidebar ul{list-style:none;padding:0;margin:0}.sidebar ul li{border-radius:8px;color:#333;margin-bottom:5px;transition:background .2s}.sidebar ul li:hover,.sidebar ul li.active{background-color:#e8f0fe;color:#1a73e8;font-weight:600}.sidebar ul li a{color:inherit;text-decoration:none;display:flex;align-items:center;gap:12px;padding:12px 15px;width:100%;box-sizing:border-box}.sidebar ul li .badge{background-color:#dc3545;color:#fff;padding:2px 8px;border-radius:10px;font-size:.75rem;margin-left:auto}.sidebar .user-profile{margin-top:auto;display:flex;align-items:center;gap:10px;padding:15px 0 0;border-top:1px solid #eee;width:100%;box-sizing:border-box}.sidebar .user-profile .avatar{background-color:#e8f0fe;color:#1a73e8;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}.sidebar .user-profile .user-info{overflow:hidden}.sidebar .user-profile .user-info h4{margin:0;font-size:.9rem;white-space:nowrap;text-overflow:ellipsis}.sidebar .user-profile .user-info small{color:#6c757d;white-space:nowrap;text-overflow:ellipsis}@media(max-width:1024px)and (min-width:768px){.sidebar{width:110px;min-width:110px;padding:15px 5px;align-items:center}.sidebar .logo-text small,.sidebar .user-info small,.sidebar .menu-title,.sidebar .badge{display:none!important}.sidebar .logo-section{margin-bottom:20px;flex-direction:column;gap:4px;text-align:center}.sidebar .logo-section h2{font-size:1.1rem}.sidebar ul li{border-radius:8px;margin-bottom:8px}.sidebar ul li a{flex-direction:column;gap:6px;padding:10px 4px;text-align:center;font-size:1.1rem}.sidebar ul li a .nav-label{display:block!important;font-size:.72rem;line-height:1.2;font-weight:600;white-space:normal;word-break:break-word}.sidebar .user-profile{border-top:none;flex-direction:column;text-align:center;gap:6px}.sidebar .user-profile .user-info h4{font-size:.75rem;white-space:normal}}@media(max-width:767px){.sidebar{position:fixed;top:0;left:-280px;width:260px;min-width:260px;box-shadow:4px 0 25px #0f172a26}.sidebar.open{left:0}}.sidebar-footer{padding:8px 16px;border-top:1px solid #f1f5f9;margin-top:auto}.logout-btn{width:100%;display:flex;align-items:center;gap:12px;padding:12px 16px;background:transparent;border:none;border-radius:12px;color:#64748b;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s ease-in-out;text-align:left}.logout-btn .logout-icon{font-size:1.1rem;transition:transform .2s}.logout-btn:hover{background-color:#fef2f2;color:#ef4444}.logout-btn:hover .logout-icon{transform:translate(3px)}@media(max-width:767px){.mobile-menu-active .sidebar-overlay{display:block}}.main-content{flex-grow:1;display:flex;flex-direction:column;overflow:hidden;background-color:#f8fafc}.top-header{background-color:#fff;padding:16px 24px;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center;flex-shrink:0}.top-header .header-left{display:flex;align-items:center;gap:16px}.top-header .header-left h1{margin:0;font-size:1.4rem;color:#1a1a1a;font-weight:600}.top-header .header-left .header-subtitle{margin:2px 0 0;color:#6c757d;font-size:.85rem}.top-header .hamburger-menu{display:none;background:none;border:none;font-size:1.6rem;cursor:pointer;color:#334155;padding:0;margin-right:4px}@media(max-width:767px){.top-header .hamburger-menu{display:block}}.top-header .header-right{display:flex;align-items:center;gap:20px}.top-header .header-right .status-badge{display:flex;align-items:center;gap:8px;background-color:#e6f4ea;color:#137333;padding:6px 14px;border-radius:20px;font-size:.8rem;font-weight:500}.top-header .header-right .status-badge .dot{width:8px;height:8px;background-color:#1a7f37;border-radius:50%}@media(max-width:620px){.top-header .header-right .status-badge .status-text{display:none}.top-header .header-right .status-badge{padding:8px}}.top-header .header-right .notification-container{position:relative}.top-header .header-right .notification-container{position:relative;display:inline-block}.top-header .header-right .notification-icon{position:relative;cursor:pointer;width:40px;height:40px;border-radius:12px;background:#f8fafc;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1)}.top-header .header-right .notification-icon .bell-emoji{font-size:1.2rem}.top-header .header-right .notification-icon:hover,.top-header .header-right .notification-icon.active{background-color:#f1f5f9;border-color:#cbd5e1;transform:translateY(-1px)}.top-header .header-right .notification-icon .notif-badge{position:absolute;top:-5px;right:-5px;background:#ef4444;color:#fff;border-radius:50%;min-width:18px;height:18px;padding:0 5px;font-size:.7rem;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid #ffffff;box-shadow:0 2px 4px #ef44444d}.top-header .header-right .notif-dropdown{position:absolute;top:calc(100% + 10px);right:0;width:360px;background:#fffffff5;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(226,232,240,.8);border-radius:16px;box-shadow:0 20px 25px -5px #0f172a14,0 10px 10px -5px #0f172a0a;z-index:1000;overflow:hidden;transform-origin:top right;animation:notifScaleIn .2s cubic-bezier(.16,1,.3,1)}.top-header .header-right .notif-dropdown .notif-dropdown-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #f1f5f9;background:linear-gradient(to bottom,#fff,#f8fafc)}.top-header .header-right .notif-dropdown .notif-dropdown-header h3{margin:0;font-size:.95rem;font-weight:700;color:#0f172a}.top-header .header-right .notif-dropdown .notif-dropdown-header .notif-subtitle{margin:2px 0 0;font-size:.75rem;color:#64748b;font-weight:500}.top-header .header-right .notif-dropdown .notif-dropdown-header .btn-clear-all{background:transparent;border:none;color:#0284c7;font-size:.78rem;font-weight:600;cursor:pointer;padding:4px 8px;border-radius:6px;transition:background .15s}.top-header .header-right .notif-dropdown .notif-dropdown-header .btn-clear-all:hover{background:#e0f2fe;text-decoration:none}.top-header .header-right .notif-dropdown .notif-dropdown-body{max-height:360px;overflow-y:auto}.top-header .header-right .notif-dropdown .notif-dropdown-body::-webkit-scrollbar{width:6px}.top-header .header-right .notif-dropdown .notif-dropdown-body::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.top-header .header-right .notif-dropdown .notif-item{display:flex;gap:14px;padding:16px 20px;border-bottom:1px solid #f1f5f9;transition:all .2s;cursor:pointer}.top-header .header-right .notif-dropdown .notif-item:last-child{border-bottom:none}.top-header .header-right .notif-dropdown .notif-item:hover{background-color:#f8fafccc}.top-header .header-right .notif-dropdown .notif-item .notif-item-icon-wrapper{width:36px;height:36px;border-radius:10px;background:#f1f5f9;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}.top-header .header-right .notif-dropdown .notif-item .notif-item-content{flex:1;display:flex;flex-direction:column;gap:3px}.top-header .header-right .notif-dropdown .notif-item .notif-item-content .notif-item-title-row{display:flex;justify-content:space-between;align-items:baseline}.top-header .header-right .notif-dropdown .notif-item .notif-item-content .notif-item-title-row h4{margin:0;font-size:.88rem;font-weight:600;color:#1e293b;line-height:1.2}.top-header .header-right .notif-dropdown .notif-item .notif-item-content .notif-item-title-row .notif-time{font-size:.7rem;color:#94a3b8;font-weight:500;white-space:nowrap}.top-header .header-right .notif-dropdown .notif-item .notif-item-content p{margin:0;font-size:.82rem;color:#475569;line-height:1.4}.top-header .header-right .notif-dropdown .notif-empty{padding:40px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;color:#94a3b8}.top-header .header-right .notif-dropdown .notif-empty .empty-icon{font-size:2rem}.top-header .header-right .notif-dropdown .notif-empty p{margin:0;font-size:.85rem;font-weight:500}@keyframes notifScaleIn{0%{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes notifSlideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.page-container{flex:1;overflow-y:auto;padding:24px}@media(max-width:767px){.page-container{padding:16px}}.clickable-profile{cursor:pointer;transition:all .2s ease-in-out;border-radius:12px}.clickable-profile:hover{background-color:#0284c70f}