:root { --primary-color: #1a237e; /* น้ำเงินเข้ม */ --secondary-color: #3949ab; /* น้ำเงินกลาง */ --accent-color: #5c6bc0; /* น้ำเงินอ่อน */ --light-color: #f5f5f5; /* เทาอ่อนมาก */ --dark-color: #0d47a1; /* น้ำเงินเข้มมาก */ --success-color: #00c853; /* เขียวสด */ --danger-color: #d50000; /* แดงสด */ --warning-color: #ffd600; /* เหลืองสด */ --info-color: #00b0ff; /* น้ำเงินสด */ --text-color: #212121; /* ดำ */ --border-color: #e0e0e0; /* เทาอ่อน */ --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); --hover-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); } body { font-family: 'Poppins', sans-serif; background-color: var(--light-color); color: var(--text-color); line-height: 1.6; } /* Navbar */ .navbar { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); box-shadow: var(--card-shadow); padding: 1rem 2rem; } .navbar-brand { color: white !important; font-weight: 700; font-size: 1.5rem; letter-spacing: 1px; } .nav-link { color: rgba(255,255,255,0.9) !important; font-weight: 500; padding: 0.5rem 1rem; margin: 0 0.2rem; border-radius: 5px; transition: all 0.3s ease; } .nav-link:hover { color: white !important; background-color: rgba(255,255,255,0.1); transform: translateY(-2px); } /* Cards */ .card { border: none; border-radius: 15px; box-shadow: var(--card-shadow); transition: all 0.3s ease; background-color: white; overflow: hidden; margin-bottom: 1.5rem; } .card:hover { transform: translateY(-5px); box-shadow: var(--hover-shadow); } .card-header { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color: white; border-radius: 15px 15px 0 0 !important; padding: 1.2rem; font-weight: 600; } .card-body { padding: 1.5rem; } /* Buttons */ .btn { padding: 0.8rem 1.5rem; border-radius: 8px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.3s ease; } .btn-primary { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); border: none; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.2); } .btn-secondary { background: linear-gradient(135deg, var(--secondary-color), var(--accent-color)); border: none; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .btn-secondary:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.2); } /* Forms */ .form-control { border: 2px solid var(--border-color); border-radius: 8px; padding: 0.8rem 1rem; transition: all 0.3s ease; } .form-control:focus { border-color: var(--accent-color); box-shadow: 0 0 0 3px rgba(92, 107, 192, 0.1); } /* Tables */ .table { background-color: white; border-radius: 15px; overflow: hidden; box-shadow: var(--card-shadow); } .table thead th { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color: white; border: none; padding: 1rem; font-weight: 600; } .table-hover tbody tr:hover { background-color: rgba(92, 107, 192, 0.05); transition: all 0.3s ease; } /* Status Badges */ .badge { padding: 0.6em 1em; font-weight: 500; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.5px; } .badge-success { background-color: var(--success-color); color: white; } .badge-danger { background-color: var(--danger-color); color: white; } .badge-warning { background-color: var(--warning-color); color: var(--text-color); } .badge-info { background-color: var(--info-color); color: white; } /* Project Cards */ .project-card { border-left: 5px solid var(--accent-color); background: linear-gradient(to right, white, rgba(92, 107, 192, 0.05)); } .project-card .card-header { background: linear-gradient(135deg, var(--secondary-color), var(--accent-color)); } /* Task Items */ .task-item { border-left: 4px solid var(--accent-color); margin-bottom: 1rem; padding: 1rem; background-color: var(--primary-color); color: white; border-radius: 8px; box-shadow: var(--card-shadow); transition: all 0.3s ease; } .task-item h2, .task-item h3, .task-item h4, .task-item a, .task-item span, .task-item p { color: white !important; text-decoration: none; } .task-item .project-title { color: white !important; font-weight: bold; } .task-item:hover { transform: translateX(5px); box-shadow: var(--hover-shadow); } /* Search Bar */ .search-bar { background-color: white; border-radius: 25px; padding: 0.8rem 1.5rem; box-shadow: var(--card-shadow); display: flex; align-items: center; transition: all 0.3s ease; } .search-bar:focus-within { box-shadow: var(--hover-shadow); transform: translateY(-2px); } .search-bar input { border: none; background: none; outline: none; width: 100%; padding: 0.5rem; font-size: 1rem; } /* Dashboard Stats */ .stat-card { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color: white; border-radius: 15px; padding: 2rem; box-shadow: var(--card-shadow); transition: all 0.3s ease; } .stat-card:hover { transform: translateY(-5px); box-shadow: var(--hover-shadow); } .stat-card .stat-value { font-size: 2.5rem; font-weight: 700; margin-bottom: 0.5rem; } .stat-card .stat-label { font-size: 1.1rem; opacity: 0.9; } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--light-color); border-radius: 5px; } ::-webkit-scrollbar-thumb { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(135deg, var(--secondary-color), var(--accent-color)); } /* Animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .fade-in { animation: fadeIn 0.5s ease forwards; } /* Responsive Design */ @media (max-width: 768px) { .navbar { padding: 0.8rem 1rem; } .card { margin-bottom: 1rem; } .stat-card { padding: 1.5rem; } .btn { padding: 0.6rem 1.2rem; } }