/* ========================================================= Tema Merah Putih - Absensi PMR ========================================================= */ :root { --pmr-red: #b71c1c; --pmr-red-dark: #7f0000; --pmr-red-light: #e53935; --pmr-white: #ffffff; --pmr-gray: #f5f5f5; --pmr-gray-dark: #616161; } html { height: 100%; } body { background-color: var(--pmr-gray); font-family: 'Segoe UI', Roboto, Arial, sans-serif; color: #212121; min-height: 100vh; display: flex; flex-direction: column; } /* Dorong footer ke bawah layar meskipun konten halaman pendek. Semua child langsung dari (navbar, konten utama, footer) mengikuti flex-direction: column; footer selalu di akhir. */ body > .container-fluid, body > main { flex: 1 0 auto; } .footer-pmr { flex-shrink: 0; margin-top: auto; } /* Navbar */ .navbar-pmr { background: linear-gradient(90deg, var(--pmr-red-dark) 0%, var(--pmr-red) 100%); box-shadow: 0 2px 8px rgba(0,0,0,.15); } .navbar-pmr .navbar-brand, .navbar-pmr .nav-link { color: var(--pmr-white) !important; font-weight: 500; } .navbar-pmr .nav-link.active { border-bottom: 2px solid var(--pmr-white); } .navbar-pmr .navbar-brand img { height: 32px; margin-right: 8px; } /* Cards */ .card-pmr { border: none; border-top: 4px solid var(--pmr-red); border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,.08); } .card-header-pmr { background-color: var(--pmr-red); color: var(--pmr-white); border-radius: 8px 8px 0 0 !important; font-weight: 600; } /* Buttons */ .btn-pmr { background-color: var(--pmr-red); border-color: var(--pmr-red); color: var(--pmr-white); } .btn-pmr:hover { background-color: var(--pmr-red-dark); border-color: var(--pmr-red-dark); color: var(--pmr-white); } .btn-outline-pmr { border-color: var(--pmr-red); color: var(--pmr-red); } .btn-outline-pmr:hover { background-color: var(--pmr-red); color: var(--pmr-white); } /* Login page */ .login-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--pmr-red-dark) 0%, var(--pmr-red) 55%, var(--pmr-white) 55%); } .login-card { max-width: 400px; width: 100%; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.25); } .login-card .card-body { padding: 2.5rem; } .login-logo-circle { width: 70px; height: 70px; border-radius: 50%; background: var(--pmr-red); color: white; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 1rem auto; } /* Badges status */ .badge-hadir { background-color: #2e7d32; } .badge-izin { background-color: #f9a825; color:#212121; } .badge-sakit { background-color: #1565c0; } .badge-alpa, .badge-tidak_hadir { background-color: var(--pmr-red); } /* Dashboard stat cards */ .stat-card { border-radius: 10px; color: white; padding: 1.25rem; background: linear-gradient(135deg, var(--pmr-red) 0%, var(--pmr-red-dark) 100%); } .stat-card .stat-number { font-size: 2rem; font-weight: 700; } /* Calendar */ .kalender-table { width: 100%; border-collapse: collapse; background: white; } .kalender-table th { background-color: var(--pmr-red); color: white; padding: 8px; text-align: center; } .kalender-table td { border: 1px solid #e0e0e0; vertical-align: top; height: 110px; width: 14.28%; padding: 4px; font-size: .8rem; } .kalender-table td.today { background-color: #ffebee; border: 2px solid var(--pmr-red); } .kalender-table td .tgl-num { font-weight: 700; color: var(--pmr-red-dark); } .kalender-table td.other-month { background-color: #fafafa; color: #bdbdbd; } .kal-item { display: block; background: var(--pmr-red); color: white; border-radius: 4px; padding: 1px 4px; margin-top: 2px; font-size: .7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kal-item.piket { background: #37474f; } /* Table */ .table-pmr thead { background-color: var(--pmr-red); color: white; } /* Footer */ .footer-pmr { background-color: var(--pmr-red-dark); color: #f5f5f5; padding: 1.25rem 0; font-size: .875rem; text-align: center; } a { text-decoration: none; } /* Camera Capture & Absensi Preview */ .camera-viewfinder { position: relative; width: 100%; max-height: 480px; background-color: #000; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); } .camera-viewfinder video { width: 100%; height: auto; max-height: 480px; object-fit: cover; } .camera-overlay-controls { position: absolute; top: 12px; right: 12px; z-index: 10; } .btn-shutter { width: 64px; height: 64px; border-radius: 50%; background-color: var(--pmr-white); border: 4px solid var(--pmr-red); color: var(--pmr-red); display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); transition: transform 0.15s ease, background-color 0.15s ease; } .btn-shutter:hover { transform: scale(1.08); background-color: #ffebee; color: var(--pmr-red-dark); } .btn-shutter:active { transform: scale(0.95); background-color: var(--pmr-red); color: white; } .photo-preview-card { background: #ffffff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 10px; box-shadow: 0 2px 6px rgba(0,0,0,0.05); } .photo-preview-card img { width: 100%; max-height: 200px; object-fit: cover; border-radius: 6px; }