:root {
    --primary:      #00D9A5;
    --primary-dim:  rgba(0,217,165,0.12);
    --primary-glow: rgba(0,217,165,0.25);
    --indigo:       #6366f1;
    --amber:        #f59e0b;
    --rose:         #f43f5e;
    --sky:          #38bdf8;
    --bg:           #050f0d;
    --surface:      rgba(255,255,255,0.04);
    --surface-2:    rgba(255,255,255,0.06);
    --border:       rgba(255,255,255,0.07);
    --text:         #e2e8f0;
    --muted:        #94a3b8;
    --muted-2:      #475569;
}

/* ── BASE ── */
body { font-family:'Outfit',sans-serif; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; }

/* ── LAYOUT SHELL ── */
#wrapper { display:flex; min-height:100vh; }
#page-content-wrapper { flex:1; min-width:0; display:flex; flex-direction:column; }

/* ── DASHBOARD BODY ── */
.dash-body { padding:28px 28px 48px; flex:1; }

/* ── PAGE HEADER ── */
.page-header { margin-bottom:28px; }
.page-header h1 { font-size:1.45rem; font-weight:800; color:#fff; }
.page-header p  { font-size:0.85rem; color:var(--muted); margin-top:3px; }

/* ── STAT CARDS ── */
.stats-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px; margin-bottom:20px;
}
.stat-card {
    background:var(--surface); border:1px solid var(--border);
    border-radius:16px; padding:20px;
    position:relative; overflow:hidden;
    transition:border-color 0.2s, transform 0.2s;
}
.stat-card:hover { border-color:rgba(255,255,255,0.14); transform:translateY(-2px); }
.stat-card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background:var(--accent-color, var(--primary));
}
.stat-card-inner { display:flex; align-items:flex-start; justify-content:space-between; }
.stat-label { font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); margin-bottom:10px; }
.stat-value { font-size:2rem; font-weight:800; color:#fff; line-height:1; }
.stat-icon {
    width:44px; height:44px; border-radius:12px;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    background:var(--icon-bg, var(--primary-dim));
}
.stat-icon svg { width:20px; height:20px; }
.stat-footer { margin-top:12px; font-size:0.78rem; color:var(--muted-2); display:flex; align-items:center; gap:6px; }
.stat-footer a { color:var(--primary); text-decoration:none; font-weight:600; display:flex; align-items:center; gap:4px; transition:opacity 0.2s; }
.stat-footer a:hover { opacity:0.75; }

/* ── PENDING ACTIONS ── */
.pending-grid {
    display:grid; grid-template-columns:repeat(4,1fr);
    gap:16px; margin-bottom:24px;
}
.pending-card {
    background:var(--surface); border:1px solid var(--border);
    border-radius:16px; padding:18px 20px;
    display:flex; align-items:center; justify-content:space-between;
    transition:border-color 0.2s, transform 0.2s;
}
.pending-card:hover { border-color:rgba(255,255,255,0.14); transform:translateY(-2px); }
.pending-label { font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); margin-bottom:6px; }
.pending-value { font-size:1.6rem; font-weight:800; color:#fff; }
.pending-btn {
    display:inline-flex; align-items:center; gap:5px;
    padding:7px 14px; border-radius:8px; font-size:0.78rem; font-weight:700;
    background:var(--primary-dim); color:var(--primary); border:1px solid rgba(0,217,165,0.2);
    text-decoration:none; white-space:nowrap; flex-shrink:0;
    transition:background 0.2s, border-color 0.2s;
}
.pending-btn:hover { background:rgba(0,217,165,0.18); border-color:rgba(0,217,165,0.35); color:var(--primary); }
.pending-btn svg { width:12px; height:12px; }

/* ── SECTION ROW ── */
.section-row { display:grid; gap:20px; margin-bottom:20px; }
.section-row.cols-8-4 { grid-template-columns:1fr 420px; }
.section-row.cols-6-6 { grid-template-columns:1fr 1fr; }
.section-row.cols-1   { grid-template-columns:1fr; }

/* ── PANEL ── */
.panel {
    background:var(--surface); border:1px solid var(--border);
    border-radius:16px; overflow:hidden;
}
.panel-header {
    padding:16px 20px; border-bottom:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-between;
}
.panel-title { font-size:0.9rem; font-weight:700; color:#fff; }
.panel-body { padding:20px; }
.panel-btn {
    display:inline-flex; align-items:center; gap:5px;
    padding:6px 14px; border-radius:8px; font-size:0.78rem; font-weight:700;
    background:var(--primary); color:#000; border:none; cursor:pointer;
    text-decoration:none; font-family:'Outfit',sans-serif;
    transition:opacity 0.2s, transform 0.2s;
}
.panel-btn:hover { opacity:0.85; transform:translateY(-1px); color:#000; }
.panel-btn-ghost {
    display:inline-flex; align-items:center; gap:5px;
    padding:6px 14px; border-radius:8px; font-size:0.78rem; font-weight:600;
    background:var(--surface-2); color:var(--muted); border:1px solid var(--border);
    text-decoration:none; font-family:'Outfit',sans-serif;
    transition:background 0.2s;
}
.panel-btn-ghost:hover { background:rgba(255,255,255,0.08); color:#fff; }

/* Period dropdown */
.period-select {
    background:var(--surface-2); border:1px solid var(--border); color:var(--muted);
    border-radius:8px; padding:5px 10px; font-family:'Outfit',sans-serif; font-size:0.78rem;
    outline:none; cursor:pointer;
}
.period-select option { background:#0d1f1a; }

/* ── CHART ── */
.chart-wrap { position:relative; height:260px; }

/* ── TABLE ── */
.dash-table { width:100%; border-collapse:collapse; table-layout:fixed; }
.dash-table th {
    font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.07em;
    color:var(--muted-2); padding:0 12px 12px 0; border-bottom:1px solid var(--border);
    text-align:left;
}
.dash-table td { padding:12px 12px 12px 0; border-bottom:1px solid rgba(255,255,255,0.04); font-size:0.85rem; vertical-align:middle; }
.dash-table tr:last-child td { border-bottom:none; }
.dash-table tr:hover td { background:rgba(255,255,255,0.02); }

/* ── Column widths for Recent Check-ins ── */
.dash-table th:nth-child(1),
.dash-table td:nth-child(1) { width:55%; }

.dash-table th:nth-child(2),
.dash-table td:nth-child(2) { width:25%; white-space:nowrap; color:var(--muted); font-size:0.84rem; }

.dash-table th:nth-child(3),
.dash-table td:nth-child(3) { width:20%; text-align:right; white-space:nowrap; }

/* ── Staff info cell ── */
.staff-avatar {
    width:32px; height:32px; border-radius:50%;
    background:linear-gradient(135deg,var(--primary),#007a5e);
    display:inline-flex; align-items:center; justify-content:center;
    font-size:0.65rem; font-weight:800; color:#000; flex-shrink:0;
    overflow:hidden;
}
.staff-avatar img { width:100%; height:100%; object-fit:cover; }
.staff-info { display:flex; align-items:center; gap:10px; min-width:0; }
.staff-name  { font-size:0.86rem; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.staff-dept  { font-size:0.75rem; color:var(--muted); }

/* Badges */
.badge {
    display:inline-flex; align-items:center; padding:3px 9px; border-radius:50px;
    font-size:0.72rem; font-weight:700; letter-spacing:0.02em;
}
.badge-success { background:rgba(0,217,165,0.12);  color:var(--primary); }
.badge-warning { background:rgba(245,158,11,0.12); color:var(--amber); }
.badge-danger  { background:rgba(244,63,94,0.12);  color:var(--rose); }
.badge-info    { background:rgba(56,189,248,0.12);  color:var(--sky); }
.badge-indigo  { background:rgba(99,102,241,0.12);  color:#a5b4fc; }

/* ── TIMELINE / EVENTS ── */
.timeline { display:flex; flex-direction:column; gap:16px; }
.tl-item { display:flex; gap:14px; }
.tl-dot {
    width:10px; height:10px; border-radius:50%; flex-shrink:0; margin-top:5px;
    background:var(--primary); box-shadow:0 0 0 3px rgba(0,217,165,0.15);
}
.tl-dot.amber  { background:var(--amber);  box-shadow:0 0 0 3px rgba(245,158,11,0.15); }
.tl-dot.indigo { background:var(--indigo); box-shadow:0 0 0 3px rgba(99,102,241,0.15); }
.tl-dot.sky    { background:var(--sky);    box-shadow:0 0 0 3px rgba(56,189,248,0.15); }
.tl-content {}
.tl-title { font-size:0.87rem; font-weight:700; color:#fff; margin-bottom:3px; }
.tl-desc  { font-size:0.8rem;  color:var(--muted); margin-bottom:4px; line-height:1.5; }
.tl-date  { font-size:0.75rem; color:var(--muted-2); display:flex; align-items:center; gap:5px; }
.tl-date svg { width:11px; height:11px; }

/* ── MONTHLY SUMMARY ── */
.summary-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border-radius:12px; overflow:hidden; }
.summary-cell { background:var(--bg); padding:24px 20px; text-align:center; }
.summary-value { font-size:1.7rem; font-weight:800; color:#fff; margin-bottom:5px; }
.summary-label { font-size:0.78rem; color:var(--muted); }
.summary-cell:first-child { background:rgba(0,217,165,0.04); }
.summary-cell:first-child .summary-value { color:var(--primary); }

/* ── EMPTY STATE ── */
.empty-state { text-align:center; padding:32px 20px; color:var(--muted); font-size:0.85rem; }
.empty-state svg { width:40px; height:40px; margin-bottom:10px; opacity:0.25; }

/* ── RESPONSIVE ── */
@media(max-width:1200px) {
    .stats-grid   { grid-template-columns:repeat(2,1fr); }
    .pending-grid { grid-template-columns:repeat(2,1fr); }
    .section-row.cols-8-4 { grid-template-columns:1fr; }
}
@media(max-width:768px) {
    .dash-body { padding:16px; }
    .stats-grid   { grid-template-columns:repeat(2,1fr); gap:12px; }
    .pending-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
    .section-row.cols-6-6 { grid-template-columns:1fr; }
    .summary-grid { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:480px) {
    .stats-grid   { grid-template-columns:1fr 1fr; }
    .pending-grid { grid-template-columns:1fr 1fr; }
}