@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=DM+Mono:wght@300;400;500&display=swap');

:root {
  --bg:        #f0faf4;
  --bg2:       #e6f5ec;
  --surface:   #ffffff;
  --surface2:  #f5fbf7;
  --surface3:  #eaf6ef;
  --border:    #c8e6d0;
  --border2:   #b2d9be;
  --primary:   #1a7a45;
  --primary2:  #22a05a;
  --primary3:  #2ecc71;
  --accent:    #0fa65c;
  --mint:      #52d68a;
  --teal:      #1abc9c;
  --amber:     #f39c12;
  --coral:     #e74c3c;
  --sky:       #3498db;
  --lavender:  #8e44ad;
  --text:      #12321e;
  --text2:     #3d6650;
  --text3:     #7aaa8c;
  --text4:     #aacfb8;
  --shadow:    0 2px 12px rgba(26,122,69,0.08);
  --shadow2:   0 4px 24px rgba(26,122,69,0.13);
  --sans:      'Plus Jakarta Sans', sans-serif;
  --mono:      'DM Mono', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 14px; }
body { background: var(--bg); color: var(--text); font-family: var(--sans); }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 8px; border: none; cursor: pointer; font-family: var(--sans); font-size: 0.78rem; font-weight: 600; transition: all 0.18s; }
.btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary2)); color: #fff; box-shadow: 0 2px 8px rgba(26,122,69,0.3); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(26,122,69,0.4); }
.btn-ghost { background: var(--surface); color: var(--text2); border: 1.5px solid var(--border); }
.btn-ghost:hover { background: var(--surface3); color: var(--primary); border-color: var(--primary); }
.btn-danger { background: rgba(231,76,60,0.08); color: var(--coral); border: 1.5px solid rgba(231,76,60,0.25); }

