:root{
  --green-900:#0B3D2E;
  --green-800:#0E5138;
  --green-700:#116B47;
  --green-600:#158257;
  --green-glow: rgba(17,107,71,.18);
  --gold:#D4AF37;
  --gold-soft:#F4E4B0;
  --bg:#F3F1EA;
  --card-bg:#FFFFFF;
  --text-dark:#1C231F;
  --text-muted:#7A8580;
  --radius:20px;
  --shadow: 0 10px 30px rgba(11,61,46,0.08);
  --shadow-lg: 0 20px 50px rgba(11,61,46,0.14);
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'Inter','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text-dark);
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit;}

/* ---------- Layout Admin ---------- */
.app-shell{display:flex;min-height:100vh;}
.sidebar{
  width:260px;background:linear-gradient(180deg,var(--green-900),#082E22);color:#fff;flex-shrink:0;
  padding:26px 16px;display:flex;flex-direction:column;gap:5px;
}
.sidebar .brand{display:flex;align-items:center;gap:11px;margin-bottom:28px;padding:0 8px;}
.sidebar .brand .logo-badge{
  width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--gold),#B8912A);
  display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--green-900);
  box-shadow:0 6px 14px rgba(212,175,55,.35);
}
.sidebar .brand h1{font-size:15px;margin:0;line-height:1.3;font-weight:600;}
.sidebar a.nav-link{
  padding:11px 14px;border-radius:12px;color:#B9CBC1;font-size:14px;
  display:flex;align-items:center;gap:11px;transition:.18s;font-weight:500;
}
.sidebar a.nav-link:hover{background:rgba(255,255,255,.06);color:#fff;}
.sidebar a.nav-link.active{background:linear-gradient(135deg,var(--green-700),var(--green-600));color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.2);}
.sidebar .logout-link{margin-top:auto;color:#F2B8B8;}

.main-content{flex:1;padding:30px 34px;max-width:100%;}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px;flex-wrap:wrap;gap:12px;}
.topbar h2{margin:0;font-size:23px;font-weight:700;letter-spacing:-.01em;}
.topbar .subtitle{color:var(--text-muted);font-size:13px;margin-top:3px;}

.card{
  background:var(--card-bg);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:24px;border:1px solid rgba(11,61,46,.04);
}
.grid{display:grid;gap:20px;}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media(max-width:1000px){.grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr;}}

/* ---------- Mobile responsive sidebar (drawer) ---------- */
.mobile-topbar{display:none;}
.sidebar-overlay{display:none;}
@media(max-width:1024px){
  .app-shell{display:block;}
  .mobile-topbar{
    display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;
    background:linear-gradient(135deg,var(--green-900),#082E22);color:#fff;
    position:sticky;top:0;z-index:998;box-shadow:0 4px 14px rgba(0,0,0,.15);
  }
  .mobile-topbar .mt-left{display:flex;align-items:center;gap:12px;}
  .menu-dots-btn{
    background:rgba(255,255,255,.14);border:none;color:#fff;
    width:40px;height:40px;border-radius:10px;cursor:pointer;flex-shrink:0;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    padding:0;
  }
  .menu-dots-btn span{
    width:4px;height:4px;border-radius:50%;background:#fff;display:block;
  }
  .mobile-topbar .mt-title{font-weight:700;font-size:14.5px;}
  .sidebar{
    position:fixed;top:0;left:0;height:100vh;z-index:1000;
    transform:translateX(-104%);transition:transform .25s ease;
    box-shadow:0 0 40px rgba(0,0,0,.35);
  }
  .sidebar.open{transform:translateX(0);}
  .sidebar-overlay{
    display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);
    z-index:999;opacity:0;pointer-events:none;transition:opacity .2s ease;
  }
  .sidebar-overlay.show{opacity:1;pointer-events:auto;}
  .main-content{padding:20px 16px;}
}

