body { font-family: Arial, sans-serif; margin: 0; background: #f7f7f7; }
header { background: #1f2a44; color: #fff; padding: 12px 20px; }
header h1 { margin: 0 0 10px; font-size: 22px; }
nav a { color: #fff; margin-right: 14px; text-decoration: none; font-size: 14px; }
main { padding: 20px; }
section, .card { background: #fff; border-radius: 8px; padding: 16px; margin-bottom: 16px; }
table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { border: 1px solid #ddd; padding: 8px; font-size: 14px; text-align: left; }
th { background: #f0f0f0; }
form.inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
input, select, button, textarea { padding: 8px; border: 1px solid #ccc; border-radius: 6px; }
button { background: #1f6feb; color: #fff; border: none; cursor: pointer; }
.flash { padding: 10px; margin-bottom: 10px; border-radius: 6px; }
.flash.success { background: #e6ffed; }
.flash.error { background: #ffe6e6; }
.green { background: #c6efce; }
.yellow { background: #ffeb9c; }
.red { background: #ffc7ce; }
.gray { background: #a6a6a6; }
.admin-day-off { background: #9e9e9e; color: #fff; }
.admin-sick-leave { background: #8c8c8c; color: #fff; }
.admin-vacation { background: #7a7a7a; color: #fff; }
.admin-absence { background: #686868; color: #fff; }
.form-grid { display: grid; grid-template-columns: 260px 1fr; gap: 8px 12px; align-items: center; }
.form-grid small { grid-column: 2; color: #555; margin-bottom: 4px; }
.thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid #ddd; }
.qr-thumb { object-fit: contain; background: #fff; padding: 4px; cursor: pointer; }
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal.hidden { display: none; }
.modal-content { background: #fff; padding: 16px; border-radius: 8px; max-width: 520px; width: 92%; text-align: center; }
.qr-large { width: 360px; height: 360px; max-width: 100%; object-fit: contain; background: #fff; border: 1px solid #ddd; border-radius: 8px; }
.month-grid td { width: 20px; text-align: center; padding: 6px; font-size: 12px; }
.login-main { max-width: 420px; margin: 80px auto; padding: 0 12px; }
.login-form { display: flex; flex-direction: column; gap: 8px; }
.login-form input, .login-form button { width: 100%; box-sizing: border-box; }
