<!--
==========================================================
  CAREPLUS INFOTECH — ATTENDANCE SYSTEM
  Project Log (embedded — always update this on every change)
==========================================================

  PERMANENT RULES (enforced on every version, forever)
  -----------------------------------------------------
  RULE 1: Always maintain and update this embedded changelog
          with a short, brief summary of every change made.
  RULE 2: Always embed the full changelog inside the HTML so
          any AI or developer always knows the full history
          when this file is uploaded to a new account.
  RULE 3: Always keep Rule 1 and Rule 2.

  STACK
  -----
  - Single-file HTML app hosted on Cloudflare Pages
  - Embedded in Wix via iFrame
  - Firebase Realtime Database (primary sync)
  - localStorage (cache + offline backup)
  - Fonts: DM Sans, DM Mono

  AUTH
  ----
  - Admin password : admin123
  - HR password    : hr1234
  - Employees use  : 4-digit PIN via numeric keypad overlay

  LIVE URL (CURRENT)
  ------------------
  https://infotech-attendance.pages.dev  ← Cloudflare Pages (active)

  WEBSITES — NEEDED
  -----------------
  https://infotech-attendance.pages.dev   Cloudflare Pages — live hosting (CURRENT)
  https://dash.cloudflare.com             Cloudflare dashboard — deploy updates here
  https://console.firebase.google.com     Firebase console — database + rules
  https://infotech-attendance-default-rtdb.firebaseio.com  Firebase Realtime DB

  WEBSITES — NO LONGER NEEDED
  ----------------------------
  https://infotech-attendance.netlify.app   Netlify — replaced by Cloudflare Pages
  https://app.netlify.com                   Netlify dashboard — no longer used
  https://incredible-belekoy-9c64de.netlify.app  Old Netlify URL — defunct

  FILES — KEEP
  ------------
  attendance_v26.html   Current working version (this file)
  careplus_changelog.md Permanent companion changelog

  FILES — DELETED / NO LONGER NEEDED
  ------------------------------------
  attendance_v19.html   Merged into v22/v23
  attendance_v20.html   Merged into v22/v23
  attendance_v21.html   Merged into v22/v23
  attendance_v22.html   Superseded by v23
  attendance_v22_final.html  Superseded by v23
  attendance_v23.html   Superseded by v24
  attendance_v24.html   Superseded by v25
  attendance_v25.html   Merged into v26 (chosen as base)
  attendance_v25_1.html Merged into v26 (features extracted)
  index.html            Renamed copy for deployment only (temp)
  index.zip             Upload artifact only (temp)

  CHANGELOG
  ---------
  v1–v9   Initial build. Dashboard, Clock In/Out (PIN), Records,
          Leave Management, Employees, Departments, Monthly Report,
          Payslip generator. Dark navy sidebar, DM Sans/Mono fonts,
          blue/green/amber theme. AM/PM clock on all screens.
          Per-employee custom shift schedules + late detection.
          Google Apps Script write-only Sheets sync added.

  v10–v12 Bug fixes: validatePin() reorder, todayStr timezone fix,
          iFrame onclick→event delegation for Wix sandbox.

  v13–v17 Firebase Realtime DB integration. localStorage backup.
          Leave approval workflow. Payslip generate + print.
          Monthly grid edit mode. Overtime. Leave balances.
          Session timeout. Offline banner. Mobile sidebar.

  v18     Per-employee payslip storage (payslips[] array).
          My Payslip tab. Payslip dedupe by empId+period.

  v19     [2026-06-15]
          FIX: localStorage key mismatch (stray old keys removed).
          FIX: Duplicate element IDs — dashboard monthly card uses db- prefix.
          FIX: Payslips now synced to Firebase (saveToFirebase, listener, loadLocal).
          FIX: Wrong employees on load — lastUpdated timestamp guard added;
               listener pushes local→Firebase if local is newer.
          FEAT: HR payslip file upload (PDF/image, max 4MB, base64 in Firebase).
          FEAT: My Payslip tab shows Download button or "Pending file" badge.

  v20     [2026-06-15]
          REFACTOR: Firebase made sole source of truth — localStorage cleared on load.
          REMOVED: lastUpdated timestamp conflict resolution (simplified listener).
          FIX: Mobile sidebar — clock-btn-row flex-wrap added.
          REMOVED: Payslip file upload feature (accidentally dropped in refactor).

  v21     [2026-06-15]
          PERF: preconnect hints for Fonts, CDN, Firebase domains.
          PERF: Chart.js loads with defer (non-blocking).
          PERF: Firebase preconnect + keepSynced(true) keeps WebSocket warm.
          FEAT: localStorage cache (ita_cache_v1, 1hr expiry) — instant render on return visits.
          FEAT: 8-second connection timeout — shows error instead of spinning forever.
          FEAT: .info/connected monitor — detects live connection drops.
          FEAT: PERMISSION_DENIED error detection — shows specific Firebase rules message.
          FEAT: "Cached — syncing…" and "Offline — data from cache" status badges.
          BUG: defer on Firebase scripts caused "stuck connecting" — fixed by keeping Firebase sync.

  v22     [2026-06-15]
          MERGE: Combined v19 + v20 + v21 — all unique features retained.
          RESTORED: Payslip file upload (from v19, lost in v20).
          RESTORED: lastUpdated timestamp conflict guard (from v19).
          KEPT: localStorage cache system with 1hr expiry + individual key fallback (v21).
          KEPT: Connection timeout + PERMISSION_DENIED detection (v21).
          KEPT: preconnect hints + keepSynced(true) WebSocket warmth (v21).
          KEPT: Mobile sidebar flex-wrap fix (v20).
          FIX: saveLocalCache() now persists lastUpdated field so timestamp
               guard survives page reloads without needing ita_lastUpdated key.
          FIX: loadLocal() reads lastUpdated from cache object first,
               falls back to ita_lastUpdated key for backward compatibility.
          RULE: Permanent Rules 1–3 embedded in all future versions.

  v24     [2026-06-16]
          FEAT: Dashboard redesigned — 5 stat cards, colored icons,
                dynamic attendance rate badge (green ≥80%, red <80%).
          FEAT: Attendance Overview chart — multi-line Present/Absent/
                Late/On Leave across current month.
          FEAT: Employee Profiles tab — DOB, Address, SSS, PhilHealth,
                TIN, Contact, Personal/Work Email; stored in
                empProfiles[], synced to Firebase; completion % shown.
          FIX:  "Stuck Connecting" — timestamp guard no longer reads
                stale ita_lastUpdated; uses in-memory localLastUpdated.
          FIX:  renderDashboard() null guards + Chart.js retry logic.
          FIX:  .info/connected false-positive "Offline" on fresh load.
          FIX:  keepSynced() removed (not in Firebase web compat SDK).

  v25     [2026-06-17]
          REFACTOR: Consolidated two separate login areas (Profile PIN
          + ACCESS) into a single unified ACCESS password box.
          One input handles all 4 roles:
          - admin123  → Admin (full access, all tabs)
          - hr1234    → HR (HR + Management tabs)
          - mgr123    → Manager (Management tab only) [NEW ROLE]
          - employee PIN → unlocks My Profile only
          FEAT: Manager role added (isMgr flag, MGR_PASSWORD const,
                doMgrLogout(), amber badge in sidebar).
          FEAT: updateAuthUI() rewritten to handle all 4 role states.
          FEAT: tryLogin() handles all 4 roles in one function.
          FEAT: Greeting toast on every login (role-specific message).
          FEAT: Profile badge retains logo + name + "Profile access".
          REMOVED: Separate profile-pin-input, profile-login-area,
                   profile-pin-err, doProfileLogin() — all replaced
                   by unified tryLogin() logic.
          FIX: doAdminLogout now also redirects from HR/payslip tabs.
          FIX: doHRLogout now redirects from all management tabs too.
          FEAT: Dashboard stat cards redesigned — larger numbers, icon right,
               colored icon bg, 5th card "On Leave" (purple), 5-col grid.
          FEAT: Attendance rate badge dynamic — green ↑ ≥80%, red ↓ <80%.
          FEAT: "This Week" bar chart → "Attendance Overview" multi-line chart
               (Present/Absent/Late/On Leave across current month weekdays).
          FEAT: Late color changed from purple to amber (#F59E0B).
          FEAT: Dashboard 3-panel row: Recent Attendance (2/5) | By Dept (1/5)
               | Attendance Overview (2/5) — aligns with 5 stat cards.
          FEAT: Recent Attendance restored to dashboard.
          FIX:  Auto-resize — #main uses min-width:0 + calc(100%-sidebar-w).
          FIX:  dash-row collapses to single column on mobile.
          FEAT: Employee Profiles tab added under HR section.
               Fields: Full Name, Date of Birth, Address, SSS ID, PhilHealth ID,
               TIN, Contact Number, Personal Email, Work Email.
               Stored in empProfiles[] array, synced to Firebase + localStorage.
               Profile list shows completion % per employee with color indicator.
               Edit button loads profile into form for quick update.
          FIX: Stuck "Connecting…" — timestamp guard was reading stale
               ita_lastUpdated from localStorage (old session value), causing
               false remoteTs < localTs on every load → saveToFirebase() loop,
               setSyncStatus('ok') never reached.
          FIX: Guard now only uses in-memory localLastUpdated (set fresh each
               session by saveToFirebase()). Never reads localStorage for this
               comparison. Guard only fires if THIS session wrote data first.
          FIX: renderDashboard() crash — null guard added to all getElementById
               calls; Chart.js draw retries until Chart is available (defer-safe).
               This crash was silently blocking initFirebase() from ever running.
          FIX: .info/connected false-positive offline — Firebase fires false on
               initial load before connecting; code now only sets error status
               if previously confirmed connected. Fresh browsers no longer show
               "Offline" on first load.
          FIX: Removed keepSynced() — not available in Firebase web compat SDK
               (mobile-only API). Was crashing initFirebase() entirely.

  v26-patch [2026-06-17]
          FIX: Dashboard 3-panel row — By Department and Attendance
               Overview now stretch to match the height of Recent
               Attendance. dash-row uses align-items:stretch; all
               three cards are flex-column so inner content fills
               the shared row height. Chart canvas wrapper uses
               flex:1 instead of fixed 180px height. — CONSOLIDATION OF v25 + v25_1
          MERGE BASE: v25 (unified login + Manager role) kept as foundation.
          RESOLVED CONFLICT 1 (Login system): Chose v25's unified single
               ACCESS box over v25_1's separate PIN+ACCESS boxes.
          RESOLVED CONFLICT 2 (Manager role): Kept v25's Manager role
               (mgr123, isMgr, doMgrLogout, amber badge) — v25_1 had none.
          MERGED FROM v25_1 — Pagination:
               Added shared renderPagination() helper. Applied to Employees
               (EMP_PER_PAGE=15), Departments (DEPT_PER_PAGE=15), Leave
               Requests and Leave Management (LEAVE_PER_PAGE=15). Search
               inputs now reset page to 0 on input.
          MERGED FROM v25_1 — Itemized Payslip:
               Generate Payslip form expanded with Earnings (Overtime Rate,
               COLA, Internet Allowance, Night Differential) and Deductions
               (SSS, PhilHealth, Pag-IBIG, Withholding Tax, Absence Deduction,
               Other Deductions) sections. generatePayslip() now computes
               grossPay and totalDeductions from itemized fields. Payslip
               preview and saved record include full breakdown.
          MERGED FROM v25_1 — My Payslip itemized view:
               renderMyPayslip() expanded to show full earnings/deductions
               breakdown per payslip, matching the HR-generated preview.
          MERGED FROM v25_1 — Removed auto overtime on clock-out:
               doClockOut() no longer auto-calculates overtime from shift
               end time; r.overtime always set to 0 (manual entry only).
          MERGED FROM v25_1 — Removed sample data generator from boot():
               App no longer auto-generates 15 days of fake attendance
               records when records[] is empty. Clean slate on first run.

==========================================================
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>InfoTech Attendance System</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://cdn.jsdelivr.net">
<link rel="preconnect" href="https://www.gstatic.com">
<link rel="preconnect" href="https://infotech-attendance-default-rtdb.firebaseio.com">
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.19.0/dist/tabler-icons.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js" defer></script>
<style>
:root {
  --navy: #0F1C2E;
  --navy-light: #172438;
  --navy-muted: #2B3F57;
  --accent: #3B82F6;
  --accent-light: #EFF6FF;
  --accent-hover: #2563EB;
  --success: #10B981;
  --success-bg: #ECFDF5;
  --warning: #F59E0B;
  --warning-bg: #FFFBEB;
  --danger: #EF4444;
  --danger-bg: #FEF2F2;
  --info: #6366F1;
  --info-bg: #EEF2FF;
  --white: #FFFFFF;
  --gray-50: #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-700: #374151;
  --gray-900: #111827;
  --sidebar-w: 220px;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --font: 'DM Sans', sans-serif;
  --font-mono: 'DM Mono', monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font); background: var(--gray-50); color: var(--gray-900); display: flex; min-height: 100vh; }

/* ── Sidebar ── */
#sidebar {
  width: var(--sidebar-w); background: var(--navy); position: fixed; top: 0; left: 0;
  height: 100vh; display: flex; flex-direction: column; z-index: 50; overflow: hidden;
}
.sidebar-logo {
  padding: 22px 20px 18px; border-bottom: 1px solid rgba(255,255,255,.06);
}
.logo-mark {
  display: flex; align-items: center; gap: 10px;
}
.logo-icon {
  width: 34px; height: 34px; background: var(--accent); border-radius: 8px;
  display: flex; align-items: center; justify-content: center; font-size: 18px; color: white; flex-shrink: 0;
}
.logo-text { font-size: 14px; font-weight: 600; color: white; line-height: 1.2; }
.logo-sub { font-size: 11px; color: rgba(255,255,255,.4); font-weight: 400; }
.sidebar-nav { flex: 1; padding: 12px 10px; overflow-y: auto; }
.nav-section { margin-bottom: 20px; }
.nav-section-label {
  font-size: 10px; font-weight: 600; color: rgba(255,255,255,.3); letter-spacing: .08em;
  text-transform: uppercase; padding: 0 10px; margin-bottom: 6px;
}
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-sm);
  cursor: pointer; color: rgba(255,255,255,.55); font-size: 13.5px; font-weight: 400;
  transition: background .15s, color .15s; margin-bottom: 2px; border: none; background: none;
  width: 100%; text-align: left; font-family: var(--font);
}
.nav-item i { font-size: 17px; flex-shrink: 0; }
.nav-item:hover { background: rgba(255,255,255,.07); color: rgba(255,255,255,.9); }
.nav-item.active { background: rgba(59,130,246,.2); color: white; font-weight: 500; }
.nav-item.active i { color: var(--accent); }
.sidebar-footer {
  padding: 14px 20px; border-top: 1px solid rgba(255,255,255,.06);
  font-size: 11px; color: rgba(255,255,255,.25);
}

/* ── Main ── */
#main { margin-left: var(--sidebar-w); flex: 1; min-width: 0; width: calc(100% - var(--sidebar-w)); box-sizing: border-box; }
.topbar {
  background: var(--white); border-bottom: 1px solid var(--gray-200);
  padding: 0 28px; height: 58px; display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 40;
}
.topbar-title { font-size: 16px; font-weight: 600; color: var(--gray-900); }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.topbar-date { font-size: 12.5px; color: var(--gray-500); }
.topbar-badge {
  background: var(--accent-light); color: var(--accent); font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: 20px;
}
.page-content { padding: 24px 28px; }
.section { display: none; }
.section.active { display: block; }

/* ── Cards & Metrics ── */
.metric-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; margin-bottom: 22px; }
.metric-card {
  background: var(--white); border-radius: var(--radius); padding: 20px 18px;
  box-shadow: var(--shadow); border: 1px solid var(--gray-100); position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 6px;
}
.metric-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.metric-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.metric-card.blue .metric-icon   { background: #EFF6FF; color: #3B82F6; }
.metric-card.green .metric-icon  { background: #ECFDF5; color: #10B981; }
.metric-card.red .metric-icon    { background: #FEF2F2; color: #EF4444; }
.metric-card.amber .metric-icon  { background: #FFFBEB; color: #F59E0B; }
.metric-card.purple .metric-icon { background: #EEF2FF; color: #6366F1; }
.metric-label { font-size: 12px; color: var(--gray-500); font-weight: 500; }
.metric-value { font-size: 30px; font-weight: 700; color: var(--gray-900); line-height: 1.1; }
.metric-sub { font-size: 11px; color: var(--gray-400); margin-top: 2px; display: flex; align-items: center; gap: 4px; }
.metric-sub.up   { color: #10B981; }
.metric-sub.down { color: #EF4444; }
.metric-sub.neutral { color: var(--gray-400); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
/* Dashboard 3-panel row: Recent(2) | Dept(1) | Overview(2) matching the 5 stat cards */
.dash-row { display: grid; grid-template-columns: 2fr 1fr 2fr; gap: 16px; margin-bottom: 16px; align-items: stretch; }
.dash-recent { display: flex; flex-direction: column; max-height: 320px; }
.dash-recent #today-list { flex: 1; overflow-y: auto; }
.dash-dept   { display: flex; flex-direction: column; }
.dash-dept #dept-bars { flex: 1; overflow-y: auto; }
.dash-overview { display: flex; flex-direction: column; }
.dash-overview .card-header { flex-shrink: 0; }
.dash-overview canvas-wrap { flex: 1; }
.card {
  background: var(--white); border-radius: var(--radius); border: 1px solid var(--gray-100);
  box-shadow: var(--shadow); padding: 18px 20px;
}
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.card-title { font-size: 13.5px; font-weight: 600; color: var(--gray-700); }
.card-title-tag { font-size: 11px; color: var(--gray-400); background: var(--gray-100); padding: 2px 8px; border-radius: 20px; }

/* ── Status List ── */
.emp-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--gray-100); }
.emp-row:last-child { border-bottom: none; }
.ep-input { width:100%;padding:8px 10px;border:1px solid var(--gray-200);border-radius:var(--radius-sm);font-size:13px;font-family:var(--font);outline:none;box-sizing:border-box; }
.ep-input:focus { border-color:var(--accent); }
.ep-card { display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--gray-100); }
.ep-card:last-child { border-bottom:none; }
.ep-detail { font-size:11px;color:var(--gray-400);margin-top:2px;display:flex;gap:12px;flex-wrap:wrap; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex-shrink: 0; }
.emp-name { font-size: 13.5px; font-weight: 500; color: var(--gray-900); }
.emp-sub { font-size: 11.5px; color: var(--gray-400); }
.emp-info { flex: 1; min-width: 0; }
.time-txt { font-size: 12px; font-family: var(--font-mono); color: var(--gray-500); min-width: 48px; text-align: right; }

/* ── Badges ── */
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; }
.badge-present { background: var(--success-bg); color: var(--success); }
.badge-late { background: var(--warning-bg); color: #B45309; }
.badge-absent { background: var(--danger-bg); color: var(--danger); }
.badge-overtime { background: #F3E8FF; color: #7C3AED; font-weight: 600; }
.badge-halfday { background: #FEF9C3; color: #854D0E; font-weight: 600; }
/* Reports */
.report-card { background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; margin-bottom: 16px; }
.report-card-title { font-size: 14px; font-weight: 600; color: var(--gray-700); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.emp-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.report-emp-card { background: var(--gray-50); border: 1px solid var(--gray-100); border-radius: var(--radius-sm); padding: 12px 14px; }
.report-emp-name { font-size: 13px; font-weight: 600; color: var(--gray-900); margin-bottom: 6px; }
.report-emp-stats { display: flex; gap: 6px; flex-wrap: wrap; }
.report-emp-stat { font-size: 11px; padding: 2px 8px; border-radius: 12px; font-weight: 500; }
.session-warning { position: fixed; bottom: 70px; right: 24px; background: #854D0E; color: white; padding: 10px 16px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; z-index: 400; box-shadow: var(--shadow-md); display: none; align-items: center; gap: 8px; }
.session-warning.show { display: flex; }
.badge-leave { background: var(--info-bg); color: var(--info); }

/* ── Bar chart dept ── */
.bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.bar-name { font-size: 11px; color: var(--gray-600); width: 86px; flex-shrink: 0; word-break: break-word; white-space: normal; line-height: 1.3; }
.bar-track { flex: 1; height: 7px; background: var(--gray-100); border-radius: 4px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 4px; background: var(--accent); transition: width .5s ease; }
.bar-pct { font-size: 11.5px; font-weight: 500; color: var(--gray-500); width: 34px; text-align: right; }

/* ── Tables ── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th { text-align: left; padding: 10px 14px; font-size: 11.5px; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: .04em; background: var(--gray-50); border-bottom: 1px solid var(--gray-200); }
tbody td { padding: 11px 14px; border-bottom: 1px solid var(--gray-100); color: var(--gray-800); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--gray-50); }

/* ── Toolbar ── */
.toolbar { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.search-input {
  flex: 1; min-width: 160px; padding: 8px 12px 8px 34px; border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm); font-size: 13px; background: var(--white); color: var(--gray-900);
  font-family: var(--font); outline: none;
}
.search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59,130,246,.1); }
.search-wrap { position: relative; flex: 1; min-width: 160px; }
.search-wrap i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--gray-400); font-size: 16px; pointer-events: none; }
.select-input {
  padding: 8px 10px; border: 1px solid var(--gray-200); border-radius: var(--radius-sm);
  font-size: 13px; background: var(--white); color: var(--gray-700); font-family: var(--font); outline: none;
}
.select-input:focus { border-color: var(--accent); }
.btn-primary {
  background: var(--accent); color: white; border: none; border-radius: var(--radius-sm);
  padding: 8px 16px; font-size: 13px; font-weight: 500; cursor: pointer; font-family: var(--font);
  display: flex; align-items: center; gap: 6px; white-space: nowrap; transition: background .15s;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-outline {
  background: none; border: 1px solid var(--gray-200); border-radius: var(--radius-sm);
  padding: 8px 14px; font-size: 13px; cursor: pointer; color: var(--gray-700); font-family: var(--font);
  display: flex; align-items: center; gap: 6px; white-space: nowrap; transition: background .15s;
}
.btn-outline:hover { background: var(--gray-50); }
.icon-btn {
  background: none; border: none; cursor: pointer; color: var(--gray-400); font-size: 16px;
  padding: 5px 6px; border-radius: var(--radius-sm); font-family: var(--font); line-height: 1;
  display: inline-flex; align-items: center; transition: color .15s, background .15s;
}
.icon-btn:hover { background: var(--gray-100); color: var(--gray-700); }
.icon-btn.danger:hover { background: var(--danger-bg); color: var(--danger); }

/* ── Clock In/Out ── */
.clock-hero {
  background: var(--navy); border-radius: var(--radius); padding: 36px 28px;
  text-align: center; margin-bottom: 16px; position: relative; overflow: hidden;
}
.clock-hero::before {
  content: ''; position: absolute; width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(59,130,246,.15) 0%, transparent 70%);
  top: -80px; right: -60px; border-radius: 50%;
}
.clock-display {
  font-family: var(--font-mono); font-size: 52px; font-weight: 500; color: white;
  letter-spacing: 4px; margin-bottom: 6px;
}
.clock-date { font-size: 13px; color: rgba(255,255,255,.45); margin-bottom: 28px; }
.clock-emp-label { font-size: 12px; color: rgba(255,255,255,.5); margin-bottom: 8px; }
.clock-select {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  color: white; font-size: 14px; padding: 10px 14px; border-radius: var(--radius-sm);
  font-family: var(--font); width: 280px; max-width: 100%; margin-bottom: 22px; outline: none;
}
.clock-select option { background: var(--navy); }
.clock-btn-row { display: flex; gap: 12px; justify-content: center; }
.btn-clock-in {
  background: var(--success); color: white; border: none; border-radius: var(--radius-sm);
  padding: 11px 28px; font-size: 14px; font-weight: 500; cursor: pointer; font-family: var(--font);
  display: flex; align-items: center; gap: 7px; transition: filter .15s;
}
.btn-clock-in:hover { filter: brightness(1.1); }
.btn-clock-out {
  background: rgba(255,255,255,.1); color: white; border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-sm); padding: 11px 28px; font-size: 14px; font-weight: 500;
  cursor: pointer; font-family: var(--font); display: flex; align-items: center; gap: 7px; transition: background .15s;
}
.btn-clock-out:hover { background: rgba(255,255,255,.18); }
.clock-status-row {
  display: flex; gap: 24px; justify-content: center; margin-top: 22px;
  padding-top: 20px; border-top: 1px solid rgba(255,255,255,.08);
}
.clock-stat { text-align: center; }
.clock-stat-label { font-size: 11px; color: rgba(255,255,255,.4); margin-bottom: 4px; }
.clock-stat-val { font-size: 15px; font-weight: 500; color: white; font-family: var(--font-mono); }

/* ── Dept pill ── */
.dept-pill { display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 11.5px; font-weight: 500; }

/* ── Modals ── */
.modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(15,28,46,.5);
  z-index: 200; align-items: center; justify-content: center; backdrop-filter: blur(2px);
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--white); border-radius: var(--radius); padding: 24px;
  width: 400px; max-width: 90vw; box-shadow: 0 20px 60px rgba(0,0,0,.18);
}
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.modal h3 { font-size: 15px; font-weight: 600; color: var(--gray-900); }
.modal-close { background: none; border: none; cursor: pointer; color: var(--gray-400); font-size: 20px; padding: 2px; line-height: 1; }
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 12px; font-weight: 500; color: var(--gray-600); margin-bottom: 5px; }
.form-group input, .form-group select {
  width: 100%; padding: 9px 11px; border: 1px solid var(--gray-200); border-radius: var(--radius-sm);
  font-size: 13.5px; background: var(--white); color: var(--gray-900); font-family: var(--font); outline: none;
}
.form-group input:focus, .form-group select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59,130,246,.1); }
.modal-footer { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; border-top: 1px solid var(--gray-100); padding-top: 16px; }
.btn-cancel { background: none; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); padding: 8px 18px; cursor: pointer; font-size: 13px; font-family: var(--font); color: var(--gray-600); }
.btn-cancel:hover { background: var(--gray-50); }
.btn-save { background: var(--accent); color: white; border: none; border-radius: var(--radius-sm); padding: 8px 18px; cursor: pointer; font-size: 13px; font-weight: 500; font-family: var(--font); transition: background .15s; }
.btn-save:hover { background: var(--accent-hover); }
.btn-del { background: none; border: 1px solid var(--danger); color: var(--danger); border-radius: var(--radius-sm); padding: 8px 18px; cursor: pointer; font-size: 13px; font-family: var(--font); }

