/* Reset */ * { margin:0; padding:0; box-sizing:border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } /* Body & Main */ body { background:#f4f4f4; color:#333; } .main-container { max-width:1200px; margin:20px auto; padding:20px; } /* Navbar */ .navbar { display:flex; justify-content:space-between; align-items:center; background:#2c3e50; padding:10px 20px; color:#fff; border-radius:5px; margin-bottom:20px; } .navbar .logo a { text-decoration:none; color:#fff; font-weight:bold; font-size:20px; } .nav-links { list-style:none; display:flex; gap:15px; } .nav-links li a { text-decoration:none; color:#fff; padding:6px 12px; border-radius:4px; transition:0.3s; } .nav-links li a:hover { background:#34495e; } .user-menu { display:flex; align-items:center; gap:10px; } .btn-logout { text-decoration:none; background:#e74c3c; color:#fff; padding:6px 12px; border-radius:4px; transition:0.3s; } .btn-logout:hover { background:#c0392b; } /* Card layout */ .card { background:#fff; padding:20px; border-radius:8px; box-shadow:0 2px 6px rgba(0,0,0,0.1); margin-bottom:20px; } /* Card row for stats */ .card-row { display:flex; gap:20px; flex-wrap:wrap; } .card-row .card { flex:1; min-width:200px; } /* Table styling */ table { width:100%; border-collapse:collapse; background:#fff; border-radius:5px; overflow:hidden; } table th, table td { padding:10px; border-bottom:1px solid #ddd; text-align:left; } table th { background:#2c3e50; color:#fff; } /* Forms */ form input, form select, form button { padding:8px; margin-bottom:10px; width:100%; border-radius:4px; border:1px solid #ccc; } form button { background:#2c3e50; color:#fff; border:none; cursor:pointer; } form button:hover { background:#34495e; } /* Charts container */ .chart-row { display:flex; gap:20px; flex-wrap:wrap; } .chart-container { flex:1; min-width:300px; background:#fff; padding:15px; border-radius:8px; box-shadow:0 2px 6px rgba(0,0,0,0.1); } /* Hamburger button */ .nav-toggle { display: none; font-size: 24px; background: none; border: none; color: #fff; cursor: pointer; } /* Mobile styles */ @media (max-width: 768px) { .navbar { flex-wrap: wrap; } .nav-toggle { display: block; } .nav-links { width: 100%; flex-direction: column; background: #2c3e50; margin-top: 10px; display: none; } .nav-links li { text-align: center; } .nav-links li a { display: block; padding: 12px; } .nav-links.active { display: flex; } .user-menu { width: 100%; justify-content: center; margin-top: 10px; flex-wrap: wrap; gap: 6px; } } /* =========================== Mobile Navbar =========================== */ .nav-toggle { display: none; font-size: 26px; background: none; border: none; color: #fff; cursor: pointer; } /* Mobile view */ @media (max-width: 768px) { .navbar { flex-wrap: wrap; } .nav-toggle { display: block; } .nav-links { width: 100%; flex-direction: column; background: #2c3e50; margin-top: 10px; display: none; border-radius: 5px; } .nav-links.active { display: flex; } .nav-links li { text-align: center; width: 100%; } .nav-links li a { display: block; padding: 12px; } .user-menu { width: 100%; justify-content: center; margin-top: 10px; flex-wrap: wrap; gap: 8px; } } /* Footer */ footer { text-align:center; padding:15px; margin-top:20px; background:#2c3e50; color:#fff; border-radius:5px; }