/* Cards */
.card { background: var(--surface); border: 1.5px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); }
.card-header { padding: 18px 22px; border-bottom: 1.5px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.card-title { font-weight: 700; font-size: 0.9rem; color: var(--text); }
.card-body { padding: 20px; }

/* Stat Cards */
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-bottom: 24px; }
.stat-card { background: var(--surface); border: 1.5px solid var(--border); border-radius: 14px; padding: 20px; position: relative; overflow: hidden; box-shadow: var(--shadow); transition: all 0.2s; }
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow2); }
.stat-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; }
.stat-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.stat-icon.green  { background: rgba(26,122,69,0.1); }
.stat-icon.mint   { background: rgba(82,214,138,0.15); }
.stat-icon.amber  { background: rgba(243,156,18,0.12); }
.stat-icon.coral  { background: rgba(231,76,60,0.1); }
.stat-icon.sky    { background: rgba(52,152,219,0.1); }
.stat-label { font-size: 0.68rem; color: var(--text3); font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 4px; }
.stat-value { font-size: 2.1rem; font-weight: 800; line-height: 1; }
.stat-value.green  { color: var(--primary); }
.stat-value.mint   { color: var(--accent); }
.stat-value.amber  { color: var(--amber); }
.stat-value.coral  { color: var(--coral); }
.stat-value.sky    { color: var(--sky); }
.stat-sub { font-size: 0.67rem; color: var(--text3); margin-top: 4px; }
.stat-trend { font-size: 0.67rem; color: var(--accent); font-weight: 600; margin-top: 4px; }
.stat-divider { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; border-radius: 0 0 14px 14px; }
.stat-divider.green { background: linear-gradient(90deg, var(--primary), var(--mint)); }
.stat-divider.amber { background: linear-gradient(90deg, var(--amber), #f5c518); }
.stat-divider.coral { background: linear-gradient(90deg, var(--coral), #ff6b81); }
.stat-divider.sky   { background: linear-gradient(90deg, var(--sky), var(--teal)); }
.stat-divider.mint  { background: linear-gradient(90deg, var(--accent), var(--mint)); }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 20px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.3px; }
.badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; display: inline-block; }
.badge-green    { background: rgba(26,122,69,0.1); color: var(--primary); border: 1px solid rgba(26,122,69,0.2); }
.badge-green::before { background: var(--primary); }
.badge-mint     { background: rgba(82,214,138,0.15); color: var(--accent); border: 1px solid rgba(82,214,138,0.3); }
.badge-mint::before { background: var(--accent); }
.badge-amber    { background: rgba(243,156,18,0.12); color: var(--amber); border: 1px solid rgba(243,156,18,0.25); }
.badge-amber::before { background: var(--amber); }
.badge-coral    { background: rgba(231,76,60,0.1); color: var(--coral); border: 1px solid rgba(231,76,60,0.2); }
.badge-coral::before { background: var(--coral); }
.badge-sky      { background: rgba(52,152,219,0.1); color: var(--sky); border: 1px solid rgba(52,152,219,0.2); }
.badge-sky::before { background: var(--sky); }
.badge-lavender { background: rgba(142,68,173,0.1); color: var(--lavender); border: 1px solid rgba(142,68,173,0.2); }
.badge-lavender::before { background: var(--lavender); }

/* Progress */
.progress-bar { height: 6px; background: var(--bg2); border-radius: 99px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 99px; transition: width 0.8s cubic-bezier(.4,0,.2,1); }
.progress-fill.green { background: linear-gradient(90deg, var(--primary), var(--mint)); }
.progress-fill.amber { background: linear-gradient(90deg, var(--amber), #ffd32a); }
.progress-fill.coral { background: linear-gradient(90deg, var(--coral), #ff7979); }
.progress-fill.sky   { background: linear-gradient(90deg, var(--sky), var(--teal)); }

/* Grid Layouts */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.section-gap { margin-bottom: 20px; }

/* Table */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.77rem; }
thead { background: linear-gradient(135deg, var(--surface3), var(--bg2)); }
th { padding: 11px 16px; text-align: left; font-size: 0.62rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text3); font-weight: 700; white-space: nowrap; }
td { padding: 12px 16px; border-bottom: 1.5px solid var(--border); color: var(--text2); white-space: nowrap; }
tr:hover td { background: var(--surface3); color: var(--text); }
tr:last-child td { border-bottom: none; }

/* Tabs */
.tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--border); margin-bottom: 22px; }
.tab { padding: 10px 18px; font-size: 0.77rem; font-weight: 600; color: var(--text3); cursor: pointer; border-bottom: 2.5px solid transparent; margin-bottom: -2px; transition: all 0.18s; border-radius: 8px 8px 0 0; }
.tab:hover { color: var(--primary); background: var(--surface3); }
.tab.active { color: var(--primary); border-bottom-color: var(--primary); background: var(--surface3); }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* Report Controls */
.report-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.filter-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.filter-select { background: var(--surface); border: 1.5px solid var(--border); color: var(--text2); padding: 7px 12px; border-radius: 8px; font-family: var(--sans); font-size: 0.75rem; font-weight: 500; }
.filter-select:focus { outline: none; border-color: var(--primary); }

/* Compliance Rows */
.compliance-card { background: var(--surface2); border: 1.5px solid var(--border); border-radius: 10px; padding: 16px; margin-bottom: 10px; }
.compliance-title { font-size: 0.62rem; letter-spacing: 2px; text-transform: uppercase; color: var(--text3); margin-bottom: 12px; font-weight: 700; }
.compliance-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 0.75rem; }
.compliance-row:last-child { border-bottom: none; }
.compliance-label { color: var(--text2); }
.compliance-value { color: var(--text); font-weight: 600; }

/* Chart Bars */
.chart-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.chart-bar-label { font-size: 0.65rem; color: var(--text3); width: 28px; text-align: right; font-family: var(--mono); }
.chart-bar-track { flex: 1; height: 8px; background: var(--bg2); border-radius: 99px; overflow: hidden; }
.chart-bar-fill { height: 100%; border-radius: 99px; transition: width 1.2s cubic-bezier(.4,0,.2,1); }
.chart-bar-pct { font-size: 0.65rem; color: var(--text3); width: 34px; font-family: var(--mono); }

/* Employee Avatar */
.emp-avatar { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.62rem; color: #fff; flex-shrink: 0; }

/* Biometric */
.bio-container { display: flex; flex-direction:column; align-items:center; gap: 20px; padding: 10px 0; }
.fingerprint-ring { width: 160px; height: 160px; border-radius: 50%; border: 2.5px solid var(--border2); display: flex; align-items: center; justify-content: center; position: relative; cursor: pointer; transition: all 0.3s; background: radial-gradient(circle, var(--surface3), var(--surface)); }
.fingerprint-ring:hover { border-color: var(--primary); }
.fingerprint-ring.scanning { border-color: var(--primary); animation: fp-pulse 1.5s infinite; background: radial-gradient(circle, rgba(26,122,69,0.06), var(--surface)); }
.fingerprint-ring.success  { border-color: var(--accent); background: radial-gradient(circle, rgba(46,204,113,0.08), var(--surface)); }
@keyframes fp-pulse { 0%,100%{ box-shadow: 0 0 0 0 rgba(26,122,69,0.25); } 50%{ box-shadow: 0 0 0 18px rgba(26,122,69,0); } }
.fp-svg { width: 80px; height: 80px; color: var(--border2); transition: all 0.3s; }
.fingerprint-ring.scanning .fp-svg { color: var(--primary); filter: drop-shadow(0 0 6px rgba(26,122,69,0.5)); }
.fingerprint-ring.success  .fp-svg { color: var(--accent); }
.scan-line { position: absolute; width: 120px; height: 2px; background: linear-gradient(90deg, transparent, var(--primary), transparent); top: 50%; animation: scan-anim 1.5s infinite; display: none; border-radius: 1px; }
.fingerprint-ring.scanning .scan-line { display: block; }
@keyframes scan-anim { 0%{top:25%;opacity:0;} 30%{opacity:1;} 70%{opacity:1;} 100%{top:75%;opacity:0;} }
.face-scan-box { width: 200px; height: 200px; border: 2.5px solid var(--border2); border-radius: 12px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; cursor: pointer; background: var(--surface2); transition: all 0.3s; }
.face-scan-box.scanning { border-color: var(--primary); }
.face-scan-box.success  { border-color: var(--accent); }
.face-corners::before, .face-corners::after { content: ''; position: absolute; width: 22px; height: 22px; border-color: var(--primary); border-style: solid; }
.face-corners::before { top: 10px; left: 10px; border-width: 2.5px 0 0 2.5px; border-radius: 4px 0 0 0; }
.face-corners::after  { bottom: 10px; right: 10px; border-width: 0 2.5px 2.5px 0; border-radius: 0 0 4px 0; }
.face-scan-line { position: absolute; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, rgba(26,122,69,0.7), transparent); top: 0; animation: face-anim 2s infinite; display: none; }
.face-scan-box.scanning .face-scan-line { display: block; }
@keyframes face-anim { 0%{top:0;} 100%{top:100%;} }
.face-icon { font-size: 3.8rem; opacity: 0.18; transition: all 0.3s; }
.face-scan-box.scanning .face-icon, .face-scan-box.success .face-icon { opacity: 0.7; }
.bio-status { font-size: 0.77rem; text-align: center; min-height: 22px; font-weight: 500; color: var(--text3); }
.bio-status.scanning { color: var(--primary); }
.bio-status.success  { color: var(--accent); }
.bio-status.fail     { color: var(--coral); }
.employee-select { width: 100%; background: var(--surface2); border: 1.5px solid var(--border); color: var(--text); padding: 9px 12px; border-radius: 8px; font-family: var(--sans); font-size: 0.78rem; font-weight: 500; }
.employee-select:focus { outline: none; border-color: var(--primary); }

/* Timeline */
.timeline-item { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.timeline-item:last-child { border-bottom: none; }
.timeline-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.timeline-dot.green { background: var(--primary); }
.timeline-dot.coral { background: var(--coral); }
.timeline-dot.amber { background: var(--amber); }
.timeline-dot.sky   { background: var(--sky); }
.timeline-text { font-size: 0.75rem; color: var(--text2); flex: 1; line-height: 1.5; }
.timeline-time { font-size: 0.65rem; color: var(--text3); flex-shrink: 0; font-family: var(--mono); }

/* Shift Cards */
.shift-card { background: var(--surface2); border: 1.5px solid var(--border); border-radius: 10px; padding: 16px; transition: all 0.2s; }
.shift-card:hover { border-color: var(--primary); box-shadow: var(--shadow); }

/* Payslip */
.payslip { background: var(--surface); border: 1.5px solid var(--border); border-radius: 14px; padding: 28px; box-shadow: var(--shadow2); }
.payslip-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 2px solid var(--border); }
.payslip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.payslip-section { padding: 0 20px; }
.payslip-section:first-child { padding-left: 0; border-right: 1.5px solid var(--border); }
.payslip-section-title { font-size: 0.62rem; letter-spacing: 2px; text-transform: uppercase; color: var(--text3); margin-bottom: 12px; font-weight: 700; }
.payslip-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--bg2); font-size: 0.75rem; }
.payslip-row.total { border-top: 1.5px solid var(--border); border-bottom: none; padding-top: 10px; margin-top: 6px; font-weight: 700; color: var(--text); }
.pay-amount { color: var(--primary); font-weight: 600; }
.pay-deduct { color: var(--coral); font-weight: 600; }
.net-pay-box { background: linear-gradient(135deg, var(--primary), var(--primary2)); border-radius: 12px; padding: 22px; text-align: center; margin-top: 20px; position: relative; overflow: hidden; }
.net-pay-box::after { content: ''; position: absolute; top: -30px; right: -30px; width: 100px; height: 100px; border-radius: 50%; background: rgba(255,255,255,0.08); }
.net-label { font-size: 0.65rem; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-bottom: 6px; }
.net-amount { font-size: 2rem; font-weight: 800; color: #fff; }
.net-words { font-size: 0.68rem; color: rgba(255,255,255,0.7); margin-top: 4px; }

/* Quick Actions */
.quick-actions { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 24px; }
.qa-btn { background: var(--surface); border: 1.5px solid var(--border); border-radius: 14px; padding: 18px; text-align: center; cursor: pointer; transition: all 0.2s; box-shadow: var(--shadow); }
.qa-btn:hover { border-color: var(--primary); background: linear-gradient(135deg, #f0faf4, #e6f7ec); transform: translateY(-2px); box-shadow: var(--shadow2); }
.qa-icon { font-size: 1.6rem; margin-bottom: 8px; }
.qa-label { font-size: 0.7rem; color: var(--text2); font-weight: 600; }

/* Toast */
.toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 300; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--surface); border: 1.5px solid var(--border); border-radius: 10px; padding: 13px 18px; font-size: 0.77rem; color: var(--text); min-width: 270px; display: flex; align-items: center; gap: 10px; animation: toastIn 0.3s ease; box-shadow: 0 8px 32px rgba(12,40,22,0.15); font-weight: 500; }
@keyframes toastIn { from{opacity:0;transform:translateX(20px);} to{opacity:1;transform:none;} }
.toast.success { border-left: 4px solid var(--primary); }
.toast.error   { border-left: 4px solid var(--coral); }
.toast.info    { border-left: 4px solid var(--sky); }

/* Animations */
@keyframes fadeSlide { from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:none;} }
.animate-in { animation: fadeSlide 0.3s ease both; }
.animate-in:nth-child(2) { animation-delay: 0.05s; }
.animate-in:nth-child(3) { animation-delay: 0.1s; }
.animate-in:nth-child(4) { animation-delay: 0.15s; }

@media(max-width:900px) {
  .stats-grid    { grid-template-columns: 1fr 1fr; }
  .grid-2,.grid-3{ grid-template-columns: 1fr; }
  .quick-actions { grid-template-columns: 1fr 1fr; }
}