/* ── Monthly Report ── */
.report-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.month-nav-btn {
  background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-sm);
  padding: 7px 11px; cursor: pointer; color: var(--gray-600); font-size: 14px; transition: background .15s;
}
.month-nav-btn:hover { background: var(--gray-50); }
.month-label { font-size: 14.5px; font-weight: 600; color: var(--gray-900); min-width: 150px; text-align: center; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.leg { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--gray-500); }
.leg-dot { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.report-wrap { overflow-x: auto; border: 1px solid var(--gray-200); border-radius: var(--radius); background: white; }
.report-tbl { border-collapse: collapse; font-size: 12px; min-width: 700px; width: 100%; }
.report-tbl th {
  padding: 8px 6px; background: var(--gray-50); border-bottom: 1px solid var(--gray-200);
  border-right: 1px solid var(--gray-100); font-size: 11px; font-weight: 600; color: var(--gray-500);
  text-align: center; white-space: nowrap;
}
.report-tbl th:first-child { text-align: left; position: sticky; left: 0; background: var(--gray-50); z-index: 2; min-width: 148px; padding: 8px 12px; }
.report-tbl td { padding: 6px 4px; border-bottom: 1px solid var(--gray-100); border-right: 1px solid var(--gray-100); text-align: center; vertical-align: middle; }
.report-tbl td:first-child { text-align: left; position: sticky; left: 0; background: white; z-index: 1; padding: 6px 12px; }
.report-tbl tr:last-child td { border-bottom: none; }
.report-tbl tr:hover td { background: var(--gray-50); }
.report-tbl tr:hover td:first-child { background: var(--gray-50); }
.day-cell { width: 26px; height: 22px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 600; }
.day-cell.P { background: var(--success-bg); color: #065F46; }
.day-cell.L { background: var(--warning-bg); color: #92400E; }
.day-cell.A { background: var(--danger-bg); color: #991B1B; }
.day-cell.V { background: var(--info-bg); color: #3730A3; }
.day-cell.WE { background: var(--gray-100); color: var(--gray-400); }
.day-cell.ND { background: none; }
.report-tbl .sum-col { border-left: 2px solid var(--gray-200) !important; font-weight: 600; font-size: 12px; }
.report-total-row td { background: var(--gray-50) !important; font-size: 11px; font-weight: 500; color: var(--gray-500); border-top: 1px solid var(--gray-200); }
.today-col { color: var(--accent) !important; font-weight: 700 !important; }
.wk-col { color: var(--gray-400) !important; opacity: .7; }
.summary-strip { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-top: 14px; }
.sum-card { background: white; border: 1px solid var(--gray-100); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.sum-card-label { font-size: 11px; color: var(--gray-400); font-weight: 500; margin-bottom: 4px; }
.sum-card-val { font-size: 22px; font-weight: 700; }

@keyframes spin{to{transform:rotate(360deg)}}
/* ── Admin lock overlay ── */
.admin-lock-overlay{position:absolute;inset:0;background:rgba(15,28,46,.55);z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:var(--radius);backdrop-filter:blur(3px)}
.admin-lock-msg{color:white;font-size:13px;font-weight:500;margin-top:10px;opacity:.8}
.admin-shake{animation:shake .35s ease}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.nav-item.locked{opacity:.4;cursor:not-allowed}
.nav-item.locked:hover{background:none;color:rgba(255,255,255,.55)}

.toast {
  position: fixed; bottom: 24px; right: 24px; background: var(--gray-900); color: white;
  padding: 12px 18px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500;
  display: none; z-index: 300; box-shadow: var(--shadow-md); max-width: 280px;
  display: none; align-items: center; gap: 8px;
}
.toast.show { display: flex; }

/* ── Page header ── */
.page-header { margin-bottom: 20px; }
.page-heading { font-size: 20px; font-weight: 600; color: var(--gray-900); }
.page-sub { font-size: 13px; color: var(--gray-400); margin-top: 2px; }

.empty-state { text-align: center; padding: 40px; color: var(--gray-400); font-size: 13px; }

/* ── rate color ── */
.rate-good { color: var(--success); font-weight: 600; }
.rate-mid { color: var(--warning); font-weight: 600; }
.rate-low { color: var(--danger); font-weight: 600; }

/* ── PIN overlay ── */
.pin-overlay {
  display: none; position: fixed; inset: 0; background: rgba(15,28,46,.7);
  z-index: 500; align-items: center; justify-content: center; backdrop-filter: blur(4px);
}
.pin-overlay.open { display: flex; }
.pin-box {
  background: var(--white); border-radius: 16px; padding: 32px 28px;
  width: 320px; text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.25);
}
.pin-emp-avatar {
  width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 20px; font-weight: 700; margin: 0 auto 10px;
}
.pin-emp-name { font-size: 16px; font-weight: 600; color: var(--gray-900); margin-bottom: 2px; }
.pin-emp-role { font-size: 12px; color: var(--gray-400); margin-bottom: 20px; }
.pin-action-label {
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  margin-bottom: 16px; padding: 4px 12px; border-radius: 20px; display: inline-block;
}
.pin-action-label.in { background: var(--success-bg); color: var(--success); }
.pin-action-label.out { background: var(--danger-bg); color: var(--danger); }
.pin-dots {
  display: flex; justify-content: center; gap: 12px; margin-bottom: 24px;
}
.pin-dot {
  width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--gray-300);
  transition: background .15s, border-color .15s;
}
.pin-dot.filled { background: var(--navy); border-color: var(--navy); }
.pin-dot.error { background: var(--danger); border-color: var(--danger); }
.pin-pad {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px;
}
.pin-key {
  background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 10px;
  padding: 14px 10px; font-size: 18px; font-weight: 600; color: var(--gray-800);
  cursor: pointer; transition: background .1s, transform .1s; font-family: var(--font-mono);
  user-select: none;
}
.pin-key:hover { background: var(--gray-100); }
.pin-key:active { transform: scale(.93); background: var(--gray-200); }
.pin-key.del { font-size: 16px; color: var(--gray-500); }
.pin-key.wide { grid-column: span 3; background: var(--gray-100); color: var(--gray-500); font-size: 13px; }
.pin-key.wide:hover { background: var(--gray-200); }
.pin-err-msg { font-size: 12px; color: var(--danger); min-height: 18px; margin-bottom: 4px; }
.pin-skip-btn {
  font-size: 12px; color: var(--gray-400); background: none; border: none;
  cursor: pointer; font-family: var(--font); text-decoration: underline; padding: 4px;
}
.pin-skip-btn:hover { color: var(--gray-600); }
.pin-shake { animation: shake .35s ease; }
@keyframes shake { 0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)} }
/* ── Responsive ── */
#sidebar-toggle {
  display: none; position: fixed; top: 12px; left: 12px; z-index: 60;
  background: var(--navy); border: none; border-radius: 8px; padding: 8px 10px;
  cursor: pointer; color: white; font-size: 20px; line-height: 1;
}
#sidebar-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 45;
}
@media (max-width: 768px) {
  #sidebar-toggle { display: flex; align-items: center; justify-content: center; }
  #sidebar {
    transform: translateX(-100%); transition: transform .25s ease; z-index: 50;
  }
  #sidebar.open { transform: translateX(0); }
  #sidebar-overlay.open { display: block; }
  #main { margin-left: 0; }
  .topbar { padding: 0 16px 0 56px; }
  .page-content { padding: 16px; }
  .metric-grid { grid-template-columns: repeat(2,1fr); gap: 10px; }
  .grid-2 { grid-template-columns: 1fr; }
  .chart-row { grid-template-columns: 1fr; }
  .dash-row { grid-template-columns: 1fr; }
  .toolbar { gap: 6px; }
  .search-input { min-width: 100px; }
  .summary-strip { grid-template-columns: repeat(2,1fr); }
  .emp-grid { grid-template-columns: 1fr 1fr; }
  .clock-display { font-size: 34px; }
  .clock-select { width: 100%; }
  .clock-btn-row { flex-wrap: wrap; justify-content: center; }
  .modal { width: 95vw; padding: 18px; }
  .form-row { grid-template-columns: 1fr; }
  .pin-box { width: 94vw; padding: 24px 16px; }
  .report-stat-grid { grid-template-columns: repeat(2,1fr); }
  table { font-size: 12px; }
  thead th, tbody td { padding: 8px 8px; }
}
@media (max-width: 480px) {
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .summary-strip { grid-template-columns: 1fr 1fr; }
  .emp-grid { grid-template-columns: 1fr; }
  .clock-display { font-size: 28px; letter-spacing: 2px; }
  .topbar-date { display: none; }
}
@media print {
  #sidebar, #sidebar-toggle, #sidebar-overlay, .topbar, .page-header,
  #payslip-preview > div:first-child, .card:not(#payslip-content),
  .session-warning, .toast, #offline-banner { display: none !important; }
  #main { margin-left: 0 !important; }
  body { background: white !important; }
  #payslip-content { box-shadow: none !important; border: none !important; max-width: 100% !important; }
  .page-content { padding: 0 !important; }
  #tab-payslip .card:first-child { display: none !important; }
}
</style>
</head>
<body>

<!-- Sidebar -->
<button id="sidebar-toggle" onclick="toggleSidebar()" aria-label="Toggle menu"><i class="ti ti-menu-2"></i></button>
<div id="sidebar-overlay" onclick="closeSidebar()"></div>
<nav id="sidebar">
  <div class="sidebar-logo">
    <div class="logo-mark">
      <div class="logo-icon" style="background:#1E3A5F;padding:0;overflow:hidden;border-radius:8px;display:flex;align-items:center;justify-content:center">
        <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
          <!-- Calendar body -->
          <rect x="2" y="4" width="22" height="20" rx="3" fill="#3B82F6"/>
          <!-- Top bar -->
          <rect x="2" y="4" width="22" height="7" rx="3" fill="#1D4ED8"/>
          <rect x="2" y="8" width="22" height="3" fill="#1D4ED8"/>
          <!-- Ring left -->
          <rect x="7" y="2" width="2.5" height="5" rx="1.25" fill="white"/>
          <!-- Ring right -->
          <rect x="16.5" y="2" width="2.5" height="5" rx="1.25" fill="white"/>
          <!-- Grid dots -->
          <rect x="5" y="14" width="3" height="2.5" rx="0.5" fill="white" opacity="0.85"/>
          <rect x="9.5" y="14" width="3" height="2.5" rx="0.5" fill="white" opacity="0.85"/>
          <rect x="5" y="18" width="3" height="2.5" rx="0.5" fill="white" opacity="0.85"/>
          <rect x="9.5" y="18" width="3" height="2.5" rx="0.5" fill="white" opacity="0.85"/>
          <!-- Checkmark circle -->
          <circle cx="19" cy="19" r="5" fill="#10B981"/>
          <!-- Checkmark tick -->
          <polyline points="16.2,19 18,20.8 21.8,17" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
        </svg>
      </div>
      <div>
        <div class="logo-text">InfoTech</div>
        <div class="logo-sub">Attendance System</div>
      </div>
    </div>
  </div>
  <div class="sidebar-nav">
    <div class="nav-section">
      <div class="nav-section-label">Overview</div>
      <button class="nav-item active" onclick="showTab('dashboard',this)"><i class="ti ti-layout-dashboard"></i> Dashboard</button>
    </div>
    <div class="nav-section">
      <div class="nav-section-label">Attendance</div>
      <button class="nav-item" onclick="showTab('clockin',this)"><i class="ti ti-clock-play"></i> Clock In / Out</button>
    </div>
    <div class="nav-section" id="profile-nav-section">
      <div class="nav-section-label" style="display:flex;align-items:center;gap:5px">My Profile <i class="ti ti-lock" id="profile-lock-icon" style="font-size:11px;color:rgba(255,255,255,.25)"></i></div>
      <div id="profile-nav-items" style="display:none">
        <button class="nav-item" id="nav-profile" onclick="showTab('profile',this)"><i class="ti ti-user-circle"></i> My Attendance</button>
        <button class="nav-item" id="nav-my-payslip" onclick="showTab('myPayslip',this)"><i class="ti ti-receipt"></i> My Payslip</button>
      </div>
      <div id="profile-locked-msg" style="padding:6px 10px;font-size:11px;color:rgba(255,255,255,.25);font-style:italic">Enter your PIN to access</div>
    </div>
    <div class="nav-section" id="mgmt-nav-section">
      <div class="nav-section-label" style="display:flex;align-items:center;gap:5px">Management <i class="ti ti-lock" id="mgmt-lock-icon" style="font-size:11px;color:rgba(255,255,255,.25)"></i></div>
      <div id="mgmt-nav-items" style="display:none">
        <button class="nav-item" id="nav-records" onclick="showTab('records',this)"><i class="ti ti-list-details"></i> Records</button>
        <button class="nav-item" id="nav-employees" onclick="showTab('employees',this)"><i class="ti ti-users"></i> Employees</button>
        <button class="nav-item" id="nav-departments" onclick="showTab('departments',this)"><i class="ti ti-building"></i> Departments</button>
        <button class="nav-item" id="nav-reports" onclick="showTab('reports',this)"><i class="ti ti-chart-bar"></i> Reports</button>
      </div>
      <div id="mgmt-locked-msg" style="padding:6px 10px;font-size:11px;color:rgba(255,255,255,.25);font-style:italic">Login as admin or manager</div>
    </div>
    <div class="nav-section" id="hr-nav-section">
      <div class="nav-section-label" style="display:flex;align-items:center;gap:5px">Human Resource <i class="ti ti-lock" id="hr-lock-icon" style="font-size:11px;color:rgba(255,255,255,.25)"></i></div>
      <div id="hr-nav-items" style="display:none">
        <button class="nav-item" id="nav-empprofile" onclick="showTab('empprofile',this)"><i class="ti ti-id-badge"></i> Employee Profiles</button>
        <button class="nav-item" id="nav-payslip" onclick="showTab('payslip',this)"><i class="ti ti-receipt"></i> Payslip</button>
      </div>
      <div id="hr-locked-msg" style="padding:6px 10px;font-size:11px;color:rgba(255,255,255,.25);font-style:italic">Login as HR to access</div>
    </div>
  </div>
  <!-- Login Panel -->
  <div class="sidebar-footer">
    <div id="sync-status" style="font-size:11px;margin-bottom:6px;display:flex;align-items:center;gap:5px;min-height:16px"></div>
    <button onclick="manualSync()" style="width:100%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:6px;padding:6px;color:rgba(255,255,255,.5);font-size:11px;cursor:pointer;font-family:var(--font);margin-bottom:8px;display:flex;align-items:center;justify-content:center;gap:5px" onmouseover="this.style.background='rgba(255,255,255,.12)'" onmouseout="this.style.background='rgba(255,255,255,.07)'">
      <i class="ti ti-refresh"></i> Force Sync
    </button>

    <!-- Unified ACCESS form (single password box for all roles + employee PIN) -->
    <div id="all-logged-out">
      <div style="font-size:11px;color:rgba(255,255,255,.3);margin-bottom:6px;letter-spacing:.04em">ACCESS</div>
      <div style="display:flex;gap:6px;align-items:center;margin-bottom:6px">
        <div style="position:relative;flex:1">
          <i class="ti ti-lock" style="position:absolute;left:8px;top:50%;transform:translateY(-50%);font-size:13px;color:rgba(255,255,255,.3)"></i>
          <input type="password" id="admin-pw-input" placeholder="Password or Employee PIN"
            style="width:100%;padding:7px 8px 7px 26px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:6px;color:white;font-size:12px;font-family:var(--font);outline:none;"
            onkeydown="if(event.key==='Enter')tryLogin()"
            onfocus="this.style.borderColor='rgba(59,130,246,.6)'"
            onblur="this.style.borderColor='rgba(255,255,255,.12)'">
        </div>
        <button onclick="tryLogin()"
          style="background:var(--accent);border:none;border-radius:6px;padding:7px 10px;cursor:pointer;color:white;font-size:13px;flex-shrink:0;"
          onmouseover="this.style.background='#2563EB'" onmouseout="this.style.background='var(--accent)'">
          <i class="ti ti-arrow-right"></i>
        </button>
      </div>
      <div id="admin-pw-err" style="display:none;font-size:11px;color:#FCA5A5;margin-top:4px"><i class="ti ti-alert-circle"></i> Incorrect password or PIN</div>
    </div>

    <!-- Admin logged in badge -->
    <div id="admin-logged-in" style="display:none">
      <div style="display:flex;align-items:center;gap:8px;margin-bottom:6px">
        <div style="width:28px;height:28px;background:rgba(59,130,246,.25);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0">
          <i class="ti ti-shield-check" style="font-size:14px;color:var(--accent)"></i>
        </div>
        <div>
          <div style="font-size:12px;font-weight:600;color:white">Admin</div>
          <div style="font-size:10px;color:rgba(255,255,255,.35)">Full access</div>
        </div>
        <button onclick="doAdminLogout()" title="Sign out"
          style="margin-left:auto;background:none;border:none;cursor:pointer;color:rgba(255,255,255,.35);font-size:15px;padding:2px;"
          onmouseover="this.style.color='#FCA5A5'" onmouseout="this.style.color='rgba(255,255,255,.35)'">
          <i class="ti ti-logout"></i>
        </button>
      </div>
    </div>

    <!-- HR logged in badge -->
    <div id="hr-logged-in" style="display:none">
      <div style="display:flex;align-items:center;gap:8px;margin-bottom:6px">
        <div style="width:28px;height:28px;background:rgba(16,185,129,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0">
          <i class="ti ti-users" style="font-size:14px;color:var(--success)"></i>
        </div>
        <div>
          <div style="font-size:12px;font-weight:600;color:white">HR</div>
          <div style="font-size:10px;color:rgba(255,255,255,.35)">HR & Management access</div>
        </div>
        <button onclick="doHRLogout()" title="Sign out"
          style="margin-left:auto;background:none;border:none;cursor:pointer;color:rgba(255,255,255,.35);font-size:15px;padding:2px;"
          onmouseover="this.style.color='#FCA5A5'" onmouseout="this.style.color='rgba(255,255,255,.35)'">
          <i class="ti ti-logout"></i>
        </button>
      </div>
    </div>

    <!-- Manager logged in badge -->
    <div id="mgr-logged-in" style="display:none">
      <div style="display:flex;align-items:center;gap:8px;margin-bottom:6px">
        <div style="width:28px;height:28px;background:rgba(245,158,11,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0">
          <i class="ti ti-briefcase" style="font-size:14px;color:#F59E0B"></i>
        </div>
        <div>
          <div style="font-size:12px;font-weight:600;color:white">Manager</div>
          <div style="font-size:10px;color:rgba(255,255,255,.35)">Management access</div>
        </div>
        <button onclick="doMgrLogout()" title="Sign out"
          style="margin-left:auto;background:none;border:none;cursor:pointer;color:rgba(255,255,255,.35);font-size:15px;padding:2px;"
          onmouseover="this.style.color='#FCA5A5'" onmouseout="this.style.color='rgba(255,255,255,.35)'">
          <i class="ti ti-logout"></i>
        </button>
      </div>
    </div>

    <!-- Employee (profile) logged in badge — shows logo + name + "Profile access" -->
    <div id="profile-logged-in" style="display:none">
      <div style="display:flex;align-items:center;gap:8px;margin-bottom:6px">
        <div style="width:32px;height:32px;background:rgba(16,185,129,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1.5px solid rgba(16,185,129,.4)">
          <i class="ti ti-user-circle" style="font-size:17px;color:#10B981"></i>
        </div>
        <div style="flex:1;min-width:0">
          <div style="font-size:12px;font-weight:600;color:white;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" id="profile-logged-name">—</div>
          <div style="font-size:10px;color:rgba(255,255,255,.35)">Profile access</div>
        </div>
        <button onclick="doProfileLogout()" title="Sign out"
          style="background:none;border:none;cursor:pointer;color:rgba(255,255,255,.35);font-size:15px;padding:2px"
          onmouseover="this.style.color='#FCA5A5'" onmouseout="this.style.color='rgba(255,255,255,.35)'">
          <i class="ti ti-logout"></i>
        </button>
      </div>
    </div>

    <div style="font-size:10px;color:rgba(255,255,255,.25);margin-top:4px">© 2026 Careplus Infotech</div>
  </div>
</nav>

