/* Jawaab Management Systems - External Styles */ /* Login / public page styles */ body { background-color: #285799; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; } .login-card { background: white; border-radius: 20px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); padding: 2rem; max-width: 400px; width: 100%; } .login-title { color: #285799; font-weight: bold; margin-bottom: 0.5rem; } .text-muted { color: #6c757d !important; margin-bottom: 2rem; } .btn-signin { background-color: #28a745; border-color: #28a745; width: 100%; border-radius: 0.375rem; padding: 0.75rem 1.5rem; font-size: 1rem; font-weight: 500; } .btn-signin:hover { background-color: #218838; border-color: #1e7e34; } .signup-link { color: #28a745; text-decoration: none; } .signup-link:hover { text-decoration: underline; } /* Responsive adjustments for login */ @media (max-width: 576px) { .login-card { margin: 10px; padding: 1.5rem; } body { padding: 10px; } } /* ------------------------------------------------------------------------- Core dashboard styles Scope dashboard pages under a `.dashboard` wrapper (add class to ) This prevents collisions with the login page styles (which use global body). ------------------------------------------------------------------------- */ :root { --primary: #285799; --sidebar: #2c3e50; --card-shadow: 0 4px 6px rgba(0,0,0,0.1); } /* When you put on dashboard pages, these rules apply */ .dashboard { background-color: #f8f9fa; min-height: 100vh; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .dashboard .navbar { background: var(--primary) !important; box-shadow: var(--card-shadow); } .dashboard .navbar-brand { font-weight: 700; color: white !important; } .dashboard .sidebar { background-color: var(--sidebar); min-height: 100vh; padding-top: 1rem; } .dashboard .sidebar .nav-link { color: white; } .dashboard .sidebar .nav-link:hover { background-color: rgba(255,255,255,0.1); } .dashboard .sidebar .nav-link.active { background-color: rgba(255,255,255,0.2); } .dashboard .nav-link { color: #bdc3c7; padding: 0.75rem 1.5rem; border-radius: 0.5rem; margin: 0.25rem 1rem; transition: all 0.3s; } .dashboard .stat-card { border: none; background: white; border-radius: 12px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.3s; } .dashboard .status-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .dashboard .admin-dot { background-color: red; } .dashboard .staff-dot { background-color: blue; } .dashboard .partners-dot { background-color: green; } /* ------------------------------------------------------------------------- Staff dashboard specific layout (scoped under .dashboard) Use `.dashboard` on the body element of staff_dashboard.php ------------------------------------------------------------------------- */ .dashboard * { box-sizing: border-box; } .dashboard .container { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; } /* Sidebar Styles (staff) */ .dashboard .sidebar { background-color: #2c3e50; color: white; padding: 20px 0; } .dashboard .logo { padding: 0 20px 20px; border-bottom: 1px solid #34495e; margin-bottom: 20px; } .dashboard .logo h1 { font-size: 1.5rem; font-weight: 600; } .dashboard .nav-section { margin-bottom: 30px; } .dashboard .nav-section h2 { font-size: 0.9rem; text-transform: uppercase; color: #95a5a6; padding: 0 20px 10px; } .dashboard .nav-links { list-style: none; padding-left: 0; } .dashboard .nav-links li { padding: 12px 20px; cursor: pointer; transition: background-color 0.3s; } .dashboard .nav-links li:hover { background-color: #34495e; } .dashboard .nav-links li.active { background-color: #3498db; border-left: 4px solid #2980b9; } /* Main Content Styles */ .dashboard .main-content { padding: 30px; overflow-y: auto; } .dashboard .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; } .dashboard .header h1 { font-size: 1.8rem; color: #2c3e50; } .dashboard .user-info { display: flex; align-items: center; gap: 15px; } .dashboard .user-avatar { width: 40px; height: 40px; border-radius: 50%; background-color: #3498db; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; } /* Dashboard Grid */ .dashboard .dashboard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; } .dashboard .card { background-color: white; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); padding: 20px; } .dashboard .card h2 { font-size: 1.2rem; margin-bottom: 15px; color: #2c3e50; display: flex; justify-content: space-between; align-items: center; } .dashboard .card h2 span { font-size: 0.9rem; color: #7f8c8d; } /* Calendar */ .dashboard .calendar { grid-column: span 1; } .dashboard .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; } .dashboard .calendar-day { text-align: center; padding: 8px 5px; font-size: 0.9rem; } .dashboard .calendar-day.header { font-weight: bold; color: #7f8c8d; } .dashboard .calendar-day.current { background-color: #3498db; color: white; border-radius: 50%; } .dashboard .calendar-day.other-month { color: #bdc3c7; } /* Projects */ .dashboard .projects { grid-column: span 2; } .dashboard .project-categories { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .dashboard .project-category h3 { font-size: 1rem; margin-bottom: 15px; color: #2c3e50; } .dashboard .project-item { background-color: #f8f9fa; padding: 12px; border-radius: 8px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; } .dashboard .project-item .amount { font-weight: bold; color: #27ae60; } /* Finance */ .dashboard .finance { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .dashboard .finance-chart { height: 150px; background-color: #f8f9fa; border-radius: 8px; display: flex; align-items: flex-end; padding: 10px; margin-top: 10px; } .dashboard .chart-bar { flex: 1; background-color: #3498db; margin: 0 5px; border-radius: 4px 4px 0 0; } .dashboard .chart-bar:nth-child(2) { background-color: #2ecc71; } .dashboard .chart-bar:nth-child(3) { background-color: #e74c3c; } .dashboard .chart-bar:nth-child(4) { background-color: #f39c12; } .dashboard .meeting-info { background-color: #e8f4fc; padding: 15px; border-radius: 8px; margin-top: 15px; } .dashboard .meeting-info h4 { color: #3498db; margin-bottom: 5px; } /* Donations */ .dashboard .donations { grid-column: span 1; } .dashboard .donation-item { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #ecf0f1; } .dashboard .donation-item:last-child { border-bottom: none; } /* Quick Access */ .dashboard .quick-access { grid-column: span 1; } .dashboard .quick-buttons { display: flex; flex-direction: column; gap: 15px; } .dashboard .quick-btn { background-color: #3498db; color: white; border: none; padding: 12px 15px; border-radius: 8px; cursor: pointer; font-weight: 500; transition: background-color 0.3s; } .dashboard .quick-btn:hover { background-color: #2980b9; } .dashboard .quick-btn.secondary { background-color: #ecf0f1; color: #2c3e50; } .dashboard .quick-btn.secondary:hover { background-color: #d5dbdb; } /* Responsive */ @media (max-width: 1200px) { .dashboard .dashboard-grid { grid-template-columns: repeat(2, 1fr); } .dashboard .projects, .dashboard .finance { grid-column: span 2; } } @media (max-width: 768px) { .dashboard .container { grid-template-columns: 1fr; } .dashboard .sidebar { display: none; } .dashboard .dashboard-grid { grid-template-columns: 1fr; } .dashboard .projects, .dashboard .finance, .dashboard .calendar, .dashboard .donations, .dashboard .quick-access { grid-column: span 1; } .dashboard .project-categories { grid-template-columns: 1fr; } .dashboard .finance { grid-template-columns: 1fr; } }