:root{--primary:#2b1a12;--primary-hover:#3e271a;--accent:#d4a373;--bg-color:#fcfaf8;--sidebar-bg:#2b1a12;--sidebar-width:260px;--topbar-height:60px;--text-main:#333;--text-light:#666;--white:#fff;--danger:#dc2626;--success:#16a34a;--border:#e5e7eb}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-main);font-family:Outfit,sans-serif;line-height:1.5}.login-wrapper{background-color:var(--bg-color);justify-content:center;align-items:center;min-height:100vh;padding:1.5rem;display:flex}.login-card{background:var(--white);text-align:center;border-radius:12px;width:100%;max-width:400px;padding:3rem 2rem;box-shadow:0 10px 25px #0000000d}.login-card h2{color:var(--primary);letter-spacing:2px;text-transform:uppercase;margin-bottom:2rem;font-weight:600}.form-group{text-align:left;margin-bottom:1.5rem}.form-group label{color:var(--text-light);margin-bottom:.5rem;font-size:.875rem;font-weight:500;display:block}.form-control{border:1px solid var(--border);border-radius:6px;width:100%;padding:.75rem 1rem;font-family:inherit;font-size:1rem;transition:border-color .2s}.form-control:focus{border-color:var(--primary);outline:none}.btn{background:var(--primary);color:var(--white);cursor:pointer;border:none;border-radius:6px;justify-content:center;align-items:center;gap:.5rem;width:100%;padding:.75rem 1.5rem;font-family:inherit;font-size:1rem;font-weight:500;transition:all .2s;display:inline-flex}.btn:hover:not(:disabled){background:var(--primary-hover)}.btn:disabled{opacity:.7;cursor:not-allowed}.btn-danger{background:var(--danger)}.btn-danger:hover:not(:disabled){background:#b91c1c}.btn-outline{color:var(--text-main);border:1px solid var(--border);background:0 0}.btn-outline:hover:not(:disabled){background:#f3f4f6}.btn-sm{width:auto;padding:.4rem .75rem;font-size:.875rem}.mobile-topbar{height:var(--topbar-height);background:var(--sidebar-bg);color:var(--white);z-index:200;justify-content:space-between;align-items:center;padding:0 1rem;display:none;position:sticky;top:0}.mobile-topbar h1{letter-spacing:2px;text-transform:uppercase;color:var(--accent);font-size:1.25rem;font-weight:600}.hamburger-btn{cursor:pointer;color:var(--white);background:0 0;border:none;flex-direction:column;gap:5px;padding:6px;display:flex}.hamburger-btn span{background:var(--white);border-radius:2px;width:22px;height:2px;transition:all .3s;display:block}.hamburger-btn.open span:first-child{transform:translateY(7px)rotate(45deg)}.hamburger-btn.open span:nth-child(2){opacity:0}.hamburger-btn.open span:nth-child(3){transform:translateY(-7px)rotate(-45deg)}.sidebar-overlay{z-index:150;background:#00000080;display:none;position:fixed;inset:0}.sidebar-overlay.visible{display:block}.dashboard-layout{height:100vh;display:flex;overflow:hidden}.sidebar{width:var(--sidebar-width);background:var(--sidebar-bg);color:var(--white);z-index:200;flex-direction:column;flex-shrink:0;transition:transform .3s;display:flex}.sidebar-header{border-bottom:1px solid #ffffff1a;padding:2rem 1.5rem}.sidebar-header h1{letter-spacing:2px;text-transform:uppercase;color:var(--accent);font-size:1.5rem;font-weight:600}.nav-links{flex:1;padding:1rem 0;list-style:none;overflow-y:auto}.nav-item{color:#ffffffb3;cursor:pointer;align-items:center;gap:.75rem;padding:.75rem 1.5rem;font-size:.9rem;text-decoration:none;transition:all .2s;display:flex}.nav-item:hover,.nav-item.active{color:var(--white);border-left:3px solid var(--accent);background:#ffffff0d}.sidebar-footer{border-top:1px solid #ffffff1a;padding:1.5rem}.main-content{background:var(--bg-color);flex:1;min-width:0;padding:2rem;overflow-y:auto}.page-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.5rem;display:flex}.page-title{color:var(--primary);font-size:1.5rem;font-weight:600}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:2rem;display:grid}.stat-card{background:var(--white);border-radius:8px;align-items:center;gap:1rem;padding:1.25rem;display:flex;box-shadow:0 4px 6px #00000005}.stat-icon{width:44px;height:44px;color:var(--primary);background:#d4a3731a;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex}.stat-info h3{color:var(--text-light);font-size:.8rem;font-weight:500}.stat-info p{color:var(--primary);font-size:1.4rem;font-weight:700}.table-container{background:var(--white);-webkit-overflow-scrolling:touch;border-radius:8px;overflow-x:auto;box-shadow:0 4px 6px #00000005}table{border-collapse:collapse;width:100%;min-width:500px}th,td{text-align:left;border-bottom:1px solid var(--border);padding:.875rem 1rem}th{color:var(--text-light);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;background:#f9fafb;font-size:.8rem;font-weight:500}td{vertical-align:middle;font-size:.9rem}.img-thumbnail{object-fit:cover;border-radius:4px;width:44px;height:44px}.badge{white-space:nowrap;border-radius:999px;margin-right:.2rem;padding:.2rem .5rem;font-size:.7rem;font-weight:500;display:inline-block}.badge-green{color:#166534;background:#dcfce7}.badge-purple{color:#6b21a8;background:#f3e8ff}.badge-orange{color:#9a3412;background:#ffedd5}.badge-gray{color:#374151;background:#f3f4f6}.action-btns{flex-wrap:wrap;gap:.4rem;display:flex}.modal-overlay{z-index:1000;opacity:0;visibility:hidden;background:#00000080;justify-content:center;align-items:flex-end;padding:0;transition:all .2s;display:flex;position:fixed;inset:0}.modal-overlay.active{opacity:1;visibility:visible}.modal-content{background:var(--white);border-radius:16px 16px 0 0;flex-direction:column;width:100%;max-width:100%;max-height:92vh;transition:all .25s;display:flex;transform:translateY(40px);box-shadow:0 -8px 30px #00000026}.modal-overlay.active .modal-content{transform:translateY(0)}.modal-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;display:flex}.modal-header h3{color:var(--primary);font-size:1.1rem}.close-btn{cursor:pointer;color:var(--text-light);background:0 0;border:none}.modal-form{flex-direction:column;flex:1;min-height:0;display:flex}.modal-body{-webkit-overflow-scrolling:touch;flex:1;padding:1.25rem 1.5rem;overflow-y:auto}.modal-footer{border-top:1px solid var(--border);justify-content:flex-end;gap:.75rem;padding:1rem 1.5rem;display:flex}.toast-container{z-index:9999;flex-direction:column;gap:.5rem;display:flex;position:fixed;bottom:1.5rem;left:1rem;right:1rem}.toast{background:var(--white);border-left:4px solid var(--primary);border-radius:8px;align-items:center;gap:.75rem;padding:.875rem 1.25rem;font-size:.9rem;animation:.3s forwards slideIn;display:flex;box-shadow:0 10px 15px -3px #0000001a}.toast.error{border-left-color:var(--danger)}.toast.success{border-left-color:var(--success)}@keyframes slideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(20px)}}.checkbox-group{align-items:center;gap:.5rem;margin-bottom:.5rem;display:flex}.checkbox-group label{margin-bottom:0;font-size:.9rem}@media (width>=600px){.modal-overlay{align-items:center;padding:1rem}.modal-content{border-radius:10px;max-width:520px;transform:translateY(20px)}.toast-container{width:340px;left:auto;right:1.5rem}}@media (width>=900px){.mobile-topbar,.sidebar-overlay{display:none!important}.main-content{padding:2rem 2.5rem}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem}}@media (width<=899px){.mobile-topbar{display:flex}.dashboard-layout{flex-direction:column;height:100vh;overflow:hidden}.sidebar{z-index:200;height:100vh;position:fixed;top:0;left:0;transform:translate(-100%)}.sidebar.open{transform:translate(0);box-shadow:4px 0 20px #0000004d}.sidebar-header{padding-top:calc(var(--topbar-height) + 1rem)}.main-content{height:calc(100vh - var(--topbar-height));flex:1;margin-top:0;padding:1.25rem 1rem;overflow-y:auto}.page-title{font-size:1.2rem}.stats-grid{grid-template-columns:repeat(2,1fr);gap:.75rem}.stat-card{padding:1rem}.stat-info p{font-size:1.2rem}th,td{padding:.75rem}}@media (width<=480px){.stats-grid{grid-template-columns:1fr 1fr;gap:.6rem}.btn-sm{padding:.35rem .6rem;font-size:.8rem}.page-header{flex-direction:column;align-items:flex-start}}
