/* ------------------------------ Reset & basics ------------------------------ */ * { box-sizing: border-box; margin: 0; padding: 0; } a { color: inherit; text-decoration: none; } ul { list-style: none; } /* ------------------------------ LOGIN PAGE (scoped) Usage: ------------------------------ */ .login-page { min-height: 100vh; display: flex; justify-content: center; align-items: center; background: #f2f2f2; font-family: Arial, sans-serif; } .login-container { background: #fff; padding: 22px 30px; border-radius: 8px; box-shadow: 0 6px 16px rgba(0,0,0,0.08); width: 340px; max-width: 92%; } .login-container h2 { text-align: center; margin-bottom: 18px; color: #222; font-size: 20px; font-weight: 600; } .login-container input[type="text"], .login-container input[type="password"] { width: 100%; padding: 10px 12px; margin: 8px 0; border: 1px solid #d6dbe0; border-radius: 6px; font-size: 14px; } .login-container input[type="submit"] { width: 100%; padding: 10px; margin-top: 10px; background: #0e9ad6; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; } .login-container input[type="submit"]:hover { filter: brightness(.95); } .login-container .error { color: #c0392b; text-align: center; margin-top: 12px; font-size: 14px; } /* ------------------------------ ADMIN DASHBOARD (scoped) Usage: ------------------------------ */ body.admin-body { font-family: Arial, sans-serif; color: #222; background: #e9eef3; } /* Sidebar (fixed left) */ .admin-body .sidebar { position: fixed; left: 0; top: 0; width: 260px; height: 100vh; background: #0f6a92; /* deep blue */ color: #fff; display: flex; flex-direction: column; z-index: 1000; } .admin-body .brand { display: flex; align-items: center; gap: 10px; padding: 18px 20px; background: #0b5a78; font-weight: 700; font-size: 16px; } /* small status dot next to brand */ .admin-body .brand .online-dot { width: 10px; height: 10px; border-radius: 50%; background: #3ad65c; box-shadow: 0 0 6px rgba(58,214,92,.6); } /* Sidebar menu */ .admin-body .menu { margin-top: 6px; padding-bottom: 24px; overflow: auto; flex-grow: 1; } .admin-body .menu-item { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,.08); cursor: pointer; } .admin-body .menu-item a { color: #fff; display: flex; align-items: center; gap: 10px; width: 100%; } .admin-body .menu-item:hover, .admin-body .menu-item.active { background: rgba(0,0,0,0.08); } /* small icon box */ .admin-body .mi-icon { width: 22px; text-align: center; } /* Topbar (fixed) */ .admin-body .topbar { position: fixed; left: 260px; top: 0; height: 58px; width: calc(100% - 260px); background: #1493c9; color: #fff; display: flex; align-items: center; justify-content: flex-end; padding: 0 20px; z-index: 900; box-shadow: 0 2px 4px rgba(0,0,0,0.08); font-weight: 600; } /* Main content area */ .admin-body .content { margin-left: 260px; /* sidebar width */ /* padding: 24px 28px; */ min-height: calc(100vh - 72px); } /* Dashboard header/title */ .admin-body .dashboard h1 { font-size: 28px; color: #333; margin-bottom: 18px; } /* Stat cards row */ .admin-body .cards { display: flex; gap: 18px; margin-bottom: 20px; flex-wrap: wrap; } .admin-body .card { background: #fff; border-radius: 6px; padding: 16px; min-width: 200px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); border: 1px solid #e6eaee; text-align: left; } .admin-body .card-title { font-size: 13px; color: #6b6f74; margin-bottom: 6px; } .admin-body .card-value { font-size: 22px; font-weight: 700; } /* big panel area */ .admin-body .dash-panel { background: #dfe3e7; border-radius: 4px; padding: 18px; min-height: 420px; border: 1px dashed #c9ced6; } /* small utilities */ .admin-body .small { font-size: 13px; color: #666; } /* ------------------------------ Responsive tweaks ------------------------------ */ @media (max-width: 992px) { .admin-body .sidebar { width: 200px; } .admin-body .topbar { left: 200px; width: calc(100% - 200px); } .admin-body .content { margin-left: 200px; } } @media (max-width: 768px) { .admin-body .sidebar { position: absolute; left: -260px; transition: left 0.3s ease; } .admin-body .sidebar.active { left: 0; } .admin-body .topbar { left: 0; width: 100%; } .admin-body .content { margin-left: 0; } } /* Masters submenu */ .menu-item.has-dropdown { flex-direction: column; align-items: flex-start; padding: 0; /* remove extra spacing */ } .menu-item.has-dropdown > a { width: 100%; padding: 14px 20px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(255,255,255,.08); } .menu-item.has-dropdown .submenu { display: none; flex-direction: column; width: 100%; background: #0d5b7c; } .menu-item.has-dropdown.open .submenu { display: flex; } .menu-item.has-dropdown .submenu li a { display: block; padding: 10px 40px; /* indented to look nested */ color: #fff; font-size: 14px; } .menu-item.has-dropdown .submenu li a:hover { background: rgba(255,255,255,0.12); }