<!-- Main -->
<div id="main">
  <div class="topbar">
    <div class="topbar-title" id="topbar-title">Dashboard</div>
    <div class="topbar-right">
      <span class="topbar-date" id="topbar-date"></span>
      <span class="topbar-badge" id="topbar-badge">Live</span>
    </div>
  </div>

  <div class="page-content">

    <!-- ── Dashboard ── -->
    <div id="tab-dashboard" class="section active">
      <div class="page-header">
        <div class="page-heading">Good morning 👋</div>
        <div class="page-sub">Here's what's happening with attendance today.</div>
      </div>
      <div class="metric-grid">
        <div class="metric-card blue">
          <div class="metric-card-top">
            <div><div class="metric-label">Total Employees</div><div class="metric-value" id="m-total">0</div></div>
            <div class="metric-icon"><i class="ti ti-users"></i></div>
          </div>
          <div class="metric-sub neutral"><i class="ti ti-minus" style="font-size:10px"></i> Active workforce</div>
        </div>
        <div class="metric-card green">
          <div class="metric-card-top">
            <div><div class="metric-label">Present Today</div><div class="metric-value" id="m-present">0</div></div>
            <div class="metric-icon"><i class="ti ti-calendar-check"></i></div>
          </div>
          <div class="metric-sub up" id="m-rate"><i class="ti ti-arrow-up" style="font-size:10px"></i> 0% attendance rate</div>
        </div>
        <div class="metric-card red">
          <div class="metric-card-top">
            <div><div class="metric-label">Absent</div><div class="metric-value" id="m-absent">0</div></div>
            <div class="metric-icon"><i class="ti ti-user-x"></i></div>
          </div>
          <div class="metric-sub neutral">Not clocked in</div>
        </div>
        <div class="metric-card amber">
          <div class="metric-card-top">
            <div><div class="metric-label">Late Arrivals</div><div class="metric-value" id="m-late">0</div></div>
            <div class="metric-icon"><i class="ti ti-clock-exclamation"></i></div>
          </div>
          <div class="metric-sub neutral">Past shift start time</div>
        </div>
        <div class="metric-card purple">
          <div class="metric-card-top">
            <div><div class="metric-label">On Leave</div><div class="metric-value" id="m-onleave">0</div></div>
            <div class="metric-icon"><i class="ti ti-beach"></i></div>
          </div>
          <div class="metric-sub neutral">Approved leaves today</div>
        </div>
      </div>
      <div class="dash-row">
        <!-- Recent Attendance: 2/5 width (cols 1-2) -->
        <div class="card dash-recent">
          <div class="card-header">
            <span class="card-title">Recent Attendance</span>
            <span class="card-title-tag" id="today-count">Today</span>
          </div>
          <div id="today-list"></div>
        </div>
        <!-- By Department: 1/5 width (col 3) -->
        <div class="card dash-dept">
          <div class="card-header"><span class="card-title">By Department</span><span class="card-title-tag">Today</span></div>
          <div id="dept-bars"></div>
        </div>
        <!-- Attendance Overview: 2/5 width (cols 4-5) -->
        <div class="card dash-overview">
          <div class="card-header">
            <span class="card-title">Attendance Overview</span>
            <div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap">
              <span style="display:flex;align-items:center;gap:4px;font-size:11px;color:var(--gray-500)"><span style="width:9px;height:9px;border-radius:50%;background:#10B981;display:inline-block"></span>Present</span>
              <span style="display:flex;align-items:center;gap:4px;font-size:11px;color:var(--gray-500)"><span style="width:9px;height:9px;border-radius:50%;background:#EF4444;display:inline-block"></span>Absent</span>
              <span style="display:flex;align-items:center;gap:4px;font-size:11px;color:var(--gray-500)"><span style="width:9px;height:9px;border-radius:50%;background:#F59E0B;display:inline-block"></span>Late</span>
              <span style="display:flex;align-items:center;gap:4px;font-size:11px;color:var(--gray-500)"><span style="width:9px;height:9px;border-radius:50%;background:#3B82F6;display:inline-block"></span>On Leave</span>
            </div>
          </div>
          <div style="position:relative;flex:1;min-height:160px"><canvas id="weekChart"></canvas></div>
        </div>
      </div>
      <!-- Monthly attendance inline -->
      <div class="card">
        <div class="card-header">
          <span class="card-title">Monthly Attendance</span>
          <div style="display:flex;align-items:center;gap:8px">
            <button class="month-nav-btn" onclick="changeMonth(-1)"><i class="ti ti-chevron-left"></i></button>
            <span class="month-label" id="db-month-label" style="font-size:13px;min-width:120px;text-align:center"></span>
            <button class="month-nav-btn" onclick="changeMonth(1)"><i class="ti ti-chevron-right"></i></button>
            <select class="select-input" id="db-report-dept-filter" onchange="renderMonthly()" style="font-size:12px"></select>
            <select class="select-input" id="db-report-emp-filter" onchange="renderMonthly()" style="font-size:12px"></select>
          </div>
        </div>
        <div class="legend">
          <span class="leg"><span class="leg-dot" style="background:#D1FAE5"></span>Present</span>
          <span class="leg"><span class="leg-dot" style="background:#FEF3C7"></span>Late</span>
          <span class="leg"><span class="leg-dot" style="background:#FEE2E2"></span>Absent</span>
          <span class="leg"><span class="leg-dot" style="background:#E0E7FF"></span>On Leave</span>
          <span class="leg"><span class="leg-dot" style="background:var(--gray-100)"></span>Weekend</span>
        </div>
        <div class="report-wrap"><table class="report-tbl"><thead id="db-report-thead"></thead><tbody id="db-report-tbody"></tbody></table></div>
        <div class="summary-strip" id="db-report-summary" style="margin-top:12px"></div>
      </div>
    </div>

    <!-- ── Clock In/Out ── -->
    <div id="tab-clockin" class="section">
      <div class="page-header"><div class="page-heading">Clock In / Out</div><div class="page-sub">Select your name then enter your PIN to record attendance.</div></div>
      <div class="clock-hero">
        <div class="clock-display" id="live-clock">00:00:00 AM</div>
        <div class="clock-date" id="live-date"></div>
        <div class="clock-emp-label">Search or select your name</div>
        <div style="position:relative;width:280px;max-width:100%;margin:0 auto 22px">
          <input type="text" id="clockEmpSearch" placeholder="Type your name…"
            style="width:100%;padding:10px 14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-sm);color:white;font-size:14px;font-family:var(--font);outline:none"
            oninput="filterClockEmpList()"
            onfocus="document.getElementById('clockEmpDropdown').style.display='block'"
            autocomplete="off">
          <div id="clockEmpDropdown"
            style="display:none;position:absolute;top:100%;left:0;right:0;background:white;border-radius:var(--radius-sm);box-shadow:var(--shadow-md);max-height:200px;overflow-y:auto;z-index:50;margin-top:4px">
          </div>
        </div>
        <input type="hidden" id="clockEmpSelect" value="">
        <div class="clock-btn-row">
          <button class="btn-clock-in" onclick="startPinFlow('in')"><i class="ti ti-login"></i> Clock In</button>
          <button class="btn-clock-out" onclick="startPinFlow('out')"><i class="ti ti-logout"></i> Clock Out</button>
        </div>
        <div class="clock-status-row" id="clock-status-row"></div>
      </div>
    </div>

    <!-- ── Records ── -->
    <div id="tab-records" class="section">
      <div class="page-header">
        <div class="page-heading">Attendance Records</div>
        <div class="page-sub" id="rec-view-label">Showing today's records</div>
      </div>
      <!-- Leave Requests panel (admin only) -->
      <div class="card" style="margin-bottom:16px" id="leave-requests-panel">
        <div class="card-header"><span class="card-title"><i class="ti ti-calendar-check" style="color:var(--info)"></i> Leave Requests</span><span class="card-title-tag" id="leave-req-count"></span></div>
        <div class="table-wrap">
          <table><thead><tr><th>Employee</th><th>Type</th><th>From</th><th>To</th><th>Days</th><th>Reason</th><th>Status</th><th style="text-align:center">Action</th></tr></thead>
          <tbody id="leave-requests-tbody"></tbody></table>
        </div>
        <div id="leave-req-pagination"></div>
      </div>
          <div class="search-wrap"><i class="ti ti-search"></i><input type="text" class="search-input" id="rec-search" placeholder="Search by name…" oninput="resetRecPage();renderRecords()"></div>
          <select class="select-input" id="rec-filter" onchange="resetRecPage();renderRecords()">
            <option value="all">All Status</option><option value="Present">Present</option>
            <option value="Late">Late</option><option value="Absent">Absent</option><option value="Leave">On Leave</option>
          </select>
          <button class="btn-outline" id="rec-history-btn" onclick="toggleRecordsHistory()" style="display:flex;align-items:center;gap:6px">
            <i class="ti ti-history"></i> View History
          </button>
        </div>
        <div class="table-wrap">
          <table><thead><tr><th>Employee</th><th>Date</th><th>Clock In</th><th>Clock Out</th><th>Hours</th><th>Status</th></tr></thead>
          <tbody id="records-tbody"></tbody></table>
        </div>
      </div>
    </div>

    
    <!-- ── Leave Management ── -->
    <div id="tab-leave" class="section">
      <div class="page-header">
        <div class="page-heading">Leave Management</div>
        <div class="page-sub">Manage employee leave status and attendance overrides.</div>
      </div>

      <div class="card">
        <div class="toolbar">
          <select class="select-input" id="leave-employee"></select>
          <select class="select-input" id="leave-status">
            <option value="Leave">On Leave</option>
            <option value="Absent">Absent</option>
            <option value="Present">Present</option>
            <option value="Late">Late</option>
          </select>
          <button class="btn-primary" onclick="applyLeaveStatus()">
            <i class="ti ti-device-floppy"></i> Apply Status
          </button>
        </div>

        <div class="table-wrap">
          <table>
            <thead>
              <tr>
                <th>Employee</th>
                <th>Department</th>
                <th>Today's Status</th>
              </tr>
            </thead>
            <tbody id="leave-tbody"></tbody>
          </table>
        </div>
        <div id="leave-pagination"></div>
      </div>
    </div>
    <div id="tab-employees" class="section">
      <div class="page-header"><div class="page-heading">Employees</div><div class="page-sub">Manage your workforce and track individual rates.</div></div>
      <div class="card">
        <div class="toolbar">
          <div class="search-wrap"><i class="ti ti-search"></i><input type="text" class="search-input" id="emp-search" placeholder="Search employees…" oninput="empPage=0;renderEmployees()"></div>
          <button class="btn-primary" onclick="openAddModal()"><i class="ti ti-plus"></i> Add Employee</button>
        </div>
        <div class="table-wrap">
          <table><thead><tr><th>Name</th><th>Department</th><th>Role</th><th>Shift Schedule</th><th>PIN</th><th>Rate</th><th style="text-align:center">Actions</th></tr></thead>
          <tbody id="employees-tbody"></tbody></table>
        </div>
        <div id="emp-pagination"></div>
      </div>
    </div>

    <!-- ── Departments ── -->
    <div id="tab-departments" class="section">
      <div class="page-header"><div class="page-heading">Departments</div><div class="page-sub">Add, rename, or remove departments.</div></div>
      <div class="card">
        <div class="toolbar">
          <div class="search-wrap"><i class="ti ti-search"></i><input type="text" class="search-input" id="dept-search" placeholder="Search departments…" oninput="deptPage=0;renderDeptTab()"></div>
          <button class="btn-primary" onclick="openDeptAddModal()"><i class="ti ti-plus"></i> Add Department</button>
        </div>
        <div class="table-wrap">
          <table><thead><tr><th>Department</th><th>Employees</th><th>Color</th><th style="text-align:center">Actions</th></tr></thead>
          <tbody id="dept-tbody"></tbody></table>
        </div>
        <div id="dept-pagination"></div>
      </div>
    </div>

    <!-- ── Monthly Report ── -->
    <div id="tab-monthly" class="section">
      <div class="page-header"><div class="page-heading">Monthly Report</div><div class="page-sub">Daily attendance breakdown for every employee.</div></div>
      <div class="card">
        <div class="report-bar">
          <button class="month-nav-btn" onclick="changeMonth(-1)"><i class="ti ti-chevron-left"></i></button>
          <span class="month-label" id="month-label"></span>
          <button class="month-nav-btn" onclick="changeMonth(1)"><i class="ti ti-chevron-right"></i></button>
          <select class="select-input" id="report-dept-filter" onchange="renderMonthly()"><option value="all">All Departments</option></select>
          <select class="select-input" id="report-emp-filter" onchange="renderMonthly()"><option value="all">All Employees</option></select>
          <button class="btn-primary" onclick="requireAdmin(toggleMonthlyEditMode)" id="monthly-edit-btn" style="margin-left:auto"><i class="ti ti-edit"></i> <span id="monthly-edit-label">Edit Mode</span></button>
        </div>
        <div class="legend">
          <span class="leg"><span class="leg-dot" style="background:#D1FAE5"></span>Present</span>
          <span class="leg"><span class="leg-dot" style="background:#FEF3C7"></span>Late</span>
          <span class="leg"><span class="leg-dot" style="background:#FEE2E2"></span>Absent</span>
          <span class="leg"><span class="leg-dot" style="background:#E0E7FF"></span>On Leave</span>
          <span class="leg"><span class="leg-dot" style="background:var(--gray-100)"></span>Weekend</span>
        </div>
        <div class="report-wrap">
          <table class="report-tbl"><thead id="report-thead"></thead><tbody id="report-tbody"></tbody></table>
        </div>
      </div>
      <div class="summary-strip" id="report-summary"></div>
    </div>

    <!-- ── Reports ── -->
    <div id="tab-reports" class="section">
      <div class="page-header"><div class="page-heading">Reports</div><div class="page-sub">Attendance summary, tardiness, and top hours worked.</div></div>

      <!-- Controls -->
      <div style="display:flex;gap:10px;align-items:center;margin-bottom:16px;flex-wrap:wrap">
        <select class="select-input" id="rpt-month" onchange="renderReports()"></select>
        <select class="select-input" id="rpt-dept" onchange="renderReports()"><option value="all">All Departments</option></select>
        <div class="search-wrap" style="flex:1;min-width:140px"><i class="ti ti-search"></i><input type="text" class="search-input" id="rpt-emp-search" placeholder="Search employee…" oninput="renderReports()"></div>
        <button class="btn-primary" onclick="exportCSV()" style="margin-left:auto"><i class="ti ti-file-spreadsheet"></i> Export CSV</button>
      </div>

      <!-- Summary per employee -->
      <div class="report-card">
        <div class="report-card-title"><i class="ti ti-users" style="color:var(--accent)"></i> Attendance Summary per Employee</div>
        <div class="emp-grid" id="rpt-emp-grid"></div>
      </div>

      <!-- Tardiness report -->
      <div class="report-card">
        <div class="report-card-title"><i class="ti ti-clock-exclamation" style="color:var(--warning)"></i> Tardiness Report <span style="font-size:12px;font-weight:400;color:var(--gray-400);margin-left:4px">— employees with most late arrivals</span></div>
        <div class="table-wrap">
          <table><thead><tr><th>Employee</th><th>Department</th><th>Late Days</th><th>Absent Days</th><th>On Time</th><th>Rate</th></tr></thead>
          <tbody id="rpt-tardiness-tbody"></tbody></table>
        </div>
      </div>

      <!-- Most hours worked -->
      <div class="report-card">
        <div class="report-card-title"><i class="ti ti-trophy" style="color:var(--success)"></i> Most Hours Worked <span style="font-size:12px;font-weight:400;color:var(--gray-400);margin-left:4px">— top employees by total hours</span></div>
        <div class="table-wrap">
          <table><thead><tr><th>Rank</th><th>Employee</th><th>Department</th><th>Total Hours</th><th>Avg Hours/Day</th><th>Overtime Days</th></tr></thead>
          <tbody id="rpt-hours-tbody"></tbody></table>
        </div>
      </div>
    </div>

    <!-- ── Employee Profiles (HR) ── -->
    <div id="tab-empprofile" class="section">
      <div class="page-header">
        <div class="page-heading">Employee Profiles</div>
        <div class="page-sub">View and manage detailed employee information</div>
      </div>

      <!-- Profile Form Card -->
      <div class="card" style="margin-bottom:16px">
        <div class="card-header">
          <span class="card-title"><i class="ti ti-user-edit" style="color:var(--accent)"></i> <span id="ep-form-title">Add / Edit Profile</span></span>
          <select class="select-input" id="ep-select-emp" onchange="loadEmpProfile()" style="width:220px">
            <option value="">— Select Employee —</option>
          </select>
        </div>
        <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:14px">
          <div class="form-group" style="margin-bottom:0">
            <label>Full Name</label>
            <input type="text" id="ep-name" placeholder="e.g. Juan dela Cruz" class="ep-input">
          </div>
          <div class="form-group" style="margin-bottom:0">
            <label>Date of Birth</label>
            <input type="date" id="ep-dob" class="ep-input">
          </div>
          <div class="form-group" style="margin-bottom:0">
            <label>Contact Number</label>
            <input type="text" id="ep-contact" placeholder="e.g. 09171234567" class="ep-input">
          </div>
        </div>
        <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:14px">
          <div class="form-group" style="margin-bottom:0">
            <label>SSS ID</label>
            <input type="text" id="ep-sss" placeholder="e.g. 34-1234567-8" class="ep-input">
          </div>
          <div class="form-group" style="margin-bottom:0">
            <label>PhilHealth ID</label>
            <input type="text" id="ep-philhealth" placeholder="e.g. 12-345678901-2" class="ep-input">
          </div>
          <div class="form-group" style="margin-bottom:0">
            <label>Tax Identification No. (TIN)</label>
            <input type="text" id="ep-tin" placeholder="e.g. 123-456-789-000" class="ep-input">
          </div>
        </div>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px">
          <div class="form-group" style="margin-bottom:0">
            <label>Personal Email</label>
            <input type="email" id="ep-personal-email" placeholder="e.g. juan@gmail.com" class="ep-input">
          </div>
          <div class="form-group" style="margin-bottom:0">
            <label>Work Email</label>
            <input type="email" id="ep-work-email" placeholder="e.g. juan@careplus.com" class="ep-input">
          </div>
        </div>
        <div class="form-group" style="margin-bottom:14px">
          <label>Address</label>
          <textarea id="ep-address" placeholder="e.g. 123 Rizal St., Barangay San Jose, Quezon City" class="ep-input" style="resize:vertical;min-height:56px"></textarea>
        </div>
        <div style="display:flex;gap:10px">
          <button class="btn-primary" onclick="saveEmpProfile()"><i class="ti ti-device-floppy"></i> Save Profile</button>
          <button onclick="clearEmpProfileForm()" style="background:var(--gray-100);border:none;border-radius:var(--radius-sm);padding:8px 16px;font-size:13px;cursor:pointer;font-family:var(--font);color:var(--gray-600)"><i class="ti ti-x"></i> Clear</button>
        </div>
      </div>

      <!-- Profile List -->
      <div class="card">
        <div class="card-header">
          <span class="card-title"><i class="ti ti-users" style="color:var(--accent)"></i> All Employee Profiles</span>
          <input type="text" id="ep-search" placeholder="Search employee…" oninput="renderEmpProfileList()" style="padding:6px 10px;border:1px solid var(--gray-200);border-radius:var(--radius-sm);font-size:12px;font-family:var(--font);outline:none;width:180px">
        </div>
        <div id="ep-profile-list"></div>
      </div>
    </div>

    <!-- ── Payslip ── -->
    <div id="tab-payslip" class="section">
      <div class="page-header"><div class="page-heading">Payslip</div><div class="page-sub">Generate and view employee payslips.</div></div>
      <div class="card" style="margin-bottom:16px">
        <div class="card-title" style="margin-bottom:14px">Generate Payslip</div>
        <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:14px">
          <div class="form-group" style="margin-bottom:0"><label>Employee</label><select class="select-input" id="ps-employee" style="width:100%"></select></div>
          <div class="form-group" style="margin-bottom:0"><label>Month</label><select class="select-input" id="ps-month" style="width:100%"></select></div>
          <div class="form-group" style="margin-bottom:0"><label>Basic Salary (₱)</label><input type="number" id="ps-salary" placeholder="e.g. 25000" style="width:100%;padding:8px 10px;border:1px solid var(--gray-200);border-radius:var(--radius-sm);font-size:13px;font-family:var(--font);outline:none"></div>
        </div>
        <div style="font-size:12px;font-weight:600;color:var(--gray-500);text-transform:uppercase;letter-spacing:.04em;margin:18px 0 10px">Earnings</div>
        <div style="display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px;margin-bottom:14px">
          <div class="form-group" style="margin-bottom:0"><label>Overtime Rate (₱/hr)</label><input type="number" id="ps-ot-rate" placeholder="e.g. 150" class="ep-input"></div>
          <div class="form-group" style="margin-bottom:0"><label>COLA (₱)</label><input type="number" id="ps-cola" placeholder="e.g. 1000" class="ep-input"></div>
          <div class="form-group" style="margin-bottom:0"><label>Internet Allowance (₱)</label><input type="number" id="ps-internet" placeholder="e.g. 500" class="ep-input"></div>
          <div class="form-group" style="margin-bottom:0"><label>Night Differential (₱)</label><input type="number" id="ps-nightdiff" placeholder="e.g. 0" class="ep-input"></div>
        </div>
        <div style="font-size:12px;font-weight:600;color:var(--gray-500);text-transform:uppercase;letter-spacing:.04em;margin:18px 0 10px">Government Deductions</div>
        <div style="display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px;margin-bottom:14px">
          <div class="form-group" style="margin-bottom:0"><label>SSS (₱)</label><input type="number" id="ps-sss" placeholder="e.g. 581.30" class="ep-input"></div>
          <div class="form-group" style="margin-bottom:0"><label>PhilHealth (₱)</label><input type="number" id="ps-philhealth" placeholder="e.g. 450" class="ep-input"></div>
          <div class="form-group" style="margin-bottom:0"><label>Pag-IBIG (₱)</label><input type="number" id="ps-pagibig" placeholder="e.g. 200" class="ep-input"></div>
          <div class="form-group" style="margin-bottom:0"><label>Withholding Tax (₱)</label><input type="number" id="ps-tax" placeholder="e.g. 0" class="ep-input"></div>
        </div>
        <div style="font-size:12px;font-weight:600;color:var(--gray-500);text-transform:uppercase;letter-spacing:.04em;margin:18px 0 10px">Other Deductions</div>
        <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:14px">
          <div class="form-group" style="margin-bottom:0"><label>Absence Deduction (₱)</label><input type="number" id="ps-absent-ded" placeholder="e.g. 0" class="ep-input"></div>
          <div class="form-group" style="margin-bottom:0"><label>Other Deductions (₱)</label><input type="number" id="ps-other-ded" placeholder="e.g. 0" class="ep-input"></div>
          <div style="display:flex;align-items:flex-end"><button class="btn-primary" onclick="generatePayslip()" style="width:100%"><i class="ti ti-calculator"></i> Generate</button></div>
        </div>
      </div>
      <!-- Payslip preview -->
      <div id="payslip-preview" style="display:none">
        <div style="max-width:600px;margin:0 auto 12px;display:flex;gap:8px;justify-content:flex-end">
          <button class="btn-primary" onclick="savePayslipPDF()"><i class="ti ti-file-type-pdf"></i> Save as PDF</button>
        </div>
        <div class="card" id="payslip-content" style="max-width:600px;margin:0 auto">
          <div style="text-align:center;border-bottom:2px solid var(--gray-200);padding-bottom:16px;margin-bottom:16px">
            <div style="font-size:18px;font-weight:700;color:var(--gray-900)">Careplus Infotech</div>
            <div style="font-size:13px;color:var(--gray-500);margin-top:2px">Employee Payslip</div>
          </div>
          <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px;font-size:13px">
            <div><span style="color:var(--gray-500)">Employee:</span> <strong id="ps-out-name"></strong></div>
            <div><span style="color:var(--gray-500)">Period:</span> <strong id="ps-out-period"></strong></div>
            <div><span style="color:var(--gray-500)">Department:</span> <strong id="ps-out-dept"></strong></div>
            <div><span style="color:var(--gray-500)">Days Worked:</span> <strong id="ps-out-days"></strong></div>
            <div><span style="color:var(--gray-500)">Days Absent:</span> <strong id="ps-out-absent"></strong></div>
            <div><span style="color:var(--gray-500)">Overtime Hours:</span> <strong id="ps-out-ot"></strong></div>
          </div>
          <table style="width:100%;font-size:13px;border-collapse:collapse;margin-bottom:10px">
            <tr style="background:var(--gray-50)"><th colspan="2" style="text-align:left;padding:8px 10px;border:1px solid var(--gray-200)">Earnings</th></tr>
            <tr><td style="padding:7px 10px;border:1px solid var(--gray-200)">Basic Salary</td><td style="text-align:right;padding:7px 10px;border:1px solid var(--gray-200)" id="ps-out-basic"></td></tr>
            <tr><td style="padding:7px 10px;border:1px solid var(--gray-200)">Overtime Pay</td><td style="text-align:right;padding:7px 10px;border:1px solid var(--gray-200)" id="ps-out-otpay"></td></tr>
            <tr><td style="padding:7px 10px;border:1px solid var(--gray-200)">COLA</td><td style="text-align:right;padding:7px 10px;border:1px solid var(--gray-200)" id="ps-out-cola"></td></tr>
            <tr><td style="padding:7px 10px;border:1px solid var(--gray-200)">Internet Allowance</td><td style="text-align:right;padding:7px 10px;border:1px solid var(--gray-200)" id="ps-out-internet"></td></tr>
            <tr><td style="padding:7px 10px;border:1px solid var(--gray-200)">Night Differential</td><td style="text-align:right;padding:7px 10px;border:1px solid var(--gray-200)" id="ps-out-nightdiff"></td></tr>
            <tr style="font-weight:600"><td style="padding:7px 10px;border:1px solid var(--gray-200)">Gross Pay</td><td style="text-align:right;padding:7px 10px;border:1px solid var(--gray-200)" id="ps-out-gross"></td></tr>
          </table>
          <table style="width:100%;font-size:13px;border-collapse:collapse;margin-bottom:16px;color:var(--danger)">
            <tr style="background:var(--gray-50);color:var(--gray-900)"><th colspan="2" style="text-align:left;padding:8px 10px;border:1px solid var(--gray-200)">Deductions</th></tr>
            <tr><td style="padding:7px 10px;border:1px solid var(--gray-200)">SSS</td><td style="text-align:right;padding:7px 10px;border:1px solid var(--gray-200)" id="ps-out-sss"></td></tr>
            <tr><td style="padding:7px 10px;border:1px solid var(--gray-200)">PhilHealth</td><td style="text-align:right;padding:7px 10px;border:1px solid var(--gray-200)" id="ps-out-philhealth"></td></tr>
            <tr><td style="padding:7px 10px;border:1px solid var(--gray-200)">Pag-IBIG</td><td style="text-align:right;padding:7px 10px;border:1px solid var(--gray-200)" id="ps-out-pagibig"></td></tr>
            <tr><td style="padding:7px 10px;border:1px solid var(--gray-200)">Withholding Tax</td><td style="text-align:right;padding:7px 10px;border:1px solid var(--gray-200)" id="ps-out-tax"></td></tr>
            <tr><td style="padding:7px 10px;border:1px solid var(--gray-200)">Absence Deduction</td><td style="text-align:right;padding:7px 10px;border:1px solid var(--gray-200)" id="ps-out-absentded"></td></tr>
            <tr><td style="padding:7px 10px;border:1px solid var(--gray-200)">Other Deductions</td><td style="text-align:right;padding:7px 10px;border:1px solid var(--gray-200)" id="ps-out-otherded"></td></tr>
            <tr style="font-weight:600"><td style="padding:7px 10px;border:1px solid var(--gray-200)">Total Deductions</td><td style="text-align:right;padding:7px 10px;border:1px solid var(--gray-200)" id="ps-out-ded"></td></tr>
          </table>
          <table style="width:100%;font-size:13px;border-collapse:collapse;margin-bottom:16px">
            <tr style="background:var(--accent-light);font-weight:700"><td style="padding:10px;border:2px solid var(--accent);color:var(--accent)">Net Pay</td><td style="text-align:right;padding:10px;border:2px solid var(--accent);color:var(--accent);font-size:16px" id="ps-out-net"></td></tr>
          </table>
          <div style="font-size:11px;color:var(--gray-400);text-align:center">Generated on <span id="ps-out-date"></span> · Careplus Infotech Attendance System</div>
        </div>
      </div>

      <!-- Saved Payslips list (HR view) -->
      <div class="card" style="margin-top:20px">
        <div class="card-header">
          <span class="card-title"><i class="ti ti-folder-open" style="color:var(--accent)"></i> Saved Payslips</span>
          <span style="font-size:12px;color:var(--gray-400)">Upload a file so the employee can download it from My Payslip</span>
        </div>
        <div id="hr-payslip-list"><div class="empty-state" style="padding:24px">No payslips generated yet.</div></div>
      </div>
      <!-- Hidden file input for payslip upload -->
      <input type="file" id="ps-upload-input" accept=".pdf,image/*" style="display:none" onchange="handlePayslipFileUpload(event)">
    </div>

    <!-- ── My Profile ── -->
    <div id="tab-profile" class="section">
      <div class="page-header"><div class="page-heading" id="profile-heading">My Attendance</div><div class="page-sub" id="profile-subheading">Your attendance for the current month</div></div>
      <div id="profile-month-summary" style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px"></div>
      <div class="card" style="margin-bottom:16px">
        <div class="card-header">
          <span class="card-title">Attendance History</span>
          <select class="select-input" id="profile-month-sel" onchange="renderProfile()"></select>
        </div>
        <div class="report-wrap"><table class="report-tbl"><thead id="profile-thead"></thead><tbody id="profile-tbody"></tbody></table></div>
      </div>
      <!-- Leave Request -->
      <div class="card">
        <div class="card-header"><span class="card-title"><i class="ti ti-calendar-plus" style="color:var(--info)"></i> Request Leave</span></div>
        <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:12px">
          <div class="form-group" style="margin-bottom:0">
            <label>Leave Type</label>
            <select class="select-input" id="lr-type" style="width:100%">
              <option value="Sick Leave">Sick Leave</option>
              <option value="Vacation">Vacation</option>
              <option value="Emergency">Emergency</option>
              <option value="Maternity">Maternity</option>
              <option value="Paternity">Paternity</option>
              <option value="Other">Other</option>
            </select>
          </div>
          <div class="form-group" style="margin-bottom:0"><label>Date From</label><input type="date" id="lr-from" style="width:100%;padding:8px 10px;border:1px solid var(--gray-200);border-radius:var(--radius-sm);font-size:13px;font-family:var(--font);outline:none"></div>
          <div class="form-group" style="margin-bottom:0"><label>Date To</label><input type="date" id="lr-to" style="width:100%;padding:8px 10px;border:1px solid var(--gray-200);border-radius:var(--radius-sm);font-size:13px;font-family:var(--font);outline:none"></div>
        </div>
        <div class="form-group" style="margin-bottom:12px">
          <label>Reason <span style="color:var(--gray-400);font-weight:400">(optional)</span></label>
          <textarea id="lr-reason" placeholder="Brief description of your leave request…" style="width:100%;padding:9px 11px;border:1px solid var(--gray-200);border-radius:var(--radius-sm);font-size:13px;font-family:var(--font);outline:none;resize:vertical;min-height:60px"></textarea>
        </div>
        <button class="btn-primary" onclick="submitLeaveRequest()"><i class="ti ti-send"></i> Submit Request</button>
        <!-- My leave requests list -->
        <div id="my-leave-requests" style="margin-top:16px"></div>
      </div>
    </div>

    <!-- ── My Payslip ── -->
    <div id="tab-myPayslip" class="section">
      <div class="page-header"><div class="page-heading">My Payslip</div><div class="page-sub">View your generated payslips</div></div>
      <div id="my-payslip-list" class="card"><div class="empty-state">No payslips available yet. Ask your HR to generate one.</div></div>
    </div>

  </div><!-- /page-content -->
