:root {
    --yoto-orange: #f28c28;
    --yoto-dark: #1f2937;
    --yoto-soft: #fff7ed;
}
body { background: #f3f6fa; color: #111827; }
.app-navbar { background: linear-gradient(90deg, #202734, #293548); }
.navbar-brand { letter-spacing: .2px; }
.card { border: 0; box-shadow: 0 10px 24px rgba(15, 23, 42, .06); border-radius: 16px; }
.card-header { background: #fff; border-bottom: 1px solid #eef2f7; border-radius: 16px 16px 0 0 !important; }
.btn-primary { background: var(--yoto-orange); border-color: var(--yoto-orange); }
.btn-primary:hover { background: #db7620; border-color: #db7620; }
.table thead th { background: #eef5fb; white-space: nowrap; font-size: 13px; }
.table td { vertical-align: middle; }
.badge-soft { background: #fff7ed; color: #9a3412; }
.form-control, .form-select { border-radius: 10px; }
.stat-card .stat-value { font-size: 26px; font-weight: 800; }
.stat-card .stat-label { color: #64748b; font-size: 13px; }
.attendance-wrap { overflow: auto; max-height: calc(100vh - 230px); border-radius: 16px; }
.attendance-table { min-width: 1200px; border-collapse: separate; border-spacing: 0; }
.attendance-table th, .attendance-table td { text-align: center; padding: 3px; border: 1px solid #cbd5e1; }
.attendance-table .emp-col { position: sticky; left: 0; z-index: 3; background: #fff8dd; min-width: 240px; text-align: left; }
.attendance-table thead th { position: sticky; top: 0; z-index: 4; }
.att-cell { width: 46px; min-width: 46px; border: 0; text-align: center; font-weight: 700; background: transparent; }
.att-select { width: 50px; min-width: 50px; font-size: 12px; padding: 1px; }
.mark-chip { display:inline-block; min-width:34px; padding:3px 7px; border-radius:8px; font-weight:700; text-align:center; }
.small-muted { color:#64748b; font-size: 12px; }
.employee-photo { width: 92px; height: 92px; object-fit: cover; border-radius: 18px; background:#e5e7eb; }
.action-bar { background:#fff; border-radius:16px; padding:12px; box-shadow:0 8px 20px rgba(15,23,42,.05); }