/* Style CSS Konsisten untuk Sistem Absensi - Berbasis Bootstrap 5 */

   /* Import Bootstrap 5 (jika tidak menggunakan CDN, unduh dan link lokal) */
   /* @import url('https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css'); */

   /* Reset dan Base Styles */
   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }

   body {
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
       background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
       color: #2c3e50;
       min-height: 100vh;
   }

   /* Navbar Custom */
   .navbar {
       background: linear-gradient(90deg, #4a90e2 0%, #357abd 100%) !important;
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   }

   .navbar-brand {
       font-weight: bold;
       color: white !important;
   }

   .navbar-nav .nav-link {
       color: rgba(255, 255, 255, 0.9) !important;
       transition: color 0.3s ease;
   }

   .navbar-nav .nav-link:hover {
       color: white !important;
       background: rgba(255, 255, 255, 0.1);
       border-radius: 5px;
   }

   /* Container Utama */
   .main-container {
       max-width: 1200px;
       margin: 20px auto;
       padding: 20px;
       background: rgba(255, 255, 255, 0.95);
       border-radius: 15px;
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
       animation: fadeIn 0.5s ease-in-out;
   }

   @keyframes fadeIn {
       from { opacity: 0; transform: translateY(20px); }
       to { opacity: 1; transform: translateY(0); }
   }

   /* Header Styles */
   h1, h2 {
       color: #4a90e2;
       text-align: center;
       margin-bottom: 20px;
       font-weight: 600;
   }

   /* Form Styles (untuk Login, Tambah Siswa, dll.) */
   .form-container {
       max-width: 400px;
       margin: 0 auto;
       padding: 30px;
       background: white;
       border-radius: 15px;
       box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
   }

   .form-control {
       border-radius: 8px;
       border: 1px solid #ddd;
       transition: border-color 0.3s ease, box-shadow 0.3s ease;
   }

   .form-control:focus {
       border-color: #4a90e2;
       box-shadow: 0 0 10px rgba(74, 144, 226, 0.2);
   }

   .btn-primary {
       background: linear-gradient(90deg, #4a90e2 0%, #357abd 100%);
       border: none;
       border-radius: 8px;
       padding: 10px 20px;
       transition: transform 0.2s ease, box-shadow 0.2s ease;
   }

   .btn-primary:hover {
       transform: translateY(-2px);
       box-shadow: 0 4px 10px rgba(74, 144, 226, 0.3);
   }

   .btn-danger {
       background: #e74c3c;
       border: none;
       border-radius: 8px;
   }

   .btn-danger:hover {
       background: #c0392b;
   }

   /* Alert Styles */
   .alert {
       border-radius: 10px;
       border: none;
   }

   .alert-info {
       background: #d4edda;
       color: #155724;
   }

   /* Card Styles (untuk Dashboard, Siswa, dll.) */
   .card {
       border-radius: 15px;
       border: none;
       box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
       transition: transform 0.3s ease, box-shadow 0.3s ease;
       margin-bottom: 20px;
   }

   .card:hover {
       transform: translateY(-5px);
       box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
   }

   .card-header {
       background: linear-gradient(90deg, #4a90e2 0%, #357abd 100%);
       color: white;
       border-radius: 15px 15px 0 0 !important;
       font-weight: bold;
   }

   .card-body {
       padding: 20px;
   }

   /* Table Styles (untuk Siswa, Absensi, Laporan) */
   .table {
       border-radius: 10px;
       overflow: hidden;
       box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
   }

   .table thead th {
       background: #4a90e2;
       color: white;
       border: none;
   }

   .table tbody tr:hover {
       background: #f8f9fa;
   }

   /* Grid untuk Siswa Cards */
   .siswa-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
       gap: 20px;
   }

   .siswa-card {
       background: white;
       border-radius: 15px;
       padding: 20px;
       box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
       transition: transform 0.3s ease;
   }

   .siswa-card:hover {
       transform: translateY(-10px);
   }

   /* Footer */
   footer {
       text-align: center;
       margin-top: 40px;
       color: #7f8c8d;
       font-size: 0.9em;
   }

   /* Responsif Overrides */
   @media (max-width: 768px) {
       .main-container {
           padding: 15px;
       }
       .siswa-grid {
           grid-template-columns: 1fr;
       }
       .navbar-nav {
           text-align: center;
       }
   }

   /* Custom untuk Halaman Login */
   .login-page {
       background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
       display: flex;
       align-items: center;
       justify-content: center;
       min-height: 100vh;
   }

   .login-page .form-container {
       max-width: 500px;
       animation: slideIn 0.6s ease-out;
   }

   @keyframes slideIn {
       from { transform: translateY(-50px); opacity: 0; }
       to { transform: translateY(0); opacity: 1; }
   }

   /* Custom untuk Dashboard */
   .stats-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
       gap: 20px;
   }

   .stat-card .card-title {
       font-size: 2.5em;
       color: #4a90e2;
   }

   /* Custom untuk Absensi */
   .absensi-form select {
       width: 100%;
       margin-bottom: 10px;
   }

   /* Custom untuk Laporan */
   .laporan-table {
       margin-top: 20px;
   }