</div><!-- /main -->

<!-- Session warning -->
<div class="session-warning" id="session-warning">
  <i class="ti ti-clock-exclamation"></i>
  <span>Admin session expires in <strong id="session-countdown">60s</strong> — <span style="text-decoration:underline;cursor:pointer" onclick="resetSessionTimer()">Stay logged in</span></span>
</div>

<!-- ── Modals ── -->
<div class="modal-overlay" id="addModal"><div class="modal">
  <div class="modal-header"><h3>Add New Employee</h3><button class="modal-close" onclick="closeModal('addModal')"><i class="ti ti-x"></i></button></div>
  <div class="form-group"><label>Full Name</label><input type="text" id="new-name" placeholder="e.g. Maria Santos"></div>
  <div class="form-group"><label>Department</label><select id="new-dept"></select></div>
  <div class="form-group"><label>Role / Position</label><input type="text" id="new-role" placeholder="e.g. Software Engineer"></div>
  <div style="background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius-sm);padding:12px;margin-bottom:14px">
    <div style="font-size:12px;font-weight:600;color:var(--gray-600);margin-bottom:10px;display:flex;align-items:center;gap:6px"><i class="ti ti-lock" style="color:var(--accent)"></i> Employee PIN</div>
    <div class="form-group" style="margin-bottom:0">
      <label>4-Digit PIN <span style="color:var(--gray-400);font-weight:400">(required for clock in/out)</span></label>
      <input type="password" id="new-pin" maxlength="4" placeholder="••••" inputmode="numeric" pattern="[0-9]{4}" style="font-family:var(--font-mono);letter-spacing:6px;font-size:18px;text-align:center">
    </div>
    <div style="font-size:11px;color:var(--gray-400);margin-top:8px"><i class="ti ti-info-circle"></i> Employee must enter this PIN before clocking in or out.</div>
  </div>
  <div style="background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius-sm);padding:12px;margin-bottom:14px">
    <div style="font-size:12px;font-weight:600;color:var(--gray-600);margin-bottom:10px;display:flex;align-items:center;gap:6px"><i class="ti ti-clock" style="color:var(--accent)"></i> Shift Schedule</div>
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px">
      <div class="form-group" style="margin-bottom:0"><label>Clock In Time</label><input type="time" id="new-shift-start" value="09:00"></div>
      <div class="form-group" style="margin-bottom:0"><label>Clock Out Time</label><input type="time" id="new-shift-end" value="18:00"></div>
    </div>
    <div style="font-size:11px;color:var(--gray-400);margin-top:8px"><i class="ti ti-info-circle"></i> Employee will be marked <b>Late</b> if they clock in after the set time.</div>
  </div>
  <div class="modal-footer"><button class="btn-cancel" onclick="closeModal('addModal')">Cancel</button><button class="btn-save" onclick="saveEmployee()">Add Employee</button></div>
</div></div>

<div class="modal-overlay" id="editEmpModal"><div class="modal">
  <div class="modal-header"><h3>Edit Employee</h3><button class="modal-close" onclick="closeModal('editEmpModal')"><i class="ti ti-x"></i></button></div>
  <div class="form-group"><label>Full Name</label><input type="text" id="edit-name"></div>
  <div class="form-group"><label>Department</label><select id="edit-dept"></select></div>
  <div class="form-group"><label>Role / Position</label><input type="text" id="edit-role"></div>
  <div style="background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius-sm);padding:12px;margin-bottom:14px">
    <div style="font-size:12px;font-weight:600;color:var(--gray-600);margin-bottom:10px;display:flex;align-items:center;gap:6px"><i class="ti ti-lock" style="color:var(--accent)"></i> Employee PIN</div>
    <div class="form-group" style="margin-bottom:0">
      <label>Reset PIN <span style="color:var(--gray-400);font-weight:400">(enter new 4-digit PIN to reset, leave blank to keep current)</span></label>
      <input type="password" id="edit-pin" maxlength="4" placeholder="Enter new PIN to reset" inputmode="numeric" pattern="[0-9]{4}" style="font-family:var(--font-mono);letter-spacing:6px;font-size:18px;text-align:center">
    </div>
    <div style="font-size:11px;color:var(--gray-400);margin-top:8px"><i class="ti ti-info-circle"></i> Employee must enter this PIN before clocking in or out.</div>
  </div>
  <div style="background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius-sm);padding:12px;margin-bottom:14px">
    <div style="font-size:12px;font-weight:600;color:var(--gray-600);margin-bottom:10px;display:flex;align-items:center;gap:6px"><i class="ti ti-clock" style="color:var(--accent)"></i> Shift Schedule</div>
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px">
      <div class="form-group" style="margin-bottom:0"><label>Clock In Time</label><input type="time" id="edit-shift-start"></div>
      <div class="form-group" style="margin-bottom:0"><label>Clock Out Time</label><input type="time" id="edit-shift-end"></div>
    </div>
    <div style="font-size:11px;color:var(--gray-400);margin-top:8px"><i class="ti ti-info-circle"></i> Employee will be marked <b>Late</b> if they clock in after the set time.</div>
  </div>
  <div class="form-group"><label>Annual Leave Allowance (days)</label><input type="number" id="edit-leave-allowance" min="0" max="365" placeholder="Default: 15" style="width:100%;padding:9px 11px;border:1px solid var(--gray-200);border-radius:var(--radius-sm);font-size:13.5px;font-family:var(--font);outline:none"></div>
  <div class="modal-footer"><button class="btn-cancel" onclick="closeModal('editEmpModal')">Cancel</button><button class="btn-save" onclick="saveEditEmployee()">Save Changes</button></div>
</div></div>

<div class="modal-overlay" id="deptAddModal"><div class="modal">
  <div class="modal-header"><h3>Add Department</h3><button class="modal-close" onclick="closeModal('deptAddModal')"><i class="ti ti-x"></i></button></div>
  <div class="form-group"><label>Department Name</label><input type="text" id="new-dept-name" placeholder="e.g. Legal"></div>
  <div class="form-group"><label>Color</label><select id="new-dept-color">
    <option value="blue">Blue</option><option value="teal">Teal</option><option value="amber">Amber</option>
    <option value="coral">Coral</option><option value="green">Green</option><option value="pink">Pink</option>
    <option value="purple">Purple</option><option value="gray">Gray</option>
  </select></div>
  <div class="modal-footer"><button class="btn-cancel" onclick="closeModal('deptAddModal')">Cancel</button><button class="btn-save" onclick="saveDept()">Add Department</button></div>
</div></div>

<div class="modal-overlay" id="deptEditModal"><div class="modal">
  <div class="modal-header"><h3>Edit Department</h3><button class="modal-close" onclick="closeModal('deptEditModal')"><i class="ti ti-x"></i></button></div>
  <div class="form-group"><label>Department Name</label><input type="text" id="edit-dept-name"></div>
  <div class="form-group"><label>Color</label><select id="edit-dept-color">
    <option value="blue">Blue</option><option value="teal">Teal</option><option value="amber">Amber</option>
    <option value="coral">Coral</option><option value="green">Green</option><option value="pink">Pink</option>
    <option value="purple">Purple</option><option value="gray">Gray</option>
  </select></div>
  <div class="modal-footer"><button class="btn-cancel" onclick="closeModal('deptEditModal')">Cancel</button><button class="btn-save" onclick="saveEditDept()">Save Changes</button></div>
</div></div>

<div class="modal-overlay" id="deptDelModal"><div class="modal">
  <div class="modal-header"><h3>Remove Department</h3><button class="modal-close" onclick="closeModal('deptDelModal')"><i class="ti ti-x"></i></button></div>
  <p style="font-size:13px;color:var(--gray-500);margin-bottom:16px" id="dept-del-msg"></p>
  <div class="form-group" id="dept-del-reassign-wrap"><label>Reassign employees to</label><select id="dept-del-reassign"></select></div>
  <div class="modal-footer"><button class="btn-cancel" onclick="closeModal('deptDelModal')">Cancel</button><button class="btn-del" onclick="confirmDeleteDept()">Remove</button></div>
</div></div>

<!-- ── PIN Overlay ── -->
<div class="pin-overlay" id="pinOverlay">
  <div class="pin-box" id="pinBox">
    <div class="pin-emp-avatar" id="pinAvatar"></div>
    <div class="pin-emp-name" id="pinEmpName"></div>
    <div class="pin-emp-role" id="pinEmpRole"></div>
    <span class="pin-action-label" id="pinActionLabel">Clock In</span>
    <div class="pin-dots" id="pinDots">
      <div class="pin-dot" id="pd0"></div>
      <div class="pin-dot" id="pd1"></div>
      <div class="pin-dot" id="pd2"></div>
      <div class="pin-dot" id="pd3"></div>
    </div>
    <div class="pin-err-msg" id="pinErrMsg"></div>
    <div class="pin-pad">
      <button class="pin-key" onclick="pinPress('1')">1</button>
      <button class="pin-key" onclick="pinPress('2')">2</button>
      <button class="pin-key" onclick="pinPress('3')">3</button>
      <button class="pin-key" onclick="pinPress('4')">4</button>
      <button class="pin-key" onclick="pinPress('5')">5</button>
      <button class="pin-key" onclick="pinPress('6')">6</button>
      <button class="pin-key" onclick="pinPress('7')">7</button>
      <button class="pin-key" onclick="pinPress('8')">8</button>
      <button class="pin-key" onclick="pinPress('9')">9</button>
      <button class="pin-key del" onclick="pinDel()"><i class="ti ti-backspace"></i></button>
      <button class="pin-key" onclick="pinPress('0')">0</button>
      <button class="pin-key del" onclick="pinClear()"><i class="ti ti-x"></i></button>
    </div>
    <button class="pin-skip-btn" onclick="closePinOverlay()">Cancel</button>
  </div>
</div>

<div class="toast" id="toast"><i class="ti ti-check" style="font-size:15px;color:#10B981"></i><span id="toast-msg"></span></div>

<script src="https://www.gstatic.com/firebasejs/10.7.1/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.7.1/firebase-database-compat.js"></script>
<script>
// ── Firebase Realtime Database ──
const firebaseConfig = {
  apiKey: "AIzaSyB9s3OhTemg8OCzeOtX-T9NnrDu6bDHTak",
  authDomain: "infotech-attendance.firebaseapp.com",
  databaseURL: "https://infotech-attendance-default-rtdb.firebaseio.com",
  projectId: "infotech-attendance",
  storageBucket: "infotech-attendance.firebasestorage.app",
  messagingSenderId: "338342891743",
  appId: "1:338342891743:web:4c08b94b9c46f11558d96a"
};

let db = null;
let firebaseReady = false;
let isSaving = false; // prevents onValue from overwriting local changes mid-save
let localLastUpdated = 0; // unix ms timestamp of the last time THIS session wrote data

async function initFirebase() {
  try {
    setSyncStatus('syncing');
    if (typeof firebase === 'undefined') {
      console.warn('Firebase SDK not loaded');
      setSyncStatus('error');
      return false;
    }
    if (!firebase.apps.length) {
      firebase.initializeApp(firebaseConfig);
    }
    db = firebase.database();
    firebaseReady = true;

    // Note: keepSynced() is not available in Firebase web compat SDK (mobile only)
    // Firebase web SDK maintains its own persistent WebSocket connection automatically

    // ── Connection timeout: if Firebase doesn't respond in 8s, show clear error ──
    let connected = false;
    const timeoutId = setTimeout(() => {
      if (!connected) {
        console.warn('Firebase timeout — check security rules or network');
        const el = document.getElementById('sync-status');
        if (el) { el.innerHTML = '<i class="ti ti-wifi-off"></i> Cannot reach database — check Firebase rules'; el.style.color = '#EF4444'; }
        setSyncStatus('error');
      }
    }, 8000);

    // ── Monitor real connection state ──
    // Note: .info/connected fires FALSE on initial load before connecting — this is normal.
    // Only set error if we were previously confirmed connected (avoid false offline flash).
    db.ref('.info/connected').on('value', (snap) => {
      if (snap.val() === true) {
        connected = true;
        clearTimeout(timeoutId);
        // Clear any offline banner from a previous drop
        const banner = document.getElementById('offline-banner');
        if (banner) banner.style.display = 'none';
      } else if (connected) {
        // Was connected, now genuinely dropped
        setSyncStatus('error');
      }
      // If snap.val() === false AND connected===false: still initializing, do nothing
    });

    // ── Real-time listener ──
    db.ref('attendance').on('value', (snapshot) => {
      connected = true;
      clearTimeout(timeoutId);
      if (isSaving) return;
      const data = snapshot.val();
      if (!data) {
        if (employees.length > 0) saveToFirebase(); // Firebase empty — push local up
        setSyncStatus('ok');
        return;
      }

      // ── Timestamp guard: only push local→Firebase if THIS session made changes ──
      // We intentionally do NOT read 'ita_lastUpdated' from localStorage here —
      // that value can be stale from a previous session and cause a false push loop.
      // We only compare against localLastUpdated which is set fresh each session by saveToFirebase().
      const remoteTs = Number(data.lastUpdated) || 0;
      if (localLastUpdated > 0 && localLastUpdated > remoteTs) {
        console.info(`[Sync] Local newer (local=${localLastUpdated}, remote=${remoteTs}). Pushing local→Firebase.`);
        saveToFirebase();
        setSyncStatus('ok');
        return;
      }

      if (data.employees   && data.employees.length)   { employees   = data.employees.map(fixTypes); }
      if (data.departments && data.departments.length) { departments = data.departments.map(fixTypes); }
      if (data.records     && data.records.length)     { records     = data.records.map(fixTypes); }
      if (data.leaves      && data.leaves.length)      { leaves      = data.leaves.map(fixTypes); }
      if (data.payslips    && data.payslips.length)    { payslips    = data.payslips.map(fixTypes); }
      if (data.empProfiles && data.empProfiles.length) { empProfiles = data.empProfiles; }
      if (employees.length)   nextEmpId  = Math.max(...employees.map(e=>Number(e.id)||0))   + 1;
      if (departments.length) nextDeptId = Math.max(...departments.map(d=>Number(d.id)||0)) + 1;
      if (records.length)     recId      = Math.max(...records.map(r=>Number(r.id)||0))     + 1;
      if (leaves.length)      leaveId    = Math.max(...leaves.map(l=>Number(l.id)||0))      + 1;
      if (payslips.length)    payslipId  = Math.max(...payslips.map(p=>Number(p.id)||0))    + 1;

      localLastUpdated = remoteTs;
      // Save to localStorage cache for instant next-visit render
      saveLocalCache();
      localStorage.setItem('ita_lastUpdated', String(remoteTs));
      renderCurrentTab();
      setSyncStatus('ok');
    }, (err) => {
      clearTimeout(timeoutId);
      console.warn('Firebase listen error:', err.code, err.message);
      if (err.code === 'PERMISSION_DENIED') {
        const el = document.getElementById('sync-status');
        if (el) { el.innerHTML = '<i class="ti ti-lock" style="color:#EF4444"></i> Permission denied — fix Firebase rules'; el.style.color = '#EF4444'; }
      } else {
        setSyncStatus('error');
      }
    });

    return true;
  } catch(e) {
    console.warn('Firebase init error:', e);
    setSyncStatus('error');
    return false;
  }
}

async function saveToFirebase() {
  if (!firebaseReady || !db) return;
  try {
    isSaving = true;
    setSyncStatus('syncing');
    localLastUpdated = Date.now();
    await db.ref('attendance').set({
      employees,
      departments,
      records,
      leaves: leaves || [],
      payslips: payslips || [],
      empProfiles: empProfiles || [],
      lastUpdated: localLastUpdated,
    });
    localStorage.setItem('ita_lastUpdated', String(localLastUpdated));
    setSyncStatus('ok');
    setTimeout(()=>{ isSaving = false; }, 1000); // release after 1s so listener can resume
  } catch(e) {
    isSaving = false;
    console.warn('Firebase write error:', e);
    setSyncStatus('error');
  }
}

function fixTypes(obj) {
  const out = {...obj};
  ['id','empId','deptId','ac'].forEach(f => {
    if(out[f] !== '' && out[f] !== undefined && out[f] !== null) out[f] = Number(out[f]);
  });
  if(out.pin !== '' && out.pin !== undefined && out.pin !== null) out.pin = String(out.pin);
  return out;
}

async function manualSync() {
  if (!firebaseReady) {
    toast('Reconnecting to Firebase…');
    await initFirebase();
    return;
  }
  toast('Syncing to Firebase…');
  await saveToFirebase();
  toast('Sync complete!');
}


function setSyncStatus(s) {
  const el = document.getElementById('sync-status');
  if (!el) return;
  const map = {
    idle:    ['', 'transparent'],
    cached:  ['<i class="ti ti-database" style="color:#6366F1;display:inline-block"></i> Cached — syncing…', '#6366F1'],
    syncing: ['<i class="ti ti-refresh" style="animation:spin .8s linear infinite;display:inline-block"></i> Syncing…', '#F59E0B'],
    ok:      ['<i class="ti ti-cloud-check"></i> Synced', '#10B981'],
    error:   ['<i class="ti ti-wifi-off"></i> Offline — changes saved locally', '#EF4444'],
  };
  const [html, color] = map[s] || ['', ''];
  el.innerHTML = html;
  el.style.color = color;
  // Show/hide offline banner
  let banner = document.getElementById('offline-banner');
  if(s === 'error'){
    if(!banner){
      banner = document.createElement('div');
      banner.id = 'offline-banner';
      banner.style.cssText = 'position:fixed;top:0;left:0;right:0;background:#EF4444;color:white;text-align:center;padding:7px;font-size:12px;font-weight:500;z-index:999;display:flex;align-items:center;justify-content:center;gap:8px';
      banner.innerHTML = '<i class="ti ti-wifi-off"></i> You are offline — data is saved locally and will sync when reconnected';
      document.body.appendChild(banner);
    }
    banner.style.display='flex';
  } else {
    if(banner) banner.style.display='none';
  }
}

