:root{--app-sidebar-w:258px;--app-sidebar-w-collapsed:85px;--app-margin:20px;--app-header-h:70px;--app-gap:20px;--sidebar-bg:#fff;--sidebar-text:#64748b;--sidebar-text-active:#fff;--sidebar-accent:#0f172a;--sidebar-hover:#f1f5f9;--sidebar-border:#0000000a;--sidebar-shadow:0 10px 40px #0000000a;--sidebar-transition:all .35s cubic-bezier(.4,0,.2,1)}.dark{--sidebar-bg:#1c1c1c;--sidebar-text:#94a3b8;--sidebar-text-active:#fff;--sidebar-accent:#0038a8;--sidebar-hover:#2a2a2a;--sidebar-border:#ffffff14;--sidebar-shadow:0 10px 40px #0006}.sidebar-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:40;opacity:0;pointer-events:none;background:#0f172a4d;transition:opacity .25s;position:fixed;inset:0}.sidebar-overlay.show{opacity:1;pointer-events:auto}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.sidebar{top:var(--app-margin);left:var(--app-margin);height:calc(100dvh - calc(var(--app-margin)*2));width:var(--app-sidebar-w);background:var(--sidebar-bg);color:var(--sidebar-text);transform:translateX(calc(-100% - var(--app-margin) - 20px));transition:var(--sidebar-transition);z-index:1001;border:1px solid var(--sidebar-border);box-shadow:var(--sidebar-shadow);border-radius:28px;flex-direction:column;display:flex;position:fixed;overflow:hidden}.sidebar.collapsed{overflow:visible!important}.sidebar.open{transform:translate(0)}.sidebar.collapsed{width:var(--app-sidebar-w-collapsed)}@media (min-width:992px){.sidebar{transform:translate(0)}.sidebar-overlay{display:none}}.sidebar-header{justify-content:space-between;align-items:center;gap:12px;padding:24px 20px 16px;display:flex}.brand{flex:1;justify-content:center;align-items:center;gap:12px;min-width:0;display:flex}.brand-logo{width:40px;height:40px;transition:var(--sidebar-transition);flex-shrink:0;justify-content:center;align-items:center;display:flex}.logo-icon-img{object-fit:contain;width:100%;height:100%}.logo-text-img{object-fit:contain;width:auto;height:24px;transition:all .3s}.logo-text-img.full-logo{max-width:140px}.sidebar.collapsed .brand{flex:none;width:100%}.sidebar.collapsed .brand-logo{width:28px;height:28px}.sidebar-title{white-space:nowrap;letter-spacing:-.5px;color:#0038a8;margin:0;font-size:1.4rem;font-weight:750;transition:opacity .2s}.sidebar.collapsed .sidebar-header{flex-direction:column;align-items:center;padding:32px 0 24px}.sidebar.collapsed .collapse-toggle{margin-top:12px;position:static}.sidebar.collapsed .menu-btn{justify-content:center;padding:12px 0}.sidebar.collapsed .menu-content{justify-content:center;gap:0}.collapse-toggle{background:var(--sidebar-hover);cursor:pointer;width:28px;height:28px;color:var(--sidebar-text);border:none;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;transition:all .2s;display:flex;position:absolute;right:20px}.collapse-toggle:hover{background:var(--sidebar-accent);color:#fff}@media (max-width:991.98px){.collapse-toggle{display:none}}.dark .sidebar-title{color:#f8fafc}.toggle-btn{background:var(--sidebar-hover);width:28px;height:28px;color:var(--sidebar-text);cursor:pointer;border:none;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;transition:all .2s;display:none}.toggle-btn:hover{background:var(--sidebar-accent);color:#fff}@media (min-width:992px){.toggle-btn{display:flex}}.sidebar.collapsed .toggle-btn{display:none}.sidebar-nav{flex:1;padding:0 16px 20px;overflow:hidden auto}.sidebar.collapsed .sidebar-nav{overflow:visible}.menu-btn{width:100%;color:inherit;cursor:pointer;background:0 0;border:none;border-radius:12px;justify-content:space-between;align-items:center;margin:2px 0;padding:12px 14px;font-weight:600;transition:all .2s;display:flex}.menu-btn:hover{background:var(--sidebar-hover);color:var(--sidebar-accent)}@media (max-width:991.98px){.menu-btn{margin:1px 0;padding:8px 14px}}.menu-btn.active{color:#fff;background:#0038a8;box-shadow:0 4px 15px #0038a84d}.menu-content{align-items:center;gap:12px;display:flex}.menu-icon{flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;font-size:1.1rem;display:flex}.menu-label{white-space:nowrap;font-size:.9rem}.sidebar.collapsed .menu-label,.sidebar.collapsed .chevron,.sidebar.collapsed .sidebar-search{display:none}.sidebar.collapsed .menu-btn{justify-content:center;margin:4px 0;padding:15px 0}.sidebar.collapsed .menu-content{gap:0}.chevron{opacity:.5;font-size:.75rem;transition:transform .25s}.menu-btn.active .chevron{opacity:1}.chevron.rotate{transform:rotate(180deg)}.submenu{max-height:0;padding-left:0;transition:max-height .3s cubic-bezier(.4,0,.2,1);overflow:hidden}.submenu.open{max-height:500px;margin-bottom:8px}.submenu-btn{width:100%;color:inherit;cursor:pointer;background:0 0;border:none;border-radius:12px;align-items:center;margin:2px 0;padding:12px 14px 12px 50px;font-size:.9rem;font-weight:600;transition:all .2s;display:flex}@media (max-width:991.98px){.submenu-btn{margin:1px 0;padding:8px 14px 8px 50px}}.submenu-btn.active{color:#0038a8;box-shadow:none;background:#0038a814;font-weight:700;position:relative}.submenu-btn.active:before{content:"";background:#0038a8;border-radius:50%;width:6px;height:6px;position:absolute;left:28px;box-shadow:0 0 8px #0038a866}.sidebar.collapsed .submenu{display:none}.menu-group{position:relative}.sidebar-tooltip{background:var(--sidebar-bg);border:1px solid var(--sidebar-border);z-index:10000;pointer-events:all;-webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px);border-radius:12px;width:max-content;min-width:140px;max-width:260px;margin-left:20px;padding:6px;animation:.25s ease-out tooltipFadeIn;position:absolute;top:50%;left:100%;transform:translateY(-50%);box-shadow:12px 0 45px #0038a81f}.sidebar-tooltip:before{content:"";background:0 0;width:30px;position:absolute;top:0;bottom:0;left:-25px}@keyframes tooltipFadeIn{0%{opacity:0;transform:translateY(-50%)translate(-10px)}to{opacity:1;transform:translateY(-50%)translate(0)}}.tooltip-submenu{flex-direction:column;gap:2px;display:flex}.tooltip-sub-btn{width:100%;color:var(--sidebar-text);text-align:left;cursor:pointer;background:0 0;border:none;border-radius:12px;padding:10px 16px;font-size:.9rem;font-weight:600;transition:all .2s}.tooltip-sub-btn:hover{background:var(--sidebar-hover);color:var(--sidebar-accent)}.tooltip-sub-btn.active{color:#1e3a8a;box-shadow:none;background:#1e3a8a14;font-weight:700}.sidebar-footer{display:none}
:root{--app-sidebar-w:260px;--app-sidebar-w-collapsed:85px;--app-header-h:70px;--app-gap:20px;--app-margin:20px;--header-bg:#fff;--header-border:#0000000a;--header-shadow:0 4px 20px #00000008;--header-text:#1e293b}.dark{--header-bg:#1c1c1c;--header-border:#ffffff1a;--header-shadow:0 10px 40px #0006;--header-text:#f8fafc}.header{top:var(--app-margin);left:calc(var(--app-margin) + var(--app-sidebar-w) + var(--app-gap));right:var(--app-margin);height:var(--app-header-h);background:var(--header-bg);border:1px solid var(--header-border);z-index:900;box-shadow:var(--header-shadow);border-radius:24px;justify-content:space-between;align-items:center;padding:0 24px;transition:all .35s cubic-bezier(.4,0,.2,1);display:flex;position:fixed}.header.collapsed{left:calc(var(--app-margin) + var(--app-sidebar-w-collapsed) + var(--app-gap))}@media (max-width:991.98px){.header,.header.collapsed{left:var(--app-margin);right:var(--app-margin);padding:0 8px;transition:opacity .2s,visibility .2s}.sidebar-mobile-open .header{opacity:0;visibility:hidden;pointer-events:none}}.header-left{align-items:center;gap:16px;min-width:0;display:flex}@media (max-width:991.98px){.header-left{gap:8px}}.menu-toggle{background:var(--sidebar-hover);width:40px;height:40px;color:var(--header-text);cursor:pointer;border:none;border-radius:12px;justify-content:center;align-items:center;font-size:1.25rem;transition:all .2s;display:none}@media (max-width:991.98px){.menu-toggle{gap:8px;width:34px;height:34px;display:flex}}.menu-toggle:hover{color:#fff;background:#0038a8}.header-title-wrapper{flex-direction:column;min-width:0;display:flex}.header-title{color:var(--header-text);letter-spacing:-.3px;white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:1.2rem;font-weight:750;line-height:1.2;overflow:hidden}@media (max-width:991.98px){.header-title{white-space:nowrap;text-transform:none;letter-spacing:-.01em;text-overflow:clip;font-size:.72rem;line-height:1.1;display:block;overflow:visible}.header-title span{white-space:nowrap;opacity:.9;font-size:.72rem;display:block}}.header-subtitle{color:var(--sidebar-text);opacity:.6;font-size:.75rem;font-weight:500}@media (max-width:991.98px){.header-subtitle{display:none}}.header-right{flex-shrink:0;align-items:center;gap:12px;display:flex}@media (max-width:991.98px){.header-right{gap:4px}}.dark-mode-toggle{background:var(--sidebar-hover);cursor:pointer;width:44px;height:44px;color:var(--header-text);border:none;border-radius:12px;justify-content:center;align-items:center;font-size:1.1rem;transition:all .2s;display:flex}.dark-mode-toggle:hover{color:#fff;background:#0038a8}@media (max-width:991.98px){.dark-mode-toggle{background:0 0;border-radius:8px;width:28px;height:28px;font-size:.85rem}}.notification-bell{background:var(--sidebar-hover);cursor:pointer;width:44px;height:44px;color:var(--header-text);border:none;border-radius:12px;justify-content:center;align-items:center;font-size:1.1rem;transition:all .2s;display:flex;position:relative}.notification-bell:hover{color:#fff;background:#0038a8}.notification-bell:hover .notification-badge{color:#0038a8;background:#fff}.notification-badge{color:#fff;border:2px solid var(--header-bg);background:#6b7280;border-radius:10px;justify-content:center;align-items:center;min-width:20px;height:20px;padding:0 5px;font-size:10px;font-weight:800;display:flex;position:absolute;top:-4px;right:-4px;box-shadow:0 2px 8px #6b72804d}.notification-badge-unread{background:#ef4444;animation:2s ease-in-out infinite pulse-badge;box-shadow:0 2px 8px #ef444466}@keyframes pulse-badge{0%,to{transform:scale(1);box-shadow:0 2px 8px #ef444466}50%{transform:scale(1.1);box-shadow:0 4px 16px #ef444499}}@media (max-width:991.98px){.notification-bell{background:0 0;border-radius:8px;width:28px;height:28px;font-size:.85rem}.notification-badge{min-width:16px;height:16px;font-size:8px;top:-2px;right:-2px}}.user-menu-wrapper{position:relative}.user-menu-trigger{background:var(--sidebar-hover);cursor:pointer;border:none;border-radius:12px;align-items:center;gap:10px;padding:4px;transition:all .2s;display:flex}@media (max-width:991.98px){.user-menu-trigger{background:0 0;gap:0;padding:0}}.user-avatar-small{background:#3b82f61a;border-radius:10px;justify-content:center;align-items:center;width:36px;height:36px;display:flex;overflow:hidden}@media (max-width:991.98px){.user-avatar-small{background:0 0;border-radius:8px;width:28px;height:28px}}.user-avatar-small i{color:#0038a8}.user-info-header{flex-direction:column;align-items:flex-start;display:flex}@media (max-width:991.98px){.user-info-header{display:none}}@media (min-width:992px){.user-info-header{display:none}.user-menu-trigger{padding-right:4px}}.user-name-header{font-size:.85rem;font-weight:700;line-height:1.2}.user-role-header{opacity:.6;font-size:.7rem}.user-menu-overlay{z-index:1000;position:fixed;inset:0}.user-menu-dropdown{background:var(--sidebar-bg);border:1px solid var(--header-border);z-index:1001;border-radius:20px;width:240px;position:absolute;top:calc(100% + 12px);right:0;overflow:hidden;box-shadow:0 10px 40px #0000001a}.user-menu-info{border-bottom:1px solid var(--header-border);padding:20px}.user-menu-name{color:var(--header-text);margin-bottom:2px;font-size:.95rem;font-weight:750}.user-menu-role{color:#0038a8;font-size:.75rem;font-weight:700}.user-menu-item{cursor:pointer;width:100%;color:var(--header-text);background:0 0;border:none;align-items:center;gap:12px;padding:14px 20px;font-size:.9rem;font-weight:600;transition:all .2s;display:flex}.user-menu-item:hover{background:#fef2f2}
.notification-wrapper{position:relative}.notification-overlay{z-index:1000;position:fixed;inset:0}.notification-dropdown{background:var(--sidebar-bg);border:1px solid var(--header-border);z-index:1001;border-radius:16px;flex-direction:column;width:340px;max-height:420px;animation:.2s slideDown;display:flex;position:absolute;top:calc(100% + 8px);right:0;overflow:hidden;box-shadow:0 8px 24px #0000001f}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.notification-header{background:linear-gradient(135deg,#0038a8 0%,#0052d4 100%);border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.notification-header h3{color:#fff;text-transform:uppercase;letter-spacing:.5px;margin:0;font-size:.8rem;font-weight:700}.notification-count{color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fff3;border:1px solid #ffffff4d;border-radius:12px;padding:3px 10px;font-size:.7rem;font-weight:600}.notification-list{flex:1;max-height:400px;overflow-y:auto}.notification-item{border-bottom:1px solid var(--header-border);cursor:pointer;align-items:center;gap:10px;padding:12px 16px;transition:all .2s;display:flex;position:relative}.notification-item:before{content:"";background:linear-gradient(135deg,#0038a8 0%,#0052d4 100%);width:3px;transition:transform .2s;position:absolute;top:0;bottom:0;left:0;transform:scaleX(0)}.notification-item:hover{background:linear-gradient(90deg,#0038a80d,#0000);transform:translate(2px)}.notification-item:hover:before{transform:scaleX(1)}.notification-icon{color:#fff;background:linear-gradient(135deg,#6b7280 0%,#9ca3af 100%);border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;font-size:1.1rem;transition:all .2s;display:flex;box-shadow:0 2px 8px #6b728033}.notification-icon-unread{background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%);box-shadow:0 4px 12px #ef444459}.notification-icon-read{background:linear-gradient(135deg,#6b7280 0%,#9ca3af 100%);box-shadow:0 4px 12px #6b728040}.notification-icon-approved{background:linear-gradient(135deg,#10b981 0%,#059669 100%);box-shadow:0 4px 12px #10b98159}.notification-icon-revision{background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%);box-shadow:0 4px 12px #ef444459}.notification-item:hover .notification-icon{transform:scale(1.05)}.notification-item:hover .notification-icon-unread{box-shadow:0 6px 20px #ef444473}.notification-item:hover .notification-icon-read{box-shadow:0 6px 20px #6b728059}.notification-item:hover .notification-icon-approved{box-shadow:0 6px 20px #10b98173}.notification-item:hover .notification-icon-revision{box-shadow:0 6px 20px #ef444473}.notification-unread:before{background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%)}.notification-read:before{background:linear-gradient(135deg,#6b7280 0%,#9ca3af 100%)}.notification-unread:hover{background:linear-gradient(90deg,#ef444414,#0000)}.notification-read{opacity:.7}.notification-read:hover{opacity:1;background:linear-gradient(90deg,#6b728014,#0000)}.notification-content{flex:1;min-width:0}.notification-title{color:var(--header-text);margin-bottom:3px;font-size:.8rem;font-weight:700;line-height:1.2}.notification-subtitle{color:#0038a8;align-items:center;gap:4px;margin-bottom:3px;font-size:.7rem;font-weight:600;display:flex}.notification-nip{color:var(--sidebar-text);opacity:.7;background:var(--sidebar-hover);border-radius:4px;margin-bottom:3px;padding:2px 6px;font-size:.65rem;font-weight:500;display:inline-block}.notification-time{color:var(--sidebar-text);opacity:.6;align-items:center;gap:4px;font-size:.65rem;font-weight:500;display:flex}.notification-arrow{color:var(--sidebar-text);opacity:.3;font-size:1.1rem;transition:all .3s}.notification-item:hover .notification-arrow{opacity:1;color:#0038a8;transform:translate(6px)}.notification-empty{text-align:center;color:var(--sidebar-text);opacity:.5;padding:80px 20px}.notification-empty i{color:#0038a8;opacity:.3;margin-bottom:16px;font-size:3.5rem;display:block}.notification-empty p{margin:0;font-size:.9rem;font-weight:600}.notification-footer{border-top:1px solid var(--header-border);background:var(--sidebar-hover);padding:10px 16px}.notification-view-all{color:#fff;cursor:pointer;text-transform:uppercase;letter-spacing:.5px;background:linear-gradient(135deg,#0038a8 0%,#0052d4 100%);border:none;border-radius:8px;width:100%;padding:8px;font-size:.75rem;font-weight:600;transition:all .2s}.notification-view-all:hover{transform:translateY(-1px);box-shadow:0 4px 12px #0038a840}.notification-view-all:active{transform:translateY(0)}@media (max-width:991.98px){.notification-dropdown{width:340px;right:-10px}.notification-icon{width:42px;height:42px;font-size:1.1rem}.notification-item{padding:14px 16px}}
.notification-note{color:var(--sidebar-text);opacity:.8;align-items:flex-start;gap:4px;margin-top:3px;margin-bottom:3px;font-size:.65rem;font-style:italic;line-height:1.3;display:flex}.notification-note i{flex-shrink:0;margin-top:2px}