/* Wonder Wisps Portal - Shared Styles */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;600;700;800&family=Quicksand:wght@400;500;600;700&display=swap');
:root{--purple-deep:#7B4B94;--purple-mid:#9D6DB5;--pink-pop:#E8A5D4;--pink-light:#F5D1E6;--yellow-pop:#FFE66D;--dark:#2D1B3D;--gray-light:#F8F5FA;--sidebar-w:260px}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Quicksand',sans-serif;background:var(--gray-light);color:var(--dark);display:flex;min-height:100vh}
/* Sidebar */
.sidebar{width:var(--sidebar-w);background:#fff;border-right:2px solid #F5D1E6;display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:100}
.sidebar-header{padding:1.5rem;border-bottom:2px solid #F5D1E6;text-align:center}
.sidebar-logo{height:44px}
.sidebar-nav{flex:1;padding:1rem 0;overflow-y:auto}
.nav-section{padding:0 1rem;margin-bottom:1.25rem}
.nav-section-title{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#bbb;margin-bottom:.4rem;padding:0 .75rem}
.nav-link{display:flex;align-items:center;gap:.65rem;padding:.6rem .75rem;border-radius:10px;text-decoration:none;color:#666;font-weight:500;font-size:.9rem;transition:all .15s;margin-bottom:2px}
.nav-link:hover{background:rgba(123,75,148,.06);color:var(--purple-deep)}
.nav-link.active{background:linear-gradient(135deg,rgba(123,75,148,.1),rgba(232,165,212,.1));color:var(--purple-deep);font-weight:700}
.nav-link-icon{font-size:1.1rem;width:24px;text-align:center}
.sidebar-footer{padding:1rem 1.5rem;border-top:2px solid #F5D1E6}
.user-info{display:flex;align-items:center;gap:.65rem}
.user-avatar{font-size:1.5rem}
.user-name{font-weight:700;font-size:.85rem;color:var(--dark)}
.user-org{font-size:.75rem;color:#999}
.logout-btn{margin-top:.5rem;background:none;border:none;color:#ccc;font-size:.8rem;cursor:pointer;font-family:'Quicksand',sans-serif}
.logout-btn:hover{color:#e74c3c}
/* Main Content */
.main{flex:1;margin-left:var(--sidebar-w);padding:2rem}
.page-header{margin-bottom:2rem}
.page-header h1{font-family:'Baloo 2',cursive;font-size:1.6rem;color:var(--dark);margin-bottom:.25rem}
.page-header p{color:#888;font-size:.92rem}
.header-actions{display:flex;gap:.75rem;margin-top:.75rem}
/* Cards */
.card{background:#fff;border-radius:16px;padding:1.5rem;border:2px solid #F5D1E6;margin-bottom:1.25rem}
.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.card-title{font-family:'Baloo 2',cursive;font-size:1.15rem;color:var(--dark)}
/* Stats Grid */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-bottom:1.5rem}
.stat-card{background:#fff;border-radius:16px;padding:1.25rem;border:2px solid #F5D1E6;text-align:center}
.stat-icon{font-size:1.75rem;margin-bottom:.35rem}
.stat-value{font-family:'Baloo 2',cursive;font-size:1.6rem;color:var(--purple-deep)}
.stat-label{font-size:.8rem;color:#888;margin-top:.15rem}
.stat-change{font-size:.75rem;font-weight:600}
.stat-change.positive{color:#27ae60}
/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 1.25rem;border-radius:99px;border:none;font-weight:700;font-size:.85rem;cursor:pointer;transition:all .15s;font-family:'Quicksand',sans-serif;text-decoration:none}
.btn-primary{background:linear-gradient(135deg,var(--purple-deep),var(--pink-pop));color:#fff}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 15px rgba(123,75,148,.3)}
.btn-outline{background:#fff;color:var(--purple-deep);border:2px solid var(--pink-light)}
.btn-outline:hover{background:var(--gray-light)}
/* Progress */
.progress-bar{width:100%;height:12px;background:#F5D1E6;border-radius:99px;overflow:hidden;margin:.75rem 0}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--purple-deep),var(--pink-pop));border-radius:99px;transition:width .5s}
/* Tables */
.data-table{width:100%;border-collapse:collapse;font-size:.88rem}
.data-table th{text-align:left;padding:.65rem .75rem;background:var(--gray-light);color:#888;font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.5px;border-bottom:2px solid #F5D1E6}
.data-table td{padding:.65rem .75rem;border-bottom:1px solid #F5D1E6;color:#555}
.data-table tr:hover td{background:rgba(123,75,148,.02)}
.status-badge{font-size:.72rem;padding:2px 8px;border-radius:99px;font-weight:700}
.status-delivered{background:#D4EDDA;color:#155724}
.status-processing{background:#FFF3CD;color:#856404}
.status-pending{background:#F5D1E6;color:#004085}
/* Responsive */
@media(max-width:768px){
.sidebar{transform:translateX(-100%);transition:transform .3s}
.sidebar.open{transform:translateX(0)}
.main{margin-left:0}
.stats-grid{grid-template-columns:1fr 1fr}
.mobile-menu-btn{display:block!important}
}
.mobile-menu-btn{display:none;position:fixed;top:1rem;left:1rem;z-index:200;background:var(--purple-deep);color:#fff;border:none;width:40px;height:40px;border-radius:10px;font-size:1.2rem;cursor:pointer}