const DEPT_COLORS={
  blue:{bg:'#EFF6FF',text:'#1D4ED8'},teal:{bg:'#F0FDFA',text:'#0F766E'},
  amber:{bg:'#FFFBEB',text:'#B45309'},coral:{bg:'#FFF7ED',text:'#C2410C'},
  green:{bg:'#F0FDF4',text:'#15803D'},pink:{bg:'#FDF2F8',text:'#BE185D'},
  purple:{bg:'#F5F3FF',text:'#6D28D9'},gray:{bg:'#F9FAFB',text:'#374151'}
};
const AV=[['#EFF6FF','#1D4ED8'],['#F0FDFA','#0F766E'],['#FFFBEB','#B45309'],['#FDF2F8','#BE185D'],['#F0FDF4','#15803D'],['#FFF7ED','#C2410C'],['#F5F3FF','#6D28D9'],['#F9FAFB','#374151']];
const DAYS=['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
const MONTHS=['January','February','March','April','May','June','July','August','September','October','November','December'];
const MS=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
let departments=[
  {id:1,name:'Engineering',color:'blue'},{id:2,name:'Marketing',color:'teal'},
  {id:3,name:'HR',color:'amber'},{id:4,name:'Finance',color:'coral'},
  {id:5,name:'Operations',color:'green'},{id:6,name:'Sales',color:'pink'},
];
let nextDeptId=7;
let employees=[
  {id:1,name:'Ana Reyes',deptId:1,role:'Lead Developer',ac:0},
  {id:2,name:'Marco Dela Cruz',deptId:2,role:'Marketing Manager',ac:1},
  {id:3,name:'Sofia Lim',deptId:3,role:'HR Specialist',ac:2},
  {id:4,name:'Jose Santos',deptId:4,role:'Accountant',ac:3},
  {id:5,name:'Maria Garcia',deptId:5,role:'Ops Coordinator',ac:4},
  {id:6,name:'Ryan Tan',deptId:1,role:'Frontend Dev',ac:5},
];
let nextEmpId=7,editEmpId=null,editDeptId=null,delDeptId=null;
let pinBuffer='', pinAction='', pinEmpId=null;
let records=[];let recId=1;
let leaves=[];let leaveId=1;
const LEAVE_TYPES_BALANCE = ['Sick Leave','Vacation','Emergency'];
const DEFAULT_LEAVE_DAYS = 15; // total leave days per year per employee
const today=new Date(new Date().toLocaleString('en-US',{timeZone:'Asia/Manila'}));
const todayStr=(()=>{const d=new Date(new Date().toLocaleString('en-US',{timeZone:'Asia/Manila'}));return `${d.getFullYear()}-${p2(d.getMonth()+1)}-${p2(d.getDate())}`;})();
let repYear=today.getFullYear(),repMonth=today.getMonth();
let monthlyEditMode=false;
// Persistent Storage — loaded properly in boot() via loadLocal()

// ── localStorage cache (v21) — instant render on return visits ──
const CACHE_KEY = 'ita_cache_v1';

function saveLocalCache() {
  try {
    localStorage.setItem(CACHE_KEY, JSON.stringify({
      employees, departments, records,
      leaves: leaves || [], payslips: payslips || [], empProfiles: empProfiles || [],
      nextEmpId, nextDeptId, recId, leaveId, payslipId,
      lastUpdated: localLastUpdated,
      savedAt: Date.now()
    }));
  } catch(e) { console.warn('Cache write failed:', e); }
}

function saveData() {
  // Write to localStorage immediately (instant, offline-safe)
  localStorage.setItem('ita_employees',   JSON.stringify(employees));
  localStorage.setItem('ita_departments', JSON.stringify(departments));
  localStorage.setItem('ita_records',     JSON.stringify(records));
  localStorage.setItem('ita_leaves',      JSON.stringify(leaves));
  localStorage.setItem('ita_nextEmpId',   nextEmpId);
  localStorage.setItem('ita_nextDeptId',  nextDeptId);
  localStorage.setItem('ita_nextRecId',   recId);
  localStorage.setItem('ita_nextLeaveId', leaveId);
  saveLocalCache(); // also update unified cache for fast boot
  saveToFirebase(); // sync to all devices
}

function loadLocal() {
  try {
    // Try unified cache first (v21 — fastest)
    const raw = localStorage.getItem(CACHE_KEY);
    if (raw) {
      const d = JSON.parse(raw);
      // Accept cache if under 1 hour old
      if (Date.now() - (d.savedAt || 0) < 3600000) {
        if (d.employees   && d.employees.length)   employees   = d.employees.map(fixTypes);
        if (d.departments && d.departments.length) departments = d.departments.map(fixTypes);
        if (d.records     && d.records.length)     records     = d.records.map(fixTypes);
        if (d.leaves      && d.leaves.length)      leaves      = d.leaves.map(fixTypes);
        if (d.empProfiles && d.empProfiles.length) empProfiles = d.empProfiles;
    if (d.payslips    && d.payslips.length)    payslips    = d.payslips.map(fixTypes);
        if (d.nextEmpId)  nextEmpId  = d.nextEmpId;
        if (d.nextDeptId) nextDeptId = d.nextDeptId;
        if (d.recId)      recId      = d.recId;
        if (d.leaveId)    leaveId    = d.leaveId;
        if (d.payslipId)  payslipId  = d.payslipId;
        // Seed timestamp guard — prefer value from cache object, fall back to separate key
        if (d.lastUpdated) localLastUpdated = d.lastUpdated;
        else { const lts = localStorage.getItem('ita_lastUpdated'); if (lts) localLastUpdated = parseInt(lts); }
        return employees.length > 0;
      } else {
        localStorage.removeItem(CACHE_KEY);
      }
    }
    // Fall back to individual keys (v19 format)
    const e  = localStorage.getItem('ita_employees');   if (e)  employees   = JSON.parse(e).map(fixTypes);
    const d2 = localStorage.getItem('ita_departments'); if (d2) departments = JSON.parse(d2).map(fixTypes);
    const r  = localStorage.getItem('ita_records');     if (r)  records     = JSON.parse(r).map(fixTypes);
    const l  = localStorage.getItem('ita_leaves');      if (l)  leaves      = JSON.parse(l).map(fixTypes);
    const ps = localStorage.getItem('ita_payslips');    if (ps) payslips    = JSON.parse(ps).map(fixTypes);
    if (localStorage.getItem('ita_nextEmpId'))  nextEmpId  = parseInt(localStorage.getItem('ita_nextEmpId'));
    if (localStorage.getItem('ita_nextDeptId')) nextDeptId = parseInt(localStorage.getItem('ita_nextDeptId'));
    if (localStorage.getItem('ita_nextRecId'))  recId      = parseInt(localStorage.getItem('ita_nextRecId'));
    if (localStorage.getItem('ita_nextLeaveId'))leaveId    = parseInt(localStorage.getItem('ita_nextLeaveId'));
    if (payslips.length) payslipId = Math.max(...payslips.map(p => Number(p.id) || 0)) + 1;
    const lts = localStorage.getItem('ita_lastUpdated');
    if (lts) localLastUpdated = parseInt(lts);
    // Migrate to unified cache for next load
    if (employees.length) saveLocalCache();
    return employees.length > 0;
  } catch(e) { return false; }
}


function p2(n){return String(n).padStart(2,'0');}
function getDept(id){return departments.find(d=>d.id===id)||{name:'—',color:'gray'};}
function init(n){return n.split(' ').map(x=>x[0]).join('').slice(0,2).toUpperCase();}
function fmtD(s){const d=new Date(s);return `${d.getDate()} ${MS[d.getMonth()]} ${d.getFullYear()}`;}


const TITLES={'dashboard':'Dashboard','clockin':'Clock In / Out','records':'Records','employees':'Employees','departments':'Departments','monthly':'Monthly Report','leave':'Leave Management','reports':'Reports','payslip':'Payslip','profile':'My Attendance','myPayslip':'My Payslip'};

let currentTab = 'dashboard';

function showTab(t,btn){
  document.querySelectorAll('.section').forEach(s=>s.classList.remove('active'));
  document.querySelectorAll('.nav-item').forEach(b=>b.classList.remove('active'));
  document.getElementById('tab-'+t).classList.add('active');
  if(btn) btn.classList.add('active');
  document.getElementById('topbar-title').textContent=TITLES[t]||t;
  currentTab = t;
  renderCurrentTab();
  closeSidebar();
}

function renderCurrentTab(){
  const t = currentTab;
  if(t==='dashboard'){renderDashboard();}
  else if(t==='records'){renderRecords();renderLeaveRequests();}
  else if(t==='leave'){renderLeaveManagement();}
  else if(t==='employees'){renderEmployees();}
  else if(t==='departments'){renderDeptTab();}
  else if(t==='clockin'){renderClockSel();}
  else if(t==='monthly'){populateRepFilters();renderMonthly();}
  else if(t==='reports'){populateReportMonths();populateReportDepts();renderReports();}
  else if(t==='empprofile'){populateEmpProfileSelect();renderEmpProfileList();}
  else if(t==='payslip'){populatePayslipSelects();renderHrPayslipList();}
  else if(t==='profile'){renderProfile();}
  else if(t==='myPayslip'){renderMyPayslip();}
}

function populateDeptSelects(){
  ['new-dept','edit-dept'].forEach(id=>{
    const s=document.getElementById(id);if(!s)return;const cur=s.value;s.innerHTML='';
    departments.forEach(d=>{s.innerHTML+=`<option value="${d.id}">${d.name}</option>`;});
    if(cur)s.value=cur;
  });
}
function populateRepFilters(){
  // Populate both the dashboard inline card and the monthly tab selects
  ['report-dept-filter','db-report-dept-filter'].forEach(id=>{
    const ds=document.getElementById(id);if(!ds)return;
    const dc=ds.value;
    ds.innerHTML='<option value="all">All Departments</option>';
    departments.forEach(d=>{ds.innerHTML+=`<option value="${d.id}">${d.name}</option>`;});
    ds.value=dc||'all';
  });
  ['report-emp-filter','db-report-emp-filter'].forEach(id=>{
    const es=document.getElementById(id);if(!es)return;
    const ec=es.value;
    es.innerHTML='<option value="all">All Employees</option>';
    employees.forEach(e=>{es.innerHTML+=`<option value="${e.id}">${e.name}</option>`;});
    es.value=ec||'all';
  });
}

function renderDashboard(){
  const tr=records.filter(r=>r.date===todayStr);
  const present=tr.filter(r=>r.status==='Present'||r.status==='Late').length;
  const absent=employees.length-tr.filter(r=>r.status!=='').length+tr.filter(r=>r.status==='Absent').length;
  const late=tr.filter(r=>r.status==='Late').length;
  const onLeave=tr.filter(r=>r.status==='Leave').length;
  const rate=employees.length?Math.round(present/employees.length*100):0;
  const safe=(id,val)=>{ const el=document.getElementById(id); if(el) el.textContent=val; };
  safe('m-total', employees.length);
  safe('m-present', present);
  safe('m-absent', absent);
  safe('m-late', late);
  safe('m-onleave', onLeave);
  // Rate badge — green arrow up if ≥80%, red arrow down if <80%
  const rateEl = document.getElementById('m-rate');
  if (rateEl) {
    rateEl.className = 'metric-sub ' + (rate >= 80 ? 'up' : 'down');
    rateEl.innerHTML = `<i class="ti ti-arrow-${rate >= 80 ? 'up' : 'down'}" style="font-size:10px"></i> ${rate}% attendance rate`;
  }
  safe('today-count', employees.length+' employees');

  const tl=document.getElementById('today-list'); if(tl) { tl.innerHTML='';
  employees.forEach(e=>{
    const r=records.find(x=>x.empId===e.id&&x.date===todayStr);
    const st=r?r.status:'Absent';const ac=AV[e.ac%AV.length];
    const bc=st==='Present'?'badge-present':st==='Late'?'badge-late':st==='Leave'?'badge-leave':'badge-absent';
    tl.innerHTML+=`<div class="emp-row"><div class="avatar" style="background:${ac[0]};color:${ac[1]}">${init(e.name)}</div><div class="emp-info"><div class="emp-name">${e.name}</div><div class="emp-sub">${e.role} · ${getDept(e.deptId).name}</div></div><div class="time-txt">${r&&r.cin!=='—'?to12(r.cin):'—'}</div><span class="badge ${bc}" style="margin-left:8px">${st}</span></div>`;
  }); }

  const db=document.getElementById('dept-bars'); if(db) { db.innerHTML='';
  departments.forEach(d=>{
    const emps=employees.filter(e=>e.deptId===d.id);if(!emps.length)return;
    const pr=records.filter(r=>r.date===todayStr&&r.deptId===d.id&&(r.status==='Present'||r.status==='Late')).length;
    const pct=Math.round(pr/emps.length*100);
    const dc=DEPT_COLORS[d.color]||DEPT_COLORS.blue;
    db.innerHTML+=`<div class="bar-row"><span class="bar-name" title="${d.name}">${d.name}</span><div class="bar-track"><div class="bar-fill" style="width:${pct}%;background:${dc.text}"></div></div><span class="bar-pct">${pct}%</span></div>`;
  }); }

  // Chart.js may not be loaded yet (defer) — retry until ready
  function drawChart() {
    if (typeof Chart === 'undefined') { setTimeout(drawChart, 200); return; }
    if(window._wc) window._wc.destroy();
    const ctx = document.getElementById('weekChart'); if(!ctx) return;

    // Build day-by-day data for the current month (skip weekends)
    const lbs=[], dtPresent=[], dtAbsent=[], dtLate=[], dtLeave=[];
    const year = today.getFullYear(), month = today.getMonth();
    const daysInMonth = new Date(year, month+1, 0).getDate();
    for(let d=1; d<=daysInMonth; d++){
      const dt = new Date(year, month, d);
      if(dt > today) break; // don't show future days
      if(dt.getDay()===0||dt.getDay()===6) continue; // skip weekends
      const ds = `${year}-${p2(month+1)}-${p2(d)}`;
      lbs.push(d);
      const dayRec = records.filter(r=>r.date===ds);
      dtPresent.push(dayRec.filter(r=>r.status==='Present').length);
      dtAbsent.push(dayRec.filter(r=>r.status==='Absent').length);
      dtLate.push(dayRec.filter(r=>r.status==='Late').length);
      dtLeave.push(dayRec.filter(r=>r.status==='Leave').length);
    }

    window._wc = new Chart(ctx.getContext('2d'), {
      type: 'line',
      data: {
        labels: lbs,
        datasets: [
          { label:'Present', data:dtPresent, borderColor:'#10B981', backgroundColor:'rgba(16,185,129,0.08)', borderWidth:2, pointRadius:3, pointBackgroundColor:'#10B981', tension:0.3, fill:false },
          { label:'Absent',  data:dtAbsent,  borderColor:'#EF4444', backgroundColor:'rgba(239,68,68,0.08)',   borderWidth:2, pointRadius:3, pointBackgroundColor:'#EF4444', tension:0.3, fill:false },
          { label:'Late',    data:dtLate,    borderColor:'#F59E0B', backgroundColor:'rgba(245,158,11,0.08)',  borderWidth:2, pointRadius:3, pointBackgroundColor:'#F59E0B', tension:0.3, fill:false },
          { label:'On Leave',data:dtLeave,   borderColor:'#3B82F6', backgroundColor:'rgba(59,130,246,0.08)', borderWidth:2, pointRadius:3, pointBackgroundColor:'#3B82F6', tension:0.3, fill:false },
        ]
      },
      options: {
        responsive:true, maintainAspectRatio:false,
        plugins:{ legend:{ display:false } },
        scales:{
          y:{ beginAtZero:true, max:Math.max(employees.length,1), ticks:{ stepSize:Math.ceil(employees.length/5)||1, font:{size:10}, color:'#9CA3AF' }, grid:{ color:'#F3F4F6' } },
          x:{ ticks:{ font:{size:10}, color:'#9CA3AF', maxTicksLimit:15 }, grid:{ display:false } }
        }
      }
    });
  }
  drawChart();
  // Render monthly attendance grid inline on dashboard
  populateRepFilters();
  renderMonthly();
}

let showHistory = false;
let recPage = 0;
const REC_PER_PAGE = 20;
let empPage = 0;
let deptPage = 0;
let leavePage = 0;
let leaveReqPage = 0;
const EMP_PER_PAGE   = 15;
const DEPT_PER_PAGE  = 15;
const LEAVE_PER_PAGE = 15;

function toggleRecordsHistory(){
  showHistory = !showHistory;
  const btn = document.getElementById('rec-history-btn');
  const lbl = document.getElementById('rec-view-label');
  if(showHistory){
    btn.innerHTML = '<i class="ti ti-calendar-today"></i> Today Only';
    btn.style.background = 'var(--accent-light)';
    btn.style.borderColor = 'var(--accent)';
    btn.style.color = 'var(--accent)';
    lbl.textContent = 'Showing full history';
  } else {
    btn.innerHTML = '<i class="ti ti-history"></i> View History';
    btn.style.background = '';
    btn.style.borderColor = '';
    btn.style.color = '';
    lbl.textContent = "Showing today's records";
  }
  renderRecords();
}

function renderLeaveRequests(){
  const tb=document.getElementById('leave-requests-tbody');
  const countEl=document.getElementById('leave-req-count');
  if(!tb)return;
  const all=(leaves||[]).sort((a,b)=>b.from.localeCompare(a.from));
  const pending=all.filter(l=>l.status==='Pending').length;
  if(countEl)countEl.textContent=`${pending} pending`;
  tb.innerHTML='';
  if(!all.length){tb.innerHTML='<tr><td colspan="8"><div class="empty-state">No leave requests</div></td></tr>';
    const pag=document.getElementById('leave-req-pagination'); if(pag) pag.style.display='none'; return;}

  const total=all.length;
  const totalPages=Math.max(1,Math.ceil(total/LEAVE_PER_PAGE));
  if(leaveReqPage>=totalPages) leaveReqPage=totalPages-1;
  const paged=all.slice(leaveReqPage*LEAVE_PER_PAGE,(leaveReqPage+1)*LEAVE_PER_PAGE);

  paged.forEach(l=>{
    const days=Math.round((new Date(l.to)-new Date(l.from))/(86400000))+1;
    const sc=l.status==='Pending'?'leave-pending':l.status==='Approved'?'leave-approved':l.status==='Rejected'?'leave-rejected':'leave-cancelled';
    tb.innerHTML+=`<tr>
      <td><div style="font-weight:500">${l.empName}</div><div style="font-size:11px;color:var(--gray-400)">${l.deptName||''}</div></td>
      <td>${l.type}</td>
      <td style="font-family:var(--font-mono);font-size:12px">${fmtD(l.from)}</td>
      <td style="font-family:var(--font-mono);font-size:12px">${fmtD(l.to)}</td>
      <td style="text-align:center;font-weight:500">${days}</td>
      <td style="font-size:12px;color:var(--gray-500);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${l.reason||'—'}</td>
      <td><span class="leave-type-tag ${sc}">${l.status}</span></td>
      <td style="text-align:center">
        ${l.status==='Pending'?`
          <button class="leave-approve-btn" data-id="${l.id}" style="background:none;border:1px solid var(--success);color:var(--success);border-radius:var(--radius-sm);padding:3px 9px;font-size:11.5px;cursor:pointer;font-family:var(--font);font-weight:500;margin-right:3px">✓</button>
          <button class="leave-reject-btn" data-id="${l.id}" style="background:none;border:1px solid var(--danger);color:var(--danger);border-radius:var(--radius-sm);padding:3px 9px;font-size:11.5px;cursor:pointer;font-family:var(--font);font-weight:500">✗</button>
        `:'—'}
      </td>
    </tr>`;
  });
  renderPagination('leave-req-pagination', leaveReqPage, totalPages, total, LEAVE_PER_PAGE, 'leaveReqPage=', 'renderLeaveRequests');
}

function renderRecords(){
  const s=(document.getElementById('rec-search').value||'').toLowerCase();
  const f=document.getElementById('rec-filter').value;
  let d=[...records];
  if(!showHistory) d=d.filter(r=>r.date===todayStr);
  if(s)d=d.filter(r=>r.empName.toLowerCase().includes(s));
  if(f!=='all')d=d.filter(r=>r.status===f);
  d.sort((a,b)=>b.date.localeCompare(a.date));

  const total=d.length;
  const totalPages=Math.max(1,Math.ceil(total/REC_PER_PAGE));
  if(recPage>=totalPages) recPage=totalPages-1;
  const paged=d.slice(recPage*REC_PER_PAGE,(recPage+1)*REC_PER_PAGE);

  const tb=document.getElementById('records-tbody');tb.innerHTML='';
  paged.forEach(r=>{
    const bc=r.status==='Present'?'badge-present':r.status==='Late'?'badge-late':r.status==='Absent'?'badge-absent':'badge-leave';
    const overtimeBadge=r.overtime>0?`<span class="badge badge-overtime" style="margin-left:4px">+${r.overtime}h OT</span>`:'';
    tb.innerHTML+=`<tr><td>${r.empName}</td><td>${fmtD(r.date)}</td><td style="font-family:var(--font-mono)">${to12(r.cin)}</td><td style="font-family:var(--font-mono)">${to12(r.cout)}</td><td style="font-family:var(--font-mono)">${r.hrs}h</td><td><span class="badge ${bc}">${r.status}</span>${overtimeBadge}</td></tr>`;
  });
  if(!total){
    const msg=!showHistory?'No records for today yet':'No records found';
    tb.innerHTML=`<tr><td colspan="6"><div class="empty-state">${msg}</div></td></tr>`;
  }

  // Pagination controls
  let pag=document.getElementById('rec-pagination');
  if(!pag){
    pag=document.createElement('div');
    pag.id='rec-pagination';
    pag.style.cssText='display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-top:1px solid var(--gray-100);font-size:13px;color:var(--gray-500)';
    document.querySelector('#tab-records .card').appendChild(pag);
  }
  if(total<=REC_PER_PAGE){pag.style.display='none';return;}
  pag.style.display='flex';
  const start=recPage*REC_PER_PAGE+1;
  const end=Math.min((recPage+1)*REC_PER_PAGE,total);
  pag.innerHTML=`
    <span>Showing ${start}–${end} of ${total} records</span>
    <div style="display:flex;gap:6px;align-items:center">
      <button onclick="recPage=Math.max(0,recPage-1);renderRecords()" ${recPage===0?'disabled':''} style="background:none;border:1px solid var(--gray-200);border-radius:var(--radius-sm);padding:4px 10px;cursor:pointer;font-size:12px;color:var(--gray-600);${recPage===0?'opacity:.4':''}">&larr; Prev</button>
      <span style="font-size:12px">Page ${recPage+1} / ${totalPages}</span>
      <button onclick="recPage=Math.min(totalPages-1,recPage+1);renderRecords()" ${recPage===totalPages-1?'disabled':''} style="background:none;border:1px solid var(--gray-200);border-radius:var(--radius-sm);padding:4px 10px;cursor:pointer;font-size:12px;color:var(--gray-600);${recPage===totalPages-1?'opacity:.4':''}">Next &rarr;</button>
    </div>`;
}

function resetRecPage(){ recPage=0; }

// ── Shared pagination renderer ──
function renderPagination(containerId, currentPage, totalPages, total, perPage, setPageFn, renderFn){
  let pag = document.getElementById(containerId);
  if(!pag) return;
  if(total <= perPage){ pag.style.display='none'; return; }
  pag.style.cssText='display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-top:1px solid var(--gray-100);font-size:13px;color:var(--gray-500)';
  const start = currentPage * perPage + 1;
  const end   = Math.min((currentPage+1)*perPage, total);
  const prevDis = currentPage===0 ? 'disabled style="opacity:.4"' : '';
  const nextDis = currentPage===totalPages-1 ? 'disabled style="opacity:.4"' : '';
  const btnStyle = 'background:none;border:1px solid var(--gray-200);border-radius:var(--radius-sm);padding:4px 10px;cursor:pointer;font-size:12px;color:var(--gray-600)';
  pag.innerHTML=`
    <span>Showing ${start}–${end} of ${total}</span>
    <div style="display:flex;gap:6px;align-items:center">
      <button ${prevDis} onclick="${setPageFn}(Math.max(0,${currentPage}-1));${renderFn}()" style="${btnStyle}">&larr; Prev</button>
      <span style="font-size:12px">Page ${currentPage+1} / ${totalPages}</span>
      <button ${nextDis} onclick="${setPageFn}(Math.min(${totalPages-1},${currentPage}+1));${renderFn}()" style="${btnStyle}">Next &rarr;</button>
    </div>`;
}

function renderEmployees(){
  const s=(document.getElementById('emp-search').value||'').toLowerCase();
  let fl=employees.filter(e=>!s||e.name.toLowerCase().includes(s)||getDept(e.deptId).name.toLowerCase().includes(s));
  const total=fl.length;
  const totalPages=Math.max(1,Math.ceil(total/EMP_PER_PAGE));
  if(empPage>=totalPages) empPage=totalPages-1;
  const paged=fl.slice(empPage*EMP_PER_PAGE,(empPage+1)*EMP_PER_PAGE);
  const tb=document.getElementById('employees-tbody');tb.innerHTML='';
  paged.forEach(e=>{
    const pr=records.filter(r=>r.empId===e.id&&(r.status==='Present'||r.status==='Late')).length;
    const tot=records.filter(r=>r.empId===e.id).length;
    const rate=tot?Math.round(pr/tot*100):0;
    const ac=AV[e.ac%AV.length];const dept=getDept(e.deptId);const dc=DEPT_COLORS[dept.color]||DEPT_COLORS.blue;
    const rc=rate>=80?'rate-good':rate>=60?'rate-mid':'rate-low';
    const shiftIn=to12(e.shiftStart||'09:00');
    const shiftOut=to12(e.shiftEnd||'18:00');
    const pinBadge=e.pin
      ? `<span style="background:#EFF6FF;color:#1D4ED8;font-size:10.5px;font-weight:600;padding:2px 7px;border-radius:12px;display:inline-flex;align-items:center;gap:3px"><i class="ti ti-lock" style="font-size:11px"></i> PIN set</span>`
      : `<span style="background:#F3F4F6;color:#9CA3AF;font-size:10.5px;font-weight:500;padding:2px 7px;border-radius:12px;display:inline-flex;align-items:center;gap:3px"><i class="ti ti-lock-open" style="font-size:11px"></i> No PIN</span>`;
    tb.innerHTML+=`<tr>
      <td><div style="display:flex;align-items:center;gap:10px">
        <div class="avatar" style="background:${ac[0]};color:${ac[1]};width:32px;height:32px;font-size:11px;flex-shrink:0">${init(e.name)}</div>
        <div><div style="font-weight:500">${e.name}</div><div style="font-size:11.5px;color:var(--gray-400)">${e.role}</div></div>
      </div></td>
      <td><span class="dept-pill" style="background:${dc.bg};color:${dc.text}">${dept.name}</span></td>
      <td>${e.role}</td>
      <td>
        <div style="font-size:12px;font-family:var(--font-mono);color:var(--gray-700);white-space:nowrap"><span style="color:var(--success)">▸</span> ${shiftIn}</div>
        <div style="font-size:12px;font-family:var(--font-mono);color:var(--gray-700);white-space:nowrap"><span style="color:var(--danger)">◼</span> ${shiftOut}</div>
      </td>
      <td>${pinBadge}</td>
      <td><span class="${rc}">${rate}%</span></td>
      <td style="text-align:center">
        <button class="icon-btn emp-edit-btn" data-id="${e.id}" title="Edit employee"><i class="ti ti-edit"></i></button>
        <button class="icon-btn danger emp-del-btn" data-id="${e.id}" title="Remove"><i class="ti ti-trash"></i></button>
      </td>
    </tr>`;
  });
  if(!paged.length)tb.innerHTML=`<tr><td colspan="7"><div class="empty-state">No employees found</div></td></tr>`;
  renderPagination('emp-pagination', empPage, totalPages, total, EMP_PER_PAGE, 'empPage=', 'renderEmployees');
}

function renderDeptTab(){
  const s=(document.getElementById('dept-search').value||'').toLowerCase();
  let fl=departments.filter(d=>!s||d.name.toLowerCase().includes(s));
  const total=fl.length;
  const totalPages=Math.max(1,Math.ceil(total/DEPT_PER_PAGE));
  if(deptPage>=totalPages) deptPage=totalPages-1;
  const paged=fl.slice(deptPage*DEPT_PER_PAGE,(deptPage+1)*DEPT_PER_PAGE);
  const tb=document.getElementById('dept-tbody');tb.innerHTML='';
  paged.forEach(d=>{
    const cnt=employees.filter(e=>e.deptId===d.id).length;const dc=DEPT_COLORS[d.color]||DEPT_COLORS.blue;
    tb.innerHTML+=`<tr><td style="font-weight:500">${d.name}</td><td style="color:var(--gray-500)">${cnt} employee${cnt!==1?'s':''}</td><td><span class="dept-pill" style="background:${dc.bg};color:${dc.text}">${d.color.charAt(0).toUpperCase()+d.color.slice(1)}</span></td><td style="text-align:center"><button class="icon-btn dept-edit-btn" data-id="${d.id}"><i class="ti ti-edit"></i></button><button class="icon-btn danger dept-del-btn" data-id="${d.id}"><i class="ti ti-trash"></i></button></td></tr>`;
  });
  if(!paged.length)tb.innerHTML=`<tr><td colspan="4"><div class="empty-state">No departments found</div></td></tr>`;
  renderPagination('dept-pagination', deptPage, totalPages, total, DEPT_PER_PAGE, 'deptPage=', 'renderDeptTab');
}

function renderClockSel(){
  const s=document.getElementById('clockEmpSelect');s.innerHTML='';
  employees.forEach(e=>{s.innerHTML+=`<option value="${e.id}">${e.name} — ${getDept(e.deptId).name}</option>`;});
  updClockStatus();
}
function updClockStatus(){
  const id=parseInt(document.getElementById('clockEmpSelect').value);
  const r=records.find(x=>x.empId===id&&x.date===todayStr);
  const emp=employees.find(e=>e.id===id);
  const row=document.getElementById('clock-status-row');
  const shift=emp?(emp.shiftStart||'09:00')+' – '+(emp.shiftEnd||'18:00'):'09:00 – 18:00';
  if(r){
    row.innerHTML=`<div class="clock-stat"><div class="clock-stat-label">Status</div><div class="clock-stat-val"><span class="badge badge-${r.status.toLowerCase()}">${r.status}</span></div></div><div class="clock-stat"><div class="clock-stat-label">Clocked In</div><div class="clock-stat-val">${to12(r.cin)}</div></div><div class="clock-stat"><div class="clock-stat-label">Clocked Out</div><div class="clock-stat-val">${to12(r.cout)}</div></div><div class="clock-stat"><div class="clock-stat-label">Shift</div><div class="clock-stat-val" style="font-size:12px">${to12(emp.shiftStart||'09:00')} – ${to12(emp.shiftEnd||'18:00')}</div></div>`;
  } else {
    row.innerHTML=`<div class="clock-stat"><div class="clock-stat-label">Status</div><div class="clock-stat-val" style="color:rgba(255,255,255,.5)">Not clocked in</div></div><div class="clock-stat"><div class="clock-stat-label">Shift</div><div class="clock-stat-val" style="font-size:12px">${to12(emp?emp.shiftStart||'09:00':'09:00')} – ${to12(emp?emp.shiftEnd||'18:00':'18:00')}</div></div>`;
  }
}


// ── Manila timezone helpers ──
function getManilaDate(){
  return new Date(new Date().toLocaleString('en-US',{timeZone:'Asia/Manila'}));
}
function getManilaDateStr(){
  const d=getManilaDate();
  return `${d.getFullYear()}-${p2(d.getMonth()+1)}-${p2(d.getDate())}`;
}
function getNow24(){
  const d=getManilaDate();
  return `${p2(d.getHours())}:${p2(d.getMinutes())}`;
}
function to12(t24){if(!t24||t24==='—')return t24;const[h,m]=t24.split(':').map(Number);const ampm=h<12?'AM':'PM';const h12=h%12||12;return `${h12}:${p2(m)} ${ampm}`;}
function timeToMins(t24){const[h,m]=t24.split(':').map(Number);return h*60+m;}


// ── PIN Flow ──
function startPinFlow(action){
  const id=getSelectedClockEmpId();
  if(!id){toast('Please select your name first');return;}
  const emp=employees.find(e=>e.id===id);
  if(!emp){toast('Employee not found');return;}
  if(action==='in'){
    if(records.find(r=>r.empId===id&&r.date===todayStr)){toast('Already clocked in today');return;}
  } else if(action==='out'){
    const r=records.find(x=>x.empId===id&&x.date===todayStr);
    if(!r||r.cin==='—'){toast('Not clocked in yet');return;}
    if(r.cout!=='—'){toast('Already clocked out');return;}
  }
  if(!emp.pin){
    action==='in'?doClockIn(id):doClockOut(id);
    return;
  }
  pinEmpId=id;pinAction=action;pinBuffer='';
  const ac=AV[emp.ac%AV.length];
  document.getElementById('pinAvatar').style.background=ac[0];
  document.getElementById('pinAvatar').style.color=ac[1];
  document.getElementById('pinAvatar').textContent=init(emp.name);
  document.getElementById('pinEmpName').textContent=emp.name;
  document.getElementById('pinEmpRole').textContent=emp.role+' · '+getDept(emp.deptId).name;
  const lbl=document.getElementById('pinActionLabel');
  const labels={'in':'Clock In','out':'Clock Out'};
  const cls={'in':'in','out':'out'};
  lbl.textContent=labels[action]||action;
  lbl.className='pin-action-label '+(cls[action]||'in');
  document.getElementById('pinErrMsg').textContent='';
  updatePinDots();
  document.getElementById('pinOverlay').classList.add('open');
}

function closePinOverlay(){
  pinBuffer=''; pinAction=''; pinEmpId=null;
  document.getElementById('pinOverlay').classList.remove('open');
  document.getElementById('pinErrMsg').textContent='';
  updatePinDots();
}

function pinPress(digit){
  if(pinBuffer.length>=4)return;
  pinBuffer+=digit;
  updatePinDots();
  if(pinBuffer.length===4) setTimeout(validatePin,120);
}
function pinDel(){pinBuffer=pinBuffer.slice(0,-1);updatePinDots();document.getElementById('pinErrMsg').textContent='';}
function pinClear(){pinBuffer='';updatePinDots();document.getElementById('pinErrMsg').textContent='';}

function updatePinDots(){
  for(let i=0;i<4;i++){
    const d=document.getElementById('pd'+i);
    d.classList.remove('filled','error');
    if(i<pinBuffer.length)d.classList.add('filled');
  }
}

function validatePin(){
  const emp=employees.find(e=>e.id===pinEmpId);
  if(!emp){closePinOverlay();return;}
  if(pinBuffer===String(emp.pin)){
    // Capture before closePinOverlay() resets them to null
    const confirmedId=pinEmpId;
    const confirmedAction=pinAction;
    closePinOverlay();
    if(confirmedAction==='in') doClockIn(confirmedId);
    else if(confirmedAction==='out') doClockOut(confirmedId);
  } else {
    // Wrong PIN — shake and show error
    for(let i=0;i<4;i++) document.getElementById('pd'+i).classList.add('error');
    document.getElementById('pinErrMsg').textContent='Incorrect PIN. Try again.';
    const box=document.getElementById('pinBox');
    box.classList.remove('pin-shake'); void box.offsetWidth; box.classList.add('pin-shake');
    setTimeout(()=>{
      pinBuffer=''; updatePinDots();
      box.classList.remove('pin-shake');
    },400);
  }
}

// Keyboard support for PIN
document.addEventListener('keydown', e=>{
  if(!document.getElementById('pinOverlay').classList.contains('open'))return;
  if(e.key>='0'&&e.key<='9') pinPress(e.key);
  else if(e.key==='Backspace') pinDel();
  else if(e.key==='Escape') closePinOverlay();
});

function doClockIn(id){
  const emp=employees.find(e=>e.id===id);
  if(!emp){toast('Employee not found');return;}
  const ci=getNow24();
  const ciMins=timeToMins(ci);
  const shiftStart=emp.shiftStart||'09:00';
  const shiftMins=timeToMins(shiftStart);
  const status=ciMins<=shiftMins?'Present':'Late';
  records.push({id:recId++,empId:id,empName:emp.name,deptId:emp.deptId,date:todayStr,cin:ci,cout:'—',hrs:'0',status});
  saveData();
  updClockStatus();
  toast(`${emp.name} clocked in at ${to12(ci)}`);
}
function doClockOut(id){
  const emp=employees.find(e=>e.id===id);
  if(!emp){toast('Employee not found');return;}
  const r=records.find(x=>x.empId===id&&x.date===todayStr);
  if(!r){toast('No clock-in record found for today');return;}
  if(r.cin==='—'){toast('No clock-in time recorded');return;}
  if(r.cout!=='—'){toast('Already clocked out');return;}
  const co=getNow24();
  const[ih,im]=r.cin.split(':').map(Number);
  const[oh,om]=co.split(':').map(Number);
  const hrs=(((oh*60+om)-(ih*60+im))/60);
  r.cout=co;
  r.hrs=hrs>0?hrs.toFixed(1):'0';
  r.overtime=0; // Overtime is no longer auto-detected on clock-out — set manually in Records if needed
  toast(`${emp.name} clocked out at ${to12(co)} · ${r.hrs}h worked`);
  saveData();
  updClockStatus();
}


function changeMonth(d){repMonth+=d;if(repMonth>11){repMonth=0;repYear++;}if(repMonth<0){repMonth=11;repYear--;}renderMonthly();}

function renderMonthly(){
  // Update both month labels (dashboard and monthly tab)
  ['month-label','db-month-label'].forEach(id=>{const el=document.getElementById(id);if(el)el.textContent=`${MONTHS[repMonth]} ${repYear}`;});
  // Read filters from whichever context is active (monthly tab takes priority, fallback to dashboard)
  const dfEl=document.getElementById('report-dept-filter')||document.getElementById('db-report-dept-filter');
  const efEl=document.getElementById('report-emp-filter')||document.getElementById('db-report-emp-filter');
  const df=dfEl?dfEl.value:'all';
  const ef=efEl?efEl.value:'all';
  let emps=employees;
  if(df!=='all')emps=emps.filter(e=>e.deptId===parseInt(df));
  if(ef!=='all')emps=emps.filter(e=>e.id===parseInt(ef));
  const dim=new Date(repYear,repMonth+1,0).getDate();
  const allDays=[];
  for(let d=1;d<=dim;d++){const dt=new Date(repYear,repMonth,d);allDays.push({d,dow:dt.getDay(),we:dt.getDay()===0||dt.getDay()===6,str:`${repYear}-${p2(repMonth+1)}-${p2(d)}`});}

  let hdr='<tr><th>Employee</th>';
  allDays.forEach(({d,dow,we,str})=>{
    const isT=str===todayStr;
    hdr+=`<th class="${we?'wk-col':''} ${isT?'today-col':''}" style="${we?'opacity:.5':''}"><div>${d}</div><div style="font-size:9px;font-weight:400">${DAYS[dow].slice(0,2)}</div></th>`;
  });
  hdr+='<th class="sum-col">P</th><th class="sum-col">L</th><th class="sum-col">A</th><th class="sum-col">%</th></tr>';
  // Write header to both dashboard and monthly-tab thead elements
  ['report-thead','db-report-thead'].forEach(id=>{const el=document.getElementById(id);if(el)el.innerHTML=hdr;});

  let totalP=0,totalL=0,totalA=0,rows='';
  const workPast=allDays.filter(x=>!x.we&&new Date(x.str)<=today);

  emps.forEach(e=>{
    let p=0,l=0,a=0;
    let row=`<tr><td><div style="font-weight:500;font-size:13px">${e.name}</div><div style="font-size:11px;color:var(--gray-400)">${getDept(e.deptId).name}</div></td>`;
    allDays.forEach(({we,str})=>{
      if(we){row+=`<td><span class="day-cell WE">—</span></td>`;return;}
      if(new Date(str)>today){row+=`<td><span class="day-cell ND"></span></td>`;return;}
      const rec=records.find(r=>r.empId===e.id&&r.date===str);
      const st=rec?rec.status:'Absent';
      let code='A',lbl='A';
      if(st==='Present'){code='P';lbl='P';p++;}
      else if(st==='Late'){code='L';lbl='L';l++;}
      else if(st==='Leave'){code='V';lbl='LV';}
      else{a++;}
      row+=`<td>
        <span class="day-cell ${code}" 
          title="${st}" 
          ${monthlyEditMode ? `onclick="cycleAttendanceStatus(${e.id},'${str}')"` : ''}
          style="${monthlyEditMode ? 'cursor:pointer;border:1px solid var(--accent)' : ''}">
          ${lbl}
        </span>
      </td>`;
    });
    const wd=workPast.length;const rate=wd?Math.round((p+l)/wd*100):0;
    const rc=rate>=80?'#059669':rate>=60?'#D97706':'#DC2626';
    row+=`<td class="sum-col" style="color:#059669">${p}</td><td class="sum-col" style="color:#D97706">${l}</td><td class="sum-col" style="color:#DC2626">${a}</td><td class="sum-col" style="color:${rc}">${rate}%</td></tr>`;
    rows+=row;totalP+=p;totalL+=l;totalA+=a;
  });

  if(!emps.length)rows=`<tr><td colspan="100"><div class="empty-state">No employees match filter</div></td></tr>`;
  else{
    let sumRow=`<tr class="report-total-row"><td style="padding:7px 12px;font-weight:600">Totals</td>`;
    allDays.forEach(({we,str})=>{
      if(we){sumRow+=`<td></td>`;return;}
      if(new Date(str)>today){sumRow+=`<td></td>`;return;}
      const cnt=records.filter(r=>r.date===str&&emps.some(e=>e.id===r.empId)&&(r.status==='Present'||r.status==='Late')).length;
      sumRow+=`<td style="font-size:11px;font-weight:500;color:var(--gray-500)">${cnt||''}</td>`;
    });
    sumRow+=`<td class="sum-col">${totalP}</td><td class="sum-col">${totalL}</td><td class="sum-col">${totalA}</td><td class="sum-col"></td></tr>`;
    rows+=sumRow;
  }
  // Write rows to both dashboard and monthly-tab tbody elements
  ['report-tbody','db-report-tbody'].forEach(id=>{const el=document.getElementById(id);if(el)el.innerHTML=rows;});

  const wd=workPast.length;const possible=emps.length*wd;const overall=possible?Math.round((totalP+totalL)/possible*100):0;
  const orc=overall>=80?'var(--success)':overall>=60?'var(--warning)':'var(--danger)';
  const summaryHTML=`
    <div class="sum-card"><div class="sum-card-label">Present Days</div><div class="sum-card-val" style="color:var(--success)">${totalP}</div></div>
    <div class="sum-card"><div class="sum-card-label">Late Arrivals</div><div class="sum-card-val" style="color:var(--warning)">${totalL}</div></div>
    <div class="sum-card"><div class="sum-card-label">Absent Days</div><div class="sum-card-val" style="color:var(--danger)">${totalA}</div></div>
    <div class="sum-card"><div class="sum-card-label">Attendance Rate</div><div class="sum-card-val" style="color:${orc}">${overall}%</div></div>`;
  // Write summary to both dashboard and monthly-tab summary elements
  ['report-summary','db-report-summary'].forEach(id=>{const el=document.getElementById(id);if(el)el.innerHTML=summaryHTML;});
}

// Employee CRUD
function openAddModal(){
  populateDeptSelects();
  document.getElementById('new-pin').value='';
  document.getElementById('addModal').classList.add('open');
}
function openEditEmpModal(id){
  editEmpId=id;const e=employees.find(x=>x.id===id);populateDeptSelects();
  document.getElementById('edit-name').value=e.name;
  document.getElementById('edit-role').value=e.role;
  document.getElementById('edit-dept').value=e.deptId;
  document.getElementById('edit-shift-start').value=e.shiftStart||'09:00';
  document.getElementById('edit-shift-end').value=e.shiftEnd||'18:00';
  document.getElementById('edit-pin').value='';
  document.getElementById('edit-leave-allowance').value=e.leaveAllowance||DEFAULT_LEAVE_DAYS;  // never show existing PIN
  document.getElementById('editEmpModal').classList.add('open');
}
function saveEmployee(){
  const name=document.getElementById('new-name').value.trim();
  const deptId=parseInt(document.getElementById('new-dept').value);
  const role=document.getElementById('new-role').value.trim();
  const shiftStart=document.getElementById('new-shift-start').value||'09:00';
  const shiftEnd=document.getElementById('new-shift-end').value||'18:00';
  const pinRaw=document.getElementById('new-pin').value.trim();
  if(!name||!role){toast('Please fill all fields');return;}
  if(pinRaw&&(!/^\d{4}$/.test(pinRaw))){toast('PIN must be exactly 4 digits');return;}
  const pin=pinRaw||null;
  employees.push({id:nextEmpId++,name,deptId,role,shiftStart,shiftEnd,pin,ac:employees.length%AV.length});
  saveData();
  closeModal('addModal');renderEmployees();renderClockSel();toast(`${name} added${pin?' with PIN':' (no PIN)'}`);
  document.getElementById('new-name').value='';
  document.getElementById('new-role').value='';
  document.getElementById('new-shift-start').value='09:00';
  document.getElementById('new-shift-end').value='18:00';
  document.getElementById('new-pin').value='';
}
function saveEditEmployee(){
  const name=document.getElementById('edit-name').value.trim();
  const deptId=parseInt(document.getElementById('edit-dept').value);
  const role=document.getElementById('edit-role').value.trim();
  const shiftStart=document.getElementById('edit-shift-start').value||'09:00';
  const shiftEnd=document.getElementById('edit-shift-end').value||'18:00';
  const pinRaw=document.getElementById('edit-pin').value.trim();
  const leaveAllowance=parseInt(document.getElementById('edit-leave-allowance')?.value)||DEFAULT_LEAVE_DAYS;
  if(!name||!role){toast('Please fill all fields');return;}
  if(pinRaw&&(!/^\d{4}$/.test(pinRaw))){toast('PIN must be exactly 4 digits');return;}
  const e=employees.find(x=>x.id===editEmpId);const old=e.name;
  e.name=name;e.deptId=deptId;e.role=role;e.shiftStart=shiftStart;e.shiftEnd=shiftEnd;e.leaveAllowance=leaveAllowance;
  if(pinRaw) e.pin=pinRaw;  // only update PIN if a new one was entered
  records.filter(r=>r.empId===editEmpId).forEach(r=>{r.empName=name;r.deptId=deptId;});
  saveData();
  closeModal('editEmpModal');renderEmployees();renderClockSel();toast(`${old} updated`);
}
function removeEmployee(id){
  const e=employees.find(x=>x.id===id);employees=employees.filter(x=>x.id!==id);
  records=records.filter(r=>r.empId!==id);
  saveData();
  renderEmployees();renderClockSel();toast(`${e.name} removed`);
}

// Department CRUD
function openDeptAddModal(){document.getElementById('new-dept-name').value='';document.getElementById('deptAddModal').classList.add('open');}
function openDeptEditModal(id){
  editDeptId=id;const d=departments.find(x=>x.id===id);
  document.getElementById('edit-dept-name').value=d.name;document.getElementById('edit-dept-color').value=d.color;
  document.getElementById('deptEditModal').classList.add('open');
}
function saveDept(){
  const name=document.getElementById('new-dept-name').value.trim();const color=document.getElementById('new-dept-color').value;
  if(!name){toast('Enter a department name');return;}
  if(departments.find(d=>d.name.toLowerCase()===name.toLowerCase())){toast('Already exists');return;}
  departments.push({id:nextDeptId++,name,color});
  saveData();
  closeModal('deptAddModal');renderDeptTab();populateDeptSelects();toast(`${name} added`);
}
function saveEditDept(){
  const name=document.getElementById('edit-dept-name').value.trim();const color=document.getElementById('edit-dept-color').value;
  if(!name){toast('Enter a name');return;}
  const d=departments.find(x=>x.id===editDeptId);const old=d.name;d.name=name;d.color=color;
  saveData();
  closeModal('deptEditModal');renderDeptTab();populateDeptSelects();renderEmployees();toast(`${old} renamed to ${name}`);
}
function openDeptDelModal(id){
  delDeptId=id;const d=departments.find(x=>x.id===id);const cnt=employees.filter(e=>e.deptId===id).length;
  document.getElementById('dept-del-msg').textContent=cnt>0?`"${d.name}" has ${cnt} employee${cnt>1?'s':''}. Reassign or remove them.`:`Remove "${d.name}"?`;
  const wrap=document.getElementById('dept-del-reassign-wrap');const sel=document.getElementById('dept-del-reassign');
  const others=departments.filter(x=>x.id!==id);
  if(cnt>0&&others.length>0){wrap.style.display='block';sel.innerHTML='<option value="">— Remove employees too —</option>';others.forEach(x=>{sel.innerHTML+=`<option value="${x.id}">${x.name}</option>`;});}
  else{wrap.style.display='none';}
  document.getElementById('deptDelModal').classList.add('open');
}
function confirmDeleteDept(){
  const rid=document.getElementById('dept-del-reassign').value;
  if(rid){employees.filter(e=>e.deptId===delDeptId).forEach(e=>e.deptId=parseInt(rid));}
  else{employees=employees.filter(e=>e.deptId!==delDeptId);}
  const d=departments.find(x=>x.id===delDeptId);departments=departments.filter(x=>x.id!==delDeptId);
  saveData();
  closeModal('deptDelModal');renderDeptTab();renderEmployees();renderClockSel();populateDeptSelects();toast(`${d.name} removed`);
}

function renderLeaveManagement(){
  const sel=document.getElementById('leave-employee');
  if(sel){
    sel.innerHTML='';
    employees.forEach(e=>{sel.innerHTML+=`<option value="${e.id}">${e.name}</option>`;});
  }

  const tb=document.getElementById('leave-tbody');
  if(!tb) return;
  tb.innerHTML='';

  const total=employees.length;
  const totalPages=Math.max(1,Math.ceil(total/LEAVE_PER_PAGE));
  if(leavePage>=totalPages) leavePage=totalPages-1;
  const paged=employees.slice(leavePage*LEAVE_PER_PAGE,(leavePage+1)*LEAVE_PER_PAGE);

  paged.forEach(e=>{
    const rec=records.find(r=>r.empId===e.id&&r.date===todayStr);
    const st=rec?rec.status:'Absent';
    const bc=st==='Present'?'badge-present':st==='Late'?'badge-late':st==='Leave'?'badge-leave':'badge-absent';
    const ac=AV[e.ac%AV.length];
    tb.innerHTML+=`<tr>
      <td><div style="display:flex;align-items:center;gap:8px">
        <div class="avatar" style="background:${ac[0]};color:${ac[1]};width:30px;height:30px;font-size:11px;flex-shrink:0">${init(e.name)}</div>
        <div style="font-weight:500">${e.name}</div>
      </div></td>
      <td>${getDept(e.deptId).name}</td>
      <td><span class="badge ${bc}">${st}</span></td>
      <td style="text-align:center">
        <button class="leave-approve-btn" data-id="${e.id}" style="background:none;border:1px solid var(--success);color:var(--success);border-radius:var(--radius-sm);padding:4px 10px;font-size:11.5px;cursor:pointer;font-family:var(--font);font-weight:500;margin-right:4px">Present</button>
        <button class="leave-reject-btn" data-id="${e.id}" style="background:none;border:1px solid var(--info);color:var(--info);border-radius:var(--radius-sm);padding:4px 10px;font-size:11.5px;cursor:pointer;font-family:var(--font);font-weight:500;margin-right:4px">On Leave</button>
        <button class="leave-del-btn" data-id="${e.id}" style="background:none;border:1px solid var(--danger);color:var(--danger);border-radius:var(--radius-sm);padding:4px 10px;font-size:11.5px;cursor:pointer;font-family:var(--font);font-weight:500">Absent</button>
      </td>
    </tr>`;
  });
  renderPagination('leave-pagination', leavePage, totalPages, total, LEAVE_PER_PAGE, 'leavePage=', 'renderLeaveManagement');
}

function setLeaveStatus(empId, status){
  const emp=employees.find(e=>e.id===empId);
  if(!emp) return;
  let rec=records.find(r=>r.empId===empId&&r.date===todayStr);
  if(!rec){
    rec={id:recId++,empId:emp.id,empName:emp.name,deptId:emp.deptId,date:todayStr,cin:'—',cout:'—',hrs:'0',status};
    records.push(rec);
  } else {
    rec.status=status;
  }
  saveData();
  renderLeaveManagement();
  renderDashboard();
  renderRecords();
  toast(`${emp.name} marked as ${status}`);
}

function approveLeaveRequest(id){
  const l=(leaves||[]).find(x=>x.id===id);
  if(!l)return;
  l.status='Approved';
  const start=new Date(l.from);const end=new Date(l.to);
  for(let d=new Date(start);d<=end;d.setDate(d.getDate()+1)){
    if(d.getDay()===0||d.getDay()===6)continue;
    const ds=`${d.getFullYear()}-${p2(d.getMonth()+1)}-${p2(d.getDate())}`;
    const ex=records.find(r=>r.empId===l.empId&&r.date===ds);
    if(ex){ex.status='Leave';ex.cin='—';ex.cout='—';ex.hrs='0';}
    else{records.push({id:recId++,empId:l.empId,empName:l.empName,deptId:employees.find(e=>e.id===l.empId)?.deptId,date:ds,cin:'—',cout:'—',hrs:'0',status:'Leave',overtime:0});}
  }
  saveData();renderLeaveRequests();renderRecords();
  toast(`${l.empName}'s leave approved`);
}

function rejectLeaveRequest(id){
  const l=(leaves||[]).find(x=>x.id===id);
  if(!l)return;
  l.status='Rejected';
  saveData();renderLeaveRequests();
  toast(`${l.empName}'s leave rejected`);
}


function toggleMonthlyEditMode(btn){
  if(!isAdmin){requireAdmin(null,null);return;}
  monthlyEditMode=!monthlyEditMode;
  const lbl = document.getElementById('monthly-edit-label');
  const editBtn = document.getElementById('monthly-edit-btn');
  if(monthlyEditMode){
    if(lbl) lbl.textContent = 'Exit Edit';
    if(editBtn){ editBtn.style.background='var(--warning)'; editBtn.style.borderColor='var(--warning)'; }
  } else {
    if(lbl) lbl.textContent = 'Edit Mode';
    if(editBtn){ editBtn.style.background=''; editBtn.style.borderColor=''; }
  }
  renderMonthly();
  toast(monthlyEditMode ? '✏️ Edit mode on — click any cell to cycle status' : 'Edit mode off');
}

function cycleAttendanceStatus(empId,date){
  const statuses=[
    {status:'Present',code:'P'},
    {status:'Late',code:'L'},
    {status:'Absent',code:'A'},
    {status:'Leave',code:'V'}
  ];

  let rec=records.find(r=>r.empId===empId&&r.date===date);

  let current='Absent';
  if(rec) current=rec.status;

  let currentIndex=statuses.findIndex(s=>s.status===current);
  let nextIndex=(currentIndex+1)%statuses.length;
  let next=statuses[nextIndex];

  const emp=employees.find(e=>e.id===empId);

  if(!rec){
    rec={
      id:recId++,
      empId:emp.id,
      empName:emp.name,
      deptId:emp.deptId,
      date:date,
      cin:'—',
      cout:'—',
      hrs:'0',
      status:next.status
    };
    records.push(rec);
  }else{
    rec.status=next.status;

    if(next.status==='Absent' || next.status==='Leave'){
      rec.cin='—';
      rec.cout='—';
      rec.hrs='0';
    }
  }

  saveData();
  renderMonthly();
  renderDashboard();
  renderRecords();
}


function closeModal(id){document.getElementById(id).classList.remove('open');}

function toast(msg){
  const t=document.getElementById('toast');document.getElementById('toast-msg').textContent=msg;
  t.classList.add('show');setTimeout(()=>t.classList.remove('show'),2600);
}


// ── Admin Auth ──
const ADMIN_PASSWORD = 'admin123';
const HR_PASSWORD_KEY = 'hr1234';
const MGR_PASSWORD = 'mgr123';
let isAdmin = false;
let isHR = false;
let isMgr = false;

// ── Sidebar toggle (mobile) ──
function toggleSidebar(){
  document.getElementById('sidebar').classList.toggle('open');
  document.getElementById('sidebar-overlay').classList.toggle('open');
}
function closeSidebar(){
  document.getElementById('sidebar').classList.remove('open');
  document.getElementById('sidebar-overlay').classList.remove('open');
}

// ── Auth ──
function tryLogin(){
  const pw = document.getElementById('admin-pw-input').value.trim();
  const err = document.getElementById('admin-pw-err');
  if(!pw){ err.style.display='block'; return; }

  if(pw === ADMIN_PASSWORD){
    isAdmin = true; isHR = false; isMgr = false; profileEmpId = null;
    updateAuthUI();
    resetSessionTimer();
    document.getElementById('admin-pw-input').value = '';
    err.style.display = 'none';
    toast('Welcome, Admin! Full access granted.');

  } else if(pw === HR_PASSWORD_KEY){
    isHR = true; isAdmin = false; isMgr = false; profileEmpId = null;
    updateAuthUI();
    document.getElementById('admin-pw-input').value = '';
    err.style.display = 'none';
    toast('Welcome, HR! HR & Management access granted.');

  } else if(pw === MGR_PASSWORD){
    isMgr = true; isAdmin = false; isHR = false; profileEmpId = null;
    updateAuthUI();
    document.getElementById('admin-pw-input').value = '';
    err.style.display = 'none';
    toast('Welcome, Manager! Management access granted.');

  } else {
    // Try as employee PIN
    const emp = employees.find(e => String(e.pin) === pw);
    if(emp){
      profileEmpId = emp.id; isAdmin = false; isHR = false; isMgr = false;
      document.getElementById('profile-logged-name').textContent = emp.name;
      updateAuthUI();
      document.getElementById('admin-pw-input').value = '';
      err.style.display = 'none';
      toast(`Welcome, ${emp.name}!`);
    } else {
      err.style.display = 'block';
      const inp = document.getElementById('admin-pw-input');
      inp.classList.remove('admin-shake'); void inp.offsetWidth; inp.classList.add('admin-shake');
      setTimeout(()=>inp.classList.remove('admin-shake'), 400);
    }
  }
}

function doAdminLogin(){ tryLogin(); }

function doAdminLogout(){
  isAdmin = false;
  clearTimeout(sessionTimer); clearInterval(sessionCountdown);
  document.getElementById('session-warning').classList.remove('show');
  updateAuthUI();
  const locked = ['records','employees','departments','reports','payslip','empprofile'];
  const activeTab = document.querySelector('.section.active');
  if(activeTab && locked.includes(activeTab.id.replace('tab-',''))) {
    document.querySelectorAll('.section').forEach(s=>s.classList.remove('active'));
    document.querySelectorAll('.nav-item').forEach(b=>b.classList.remove('active'));
    document.getElementById('tab-dashboard').classList.add('active');
    document.querySelector('[onclick*="dashboard"]').classList.add('active');
    document.getElementById('topbar-title').textContent='Dashboard';
    renderDashboard();
  }
  if(monthlyEditMode){ monthlyEditMode=false; renderMonthly(); }
  toast('Admin signed out');
}

function doHRLogout(){
  isHR = false;
  updateAuthUI();
  const activeTab = document.querySelector('.section.active');
  if(activeTab && ['tab-payslip','tab-empprofile','tab-records','tab-employees','tab-departments','tab-reports'].includes(activeTab.id)){
    document.querySelectorAll('.section').forEach(s=>s.classList.remove('active'));
    document.querySelectorAll('.nav-item').forEach(b=>b.classList.remove('active'));
    document.getElementById('tab-dashboard').classList.add('active');
    document.querySelector('[onclick*="dashboard"]').classList.add('active');
    document.getElementById('topbar-title').textContent='Dashboard';
    renderDashboard();
  }
  toast('HR signed out');
}

function doMgrLogout(){
  isMgr = false;
  updateAuthUI();
  const activeTab = document.querySelector('.section.active');
  if(activeTab && ['tab-records','tab-employees','tab-departments','tab-reports'].includes(activeTab.id)){
    document.querySelectorAll('.section').forEach(s=>s.classList.remove('active'));
    document.querySelectorAll('.nav-item').forEach(b=>b.classList.remove('active'));
    document.getElementById('tab-dashboard').classList.add('active');
    document.querySelector('[onclick*="dashboard"]').classList.add('active');
    document.getElementById('topbar-title').textContent='Dashboard';
    renderDashboard();
  }
  toast('Manager signed out');
}

function updateAuthUI(){
  const anyAdmin   = isAdmin;
  const anyHR      = isHR || isAdmin;
  const anyMgmt    = isMgr || isHR || isAdmin;
  const anyProfile = !!profileEmpId;
  const anyLoggedIn = anyAdmin || isHR || isMgr || anyProfile;

  // Show/hide the ACCESS login form
  document.getElementById('all-logged-out').style.display    = anyLoggedIn ? 'none' : 'block';
  // Show/hide role badges
  document.getElementById('admin-logged-in').style.display   = isAdmin    ? 'block' : 'none';
  document.getElementById('hr-logged-in').style.display      = isHR       ? 'block' : 'none';
  document.getElementById('mgr-logged-in').style.display     = isMgr      ? 'block' : 'none';
  document.getElementById('profile-logged-in').style.display = (anyProfile && !isAdmin && !isHR && !isMgr) ? 'block' : 'none';

  // ── My Profile nav ──
  const profileItems = document.getElementById('profile-nav-items');
  const profileMsg   = document.getElementById('profile-locked-msg');
  const profileIcon  = document.getElementById('profile-lock-icon');
  if(anyProfile || isAdmin){
    profileItems.style.display = 'block';
    profileMsg.style.display   = 'none';
    profileIcon.className      = 'ti ti-lock-open';
    profileIcon.style.color    = 'rgba(16,185,129,.7)';
  } else {
    profileItems.style.display = 'none';
    profileMsg.style.display   = 'block';
    profileIcon.className      = 'ti ti-lock';
    profileIcon.style.color    = 'rgba(255,255,255,.25)';
  }

  // ── Management nav ──
  const mgmtItems = document.getElementById('mgmt-nav-items');
  const mgmtMsg   = document.getElementById('mgmt-locked-msg');
  const mgmtIcon  = document.getElementById('mgmt-lock-icon');
  if(anyMgmt){
    mgmtItems.style.display = 'block';
    mgmtMsg.style.display   = 'none';
    mgmtIcon.className      = 'ti ti-lock-open';
    mgmtIcon.style.color    = isMgr && !isAdmin && !isHR ? 'rgba(245,158,11,.7)' : 'rgba(59,130,246,.7)';
  } else {
    mgmtItems.style.display = 'none';
    mgmtMsg.style.display   = 'block';
    mgmtIcon.className      = 'ti ti-lock';
    mgmtIcon.style.color    = 'rgba(255,255,255,.25)';
  }

  // ── HR nav ──
  const hrItems = document.getElementById('hr-nav-items');
  const hrMsg   = document.getElementById('hr-locked-msg');
  const hrIcon  = document.getElementById('hr-lock-icon');
  if(anyHR){
    hrItems.style.display = 'block';
    hrMsg.style.display   = 'none';
    hrIcon.className      = 'ti ti-lock-open';
    hrIcon.style.color    = 'rgba(16,185,129,.7)';
  } else {
    hrItems.style.display = 'none';
    hrMsg.style.display   = 'block';
    hrIcon.className      = 'ti ti-lock';
    hrIcon.style.color    = 'rgba(255,255,255,.25)';
  }

  // Monthly edit only for admin
  const editBtn = document.getElementById('monthly-edit-btn');
  if(editBtn) editBtn.style.opacity = isAdmin ? '1' : '.45';
}

function requireAdmin(fn, btn){
  if(isAdmin){ if(fn) fn(btn); return; }
  const input = document.getElementById('admin-pw-input');
  input.focus();
  input.classList.remove('admin-shake'); void input.offsetWidth; input.classList.add('admin-shake');
  document.getElementById('admin-pw-err').style.display = 'none';
  toast('Admin login required');
}

// init auth UI state on load
updateAuthUI();

// Clock
function tick(){
  const n=getManilaDate();
  let h=n.getHours(),m=n.getMinutes(),s=n.getSeconds();
  const ampm=h<12?'AM':'PM';
  const h12=h%12||12;
  document.getElementById('live-clock').textContent=`${p2(h12)}:${p2(m)}:${p2(s)} ${ampm}`;
  document.getElementById('live-date').textContent=`${DAYS[n.getDay()]}, ${MONTHS[n.getMonth()]} ${n.getDate()}, ${n.getFullYear()}`;
  document.getElementById('topbar-date').textContent=`${DAYS[n.getDay()]}, ${MS[n.getMonth()]} ${n.getDate()} ${n.getFullYear()}`;
}
setInterval(tick,1000);tick();

// ── Boot sequence ──
async function boot(){
  // 1. Load from localStorage/cache immediately — instant render
  const hadCache = loadLocal();

  // 2. Render UI immediately — cached data shows at once, Firebase updates silently
  if (hadCache) {
    setSyncStatus('cached'); // show "Cached — syncing…" while Firebase connects
  } else {
    setSyncStatus('syncing'); // first-ever visit — wait for Firebase
  }
  renderDashboard(); renderClockSel(); populateDeptSelects(); updateAuthUI();
  renderCurrentTab();

  // 3. Connect to Firebase in background — real-time listener updates all devices
  initFirebase();
}
// ── Event delegation for all table buttons ──
// This works reliably in iFrames and avoids inline onclick issues
document.addEventListener('click', function(e){
  // Walk up from click target to find a button (handles clicks on <i> icons inside buttons)
  const btn = e.target.closest('button[data-id], button[data-empid]');
  if(!btn) return;

  const id = parseInt(btn.dataset.id);

  // Employee table
  if(btn.classList.contains('emp-edit-btn')){
    openEditEmpModal(id);
  }
  if(btn.classList.contains('emp-del-btn')){
    if(!isAdmin){toast('Admin login required');return;}
    if(!confirm(`Remove employee? This cannot be undone.`)) return;
    removeEmployee(id);
  }

  // Department table
  if(btn.classList.contains('dept-edit-btn')){
    openDeptEditModal(id);
  }
  if(btn.classList.contains('dept-del-btn')){
    if(!isAdmin){toast('Admin login required');return;}
    openDeptDelModal(id);
  }

  // Leave requests in Records tab
  if(btn.classList.contains('leave-approve-btn')){
    approveLeaveRequest(id);
  }
  if(btn.classList.contains('leave-reject-btn')){
    rejectLeaveRequest(id);
  }

  // Monthly report edit cells
  if(btn.classList.contains('month-cell-btn')){
    const empId = parseInt(btn.dataset.empid);
    const date  = btn.dataset.date;
    cycleAttendanceStatus(empId, date);
  }
});

// ── Absent Auto-Mark ──
function autoMarkAbsent(){
  const now=new Date();
  const h=now.getHours();
  // Run at end of workday — after 6PM
  if(h<18) return;
  employees.forEach(e=>{
    const existing=records.find(r=>r.empId===e.id&&r.date===todayStr);
    if(!existing){
      records.push({id:recId++,empId:e.id,empName:e.name,deptId:e.deptId,date:todayStr,cin:'—',cout:'—',hrs:'0',status:'Absent',overtime:0});
    }
  });
  saveData();
}
// Check every 30 minutes
setInterval(autoMarkAbsent, 30*60*1000);

// ── Session Timeout (3 minutes) ──
let sessionTimer=null;
let sessionCountdown=null;
let sessionSecondsLeft=180;

function resetSessionTimer(){
  clearTimeout(sessionTimer);
  clearInterval(sessionCountdown);
  document.getElementById('session-warning').classList.remove('show');
  sessionSecondsLeft=180;
  if(!isAdmin) return;
  // Warn at 60 seconds remaining
  sessionTimer=setTimeout(()=>{
    sessionSecondsLeft=60;
    document.getElementById('session-warning').classList.add('show');
    sessionCountdown=setInterval(()=>{
      sessionSecondsLeft--;
      const el=document.getElementById('session-countdown');
      if(el) el.textContent=sessionSecondsLeft+'s';
      if(sessionSecondsLeft<=0){
        clearInterval(sessionCountdown);
        document.getElementById('session-warning').classList.remove('show');
        doAdminLogout();
        toast('Admin session expired — logged out');
      }
    },1000);
  },(180-60)*1000); // start countdown after 2 minutes
}

// Reset timer on any user interaction
['click','keydown','mousemove','touchstart'].forEach(evt=>{
  document.addEventListener(evt, ()=>{ if(isAdmin) resetSessionTimer(); }, {passive:true});
});

// ── Reports ──
function populateReportMonths(){
  const sel=document.getElementById('rpt-month');
  if(!sel) return;
  sel.innerHTML='';
  // Generate last 6 months
  for(let i=0;i<6;i++){
    const d=new Date(today.getFullYear(), today.getMonth()-i, 1);
    const val=`${d.getFullYear()}-${p2(d.getMonth()+1)}`;
    const label=`${MONTHS[d.getMonth()]} ${d.getFullYear()}`;
    sel.innerHTML+=`<option value="${val}">${label}</option>`;
  }
}

function populateReportDepts(){
  const sel=document.getElementById('rpt-dept');
  if(!sel) return;
  const cur=sel.value;
  sel.innerHTML='<option value="all">All Departments</option>';
  departments.forEach(d=>{sel.innerHTML+=`<option value="${d.id}">${d.name}</option>`;});
  if(cur) sel.value=cur;
}

function renderReports(){
  const monthVal=document.getElementById('rpt-month')?.value||`${today.getFullYear()}-${p2(today.getMonth()+1)}`;
  const deptFilter=document.getElementById('rpt-dept')?.value||'all';
  const empSearch=(document.getElementById('rpt-emp-search')?.value||'').toLowerCase();
  const [yr,mo]=monthVal.split('-').map(Number);
  const daysInMonth=new Date(yr,mo,0).getDate();

  let emps=employees;
  if(deptFilter!=='all') emps=emps.filter(e=>e.deptId===parseInt(deptFilter));
  if(empSearch) emps=emps.filter(e=>e.name.toLowerCase().includes(empSearch));

  // Get all working days in month (Mon-Fri)
  const workDays=[];
  for(let d=1;d<=daysInMonth;d++){
    const dt=new Date(yr,mo-1,d);
    const ds=`${yr}-${p2(mo)}-${p2(d)}`;
    if(dt.getDay()!==0&&dt.getDay()!==6&&new Date(ds)<=today) workDays.push(ds);
  }

  // ── Employee Summary Grid ──
  const grid=document.getElementById('rpt-emp-grid');
  if(grid){
    grid.innerHTML='';
    emps.forEach(e=>{
      const empRecs=records.filter(r=>r.empId===e.id&&r.date.startsWith(monthVal));
      const p=empRecs.filter(r=>r.status==='Present').length;
      const l=empRecs.filter(r=>r.status==='Late').length;
      const a=empRecs.filter(r=>r.status==='Absent').length;
      const lv=empRecs.filter(r=>r.status==='Leave').length;
      const ot=empRecs.reduce((s,r)=>s+(parseFloat(r.overtime)||0),0).toFixed(1);
      const rate=workDays.length?Math.round((p+l)/workDays.length*100):0;
      const rc=rate>=80?'#059669':rate>=60?'#D97706':'#DC2626';
      const ac=AV[e.ac%AV.length];
      grid.innerHTML+=`<div class="report-emp-card">
        <div class="report-emp-name" style="display:flex;align-items:center;gap:8px">
          <div class="avatar" style="background:${ac[0]};color:${ac[1]};width:26px;height:26px;font-size:10px;flex-shrink:0">${init(e.name)}</div>
          <div><div>${e.name}</div><div style="font-size:11px;color:var(--gray-400);font-weight:400">${getDept(e.deptId).name}</div></div>
          <span style="margin-left:auto;font-size:13px;font-weight:700;color:${rc}">${rate}%</span>
        </div>
        <div class="report-emp-stats" style="margin-top:8px">
          <span class="report-emp-stat" style="background:#D1FAE5;color:#065F46">✓ ${p} Present</span>
          <span class="report-emp-stat" style="background:#FEF3C7;color:#92400E">⏰ ${l} Late</span>
          <span class="report-emp-stat" style="background:#FEE2E2;color:#991B1B">✗ ${a} Absent</span>
          ${lv>0?`<span class="report-emp-stat" style="background:#E0E7FF;color:#3730A3">📅 ${lv} Leave</span>`:''}
          ${parseFloat(ot)>0?`<span class="report-emp-stat" style="background:#F3E8FF;color:#7C3AED">⏱ ${ot}h OT</span>`:''}
        </div>
      </div>`;
    });
    if(!emps.length) grid.innerHTML='<div style="color:var(--gray-400);font-size:13px;padding:20px">No employees found</div>';
  }

  // ── Tardiness Report ──
  const tardTb=document.getElementById('rpt-tardiness-tbody');
  if(tardTb){
    const tardData=emps.map(e=>{
      const empRecs=records.filter(r=>r.empId===e.id&&r.date.startsWith(monthVal));
      const late=empRecs.filter(r=>r.status==='Late').length;
      const absent=empRecs.filter(r=>r.status==='Absent').length;
      const ontime=empRecs.filter(r=>r.status==='Present').length;
      const rate=workDays.length?Math.round((ontime+late)/workDays.length*100):0;
      return {e,late,absent,ontime,rate};
    }).sort((a,b)=>b.late-a.late||b.absent-a.absent);
    tardTb.innerHTML='';
    tardData.forEach(({e,late,absent,ontime,rate})=>{
      const rc=rate>=80?'rate-good':rate>=60?'rate-mid':'rate-low';
      tardTb.innerHTML+=`<tr>
        <td><div style="font-weight:500">${e.name}</div></td>
        <td>${getDept(e.deptId).name}</td>
        <td><span style="font-weight:600;color:${late>3?'var(--danger)':late>0?'var(--warning)':'var(--success)'}">${late}</span></td>
        <td><span style="font-weight:600;color:${absent>3?'var(--danger)':absent>0?'var(--warning)':'var(--success)'}">${absent}</span></td>
        <td>${ontime}</td>
        <td><span class="${rc}">${rate}%</span></td>
      </tr>`;
    });
    if(!tardData.length) tardTb.innerHTML='<tr><td colspan="6"><div class="empty-state">No data</div></td></tr>';
  }

  // ── Most Hours Worked ──
  const hoursTb=document.getElementById('rpt-hours-tbody');
  if(hoursTb){
    const hoursData=emps.map(e=>{
      const empRecs=records.filter(r=>r.empId===e.id&&r.date.startsWith(monthVal)&&r.hrs!=='0'&&r.cin!=='—');
      const totalHrs=empRecs.reduce((s,r)=>s+parseFloat(r.hrs||0),0);
      const otDays=empRecs.filter(r=>parseFloat(r.overtime||0)>0).length;
      const avgHrs=empRecs.length?totalHrs/empRecs.length:0;
      return {e,totalHrs,avgHrs,otDays,days:empRecs.length};
    }).sort((a,b)=>b.totalHrs-a.totalHrs);
    hoursTb.innerHTML='';
    hoursData.forEach(({e,totalHrs,avgHrs,otDays},i)=>{
      const medal=i===0?'🥇':i===1?'🥈':i===2?'🥉':'';
      hoursTb.innerHTML+=`<tr>
        <td style="font-size:16px">${medal||`#${i+1}`}</td>
        <td><div style="font-weight:500">${e.name}</div></td>
        <td>${getDept(e.deptId).name}</td>
        <td style="font-weight:600;font-family:var(--font-mono)">${totalHrs.toFixed(1)}h</td>
        <td style="font-family:var(--font-mono)">${avgHrs.toFixed(1)}h</td>
        <td>${otDays>0?`<span class="badge badge-overtime">${otDays} days</span>`:'—'}</td>
      </tr>`;
    });
    if(!hoursData.length) hoursTb.innerHTML='<tr><td colspan="6"><div class="empty-state">No data</div></td></tr>';
  }
}

// ── Export CSV ──
function exportCSV(){
  const monthVal=document.getElementById('rpt-month')?.value||`${today.getFullYear()}-${p2(today.getMonth()+1)}`;
  const [yr,mo]=monthVal.split('-').map(Number);
  const filtered=records.filter(r=>r.date.startsWith(monthVal));
  if(!filtered.length){toast('No records to export');return;}
  const headers=['Employee','Department','Date','Clock In','Clock Out','Hours','Status','Overtime (hrs)'];
  const rows=filtered.map(r=>[
    r.empName,
    getDept(employees.find(e=>e.id===r.empId)?.deptId||0).name,
    fmtD(r.date),
    to12(r.cin),
    to12(r.cout),
    r.hrs,
    r.status,
    r.overtime||0
  ]);
  const csv=[headers,...rows].map(r=>r.map(v=>`"${v}"`).join(',')).join('\n');
  const blob=new Blob([csv],{type:'text/csv'});
  const url=URL.createObjectURL(blob);
  const a=document.createElement('a');
  a.href=url;
  a.download=`attendance_${MONTHS[mo-1]}_${yr}.csv`;
  a.click();
  URL.revokeObjectURL(url);
  toast(`Exported ${filtered.length} records`);
}

// ── Clock In/Out searchable name ──
let clockSelectedEmpId = null;

function renderClockSel(){
  filterClockEmpList();
  updClockStatus();
}

function filterClockEmpList(){
  const search=(document.getElementById('clockEmpSearch')?.value||'').toLowerCase();
  const dropdown=document.getElementById('clockEmpDropdown');
  if(!dropdown) return;
  const filtered=employees.filter(e=>!search||e.name.toLowerCase().includes(search));
  dropdown.innerHTML='';
  filtered.slice(0,20).forEach(e=>{
    const ac=AV[e.ac%AV.length];
    const item=document.createElement('div');
    item.style.cssText='padding:10px 14px;cursor:pointer;font-size:13px;color:#111827;display:flex;align-items:center;gap:10px;border-bottom:1px solid #F3F4F6';
    item.innerHTML=`<div style="width:28px;height:28px;border-radius:50%;background:${ac[0]};color:${ac[1]};display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex-shrink:0">${init(e.name)}</div><div><div style="font-weight:500">${e.name}</div><div style="font-size:11px;color:#9CA3AF">${getDept(e.deptId).name}</div></div>`;
    item.onmouseenter=()=>item.style.background='#F9FAFB';
    item.onmouseleave=()=>item.style.background='';
    item.onclick=()=>{
      clockSelectedEmpId=e.id;
      document.getElementById('clockEmpSelect').value=e.id;
      document.getElementById('clockEmpSearch').value=e.name;
      dropdown.style.display='none';
      updClockStatus();
    };
    dropdown.appendChild(item);
  });
  if(!filtered.length){
    dropdown.innerHTML='<div style="padding:12px 14px;font-size:13px;color:#9CA3AF">No employees found</div>';
  }
  dropdown.style.display='block';
}

// Close dropdown when clicking outside
document.addEventListener('click',e=>{
  const dd=document.getElementById('clockEmpDropdown');
  const inp=document.getElementById('clockEmpSearch');
  if(dd&&inp&&!dd.contains(e.target)&&e.target!==inp){
    dd.style.display='none';
  }
});

// Update startPinFlow to use clockSelectedEmpId
function getSelectedClockEmpId(){
  const val=document.getElementById('clockEmpSelect')?.value;
  return val?parseInt(val):null;
}

// ── My Profile ──
let profileEmpId = null;

function doProfileLogout(){
  profileEmpId = null;
  updateAuthUI();
  const active = document.querySelector('.section.active');
  if(active && ['tab-profile','tab-myPayslip'].includes(active.id)){
    document.querySelectorAll('.section').forEach(s=>s.classList.remove('active'));
    document.querySelectorAll('.nav-item').forEach(b=>b.classList.remove('active'));
    document.getElementById('tab-dashboard').classList.add('active');
    document.querySelector('[onclick*="dashboard"]').classList.add('active');
    document.getElementById('topbar-title').textContent='Dashboard';
    renderDashboard();
  }
  toast('Signed out of profile');
}

function populateProfileMonths(){
  const sel=document.getElementById('profile-month-sel');
  if(!sel)return;
  sel.innerHTML='';
  for(let i=0;i<6;i++){
    const d=new Date(today.getFullYear(),today.getMonth()-i,1);
    const val=`${d.getFullYear()}-${p2(d.getMonth()+1)}`;
    sel.innerHTML+=`<option value="${val}">${MONTHS[d.getMonth()]} ${d.getFullYear()}</option>`;
  }
}

function renderProfile(){
  if(!profileEmpId){toast('Please login with your PIN');return;}
  const emp=employees.find(e=>e.id===profileEmpId);
  if(!emp)return;
  populateProfileMonths();
  document.getElementById('profile-heading').textContent=`${emp.name}'s Attendance`;
  document.getElementById('profile-subheading').textContent=`${emp.role} · ${getDept(emp.deptId).name}`;
  const monthVal=document.getElementById('profile-month-sel')?.value||`${today.getFullYear()}-${p2(today.getMonth()+1)}`;
  const empRecs=records.filter(r=>r.empId===profileEmpId&&r.date.startsWith(monthVal));
  const [yr,mo]=monthVal.split('-').map(Number);
  const daysInMonth=new Date(yr,mo,0).getDate();
  const workDays=[];
  for(let d=1;d<=daysInMonth;d++){
    const dt=new Date(yr,mo-1,d);
    const ds=`${yr}-${p2(mo)}-${p2(d)}`;
    if(dt.getDay()!==0&&dt.getDay()!==6&&new Date(ds)<=today) workDays.push(ds);
  }
  const p=empRecs.filter(r=>r.status==='Present').length;
  const l=empRecs.filter(r=>r.status==='Late').length;
  const a=empRecs.filter(r=>r.status==='Absent').length;
  const lv=empRecs.filter(r=>r.status==='Leave').length;
  const ot=empRecs.reduce((s,r)=>s+(parseFloat(r.overtime)||0),0).toFixed(1);
  const rate=workDays.length?Math.round((p+l)/workDays.length*100):0;
  const rc=rate>=80?'var(--success)':rate>=60?'var(--warning)':'var(--danger)';
  // Leave balance — count all approved leaves this year
  const thisYear=today.getFullYear().toString();
  const usedLeave=(leaves||[]).filter(l2=>l2.empId===profileEmpId&&l2.status==='Approved'&&l2.from.startsWith(thisYear));
  const usedDays=usedLeave.reduce((s,l2)=>s+Math.round((new Date(l2.to)-new Date(l2.from))/(86400000))+1,0);
  const allowance=emp.leaveAllowance||DEFAULT_LEAVE_DAYS;
  const remaining=Math.max(0,allowance-usedDays);
  const lvColor=remaining>5?'var(--info)':remaining>0?'var(--warning)':'var(--danger)';
  document.getElementById('profile-month-summary').style.gridTemplateColumns='repeat(5,1fr)';
  document.getElementById('profile-month-summary').innerHTML=`
    <div class="sum-card"><div class="sum-card-label">Present</div><div class="sum-card-val" style="color:var(--success)">${p}</div></div>
    <div class="sum-card"><div class="sum-card-label">Late</div><div class="sum-card-val" style="color:var(--warning)">${l}</div></div>
    <div class="sum-card"><div class="sum-card-label">Absent</div><div class="sum-card-val" style="color:var(--danger)">${a}</div></div>
    <div class="sum-card"><div class="sum-card-label">Attendance Rate</div><div class="sum-card-val" style="color:${rc}">${rate}%</div></div>
    <div class="sum-card"><div class="sum-card-label">Leave Balance ${thisYear}</div><div class="sum-card-val" style="color:${lvColor}">${remaining}<span style="font-size:13px;font-weight:400;color:var(--gray-400)">/${allowance}</span></div><div style="font-size:11px;color:var(--gray-400);margin-top:2px">${usedDays} used</div></div>`;
  // Calendar grid header
  const allDays=[];
  for(let d=1;d<=daysInMonth;d++){
    const dt=new Date(yr,mo-1,d);
    allDays.push({d,dow:dt.getDay(),we:dt.getDay()===0||dt.getDay()===6,str:`${yr}-${p2(mo)}-${p2(d)}`});
  }
  let hdr='<tr><th style="text-align:left;position:sticky;left:0;background:var(--gray-50);min-width:60px">Day</th>';
  allDays.forEach(({d,dow,we,str})=>{
    const isT=str===todayStr;
    hdr+=`<th class="${we?'wk-col':''} ${isT?'today-col':''}" style="${we?'opacity:.5':''}"><div>${d}</div><div style="font-size:9px;font-weight:400">${DAYS[dow].slice(0,2)}</div></th>`;
  });
  hdr+='</tr>';
  document.getElementById('profile-thead').innerHTML=hdr;
  let row=`<tr><td style="position:sticky;left:0;background:white;font-weight:500;font-size:12px;padding:6px 12px">${emp.name.split(' ')[0]}</td>`;
  allDays.forEach(({we,str})=>{
    if(we){row+=`<td><span class="day-cell WE">—</span></td>`;return;}
    if(new Date(str)>today){row+=`<td><span class="day-cell ND"></span></td>`;return;}
    const rec=records.find(r=>r.empId===profileEmpId&&r.date===str);
    const st=rec?rec.status:'Absent';
    let code='A',lbl='A';
    if(st==='Present'){code='P';lbl='P';}
    else if(st==='Late'){code='L';lbl='L';}
    else if(st==='Leave'){code='V';lbl='LV';}
    row+=`<td><span class="day-cell ${code}" title="${st}${rec&&rec.cin!=='—'?' · '+to12(rec.cin):''}">${lbl}</span></td>`;
  });
  row+='</tr>';
  document.getElementById('profile-tbody').innerHTML=row;
  renderMyLeaveRequests();
}

function submitLeaveRequest(){
  if(!profileEmpId){toast('Please login first');return;}
  const type=document.getElementById('lr-type').value;
  const from=document.getElementById('lr-from').value;
  const to=document.getElementById('lr-to').value;
  const reason=document.getElementById('lr-reason').value.trim();
  if(!from||!to){toast('Please select leave dates');return;}
  if(new Date(from)>new Date(to)){toast('End date must be after start date');return;}
  const emp=employees.find(e=>e.id===profileEmpId);
  const days=Math.round((new Date(to)-new Date(from))/(86400000))+1;
  if(!leaves)leaves=[];
  leaves.push({id:leaveId++,empId:profileEmpId,empName:emp.name,deptName:getDept(emp.deptId).name,type,from,to,status:'Pending',reason,requestedAt:getManilaDateStr()});
  saveData();
  document.getElementById('lr-from').value='';
  document.getElementById('lr-to').value='';
  document.getElementById('lr-reason').value='';
  renderMyLeaveRequests();
  toast(`Leave request submitted for ${days} day${days>1?'s':''}`);
}

function renderMyLeaveRequests(){
  if(!profileEmpId)return;
  const myLeaves=(leaves||[]).filter(l=>l.empId===profileEmpId).sort((a,b)=>b.from.localeCompare(a.from));
  const div=document.getElementById('my-leave-requests');
  if(!div)return;
  if(!myLeaves.length){div.innerHTML='<div style="font-size:13px;color:var(--gray-400);padding-top:8px">No leave requests yet.</div>';return;}
  div.innerHTML=`<div style="font-size:12px;font-weight:600;color:var(--gray-600);margin-bottom:8px;margin-top:8px">My Leave Requests</div>`+
    myLeaves.map(l=>{
      const sc=l.status==='Pending'?'leave-pending':l.status==='Approved'?'leave-approved':l.status==='Rejected'?'leave-rejected':'leave-cancelled';
      return `<div style="display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--gray-100)">
        <div style="flex:1"><div style="font-size:13px;font-weight:500">${l.type}</div><div style="font-size:11.5px;color:var(--gray-400)">${fmtD(l.from)} → ${fmtD(l.to)}${l.reason?' · '+l.reason:''}</div></div>
        <span class="leave-type-tag ${sc}">${l.status}</span>
      </div>`;
    }).join('');
}

function renderMyPayslip(){
  if(!profileEmpId)return;
  const div=document.getElementById('my-payslip-list');
  const myPs=[...(payslips||[])].filter(p=>p.empId===profileEmpId).sort((a,b)=>b.id-a.id);
  if(!myPs.length){div.innerHTML='<div class="empty-state" style="padding:32px">No payslips generated yet. Ask your HR.</div>';return;}
  const fmt=n=>'₱'+Number(n||0).toLocaleString('en-PH',{minimumFractionDigits:2,maximumFractionDigits:2});
  div.innerHTML=`<div style="padding:4px 16px">` + myPs.map((p,i)=>`
    <details style="border-bottom:1px solid var(--gray-100);padding:12px 0" ${i===0?'open':''}>
      <summary style="display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none;outline:none">
        <div style="width:40px;height:40px;background:var(--accent-light);border-radius:10px;display:flex;align-items:center;justify-content:center">
          <i class="ti ti-file-invoice" style="color:var(--accent);font-size:18px"></i>
        </div>
        <div style="flex:1">
          <div style="font-weight:600;font-size:14px">${p.period}</div>
          <div style="font-size:11.5px;color:var(--gray-400)">Generated ${p.date}</div>
        </div>
        <div style="display:flex;align-items:center;gap:8px">
          ${p.fileData
            ? `<button class="btn-sm btn-primary" onclick="downloadPayslipFile(${p.id});event.preventDefault()" style="display:flex;align-items:center;gap:4px;font-size:12px"><i class="ti ti-download"></i> Download</button>`
            : `<span style="font-size:11px;color:var(--gray-400);background:var(--gray-100);padding:3px 8px;border-radius:4px">Pending file</span>`
          }
          <div style="font-size:17px;font-weight:700;color:var(--accent)">${fmt(p.net)}</div>
        </div>
        <i class="ti ti-chevron-down" style="color:var(--gray-400);font-size:14px;margin-left:4px"></i>
      </summary>
      <div style="margin-top:12px;background:var(--gray-50);border-radius:8px;padding:14px;font-size:13px">
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;margin-bottom:10px">
          <div><span style="color:var(--gray-400)">Days Worked</span><span style="float:right;font-weight:500">${p.daysWorked??'—'}</span></div>
          <div><span style="color:var(--gray-400)">Days Absent</span><span style="float:right;font-weight:500;color:var(--danger)">${p.daysAbsent??'—'}</span></div>
          <div><span style="color:var(--gray-400)">Overtime</span><span style="float:right;font-weight:500">${Number(p.totalOT||0).toFixed(1)}h</span></div>
          <div><span style="color:var(--gray-400)">OT Pay</span><span style="float:right;font-weight:500;color:var(--success)">${fmt(p.otPay)}</span></div>
        </div>
        <div style="border-top:1px solid var(--gray-200);padding-top:8px;display:grid;grid-template-columns:1fr 1fr;gap:6px">
          <div><span style="color:var(--gray-400)">Basic Salary</span><span style="float:right">${fmt(p.basicSalary)}</span></div>
          <div><span style="color:var(--gray-400)">COLA</span><span style="float:right">${fmt(p.cola)}</span></div>
          <div><span style="color:var(--gray-400)">Internet Allowance</span><span style="float:right">${fmt(p.internet)}</span></div>
          <div><span style="color:var(--gray-400)">Night Differential</span><span style="float:right">${fmt(p.nightdiff)}</span></div>
          <div style="grid-column:1/-1;border-top:1px solid var(--gray-200);margin-top:2px;padding-top:6px"><span style="font-weight:600">Gross Pay</span><span style="float:right;font-weight:600">${fmt(p.grossPay)}</span></div>
        </div>
        <div style="border-top:1px solid var(--gray-200);margin-top:8px;padding-top:8px;display:grid;grid-template-columns:1fr 1fr;gap:6px;color:var(--danger)">
          <div><span style="color:var(--gray-400)">SSS</span><span style="float:right">(${fmt(p.sss)})</span></div>
          <div><span style="color:var(--gray-400)">PhilHealth</span><span style="float:right">(${fmt(p.philhealth)})</span></div>
          <div><span style="color:var(--gray-400)">Pag-IBIG</span><span style="float:right">(${fmt(p.pagibig)})</span></div>
          <div><span style="color:var(--gray-400)">Withholding Tax</span><span style="float:right">(${fmt(p.tax)})</span></div>
          <div><span style="color:var(--gray-400)">Absence Deduction</span><span style="float:right">(${fmt(p.absentDed)})</span></div>
          <div><span style="color:var(--gray-400)">Other Deductions</span><span style="float:right">(${fmt(p.otherDed)})</span></div>
          <div style="grid-column:1/-1;border-top:1px solid var(--gray-200);margin-top:2px;padding-top:6px;color:var(--gray-900)"><span style="font-weight:600">Total Deductions</span><span style="float:right;font-weight:600;color:var(--danger)">(${fmt(p.deductions)})</span></div>
          <div style="grid-column:1/-1;border-top:1px solid var(--gray-200);margin-top:4px;padding-top:6px;color:var(--gray-900)">
            <span style="font-weight:700">Net Pay</span>
            <span style="float:right;font-weight:700;font-size:15px;color:var(--accent)">${fmt(p.net)}</span>
          </div>
        </div>
      </div>
    </details>`).join('') + `</div>`;
}

// Store payslips so employees can view them
let payslips=[];
let empProfiles=[]; // { empId, name, dob, address, sss, philhealth, tin, contact, personalEmail, workEmail }
let payslipId=1;

// ── Payslip ──
function populatePayslipSelects(){
  const esel=document.getElementById('ps-employee');
  if(!esel)return;
  const cur=esel.value;
  esel.innerHTML='';
  employees.forEach(e=>{esel.innerHTML+=`<option value="${e.id}">${e.name}</option>`;});
  if(cur)esel.value=cur;
  const msel=document.getElementById('ps-month');
  if(!msel)return;
  msel.innerHTML='';
  for(let i=0;i<12;i++){
    const d=new Date(today.getFullYear(),today.getMonth()-i,1);
    const val=`${d.getFullYear()}-${p2(d.getMonth()+1)}`;
    msel.innerHTML+=`<option value="${val}">${MONTHS[d.getMonth()]} ${d.getFullYear()}</option>`;
  }
}

function generatePayslip(){
  const empId=parseInt(document.getElementById('ps-employee').value);
  const monthVal=document.getElementById('ps-month').value;
  const basicSalary=parseFloat(document.getElementById('ps-salary').value)||0;
  const otRate=parseFloat(document.getElementById('ps-ot-rate').value)||0;
  const cola=parseFloat(document.getElementById('ps-cola').value)||0;
  const internet=parseFloat(document.getElementById('ps-internet').value)||0;
  const nightdiff=parseFloat(document.getElementById('ps-nightdiff').value)||0;
  const sss=parseFloat(document.getElementById('ps-sss').value)||0;
  const philhealth=parseFloat(document.getElementById('ps-philhealth').value)||0;
  const pagibig=parseFloat(document.getElementById('ps-pagibig').value)||0;
  const tax=parseFloat(document.getElementById('ps-tax').value)||0;
  const absentDed=parseFloat(document.getElementById('ps-absent-ded').value)||0;
  const otherDed=parseFloat(document.getElementById('ps-other-ded').value)||0;
  if(!basicSalary){toast('Please enter a basic salary');return;}
  const emp=employees.find(e=>e.id===empId);
  if(!emp)return;
  const [yr,mo]=monthVal.split('-').map(Number);
  const empRecs=records.filter(r=>r.empId===empId&&r.date.startsWith(monthVal));
  const daysWorked=empRecs.filter(r=>r.status==='Present'||r.status==='Late').length;
  const daysAbsent=empRecs.filter(r=>r.status==='Absent').length;
  const totalOT=empRecs.reduce((s,r)=>s+(parseFloat(r.overtime)||0),0);
  const otPay=totalOT*otRate;

  const grossPay = basicSalary + otPay + cola + internet + nightdiff;
  const totalDeductions = sss + philhealth + pagibig + tax + absentDed + otherDed;
  const netPay = grossPay - totalDeductions;

  const fmt=n=>'₱'+n.toLocaleString('en-PH',{minimumFractionDigits:2,maximumFractionDigits:2});
  const generatedDate=new Date().toLocaleDateString('en-PH',{year:'numeric',month:'long',day:'numeric'});
  document.getElementById('ps-out-name').textContent=emp.name;
  document.getElementById('ps-out-dept').textContent=getDept(emp.deptId).name;
  document.getElementById('ps-out-period').textContent=`${MONTHS[mo-1]} ${yr}`;
  document.getElementById('ps-out-days').textContent=daysWorked;
  document.getElementById('ps-out-absent').textContent=daysAbsent;
  document.getElementById('ps-out-ot').textContent=totalOT.toFixed(1)+'h';
  document.getElementById('ps-out-basic').textContent=fmt(basicSalary);
  document.getElementById('ps-out-otpay').textContent=fmt(otPay);
  document.getElementById('ps-out-cola').textContent=fmt(cola);
  document.getElementById('ps-out-internet').textContent=fmt(internet);
  document.getElementById('ps-out-nightdiff').textContent=fmt(nightdiff);
  document.getElementById('ps-out-gross').textContent=fmt(grossPay);
  document.getElementById('ps-out-sss').textContent=`(${fmt(sss)})`;
  document.getElementById('ps-out-philhealth').textContent=`(${fmt(philhealth)})`;
  document.getElementById('ps-out-pagibig').textContent=`(${fmt(pagibig)})`;
  document.getElementById('ps-out-tax').textContent=`(${fmt(tax)})`;
  document.getElementById('ps-out-absentded').textContent=`(${fmt(absentDed)})`;
  document.getElementById('ps-out-otherded').textContent=`(${fmt(otherDed)})`;
  document.getElementById('ps-out-ded').textContent=`(${fmt(totalDeductions)})`;
  document.getElementById('ps-out-net').textContent=fmt(netPay);
  document.getElementById('ps-out-date').textContent=generatedDate;
  document.getElementById('payslip-preview').style.display='block';

  // Save to payslips record (dedupe by empId + period)
  const periodLabel=`${MONTHS[mo-1]} ${yr}`;
  const existing=payslips.findIndex(p=>p.empId===empId&&p.period===periodLabel);
  const psRecord={
    id: existing>=0 ? payslips[existing].id : payslipId++,
    empId, empName:emp.name, deptId:emp.deptId,
    period:periodLabel, date:generatedDate,
    basicSalary, otPay, cola, internet, nightdiff, grossPay,
    sss, philhealth, pagibig, tax, absentDed, otherDed,
    deductions: totalDeductions, net:netPay,
    daysWorked, daysAbsent, totalOT
  };
  if(existing>=0) payslips[existing]=psRecord;
  else payslips.push(psRecord);
  localStorage.setItem('ita_payslips',JSON.stringify(payslips));
  saveToFirebase();
  renderHrPayslipList();
  toast(`Payslip generated and saved for ${emp.name}`);
}

function downloadPayslipFile(psId){
  const ps = payslips.find(p=>p.id===psId);
  if(!ps||!ps.fileData){ toast('No file attached to this payslip'); return; }
  const a = document.createElement('a');
  a.href = ps.fileData;
  a.download = ps.fileName || `Payslip_${ps.empName}_${ps.period}.pdf`;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

// ── Employee Profiles (HR) ──
function populateEmpProfileSelect(){
  const sel = document.getElementById('ep-select-emp'); if(!sel) return;
  const cur = sel.value;
  sel.innerHTML = '<option value="">— Select Employee —</option>';
  employees.forEach(e => {
    const opt = document.createElement('option');
    opt.value = e.id; opt.textContent = e.name;
    sel.appendChild(opt);
  });
  if(cur) sel.value = cur;
}

function loadEmpProfile(){
  const empId = parseInt(document.getElementById('ep-select-emp').value);
  if(!empId){ clearEmpProfileForm(); return; }
  const emp = employees.find(e=>e.id===empId);
  const prof = empProfiles.find(p=>p.empId===empId) || {};
  document.getElementById('ep-name').value          = emp ? emp.name : '';
  document.getElementById('ep-dob').value           = prof.dob          || '';
  document.getElementById('ep-address').value       = prof.address       || '';
  document.getElementById('ep-sss').value           = prof.sss           || '';
  document.getElementById('ep-philhealth').value    = prof.philhealth    || '';
  document.getElementById('ep-tin').value           = prof.tin           || '';
  document.getElementById('ep-contact').value       = prof.contact       || '';
  document.getElementById('ep-personal-email').value= prof.personalEmail || '';
  document.getElementById('ep-work-email').value    = prof.workEmail     || '';
  document.getElementById('ep-form-title').textContent = emp ? `Editing: ${emp.name}` : 'Add / Edit Profile';
}

function saveEmpProfile(){
  const empId = parseInt(document.getElementById('ep-select-emp').value);
  if(!empId){ toast('Please select an employee first'); return; }
  const prof = {
    empId,
    dob:          document.getElementById('ep-dob').value.trim(),
    address:      document.getElementById('ep-address').value.trim(),
    sss:          document.getElementById('ep-sss').value.trim(),
    philhealth:   document.getElementById('ep-philhealth').value.trim(),
    tin:          document.getElementById('ep-tin').value.trim(),
    contact:      document.getElementById('ep-contact').value.trim(),
    personalEmail:document.getElementById('ep-personal-email').value.trim(),
    workEmail:    document.getElementById('ep-work-email').value.trim(),
  };
  const idx = empProfiles.findIndex(p=>p.empId===empId);
  if(idx>=0) empProfiles[idx] = prof; else empProfiles.push(prof);
  saveData();
  renderEmpProfileList();
  toast('Profile saved');
}

function clearEmpProfileForm(){
  ['ep-select-emp','ep-dob','ep-address','ep-sss','ep-philhealth',
   'ep-tin','ep-contact','ep-personal-email','ep-work-email'].forEach(id=>{
    const el=document.getElementById(id); if(el) el.value='';
  });
  document.getElementById('ep-name').value='';
  document.getElementById('ep-form-title').textContent='Add / Edit Profile';
}

function renderEmpProfileList(){
  const div = document.getElementById('ep-profile-list'); if(!div) return;
  const q = (document.getElementById('ep-search')||{}).value?.toLowerCase()||'';
  const list = employees.filter(e=>!q||e.name.toLowerCase().includes(q));
  if(!list.length){ div.innerHTML='<div class="empty-state" style="padding:24px">No employees found.</div>'; return; }
  div.innerHTML = list.map(e=>{
    const p = empProfiles.find(x=>x.empId===e.id)||{};
    const ac = AV[e.ac%AV.length];
    const filled = [p.dob,p.sss,p.philhealth,p.tin,p.contact,p.personalEmail,p.workEmail,p.address].filter(Boolean).length;
    const pct = Math.round(filled/8*100);
    const dot = pct===100?'#10B981':pct>0?'#F59E0B':'#EF4444';
    return `<div class="ep-card">
      <div class="avatar" style="background:${ac[0]};color:${ac[1]};width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;flex-shrink:0">${init(e.name)}</div>
      <div>
        <div style="font-size:13px;font-weight:600;color:var(--gray-900)">${e.name}</div>
        <div class="ep-detail">
          ${p.contact?`<span><i class="ti ti-phone" style="font-size:10px"></i> ${p.contact}</span>`:''}
          ${p.workEmail?`<span><i class="ti ti-mail" style="font-size:10px"></i> ${p.workEmail}</span>`:''}
          ${p.sss?`<span>SSS: ${p.sss}</span>`:''}
          ${p.tin?`<span>TIN: ${p.tin}</span>`:''}
          ${!p.contact&&!p.workEmail&&!p.sss?'<span style="color:#EF4444">No profile yet</span>':''}
        </div>
      </div>
      <div style="display:flex;align-items:center;gap:8px">
        <span style="font-size:11px;color:${dot};font-weight:600">${pct}%</span>
        <button onclick="selectAndLoadProfile(${e.id})" style="background:var(--accent-light);border:none;border-radius:var(--radius-sm);padding:5px 10px;font-size:12px;cursor:pointer;color:var(--accent);font-family:var(--font)"><i class="ti ti-edit"></i> Edit</button>
      </div>
    </div>`;
  }).join('');
}

function selectAndLoadProfile(empId){
  const sel = document.getElementById('ep-select-emp');
  if(sel){ sel.value = empId; loadEmpProfile(); }
  window.scrollTo({top:0,behavior:'smooth'});
}

// ── HR Payslip List (with upload) ──
let psUploadTargetId = null; // which payslip id the pending file upload is for

function renderHrPayslipList(){
  const div = document.getElementById('hr-payslip-list');
  if(!div) return;
  if(!payslips.length){ div.innerHTML='<div class="empty-state" style="padding:24px">No payslips generated yet.</div>'; return; }

  // Group by employee
  const byEmp = {};
  [...payslips].sort((a,b)=>b.id-a.id).forEach(p=>{
    if(!byEmp[p.empId]) byEmp[p.empId] = { empName: p.empName, list: [] };
    byEmp[p.empId].list.push(p);
  });

  const fmt = n => '₱'+Number(n||0).toLocaleString('en-PH',{minimumFractionDigits:2,maximumFractionDigits:2});

  div.innerHTML = Object.values(byEmp).map(group=>`
    <div style="border-bottom:1px solid var(--gray-100);padding:14px 16px">
      <div style="font-weight:600;font-size:13px;margin-bottom:10px;display:flex;align-items:center;gap:6px">
        <i class="ti ti-user-circle" style="color:var(--accent)"></i> ${group.empName}
      </div>
      ${group.list.map(p=>`
        <div style="display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--gray-50)">
          <div style="flex:1">
            <div style="font-size:13px;font-weight:500">${p.period}</div>
            <div style="font-size:11px;color:var(--gray-400)">Net: ${fmt(p.net)} · Generated ${p.date}</div>
          </div>
          ${p.fileData
            ? `<span style="font-size:11px;color:var(--success);display:flex;align-items:center;gap:4px"><i class="ti ti-circle-check"></i> File uploaded</span>
               <button class="btn-sm" style="background:var(--gray-100);color:var(--gray-700)" onclick="removePayslipFile(${p.id})"><i class="ti ti-trash"></i> Remove</button>`
            : `<span style="font-size:11px;color:var(--gray-400)">No file</span>`
          }
          <button class="btn-sm btn-primary" onclick="triggerPayslipUpload(${p.id})">
            <i class="ti ti-upload"></i> ${p.fileData ? 'Replace' : 'Upload File'}
          </button>
        </div>`).join('')}
    </div>`).join('');
}

function triggerPayslipUpload(psId){
  psUploadTargetId = psId;
  const inp = document.getElementById('ps-upload-input');
  inp.value = ''; // reset so same file can be re-uploaded
  inp.click();
}

function handlePayslipFileUpload(event){
  const file = event.target.files[0];
  if(!file || psUploadTargetId === null) return;

  const maxMB = 4;
  if(file.size > maxMB * 1024 * 1024){
    toast(`File too large. Max ${maxMB}MB allowed.`);
    return;
  }

  const reader = new FileReader();
  reader.onload = function(e){
    const base64 = e.target.result; // data:application/pdf;base64,...
    const idx = payslips.findIndex(p=>p.id === psUploadTargetId);
    if(idx < 0){ toast('Payslip not found'); return; }
    payslips[idx].fileData     = base64;
    payslips[idx].fileName     = file.name;
    payslips[idx].fileType     = file.type;
    payslips[idx].fileUploaded = new Date().toLocaleDateString('en-PH',{year:'numeric',month:'long',day:'numeric'});
    localStorage.setItem('ita_payslips', JSON.stringify(payslips));
    saveToFirebase();
    toast(`File uploaded for ${payslips[idx].empName} — ${payslips[idx].period}`);
    renderHrPayslipList();
    psUploadTargetId = null;
  };
  reader.readAsDataURL(file);
}

function removePayslipFile(psId){
  const idx = payslips.findIndex(p=>p.id === psId);
  if(idx < 0) return;
  delete payslips[idx].fileData;
  delete payslips[idx].fileName;
  delete payslips[idx].fileType;
  delete payslips[idx].fileUploaded;
  localStorage.setItem('ita_payslips', JSON.stringify(payslips));
  saveToFirebase();
  toast('File removed');
  renderHrPayslipList();
}

function savePayslipPDF(){
  const preview=document.getElementById('payslip-preview');
  if(!preview||preview.style.display==='none'){
    toast('Generate a payslip first');return;
  }
  // Temporarily show only payslip for printing
  const name=document.getElementById('ps-out-name').textContent||'Employee';
  const period=document.getElementById('ps-out-period').textContent||'Payslip';
  const origTitle=document.title;
  document.title=`Payslip - ${name} - ${period}`;
  window.print();
  document.title=origTitle;
}

boot();
</script>
</body>
</html>