/* File: assets/css/components.css */

/* Teks Waktu & Tanggal */
.current-date { font-size: 16px; color: var(--text-muted); margin: 0 0 5px 0; }
.current-time { font-size: 48px; font-weight: 700; color: var(--text-main); margin: 0; letter-spacing: -1px; }

/* Status Lokasi */
.location-status { display: inline-block; padding: 8px 15px; border-radius: 50px; font-size: 14px; font-weight: 500; margin-top: 15px; }
.location-status.processing { background-color: #fff3e0; color: #e65100; }
.location-status.successful { background-color: #e6f9ed; color: #137333; border: 1px solid #c3e6cb; }
.location-status.failed { background-color: #fce8e6; color: var(--danger-red); }

/* Form Input */
.form-group { margin-bottom: 15px; }
.form-group label { display: block; font-size: 14px; font-weight: 500; color: #444; margin-bottom: 6px; }

select, input[type="text"], input[type="date"], input[type="time"], input[type="number"] { 
    width: 100%; 
    padding: 12px 15px; 
    border-radius: 10px; 
    border: 1px solid var(--border-color); 
    font-size: 16px; 
    background-color: #f8f9fa; 
    transition: border-color 0.2s; 
}
select:focus, input:focus { outline: none; border-color: var(--primary-blue); background-color: #fff; }
input[readonly] { background-color: #e2e8f0; cursor: not-allowed; color: var(--text-muted); }

/* Tombol Dasar */
.button-group { display: flex; gap: 10px; flex-wrap: wrap; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 10px; }

.btn { 
    border: none; border-radius: 10px; font-size: 15px; font-weight: 600; 
    cursor: pointer; transition: 0.2s; text-align: center; 
    display: flex; align-items: center; justify-content: center; 
    padding: 15px 10px; text-decoration: none; color: white; width: 100%; 
}
.btn:disabled { opacity: 0.7; cursor: not-allowed; }
.btn:active:not(:disabled) { transform: translateY(2px); }

/* Warna Spesifik Tombol */
.btn-masuk { background-color: var(--success-green); }
.btn-pulang { background-color: var(--danger-red); }
.btn-lapangan { background-color: var(--primary-blue); padding: 12px; font-size: 14px; }
.btn-izin { background-color: var(--warning-orange); padding: 12px; font-size: 14px; }
.btn-cuti { background-color: var(--info-blue); padding: 12px; font-size: 14px; color: #333; }
.btn-lembur { background-color: var(--purple-lembur); padding: 12px; font-size: 14px; }