.stat-card{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;position:relative;overflow:hidden;}
.stat-card .stat-icon{
  width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  font-size:19px;flex-shrink:0;
}
.stat-card .stat-value{font-size:27px;font-weight:800;letter-spacing:-.02em;line-height:1.1;}
.stat-card .stat-label{color:var(--text-muted);font-size:12.5px;margin-top:2px;font-weight:500;}
.stat-card .stat-trend{font-size:11.5px;font-weight:700;margin-top:8px;display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;}
.stat-trend.up{background:#DFF3E8;color:var(--green-800);}
.stat-trend.down{background:#FBE2E2;color:#A32222;}
.stat-trend.flat{background:#EFEFEF;color:#777;}

table{width:100%;border-collapse:collapse;font-size:14px;}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid #EEE;}
th{color:var(--text-muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.03em;}
tr:hover td{background:#FAFAF7;}

.badge{padding:4px 10px;border-radius:20px;font-size:12px;font-weight:600;display:inline-block;}
.badge-success{background:#DFF3E8;color:var(--green-800);}
.badge-warning{background:#FCEFD8;color:#8A5A00;}
.badge-danger{background:#FBE2E2;color:#A32222;}
.badge-muted{background:#EFEFEF;color:#666;}

.btn{
  border:none;border-radius:11px;padding:10px 18px;font-size:14px;font-weight:600;
  cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:.18s;
}
.btn-primary{background:linear-gradient(135deg,var(--green-700),var(--green-800));color:#fff;box-shadow:0 6px 16px var(--green-glow);}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 22px var(--green-glow);}
.btn-gold{background:linear-gradient(135deg,var(--gold),#B8912A);color:var(--green-900);}
.btn-outline{background:transparent;border:1px solid var(--green-700);color:var(--green-700);}
.btn-danger{background:#E24C4C;color:#fff;}
.btn-sm{padding:6px 12px;font-size:12px;}

/* ---------- Leaderboard / lists ---------- */
.leader-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #F0EFE8;}
.leader-row:last-child{border-bottom:none;}
.leader-rank{width:26px;height:26px;border-radius:8px;background:#F0EFE8;color:var(--text-muted);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.leader-avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.leader-info{flex:1;min-width:0;}
.leader-name{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.leader-meta{font-size:11.5px;color:var(--text-muted);}
.leader-pct{font-size:13px;font-weight:700;}

.progress-track{background:#EFEFE7;border-radius:20px;height:7px;overflow:hidden;margin-top:4px;}
.progress-fill{height:100%;border-radius:20px;background:linear-gradient(90deg,var(--green-600),var(--green-800));}

input,select,textarea{
  width:100%;padding:10px 12px;border-radius:10px;border:1px solid #DDD9CE;
  font-size:14px;background:#fff;font-family:inherit;
}
label{font-size:13px;font-weight:600;color:var(--text-dark);margin-bottom:6px;display:block;}
.form-group{margin-bottom:16px;}

/* ---------- Login / Kiosk shared ---------- */
.centered-screen{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--green-900),var(--green-700));
  padding:20px;
}
.auth-card{
  background:#fff;border-radius:22px;padding:36px;width:100%;max-width:380px;
  box-shadow:0 20px 50px rgba(0,0,0,.25);
}
.auth-card .logo-badge-lg{
  width:56px;height:56px;border-radius:14px;background:var(--gold);
  display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--green-900);
  font-size:20px;margin:0 auto 14px;
}
.auth-card h2{text-align:center;margin:0 0 4px;color:var(--green-900);}
.auth-card p.subtitle{text-align:center;color:var(--text-muted);font-size:13px;margin-bottom:22px;}

/* ---------- Kiosk ---------- */
.kiosk-wrap{max-width:480px;margin:0 auto;text-align:center;color:#fff;}
.kiosk-wrap h1{font-size:20px;margin-bottom:2px;}
.kiosk-wrap .clock{font-size:44px;font-weight:700;margin:10px 0 4px;letter-spacing:1px;}
.kiosk-wrap .date{opacity:.85;margin-bottom:22px;}
#qr-reader{border-radius:20px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.3);}
.kiosk-result{
  margin-top:20px;background:rgba(255,255,255,.12);border-radius:16px;padding:18px;
  backdrop-filter:blur(6px);
}
.kiosk-result.success{background:rgba(16,145,90,.35);}
.kiosk-result.error{background:rgba(226,76,76,.35);}

/* ---------- ID Card ---------- */
.id-card{
  width:340px;border-radius:22px;overflow:hidden;color:#fff;
  background:linear-gradient(160deg,var(--card-primary,#0B3D2E),var(--card-primary-dark,#0E5138));
  box-shadow:0 14px 30px rgba(0,0,0,.25);padding:22px;position:relative;
}
.id-card .card-header{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.id-card .card-header img.logo{width:38px;height:38px;object-fit:contain;background:#fff;border-radius:8px;padding:3px;}
.id-card .card-header .company-name{font-weight:700;font-size:14px;line-height:1.2;color:var(--card-accent,#D4AF37);}
.id-card .card-header .company-sub{font-size:9px;opacity:.85;}
.id-card hr{border:none;border-top:1px solid rgba(255,255,255,.25);margin:12px 0;}
.id-card .photo-wrap{width:96px;height:96px;border-radius:14px;overflow:hidden;margin:6px auto;border:3px solid rgba(255,255,255,.5);}
.id-card .photo-wrap img{width:100%;height:100%;object-fit:cover;}
.id-card .emp-name{text-align:center;font-weight:700;font-size:16px;margin-top:8px;}
.id-card .emp-pos{text-align:center;font-size:11px;opacity:.85;margin-bottom:10px;}
.id-card .qr-wrap{background:#fff;padding:10px;border-radius:12px;width:130px;margin:0 auto;}
.id-card .qr-wrap img{width:100%;display:block;}
.id-card .card-footer{text-align:center;font-size:8.5px;opacity:.75;margin-top:12px;}

@media print{
  body *{visibility:hidden;}
  .print-area, .print-area *{visibility:visible;}
  .print-area{position:absolute;left:0;top:0;}
}