:root { --primary: #007bff; --success: #28a745; --warning: #ffc107; --danger: #dc3545; --dark: #343a40; --light: #f8f9fa; }
body { font-family: "Segoe UI", Arial, sans-serif; background: #f4f6f9; margin: 0; padding: 0; color: #333; }
.container { max-width: 1200px; margin: 20px auto; padding: 0 20px; }
.navbar { background: var(--dark); color: #fff; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; box-shadow:0 2px 5px rgba(0,0,0,0.1); }
.navbar h2 { margin: 0; font-size: 1.4rem; }
.navbar a { color: #fff; text-decoration: none; }
.card { background: #fff; border-radius: 8px; padding: 20px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); border: 1px solid #eee; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media(max-width: 768px) { .grid { grid-template-columns: 1fr; } }
.btn { padding: 8px 16px; border-radius: 4px; border: none; cursor: pointer; text-decoration: none; display: inline-block; font-size: 14px; font-weight: bold; text-align:center;}
.btn-primary { background: var(--primary); color: #fff; }
.btn-success { background: var(--success); color: #fff; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-warning { background: var(--warning); color: #212529; }
.btn-info { background: #17a2b8; color: #fff; }
input, select, textarea { width: 100%; padding: 10px; margin: 8px 0; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-size:14px; }
table { width: 100%; border-collapse: collapse; margin-top: 10px; background:#fff; }
th, td { padding: 12px; text-align: left; border-bottom: 1px solid #dee2e6; font-size:14px; }
th { background: #f8f9fa; color:#555; }
.badge { padding: 5px 10px; border-radius: 4px; font-size: 12px; font-weight: bold; display: inline-block; }
.badge-pending { background: #fff3cd; color: #856404; }
.badge-approved { background: #d4edda; color: #155724; }
.badge-reported { background: #cce5ff; color: #004085; }
.table-responsive { overflow-x: auto; }

.tab-container { display: flex; gap: 10px; margin-bottom: 20px; border-bottom: 2px solid #dee2e6; padding-bottom: 10px; }
.tab-btn { background: #e9ecef; border: none; padding: 10px 20px; font-weight: bold; cursor: pointer; border-radius: 4px; color: #555; font-size: 14px; transition: 0.2s; }
.tab-btn:hover { background: #ddd; }
.tab-btn.active { background: var(--primary); color: #fff; }
.tab-content { display: none; }
.tab-content.active { display: block; }

.calendar-wrapper { display: grid; grid-template-columns: 320px 1fr; gap: 20px; margin-top: 15px; }
@media(max-width: 768px) { .calendar-wrapper { grid-template-columns: 1fr; } }
.calendar-box { background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 15px; box-shadow: 0 2px 5px rgba(0,0,0,0.02); }
.calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; font-weight: bold; font-size: 15px; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; text-align: center; }
.calendar-day-name { font-size: 11px; font-weight: bold; color: #777; padding: 5px 0; text-transform: uppercase; }
.calendar-day { padding: 8px 0; border-radius: 4px; cursor: pointer; font-size: 13px; font-weight: 500; transition: 0.2s; background: #f8f9fa; border: 1px solid #f1f1f1; position: relative; }
.calendar-day:hover { background: #e0e0e0; }
.calendar-day.active { background: var(--success) !important; color: #fff !important; font-weight: bold; border-color: var(--success); text-decoration: none !important; }
.calendar-day.has-task { text-decoration: underline; text-decoration-color: #155724; text-decoration-thickness: 3px; font-weight: bold; color: #155724; }
.calendar-day.empty { cursor: default; background: transparent; border: none; text-decoration: none !important; }