/* ═══════════════════════════════════════════════════════════════════════════
   DAWAMAK — Chart.js Styles & Additional Page-Specific Styles
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Chart Cards ─────────────────────────────────────────────────────────── */
.chart-wrap { position: relative; }
.chart-wrap canvas { max-height: 280px; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.legend-item  { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--text-2); }
.legend-dot   { width: 8px; height: 8px; border-radius: 2px; }

/* ── Dashboard Layout ────────────────────────────────────────────────────── */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 340px;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 1200px) { .dashboard-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px)  { .dashboard-grid { grid-template-columns: 1fr; } }

/* ── Live Punch Feed ─────────────────────────────────────────────────────── */
.live-feed { max-height: 360px; overflow-y: auto; }
.punch-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 0;
  border-bottom: 1px solid var(--border); animation: fadeIn .3s ease;
}
.punch-item:last-child { border: none; }
.punch-type-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.punch-type-dot.check_in  { background: var(--green); }
.punch-type-dot.check_out { background: var(--blue); }
.punch-info { flex: 1; }
.punch-name { font-size: .8rem; font-weight: 600; color: var(--text-1); }
.punch-meta { font-size: .72rem; color: var(--text-3); }
.punch-time { font-size: .75rem; font-weight: 600; color: var(--text-2); }
@keyframes fadeIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }

/* ── Payroll Meter ───────────────────────────────────────────────────────── */
.payroll-summary { display: flex; flex-direction: column; gap: 12px; }
.payroll-bar-item { display: flex; align-items: center; gap: 10px; }
.payroll-bar-label { width: 90px; font-size: .75rem; color: var(--text-3); flex-shrink: 0; }
.payroll-bar-track { flex: 1; height: 8px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.payroll-bar-fill  { height: 100%; border-radius: 99px; transition: width .8s cubic-bezier(.4,0,.2,1); }
.payroll-bar-value { width: 70px; text-align: right; font-size: .78rem; font-weight: 600; color: var(--text-1); }

/* ── Shift Calendar ──────────────────────────────────────────────────────── */
.shift-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px;
  border-radius: 99px; font-size: .75rem; font-weight: 600; cursor: pointer;
  transition: transform var(--anim);
}
.shift-chip:hover { transform: scale(1.05); }
.shift-chip .dot  { width: 8px; height: 8px; border-radius: 50%; }

/* ── Employee Profile ────────────────────────────────────────────────────── */
.profile-banner {
  background: linear-gradient(135deg, var(--brand-dark), var(--brand));
  border-radius: var(--r-lg); padding: 32px; position: relative; overflow: hidden;
}
.profile-banner::before {
  content: ''; position: absolute; top: -40px; right: -40px;
  width: 200px; height: 200px; border-radius: 50%;
  background: rgba(255,255,255,.05);
}
.profile-banner::after {
  content: ''; position: absolute; bottom: -60px; left: 60px;
  width: 150px; height: 150px; border-radius: 50%;
  background: rgba(255,255,255,.04);
}
.profile-avatar-lg {
  width: 80px; height: 80px; border-radius: 50%; overflow: hidden;
  background: rgba(255,255,255,.2); border: 3px solid rgba(255,255,255,.3);
  display: grid; place-items: center; font-size: 1.8rem; font-weight: 800;
  color: #fff; flex-shrink: 0;
}
.profile-info { color: #fff; }
.profile-name  { font-size: 1.4rem; font-weight: 800; }
.profile-title { opacity: .75; font-size: .9rem; }

/* ── Attendance Heat Strip ───────────────────────────────────────────────── */
.heat-strip { display: flex; gap: 3px; flex-wrap: wrap; }
.heat-cell  { width: 16px; height: 16px; border-radius: 3px; cursor: pointer; transition: transform var(--anim); }
.heat-cell:hover { transform: scale(1.3); }

/* ── Approval Queue ──────────────────────────────────────────────────────── */
.approval-item {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 16px; transition: all var(--anim);
}
.approval-item:hover { border-color: var(--border-bright); }
.approval-actions { display: flex; gap: 8px; margin-top: 14px; }

/* ── Settings Page ───────────────────────────────────────────────────────── */
.settings-section { margin-bottom: 32px; }
.settings-section-title {
  font-size: .72rem; font-weight: 700; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .1em;
  padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 20px;
}
.settings-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0; border-bottom: 1px solid var(--border); gap: 16px;
}
.settings-row:last-child { border: none; }
.settings-row-info { flex: 1; }
.settings-row-info h4 { font-size: .875rem; color: var(--text-1); margin-bottom: 2px; }
.settings-row-info p  { font-size: .78rem; color: var(--text-3); }

/* ── Device Console ──────────────────────────────────────────────────────── */
.console-log {
  font-family: 'Courier New', monospace; font-size: .78rem;
  background: #0a0b14; border-radius: var(--r-md); padding: 16px;
  max-height: 300px; overflow-y: auto; color: #7C8CAF;
}
.console-log .log-time  { color: var(--text-3); }
.console-log .log-ok    { color: var(--green); }
.console-log .log-err   { color: var(--red); }
.console-log .log-warn  { color: var(--yellow); }
.console-log .log-info  { color: var(--blue); }