/* AsetMe v4.0 - Optimized CSS */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:system-ui,-apple-system,sans-serif;background:#f8fafc;min-height:100vh}

/* Toast */
.toast-container{position:fixed;top:1rem;right:1rem;z-index:9999;pointer-events:none}
.toast{background:#fff;border-radius:.75rem;box-shadow:0 4px 20px rgba(0,0,0,.15);padding:1rem;margin-bottom:.5rem;display:flex;align-items:center;gap:.75rem;min-width:280px;max-width:360px;border-left:4px solid #3b82f6;animation:slideIn .3s ease;pointer-events:auto}
.toast.success{border-color:#10b981}.toast.error{border-color:#ef4444}.toast.warning{border-color:#f59e0b}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}

/* Sidebar */
.sidebar{position:fixed;left:0;top:0;width:16rem;height:100vh;background:#fff;border-right:1px solid #e5e7eb;z-index:40;transition:transform .3s}
.sidebar-header{padding:1.25rem;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;gap:.75rem}
.sidebar-logo{width:2.5rem;height:2.5rem;background:#2563eb;border-radius:.5rem;display:flex;align-items:center;justify-content:center;color:#fff}
.sidebar-nav{padding:1rem}
.nav-item{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-radius:.75rem;color:#6b7280;cursor:pointer;transition:all .2s;margin-bottom:.25rem}
.nav-item:hover,.nav-item.active{background:#eff6ff;color:#2563eb}
.sidebar-footer{position:absolute;bottom:0;left:0;right:0;padding:1rem;border-top:1px solid #e5e7eb}

/* Main */
.main{margin-left:16rem;min-height:100vh}
.header{background:#2563eb;color:#fff;padding:1.5rem}
.welcome-card{background:rgba(255,255,255,.1);border-radius:.75rem;padding:1.25rem;margin-top:1rem}
.quick-btns{display:flex;gap:.75rem;margin-top:1rem}
.quick-btn{flex:1;padding:.75rem;border-radius:.75rem;border:none;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem}
.quick-btn.primary{background:#fff;color:#2563eb}
.quick-btn.success{background:#22c55e;color:#fff}
.content{padding:1.5rem}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.5rem}
.stat-card{background:#fff;border-radius:.75rem;padding:1.25rem;border:1px solid #e5e7eb;display:flex;align-items:center;gap:1rem}
.stat-icon{width:3rem;height:3rem;border-radius:.75rem;display:flex;align-items:center;justify-content:center;font-size:1.25rem}
.stat-icon.blue{background:#dbeafe;color:#2563eb}
.stat-icon.green{background:#dcfce7;color:#16a34a}
.stat-icon.red{background:#fee2e2;color:#dc2626}
.stat-icon.orange{background:#ffedd5;color:#ea580c}
.stat-num{font-size:1.5rem;font-weight:700;color:#1f2937}
.stat-label{font-size:.75rem;color:#9ca3af;text-transform:uppercase}

/* Cards */
.menu-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.menu-card{background:#fff;border-radius:.75rem;padding:1.5rem;border:1px solid #e5e7eb;text-align:center;cursor:pointer;transition:all .2s}
.menu-card:hover{box-shadow:0 10px 30px rgba(0,0,0,.1);transform:translateY(-4px)}
.menu-icon{width:3.5rem;height:3.5rem;border-radius:.75rem;margin:0 auto .75rem;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.5rem}

/* Table */
.table-section{background:#fff;border-radius:.75rem;border:1px solid #e5e7eb;overflow:hidden}
.table-header{padding:1.25rem;border-bottom:1px solid #e5e7eb}
.table-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1rem}
.search-box{flex:1;min-width:200px;padding:.625rem 1rem;border:2px solid #e5e7eb;border-radius:.5rem;font-size:.875rem}
.search-box:focus{outline:none;border-color:#2563eb}
.filter-select{padding:.625rem 1rem;border:2px solid #e5e7eb;border-radius:.5rem}
table{width:100%;border-collapse:collapse}
th{background:#f9fafb;padding:.75rem 1rem;text-align:left;font-size:.75rem;font-weight:600;color:#6b7280;text-transform:uppercase}
td{padding:.75rem 1rem;border-bottom:1px solid #f3f4f6;font-size:.875rem}
tr:hover{background:#f9fafb}

/* Badge */
.badge{padding:.25rem .625rem;border-radius:1rem;font-size:.625rem;font-weight:600;text-transform:uppercase}
.badge.blue{background:#dbeafe;color:#2563eb}
.badge.green{background:#dcfce7;color:#16a34a}
.badge.red{background:#fee2e2;color:#dc2626}
.badge.orange{background:#ffedd5;color:#ea580c}

/* Buttons */
.btn{padding:.625rem 1rem;border-radius:.5rem;border:none;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem}
.btn-primary{background:#2563eb;color:#fff}
.btn-primary:hover{background:#1d4ed8}
.btn-success{background:#22c55e;color:#fff}
.btn-danger{background:#ef4444;color:#fff}
.btn-icon{width:2rem;height:2rem;border-radius:.5rem;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
.btn-icon.edit{background:#dbeafe;color:#2563eb}
.btn-icon.delete{background:#fee2e2;color:#dc2626}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:50;display:none;align-items:center;justify-content:center;padding:1rem}
.modal.show{display:flex}
.modal-content{background:#fff;border-radius:1rem;width:100%;max-width:28rem;max-height:90vh;overflow-y:auto;animation:modalIn .2s ease}
@keyframes modalIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.modal-header{padding:1.25rem;border-bottom:1px solid #e5e7eb;display:flex;justify-content:space-between;align-items:center}
.modal-body{padding:1.25rem}
.form-group{margin-bottom:1rem}
.form-group label{display:block;font-size:.75rem;font-weight:600;color:#6b7280;text-transform:uppercase;margin-bottom:.5rem}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:.75rem;border:2px solid #e5e7eb;border-radius:.5rem;font-size:.875rem}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:#2563eb}
.form-actions{display:flex;gap:.75rem;margin-top:1.5rem}
.form-actions button{flex:1;padding:.75rem;border-radius:.75rem;font-weight:600;cursor:pointer;border:none}

/* Pagination */
.pagination{padding:1rem;display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap}
.pg-btn{min-width:2.25rem;height:2.25rem;border-radius:.5rem;border:none;background:#f3f4f6;cursor:pointer;font-size:.875rem}
.pg-btn.active{background:#2563eb;color:#fff}
.pg-btn:disabled{opacity:.5;cursor:not-allowed}

/* Page */
.page{display:none}
.page.active{display:block}

/* Overlay */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:30;display:none}
.overlay.show{display:block}

/* Mobile */
@media(max-width:1024px){
    .sidebar{transform:translateX(-100%)}
    .sidebar.open{transform:translateX(0)}
    .main{margin-left:0}
    .mobile-toggle{display:block!important}
    .welcome-card{display:none}
    .stats{grid-template-columns:repeat(2,1fr)}
    .menu-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
    .stats{grid-template-columns:1fr 1fr}
    .menu-grid{grid-template-columns:1fr 1fr}
    .table-actions{flex-direction:column}
    .hide-mobile{display:none!important}
}

/* Login Page */
.login-page{min-height:100vh;background:linear-gradient(135deg,#2563eb,#1e40af);display:flex;align-items:center;justify-content:center;padding:1rem}
.login-card{background:#fff;border-radius:1.5rem;padding:2rem;width:100%;max-width:24rem;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.login-logo{width:5rem;height:5rem;margin:0 auto 1rem;display:flex;align-items:center;justify-content:center}
.login-logo img{max-width:100%;max-height:100%}
.login-title{text-align:center;margin-bottom:1.5rem}
.login-title h1{font-size:1.5rem;color:#1f2937}
.login-title p{font-size:.875rem;color:#6b7280}