.sidebar{width:220px;background-color:var(--bg-color);padding:clamp(.75rem,2vw,1rem);border-radius:.75rem;box-shadow:0 6px 12px #0000000d;display:flex;flex-direction:column;justify-content:flex-start;height:calc(100vh - 2rem);position:sticky;top:1rem;transition:all .3s ease-in-out;color:var(--text-color);z-index:50;font-size:clamp(.85rem,2vw,1rem)}.sidebar-nav{display:flex;flex-direction:column;gap:clamp(.4rem,1vw,.6rem)}.sidebar-link{display:flex;align-items:center;gap:clamp(.4rem,1vw,.6rem);padding:clamp(.55rem,1.5vw,.8rem);border-radius:.6rem;color:var(--text-color);font-weight:500;font-size:clamp(.85rem,2vw,.95rem);text-decoration:none;cursor:pointer;transition:all .2s ease-in-out}.sidebar-link:hover{background-color:var(--hover-bg);transform:translate(3px) scale(1.02);box-shadow:0 2px 6px #00000014}.sidebar-link.active{background-color:var(--strathmore-blue);color:var(--strathmore-light);font-weight:600}.sidebar-link .icon{font-size:clamp(16px,3vw,20px);display:flex;align-items:center;justify-content:center}.logout-btn{color:var(--logout-color);font-weight:500;margin-top:auto;padding:clamp(.55rem,1.5vw,.8rem);border-radius:.6rem;transition:all .2s ease;display:flex;align-items:center;gap:clamp(.4rem,1vw,.6rem)}.logout-btn:hover{background-color:var(--logout-hover-bg);transform:translate(2px)}.sidebar-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#00000059;z-index:40}@media (max-width: 1024px){.sidebar{width:200px}}@media (max-width: 768px){.sidebar{position:fixed;top:0;left:-100%;height:100vh;width:220px;margin:0;border-radius:0;box-shadow:0 4px 12px #0003;transition:left .3s ease-in-out;background-color:var(--bg-color)}.sidebar.sidebar-open{left:0}.sidebar-nav{gap:clamp(.3rem,1vw,.5rem)}.sidebar-link{font-size:clamp(.8rem,2vw,.9rem);padding:clamp(.5rem,1.2vw,.7rem)}.logout-btn{padding:clamp(.5rem,1.2vw,.7rem);gap:clamp(.3rem,.8vw,.5rem)}}.stratizen-layout{display:grid;grid-template-columns:240px 1fr 320px;height:100vh;transition:grid-template-columns .3s ease}.stratizen-layout.sidebar-collapsed{grid-template-columns:70px 1fr 320px}@media (max-width: 1200px){.stratizen-rightpanel{display:none}}@media (max-width: 768px){.stratizen-layout{grid-template-columns:1fr}.stratizen-sidebar{position:fixed;top:0;left:-100%;height:100%;width:220px;z-index:50;transition:transform .3s ease}.stratizen-layout.sidebar-open .stratizen-sidebar{transform:translate(100%)}}.stratizen-sidebar{display:flex;flex-direction:column;gap:.5rem;padding:1rem;background-color:var(--color-sidebar-bg);border-radius:16px 0 0 16px;box-shadow:0 6px 12px #0000000d;transition:all .3s ease;overflow:hidden}.stratizen-sidebar.collapsed{width:70px}.sidebar-btn{display:flex;align-items:center;gap:.6rem;padding:.65rem .8rem;border-radius:12px;cursor:pointer;font-size:.95rem;font-weight:500;transition:all .2s ease-in-out}.sidebar-btn:hover{transform:translate(3px);box-shadow:0 2px 6px #00000014}.stratizen-main{padding:1rem;overflow-y:auto;border-radius:20px;margin:1rem;box-shadow:0 2px 6px #00000014;transition:all .3s ease}.stratizen-rightpanel{padding:1rem;display:flex;flex-direction:column;gap:1rem;border-radius:0 16px 16px 0;transition:all .3s ease}.rightpanel-section{padding:.8rem;border-radius:16px;box-shadow:0 1px 3px #0000000d}.nav-center{display:flex;align-items:center;gap:.8rem;cursor:pointer}.logo-center{height:40px;width:auto;object-fit:contain;display:block}.brand-name{font-size:1.5rem;font-weight:800;line-height:1.2}.nav-icon-btn{background:transparent;border:none;cursor:pointer;padding:.6rem;border-radius:50%;transition:transform .2s ease,box-shadow .3s ease;color:var(--color-gold)}.nav-icon-btn:hover{transform:scale(1.1);box-shadow:0 0 10px #fdb81399}.profile-container,.settings-container{position:relative;display:inline-block}.profile-img{width:40px;height:40px;border-radius:50%;cursor:pointer;object-fit:cover;border:2px solid var(--color-gold);transition:transform .25s ease,box-shadow .25s ease}.profile-img:hover{transform:scale(1.08);box-shadow:0 0 12px #fdb81399}.profile-dropdown,.settings-dropdown{position:absolute;top:50px;right:0;width:220px;border-radius:16px;background-color:var(--color-dropdown-bg);box-shadow:0 8px 16px #00000026;padding:10px;z-index:1000;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all .25s ease-in-out}.profile-container:hover .profile-dropdown,.settings-container:hover .settings-dropdown{opacity:1;visibility:visible;transform:translateY(0)}.profile-dropdown button,.settings-dropdown button{width:100%;background:transparent;border:none;text-align:left;padding:8px;cursor:pointer;border-radius:10px;display:flex;align-items:center;gap:6px;transition:.2s ease-in-out}.profile-dropdown button:hover,.settings-dropdown button:hover{transform:translate(4px);box-shadow:inset 0 0 6px #0000000d}.profile-info{display:flex;align-items:center;gap:10px;padding-bottom:6px}.dropdown-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;border:1px solid var(--color-border)}.dropdown-name{font-weight:600}.app-shell{display:flex;flex-direction:column;height:100vh;background-color:var(--color-bg);color:var(--color-text);transition:background-color .3s ease,color .3s ease;font-family:Segoe UI,Roboto,sans-serif}.top-nav{background-color:var(--color-navbar);color:var(--color-navbar-text);display:flex;justify-content:space-between;align-items:center;padding:.6rem 1.2rem;box-shadow:0 2px 6px #00000014;z-index:100;transition:background-color .3s ease,color .3s ease}.nav-left,.nav-right{display:flex;align-items:center;gap:1rem}.menu-toggle,.nav-btn{background:none;border:none;cursor:pointer;color:var(--color-navbar-text);font-size:1.5rem;transition:color .25s ease,transform .2s ease}.menu-toggle:hover,.nav-btn:hover{color:var(--color-accent);transform:scale(1.1)}.brand-name{font-weight:700;font-size:1.3rem;letter-spacing:-.5px}.profile-img{border-radius:50%;height:42px;width:42px;object-fit:cover;border:2px solid var(--color-accent)}.main-layout{display:flex;flex:1;overflow:hidden}.main-content{flex:1;padding:1.2rem;overflow-y:auto;background-color:var(--color-bg);color:var(--color-text);transition:background-color .3s ease,color .3s ease}.sidebar{width:240px;background-color:var(--color-sidebar-bg);border-right:1px solid var(--color-border, rgba(0,0,0,.08));padding:1rem;display:flex;flex-direction:column;gap:.5rem;transition:width .3s ease,transform .3s ease,background-color .3s ease;z-index:200}.sidebar.collapsed{width:70px}.sidebar-nav{display:flex;flex-direction:column;gap:.4rem}.sidebar-link{display:flex;align-items:center;gap:.75rem;padding:.65rem .9rem;border-radius:.6rem;text-decoration:none;color:var(--color-sidebar-text);font-weight:500;transition:background-color .25s ease,color .25s ease,transform .2s ease}.sidebar-link i{font-size:1.2rem;color:var(--color-accent)}.sidebar-link:hover{background-color:var(--color-hover, rgba(0,0,0,.05));transform:translate(5px)}.sidebar-link.active{background-color:var(--color-accent);color:#fff}.sidebar-link.active i{color:#fff}.logout-btn{color:var(--color-danger, #d22630);margin-top:auto;font-weight:600;transition:background-color .25s ease}.logout-btn:hover{background-color:#d2263026}.profile-dropdown,.settings-dropdown{background:var(--color-dropdown-bg);border-radius:12px;box-shadow:0 8px 20px #0000002e;padding:10px;z-index:1000;min-width:180px;transition:all .25s ease-in-out;animation:fadeIn .25s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 1024px){.sidebar{width:220px}}@media (max-width: 768px){.sidebar{position:fixed;left:-100%;top:0;height:100%;width:240px;border-radius:0;box-shadow:2px 0 10px #0003;transition:left .3s ease}.sidebar.open{left:0}.main-content{padding:1rem}}@tailwind base;@tailwind components;@tailwind utilities;:root{--color-bg: #ffffff;--color-text: #1e293b;--color-primary: #4f46e5;--color-primary-hover: #4338ca;--color-accent: #f59e0b}.dark{--color-bg: #1a1f2b;--color-text: rgba(255, 255, 255, .92);--color-primary: #6366f1;--color-primary-hover: #818cf8;--color-accent: #fbbf24}html,body{margin:0;min-width:320px;min-height:100vh;background-color:var(--color-bg);color:var(--color-text);font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.6;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color .3s ease,color .3s ease;display:flex;flex-direction:column}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.25}h1{font-size:2.25rem}h2{font-size:1.75rem}h3{font-size:1.5rem}a{color:var(--color-primary);text-decoration:none;font-weight:500;transition:color .2s ease}a:hover{color:var(--color-primary-hover)}button{background-color:var(--color-primary);color:#fff;padding:.6em 1.2em;border-radius:.5rem;border:none;font-weight:500;font-size:1rem;cursor:pointer;transition:background-color .2s ease,transform .1s ease}button:hover{background-color:var(--color-primary-hover);transform:translateY(-1px)}button:active{transform:translateY(0)}button:focus{outline:3px solid var(--color-accent);outline-offset:2px}.card{background-color:#ffffff0a;border-radius:1rem;padding:1.5rem;box-shadow:0 4px 10px #0000000d;transition:box-shadow .2s ease,transform .2s ease}.dark .card{background-color:#ffffff0f}.card:hover{transform:translateY(-3px);box-shadow:0 8px 18px #00000014}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--color-primary);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--color-primary-hover)}::-webkit-scrollbar-track{background:transparent}